Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

25,884 views

Published on

https://www.facebook.com/TonosamaLabo

Published in: Technology

⑮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の場合 –  C:xampphtdocs
  61. 61. かくにんしよう•  http://localhost/test/
  62. 62. とりあえず、ひながた•  フォルダのなかにファイルを作ろう –  test.html
  63. 63. test.html!DOCTYPE HTMLhtml lang=jaheadmeta charset=utf-8 /titleHTML5/titlestyle/stylescript/script/headbody divテスト/div divテスト/div divテスト/div/body/html
  64. 64. やってみよう•  じがでた! test_01.zip
  65. 65. まとめ•  その2に続きます!
  66. 66. おわり主催(共同開催):株式会社 gooyahttp://www.gooya.co.jp/メドレー株式会社http://www.medley.co.jp/講師:西田 寛輔 (Tonosamart)http://www.facebook.com/tonosamart

×