Blog / 開発者ブログ

IntelliJ IDEAでPlay Frameworkを使ってみる

2015.8.8

前回に引き続き、Play Frameworkネタです。
今度は、IntelliJ IDEAを使って、Play Frameworkを使ったプロジェクトを編集してみることとします。

セットアップのための公式ドキュメントはこちらです。今回も参考にしながら進めます。

https://www.playframework.com/documentation/2.4.x/IDE#IntelliJ

IntelliJ IDEA (Community Edition)のインストール

IntelliJ IDEAをお持ちでない方は、IntelliJ IDEAをインストールします。
いくつかバージョンがあるのですが、無料のCommunity Editionで良いでしょう。

Scalaプラグインのインストール

IntelliJ IDEAにScalaプラグインをインストールします。
ちょっと分かりにくいところからインストールするのですが、【図解】Scala 2.10 + IntelliJ IDEA 12 で「Hello World」する – Qiitaにて詳しく解説されてましたので、こちらを参考にしましょう。

プロジェクトのインポート

前回作成したプロジェクトを、IntelliJで読み込みます。
公式ページの、「To import a Play project:」のところに書いてある方法でインポートを行います。

  1. IntelliJ IDEA起動
  2. [Import Project]を押下
  3. [Select File or Directory to import]ダイアログにて、プロジェクトのディレクトリを選択
    • Import project
  4. [Import Project]ダイアログにて、[Import project from external model]ラジオボタンを押下
  5. 続けて、[SBT]を押下し、[Next]押下
  6. [Finish]押下

基本的にはこれでいけるはずです。僕は「Unsupported major.minor version 52.0」というエラーで先に進めなかったので、下記の手順で、デフォルトのJDKを1.8にすることでエラーがでなくなりました。

  1. IntelliJ IDEA起動
  2. 右下の Configure -> Project Defaults -> Project Structureを押下
    • Select Project Structure
  3. 左ペインの[SDKs]から、「1.8」を選択する
    • Select JDK

Run Configurationの設定

プロジェクトが開けたら、

  • メニューバーから、[Run]->[Edit Configurations…]を選択
  • 「+」を押下し、「SBT Task」を選択
  • 「Tasks:」の入力欄に、「run」と入力。[OK]を押下し、ダイアログを閉じます
  • メニューバーから、[Run]->[Run]を選択し、サーバを起動
  • 起動後、http://localhost:9000/にアクセスできることを確認

Run Play on IntelliJ IDEA

これでIDEを使って編集することができるようになりました!

余談:2.4.x Migration Guide

もしEclipseを検討していたり、以前までPlay Frameworkを使っていたりする方は
確認した方が良いと思うのですが、2.4.xより、eclipse/intelliJ向けのsbtプラグインがPlay Frameworkに含まれなくなったようです。なにかトラブルになった時は参考になるかもしれません。

Play Framework(+Scala)のセットアップ

2015.8.6

これまでいくつかのプログラミング言語を扱ってきたのですが、ついに、関数型言語を手にとってみることにしました…!
関数型言語は、言語に詳しい方々がQiitaに多く投稿していたため、多く目にすることがありました。
しかし、実際に自分で触ってみないことには、良さが分かりません。。なので重い腰を上げて軽く触ってみることとしました。
Scalaが扱えるフレームワークとして、現在もメンテナンスが続いているPlay Framework 2.4を手に取り、今回は環境を構築してみます。

必要な物を揃える

必要な物を揃えます。私は基本Androidアプリ開発を行なっているため、下記のものは全て導入済みでした。

Play! Frameworkのインストールから実行まで

では最初のプロジェクトの作成を行なってみます。

# 必要なもののインストール
brew update
brew install scala
brew install typesafe-activator

# 最初のプロジェクトを作成・実行
activator new my-first-app play-scala

この手順は、公式ページ(2.4.x)が参考になります。バージョンが少し古いのですが、日本語の公式ページ (2.3.x)もあります。
上記の手順だけで、最初のプロジェクトを立ち上げることができました。

activatorコマンドを使って起動

いよいよ最初のサーバの立ち上げを行います。

