https://www.facebook.com/TonosamaLabo

1. HTML5入門＆jQuery 勉強会
⑮jQueryをおぼえよう！その１

2. はじめに
• HTML5とかjQueryをざっくり覚えよう！
• 若干、資料使いまわしてます！昔の勉強会でし
た話も混ざってるけどまあいいよね！加筆修正
しました！

3. 注意事項
• この資料の中には、2012/05時点での事実が書いてあるつもりです
が、時代とともに移り変わる情報もあるので最新情報のチェックも
忘れずに！
• 主観に基づく事柄もあります。そんな場合は、この色でコメントす
るようにしています！信じるか信じないかはあなた次第！
• ざっくり説明するために、簡単に説明しています。厳密にいうと
ちょっと違う部分もあるかと思います。でもまあ、だいたいあって
る（はず）。
• 過去の環境（IE6とかIE7とか、PHP4とか）には採用されていない
話もあるので、その辺をターゲットにする場合は注意（無視してい
いと思うけど）
• リンクは日本語訳がある場合はそっちにリンクしています。公式情
報ではないので、仕事で使う場合は原文を確認しましょう。

4. とりあえずHTML5
• HTML5って何？
• 何が変わるの？
• どうすればいいの？
• FLASHはなくなるの？
• FLASHとHTML5の違い

5. HTML5って何？
• HTMLの新バージョン
• まだ決まってない←重要
• 草案はできていて、それにあわせて各ブラウザが実装中
• なので、ここから先のページの情報はあいまいです。今
後変更になる可能性があります。
• 日本語情報は、html5.jpが素敵
– http://www.html5.jp/
• ちなみに、CSSは、CSS3が勧告でCSS4が草案。
CSS3の実装とHTML5の実装が同時期なので一緒にさ
れることが多いけど、本来は別もの。

6. 何が変わるの？①
• タグや属性が見直され、簡潔に書ける
• ブラウザでの処理の内容が詳細に定義される→ブラウザ
間の差異が少なくなる
• <header>,<footer>などのタグが追加され、HTMLが構
造化できる
• LocalStorageを使い、クライアントにデータを保存で
きる
• フォーム周りが強化され、値のチェックなどが簡単にで
きる

7. 何が変わるの？②
• <video>,<audio>で<img>みたいに動画や音楽が指定で
きる
• <canvas>で絵が描ける
• App Cache(CACHE MANIFEST)で、オフラインでも
動かせるようになる
• File System APIで、バイナリファイルの保存が可能
（保存先は、サンドボックス）
• HTML5 における HTML4 からの変更点
– http://standards.mitsue.co.jp/resources/w3c/
TR/html5-diff/

8. どうすればいいの？
• ブラウザごとに実装が違うため、すぐ使うのは微妙。昔
のブラウザだと動かないっていう問題もある。
• ただし、スマートフォンは例外。そもそも新しいブラウ
ザしかないため、対応している機能は使ってもいいと思
う。
• 文章の構造化については、googleなど検索エンジンが
対応して検索結果に反映されることが予想される。けど、
現時点では、HTML5だから有利ということはないみた
い。
• 仕様が確定してないから、今後仕様が変わる怖さがある。
その辺は、注意する必要がある。

9. FLASHはなくなるの？
• よくいわれるのが、FLASHとHTML5の対決で、
FLASHはなくなる！みたいな話。
• とりあえず、このへんの話は
HTML5=HTML5+CSS3+javascriptみたいな感じで聞
いてほしい。
• いまのところ、FLASHをやめてHTML5を代わりに使う
のは難しい。両方の長所を理解して、使い分けたり、一
緒に使う必要がある。
• FLASHとHTML5の違いは理解する必要がある。
• 特に仕様や企画の段階での判断が重要だと思う。

10. FLASHとHTML5の違い①
• どっちが早い？どっちが高機能？っていうのは現段階で
はどっちもどっち。今後もチューンナップされていく部
分だし。
• FLASHにはHTML5にはない機能がある。たとえば、カ
メラへのアクセスとか
• FLASHの方が簡単に表現できる部分がある。例えば、
3Dとか文字のアンチエイリアスとか。スプライトとか
イベントの充実とか。

