カテゴリー内の他の記事

Amazon S3 連携 -kintoneのファイル保存先をS3にする-

フォローする

(著者:サイボウズ 北川 恭平

はじめに

kintoneに大容量のファイルをアップロードしたいけれど容量が気になる…といった時に、便利なTipsをご紹介します。

kintoneから、標準のウィジェットのようなパーツをJavaScriptで表現し、そのパーツから外部のストレージサービスにファイルを登録することを目指したいと思います。
既にAmazon S3(以下S3)を利用していてファイルの保存先をS3にしたい場合や、大容量のファイルを取り扱いたいという方必見です。

Amazon S3とは

みなさん、S3をご存じでしょうか?
サービス概要の詳細はこちらにありますが、ざっくりいうと実際に使用した分だけの料金で使えるクラウドストレージサービスです。
今回はこちらの、Amazon S3を使ってkintoneとの連携サンプルを作成していきます。

準備

kintoneアプリ

まずは、JavaScript適用用のkintoneアプリを作ります。
以下のように、2つのパーツが必須です。

フィールド名 フィールドタイプ フィールドコード 説明
保存用フィールド 文字列(複数行) attachment ファイル情報を保存するフィールド
- スペース s3Space ファイル保存用パーツを表示するスペース

AWS(ユーザー)

まずは、API実行ユーザーを作成します。「Identity & Access Management」を選びます。

新規ユーザーの作成より、任意のユーザーを作成します。
今回は、ユーザーごとにアクセスキーを生成するにチェックをいれます。

 

ユーザーが作成されると、アクセスキーIDとシークレットアクセスキーが生成されます。後程使うのでメモりましょう。

次に作成されたユーザーにポリシーをアタッチします。横文字ばっかりです。

今回は、S3を利用するので「AmazonS3FullAccess」をアタッチします。これで、ユーザー設定は整いました。

AWS(Amazon S3)

次に、S3で今回使うバケットを作成していきます。

左上のボタンより作成していきましょう。

バケット名は今回「kintone-backet」にしました。
リージョンはどこでも構いません。今回は「Tokyo」とします。

バケットが作成されました。

次に、そのS3に対して他のドメインからアクセスできるようにするために、CORS(Cross Origin Resource Sharing)を設定します。

今回はサンプルなので、許可しまくり設定にしておきます。
※実際の運用の際は必要に応じて細かく設定することを推奨します。( 設定方法はこちらが参考になります。)

 以下コピペ用です。

JavaScript

それでは、kintoneにJavaScriptを充てていきます。
今回は作成するJavaScriptの他に、CYBOZU CDNより下記のファイルを読み込みます。

更に、今回はこちらのページにあるAWS SDKを読み込みました。

次に、連携用のJavaScriptを作成していきます。

spinnerLib.js

これは、読み込み中にスピナーを動作させる処理用JavaScriptです。
こちらのTipsを参考に、作成しました。後ほど、他のファイルから呼び出します。

s3Integration.js

次に連携用のJavaScriptを作成します。
本ファイルではざっくりと以下の処理をおこないます。

  • 配置したスペースフィールドに、ファイルチューザーを表示
  • レコード追加・保存時に、S3にファイルを保存する。保存が成功したら、S3上に保存されているファイル情報をkintone側に配置した文字列(複数行)に保存する。
  • レコード詳細画面表示時に、文字列(複数行)に保存した情報を元にスペースフィールドにS3上のバケット上内に保存されているファイルを表示する。

※ソース内の’バケット名’、’アクセスキー’、’シークレットキー’はIAMで設定したものに置き換えてください。

kintoneLikeDesign.css

これは、kintone ライクなラベル用にするためのデザイン調整用スタイルシートです。

作成したファイル及びその他のファイルを読み込む

kintoneに全てのファイルを読み込みます。以下のようにJavaScriptファイルが6種類、CSSファイルが1つとなります。

動作確認

それでは動作確認を確認をしていきます。JavaScriptを適用したアプリの追加画面を開くと、自作のファイルチューザーが表示されますので、適当なファイルをアップロードします。

保存をすると、保存したファイルがリンクとして表示されれば成功です。(サムネイル表示は今回していないので地味ですが成功です。)

試しにこのリンクを押すと…

S3上にアップロードした画像ファイルが表示されました!実際のS3のバケットも確認してみましょう。

kintoneから保存した画像が保存されてます。
これで、大容量のファイルを取り扱うときにkintoneのディスク容量を気にせずにバンバン上げられそうですね!(正し送り方を工夫する必要がありそうですが。)

おわりに

今回は、S3との連携について紹介しましたが、他のストレージ系のサービス連携サンプルについても別記事で紹介しているのでそちらも一緒にご参考ください。

また、S3自体弊社のサービスではございませんので利用方法等お問い合わせいただいても一切お答えできませんのでご了承ください
(正し本記事の設定方法が一部ちがうのでは?というのがありましたら、この記事にコメントいただければと思います。)

最後になりますが、S3に限らずkintoneと別サービスを組み合わせることでkintoneをもっと便利にご活用できるかと思いますので、みなさんもチャレンジしてみてはいかがでしょうか?

記事に関するフィードバック

直接的に記事と関連がないご質問はcybozu developer コミュニティをご活用ください。

ログインしてコメントを残してください。
Powered by Zendesk