Posted:
Google は 11 月 26 日(水)、Android Wear をテーマにした Design Sprint を開催します。本 Design Sprint では、Android Wear の アプリを開発する上でのペルソナの分析や利用シーンの作成を行い、最終的には UI のペーパーモックアップを作成します。
■Design Sprint とは

Design Sprint とは Google Ventures が考案した、アプリケーション/サービスのアイデアを設計からプロトタイプに落とし込む所までを対象としたワークショップです。今回は、Google がこれまでウェアラブル向けのプラットフォームを提供し、数多くのアプリを作り上げてきた経験に基づき、新しいデバイス向けにアプリを開発する際の設計の原則や最良のUX事例をまとめました。Design Sprint では、これらの設計の原則をワークショップを通じて学んでいただきます。

Design Sprint は大きく 3 つのプロセスに分かれます。

1)理解と定義(Understand/Define): 対象ユーザー(ペルソナ)を理解し、求められているサービスを考える 、「ユーザー分析」を行います。
2)発散と決定(Diverge/Decide): ユーザー分析を元にサービスに必要な機能を洗い出し、そのうちユーザーに最も必要とされている機能を選択する「意思決定」を行います。
3)プロトタイプの作成と検証(Prototype/Validate): ユーザーに見せることができる UI のペーパーモックアップの「作成と検証」を行います。


■当日の流れ

<はじめに:60 分>
30 分:Android Wear の概要
20 分:チームビルディング
10 分:Design Sprint の概要の説明

<分析 : 30 分>
10 分:ペルソナについてのチームでの議論
20 分:ペルソナが求めてる機能について発表

<アイデア検討: 30 分>
10 分:ブレスト(個人)
20 分:ブレスト(チーム)

<意思決定 : 5 分>
5 分:投票によって案を決定

<プロトタイプ作成 : 50 分>
10 分:利用シーンを作成(個人)
10 分:ディスカッション(チーム)
15 分:UX フローの作成(個人)
15 分:UX フローの決定(チーム)

<検証 : 20 分>
1 チームあたり 1 分でプレゼンテーションを実施

■イベントの詳細
■名称:Design Sprint for Android Wear
■日程:2014 年 11 月 26 日 (水)18:00-22:00(受付 17:30 - 18:00)
■場所:Google 東京オフィス (六本木ヒルズ森タワー内)
■定員:40 名
■会費:無料
■主催:Google

■申し込み方法
下記フォームよりお申し込みください。
http://goo.gl/PAQAus
※定員に達したため、受付を終了しました。

お申し込みの受付期間は、11 月 20 日(木)までとなります。ご参加いただける方には、参加証を 11 月 21 日(金)より順次ご登録頂いたメール アドレス宛にお送りする予定です。

開発者のみなさんの参加をお待ちしております。


Posted by 鈴木拓生 Developer Relations Team

Posted:
「本記事は Android Developer Relations チームの Chris Banes と Nick Butcher が 10 月 24 日に Android Developers blog に投稿した「Implementing Material Design in Your Android app」という記事を元に、翻訳・作成しています。詳しくは元記事をご覧ください。 - 荒木」


http://4.bp.blogspot.com/-FdszmBuyYLY/VEqSiys-9dI/AAAAAAAAA7k/td6QUgxrPgo/s640/Screen%2BShot%2B2014-10-24%2Bat%2B6.41.54%2BPM.png

マテリアル デザインはマルチスクリーンの世界にむけた、ビジュアル、インタラクション、モーションデザインの包括的なアプローチです。Android 5.0 Lollipop とアップデートされたサポート ライブラリは、マテリアル UI の作成をサポートします。以下にあなたのアプリに導入可能なウィジェットや API、そしてマテリアル デザインの主な要素について説明します。

タンジブル サーフェス

マテリアル デザインにおける UI は、デジタルの紙とインクでできています。サーフェスとそれが落とす影は、触れることができる範囲、触れたらどのように動くか、といったアプリケーションの構造を視覚的に表現しています。このデジタル化されたマテリアルは動いたり、拡張したり、変形したりすることで、柔軟な UI を形成します。

影の描写

サーフェスの位置と深度は、光のあたり具合や影に微妙な影響を与えます。新しい elevation プロパティを使用すれば、ビューの Z 軸における位置を指定できます。位置情報を元に、フレームワークはリアルタイムでそのビューよりも後ろにあるアイテムに影を落とします。レイアウト内で elevation の設定が行えます(単位: dip)。

<ImageView …
    android:elevation="8dp" />

また、ViewCompatgetElevation()/setElevation()(shim を利用)を使用して、コード上で設定することもできます。ビューが落とす影の形は基本的に背景の情報から算出されたアウトラインによって決まります。たとえば円形の drawablefloating action button の背景として設定していた場合、適切な形の影を落とすということです。ビューが落とす影の形をより詳細に制御したい場合は、getOutline()Outline をカスタマイズできる ViewOutlineProvider を設定することができます。

カード

カードは、特定の情報を持ったサーフェスを作成する一般的なパターンです。CardView サポート ライブラリがアウトラインと影を提供するので、カードの作成は簡単です(旧来のプラットフォームでも同様の挙動です)。

<android.support.v7.widget.CardView
   android:layout_width="match_parent"
   android:layout_height="wrap_content">
   <!--カードのコンテンツ -->
</android.support.v7.widget.CardView>

カードの見た目をプラットフォームをまたいで統一するために、CardViewFrameLayout を拡張しており、elevation と角の丸みの半径のデフォルト値を設定します。これらは必要に応じて cardElevationcardCornerRadius の属性を更新することでカスタマイズできます。UI に奥行きをもたせる方法はカードだけではないので、カードばかり使いすぎないように気をつけましょう!

