はじめに

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

完成動作イメージ

①Boxのファイルを選んで、[・・・]-[統合]を選んで、[Share with LW](←名前は任意で変えられます）をクリック。

②LINE WORKSのトークへ送信する画面が開きます。ここでは、[本文]にBoxの共有リンクを自動で挿入しています。送る相手はその都度変わると思うので、連絡先を検索するかトークルームを検索するかして宛先を設定し、[送信]ボタンをクリック。

③すると、LINE WORKSのトークでBoxの共有リンクが送られます！

開発手順

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

Boxでウェブアプリ統合を作る

Box Developer アカウント作成

1. Box Developerサイトへアクセスし、中央の[開始する]をクリックします。
2. サインアップします。
3. 確認メールが送られます。
4. メールの確認をします。
5. Boxのログイン画面が表示されるので、ログインします。
6. 設定が完了したら、Developerコンソールへアクセスします。

新規アプリケーションの作成

1.　[アプリの新規作成]をクリックします。

2.[カスタムアプリ]を選択して、[次へ]をクリックします。

3.認証方法では、[標準OAuth2.0(ユーザー認証)]を選択して、[次へ]をクリックします。

４.アプリケーションに適当な名前をつけて[アプリの作成]をクリックします。
５.DeveloperTokenが発行されますが、ここでは使わないので、[アプリの表示]をクリックします。

ウェブアプリ統合の作成

1.作成したアプリケーションを開きます。
2.左のメニュー[統合]をクリックし、[新しいWebアプリ統合を作成]をクリックします。
必要な情報を入力していきます。
詳細な情報はBoxのドキュメントを参照してください。

• アプリ情報
  
  

• コールバック設定
  [クライアントコールバックのURL]は後に作成するHerokuのURLを入れるため、ここではダミーでhttps://localhostなどとダミーの値を入れておきます。
  

• コールバックパラメータ
  ここで設定した値は、Boxから自分のWebアプリケーションへ統合メニューをクリックすると送られます。
  

• 認証
  

• 統合ステータス
  テストが完了して公開するまでは、開発者だけに統合メニューが表示されるよう「開発」を選んでおきましょう。
  

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

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)を作成します。

.DS_Store
.gitignore
npm-debug.log
node_modules

6.Herokuがプログラム起動する際に実行するファイル(Procfile)を作成します。

web: node index.js

Herokuアプリケーションへ環境変数をセット

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

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

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

Boxからの通信を受けてLINE WORKSのトークルームへ投げるプログラムを書く

次は、index.jsを新規作成して、コードを書き、デプロイします。

コーディング

BoxのNode.js SDKを利用します。

https://github.com/box/box-node-sdk/

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

//Import Modulesvarexpress=require('express');varserver=express();varexpressSession=require('express-session');varBOX_CLIENT_ID=process.env.BOX_CLIENT_ID;varBOX_CLIENT_SECRET=process.env.BOX_CLIENT_SECRET;varPromise=require('bluebird');varBoxSDK=require('box-node-sdk');varbodyParser=require('body-parser');varbasicAuth=require('basic-auth-connect');varhelmet=require('helmet');varrequest=require('request');// Setup Restify Serverserver.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){returnres.status(404).json({error:{message:'Error!'}});}varauthCode=req.query.auth_code;if(!req.query.file_id){returnres.status(404).json({error:{message:'Error!'}});}varfileId=req.query.file_id;}catch(err){returnres.status(400).json({error:{message:err.message}});}varsdk=newBoxSDK({clientID:BOX_CLIENT_ID,clientSecret:BOX_CLIENT_SECRET});vartokenInfo={};varpromise=newPromise(function(resolve,reject){sdk.getTokensAuthorizationCodeGrant(authCode,null,function(err,res){if(err){reject(err);}tokenInfo=res;resolve();});});promise.then(function(){varclient=sdk.getBasicClient(tokenInfo.accessToken);// 共有リンク作成client.files.update(fileId,{shared_link:client.accessLevels.DEFAULT}).then(function(file){varsharedLinkURL=file.shared_link.url;//LINE WORKSのトークルームへ共有する用のURLを作成varlwurl="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)を入力し、[変更を保存]します。

テスト

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

LINE WORKS + Box連携

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