11. FLASHとHTML5の違い②
• FLASHはツールの機能が充実している。
HTML5では、既存のエディタだけで視覚的にア
ニメーション等を作るのは面倒
• 逆に言うと、FLASHは開発に作成ソフト代がか
かるので敷居が高い。HTML5なら無料でできる。

12. FLASHとHTML5の違い③
• FLASHは素材を組み込むことができる。HTML5の場合、
素材は普通にweb上に置くことになるので、素材のライ
センスに注意（特に、音楽とフォント）。多分、
HTML5を採用するにあたって、この問題が一番大きい
と思う。特に、ゲーム系や映画とか芸能系。
• HTML5は上記に加えて、ソースコードが丸見え。カ
ジュアルハックに弱い。ブラウザ上で任意のjavascript
を実行される可能性もある。ゲームクリアでご褒美画
像！とか、クリアしなくても簡単に見られちゃう。
FLASH以上にサーバ側での処理が重要になってくる。
• FLASHは逆コンパイルや素材吸い出しが可能。とはいえ、
swfにまとめられているため、そのへんは強い。

13. FLASHとHTML5の違い④
• HTML5はプラグイン不要で、どの端末でも動く（よう
になる）。FLASHは現時点でiOSで動かない。ゲーム等
のコンテンツがiPadで動かないのはしょうがないかもし
れないが、TOP画面からいきなり動かないのは致命的。
この理由からFLASHの利用は減っていくと思われる。
• 簡単なアニメーションであれば、HTML5で対応、複雑
なコンテンツについては、FLASHが主流になるんじゃ
ないかと思う。
• FLASHはツールが優秀なので、FLASHで作って
HTML5に移植みたいな手法もはやると思う。CS6だと
そういうことができるらしい。ためしてないけど＞＜

14. HTML5じゃないけど
• Open Graph Protocol
• 画像について
• Validation
• javascriptについて

15. Open Graph Protocol
• Open Graph Protocolって何？
• どんなことができるの？
• まとめ

16. Open Graph Protocolって何？
• 略してOGP
• プログラムにホームページの内容を分かりやす
く伝えるための仕組み
• metaタグに記述する

17. どんなことができるの？
• FaceBookが対応しているので、Facebookにリ
ンクされたときに、情報を表示できる。
• mixiやGREEでも使われている

18. 記述方法
<meta property= og:title content= ページのタイトル >
<meta property= og:description content= ページの説明 >
<meta property= og:image content= 画像">

19. デバッガー
• 以下のサイトで、FaceBookにリンクされ
たときどうなるかを見ることができる。
• デバッガー
– https://developers.facebook.com/tools/
debug

20. まとめ
• FaceBookが採用しているので、絶対に導入す
るべき。
• いいね！ボタン付けてるのに設定してないペー
ジはもったいないと思う。
• 逆に、ホームページの改修を依頼したときに、
提案してこない会社は技術力やSEOに対する知
識が微妙だとおもう。

21. 画像について
• フォーマット
• 形式の使い分け
• ソフトの紹介
• ペイント系、ドロー系
• デザインで気をつけること
• 素材加工
• ありがちなトラブル
• どうすればいい？

22. フォーマット
• GIF形式
– 可逆圧縮
– 色数が少ない
– アニメーションGIFがある
– 透過がつかえる（しょぼい）
• PNG形式
– 可逆圧縮
– 透過がつかえる
• JPEG形式
– 非可逆圧縮
– サイズが小さい

23. 形式の使い分け
• PNG>GIFなので、アニメーションGIF以外
でGIFは不要
• JPEGは圧縮率を変えられる。
• 実写はJPEG、アニメ絵はPNG
• 容量に余裕がある場合は、PNGが奇麗
• PNGは透過ができる。綺麗に透過する場
合はPNG一択。GIFはアンチエイリアスっ
ていうか、グラデーションぽい透過がで
きない。