印刷物のようなデザイン

コンテンツが主役になるよう、マテリアル デザインは印刷物のデザインの原則にのっとり、すっきりとしたシンプルなレイアウトを実現します。大胆かつ考えぬかれた色の選択、意図的な余白、良質なタイポグラフィと、しっかりとしたベースライングリッドによって階層、意義、焦点が生み出されます。

タイポグラフィ

Android 5.0 ではシステム フォント Roboto がアップデートされ、画面サイズにこだわらずテキストを美しく、クリアに表示します。ミディアムウェイトが追加され(android:fontFamily="sans-serif-medium")、新しい TextAppearance スタイルは推奨されているタイポグラフィ スケールにのっとり、読みやすさとコンテンツの密度のバランスをとります。たとえば、android:textAppearance="@android:style/TextAppearance.Material.Title" と設定するだけで 「Title」のスタイルを適用できます。これらのスタイルは AppCompat サポート ライブラリを通じて、旧来のプラットフォームでも使用できます(“@style/TextAppearance.AppCompat.Title” など)

カラー



アプリのカラーパレットはブランディングや個性をもたらす要素です。下記のようなテーマ属性を用いて UI のコントロール要素を簡単に色付けできるようにしました。
  • colorPrimary: アプリのプライマリ色です。Action Bar の背景、最近のタスクのタイトル、エッジ効果などに使われます
  • colorAccent: プライマリ色を補足する明るい色です。EditTextSwitch などのフレームワーク コントロールに使われます
  • colorPrimaryDark: プライマリ色の暗いバリエーションです。Status Bar に使われます
コントロール要素の色付けをよりきめ細かく行うには下記の属性を参照してください: colorControlNormal、colorControlActivated、colorControlHighlight、colorButtonNormal、colorSwitchThumbNormal、colorEdgeEffect、statusBarColor、navigationBarColor

AppCompat は上記の機能の多くを提供し、Lollipop 搭載前のプラットフォームでもコントロール要素の色付けを可能にします。

ダイナミックカラー

マテリアル デザインでは画像にあわせて色を流動的に使い分けることを推奨しています。特に色彩豊かな画像を採用している場合に有効です。新しいパレット サポート ライブラリは、画像からいくつかの色を抽出して UI コントロール要素のスタイルを抽出した色に合わせることを可能にし、ユーザーは没入感を得ることができます。抽出されたパレットには、明るい色、抑えた色、読みやすさを考慮したテキスト色が含まれます。

Palette.generateAsync(bitmap,
        new Palette.PaletteAsyncListener() {
    @Override
    public void onGenerated(Palette palette) {
         Palette.Swatch vibrant =
                 palette.getVibrantSwatch();
          if (swatch != null) {
              // 明るい色があるときは
              // タイトルの TextView を更新する
              titleView.setBackgroundColor(
                  vibrant.getRgb());
              titleView.setTextColor(
                  vibrant.getTitleTextColor());
          }
    }
});

リアリティのある動き

タンジブル サーフェスは映画の場面切り替えのように突然どこからともなく現れるものではなく、継続性を保ちます。その動きはユーザーの注意を促し、空間的な関係性を構築します。マテリアルはユーザーのタッチに反応し、もたらされる変化はタッチされた箇所を起点として広がります。ユーザーが理解しやすいように、すべての動きはなじみがあり意味あるものになっています。

Activity と Fragment の遷移


2 つの画面で共通する 「shared elements」(共有要素) を宣言することで、異なる状態への遷移をスムーズに行うことができます。

album_grid.xml
…
    <Imageview 
      …
     android:transitionname="@string/transition_album_cover" />
album_details.xml
…
    <Imageview
      …
      android:transitionname="@string/transition_album_cover" />

AlbumActivity.java
Intent intent = new Intent();
String transitionName = getString(R.string.transition_album_cover);
…
ActivityOptionsCompat options =
ActivityOptionsCompat.makeSceneTransitionAnimation(activity,
    albumCoverImageView,   // 遷移がはじまるビュー
    transitionName    // 遷移先のビューの transitionName
    );
ActivityCompat.startActivity(activity, intent, options.toBundle());

ここでは2つの画面で同じ transitionName を定義します。新しい Activity が開始されると、この遷移は自動的に処理されます。また、要素を共有する以外にも、遷移開始時終了時の演出を行うことが可能です。

リップル効果


マテリアルは ink ripple surface reaction でユーザーのタッチに反応します。Theme.Material を使用するか継承する場合、Button などのコントロールはデフォルトで ink ripple の反応をみせます(?android:selectableItemBackground も同様です)。drawable にリップル効果を追加するには、下記のようにRipple 要素を設定します。

<ripple 
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="@color/accent_dark">
    <item>
        <shape android:shape="oval">
            <solid android:color="?android:colorAccent" />
        </shape>
    </item>
</ripple>

タッチポイントからリップル効果がはじまるよう、カスタムビューでは View#drawableHotspotChanged コールバックにて、drawable にタッチ位置を伝える必要があります。

StateListAnimator

また、マテリアルは磁石がユーザーの指に吸いつくように持ち上がります。このような効果を実現するためには、translationZ 属性を活用します。これは elevation と似ていますが、一時的な効果をもたらすために利用します(Z = elevation + translationZ というように)。新しい stateListAnimator 属性を活用すれば、ユーザーのタッチに反応して translationZ を簡単に調整することが可能です(Buttons はデフォルトでこのように動作します)。

