Android 5.0からSVG準拠のdrawableが書けるようになりました

こんにちは、Androidチームの中川@Nkznです。

Android Studio 0.8.14のリリースノートを見ていて知ったのですが、LollipopのAPI Level 21では<vector>などのdrawable系タグが拡充されたのですね。

名前的にベクターイメージが書けそうですが、実際何ができるのだろうと思って調べてみました。

• Working with Drawables | Android Developers

Vector images are represented in Android as VectorDrawable objects. For more information about the pathData syntax, see the SVG Path reference.

<vector>の中に書く<path>タグのpathDataの記法が、SVG準拠のようです。サンプルコードがこちら。

 <path android:fillColor="#8fff"
     android:pathData="M20.5,9.5
                       c-1.955,0,-3.83,1.268,-4.5,3
                       c-0.67,-1.732,-2.547,-3,-4.5,-3
                       C8.957,9.5,7,11.432,7,14
                       c0,3.53,3.793,6.257,9,11.5
                       c5.207,-5.242,9,-7.97,9,-11.5
                       C25,11.432,23.043,9.5,20.5,9.5z" />

なるほどとてもSVGでした。

何が嬉しいのか

http://developer.android.com/design/style/iconography.html

SVGをはじめとしたベクターイメージの強みの１つとしてよく云われるのは、拡縮しても綺麗さが変わらないという点です。

Androidでは（最近ではiOSも）対象端末の解像度ごとに別々の大きさの画像を用意するのがそれなりに手間です。また、同じアイコンでもアプリ内で使う場所（左上用、ボタン用、見出し用など）が変われば、それぞれに別々のサイズを用意しなければいけません。

SVGで画像リソースを作成できるようになれば、１種類のリソースで様々なサイズの要求に応えることができるようになりますので、嬉しい事になりそうです。

余談：公式Material Designアイコン

そういえば先日、Googleがマテリアルデザイン向けのシステムアイコンをリリースしたことが話題になっていました。

• google/material-design-icons
• Release Material Design Icons · google/material-design-icons

このニュースを見た時には「SVGが用意されていても、どうせWebでしか使えない」と考えていたのですが、Lollipop以降のバージョンでは<vector>によってSVG（っぽいもの）が利用できますので、転用の可能性が広がります。

試してみた

実際にSVGはどのように表示されるのでしょうか。前述のマテリアルデザインアイコンから下記のic_add_to_photos_48px.svgを拝借して、表示してみたいと思います。

SVGから変換（手作業）

• ic_add_to_photos_48px.svg

<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48">
    <path d="M0 0h48v48h-48z" fill="none"/>
    <path d="M8 12h-4v28c0 2.21 1.79 4 4 4h28v-4h-28v-28zm32-8h-24c-2.21 0-4 1.79-4 4v24c0 2.21 1.79 4 4 4h24c2.21 0 4-1.79 4-4v-24c0-2.21-1.79-4-4-4zm-2 18h-8v8h-4v-8h-8v-4h8v-8h4v8h8v4z"/>
</svg>

• drawable/ic_add_to_photos_48px.xml

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:height="256dp"
    android:width="256dp"
    android:viewportWidth="48"
    android:viewportHeight="48">
    <path
        android:fillColor="#000000"
        android:pathData="M8 12h-4v28c0 2.21 1.79 4 4 4h28v-4h-28v-28zm32-8h-24c-2.21 0-4 1.79-4 4v24c0 2.21 1.79 4 4 4h24c2.21 0 4-1.79 4-4v-24c0-2.21-1.79-4-4-4zm-2 18h-8v8h-4v-8h-8v-4h8v-8h4v8h8v4z"/>
</vector>

それっぽく似たような雰囲気にしてみました。width, height周りは適当です。

この時点で、レイアウトエディタがプレビューをしてくれるようになりました。

数値を適当に弄ってみるとちゃんと反映されます。

画面に組み込む

一度drawableリソースとして取り込んでしまえば、使い方としてはいつもの<shape>と似たようなものです。

• activity_main.xml

<!-- 略 -->
<FrameLayout
    android:layout_width="24dp"
    android:layout_height="24dp"
    android:background="@drawable/ic_add_to_photos_48px" />
<!-- 略 -->

上記のようなFrameLayoutを何サイズか並べてみたものがこちらになります。

一手間かければSVGアイコンがAndroidでも使えるようになったことがお分かりいただけたかと思います。

まとめ/雑感

ということで、長らくAndroidアプリ開発者を悩ませてきた画面の断片化問題が１つ解決するのではないかという期待が持てる機能を紹介しました。

最後に少しだけネガティブなことを言うと、パフォーマンスとか大丈夫なのかなーと思ったりはしました。それから、

@nkzn それだ！というか、ここまでやっておいてなぜsvgをそのままつかえるようにしてくれないんでしょうかね？

