utsugenのメモ帳: 12月 2011

2011年12月9日金曜日

PhoneGap入門

PhoneGapとは

HTMLとJavaScriptだけでAndroidアプリを作成できるフレームワーク。
カメラなどのデバイスのAPIを使用できる。
HTML5、JQueryMobileを組み合わせるといろいろできそう。

まずはEclipseでAndroidProjectの作成
PhoneGapフレームワークの設定
公式ページからダウンロードして配置する。

Activityの修正














import android.os.Bundle;

import com.phonegap.*;




public class TestPhoneGapActivity extends DroidGap {

    /** Called when the activity is first created. */

    @Override

    public void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        super.loadUrl("file:///android_asset/www/index.html");

    }

}

AndroidManifestの修正

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

<manifest xmlns:android="http://schemas.android.com/apk/res/android"

package="com.utsugen"

android:versionCode="1"

android:versionName="1.0" >

<supports-screens

android:largeScreens="true"

android:normalScreens="true"android:smallScreens="true"android:resizeable="true"android:anyDensity="true"/>

<uses-permission android:name="android.permission.CAMERA" /><uses-permission android:name="android.permission.VIBRATE" /><uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" /><uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" /><uses-permission android:name="android.permission.ACCESS_LOCATION_EXTRA_COMMANDS" /><uses-permission android:name="android.permission.READ_PHONE_STATE" /><uses-permission android:name="android.permission.INTERNET" /><uses-permission android:name="android.permission.RECEIVE_SMS" /><uses-permission android:name="android.permission.RECORD_AUDIO" /><uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" /><uses-permission android:name="android.permission.READ_CONTACTS" /><uses-permission android:name="android.permission.WRITE_CONTACTS" /><uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" /><uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />

<uses-sdk android:minSdkVersion="10" />

<application

android:icon="@drawable/ic_launcher"

android:label="@string/app_name" >

<activity

android:label="@string/app_name"

android:name=".TestPhoneGapActivity"

android:configChanges="orientation|keyboardHidden" >

<intent-filter >

<action android:name="android.intent.action.MAIN" />

<category android:name="android.intent.category.LAUNCHER" />

</intent-filter>

</activity>

</application>

</manifest>
レイアウトの作成
assets/www/index.htmlを作成

<!DOCTYPE HTML>

<html>

<head>

<title>TestPhoneGap</title>
<script type="text/javascript" charset="utf-8" src="phonegap-1.2.0.js"></script>
<script type="text/javascript" charset="utf-8">

</script>

</head>

<body>

<h1>Hello world!</h1>
<h2 id="myDevice"></h2>
<p id="ready">デバイス情報取得中．．．</p>

</body>

</html>

完成！

2011年12月4日日曜日

Ajax入門

Ajaxの初歩的なまとめ。

XMLHttpRequest
・JavaScriptのオブジェクト。
　ページ遷移なしでHTTPリクエストを送る事が出来る。
　Ajaxの根幹となる部分。
・ドメインが違うサイトのデータは取得できない。
　このためPHPやJavaなどのサーバサイドのプログラムを
　間にかます必要がある。

<script type="text/javascript">
httpRequest = false;
if(window.XMLHttpRequest) {
    // Firefox, Opera など
    httpRequest = new XMLHttpRequest();
    httpRequest.overrideMimeType('text/xml');
} else if(window.ActiveXObject) {
    // IE
    try {
        httpRequest = new ActiveXObject('Msxml2.XMLHTTP');
    } catch (e) {
        httpRequest = new ActiveXObject('Microsoft.XMLHTTP');
    }
}
function request() {
    httpRequest.abort();
    httpRequest.open('GET', 'url', true);
    httpRequest.onreadystatechange = function() { // コールバック関数
        if(httpRequest.readyState == 4) {
            if(httpRequest.status == 200) {
                // 処理
            }
        }
    }
    httpRequest.send(null);
}
</script>

XAMPP
・MySQLやPHPを含んだApacheディストリビューション。
　簡単インストールですぐに使える。
　開発用のローカル環境にとても便利。
　本番用にもセキュリティの設定を変えれば使えるそう。
・MAC OS X版に含まれるソフト
　Apache, MySQL, PHP & PEAR, SQLite, Perl, ProFTPD, phpMyAdmin, OpenSSL,
　GD, Freetype2, libjpeg, libpng, zlib, Ming, Webalizer, mod_perl.

Prototype.js
・多彩なJavaScriptライブラリ。
　ブラウザの差異も吸収してくれる。

new Ajax.Request( 'url', {method:'get',
　　　　　　　　　   　　onSuccess:getData,    // 成功時コールバック関数
　　　　　　　　   　　　onFailure:showErrMsg, // エラー時コールバック関数
　　　　　　　　　   　　parameters:''} );

function getData(data) {
     var rdf ="http://www.w3.org/1999/02/22-rdf-syntax-ns#";
     var response;
     if(document.all){
          response = data.responseXML.getElementsByTagName('rdf:RDF');
     }else{
          response = data.responseXML.getElementsByTagNameNS(rdf,'RDF');
     }
     var item = response[0].getElementsByTagName('item');
     for(i = 0; i < item.length; i++){
          // 処理
     }
}
function showErrMsg() {
     // エラー処理
}

DOM (Document Object Model)
・HTMLやXMLを操作する為のAPI。

// selectボックスの作成
var selectDOM = document.createElement('select');
selectDOM.setAttribute( 'id', 'data_select' );

var optionDOM = document.createElement('option');
optionDOM.setAttribute( 'value', '0' );
optionDOM.appendChild( document.createTextNode( '選択してください' ) );
selectDOM.appendChild( optionDOM );

result.appendChild( selectDOM );

2011年12月2日金曜日

ADKアプリの作成　ースケッチー

AndroidAccessory acc("Utsugen",

"TestADK",
"TestADK by Utsugen",
"1.0",
"http://utsugen.blogspot.com/",
"0000000012345678");

void setup() { pinMode( LED, OUTPUT ); acc.powerOn(); }

Arduinoを接続したときに立ち上げるAndroidアプリを指定する。

void loop() { if (acc.isConnected()) { // INPUT from Android ①int len = acc.read(msg, sizeof(msg), 1); if( len == 3 ){ if( msg[0] == 0x2 ){ if( msg[1] == 0x0 ){ analogWrite( LED, msg[2] ); } } } // OUTPUT to Android data = analogRead( IR ); msg[0] = 0x1; ②msg[1] = ((int)voltage2distance( (double)data / 1024.0 * 5.0 )) & 0xf; msg[2] = 0xff; ③acc.write(msg, 3); } delay(100); }

①Androidからの入力を受け取る。
３byteが種別／対象／値で並んでいる。
Android側と示し合わせておく。
②voltage2distance関数は、赤外線測距モジュールGP2Y0A21YKからの
　電圧を距離に変換している。この方が作成された。
③Androidに値を渡す。