SHOEISHA iD

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

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

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

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

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

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

新規アプリの作成~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ロジック「Sample Data」を削除

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

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

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

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

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

APIロジック「FUJITSU Empty Logic」を追加
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」を編集
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: "<取得したアクセストークン>" }

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

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

次のページ
アプリをデプロイしてみよう

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

  • 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」など、さまざまなカンファレンスを企画・運営しています。

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

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

メールバックナンバー

アクセスランキング

アクセスランキング