— ウズキアオバ (@uzuki_aoba) 2014年10月30日

これは思いました。わざわざ直すのは面倒です。drawableフォルダにSVGファイルそのまま置かせてもらえると一番嬉しいのですが・・・しばらくは動的にSVGをVectorDrawableに変換するような手法を使うのが現実的でしょうか。

まあ、日本でLollipopが十分に普及するまではまだしばらくかかると思いますので、周辺環境が整うのを見守りたいと思います。（support-v7あたりに取り込まれないかなと）

それでは今回はこのへんで。

宣伝

ウォーターセル株式会社では、農業生産者に嬉しい情報の扱い方を一緒に考えてくれるWebフロントエンドエンジニア、Railsエンジニア、Androidアプリエンジニアを探しています。

興味のある方は、是非一度新潟まで遊びに来てみてください。

GCMのUser Notificationsの使い方

こんにちは、Androidチームの中川@Nkznです。

Google Cloud Messaging for Androidの勉強をしていたところ、User Notificationsのドキュメントに分かりづらい部分があってハマったので、備忘録として書き残しておこうと思います。

というわけで、User Notificationsがどんな機能なのかは説明しません。知りたい方は、ドキュメントをお読みください。

User Notificationsを使わずにpush配信する

まずは、普通のpush配信のやり方。公式資料でも丁寧に紹介されていますし、日本語記事も多くあります。

• GCM HTTP Connection Server | Android Developers
• [改訂版]Google Cloud Messaging (GCM) でプッシュ配信する[Android] ｜ Developers.IO

curl \
--header "Authorization: key=<API_KEY>" \
--header Content-Type:"application/json" \
https://android.googleapis.com/gcm/send \
-d "{\"registration_ids\":[\"<REGID>\"],\"data\":{\"message\":\"Hello\"}}"

registration_idsをJSON配列として列挙すれば、IDに紐付いた端末に{"message":"Hello"}というデータが配信されます。

User Notificationsを使ってpush配信する

同じユーザーが持っている複数の端末に対してPush通知を送りたい場合は、registration_idsを列挙するよりも、User Notificationsを使ったほうが便利そうです。

• User Notifications | Android Developers

シンプルな流れとしては、下記の手順になります。

1. 複数のregistration_idをまとめたnotification_keyを発行する
2. notification_keyを使ってpush通知を行う

notification_keyを発行する

まずはnotification_keyを発行しましょう。各種ID, KEYを適切に配置していけば、特に難しいことはありません。

Request

curl \
--header "project_id: <PROJECT_NUMBER>" \
--header "Authorization: key=<API_KEY>" \
--header Content-Type:"application/json" \
https://android.googleapis.com/gcm/notification \
-d "{\"operation\": \"create\",\"notification_key_name\": \"appUser-Hogehoge\",\"registration_ids\":[\"<REGID>\",\"<REGID>\",\"<REGID>\"]}"

Response

{"notification_key":"<NOTIFICATION_KEY>"}

上記のようなリクエストを送ることで、無事にnotification_keyを取得できました。

push通知を行う（仮）

それでは、notification_keyを使って実際にpush通知を行ってみます。

• Implementing GCM Server | Android Developers

registration_idsの説明を見ると、必須項目についての話題がありました。

A request must include a recipient—this can be either a registration ID, an array of registration IDs, or a notification_key. Required.

registration_idsかnotification_keyのどちらかを必須で含めればよいようです。ということはregistration_idsを使ったパターンをそのまま差し替えればいけるはず。

Request

curl \
--header "Authorization: key=<API_KEY>" \
--header Content-Type:"application/json" \
https://android.googleapis.com/gcm/send \
-d "{\"notification_key\":\"<NOTIFICATION_KEY>\",\"data\":{\"message\":\"Hello\"}}"

Response

Missing "registration_ids" field

・・・あれっ？

困ったときのStackOverflow

StackOverflowを探してみると同じ悩みを持った人が見つかりました。

• android - GCM User Notifications: Missing "registration_ids" field - Stack Overflow

ベストアンサーがこちらになります。

The documentation is buggy, you have to use this request:

// 略
{ 
   "to": "<NOTIFICATION-ID>",
   "data": {},
}

notification_keyの記述にはtoを使うそうです。

この回答者の方はドキュメントのバグと言ってますが、現在のドキュメントを改めて見てみたところ、notification_keyの行の端にこんな記述がありました。

HTTP. This feature is supported in CCS, but you use it by specifying a notification key in the "to" field.

• Message Parameters

なるほど、notification_keyフィールドがサポートされているのはCCS方式でリクエストするときだけで、あとの場合はtoに入れてねということでしょうか。

