HTML5サンプル

サンプル一覧を別ウィンドウで表示

HTML5サンプル

  1. 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であることを表している．
  2. 単純なCanvas
    • 図形を描画するには，Canvas要素とJavascriptを用いる．
    • 描画の手順は次の通り．
      • canvas要素を取得（document.getElementById())
      • canvas要素のコンテキストを取得(cvs.getContext("2d");
      • 取得したコンテキストのメソッドを使って描画
        • fillStyle，strokeStleでスタイルを指定
        • beginPathで描き始めることを宣言
        • strokeRect，fillRect，moveTo，lineTo，arc，stroke，fillなどで描画
    • 演習5-1参照
  3. マウスダウンまたはタップで矩形を表示
  4. マウスダウンまたはタップで円を表示
  5. 画像をCanvasに表示
    • new Image() で，新たな画像オブジェクトを生成．
    • image.srcに画像の位置を指定すると，画像がロードされる（ロードが開始される）．
    • 画像のロードが終わったときに呼ばれるコールバック関数 image.onload の中で，drawImageによって画像を表示する．
  6. バウンドするボール（アニメーション）
    • 44行目 setInterval(drawBall, 30); で，0.03秒ごとに関数drawBallを呼び出す．
    • 関数 drawBall内で，背景とボールを描画．
      • ball.x += ball.dx と ball.y += ball.dy で，描画の度にボールの位置をずらす．
  7. localStorageを使ったメモ
    • localStorage.foo でfooという名前の値を参照できる．
      • localStorage.getItem("foo")と書いても同じ．
    • localStorage.foo = bar でbarの値がfooという名前でセーブされる
      • localStorage.setItem("foo", bar);と書いても同じ．
    • localStorage.removeItem("foo") でアイテムが削除される．
    • locakStorage.clear()で，そのドメインに関する全てのローカルストレージの内容が削除される．
  8. 現在地の地図を表示(geolocation API)
    • 現在の位置を取得する
      • navigator.geolocation.getCurrentPosition( successCallback , errorCallback , option)
      • 第1引数：位置情報取得が成功したときのコールバック関数を指定
        • 引数でpositionオブジェクトを受け取る．
      • 第2引数：位置情報取得が失敗したときのコールバック関数を指定
        • 引数でerrorオブジェクトを受け取る．
      • 第3引数：関数実行時のオプションを指定
  9. 8パズル
  10. 15パズル
    • 1枚の画像を8枚または15枚のパネルに描画
      • パネルといっても実体は何番目のパネルかを表す整数
      • 0が左上の画像，1がその右の画像，２が更にその右の画像を表す．
      • 8パズルの場合は3が2段目の一番左側の画像となる．
    • panelsという長さ9（まはた16）の配列に，何番目のパネルがあるかの情報を保持
    • タップした位置の上下左右に「穴」があれば，タップした位置が「穴」になるようにパネルを移動する．
    • 完成形から200回タップした状態（シャッフルした状態）からゲームスタート．
  11. 複数の画像を自動スクロール
    • 複数の画像を順にスクロール表示するオブジェクトを生成する関数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で二つの画像を表示（表示範囲と位置を変えながら）することでスクロール

CSS3サンプル

  • 影，角の丸み，鏡面反射，回転，グラデーション
    • box-shadowで影の幅（水平方向，垂直方向，ぼかし距離）と色を指定
    • text-shadowでテキストの影の幅と色を指定
    • border-radiusで角の丸み（半径）を指定
    • linear-gradientで，グラデーションを指定（開始位置と角度，開始色，途中色，終了色）
    • box-refrectで鏡面反射
    • transform: rotate(10deg); で10度回転

バウンドするボールのアニメーション

  1. Canvasでバウンドするボール（再掲）
    • setInterval, beginPath, fillStyle, arc, fill, fillRectを利用
  2. 背景の再描画の領域を小さくする（ボールで隠れていたところだけ再描画）
    • getImageData, putImageDataを利用
  3. ボールを生成する関数（クラスのようなもの）を定義して，複数のボールを生成できるようにする
    • モジュールパターンを利用(Douglas Crockford, JavaScript: The Good Parts)
  4. ボールが重なったときに，ちらつかないようにする
    • 背景の描画とボールの描画を分離して，全てのボールの背景を描画してから，全てのボールを描画する
  5. ボールに文字を書く
    • font, textBaseline, textAlign, fillTextを利用
  6. ボールを回転させる
    • save, restore, translate, rotateを利用
    • ボールの中身（コンテンツ）の描画drawContentと，ボールのコンテナの描画を分ける．
    • 回転，移動はコンテナの描画drawで行う
  7. ボールの中に画像を表示する
    • 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については，こちらの紹介も参照