AKB関連画像検索アプリ
今回作成するアプリは、Instagramの画像につけられたタグから、AKB48という名前に関連したものを検索し、そのサムネイル画像を一覧表示します。そして、いずれかの画像をタップすると、拡大して表示します。
また、表示画像の更新は、Gmailアプリなどで使われている、画面を下にひっぱって行う操作(下方向へのスワイプ操作)で行います。
アプリケーションの作成は、次のような手順になります。今回は、[1]~[6]までを解説することにします。
- [1]プロジェクトの新規作成
- [2]permissionの追加
- [3]レイアウトの変更
- [4]HttpAsyncLoader、ParseJsonクラス、jacksonライブラリの追加
- [5]Instagram API解析クラスの追加
- [6]グリッドビューの表示(今回はURLを表示するところまで)
- [7]画像表示ライブラリの追加(次回以降に解説)
- [8]画像表示用アダプタークラスの追加(〃)
- [9]全画面表示、カラム数の動的変更、拡大画像表の追加(〃)
プロジェクトの作成
では、Androidアプリケーションのプロジェクトを新規作成しましょう。Eclipseの[新規]ー[Androidアプリケーション・プロジェクト」を選択します。
アプリケーション名は、AKBGalleryとし、アクティビティは前回同様[Blank Activity]を選択します。このスケルトンのアプリケーションに、必要なコードを追加していきます。
permissionの追加
Instagram APIを利用するには、インターネットへのアクセスが必要なので、アプリケーションのpermissionの設定をしておきます。AndroidManifest.xmlに、次の行を追加します。
<uses-permission android:name="android.permission.INTERNET"/>
レイアウトの変更
最新のADTでアプリケーションを新規作成すると、フラグメント(fragment_main.xml)を使用したスケルトンアプリケーションになります。今回のアプリでは、このfragment_main.xmlを、SwipeRefreshLayoutとGridViewを使ったものに変更します。
<android.support.v4.widget.SwipeRefreshLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:id="@+id/SwipeRefreshLayout" android:layout_width="match_parent" android:layout_height="match_parent" tools:context="com.rakuraku.android.akbgallery.InstagramFragment" > <GridView android:id="@+id/gridView" android:numColumns="1" android:layout_width="match_parent" android:layout_height="match_parent" /> </android.support.v4.widget.SwipeRefreshLayout>
SwipeRefreshLayoutは、Android Support Library, revision 19.1.0で追加されたクラスで、下にひっぱって行う操作(下方向へのスワイプ操作)でプログレス表示が可能なレイアウトです。このレイアウトを使うと、Gmailアプリなどで使われている更新操作と同様なインターフェースが実現できます。
なお、Android Support Libraryとは、Android 4.0以前の古いプラットフォーム上で、Fragmentなどの新しいAPIを使用できるようにするライブラリです。今回の連載では、Android 4.0以降を対象としていましたので、特に利用していませんでしたが、プロジェクトの新規作成時に、自動的に追加されています。
SwipeRefreshLayoutには、GridViewを配置しています。GridViewとは、その名のとおり、指定した列数のグリッド形式のビューです。ここでは、numColumnsで列数に1を指定しています(列数1の場合は、ListViewと同じ見た目になります)。
HttpAsyncLoader、ParseJsonクラス、Jacksonライブラリの追加
Instagram APIは、レスポンスにJSON文字列を返しますので、以前作成したHttpAsyncLoader、ParseJsonという2つのクラスと、Jacksonライブラリを追加しておきます。HttpAsyncLoaderは、非同期でHttp通信を行うローダークラスで、ParseJsonとは、Jacksonというライブラリを使ってJson文字列を解析するクラスです。
レスポンスコード
ここで、Instagram APIを説明しておきましょう。Instagram APIは、「https://api.instagram.com/v1/」というURLからアクセスします。
今回利用するAPIは、画像につけられたタグを検索し、画像情報を取得するAPIで、次のようなパラメータを指定します。
パラメータ | 内容 |
---|---|
/tags/{タグ名}/media/recent | 指定したタグを検索する |
client_id | クライアントID(access_tokenでも可) |
min_tag_id | 指定したタグIDより前の画像を返す(オプション) |
max_tag_id | 指定したタグIDより後の画像を返す(オプション) |
例えば、akb48というタグを検索するには、https://api.instagram.com/v1/tags/akb48/media/recent?client_id=XXXXXというURLにアクセスします。すると、JSON形式のレスポンスデータが得られます。
レスポンスデータの全体の構造は、次のようになっています(アプリに利用しないデータは省略しています)。
{ pagination: { ~中略~ next_url: "https://api.instagram.com/v1/tags/akb48/media/XXXX" }, meta: {}, data: [] }
画像情報は、1回のアクセスですべて取得できるわけではなく、20枚単位で取得できるようになっています。
paginationには、今回のタグIDの範囲や、次の20枚を取得するURL(next_url)などが含まれます。従ってnext_urlにアクセスしていけば、20枚単位で次々に情報を取得できることになります。
dataが各画像情報の配列になっています。dataの各要素には、画像のURLやキャプションなどの関連情報が含まれています。画像は3種類の解像度のものが取得でき、今回はサムネイル用画像と、一番大きな解像度のstandard_resolutionに含まれるURLを利用します。
{ ~中略~ images: { low_resolution: { }, thumbnail: { url: "http://scontent-b.cdninstagram.com/XXXXX.jpg", width: 150, height: 150 }, standard_resolution: { url: "http://scontent-b.cdninstagram.com/XXXXX.jpg", width: 640, height: 640 }, ~中略~ },