2764

チュートリアルスマートフォンと呼ばれる携帯型端末の普及は目覚しいものがあり、アプリと呼ばれるスマートフォン向けアプリケーションも、日々膨大な数が世界中でリリースされています。今回は、代表的な2つのスマートフォン用OS上でのソフトウェア開発に関するチュートリアル（全4回シリーズ）の第3回目として、東洋大学の塩谷隆二先生、中林靖先生とサイバネットシステム（株）の宮地英生様に解説していただきます。なお、チュートリアル記事は1ページ目のみを本誌に掲載し、続きは日本計算工学会HP上で公開していますので、そちらも併せてご参照ください。

スマートフォンアプリ開発入門- iOS vs. Android（3）1

はじめに前々号のチュートリアルで「スマートフォンアプリ開発入門」第1回目として、iOS と Android それぞれの開発環境構築手法について解説し、前号では第2回目として、開発環境の動作確認も兼ね、iOS と Android それぞれについて基礎的なアプリを開発する手順について解説した。これらのチュートリアル記事を参考に、開発環境構築を実際に試みた読者もいると思われるが、解説通りの手順を行ったにもかかわらず、何かしらのエラーに遭遇し、アプリ開発まで到達しなかったとの声が寄せられた。この原因の多くは、使用している環境やソフトウェアのバージョンの違いと思われる。参考までにこれまでの記事で使用したものと、本稿執筆時点
筆者紹介
しおや りゅうじ
1996年東京大学大学院工学系研究科博士課程修了、東京大学助手、九州大学准教授を経て、現在、東洋大学総合情報学部教授。超並列計算機による数値解析、大規模 CAE ソフト「ADVENTURE」システ
ム開発などの研究に従事。
なかばやし やすし
1999年東京大学大学院工学系研究科博士課程修了、東京大学リサーチ・アソシエイト、東洋大学工学部講師を経て、現在、東洋大学総合情報学部准教授。数値流体力学、逆問題・最適化、モバイル・ユビキタスコンピューティングなどの研究に従事。
みやち ひでお2006年東京大学大学院工学系研究科博士課程修了。
1987年㈱クボタ入社後、コンピュータ関係の子会

塩谷 隆二
中林 靖
宮地 英生

での最新のソフトウェアバージョンは次の通りである。
iOS 関係：Mac OS X: v10.6、iOS: 4.2.1、Xcode: 3.2.5
最新版：Mac OS X: v10.8、iOS 5.1、Xcode: 4.3.1
Android 関係：Eclipse: 3.6、Android SDK: 13
最新版：Eclipse: 3.7.2、Android SDK: 16
半年の間にもこれだけのバージョンアップが行われているため、全く同じ環境での実施は通常は困難となることから、どのような環境でも開発を実現できる手順を示すことが重要となる。
そこで今回は掲載内容を予定から変更し、本チュートリアルを参考にアプリ開発を実際に試し、いくつものエラーに遭遇し、どのようにそれらのエラーを克服したかの体験談を、読者代表として編集委員に執筆を依頼した。1つのエラー克服方法を知ることにより、異なる環境において異なるエラーに遭遇した場合にも、開発環境構築までたどり着けるヒントとなれば幸いである。
また、第2回目の冒頭で少し触れたように、スマートフォンアプリを開発する方法には、このチュートリア
ルで解説しているような JAVA 言語や Objective-C 言語によるプログラミングを行う方法以外にもいくつかのアプローチがある。その中で、Android アプリを開発する Web ベースのサービスである「App Inventor」は、利用者も多く極めて洗練された開発環境であり、初めてAndroid アプリを開発するユーザに適している。そこで、今回のチュートリアルの後半部分では、この AppInventor を使って Android アプリを開発するための具体的手順について解説する。
続きは Web で
日本計算工学会誌「計算工学（Vol.17, No.2）」HP:
http://www.jsces.org/Issue/Journal/社へ出向。可視化ソフトウェアの開発と販売に従事。20010年サイバネットシステム㈱入社、ビジュアリゼーション部長（現職）。

（36）

計算工学

チュートリアル