cd my-first-app
./activator run

# http://localhost:9000/ にアクセスする。

2015-08-06-firstrun

作成された最初のプロジェクトの中に./activatorというコマンドファイルが入っています。
ここからビルドなどのタスクを実行するようです。

たったこれだけで、Play Frameworkの最初のプロジェクトを立ち上げることができました!

Activator UIを利用する

このActivatorには./activator uiというサブコマンドがあり、こちらを起動すると、ブラウザ上で、下記の様な作業ができるようです。

  • サーバの管理(起動、終了)
  • チュートリアルの表示
  • ソースコードの編集
# 一旦、先ほど立ち上げたサーバを、Ctrl+cを押下して終了させておきます。

# Activator UIの起動
./activator ui

少し起動には時間がかかるかもしれません。

Activator UIの起動画面

待っていると、自動的にブラウザが立ち上がり、ブラウザにて新しいページが立ち上がりました!
これで、開発が開始できそうです。
次は、IntelliJ IDEAでこのプロジェクトを編集してみます。

Raspberry Pi 2 Model B にnode.jsサーバを立てるまで

2015.8.3

2015-08-06-raspberry-pi

ついに弊社にもRaspberry Pi 2 Model Bがやってきました!
以前から気になっており、どんなものなのか触ってみたかったため、セットアップさせて頂きました!

準備物

  • microUSB充電アダプタ & ケーブル
    • スマートフォンを充電する用のものを使用しました。PCにつなぐ程度だと電力不足になる可能性があるとのことでしたので、電源はACからとることにしました。
  • ルータ+LANケーブル
    • Raspberry Piからネットワークに接続するために使用します。
  • キーボード
    • 安いキーボードでOK
  • HDMI端子付きキーボード
    • 初回セットアップにて必要。
  • microSD (8GB)
    • システム領域が4GB程度必要とのことなので、その他のリソースのことも考え8GBのものを使用しました。
  • microSDリーダー
    • microSD変換アダプタをつけてMacに差すこともしてみましたが、うまくいかなかったので普通に小さなmicroSDリーダーを使いました。

OS(RASPBIAN)のダウンロード

最初はOSのインストールからです。
OSプリインストールのモデルもあるようですが、私はSDに焼き込んでインストールすることとしました。
OSは、インターネット上で一番情報があふれている、Raspbianを選びました。

Raspberry Pi Downloads – Software for the Raspberry Pi

Debianの派生OSとなっており、dpkgコマンドが使えたりするようです。

SDカードをFAT32にフォーマット

OSを焼く前に、SDカードをフォーマットします。Disk UtilityでFAT32に変換する必要があるようです。
弊社のSDカードは既にFAT32であったため、何もしませんでした。。

ただ、確認の際、Micro SD -> SDの変換アダプタにMicro SDを差し込んだものを、Macに付いているSDカードポートに差し込んで確認しようと思ったのですが、なぜか認識しませんでした。別のSDカードリーダーをつなげるとうまくいきました。相性などあるのかもしれません。
いろいろとトラブルもあるようですので、もし壁にぶつかった場合は良く調べてみましょう。

RPi-sd card builder v1.2を使ったイメージファイルの書き込み

次にOSをSDカードに焼き込みます。
【Raspberry Pi】MacでOSをインストールする【Raspbian】 – あぷせめもを参考にさせて頂き、これを使ってシステムイメージをmicroSDに焼きこみました。
下記に、焼きこみ用のソフトウェアがありますので、使用します。
(アプリケーションになってますが、AppleScriptになっていて、そこからddコマンドを叩いて焼いているようです。)

SD card setup – Raspberry Pi – Mac | All the (*)Ware

起動・SSH接続設定

Raspberry Piに、先ほどOSをこんがり焼いたSDカードを差し込んだ後、電源ケーブルを差し込み、起動します。
(ここで画面も接続しておく必要があります)
電源ボタンはないようですね。

そして各種設定をしていくわけですが、弊社は下記のサイトを参考にし、SSH接続を進めました。

ひと通り終わると、無事SSH接続ができるようになりました!

