Fujitsu

K5 Playground

K5 Playground × CF Webハンズオン

ハンズオン教材
アプリケーション作成:Google Map × 世界遺産

  • 前へ
  • 4. アプリケーション作成:Google Map × 世界遺産
  • 次へ

4.1. アプリケーションの説明

Google Mapに世界遺産の場所を表示させるアプリケーションです。
本ハンズオンでは、K5 Playgraoudのテンプレート「Map」を用いて、Google Mapに世界遺産「国立西洋美術館」の登録を行います。

(完成イメージ)

(構成イメージ)

4.2. ハンズオンの流れ

以下の流れで、ハンズオンを実施致します。

  • 事前準備
  • K5 Playgroundの操作
  • アプリケーションの修正
  • アプリケーションの配備
  • アプリケーションの確認

4.3. 事前準備

ハンズオン「K5 「CF」の操作方法」を進めるために必要な、事前準備を行います。
以下の準備を行ってから、ハンズオンを進めてください。(既に実施済みの作業についてはスキップしてください。)

ブラウザのインストール

事前準備1.ブラウザ:「Google Chrome」または「Firefox」を利用」を参照して、「Google Chrome」、又は「Firefox」をインストールしてください。

Node.jsのインストール

事前準備2.Node.jsのインストール」を参照して、Node.jsをインストールしてください。

CFコマンドのインストール

事前準備3.CFコマンドのインストール」を参照して、CFコマンドをインストールしてください。

Google Maps APIキーの取得

事前準備4.Google Maps APIキーの取得」を参照して、APIキーを取得してください。

作業用フォルダの作成

「Cドライブ」、又は「Dドライブ」直下に「K5CF\Map」フォルダを作成してください。

4.4. K5 Playgroundの操作

4.4.1. テンプレートの選択

1. K5 Playgroundにアクセス

サポートされているブラウザから、以下のURLにアクセスしてください。
https://playground.cloud.global.fujitsu.com

2. テンプレートの選択

「GET STARTED」ボタンをクリックしてください。

テンプレートの「Map」をクリックしてください。

4.4.2. テンプレート「Map」の事前確認

1. 世界遺産の表示

「Cultural」をクリックしてください。

世界遺産が表示されたことを確認してください。

2. 「東京」周辺を表示

「+」ボタンを4~5回クリックしてください。

「東京」周辺が確認できるように調整してください。

3. 世界遺産の確認

「東京」周辺に世界遺産「国立西洋美術館」が存在しないことを確認してください。

4.4.3. WebAPIのカスタマイズ

1. 新規アプリケーションの作成

「CREATE NEW APP」ボタンをクリックしてください。

2. APIロジックのカスタマイズ

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

「Sample Data」の「EDIT」ボタンをクリックしてください。

赤文字部分のソースを追加してください。

// @todo replace this code with your implementation			
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」ボタンをクリックしてください。

追加した内容が反映されていることを確認してください。

4.4.4. アプリケーションのダウンロード

1. アプリケーションのダウンロード

「DOWNLOAD」ボタンをクリックしてください。

利用規約を確認の上、「DOWNLOAD」ボタンをクリックしてください。
(注)複数回クリックすると、ダウンロードに失敗する場合がございますので、ご注意ください。

2. zipファイルの展開

ダウンロード先に移動してください。

「Map.zip」を右クリックし、「すべて展開」をクリックしてください。

事前準備で用意した作業用フォルダを指定し、「展開」をクリックしてください。

「Map」フォルダに移動し、資材が展開されているかを確認してください。

4.5. アプリケーションの修正

4.5.1. フロントエンドの修正

1. ディレクトリの移動

「D:\K5CF\Map\frontend\app」フォルダに移動してください。
ここでの移動先は、「4.4.4 アプリケーションのダウンロード」にて、zipファイルを展開した場所です。

2. 「config.js」の修正

「config.js」ファイルを右クリックし、「プログラムを開く」から「別のプログラムを選択」をクリックしてください。

任意のテキスト・エディターを選択し、「OK」をクリックしてください。
(注)使用するテキスト・エディターは、コードの修正に用いるため、「メモ帳」以外のテキスト・エディターをお勧めします。

事前準備「Google Maps APIキーの取得」で取得したAPI キーを赤文字部分([YOUR_API_KEY])に設定し、上書き保存してください。

