2011年10月31日月曜日

Amazon EC2を始める(node.js - express編)

経緯
Amazon EC2を始める(導入編)
Amazon EC2を始める(SSL編)
Amazon EC2を始める(SCP編)
Amazon EC2を始める(Apache編)
Amazon EC2を始める(node.js編)
の続きです。


概要
node.jsのフレームワークであるexpressを入れる際のログです。
※ node.jsとnpmがインストールされていない人は↓こちらでインストールしてください。
Amazon EC2を始める(node.js編)

expressについては↓こちら
http://expressjs.com/


手順
1. expressをインストール

expressをグローバルインストールします。
※ グローバルインストールとローカルインストールの違いは↓こちらがわかりやすいです。
npm installコマンドの-gオプションについて

$ sudo npm install express -g
/usr/local/bin/express -> /usr/local/lib/node_modules/express/bin/express
mkdirp@0.0.7 /usr/local/lib/node_modules/express/node_modules/mkdirp 
mime@1.2.4 /usr/local/lib/node_modules/express/node_modules/mime 
qs@0.3.1 /usr/local/lib/node_modules/express/node_modules/qs 
connect@1.7.2 /usr/local/lib/node_modules/express/node_modules/connect 
express@2.5.0 /usr/local/lib/node_modules/express 

# 確認します。
$ ls -l /usr/local/lib/node_modules
total 8
drwxr-xr-x  6 nobody ec2-user 4096 Oct 31 11:25 express
drwxr-xr-x 11 root   ec2-user 4096 Oct 30 16:35 npm

# アプリのひな形を作成
$ cd /usr/local/src/
$ express chatapp

   create : chatapp
   create : chatapp/package.json
   create : chatapp/app.js
   create : chatapp/public
   create : chatapp/routes
   create : chatapp/routes/index.js
   create : chatapp/views
   create : chatapp/views/layout.jade
   create : chatapp/views/index.jade
   create : chatapp/public/javascripts
   create : chatapp/public/images
   create : chatapp/public/stylesheets
   create : chatapp/public/stylesheets/style.css

   dont forget to install dependencies:
$ cd chatapp && npm install

$ cd chatapp

# アプリを起動
$ node app.js node.js:134 throw e; // process.nextTick error, or 'error' event on first tick ^ Error: Cannot find module 'express' at Function._resolveFilename (module.js:326:11) at Function._load (module.js:271:25) at require (module.js:355:19) at Object.<anonymous> (/usr/local/src/chatapp/app.js:6:15) at Module._compile (module.js:411:26) at Object..js (module.js:417:10) at Module.load (module.js:343:31) at Function._load (module.js:302:12) at Array.<anonymous> (module.js:430:10) at EventEmitter._tickCallback (node.js:126:26) # ⇒ 依存ライブラリがないので起動できない。 # 依存ライブラリをインストール $ npm install jade@0.16.4 ./node_modules/jade ├── mkdirp@0.0.7 └── commander@0.2.1 express@2.5.0 ./node_modules/express ├── mkdirp@0.0.7 ├── mime@1.2.4 ├── connect@1.7.2 └── qs@0.3.1 # アプリを起動 $ node app.js Express server listening on port 3000 in development mode


2. ポートを空ける
起動メッセージにもあるように、このアプリはポート3000で動いています。
app.jsのポート3000を80に変更するかEC2のFireWall設定で3000番に穴を空けるかの対応が必要ですが、毎回のことなので、3000番に穴をあけることにしました。

「AWS Management Console」の左ナビで「Security Groups」を選択します。
インスタンスに紐づけているグループの「Inbound」タブで「Port range」に「3000」を入力し、「+Add Rule」をクリックします。
続いて「Apply Rule Changes」をクリックすると、反映されます。


3. アプリ確認
http://ec2-xxx-xxx-xxx-xxx.ap-northeast-1.compute.amazonaws.com:3000/
自サーバーのport3000にアクセスすると↓「Welcome to Express」と表示されればokです。

ちなみにこれはexpressのデフォルトのテンプレートエンジンのjadeによる出力です。

Amazon EC2を始める(node.js編)

経緯
Amazon EC2を始める(導入編)
Amazon EC2を始める(SSL編)
Amazon EC2を始める(SCP編)
Amazon EC2を始める(Apache編)
の続きです。

概要
Amazon EC2に作成したインスタンスにnode.jsをインストールした際の履歴です。

