この章では最もシンプルな構成のアプリを作ることで、Androidアプリ作成に必要な基本概念を学びます。

Eclipseを起動してプロジェクトを作成します。ここでは「Timer」というプロジェクトを作成します。「File」メニュー→「New」→「Android Application Project」を選択します。(環境によっては「File」→「New」→「Project...」の後、「Android Application Project」と選択する場合もあります。どちらでも構いません。)

すると、様々な情報を入力するダイアログがでてきます。 各項目には以下のように入力するのですが、今回は初めてなので順を追って説明します。

まず、以下のようなダイアログが表示されると思うので、Application Nameに「Timer」と入力します。また、Package Name や、Bulid SDK、Mininum Required SDK についても、下記表に合わせて入力してください。

Application Name	Timer
Project Name	Timer
Package Name	com.rainbowapps.timer
Minimum Required SDK	API 7 : Android 2.1 (Eclair)
Target SDK	API 7 : Android 2.1 (Eclair)
Compile With	API 7 : Android 2.1 (Eclair)
Theme	None

次の画面については何も変更しないで「Next >」ボタンをクリックしてください。

次の画面も何も変更せず「Next >」をクリックしてください。

Create Activityの画面についても何も変更せずに「Next >」ボタンをクリックしてください。

（Blank Activityが選択されている事を確認してください。）

Blank Activity画面でも特に変更しないで「Finish」ボタンをクリックしましょう。

※ 本講座では、一部の例外を除き基本的にAndroid SDK 2.1を利用します。これは、日本で販売されているほぼすべてのAndroidスマートフォンに搭載されているAndroid SDKのバージョンが、2.1以上であるからです。

これでプロジェクトの作成が完了しました。

シミュレータで起動する

プロジェクトを作成したら、試しに起動してみましょう。

「Timer」プロジェクトを選択して、「Run」→「Run As」→「Android Application」を選択します。すると、シミュレーターが立ち上がります。また、Eclipse上を右クリックして出て来るメニューにも「Run As」があります。ここからでももちろん実行可能です。また、画面中央部にある緑色の矢印ボタンをクリックすることでも、実行可能になっています。

はじめてアプリケーションを起動する場合、以下のようなダイアログが表示される場合があります。その場合、最上部の「Android Application」を選択します。

シミュレーターが起動すると、以下のような起動画面が立ち上がります。しばらくこのまま待ちましょう。

シミュレーターが立ち上がると、下画面のような状態になります。この状態はスクリーンロックがかかっている状態なので、ロックボタンをドラッグしてロックを解除します。

スクリーンロックの解除が済むと、以下のような画面が現れます。「Hello World」と表示されていれば成功です。

このように、Androidアプリケーションの開発を行う際には、シミュレータを利用して実際のアプリケーションの挙動をチェックしながら行うことになります。しかし、Androidのシミュレータの動作は非常に重く、しばしばイライラさせられるでしょう。またカメラやBluetoothといったハードウェアを利用するアプリケーションの場合、シミュレータ上では正常に動作しない場合が多いです。

実機で起動する

実機を所持している場合、実機を利用して開発を行うことをお勧めします。今後の教科書も、基本的には実機が手元にあり、実機で開発を行うことを前提として設計されています。

実機を利用して開発を行う際には、いくつか設定を行う必要があります。まず、実機の設定を行います。

設定アプリを起動します。（画面構成は、端末ごとに異なります）

アプリケーションを選択します。

最上部に表示されている、「提供元不明のアプリ」にチェックをいれます。上記画像の最下部にある、「開発」をタップします。

上記の画面になるので、三項目すべてにチェックをいれましょう。

次に、実機とPCをUSBでつなぎます。Windowsを利用して開発を行なっている場合、ドライバのインストールを求められますので、ウィザードに従ってドライバのインストールを行いましょう。MAC環境では、ドライバのインストールは必要ありません。

最後に、シミュレーターの時と同じようにアプリを実行します。すると、初回のみ接続されている端末の一覧が出て来るので、端末を選択し、実行します。これで、先ほどシミュレーターに表示されたのと同じ画面が端末上に表示されれば完了です。

Eclipseのインタフェース

Androidアプリケーションの開発には、EclipseというIDE(統合開発環境)を利用することが一般的です。EclipseはAndroidアプリケーションの開発を行うために作られたわけでなく、様々な言語を利用してアプリケーションを開発する際に利用されており、オープンソースながら大変高機能なIDEです。しかし一方で、Androidアプリケーション開発を行う際には不要な機能があったり、高機能であるがためにどこになにがあるのかわかりづらかったりします。まずは、Eclipseの基本的な画面構成について説明を行います。

Eclipseの画面は、大きく上記の３つにわけられます。

まず、画面左側に表示されている赤い枠の部分は、『パッケージエクスプローラ』といってプロジェクトからファイルを選択する際に利用する画面です。今後開発を行うAndroidのアプリケーションは、Eclipseでは「プロジェクト」という単位で管理されています。例えば、今回作成するタイマーアプリケーションのプロジェクト名は、「Timer」でしたね。それぞれのアプリケーションは、複数のファイルから構成されており、これらのファイルを書き換えることで様々な機能を実装していきます。その際に、ファイルの選択を行うのがこの部分です。

オレンジ色の部分は、実際にコードを打つメイン画面です。先ほど解説を行ったパッケージエクスプローラからファイルを選択（ダブルクリック）すると、そのファイルの内容がこの部分に表示されます。

最後に、画面下部の青矢印の部分に表示されているのが、「問題」画面です。この部分には、プログラムに関するエラーが表示されます。

表示される文字を変更する

詳しい仕組みについては、次回以降の講義で説明しますので、今回はまず画面上に表示されている文字列を変更してみましょう。

　 

パッケージエクスプローラに表示されているTimerプロジェクトの、左側に表示されているグレーの小さな三角形をクリックします。

すると、以下のようにTimerプロジェクト内のファイルが展開表示されます。

今回は、strings.xmlを編集したいので、同様にresフォルダとvaluesフォルダを展開表示させて以下のような画面にします。

strings.xmlをダブルクリックして表示します。メイン画面が以下のようになると思います。

画面下部に表示されている、strings.xmlというタブをクリックします。

すでに、strings.xmlには以下のような記述が行われていることがわかります。これらの記述は、プロジェクトの新規作成時に自動で記述されるものです。

strings.xml

<?xml version="1.0" encoding="utf-8"?> <resources>     <string name="app_name">Timer</string>     <string name="action_settings">Settings</string>     <string name="hello_world">Hello world!</string> </resources>

 今後、コードの詳細を示す際には上記のフォーマットを利用します。黒枠の中には実際のコードが、黒枠の上部にはファイル名が表示されています。

resourcesというタグとstringというタグがあるのがわかります。また、起動時の画面に表示されていた「Hello World!」という文言もみつかりました。

　先ほどの@string/hello_worldはこのstring.xml内の<string name=”hello_world”>に対応しています。したがって、ここを変更することで画面上に表示されていたテキストを自由に変更することが出来ます。

　ここでは、文字列をHello Android!!!としてみましょう。string.xmlを以下のように変更します。特にテキストで言及のない限り、変更箇所はオレンジ色でハイライトされています。一部を削除する必要がある場合もありますし、すべてを新しく記述する必要がある場合もあります。コードの変更を行う際には、注意しながら変更を行いましょう。

string.xml

<?xml version="1.0" encoding="utf-8"?> <resources>     <string name="app_name">Timer</string>     <string name="action_settings">Settings</string>     <string name="hello_world">Hello Android world!!!</string> </resources>

先ほどと同じ手順で実行を行います。以下のように表示されたでしょうか？

タイマーアプリの作成

Timerプロジェクトにタイマー機能を組み込み、機能の追加方法を学びます。今回は以下のような機能をもったタイマーを作成します。

1. カウントを開始する
2. カウントを停止する
3. カウントをリセットする

具体的な画面は、以下のようになります。では、実際に作ってみましょう。

画面のレイアウト

まずは、画面のレイアウトを構成しましょう。画面レイアウトは、activity_main.xmlというファイルに記述されています。パッケージエクスプローラから、activity_main.xmlをダブルクリックして開きましょう。（layoutフォルダを展開表示することを忘れないようにしましょう！）

activity_main.xmlを開くと、以下のような画面が表示されます。

今表示されている画面は、「グラフィカルレイアウト」といって左側に表示されている部品を右側にドラッグアンドドロップすることで、アプリケーションに配置することができる画面です。グラフィカルレイアウトは、直感的な操作が可能な反面細かい設定がやりづらく、なかなか思い通りのレイアウトになりません。

本講座では、基本的にグラフィカルレイアウトは利用しません。そのかわり、直接xmlファイルにコードを記述します。グラフィカルレイアウトを利用する場合に比べ、Androidアプリケーション開発に必要となる本当の力を得る事ができるようになるでしょう。

