Google Mapsを用いたInstagramのビジュアライゼーション

K5 PlaygroundでInstagramの写真をGoogle Mapsに表示する方法を説明します。K5 PlaygroundでInstagramのAPIを使う方法やGoogle Maps上に表示するReactコンポーネントのカスタマイズ方法を学べます。

概要

材料

• テンプレート: Map
• APIロジック: Instagram Recent Media

機能

• 写真をInstagramから取得する。
• 写真をGoogle Maps上へ表示する。

準備

• Google MapsのAPIキーを取得してください。
• InstagramのAccess Tokenを取得してください。

アプリの作成

K5 Playgroundにアクセスします。

Frontend

1. K5 PlaygroundでMapテンプレートを選択します。

Backend

1. GET sample_locations エンドポイントを選択します。

   1. SNSメニューからInstagram Recent MediaAPIロジックを追加します。

   2. CustomメニューからFUJITSU Empty LogicAPIロジックを追加して、次のように編集します。

      var images = results.data.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);

2. アプリをダウンロードします。

アプリのカスタマイズ

Frontend

1. frontend\app\config.jsにGoogle MapのAPIキーを記入します。

2. frontend\app\components\pages\MapPage.jsを次のように編集します。

   地図上のReactコンポーネントに画像を表示させる

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

3. (任意)frontend\app\components\pages\MapPage.jsを次のように編集します。

   左メニューの一番上を初期状態で選択状態にする

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

Backend

config.jsにInstagram APIのAccess Tokenなど必要な情報を設定します。

アプリのデプロイ

Backend

cd backend
cf push [APP_NAME]

Frontend

cd frontend
set API_URL=[Backend URL] # for Windows
export API_URL=[Backend URL] # for Mac/Linux
npm run build
cf push [APP_NAME] -p public

ダウンロード

• Sample Application

Version

• Map Template: v1.0.0