スマートフォンアプリ開発入門 - iOS vs. Android (3)２Android アプリケーション開発
スマートフォンアプリ開発入門(1)、(2)を、編集委員の立場で見ているうちに、ふと自分でもコーディングをしてみたくなった。これが Android 地獄の始まりであった。実際は苦闘の末に得た教訓だが、読者のために、まず結論から述べ、その後、そこへ至る過程を記載する。
(1) 結論
教訓 1：一度はスマートフォンを触ってからスタート
教訓 2：まずは真似から。勝手に違うバージョンをインストールしない。守破離の原則を守るべし。
教訓 3：とは言え、一度はチュートリアルを最後まで読み、全体を俯瞰してから作業のこと。目的を持って学習しないと身に付かないし、変化に対応できない。
教訓 4：エラーは無視せず、メッセージを読むべし。
登山で「迷ったら必ず引き返せ」の法則を守るべし。と、振り返ってみれば、常識のような話であった。
しかし、会社では過半数で発生するだろう問題も判った。それはセキュリティのために配置されているプロキシサーバの存在である。開発環境の設定で、最初にダウンロードしてインストールするのはセットアップ用の最低限のパッケージであり、その後、必要なライブラリをネットワーク経由でダウンロードするため、プロキシサーバの設定が無いと必ずエラーになる。しかも、中途半端（個人的見解だが）な状態になり、手動で回復を試みても深みに陥る一方であった。完全に構造を理解しないまま、付け刃的な手当てが最悪であることを再認識したのであった。

