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の投稿写真を表示するアプリです。早速手順を見ていきましょう。

• 第2回 必要な環境はWebブラウザだけ！ 今どきの「SPA＋BFF」Webアプリを30分で作成しよう

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 JavaScript API」をクリックし、右上の「キーの取得」ボタンをクリックします。

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

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

Enable Google Maps JavaScript API

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

Google Maps JavaScripts APIのキーの表示

Mapテンプレートの確認

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

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

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」を修正

　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×世界遺産アプリ

　左メニューの「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の投稿写真を表示するアプリを作成しよう

　続いて、同じMapテンプレートを使い、Google MapにInstagramの投稿写真を表示するアプリを作成します。アプリは、ReactとFluxによるGoogle Mapを使ったSPAと、Instagramからメディア情報を取得し、取得したメディア情報を整形してデータを返すNode.js製BFFで構成します。

　ここでは、同じSPAでも、BFFのAPIロジックを変えることで異なるアプリを簡単に作成できること、また、K5 Playgroundにあらかじめ用意されているAPIロジックを使用することで、容易に他社サービスを組み合わせられることを確認しながらアプリを作成しましょう。

アプリの完成イメージ

アプリの構成図

Instagram APIアクセストークンの取得

　Instagramと連携し、情報を取得するには、Instagram APIを利用する必要があります。Instagram APIを利用するには、アクセストークンが必要です。事前にアクセストークンを取得しましょう。

　Instagram Graph APIのサイトにアクセスし、ログインします（ログインには、Instagramアカウントが必要です。Instagramアカウントがない場合は、あらかじめ作成しておいてください）。

Instagram Graph APIのサイト

　右上の「Manage Client」をクリックします。

「Manage Client」をクリック

　「Developer Sign Up」では次の情報を入力します。

「ウェブサイト」	公開するアプリのURL（ここではhttps://playground.cloud.global.fujitsu.com/）
「Phone number」	任意の電話番号
「What do you want to build with the API?」	Test

　ここでは、「ウェブサイト」にK5 PlaygroundのURLを記載していますが、公開するアプリのURLを入力してください。この時点でアプリのURLが不明な場合は、アプリのデプロイ後にアプリのURLに修正してください。

　「I accept the API Terms of Use and Brand Guidelines」チェックボックスをオンにし、「Sign up」ボタンをクリックします。

Developer Sign Up

　トップページに戻ったら、再度右上の「Manage Client」をクリックし、「Register a New Client」ボタンをクリックします。

新しいクライアントを登録

　「Details」タブでは、次の情報を入力します。

「Application Name」	アプリ名（ここではMyInstaMap）
「Description」	アプリの説明（ここではTest）
「Company Name」	会社名（ここではMyCompany）
「Website URL」	WebサイトのURL（ここではhttps://playground.cloud.global.fujitsu.com/）
「Valid redirect URIs」	有効なリダイレクト先のURL（ここではhttps://playground.cloud.global.fujitsu.com/）
「Contact email」	有効な電子メールアドレス

　ここでは、「Website URL」と「Valid redirect URIs」にK5 PlaygroundのURLを記載していますが、公開するアプリのURLを入力してください。この時点でアプリのURLが不明な場合は、アプリのデプロイ後にアプリのURLに修正してください。

「Details」タブの設定

　「Security」タブでは、「Disable implicit OAuth」チェックボックスをオフにします。また、「Type the words above」に、表示されている画像の文字を入力します。

「Security」タブの設定

　「Register」ボタンをクリックすると、クライアントIDが生成されます（サンプル画像では内容がわからないようにマスクをかけています）。表示されたIDをテキストファイルなど任意の場所に保存しておきましょう。

クライアントIDの生成

　アクセストークンを取得するためには、次のURLにアクセスします。

　https://www.instagram.com/oauth/authorize/?client_id=＜クライアントID＞&redirect_uri=＜有効なリダイレクト先＞&response_type=token

　＜クライアントID＞には取得したクライアントID、＜有効なリダイレクト先＞には「Valid redirect URIs」に入力したURL（ここでは、https://playground.cloud.global.fujitsu.com/）を設定してください。URLにアクセスし、表示された画面で「Authorize」ボタンをクリックします。

アクセストークンを取得

　「Authorize」ボタンをクリックすると、＜有効なリダイレクト先＞に指定したURLにリダイレクトします。このとき、アドレスバーに表示されている「#access_token=」の右側がアクセストークンです。これをテキストファイルなど任意の場所に保存しておきましょう。

