CodeZine(コードジン)

特集ページ一覧

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

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

  • LINEで送る
  • このエントリーをはてなブックマークに追加

目次

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のサイト
Instagram Graph APIのサイト

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

「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
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」タブの設定
「Details」タブの設定

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

「Security」タブの設定
「Security」タブの設定

 「Register」ボタンをクリックすると、クライアントIDが生成されます(サンプル画像では内容がわからないようにマスクをかけています)。表示された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にアクセストークンが記載されている
リダイレクトされたURLにアクセストークンが記載されている

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

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


  • LINEで送る
  • このエントリーをはてなブックマークに追加

バックナンバー

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

著者プロフィール

あなたにオススメ

All contents copyright © 2005-2021 Shoeisha Co., Ltd. All rights reserved. ver.1.5