24. ソフトの紹介①
• Adobe Photoshop CS6
– http://www.adobe.com/jp/products/
photoshopextended.html
– 業界標準の画像編集ソフト
– 画像の拡大縮小、jpegが奇麗
• Adobe Illustrator CS6
– http://www.adobe.com/jp/products/
illustrator.html
– 業界標準の描画ソフト

25. ソフトの紹介②
• OPTPiX
• http://www.webtech.co.jp/optpixpro/
index.html
– 画像減色ソフト（インデックスカラー化）
• ImageOptim
– http://imageoptim.pornel.net/
– 画像減色、最適化（容量削減）ソフト

26. ペイント系、ドロー系
• ペイント系（Photoshop）
– １ドット単位で編集する
– 拡大縮小に弱い。
– エフェクトや実写に強い
• ドロー系（Illustrator ）
– 座標データを編集する
– 拡大縮小に強い→印刷に強い
– ロゴデザインなどに向いている
• ３D系
– 最近は、３D系も増えてきてます！
– 制作は難しくても、簡単な用語等はおさえておこう

27. おまけの画像TIPS①
• GIFは横のグラデーションに弱い
• JPEGは８x８ドットのブロック単位
→グリッドをあわせると奇麗になる
• PhotoShopでjpegを保存するこつ
→圧縮率50%と51%の差が大きい
→圧縮率95%と100%の差は小さい

28. おまけの画像TIPS②
• FireWorksとPhotoShopの使い分け
→FireWorksの方が圧縮率が高い
→FireWorksだとPNG8-透過で保存できる
→jpegの圧縮率が同じでも、FireWorksの方が圧縮
率が高い（けど、画像は汚い）
→FireWorksは、jpegマスクを使用して、画像の一
部だけ奇麗にできる
→FireWorksは、極小文字（8px前後）の表現に強
い（はっきり見える）。あと、FLASHも強い
※FireWorksはバージョンアップのたびに、アルゴ
リズムが改善されているようで、奇麗になってきて
います。

29. Validation
• W3Cって何？
• Validation（検証）
• Validation失敗？

30. W3Cって何？①
• インターネットで利用される技術の標準化をす
すめる団体
• HTMLの文法とかは、W3Cが決めてる
– W3Cの仕様書等の文書の日本語訳集
– http://www.w3.org/Consortium/
Translation/Japanese

31. W3Cって何？
• HTMLやCSSを作成する場合は、この仕様通り
に作成する必要がある。
• WHATWGっていうw3cについてもの申す
（？）団体もある。HTML5は両方が決めている

32. Validation（検証）①
• HTMLやCSSはプログラムと違いコンパイルと
かしないのでコンパイルエラーとかがない。
• そのため、事前にValidation（検証）する必要
がある。
• 検証ツールは、w3cのサイトに用意されている。
• http://validator.w3.org/
• http://jigsaw.w3.org/css-validator/

33. Validation（検証）②
• 他にも、FireFoxのプラグイン等で簡単に検証が
可能。常に見ているページをValidationできる
から便利。（けどおすすめのやつが最近使えな
くなった＞＜いいやつ探し中）
• ValidationエラーがあるとXPATHやjavascript
を使うときに影響がでる可能性が。

34. Validation失敗？
• Validation失敗するケースがある。例えば、
w3cに定義されていない属性を使用していると
きとか。
• そういう場合はエラーがあってもしょうがない
けど、意図したエラーと意図してないエラーは
違う。タグの閉じ忘れ等、意図していないエ
ラーについてはちゃんとチェックしよう。
• javascriptで指定するようにして、Validationが
失敗しないようにするのも一つの方法。

35. javaScriptについて
• javaScriptって何？
• javaScriptの特徴
• 開発環境
• 実行環境
• 開発をはじめるまえに
• AJAX
• JSON
• 静的エラーチェック
• 実行時のデバック

36. javaScriptって何？
• ブラウザ上でプログラムを動かすことがで
きる
• コンパイル不要のインタプリタ型言語
• javaとはぜんぜん違う別物
• 最近は、Unityなどブラウザ以外のプラッ
トフォームでも採用されてきている

