Arduino ADK R3の開発環境をWindows7上に構築する

まずはAmazonで購入。


Arduino ADK Rev3


Arduinoエントリーキット(ボード別売)

到着したら早速セットアップ開始!
http://www.arduino.cc/en/Main/softwareより、Windows版をダウンロード。arduino-1.0.3-windows.zipがダウンロードされました。これを任意の場所に展開します。今回は、
C:\Program Files (x86)\arduino-1.0.3
にインストールしました。
次に、ADK用のライブラリを取得して追加します。
Android ADK勉強会(東京)が作成したYaoadkライブラリをダウンロードして、先ほどインストールしたarduinoのフォルダに入れます。
https://github.com/ADKstudyGroupTokyo/Yaoadk/から、ZIPファイルを取得して展開すると、
Adb
AndroidAccessory
USB_Host_Shield
の3つのフォルダが出てきますので、これらのフォルダを
C:\Program Files (x86)\arduino-1.0.3\libraries
の中にコピーします。
ではArduino Mega ADKとPCをつないでみます。
DSCN0035
Arduinoを繋ぐと、ドライバーが見つかりません。と表示されてしまいます。
ドライバーが見つかりません。
スタート>コンピュータ右クリック>プロパティ>デバイスマネージャ
を開き、Arduino Mega ADKをダブルクリック。
2013-01-18_0604
ドライバーの更新を押します。
2013-01-18_0606_001
コンピュータを参照してドライバーソフトウェアを検索します。を選択。
「次の場所でドライーバソフトウェアを検索します:」の「参照」ボタンをクリックして、以下のパスを選択
C:\Program Files (x86)\arduino-1.0.3\drivers\
「次へ」をクリックします。
arduino-driver-update
このドライバーソフトウェアをインストールしますをクリック。
2013-01-18_0618
インストールが完了しました。タイトル部分に、どのCOMポートか表示されていますのでこれを控えておきます(赤で囲った部分)。もし忘れても、デバイスマネージャを起動して「ポート(COMとLPT)」を見れば確認できます。
2013-01-18_0620
これで、セットアップは完了です。
では動作テストをしてみます。
あとは、「オープンソース」を使ってみよう (第18回 ADK編) 日本Androidの会神戸支部の手順通り、サンプルを動作させてみます。

勢いでArduinoADKを購入〜初期設定から動作確認まで〜

買ってしまいました。まさかこちらの世界に足を踏み入れることになるとは。AndroidADKで動くArduino ADK R3
です。
最初どれを買えばわからず戸惑いました。
結論、Arduino ADKならばUSBホストの機能も付いているのでこれ1枚で大丈夫!
ちなみに、他のArduinoならばADK/ADB に必要な USBホストの機能がついていません。そのため、ホスト機能を追加するシールド(拡張ボード)が必要です。どのUSBホストシールドを買えばよいか悩んでしまいそうです。また、USBホストシールドによっては、ピンソケットのハンダ付けが必要なんだそうです。面倒くさいですね。

Arduinoの動作テスト

届いたArduino AKDを早速動作テストしてみましょう。
http://www.arduino.cc/en/Main/software
より、Arduino 1.0.3をダウンロード。今日はMacなのでMacOS Xと書かれた方をダウンロードしました。
arduino-1.0.3-macosx.zip
を解凍して出てきたArduinoアプリを、アプリケーションフォルダに放り込みます。
ArduioとMacをUSBケーブルで繋ぎます。Arduinoの緑の電源LEDと、なんかオレンジのLEDも光っています。
Arduinoアプリを起動します。
ファイル>スケッチの例>1.Basics>Blink
を開きます。
[C]
/*
Blink
Turns on an LED on for one second, then off for one second, repeatedly.
This example code is in the public domain.
*/
// Pin 13 has an LED connected on most Arduino boards.
// give it a name:
int led = 13;
// the setup routine runs once when you press reset:
void setup() {
// initialize the digital pin as an output.
pinMode(led, OUTPUT);
}
// the loop routine runs over and over again forever:
void loop() {
digitalWrite(led, HIGH); // turn the LED on (HIGH is the voltage level)
delay(1000); // wait for a second
digitalWrite(led, LOW); // turn the LED off by making the voltage LOW
delay(1000); // wait for a second
}
[/C]
こんなコードらしきものが表示されました。なんでしょうねこれ。まあいい、先に進みます。
ツール>マイコンボード>Arduino Mega 2560 or Mega ADK
を選択します。

