アンドロイドアプリができるまで：004 メイン画面のUIとコード解説

アンドロイドアプリができるまで:004

アンドロイドファンの皆様、こんにちは。タオソフトウェアのため吉です。この連載では、Androidのアプリケーションが一体どうやってつくられているのか、その工程をお伝えしています。アンドロナビにて3月8日（月）より無料ダウンロード開始となったタオソフトウェアの「Shwakeup」を具体事例として取り上げ、実際のアプリ開発の現場の様子をご覧いただければと思います。

さて、前回はShwakeupのコンセプト企画から、具体的な機能の概要を決定していく過程についてお伝えしました。今回は、アプリケーションメイン画面を主に取り上げ、UI（ユーザイ ンターフェース）の構築、及びコードの記述による実装の工程を見ていただこうと思います。

画面はいくつ必要？

前回の最後で、アプリコンセプトに基づき、Shwakeupに実装する機能を決定しました。おさらいになりますが、下の表がその機能概要です。

Shwakeupの機能

Shwakeupは目覚まし時計ですが、「シェイクによってアラームを止める」という特長的な機能を搭載することになります。では、これらの機能を実装していくにあたって、画面は何枚つくったらよいでしょうか。その配置は？というふうに、UIを考えていきます。

必要な画面を検討し、

1. メイン画面（起動した直後の画面）
2. アラームの時刻を設定する画面
3. シェイク回数設定画面
4. アラームサウンド設定画面
5. アラーム画面（アラームが鳴っているときの画面）

5つの画面を暫定的に設定しました。それぞれの配置は、

• 1のメイン画面が2～4の各設定画面の親画面となり、それぞれ親画面からリンク。
• 5はアラームの設定時刻になると自動で表示。

となります。

シェイクレベルの設定とアラームのON/OFFの設定は、別画面には遷移せず、メイン画面に直接レベルバーとボタンを設置して対応することにしました。また、アラーム音の設定画面は、音楽プレイヤーで再生できる曲のリストから選択するようにしました。

当初のデザインはシンプルであることを前面に出していました。出来る限り簡単な操作で使えるようにデザインしています。それぞれの画面のUIはこんな感じでした。

初版の各画面のデザイン

メイン画面UIの変遷

一通り画面をデザインした後は、レビューと修正の繰り返しです。今回はメイン画面を具体例として、変更前と変更後をご覧ください。

メイン画面のUI

まず、各機能のアイコンをデザインし直し、ボタンとして配置しました。ボタンにすることで「押すとそれぞれの設定画面に遷移する」ということが直感的にわかるようになり、ユーザビリティもあがりました。また、前版では巨大な「アラームのON/OFF」ボタンをメイン画面に設置していましたが、「アラームの時刻設定」と「アラームのON/OFF」はアラーム画面にまとめてしまうことにしました。さらに、それぞれのボタンのタイトルと機能の説明を、ボタンの色合いに合わせて設置してみました。

このように、どういった文言やデザイン、配色を用いればユーザにとって機能がわかりやすいか、使いやすいか、ということを考えながら手を加えていきます。

いかがでしょうか。第一印象がずいぶん変わったと思います。仕上げに、タイトルロゴとキャッチコピーを設置。ちなみに「振って止める目覚ましアラーム」というキャッチコピーはビッグローブ様から提案いただきました。これを配置したことで、何をするアプリケーションなのかがはっきりしたと思います。

実装：画面の作製

ここまで、UI構築の考え方という視点でお話を進めてきましたが、一方で、このUIは実際に動くプログラムとして、画面の作製を行います。Androidでは、画面はXMLを記述して作製します。まずは、実際のShwakeupのXMLファイルをご覧になってみてください。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="@color/white"
    android:paddingTop="10dip"
    android:paddingLeft="10dip"
    android:paddingRight="10dip"
    android:paddingBottom="7dip"
    android:gravity="center_horizontal"
    >
	<LinearLayout
	    android:orientation="horizontal"
	    android:layout_width="fill_parent"
	    android:layout_height="wrap_content"
	    android:gravity="right"
	    android:paddingRight="15dip"
	    android:paddingBottom="6dip">
	    <ImageView
	    	android:layout_width="wrap_content"
	    	android:layout_height="wrap_content"
	    	android:src="@drawable/andronavi_logo"/>
	</LinearLayout>
	<LinearLayout
	    android:orientation="horizontal"
	    android:layout_width="fill_parent"
	    android:layout_height="wrap_content"
	    android:gravity="center_horizontal">
	    <ImageView android:id="@+id/appLogoImage"
	    	android:layout_width="wrap_content"
	    	android:layout_height="wrap_content"/>
	</LinearLayout>

.....

すべてを記載すると紙面が埋まってしまいますのでやめますが、最終的に上記のような記載が294行になりました。このままでは何がなんだかわかりませんが、実はAndroidソフト開発用のEclipseのプラグインを使う事で、このようなXMLファイルはグラフィカルに作製が可能です。

レイアウトエディタ

このエディタは、左のViewの所にあるボタンをドラッグすればボタンが作製され、EditTextをドラッグすれば入力ボックスが作製され…というように、直観的に画面をデザインする事ができます。そして最終的には先ほど出てきたようなXMLファイルが自動的に作製されます。このエディタを使えば、初心者でも簡単に画面を作っていくことが可能です。