37. javaScriptの特徴
• インタプリタ型言語でコンパイル不要
→毎回コンパイルするので、速度が遅い
→文法エラーが実行時にしかわからない。
• 文法が自由で、表現力が高い
→みたことのない書き方、人によってぜんぜん
違うソースになる。
• 変数宣言が柔軟で、型指定が不要
→型違い、自動変換がバグの原因になる
→グローバル変数が別のソースと重複

38. 開発環境
• エディタは、特になんでもいい。
• eclipseとかvisualStudioがいいと思う。キー
ワードに色がつけられて、コードアシストがで
きるものがおすすめ。
• 個人的には、秀丸。マクロでjsl呼び出してます。
昔風。あとはやっぱり、Dreamweaverが優秀。
アップとか簡単にできるし。
– http://www.javascriptlint.com/
download.htm

39. 実行環境①
• htmlをそのままブラウザで開いてもローカル
ファイルなため、機能制限がおきて動かない
• サーバにファイルをおく必要がある。
• とはいえ、いちいちアップは手間だし、開発中
のものをサーバに置くのも微妙。
• クライアントに、サーバを構築する必要がある

40. 実行環境②
• おすすめは、XAMPで自分のパソコンをサーバにする方法。もれな
くMYSQLもついてくるので便利。
• XAMPは外部からのアクセスが怖いとかいっている人はそもそも、
ファイアーウォールの設定を見直した方がいい。
• 同じネットワークなら、他のパソコンからもみれるのでテストも
楽！
– XAMP
– http://www.apachefriends.org/jp/xampp.html
• 仮想PCでサーバを構築するのもいいと思います。
• 他には、hostsファイルを書き換えたり、置換プロキシを使うのも
素敵です。
– http://ja.wikipedia.org/wiki/
– http://coderepos.org/share/wiki/CocProxy

41. 開発をはじめるまえに
• とりあえず、(採用するかしないかは別として、)Google
JavaScript Style Guideには目を通しておこう！（これは他の言語
も同様）
– http://cou929.nu/data/google_javascript_style_guide/
• 特に、javaScriptは変数のスコープが特殊なので、事前にルールを
決めておこう。
• FireFoxのサイトは、リファレンスが日本語であるので便利。ツー
ル等も一通り紹介されているから確認しよう。
– JavaScript ‒ MDN
– https://developer.mozilla.org/ja/JavaScript

42. AJAX
• ウェブブラウザ内で非同期通信を行う技術
• Asynchronous JavaScript + XML の略
• ページ切り替え無しでデータの送受信ができる
• ブラウザごとに差異がある（javascriptのプログラムを分ける必要
がある）
• XMLの略！とかいいつつ主流はJSON形式
• 別のドメインのデータは読めないという制限がある。（クロスドメ
イン対策）
• XMLHttpRequest Level 2を使えば、別ドメインのデータも読め
るようになる。（FLASHのcrossdomain.xmlに似ている感じ。読
み込まれる側のサイトに設定が必要）
• ヘッダに以下の情報を付ければ許可できる。
– Access-Control-Allow-Origin: http://example.com

43. JSON
• おもにAJAXで使われるデータフォーマットで、
javascriptの文法そのままのテキストデータ。
• xmlと違い、構造を表すタグがないためデータが短い。
• csvと違い、javascriptの文法そのままの形式なので、
作成と展開が簡単。
• RFC 4627で定義されている。妥当性チェックの方法も
定義されていて素敵！（しかも正規表現だけ）。でも最
近はparserが用意されているのでそっちを使おう。eval
しないこと。

44. コード検証
• javascriptはインタプリタ言語なので、いわゆるコンパ
イルエラーがない。
• 静的にエラーチェックできるツールの使用が必須
• googleのclosure-compilerがおすすめ。オンライン
版が簡単。（整形後のコピペが改行なくなって微妙だけ
ど）
– http://code.google.com/p/closure-compiler/
– http://closure-compiler.appspot.com/home
• エラーチェック、整形、圧縮、難読化ができるのでおす
すめです。（圧縮とかはアルゴリズムが変わるので注
意）

