CodeZine(コードジン)

特集ページ一覧

【制作最終日】池澤あやかさん、イベント会場中のスマホが振られた集計値をリアルタイムに表示するダッシュボードを作成 ~ Amazon S3再び

池澤あやかさんにお願い! AWS Summit Tokyo 2015「デベロッパーカンファレンス」を盛り上げるサービスを一緒につくってください! 最終回

  • ブックマーク
  • LINEで送る
  • このエントリーをはてなブックマークに追加
2015/05/22 14:00

 アマゾン データ サービス ジャパンが6月に開催する開発者向けイベント「デベロッパーカンファレンス」の会場を盛り上げるアプリをつくることになった、ギークな女優・池澤あやかさん。アマゾン ウェブ サービス(以下、AWS)を使い、言語を選択するWebサイト、センサーデータの収集処理や集計処理を実装してきました。制作最終日となる今回は、再びAmazon Simple Storage Service(Amazon S3)を使い、集計結果をリアルタイムに表示するダッシュボードを作成します。

目次
【お詫び】ソースコード公開の中止

 本連載で作成した「スマホフレーフレー言語応援アプリ」のソースコードを公開するとお伝えしておりましたが、諸般の事情により、公開を見送らせていただくことになりました。ご期待いただいた読者の皆様に、深くお詫び申し上げます。(編集部)

 

連載第1回はこちら 連載第2回はこちら

写真撮影:川口 紘、衣装協力:n°11(池澤さんの青ワンピース)、CARNETルミネ新宿店(同 黄色ニット+サロペット)
写真撮影:川口 紘、衣装協力:n°11(池澤さんの青ワンピース)、CARNETルミネ新宿店(同 黄色ニット+サロペット)

池澤あやか(いけざわあやか)...... 1991年生まれ。東京都出身。2014年3月に慶應義塾大学環境情報学部を卒業し、受託開発も行う女優として活躍している。先日も、デザインから実装、サーバーまで1人で担当した(!) サイトをカットオーバーしたとのこと。4月からエッジなデジタルクリエイターらを紹介するテレビ番組「SENSORS」(日本テレビ・毎週土曜日 深夜25:25 ~ 25:55放送)にも出演中。

 

どの言語がどれくらい応援されているかを表示するダッシュボードを作ろう

 今回のアプリ開発は、ハンズオン形式で行われました。先生役は、アマゾン データ サービス ジャパン株式会社のソリューションアーキテクトである西谷圭介さんです。

 なお、スマホフレーフレー言語応援アプリの動作やアーキテクチャについては、こちらの図(動作の図アーキテクチャの図)をご覧ください。

ダッシュボード用のバケットを作成する

西谷:

それでは、会場を盛り上げるためにも、集計結果をリアルタイムに表示するダッシュボードを作成しましょう。1日目と同じように、Amazon Simple Storage Service(Amazon S3)でダッシュボード用のバケットを作ります。AWSのマネージメントコンソール[1]で「Storage & Content Delivery」の「S3」を選択してください。

池澤:

はい。選択しました。

西谷:

そうしたら[Create Bucket]をクリック。[Bucket Name]にバケット名を入力して、[Region]は前回と同じ「Tokyo」にしましょう。

池澤:

で、[Create]ですね。

バケットの作成

 

バケット名の入力

 

西谷:

続いて、静的Webサイトホスティングの設定をします。

[Properties]をクリックして、[Static Website Hosting]を選択。[Enable website hosting]を選択し、[Index Document]に「index.html」を入力して、他はそのまま。

池澤:

入力したら[Save]をクリック、と……はい!

静的Webサイトホスティングの設定

 

西谷:

では、このバケットを開いてみましょう。[Properties]→[Static Website Hosting]の[Endpoint]のURLにアクセスしてみてください。

池澤:

あれ? 「403 Forbidden」エラーになりますよ。

バケットにアクセスすると「403 Forbidden」エラー

 

[1] 取材時には英語表示のみでしたが、4月22日より、AWSマネージメントコンソールは日本語表示も可能になりました。

アプリ作成もいよいよ大詰め。「詰めが甘いってよく言われるんです」という池澤さん、もうひとふんばり!
アプリ作成もいよいよ大詰め。「詰めが甘いってよく言われるんです」という池澤さん、もうひとふんばり!

 

バケットポリシーを設定する

西谷:

バケットポリシーの設定が必要となります。言語を選択するWebサイトと同じように、「すべてのユーザーに読み取りを許可する」状態にします。今回は言語選択を行う画面用のバケットに設定したバケットポリシーを流用します[2]

言語選択用のバケットを選択して[Properties]をクリックし、[Permissions]を選択します。[Edit Bucket Policy]をクリックしてください。

池澤:

[Bucket Policy Editor]が開きました。

西谷:

表示されているポリシーをコピーします。

ダッシュボード用のバケットを選択し、[Properties]→[Permissions]→[Add bucket policy]を選択して、エディターにポリシーを貼り付けてください。"Resource"の名前をダッシュボード用のバケットに変更して[Save]をクリック。

池澤:

名前を変えて、保存っと。

バケットポリシーを設定
バケットポリシーを設定

 

西谷:

ここでもう一度バケットにアクセスすると、ステータスが変わります。

池澤:

本当だ。「404 Not Found」になりました。

「404 Not Found」エラー

 

[2] この手順では前回設定したポリシーを利用して設定していますが、もちろんエディター内に直接ポリシーを記述しても構いません。その場合は[バケットポリシーを設定]の画像内にある内容を入力してください。

AWS Summit Tokyo 2015とデベロッパーカンファレンスの開催概要

 AWS Summit Tokyoは、Amazon Web Services, Inc.が毎年世界中で開催しているAWSに関するカンファレンスの日本版で、AWS Summitとしては世界で最大級だといいます。今年は、アプリケーション開発者を対象とする「デベロッパーカンファレンス」が、AWS Summit Tokyo 2015の会場内で併催されます。

参加受付は「5月28日まで」です。参加をご検討の方はお早めにお申し込みください。

会期:2015年6月2日(火)~3日(水) 9:15 ~ 20:30
会場:グランドプリンスホテル新高輪 国際館パミール、飛天(東京・品川)
参加費:無料(要 事前申し込み)
主催:アマゾン データ サービス ジャパン株式会社
詳細・参加申し込み:デベロッパーカンファレンスのWebサイト


  • ブックマーク
  • LINEで送る
  • このエントリーをはてなブックマークに追加

著者プロフィール

  • 坂井 直美(サカイ ナオミ)

    SE、通信教育講座の編集、IT系出版社の書籍編集を経てフリーランスへ。IT分野で原稿を書いたり編集したり翻訳したり。

バックナンバー

連載:池澤あやかさんにお願い! AWS Summit Tokyo 2015「デベロッパーカンファレンス」を盛り上げるアプリを一緒につくってください!
All contents copyright © 2005-2020 Shoeisha Co., Ltd. All rights reserved. ver.1.5