読者です 読者をやめる 読者になる 読者になる

アニマネ開発日誌

アニメアプリのアニマネの開発日誌です。

【UI構築編】アニメアプリのアニマネAndroid版を作った時の話

Android アプリ開発 UI

iOSアプリとして提供していたアニメアプリのアニマネですが、 ようやくAndroid版もリリースができました。(と言ってもまだニュース機能だけです。)

アニマネ 〜 アニメ専門のニュースアプリ - Google Play の Android アプリ

Java未経験の状態から作った初めてのAndroidアプリになります。

これからAndroidアプリを作ってみたい方の参考になればと思い、アニマネAndroid版を作った時の話を2回に分けてしてみます。 今回は開発開始からUI構築までの大雑把な話です。

はじめに

このエントリは主にiOSアプリを作ったことがある人向けです。

Androidの基本的な仕組みについては今回は省くので、 全くアプリ開発の経験がないとチンプンカンプンかも知れません。

Android開発の基本的な流れは下記が参考になります。

開発環境

Android Studio 1.4(開発中に1.5へアップデート)

現在はAndroid Studioが標準になっているようでしたので、EclipseではなくAndroid Studioを使いました。

XCodeと比べると若干重いとかはありますが、そこまで大きな差はないです。

ただ、エミュレーターはかなりもっさりで残念な感じはします。
2.0で解消されるといいな。

あとリフレクターは便利。(XCodeにはなかったはず)

IntelliJ IDEAがベースなだけあって、プラグインは豊富でカスタマイズしがいはありそうです。

Gradle

Javaのビルドツールです。
iOSでいうxcodebuildやCocoaPodsみたいな感じです。

Android Studioでは標準のビルドツールとして使われているので、 ライブラリを追加したり、SDKをダウンロードしたりするのはGradleを使うことになります。

Android Studioを使う限り嫌でも使うことになるので、最初は言われるがままに使う感じで大丈夫です。

慣れてくると面倒なタスクはGradleで書いて楽できそうですが、僕にはまだ遠い道のりです。

今回の要件

既にiOSアプリとして提供されているアニマネですが、 Android版をとりあえず世の中に出すことが目的でしたので、最低限に絞りました。

  • Android4.0以降を対象デバイスとする。
  • ニュース記事をタブ別に一覧表示するだけ。
  • WebViewについては今回は用意せず、記事の閲覧自体はブラウザに任せる。
  • その他細かいところは後回し。

上記の要件だけだと実装のポイントは下記になります。

  • HTTP通信でSQLiteのDBをダウンロードする
  • SQLiteからニュース記事を取得
  • タブレイアウトでニュースをリスト表示する

iOS版のアニマネではアプリとサーバー間のやりとりに一般的なJSONではなく、 SQLiteのDBを直接HTTP経由で取得するアーキテクチャを採用しています。

そのため、AndroidでもHTTP経由でSQLiteのDBファイルを取得して、 DB内の記事をリスト表示するというのが今回の主な処理です。

UI

Androidらしくマテリアルデザインっぽい感じを意識しました。

Googleが定めている仕様を厳格に実装するのは大変なので、 今回は厳密な実装ではなくDesign Support Libraryを使ったそれっぽい実装に留めています。

マテリアルカラー

色については上記のあたりを参考にしました。

Design Support Library

マテリアルデザインをサポートするライブラリが標準で用意されています。

Support Library Features | Android Developers

Android Design Support Libraryを使う

古いOSのバージョンもサポートされているので助かります。

iOSと違ってAndroidは過去のバージョンもそれなりにサポートしてくれるのがありがたいです。

マテリアルデザインのレイアウト

マテリアルデザインのレイアウトについては下記あたりを参考にしました。

https://moneyforward.com/engineers_blog/2014/12/05/android_material_design/

とりあえず8dp単位で余白をとりつつ、4dp単位でフォントを調整しました。

正直なところまだ勉強不足なので、徐々に組み込めるようにしたいと考えています。

比率を指定したレイアウト

レイアウトXMLで比率の指定方法が分からなかったのですが、下記が参考になりました。

ListView

iOSでいうUITableViewみたいなものです。 下記を参考にして組み込みました。

リストビュー(ListView)を使用するには - 逆引きAndroid入門

ただ、あとから知ったのですが、リストビューにも色々種類があるみたいです。 この辺りはもう少し勉強する必要がありそう。

画面数が少ないこともあって、UIの構築はそれほど困りませんでした。

実装編は長くなるので、今回はここまでです。

次回は実装からリリースまでの話がメインになります。
来週ぐらいには公開できるといいな。