kintone×boxを連携してみた | トライステージ TECH BLOG

こんにちは！開発Gの渡辺です。

kintoneでは「添付フィールド」があり、そこでファイルをアップロードすることで、kintone上にファイルを保存することができます。

しかし、アップロードされたファイルを参照したい場合は、添付フィールドにあるファイル名をクリックするとファイルのダウンロードが始まり、ローカルにダウンロードしたファイルを参照する必要があります。

kintone上で保存しているファイルをプレビュー画面でみようと思ってもkintone標準機能では見ることができません。例えば、操作マニュアル等全ユーザーが対象のファイルをkintoneに挙げたとしても、ダウンロードしてからファイルを参照というのが若干ながら手間になります。

今回はboxというストレージサービスと連携して、box上に保存されているファイルをアップロード・ダウンロード・プレビュー参照できるようにしました。

サイボウズでkintoneとbox連携のプラグインがある

実はサイボウズ側で無料で使用できるkintone×box連携のプラグインが用意されています！そのため、初め実装する前にはプラグインで使用することを検討していました。

しかし、私自身まだまだ勉強不足なこともあり、この機にAPIについて理解を深めたいと思いました。

今回はboxのアプリトークン認証を利用して、kintoneのアプリからboxを使用できるように自前で実装しました。

box側でkintone連携するためのアプリを作成する

boxの開発者コンソールからアプリを作成し、アクセス制限付きアプリを選択します。

アクセス制限付きアプリを選択し、アプリ名を入力します。するとboxにアプリが１つ作成されますので、アプリを選択し、構成からアクセストークンを発行します。box側はこれで準備完了です。

アプリトークン認証で使用できるAPI

アプリトークン認証は、アプリケーションのアクセス権限がその所有アカウントに対するデータの読み取りおよび書き込みのみになる認証方式です。そのため、アプリトークン認証で使用できるAPIは少数になります。

アプリトークン認証でサポートされているAPI

フォルダの作成
ファイルのアップロード
ファイルのダウンロード
ファイルの削除
埋め込みリンクの取得

大体この程度しかAPIを使用することができないので、boxの豊富なAPIをがっつり使いたい場合は、認証方式を変更する必要があります！

kintoneからboxのフォルダを生成する

kintoneで外部へのAPI実行を実装します。

var url = 'https://api.box.com/2.0/folders'
var header = {
               'Authorization': 'Bearer [アクセストークン]'
               ,'Content-Type': 'application/json'
             }
// box内でフォルダを作成する
  var data = {
    'name' : 'テスト'
    ,'parent' : {
      'id':'0'
      }
    }
// boxのフォルダ作成を実行
kintone.proxy(url, POST, headers, data, function(body, status, headers){
    if(status == 201){
        //success
        const resp = JSON.parse(body);
        event['record']['フォルダ']['value'] = resp['id'];
        resolve(event);
    }else{
        console.log(status, JSON.parse(body), headers);
    }
}, function(error) {
     // error
     console.log(error); // proxy APIのレスポンスボディ(文字列)を表示
});

例になりますが、boxにフォルダ作成のAPIを送って、ステータスが201で返ってきましたらフォルダの作成が成功されます。

アクセストークンの隠蔽

カスタマイズの中にアクセストークンを記載してboxとの連携は可能ですが、カスタマイズ画面上でアクセストークンを記載するとGoogleDeveloperConsoleなどでだれでもその情報が見ることができるようになってしまいます。

例として上記の中にアクセストークンを直接記載しておりますが、実際は社内独自のkintoneプラグインの中にアクセストークンを記載し、API実行時にアクセストークンを読み込ませるようにしています。

詳しくはこちらをご参照ください。

kintoneからboxの画面を表示する

アプリトークン認証でサポートされている「埋め込みリンクの取得」を使用して、kintoneからboxのフォルダを参照できるようにします。

box側で用意されているUIElementを使用してboxフォルダを参照できるようにします。今回はContentExplorerを使用しました。

  var folderId = "123";
      var accessToken = "abc";
      var contentExplorer = new Box.ContentExplorer();
      contentExplorer.show(folderId, accessToken, {
        container: ".container"
      });

kintoneでboxフォルダ内を参照することができました。