一旦、shutdown -h nowで終了させた後、もう一度電源を挿し直すことで起動した場合も、外部のPCよりSSHがつながることを確認しました。

Node.jsのインストール

そして最後にソフトウェアのインストールです。
弊社では簡易webサーバとしての稼働を目標としていたため、node.jsをインストールしました。

curl --silent --location https://deb.nodesource.com/setup_0.12 | bash -
apt-get install --yes nodejs
apt-get install --yes build-essential

検索するといろいろ当たるんですが、公式Wikiにインストール方法が書かれてあるのでそれにそって入れるとうまくいきます。
(一時期は公式からnode.jsのバイナリが提供されてなかったことがあったっぽい?)
また、build-essentialはnpmからnative addonsを扱うモジュールを入れる時に必要だそうです。入れておいて損はないと思います。

以上で、Raspberry Piにnode.jsをインストールできました!小型サーバのように動作できることを考えると、夢が広がりますね!
IoTの切り口としてもとても良いものと思うので、まだの方はぜひ購入を検討してみてください!

AndroidのInterpolatorをlibGDXを使ってグラフ化してみた

2015.6.9

少し前の話ですが、Android Support Library, revision 22.1.0に、Material Design対応を行う上で重要なInterpolatorが追加されました。これは、Authentic motionを実現する上で必要な動きを実現するためのクラスです。

Interpolatorとは

開始点〜目的点までのアニメーションを補間してくれるクラスです。
例えば、y座標を0から100まで変更するアニメーションがあったとして、単純に値を0.01秒に1進ませるようなプログラミングを行うと、最初から最後まで同じ速度で移動します。そこにInterpolatorを挟むと、「最初は早いけれどだんだん遅くなるアニメーション」「バウンドするようなアニメーション」などを簡単に実現できるようになります。

今回、このInterpolatorが、どのようにアニメーションを補間してくれるのかをグラフ化するアプリを、libGDXで作成してみました。

作ったもの

libgdx intrpolator screenshot

こちからから実際に試していただくことが出来ます。

ダウンロードには、Releasesページを開き、下のリンクをクリックします。

20150609_download

以下の様な特徴があります。

  • Android、デスクトップ環境(Windows/Mac/Linux)、iOS、HTMLで動作する
  • libGDXはOpenGLを通しているので、高速に動作する
  • Android OSメジャーアップデート時に新しいInterpolatorが出ても動作する
    • Android上では、 android.R.interpolator のリソースをリフレクションで取り出しているため。

ソースコード的にはほとんど問題ないはずので、ビルド通ればiOS/ブラウザ上でも動くと思うんですが、ちょっと時間が取れませんでした。。1

Interpolatorの一覧の取得は下のようなコードで実現してます。

@Override
public ArrayList<Interpolator> create() throws IllegalAccessException {
    ArrayList<Interpolator> list = new ArrayList<>();

    Class<android.R.interpolator> interpolatorClass = android.R.interpolator.class;
    Field[] fields = interpolatorClass.getDeclaredFields();

    int i = 0;
    for (Field field : fields) {
        field.setAccessible(true);
        int value = field.getInt(null);
        Interpolator interpolator = AnimationUtils.loadInterpolator(context, value);
        list.add(interpolator);
    }

    // Add Support library Interpolators
    list.add(new FastOutLinearInInterpolator());
    list.add(new FastOutSlowInInterpolator());
    list.add(new LinearOutSlowInInterpolator());

    return list;
}

実はこういったグラフを作成するものはいくつもある

Interpolatorの時間軸と変化の度合いで可視化するツールというのは、既にあります。

それでも作ったのは、下のような理由です。

  • Material Designのグラフ可視化が欲しかった
  • 快適に動くマルチプラットフォームでの確認ツールが欲しかった
  • ブログのネタに調度良かった(!)
  • libGDXのAPI触ってみたかった(?)

libGDXのScene2Dを利用したりもしてるので、Android側の処理とlibGDXを連携するサンプルとしても使えたりするかもしれません。よければ参考の一つとしてお使いください。


  1. (追記: 2015-06-18 htmlとiOSに対応しました。) 

アプリのアイコン選びが少し楽になる方法

