勉強部屋‎ > ‎HTML5‎ > ‎

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などで描画
  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)
    • 位置を定期的に取得する
      • navigator.geolocation.watchPosition( successCallback , errorCallback , option)
    • watchPositionの定期的な位置情報取得を止める
      • navigator.geolocation.clearWatch( watchId)
    • このサンプルでは,navigator.geolocation.watchPositionを利用している.
      • 第1引数:位置情報取得が成功したときのコールバック関数を指定
        • 引数でpositionオブジェクトを受け取る.
      • 第2引数:位置情報取得が失敗したときのコールバック関数を指定
        • 引数でerrorオブジェクトを受け取る.
      • 第3引数:関数実行時のオプションを指定
  9. 8パズル
  10. 15パズル
    • 1枚の画像を8枚または15枚のパネルに描画
      • パネルといっても実体は何番目のパネルかを表す整数
      • 0が左上の画像,1がその右の画像,2が更にその右の画像を表す.
      • 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については,こちらの紹介も参照