ツール>シリアルポート>/dev/tty.usbmodemfd141
を選択します。tty.usbmodemfd141のところは環境によって変わるようです。

丸い右向きの矢印のボタン「マイコンボードに書き込む」をクリックします。
「マイコンボードへの書き込みが完了しました。」と表示されればOKです。
そおうすると、Pin13のLと書かれたLEDがオレンジの点灯だったのが、点滅になっていると思います。
なるほど、さっきのコードは、このLEDを点滅させるためのコードだったんだな。それをArduinoに書き込んだということですね。

ここまでで、Arduino ADKの動作確認は終了です。

ADK開発環境を整える

次に環境構築。ADKパッケージです。
Arduino の本などには、

https://dl-ssl.google.com/android/adk/adk_release_20120606.zip
をダウンロード、展開します。展開してできたADK_release_20120606フォルダを任意の場所に置きます。

なんて書いてあることが多いと思いますが、実はこのGoogleのADKサンプルソース「Demokit」はArduinoのバージョンアップに対応しておらず、そのままではGoogleのADKのサンプルはArduino 1.0では動かないのだそう。早く言ってよ。
「オープンソース」を使ってみよう (第18回 ADK編) 日本Androidの会神戸支部

「オープンソース」を使ってみよう (第18回 ADK編) 日本Androidの会神戸支部


の記事の通り、セットアップを行いましょう。記事はWindows7を対象としていますので、Mac版の場合を以下に記載していきます。
「Android ADK勉強会(東京)が作成したYaoadkライブラリ」
https://github.com/ADKstudyGroupTokyo/Yaoadk/
を使わせて頂きます。
ZIPボタンをクリックしてzipファイルをダウンロードして下さい。
ダウンロードしたYaoadk-master.zipを展開すると
Adb
AndroidAccessory
USB_Host_Shield
の3つのディレクトリがあります。これらをディレクトリごと、Arduinoアプリの中に入れます。
場所は、/Applications/Arduino.app/Contents/Resources/Java/librariesディレクトリ内です。
Finderからアプリケーション内のArduinoアプリを右クリックして「パッケージの内容を表示」することで上記フォルダにアクセスできます。

サンプルソース「GettingStartedADK」をダウンロードします。

より、ZIPのボタンをクリックしてダウンロードします。
ダウンロードしたファイルを展開し
firm_Arduino0100/AdkDaio/AdkDaio.ino
をダブルクリックします。Arduinoアプリが起動すると思います。

それでは、
micro-USBポート「四角い方のポート」を使ってADKとつなぎます。
ツール>マイコンボード>Arduino Mega 2560 or Mega ADK
を選択します。
ツール>シリアルポート>/dev/tty.usbmodemfd141
を選択します。
[Command]+Rを押してコンパイルします。
コンパイル終了。よっしゃ、ではボードに書き込みましょう。
ファイル>マイコンボードに書き込む
を選択するか[Command]+U
で書き込みます。書込み中はLとTXとRXが点滅します。
よし、これでArduinoの準備は完璧。ではデモアプリを動かしてみましょう。

Android側のアプリケーションを準備する

Eclipseを起動します。
ファイル>新規作成>その他>Create project from existing source を選択
ルート/ディレクトリに
GettingStartedADKをダウンロードしたディレクトリの中にある「AdkDaioProj」フォルダを指定します。
を指定。
プロジェクトをワークスペースにコピーにチェック入れる。
完了。
これでAndroidのサンプルアプリが取り込めました。多分このままだとエラーが有るはずです。そこでjarファイルを追加します。
Javaのビルドパス>ライブラリで、
外部Jar追加
/add-ons/addon-google_apis-google-10/libs/usb.jar
を選択して開く。
あとエラーになってるところをちょこちょこなおして動くようにしたら、ビルドして、Nexus7へインストール!
よっしゃ。これでAndroid側の準備はOKと。
では次に、電子部品を繋げていきます。