layout/your_layout.xml
<Imagebutton ...
    android:statelistanimator="@anim/raise" />
anim/raise.xml
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_enabled="true" android:state_pressed="true">
        <objectAnimator
         android:duration="@android:integer/config_shortAnimTime" 
         android:propertyname="translationZ" 
         android:valueto="@dimen/touch_raise" 
         android:valuetype="floatType" />
    </item>
    <item>
        <objectAnimator 
         android:duration="@android:integer/config_shortAnimTime" 
         android:propertyname="translationZ" 
         android:valueto="0dp" 
         android:valuetype="floatType" />
    </item>
</selector>

Reveal

新しいコンテンツを表示させる際、マテリアル デザインの特徴を生かした遷移方法の 1 つが、拡大する円形マスクを利用したものです。この方法は、タッチした位置から外に向かって放射状に広がるので、ユーザーのタッチポイントがすべてのトランジションの始点であることを補強しています。これを実現するためには次の Animator を使用します。

Animator reveal = ViewAnimationUtils.createCircularReveal(
                    viewToReveal, // Reveal するための新しいビュー
                    centerX,      // マスク中心の x 座標
                    centerY,      // マスク中心の y 座標
                    startRadius,  // 開始時のマスクの半径
                    endRadius);   // 完了時のマスクの半径
reveal.start();

Interpolator

モーションは計算しつくされ、俊敏で正確であるべきです。ゆっくりと始まり、ゆっくりと終わる典型的な遷移とは異なり、マテリアル デザインにおけるオブジェクトは素早く動き始め、ゆっくりと最終位置につきます。オブジェクトは遷移動作時間のうち、より長い時間、最終位置付近に存在します。結果としてユーザーは遷移動作が終わるのを待つ必要がなくなり、モーション化によるマイナス効果は最小限に抑えられます。このような動作を可能にするのは、新しく追加された fast-in-slow-out interpolatorです。

要素が画面を出たり入ったりする場合、ピーク速度で行うのが好ましいですが、要素が画面外に出る際には fast-out-linear-in interpolator を、画面内に入る際には linear-out-slow-in interpolator を参考にしてください。

適応性の高いデザイン

マテリアル デザインにおける最終的な核となるコンセプトは、時計から大型テレビまでのさまざまな形・大きさのデバイスに適応するデザインを作ることです。このデザインのテクニックによって、それぞれのデバイスが共通のシステムを異なるビューで具現化するというビジョンの実現が可能になりました。各デバイスの画面の大きさや操作方法に適応するように各ビューを調整する一方で、色、アイコン、階層構造、各要素の空間的関係性には統一感をもたせます。マテリアル デザイン システムは、拡張可能なデザインを作成するのに役立つ柔軟なコンポーネントとパターンを提供します。

Toolbar

ToolbarAction Bar を一般化させたもので、同様の機能を備えつつ、より高い柔軟性を提供します。通常の Action Bar と異なる点は、Toolbar は階層内のビューの 1 つであるということです。そのため、Toolbar のインスタンスは好きなところに配置することができ、他のビューと共存します。さらに、動きを与えたり、スクロール イベントに反応させたりもできます。Activity.setActionBar() をコールすることで、ToolbarActivityAction Bar として機能させることもできます。

上記の例では、青い Toolbar は高さが拡張され、コンテンツがオーバーレイしており、ナビゲーションボタンを提供しています。また、リスト部分と詳細ビューには、さらに 2 つの toolbar が使われていることにも注目してください。

Toolbar の導入については、こちらの記事を参照してください。

マテリアル化を進めましょう

マテリアル デザインは理解しやすく、美しく、適応性の高い、モーションにあふれたアプリを作ることを支援します。この記事が、みなさまがこれらの原則をアプリに適用されるきっかけとなり、その実現のために新しい API と互換用の API を活用するための手がかりとなることを願っております。

Posted by 荒木佑一 Developer Relations Team

Posted:
「本記事は Developer Advocate の Katherine Kuan が 10 月 2 3 日に Android Developers blog に投稿した「Getting Your Apps Ready for Nexus 6 and Nexus 9」という記事を元に、翻訳・作成しています。詳しくは元記事をご覧ください。 - 荒木」

Nexus 6 で動作する Tumblr アプリ(マテリアル デザイン適応済み)
先週、Google は Nexus 6 と Nexus 9 を発表しました。Android 5.0 Lollipop を搭載して出荷される Nexus ファミリーの新しい仲間である両機種は、マテリアル デザインによる刷新されたビジュアルスタイルをはじめとし、より快適なパフォーマンスと追加機能によって純粋な Google 体験をお届けします。

ユーザーの方々に最良のモバイル体験をもたらすよう、みなさまのアプリやゲームを最適化しましょう。下記に、参考になる情報をいくつかまとめました。

Nexus 6

画面

Nexus 6 は見事な 5.96 インチのクワッド HD 画面をそなえ、解像度は 2560 x 1440 ピクセル(493 ppi)となります。これはつまり ~ 730 x 410 dp(density independent pixels または密度非依存ピクセル)ということになります。

素材を確認

本デバイスは量子化密度 560 dpi ですので、プライマリ密度バケットでいうところの xxhdpixxxhdpi の間に位置します。Nexus 6 では、xxxhdpi の素材があればそれをスケールダウン表示し、もしなければ xxhdpi の素材をスケールアップして表示します。

Launcher に大きなアプリアイコンを表示できるので、少なくとも xxxhdpi アプリアイコンを 1 つ用意してください。アプリアイコンはデバイスの現状の密度とは異なる解像度で使用されるため、drawable- フォルダではなく、mipmap- フォルダに入れることを推奨します。たとえば、xxhdpi デバイスで xxxhdpi アプリアイコンを使用することがあります。

