BoxにあるファイルをLINE WORKSトークルーム（チャット）で共有

# はじめに
BoxとLINE WORKSって連携してないんですか？
ってすっごいよく聞かれるので（仕事柄？）、Boxのウェブアプリ統合という機能を使って、BoxとLINE WORKSを連携機能を開発する記事を書きます。
連携と言っても、**Boxから直接LINE WORKSのトークルームへファイルを共有する**だけです。

# 完成動作イメージ

①Boxのファイルを選んで、[・・・]-[統合]を選んで、[Share with LW](←名前は任意で変えられます）をクリック。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/135983/297b3581-cfb7-10b7-b227-f6fda898e18e.png)

②LINE WORKSのトークへ送信する画面が開きます。ここでは、[本文]にBoxの共有リンクを自動で挿入しています。送る相手はその都度変わると思うので、連絡先を検索するかトークルームを検索するかして宛先を設定し、[送信]ボタンをクリック。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/135983/ea4fcc86-3943-1fb3-35c7-dc7e8c5ed3cc.png)

③すると、LINE WORKSのトークでBoxの共有リンクが送られます！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/135983/8df95dc0-6b60-1c24-0d00-5ab7b5652ba7.png)

# 開発手順

1. Boxでウェブアプリ統合を作る
2. HerokuでWebサーバーをたてる
3. Boxからの通信を受けてLINE WORKSのトークルームへ投げるプログラムを書く
4. プログラムをHerokuへデプロイ

## Boxでウェブアプリ統合を作る
###Box Developer アカウント作成
1. [Box Developerサイト](https://ja.developer.box.com/)へアクセスし、中央の[開始する]をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/135983/3d8e8c59-907f-151f-409c-7e744b76f6aa.png)
2. サインアップします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/135983/1614dab1-86c2-1e23-885e-8d6205494c03.png)
3. 確認メールが送られます。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/135983/db99d737-d2bf-f831-76d8-12cc641796e1.png)
4. メールの確認をします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/135983/91f53fbd-86cc-88e6-5518-b8b7d94ae761.png)
5. Boxのログイン画面が表示されるので、ログインします。
6. 設定が完了したら、[Developerコンソール](https://app.box.com/developers/console
)へアクセスします。

###新規アプリケーションの作成
1.　[アプリの新規作成]をクリックします。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/135983/664f64b5-c51f-37e7-c97b-140f03e9c7d2.png)
2.[カスタムアプリ]を選択して、[次へ]をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/135983/84875201-1a10-7d4c-6a40-f32380c635fe.png)
3.認証方法では、[標準OAuth2.0(ユーザー認証)]を選択して、[次へ]をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/135983/a59d7238-c262-f5e2-8fe2-0b0754336287.png)
４.アプリケーションに適当な名前をつけて[アプリの作成]をクリックします。
５.DeveloperTokenが発行されますが、ここでは使わないので、[アプリの表示]をクリックします。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/135983/eab9c19b-48ae-4a1a-eec0-81d0adc2999b.png)

###ウェブアプリ統合の作成
1.作成したアプリケーションを開きます。
2.左のメニュー[統合]をクリックし、[新しいWebアプリ統合を作成]をクリックします。
必要な情報を入力していきます。
詳細な情報は[Boxのドキュメント](https://ja.developer.box.com/docs/web-application-integrations)を参照してください。

- アプリ情報
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/135983/378d0408-63b8-7d5c-8d6e-82e1b72ab7bd.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/135983/d9e32e10-d1a0-8fa1-71ce-b2c867513f09.png)

- コールバック設定
[クライアントコールバックのURL]は後に作成するHerokuのURLを入れるため、ここではダミーで<https://localhost>などとダミーの値を入れておきます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/135983/9829be80-b20c-9e21-cd51-7f602e6399dd.png)

- コールバックパラメータ
ここで設定した値は、Boxから自分のWebアプリケーションへ統合メニューをクリックすると送られます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/135983/179eb335-5b8a-e35f-41ca-936521dd4a11.png)

- 認証
![image.png](https://qiita-image-store.s3.amazonaws.com/0/135983/d966e531-7107-6be2-680c-bf7bd0bd9cc1.png)

- 統合ステータス
テストが完了して公開するまでは、開発者だけに統合メニューが表示されるよう「開発」を選んでおきましょう。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/135983/10022d57-eeb4-54b8-3730-14f78fc4f8f7.png)

全て設定が終わったら右上の[変更を保存]をクリックし保存します。

## HerokuでWebサーバーをたてる
###Heroku環境構築
Herokuは日本語の資料がありましたので、こちらのサイトを参考にして環境構築をしてください。
> https://github.com/herokaijp/devcenter/wiki/quickstart

この時点では、「ステップ 3: ログイン」まで実施すれば大丈夫です。

###Herokuアプリケーション作成
1.HerokuCLIを使ってHerokuにログインします。

```
$ heroku login
Enter your Heroku credentials.
Email: <your email address>
Password (typing will be hidden): 
Logged in as <your email address>
```

2.Herokuでアプリケーションを作成します。
アプリケーション名は、Herokuの中で一意である必要があります。

```
$ heroku apps:create <アプリケーション名>
Creating ⬢ <アプリケーション名>... done
https://<アプリケーション名>.herokuapp.com/ | https://git.heroku.com/<アプリケーション名>.git　
```

3.Gitリポジトリを初期化します。

```
$ git init
```
4.リモートリポジトリとしてHerokuを追加します。

```
$ git remote add heroku https://git.heroku.com/<アプリケーション名>.git
```

