More Related Content
⑮jQueryをおぼえよう！その１
- 1.
- 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:titlecontent= ページのタイトル > <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 PhotoshopCS6 – 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.
- 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.
- 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.
- 62. とりあえず、ひながた • フォルダのなかにファイルを作ろう – test.html
- 63. test.html !DOCTYPE HTML html lang=ja head metacharset=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