res/
   mipmap-mdpi/
      ic_launcher.png
   mipmap-hdpi/
      ic_launcher.png
   mipmap-xhdpi/
      ic_launcher.png  
   mipmap-xxhdpi/
      ic_launcher.png
   mipmap-xxxhdpi/   
      ic_launcher.png  # Nexus 6 の launcher で使用されるアプリアイコン

xxxhdpi 版の素材を追加することで Nexus 6 において、よりシャープなビジュアル体験を提供することができます。しかし、apk のサイズが大きくなってしまうので、アプリごとに適切な判断が必要となります。
res/
   drawable-mdpi/
      ic_sunny.png
   drawable-hdpi/
      ic_sunny.png
   drawable-xhdpi/   
      ic_sunny.png
   drawable-xxhdpi/  # xxxhdpi 版がないときは、こちらを使用
      ic_sunny.png 
   drawable-xxxhdpi/ # Nexus 6 用の高解像度素材
      ic_sunny.png

Google Play でフィルターされていないことを確認

AndroidManifest.xml ファイルにて <compatible-screens> 要素は新しいデバイスが発売されるたびにアプリをリコンパイルして公開することに対応できないため、同要素を使用している場合、使用を中止してください。どうしても使用する必要がある場合には、マニフェストをアップデートして、これらのデバイスの構成(画面サイズと密度)を追加するようにしてください。この対応がされていないアプリは、当該デバイスでの Google Play の検索結果から除外されてしまう可能性があります。

Nexus 9

画面

Nexus 9 は 8.9 インチ画面をもつプレミアム タブレットです。画面の解像度は 2048 x 1536 ピクセル(288 ppi)で、これは 1024 x 768 dip に相当します。画面のアスペクト比は 4:3 であり、今までにリリースされたタブレットの画面とは異なります。Nexus 9 は密度バケットが xhdpi になるので、素材は既に drawable-xhdpi フォルダに入っているものと思います。
Nexus 9 で動作する Wall Street Journal アプリ(マテリアル デザイン適応済み)

64-bit 用に NDK アプリを有効化

Nexus 9 は 64 ビット デュアルコアプロセッサを搭載しているので、64 ビット ARM 命令セットを搭載して出荷される初めての Android デバイスということになります。64 ビットプロセッサのサポートは Android 5.0 で追加されたばかりなので、NDK アプリをお持ちであれば Application.mk ファイル内の APP_ABI 値をアップデートして有効化してください。

APP_ABI := armeabi armeabi-v7a arm64-v8a x86 x86_64 mips mips64

より詳細な情報はデベロッパーサイトにて公開されています。64 ビットに対応したアプリのテストは、Android 5.0 搭載の実機か、最近発表された Android Studio 内の 64 ビットエミュレーター でテストすることができます。

ハードウェア キーボードのサポートをアップデート

Nexus 9 の Keyboard Folio は、まもなくアクセサリとして Google Play に並びますが、アプリの画面オリエンテーションを 1 つに限定しないことは非常に重要になります。Nexus 9 のデフォルトのオリエンテーションは縦画面ですが、キーボードを使用するときは横画面での使用となります。アプリをデバイスのデフォルトのオリエンテーションに固定してしまうと、キーボードに対して横向きに表示されてしまうかもしれません。

Toolbar アクションや Button Bar の操作にはタッチ入力やキーボード ショートカットを使用しつつも、ユーザーはアプリ内の主要コンテンツにキーボードを使ってアクセスできるようにするべきです。そのためには、アプリの主要なアクションがキーボード ナビゲーションとショートカットに適切に対応するようにしてください。Ctrl + [ショートカット] の組み合わせで呼び出すキーボード ショートカットは、下記のようにメニュー アイテムを通じて定義できます。

<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:id="@+id/menu_create"
        android:title="@string/menu_create"
        android:alphabeticShortcut="c” />
</menu/>

他にも Activity#onKeyShortcut または View#onKeyShortcut を使用して定義することもできます。キーボード アクションの詳細については、こちらを参照してください。
In MainActivity.java:

@Override
public boolean onKeyShortcut(int keyCode, KeyEvent event) {
    switch (keyCode) {
        case KeyEvent.KEYCODE_R:
            Toast.makeText(this, "Reply", Toast.LENGTH_SHORT).show();
            return true;
        default:
            return super.onKeyShortcut(keyCode, event);
    }
}

w- と sw- qualifiers を用いた順応するデザイン

Nexus 6 と Nexus 9 の画面サイズを活用するために、画面オリエンテーションに順応するデザインは重要です。これまでのように縦画面よりも横画面のほうが画面幅を大いに広くとれると想定してアプリを作成した場合、Nexus 9 のような画面比率 4:3 のデバイス上で問題に遭遇するかもしれません。そこで layout-landlayout-port リソースフォルダ qualifier の代わりに、使用可能な画面幅に応じてコンテンツが配置される w<N>dp 幅リソースフォルダ qualifier を使用することを強くおすすめします。

コンテンツを考慮して、必要となる画面サイズの最小と最大を決めてください。そして、異なる画面幅にあわせて、レイアウト構成(グリッド カラムの数や、マルチペイン レイアウトなど)に変更を加えてください。
たとえば、シングルペイン レイアウトは下記のファイルにて定義できます。


res/layout/activity_main.xml

幅 600dp 以上の大きな画面の場合には、リストと詳細ペインをともなったレイアウトは下記のファイルにて定義できます。

res/layout-w600dp/activity_main.xml

