カテゴリー: 未分類

HTML5とストレージ機能

HTML5 とストレージ機能
一般にWebアプリでは
サーバ側にデータを送ったり
Webブラウザーのcookieでクライアント側に保存します
HTML5では
ストレージ機能を使い
MB単位のデータを保存できます
cookieだと、Maxで4KBです
ちなみに、
1MB = 1000KB
となります
つまり、最大容量は
ストレージ機能のほうが1000倍以上あります
HTML5のストレージ機能は２つあり
Local Storage
Session Storage
があり、これらをまとめて
Web Storageといいます
これは、
プロトコル://ドメイン:ポート番号
となります
たとえば、
http://hebereke.jp:8080
というかんじ
local storageは
データの長期保存が可能で
Webブラウザーを閉じても、また同じ画面が開けます
session storageだと
セッションが続いている間だけ保存できます
こちらはブラウザーを閉じると消えます
セッションは
PHPとかでよく使います

live と bind と on

live と bind と on
liveメソッドは
第１引数にイベント名
第２引数に実行したい関数を与えます
liveとbind の違いは
bindは
メソッド呼び出しのときに
HTMLに存在する要素に対して
イベントを設定
liveは
呼び出し以降に追加された要素にも
イベント追加できます
つまり、bindだと
タスク管理アプリとかで
後から新しくタスクを追加したら
イベントが登録されないということになります
かなりややこしいのですか
jQuery 1.7系から
live と bind を集約した
onメソッドが使えるようになりました
Webサイトやブログ、書籍とかで
jQuery1.7未満だと
bind liveでかいてあるのはこのためです

placeholder属性

フォームに説明文追加
普通のWebページなら
ラベルで説明文をつけるけど、
画面の小さいスマホでは向かない
そこで、HTML5の
placeholder属性を使う
これを使えば
フォームに説明文を埋め込めれます
よくあるアンケートとかで
枠に薄くかいてあるのに近い感覚です
使い方は
<input type=”text” name=”name” placeholder=”ユーザー名”/>
とか
<textarea name=”review” placeholder=”感想”/>
というように
わかりやすくなります

CSSとappearance

CSS3と appearance
appearanceは
Chrome Safari などのWebブラウザーが
それぞれ標準でりようしているデザインを
要素に適用する機能　
実験的なサポートが行われている機能
たとえばグラデーションとか
には、先頭に
ベンダープレフィックスがつきます
Chrome Safari Androidのブラウザーなら
レンダリングエンジンに
webkitが使われているから
-webkit
Firefoxなら
-moz
Internet Explorer なら
-ms
となります
逆に、この機能を無効化したいなら
-webkit-appearance:none;
というように
CSSで指定します
似たようなものとして
ul要素で・をつけたくないときに
list-style none
を指定します

WebページでURLパーを隠すには

Webアプリの起動時に
アドレスパーを隠すには
Webブラウザーの仕様を使います
とはいっても隠れているだけで
スクロールすればでます
AndroidとiPhoneは
アプリのウィンドウを
scrollTo関数で動かすと
勝手にURLパーが隠れます
実装は簡単で
window.scrollTo(0,1);
を追記し
ページの読み込みのときに読ませます
これを
javascriptにするか
HTMLで
<body onload=”window.scrollTo(0,1);”>
とします
これで、
Webページの呼び出しのとき
つまりonloadのとき
に
ページをスクロールさせられます
Webアプリの起動時に
アドレスパーを隠すには
Webブラウザーの仕様を使います
とはいっても隠れているだけで
スクロールすればでます
AndroidとiPhoneは
アプリのウィンドウを
scrollTo関数で動かすと
勝手にURLパーが隠れます
実装は簡単で
window.scrollTo(0,1);
を追記し
ページの読み込みのときに読ませます
これを
javascriptにするか
HTMLで
<body onload=”window.scrollTo(0,1);”>
とします
これで、
Webページの呼び出しのとき
つまりonloadのとき
に
ページをスクロールさせられます
注意点としては
コンテンツの縦のサイズを
スマホの画面より大きくしておくこと
画面ピッタリだと
スクロールしないから
表示サイズ以上にしないとだめ
この設定には
CSSの
min-heightを指定します　
このプロパティは
コンテンツの最小の高さを設定します

Socket.IOのインストール

Socket.IOのインストール
Socket.IOをインストールするには
npm install socket.IO@0.8.7
もうちょっと正確にかくと
npm install socket.IO@バージョン
バージョン指定するのは
Node.jsとSocket.IOは
バージョンアップか頻繁で
APIが変更されるから
得点力のバージョンの組み合わせでないと
動かないこともあるので
Socket.IOは
Node.jsのサーバー向けライブラリ
と
Webブラウザーで動くクライアント向けライブラリ
がセットになっている
サーバーとクライアントの両方で
java scriptを使うので
ほとんど同じAPIを提供するため
コードをみたとき
どちらがサーバーでクライアントかが
わかりにくいかも

リアルタイムWeb

リアルタイム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について
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で指定