node.js
http://nodejs.org/

↓こちらを参考にしました。
Amazon EC2 Node.js, npm, Socket.IOをインストール

手順
1. node.jsをインストール
# 現時点の安定最新版
$ wget http://nodejs.org/dist/node-v0.4.12.tar.gz
# 必要なものをインストール
$ sudo yum -y install gcc-c++
$ sudo yum -y install openssl-devel

# configure
$ tar xvzf node-v0.4.12.tar.gz
$ cd node-v0.4.12
$ ./configure
Checking for program g++ or c++          : /usr/bin/g++ 
Checking for program cpp                 : /usr/bin/cpp 
Checking for program ar                  : /usr/bin/ar 
Checking for program ranlib              : /usr/bin/ranlib 
Checking for g++                         : ok  
Checking for program gcc or cc           : /usr/bin/gcc 
Checking for gcc                         : ok  
Checking for library dl                  : yes 
Checking for openssl                     : yes 
Checking for library util                : yes 
Checking for library rt                  : yes 
--- libeio ---
Checking for library pthread             : yes 
Checking for function pthread_create     : yes 
Checking for function pthread_atfork     : yes 
Checking for futimes(2)                  : yes 
Checking for readahead(2)                : yes 
Checking for fdatasync(2)                : yes 
Checking for pread(2) and pwrite(2)      : yes 
Checking for sendfile(2)                 : yes 
Checking for sync_file_range(2)          : yes 
--- libev ---
Checking for header sys/inotify.h        : yes 
Checking for function inotify_init       : yes 
Checking for header sys/epoll.h          : yes 
Checking for function epoll_ctl          : yes 
Checking for header port.h               : not found 
Checking for header poll.h               : yes 
Checking for function poll               : yes 
Checking for header ['sys/types.h', 'sys/event.h'] : not found 
Checking for header sys/queue.h                    : yes 
Checking for function kqueue                       : not found 
Checking for header sys/select.h                   : yes 
Checking for function select                       : yes 
Checking for header sys/eventfd.h                  : yes 
Checking for function eventfd                      : yes 
Checking for SYS_clock_gettime                     : yes 
Checking for library rt                            : yes 
Checking for function clock_gettime                : yes 
Checking for function nanosleep                    : yes 
Checking for function ceil                         : yes 
Checking for fdatasync(2) with c++                 : yes 
'configure' finished successfully (2.825s)

# make 入ってなかった><
$ make
 -bash: make: command not found
$ sudo yum -y install make

# make
$ make

# make install
$ sudo make install

# 入りました(*^-^)
$ node -v
v0.4.12

makeはマイクロのインスタンスだと重すぎてkillするハメになった方もいるようですが、 私のときは調子よくて18分で完了しました。
node.jsをAmazon EC2のmicroインスタンスに入れる時の注意

2. npmをインストール
npm ⇒ Node Package Manager

詳しくは↓こちらです。
http://npmjs.org/

$ sudo chown -R $USER /usr/local
$ curl http://npmjs.org/install.sh | sh
$ sudo chown -R root /usr/local
$ npm -v
1.0.103

# パスを通す(nodeコマンドもnpmコマンドも/usr/local/bin以下)
$ sudo visudo
Defaults    secure_path = /sbin:/bin:/usr/sbin:/usr/bin
# ↓↓↓↓
Defaults    secure_path = /sbin:/bin:/usr/sbin:/usr/bin:/usr/local/bin

# 試しにsocket.ioを入れてみる。
# socket.io
$ sudo npm install socket.io
socket.io@0.8.6 ./node_modules/socket.io 
├── policyfile@0.0.4
├── redis@0.6.7
└── socket.io-client@0.8.6

3. Hello worldを作成
Hello worldアプリを作って、nodeサーバーとして起動してみます。

$ vi example.js
var http = require('http');
http.createServer(function (req, res) {
  res.writeHead(200, {'Content-Type': 'text/plain'});
  res.end('Hello World\n');
}).listen(80, "");
console.log('Server running at ec2-xxx.ap-northeast-1.compute.amazonaws.com:80/');
# node.jsにexample.jsアプリを起動させます。
$ sudo node example.js 
# ⇒ エラーが起きました。
node.js:134
        throw e; // process.nextTick error, or 'error' event on first tick
        ^