幅 720dp 以上のさらに大きな画面の場合には、より広い横幅を必要とする詳細ペインをともなった、マルチペイン レイアウトを下記のファイルにて定義できます。

res/layout-w720dp/activity_main.xml

フォームファクタに基づく属性については、values-largevalues-xlarge リソースディレクトリで宣言せずに、sw<N>dp 最小幅 qualifier を使用してください。たとえば、スマートフォンにおいて TextView で中サイズのフォントを使用できます。

In res/values/styles.xml:

<style name="DescriptionTextStyle">
  <item name="android:textAppearance">?android:attr/textAppearanceMedium</item>
</style>

また、デバイスの最小画面幅(縦横の画面幅の小さいほうの値)が 600dp 以上のときに TextViews に大きなサイズのフォントを使用する、といった設定が可能です。これにより、画面の大きなデバイスを回転させたときにフォントサイズが変わってしまうということを防げます。

In res/values-sw600dp/styles.xml:

<style name="DescriptionTextStyle">
  <item name="android:textAppearance">?android:attr/textAppearanceLarge</item>
</style> 

5.0 の機能とマテリアル デザイン

android:targetSdkVersion を「21」に設定してください。アプリが引き続き快適に動作するように、Android 5.0 Lollipop における重要な挙動の変更点(新しい Android ランタイム「ART」を含む)を確認してください。また、より充実した通知機能などの新しいプラットフォーム API を使用することもできます。

Nexus 6 と Nexus 9 のユーザーは新しいマテリアル デザインの世界に没入しつつ、これまでと変わらないスムーズな動作、美しく彩られたワクワクするようなディテールをあなたのアプリに期待することでしょう。開発者のみなさまが新しいデザイン言語にあわせてアプリをアップデートするにあたり、サポート ライブラリ動画スタートガイドなど、たくさんの資料を用意しました。みなさまのアプリを見るのを楽しみにしております。

Posted by 荒木佑一 Developer Relations Team

Posted:


米国時間の 10 月 17 日に Android 5.0 SDK がリリースされました。新しい UI ウィジェットや、デザイン性にこだわったビジュアル言語であるマテリアル デザインを含んでいます。過去バージョンを搭載した Android デバイスにも最新のデザインを提供できるよう、AppCompat の大型アップデート、および新たなライブラリ(RecyclerViewCardViewPalette)の追加を行い、ライブラリを拡張しました。

本記事では AppCompat の新しくなった点と、アプリ開発においてマテリアル デザインを取り入れる方法について見ていきます。

AppCompat に新たに追加された機能

AppCompat(別名 ActionBarCompat)は Android 4.0 の ActionBar API を Gingerbread 搭載デバイスに対応させるためのバックポートとしてはじまり、バックポートとフレームワーク共通の API レイヤーを提供していました。AppCompat v21 は Android 5.0 に対応した機能と API をお届けします。

このリリースで、Android は新しい Toolbar ウィジェットを導入します。これは、より正確なコントロールと柔軟性を可能にする Action Bar パターンを一般化したものです。Toolbar はビュー階層内に存在しているので、他のビューとの共存や、アニメーション、スクロールイベントへの反応といったことが簡単にできます。Activity の Action Bar として設定することもできるので、通常のオプション メニューのアクションをその内部に表示させることも可能です。

最新の AppCompat はここ数週間でいくつもの Google アプリ(Play ストアや Play ニューススタンドなど)のアップデートに含まれているので、すでにみなさんも使用されているはずです。上記の画像の Google I/O Android アプリ(オープンソース)もすでに最新の AppCompat に対応しています。

セットアップ

Gradle を使用している場合は、build.gradle ファイルに appcompat を依存関係(dependencies)として追加します。

dependencies {
    compile "com.android.support:appcompat-v7:21.0.+"
}

新規にはじめる場合

現在 AppCompat を使用していないか、これから新規にはじめる場合の設定方法です。
  • すべての Activity は ActionBarActivity から拡張されている必要があります。ActinBarActivity は v4 サポートライブラリの FragmentActivity から拡張されているので、引き続き fragment を使用することができます。
  • Action Bar/Toolbar を使用するテーマは必ず Theme.AppCompat を継承する必要があります。LightNoActionBar などのバリエーションもあります。
  • Action Bar に表示される内容(Toolbar 内のリストナビゲーションのための SpinnerAdapter など)を inflate するときには、必ず getSupportActionBar().getThemedContext() 経由で取得した Action bar のテーマの内容を使用してください。
  • MenuItem に対して Action に関連したコールを行う場合は、必ず MenuItemCompat 内の static メソッドを使用してください。
より詳細な情報は、AppCompat の総合的なガイド Action Bar API guide を参照してください。

既存のセットアップからの移行

ほとんどのアプリでは、values/ にテーマを 1 つ宣言するだけで大丈夫です。

values/themes.xml:

<style name="Theme.MyTheme" parent="Theme.AppCompat.Light">
    <!-- AppCompat の actionBarStyle を設定 -->
    <item name="actionBarStyle">@style/MyActionBarStyle</item>
    
    <!-- AppCompat の color theming attrs を設定 -->
    <item name=”colorPrimary”>@color/myawesomered</item>
    <item name=”colorPrimaryDark”>@color/myawesomedarker_red</item>
    
    <!-- 他の属性 -->
</style>

これで values-v14 以上の Action Bar のスタイルはすべて削除しても大丈夫です。

テーマ

AppCompat は新しい Color Palette のテーマの属性をサポートしており、あなたのブランドに合った主要色と強調色のテーマを容易にカスタマイズできます。

values/themes.xml:

