Successfully reported this slideshow.

⑮jQueryをおぼえよう!その1

68

Share

Loading in …3
×
1 of 66
1 of 66

More Related Content

More from Nishida Kansuke

Related Books

Free with a 14 day trial from Scribd

See all

⑮jQueryをおぼえよう!その1

  1. 1. HTML5入門&jQuery 勉強会 ⑮jQueryをおぼえよう!その1
  2. 2. はじめに •  HTML5とかjQueryをざっくり覚えよう! •  若干、資料使いまわしてます!昔の勉強会でし た話も混ざってるけどまあいいよね!加筆修正 しました!
  3. 3. 注意事項 •  この資料の中には、2012/05時点での事実が書いてあるつもりです が、時代とともに移り変わる情報もあるので最新情報のチェックも 忘れずに! •  主観に基づく事柄もあります。そんな場合は、この色でコメントす るようにしています!信じるか信じないかはあなた次第! •  ざっくり説明するために、簡単に説明しています。厳密にいうと ちょっと違う部分もあるかと思います。でもまあ、だいたいあって る(はず)。 •  過去の環境(IE6とかIE7とか、PHP4とか)には採用されていない 話もあるので、その辺をターゲットにする場合は注意(無視してい いと思うけど) •  リンクは日本語訳がある場合はそっちにリンクしています。公式情 報ではないので、仕事で使う場合は原文を確認しましょう。
  4. 4. とりあえずHTML5 •  HTML5って何? •  何が変わるの? •  どうすればいいの? •  FLASHはなくなるの? •  FLASHとHTML5の違い
  5. 5. HTML5って何? •  HTMLの新バージョン •  まだ決まってない←重要 •  草案はできていて、それにあわせて各ブラウザが実装中 •  なので、ここから先のページの情報はあいまいです。今 後変更になる可能性があります。 •  日本語情報は、html5.jpが素敵 –  http://www.html5.jp/ •  ちなみに、CSSは、CSS3が勧告でCSS4が草案。 CSS3の実装とHTML5の実装が同時期なので一緒にさ れることが多いけど、本来は別もの。
  6. 6. 何が変わるの?① •  タグや属性が見直され、簡潔に書ける •  ブラウザでの処理の内容が詳細に定義される→ブラウザ 間の差異が少なくなる •  <header>,<footer>などのタグが追加され、HTMLが構 造化できる •  LocalStorageを使い、クライアントにデータを保存で きる •  フォーム周りが強化され、値のチェックなどが簡単にで きる
  7. 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. 8. どうすればいいの? •  ブラウザごとに実装が違うため、すぐ使うのは微妙。昔 のブラウザだと動かないっていう問題もある。 •  ただし、スマートフォンは例外。そもそも新しいブラウ ザしかないため、対応している機能は使ってもいいと思 う。 •  文章の構造化については、googleなど検索エンジンが 対応して検索結果に反映されることが予想される。けど、 現時点では、HTML5だから有利ということはないみた い。 •  仕様が確定してないから、今後仕様が変わる怖さがある。 その辺は、注意する必要がある。
  9. 9. FLASHはなくなるの? •  よくいわれるのが、FLASHとHTML5の対決で、 FLASHはなくなる!みたいな話。 •  とりあえず、このへんの話は HTML5=HTML5+CSS3+javascriptみたいな感じで聞 いてほしい。 •  いまのところ、FLASHをやめてHTML5を代わりに使う のは難しい。両方の長所を理解して、使い分けたり、一 緒に使う必要がある。 •  FLASHとHTML5の違いは理解する必要がある。 •  特に仕様や企画の段階での判断が重要だと思う。
  10. 10. FLASHとHTML5の違い① •  どっちが早い?どっちが高機能?っていうのは現段階で はどっちもどっち。今後もチューンナップされていく部 分だし。 •  FLASHにはHTML5にはない機能がある。たとえば、カ メラへのアクセスとか •  FLASHの方が簡単に表現できる部分がある。例えば、 3Dとか文字のアンチエイリアスとか。スプライトとか イベントの充実とか。
  11. 11. FLASHとHTML5の違い② •  FLASHはツールの機能が充実している。 HTML5では、既存のエディタだけで視覚的にア ニメーション等を作るのは面倒 •  逆に言うと、FLASHは開発に作成ソフト代がか かるので敷居が高い。HTML5なら無料でできる。
  12. 12. FLASHとHTML5の違い③ •  FLASHは素材を組み込むことができる。HTML5の場合、 素材は普通にweb上に置くことになるので、素材のライ センスに注意(特に、音楽とフォント)。多分、 HTML5を採用するにあたって、この問題が一番大きい と思う。特に、ゲーム系や映画とか芸能系。 •  HTML5は上記に加えて、ソースコードが丸見え。カ ジュアルハックに弱い。ブラウザ上で任意のjavascript を実行される可能性もある。ゲームクリアでご褒美画 像!とか、クリアしなくても簡単に見られちゃう。 FLASH以上にサーバ側での処理が重要になってくる。 •  FLASHは逆コンパイルや素材吸い出しが可能。とはいえ、 swfにまとめられているため、そのへんは強い。
  13. 13. FLASHとHTML5の違い④ •  HTML5はプラグイン不要で、どの端末でも動く(よう になる)。FLASHは現時点でiOSで動かない。ゲーム等 のコンテンツがiPadで動かないのはしょうがないかもし れないが、TOP画面からいきなり動かないのは致命的。 この理由からFLASHの利用は減っていくと思われる。 •  簡単なアニメーションであれば、HTML5で対応、複雑 なコンテンツについては、FLASHが主流になるんじゃ ないかと思う。 •  FLASHはツールが優秀なので、FLASHで作って HTML5に移植みたいな手法もはやると思う。CS6だと そういうことができるらしい。ためしてないけど><
  14. 14. HTML5じゃないけど •  Open Graph Protocol •  画像について •  Validation •  javascriptについて
  15. 15. Open Graph Protocol •  Open Graph Protocolって何? •  どんなことができるの? •  まとめ
  16. 16. Open Graph Protocolって何? •  略してOGP •  プログラムにホームページの内容を分かりやす く伝えるための仕組み •  metaタグに記述する
  17. 17. どんなことができるの? •  FaceBookが対応しているので、Facebookにリ ンクされたときに、情報を表示できる。 •  mixiやGREEでも使われている
  18. 18. 記述方法 <meta property= og:title content= ページのタイトル > <meta property= og:description content= ページの説明 > <meta property= og:image content= 画像">
  19. 19. デバッガー •  以下のサイトで、FaceBookにリンクされ たときどうなるかを見ることができる。 •  デバッガー –  https://developers.facebook.com/tools/ debug
  20. 20. まとめ •  FaceBookが採用しているので、絶対に導入す るべき。 •  いいね!ボタン付けてるのに設定してないペー ジはもったいないと思う。 •  逆に、ホームページの改修を依頼したときに、 提案してこない会社は技術力やSEOに対する知 識が微妙だとおもう。
  21. 21. 画像について •  フォーマット •  形式の使い分け •  ソフトの紹介 •  ペイント系、ドロー系 •  デザインで気をつけること •  素材加工 •  ありがちなトラブル •  どうすればいい?
  22. 22. フォーマット •  GIF形式 –  可逆圧縮 –  色数が少ない –  アニメーションGIFがある –  透過がつかえる(しょぼい) •  PNG形式 –  可逆圧縮 –  透過がつかえる •  JPEG形式 –  非可逆圧縮 –  サイズが小さい
  23. 23. 形式の使い分け •  PNG>GIFなので、アニメーションGIF以外 でGIFは不要 •  JPEGは圧縮率を変えられる。 •  実写はJPEG、アニメ絵はPNG •  容量に余裕がある場合は、PNGが奇麗 •  PNGは透過ができる。綺麗に透過する場 合はPNG一択。GIFはアンチエイリアスっ ていうか、グラデーションぽい透過がで きない。
  24. 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. 25. ソフトの紹介② •  OPTPiX •  http://www.webtech.co.jp/optpixpro/ index.html –  画像減色ソフト(インデックスカラー化) •  ImageOptim –  http://imageoptim.pornel.net/ –  画像減色、最適化(容量削減)ソフト
  26. 26. ペイント系、ドロー系 •  ペイント系(Photoshop) –  1ドット単位で編集する –  拡大縮小に弱い。 –  エフェクトや実写に強い •  ドロー系(Illustrator ) –  座標データを編集する –  拡大縮小に強い→印刷に強い –  ロゴデザインなどに向いている •  3D系 –  最近は、3D系も増えてきてます! –  制作は難しくても、簡単な用語等はおさえておこう
  27. 27. おまけの画像TIPS① •  GIFは横のグラデーションに弱い •  JPEGは8x8ドットのブロック単位 →グリッドをあわせると奇麗になる •  PhotoShopでjpegを保存するこつ →圧縮率50%と51%の差が大きい →圧縮率95%と100%の差は小さい
  28. 28. おまけの画像TIPS② •  FireWorksとPhotoShopの使い分け →FireWorksの方が圧縮率が高い →FireWorksだとPNG8-透過で保存できる →jpegの圧縮率が同じでも、FireWorksの方が圧縮 率が高い(けど、画像は汚い) →FireWorksは、jpegマスクを使用して、画像の一 部だけ奇麗にできる →FireWorksは、極小文字(8px前後)の表現に強 い(はっきり見える)。あと、FLASHも強い ※FireWorksはバージョンアップのたびに、アルゴ リズムが改善されているようで、奇麗になってきて います。
  29. 29. Validation •  W3Cって何? •  Validation(検証) •  Validation失敗?
  30. 30. W3Cって何?① •  インターネットで利用される技術の標準化をす すめる団体 •  HTMLの文法とかは、W3Cが決めてる –  W3Cの仕様書等の文書の日本語訳集 –  http://www.w3.org/Consortium/ Translation/Japanese
  31. 31. W3Cって何? •  HTMLやCSSを作成する場合は、この仕様通り に作成する必要がある。 •  WHATWGっていうw3cについてもの申す (?)団体もある。HTML5は両方が決めている
  32. 32. Validation(検証)① •  HTMLやCSSはプログラムと違いコンパイルと かしないのでコンパイルエラーとかがない。 •  そのため、事前にValidation(検証)する必要 がある。 •  検証ツールは、w3cのサイトに用意されている。 •  http://validator.w3.org/ •  http://jigsaw.w3.org/css-validator/
  33. 33. Validation(検証)② •  他にも、FireFoxのプラグイン等で簡単に検証が 可能。常に見ているページをValidationできる から便利。(けどおすすめのやつが最近使えな くなった><いいやつ探し中) •  ValidationエラーがあるとXPATHやjavascript を使うときに影響がでる可能性が。
  34. 34. Validation失敗? •  Validation失敗するケースがある。例えば、 w3cに定義されていない属性を使用していると きとか。 •  そういう場合はエラーがあってもしょうがない けど、意図したエラーと意図してないエラーは 違う。タグの閉じ忘れ等、意図していないエ ラーについてはちゃんとチェックしよう。 •  javascriptで指定するようにして、Validationが 失敗しないようにするのも一つの方法。
  35. 35. javaScriptについて •  javaScriptって何? •  javaScriptの特徴 •  開発環境 •  実行環境 •  開発をはじめるまえに •  AJAX •  JSON •  静的エラーチェック •  実行時のデバック
  36. 36. javaScriptって何? •  ブラウザ上でプログラムを動かすことがで きる •  コンパイル不要のインタプリタ型言語 •  javaとはぜんぜん違う別物 •  最近は、Unityなどブラウザ以外のプラッ トフォームでも採用されてきている
  37. 37. javaScriptの特徴 •  インタプリタ型言語でコンパイル不要 →毎回コンパイルするので、速度が遅い →文法エラーが実行時にしかわからない。 •  文法が自由で、表現力が高い →みたことのない書き方、人によってぜんぜん 違うソースになる。 •  変数宣言が柔軟で、型指定が不要 →型違い、自動変換がバグの原因になる →グローバル変数が別のソースと重複
  38. 38. 開発環境 •  エディタは、特になんでもいい。 •  eclipseとかvisualStudioがいいと思う。キー ワードに色がつけられて、コードアシストがで きるものがおすすめ。 •  個人的には、秀丸。マクロでjsl呼び出してます。 昔風。あとはやっぱり、Dreamweaverが優秀。 アップとか簡単にできるし。 –  http://www.javascriptlint.com/ download.htm
  39. 39. 実行環境① •  htmlをそのままブラウザで開いてもローカル ファイルなため、機能制限がおきて動かない •  サーバにファイルをおく必要がある。 •  とはいえ、いちいちアップは手間だし、開発中 のものをサーバに置くのも微妙。 •  クライアントに、サーバを構築する必要がある
  40. 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. 41. 開発をはじめるまえに •  とりあえず、(採用するかしないかは別として、)Google JavaScript Style Guideには目を通しておこう!(これは他の言語 も同様) –  http://cou929.nu/data/google_javascript_style_guide/ •  特に、javaScriptは変数のスコープが特殊なので、事前にルールを 決めておこう。 •  FireFoxのサイトは、リファレンスが日本語であるので便利。ツー ル等も一通り紹介されているから確認しよう。 –  JavaScript ‒ MDN –  https://developer.mozilla.org/ja/JavaScript
  42. 42. AJAX •  ウェブブラウザ内で非同期通信を行う技術 •  Asynchronous JavaScript + XML の略 •  ページ切り替え無しでデータの送受信ができる •  ブラウザごとに差異がある(javascriptのプログラムを分ける必要 がある) •  XMLの略!とかいいつつ主流はJSON形式 •  別のドメインのデータは読めないという制限がある。(クロスドメ イン対策) •  XMLHttpRequest Level 2を使えば、別ドメインのデータも読め るようになる。(FLASHのcrossdomain.xmlに似ている感じ。読 み込まれる側のサイトに設定が必要) •  ヘッダに以下の情報を付ければ許可できる。 –  Access-Control-Allow-Origin: http://example.com
  43. 43. JSON •  おもにAJAXで使われるデータフォーマットで、 javascriptの文法そのままのテキストデータ。 •  xmlと違い、構造を表すタグがないためデータが短い。 •  csvと違い、javascriptの文法そのままの形式なので、 作成と展開が簡単。 •  RFC 4627で定義されている。妥当性チェックの方法も 定義されていて素敵!(しかも正規表現だけ)。でも最 近はparserが用意されているのでそっちを使おう。eval しないこと。
  44. 44. コード検証 •  javascriptはインタプリタ言語なので、いわゆるコンパ イルエラーがない。 •  静的にエラーチェックできるツールの使用が必須 •  googleのclosure-compilerがおすすめ。オンライン 版が簡単。(整形後のコピペが改行なくなって微妙だけ ど) –  http://code.google.com/p/closure-compiler/ –  http://closure-compiler.appspot.com/home •  エラーチェック、整形、圧縮、難読化ができるのでおす すめです。(圧縮とかはアルゴリズムが変わるので注 意)
  45. 45. 実行時のデバック •  FireFox+FireBugを使ってますが、他のブラウザにも同 等の機能があるので、それを使えばいいと思う。 •  最近の主流はchromeなので、特にこだわりなければ chromeがオススメ •  chromはfirefoxに比べて機能拡張がすごく楽だと思う。 •  まずは、FireBugになれよう!chrome+FireBugでデ バッグ→IEでテストが効率的。 •  chrome://chrome-urls/でいろんな機能が試せます。
  46. 46. 開発してみよう •  XAMPPおさらい •  Firefox+FireBugおさらい
  47. 47. XAMPPおさらい •  XAMPPって何? •  インストールしよう •  実行してみよう •  アドバイス •  アクセスしてみよう
  48. 48. XAMPPって何? •  X ‒クロスプラットフォーム •  A ‒ Apache •  M ‒ MySQL •  P ‒ PHP •  P ‒ Perl •  上記のソフトを簡単にインストールできるパッケージ •  従来手間のかかるサーバの構築が簡単にできる。 •  Windowsやmacなどのクライアントのパソコンにインストー ルできる •  反面、セキュリティ的な保護がされていないので、このまま サーバとして公開するのは危険。 •  とはいえ、ファイアウォールの設定がきちんとされていれば、 特に注意することはない。
  49. 49. インストールしよう •  http://www.apachefriends.org/jp/ xampp.html •  公式ページから、各OS対応の、インス トーラをダウンロードすれば簡単にインス トールが可能 •  Windowsの場合は、Apache as service みたいな感じで、サービスとしてインス トールするか聞かれるからチェックが外し てあることを確認しよう。
  50. 50. 実行してみよう(mac) •  XAMPP Controlを 起動すると、 Controlsが表示さ れるので、Apache とMySQLを起動さ せよう
  51. 51. 実行してみよう(windows) •  ApacheとMySqlの Startを押して起動 しよう
  52. 52. アドバイス •  実際の起動しているプログラムとコント ロールパネルの同期が取れてない時が結構 あるので、動きが変だったら再起動すると うまくいきます。 •  STARTしても、即停止する時とかも、再 起動するといいです。
  53. 53. アクセスしてみよう •  ブラウザで、自分のパソコンにアクセス –  http://localhost •  XAMPPの画面が出たら成功!
  54. 54. Firefox+FireBugおさらい •  インストール •  簡単な使い方 •  やってみよう
  55. 55. インストール •  Firefox –  http://mozilla.jp/firefox/ •  fireBug –  https://addons.mozilla.org/ja/firefox/ addon/firebug/
  56. 56. 簡単な使い方① •  とりあえず、googleにアクセスしてみよ う •  firebugのボタンを押すと、下の方に色々 出る!
  57. 57. 簡単な使い方② •  カーソルみたいなのを押すと、画面上の要 素を選べる!
  58. 58. 簡単な使い方③ •  コンソールタグ –  javascriptのエラーとかがここに出る! •  HTMLタグ –  HTMLとか、右側のCSSとか自由に編集できる! •  スクリプト –  ステップ実行とかできたり、変数の中身が見れ る! •  ネット –  通信速度が見れる! –  通信内容が見れる!パラメータとか戻り値とか –  通信のエラーが見れる!404とかわかるので便利
  59. 59. HTML5 •  フォルダを作ろう •  とりあえず、ひながた •  CSSを使おう •  idとclass
  60. 60. フォルダを作ろう •  ドキュメントルートにtestというフォルダ を作ろう! •  Macの場合 –  アプリケーション→xampp→htdocs •  Windowsの場合 – 

×