10日でおぼえるHTML5入門教室（古籏 一浩）｜翔泳社の本
  1. ホーム >
  2. 書籍 >
  3. 10日でおぼえるHTML5入門教室

10日でおぼえるHTML5入門教室

著

形式：
書籍
発売日：
ISBN：
9784798124186
定価：
3,080円（本体2,800円＋税10%）
仕様：
B5変・360ページ
カテゴリ：
Web制作
キーワード：
#グラフィックソフト・ツール,#デザイン,#ビジネスデザイン,#イラスト集・作品集
シリーズ：
10日でおぼえる
紙の書籍
電子書籍

購入はこちら

つくりながら楽しく学ぶ次世代Web標準規格「HTML5」

次世代Web標準規格として注目を集めているHTML5。主要ブラウザでの実装も進み、いち早くマスターしておきたいと考える開発者やデザイナーが増えています。本書はそんな人に向けたHTML5入門書です。Audio＆Videoを使った「オーディオブック再生」、File APIを使った「ファイルビューア」、Canvasを使った「お絵かきアプリ」、タッチセンサーを使った「スマートフォン向けミニゲーム」など、HTML5の魅力を理解できるサンプルをつくりながら学習します。40レッスンを通して手を動かしながら楽しく最新技術をマスターできます。JavaScriptとHTML5を熟知した著者が丁寧に解説していますので、難しいプログラミングは苦手という方でも安心です。表紙に「著者そっくり人形」を配した新「10日シリーズ」をぜひお求めください。

CHAPTER 01　HTML・CSS・JavaScriptの役割

LESSON 01　HTML5の基礎知識
LESSON 02　テキストのマークアップ
LESSON 03　スクリプトの追加
LESSON 04　スクリプトのデバッグ

CHAPTER 02　入力フォームの機能を覚えよう／Form

LESSON 05　HTML5の入力フォームを使ってみよう（１）
LESSON 06　HTML5の入力フォームを使ってみよう（２）
LESSON 07　HTML5の入力フォームを使ってみよう（３）

CHAPTER 03　オーディオとビデオを視聴できるサイトを作ろう／Audio&Video

LESSON 08　オーディオを演奏する準備／音を鳴らしてみよう
LESSON 09　ネット上にあるオーディオデータを読み込もう
LESSON 10　オーディオブックを作ろう
LESSON 11　ビデオを再生してみよう
LESSON 12　サムネールがクリックされたら再生する

CHAPTER 04　メモ帳＆日記帳を作ろう／Web Storage

LESSON 13　ローカル環境にデータを保存する
LESSON 14　複数のデータを保存／読み出そう
LESSON 15　ローカル環境にあるキーとデータを読み出そう

CHAPTER 05　お店マップを作ろう／Geolocation API

LESSON 16　現在の位置を取得しよう
LESSON 17　Googleマップ上に現在地を表示してみよう
LESSON 18　現在位置を登録しよう
LESSON 19　お店情報を保存しよう

CHAPTER 06　ファイルビューアを作ろう／File API

LESSON 20　選択されたファイルの情報を表示しよう
LESSON 21　テキストファイルの内容を読み取ろう
LESSON 22　バイナリファイルの内容を読み取ろう
LESSON 23　画像ファイルを読み込み表示しよう

CHAPTER 07　漢字の練習をしよう（小学生向けの漢字練習）／Canvas

LESSON 24　Canvasに図形を描画しよう（四角形の描画）
LESSON 25　Canvasに図形を描画しよう（画像の描画）
LESSON 26　Canvasに図形を描画しよう（グラデーションや移動や変形）
LESSON 27　マウスドラッグで描こう
LESSON 28　保存･取り消し機能を付けよう

CHAPTER 08　簡単な画像カタログを作ろう／Drag&Drop

LESSON 29　ドラッグ＆ドロップ処理を組み込もう
LESSON 30　ドロップされたファイルの情報を表示しよう
LESSON 31　ドロップされた画像ファイルを表示しよう
LESSON 32　ドロップされた各種ファイルを表示しよう

CHAPTER 09　画像のフィルタリング処理／Web Workers

LESSON 33　ワーカーを作成してみよう
LESSON 34　ワーカーに画像データを渡そう
LESSON 35　ワーカーでエフェクト処理を行おう
LESSON 36　複数のワーカーで分散処理をしよう

CHAPTER 10　スマートフォン向けミニゲーム／TouchEvent、加速度センサー

LESSON 37　タッチ情報を読み取ろう／タッチした画像を指の動きに合わせて動かそう
LESSON 38　ジェスチャー情報を読み取ろう／ジェスチャーに合わせて画像を拡大縮小させよう
LESSON 39　タッチセンサーを使ってゲームを作ろう
LESSON 40　加速度センサーを使ってゲームを作ろう

INDEX

付属データはこちら

お問い合わせ

内容についてのお問い合わせは、正誤表、追加情報をご確認後に、お送りいただくようお願いいたします。

正誤表、追加情報に掲載されていない書籍内容へのお問い合わせや
その他書籍に関するお問い合わせは、書籍のお問い合わせフォームからお送りください。

利用許諾に関するお問い合わせ