<style name="Theme.MyTheme" parent="Theme.AppCompat.Light">
  <!-- colorPrimary is used for the default action bar background -->
  <item name=”colorPrimary”>@color/my_awesome_color</item>

  <!-- status bar には colorPrimaryDark が使用されます -->
  <item name=”colorPrimaryDark”>@color/my_awesome_darker_color</item>

  <!-- ウィジェットに色合いを付ける colorControlActivated のデフォルト値として colorAccent が使用されます -->
  <item name=”colorAccent”>@color/accent</item>

  <!-- 他にも colorControlNormal、colorControlActivated、
         colorControlHighlight と colorSwitchThumbNormalを設定できます -->
</style>

これらの属性を設定すると、AppCompat は自動的に API 21以上のフレームワーク属性の値に影響し、ステータスバーや Overview (履歴)のエントリーの色が自動で設定されます。

旧来のプラットフォームでは、 AppCompat は可能な箇所ではカラーテーマをエミュレートします。現時点では Action Bar といくつかのウィジェットに色を付けることに限定されています。

ウィジェットの色付け

Android 5.0 を搭載したデバイスでは、すべてのウィジェットは上述のカラーテーマ属性を使用して色付けされています。Lollipop でこれを可能にしているのは2つの機能です。drawable tinting と  drawable におけるリファレンステーマ属性(?attr/fooの形式)です。

5.0 より前のバージョンの Android では、AppCompat は UI ウィジェットのサブセットに対して類似の機能を提供します。
  • AppCompat の Toolbar で提供するすべて(アクションモードなど)
  • EditText
  • Spinner
  • CheckBox
  • RadioButton
  • Switch(新しい android.support.v7.widget.SwitchCompat を使用してください)
  • CheckedTextView
これらが機能するために特別何かを設定する必要はありません。通常通りレイアウト内でこれらのコントロールを使用すれば、あとはAppCompat が処理してくれます(いくつかの注意事項がありますので、最下部の FAQ を参照してください)。

Toolbar ウィジェット


Toolbar は AppCompat で完全にサポートされ、フレームワーク ウィジェットと同等の機能と API をもちます。AppCompat では、Toolbar は android.support.v7.widget.Toolbar クラスに組み込まれています。Toolbar を使用するには2つの方法があります。
  • Toolbar を Action Bar のように使用する。これはメニュー inflate や選択、ActionBarDrawerToggle のような、既存の Action Bar 機能を使用したいけど外見をより細かくコントロールしたい、といったときに有効です。
  • スタンドアローン Toolbar を使用する。これは1度に複数の toolbar を表示したり、画面の全幅に満たない toolbar を表示したりといった、 Action Bar では対応できないようなパターンを使用したいときに有効です。

Action Bar

Toolbar を Action Bar のように使用するには、まずあらかじめ外観が提供されている Action Bar を無効にします。Theme.AppCompat.NoActionBar(もしくはこれのバリエーション)からテーマを拡張するのが最も簡単な方法です。

次に、Toolbar インスタンスを作成します。(通常、レイアウトを指定する XML を使用します)

<android.support.v7.widget.Toolbar
    android:id=”@+id/my_awesome_toolbar”
    android:layout_height=”wrap_content”
    android:layout_width=”match_parent”
    android:minHeight=”?attr/actionBarSize”
    android:background=”?attr/colorPrimary” />

例としては、高さ、幅、背景などを望むままに設定できます。ToolbarViewGroup なので、スタイルも配置も自由に行えます。
そして ActivityFragment にて、Toolbar が Action Bar として機能するように設定します。

@Override
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.blah);

   Toolbar toolbar = (Toolbar) findViewById(R.id.myawesometoolbar);
    setSupportActionBar(toolbar);
}

これで、通常のオプション メニュー コールバックを経由して、すべてのメニュー アイテムは Toolbar に表示されます。

スタンドアローン

スタンドアローン モードの違いは、Toolbar を Action Bar として機能させない点です。これにより、すべての AppCompat テーマを適用することができ、予め外観が提供されている Action Bar を無効にする必要がありません。
スタンドアローン モードでは、Toolbar のコンテンツやアクションを手動で入力しなくてはいけません。たとえばアクションを表示させたいのであれば、メニューを inflate する必要があります。

@Override
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.blah);

   Toolbar toolbar = (Toolbar) findViewById(R.id.myawesometoolbar);

   // メニューアイテムのクリックに対応するために、OnMenuItemClickListener を設定
    toolbar.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() {
        @Override
        public boolean onMenuItemClick(MenuItem item) {
            // メニューアイテムに対応
            return true;
        }
    });

   // toolbar に表示されるようにメニューを inflate
    toolbar.inflateMenu(R.menu.yourtoolbarmenu);
}

Toolbar でできることは他にもたくさんあります。詳細については Toolbar API reference を参照してください。

スタイル

Toolbar のスタイルは通常の Action Bar とは異なっており、ビューを直接設定します。
下記は Toolbar を Action Bar として使用しているときに採用すべき基本的なスタイルです。

<android.support.v7.widget.Toolbar  
   android:layoutheight="wrapcontent"
   android:layoutwidth="matchparent"
   android:minHeight="?attr/actionBarSize"
   app:theme="@style/ThemeOverlay.AppCompat.ActionBar" /> 
app:theme 宣言によって、テキストとアイテムが単色塗りつぶしとなります。(100% 不透明な白色など)

DarkActionBar

レイアウト属性を使用することで、Toolbar のインスタンスのスタイルを直接設定できます。「DarkActionBar」(コンテンツは暗く、オーバーフロー メニューは明るい) のように見える Toolbar を作成するには、適切なテーマ属性と popupTheme 属性を設定します。