2015.6.8

自作アプリやちょっとしたサンプル作る時にアイコン選びにけっこう苦労した経験、皆さんにも有ると思います。有料アイコン買うのは気が引ける…でも無料でライセンスフリー探すのも毎回しんどい…と。
そこでオススメなのがGoogleの”Material design icons”です。

 

 

このアイコンは昨年Googleがマテリアルデザインに合わせる形でリリースしたアイコンで、マテリアルデザインのアイコンとして利用できるのはもちろん種類・クオリティ・サイズもかなり豊富に揃っています。ライセンスはCC BY 4.0でライセンス表示さえすれば改変・商用利用も自由です(ただしアイコン自体の販売はNG)

 

ただこのアイコン、750種類×3カラー×4サイズ×5解像度分あるので、贅沢な悩みかもしれませんが目的のアイコンを探してから導入するまでそこそこ苦労したりします。そこでまたまたオススメなのが”Android Material Design Icon Generator Plugin”というAndroidStudio用のプラグインです。

 

Android Material Design Icon Generator Plugin

 

導入は簡単で、プラグインからインストールして
 スクリーンショット 2015-06-08 9.55.54

 

drawableフォルダの上でNew→Material Design Iconと選ぶだけです。
スクリーンショット 2015-06-08 10.55.01

 

UI上でアイコンをプレビューしてくれる上に、アイコンカラーも通常だと白黒グレーの3つしかないのですが、このプラグインでは全マテリアルカラーの中から選択できます(試しにlimeA400で作成)。
スクリーンショット 2015-06-08 10.57.50

 

追加したい解像度もチェックボックスで選べるのでリソース毎にフォルダからフォルダへコピペする作業も不要です。OKを押すと↓な感じで簡単にアイコンを追加できます。
スクリーンショット 2015-06-08 11.13.47

 

もしアイコン選びで困ってる方は試してみると良いかもしれません。

 

謎のフォルダ

そういえば今回の記事投稿用に最新のMaterial Design Iconをダウンロードしたら“drawable-anydpi-v21”なるものが増えてました。v1.0.0の頃にはなかったフォルダです。v21専用でany?しかも拡張子がxml。なんだそれはと適当に中身を見てみると…

・ic_party_mode_black_24dp.xml
<vector xmlns:android="http://schemas.android.com/apk/res/android"
        android:width="24dp"
        android:height="24dp"
        android:viewportWidth="24.0"
        android:viewportHeight="24.0">
    <path
        android:fillColor="#FF000000"
        android:pathData="M20,4h-3.17L15,2H9L7.17,4H4c-1.1,0 -2,0.9 -2,2v12c0,1.1 0.9,2 2,2h16c1.1,0 2,-0.9 2,-2V6c0,-1.1 -0.9,-2 -2,-2zm-8,3c1.63,0 3.06,0.79 3.98,2H12c-1.66,0 -3,1.34 -3,3 0,0.35 0.07,0.69 0.18,1H7.1c-0.06,-0.32 -0.1,-0.66 -0.1,-1 0,-2.76 2.24,-5 5,-5zm0,10c-1.63,0 -3.06,-0.79 -3.98,-2H12c1.66,0 3,-1.34 3,-3 0,-0.35 -0.07,-0.69 -0.18,-1h2.08c0.07,0.32 0.1,0.66 0.1,1 0,2.76 -2.24,5 -5,5z"/>
</vector>

 

LollipopからサポートされたVectorDrawableでした。ベクター形式は軽量且つ1ファイルで複数解像度をカバーできる素晴らしいリソースなのですが、現状Lollipop以降のOSでしか利用できないのであまり陽の目を浴びていません。(一応VectorDrawableのバックポートSVGを直で扱えるオープンソースを使えば導入はできる)

 

しかしそんなVectorDrawableにも朗報があります!Google I/O2015のキーノートで下記のような発表があったんですね。

 

“Android L introduced support for vector drawablesWith the new Android Studio 1.3 plus changes to the Android Gradle plugin, you can now let the build system generate raster images from your SVGs or vector drawables for different densities.”

Screen Shot 2015-05-30 at 10.24.57-nwuvL0kS8W

 

