第01講 タイマーアプリ
印刷を御希望の方はページ一番下の「印刷用ページ」より印刷してください。
PDFファイルとして保存したい場合も「印刷用ページ」より保存できます。
見出しに「★」マークがついた箇所は説明動画がございます。


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

本講義で作成するタイマーアプリの画面



アプリの外観を作成する

はじめに

RainbowApps「Androidマスターコース」へ、ようこそ!


今日からあなたもAndroidアプリ開発者の仲間入りとなります。具体的なアプリ開発の解説に入る前に、このコースの全体的な説明と目標について説明します。


このコースは全20回の講義を通して、プログラミングの基礎から、よく使われるAndroidアプリの機能を実装するスキルまでを一通りカバーし、初心者でもある程度のアプリ開発を行うスキルがつくよう、設計されています。各講それぞれ、1つ以上の独立したデモアプリを作成します。


まず、最初の5回はプログラミングの基礎を習得することに重点が置かれています。ご存知の方も多い方と思いますが、AndroidアプリはJavaという言語を使用して記述されています。JavaはAndroidアプリケーション開発においてだけでなく、WEBや業務システム等、様々な場所で幅広く利用されている言語です。最初の5回の大きな目標は、このJavaを学ぶとともに、アプリ開発に使うツールであるEclipseの使い方に慣れ、よく使われる基礎的なプログラミングテクニックを習得することとなります。


基礎を習得した後の後半15回は、Android SDK(Google社が提供するAndroidアプリの開発ツールキット)が提供するフレームワーク(アプリの基本機能を提供する基盤)の使い方を重点的に学びます。このフレームワークを有効に活用することによって、Androidスマートフォンの特徴とされる、高度なユーザーインタフェースを自分のアプリに簡単に取り入れることができます。また、Android端末が装備するカメラや様々なセンサーのデータに取得することもできます。オリジナルアプリを製作する際は、これらフレームワークを独自に組み合わせることによって、必要な機能を実装したり、今までにない新たな経験を生み出したりすることになります。後半15回では、これらの基本的な使い方を学び、その活用方法を学ぶことが大きな目標となります。


プログラミングは、スポーツと共通している部分があります。野球やテニスなどのスポーツでは、練習量がスキル上達に直結するように、プログラミングでも「練習」することで、より早くスキルを上達させることができます。慣れるまでは、苦労することもあるかと思いますが、ここに書かれている内容を一度やって満足するのではなく、別々に解説されている機能や内容を組み合わせたり、自分流にアレンジしたりと、積極的に手を動かす


ことをおすすめします。このようにすることで、自分のアイデアをアプリ上で具現化する上で最も重要となる「応用力」を養うことができるでしょう。


また、「わからないこと」や「解決できない問題」に遭遇した場合は、テキストの内容をおさらいすることも有効ですが、積極的に検索することも一層有効です。ウェブ上は世界中のアプリ開発者が集う空間でもあり、効果的なプログラミングテクニックから、それぞれが遭遇した問題やその解決方法まで、様々な情報がやり取りされています。これらをぜひ有効活用してみてください。


それでは、早速、アプリ開発を始めていきましょう!


本講義はMac、英語環境をベースに作成されています。Windows環境や日本語環境の場合と若干異なる部分があるかもしれませんが、その場合は各自調整しつつ進めてください。わからない場合は、アシスタントに質問をして下さい。

スクール用のフォルダ「rainbowapps」作成

作って お渡しするサンプルコードや資料を保存しておくためのフォルダを作成してください。フォルダの中身は自分の分かりやすいようにフォルダ分けしてください。これからいくアプリのソースコードもこの中のフォルダに入れます。


<?xml version="1.0" encoding="utf-8"?>

<resources>

    <string name="hello">Timer</string>

    <string name="hello">Hello Android World!!!</string>

    <string name="app_name">Timer</string>

    <string name="title_activity_timer">TimerActivity</string>

</resources>

Eclipseの設定

次に、Eclipseの設定を行います。

Workspaceの設定

workspaceは、eclipseを使って作っていくソースコードを置くフォルダです。先ほど作った「rainbowapps」フォルダの中に「workspace」フォルダを作成してください。


作成が終わったら、「File」→「Switch Workspace」→「Other..」を選択下さい。



すると、以下のようなダイアログが出て来るので、先ほど作った「workspace」のフォルダのパスを設定してください。



以上でworkspaceの設定は完了です。以降はこのフォルダの中に作ったアプリのソースコードが追加されていくことになります。

行番号の表示

次に、エディターに行番号を表示する設定を行います。

  • Windowsの場合「Window」→「Preferences...」(設定)を選択します。
  • Macの場合「Eclipse」→「環境設定」を選択します。

ここで、「General」(一般)→「Editors」(エディタ)→「Text Editors」(テキスト・エディター)と進み、画面中央の

「Show line numbers」(行番号の表示)にチェックをいれます。その後、「OK」を押せば完了です。次ベージの図を参考にして下さい。



Java Compilerのバージョン設定

先ほどと同様に、設定ダイアログを表示し、「Java」→「Compiler」(コンパイラー)と進みます。

Compiler compilence level(下の図で赤線でかこった部分)が「1.6」以外の数字になっていた場合は、「1.6」にしておいて下さい。



ソースの折りたたみの設定

Eclipseのエディターは初期状態では、ソースコードを見やすくするために、書かれている内容を自動的に折り畳む機能があります。慣れれば便利な反面、非常に間違いやすくなる危険性があるため、この機能をオフにします。


先ほどと同様に、設定ダイアログを表示します。

その後、「Java」→「Editor」(エディター)→「Folding」(折りたたみ)と進み、画面一番下の「Imports」(インポート)についているチェクボックスを外します。



文字コードの設定

本講義ではソースのテキストコードとして「UTF-8」を使用します。

設定ダイアログを表示し、「General」→「Workspace」と進みます。画面中央左側にある「Text file encoding」の「Other」にチェックを入れ、その右側のドロップダウンボックスから「UTF-8」を選択します。



「UTF-8」がない場合は、「UTF-8」と自分で入力して下さい。変更が終わったら、「Apply」を押し、設定を反映させます。


以上で、Eclipseの設定は完了です。Androidアプリケーション開発の海に飛び込みましょう!

なにもしないアプリの作成

新規プロジェクトの作成

この章では最もシンプルな構成のアプリを作ることで、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の画面は、大きく上記の3つにわけられます。


まず、画面左側に表示されている赤い枠の部分は、『パッケージエクスプローラ』といってプロジェクトからファイルを選択する際に利用する画面です。今後開発を行う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アプリ開発に必要な環境構築と、アプリ開発の基礎を学習します。



Comments