<android.support.v7.widget.Toolbar
   android:layoutheight=”wrapcontent”
   android:layoutwidth=”matchparent”
   android:minHeight=”@dimen/tripleheighttoolbar”
   app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
   app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />

SearchView ウィジェット

AppCompat は Lollipop で刷新された SearchView API を提供しますので、今までよりもカスタマイズ性とスタイル設定に優れています。これからは旧来の searchView* テーマ属性の代わりに、Lollipop 式の構造を使用します。
SearchView のスタイル設定方法は以下の通りです。

values/themes.xml:

<style name=”Theme.MyTheme” parent=”Theme.AppCompat”>
    <item name=”searchViewStyle”>@style/MySearchViewStyle</item>
</style>
<style name=”MySearchViewStyle” parent=”Widget.AppCompat.SearchView”>
    <!-- 検索クエリ部分(EditText など)の背景 -->
    <item name="queryBackground">...</item>
    <!-- アクション部分(voice、submit など)の背景 -->
    <item name="submitBackground">...</item>
    <!-- Close ボタンアイコン -->
    <item name="closeIcon">...</item>
    <!-- Search ボタンアイコン -->
    <item name="searchIcon">...</item>
    <!-- Go/commit ボタンアイコン -->
    <item name="goIcon">...</item>
    <!-- Voice search ボタンアイコン -->
    <item name="voiceIcon">...</item>
    <!-- クエリ サジェスチョン行に表示される Commit アイコン -->
    <item name="commitIcon">...</item>
    <!-- クエリ サジェスチョン行の レイアウト -->
    <item name="suggestionRowLayout">...</item>
</style>

ほとんどのアプリにおいてはデフォルトのままでも正常に機能しますので、これらをすべて(あるいは 1 つも)設定する必要はありません。

Toolbar が今ここに…

この記事が AppCompat の使いはじめと、素晴らしいマテリアル アプリの製作の一助となれれば幸いです。AppCompat をはじめとするサポート ライブラリについての質問や、ドキュメントを増やすべき分野がありましたら、コメント欄や Google+、Twitter などでお知らせください。

FAQ

Lollipop 導入前のデバイスで EditText(もしくは前述のウィジェットの1つ)が正しく色付けされていないのはなぜですか?
AppCompat のウィジェット色付けは、レイアウト inflation を感知して、色付けに対応した特別なウィジェットを代わりに差し込む仕組みになっています。ほとんどの場合はこれで正しく機能しますが、下記のような例外ケースも考えられます。
  • 当該ウィジェットがカスタマイズされている(つまり EditText を拡張している)
  • LayoutInflater なしで EditText を作成している(つまり新規の EditText() をコールしている)
色付けに対応した特別なウィジェットは未完成のため、現在隠されています。今後変わる可能性があります。

Lollipop 導入前のデバイスでは特定のウィジェットにマテリアル スタイル化されていないのはなぜですか?
現時点まででアップデートされたのは、最も広く使われているウィジェットだけだからです。今後の AppCompat リリースとともに増えていきます。

android:windowContentOverlay は null に設定しているのに、Android Lollipop で私の Action Bar にシャドウがあるのはなぜですか?
Lollipopでは、新しい Elevation API を使って Action Bar にシャドウを付与しています。取り除くには、getSupportActionBar().setElevation(0) をコールするか、Action Bar スタイルで Elevation 属性を設定します。

Lollipop 導入前のデバイスではリップル効果がないのはなぜですか?
RippleDrawable の動作は Android 5.0 の新しい RenderThread に大きく依存します。現状 5.0 より前のバージョンの Android では、パフォーマンス最適化のため RippleDrawable は含まれていません。

Preferences で AppCompat を使用するにはどうしたらいいですか?
API v11 以上のデバイスでは、引き続き ActionBarActivity で PreferenceFragment を使用できます。それより古いデバイスではマテリアル スタイル化されていない、通常の PreferenceActivity を提供する必要があります。

Posted by 荒木佑一 Developer Relations Team

Posted:
あらかじめ言っておきますが、冬場のグリフハックは辛いです。#Ingress

さて、Android 版 Google 日本語入力をアップデートしたことをお知らせします。
新たにバージョン番号が 2 となる今回のアップデートでは、皆様からのご意見を参考にデザインを全面的に見直しました。また、新世代の Android プラットフォーム である Android 5.0 (Lollipop) への対応も進めました。

なお、以前にお知らせした通り、今回のアップデートからは Android 4.0 (Ice Cream Sandwitch)以降のみで動作します。
参考: Google 日本語入力におけるシステム要件の更新について

主な変更点

マテリアル デザインに対応
マテリアル デザイン (ライト、ダーク)のキーボードテーマを追加しました。設定画面より選択することができます。
アイコン上の文字も Noto フォント新しい Roboto フォントを使って一新しました。

文字の入力方法を改善
記号入力画面に数字キーボードを追加しました。これに伴い、ケータイ配列から数字キーボードを除いて、ひらがなキーボードとアルファベットキーボードのみにしました。

ケータイ配列 (フリック入力有効) でのアルファベット入力時に、下フリックで数字が入力できるようにしました。

ケータイ配列 (フリック入力有効) でのひらがな入力時に、開き括弧、閉じ括弧、波ダッシュ、三点リーダーを入力できるようにしました。

QWERTY 配列での入力時に、最上段の上フリックで数字が入力できるようにしました。
また、QWERTY 配列でアルファベットを入力する際に、下フリックで大文字が入力できます。

