Saturday, August 29, 2015

Android開発 Glideを使ってURLから取得した画像をリサイズ表示

https://github.com/bumptech/glide
Androidの画像変換ライブラリのGlideを使って、URLから画像を取得・リサイズして表示します。

画像の非同期ダウンロード、メモリ管理、キャッシュ管理などを裏側でやってくれるので、利用者側がアプリに画像処理を実装するときには、ほとんど手間取らないで済む。という便利なライブラリです。
同じような画像変換ライブラリとしてPicassoというものが有りました(ライブラリ名はこちらの方が格好いい)が、GlideのほうがGoogle寄り、ということでこちらを使ってみました。
(GitHubのREADMEのいちばん下にThis is not an official Google product.という但し書きがありますが。なぜか、プルリクエストをするときにはGoogleのライセンスを承諾する感じです。

こんな感じで使うことができます。

元画像

アプリでURLを読み込んだ画像


実装するにあたって以下の資料が参考になりました。
Android - PicassoとGlideのどちらを使うべきか? - Qiita
http://qiita.com/rejasupotaro/items/ead90beaeaa2a6eace35
Introduction to Glide, Image Loader Library for Android, recommended by Google :: The Cheese Factory
http://inthecheesefactory.com/blog/get-to-know-glide-recommended-by-google/en
When placeholder is replaced by image it keeps with the size of placeholder when using .override(size, size) · Issue #542 · bumptech/glide
https://github.com/bumptech/glide/issues/542

以下、サンプルコードです。

Saturday, August 22, 2015

Android開発 Facebookページを開く

AndroidからFacebookページを開くようにします。
Facebookアプリが入っているときは、アプリを立ち上げてFacebookページを開き、Facebookアプリがないときにはブラウザで開きます。
いろいろ調べたのですが、古いFacebookアプリの場合のやり方が多く出てきて、そのやり方だと実装できないことがわかりました。そこで、Stack Overflowを見たところ、最近の実装方法を書いている人がいたので参考になりました。

Open facebook page from android app (in facebook version > v11) - Stack Overflow
http://stackoverflow.com/questions/24526882/open-facebook-page-from-android-app-in-facebook-version-v11

以下コードサンプルです。
アクションバーのSettingsをタップすると、Facebookページを開くようにしてみました。

Saturday, August 15, 2015

Android開発 フリックイベントを取得する


Androidでフリックイベントを取得してみます。

http://developer.android.com/intl/ja/reference/android/view/GestureDetector.html
GestureDetector クラスを使うことで詳細なタッチイベントを処理できるようになります。
そのなかの onFling メソッド(タップしてから移動して指が離れるまでの情報を扱う)を利用します。
public abstract boolean onFling (MotionEvent e1, MotionEvent e2, float velocityX, float velocityY)
パラメータは以下のようになります。
e1 The first down motion event that started the fling.
e2 The move motion event that triggered the current onFling.
velocityX The velocity of this fling measured in pixels per second along the x axis.
velocityY The velocity of this fling measured in pixels per second along the y axis.

実装するにあたって、下記の資料が参考になりました。
スワイプのイベントを取得する - ほげほげ(仮)
http://starzero.hatenablog.com/entry/20110414/1302759479
【Android】onFlingでフリック時の移動距離を取得する|俺メモ Web時々アプリ | OREMEMO
http://www.ore-memo.com/564.html
タッチパネルのダブルタップや長押しを検出する « Tech Booster
http://techbooster.jpn.org/andriod/device/3936/#more-3936

以下、サンプルコードです。

Saturday, August 8, 2015

Android開発 Fragment上にYouTube APIを使って動画を再生する

Android開発 FragmentでYouTube APIを使って動画を再生する
YouTube Android Player API | YouTube Android API | Google Developers
https://developers.google.com/youtube/android/player/

YouTubeはWebViewでも再生できるといえば再生はできるのですが、動作がのろかったり画像が荒かったりしたので、調べてみたところ、AndroidアプリにはYouTube APIというものが使えるということがわかりました。
このYouTube APIを使って、YouTubeの動画を再生してみました。
普通にアクティビティでYouTube APIを使うだけならば、他のサイトでもやり方を紹介されているので、より実用性が高いだろうと考えてフラグメント上でYouTubeを再生できるようにしてみます。

アプリをGoogle Developers Consoleに登録して、APIキーを取得

Registering your application | YouTube Android Player API | Google Developers
https://developers.google.com/youtube/android/player/register

YouTube APIを使うためには、Google Developers Consoleにアプリを登録して、APIキーを取得する必要があります。

1)KeyStoreを作成

こちらの資料が参考になりました。
Android Studioでアプリ公開用KeyStoreを作成して本番ビルドする
http://qiita.com/konifar/items/6c6b73deae9085a69666

