Fujitsu

K5 Playground

K5 Playground × CF Webハンズオン

ハンズオン教材
アプリケーション作成:Google Map × Instagram

  • 前へ
  • 5. アプリケーション作成:Google Map × Instagram
  • 次へ

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

Instagramに投稿した画像をGoogle Mapに表示するアプリケーションです。
本ハンズオンでは、Google MapとInstagramのAPIを連携することで、Instagramに投稿した画像がMap上に表示されます。

(完成イメージ)

(構成イメージ)

5.2. ハンズオンの流れ

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

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

5.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キーを取得してください。

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

事前準備5.Instagram APIアクセストークンの取得」を参照して、アクセストークンを取得してください。

Instagramに写真を投稿

事前準備7.Instagramに写真を投稿」を参照して、Instagramに「キャプション」、及び「位置情報」を追加した写真を投稿してください。

作業用フォルダの作成

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

5.4. K5 Playgroundの操作

5.4.1. テンプレートの選択

1. K5 Playgroundにアクセス

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

2. テンプレートの選択

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

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

5.4.2. WebAPIのカスタマイズ

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

「CREATE NEW APP」ボタンをクリック

2. アプリケーション名の変更

左メニュー「Basic Information」から「APP info」をクリックしてください。

「APP Name」に[MyInstaMap]と入力してください。

5.4.3. WebAPIロジックのカスタマイズ

1. 「GET /sample_locations」ロジックのカスタマイズ

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

① APIロジック「Sample Data」の削除

APIロジック「Sample Data」の「×」をクリックしてください。

APIロジック「Sample Data」が削除されたことを確認してください。

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

右メニュー「API Logics」から「SNS」をクリックしてください。

APIロジック「Instagram Recent Media」を「Start」と「End」の間にある「▼」にドラック&ドロップしてください。

APIロジック「Instagram Recent Media」が追加されたことを確認してください。

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

右メニュー「API Logics」から「Custom」をクリックしてください。

APIロジック「FUJITSU Empty Logic」を「Instagram Recent Media」と「End」の間にある「▼」にドラック&ドロップしてください。

APIロジック「FUJITSU Empty Logic」が追加されたことを確認してください。

④ APIロジック「FUJITSU Empty Logic」のソースコードを編集

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

デフォルトで入力されているソースコードを削除し、以下のソースコードを入力してください。
ここでは、キャプション、位置情報を設定した写真のみを抽出するようにしています。
(注)お試し用のAPI ID使用しているため、抽出される写真は最新の20件のみとなります。

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);

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

入力したソースコードが反映されているかを確認してください。

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

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

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

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

2. zipファイルの展開

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

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

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

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

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

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

1. ディレクトリの移動

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

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;

3. ディレクトリの移動

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

4. 「MapPage.js」の修正

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

① 左メニューのデフォルト選択値を修正

赤文字部分を追加し、上書き保存してください。

----------------------------------------------------------------------------------
~省略~
----------------------------------------------------------------------------------
state = {
  visibles: [0],
  openDrawer: false,
};
----------------------------------------------------------------------------------
~省略~
----------------------------------------------------------------------------------

ここでは、デフォルトで「Cultural」が選択済となるよう、修正を行っています。
修正イメージ(修正前⇒修正後)

(注)Map上に表示される場所は、利用者のInstagram投稿状況によって異なります。

② デフォルトの「表示位置」、「拡大縮小値」を修正

赤文字部分を修正し、上書き保存してください。

----------------------------------------------------------------------------------
~省略~
----------------------------------------------------------------------------------
static defaultProps = {
  style: {},
  center: {
    lng: 139.800000,
    lat: 35.600000,
  },
  zoom: 11
};
----------------------------------------------------------------------------------
~省略~
----------------------------------------------------------------------------------

ここでは、東京周辺が表示されるよう、デフォルトの「表示位置」、「拡大縮小値」の修正を行っています。
修正イメージ(修正前⇒修正後)

(注)Map上に表示される場所は、利用者のInstagram投稿状況によって異なります。

③ Map上の表示枠を修正

赤文字部分を修正し、上書き保存してください。

----------------------------------------------------------------------------------
~省略~
----------------------------------------------------------------------------------
<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>
  }
/>
----------------------------------------------------------------------------------
~省略~
----------------------------------------------------------------------------------

ここでは、取得してきた画像がMap上に表示されるよう、修正を行っています。
修正イメージ(修正前⇒修正後)

(注)Map上に表示される場所は、利用者のInstagram投稿状況によって異なります。