5.Git管理対象外ファイル(.gitignore)を作成します。

```.gitignore
.DS_Store
.gitignore
npm-debug.log
node_modules
```
6.Herokuがプログラム起動する際に実行するファイル(Procfile)を作成します。

```Procfile
web: node index.js
```

### Herokuアプリケーションへ環境変数をセット
Boxの認証情報をHeroku環境変数としてセットしておきます。
セットする資格情報は下記の通りです。
Boxアプリの「クライアントID」「クライアント秘密コード」はBoxDeveloperコンソールの作成したアプリの[構成]-[OAuth 2.0資格情報]欄にあります。

| KEY              |補足                      |
|:-----------------|:------------------------|
| BOX_CLIENT_ID    |BoxアプリのクライアントID     |
| BOX_CLIENT_SECRET|Boxアプリのクライアント秘密コード |


Herokuへ環境変数を登録するコマンドは下記です。

```
$ heroku config:set　<KEY>="<VALUE>"
```


## Boxからの通信を受けてLINE WORKSのトークルームへ投げるプログラムを書く
次は、index.jsを新規作成して、コードを書き、デプロイします。

###コーディング
BoxのNode.js SDKを利用します。
> https://github.com/box/box-node-sdk/

以下はサンプルプログラムです。
（あくまで動作を確認するためのサンプルなので、業務で使う場合はセキュリティ等の検討を十分に行ってください。
[実稼働環境におけるベスト・プラクティス: セキュリティー](http://expressjs.com/ja/advanced/best-practice-security.html))

```index.js
//Import Modules
var express = require('express');
var server = express();
var expressSession = require('express-session');
var BOX_CLIENT_ID = process.env.BOX_CLIENT_ID;
var BOX_CLIENT_SECRET = process.env.BOX_CLIENT_SECRET;
var Promise = require('bluebird'); 
var BoxSDK = require('box-node-sdk');
var bodyParser = require('body-parser');
var basicAuth = require('basic-auth-connect');
var helmet = require('helmet');
var request = require('request');

// Setup Restify Server
server.use(bodyParser.urlencoded({ extended: true }));
server.use(expressSession({ secret: 'keyboard cat', resave: true, saveUninitialized: false }));
server.use(helmet());

server.listen(process.env.port || process.env.PORT || 3978, function () {
   console.log('%s listening to %s', server.name, server.url);
});

server.get('/api/box/sharewithlw', function(req, res){
  try {
    if (!req.query.auth_code){
      return res.status(404).json({
        error: {
          message: 'Error!'
        }
      });
    }
    var authCode = req.query.auth_code;

    if (!req.query.file_id) {
      return res.status(404).json({
        error: {
          message: 'Error!'
        }
      });
    }
    var fileId = req.query.file_id;
  } catch(err){
    return res.status(400).json({
      error: {
        message: err.message
      }
    });
  }

  var sdk = new BoxSDK({
    clientID: BOX_CLIENT_ID,
    clientSecret: BOX_CLIENT_SECRET
  });

  var tokenInfo = {};

  var promise = new Promise(function(resolve, reject){
    sdk.getTokensAuthorizationCodeGrant(authCode, null, function(err, res) {
      if(err){
        reject(err);
      }
      tokenInfo = res;
      resolve();
    });
  });
  promise.then(function(){
    var client = sdk.getBasicClient(tokenInfo.accessToken);
    // 共有リンク作成
    client.files.update(fileId, {shared_link: client.accessLevels.DEFAULT})
        .then(function(file){
          var sharedLinkURL = file.shared_link.url;
          //LINE WORKSのトークルームへ共有する用のURLを作成
          var lwurl = "https://talk.worksmobile.com/sendMessage?initContent=" + encodeURIComponent("boxの共有リンクを送ります。\n") + "&initLink=" + encodeURIComponent(JSON.stringify({"url":sharedLinkURL,"text":sharedLinkURL})) + "&serviceId=works#!/";
          res.redirect(301,lwurl);
      	});
  }).catch(function(err) {
    console.error(err);
  });
});
```

## プログラムをHerokuへデプロイ
Herokuへデプロイします。

```
$ git add . && git commit -m "<your message>" && git push heroku master
```

ログを確認する場合は、下記コマンドです。

```
$ heroku logs --tail
```

## Boxへ[クライアントコールバックのURL]をセット

1. BoxのDeveloperコンソールを開き、作成したアプリを開きます。
2. [統合]メニューの[コールバック設定]の[クライアントコールバックのURL]に、HerokuのアプリケーションURL+エンドポイント(https://<アプリケーション名>.herokuapp.com/api/box/sharewithlw)を入力し、[変更を保存]します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/135983/c1a2e64b-4283-2360-7b13-6b50c5addb54.png)

# テスト
Box上でLINE WORKSへ共有したいファイルを選んで、[・・・]→[統合]→[Share with LW]をクリックしてみてください！
**完成動作イメージ**と同様の動作をしたら成功です！

# LINE WORKS + Box連携
今回は、BoxのファイルをLINE WORKSのトークルームを選んで共有するというメニューを開発してみました。
このメニューがない場合どうやって共有するかというと、
Boxの共有ボタンをクリックして、共有リンクを発行して、共有リンクをコピーして、LINE WORKSのトークルームを開いて、共有リンクを貼り付けて、送信！と、めんどくさいですよね・・・
これらの操作をBoxのWebアプリ統合メニューを使うと、自動化できるので、興味ある方は是非チャレンジしてみてください。