(Lollipop) ハードウェアキーボード用の候補ウィンドウ
ハードウェアキーボード用の新しい候補ウィンドウを導入しました。アプリケーションが OS 標準のテキスト入力欄を使用していない場合は、アプリケーション側の対応が必要です。

(Lollipop) 入力方法切り替えキー
他の入力方法に切り替えるためのキーを導入しました。Google キーボードや Google ピンイン入力のような、この機能に対応している他の入力方法へと簡単に切り替えることができます。 他に対応している入力方法がある場合にのみ、このキーは表示されます。

顔文字の拡充
新しい顔文字を導入しました。

音声入力へのショートカット
Google 音声入力が使える場合、音声入力を起動するボタンを表示するようにしました。
音声入力に対応した入力箇所で、かつ Google 音声入力が有効になっている場合のみ、このボタンが表示されます。この機能は設定画面から無効にすることができます。

絵文字入力へのショートカット
エンターキーの長押しで、絵文字入力画面を開くようにしました。

日本語ハードウェアキーボードのレイアウト情報を同梱 (Android 4.1 (Jelly Bean) 以降)
Bluetooth や USB で日本語キーボードを接続した際に利用するレイアウト情報を同梱しました。
このレイアウト情報は Google 日本語入力以外の入力方法を利用する際にもご利用いただけます。
詳しい設定方法はこちらをご覧ください。

その他の更新
  • 中国語 (簡体、繁体) と韓国語による設定画面の表示に対応しました。
  • タブレット向けにサイズの調整を行いました。
  • 32bit MIPS アーキテクチャ, ARM 64bit アーキテクチャのサポートを開始しました。

問題の修正
外部ストレージ (SD カードなど) にあるファイルからユーザー辞書をインポートできなかった問題を修正しました。この修正のために、新たに外部ストレージに対する読み書きを行う権限を利用するようにしました。

これからも、Google 日本語入力をよりよくしようと、チーム一同で開発を進めていきます。お気づきの点がありましたら、ぜひプロダクト フォーラムからお知らせください。みなさんのフィードバックがなによりの励みになります。

Posted by 松崎剛士 Software Engineer

Posted:
先日公開したビデオシリーズ I/O Bytes 2014Polymer 関連動画 に日本語字幕が追加されましたので、改めてご紹介します。

Polymer とは Web Components をより便利に使うためライブラリで、未対応ブラウザでも Web Components を利用できる(Polyfill)ようにする platform.js(webcomponents.js に名称変更予定)が付属します。ウェブで Material Design を利用する 際にも、Polymer を使うと便利です。

ウェブをコンポーネント化しよう

Web Components の概要の解説や、Polymer 要素の開発方法を解説しています。seed-element から npm や bower を使って他の要素を継承する方法、Flexbox レイアウトの利用方法、GitHub への公開の仕方まで紹介しています。


Polymer: HTML だけで Google Service と連携する

Google では Polymer を使って Google API を利用する要素を数多く制作しています。その中から <google-map><google-sheets> の紹介を通じて、Polymer と Web Components の便利さをご紹介します。


Polymer: レスポンシブ UI の作り方

レスポンシブ ウェブ デザインにおいて小さなメニュー バーにツールバーを集約する UI はよく利用されます。このビデオでは、Polymer の <core-media-query> を使ってどのようにしてこれを実現するかを解説します。


Polymer: Web Components をアクセシブルにする

アクセシビリティはウェブ デザインにおいて、障害を持った人たちに情報を正確に伝達する上で、なくてはならないものです。このビデオでは、Polymer を使ったキーボードによるナビゲーション、WAI-ARIA を使ったアシスト、色彩を意識せず使えるデザインなどについてご紹介します。



みなさんが Polymer を使った素晴らしいアプリケーションを制作されるのを楽しみにしています。

Posted by Eiji Kitamura - Developer Relations Team

Posted:
11 月 7 日(金)、スタートアップで働いている、またはスタートアップに興味のあるエンジニアの方のための交流イベント「Startup Tech Night」を開催します。本イベントは、現在スタートアップで働くエンジニアの方をお招きし、プロダクトを開発する上で気をつけていることや、開発体制、最近注目している技術、社内でのコミュニケーションの取り方など、普段なかなか聞くことができない、スタートアップならではの開発手法についてお話いただきます。

イベント内容
■名称:Startup Tech Night
■日程:2014 年 11 月 7 日(金)18:00-21:30(受付 17:30 - 18:00)
■場所:Google 東京オフィス (六本木ヒルズ森タワー内)
■会費:無料
■主催:Google
■協力:トーマツ ベンチャー サポート

■アジェンダ
18:00 - 18:20 : 開催主旨と Google プロダクト アップデート : Google Developer Relations
18:20 - 18:30 : 実際にベンチャーが抱える課題 : トーマツ ベンチャー サポート
18:30 - 19:00 : 株式会社カブク CTO 足立 昌彦氏
19:00 - 19:30 : 株式会社FiNC CTO 南野 充則氏
19:30 - 20:00 : ランサーズ株式会社 CTO 田邊 賢司氏
20:00 - 20:20 : LT タイム 4名(ひとり 5 分)
20:20 - 21:30 : 懇親会

■申し込み方法
下記フォームよりお申し込みください。
http://goo.gl/R6AwTW
※定員に達したため、受付を終了しました。

先着順による受付です。定員は 80 名です。定員になり次第、受付を締め切ります。
なお参加証は 11 月 4 日(火)より順次ご登録頂いたメール アドレス宛にお送りする予定です。

多くの皆様のご参加をお待ちしております。


Posted by 鈴木拓生 Developer Relations Team