コード、ドキュメントが含まれています。タイマーアプリ印刷を御希望の方はページ一番下の「印刷用ページ」より印刷してください。PDFファイルとして保存したい場合も「印刷用ページ」より保存できます。見出しに「★」マークがついた箇所は説明動画がございます。デザインを整える★講義のポイント【動画】講義のポイント※画面右下のアイコンをクリックすると全画面表示になります本講義では、「タイマーアプリ」の作成を通して、Androidアプリ開発に必要な環境構築と、アプリ開発の基礎を学習します。本講義で作成するタイマーアプリの画面トップに戻るはじめにRainbowApps「Androidマスターコース」へ、ようこそ!今日からあなたもAndroidアプリ開発者の仲間入りとなります。具体的なアプリ開発の解説に入る前に、このコースの全体的な説明と目標について説明します。このコースは全20回の講義を通して、プログラミングの基礎から、よく使われるAndroidアプリの機能を実装するスキルまでを一通りカバーし、初心者でもある程度のアプリ開発を行うスキルがつくよう、設計されています。各講それぞれ、1つ以上の独立したデモアプリを作成します。最初の5回はプログラミングの基礎を習得することに重点が置かれています。ご存知の方も多い方と思いますが、AndroidアプリはJavaという言語を使用して記述されています。JavaはAndroidアプリケーション開発においてだけでなく、WEBや業務システム等、様々な場所で幅広く利用されている言語です。最初の5回の大きな目標は、このJavaを学ぶとともに、アプリ開発に使うツールであるEclipseの使い方に慣れ、よく使われる基礎的なプログラミングテクニックを習得することとなります。SDK(Google社が提供するAndroidアプリの開発ツールキット)が提供するフレームワーク(アプリの基本機能を提供する基盤)の使い方を重点的に学びます。このフレームワークを有効に活用することによって、Androidスマートフォンの特徴とされる、高度なユーザーインタフェースを自分のアプリに簡単に取り入れることができます。Android端末が装備するカメラや様々なセンサーのデータに取得することもできます。オリジナルアプリを製作する際は、これらフレームワークを独自に組み合わせることによって、必要な機能を実装したり、今までにない新たな経験を生み出したりすることになります。後半15回では、これらの基本的な使い方を学び、その活用方法を学ぶことが大きな目標となります。プログラミングは、スポーツと共通している部分があります。野球やテニスなどのスポーツでは、練習量がスキル上達に直結するように、プログラミングでも「練習」することで、より早くスキルを上達させることができます。慣れるまでは、苦労することもあるかと思いますが、ここに書かれている内容を一度やって満足するのではなく、別々に解説されている機能や内容を組み合わせたり、自分流にアレンジしたりと、積極的に手を動かすことをおすすめします。このようにすることで、自分のアイデアをアプリ上で具現化する上で最も重要となる「応用力」を養うことができるでしょう。「わからないこと」や「解決できない問題」に遭遇した場合は、テキストの内容をおさらいすることも有効ですが、積極的に検索することも一層有効です。ウェブ上は世界中のアプリ開発者が集う空間でもあり、効果的なプログラミングテクニックから、それぞれが遭遇した問題やその解決方法まで、様々な情報がやり取りされています。これらをぜひ有効活用してみてください。それでは、早速、アプリ開発を始めていきましょう!本講義はMac、英語環境をベースに作成されています。Windows環境や日本語環境の場合と若干異なる部分があるかもしれませんが、その場合は各自調整しつつ進めてください。わからない場合は、アシスタントに質問をして下さい。トップに戻るスクール用のワークスペースフォルダ作成これからAndroidアプリを開発するプロジェクトファイルやフォルダを格納するためのワークスペースフォルダを作成してください。<推奨するフォルダの名前>androidworks※Androidアプリ開発のワークスペースだとわかるものを推奨いたします。次に、Eclipseの設定を行います。Workspaceの設定Workspaceは、eclipseでソースコードやその他ファイルを置くフォルダです。先ほど作った「androidworks」フォルダをWorkspaceとして設定します。Workspace」→「Other..」を選択して下さい。すると、以下のようなダイアログが出て来るので、先ほど作った「androidworks」のフォルダのパスを設定してください。以上でworkspaceの設定は完了です。以降はこのフォルダの中に作ったアプリのソースコードが追加されていくことになります。次に、エディターに行番号を表示する設定を行います。Windowsの場合「Window」→「Preferences...」(設定)を選択します。Macの場合「Eclipse」→「環境設定」を選択します。numbers」(行番号の表示)にチェックをいれます。その後、「OK」を押せば完了です。次ベージの図を参考にして下さい。先ほどと同様に、設定ダイアログを表示し、「Java」→「Compiler」(コンパイラー)と進みます。level(下の図で赤線でかこった部分)が「1.6」以外の数字になっていた場合は、「1.6」にしておいて下さい。トップに戻るソースの折りたたみの設定Eclipseのエディターは初期状態では、ソースコードを見やすくするために、書かれている内容を自動的に折り畳む機能があります。慣れれば便利な反面、非常に間違いやすくなる危険性があるため、この機能をオフにします。先ほどと同様に、設定ダイアログを表示します。その後、「Java」→「Editor」(エディター)→「Folding」(折りたたみ)と進み、画面一番下の「Imports」(インポート)についているチェクボックスを外します。本講義ではソースのテキストコードとして「UTF-8」を使用します。設定ダイアログを表示し、「General」→「Workspace」と進みます。encoding」の「Other」にチェックを入れ、その右側のドロップダウンボックスから「UTF-8」を選択します。「UTF-8」がない場合は、「UTF-8」と自分で入力して下さい。変更が終わったら、「Apply」を押し、設定を反映させます。以上で、Eclipseの設定は完了です。新規プロジェクトの作成この章では最もシンプルな構成のアプリを作ることで、Androidアプリ作成に必要な基本概念を学びます。Eclipseを起動してプロジェクトを作成します。ここでは「Timer」というプロジェクトを作成します。Project」を選択します。Project」と選択する場合もあります。どちらでも構いません。)すると、様々な情報を入力するダイアログがでてきます。各項目には以下のように入力するのですが、今回は初めてなので順を追って説明します。Nameに「Timer」と入力します。ついても、下記表に合わせて入力してください。>」ボタンをクリックしてください。>」をクリックしてください。>」ボタンをクリックしてください。Activityが選択されている事を確認してください。Activity画面でも特に変更しないで「Finish」ボタンをクリックしましょう。2.2以上を対象とします。2.2以上に対応しているためです。これでプロジェクトの作成が完了しました。トップに戻るエミュレータで起動するプロジェクトを作成したら、試しに起動してみましょう。Application」を選択します。すると、エミュレータが立ち上がります。ここからでももちろん実行可能です。画面中央部にある緑色の矢印ボタンをクリックすることでも、実行可能になっています。アプリケーションを起動する場合、以下のようなダイアログが表示される場合があります。Application」を選択します。エミュレータが起動すると、以下のような起動画面が立ち上がります。このまま待ちましょう。エミュレータが立ち上がると、下画面のような状態になります。この状態はスクリーンロックがかかっている状態なので、ロックボタンをドラッグしてロックを解除します。スクリーンロックの解除が済むと、以下のような画面が現れます。World!」と表示されていれば成功です。このように、Androidアプリケーションの開発を行う際には、エミュレータを利用して実際のアプリケーションの挙動をチェックしながら行うことになります。Androidのエミュレータの動作は非常に重く、しばしばイライラさせられるでしょう。カメラやBluetoothといったハードウェアを利用するアプリケーションの場合、エミュレータ上では正常に動作しない場合が多いです。トップに戻る実機で起動する実機を所持している場合、実機を利用して開発を行うことをお勧めします。今後の教科書も、基本的には実機が手元にあり、実機で開発を行うことを前提として設計されています。実機を利用して開発を行う際には、いくつか設定を行う必要があります。実機の設定を行います。4.2以降、初期状態では「開発向けオプション」が表示されていません。そのため以下の手順で「開発者向けオプション」を表示します。・「設定」→「この携帯電話について」(タブレットの場合は「タブレット情報」)→「ビルド番号」を7回タップ・設定画面に「開発者向けオプション」が表示されます。けオプション」→「USBデバッグ」「スリープモードを無効にする」「擬似ロケーションを許可」にチェック次に、実機とPCをUSBでつなぎます。Windowsを利用して開発を行なっている場合、ドライバのインストールを求められますので、ウィザードに従ってドライバのインストールを行いましょう。Mac環境では、ドライバのインストールは必要ありません。最後に、エミュレータの時と同じようにアプリを実行します。すると、初回のみ接続されている端末の一覧が出て来るので、端末を選択し、実行します。これで、先ほどエミュレータに表示されたのと同じ画面が端末上に表示されれば完了です。2系の端末をお持ちの方Android2系の端末をお持ちの方は下記操作にて実機インストールできる環境になります。・「設定」→「アプリケーション」→「提供元不明のアプリ」にチェック・「設定」→「アプリケーション」→「開発」で「USBデバッグ」「スリープモードにしない」「擬似ロケーションを許可」にチェックトップに戻る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には以下のような記述が行われていることがわかります。これらの記述は、プロジェクトの新規作成時に自動で記述されるものです。world!</string></resources>今後、コードの詳細を示す際には上記のフォーマットを利用します。黒枠の中には実際のコードが、黒枠の上部にはファイル名が表示されています。resourcesというタグとstringというタグがあるのがわかります。World!」という文言もみつかりました。name=”hello_world”>に対応しています。したがって、ここを変更することで画面上に表示されていたテキストを自由に変更することが出来ます。Android!!!としてみましょう。string.xmlを以下のように変更します。テキストで言及のない限り、変更箇所は黄色でハイライトされています。一部を削除する必要がある場合もありますし、すべてを新しく記述する必要がある場合もあります。コードの変更を行う際には、注意しながら変更を行いましょう。world!!!</string></resources>先ほどと同じ手順で実行を行います。以下のように表示されたでしょうか?トップに戻るタイマーアプリの作成Timerプロジェクトにタイマー機能を組み込み、機能の追加方法を学びます。今回は以下のような機能をもったタイマーを作成します。カウントを開始するカウントを停止するカウントをリセットする具体的な画面は、以下のようになります。実際に作ってみましょう。トップに戻る画面のレイアウトまずは、画面のレイアウトを構成しましょう。画面レイアウトは、activity_main.xmlというファイルに記述されています。パッケージエクスプローラから、activity_main.xmlをダブルクリックして開きましょう。(layoutフォルダを展開表示することを忘れないようにしましょう!)activity_main.xmlを開くと、以下のような画面が表示されます。今表示されている画面は、「グラフィカルレイアウト」といって左側に表示されている部品を右側にドラッグアンドドロップすることで、アプリケーションに配置することができる画面です。グラフィカルレイアウトは、直感的な操作が可能な反面細かい設定がやりづらく、なかなか思い通りのレイアウトになりません。本講座では、基本的にグラフィカルレイアウトは利用しません。そのかわり、直接xmlファイルにコードを記述します。グラフィカルレイアウトを利用する場合に比べ、Androidアプリケーション開発に必要となる本当の力を得る事ができるようになるでしょう。xmlファイルを編集するには、タブのactivity_main.xmlをクリックします。activity_main.xmlには以下のような記述がされています。/></RelativeLayout>ここに、ボタンやタイマーといった部品を配置するコードを記述していきます。詳しい説明は、次回以降の講義で行われるので今回はだまされたと思ってついてきてください。activity_main.xmlを以下のように変更します。先ほど、黄色の部分は追加する部分、といいましたが、グレーの部分は反対にコードから削除する部分です。/></LinearLayout>実行すると、以下の様な画面になれば成功です。このように、レイアウトの変更はxmlファイルによって行います。画面レイアウトを変更したので、具体的なアプリケーションの動作を記述しましょう。startボタンを押したらタイマーがスタートすべきですし、stopボタンを押したらタイマーは一時停止すべきです。このような、アプリケーションの動作はJavaファイルに記述されています。「画面のレイアウトはxmlファイル、実際の動作はjavaファイルに記述されている」と理解してもらえれば大丈夫です。以下のように、srcフォルダを展開表示し、MainActivity.javaをダブルクリックして選択します。MainActivity.javaが今回のアプリケーションの動作を記述するファイルです。以下のような記述がされています。true;}}詳しい説明は今回はしませんが、ひとつだけ。先ほどmain.xmlを編集して画面のレイアウトを変更しましたが、これは以下の1行でレイアウトとしてmain.xmlを指定しているからです。setContentView(R.layout.activity_main);クラスのインポートまず、最初にクラスのインポートを行います。クラスのインポートとは今回のアプリで利用するオブジェクト(ボタンやラベル要素の部品)を操作するための設計書を今回開発するTimerActivity.javaに取り込むということです。このクラスのインポートをすることによりアプリを構成している部品に様々な命令を記述する事ができるようになります。次に、変数の宣言(次回以降に詳しく説明するので、わからなければ気にしないでください!)を行います。先程までと同様に、黄色の部分を追記します。次に画面起動時の処理を記述していきます。「onCreate」と書いてある箇所の「setContentView(R.layout.activity_main);」の次の行から以下の黄色の背景の部分をコピー&ペーストしてください。続いて、ボタンが押された時の処理を記述します。下記の黄色網掛け部分を入れていきましょう。{//リセット}});}これにより、ボタンがクリックされるとonClick()の中に書かれた処理が実行されることになります。最後に、タイマーの処理を追加します。以下の黄色背景の部分を「スタート」「ストップ」「リセット」の各項目の下にコピー&ペーストして下さい。スタートボタンが押された時の処理を記述します。mTime);mChronometer.start();}});本講義では、このようにコードの一部だけを抜き出して記載することが多いです。どこにどのコードを入力するのか、間違えないようにしましょう。どこに入力するべきかわかるようにコードの前後も記載してあります。次に、ストップボタンが押された時の処理を記述します。mChronometer.getBase();}});最後に、リセットボタンが押された時の処理を記述します。0;}});では、実行してみましょう。動いたでしょうか?トップに戻るデザインを整える最後に、デザインを整えましょう。activity_main.xmlを以下のように変更します。/>実行してみましょう。以下のようなレイアウトになったでしょうか?これで、タイマーアプリの作成は終了です。具体的にどのコードがなにをしていたのか、理解できないところが多かったと思いますが、今回はアプリケーション作成の流れを知ってもらい、自分の作ったアプリケーションが動く楽しさ味わっていただくためにあえて詳しい説明を省いています。以降の講義できちんと説明しますので、安心してください。世界に挑戦する、Androidアプリケーション開発の旅に出かけましょう。本講義では、「タイマーアプリ」の作成を通して、Androidアプリ開発に必要な環境構築と、アプリ開発の基礎を学習します。