fedora14 でandroid 開発環境

日経 linux 2011 2月号で Android 開発環境の設定が
掲載されています
今回からの連載ということで、次回からが楽しみです
android と iPhone アプリの違いについて載っていました
ここ数年で一気に普及したandroid ですが
要因として、開発のしやすさがあるようです
まず iPhone では Mac で開発なのに対し
android では Windows Mac linux で可能
さらに、スマートフォンでテストする場合
iPhone は1万800円に対し
android は無料
そして、アプリの公開条件ですが
iPhone が米Apple 社の審査を通ること に対し
android の場合、初期登録費で25$のみ で審査なし
という状態のため、公開がしやすい環境となっています
数年すれば、android の市場がもっと拡大するのではないのでしょうか
というわけで。android の勉強を開始しています
まずは、fedora14 32bit をクリーンインストールします
例によって、VMware Player 3 で設定を行います
まず、最初に
yum -y install yum-fastestmirro
yum -y install nautilus-openterminal
yum -y update
を実行します
今後もこの設定は行うので
何度も行うのはさすがに面倒です
そのため、Dropbox に
setup_fedora14.sh
という設定ファイルを作成し
内容を
#!/bin/bash
yum -y install yum-fastestmirro
yum -y install nautilus-openterminal
yum -y update
としておきます
今後は、この設定ファイルを管理者権限で
sh setup_fedora14.sh
とすれば、インストールが行われます
今回、付属しているDVDに、必要なパッケージが収録されているので
これをHDDへコピーします
しかし、なぜか今回は仮想マシンがDVDを認識しないため
scp コマンドを使い。DVDにあるパッケージを転送します
scp /media/LIN201102/article/rensai_android/* snowpool@192.168.10.208:/home/snowpool/android
これで、収録されていたパッケージが無事に転送できました
続いて、
cd android
tar zxvf android-sdk_r08-linux_86.tgz
で解凍します
今回、この連載では jdk に openJDK を使うようです
これと、Eclipse を
yum コマンドで一気にインストールします
ただし、今回インストールするのは
java アプリ開発用の Eclipse です
yum -y install eclipse-jdt
でインストールします
ただし、パッケージが多いため、時間がかかります

Application cache

Application cache は
Webアプリの実行に必要なファイルをあらかじめダウンロードしてローカルの環境に保存しておき
インターネットにつながらない環境でも実行を可能にできるようです
今回は、前回作成した
webworkers のサンプルページにいく前に通るトップページという
Application cache を適用します
htmlタグにmanifest属性を追加
manifest ファイルの名前
sample.manifest を指定します
そして、sample.manifestでキャッシュすうファイルの名前を指定します
こうしておくことで
トップページにアクセスしたときに
sample.manifest で指定したファイルがキャッシュされ
ネットが切断されても
まだリンクしていないファイルを表示することもできるようです
今回も、XAMPPを使って実験します
http://dev.c-lis.co.jp/html5/nikkeilinux201102/
からダウンロードしたファイルを
unzip all.zip
で解凍
さらに、
sudo cp -p ~/ダウンロード/applicationcache/* /opt/lampp/htdocs/
でコピー
これで実験できます
日本語の部分が文字化けしているため
UTF-8で文字コードを指定したのですが
ダメでした
手打ちで自分で打ち込めば、文字化けはしないようです
改行コードが原因なのかもしれません

Web workers

Web workersを使うことで
java script の処理を並列化できます
これによ複数の処理が可能になり
サーバから画像データを受信しながら画像解析することも可能になります
今回もサンプルはダウンロードできるのですが
このサンプルを実行するには
サーバへのアップロードが必要とのことです
このため、簡易的にサーバーを容易するため
XAMPP を使用します
XAMPPがインストールされている場合
ubuntu なら
sudo /opt/lampp/lampp start
で起動します
今回、設置するファイルの場所は
/opt/lampp/htdocs/
へ設置します
日経Linux 2011-02を参考にしているのですが
どうやら、記述されている内容の java script のところで
記述ミス?があり、そのままタイプしても実行できません
このため
http://dev.c-lis.co.jp/html5/nikkeilinux201102/
からダウンロードしたファイルを
unzip all.zip
で解凍し
解凍したディレクトリに移動
そして
cp -p webworkers/* /opt/lampp/htdocs/
で移動
これで
Google Chrome を起動し
http://localhost/sample.html
でアクセスすると
実行できます
(私の環境では、ボタンのラベルが文字化けしました)
実行結果には以上がありませんでした
興味がある方は
どう違うのかを
一度書籍を購入し、diff コマンドを使って
違いをみてみるとわかります

Web Storage

ようやく環境も整ってきたので
さっそくHTML5の実験を開始してみます
まず、今回実験したのが
HTML5のAPI
WebStorage API です
これをつかうことで
ブラウザ側でデータを保存し、サーバーと通信せずに参照するということができます
WebStorage API には
localStorage

sessionStorage
があり
localStorage は
保存したデータが削除を命令しないと消えない
sessionStorage は
ブラウザを終了すると、データも消える
という仕組みになっています
このため
ユーザ情報などは
localStorage
サーバーから送られたデータの一時保存などには
sessionStorage
というように使い分けます
今回は掲載されていたサンプルが
http://dev.c-lis.co.jp/html5/nikkeilinux201102/
に掲載されています

HTMLの文字コード指定

HTML5 の実線のため Google Chromeを使ってみたのですが
文字コードを指定しないで作成したHTMLファイルを
開くと、日本語が文字化けします
このため、文字コードを指定することにしました
<meta http-equiv=”Content-Type” content=”text/html”; charset=”utf-8″>
これを
<head> と </head>
の間に記述します
これで、文字コードはutf-8 になり
文字化けしなくなります
今回の例だと
<!DOCTYPE html>
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html”; charset=”utf-8″>
<link rel=”stylesheet” href=”sample.css” type=”text/css”/>
<script type=”text/javascript” src=”sample4.js”></script>
</head>
<body>
<input type=”button” value=”位置の取得” onclick=”geo()”/><br/>
<textarea type=”text” id=”loc”></textarea>
</body>
</html>
というようになります

java script

ようやくubuntu に Google Chromeをインストールできましたので
日経Linux 2011 2月号に載っていた特集
HTML5 でつくるAndroid アプリ
を実線してみました
しかし、思わぬところでつまづきました
本には、HTML、CSSは載っているのですが
肝心の java script を実行するための
記述がHTMLがHTMLファイルにかかれていません
そのため、そのままタイプしても
起動しないということが判明しました
そこで
JavaScript の外部ファイル
を参考に
HTMLファイルの<head> から </head>
の間に、java script の外部ファイル読み込みの設定を行いました
<script type=”text/javascript” src=”sample.js”></script>
を追記します
全体のソースを記述すると
<!DOCTYPE html>
<html>
<head>
<link rel=”stylesheet” href=”sample.css” type=”text/css”/>
<script type=”text/javascript” src=”sample.js”></script>
</head>
<body>
<input type=”button” value=”button” onclick= “doItNow()” >
 <p class=”very_important” id= “msg”> here is message.</p>
</body>
</html>
というようになります
これで
Google Chrom でファイルを開き、
button
というボタンをクリックすれば、java script が機動します

ubuntu 10,10 で Google Chrome

日経Linux 2011-2 に
HTML5 でつくるAndroid アプリという
特集がありましたので、これを実線してみます
ただし、これには
Google Chrome
というブラウザを使います
通常、ubuntu にはfirefox がインストールされていますが
HTNL5 のAPIに対応していない面もありますので
Chrome をインストールします
Ubuntuでも使えるGoogle Chrome(Chromium Web Browser)
を参考にインストールしました
最初に
sudo gedit /etc/apt/sources.list
でファイルを開き、ファイルの一番下に
deb http://ppa.launchpad.net/chromium-daily/ppa/ubuntu jaunty main
deb-src http://ppa.launchpad.net/chromium-daily/ppa/ubuntu jaunty main
を追記し、保存します
次に
sudo apt-key adv –recv-keys –keyserver keyserver.ubuntu.com 0xfbef0d696de1c72ba5a835fe5a9bf3bb4e5e17b5
で鍵をいれます
最後に
sudo apt-get update
sudo apt-get install chromium-browser
でインストールします
次回以降の
インストールを楽にするために
Dropbox へ
chroum_setup.sh
というファイルを作成し
内容を
#!/bin/bash
sudo echo ‘
deb http://ppa.launchpad.net/chromium-daily/ppa/ubuntu jaunty main’ >> /etc/apt/sources.list
sudo echo ‘
deb-src http://ppa.launchpad.net/chromium-daily/ppa/ubuntu jaunty main’ >> /etc/apt/sources.list
sudo apt-key adv –recv-keys –keyserver keyserver.ubuntu.com 0xfbef0d696de1c72ba5a835fe5a9bf3bb4e5e17b5
sudo apt-get -y update
sudo apt-get -y install chromium-browser
として保存してみました
おそらく、これで次回からは
スクリプトを実行するだけでインストールできるはずです
最近は、極力設定をコマンドで行うようにしています
Dropbox に設定スクリプトを保存しておけば
仮想環境などでインストールしたときや
新しいマシンに設定するときに楽になると思うからです
ちなみに、
echo ‘文字列’ >> ファイル名
は、文字列をファイルの最終行に記述するという意味になります
詳しくは
お便利サーバー,com というサイトの
echo~文字や変数を画面に表示する
を見ると、とてもわかりやすいと思います

選択範囲にシェルのコマンドを実行

他にも、vi には便利な機能があります
指定した範囲に対して、シェルのコマンドを実行し、現在の内容と書き換えることができます
この構文は
範囲 !コマンド
になります
例として
linux fedora mac
windows mac win
linux fedora android
mac win ubuntu
debian redhat knopix
backtrack vine
という内容のファイルで
:%!cat -n
とすると
1 linux fedora mac
2 windows mac win
3 linux fedora android
4 mac win ubuntu
5 debian redhat knopix
6 backtrack vine
~
というように
番号がついて表示されます
また
:.,$w text.txt
というようすることで
指定した行を別のファイルに書き出すことも可能です
ただし、:w で保存したい場合
正規表現を使えません
正規表現を使って、当てはまる条件のものだけを別のファイルに抜き出すには
001:田中:男:21
002:鈴木:女:19
003:伊藤:男:31
004:山田:女:27
005:井上:男:18
006:佐藤:女:22
の場合
:w !grep “:男:” > men.txt
とすると
:男:
の文字を含む行だけを抜きだしたファイルを
作成できます
ちなみに内容は
001:田中:男:21
003:伊藤:男:31
005:井上:男:18
となり、無事に男の名前のみ抜き出したファイルが作成されました
ちなみに、行ったexコマンドの実行結果は
$history のように
:his
で実行結果をみれます
ただし、一度 vi を閉じると
この履歴は見れないようです

正規表現で置き換え文字を指定

正規表現を置き換え文字の指定に使えます
例として
001:田中:男:21
002:鈴木:女:19
003:伊藤:男:31
004:山田:女:27
005:井上:男:18
006:佐藤:女:22
という内容のファイルの性別のところを削除
してみます
:%s/:[男女]:/:/g
を実行すると
:男:と:女:の部分が
:
に置き換えられて
001:田中:21
002:鈴木:19
003:伊藤:31
004:山田:27
005:井上:18
006:佐藤:22
となります
また、vi のexコマンド :d と正規表現を
組み合わせ、対象行を設定できます
もし、:男: を含む行を削除するなら
:g/:男:/d
とすれば
001:田中:男:21
002:鈴木:女:19
003:伊藤:男:31
004:山田:女:27
005:井上:男:18
006:佐藤:女:22

002:鈴木:女:19
004:山田:女:27
006:佐藤:女:22
となります
この正規表現置き換えは
ビジュアルモード
でもできます
例として
:v で
ビジュアルモードになり範囲指定後に

をタイプすると
:’<,'>
がでるので
これに続いて 変更内容を記述します
今回は : を, に変更してみます
これを実行するには
:<','>s/:/,/g
とすれば
選択範囲が書き換えられ
001,田中,男,21
002,鈴木,女,19
003,伊藤,男,31
004,山田,女,27
005,井上,男,18
006,佐藤,女,22
となります

vi で正規表現による置き換え

vi 範囲を指定するときなどに
正規表現を使うと、効率的な
編集が可能になります
とくに、
コメントアウトなどの作業にはとても役立ちます
行頭を示す ^
ファイルの最後を示す $
現在のカーソルを示す .
これらを使い、現在のカーソル位置から
ファイルの最後まで、行頭に#を追加し
コメントアウトします
:.,$s/^/# /
unix mac linux unix windows linux
# unix mac linux unix windows linux
# unix mac linux unix windows linux
# unix mac linux unix windows linux
# unix mac linux unix windows linux
# unix mac linux unix windows linux
となりました
この方法を使うと
設定ファイルで、セキュリティ対応のため
コメントアウトするという場所が
たくさん存在するというときに
非常に役立ちます
さすがに
1行ずつ#を加えていくのは大変ですから
また、行頭が~で始まるところだけ置き換えるということもできます
これには
置き換えする範囲を正規表現で指定する機能をつかいます
構文は
:g/正規表現パターン/s/変える文字/変えたい文字/g
とします
今回の例では
行頭が linux で始まるところを変換してみます
linux fedora mac
windows mac win
linux fedora android
mac win ubuntu
debian redhat knopix
backtrack vine
~
というファイルを変更します
:g/^linux/s/linux/redhat enterprize/g
を実行すると
redhat enterprize fedora mac
windows mac win
redhat enterprize fedora android
mac win ubuntu
debian redhat knopix
backtrack vine
となりました