リダイレクトされたURLにアクセストークンが記載されている

　アクセストークンを取得したら、地図上に表示する写真をInstagramに投稿しておきましょう。アプリのAPIロジック内で、キャプションと位置情報が設定されている投稿のみを抽出する処理を追加するため、投稿時には必ずキャプションと位置情報を追加してください。

　Instagramにキャプションと位置情報を追加した写真を投稿していない場合は、Google Map上に写真は表示されません。

新規アプリの作成～Google Map×Instagramアプリ

　K5 PlaygroundのサイトからK5 Playgroundを起動し、Mapテンプレートを選択します。「CREATE APP」をクリックして新規アプリを作成します。

　左メニューの「Basic Information」で「APP info」をクリックし、「App Name」に任意のアプリ名（ここでは「MyInstaMap」）を入力してください。

アプリ名を変更

BFFのカスタマイズ

　ここでは、BFFをカスタマイズします。

　Google Mapに世界遺産の情報を表示するアプリでは、デフォルトのAPI「GET /sample_locations」は、呼び出すと、世界遺産の情報を生成するAPIロジック「Sample Data」を処理し、生成した世界遺産の情報をSPAに返すWebAPIであることを説明しました。

　今回作成するアプリは、Instagramの投稿写真を表示するアプリなので、デフォルトで用意されているAPI「GET /sample_locations」のAPIロジック「Sample Data」を削除します。続いて、新しくInstagramから情報を取得するAPIロジック、取得したデータを整形するAPIロジックを追加し、Instagramから取得した情報をSPAに返すように変更しましょう。

　左メニューの「Contents」で「Map Page」の「GET /sample_locations」をクリックしてください。

　最初に、デフォルトでカスタマイズされているAPIロジック「Sample Data」は今回作成するアプリでは使用しないため、「×」をクリックして削除します。

APIロジック「Sample Data」を削除

　続いて、APIロジックを追加します。右メニューの「APIロジック」から「SNS」－「Instagram Recent Media」を、「Start」と「End」の間にドラッグ&ドロップして追加しましょう。

　「Instagram Recent Media」は、Instagramと連携し、ユーザーが投稿したメディア情報を取得するAPIロジックです。なお、今回は制限付きのInstagram APIを使用しているため、Instagramから取得するメディア情報は最新の20件のみになります。

APIロジック「Instagram Recent Media」を追加

　次に、「Custom」－「FUJITSU Empty Logic」を、「Instagram Recent Media」と「End」の間にドラッグ&ドロップして追加します。

　「FUJITSU Empty Logic」は空のAPIロジックとなっており、Instagramから取得したデータを整形するロジックを、ユーザー自身で記述していきます。

APIロジック「FUJITSU Empty Logic」を追加

　「FUJITSU Empty Logic」の「EDIT」をクリックして、コードを編集します。既存のコードを削除し、次のコードを入力してください。

　このコードは、前のAPIロジック「Instagram Recent Media」で取得したメディア情報のうち、キャプション、位置情報が設定された写真のみを抽出する処理を行います。

var images = results.data
  .filter(function(image) {
    return image.location && image.caption;
  })
  .map(function(image) {
    return {
      name: image.caption.text,
      lng: image.location.longitude,
      lat: image.location.latitude,
      type: 'cultural',
      image: image.images.low_resolution.url,
      likes: image.likes.count,
      comments: image.comments.count,
    }
  });
next(images);

APIロジック「FUJITSU Empty Logic」を編集

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

作成したアプリのダウンロードとカスタマイズ～Google Map×Instagramアプリ

アプリのダウンロード

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

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

　ダウンロードしたMyInstaMap.zipの内容を、任意のフォルダ（ここでは、C:\K5\TEST\MyInstaMap）に展開してください。

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

アプリのカスタマイズ

　ダウンロードしたアプリを修正しましょう。

　フロントエンドでは、あらかじめ取得しておいたGoogle Map APIキーを、APIキーやデータベースへの接続情報を定義する「config.js」ファイルに設定します。また、地図アプリのページ全体を定義するReactコンポーネントの「MapPage.js」ファイルに、Instagramから取得してきた投稿写真を表示するための修正を行います。

　バックエンドでは、Node.jsで開発する際に外部のパッケージとの依存関係を定義している「package.js」に記述されているNode.jsのバージョンを、自身の端末にインストールしたNode.jsのバージョンに修正します。また、あらかじめ取得しておいたInstagram APIアクセストークンを「config.js」ファイルに設定します。