この機能は現在の1.3Previewでは試せないようなので詳細は不明ですが、どうやらベクターイメージ(VectorDrawable?SVG?)をdrawableリソースに入れておけばビルド時に解像度別にpng画像を生成してくれるようになるというものらしいです。もし将来的にこの機能がリリースされたらアイコンのリソース準備は更に楽になりそうですね。

AppBarLayoutに影が付かない件

2015.6.5

Google I/O2015でAndroid Design Support Libraryなるものが発表されましたが、皆さん使ってみましたでしょうか?

 

“SupportDesignは単体のモジュールなのにTheme.AppCompatなしじゃまともに動かずAppCompatとがんじがらめ”

 

とか

 

“FloatingActionButtonがAPI15,16だと四角く表示される”

(app:borderWidth=”0dp”を追加したら直るよ!)

 

device-2015-06-05-180852 device-2015-06-05-183136

 

とか

 

“AppBarLayoutが完全に隠れた状態でActivityのライフサイクルが走ると復帰時に真っ白になる”

device-2015-06-05-184722 device-2015-06-05-184709

 

などなど、いきなり色々怪しいところがありますが、マテリアルデザインを実現するウィジェットが比較的楽に導入できるので僕は概ね気に入ってます。

特にAppBarLayoutは素晴らしく、このレイアウトを使うとスクロールと連動してToolbarの表示を動的に切り替えてくれてルック&フィールが素晴らしくなります(一応SupportDesignが出る前も存在したけど使い勝手がめっちゃ悪く実質オープンソース頼りでした)

ただそのAppBarLayoutでどうしても納得行かないことがあり…

 

Lollipop未満の端末でAppBarLayoutに影が付かない!

 

見た目重視のために使おうとする機能なのに、いざ実装してみたら見た目が残念とか洒落にならなくないでしょうか。Lollipop未満って世に出回ってるスマホの9割が該当するんですが!

症状としてはこんな感じです↓

名称未設定 1

と言っても影の表現自体、マテリアルデザインで導入された概念なんでLollipop未満の端末は知らんがなって言われたらそれまでなんですが…。

ただ同じく追加されたFloatingActionButtonなんかは一応、KitKatまでの端末でもちゃんと影を表示してくれてるんですね。(一応って書いたのは”app:borderWidth=0dp”にした時にしか影が出てこないという謎仕様のためなんですが、話がズレそうなのでここではスルーします。とにかく影は出るんです!)

名称未設定 2

しかもAppBarLayoutと言えば、実質ActionBarの役割を果たすレイアウトでもあるので影の表現はかなり重要です。なんてったって今までActionBarはデフォルトのスタイルが影有りでしたから。

名称未設定 3

 

ということで前置きが長くなったんですが、今回はAppBarLayoutに影を追加する方法を探ってみました。

 

原因を探る

まずAppBarLayoutのソースを見てみることにしました。

ViewCompat.setElevation(this, this.mTargetElevation);

Elevationをセットしてるだけでした。ElevationはLollipop以降でしか機能しないのでKitkatまでの端末で動かないのは当たり前です。これはAppBarLayoutが特殊というわけではなく、他のViewも全部そうです。

 

じゃあFloatingActionButtonはどうなの?と言うと、当然setElevationはしていて、

if(VERSION.SDK_INT >= 21) {
    this.mImpl = new FloatingActionButtonLollipop(this, delegate);
} else {
    this.mImpl = new FloatingActionButtonEclairMr1(this, delegate);
}

int maxContentSize = (int)this.getResources().getDimension(dimen.fab_content_size);
this.mContentPadding = (this.getSizeDimension() - maxContentSize) / 2;
this.mImpl.setBackgroundDrawable(background, this.mBackgroundTint, this.mBackgroundTintMode, this.mRippleColor, this.mBorderWidth);
this.mImpl.setElevation(elevation);

それとは別にKitkatまでの端末が対象のFloatingActionButtonEclairMr1の中で、

