カテゴリー内の他の記事

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

フォローする

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

はじめに

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

kintoneから、標準のウィジェットのようなパーツをJavaScriptで表現し、そのパーツから外部のストレージサービスにファイルを登録することを目指したいと思います。

既にAmazon S3(以下S3)を利用していてファイルの保存先をS3にしたい場合や、大容量のファイルを取り扱いたいという方必見です。

Amazon S3とは

Amazon S3

みなさん、S3をご存じでしょうか?

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

Amazon S3 と kintone を連携するときの注意点

kintone JavaScript カスタマイズで適用するプログラムは、そのアプリの利用者であればブラウザの開発者ツールで内容を見ることができます。

セキュアコーディングガイドラインでも触れていますが、パスワードなどの重要な情報をハードコーディングしてはいけません。
AWSでは、さまざまなサービスへのアクセス権に関連づいたシークレットキーが流出すると、勝手に他サービスを利用されてしまい、プログラムを見た人に悪用される恐れがあります。

そのため、このカスタマイズでは、Amazon Cognitoを用いて認証し、Amazon S3を利用します。
Cognitoは、一時的な認証情報を発行できるサービスです。サービスへのアクセス権は、関連づけたIAMロール(IAMポリシー)に基づきます。 

AWS サービスと kintone の構成

Cognito は、必要最低限のサービスとリソースのみに限定したアクセス権を持つ、一時的な認証情報を発行できるサービスです。

Cognito の機能や料金などの詳細は、公式ドキュメントをご参照ください。

準備

必要なもの

  • kintone 環境
  • Administrator 権限を持つ Amazon AWS アカウント

kintoneアプリ

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

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


AWS CloudFormation を使った環境構築

AWS CloudFormation という、テンプレートファイルを利用し一括でサービスやリソースを設定できるサービスを利用して、S3 のバケット(ファイルを貯める入れ物)の作成、Cognito による権限設定を行います。

  • テンプレートファイル(cognito-s3.yml)

前述の cognito-s3.yml の内容をエディタに貼り付け、文字コード UTF-8 で保存してください。
このテンプレートはサンプルです。IAMポリシーの設定など用途に合わせて適切に設定してください。

このファイルで行っている設定のポイントは以下のとおりです。

  • S3バケットを作成します。
    • 他ドメインからアクセスできるよう、CORS(Cross Origin Resource Sharing)を設定します。
    • S3 においたファイルを kintone からアクセスできるよう、AccessControl と S3BucletPolicy を設定します。
  • Unauth の IAM ロールを作成します。
    • 今回作成するS3バケットにのみアクセス権を与えます。

設定手順

  1. AWS マネジメントコンソールにログインします。
  2. 上部の[サービス]メニューをクリックし、「CloudFormation」を選択します。
    CloudFormation の選択
  3. テンプレートファイルを読み込んで、環境を構築します。
    [スタックの作成]ボタンをクリックします。
    スタック作成ボタンのクリック
  4. 「テンプレートファイルのアップロード」を選択し、[ファイルの選択]のボタンをクリックします。
    ファイルダイアログが開くので、前述のテンプレートファイル(kintone-s3.yml)を選択したあと、[次へ]ボタンをクリックします。
    テンプレートファイルの読み込み
  5. スタックの作成に必要な情報を入力します。下表を参考にしてください。入力したら、[次へ]ボタンをクリックします。
    パラメータの入力

    項目 値の例 備考
    スタックの名前 s3upload スタック名(CloufFormation のテンプレート)です。
    パラメータ IDPoolName  s3upload Cognito の Identity Pool  や IAM ロール(AWSのリソースのアクセス権設定)の名前に使われます。
    半角英数字のみ指定できます。
    S3BucketName kintone-app-attachment S3のバケット名です。
  6. 「スタックオプションの設定」は特に必要ないので、[次へ]を選択します。
    スタックオプションの設定
  7. 「確認」画面の最下部の「AWS CloudFormation によって IAM リソースが作成される場合があることを承認します。」にチェックを入れ、[スタックの作成]ボタンをクリックします。
    確認画面
  8. 構築が開始されます。
    構築中
    「CREATE_COMPLETE」と表示されれば構築完了です。
    構築完了
  9. [出力]タブをクリックし、Identity Pool と S3 のバケット名を確認します。
    Identity Pool と S3 のバケット名はプログラムで利用するので、値を控えておいてください。
    出力結果の確認

JavaScript

それでは、kintone にJavaScriptを充てていきます。

今回は作成するJavaScriptの他に、Cybozu CDNより下記のファイルを読み込みます。

  • https://js.cybozu.com/jquery/2.1.3/jquery.min.js
  • https://js.cybozu.com/spinjs/2.0.1/spin.min.js

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

  • https://sdk.amazonaws.com/js/aws-sdk-2.4.8.min.js

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

spinnerLib.js

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

s3Integration.js

次に連携用のJavaScriptを作成します。

以下の値を、AWS の CloudFormation の設定手順で控えておいた、Identity Pool と S3 のバケット名に置き換えてください。

  • 12行目:S3のバケット名
  • 14行目:Identity Pool の「:」より前の値。
    たとえば、「us-east-2:xxxxxx-xxxx-xxxx-xxxxx」であれば「us-east-2」です。
  • 16行目:Identity Pool の値

本ファイルではざっくりと以下の処理をおこないます。

  • 配置したスペースフィールドに、ファイルチューザーを表示
  • レコード追加・保存時に、S3にファイルを保存する。保存が成功したら、S3上に保存されているファイル情報をkintone側に配置した文字列(複数行)に保存する。
    ここで作成されるファイルURLの有効期限は、7日間です(署名バージョン4の制約
      URL を生成するタイミングについては、詳細画面表示時に更新する・リンククリック時に生成するなどの工夫をしてください。
  • レコード詳細画面表示時に、文字列(複数行)に保存した情報を元にスペースフィールドにS3上のバケット上内に保存されているファイルを表示する。

kintoneLikeDesign.css

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

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

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

kintone の設定

動作確認

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

アップロード

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

アップロード成功

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

画像の表示

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

S3バケットの確認

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

おわりに

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

また、S3自体弊社のサービスではございませんので利用方法等お問い合わせいただいても一切お答えできませんのでご了承ください
また、AWSのキャプチャ画面は、2019年6月19日時点のものです。AWS のアップデートに伴い画面が変わっている可能性がありますがご了承ください。
(正し本記事の設定方法が一部ちがうのでは?というのがありましたら、この記事にコメントいただければと思います。)

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

このTipsは、2019年6月版 kintoneで確認したものになります。

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

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

Avatar
蒋乾

すみません、

文書の中に書いてあるファイル:

spinnerLib.js
s3Integration.js
kintoneLikeDesign.css

どこかに確認できますか?

参考したいですが、よければ、提供して頂けないでしょうか?

Avatar
cybozu Development team

蒋乾 様

お世話になっております。
cybozu developer network 事務局です。

該当ファイルのソースコードは、下の画像のように記事内に表示されています。

以下、ご確認いただけますでしょうか?
①ブラウザを変更してもソースコードはご覧いただけないでしょうか?
②ソースコード部分がご覧いただけないのは、この記事のみでしょうか?

上記2点当てはまるようでしたら、
蒋乾様がご使用のネットワークでGitHub(Gist)へのアクセスが禁止されている可能性があります。

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