DVWA(やられサーバー）

DVWAは
Web アプリ監査ツールのテストに使うやられサーバーです

DVWA は
Damn Vulnerable Web Application
の略

Random Stome というオープンソースプロジェクトで作成されています

これは、複数の脆弱性をもつテストのための Web アプリです

これを動かすには
PHP と MySQL が必要です

これらの機能をもったサーバでもOKですし
XAMPPでも使えます

まずは、DVWA をダウンロードします
http://www.dvwa.co.uk/
へアクセスし
download をクリックしてダウンロードします




ダウンロード完了すると
DVWA-1.0.7.zip
がダウンロードされているので
unzip DVWA-1.0.7.zip
で解凍し

ドキュメントルートへ移動します
web サーバー（ubuntu)なら
/var/www/

xampp なら
/opt/lampp/htdocs/
へ移動します

今回は
/var/www/
へ移動しました

cp -rp dvwa /var/www/

これで、ブラウザから
http://localhost/dvwa
とすると
エラーメッセージがでます

これは、データベースが作成されていないためです



このため here をおして設定画面に写ります


先に、データベースのセッティングを行います

端末を開いて
vim /var/www/dvwa/config/config.inc.php
で設定ファイルを開き
１８行目の
$_DVWA[ 'db_password' ] = '';
に MySQL の root パスワードを入れます

$_DVWA[ 'db_password' ] = 'rootパスワード';
というように '' の間に入力します

終わったら保存して閉じます

次に、 Create/Reset Database
をクリックして　データベースを作成します



これで、以下のような画面ができれば成功です



ここまで完了したら、ログインしてみます

http://localhost/dvwa
へアクセスすると
ログイン画面になります


デフォルトのパスワードなどがわからなかったので
dvwa admin password
で検索しました

デフォルト設定のままなら
ユーザ名 admin
パスワード password
でログインできます

使いかたについては
Youtube が参考になります

DVWA-SQL INJECTION : LOW Level
で検索すると
http://www.youtube.com/watch?v=oMV0JZVxvdQ
にあるように、様々な事例がでます

英語の説明ですが、使いかたを見るには充分と思います

BackTrack 5 R1 apache2 起動

BackTrack 5 R1
で
apache2 起動するには

端末を Ctrl + Alt + c
で開いて

service apache2 start
で起動します

起動確認するには
firefox &
で
firefox を起動し
Alt + d で
URL 入力へ移動し
localhost
で
以下のような画面が表示されれば成功です



今回は
8 Steps How to Share Folder in Backtrack 5 R1 to Make Accessible in Windows
を参考にしました

BackTrack 5 R1 インストール

セキュリティの勉強のため、
backtrack 5 R1 をインストールします

すでに新型がでていますが
今回あえてこれをインストールしたのは
セキュリティの実験のためです
backtrack 5 R1 に収録されている
Apache つまり web サーバーには脆弱性があります

これを
Apache Killer というツールを使った場合、
どのような状態になるかを調べるためです

最新の Apache ならおそらくは対応されてますが
それができない場合の対処としては
mod_rewrite などを使い
Range ヘッダーで範囲指定を行う数を制限するという方法もあります


インストールするのは
VMware Player の仮想マシンです

今回は、

Hacker Japan (ハッカー ジャパン) 2011年 11月号 [雑誌]

に収録されていたISOファイルを使いました

ダウンロードしようとしたのですが、すでに
新しいものになっていたため、これを使いました




VM で作るときには
OSを Linux で選択し
Ubuntu ベースなので、ubuntu を選択します

Back Track 5 R1をVMWare Playerで動作させる方法
には windows で行うときの方法が掲載されていました

backtrack 5 を起動した時には
startx
を実行しないと、GUI画面が表示されず
端末のまま操作することになります

また初期のままだと
root パスワードが
toor という状態なので、
passwd コマンドを使って
新しいパスワードを設定するようにしましょう

セキュリティイベントCTF (Capture The Flag )

CTF (Capture The Flag )
とは

世界各地で開催されているセキュリティ技術を競うコンテストの総称になります

クイズ形式や模擬的な攻防戦などがあります

日本でも開催されています
http://www.seccon.jp/

また、セキュリティ関連だと
http://ja.avtokyo.org/projects
があり、
日本から DEFCON CTF へ出場、入賞することを目的としたプロジェクトもあります

また、韓国で
CODEGATE CTF という国際的なセキュリティカンファレンスが
2008年から開催されています
URLは
http://www.codegate.org/
となります


昨年から
CODEGATE CTF で優勝したチームには
アメリカで開催される
世界最高峰のCTF　DEFCON　CTF　本戦にでられるようになったようです

CODEGATE CTF で出題されたのは
・Vulnerab
リモート Exploit,Web関連

・Binary
バイナリ解析

・Network
ネットワーク解析

・Forensics
フォレンジック関連

Misc
トリビア系

というものだったようです

wireshark でUSB監視

wireshark で　USBメモりのデータの流れをチェックできます

ただし、条件つきですが

Linuxカーネルで
usbmon
が有効になっていることが条件です

backtrack5 SR1
ubuntu
のカーネルでは有効なので、問題ありません

やりかたは単純です

まず、USBメモりを Linux パソコンに指します
今回は、
ubuntu 11.10 64bit で行っています

そして、lsusb で確認します




下の赤枠でかこってあるほうが
USBメモりを指した後です
デバイスが追加されています

次に wireshark を起動します
管理者権限がほしいので
sudo wireshark
で実行し、パスワードを入力します

警告などがでますが、きにせず起動します

起動後、USBをキャプチャすればOKです

パケットからUDIDを調べるには

パケットの中からUDIDが流れているかを調べるには

wireshark を起動して
リアルタイムパケットを取得し

Edit > Find Packet を選び

検索ダイアログが立ち上がるので、
string のところへラジオボタンをチェックして
Filter のところへ
UDID の一部、もしくは全部を入力

もし該当があれば緑色になり、該当しないなら
Filter の枠が赤くなります




乗り換えアプリだと、
このUDIDがGETリクエストのパラメータに含まれることもあります

iPhone のUDID

UDID　とは
Unique Device Identifier

これは機器固有の端末番号のようなもので
ほぼ盗聴不可能なネットワークである携帯電話網ではこれを利用して認証を行うこともある
いわゆる簡単認証というもの

ただし、これをインターネットで使うアプリでやってしまうと
盗聴でなりすまされる可能性が極めて高いので
iOS 5 からは非推奨となっています

UDIDを合法的に取得するには
端末を iTunes につないで
デバイスのアイコンをクリック

シリアル番号をクリックすると
識別子という数値がでてきます

これがUDIDになります

また、アプリの

UDIDit
でも確認できます

Facebook ページにアプリを追加するには

最近、講習の準備などで忙しくて滞っていた facebook アプリ開発の勉強を再開

今回も参考書籍は
10日でおぼえるFacebookアプリ開発入門教室 (10日でおぼえるシリーズ)




実際には10日で覚えるのは無理な気がするけど
まぁそれはおいておきましょう

今回は
facebook ページにアプリを追加するところでつまづきましたのでメモ

書籍によれば
browser を起動して

http://www.facebook.com/dialog/pagetab?app_id=アプリID
&redirect_url=http://www.facebook.com

とかいてあるけど、
これだとエラーとなってしまいました

これを
http://www.facebook.com/dialog/pagetab?app=アプリID
&next=http://www.facebook.com
とすると、ページタブを追加する画面がでました

今回は、
facebook ページ　アプリ　追加
で検索した結果表示された

ページタブアプリ(iframe)の作成とFacebookページへの追加方法
を参考にさせていただきました

最近のマルウェア

