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

この記事のシリーズ：

[Box UI ElementsのContent OpenWithでBox Editをつかってみた](https://qiita.com/kobay/items/8f01353308141813881f)
[Box UI ElementsのContent OpenWithでG Suiteを開いてみた](https://qiita.com/kobay/items/cfa15d894e17a0fba384)　←　この記事
[Box UI ElementsのContent OpenWithでファイルの更新に反応してみた](https://qiita.com/kobay/items/685a0cdf139ad896d43c)
[Box UI ElementsのContent OpenWithでファイルの更新に反応してみた クライアントサイド編](https://qiita.com/kobay/items/0169158c78447ffd2763)

コードは、[Github](https://github.com/kobay/box-openwith-example)でも確認いただけます。


## 概要

この記事は、[Box UI ElementsのContent OpenWithでBox Editをつかってみた](https://qiita.com/kobay/items/8f01353308141813881f) の続編です。

前の記事では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のオンライン編集が利用できるようになります。

```javascript: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: "yourname@example.com",
  });
  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.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/45767/857a2b74-d43f-f05a-ea87-22b63282a12e.png)

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

![google docs2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/45767/abbf7497-8703-a3f7-7a32-36d92f150e2f.png)


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

![googlesheets.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/45767/d856a11b-fe16-14b7-9d82-5668b7e3b41d.png)

![GoogleSlides.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/45767/e729f049-9743-e0d5-2164-0743ff519787.png)

## ちなみに：統合の個別情報

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

```shell:コンソール

// 利用可能な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ってなんのことなんだろ。。。