this.mShadowDrawable = new ShadowDrawableWrapper(this.mView.getResources(), new LayerDrawable(layers), this.mShadowViewDelegate.getRadius(), this.mElevation, this.mElevation + this.mPressedTranslationZ);
this.mShadowDrawable.setAddPaddingForCorners(false);
this.mShadowViewDelegate.setBackgroundDrawable(this.mShadowDrawable);

ちゃんとやってた!ShadowDrawableっての作って影としてセットしてくれてるんですね。ShadowDrawableWrapperの中見るとしっかりCanvasで描いてました。

つまりAppBarLayoutは他のViewと一緒で、ActionBar相当の機能だからといって特別何かやってくれてるわけではないんですね。むしろFloatingActionButtonがちゃっかりし過ぎてるってことなのかもしれません。

 

対策

まずおなじみのToolbarに影を付ける方法が使えるか試してみました。ToolbarはそれこそActionBarをフレームワークから切り離しViewとして扱えるようにしたものなんですが、こちらも影が付きません。当然影が付かないのを気にする開発者は多く、ググると下記のようにToolbarの下に影用のViewを置く回避方法がいっぱいヒットします。

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="?attr/colorPrimary"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" />

    <View
        android:id="@+id/bottom_shadow"
        android:layout_width="match_parent"
        android:layout_height="3dp"
        android:layout_below="@+id/toolbar"
        android:background="@drawable/bottom_shadow" />

    <ListView
        android:id="@+id/listview"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@+id/toolbar" />

</RelativeLayout>

名称未設定 2
ちなみにLollipop以降はElevationセットするだけでOKです。ただElevationの値はかなり細かく定められていて、Toolbarの場合4dpをセットします。

詳しくは → Elevation and shadows
で、この方法をAppBarLayoutにも適用してみようと、まずは単純にAppBarLayoutの中にToolbarと並ぶ感じで影用のViewを入れてみました。

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:layout_scrollFlags="scroll|enterAlways"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />

        <View
            android:layout_width="match_parent"
            android:layout_height="3dp"
            android:background="@drawable/bottom_shadow" />
    </android.support.design.widget.AppBarLayout>

device-2015-06-05-195441のコピー
影の部分が透過しない!AppBarLayoutがLinearLayoutを継承してるから予想はしてたのでへこたれない。

 

次にAppBarLayout自体をViewGroupで囲んでみました。

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <android.support.design.widget.AppBarLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                android:background="?attr/colorPrimary"
                app:layout_scrollFlags="scroll|enterAlways"
                app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />
        </android.support.design.widget.AppBarLayout>

        <View
            android:layout_width="match_parent"
            android:layout_height="3dp"
            android:background="@drawable/bottom_shadow" />
    </LinearLayout>

device-2015-06-05-195441のコピー
見た目はいけた!でもスクロールと連動してAppBarLayoutが隠れない!CordinatorLayoutの直下に置かないと動かないのかな?力尽きたのでソース調べる気になれず。

 

 

それならとコンテンツ側をViewGroupで囲って影を常にコンテンツに被せるようにしてみました。

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

        <android.support.v7.widget.RecyclerView
            android:id="@+id/recycler_view"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />

        <View
            android:layout_width="match_parent"
            android:layout_height="3dp"
            android:background="@drawable/bottom_shadow" />
    </RelativeLayout>

名称未設定 2

上手く動いた!

ということでAppBarLayoutに影を付けたい場合は、コンテンツ側を囲むようにしましょうという話でした。

Lollipop よりも前の端末で Circular Reveal Effect が使えるライブラリ「CircularReveal」を使ってみた

2015.6.4

先日Google I/Oが開催されました。Android M (Preview)が登場しましたが、それよりも弊社で一番アツかったのは Android Support Design Library の登場です!これにより多くのMaterial Designの部品が出揃うこととなり、下位互換も行いやすくなりました。

しかし、まだいくつかの機能はバックポートされず、Lollipop端末以降でしか依然使うことが出来ません。その内の一つが、Reveal Effectです。今回は、それを行うためのライブラリを紹介します。

Reveal Effect とは

Reveal Effect とは、円形に広がるアニメーションのことです。”Circular Reveal” であったり “Circular Reveal Effect”と言われることもあったりします。Material Designの特徴的なアニメーションの一つです。言葉ではうまく説明できないため、こちらのブログで解説されている内容を確認するのが良いと思います。

その他公式のドキュメントはこちらです。

 

dependenciesの追加

<Android Project>/app/build.gradle へ、ライブラリの依存関係を追加します。

dependencies {
    // ...省略
    compile 'com.github.ozodrukh:CircularReveal:1.0.6@aar'
}

ただし、執筆現在、この方法ですと実行時にエラーが発生してしまうことがあるようです。うまく動作しなかった場合は、最後の「※実行時エラーが出る場合」を参考にして下さい。

 

レイアウトの作成

Reveal Effectをかけるレイアウトを記述します。RevealEffectをかける対象のビューを、RevealFrameLayout要素で囲む必要があるようです。

<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <io.codetail.widget.RevealFrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <!-- Put more views here if you want, it's stock frame layout  -->

        <android.support.v7.widget.CardView
            android:id="@+id/awesome_card"
            style="@style/CardView"
            android:layout_width="300dp"
            android:layout_height="300dp"
            android:layout_gravity="center"
            android:layout_marginLeft="8dp"
            android:layout_marginRight="8dp"
            android:layout_marginTop="8dp"
            app:cardBackgroundColor="@color/material_deep_teal_500"
            app:cardElevation="2dp"
            app:cardPreventCornerOverlap="false"
            app:cardUseCompatPadding="true"
            >

        </android.support.v7.widget.CardView>

    </io.codetail.widget.RevealFrameLayout>

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:text="実行"/>

</RelativeLayout>

 

コードの追加

Activityへ、Reveal Effectをかけるためのコードを追加します。ViewAnimationUtilsクラスを、公式のクラスではなく、io.codetail.animationパッケージの方を使用しなければならないことに注意して下さい。

package com.kayosystem.circularreveal;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.view.animation.AccelerateDecelerateInterpolator;

import io.codetail.animation.SupportAnimator;
import io.codetail.animation.ViewAnimationUtils;

public class MainActivity extends AppCompatActivity implements View.OnClickListener {

    private View myView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.fragment_lib_circular_reveal);

        myView = findViewById(R.id.awesome_card);
        findViewById(R.id.button).setOnClickListener(this);
    }

    @Override
    public void onClick(View v) {
        // ビューの中心を取得
        int cx = (myView.getLeft() + myView.getRight()) / 2;
        int cy = (myView.getTop() + myView.getBottom()) / 2;

        // 斜辺の長さを求める
        float finalRadius = (float) Math.hypot(cx, cy);

        // アニメーション実行
        SupportAnimator animator =
                ViewAnimationUtils.createCircularReveal(myView, cx, cy, 0, finalRadius);
        animator.setInterpolator(new AccelerateDecelerateInterpolator());
        animator.setDuration(1500);
        animator.start();
    }
}

 

実行

CircularRevealの実行例

思ったよりも滑らかに、RevealEffectが実行されました!

 

おわりに

実際に使ってみた感じですと、何度も実行すると描画中なのに描画終了の状態になったりして、少し動きが怪しいところがありました。しかしシンプルな使い方では問題ありませんし、GitHubのスターも沢山ついており、多くの人が注目しているライブラリとなっています。今後もっと良くなることでしょう。

 

※実行時エラーが出る場合

実はこの記事を書くに当たり、私もこのライブラリを試したのですが、実行時エラーが発生してうまく動作させることが出来ませんでした。

そこで公式のissueを確認してみたところ、同じ現象に遭遇している人が居ました。それによると、原因はライブラリの配布元であるJitpackの問題か、Deployに失敗しているっぽいということでした。なので、直接公式のソースをビルドさせるようにすると動作させることができました。その動作させる方法に関してはIssueに書いたので、そちらを御覧ください。

執筆時点でもIssueは動いており、わりとすぐに修正される可能性が高いです!修正されるまで少し、待ちましょう。

AndroidStudioにAndoridのフォーマッターを適用する

2014.4.1

Eclipseではandroid-formatting.xmlを適用していたとおもうのですが、AndroidStudioではどうするのかわからなくて困っていました。