現在のマルウェアの多くはプログラムの実行を除いて
web ページ閲覧時とか
USBメモりなどの外部記録媒体を接続した時に感染するものがほとんど

このとき、感染するプログラムは
ダウンローダーとよばれる小さいプログラム

このダウンローダーは
ウイルス本体やアップデートをネットワーク越しに取り込んで実行する
というもの

最近の例をだすと
スマホのアプリの自動アップデートにちかい動き

このような2段階攻撃になったのは

機能部分まで含んだプログラムだと
サイズが大きくて、アンチウイルスとかで見つかりやすい
そして
最新のマルウェアを仕込みやすいということ

そして、スマホに多かったマルウェアのように
最近のものは
自動更新機能とか
外部への連絡通信機能も持っている

よくある、アップデート攻撃もこれとにたような動作かもしれない

このような動きをしている場合
wireshark などで通信を取得すれば
怪しい動きなどの詳細データを得ることができるようだ

これが、 wireshark で実際に読み込んだ内容

パケットは１つしかない
source（送信元） である 213.76.212.22
から
Descriction(送信先）になる 65.165.167.86
への
UDP パケットのみ

ちなみに、UDP 1434 ポートは
MS-SQL-M
というSQLで使うポート

SQLはデータベースにつかう言語

普通に考えれば、
SQLはやりとりする範囲のPC
つまり、社内などのローカル環境のみのはず


でも、これだと、送信先は外部なので、かなり怪しい
というか、外部にデータベース内容がでているので、アウト


意外にパケットが少なかったけど
slammer そのものが
１つのパケットからなるワームということ

length （ファイルの大きさ）
が
418
とあるように
418 byte
しか大きさがない

実際には
Data (376bytes)
とでているように
376byte しかない

これを見てみると
データ部分の最初が
04 01 01 01 01
というようになっている

この　01 01 を繰り返すのは
バッファオーバーフローを狙った時によく見られる動作
なので、これもかなり注意するところ


そして
h.dllhel32hkernQhounthickChGetTf
という文字がデータから確認可能

この文字列は Windows API らしいけど
MS-SQL-M の場合、
ホスト名やポート番号が含まれても
dll
Get
のようなAPIの文字列は含まない



これらの結果から
・外部に送信されている
・使われているのはデータベースのポート
・APIの文字列を含んだ文字列が送信されている
・バッファオーバーフロー攻撃の可能性あり

というように解析ができる

ネットワーク解説をするには
source の相手のIP
送信しているポート
通信しているパケット量やエラーメッセージ
データに含まれている文字列

これらに注目するようだ

slammer Pcap をwireshark で読み込む

slammer のキャプチャファイルを読み込むには

sudo wireshark
でwireshark を起動して
ファイルを開きます

開く前の注意点として
アンチウイルスソフトを停止しておく必要があります

理由は、Pcap ファイルは
バイナリで攻撃コードを含むため
ウィルスとしてして隔離されてしまいます


wireshark は管理者権限で動かしますので
fire > open
でダイアログがでるので

ファイルシステム　> home > ユーザ名 > ダウンロード >
slammer.pcap
で開きます

SQL slammer について

この SQL slammer は
2003 年に発生した Server または
MSDEに含まれるバッファオーバーフローの脆弱性をついて
感染するワーム

このワームは
UDP 1434 ポートを利用して感染を広げ
感染したPCも同じパケットをコピーして
ランダムなIPに攻撃を繰り返す
典型的感染パターンをもつ

ワームに感染したときの特徴
PCが大量の
UDPパケットを放出するので、
ネットワーク全体が過負荷になり通信不能になる

ハブのアクセスランプから
多量の通信が発生しているのは確認できるけど
感染PCを再起動すると、元に戻ってしまう

これは、このワームがメモり常駐型のため
再起動すると消滅するため

しかし、脆弱性がそのままだとまたそのうち感染してしまう

こういったタイプの感染の場合
再起動するとウイルスはいないため
ウイルススキャンしてもなにも発見できないということになってしまう

こんなときには wireshark でパケット解析をするとよいらしい

wireshark の通信サンプルファイル

Hacker Japan (ハッカー ジャパン) 2012年 05月号

特集で wireshark をつかってマルウェア解析というものがあったので、
実践してみました




まずは、サンプルを取得するため
http://wiki.wireshark.org/SampleCaptures
へアクセスし

slammer.pcap

をダウンロードします

かなり下のほうでわかりにくいので、
chrome を使っているなら
Alt + e
をおして
検索を選択、もしくは f をおすと、検索窓が
画面の右上にでるので、

これに
slam
と入力すれば
slmamer.pcap のところまで移動できます



このサイトには
HTTP　や　POP　などの基本的な通信パターンのほかにも
DNSへの Exploit 実行記録などもありますので、
さまざまな通信のログをみることができます

zen touch2 実機で実験

Android の実機で検証するため
Zen touch2 を実験機にしてみました

Creative ZEN Touch 2 Android エンターテイメントプレーヤー 8GB ブラック ZN-T28G-BK




以前、
Zen touc ２　を開発環境に使用
で行ったように、あらかじめ設定する必要があります

開発環境は ubuntu 10.10 です
Mac の場合は
MacOSX で Zen Touch 2 (Android2.2)を開発端末にしてみる
で紹介されています


lsusb でベンダーIDを
調べます

Bus 002 Device 002: ID 041e:4164 Creative Technology, Ltd

次に
sudo vim /etc/udev/rules.d/70-android.rules
で
一般ユーザでも使えるように
SUBSYSTEM=="usb",SYSFS{idVendor}=="041e",SYMLINK+= "android_adb",MODE="0666"

を記述しておきます

ちなみに、041e
は16進数表示です

次に、echo 0x041e >> ~/.android/adb_usb.ini
を実行してベンダーIDを登録します

再起動が必要なので
adb kill-server
で一度とめて

adb start-server
で再起動します

adb devices
で
List of devices attached
1C110805D7245246 device
となれば成功です

ただし、注意点として
Android 2.2 以上のものは実機検証できません

これは、zen touch2 のOSがアップデートしても
Android 2,2 のためです

試しに
Android 2.3 の phonegap アプリを実行しましたが
エミュレータでは起動しますが
Zen touch2 ではエラーとなり
インストールできませんでした

今後、Android 4.0 以降のアプリを実機検証するには
対応した機種が必要となります

Android 2.3 以降で実験につかえそうな端末を
見つけたら、また書いていきます

とりあえず、スマートフォンではなく
ipod touch とかのようなものがベストです

zen touch2 android 2.2へ

Creative ZEN Touch 2 シリーズ ファームウェア（本体ソフトウェア） アップデート手順

を参考に
Android 2.1 から Android 2.2 へアップデートします

ちなみに、今回使うのは
ZEN Touch 2 with GPS 8GB
なので
Creative ZEN Touch 2 with GPS ファームウェア 2.00.23
を適用します

本当は、Android 4.0 とか Android 2.3 以降のものを
使いたいのですが
予算的に厳しいので、当分はこの機体を実験機に使用

これを使うことで、アプリ開発の練習に
スマートフォンを実験に使わずに検証もできます

アプリ開発を初めて行うにはよいかもしれません
さすがに、経験なしで自分の携帯を実験に使うには気が引けるという人も
これならそこまで気にしなくてよいのではないのでしょうか

開発環境は ubuntu なので、ドライバインストールなどはなく
端末から機体の登録などを行います
Mac の場合も同様に、ドライバインストールはないようです
Windows の場合はドライバインストールが必要になります

エミュレータでも検証はある程度はできますが
カメラアプリなどはできませんし、
NFCも残念ながら実機検証しないとできません

あと、この機体をアプリ開発以外にも使う用途があります
それは、サードパーティアプリのインストール

通称、野良アプリをいれると、セキュリティに問題があることもありますが
野良アプリ専用端末と割り切れば
いろいろとためすこともできます

Yahoo 地図の復習

Yahoo!デベロッパーネットワーク - YOLP(地図)


Yahoo地図のjavascript API を使って地図を表示できます
java script マップの場合
ページ遷移せずに　ドラッグ＆ドロップで
地図の場所を動かしたり尺度変更などが可能

ちなみに、スマートフォンでこれを使うと

タッチ操作による自動スクロール
一部端末によっては
ピンチ操作で地図尺度の変更ができます

ただし
ピンチズーム機能
Y.Polyline、Y.Polygon、Y.Circleオブジェクトからのクリックイベント通知
がAndroid だとできません

地図を表示するには
Yahoo!アプリケーションIDが必要
これに関しては
Yahoo Maps API

に以前かきましたので、それを見ながら復習しました

https://e.developer.yahoo.co.jp/dashboard/
で
取得したYAHOO!アプリケーションIDを見れます

そして、IDを含んだリクエストURLに対して外部java script を読み込み
どんな地図を表示したいか設定

地図APIにアクセスするには

<script type="text/javascript" charset="utf-8" src="http://
js.api.olp.yahooapis.jp/OpenLocalPlatform/V1/jsapi?appid=
YahooアプリケーションID
"></script>

となります

地図を表示するには

<!DOCTYPE html>
<html>
<body>
<div id="map" style="width:400px; height:300px"></div>

<script type="text/javascript" charset="utf-8" src="http://js.api.olp.yahooapis.jp/OpenLocalPlatform/V1/jsapi?appid=アプリケーションID"></script>
<script type="text/javascript">
window.onload = function(){
var ymap = new Y.Map("map");
ymap.drawMap(new Y.LatLng(35.66572, 139.73100), 17, Y.LayerSetId.NORMAL);
}

</script>
</body>
</html>

というようになります



ymap.drawMap(new Y.LatLng(35.66572, 139.73100), 17, Y.LayerSetId.NORMAL);
は初期かした地図の表示で
35.66572, 139.73100　が中心の緯度経度
17　がズームレベル
Y.LayerSetId.NORMAL が
レイヤーセットIDになります

今回の　Y.LayerSetId.NORMAL
は標準写真で、
これを
Y.LayerSetId.PHOTO　にすれば航空写真に
Y.LayerSetId.B1　なら地下街
Y.LayerSetId.OSM　なら　最近話題の　OpenStreetMap
というようになります

ymap.addControl（）
でコントロールの追加ができます

Y.SliderZoomControlHorizontal
は
地図の縮尺を変更するための横長スライダーをつけます

Y.SearchControl()
で
地図検索のユーザーインターフェースを表示
つまり、検索枠を追加します


Y.CenterMarkControl
で地図の中心位置を表示します

ymap.bind
はイベントに対する動作を設定します
このイベントとは
地図の移動やクリックなど
のことをいいます

簡単サンプルとして、地図をマウスクリックしたときの動作なら
ymap.bind('click', function(latlng){
alert(latlng.toString());
});
となります

click を moveend にすると
マウスによるドラッグやY.Map.panTo()メソッドなどによって地図の中心位置が変化した
ときの動作になります

この時点で中心位置の値は更新されていますので
Y.Map.getCenter()
でで新しい中心位置の緯度経度が取得できます

ｕｂｎｔｕで PDF 編集

日経 Linux (リナックス) 2012年 06月号 [雑誌]
に inkscape を使ってPDF編集できると載っていたので実践してみました




sudo apt-get install inkscape
でインストールします

inkscape &
で起動して編集を行います

今回は実験として
医療保険の明細書のPDFをダウンロードして実験してみました
PDFファイルは
http://www.google.co.jp/url?sa=t&rct=j&q=&esrc=s&source=web&cd=1&ved=0CHMQFjAA&url=http%3A%2F%2Fwww.nta.go.jp%2Ftetsuzuki%2Fshinkoku%2Fshotoku%2Fyoshiki02%2Fpdf%2F003.pdf&ei=9q-zT-rNIaWfmQXfl8WdBQ&usg=AFQjCNGPhAkcE_d-CegpR9sayUYXxWD0TA&sig2=BSDF41boCgiLN_86o3YN3g
からダウンロードしました

ほかにも、医療保険　PDF
と検索すればでてきます

これを編集してみました

ファイル > 開く　
でダウンロードしたファイルを指定します

次に
文字をいれるために
A　とかいてあるアイコンをクリックします



文字を書き込む枠の範囲を決めるのですが
残念なことに、設定した枠が文字を書き込むときには見えません

また、英語だと問題ないのですが
日本語入力しようとすると、記入している途中の文字が見えません
Enter キーをおして確定すれば見えるのですが...

設定した文字を移動するには
↖のアイコンをクリックして、移動するようにします



使ってみた感想としては
ちょっと使いにくいかんじでした

スマホの操作について

スマートフォンに買えた場合、今までの携帯とは違い
いろいろな操作ができるようになります

何気なくやっている操作でも、説明などをみてわかりにくいこともあるので
少しメモしてみました

スワイプやピンチアウトってどんな操作?【iPhone操作一覧】

タッチアンドホールド
画面長押し

スワイプ
画面を掃くような操作と説明されますが
画面を指でなぞるようにすればOKです

シェイク
スマホを振ります

たぶん、シェイクが一番携帯のときに使わなかった機能だと思います

タッチイベントは jQuery Mobile で設定できますが
タップ系とクリックイベントは
衝突してしまいますので、どちらか片方になります

英語サイトになりますが
http://jquerymobile.com/demos/1.1.0-rc.1/docs/api/events.html
に解説もあります

wordpress 関連のメモ

wordpress 関連の情報を集めてみました

かなり詳しくのっていたので
後でまた見てみようと思います

初めてWordPressを使ってみようという人の為の予備知識

あと、ブログ的な使われかたが多いですがCMSとしても使えます

これに関しても
WordPressでブログじゃないWebサイトを作るときのいろいろ（サンプル付き）
に詳しく載っていました

現在、PhoneGap の実践のため、
jQuery Mobiel と平行して行っています

月末には片付くと思うので、そこから断念していた
AmazonEC2 でのサーバー構築といっしょに
wordpress と facebook アプリ作成を再開しようと思います

jQuery Mobile デザインのカスタマイズ

Jquery Mobile でボタンの色などを変更できます

jQuery Mobile Framework - Static Containers, States

でサンプルを見ることができます
ちなみに、こちらは英語なので、わかりにくいときには

ボタンのテーマ色

をみるとわかりやすいです

ベースカラーは5種類あり、
A～Eの表記をします

A＝黒
B＝青
C＝灰色
D＝白
E＝黄色

となっています

指定するには
data-them="b"
というように指定します

<button value="ボタン" data-theme="e"></button>
とすると、ボタンの色が黄色になりますし

<div id="top" dara-role="page" data-theme="e">
とすれば
div タグのところに反映されます

firefox をスマホブラウザもどきへ

firefox をスマホブラウザもどきにする方法です

今回の参考サイトは
iPhone/Android をブラウザで再現
です

https://addons.mozilla.org/ja/firefox/addon/user-agent-switcher/
へアクセスし
Add to Firefox
をクリックします




ダウンロードしたら
ダイアログがでてくるので、
今すぐインストールをクリックします




firefox を再起動し
ツール > Default User Agent > iPhone 3.0
で
設定完了になります

Page transitions

で
ページのアニメーション効果を変化するのを体験できます

page をクリックすれば
新しくページを開くときのアニメーション

dialog
をクリックすれば
新しくダイアログを開くときのアニメーションを実感できます




これは
data-transition="アニメーション効果"
というように指定します

例えば、
data-transition="slide"
とすれば、スライドするというようになります


指定をするには、例えば
a　タグでリンク先をひらくときなら
<a href="index.html data-transition="slide">戻る</a>
となります

jQueryMobile でリンクをボタンにするには

スマートフォンの場合、画面がパソコンより小さいので
間違えてクリックする可能性が高いため、
できだけ
リンクなどは
ボタンにかえるようにします

やりかたは簡単で
a タグのリンクの場合
<a href="index.html" data-role="button">
戻る
</a>
というように、

dara-role="button" を
追記するとボタンになります

英語のサイトになりますが
Adding Icons to Buttons
でアイコンの一覧もでています

ちなみに、アイコンをつけるなら、
data-icon 属性を使います
もし、戻るアイコンをつけたいのなら

<a href="index.html" data-role="button" data-icon="back">
戻る
</a>

というようにかきます

jQuery Mobile での外部リンク設定

jQuery Mobile で外部リンクをはるには
aタグに
rel="external"
を追記します

これは
jQuery Mobile が基本的に ajax による画面遷移をしているためです
このおかげで画面をリフレッシュせずに切り替えできるのですが
外部サイトにリンクしたり
javascript ファイルを読み込んだりすると
不具合がでる可能性があります

このため、
ローカルサーバーなどなら
<a href="ローカルファイルのパス" rel="external">リンク</a>

外部へのリンクなら
<a href="リンク先のURL" rel="external">リンク</a>

というようにします

例えば Amazon なら
<a href="ｈｔｔｐ：//www.amazon.co.jp" rel="external">アマゾンへとぶ</a>
というようにします

jQuery Mobile で戻るボタン設置

jQuery Mobile で戻るボタンを設置するには
data-add-back-btn="true"
を追記します

追記するのは
<div id="ページID" data-role="page" >
に追記します

<div id="ページID" data-role="page" data-add-back-btn="true">
これで、戻るボタンが追記されます

ひとつのHTMLファイルで複数のページ

jQueryMobile を使うことにより
ひとつのHTMLファイルで複数のページを作成できます

正確には、
data-role="page" の id で分けているだけです

data-role="page" のid は新聞や雑誌の
記事のカテゴリーみたいなものと思ってください

以前、解説したように

Query Mobile では
page という概念があり、

１つのページに
ヘッダー
コンテンツ
フッター

という構成になります
ページは紙面 data-role=”page”
ヘッダーは見だし data-role=”header”
コンテンツは記事 data-role=”content”
フッターは下の見だし data-role=”footer”

となっています

なので、この page の id は
～の特集のような感じです

例えば

<div id="週間天気" data-role="page">
<div data-role="header">
<h1>明日の天気</h1></div> <!-- /header -->
<div data-role="content">
天気図一覧
</div> <!-- /content -->
<div data-role="footer">
<h2>どこかの広告</h2></div> <!-- /footer -->
</div> <!-- pageの閉じタグ -->

<div id="テレビ欄" data-role="page">
<div data-role="header">
<h1>今日のニュース</h1></div> <!-- /header -->
<div data-role="content">
為替動向
</div> <!-- /content -->
<div data-role="footer">
<h2>住宅ローンの広告</h2></div> <!-- /footer -->
</div> <!-- pageの閉じタグ -->

こんなかんじで
HTMLを新聞紙
id を特集記事
と考えればわかりやすいかも

このページの概念ができた背景として
スマートフォンは通信が３Gを使うのがほとんどのため
なるべく通信回数を減らし
快適にweb アプリを使うためというものがあります

あと、id は同じHTMLファイルの中で被ることがないものにしないとダメです

id を設定すれば
あとは
a タグで
通常のHTMLのときのように

<a href="#テレビ欄"><今日のテレビ番組情報</a>

というようにページ内リンクを作成できます

ページ内リンクをタップすると
画面がフェードして画面遷移します

jQueryMobile でテキストリンクをボタンへ

スマートフォンの画面はパソコンなどに比べて小さいため
a タグでつくったテキストリンクを
間違えてクリックすることも多々あります

このため、一般的な対策としては
アイコンにするか、ボタンにする
というように、わかりやすさを求めます

リストビューメニューをボタンにしたいなら
リストを形成している
ul　タグ
liタグの ulタグ
に
data-role="listview"
を追記します

ソースをかくと

<ul data-role="listview ">
<li><a href="http://www.yahoo.co.jp/">ヤフー</a></li>
<li><a href="http://google.co.jp/">グーグル</a></li>
<li><a href="http://www.ａｍａｚｏｎ.co.jp/">アマゾン</a></li>
</ul>


さらに
data-inset="true"
も設定すると、角が丸くなって見栄えもよくなります

<ul data-role="listview data-inset="true"">
<li><a href="http://www.yahoo.co.jp/">ヤフー</a></li>
<li><a href="http://google.co.jp/">グーグル</a></li>
<li><a href="http://www.ａｍａｚｏｎ.co.jp/">アマゾン</a></li>
</ul>

jQuery mobile で作成するリスト Lists
http://billboardtop100.net/2011/02/jquery-mobile-lists.html
を参考にさせていただきました

jQuery Mobile ViewPort 解説

ipod touch とか iPhone で
最適な画面サイズに設定するには
Viewport の設定を行います

これを設定すると
縦横の回転のときの対応
ユーザによるピンチイン・アウトの禁止などの詳細設定も可能になります

参考サイトは
スマートフォン向けページに最適な meta viewport の指定で迷う

Viewportとは？


です

例文として多いのが

<meta content='width=device-width; initial-scale=1.0;
maximum-scale=1.0; user-scalable=0;' name='viewport' />

解説を加えると
width=device-width; initial-scale=1.0;
ページの横幅を、ユーザーが使用しているスマートフォン画面の横幅と等倍になるように
設定

maximum-scale=1.0; user-scalable=0;
ユーザー操作による拡大縮小を禁止

となります

jQuery Mobile の解説

jQuery Mobile の基本的なUIは
ヘッダーとフッター

jQuery Mobile では
page という概念があり、

１つのページに
ヘッダー
コンテンツ
フッター

という構成になります
ページは紙面 data-role=”page”
ヘッダーは見だし data-role=”header”
コンテンツは記事 data-role=”content”
フッターは下の見だし data-role=”footer”

みたいなかんじです

なお page には id をつける必要があります

id は、重複するのはダメなので、被らないように注意が必要です

ソースをちょっと解説用にしてみました


<div id="ページのID" data-role="page">
<div data-role="header">
<h1>見だし</h1></div> <!-- /header -->
<div data-role="content">
内容</div> <!-- /content -->
<div data-role="footer">
<h2>下のみだし</h2></div> <!-- /footer -->
</div> <!-- pageの閉じタグ -->
~
フッターには
広告とかのほかに、
戻るボタンとかなどを配置したりします

ちなみに、よくあるスクロールしても
一番下にずっと広告がでるのは、たぶん、フッターに
data-position="fixed"
がついているからです

ソースにすると
<div data-role="footer" data-position="fixed">
広告じゃなくて、ボタンとかを配置して、常時操作するようにもできます

jQueryMObile 1.1 になって変わったこと

jQueryMObile 1.1 になって変わったこと
についてです


ページアニメーション効果が
turn , flow が増えます

デフォルトアニメーションが
slide から fade へ変更

ページ読み込み中の画面のカスタマイズ

iOS での対応は5以上

一番大きいのは、iOS 5 以上じゃないかなと
OS アップデートしないと使えないわけだし....

ちなみに、latest は最新版だけど不安定
RC とついているのは安定版です