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で、次のようなパラメータを指定します。

　例えば、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
    },
    ～中略～
},