SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

アイデアをすぐ形に! K5 Playgroundで開発するクラウドネイティブな最新Webアプリ(PR)

Google Map×世界遺産/Instagramアプリを作ろう~K5 Playgroundのテンプレートで本格アプリ開発

アイデアをすぐ形に! K5 Playgroundで開発するクラウドネイティブな最新Webアプリ 第3回

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

 第2回では、K5 Playgroundの基本機能や使い方、どのようなアプリを作成できるかを見てきました。第3回、第4回では、実際にK5 Playgroundを使ってアプリ開発を体験してみましょう。第3回では、同じMapテンプレートを利用して作成する2種類のアプリを題材に、K5 Playgroundでは一見複雑なアプリも手軽に開発できること、および同じSPAであってもBFFのロジックを変えることで異なるアプリが作成できることを理解します。1つ目はMapテンプレートをそのまま使用し、Google Mapに世界遺産の情報を表示するアプリ、2つ目はBFFにInstagramと連携するAPIロジックを取り入れ、Google MapにInstagramの投稿写真を表示するアプリです。早速手順を見ていきましょう。

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

Google Mapに世界遺産を表示するアプリを作成しよう

 第2回で、K5 Playgroundでは、一覧・詳細形式のアプリやメッセージングアプリなどに使える7つのテンプレートから、好きなものを選んで自由にカスタマイズすることで、多様なアプリを作成できると紹介しました。今回はその中から地図形式のアプリが作れる「Mapテンプレート」を使用します。

 これを用いてまずは、世界遺産の情報をGoogle Map上に表示するアプリを作成してみましょう。Mapテンプレートは、フロントエンドとしてReactとFluxによるGoogle Mapを使ったSPAと、バックエンドとしてデフォルトではカスタマイズされた世界遺産のモックデータを返すNode.js製のBFFで構成されています。

 Mapテンプレートをベースに新規アプリを作成し、何も変更せずにアプリをダウンロードするだけでGoogle Mapに世界遺産の情報を表示することが可能です。ここでは、BFFが返すモックデータに2016年に新たに世界遺産に登録された「国立西洋美術館」を追加して、作成するアプリに表示します。

アプリの完成イメージ
アプリの完成イメージ
アプリの構成図
アプリの構成図

Google Map APIキーの取得

 アプリでGoogle Mapを使用するには、Google Map APIキーの取得が必要です。そのため、事前にAPIキーを取得しましょう。Google Maps APIs for Webにアクセスし、ログインします(ログインには、Googleアカウントが必要です。Googleアカウントがない場合は、あらかじめ作成しておいてください)。

Google Maps APIs for Web
Google Maps APIs for Web

 「Google Maps JavaScript API」をクリックし、右上の「キーの取得」ボタンをクリックします。

Google Maps JavaScripts APIのキーを取得する
Google Maps JavaScripts APIのキーを取得する

 「Enable Google Maps JavaScript API」ダイアログが開き、「Terms of Service」への同意を求められます。「Yes」を選択し、「Next」をクリックします。

Enable Google Maps JavaScript API
Enable Google Maps JavaScript API

 APIキーが表示されます(サンプル画像では内容がわからないようにマスクをかけています)。これをアプリのコードに埋め込むので、テキストファイルなど任意の場所に保存しておきましょう。「DONE」をクリックします。

Google Maps JavaScripts APIのキーの表示
Google Maps JavaScripts APIのキーの表示

Mapテンプレートの確認

 K5 Playground上でテンプレートアプリを確認することができます。世界遺産の情報が表示されること、およびデフォルトの状態では、「国立西洋美術館」が表示されないことを確認しましょう。

 K5 PlaygroundのサイトからK5 Playgroundを起動し、Mapテンプレートを選択します。Mapテンプレートでは、左メニューで「Cultural」「Natural」「Mixes」を選択すると、世界遺産が地図上に表示されます。

Mapテンプレートに世界遺産を表示
Mapテンプレートに世界遺産を表示

 また、地図の右下にある「+」ボタンをクリックして地図を拡大し、東京周辺を表示してみましょう。デフォルト状態では、東京周辺の世界遺産として「国立西洋美術館」は表示されません。

地図を拡大して東京を表示
地図を拡大して東京を表示

新規アプリの作成~Google Map×世界遺産アプリ

 APIキーの取得と、Mapテンプレートの確認ができたところで、アプリを新規作成します。Mapテンプレートを選択して「CREATE APP」をクリックし、作成を開始しましょう。

BFFのカスタマイズ

 ここでは、BFFをカスタマイズします。Mapテンプレートでは、デフォルトでWebAPI「GET /sample_locations」がカスタマイズされています。

 このWebAPIは、世界遺産の情報を生成するAPIロジック「Sample Data」を処理し、生成した世界遺産の情報をSPAに返します。

 APIロジック「Sample Data」には、世界遺産の情報を生成するためのモックデータがコードで記述されています。このコードに「国立西洋美術館」の情報を追加し、「国西洋美術館」の情報が生成されるようにAPI「GET /sample_locations」のAPIロジック「Sample Data」をカスタマイズしましょう。

 まず、左メニューの「Contents」で「Map Page」の「GET /sample_locations」をクリックします。

「Sample Data」の「EDIT」をクリックします。

APIロジック「Sample Data」を修正
APIロジック「Sample Data」を修正

 2行目(var cultural = [)の下に、コードを追加します。ここで、「国立西洋美術館」の情報を追加しています。

var cultural = [
  { name: 'Cultural Landscape and Archaeological Remains of the Bamiyan Valley', lng: 67.82525, lat: 34.84694, type: 'cultural' },
(省略)

 ↓

var cultural = [
  { name: 'National Museum of Western Art', lng: 139.775833, lat: 35.715556, type: 'cultural' },
  { name: 'Cultural Landscape and Archaeological Remains of the Bamiyan Valley', lng: 67.82525, lat: 34.84694, type: 'cultural' },
(省略)
国立西洋美術館の定義を追加
国立西洋美術館の定義を追加

 「OK」をクリックして修正を確定します。「Sample Data」にコードが追加されていることを確認します。

次のページ
作成したアプリのダウンロード~Google Map×世界遺産アプリ

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

  • このエントリーをはてなブックマークに追加
アイデアをすぐ形に! K5 Playgroundで開発するクラウドネイティブな最新Webアプリ連載記事一覧

もっと読む

この記事の著者

西岡 結人(富士通株式会社)(ニシオカ ユイト)

 大阪府出身。基幹系業務アプリの開発を経験後、2016年に富士通株式会社に出向。現在は同社クラウドサービスK5の拡販用資材等の開発に従事。週末は外でフットサルや家でゴロゴロ読書や映画鑑賞。

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

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

この記事をシェア

  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/10639 2018/02/20 14:45

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング