この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。
Android Bootstrap
Bootstrap といえば Twitter Bootstrap が有名ですが、Android の世界では2つの Bootstrap があります。Android Bootstrap と Android Bootstrap です。そう、見事なまでにコンフリクトしております。どちらも Android のアプリ開発を高速化するためのツールですが、役割は違います。具体的に言うと、1つはデザインのアセットをいい感じに作ってくれるもの、もう一つはよく使いそうなライブラリをいい感じにセットにしてくれるものです。それぞれ、ちょっと気になっていたので軽く使ってみました。
デザインのアセットをサクッと作る
https://github.com/Bearded-Hen/Android-Bootstrap
まずは UI デザインを何となくいい感じに作ってくれる Android Bootstrap を使ってみましょう。具体的には Twitter Bootstrap でも使われている FontAwesome の 369 個のアイコンが使えるほか、何となくカッコイイボタンや画像を円形に切り取って表示するなどといった「なんかカッコイイデザイン」がサクッと作れるようになります。ノンデザイナーのかたにはとてもありがたいですね。
アプリケーションプロジェクトで使えるようにするには、まずGitHub リポジトリから Clone してインポートしてアプリケーションプロジェクトから参照します。Gradle にも対応しているようなので、Android Studio でも難なく使うことができます。そしてリポジトリ内にある fontawesome-webfont.ttf ファイルをアプリケーションプロジェクトの assets フォルダにコピーして準備完了です。
では早速レイアウトファイルに View を配置してみましょう。次のような View を使うことができます。
View | 役割 |
---|---|
com.beardedhen.androidbootstrap.BootstrapButton | アイコン付きのボタンや角丸ボタン |
com.beardedhen.androidbootstrap.FontAwesomeText | FontAwesome を利用したアイコンとアニメーション |
com.beardedhen.androidbootstrap.BootstrapEditText | 入力テキスト |
com.beardedhen.androidbootstrap.BootstrapThumbnail | 枠付きのサムネイル画像 |
com.beardedhen.androidbootstrap.CircleThumbnail | 枠付きの円形のサムネイル画像 |
それぞれの View を次のような感じで配置してみました。
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:bootstrap="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<!-- ボタン -->
<com.beardedhen.androidbootstrap.BootstrapButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:text="Success"
bootstrap:be_roundedCorners="true"
bootstrap:bb_icon_right="fa-android"
bootstrap:bb_type="success" />
<!-- テキスト(アイコン) -->
<com.beardedhen.androidbootstrap.FontAwesomeText
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:textSize="32sp"
bootstrap:fa_icon="fa-github" />
<!-- 入力テキスト -->
<com.beardedhen.androidbootstrap.BootstrapEditText
android:layout_width="150dp"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:gravity="center"
android:hint="rounded"
bootstrap:be_roundedCorners="true"
bootstrap:be_state="success" />
<!-- サムネイル -->
<com.beardedhen.androidbootstrap.BootstrapThumbnail
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="10dp"
bootstrap:bt_height="80dp"
bootstrap:bt_image="@drawable/image"
bootstrap:bt_width="150dp" />
<!-- サムネイル(円形) -->
<com.beardedhen.androidbootstrap.BootstrapCircleThumbnail
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="10dp"
bootstrap:bct_image="@drawable/image"
bootstrap:bct_size="large" />
</LinearLayout>
実行するとこんな感じで表示されます!
更に詳しい解説はこちらで述べられていますので、興味のある方は参照してください。
よく使うライブラリ群をまるっと使う
http://www.androidbootstrap.com/
次に、よく使いそうなライブラリをまとめて一気に新規プロジェクトとして生成してくれるお手軽プロジェクト作成ツールの Android Bootstrap を使ってみたいと思います。具体的には NavigationDrawer の実装や ViewPageIndicator などのような便利な UI 系ライブラリ、http-request や google-gson といった便利なロジック系のライブラリなどが含まれます。含まれているライブラリは次の通りです。かなりいろいろつめ込まれています。
ライブラリ | 機能 |
---|---|
AppCompat | ActionBar などの公式サポートライブラリ |
ViewPageIndicator | ViewPager にインジケータを付けるライブラリ |
NineOldAndroids | アニメーションのサポート |
NavigationDrawer | UI パターンである Drawer ナビゲーションの実装 |
Dagger | DI コンテナ |
ButterKnife | View のインジェクション |
Otto | クラス間の Pub / Sub メッセージング |
Robotium | シナリオテストの自動化 |
maven-android-plugin | リリースビルドの生成 |
http-request | HTTP 通信処理の簡素化 |
google-gson | JSON のパース処理の簡素化 |
それでは使ってみましょう。まずこちらにアクセスし、アプリ名とパッケージ名を入力して「Generate Your App」をクリックします。
すると Zip ファイルがダウンロードできたと思います。これがプロジェクトファイルです。解凍すると Android Studio 用のプロジェクトフォルダになっているので、Android Studio でインポートします。Gradle のバージョンは v1.10 以上でなければいけない点だけ注意してください。
ビルドが成功したら、まずは実行してみましょう。謎のログイン画面が表示されるはずです。
これは実際に Android Bootstrap 側で用意してくれているテスト用の Web サーバーに対するログインが実装されています。ちなみにテスト用の Web サーバーは Parse が使われているようです(通信処理は Parse の SDK ではなく、http-request を使って処理されています)。テスト用のログインアカウントはユーザー名が「demo@androidbootstrap.com」で、パスワードが「android」です。ログインしてみます。
ログインしてみました。ViewPager で作られた画面が表示され、謎のユーザーリストが表示されています。これは実際にテスト用の Web サーバーに問い合わせて取得しています。つまり「Web サーバーに HTTP 通信して取得した JSON オブジェクトをパースして ListView に表示する」という実装がどのように行われているか理解するとともに、これを元に自分のサービス用の実装を作り始められるというわけですね。
左右の「News」と「Check In's」はニュースフィードとチェックインを想定した作りになっていて、こちらも単純なレコードの取得が行われています。
あと何故かタイマーがついています。このタイマーは Service を使った実装になっているので、Service を使った非同期処理を実装したいときの参考になります。
クラス構成は結構入り組んだ感じになっていますが、中のクラスの処理はかなりシンプルなのでカスタマイズしやすいと思います。
まとめ
ということで、Android アプリを爆速で開発するために使えそうな便利ツール(ライブラリ)の紹介でした。すべてを1から用意するのは大変なので、こういったライブラリで省略できるところは省略していきたいですね。