ComponentZine（ActiveReports）byメシウス（AD）

帳票アプリをAmazon S3にホスティングする──「ActiveReportsJS」の活用術

JavaScript帳票ライブラリ「ActiveReportsJS」の活用事例

WINGSプロジェクト山内直[著] / 山田祥寛[監修]

2024/09/03 12:00

ポスト

ダウンロードサンプルファイル (4.6 MB)

AWSの環境準備

　ホスティングとAPIゲートウェイの設定を行います。詳細な設定方法は公式ドキュメントに譲るとして、ここでは設定のポイントを列挙します。なお、事前にAWSのアカウントを取得しておく必要があります。

［補足］AWSの無料利用枠

　AWSは有償のサービスですが、サービス毎に定められた無料で利用できる範囲があります。

S3：AWSの12カ月間無料利用枠で5GBの標準ストレージが利用可能
CloudFront：1TB/月のデータ転送、10,000,000件/月のリクエスト
API Gateway：AWSの12カ月間無料利用枠でHTTP APIコール数100万件/月、REST APIコール数100万件/月、接続時間750,000分/月

　無料枠を越える分の料金は、それぞれ「料金 - Amazon S3 ｜AWS」「料金 - Amazon CloudFront | AWS」「料金 - Amazon API Gateway | AWS」で確認できます。いずれも、本記事の検証といった用途では無料か極めて安価に利用できるでしょう。

S3の設定

　まずはS3です。

　1. サービス「Amazon S3」で作業する

　2. 作成するバケットは、名称のみ指定する。ここでは「arjs-kintone-bucket」とする（バケット名はユニークである必要あり）

　3. その他は既定値でOK。［バケットを作成］をクリックする

CloudFrontの設定

　次は、CloudFrontです。CloudFrontでは、S3バケットにアクセスするためのOAC（Origin Access Control）と、公開サイトに相当するディストリビューションを作成します。

　1. サービス「Amazon CloudFront」で作業する

　2. OACを作成する。サイドメニューの［セキュリティ］－［オリジンアクセス］をクリック、［コントロール設定を作成］をクリックする

　3. OACの名称のみ指定する。ここでは「oac-arjs-kintone-bucket」とする

　4. その他は既定値でOK。［Create］をクリックする

　5. 引き続きサービス「Amazon CloudFront」で作業する

　6. ディストリビューションを作成する。サイドメニューの［ディストリビューション］をクリック、［ディストリビューションを作成］をクリックする

　7. ［Origin domain］では、プルダウンメニューから上記で作成したS3バケットを選択する

　8. ［オリジンアクセス］では、「Origin access control settings（recommended）」を選択する。［Origin access control］で、プルダウンメニューから上記で作成したOAC（oac-arjs-kintone-bucket）を選択する

　9. ［ビューワープロトコルポリシー］では、「HTTPS only」を選択する

　10. ［ウェブアプリケーションファイアウォール（WAF）］では、「セキュリティ保護を有効にしないでください」を選択する

　11. その他は既定値でOK。［ディストリビューションを作成］をクリックする

　12. 上図の黄色い枠にある［ポリシーをコピー］をクリックして、S3バケットポリシーをコピーしておく。なお、ディストリビューションにアクセスするためのURLは、上図の「ディストリビューションドメイン名」（＜サブドメイン＞.cloudfront.net）なので控えておく

　13. ［S3 バケットの権限に移動してポリシーを更新する］をクリックして、遷移先のページにて「アクセス許可」タブの「バケットポリシー」から［編集］をクリック、「ポリシー」欄にコピーしておいたポリシーをペーストする

　14. ［変更の保存］をクリックする

　これで、S3とCloudFrontの準備はできました。

API Gatewayの設定

　最後は、API Gatewayです。前記事で作成した、APIトークンを使うAPI（前記事ではkintonegw2）は、そのまま利用します。これは、帳票デザイン時にはAPIトークンによる認証を用いて全フィールドを取得し、実行時にはOAuth認証を用いてアクセス権に応じたフィールドを取得するように使い分けるためです。未作成の場合は、前記事を参考にAPIを作成してください。

　今回は、OAuth認証を使うAPIを「HTTP API」として新たに作成します。OAuth認証のアクセストークン取得用、全レコード取得用の2つを以下の表の通り作成します。

表　OAuth認証のアクセストークン取得メソッド
項目	内容
統合（バックエンド）	タイプ（HTTP）、メソッド（ANY）、URLエンドポイント（https://＜サブドメイン＞.cybozu.com/oauth2/token）
ルート	メソッド（POST）、パス（/oauth2/token）※統合から自動設定される

表　アクセストークンを使った全レコード取得メソッド
項目	内容
統合（バックエンド）	タイプ（HTTP）、メソッド（ANY）、URLエンドポイント（https://＜サブドメイン＞.cybozu.com/k/v1/records.json）
ルート	メソッド（GET）、パス（/k/v1/records.json）※統合から自動設定される

　また、CORS対応を以下の表のように設定しておきます。

表　CORSの設定
項目	内容
Access-Control-Allow-Origin	*
Access-Control-Allow-Headers	authorization、content-type
Access-Control-Allow-Methods	*

次のページ
kintoneの環境準備

関連リンク: ActiveReportsJS

この記事は参考になりましたか？

印刷用を表示

ポスト

ComponentZine（ActiveReports）byメシウス連載記事一覧: OutSystems上で簡単なシステムを作成し、ActiveReportsJSを活用した帳...

帳票アプリをAmazon S3にホスティングする──「ActiveReportsJS」の活...

Djangoで作成したAPIとActiveReportsJSやWijmoを使用したReac...

もっと読む

この記事の著者: WINGSプロジェクト山内直（WINGSプロジェクトヤマウチナオ）

＜WINGSプロジェクトについて＞有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ（代表山田祥寛）。主にWeb開発分野の書籍／記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂きたい。著書、記事多数。 RSS X: @WingsPro_info（公式）、@WingsPro_info/wings（メンバーリスト） Facebook ＜個人紹介＞WINGSプロジェクト所属のテクニカルライター。出版社を経てフリーランスとして独立。ライター、エディター、デベロッパー、講師業に従事。屋号は「たまデジ。」。

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この著者の最近の執筆記事; 山田祥寛（ヤマダヨシヒロ）

静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for Visual Studio and Development Technologies。執筆コミュニティ「WINGSプロジェクト」代表。主な著書に「独習シリーズ（Java・C#・Python・PHP・Ruby・JSP＆サーブレットなど）」「速習シリーズ（ASP.NET Core・Vue.js・React・TypeScript・ECMAScript、Laravelなど）」「改訂3版JavaScript本格入門」「これからはじめるReact実践入門」「はじめてのAndroidアプリ開発 Kotlin編」他、著書多数。

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この著者の最近の執筆記事