本書の書影（表紙画像）をご利用になりたい場合は書影許諾申請フォームから申請をお願いいたします。
書影（表紙画像）以外のご利用については、こちらからお問い合わせください。

  • CHAPTER 06～09

    使用ブラウザおよびバージョンによってはセキュリティの関係で
    画像が表示されなかったり期待する結果にならない場合があります。

  • 51ページ　黄色の吹き出し

    Firebugは2017年に開発が終了しています。


  • 127ページ　緑色の吹き出し

    各国の法律によりクッキーの扱いに関しては注意する必要があります。


  • Internet Explorerについて

    2022年時点でIEのサポートは終了しているため以下の吹き出しの内容は不要です。
    181ページ：黄色の吹き出し
    265ページ：赤色の吹き出し


  • 285ページ　黄色の吹き出し

    2022年時点でPhoneGapの開発・サポートは終了しています。


この商品の「よくある質問」はありません。

ご購入いただいた書籍の種類を選択してください。

書籍の刷数を選択してください。

刷数は奥付（書籍の最終ページ）に記載されています。

現在表示されている正誤表の対象書籍

書籍の種類:

書籍の刷数:

本書に誤りまたは不十分な記述がありました。下記のとおり訂正し、お詫び申し上げます。

対象の書籍は正誤表がありません。

最終更新日:2022年09月12日
発生刷 ページ数 書籍改訂刷 電子書籍訂正 内容 登録日
1刷 008
サンプルファイルのダウンロードサイトURL		 未 未
誤 http:///www.shoeisha.co.jp/book/10days
正 http://www.shoeisha.co.jp/book/10days
2014.09.05
1刷 181
リスト３ file.js　009行目		 未 未
誤
正 002行目の下に移動します。
2022.09.12
1刷 188
リスト5 file.js　		 未 未
誤 09行　var ele = document.getElementById(""fileinfo""); 013行　varvar reader; 015行　// 「保存する」ボタンがクリックされた時の処理
正 009行　上記コードを002行目の下に移動 013行　var reader; 015行　 // 「選択したファイル内容を表示
2022.09.12
1刷 197
リスト6 file.js		 未 未
誤 009行　var ele = document.getElementById("fileinfo"); 032行　var binaryData = []; 197ページ 047行　ele.innerHTML += binaryData.toString() + "<hr>";
正 009行　上記コードを002行目の下に移動 032行　使用していない変数のため削除 197ページ 047行　ele.innerHTML += "<hr>";
2022.09.12
1刷 267
リスト3 dragdrop.js		 未 未
誤
正 012行の後に以下の3行を追加。 var fileInfo = "ファイル名："+fileObj.name; fileInfo += "、ファイルサイズ："+fileObj.size+" バイト"; fileInfo += "、MIME Type："+fileObj.type;
2022.09.12
1刷 294
リスト5　24行目		 2刷 未
誤 以下のコードに差し替えます。
正 for(var p=0, pixels=[ ]; p<image.data.length; p++){ pixels[p] = image.data[p]; }
2012.03.29
1刷 295
リスト5　44行目		 2刷 未
誤 以下のコードに差し替えます。
正 for(var p=0, pixels=[ ]; p<image.data.length; p++){ pixels[p] = image.data[p]; }
2012.03.29
1刷 298
本文4行目（コードの4行下）		 3刷 未
誤 変数pixlesに入れます⑤＊。
正 配列変数pixelsにコピーします⑤＊。
2012.05.14
1刷 298
側注		 3刷 未
誤 第1刷…＜側注はありません＞ 第2刷…＊配列変数pixelsにコピーします。
正 ＊Google Chrome 15以降、Safari 5.1以降では以下のように直接Canvas内のピクセルデータをワーカーに渡すとエラーになります。 var pixels = image.data; サンプルのように一度配列にピクセルデータをコピーした後、ワーカーに渡す必要があります。
2012.05.14
1刷 298
コードの10行目		 2刷 未
誤 var pixels = image.data;
正 for(var p=0, pixels=[ ]; p<image.data.length; p++){ pixels[p] = image.data[p]; }
2012.03.29
1刷 305
リスト4　202行目		 2刷 未
誤 以下のコードに差し替えます。
正 for(var p=0, pixels=[ ]; p<image.data.length; p++){ pixels[p] = image.data[p]; }
2012.03.29
1刷 314
リスト4　41行目		 2刷 未
誤 以下のコードに差し替えます。
正 for(var p=0, pixels=[ ]; p<image.data.length; p++){ pixels[p] = image.data[p]; }
2012.03.29
1刷 318
「エフェクトを分散処理する」コード11行目		 2刷 未
誤 var pixels = image.data;
正 for(var p=0, pixels=[ ]; p<image.data.length; p++){ pixels[p] = image.data[p]; }
2012.03.29
1刷 346
実習①		 3刷 未
誤 Android端末では加速度センサーの値を取得できないので、このサンプルはiPhone 4以降のみで動作します＊。
正 このサンプルはiPhone 4以降およびAndroid 4以降で動作します。なお、以後の説明ではiPhone 4をベースにして解説を行っています。
備
考		 p.347 右上の側注（ピンクの吹き出し）を削除します。
2012.05.14

感想・レビュー

baboocon さん

2017-01-04

超速読で読了。HTML5入門と書いてあるが、ある程度基礎を知った上でHTML5に導入された様々なAPIを用いたwebアプリケーションを作っておぼえましょうという内容。webストレージを使うメモ帳だとか、簡単なアニメーションまでHTML5だけで出来てしまうのか。

ぬるー さん

2014-07-01

半分は読んだ. 半分は. この本, 基本をある程度知ってる人向けの本ぽさがある.