しかしながら、このツールは初期の頃は日本語が文字化けしたり、うまくレイアウトを記載できなかったりしたため、 タオソフトウェア内ではほとんど使用していません。XMLでそのまま書くのに慣れてしまいました。

また画面設計をするときに、デザイナー等によりフォトショップ等のツールを用いて作っていくという方法もあるかと思いますが、今回は用いていません。最初はXMLの記載に抵抗を覚えるかもしれませんが、一定のルールさえ理解してしまえば、コピー＆ペーストを 繰り返す事で、グラフィカルなツールを使用するよりは早く仕事が終わってしまいます。

プログラミング

画面をXMLファイルで作製しました。このXMLを利用して画面を表示させます。Androidプログラムでは、画面を表示するには、Activityの概念を使用します。

public class MainActivity extends Activity {
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

    	//レイアウトxmlファイルを設定
    	setContentView(R.layout.main_activity);
    }
    ....
}

上記のコードは、本当に良く使います。最初に表示される画面名を「MainActivity」と名付けました。そして画面であるという事を示すために、「extends Activity」 を指定しています。

次に、プログラムが動き出して画面が表示される前に呼ばれる、onCreateメソッド内のsetContentViewメソッドに作製したXMLファイル名「main_activity.xml」を指定します。コード上は、「R.layout.main_activity」のように、ファイル名の頭に、R.layoutが追加され、末尾のxmlを削除した形で表現されます。ルールを少し覚える必要はありますが、このように、おまじないのように記載をするだけで、先ほどXMLでデザインをした画面がプログラム起動時に表示されるようになります。

次に、ボタンが押されたときにどうするのか？ということや、画面に、シェイク回数やアラーム音に何が設定されているか？といったことをプログラミングする必要があります。 プログラミング側から画面側にアクセスをするときに、どのパーツ（ボタンや文字表示エリア等）に対してアクセスするのかを識別できるようにする必要があります。 このため、それぞれのパーツにIDを付けておき、そのIDを使ってjavaプログラム側からアクセスします。

XMLファイルでの記載

		        <ImageButton
		        	android:id="@+id/shakeButton"
				    android:layout_width="wrap_content"
				    android:layout_height="wrap_content"
				    android:src="@drawable/ic_shake"
				    android:scaleType="fitXY"
				    android:layout_marginRight="10dip"
				    android:padding="18dip"/>

		        <TextView
		        	android:id="@+id/shakeTimes"
		        	android:layout_width="wrap_content"
		        	android:layout_height="wrap_content"
		        	android:textSize="14dip"
		        	android:textColor="@color/ampm_on"/>

Javaソースファイルでの記載

    	/*
    	 * シェイク回数ボタン
    	 * シェイク回数設定ダイアログへ遷移
    	 */
    	((ImageButton)findViewById(R.id.shakeButton)).setOnClickListener(new OnClickListener() {

			@Override
			public void onClick(View v) {
				startActivity(new Intent(MainActivity.this, ShakeTimesDialog.class));
			}
		});

    	//シェイク回数を設定する
    	mShakeTimes = (TextView)findViewById(R.id.shakeTimes);
    	mShakeTimes.setText("10");

上記の例では、XMLでボタンに、「shakeButton」というIDを指定し、プログラム側で「shakeButton」IDを指定して、ボタンが押されたときに 「ShakeTimesDialog画面」に画面移動するように指示をしています。また、XMLで「shakeTimes」というIDの表示エリアを指定し、プログラム側で「shakeTimes」の部分に「10」という文字を表示するように指示しています。

このように、XMLで記載された画面とJavaで記載されたプログラムは、IDによって繋がっていきます。上記は非常に簡単な例ですが、もちろん文字を変更するだけでなく、文字色を変えたり、文字の大きさを変えたりと様々な事が出来ます。とても多くの事が出来るので、ここですべて説明することはできませんが、全てはAndroid SDKのドキュメントに記載されています。

UIの完成

さて、このように画面の作りとプログラムが密接にかかわってくるため、画面を変えてしまうとプログラムのコードも変わってしまいます。 このため早期にどのような画面にするかを固めてアプリケーションを作製するのが効率的です。しかしながら、最初にUIの変遷ということで初期のイメージと完成した時のイメージをお見せしましたが、UIによってアプリの印象は全然違ってきます。苦労して実装した機能も、見せ方が良くなければその良さをわかってもらえません。

従って、最初にUIを仕様として決めてしまい、変更不可能なルールにしてしまうと良いソフトウェアは出来てきません。効率は悪いですが、タオソフトウェアでは、まず機能を実装して動作を一通り確認した後に、使用感（使用場面をシュミレーションしたりします）をレビューしつつ、デザインを 変えたり新しいアイディアを追加して行く手法を取っています。

さて、次回ですが、もう少し内部に踏み込んだ部分についてお伝えしたいと思っています。お楽しみに！

「Shwakeup」無料ダウンロードページ

前回までの記事

• アンドロイドアプリができるまで:001 開発環境の準備
• アンドロイドアプリができるまで:002 環境構築の仕上げ
• アンドロイドアプリができるまで:003 目覚ましアプリ「Shwakeup」の企画