フロントエンドの修正

①Google Map APIキーの設定（config.js）

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

　C:\K5\TEST\MyInstaMap\frontend\appフォルダに移動し、config.jsをテキストエディタで開きます。次のコードの[YOUR_API_KEY]の部分を、取得した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キーを入力することをお勧めします。余裕のある方はチャレンジしてみてください。

②写真の表示枠の変更（MapPage.js）

　地図アプリのページ全体を定義するReactコンポーネントの「MapPage.js」ファイルを修正し、Instagramから取得した写真が表示されるようにしましょう。

　C:\K5\TEST\MyInstaMap\frontend\app\components\pagesフォルダに移動し、MapPage.jsをテキストエディタで開きます。

　初期状態では地図上に名前のみが表示されていますが、次のコードを赤字で示すように修正することで、写真が表示されるようになります。

<MapPin001
  key={`${point.name}-${point.lng}-${point.lat}`}
  style={pointStyle}
  lng={point.lng}
  lat={point.lat}
  title={point.name}
/>

　↓

<MapPin001
  key={`${point.name}-${point.lng}-${point.lat}`}
  style={pointStyle}
  lng={point.lng}
  lat={point.lat}
  title={
    <div>
      <h2>{point.name}</h2>
      <img style={{ width: 120 }} src={point.image} />
    </div>
  }
/>

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

バックエンドの修正

①Node.jsのバージョンの変更（package.json）

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

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

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

　↓

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

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

②Instagram APIアクセストークンの設定（config.js）

　Instagram APIを利用するために必要なアクセストークンを「config.js」ファイルに設定します。

　config.jsをテキストエディタで開きます。Instagram APIアクセストークンの値には空の文字列（""）が設定されています。次のように取得したアクセストークンを設定してください。

instagram: { accessToken: "＜取得したアクセストークン＞" }

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

　これでアプリは完成です。

アプリをデプロイしてみよう

　K5 Playgroundで作成したアプリは、Cloud Foundry等のPaaS基盤にデプロイすることができます。ここでは、Cloud FoundryをベースとしたK5 「CF」に作成したアプリをデプロイし、動作を確認してみましょう。

Node.jsのインストール

　アプリのビルドなどを行うには、Node.jsが必要です。あらかじめ、Node.jsをインストールしておきましょう。Node.jsは、利用している「CF」のリージョンが対応しているバージョンをインストールします。ここでは東日本リージョン2を利用しているものとして、6.11.2を選択します。次のサイトで「v6.11.2」をクリックし、node-v6.11.2-x64.msiをダウンロードして実行します（各リージョンが対応するNode.jsのバージョンについては、こちらのページを参照してください）。

　セットアップウィザードが起動するので、画面の指示に従ってNode.jsをインストールします。

Node.jsのセットアップウィザード

CF CLIのインストール

　Cloud Foundryを操作するには、コマンドライン形式のツールCF CLIが必要です。事前にCF CLIをインストールしましょう。

　CF CLIのダウンロードサイトにアクセスします。「Installers」から「Windows 64 bit」を選択してインストーラをダウンロードしてください。

　ダウンロードしたcf-cli-installer_6.33.1_winx64.zip（2018年1月現在の最新バージョン）を任意のフォルダに展開し、cf_installer.exeを実行すると、インストーラが起動します。

CF CLIのインストーラ

　「Next」クリックします。次の画面でも「Next」をクリックし、さらに次の画面で「Install」をクリックすると、インストールが開始します。

CF CLIのインストール開始

　インストールが完了したら、「Finish」をクリックします。

APIエンドポイントの設定

　アプリをデプロイする前に、デプロイする環境のAPIエンドポイントを設定する必要があります。APIエンドポイントを設定するには、次のようにcf apiコマンドを使います。

cf api https://api.＜リージョン識別子＞.paas-cf.cloud.global.fujitsu.com

例）東日本リージョン2にデプロイする場合

> cf api https://api.jp-east-2.paas-cf.cloud.global.fujitsu.com
Setting api endpoint to https://api.jp-east-2.paas-cf.cloud.global.fujitsu.com...
OK

api endpoint:   https://api.jp-east-2.paas-cf.cloud.global.fujitsu.com
api version:    2.77.0

ログイン