これが画面ロックの状態であることに気づかなかった(教訓 1)。「これ、何だろうね」という質問に、私の部下は首をかしげながら、鍵アイコンにマウスを移動し、横にドラッグすることで、何事も無かったようにロックを外した。
チュートリアルの推奨は Android2.2。数字が大きいほど最新で良いかとの勝手な判断(教訓 2)が愚かだったのだ。因みに Android4.0 の起動画面は、チュートリアルと同じ。なぜ、3.2 だけ全く違うのだろう？
(3) 全体を俯瞰せよ
チュートリアル(1)に必要なツールが網羅されている。
・ Java Development Kit(Oracle 社)
プログラミング言語・Eclipse開発環境。Visual C を使っている人は同様の環境と考え、UNIX 派の人は Makefile と思えば良い。
・ Android SDK(Google 社)
Android アプリを開発するためのツール（＝ライブラリと思っておくと良い）。
・ Android Development Tool(Google 社）
Eclipse から AndroidSDK を使うためのツール。
Android 用のアプリ開発のためのライブラリ。
・ ADV(Android Virtual Device)
Android のエミュレータ。
図 2 は、これらを自己流に解釈したものである。
ネットワークへ
スタートメニューから起動可能ＡＶＤ
マネージャ

AndroidSDK
マネージャ

ネットワークへ
アンドロイドエミュレータネットワークへ(2) スマートフォンの操作を知らないと…
スマートフォンを操作したこともなく、このチュートリアルに挑む人は稀と思うが、一度スマートフォンを操作してみることを推奨する。図 1 は Android3.2 のエミュレータが起動した場面である。

Eclipse(開発環境）

ユーザのプログラム

Android Development
Tooｌs(ADT)JDK(言語）

Android VirtualDevice

AndroidSDK
コンパイル＆リンク

起動されたＪａｖａアプリ
はADVと通信する

Apk(Javaのバイトコードを含むパッケージ。
Zipでアーカイブされている）

図 2 各種ツールの役割と関係（自己流解釈）

図 1 Android3.2 のエミュレータ起動画面
実際のスマートフォンの画面を見たことが無い私は、計算工学

最終的にユーザに見えるアプリケーションは、①Eclipse、②Android SDK マネージャー、③ADV マネージャー、④Android エミュレータの４つである。チュートリアル(1)では、「Android SDK および AVD マネージャー」と②と③が一緒になった記述になっているが、最新のバージョンでは、この 2 つは分離している。これらは Eclipse の「ウィンドウ」メニュー以外に、スタートメニューからも起動できる。
また、エラーメッセージの理解にも関連性の理解は(36-2)

Vol.17, No.2 2012

チュートリアル

スマートフォンアプリ開発入門 - iOS vs. Android (3)重要だ。この図からエミュレータ上で動作するアプリ
ケーションは、エミュレータのバージョンとリンクされる Android SDK のライブラリのバージョンが一致しなければならないことが自然に理解できる。それにより、Android のバージョンに関するエラーにも関らず、メッセージを適当に見て(教訓 4)、JDK や Eclipse の再インストールをするような愚行も防げるはずである。
私は、チュートリアル(1)の「日本語版 Eclipse 推奨」
を無視し、いや、全体を読む前に、上から順番に作業した結果(教訓 2)、先に記述のある英語版をインストールしてしまった。続く作業のエラー時に、「それが原因か！」と再インストールし、また、戻して、と苦労したが、今思えば、全く無駄だったことが明白である。
一見、無意味に思える各ツールの開発会社名も重要だ。Android SDK や ADT が Google 社提供という記述を軽視していた私は、図 3 のエラーメッセージを「今から作るサンプルは、GPS を使わないし、Google の何かがインストールされなくても問題ないだろう」と、勝手に「Google=グーグルマップ＝GPS=私には無関係」と解釈したのであった。ちゃんと読めば、Android SDKのインストールに失敗していることが解る(教訓 3&4）。

左のエリアはツリー構造になっている。一般の横の十字をクリックすると、その中の階層が見える。①ネッ
トワーク接続を選択し、②上のプルダウンメニュから「手作業(Manual)」を選択。HTTP や HTTPS にチェックが入るので、HTTP の部分をダブルクリックし、プロキシサーバの IP アドレスとポート番号を入力する。
ここで HTTP を選択するのは、チュートリアル(1)の7(3)節で ADT を http://dl-ssl.google.com/android/eclipseからダウンロードするためである。プロキシサーバのIP アドレスとポート番号は、それぞれの組織で決めるものなので、ここで示すことはできない。情報システ
ム部門など、しかるべき人に聞くしかない。
・Android SDK/AVD マネージャー
Android SDK マネージャーおよび、AVD マネージャ
ーでは、「Tools」メニュー の「Option」を選択して表示されるダイアログ(図 5)で、プロキシサーバの IP アドレスとポート番号を設定する。

図 5 Android SDK/AVD マネージャーでの設定画面
図 3 Android SDK のエラーメッセージ例(4) プロキシサーバの設定
プロキシサーバの設定は、ネットワーク経由で環境管理をしている Eclipse、Android SDK マネージャー、AVD マネージャーの 3 箇所にある(図 2)。
・Eclipse
Eclipse の「ウィンドウ」のメニューの「設定」を選択すると新しいウィンドウが登場する(図 4)。
②(5) 通信の失敗に関るエラー状況
・ADT 設定時のエラー
チュートリアル(1)の設定手順で作業を行うと、JDKおよび Eclipse のインストールまでは問題なく終わる。
しかし、プロキシの設定が無いと ADT の設定で困る。
図 6 に設定画面を示す。

③
ダブルクリック①
成功するとこの部分が「開発ツール」になる

図 6 ADT 設定時のエラー例④

図 4 プロキシサーバの設定画面
計算工学

これは Eclipse のメニュー「ヘルプ」の「新規ソフトウェアのインストール」で「追加」ボタンをクリックし、Google のサイトを追加する場面のエラーである。正常(36-3)

Vol.17, No.2 2012

チュートリアル

スマートフォンアプリ開発入門 - iOS vs. Android (3)な状態では、図中の左側の囲み部分「保留中」が「開発ツール」に変わる。これにチェックを入れ…、と続くのだが、「保留中」にチェックを入れても先へは進めない。やっかいなのはエラーメッセージが出ないことだ。
「あぁ、直接タイプインするのではなく、横の「追加」ボタンから入れるのか」と思って、「追加」ボタンを押して、そこに URL を入れると「ロケーションが重複しています」のエラーになる。
さらに、ここはネットワーク事情によって時間を要す る 可 能 性 が あ る 。 チ ュ ー ト リ ア ル (1) に 従 っ て 、「Eclipse を再起動しなさい」という指示が出るまで根気よく待つことも肝要だ。途中で×印をクリックすると、中途半端にインストールされた上、先に示すように同じ URL を入れても「重複」として受け付けられなくなるからだ。
・Android SDK のエラー
Android SDK マネージャーはウィンドウズのスター
トメニューから起動できる。このとき、ネットワーク接続が発生する。失敗すると起動までに異常に時間がかかる。図 7 を見ると、ダイアログの下側には提示された URL からロード中というメッセージも出るし、エラーダイアログは、明確に URL へのコネクションの失敗を告げている(教訓 4：エラーメッセージは読む)。

「Android」が無い！

図 8 メニューにあるべきものが無い例
者が部分的に真似をしてもエラーの深みに陥るだけと実感した。
(6) Hello Android の実行
冒頭に戻り、エミュレータ上での Hello Android(チュートリアル 内で作成 するサ ンプルアプ リケーシ ョン)の実行である。アイコンをクリック（タップ）するとサンプルアプリケーションが動作し、エミュレータの表示画面に Hello Android の文字がでる。図 9 のようになれば成功である。

②エミュレータの表示領域に”Hello Android”の文字が表示される
Hello Androidのアイコン①これをクリック（タップ）すると

図 9 Hello Android の最終実行イメージ
最後に、このエミュレータの起動には恐ろしく時間がかかる場合がある。エミュレータ内が真っ黒で、「また、ダメかぁ」と思って昼食休憩の後、座席に戻ると表示されていたこともある。

図 7 Android SDK の通信エラー例
このような状態(正確にはどんな状態か不明)では、チュートリアル(1)の 8 の(1) Android SDK のロケーシ
ョンの設定の『Eclipse を起動してメニューから「ウィンドウ」「設定」「Android」を順に選択し』、とあるが「Android」が現れない。(図 8)
その他にも 10 種類以上のエラーを見てきたが、残念なことに、一旦、インストールが成功するとエラーの再現ができなくなってしまった。危険なことに、そのエラーメッセージを全文コピー＆ペーストでGoogle などの 検索エンジ ン にかけると、高い 確率で「対処策」が出てくる。しかし、私の場合、根本のプロキシ設定が完了するまで、成功に到達することは無かった。カスタム対応は、高いハードルであり、初心
計算工学(7) スマートフォン上での実行
チュートリアルではスマートフォンを USB ケーブルで接続して実機上で動作させる例が出ているが、自分のスマートフォンを持っていない人は、持っている人にコンパイルされた apk ファイルを渡して動作だけを試してもらうことができる。apk ファイルは Eclipseを起動したときに設定したワークスペースのフォルダ内、プロジェクト名(HelloAndroid など)フォルダ内のbin というフォルダ内に保存されている(図 10)。

(36-4)

Vol.17, No.2 2012

チュートリアル

スマートフォンアプリ開発入門 - iOS vs. Android (3)Eclipseで設定したワークスペース

HelloAndroid
プロジェクトbinapk ファイル

図 10 apk ファイル
３

App Invertor
ここからは、Android アプリを開発するためのもう一つのアプローチである、「App Inventor」について解説する。前章で詳細に述べられているように、Androidアプリを Eclipse や Android SDK を用いて開発する際には、細かなバージョンの違いなどで苦戦することが多いが、App Inventor を使ったアプリ開発は極めてシンプルで入門者に適している。

(1) App Inventor の概要
App Inventor は Google が 2010 年 6 月に発表し、同年 12 月にβ版のサービス提供が開始された Android ア
プリを開発するための Web ベースのツールである。
Android アプリは原則として JAVA 言語で開発するが、App Inventor では画面のレイアウトや各メソッドの定義などを全て Web 上で視覚的に行う点が大きな特徴である。MIT の Hal Abelson らによって開発されたこのサービスは、2011 年 12 月末の Google Lab 廃止に伴い一時的に利用できなくなったが、MIT の Center forMobile Learning[1]が引き継いで 2012 年 3 月からβ版が以下の URL で公開されている。
http://www.appinventor.mit.edu/
なお Google Lab の廃止から MIT でサービスが開始されるまでの数ヶ月間は、日本 App Inventor ユーザー会[2]によってサーバが立ち上げられていた。
(2) App Inventor の導入
上記のサイトにアクセスし、「Use MIT App Inventor」
ボタンを押すと、まず、Google アカウントによるログインを要求される。MIT に移行後もアカウントの管理は Google アカウントで行うようである。
次に、その PC で初めて App Inventor を使う際には、使用している OS の種類を選択して必要なソフトウェ
ア を イ ン ス ト ー ル す る 必 要 が あ る 。 Window, MAC,Linux を選択することが出来る。App Inventor 上で開発したアプリは、原則として MIT のサーバ上に保存されているため、職場や自宅などどこからアクセスしてもアプリ開発の続きを行う事が可能であるが、上記のソフトウェアは使用する PC 毎に最初の一回は必ずインストールする必要がある。また、App Inventor を利用するためには JAVA の環境が必要である。JAVA が未導入の場合には、App Inventor のインストーラの指示に従ってインストールする。
計算工学(3) アプリ開発の手順
まず、もっとも簡単なアプリとして、本チュートリ
アルの第 2 回の図 2 のプログラム「TestCircle」と同じものを App Inventor を使って作成してみる。
App Inventor を立ち上げて、新規プロジェクトの作成を行ったら、図 11 の通り画面のデザインを決めるための画面となる。画像が小さすぎて文字が判別不能であるが、中央に Android 端末の画面、左側に canvas やbutton などの画面に追加するオブジェクトのリストがあり、ここから必要なものを選択して画面上に配置する。その際に、画面右側の Components や Properties 欄で必要な属性値を指定する。図 11 は全体のイメージ図なので、詳細は実際に起動して確認して欲しい。

図 11 Design Editor
TestCircle と同じものを作成するためには、以下の手順で操作する。
1) 左側の Palette の Basic リストから canvas をマウスでドラッグし、中央左の Viewer の Screen1 の上に置く。
2) 中央右の Components の中から Canvas1 を選択し、右側の Properties の Width を Automatic から 300pixels、Height を 400 pixels に設定する。
なお、図 11 は上記の手順 2)まで終えた段階の画面である。実際に試してみて比べてみて欲しい。
3) 画面右上の方にある Open the Blocks Editor ボタンを押して、Blocks Editor を起動する。
ブラウザの設定によっては、拡張子が jnlp であるファ イ ル が ダ ウ ン ロ ー ド さ れ る の で 、 Java Web StartLauncher(javaws)により開き、Blocks Editor を起動する必要がある。
Design Editor が画面上のオブジェクトの配置を決めるのに対して、Blocks Editor は各オブジェクトにメソッドを定義するために用いる。図 12 は Blocks Editorの例であり、左側のリストから必要なブロックを選択し、中央の画面上でブロックを組み合わせてメソッドを定義する。ブロックの色や形で機能が分けられており、整合性のないブロックは繋がらないため、しばら
くいろいろと試してみれば、マニュアル等を読まなく(36-5)

Vol.17, No.2 2012

チュートリアル

スマートフォンアプリ開発入門 - iOS vs. Android (3)ても何となく使い方が分かるように設計されている。
4) 図 12 の通り、9 つのブロックを組み合わせる。
まず、My Blocks の中から Screen1.Initialize ブロッ ク を 選 択 し 、 同 じ く My Blocks の 中 に あ る
Cavas1 の BackgroudColor と PaintColor の set/to が左右に明記されているブロックと，DrawCircle の3 つのブロックを繋ぎ合わせる。最後に、Built-Inの中から、Colors と Math の中の number を選択し、canvas1 のブロックに繋げる。

