Instagram に投稿した写真をマッピングしてみた

2 Kudos

撮影した写真やビデオをほかのユーザーと簡単に共有できることで人気の Instagram ですが、遊びや旅行の記録として使用している方も多いのではないでしょうか。

Instagram には、どこで撮影した写真なのか、個々の投稿を地図に表示することはできますが、複数の投稿を地図に表示する機能がありません。
地図上で、撮影した場所を一目で見ることができたらいいのにと思っていたので、Instagram API と ArcGIS API for JavaScript を使い、投稿した写真が持つ位置情報を地図に表示する Web アプリを作成してみました。
作成したアプリは Esriジャパン GitHub に公開しています。

Instagram アカウントへのアクセス

Instagram のアカウントへアクセスするためには、アプリを登録し、認証を行います。
登録、認証は Instagram API のページから行えます。

アプリの管理ページから新しいアプリを登録します。
今回は、クライアント側で認証を行うため [Disable implicit OAuth] オプションのチェックを外しました。
また、リダイレクト先に、アプリの URL を設定しています。

アプリを登録したら、Authentication を参考にして authorization URL へアクセスし、アクセストークンを取得できることを確認します。

メディアの取得

Instagram API のドキュメントを参考に、自分のアカウントからメディアを取得するエンドポイントを使って、メディアを取得してみます。

ArcGIS API for JavaScript には、サーバーへデータを送受信するための "esri/request" モジュールが提供されているので、このモジュールを使ってエンドポイントへリクエストを送ります。

まず、URL からアクセストークンを取得します。
authorization URL へアクセスすると、リダイレクト URL のフラグメント識別子にアクセストークンが付与されるので、location.hash を使いアクセストークンを取得します。

var token = location.hash.slice(1);‍‍

取得したアクセストークンを付与して、エンドポイントへリクエストします。

// エンドポイント
var url = "https://api.instagram.com/v1/users/self/media/recent/?" + token;
// エンドポイントへリクエスト
esriRequest(url, {
   responseType: "json"
}).then(function(response){
   console.log(“response: ”, response);
}).otherwise(function(err){
   console.log(“err: ”, err);
});‍‍‍‍‍‍‍‍‍‍‍

アプリを起動し、レスポンスを確かめてみたところ、クロスドメインのエラーが返ってきていました。
config モジュール（"esri/config"）を使用して、プロキシ経由でリクエストするよう設定します。

// プロキシの設定
esriConfig.request.proxyUrl = "プロキシ URL";

メディアの表示

プロキシの設定でメディアを取得することができたので、メディアを表示する地図を作成します。
地図の作成には、Map（"esri/Map"）と MapView（"esri/views/MapView"）を使用します。

Map
地図に含まれるデータを定義します。
今回は背景として地形図を設定しました。
MapView
Map をどのように見せるのかを定義します。
MapView を表示する DOM 要素、MapView に表示させる Map オブジェクト、MapView の中心地点とズームレベルを設定します。

// Map の作成
var map = new Map({
   basemap: "topo"
});
// View の作成
var view = new MapView({
   container: "viewDiv",
   map: map,
   center: [139.77, 35.68],
   zoom: 5
});

作成した地図にメディアを表示するため、グラフィック（"esri/Graphic"）を作成します。
グラフィックは、地図上に一時的な位置情報を表示するために使用されます。

今回は、以下の4つのパラメーターを設定し、グラフィックを作成しました。

ジオメトリ
グラフィックの位置を定義します。
メディアが撮影された地点を作成するため、ポイント（"esri/geometry/Point"）を使用します。メディアには緯度経度の情報が含まれているので、ポイントの latitude/longitude パラメーターへそれぞれ渡します。
シンボル
グラフィックの色や形などのスタイルを定義します。
画像を表示するマーカーシンボル（"esri/symbols/PictureMarkerSymbol"）を使い、赤色のピンを表示するよう設定します。
属性
グラフィックの属性を定義します。
取得したメディアに含まれる、ロケーション名、キャプション、「いいね」の数、画像のリンク、メディアのリンクを設定しています。
ポップアップテンプレート（"esri/PopupTemplate"）
グラフィックをクリックすると表示されるポップアップのコンテンツを定義します。
メディアに含まれる画像とキャプションを表示するよう定義し、元のメディアへ飛ぶリンクを追加しています。

// シンボルを作成
var symbol = new PictureMarkerSymbol({
   //......
});
// ポップアップテンプレートを作成
var popupTemplate = new PopupTemplate({
   //......
});
// 取得したメディアに含まれる位置情報をもとに地図に表示
array.forEach(data, function(item){
   // 位置情報を含む場合
   if(item.location && item.type === "image"){
      // 地点を作成
      var point = new Point({
         latitude: item.location.latitude,
         longitude: item.location.longitude
      });
      // 属性を作成
      var text = (item.caption) ? item.caption.text : null;
      var attributes = {
         name: item.location.name,
         text: text,
         likes: item.likes.count,
         imageUrl: item.images.thumbnail.url,
         link: item.link
      }
      // グラフィックを作成
      var graphic = new Graphic({
         geometry: point,
         symbol: symbol,
         attributes: attributes,
         popupTemplate: popupTemplate
      });
      // グラフィックを地図に表示
      view.graphics.add(graphic);
   }
});

これで、Instagram から投稿したメディアを取得し、メディアに含まれる地点が地図に表示されます。
また、地点をクリックすることで、ポップアップにメディアとキャプションを表示します。

ArcGIS API for JavaScript は、ArcGIS for Developers へのサインアップで、開発・評価の目的に限り無償で使用できます。
みなさんもぜひ、ご自身の Instagram アカウントでお試しください。

Instagram に投稿した写真をマッピングしてみた