しかしこの書き方だと、結局サポート先がHTTPなのかCCSなのか分かりづらいですね。また、当のtoの行を見ると、CCSのみのサポートでHTTPはサポートしていないことになっているので、なるほどこれはbuggyと言われても仕方がない感じがします。

push通知を行う（真）

そんなわけで、最終的にnotification_keyを付与したリクエストは、下記の形になりました。

curl \
--header "Authorization: key=<API_KEY>" \
--header Content-Type:"application/json" \
https://android.googleapis.com/gcm/send \
-d "{\"to\":\"<NOTIFICATION_KEY>\",\"data\":{\"message\":\"Send with User Notification\"}}"

手元の端末が一斉に震える様は壮観でした。

まとめ

GCMを触り始めてみて、push通知が思ったより簡単に、そして無料でできることに驚いています。

ほしい情報をほしい時に通知する、という理想を実現するためには、push通知は大きな役割を果たしてくれます。Android Wearな腕時計型デバイスやGoogle Glassなど、アプリからの通知を受け取ってユーザーの見やすい場所に表示してくれる強力なツールも今後増えていくことでしょう。

通知周りはまたしばらく勉強していきたいと思います。

宣伝

ウォーターセル株式会社では、農業生産者に嬉しい情報の扱い方を一緒に考えてくれるWebフロントエンドエンジニア、Railsエンジニア、Androidアプリエンジニアを探しています。

興味のある方は、是非一度新潟まで遊びに来てみてください。

【注意】GitHubのrawファイル用URLが変わったようです

こんにちは。Androidチームの中川@Nkznです。

作ったまま放置していた技術者ブログをそろそろ動かして行きたいと思います。

変わったこと

GitHubでMarkdownなどのファイルを閲覧する際に、元々のプレーンテキストのファイルが見たくなると、「raw」というボタンにお世話になると思います。これ↓ですね。

さて、これまではrawでファイルを見た場合のURLは

https://raw.github.com/android/platform_packages_apps_settings/master/res/layout/display.xml

こんな感じでした。

それがこの度、こうなりました。

https://raw.githubusercontent.com/android/platform_packages_apps_settings/master/res/layout/display.xml

何のことはないドメイン変更なのですが、これによって一部の人が困る事案が発生しました。

問題の焦点

Gradle時代のAndroidアプリの構成管理においては、GitHubをMavenリポジトリとして扱う、という裏ワザじみたライブラリ管理手法が出てきています。

u1aryzの備忘録とか: githubをMavenリポジトリとしてAndroidライブラリプロジェクト(aar)をデプロイして使用する
http://u1aryz.blogspot.jp/2013/06/githubmavenandroidaar.html

上記のような手法で実際にGitHubをMavenリポジトリ化して配布しているものの一つが、@sys1yagiさんのindirect-injectorです。

実際には下記のように記述して導入していました（過去形）。

repositories {
    mavenCentral()
    maven { url 'https://raw.github.com/sys1yagi/indirect-injector/master/repository' }
}

dependencies {
    compile 'com.sys1yagi:indirect-injector:0.0.2'
}

ドメインの！！！フルパスで！！！！指定する！！！！！！

というわけで、本記事はドメイン変更の影響で起きた問題の備忘録です。

起こったこと

Gradleビルドが始まるまでに数分かかるようになった。

raw.github.comのドメインが無くなっているのに、ライブラリを請求しに行こうとして失敗することによって、時間がかかっていたようです。

ビルドが遅いなーと思ったら、 ./gradlew clean assembleDebug --info などで確認してみましょう。 Resource missing だらけの涙ぐましいログを見ることができるかもしれません。

解決策

raw.github.comと書いてあった部分をraw.githubusercontent.comに置き換えましょう。

手元の環境では5分かかっていたテストが2分になりました。もう少しチューニングしたいところですが、一番問題だったところを解決できたので万々歳です。

Hello, Hatena Blog!

中川です。

勢いで始めてみました。
いちおう開発者ブログのつもりで作ったので、一番大事なシンタックスハイライトを確認。

package jp.water_cell.android.HelloHatenaBlog;

import android.app.Activity;
import android.os.Bundle;
import android.widget.TextView;

public class HelloHatenaBlogActivity extends Activity {

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        
        TextView tvHelloHatenaBlog = new TextView(this);
        tvHelloHatenaBlog.setText("Hello, HatenaBlog!");
        
        setContentView(tvHelloHatenaBlog);
    }
}

ついでにスーパーpre記法に書いてあるRubyコードも確認。

 class Foo
   def bar'baz' # return baz
   end
 end

まだ色は付かないようです(´・ω・｀)

Gist埋め込みはどうだろう。

Gistのシンタックスハイライト自体がちょっとアレですが、こちらは色付けされるみたいですね。
こんな調子でコードを貼っていけたらいいなあと思います。

Yukiya Nakagawa