直接xmlファイルを編集するには、タブのactivity_main.xmlをクリックします。

すでに、activity_main.xmlには以下のような記述がされています。

res/layout/activity_main.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"     xmlns:tools="http://schemas.android.com/tools"     android:layout_width="fill_parent"     android:layout_height="fill_parent"     android:paddingBottom="@dimen/activity_vertical_margin"     android:paddingLeft="@dimen/activity_horizontal_margin"     android:paddingRight="@dimen/activity_horizontal_margin"     android:paddingTop="@dimen/activity_vertical_margin"     tools:context=".MainActivity" >     <TextView         android:layout_width="wrap_content"         android:layout_height="wrap_content"         android:text="@string/hello_world" /> </RelativeLayout>

ここに、ボタンやタイマーといった部品を配置するコードを記述していきます。詳しい説明は、次回以降の講義で行われるので今回はだまされたと思ってついてきてください。

activity_main.xmlを以下のように変更します。先ほど、黄色の部分は追加する部分、といいましたが、グレーの部分は反対にコードから削除する部分です。

res/layout/activity_main.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"     xmlns:tools="http://schemas.android.com/tools"     android:layout_width="fill_parent"     android:layout_height="fill_parent"     android:paddingBottom="@dimen/activity_vertical_margin"     android:paddingLeft="@dimen/activity_horizontal_margin"     android:paddingRight="@dimen/activity_horizontal_margin"     android:paddingTop="@dimen/activity_vertical_margin"     tools:context=".MainActivity" >     <TextView         android:layout_width="wrap_content"         android:layout_height="wrap_content"         android:text="@string/hello_world" /> </RelativeLayout> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="vertical"  >     <Chronometer         android:id="@+id/chronometer"         android:layout_width="fill_parent"         android:layout_height="wrap_content" />     <Button         android:id="@+id/startButton"         android:layout_width="fill_parent"         android:layout_height="wrap_content"         android:text="start" />     <Button         android:id="@+id/stopButton"         android:layout_width="fill_parent"         android:layout_height="wrap_content"         android:text="stop" />     <Button         android:id="@+id/resetButton"         android:layout_width="fill_parent"         android:layout_height="wrap_content"         android:text="reset" /> </LinearLayout>

実行すると、以下の様な画面になれば成功です。

このように、レイアウトの変更はxmlファイルによって行います。（詳細は次回の講義に説明します）

Javaファイルの編集

画面レイアウトを変更したので、具体的なアプリケーションの動作を記述しましょう。例えば、startボタンを押したらタイマーがスタートすべきですし、stopボタンを押したらタイマーは一時停止すべきです。このような、アプリケーションの動作はJavaファイルに記述されています。

「画面のレイアウトはxmlファイル、実際の動作はjavaファイルに記述されている」と理解してもらえれば大丈夫です。

以下のように、srcフォルダを展開表示し、MainActivity.javaをダブルクリックして選択します。

MainActivity.javaが今回のアプリケーションの動作を記述するファイルです。すでに、以下のような記述がされています。

src/com.rainbowapps.timer/MainActivity.java