以上の手順で、TestCircle と同じようにエミュレータ上に日の丸の絵が表示される（図 13）。なお、図 1 と同様にロック画面の場合はボタンのスライドにより解除する必要がある。また、Eclipse で Android アプリを開発する時と同様に、Android の端末が USB ケーブルで繋がっていれば、Connect to Device で実機を選択することも出来る。
(4) アプリの例① － TestTouch
ここでは、App Inventor で開発したアプリの例をいくつか紹介する。実例を見て理解を深めて欲しい。まずは、TestCircle と同様に前号のチュートリアル記事で紹介した TestTouch を App Inventor で作成するとどうなるか紹介する。
Design Editor で実施することは、TestCircle と同じで、Screen1 の中に Canvas1 を作成して Width を 300pixels,Height を 400pixels にするだけである。
Block Editor で行うことは図 14 の通りである。

図 12 Blocks Editor
なお、number ブロックは初期値では値が 123 となっているが、マウスでクリックすると値を変えることが出来る。color もクリックすることで色を変えることが出来るが、もともと color リストに一通りの色が用意されている。
このブロックの組み合わせの意味は、Screen1 が初期化される時に、Screen1 の中の Canvas1 に対して、背景色の設定、描画色の設定、円の描画という 3 つの動作を行うということである。
5) 画面中央上の New emulator ボタンを押して、エミュレータを起動する。
6) エ ミ ュ レ ー タ が起 動 す ると、 右 隣 の Connect toDevice ボタンを押し、エミュレータ名(emulator5554 など)が表示されるので選択すると、右隣のアイコンが点滅し、プログラムが転送される。

