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の入力フォームを使ってみよう(1)
LESSON 06 HTML5の入力フォームを使ってみよう(2)
LESSON 07 HTML5の入力フォームを使ってみよう(3)

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
リスト3 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

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