④ メニュー欄の削除

赤文字部分を削除し、上書き保存します。

----------------------------------------------------------------------------------
~省略~
----------------------------------------------------------------------------------
const appBar = (
  <div>
    <AppBar
      title="World Heritage Map"
      titleStyle={styles.title}
      onLeftIconButtonTouchTap={() =>
         this.setState({ openDrawer: !this.state.openDrawer })}
    />

    <Drawer
      docked={false}
      width={200}
      open={this.state.openDrawer}
      onRequestChange={open => this.setState({ openDrawer: open })}
      containerStyle={styles.drawerContainer}
      style={styles.drawer}
    >
      {left}
    </Drawer>
  </div>
);

return (
  <div>
    <MediaQuery minWidth={700}>
      <BaseLayout
        top={top}
        center={center}
        left={left}
        leftStyle={{ width: 200 }}
        bottom={bottom}
        style={mergedRootStyle}
        fixed
      />
    </MediaQuery>
    <MediaQuery maxWidth={699}>
      <BaseLayout
        top={appBar}
        center={center}
        bottom={bottom}
        style={mergedRootStyle}
        fixed
      />
    </MediaQuery>
  </div>
);
----------------------------------------------------------------------------------
~省略~
----------------------------------------------------------------------------------

ここでは、メニュー欄が削除されるよう、修正を行っています。
修正イメージ(修正前⇒修正後)

(注)Map上に表示される場所は、利用者のInstagram投稿状況によって異なります。

⑤ タイトルを修正

赤文字部分を修正し、上書き保存します。

------------------------------------------------
~省略~
------------------------------------------------
const top = <OneRowHeader title={"MyInstaMap"} />;
------------------------------------------------
~省略~
------------------------------------------------
const appBar = (
      <div>
        <AppBar
          title="MyInstaMap"
          titleStyle={styles.title}
        />

      </div>
);
------------------------------------------------
~省略~
------------------------------------------------

ここでは、画面上部のタイトルが変更されるよう、修正を行っています。
修正イメージ(修正前⇒修正後)

(注)Map上に表示される場所は、利用者のInstagram投稿状況によって異なります。

5.5.2. バックエンドの修正

1. ディレクトリの移動

「D:\K5CF\MyInstaMap\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

3. 「config.js」の修正

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

事前準備「Instagram APIアクセストークンの取得」で取得したアクセストークンを赤文字部分([ACCESS_TOKEN])に設定し、上書き保存します。

module.exports = {			
  serverPort: process.env.PORT || 3000,					
  instagram: { accessToken: "[ACCESS_TOKEN]" }					
};

設定例

    アクセストークンが「Sample_Sample」の場合

    module.exports = {			
      serverPort: process.env.PORT || 3000,					
      instagram: { accessToken: "Sample_Sample" }					
    };

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

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

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

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

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

5.6.1. バックエンドの配備

1. ディレクトリの移動

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

d:						
cd \K5CF\MyInstaMap\backend

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

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

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

実行例

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

    cf push AAA00001-xxxx1234

実行結果

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

    D:\K5CF\MyInstaMap\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

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

1. ディレクトリの移動

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

d:						
cd \K5CF\MyInstaMap\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\MyInstaMap\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\MyInstaMap\frontend」フォルダに「node_modules」フォルダが追加されていることを確認してください。
(実行前⇒実行後)

4. タスク一覧の取得

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

npm run

実行結果

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

    D:\K5CF\MyInstaMap\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\MyInstaMap\frontend>npm run build
    
    > Map@1.0.0 build D:\K5CF\MyInstaMap\frontend
    > webpack -p --progress --colors --display-error-details --env.production
    
    Hash: 6dd1b5901f9d770f1645
    Version: webpack 2.7.0
    Time: 33844ms
        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 956 bytes {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\MyInstaMap\frontend\public」フォルダに「js」フォルダが追加されていることを確認してください。
(実行前⇒実行後)

6. ディレクトリの移動

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

cd \K5CF\MyInstaMap\frontend\public

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

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

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

実行例

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

    cf push AAA00001-yyyy1234

実行結果

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

    D:\K5CF\MyInstaMap\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

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

1. アプリURLにアクセス

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

実行例

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

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

Instagramに投稿した画像がMap上に表示されていることを確認してください。
(注)Map上に表示される場所は、利用者のInstagram投稿状況によって異なります。

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

  • 前へ
  • 5. アプリケーション作成:Google Map × Instagram
  • 次へ

Japan

国・地域を変更

ページの先頭へ