45. 実行時のデバック
• FireFox+FireBugを使ってますが、他のブラウザにも同
等の機能があるので、それを使えばいいと思う。
• 最近の主流はchromeなので、特にこだわりなければ
chromeがオススメ
• chromはfirefoxに比べて機能拡張がすごく楽だと思う。
• まずは、FireBugになれよう！chrome+FireBugでデ
バッグ→IEでテストが効率的。
• chrome://chrome-urls/でいろんな機能が試せます。

46. 開発してみよう
• XAMPPおさらい
• Firefox+FireBugおさらい

47. XAMPPおさらい
• XAMPPって何？
• インストールしよう
• 実行してみよう
• アドバイス
• アクセスしてみよう

48. XAMPPって何？
• X ‒クロスプラットフォーム
• A ‒ Apache
• M ‒ MySQL
• P ‒ PHP
• P ‒ Perl
• 上記のソフトを簡単にインストールできるパッケージ
• 従来手間のかかるサーバの構築が簡単にできる。
• Windowsやmacなどのクライアントのパソコンにインストー
ルできる
• 反面、セキュリティ的な保護がされていないので、このまま
サーバとして公開するのは危険。
• とはいえ、ファイアウォールの設定がきちんとされていれば、
特に注意することはない。

49. インストールしよう
• http://www.apachefriends.org/jp/
xampp.html
• 公式ページから、各OS対応の、インス
トーラをダウンロードすれば簡単にインス
トールが可能
• Windowsの場合は、Apache as service
みたいな感じで、サービスとしてインス
トールするか聞かれるからチェックが外し
てあることを確認しよう。

50. 実行してみよう（mac）
• XAMPP Controlを
起動すると、
Controlsが表示さ
れるので、Apache
とMySQLを起動さ
せよう

51. 実行してみよう（windows）
• ApacheとMySqlの
Startを押して起動
しよう

52. アドバイス
• 実際の起動しているプログラムとコント
ロールパネルの同期が取れてない時が結構
あるので、動きが変だったら再起動すると
うまくいきます。
• STARTしても、即停止する時とかも、再
起動するといいです。

53. アクセスしてみよう
• ブラウザで、自分のパソコンにアクセス
– http://localhost
• XAMPPの画面が出たら成功！

54. Firefox+FireBugおさらい
• インストール
• 簡単な使い方
• やってみよう

55. インストール
• Firefox
– http://mozilla.jp/firefox/
• fireBug
– https://addons.mozilla.org/ja/firefox/
addon/firebug/

56. 簡単な使い方①
• とりあえず、googleにアクセスしてみよ
う
• firebugのボタンを押すと、下の方に色々
出る！

57. 簡単な使い方②
• カーソルみたいなのを押すと、画面上の要
素を選べる！

58. 簡単な使い方③
• コンソールタグ
– javascriptのエラーとかがここに出る！
• HTMLタグ
– HTMLとか、右側のCSSとか自由に編集できる！
• スクリプト
– ステップ実行とかできたり、変数の中身が見れ
る！
• ネット
– 通信速度が見れる！
– 通信内容が見れる！パラメータとか戻り値とか
– 通信のエラーが見れる！404とかわかるので便利

59. HTML5
• フォルダを作ろう
• とりあえず、ひながた
• CSSを使おう
• idとclass

60. フォルダを作ろう
• ドキュメントルートにtestというフォルダ
を作ろう！
• Macの場合
– アプリケーション→xampp→htdocs
• Windowsの場合
– C:xampphtdocs

61. かくにんしよう
• http://localhost/test/

62. とりあえず、ひながた
• フォルダのなかにファイルを作ろう
– test.html

63. test.html
!DOCTYPE HTML
html lang=ja
head
meta charset=utf-8 /
titleHTML5/title
style
/style
script
/script
/head
body
divテスト/div
divテスト/div
divテスト/div
/body
/html

64. やってみよう
• じがでた！
test_01.zip

65. まとめ
• その２に続きます！

66. おわり
主催（共同開催）：
株式会社 gooya
http://www.gooya.co.jp/
メドレー株式会社
http://www.medley.co.jp/
講師：西田 寛輔 (Tonosamart)
http://www.facebook.com/tonosamart