2011年01月11日
■[Android][開発] 一週間で初めてのAndroidアプリを作ってみました
以下の記事で、GALAXY Sと過ごした７日間の日々について書きました。
iPhoneユーザがGALAXY Sと過ごした７日間をまとめてみました
その中で思ったのは、
やっぱりAndroidのアプリ作ってみたいよなーということ。
ということで、初めてのAndroidアプリを作ってみたら
約一週間くらいで形になったので、その過程をメモしてみます。
作ろうとするAndroidアプリのコンセプト
７日間のまとめでも書いたように、今のAndroidは、
はてブ環境が充実してないと感じたので（個人的な感想ですが）、
どうせならiPhoneアプリ「はてブポケット」を移植してみたらどうだろう？
と思いました。
ということで、コンセプトは以下。
iPhoneアプリ「はてブポケットを移植してみる」
MacにAndroidアプリ開発環境を構築する
何はともあれ必要なのが開発環境です。
以下の記事を参考にしてみました。
MacにAndroid SDKをインストール (Update 2010.05.25)
１時間くらいで環境構築自体は構築出来ました。
その後、サンプル動かしたり、実機転送してみたりして、合計２時間くらい。
なお、Macから実機へのアプリ転送は特に意識することなく、
以下の設定をしてUSBで繋いでEclipseのプロジェクトを実行したら、
勝手に実機転送してくれました。
設定 ＞ アプリケーション ＞ 開発 ＞ USBデバッグ
まずはチュートリアルをやってみる
よく分かってないままネットでチュートリアルを探して、
まず以下をやってみました。
第4回 簡単なRSSリーダーを作ってみる - Androidで広がる，携帯アプリ開発の世界：ITpro
第5回 RSSリーダーの要、パース機能を知る - Androidで広がる、携帯アプリ開発の世界：ITpro
第6回 詳細画面を付けて、簡易RSSリーダーの完成 - Androidで広がる、携帯アプリ開発の世界：ITpro
順番に実装していって、サンプルを実行することが出来ました。
途中で分からなくなってやり直したりしたので、
約２時間程度かかりました。
動いた直後も、ぶっちゃけよく分かっていませんでした(^^;;;;
でも、はてブポケットを作るにはうってつけの内容だと思ったので。
これをベースに色々変更していくことにしました。
「はてブポケット」にするために意識すべき変更点
まず、はてブポケットを移植するにあたって、
サンプルには含まれてない、以下の点を考慮する必要がありました。
・「はてブポケット」のメニューを作成する。
・カテゴリ画面、記事リストの画面遷移を実装
・詳細画面をWebにする（UIWebViewのようなものを実装？）
・はてブの閾値切り替えを実装
・ブックマーク登録機能
・Twitterに投稿する（Intentで実現？）
？が付いてるのは、この時点ではちゃんと理解していないから。
先ほどのチュートリアルと挙動は似てると思いますが、
Androidアプリの作成についてはイマイチよく分かってない、
という状態からのスタートです。
まあ、いつもこんな感じなので深くは考えずに開始することに。
てことで、まずは「はてブポケット」のメニューを作るところから初めてみました。
「はてブポケット」のメニューの作成
新しくプロジェクトを作成して、いよいよ作業開始です。
まずは以下を参考にしてメニューっぽいものを作成しました。
レイアウトの作成手順をマスターする！ 〜速習！ Androidアプリケーション開発（3）〜（1/4）：CodeZine
こんな感じで出来ました。約３０分です。
メニューから記事リストへの遷移
とりあえず細かい条件分岐は後回しにして、
チュートリアルで作ったサンプルを参考にして、
メニューから記事リストの画面に遷移するようにしてみました。
以下のように、Intentを使います。
Intent intent = new Intent(this, <記事リストのクラス名>.class); startActivity(intent);
本来はメニューに応じた内容を表示する必要があるのですが、
とりあえずアプリ全体のイメージを固めるため、その辺は後回しにします。
ここは約１時間くらいかかりました。
最初なので、よく分かってなかったのもありますね。
記事リストからWebViewへの遷移
WebViewを使うとWeb表示が可能となります。
以下の記事を参考に、WebViewを含むクラスを追加しました。
Y.A.M の 雑記帳: Android WebView を使う
でも、これだけだとWeb表示時に他のブラウザに遷移してしまうようで
アプリ内で完結させるには、以下の処理が必要でした。
具体的に引用すると以下の箇所です。
クラスを追加します。 private class WebViewClientDemo extends WebViewClient { @Override public boolean shouldOverrideUrlLoading(WebView view, String url) { view.loadUrl(url); return true; } } 下記コードを追加します。 webview.setWebViewClient(new WebViewClientDemo());
これでとりあえずアプリ内ブラウザを表示出来ました。
ここは１時間程度でした。
ここまでで、メニュー＞記事リスト＞Web表示の流れが出来ました。
でも、まだ適切な内容が表示されてなく、単なるハリボテなので、
あとは「適切な記事リストの表示」と「適切な記事内容の表示」をすれば
アプリとして最低限の体裁は整うはず。
そのためには、「画面連携時のパラメータ受け渡し」を行う必要があります。
メニューから記事リスト、記事リストからWeb表示時の処理
適切な内容を表示するには、画面遷移時にパラメータを渡して
表示内容を制御する必要があります。
チュートリアルのサンプルを参考にして、以下のようにしてみました。
//遷移元 intent.putExtra(<Tag>, <設定値>); //遷移先 intent.getStringExtra(<Tag>);
具体的には以下のようなコードでURLを受け渡します。
//遷移元 intent.putExtra("URL", "http://b.hatena.ne.jp/hotentry.rss"); //遷移先 String urlstr = intent.getStringExtra("URL");
こんな感じで、メニューがタップされた時の必要なURLを渡し、
遷移先でそのパラメータ（URL）を受け取り、処理するように変更します。
同じようにして、記事リストからWeb画面へもURLを受け渡してあげれば
それっぽい動きをするようになってきました。
この変更が、約３０分くらい。
なんとなくAndroidアプリ作成に慣れてきた頃でした。
はてブ数表示、カテゴリリストを追加
この頃になると、なんとなくですが、色々と分かってきてました。
次にやったのが、はてブ数の表示とカテゴリリストの追加です。
画面への項目追加は以下の手順で実装していくイメージでした。
・レイアウトファイル（XML）に「xx users」用の項目を追加
・クラス（コード）で追加した項目に値をセット
元はこうだったのが、
こんな風になりました。
カテゴリリストは新しい画面になります。
新画面の追加は以下のような感じで。
・クラスを追加（Activity等）
・AndroidManifest.xmlに追加したActivityを追記
（これしないと実行時にエラーになる）
まだ画面追加しただけの状態なので背景色などはデフォルトです。
このような、簡単な画面追加や項目追加なら簡単に出来るように
なってきました。この辺りの作業も１時間くらいです。
Twitter連携
Intentを利用すると非常に簡単に実装出来ました。
これは嬉しいですね。
Y.A.M の 雑記帳: Android Intent.ACTION_SEND
Webのページタイトル取得は以下で。URL取得も同様でした。
こんな感じです。
Intent intent = new Intent(Intent.ACTION_SEND); intent.setType("text/plain"); intent.putExtra(Intent.EXTRA_TEXT, webview.getTitle() + " " + webview.getUrl()); startActivityForResult(intent, 0);
この辺は約３０分程度でした。
WebViewを少しカスタマイズ
ページ表示時に何も変化がないと動きが分かりにくいなぁ、
と思ったので、iPhoneアプリでいうUIActivityIndicator的なものを追加してみました。
setProgressBarIndeterminateVisibility(true);
右上のグルグル回るアイコンみたいのが追加されました。
ちょっと分かりにくいですが(^^;;
あと、デフォルトだとたまにJavaScriptがオフですよ、
と怒られることがあったので、JavaScriptを有効にしてみました。
Android WebView で HTML5 の Web Storage と Web SQL Database API を使う
WebSettings webSettings = webview.getSettings();
webSettings.setJavaScriptEnabled(true);
最近はユーザエージェントからスマートフォン用のページを
表示してくれるとこが多いので、ユーザエージェントを指定してみました。
[Android] ユーザーエージェントに関する非推奨APIが面白い件 - adakoda
WebSettings webSettings = webview.getSettings(); webSettings.setUserAgent(2); // iPhoneに設定(^^;;
これらの実装自体は３０分程度です。
ListViewのカスタマイズ
デフォルト状態だと画面が黒背景なので、iPhoneアプリ版の
「はてブポケット」とは真反対の色合いになってしまってるので、
変えなくても問題はないけど、せっかくなので色々と変更してみました。
参考にしたのは以下です。
ListViewをカスタマイズする | Techfirm Android Lab
Viewの背景色の変更等は以下を参考に。
こんな感じになりました。
およそ２時間くらいかかりました。
結構大変というか、細かい微調整が・・・(^^;;
タイトルバーのカスタマイズ
今、どのカテゴリや内容を見ているのかが分かりにくかったので
タイトルバーに情報表示することにしました。参考にしたのは以下です。
Android アプリケーションのウィンドウタイトルを変更する
また、タイトルバーにはアイコンも設定出来るようなので設定してみました。
タイトルバーにアイコンを表示する | Techfirm Android Lab
この辺は３０分くらいです。
※でも最終的にはタイトルバーのアイコンは除去しました。
で、WebViewを表示している時にプログレスバーを表示するようにしてみました。
How to add a Progress Bar in Webview
これも３０分くらいでした。
はてブの閾値変更用の設定値保持
はてブの閾値変更は同じ画面でリロードしつつ値を変更する必要があり、
画面連携のようにIntentでのパラメータ受け渡しでは出来ないので、
以下の方法でやってみることにした。
値の保持は以下。
SharedPreferences sp = PreferenceManager.getDefaultSharedPreferences(this);
Editor ed = sp.edit();
ed.putString(<タグ>, <値>);
ed.commit();
値の取得は以下。
SharedPreferences sharedPreferences = PreferenceManager.getDefaultSharedPreferences(this); String holdstr = sharedPreferences.getString(<タグ>, "");
閾値の切り替えは以下のようにメニューで行います。
この辺は１時間くらいでした。
使ってみると非常に使い勝手もよくて、他の箇所にも多用しました。
ブクマ登録の実装方法
iPhoneアプリの「はてブポケット」開発時は、まだはてな自体が
スマートフォンに対応してなかったのと（２年前なので仕方ない）
iPhone自体が遅くてメモリも少なくてWeb表示は実用に耐えなかったわけですが、
今は、はてブもスマートフォン対応されてるし、端末も十分速いと思ったので
ブクマ登録とコメント表示は以下のページを表示するようにした。
必要になったら、専用画面を作ることにすればいいかなと(^^;;
でも多分作らない。面倒だから。
はてブへの画面遷移は、メニューで行います。
「はてブコメント」をタップしたら画面遷移します。
最初は以下のように記事ページ自体を差し替えるようにしてました。
記事（「はてブコメント」タップ：ページ読み込み）
↓
ブクマページ（戻るボタン：ページ読み込み）
↓
記事（再読み込みするので遅い）
これだとブクマ画面から元の記事に戻る時に再読み込みしてしまい、
そこに案外ストレスを感じたので、以下のように変更しました。
記事（「はてブコメント」タップ：画面遷移でページ読み込み）
↓
ブクマページ（戻るボタン：画面遷移）
↓
記事（すぐ表示される）
これで少しストレス解消出来たと思います。
使用テストしながら、少しづつこういった変更を行っていきました。
ネットワーク未接続時のアラート表示について
ネットワーク接続のチェックは以下の方法を参考にしました。
アラート表示は以下の方法を参考にしました。
これらを組み合わせて、ネットワークに未接続の時に
アラートを出すようにしています。
余談ですが、最初に見つけた記事だと上手くいかず、
色々探して上の記事を見つけました。色々変わってるようですね。
デバッグはログ出力で
この頃になると、ログ出力等を使ってデバッグ用に変数値の内容を
見たくなってきてた。逆に言うと、ここまでは勘でやってたわけですが(^^;;
以下を参考にしました。
Snow Leopardでadbとddmsを使う - yoshi's blog
また、ddmsはメモリ使用状況等を見るのにも最適なようです。
Androidアプリのアイコン作成について
やはりiPhoneとは少し違うようで。
Android 2.1アイコン作成方法 3つのポイント - hdk_embeddedの日記
60 x 60、40 x 40、30 x 30の３つを作りました。
といっても、iPhoneアプリ版で使ってるアイコンをそのまま使用してます。
その他、もろもろバグ修正
詳細は割愛しますが、色々とバグ修正も行いました。
ちょこちょこ修正してるので結構時間はかかってるかな？
という印象です。
野良アプリ用のapkファイルを作成してみました
ここまで出来てくると、アプリケーションとしての公開方法についても
気になってきたので試してみました。
まず、証明書なしのapkファイルを作成してレンタルサーバにアップしてみましたが、
これだとGALAXY Sでダウンロードしてもインストール出来ませんでした。
調べてみると、以下の記事を発見しました。
第3回 Androidアプリケーションを公開する - Androidで広がる，携帯アプリ開発の世界：ITpro
証明書付きのapkファイルにする必要があるみたいです。
てことで、Eclipseの機能を使って、プロジェクトの右クリックメニューから
「Androidツール」の「Export Signed Application Package...」で
「Create new store」しつつ、apkファイルを作ってみました。
このapkファイルをレンタルサーバにアップして試してみると
無事、インストールすることが出来ました。
ただしインストールするには
「設定」ー「アプリケーション」ー「提供元不明のアプリ」
にチェックする必要があるようです。
この辺の作業は色々調べたりもしたので、およそ２時間くらいかかりました。
HTBPocketの公開について
本記事公開の直前まで野良アプリとして公開してみよう、
と思ってましたが、いわゆる「免責事項」をどうしよう？
と思ってしまって、一時保留しています。
もちろんユーザ側の「自己責任」が基本なのですが、
それに同意してもらった上でダウンロード出来ないとまずいわけで。
面倒くさいことになるの、イヤですからねぇ・・・
（そういうこと多いので(^^;;）
需要がありそう、かつその辺のことをクリア出来たら
野良アプリとして公開してもいいかな、とは思ってます。
Androidアプリを作ってみた感想
iPhoneアプリ作成に慣れてるのもあってか、Androidアプリ作成も
割と早く慣れたのではないかな、と思ってます。
もちろん、言語や開発環境の違いはありますが、画面間連携とか
UITableViewとListView、UIWebViewとWebViewといった、
スマートフォンならではの要素についてはそんなに大きな差はない印象。
もちろん細かいところは違うんだけど、細かいことを気にしなかったら
まあ両者とも似たようなものです。
なので、これだけの時間でAndroidアプリを作れたんだと思いました。
また、iPhoneアプリを作り始めた頃と違って、
ネットで得られる情報が格段に多いのも良かったですね。
最近はiPhoneアプリ開発の方も情報は簡単に入手出来ますが・・・
ちなみに、タイトルでは「一週間」としてますが、
多分、実際にはそんなにかかってないと思います。
iPhoneアプリ開発とAndroidアプリ開発、
どちらが簡単かというと、一長一短ある印象です。
iPhoneアプリはレイアウトを作る時に使うInterface Builderの存在が大きく、
理解するのは少々面倒だけど、理解しちゃえば細かい微調整が凄く楽になります。
逆にAndroidアプリの方はEclipseだとレイアウトエディタのようなものはあるけど、
ぶっちゃけ使いにくかったので、コードで書いていくのが基本だと思います。
そこが一番大きな違いのように感じました。
ネットワーク通信についてはJavaでコーディングする方が
何かと簡単に実現出来るなぁ、という印象がありましたが、
基本的にコーディングについては記述方法が違うだけで、
まあどちらも似たような感じですね。
Androidアプリ開発で一番衝撃的だったのが、やはり「Intent」の存在。
これについては長くなりそうなので別記事にしようと思います。
まだ、考えが上手くまとまってないのもありますが(^^;;
Androidアプリを作ってみて一番嬉しかったのが、
自分のレンタルサーバにアプリを置いて公開出来そうなこと。
これは正式なiPhoneアプリでは不可能なことなので、
ちょっとドキドキしますね。
てことで、初めてのAndroidアプリ開発は、
私にとって、とても楽しいものでした(^o^)
Permalink | コメント(2) | トラックバック(1) | 04:44