ここちらの記事のとおりに、電子部品をつなげていきます。
電子部品はamazonで入手しました。Arduinoエントリーキット(ボード別売)
に、必要な部品は全部入っていました。
そして、Androidと接続!すると、
「このUSBアクセサリが接続された時にAdkDaioProjを開きますか?」と聞かれます。

OKを押すと、アプリが起動!

アプリケーションで基板上の4つの部品の状態を取得したり、操作することが出来るみたい!
おお動いた!なにかよくわからないけど、とにかく動いたよ!!
今回使用したのはこちらです。


Arduino ADK Rev3


Arduinoエントリーキット(ボード別売)

HTML5 Builder トライアル<クライアントモバイルアプリケーション>

最後にクライアントモバイルアプリケーションを試してみましょう。
ホームの新規作成で、HTML5 Builderプロジェクトを選択し、右上の領域にある「クライアントモバイルアプリケーション」をダブルクリック。
コントロールを追加します。MEdit MLabel MButtonを追加していきます。

左下の「オブジェクトインスペクタ」を使って、MButton1のキャプションを、Say Hello に変更します。
また、ボタンクリック時に更新が走らないようにMButton1のButtonTypeをbtNormalに変更しておきます。
ボタンがクリックされたときの処理を実装していきます。MButton1をダブルクリックするとコードが生成されます。
[JavaScript]
// This is where you can place your Javascript code
function MButton1Click(event) {
}
[/JavaScript]
[javascript]
function MButton1Click(event) {
$('#MLabel1').html("Hello, " + $('#MEdit1').val() + "!");
}
[/javascript]
実行するとブラウザで表示されます。

その1
その2
その3
その4

HTML5 Builder トライアル<サーバーモバイルアプリケーション>

では次にサーバーモバイルアプリケーションのチュートリアルを実行してみましょう。
「ホームビュー」を開き、「新規作成」より「HTML5 Builder プロジェクト」のサーバーモバイルアプリケーション」をダブルクリックします。

サーバーWebアプリケーションのときと同じように、UIコンポーネントを追加していきます。右ペインの「ツールパレット」 のMobielカテゴリから、「MEdit」「MLabel」「MButton」コンポーネントをドラッグ&ドラッグで中央のデザイン領域へ配置していきます。

MButton1を選択し、キャプションを Say Helloに変更します。
ボタンクリックのイベントに対応したコードはダブルクリックで生成されます。
[PHP]
function MButton1Click($sender, $params)
{
}
[/PHP]
次のようにPHPで処理を記述していきます。
[PHP]
function MButton1Click($sender, $params)
{
$this->MLabel1->Caption = "Hello, ".$this->MEdit1->Text."!";
}
[/PHP]
 実行してみましょう。

Webブラウザが起動して画面が表示されました。これをWebサーバーに配置する必要があります。
AJAX
ホームの配置をクリック「次へ」
主要モバイルシステムにネイティブアプリケーションとして配置するには、ホームの「モバイルへ配置」を使用します。するとiOSならば、Xcode用のプロジェクトとして出力されるのでXCodeでビルドして実行することができます。
PhoneGapのアカウントがあれば、開発環境がなくてもネイティブアプリとしてビルドすることが可能です。
Androidを選択します。

アプリケーション名などを設定します。次へをクリック。

グラフィックスの設定です。次へをクリックします。

コンパイルモードを選択します。今回はデバッグを選びます。エクスポート先は任意に設定します。

処理が開始され、処理結果ログが表示されます。

ローカルの開発環境でビルドすることもできますし、 開発環境がなくともAdobeIDがあればPhoneGap:buildでビルドすることができます。 PhoneGap:buildを選択して次へをクリックします。

AdobeのユーザーIDとパスワードを入力して次へをクリックします。 

ビルドが完了しました。「バイナリを保存」ボタンを押すと、apk ファイルを任意の場所に保存することができます。

あとは取得した apk ファイルをAndroid実機にインストールして実行します。
その1
その2
その3
その4

HTML5 Builder トライアル<クライアントWebアプリケーション>

クライアントWebアプリケーション