　CFにアプリをデプロイする前にはログインが必要です。ログインするには、次のようにcf loginコマンドを使います。

cf login -u ＜ユーザー名＞ -o ＜組織名＞ -s ＜スペース名＞

　ユーザー名、組織名、スペース名は、次のように情報を設定してください。

• ユーザー名：K5無料トライアルを申し込んだ際に通知されるユーザー名と契約番号を「ユーザー名@契約番号」の形式にして設定する。
• 組織名：K5無料トライアルを申し込んだ際に通知される契約番号を設定する。
• スペース名：K5無料トライアルを申し込んだ後にK5「CF」に自ら割り当てたスペース名を設定する。

設定例

> cf login -u ＜ユーザー名＞ -o ＜組織名＞ -s ＜スペース名＞
API endpoint: https://api.jp-east-2.paas-cf.cloud.global.fujitsu.com

Password> ［ここでパスワードを入力］
Authenticating...
OK

Targeted org ＜組織名＞

Targeted space ＜スペース名＞



API endpoint:   https://api.jp-east-2.paas-cf.cloud.global.fujitsu.com (API version: 2.77.0)
User:           ＜ユーザー名＞
Org:            ＜組織名＞
Space:          ＜スペース名＞

Google Mapに世界遺産を表示するアプリをデプロイしよう

　デプロイの前に、APIエンドポイントの設定とログインを行っておきましょう。アプリのデプロイは次の手順で行います。

バックエンドのデプロイ

①フォルダの移動

　バックエンドアプリのあるC:\K5\TEST\Map\backendフォルダに移動します。

> cd C:\K5\TEST\Map\backend
C:\K5\TEST\Map\backend>

②バックエンドアプリのデプロイ

　Cloud Foundryにアプリをデプロイするにはcf pushコマンドを利用します。次のようにcf pushコマンドを利用してバックエンドアプリをデプロイします。デプロイするとNode.jsビルドパックが作成され、バックエンドに必要なパッケージが自動的にインストールされ、バックエンドアプリが起動されます。

> cf push ＜バックエンドアプリ名＞
（省略）
     state     since                    cpu    memory        disk          details
#0   running   2018-01-06 02:03:59 AM   0.1%   33M of 512M   81.1M of 1G

　ブラウザで、「＜バックエンドアプリのURL＞/docs/」を開くとバックエンドのAPIドキュメントを確認することができます。

フロントエンドのデプロイ

①フォルダの移動

　フロントエンドアプリのあるC:\K5\TEST\Map\frontendフォルダに移動します。

> cd C:\K5\TEST\Map\frontend
C:\K5\TEST\Map\frontend>

②環境変数の設定

　フロントエンドアプリが接続するバックエンドアプリのURLを指定します。setコマンド（Mac/Linuxの場合はexpotコマンド）で環境変数API_URLにバックエンドアプリのURLを設定してください。

C:\K5\TEST\Map\frontend> set API_URL=＜バックエンドアプリURL＞

③パッケージのインストール

　フロントエンドアプリをビルドするために必要なパッケージをインストールします。次のコマンドを実行すると、package.jsonに記述されている依存パッケージが自動でインストールされます。

C:\K5\TEST\Map\frontend> npm install
（省略）

④フロントエンドアプリのビルド

　フロントエンドアプリをビルドします。次のコマンドを実行すると、フロントエンドアプリのビルドが実行されます。ビルドした資産は「/public」フォルダに格納されます。

C:\K5\TEST\Map\frontend> npm run build
（省略）

⑤フォルダの移動

　ビルドされたフロントエンドアプリが格納されているC:\K5\TEST\Map\frontend\publicフォルダに移動します。

C:\K5\TEST\Map\frontend> cd public
C:\K5\TEST\Map\frontend\public>

⑥フロントエンドアプリのデプロイ

　ビルドされたフロントエンドアプリをデプロイします。

C:\K5\TEST\Map\frontend\public> cf push ＜フロントエンドアプリ名＞
（省略）
     state     since                    cpu    memory         disk         details
#0   running   2018-01-06 02:25:29 AM   0.0%   2.4M of 256M   8.1M of 1G

アプリの確認

　以上でアプリのデプロイは完了です。デプロイされたアプリを確認するには、次のURLにアクセスします。

　http://＜フロントエンドアプリ名＞.＜リージョン識別子＞.cf-app.net/

　「Cultural」を選択し、世界遺産が表示されることを確認しましょう。さらに、地図を拡大して東京周辺を表示すると、追加した「国立西洋美術館」が表示されることを確認できます。