Key store pathと、Aliasは以下のようにしました。
Key store path: /Users/username/StudioProjects/FragmentDeYoutube/my.keystore
Alias: FragmentDeYoutube

2)SHA1フィンガープリントを出力

ターミナルを開いてコマンドを入力します。
$ keytool -exportcert -alias FragmentDeYoutube -keystore /Users/username/StudioProjects/FragmentDeYoutube/my.keystore -list -v
Enter keystore password:
Alias name: FragmentDeYoutube
〜〜〜
  SHA1: XX:XX:XX:XX:XX:XX:XX:XX:XX:XX:XX:XX
  SHA256: XX:XX:XX:XX:XX:XX:XX:XX:XX:XX:XX:XX:XX:XX:XX:XX:XX:XX:XX:XX:XX:XX:XX:XX:XX:XX:XX:XX:XX:XX:
  Signature algorithm name: SHA1withRSA
  Version: 3
〜〜〜
SHA1の値を使います。

3)Google Developers ConsoleでAPIキーを取得

Registering your application | YouTube Android Player API | Google Developers
https://developers.google.com/youtube/android/player/register?hl=ja

Google Developers Console(https://console.developers.google.com/)は、ちょっとわかりずらいですが、以下の遷移でAPIキー作成できます。
プロジェクトを作成 -> APIと認証 -> API -> YouTube Data API -> APIを有効にする -> 認証情報 -> 公開 API へのアクセス 新しいキーを作成 -> Androidキー
フォームが表示されるので以下のように入力します。
リクエストを受け入れる Android アプリの証明書フィンガープリントとパッケージ名 (省略可)
SHA1 証明書フィンガープリントとパッケージ名(セミコロンで区切る)を 1 行に 1 組ずつ入力してください。 例: 45:B5:E4:6F:36:AD:0A:98:94:B4:02:66:2B:12:17:F2:56:26:A0:E0;com.example
入力が完了すると、APIキーが確認できるようになります。

YouTube Android Player APIライブラリを組み込む

YouTube Android Player API - Download | YouTube Android Player API | Google Developers
https://developers.google.com/youtube/android/player/downloads/?hl=ja

上記ページからファイルをダウンロードして、プロジェクトにライブラリを組み込みます。
YouTubeAndroidPlayerApi-1.2.1.zipを使います。
ダウンロードして、解凍後、libs/YouTubeAndroidPlayerApi.jarをプロジェクトの app/libs/ ディレクトリにコピーします。
$ cp /Users/username/Desktop/YouTubeAndroidPlayerApi-1.2.1/libs/YouTubeAndroidPlayerApi.jar /Users/username/StudioProjects/FragmentDeYoutube/app/libs/
build.gradleを編集。compile files('libs/YouTubeAndroidPlayerApi.jar')を追記します。
dependencies {
    compile fileTree(dir: 'libs', include: ['*.jar'])
    compile 'com.android.support:appcompat-v7:22.2.0'
    compile files('libs/YouTubeAndroidPlayerApi.jar')
}
これで、YouTube APIを使ってアプリを作る準備が出来ました。

サンプルコード

YouTubePlayerSupportFragment | YouTube Android API | Google Developers
https://developers.google.com/youtube/android/player/reference/com/google/android/youtube/player/YouTubePlayerSupportFragment?hl=ja

上記のように、YouTubePlayerSupportFragment が class android.support.v4.app.Fragment を継承しているので、v4ライブラリの Fragment の作法にのっとって実装していきます。
以下、サンプルコードです。

Saturday, August 1, 2015

Android開発 ListViewでオートロードを実装する


リストビューを下までスクロールしたときに、追加でリストを読み込みをする処理をAndroidで実装します。
Webで言うところの、オートページローディングに似た感じです。Infinite ScrollやjQuery.autopagerで実装する、あのクルクルです。
下記の記事が参考になりました。

visible true: ListViewで最後尾までスクロールしたら自動的に要素を追加読み込みするサンプル
http://visible-true.blogspot.jp/2010/12/listview.html
φ(.. )メモシテオコウ AndroidのListViewで最下部までスクロールしたらデータの更新する場合のめも - φ(・・*)ゞ ウーン カーネルとか弄ったりのメモ
http://kernhack.hatenablog.com/entry/2013/10/25/211637

注意:このサンプルプログラムでは、リストを選択したときの処理を入れていません。もし選択処理を入れるときには以下の記事を参考にしてください。
Android開発 LayoutInflaterを利用してListViewをカスタマイズする
http://takeshiyako.blogspot.com/2015/07/android-layoutinflater-listview.html

以下、サンプルプログラムです。
activity_main.xml
ListViewを追加します。 listview_footer.xml
ListViewのフッターのクルクルです。 MainActivity.java
リストのアダプターを準備して、リストビューに渡すことろまでは普通です。
そのあと、フッターを追加後、スクロールのリスナーの部分を書いています。