では次にクライアントWebアプリケーションのチュートリアルを実行してみましょう。
「ホームビュー」を開き、「新規作成」より「HTML5 Builder プロジェクト」の「クライアントWebアプリケーション」をダブルクリックします。
サーバーWebアプリケーションのときと同じように、UIコンポーネントを追加していきます。右ペインの「ツールパレット」から、「Edit」「Label」「Button」コンポーネントをドラッグ&ドラッグで中央のデザイン領域へ配置していきます。
Button1を選択し、キャプションを Say Helloに変更します。またボタンをクリックしたときにHTMLの再読み込みが行われないように ButtonTypeプロパティをbtNormalに変更します。

ボタンクリックに対応する処理を記述します。 Button1をダブルクリックします。
[JavaScript]
// This is where you can place your Javascript code
function Button1Click(event) {
}
[/JavaScript]
Button1Click に、JavaScriptやjQueryの処理を記述します。
[JavaScript]
// This is where you can place your Javascript code
function Button1Click(event) {
$('#Label1').html("Hello, " + $('#Edit1').val() + "!");
}
[/JavaScript]
 では実行してみましょう。

サーバーWebアプリケーションのときと同じように 実行することができました。
その1
その2
その3
その4

HTML5 Builder トライアル<サーバーWebアプリケーション>

 HTML5 Builder トライアルを使ってみた。30日間無料でお試しすることが可能です。
http://www.embarcadero.com/jp/products/HTML5-Builder

HTML5 Builderは、PHPによるWebアプリケーション開発ツール「RadPHP」の後継製品だ。jQuery、jQueryMobileならびにPhoneGapを統合したモバイル向け開発環境を提供し、単一のHTML5/CSS3/JavaScriptコードベースから、iOSやAndroid、BlackBerry、Windows Phone 7といった複数のモバイルOSやWebブラウザ向けのアプリを開発できる。OSや画面サイズなどが異なる複数のスマートフォンやタブレット向けに、それぞれ個別に開発を行う必要はない。
情報:http://www.atmarkit.co.jp/news/201209/04/embarcadero.html

まずはダウンロード。
https://downloads.embarcadero.com/free/html5builder
情報を入力して「SUBMIT」すると、ダウンロードが開始されます。
また、シリアル番号がメールで送られてきます。
ダウンロードしたhtml_5_builder_upd1_win.zipを展開して、HTML5 Builder.exeを起動するとインストールが始まります。評価に使用したPCは64bit版のWindows7。インストールは簡単です。すべてデフォルトのまま進めると、JavaSEやAndroidSDK、apache-ant、TeeChart(グラフ作成ツール)も一緒にインストールされます。
インストールが完了したら早速起動しましょう。
まずは、メールで送られてきたシリアル番号とユーザ名、パスワードを入力して認証を行います。
起動すると黒い画面が立ち上がります。

サーバWebアプリケーション

ではチュートリアルに従い作業してみます。
左のペインから新規作成を選択し、「HTML5 Builder プロジェクト」を選択して、サーバーWebアプリケーションを ダブルクリックします。

「デザインビュー」が開きます。

UIコンポーネントを追加していきます。右ペインの「ツールパレット」から、「Edit」「Label」「Button」コンポーネントをドラッグ&ドラッグで中央のデザイン領域へ配置していきます。

Button1のキャプションを変更してみましょう。Button1を選択して、左下ペインにある「オブジェクトインスペクタ」より、Captionの項目を探し、  Say Hello に打ち変えます。

 ボタンクリックに対する応答の作成は、ダブルクリックで生成されます。では Button1をダブルクリックしてみます。
[PHP]
function Button1Click($sender, $params)
{
}
[/PHP]
このButton1Click関数に、ボタンクリック時のコードを記述していきます。 では、Edit1に入力kされた内容を連結してLabel1に表示するコードを書いてみます。
[PHP]
function Button1Click($sender, $params)
{
$this->Label1->Caption = "Hello,".$this->Edit1->Text."!";
}
[/PHP]
これで実行してみます。ツールバーから実行ボタンを押します。

ファイルやプロジェクトの保存について聞かれるのでそのまま保存します。プログラムが実行され、ブラウザに表示されます。

その1
その2
その3
その4