撮影した写真やビデオをほかのユーザーと簡単に共有できることで人気の Instagram ですが、遊びや旅行の記録として使用している方も多いのではないでしょうか。
Instagram には、どこで撮影した写真なのか、個々の投稿を地図に表示することはできますが、複数の投稿を地図に表示する機能がありません。
地図上で、撮影した場所を一目で見ることができたらいいのにと思っていたので、Instagram API と ArcGIS API for JavaScript を使い、投稿した写真が持つ位置情報を地図に表示する Web アプリを作成してみました。
作成したアプリは Esriジャパン GitHub に公開しています。
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 の作成
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つのパラメーターを設定し、グラフィックを作成しました。
// シンボルを作成
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 アカウントでお試しください。