やりかたが分かったのでメモ

https://android.googlesource.com/platform/development

上記のサイトから下記のファイルをダウンロード

https://android.googlesource.com/platform/development/+/master/ide/intellij/codestyles/AndroidStyle.xml

ダウンロードした AndroidStyle.xml を

~/Library/Preferences/AndroidStudioPreview/codestyles

上記のフォルダに移動、またはコピー(これはMacの場合です、Windowsはしりません)

あとはAndroidStudioを再起動し、PreferenceのCode Styleの設定画面よりSchemeで「AndroidStyle」を選択すればOKです。

iOS7風のステータスバーを表示する (Android4.4以降)

2013.11.13

device-2013-11-13-161355 device-2013-11-13-161428 device-2013-11-13-161420

今回はタイトルにもあるようにステータスバーがiOS7風になる方法を紹介したいと思います。

実装方法はAPI Level19で新しく追加されたテーマ要素を利用し、ステータスバーとナビゲーションバーを半透明にするテーマスタイルを作成することで実現します。

要素名

内容

windowTranslucentStatus boolean ナビゲーションバーを半透明にする
windowTranslucentNavigation boolean ステータスバーを半透明にする

上記の要素を適用したテーマスタイルのコードは下記のような感じに。

<!-- ステータスバーを透過させるスタイル -->
<style name="AppBaseTheme" parent="android:Theme.Holo.Light.DarkActionBar">
    <item name="android:actionBarStyle">@style/TransparentActionBar</item>
    <item name="android:windowTranslucentNavigation">false</item>
    <item name="android:windowTranslucentStatus">true</item>
    <item name="android:windowContentOverlay">@null</item>
</style>

<!-- アクションバーの背景を透過にする -->
<style name="TransparentActionBar" parent="@android:style/Widget.Holo.Light.ActionBar">
    <item name="android:background">@android:color/transparent</item>
    <item name="android:titleTextStyle">@style/ActionBarStyleTitle</item>
</style>

<!-- アクションバーのタイトルを白色にする -->
<style name="ActionBarStyleTitle" parent="android:style/TextAppearance.Holo.Widget.ActionBar.Title">
    <item name="android:textColor">@android:color/white</item>
</style>

今回はiOS7っぽく見せるということでナビゲーションバーはそのままでステータスバーだけ半透明にします(4,5行目)。またフラットデザインっぽさを出すためにActionBarの影も消します(6行目)。

尚、APILevel19からしか利用できないのでSDKバージョンも19にする必要があります。


 

これだけだとただステータスバーが半透明になるだけなので、iOS7風に見せるためにはステータスバーとアクションバーの色を統一する必要があります。これに関してはレイアウトファイル側で対応します。



    

        
    


やってることは親レイアウトの背景色にステータスバーとアクションバーの色をセットし、2階層目のレイアウトの背景色にコンテンツの色をセット。また半透明テーマを適用したActivityはフルスクリーン扱いになってしまうのでfitSystemWindows要素をtrueにすることでコンテンツが正しくActionBarの下から描画されるようになります。

以上で完成です。試しに比較してみましょう。
左はiOS版Evernote、右が今回作成したテーマを適用したアプリです。

hikaku_ios hikaku_android
どうですか?まぁまぁ似てますね!

今までもAndroidのデザインでiOSに似せて作っているアプリはたくさんあったんですが、わざわざナビゲーションバーやバックボタンをViewで作ったり、その都度画像リソースを準備したりとけっこうめんどくさいものでした。あと個人的にはAndroidのUI/UXを無視して実装することにも開発者として抵抗がありました。

でも今回紹介した方法の場合はActionBarをそのまま利用しスタイルを少し変更するだけで実現でき、Androidのユーザービリティを損なわず見た目だけiOS7っぽくなるので割りと楽に実装できるかなと思います

(と言ってもAndroid4.4以降限定なので気軽に使うのにはあと2年ぐらいはかかると思いますが…)

そんなわけでみなさんももし旧OS切り捨て上等でAndroid4.4アプリを作る機会があれば是非試してみてくださいー