package com.rainbowapps.timer; import android.os.Bundle; import android.app.Activity; import android.view.Menu; public class MainActivity extends Activity {     @Override     protected void onCreate(Bundle savedInstanceState) {         super.onCreate(savedInstanceState);         setContentView(R.layout.activity_main);     }     @Override     public boolean onCreateOptionsMenu(Menu menu) {         // Inflate the menu; this adds items to the action bar if it is present.         getMenuInflater().inflate(R.menu.main, menu);         return true;     }      }

詳しい説明は今回はしませんが、ひとつだけ。先ほどmain.xmlを編集して画面のレイアウトを変更しましたが、これは以下の1行でレイアウトとしてmain.xmlを指定しているからです。

setContentView(R.layout.main);

では、実際にTimerActivity.javaを編集してタイマーアプリケーションを完成させましょう。まず、TimerActivity.javaの冒頭を以下のように変更します。

src/com.rainbowapps.timer/MainActivity.java

package com.rainbowapps.timer; import android.app.Activity; import android.os.Bundle; import android.view.Menu; import android.os.SystemClock; import android.view.View; import android.widget.Chronometer; import android.widget.Button; public class MainActivity extends Activity {

先程までと同様に、黄色の部分を追記します。

次に、変数の宣言（次回以降に詳しく説明するので、わからなければ気にしないでください！）を行います。

src/com.rainbowapps.timer/MainActivity.java

public class MainActivity extends Activity { private Button startButton; private Button stopButton; private Button resetButton; private Chronometer chronometer; private long time = 0;      @Override     public void onCreate(Bundle savedInstanceState) {

次にonCreate()の中に以下の黄色の背景の部分をコピー＆ペーストしてください。

src/com.rainbowapps.timer/MainActivity.java#onCreate

@Override     public void onCreate(Bundle savedInstanceState) {         super.onCreate(savedInstanceState);         setContentView(R.layout.main);                //Viewの初期化         chronometer = (Chronometer)findViewById         (R.id.chronometer);         startButton = (Button) findViewById(R.id.startButton);         stopButton = (Button) findViewById(R.id.stopButton);         resetButton = (Button) findViewById(R.id.resetButton);         stopButton.setEnabled(false);     }

続いて、ボタンが押された時の処理を記述します。

src/com.rainbowapps.timer/MainActivity.java#onCreate()

public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); //Viewの初期化 chronometer = (Chronometer)findViewById (R.id.chronometer); startButton = (Button) findViewById(R.id.startButton); stopButton = (Button) findViewById(R.id.stopButton); resetButton = (Button) findViewById(R.id.resetButton); stopButton.setEnabled(false); //ボタンが押された時の処理 startButton.setOnClickListener(new View.OnClickListener() { public void onClick(View v) { //スタート } }); stopButton.setOnClickListener(new View.OnClickListener() { public void onClick(View v) { //ストップ } }); resetButton.setOnClickListener(new View.OnClickListener() { public void onClick(View v) { //リセット } }); }

これにより、ボタンがクリックされるとonClick()の中に書かれた処理が実行されることになります。（わからなくて大丈夫です！！）

最後に、タイマーの処理を追加します。

以下のオレンジ背景の部分を「スタート」「ストップ」「リセット」の各項目の下にコピー＆ペーストして下さい。

まずは、スタートボタンが押された時の処理を記述します。

src/com.rainbowapps.timer/MainActivity.java#onCreate()

//ボタンが押された時の処理 startButton.setOnClickListener(new View.OnClickListener() { public void onClick(View v) { //スタート startButton.setEnabled(false); stopButton.setEnabled(true); chronometer.setBase(SystemClock.elapsedRealtime() - time); chronometer.start(); } });

本講義では、このようにコードの一部だけを抜き出して記載することが多いです。どこにどのコードを入力するのか、間違えないようにしましょう。必ず、どこに入力するべきかわかるようにコードの前後も記載してあります。

次に、ストップボタンが押された時の処理を記述します。

src/com.rainbowapps.timer/MainActivity.java#onCreate()

stopButton.setOnClickListener(new View.OnClickListener() { public void onClick(View v) { //ストップ startButton.setEnabled(true); stopButton.setEnabled(false); chronometer.stop(); time=SystemClock.elapsedRealtime()-chronometer.getBase(); } });

最後に、リセットボタンが押された時の処理を記述します。

src/com.rainbowapps.timer/MainActivity.java#onCreate

resetButton.setOnClickListener(new View.OnClickListener() { public void onClick(View v) { //リセット startButton.setEnabled(true); stopButton.setEnabled(false); chronometer.stop(); chronometer.setBase(SystemClock.elapsedRealtime()); time = 0; } });

では、実行してみましょう。ちゃんと動いたでしょうか？

デザインを整える

最後に、デザインを整えましょう。activity_main.xmlを以下のように変更します。

res/layout/activity_main.xml

<Chronometer         android:id="@+id/chronometer"         android:layout_width="fill_parent"         android:layout_height="wrap_content"         android:layout_weight="5"         android:gravity="center"         android:textColor="#00fa9a"         android:textSize="100dip" />

実行してみましょう。以下のようなレイアウトになったでしょうか？

これで、タイマーアプリの作成は終了です。

具体的にどのコードがなにをしていたのか、理解できないところが多かったと思いますが、今回はアプリケーション作成の流れを知ってもらい、自分の作ったアプリケーションが動く楽しさ味わっていただくためにあえて詳しい説明を省いています。以降の講義できちんと説明しますので、安心してください。

世界に挑戦する、Androidアプリケーション開発の旅に出かけましょう。

本講義では、「タイマーアプリ」の作成を通して、Androidアプリ開発に必要な環境構築と、アプリ開発の基礎を学習します。