Box UI ElementsのContent OpenWithでG Suiteを開いてみた


この記事のシリーズ:

Box UI ElementsのContent OpenWithでBox Editをつかってみた
Box UI ElementsのContent OpenWithでG Suiteを開いてみた ← この記事
Box UI ElementsのContent OpenWithでファイルの更新に反応してみた
Box UI ElementsのContent OpenWithでファイルの更新に反応してみた クライアントサイド編

コードは、Githubでも確認いただけます。

概要

この記事は、Box UI ElementsのContent OpenWithでBox Editをつかってみた の続編です。

前の記事ではBoxEditを使うだけでしたが、GSuiteもつかってみました。

ここを参考にしています。
https://developer.box.com/guides/embed/ui-elements/open-with/

変えた部分

前回のコードをベースに、以下のsetup_update.jsをつくりました。
利用可能な統合をすべて登録しました。
G Suiteを利用するのに必要なexternal_app_user_idをApp Userにつけて更新しています。
以下のコードを実行すると、前回作成したAppUserでG Suiteのオンライン編集が利用できるようになります。

setup_update.js
const boxSDK = require("box-node-sdk");
const config = require("./config.json");
const axios = require("axios");

const USER_ID = "12771965844";

const main = async () => {
  const sdk = boxSDK.getPreconfiguredInstance(config);
  const saClient = sdk.getAppAuthClient("enterprise");

  // 前回作成したAppUserを更新
  // G Suiteを使いたい場合は、external_app_user_idに、G SuiteのE-mailアドレスを登録しておく必要がある。\
  const appUser = await saClient.users.update(USER_ID, {
    external_app_user_id: "[email protected]",
  });
  console.log(appUser); //戻り値ではexternal_app_user_idが見えない。

  // 現在利用可能なWebApp統合を一覧する
  const appIntegs = await saClient.get("/app_integrations");
  console.log("利用可能なWebApp統合一覧", appIntegs.body);

  /*
    {
      next_marker: null,
      entries: [
        { type: "app_integration", id: "10897" }, // Edit with G Suite <= 今回、これをつかいたい
        { type: "app_integration", id: "1338" }, // Edit with desktop apps <= これなんだろ・・
        { type: "app_integration", id: "13418" }, // Edit with desktop apps (SFC)  <= 13418がBox Editの統合
        { type: "app_integration", id: "3282" }, // Sign with Adobe Sign
      ],
      limit: 100,
    };
  */



  // clientオブジェクトから何故かpostの実行(client.post)がうまく機能しなかったので、axiosで実行する
  // Authorizationにつけるアクセストークンは、ServiceAccountのものを利用する必要がある。
  const saTokenInfo = await sdk.getEnterpriseAppAuthTokens();
  const saAxios = axios.create({
    baseURL: "https://api.box.com/2.0",
    headers: {
      Authorization: `Bearer ${saTokenInfo.accessToken}`,
    },
  });

  // 今回は、登録可能な統合は、全部登録する。
  for (const ai of appIntegs.body.entries) {

    // おまけ: 各統合の詳細情報を見たい場合
    // const info = await saClient.get(`/app_integrations/${ai.id}`);
    // console.log(info.body);

    await saAxios.post("/app_integration_assignments", {
      assignee: {
        type: "user",
        id: appUser.id,
      },
      app_integration: {
        type: "app_integration",
        id: ai.id,
      },
    });
  }
};

main();

試してみる

Google Docが選択できるようになりました。

Google Docsを選択すると、Google Docsがオンラインで開きます。

同じように、別途Excel、Powerpointのファイルを登録してみると、Google Sheets、Google Slidesも利用できました。

ちなみに:統合の個別情報

ちなみに、統合の情報を表示してみると、こんな内容がでてきます。
一緒に登録してみたものの、1338は、なんなんだろうか・・・

コンソール

// 利用可能なWebApp統合一覧 
{
  next_marker: null,
  entries: [
    { type: 'app_integration', id: '10897' },
    { type: 'app_integration', id: '1338' },
    { type: 'app_integration', id: '13418' },
    { type: 'app_integration', id: '3282' }
  ],
  limit: 100
}

// /app_integrations/10897
{
  type: 'app_integration',
  id: '10897',
  app: { type: 'app', id: '336417' },
  name: 'Edit with G Suite',
  description: 'Securely manage your Google Docs, Sheets and Slides in Box',
  executable_item_types: [ 'FILE' ],
  restricted_extensions: [
    'docx',   'gdoc',
    'xlsx',   'gsheet',
    'pptx',   'gslides',
    'gslide'
  ],
  scoped_to: 'parent'
}

// /app_integrations/1338
{
  type: 'app_integration',
  id: '1338',
  app: { type: 'app', id: '8636' },
  name: 'Edit with desktop apps',
  description: 'Open and edit file with desktop applications',
  executable_item_types: [ 'FILE' ],
  restricted_extensions: [],
  scoped_to: 'parent'
}

// /app_integrations/13418
{
  type: 'app_integration',
  id: '13418',
  app: { type: 'app', id: '8636' },
  name: 'Edit with desktop apps (SFC)',
  description: 'Open and edit document in your desktop',
  executable_item_types: [ 'FILE' ],
  restricted_extensions: [],
  scoped_to: 'self'
}

// /app_integrations/3282
{
  type: 'app_integration',
  id: '3282',
  app: { type: 'app', id: '81713' },
  name: 'Sign with Adobe Sign',
  description: 'Send your document for signature to Adobe Sign',
  executable_item_types: [ 'FILE' ],
  restricted_extensions: [
    'pdf',  'doc',
    'docx', 'xls',
    'xlsx', 'ppt',
    'pptx'
  ],
  scoped_to: 'root'
}

よくわからなかったところ

G Suiteが動くのは確認できたのですが、以下の点がよくわからなかったです・・・

  • Adobe Signはどうやって使えばいいのか不明
  • 統合の一覧に出てくる、1338は、Appユーザーに登録してみたものの、特にメニューにも出てこないのでなににつかうものなのか不明
  • 13418は前回からつかっていて、BoxEditなことは間違いないんだけど、SFCってなんのことなんだろ。。。