SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

Web APIで楽々Androidアプリ

AndroidアプリでInstagram APIを利用する

Web APIで楽々Androidアプリ(12)

  • X ポスト
  • このエントリーをはてなブックマークに追加

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に、次の行を追加します。

リスト1 AndroidManifest.xml
<uses-permission android:name="android.permission.INTERNET"/>

レイアウトの変更

 最新のADTでアプリケーションを新規作成すると、フラグメント(fragment_main.xml)を使用したスケルトンアプリケーションになります。今回のアプリでは、このfragment_main.xmlを、SwipeRefreshLayoutとGridViewを使ったものに変更します。

リスト2 fragment_main.xml
<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を利用します。

dataの要素
{
    ~中略~
    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
    },
    ~中略~
},

次のページ
最後に

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
Web APIで楽々Androidアプリ連載記事一覧

もっと読む

この記事の著者

山田 祥寛(ヤマダ ヨシヒロ)

静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for Visual Studio and Development Technologies。執筆コミュニティ「WINGSプロジェクト」代表。主な著書に「独習シリーズ(Java・C#・Python・PHP・Ruby・JSP&サーブレットなど)」「速習シリーズ(ASP.NET Core・Vue.js・React・TypeScript・ECMAScript、Laravelなど)」「改訂3版JavaScript本格入門」「これからはじめるReact実践入門」「はじめてのAndroidアプリ開発 Kotlin編 」他、著書多数

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

WINGSプロジェクト 高江 賢(タカエ ケン)

WINGSプロジェクトについて>有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂きたい。著書記事多数。 RSS X: @WingsPro_info(公式)、@WingsPro_info/wings(メンバーリスト) Facebook

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/7990 2014/09/04 14:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング