サンプル一覧を別ウィンドウで表示
- viewportで文字の大きさをスマートフォン用に調整
- HTML5のドキュメントタイプの宣言は<!DOCTYPE html>．HTML4.01よりシンプルに．
- 文字エンコーディングの指定は，meta要素のcharset属性で行う．これもHTML4.01よりシンプルに．
- <meta name="viewport" …>
- PC用に作成されたWebコンテンツをスマートフォンで表示すると，全体が小さく縮小されて表示される．これは，横幅が（デフォルトでは）980pxの仮想的なブラウザに表示した場合のレイアウトを，そのまま実際の幅に収まるように縮小して表示するため．この仮想的なブラウザの表示領域のことをViewportと呼ぶ．
- 従って，Viewportの幅を実際のブラウザの幅に合わせれば，縮小されることはなくなる．その指定をしているのが，「width=device-width」．
- また，「user-scalable=yes」で，ユーザがピンチイン・ピンチアウトによって画面を拡大・縮小できることを表している．「initial-scale=1.0」は縮尺の初期値が1.0であることを表している．
- 単純なCanvas
- 図形を描画するには，Canvas要素とJavascriptを用いる．
- 描画の手順は次の通り．
- canvas要素を取得（document.getElementById())
- canvas要素のコンテキストを取得(cvs.getContext("2d");
- 取得したコンテキストのメソッドを使って描画
- fillStyle，strokeStleでスタイルを指定
- beginPathで描き始めることを宣言
- strokeRect，fillRect，moveTo，lineTo，arc，stroke，fillなどで描画
- 演習5-1参照
- マウスダウンまたはタップで矩形を表示
- マウスダウンまたはタップで円を表示
- 画像をCanvasに表示
- new Image() で，新たな画像オブジェクトを生成．
- image.srcに画像の位置を指定すると，画像がロードされる（ロードが開始される）．
- 画像のロードが終わったときに呼ばれるコールバック関数 image.onload の中で，drawImageによって画像を表示する．
- バウンドするボール（アニメーション）
- 44行目 setInterval(drawBall, 30); で，0.03秒ごとに関数drawBallを呼び出す．
- 関数 drawBall内で，背景とボールを描画．
- ball.x += ball.dx と ball.y += ball.dy で，描画の度にボールの位置をずらす．
- localStorageを使ったメモ
- localStorage.foo でfooという名前の値を参照できる．
- localStorage.getItem("foo")と書いても同じ．
- localStorage.foo = bar でbarの値がfooという名前でセーブされる
- localStorage.setItem("foo", bar);と書いても同じ．
- localStorage.removeItem("foo") でアイテムが削除される．
- locakStorage.clear()で，そのドメインに関する全てのローカルストレージの内容が削除される．
- 現在地の地図を表示(geolocation API)
- 現在の位置を取得する
- navigator.geolocation.getCurrentPosition( successCallback , errorCallback , option)
- 第1引数：位置情報取得が成功したときのコールバック関数を指定
- 第2引数：位置情報取得が失敗したときのコールバック関数を指定
- 第3引数：関数実行時のオプションを指定
- 8パズル
- 15パズル
- 1枚の画像を8枚または15枚のパネルに描画
- パネルといっても実体は何番目のパネルかを表す整数
- 0が左上の画像，1がその右の画像，２が更にその右の画像を表す．
- 8パズルの場合は3が2段目の一番左側の画像となる．
- panelsという長さ9（まはた16）の配列に，何番目のパネルがあるかの情報を保持
- タップした位置の上下左右に「穴」があれば，タップした位置が「穴」になるようにパネルを移動する．
- 完成形から200回タップした状態（シャッフルした状態）からゲームスタート．
- 複数の画像を自動スクロール
- 複数の画像を順にスクロール表示するオブジェクトを生成する関数newScroller(モジュールパターンでカプセル化したコンストラクタ)と，newSclollerで生成した二つのオブジェクトscroller1とscroller2を用いる．
- スクローラーの使い方：生成したオブジェクトにcontextと画像をセットしてからstart．位置やサイズの設定，スクロール方向やスピードの設定も可能．
- 表示位置を指定： setPosision(x, y)
- 表示サイズを指定： setSize(w, h)
- コンテクストを指定： setContext(ctxt)
- 画像を設定： setImages(urls) 引数はURLの配列．
- スクロールの速さを指定： setSpeed(s) 30と指定すると30msで1px動く
- 方向を指定： setDirection(d) 0で縦スクロール(下から上へ)，1で横スクロール(右から左へ)
- スクロール開始： start()
- スクロール停止： stop()
- スクロールしているか否か： isScrolling()
- 数十msごとに，drawImageで二つの画像を表示（表示範囲と位置を変えながら）することでスクロール
- 影，角の丸み，鏡面反射，回転，グラデーション
- box-shadowで影の幅（水平方向，垂直方向，ぼかし距離）と色を指定
- text-shadowでテキストの影の幅と色を指定
- border-radiusで角の丸み（半径）を指定
- linear-gradientで，グラデーションを指定（開始位置と角度，開始色，途中色，終了色）
- box-refrectで鏡面反射
- transform: rotate(10deg); で10度回転
- Canvasでバウンドするボール（再掲）
- setInterval, beginPath, fillStyle, arc, fill, fillRectを利用
- 背景の再描画の領域を小さくする（ボールで隠れていたところだけ再描画）
- getImageData, putImageDataを利用
- ボールを生成する関数（クラスのようなもの）を定義して，複数のボールを生成できるようにする
- モジュールパターンを利用(Douglas Crockford, JavaScript: The Good Parts)
- ボールが重なったときに，ちらつかないようにする
- 背景の描画とボールの描画を分離して，全てのボールの背景を描画してから，全てのボールを描画する
- ボールに文字を書く
- font, textBaseline, textAlign, fillTextを利用
- ボールを回転させる
- save, restore, translate, rotateを利用
- ボールの中身（コンテンツ）の描画drawContentと，ボールのコンテナの描画を分ける．
- 回転，移動はコンテナの描画drawで行う
- ボールの中に画像を表示する
- save, restore, clipを利用
- newBallを継承してnewImageBallを定義（モジュールパターンを利用）
- プレーン（ビューポートの指定もなし）
- CSSで見やすく（ビューポート指定あり）
- h1要素の文字サイズなどを指定
- li要素のマージンを指定してい行間を広く
- jQueryでアコーディオン
- <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>でjQueryを読み込む．
- $("ul,ol").css("display", "none");で，ul要素とol要素を非表示に．
- $("div.group").click(function() {…}で，表示と非表示を切り替え．
- slideUp("slow")でスライドしながら非表示
- slideDown("slow")でスライドしながら表示
- jQueryMobileでスマホ風に表示
- 次の3行でjQueryとjQueryMobileを読み込む
- <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
- <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
- <script type="text/javascript" src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
- jQueryMobileでアコーディオン
- data-role=“collapsible-set” 属性を用いる．
- jQueryMobileでマルチページ
- data-role=“page”属性を持つ要素がページとなる．ページ内には任意のHTMLを記述できる．
- 典型的にはheader要素，content要素，footer要素からなる．
- これを複数記述すれば（一つのHTMLファイルで）複数ページのコンテンツとなる．
- jQueryMobileについては，こちらの紹介も参照