図 14 TestTouch

図 13 Emulator

図 14 の各ブロックの動作について説明する。まず、
Screen1.Initialize では、Screen1 が初期化される際に、Canvas1 の描画色を青に設定している。次に、もう一つの緑色の ブロック (イ ベン ト発生の際 に呼び出 されるメソッド)である Canvas1.Touched では、Canvas1 に指が触れた（エミュレータではマウスクリックした）際に、その位置座標 x, y を取得して x, y を中心とした
半径 20 pixels の円を描画する指示である。
この例のように、App Inventor では Design Editor で付加した canvas や button などのコンポーネントに対して、自動的に Blocks Editor 上の My Blocks に緑色のブロックがリストアップされる。また、それらの緑色のブロックの中に様々なメソッドを組み合わせていくことによって Design Editor で配置したオブジェクトにメソッドを割りつけていく。

計算工学(36-6)

Vol.17, No.2 2012

チュートリアル

スマートフォンアプリ開発入門 - iOS vs. Android (3)(5) アプリの例② － Touch the Numbers
最後に少しだけ実用的なアプリの例を紹介する。
Touch the Numbers という iOS や Android 用のアプリで非常に有名なアプリがある。5×5 のマスに 1～25 の数字が書かれており、これを単純に 1 から順に押して行き、全て押すまでの時間を競うゲームアプリである。
2010 年の無料アプリゲームダウンロード数第 1 位で、累計 1,000 万ダウンロードを超えるアプリである。
このアプリを真似したものを App Inventor で作ることを考える。まず、Design Editor で 2×2 の配置になるように Button1～4 を作成する。また、start button も作成し好きなようにレイアウトする。
次に、図 15 のように 5 つのボタンに対して様々なメソッドを定義する。前の 2 つに比べると複雑に見えるが、慣れれば 30 分程度で考えて作ることが出来る。
このアプリが本物の Touch the Numbers と違うところは、5×5 ではなく 2×2 であること、数字の並びが乱数ではなく list 変数で固定されていること、時間を計測していないこと、以上の 3 か所だけである。その 3か所を修正することもそれほど難しくなく、すなわち、
App Inventor を使えば、大ヒットアプリですら簡単に作れることを意味する。

４

おわりに
今回のチュートリアル記事では、前半でAndroidアプリ開発を実際に行ってみた際に生じた様々な問題を体験談としてまとめ、後半では、これまでのアプローチとは全く異なり、JAVAによるプログラミングを行わず に Webベ ー ス で 視 覚 的 に Androidア プ リ を 開 発 す るためのサービスApp Inventorを紹介した。
どちらの記事も、これからAndroidアプリ開発を始める際には役に立つ情報が含まれていることと思う。特にApp Inventorについては前号のJAVA言語によるものと比較することにより、App Inventorの有用性が実感できるのではないかと思われる。
次号は本チュートリアルの最終回であるため、より実践的なアプリの紹介や、スマートフォンアプリと計算工学との関連、この分野の将来展望などについて解説する予定である。
参考文献[1] MIT App Inventor: http://www.appinventor.mit.edu/[2] 日本 App Inventor ユーザー会:
http://www.app-inventor.jp/

図 15 Touch the Numbers

計算工学(36-7)

Vol.17, No.2 2012