Error: EADDRINUSE, Address already in use
    at Server._doListen (net.js:1100:5)
    at net.js:1071:14
    at Object.lookup (dns.js:153:45)
    at Server.listen (net.js:1065:20)
    at Object. (/home/ec2-user/example.js:5:4)
    at Module._compile (module.js:411:26)
    at Object..js (module.js:417:10)
    at Module.load (module.js:343:31)
    at Function._load (module.js:302:12)
    at Array. (module.js:430:10)

$ netstat -antpu
tcp        0      0 :::80                       :::*                        LISTEN      - 
# Apache立ちあげてました。

# Apache停止
$ sudo su root
#  /etc/rc.d/init.d/httpd stop
Stopping httpd:                                            [  OK  ]
# 自動起動設定を外します。
# chkconfig httpd off
# exit
exit

# リトライ
$ sudo node example.js 
Server running at ec2-xxx-xx-xxx-xxx.ap-northeast-1.compute.amazonaws.com:80/
# ⇒ 今度は成功しました。


4. ブラウザから確認
http://ec2-xxx-xx-xxx-xxx.ap-northeast-1.compute.amazonaws.com/

※ 自分のサーバーのドメインは「AWS Management Console」から確認できます。(Public DSN)

Amazon EC2を始める(Apache編)

経緯
Amazon EC2を始める(導入編)
Amazon EC2を始める(SSL編)
Amazon EC2を始める(SCP編)
の続きです。

概要
Amazon EC2に作成したインスタンスにApacheを立ち上げた際のメモです。


手順
1. Apacheがないことを確認。

初期状態のサービスは下記、httpdは入っていない。
$ chkconfig --list
acpid           0:off   1:off   2:on    3:on    4:on    5:on    6:off
atd             0:off   1:off   2:off   3:on    4:on    5:on    6:off
auditd          0:off   1:off   2:on    3:on    4:on    5:on    6:off
cgconfig        0:off   1:off   2:off   3:off   4:off   5:off   6:off
cgred           0:off   1:off   2:off   3:off   4:off   5:off   6:off
cloud-init      0:off   1:off   2:on    3:on    4:on    5:on    6:off
cloud-init-user-scripts 0:off   1:off   2:on    3:on    4:on    5:on    6:off
conman          0:off   1:off   2:off   3:off   4:off   5:off   6:off
crond           0:off   1:off   2:on    3:on    4:on    5:on    6:off
httpd           0:off   1:off   2:off   3:off   4:off   5:off   6:off
iptables        0:off   1:off   2:on    3:on    4:on    5:on    6:off
irqbalance      0:off   1:off   2:off   3:on    4:on    5:on    6:off
lvm2-monitor    0:off   1:on    2:on    3:on    4:on    5:on    6:off
mdmonitor       0:off   1:off   2:on    3:on    4:on    5:on    6:off
messagebus      0:off   1:off   2:on    3:on    4:on    5:on    6:off
netconsole      0:off   1:off   2:off   3:off   4:off   5:off   6:off
netfs           0:off   1:off   2:off   3:on    4:on    5:on    6:off
network         0:off   1:off   2:on    3:on    4:on    5:on    6:off
ntpd            0:off   1:off   2:on    3:on    4:on    5:on    6:off
ntpdate         0:off   1:off   2:on    3:on    4:on    5:on    6:off
psacct          0:off   1:off   2:off   3:off   4:off   5:off   6:off
quota_nld       0:off   1:off   2:off   3:off   4:off   5:off   6:off
rdisc           0:off   1:off   2:off   3:off   4:off   5:off   6:off
restorecond     0:off   1:off   2:off   3:off   4:off   5:off   6:off
rsyslog         0:off   1:off   2:on    3:on    4:on    5:on    6:off
saslauthd       0:off   1:off   2:off   3:off   4:off   5:off   6:off
sendmail        0:off   1:off   2:on    3:on    4:on    5:on    6:off
sshd            0:off   1:off   2:on    3:on    4:on    5:on    6:off
udev-post       0:off   1:on    2:on    3:on    4:on    5:on    6:off
yum-updatesd    0:off   1:off   2:on    3:on    4:on    5:on    6:off

2. rootでインストール
$ sudo su root
# yum install httpd

3. rootで起動
#  /etc/rc.d/init.d/httpd start
Starting httpd:                                            [  OK  ]

4. ブラウザから確認
http://ec2-xxx-xx-xxx-xxx.ap-northeast-1.compute.amazonaws.com/

※ 自分のサーバーのドメインは「AWS Management Console」から確認できます。(Public DSN)