Google Mapに「国立西洋美術館」が表示される

Google MapにInstagramの投稿写真を表示するアプリをデプロイしよう

　デプロイの手順は、フォルダ名以外、Google Mapに世界遺産を表示するアプリと同じです。

　デプロイが完了したら、アプリを確認しましょう。「Cultural」を選択すると、Google Mapに、Instagramに投稿した写真が表示されます。

Google MapにInstagramの投稿写真が表示される

アプリが完成したらUXの向上に力を注ごう

　地図アプリを一から作成するのは大変ですが、K5 Playgroundを使って、短い時間で簡単に、Google MapにInstagramの投稿写真を表示するアプリを作成することができたと思います。

　しかし、現在作成したアプリは、Mapテンプレートを使用して最低限のものを作成したにすぎません。ここからは、「小さな修正～デプロイ」を高速に繰り返しながらUXを改善していく、現代のサービス開発の基本的な流れを確認していきましょう。ご興味を持たれた方は実際に修正を行いながら体験してみてください。

フロントエンドのカスタマイズ

①左メニューのデフォルト値の変更（MapPage.js）

　Mapテンプレートでは、初期状態では左メニューが表示されます。デフォルトではメニューがどれも選択されていない状態ですが、Reactコンポーネントの状態を管理するstateオブジェクトを修正して、デフォルトで1番目（配列のインデックスでは0）のメニューを表示するように修正します。

　C:\K5\TEST\MyInstaMap\frontend\app\components\pagesフォルダに移動し、MapPage.jsをテキストエディタで開きます。次のコードを赤字で示すように修正してください。

state = {
  visibles: [],
  openDrawer: false
};

　↓

state = {
  visibles: [0],
  openDrawer: false,
};

　修正が完了したら、フロントエンドアプリをビルドしてデプロイし、表示の変更内容を確認しましょう。修正したことにより、「Cultural」を選択しなくても写真が表示されるようになったかと思います。

修正前の画面

修正後の画面

②最初に表示される地図の位置とサイズの変更（MapPage.js）

　デフォルトでは、日本を中心に縮小された地図が表示される状態ですが、Reactコンポーネントのpropsオブジェクトを修正して、東京を中心に拡大して表示されるように修正します。

static defaultProps = {
  style: {},
  center: {
    lng: 139.0,
    lat: 35.0
  },

  zoom: 3
};

　↓

static defaultProps = {
  style: {},
  center: {
    lng: 139.8,
    lat: 35.6
  },
  zoom: 11
};

修正が完了したら、フロントエンドアプリをビルドしてデプロイし、表示の変更内容を確認しましょう。

修正前の画面

修正後の画面

　以上の通り、小さな修正とデプロイを高速に繰り返すのが、現代のサービス開発の基本的なスタイルです。ここで実施した修正はあくまでも一例ですが、継続的な改善を通してUXや機能をより良いものにしていきます。

　また、その際には通常GitHub Enterpriseなどを使って、タスク管理やコードレビューを実施します。GitHub EnterpriseとCI/CDシステムを連携させて、テストやビルドやCloud Foundryへのデプロイを自動化することも大切です。

　実際に自分の手で触ってみることで、K5 Playgroundを活用したアプリ開発の手軽さを実感できたのではないでしょうか。既存のAPIを利用して開発の時間を短縮することにより、UXの改善に注力できるといったメリットもあります。

　今回は、同じMapテンプレートを使って2つのアプリを開発しました。同様にMapテンプレートを利用すれば、SNSとWikipediaを使用した地理情報アプリ、Yahoo! WeatherとRDSを使用した天候管理アプリなども作れます。K5 Playgroundでは、Map以外にもさまざまなテンプレートが用意されています。フロントエンドやバックエンドを自由に組み替え、さまざまなアプリの作成にチャレンジしましょう。

SNSとWikipediaを使用した地理情報アプリ（左）と、Yahoo! WeatherとRDSを使用した天候管理アプリ（右）

　次回は、K5 PlaygroundのChatテンプレートを使って、LINEと連携するチャットボットアプリにチャレンジします。

K5 Playground 関連リンク

• K5 Playgroundで、頭の中のアプリをすぐカタチに。（紹介サイト・Webハンズオン）
• FUJITSU K5 Playground
• FUJITSU K5 Showcase
• FUJITSU Cloud Service K5