■補講　10日と続かず3日坊主で終わってしまった人向け 　本書は10日で覚える、とタイトルにありますが世の中には10日も続かない人がいます。世間で言う3日坊主です。面倒くさがり屋の人もいるでしょうし、努力というか継続性がない人もいます。他には10日も経つと最初に覚えたことを忘れてしまう、という人もいます。特に復習しなかった場合、1日目に覚えたことは3日目にはほとんど忘れているはずです。（忘却曲線というキーワードで検索して見てみるとよいでしょう） 　ちなみにこの本を書いている本人も3日と続かないタイプです。実際、宿題の日記などは初日は4行くらい書いてあるのですが、2日目では1行になり、3日目は真っ白でした。夏休みの自由研究も初日はやるけど、3日後には忘却という状態です。 　では、世間でいう3日坊主は悪いのでしょうか？　ここで考え方を変えてみましょう。どのみち継続しないなら、まとめて一気に覚えてしまえばよいのです。つまり、3日も持たないのですから、1日くらいで覚えてしまえば何の問題もありません。 　という事で以下は3日坊主の人向けの、「本書の超まとめ」です。ものすごく省略していますから、詳しいことは本書（紙）を読んでみて下さい。一応章に合わせて説明していきます。 ------------------------------------------------------------------------------------------------ ■１章　HTML5のマークアップ 　私は詳しくないのでHTML5のマークアップに関する本を読むか、サイトを探してみてください。とりあえず最低限の事としては http://validator.w3.org/ でエラーが出なければ一応よいということです。 ------------------------------------------------------------------------------------------------ ■２章　入力フォーム 　実際のところスマートフォンかOperaブラウザでないと新しいものは使えません。ですから、以下の１つだけ分かれば十分です。 メールアドレス： 　どのみち入力チェックはサーバー側で必要です。上記の場合はemailの指定が駄目な場合、普通のテキストフィールドになるだけです。 ------------------------------------------------------------------------------------------------ ■３章　オーディオ＆ビデオ 　まず、オーディオから。以下のaudio要素（タグ）を覚えれば何とかなります。 　再生したいファイルはmp3かwave形式のどちらか指定すれば演奏されるでしょう。スマートフォンだと機種によりますが、3gpp (3gp2) にしないと駄目な場合があります。Galaxy Sの場合はaudio要素では演奏されないので、video要素で演奏したいオーディオファイルを指定します。 　次にビデオ。以下のvideo要素（タグ）を覚えれば何とかなります。 　再生する映像ファイルとコーデックはブラウザによって違うので注意。複数のブラウザに対応させたい場合は本書（紙）を読んで下さい。 　オーディオとビデオを再生する場合はplay()、停止する場合はpause()です。要素に対してそれぞれのメソッドを実行すればOK。 document.getElementById("myVideo").play(); document.getElementById("myVideo").pause(); ------------------------------------------------------------------------------------------------ ■４章　ウェブストレージ 　主に使うのはローカルストレージでしょう。これは以下の1つだけ覚えればOK。 localStorage["キー名"] 　単純に配列（ハッシュ／連想配列）への読み書きです。本書ではオブジェクト階層を明確にしたかったのでwindow.localStorageと長く書いてあります。 ------------------------------------------------------------------------------------------------ ■５章　ジオロケーション（位置情報） 　実際、ジオロケーションで使うのは以下の1つくらい。 navigator.geolocation.watchPosition(成功時に呼び出す関数, 失敗時の関数, オプション) 　あとは成功時に呼び出された関数内で位置を取得すればOK。成功時に呼び出す関数がfunction getPos(position){〜}なら緯度経度は以下のプロパティに入っています。 position.coords.latitude; // 緯度 position.coords.longitude; // 経度 ------------------------------------------------------------------------------------------------ ■６章　ファイルAPI 　File APIはちょっと複雑ですがユーザーが選択したファイルの情報と内容を読み出せます。ファイルアップロードボタンは以下のようにすると files配列に選択したファイルのオブジェクトが入ります。配列なのでfor()を使って繰り返し処理できます。 document.getElementById("filedata").files; テキストファイルを読み出すには以下のようにすればOK。 reader = new FileReader(); reader.onload = 読み込みが完了したときの処理を行う関数 reader.readAsText(ファイルオブジェクト, 文字のエンコード名); onloadで呼び出される関数にはイベントオブジェクトが渡され、このイベントオブジェクトのtarget.resultに読み込まれたテキストデータが入ります。 バイナリデータの読み出しは以下の通り。バイナリデータもイベントオブジェクトのtarget.resultに入ります。バイナリデータもcharAt()など文字列関係のメソッドを使って処理します。 reader = new FileReader(); reader.onload = 読み込みが完了したときの処理を行う関数 reader.readAsBinaryString(ファイルオブジェクト); バイナリデータの中でも画像や映像の場合はreadAsDataURL()を使います。返される形式はdataURLになるので、これをそのままvideoオブジェクトやimageオブジェクトのsrcプロパティに入れればOKです。 reader = new FileReader(); reader.onload = 読み込みが完了したときの処理を行う関数 reader.readAsDataURL(ファイルオブジェクト); ------------------------------------------------------------------------------------------------ ■７章　Canvas 　Canvasはcanvas要素で描画領域を指定しておきます。 　あとは、このcanvas要素に対して描画機能一覧を取得します（コンテキストを取得）。コンテキストを取得したら、moveTo(), lineTo(), rect()などを使っていろいろ描けばOK。 　基本的にはbeginPath()を使ってパスを構築したら最後にfill()やstroke()を使って描画します。画像はdrawImage()メソッドで描画しますが、パラメータの数によって、どのように描画されるかが違うので、ここは本書（紙）を読んでください。 ------------------------------------------------------------------------------------------------ ■８章　ドラッグ＆ドロップ 　ドラッグ＆ドロップは面倒な上に、仕様がいつの間にか変更されていることがあります。こういうのも何ですが、古いブラウザが存在するうちはjQuery UIライブラリなどが提供しているものを使った方が楽です。 　ですから無理に覚えなくてもOK。 ------------------------------------------------------------------------------------------------ ■９章　ウェブワーカー 　ウェブワーカーは以下のパターンだけ覚えればよいでしょう。ワーカー側ではwindowオブジェクトとかdocumentオブジェクトは使えないので単純な計算くらいしかできないと思ってください。 ●呼び出し側 myWorker = new Worker(ワーカーで実行するスクリプトファイルのURL); myWorker.onmessage = function(evt){ //evt.dataにワーカーからのデータが入りますので適当に処理 } myWorker.postMessage(ワーカーに送るデータ); ●ワーカー側 onmessage = function(evt){ //evt.dataに呼び出し側からのデータが入りますので適当に処理 postMessage(呼び出し元に送り返すデータ); } ------------------------------------------------------------------------------------------------ ■10章　タッチイベント／センサー 　実際のところ2011年時点ではスマートフォンに大きく依存する状態です。iPhoneだといろいろ使えますがAndroidでは限定的です。 　どちらでも使えるものとしてはタッチイベントになりますが、これは以下のものだけ覚えればよいでしょう。 touchstart mousedownイベントの代わりにどうぞ touchmove mousemoveイベントの代わりにどうぞ touchend mouseupイベントの代わりにどうぞ タッチされた情報はイベントオブジェクトのtouches配列に入っています。touches配列の要素（オブジェクト）にはタッチされた座標などが入っています。 ------------------------------------------------------------------------------------------------ 　以上で「本書の超まとめ」は終わりです。これなら3日もかからず覚えられるのではないかと思います。