SHOEISHA iD

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

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

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

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

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

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

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

 左メニューの「DOWNLOAD」ボタンをクリックして、作成したアプリをダウンロードします。

左メニューから作成したアプリをダウンロード
左メニューから作成したアプリをダウンロード

 「FUJITSU Playground Terms of Service」が表示されたら、「I agree with the Terms of Services」チェックボックスをオンにして、「DOWNLOAD」をクリックします。このとき、複数回クリックすると、ダウンロードがうまくいかない場合があるため、注意してください。

作成したアプリをダウンロード
作成したアプリをダウンロード

 ダウンロードしたMap.zipの内容を、任意のフォルダ(ここでは、C:\K5\TEST\Map)に展開します。

 展開先には、「frontend」フォルダと「backend」のフォルダが作成されます。「frontend」フォルダにReactとFluxによるSPAに必要なファイル、「backend」フォルダにNode.js製BFFに必要なファイルが格納されていることを確認してください。

アプリのカスタマイズ~Google Map×世界遺産アプリ

 次に、ダウンロードしたアプリを修正していきましょう。

 フロントエンドでは、あらかじめ取得しておいたGoogle Map APIキーを、APIキーやデータベースへの接続情報を定義する「config.js」ファイルに設定します。

 バックエンドでは、Node.jsで開発する際に外部のパッケージとの依存関係を定義している「package.js」に記述されているNode.jsのバージョンを自身の端末にインストールしたNode.jsのバージョンに修正します。

フロントエンドの修正

 Google Map APIを利用するために必要なAPIキーを「config.js」ファイルに設定します。

 C:\K5\TEST\Map\frontend\appフォルダに移動し、config.jsをテキストエディタで開きます。次のコードの[YOUR_API_KEY]の部分に、「■Google Map APIキーの取得」で取得したAPIキーを設定してください。

key: process.env.GOOGLE_API_KEY || '[YOUR_API_KEY]',

 ↓

key: process.env.GOOGLE_API_KEY || '<取得したAPIキー>',

 ファイルを保存してテキストエディタを終了します。

 ここでは手順を簡易化するために直接キーを記述していますが、The Twelve-Factor Appの3番の設定(Config)に従って、process.env.GOOGLE_API_KEYを用い、デプロイした環境の環境変数「GOOGLE_API_KEY」にGoogle MapのAPIキーを入力することをお勧めします。余裕のある方はチャレンジしてみてください。

バックエンドの修正

 自身の端末にインストールしたNode.jsのバージョンを「package.json」に設定します(Node.jsのインストールについては後述します)。

 C:\K5\TEST\Map\backendフォルダに移動し、package.jsonをテキストエディタで開きます。次のコードは、Node.jsのバージョンの指定です。これを自身の端末で使用しているNode.jsのバージョンに修正してください(ここでは、バージョン6.11.2を使用していると想定しています)。

"engines": {
  "node": "6.9.4"
},

 ↓

"engines": {
  "node": "6.11.2"
},

 ファイルを保存してテキストエディタを終了します。これでアプリは完成です。

 完成したアプリは、Cloud FoundryなどのPaaS基盤にデプロイすることで、すぐさま確認することができます。富士通が提供するCloud FoundryベースのPaaS基盤K5 「CF」を利用したデプロイ方法は記事の後半で記述します。

次のページ
Google MapにInstagramの投稿写真を表示するアプリを作成しよう

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

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

もっと読む

この記事の著者

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

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

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

【AD】本記事の内容は記事掲載開始時点のものです 企画・制作 株式会社翔泳社

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

この記事をシェア

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

おすすめ

アクセスランキング

アクセスランキング

イベント

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

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

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

メールバックナンバー

アクセスランキング

アクセスランキング