5. サーバー起動時に立ち上がるよう設定
# chkconfig httpd on
# chkconfig --list httpd
httpd           0:off   1:off   2:on    3:on    4:on    5:on    6:off

6. index.htmlを作成
# cat /etc/httpd/conf/httpd.conf | grep DocumentRoot
# DocumentRoot: The directory out of which you will serve your
DocumentRoot "/var/www/html"

# vi /var/www/html/index.html
でもいいのですが。

グループを作成してソースを分けます。
# groupadd -g 502 webuser
# tail -1 /etc/group
webuser:x:502:root,ec2-user
# usermod -G webuser root
# usermod -G webuser ec2-user
# chgrp -R webuser /usr/local/src
$ vi /var/www/html/index.html
<!DOCTYPE html>
<html>
  <head>
     <title>Hello world!</title>
  </head>
  <body>
    <h1>Hello World!!</h1>
  </body>
</html>
$ sudo su root
# ln -s /usr/local/src/index.html /var/www/html/index.html

7. 再度ブラウザから確認
http://ec2-xxx-xx-xxx-xxx.ap-northeast-1.compute.amazonaws.com/


問題ないですね。
とりあえずApacheは入れてみたものの、次はrubyやphpには目もくれず一直線にnode.js + MongoDBを導入しようと思います(*^-^)




2011年10月30日日曜日

Amazon EC2を始める(SCP編)

経緯
Amazon EC2を始める(導入編)
Amazon EC2を始める(SSL編)
の続きです。

概要
Amazon EC2に作成したインスタンスにWinSCPで接続するまでの作業履歴を残します。

WinSCP
http://www.tab2.jp/~winscp/

手順
1. ローカルの鍵ファイルを確認する。
EC2にインスタンスを作った際に「Create a new Key Pair」の手順でダウンロードした鍵ファイルが必要です。
ない場合は、「AWS Management Console」の「Key Pairs」から作成し、
インスタンスの「Key Pairs」も設定しなおす必要があります。
↓こんな感じのファイルです。
(鍵名).pem

EC2からダウンロードしたままのファイルをWinSCPで読み込むと「WinSCPはPuTTY形式のみ対応しています。」というエラーになります。

2. puttygenで変換(WinSCPを使うために)
これを「puttygen」というツールを使って、変換します。
puttygen.exeは↓こちらのページからダウンロードできます。
http://www.chiark.greenend.org.uk/~sgtatham/putty/download.html

ダウンロードしたら起動して、「File > Load private key」を選択し、鍵ファイルを読み込ませます。

※ ファイルの選択ダイアログでは、右下の拡張子を「All files *.*」にしてください。

読み込んだら、「Save private key」ボタンをクリックし、変換出力してください。(**.ppk)


3. WinSCPで接続
WinSCPに必要情報を入力して接続します。


ホストは「AWS Management Console」から確認できます。(Public DSN)

鍵ファイルには上記鍵ファイル(**.ppk)を指定してください。
パスワードは空のままで構いません。

コンファームが出ますが「はい」をクリックしてください。


接続できましたヾ( ~▽~)ツ

[memo] Windows7(64bit)×Pedorosa で設定が保存されない件の回避法

概要
64bitのWindows 7でPedorosa4.1.0を使っていると、接続先やコンソールの設定が保存されない現象が発生。

対応
ショートカットリンクのリンク先に↓下記の起動オプションを追加して対応

 -p appdata


Amazon EC2を始める(SSH編)

経緯
Amazon EC2を始める(導入編)」の続きです。

概要
Amazon EC2に作成したインスタンスにPoderosa×SSHで接続するまでの作業履歴を残します。

Poderosa
http://ja.poderosa.org/

手順
1. ローカルの鍵ファイルを確認する。
EC2にインスタンスを作った際に「Create a new Key Pair」の手順でダウンロードした鍵ファイルが必要です。
ない場合は、「AWS Management Console」の「Key Pairs」から作成し、
インスタンスの「Key Pairs」も設定しなおす必要があります。
↓こんな感じのファイルです。
(鍵名).pem


EC2からダウンロードしたままのファイルをPoderosaで読み込むと「Wrong key format」というエラーになります。


2. puttygenで変換(Poderosaを使うために)
これを「puttygen」というツールを使って、変換します。
puttygen.exeは↓こちらのページからダウンロードできます。
http://www.chiark.greenend.org.uk/~sgtatham/putty/download.html