const config = {			
var cultural = [					
  apiServer: {					
    url: process.env.API_URL,					
  },
  bootstrapURLKeys: {					
    key: process.env.GOOGLE_API_KEY || '[YOUR_API_KEY]',
    language: 'en',
  },
};

export default config;

設定例

    APIキーが「Sample_Sample」の場合

    const config = {			
    var cultural = [					
      apiServer: {					
        url: process.env.API_URL,					
      },
      bootstrapURLKeys: {					
        key: process.env.GOOGLE_API_KEY || 'Sample_Sample',
        language: 'en',
      },
    };
    
    export default config;

4.5.2. バックエンドの修正

1. ディレクトリの移動

「D:\K5CF\Map\backend」フォルダに移動してください。

2. 「package.json」の修正

任意のテキスト・エディターを使用して、「package.json」ファイルを開いてください。

赤文字部分に事前準備「Node.jsのインストール」でインストールしたNode.jsのバージョンを入力し、上書き保存してください。

"engines": {			
  "node": "Node.jsのバージョン"					
},

設定例

    「v6.11.2」のバージョンを使用している場合

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

使用しているバージョンを調べる場合は、コマンドプロンプトから以下のコマンドを実行してください。
[node -v]コマンドを実行してください。

node -v

実行結果

    C:\>node -v
    v6.11.2

4.6. アプリケーションの配備

アプリケーションをK5 CFに配備します。

使用するアプリケーション

  • バックエンドアプリ「AAA00001-xxxx1234」:node.js_buildpack
  • フロントエンドアプリ①「AAA00001-yyyy1234」:staticfile_buildpack

アプリケーション配備時のイメージ

4.6.1. バックエンドの配備

1. ディレクトリの移動

「D:\K5CF\Map\backend」ディレクトリに移動してください。

d:						
cd \K5CF\Map\backend

2. アプリケーションの配備

[cf push]コマンドを実行してください。

cf push <バックエンドアプリ>

実行例

    バックエンドアプリ「AAA00001-xxxx1234」に配備する場合

    cf push AAA00001-xxxx1234

実行結果

    「ERR!」が出力されていないこと、及びstateに「running」が出力されていることを確認してください。

    D:\K5CF\Map\backend>cf push AAA00001-xxxx1234
    ----------------------------------------------------------------------------------
    ~省略~
    ----------------------------------------------------------------------------------
         state     since                    cpu    memory          disk          details
    #0   running   2017-09-19 05:00:06 PM   0.0%   98.5M of 512M   76.1M of 1G

4.6.2. フロントエンドの配備

1. ディレクトリの移動

「D:\K5CF\Map\frontend」フォルダに移動してください。

d:						
cd \K5CF\Map\frontend

2. アプリURLのセット

コマンドを実行して、バックエンドアプリURLを設定してください。

  • Windowsの場合
  • set API_URL=<バックエンドアプリURL>
  • Mac/Linuxの場合
  • export API_URL=<バックエンドアプリURL>

実行例

    WindowsOSを利用して、バックエンドアプリURL「http://AAA00001-xxxx1234.jp-east-2.cf-app.net/」を設定する場合

    set API_URL=http://AAA00001-xxxx1234.jp-east-2.cf-app.net/

3. Packageのインストール

[npm install]コマンドを実行してください。
(注)実行に必要なPackageをインストールしているため、時間がかかります。

npm install

実行結果

    「ERR!」が出力されていないことを確認してください。

    D:\K5CF\Map\frontend>npm install
    npm WARN deprecated point-geometry@0.0.0:This module has moved: please install @mapbox/point-geometry instead
    npm WARN prefer global marked@0.3.6 should be installed with –g
    ----------------------------------------------------------------------------------
    ~省略~
    ----------------------------------------------------------------------------------
    npm WARN optional Skipping failed optional dependency /chokidar/fsevents:
    npm WARN notsup Not compatible with your operating system or architecture: fsevents@1.1.2

[npm install]コマンドの実行により「package.json」に記述されている依存パッケージが自動でインストールされます。
「D:\K5CF\Map\frontend」フォルダに「node_modules」フォルダが追加されていることを確認してください。
(実行前⇒実行後)

4. タスク一覧の取得

[npm run]コマンドを実行してください。

npm run

実行結果

    「build」が出力されていることを確認してください。

    D:\K5CF\Map\frontend>npm run
    Lifecycle scripts included in Map:
      start
    	webpack-dev-server -d --progress --colors --open
      test
    	cross-env BABEL_JEST_STAGE=0 jest
    
    available via `npm run-script`:
      build
    	webpack -p --progress --colors --display-error-details --env.production
      lint
    	eslint app/** --fix

5. 「build」タスクの実行

[npm run build]コマンドを実行してください。

npm run build

実行結果

    「ERR!」が出力されていないことを確認してください。

    D:\K5CF\Map\frontend>npm run build
    
    > Map@1.0.0 build D:\K5CF\Map\frontend
    > webpack -p --progress --colors --display-error-details --env.production
    
    Hash: a7cb7eec12abaa09fd0b
    Version: webpack 2.7.0
    Time: 20604ms
        Asset    Size  Chunks                    Chunk Names
    bundle.js  963 kB       0  [emitted]  [big]  main
       [0] ./~/react/react.js 56 bytes {0} [built]
       [1] ./~/prop-types/index.js 1.08 kB {0} [built]
      [12] ./~/material-ui-fj/styles/getMuiFjTheme.js 7.37 kB {0} [built]
      [19] ./~/react-dom/index.js 59 bytes {0} [built]
     [118] ./~/react-router/es/index.js 1.46 kB {0} [built]
     [187] ./~/material-ui-fj/styles/MuiFjThemeProvider.js 4.27 kB {0} [built]
     [188] ./~/material-ui-fj/styles/setFontFamily.js 1.28 kB {0} [built]
     [324] ./~/material-ui-fj/styles/baseThemes/index.js 7.57 kB {0} [built]
     [325] ./~/react-tap-event-plugin/src/injectTapEventPlugin.js 1.04 kB {0} [built]
     [344] ./app/App.js 4.05 kB {0} [built]
     [574] ./~/material-ui-fj/styles/baseThemes/Dark04.js 1.85 kB {0} [built]
     [575] ./~/material-ui-fj/styles/baseThemes/Dark05.js 1.85 kB {0} [built]
     [576] ./~/material-ui-fj/styles/baseThemes/Dark06.js 1.85 kB {0} [built]
     [577] ./~/material-ui-fj/styles/baseThemes/Dark07.js 1.85 kB {0} [built]
     [578] ./~/material-ui-fj/styles/baseThemes/Dark08.js 1.85 kB {0} [built]
        + 851 hidden modules

「D:\K5CF\Map\frontend\public」フォルダに「js」フォルダが追加されていることを確認してください。
(実行前⇒実行後)

6. ディレクトリの移動

「D:\K5CF\Map\frontend\public」に移動してください。

cd \K5CF\Map\frontend\public

7. アプリケーションの配備

[cf push]コマンドを実行してください。

cf push <フロントエンドアプリ①>

実行例

    フロントエンドアプリ①「AAA00001-yyyy1234」に配備する場合

    cf push AAA00001-yyyy1234

実行結果

    「ERR!」が出力されていないこと、及びstateに「running」が出力されていることを確認してください。

    D:\K5CF\Map\frontend\public>cf push AAA00001-yyyy1234
    ----------------------------------------------------------------------------------
    ~省略~
    ----------------------------------------------------------------------------------
         state     since                    cpu    memory         disk         details
    #0   running   2017-09-19 04:46:55 PM   0.0%   4.1M of 256M   6.5M of 1G

4.7. アプリケーションの確認

1. アプリURLにアクセス

WebブラウザからアプリURLにアクセスしてください。
http://<フロントエンドアプリ①>.<リージョン識別子>.cf-app.net/

実行例

    東日本リージョン2のCFに配備したフロントエンドアプリ①「AAA00001-yyyy1234」にアクセスする場合
    http://AAA00001-yyyy5678.jp-east-2.cf-app.net/

2. アプリケーションの確認

①. 世界遺産の表示

「Cultural」をクリックしてください。

世界遺産が表示されたことを確認してください。

②. 世界遺産の確認

「+」ボタンを4~5回クリックしてください。

「東京」周辺が確認できるように調整してください。

「東京」周辺に世界遺産「国立西洋美術館」が登録されていることを確認してください。

以上で、ハンズオン「アプリケーション作成:Google Map × 世界遺産」は終了です。

  • 前へ
  • 4. アプリケーション作成:Google Map × 世界遺産
  • 次へ

Japan

国・地域を変更

ページの先頭へ