月別: 2012年8月

リアルタイムWeb
リアルタイムWebは
サーバーのデータ更新を
リアルタイムに反映するWeb技術
身近なのは
Gmailのオンラインユーザー確認
とか
Facebookのいいねボタンが押されたら即座に通知とか
これらの動作は
Webサーバーが
クライアントのWebブラウザーへ
押し込むので
プッシュといわれる
一番ストレートな手法は
ボーリング
これはjava scriptで
クライアントから
サーバーに定期的にリクエストを送る
ただし、速度はミリ秒単位
これで、サーバー側で何か状態が
変化しているなら
それに応じた処理をする
欠点は
サーバーの状態が変わらないと
リクエストは無駄になるし
ミリ秒単位でずっとアクセスするから
アクセス数が非常に多くなる
このアクセス数大量の問題を解決するため
Cometが編み出された
こっちは
クライアントからのリクエストを受け取ったサーバーは
応答を保留したまま
コネクションを張りっぱなしにする
これなら
サーバーの状態が変化しないかぎり
応答を返さない
クライアントの数だけ
接続を維持するから、同時接続数や
コネクションを維持する時間を多めに設定する必要はあるけど
ボーリングよりはいい
以前やった
javaのコネクションプールに近いかもしれない
ちなみに、現在注目なのが
WebSocket
WebSocketは
サーバーとクライアントで
効率的な双方向通信をする
これは
HTTPを使わず
サーバーとブラウザーで
専用通信路を使うやり方
これら3つのやり方ができるのが
Node.js
の
Socket.IOパッケージ
なぜ3種類かというと
WebSocketに対応していないブラウザーもあるから

プレイス情報をBundleに格納したら
それをパラメータとして
Graph APIを使ってプレイス一覧を取得
mAsyncRunner.request(“search”,params,new RequestListener(){
プレイス一覧のリクエスト結果は
RequestListenerのパラメータである
response
にJSON形式のデータとして返却される
データの内容は下記のようになり
候補が複数ある場合、配列で格納される
リクエスト結果で取得できるプレイス情報
“data”:{
“name”:”プレイス名”,
“category”:”プレイスのカテゴリー”,
“location”:{
“street”:”番地”,
“city”:”市町村名”,
“state”:””都道府県名”,
“country”:”国名”,
“zip”:”郵便番号”,
“latitude”:緯度,
“longitude”:経度
},
“id”:”プレイスID”
}
プレイス情報をBundleに格納したら
それをパラメータとして
Graph APIを使ってプレイス一覧を取得
mAsyncRunner.request(“search”,params,new RequestListener(){
プレイス一覧のリクエスト結果は
RequestListenerのパラメータである
response
にJSON形式のデータとして返却される
データの内容は下記のようになり
候補が複数ある場合、配列で格納される
リクエスト結果で取得できるプレイス情報
“data”:{
“name”:”プレイス名”,
“category”:”プレイスのカテゴリー”,
“location”:{
“street”:”番地”,
“city”:”市町村名”,
“state”:””都道府県名”,
“country”:”国名”,
“zip”:”郵便番号”,
“latitude”:緯度,
“longitude”:経度
},
“id”:”プレイスID”
}

スマホでのイベント処理
スマホではマウスを使わないから
mousedownの代わりに
touchstart
（画面にタッチする）
mousemoveの代わりに
touchmove
（タッチしたまま指を動かす）
mouseupの代わりに
touchend
（画面から指を離す）
を使う
スマホ対応にするときに
もうひとつ気をつけるのが
e.preventDefault();
これはタッチ操作のイベントのデフォルト操作を無効化するというもの
touchstartイベントで
これを使うと
デフォルト操作が無効になり
ページが縦スクロールしなくなる
Androidではこれをやらないと
touchmoveイベントがタッチ直後しか発生しないため
線が書けないということになってしまうので注意

Viewportについて
viewportを使えば
Webブラウザーの横幅
（表示領域）
をWebアプリから指定できる
Webアプリ側で
Webブラウザーの
表示領域のサイズ
拡大、縮小操作の可否
拡大率などを指定すれば
スマホの設定や画面サイズの違いを
気にせずに意図した表現ができる
Viewportで指定可能なプロパティは
width
表示する幅
有効範囲 200~10000px
デフォルトだと980
device-width
なら
ハードウェアの画面幅になる
height
表示する高さ
223~10000pxまでが有効範囲
デフォルトだと980
device-heightで
ハードウェアの画面の高さ
minimum-scale
最小スケール
0~10.0までが有効範囲
デフォルトは 0.25
maximum-scale
最大スケール
0~10.0までが有効範囲
initial-scale
初期スケール
範囲は
minimum-scale
maximum-scaleから測定
デフォルトだと、
表示領域に応じ自動調整
user-scalable
ユーザーが拡大、縮小できるかどうかを
yes noで指定

ブラウザーでバグ取り
バグ取りに使うのは
Chromeのデベロッパーツール
と
javascriptの
console.log()
ちなみに、Chrome以外だとSafariにもある
Firefoxなら firebug
というアドオンを入れれば同様にデバッグ可能
ちなみに、javascriptじゃなくて
C言語なら
printfデバッグという手法がつかえる
javascriptで
よくあるバグとしては
document.getElementById
で要素が取得できていない
イベント名のスペルミス
座標が正しく変換できてない
などなと

javascriptメモ
document.getElementById
は
id属性から要素を取得する関数
getContext()
で描画用オブジェクト取得
e.target.getBoundingClientRect()
canvas要素のコンテンツの左上の座標取得
lineWidth
線の太さ
e.clientX – rect.left
マウスのX座標から左余白を引く
e.clientY – rect.top
マウスのY座標から上余白を引く
mousedown
マウスのクリック
mousemove
マウスドラッグ
mouseup
マウスボタンを離す
beginPath()
描画用オブジェクト
Path
は線
canvasで描く画像は
座標から座標までの線の集まりで
線の曲がり方、太さなとをデータ化する
moveTo()
で座標移動
lineTo()
線を引く
stoke()
実際に描画
closePath()
線の描き終わり

CSSではボックスレイアウトを採用
これは
各要素をボックス単位でレイアウトするもの
ボックスには様々な種類があり
ブロック
インライン
インラインブロックなどがある
どのボックスにするかは
displayプロパティで指定
ブロックボックスを指定しないと
Webブラウザーの標準設定になる
ｐならブロック
imgはインラインブロック
paddingは余白設定
borderは
コンテンツを囲む境界線の定義
境界線の有無
大きさ、色を指定できる
marginは境界線の外側の余白設定
複数のボックスをレイアウトするとき
ボックス間の間隔を取るのに利用
paddingとmarginは間隔の設定だけど
背景に対しての動きが違う
背景色、背景画像を設定するとき
paddingたと表示される
marginだと表示されない
どちらを使えばいいか悩んだら
border:1px solid;
として
境界線を表示するとわかりやすい
ちなみに solidは線を引く

サーバーサイドJavascript Node.js
Node.jsは
非同期処理を特徴としたJava scriptの処理系
非同期処理とは
実行の順序が前後しても問題ない処理
処理系は
プログラミング言語を実装したソフトウェアのこと
つまり、複数のクライアント接続を受けて処理できるサーバーソフト版
Javascriptのようなもの
Webサーバーソフトとしては
Apacheが有名だけど
今回はNode.jsを使用
インストールは
sudo apt-get install build-essential
sudoapt-get install libssl-dev
sudo apt-get install curl
で必要なパッケージインストールしてから
nvmに必要なGitHubを使用
sudo apt-get install git-core
git clone git://github.com/creationix/nvm.git ~/.nvm
これで、nvmがダウンロードされるので
source ~/.nvm/nvm.sh
で準備完了
これで、
nvm install v0.6.5
でインストール
これだけだと
ログアウトしたら設定が消えるため
sudo apt-get install vim
でエディタをインストールして
vim ~/.bashrc
でファイルを開いてから
最終行へ
source ~/.nvm/nvm.sh
nvm use “v0.6.5”
を追記して保存
あとはWebサーバーとして動作するのに
必要なライブラリを
npm install connect
でインストール
npmは
Node Package Managerで
ubuntu の apt-getみたいなもの
今回は
connectパッケージインストールしてます
では、Webサーバーとして起動
まずは
mkdir ~/public
cd
node -e “var connect=require(‘connect’); connect(connect.static(__dirname+’/public’)).listen(8080);” &
を実行
nodeコマンドは
Node.jsを実行するプログラム
_dirname
には
Node.jsで実行する
Java scriptを配置するパスを格納
listen(8080)
は使用するポートを指定
今回なら8080
&はLinuxでおなじみのバックグラウンドでの
実行
Webサーバーを停止するには
jobsコマンドでジョブ番号を調べて
kill %ジョブ番号
とします
ジョブ番号1なら
kill %1
あとは
サーバーにアップしたいファイルや
ブラウザーでみたいファイルを作るなら
~/public
の下に作成していきます

メール機能を利用したいアプリアプリを、呼び出すIntentの例
//暗黙的Intentでメール機能を持つアプリの呼び出し
Uri uri = Uri.parse(“mailto:hogehohe@mail.com”);
Intent intent = new Intent(Intent.ACTION_SENDTO,uri);
intent.putExtra(Intent.EXTRA_SUBJECT,”メールの題名”);
intent.putExtra(intent.EXTRA_TEXT,”メール本文”);
startActivity(intent);
これの解説
Intentフィルターに
Intent.ACTION_SENDTO
をセットし
startActivity
を呼び出すと
端末内にインストールされている
メール機能を持ったアプリが
リスト一覧で表示される
同様に
カメラとかナビ、マップも可能