ダウンロードしたら起動して、「File > Load private key」を選択し、鍵ファイルを読み込ませます。

※ ファイルの選択ダイアログでは、右下の拡張子を「All files *.*」にしてください。


読み込んだら、「Conversions > Export ssh.com key」を選択し、変換出力してください。

3. Poderosaで接続
Poderosaに必要情報を入力して接続します。


ホストは「AWS Management Console」から確認できます。(Public DSN)
鍵ファイルには上記鍵ファイルを指定してください。
パスワードは空のままで構いません。
注意:
種類を「xterm」(デフォルト)で接続すると、「未サポートのエスケープシーケンスを見つけました。 ESC [?1034h」というメッセージが出ます。
「kterm」にすると回避できます。


接続できましたヾ( ~▽~)ツ



念のためsshのアクセスで、パスワード認証ができないようになっていることを確認。
[root@ip-10-152-66-29 ec2-user]# cat /etc/ssh/sshd_config | grep PasswordAuthentication 
#PasswordAuthentication yes
PasswordAuthentication no ← noが有効になっている。

Amazon EC2を始める(導入編)


経緯
新しいPCを買ったので古いPCをサーバーにする予定だったのですが、
買った3日後にハード故障、、、

無料の利用範囲内が設定されていますし、いい機会なのでAmazon EC2のポテンシャルを量るため使ってみました。

料金
2011/10/30現在の情報です。最新情報は↓を確認してください。

Amazon EC2 料金表
http://aws.amazon.com/jp/ec2/pricing/

登録すると1年間、無料利用枠で下記サービスを受けられます。
マイクロインスタンス使用 750 時間。(最も低ランクなサーバースペック)
データ転送 "アウト"15 GB/月。(インはもともと無制限 無料)
などなど。

上記の枠を超えた場合や、2年目以降は、下記の料金体系で利用できるようです。
・マイクロ インスタンス(オンデマンド)
マイクロ:$0.027 / 時

・データ転送 "アウト":
最初の 1 GB/月:$0.000 / GB
10 TB まで/月:$0.201 / GB



概要
Amazon EC2にインスタンスを立ち上げるまでの作業を残します。
※ 提供サービス内容は随時変わるので、最新の情報は本家で確認してくださいね。



手順
1. Amazon Web Service (AWS)にアクセスし、右上の「今すぐ申し込む」をクリックします。

Amazon Web Service(日本語)
http://aws.amazon.com/jp/

2. AWSにアカウントを作成します。
メールアドレスを入れる。
「I am a new user.」を選択する。

名前 / パスワードを入れる。

個人情報を入れる。
利用規約の承認にチェックを入れる。

クレジットカード情報を入れる。

国コードで「Japan(+81)」を選択する。
電話番号を入れる。(携帯可)
※ 電話番号は、市外局番から入れ、国際電話なので先頭の0を外す。
例(080-1234-5678 ⇒ 80-1234-5678)
例(03-1234-5678 ⇒ 3-1234-5678)

ボタンをクリックすると、画面上に4桁のPINコードが表示されます。
また、入力した電話番号に電話がかかってきます。
日本語での自動音声です。

アナウンスにしたがって、画面上に表示された4桁のPINコードを入力すれば、認証されて電話が切れます。

Amazon側での認証作業が始まります。


数分待っていると認証完了のメールが届きます。


3. AWSにサーバーインスタンスを作成します。


「AWS Management Console」にアクセスします。

AWS Management Console
https://console.aws.amazon.com/ec2/home

画面左上のRegionで「Asia Pacific(Tokyo)」を選択します。
↑これがデータセンターの場所になります。

画面左のナビから「Instances」を選択します。
右の「Launch Instance」をクリックします。

「Launch Classic Wizard」を選択します。
「Continue」をクリックします。

AMI(Amazon Machine Image)を選択します。
このイメージはAmazon提供のもの以外にも有志の方が提供しているイメージもあります。
※ 「Community AMIs」タブから探せます。
※ AMIの選択はEC2の料金に関係ありません。

私は今回「Basic 64-bit Amazon Linux AMI 2011.9」を選択しました。

インスタンス数は1であることを確認します。
インスタンスタイプはMictoであることを確認します。(無料利用枠はMicro)
「Launch into」欄で「Availability Zone」を選択できます。
これはサーバーの物理的なロケーションを指定できる機能です。
災害時などの対策のために遠隔地に分散させるようなことができます。
私は問わないので「No Preference」を選択しました。



インスタンスのOptionを入力します。
ここはすべてデフォルトのままです。

リソースのタグを入力します。
これはインスタンスが膨大な数になることを想定して、管理用のタグをインスタンスにつけることができる機能です。
アカウントごとに10個のタグを作成でき、そのうちの複数をインスタンスに紐づけることができるようですね。
例:「Prodサーバー」タグ、「○○サービス」タグ、「MongoDB」タグetc
↓詳細はこちら
Amazon EC2の新機能:リソースタギング
個人利用では必要ないので、私はデフォルトのままです。

ログイン用の鍵情報を設定します。
「Create a new Key Pair」で鍵を作成し、秘密鍵ファイルを保存します。
作成時に秘密鍵ファイルをダウンロードできます。
後ほどサーバーに接続する際に使います。
「Create a new Key Pair」で作成した鍵名を選択します。

セキュリティの設定をします。
デフォルトではSSHだけ許可されている状態なので、「Create a new Security Group」を選択し、
Port rangeに80を入力して「Add Rule」ボタンをクリックします。
今回はWebサーバー目的なので、80ポートを解放しましたが、サーバーの用途によって変わりえます。
Sourceの0.0.0.0/0は、接続を許可するアドレス設定です。
デフォルトは誰でもOKです。ここで接続を許可するIPレンジなどを絞れます。

構成内容を確認します。

できましたヾ( ~▽~)ツ

コンソールからも確認できます。

以上!お疲れ様でした。

2011年10月25日火曜日

PhoneGap + AndroidでjQuery Mobileを使ってみた

概要

PhoneGap + Androidについては↓こちら

AndroidでPhoneGapを使う際の手順メモ
http://ryooo321.blogspot.com/2011/10/phonegapandroid.html

今回は上記にjQuery Mobileを導入してみました。
jQuery Mobileとは、jQueryのプラグインとして動作するモバイルアプリのライブラリです。
こいつがすごいです!!
使ったことのない人は、下記ページのDemoを是非みてください。
jQuery Mobile
http://jquerymobile.com/

jQuery Mobile Demo
http://jquerymobile.com/demos/1.0rc2/


使い方で参考になるページは↓こちら
billboardtop100.net
http://billboardtop100.net/jquery-mobile/

またいつかこいつだけでじっくり使ってみた感想を書きたいです。


1. jQuery Mobileをダウンロード/解凍

↓こちらから「jquery.mobile-1.0rc2.zip」をダウンロードします。
http://jquerymobile.com/download/

解凍すると↓こんな感じです。




2. jqueryをダウンロード
↓こちらから1.6.2のMinifiedをダウンロードします。
http://docs.jquery.com/Downloading_jQuery



3. Android プロジェクト内に配置
www/css/jquery.mobile-1.0rc2.min.css
www/css/images/以下
www/js/jquery-1.6.2.min.js
www/js/jquery.mobile-1.0rc2.min.js
www/css/style.css (←中身は空でも構いません)

↓こんな感じです。

4. index.htmlを記載します。


<!DOCTYPE HTML>
<html>
<head>
<title>Multip6</title>
<meta charset="utf-8">
<link rel="stylesheet" href="css/style.css" type="text/css" media="all">
<link rel="stylesheet" href="css/jquery.mobile-1.0rc2.min.css" type="text/css" media="all">
<script type="text/javascript" charset="utf-8" src="js/phonegap-1.1.0.js"></script>
<script type="text/javascript" charset="utf-8" src="js/jquery-1.6.2.min.js"></script>
<script type="text/javascript" charset="utf-8" src="js/jquery.mobile-1.0rc2.min.js"></script>
</head>
<body>

<div data-role="page" id="top">
<div data-role="header" data-position="inline" >
<h1>SNS送信</h1>
</div>
<div data-role="content">
<div data-role="fieldcontain">
<label for="textarea">投稿内容:</label>
<div><textarea cols="100" rows="25" name="textarea" id="textarea"></textarea></div>
</div>
<div data-role="fieldcontain">
<label for="name">画像:</label>
<div><input type="text" name="name" id="name" value="" /></div>
</div>
<a href="#" data-role="button" data-theme="c">送信</a>
</div>
<ul data-role="listview" data-split-icon="gear" data-theme="d">
<li><a href="#">Twitter<span class="ui-li-aside">送信</span></a><a href="#tw" data-rel="dialog" data-transition="pop" data-theme="d">Twitter</a></li>
<li><a href="#">Facebook<span class="ui-li-aside">送信</span></a><a href="#tw" data-rel="dialog" data-transition="pop" data-theme="d">Facebook</a></li>
</ul>

</div>
<div data-role="footer" data-theme="d">
<h4>Multi post 6</h4>
</div>

<div data-role="page" id="tw">
<div data-role="header" data-theme="e">
<h1>Twitter 投稿内容</h1>
</div>
<div data-role="content" data-theme="d">
<div data-role="fieldcontain">
<label for="textarea">投稿内容:</label>
<div><textarea cols="100" rows="25" name="textarea" id="textarea"></textarea></div>
</div>
<div data-role="fieldcontain">
<label for="name">画像:</label>
<div><input type="text" name="name" id="name" value="" /></div>
</div>
<p><a href="#top" data-role="button" data-inline="true" data-icon="back">戻る</a></p> 
</div>
<div data-role="footer" data-theme="a">
<h4>Multi post 6</h4>
</div>
</div>

</body>
</html>


5. 実行
エミュで動かすと↓こんな感じです。
エミュなので若干重いですが、アニメーションするUIが簡単に作れました。



おおむねの開発はChromeでできるので、快適ですね。

2011年10月24日月曜日

AndroidでPhoneGapを使う際の手順メモ

概要
androidアプリはjavaで作るのが基本ですが、PhoneGapを使えばhtml/css/jsで作ることができます。

何がよいかというと、
・iPhoneアプリやWebアプリへの(からの)移植が容易。
・ナレッジを持った技術者が容易に確保できる。
・jQueryなどの既存の多彩なライブラリ群を利用できる。
・html5 / CSS3を利用してあんなことやこんなことができちゃう。
などなどですヾ( ~▽~)ツ

カメラや加速度センサーなどの機能もjsから呼び出して利用できるようです。


これを使ってアプリを作りますので、備忘録的メモを残します。

1. PhoneGapをダウンロード/解凍

↓こちらの右上のリンクから最新版をダウンロードできます。
http://www.phonegap.com/

2011/10/24時点では1.1.0でした。

解凍すると下記のような構成



2. PhoneGapを導入する

phonegapのandroidディレクトリ内の「README.md」を見ればだいたい同じことが書いてあります。

2-1. eclipseでAndroidプロジェクトを作る

ここまではここでは説明しません。
eclipse入れて、AndroidSDK入れたらokですね。

↓ここの手順がとても見やすいかと思います。


素人のアンドロイドアプリ開発日記
http://andante.in/i/

プロジェクトをつくると↓こんな感じです。


2-2. libsディレクトリおよびwwwを作成
プロジェクト直下にlibsディレクトリ、assets直下にwwwディレクトリを作成します。


2-3. jsを配置

phonegap/androidのディレクトリからコピーします。
※ 今回www以下にjsディレクトリを作成して配置します。



2-4. jarをlibs以下に配置しビルドパスに追加

phonegap/androidのディレクトリからコピーします。
配置すると↓こんな感じです。


ビルドパスに追加します。

追加すると↓こんな感じです。



2-5. Activityクラスを改修
↓このように改修します。(改修箇所は赤枠3か所)



package com.blogger.ryooo321.android.multipos6;

import com.phonegap.*;
import android.os.Bundle;

public class Multipos6Activity extends DroidGap {
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        super.loadUrl("file:///android_asset/www/index.html");
    }
}



2-6. AndroidManifest.xmlを改修
↓このように改修します。(改修箇所は赤枠2か所)




<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.blogger.ryooo321.android.multipos6"
    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="7" />


    <application

        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name" >
        <activity

            android:label="@string/app_name"
            android:name=".Multipos6Activity"
            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>


2-7. index.htmlを配置
wwwディレクトリ以下に配置します。



<!DOCTYPE HTML>
<html>
  <head>
    <title>PhoneGap</title>
    <script type="text/javascript" charset="utf-8" src="js/phonegap-1.0.0.js"></script>
  </head>
  <body>
    <h1>Hello World</h1>
  </body>
</html>

2-8. xmlディレクトリを配置
phonegap/androidのディレクトリからコピーします。(plugins.xmlごと)

3. 実行
エミュで起動すると↓こんな感じです。

次はこれにjquery-mobileを入れてみます。