0
HTML5⼊入⾨門        プレ講座    Tech.G by GTD        三浦@muse71
◎⾃自⼰己紹介                                   名前      : 三浦  敦史                                   年年齢     : 49               ...
ご興味のある⽅方は...  4⽉月23⽇日に...
HTML5ってなに?    なにが違う?                    なにを学べばいい?なぜHTML5?                          なにができる?           本⽇日のアジェンダ
プレ講座の⽬目的           宣伝です!            (^^;)
?HTML5ってなに?
WHATWG       OPERA  Apple  MOZILLA       Google     MicrosoftWeb  Application  1.0        W3C   HTML5
◎HTML5の定義 Defines  a  single  language  called  HTML5  which  can  be  written  in  HTML  syntax  and  in  XML  syntax.  ➡ ...
◎HTML5の定義            Defines  a  single  language  called  HTML5  which  can  be  written  in  HTM             ➡ HTML5と呼ばれ、...
◎HTML5の定義 This specification evolves HTML and its related APIs to ease the authoring of Web-based applications. 「HTMLとその関連...
◎HTML5と関連する仕様                TAKE  CONTROL  ̶—  YOUR  WEB,  YOUR  LOGO  -‐‑‒  THE  TECH­−NOLOGY                           ...
◎HTML5と関連する仕様 Markup,  Form,  Microdata,  RDFa,  WAI-‐‑‒AREA
◎HTML5と関連する仕様  Selector,  Effects,  CSS  Animation,  Web  Font
◎HTML5と関連する仕様                Video,  Audio
◎HTML5と関連する仕様     Canvas,  Web  GL,  SVG,  CSS3  3D  Effects
◎HTML5と関連する仕様       Geolocation  API,  Orientation  Event,                  Web  RTC(Camera,  Audio)
◎HTML5と関連する仕様        Web  Workers,  XMLHttpRequest  2
◎HTML5と関連する仕様                App  Cache,  Local  Storage,                      Indexed  DB,  File  API
◎HTML5と関連する仕様        Web  Sockets,  Server-‐‑‒Sent  Events
◎HTML5と関連する仕様    現段階で実⾏行行環境が整ってきている仕様
◎Webブラウザの対応状況    約2年年前には主要なブラウザでは実⾏行行環境が整ってきている                                       To  HTML5,  or  not  to  HTML5.  Tha...
?なぜHTML5?
こんなことを思い浮かべてみましょう
スマホで使える営業ツール⽤用の業務       アプリを作りたいのだけど、、、営業担当             アンドロイド向けとiOS向けの2種類                 を開発する必要がありますね。       じゃぁ、とりあえずi...
株主総会のビデオをWebで公開した       いんだけど...                   じ ゃ ぁ 、 F l a s h を 作 れ る ⼈人 に 頼 ん総務担当                   で、ビデオの変換とプログラム...
ショッピングカートの⼊入⼒力力欄の⼊入⼒力力       ミスが多いからなんとかなんない?                  じゃぁ、システムエンジニアに依頼販売担当                  して、エラーチェックプログラムの     ...
HTML5はこういったことをWebブラウザの機能を利利⽤用して 実装がすることが⽬目的です
Webブラウザはテキスト主体とした情報配信プラットフォームではなくなった  Webアプリケーションの進化に   ブラウザが対応していない
HTML5登場!
?なにを学べばいい?
◎HTML5として、まず学ぶべき項⽬目  HTML         Markup                   Selector               Form                     Effects         ...
特に....
MarkupFormMicrodata  +  RDFa
?学び⽅方は?
◎学び⽅方は?   現状では複数の書籍を参考にすることがおすすめです
◎学び⽅方は?       仕様や情報収集には下記サイトがおすすめです  IBM  developerWorks  HTML5  の基礎  ➡ http://www.ibm.com/developerworks/jp/training/kp/w...
?なにができる?
◎バスワードとしてのHTML5 次世代のHTML  !? ➡   新しいHTML? ➡   書き⽅方が変わる? ➡   使い⽅方が変わる? アプリが作れるらしい?? ➡   JavaScriptで作れる? ➡   FlashやSilverlig...
◎なにができる?           THE  WALL  STREET  JOURNAL  -‐‑‒  インターネットの世界を変えるHTML5                       http://jp.wsj.com/public/pa...
?なにが違う?
◎HTML5の定義 Defines  a  single  language  called  HTML5  which  can  be  written  in  HTML  syntax  and  in  XML  syntax.  ➡ ...
◎HTML5の定義 Defines  a  single  language  called  HTML5  which  can  be  written  in  HTML  syntax  and  in  XML  syntax.  ➡ ...
HTML5は、HTMLの書式で                                                        も、XHTMLの書式でも記述                              T ML   ...
<br>または<br  />どちらでも記述可能。class=”hoge”  または  class=hogeどちらでも記述可能。<h1>または<H1>どちらでも記述可能。
<DIV  id=recommended  class="clearfix">   <H3><img  src=top_̲ttl_̲recommend.jpg  /></H3>   <DIV  class=recommendedMenuDetai...
ブロックレベル要素 インライン要素 存在しない!!
<a  href=  "  http://www.gtd.co.jp/curriculum/  "  >  <div>  <h1>HTML5  講座</h1>     <p>HTML5をオンラインで学ぶ!</p>     <p>最新の技術をいち...
◎コンテンツモデルの分類 ➡   メタデータ     :ドキュメントのメタ情報 ➡   フロー       :ドキュメント内のコンテンツ全般 ➡   セクショニング   :章や節などのコンテンツグループ ➡   ヘディング     :⾒見見出し...
◎コンテンツモデルの分類                  フロー              フレージング                        ヘッディング     インタラクティブ              エンベディッド     ...
◎HTML5の定義 Defines  a  single  language  called  HTML5  which  can  be  written  in  HTML  syntax  and  in  XML  syntax.  ➡ ...
◎処理理モデルの定義ってなに? 仕様書にあるのにWeb標準ではNO! ➡   HTML5には⾮非推奨要素や⾮非推奨属性はありません。     ざっくり⾔言うと仕様書に存在する要素や属性についてはどれでも利利⽤用が     可能ということ。ブラウ...
HTML5から削除された要素や属性はどうなる?対策・代替⼿手段を定義
ブラウザのレンダリング⽅方法や、他の要素・属性・CSSによる代替⼿手段、JavaScriptによる扱われ⽅方(DOM)についても定義されています。                                                 ...
HTML5は...IE6でも利利⽤用できます!※ただし、ブラウザに実装されていない機能を利利⽤用することは出来ません。
ブラウザは必要ない記述を    無視してる
<!DOCTYPE  HTML  PUBLIC  "-‐‑‒//W3C//DTD  HTML  4.01//EN"                        "http://www.w3.org/TR/html4/strict.dtd"> ...
HTML5はブラウザの挙動に合わせた  仕様を策定している
独⾃自実装仕様でも優れている仕様は  標準化する
HTML5の仕様  ⼿手厚い     by  Hitachi,  Ltd.
◎HTML5の定義 Defines  a  single  language  called  HTML5  which  can  be  written  in  HTML  syntax  and  in  XML  syntax.  ➡ ...
◎Webアプリケーションを想定した仕様                               Canvas      Form                     WebGL      Application  Cash      W...
Live  coding
Live  coding        Semantics-‐‑‒  Outline  /  Frame  -‐‑‒
Live  coding  Multimedia   -‐‑‒Video-‐‑‒
Live  coding  Graphics  -‐‑‒Canvas-‐‑‒
HTML5講座    講座紹介
基本+応⽤用=実⼒力力向上
JavaScriptスキルは   程度ある        必要です
この位の  レベル+α  です<script  type="text/javascript">var  country  =  Germany;var  weather;if(country){        if(country  ==  F...
<script  type="text/javascript">/*  localStorageにkey=numberが無い場合の処理理        ※key=numberが無いということはlocalStorageに             ...
スクラッチでコードを書くのではなく    コピー&ペーストや   ブランク部分の書き込み   併⽤用しながら記述します
スクラッチでコードを書くのではなく    コピー&ペーストや   ブランク部分の書き込み   併⽤用しながら記述します        もちろん     受講後の質問もOKです
皆様お待ちしています本⽇日はありがとうございました     ご質問・お問合せは     a-‐‑‒miura@gtd.co.jp
Tech.G HTML5 プレ講座
Tech.G HTML5 プレ講座
Tech.G HTML5 プレ講座
Tech.G HTML5 プレ講座
Upcoming SlideShare
Loading in...5
×

Tech.G HTML5 プレ講座

568

Published on

グローバル・テクノロジー・デザイン株式会社がトレーニングスタジオ「Tech.G」で開催するHTML5マークアップ講座のプレ講座で紹介したスライド。
講座で使用したサンプルデータは下記。
http://bit.ly/15C4643

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
568
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
2
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Transcript of "Tech.G HTML5 プレ講座"

  1. 1. HTML5⼊入⾨門 プレ講座 Tech.G by GTD 三浦@muse71
  2. 2. ◎⾃自⼰己紹介  名前 : 三浦  敦史  年年齢 : 49  職業 : Webディレクター (プランニング、テクニカル系) フロントエンドエンジニア (UI開発、マークアップ) システム設計、制作コンサルティング 制作技術⽀支援など。 http://about.me/atsushi.miura  講師 : スクール、企業研修等講師 (Web制作全般、2Dグラフィックなど)  その他 : (社)⽇日本Webデザイナーズ協会  会員 ⽶米Appcelerator社認定   Titanium  アプリケーション  デベロッパー  作業領領域 : HTML5、CSS3、JavaScript、PHP、Java、 Flash
  3. 3. ご興味のある⽅方は...  4⽉月23⽇日に...
  4. 4. HTML5ってなに? なにが違う? なにを学べばいい?なぜHTML5? なにができる? 本⽇日のアジェンダ
  5. 5. プレ講座の⽬目的 宣伝です! (^^;)
  6. 6. ?HTML5ってなに?
  7. 7. WHATWG OPERA Apple  MOZILLA Google MicrosoftWeb  Application  1.0 W3C HTML5
  8. 8. ◎HTML5の定義 Defines  a  single  language  called  HTML5  which  can  be  written  in  HTML  syntax  and  in  XML  syntax. ➡ HTML5と呼ばれ、HTMLまたはXMLで記述する、ひとつの⾔言語仕様を 定義する。 Defines  detailed  processing  models  to  foster  interoperable  implementations. ➡ 詳細な処理理モデルを定義し、相互運⽤用可能な仕様の実装を⼿手助けする。 Improves  markup  for  documents. ➡ ⽂文書のマークアップを改善する。 Introduces  markup  and  APIs  for  emerging  idioms,  such  as  Web  applications. ➡ Webアプリケーションのような新しい表現に対し、マークアップと   API  を提供する。 HTML5  differences  from  HTML4 http://www.w3.org/TR/html5-‐‑‒diff/#introduction
  9. 9. ◎HTML5の定義 Defines  a  single  language  called  HTML5  which  can  be  written  in  HTM ➡ HTML5と呼ばれ、HTMLまたはXMLで記述する、 定義する。要素・属性定義 Defines  detailed  processing  models  to  foster  interoperable  implemenマークアップ例例 ➡ 詳細な処理理モデルを定義し、相互運⽤用可能な仕様の 実装⽅方法 Improves  markup  for  documents. ➡ ⽂文書のマークアップを改善する。 Introduces  markup  and  APIs  for  emerging  idioms,  such  as  Web  appl API ➡ Webアプリケーションのような新しい表現に対 API  を提供する。 HTML5  differences  from  HTML4 http://www.w3.org/TR/html5-‐‑‒diff/#introduction
  10. 10. ◎HTML5の定義 This specification evolves HTML and its related APIs to ease the authoring of Web-based applications. 「HTMLとその関連のAPIは、  Webアプリケーション開発を容易にします。」 Ian Hickson 2011-1-25
  11. 11. ◎HTML5と関連する仕様 TAKE  CONTROL  ̶—  YOUR  WEB,  YOUR  LOGO  -‐‑‒  THE  TECH­−NOLOGY http://www.w3.org/html/logo/#the-‐‑‒technology-‐‑‒overview
  12. 12. ◎HTML5と関連する仕様 Markup,  Form,  Microdata,  RDFa,  WAI-‐‑‒AREA
  13. 13. ◎HTML5と関連する仕様 Selector,  Effects,  CSS  Animation,  Web  Font
  14. 14. ◎HTML5と関連する仕様 Video,  Audio
  15. 15. ◎HTML5と関連する仕様 Canvas,  Web  GL,  SVG,  CSS3  3D  Effects
  16. 16. ◎HTML5と関連する仕様 Geolocation  API,  Orientation  Event, Web  RTC(Camera,  Audio)
  17. 17. ◎HTML5と関連する仕様 Web  Workers,  XMLHttpRequest  2
  18. 18. ◎HTML5と関連する仕様 App  Cache,  Local  Storage, Indexed  DB,  File  API
  19. 19. ◎HTML5と関連する仕様 Web  Sockets,  Server-‐‑‒Sent  Events
  20. 20. ◎HTML5と関連する仕様 現段階で実⾏行行環境が整ってきている仕様
  21. 21. ◎Webブラウザの対応状況 約2年年前には主要なブラウザでは実⾏行行環境が整ってきている To  HTML5,  or  not  to  HTML5.  That  is  the  question. http://www.webenertia.com/blog/2011/05/to-‐‑‒html5-‐‑‒or-‐‑‒not-‐‑‒to-‐‑‒html5-‐‑‒that-‐‑‒is-‐‑‒the-‐‑‒question/
  22. 22. ?なぜHTML5?
  23. 23. こんなことを思い浮かべてみましょう
  24. 24. スマホで使える営業ツール⽤用の業務 アプリを作りたいのだけど、、、営業担当 アンドロイド向けとiOS向けの2種類 を開発する必要がありますね。 じゃぁ、とりあえずiPhoneだけで。 Web担当 インストールはどうすればいい?営業担当 AppStoreで公開するか、企業向け のライセンスを購⼊入して下さい。 ? えっ! 業務⽤用なのに公開したり、お⾦金金払っ Web担当 たりしなきゃならないの!....営業担当
  25. 25. 株主総会のビデオをWebで公開した いんだけど... じ ゃ ぁ 、 F l a s h を 作 れ る ⼈人 に 頼 ん総務担当 で、ビデオの変換とプログラム作っ てもらうよう依頼しますね。 スマホとかタブレットでも⾒見見られる Web担当 ようにしたいんだけど...総務担当 Flashじゃだめだから、スマホとタブ レ ッ ト ⽤用 ペ ー ジ も 発 注 し ま す ね 。 ? お⾦金金かかりそうだね.... Web担当総務担当
  26. 26. ショッピングカートの⼊入⼒力力欄の⼊入⼒力力 ミスが多いからなんとかなんない? じゃぁ、システムエンジニアに依頼販売担当 して、エラーチェックプログラムの 発注をします。 Web担当 すぐに何とかしたいんだけど?販売担当 テストも含めて2週間くらいはかかっ ちゃいますよ。 ? .... Web担当販売担当
  27. 27. HTML5はこういったことをWebブラウザの機能を利利⽤用して 実装がすることが⽬目的です
  28. 28. Webブラウザはテキスト主体とした情報配信プラットフォームではなくなった Webアプリケーションの進化に ブラウザが対応していない
  29. 29. HTML5登場!
  30. 30. ?なにを学べばいい?
  31. 31. ◎HTML5として、まず学ぶべき項⽬目 HTML Markup Selector Form Effects Microdata  +  RDFa CSS  Animation Web  Font Application  Cash Canvas Web  Strage WebGL Indexed  DB SVG File  API CSS  3D  Effects Web  Workers Video XMLHttpRequest  2 Audio Geolocation  API Web  Sockets Orientation  Event Server-‐‑‒Sent  Events WebRTC
  32. 32. 特に....
  33. 33. MarkupFormMicrodata  +  RDFa
  34. 34. ?学び⽅方は?
  35. 35. ◎学び⽅方は? 現状では複数の書籍を参考にすることがおすすめです
  36. 36. ◎学び⽅方は? 仕様や情報収集には下記サイトがおすすめです IBM  developerWorks  HTML5  の基礎 ➡ http://www.ibm.com/developerworks/jp/training/kp/wa-‐‑‒kp-‐‑‒html5/ ミツエーリンクス  Web標準Blog ➡ http://www.ibm.com/developerworks/jp/training/kp/wa-‐‑‒kp-‐‑‒html5/ HTML5.JP  次世代  HTML  標準  HTML5  情報サイト ➡ http://html5.jp/ html5j.org ➡ http://www.html5j.org/
  37. 37. ?なにができる?
  38. 38. ◎バスワードとしてのHTML5 次世代のHTML  !? ➡ 新しいHTML? ➡ 書き⽅方が変わる? ➡ 使い⽅方が変わる? アプリが作れるらしい?? ➡ JavaScriptで作れる? ➡ FlashやSilverlightがいらない?
  39. 39. ◎なにができる? THE  WALL  STREET  JOURNAL  -‐‑‒  インターネットの世界を変えるHTML5 http://jp.wsj.com/public/page/0_̲0_̲WJPP_̲7000-‐‑‒342068.html?mg=inert-‐‑‒wsj
  40. 40. ?なにが違う?
  41. 41. ◎HTML5の定義 Defines  a  single  language  called  HTML5  which  can  be  written  in  HTML  syntax  and  in  XML  syntax. ➡ HTML5と呼ばれ、HTMLまたはXMLで記述する、ひとつの⾔言語仕様を 定義する。 Defines  detailed  processing  models  to  foster  interoperable  implementations. ➡ 詳細な処理理モデルを定義し、相互運⽤用可能な仕様の実装を⼿手助けする。 Improves  markup  for  documents. ➡ ⽂文書のマークアップを改善する。 Introduces  markup  and  APIs  for  emerging  idioms,  such  as  Web  applications. ➡ Webアプリケーションのような新しい表現に対し、マークアップと   API  を提供する。 HTML5  differences  from  HTML4 http://www.w3.org/TR/html5-‐‑‒diff/#introduction
  42. 42. ◎HTML5の定義 Defines  a  single  language  called  HTML5  which  can  be  written  in  HTML  syntax  and  in  XML  syntax. ➡ HTML5と呼ばれ、HTMLまたはXMLで記述する、ひとつの⾔言語仕様を 定義する。 Defines  detailed  processing  models  to  foster  interoperable  implementations. ➡ 詳細な処理理モデルを定義し、相互運⽤用可能な仕様の実装を⼿手助けする。 Improves  markup  for  documents. ➡ ⽂文書のマークアップを改善する。 Introduces  markup  and  APIs  for  emerging  idioms,  such  as  Web  applications. ➡ Webアプリケーションのような新しい表現に対し、マークアップと   API  を提供する。 HTML5  differences  from  HTML4 http://www.w3.org/TR/html5-‐‑‒diff/#introduction
  43. 43. HTML5は、HTMLの書式で も、XHTMLの書式でも記述 T ML 準化 することができます。 H 標 × ML また、混在した書式でも記述 T XH することができます。 p im g H1 B st ro ng HTML5 SPECIFICclipart  by  illpop.com AT ION
  44. 44. <br>または<br  />どちらでも記述可能。class=”hoge”  または  class=hogeどちらでも記述可能。<h1>または<H1>どちらでも記述可能。
  45. 45. <DIV  id=recommended  class="clearfix"> <H3><img  src=top_̲ttl_̲recommend.jpg  /></H3> <DIV  class=recommendedMenuDetail> <H4><IMG  SRC=top_̲recommend_̲img_̲01.jpg  ></H4> <dl> <dt><strong>ハリウッド・バーガー</strong></dt> ・ ・ ・ 混在しても仕様上では問題なし
  46. 46. ブロックレベル要素 インライン要素 存在しない!!
  47. 47. <a  href=  "  http://www.gtd.co.jp/curriculum/  "  > <div> <h1>HTML5  講座</h1> <p>HTML5をオンラインで学ぶ!</p> <p>最新の技術をいち早く学ぼう!</p> </div></a> div  を  a  で括ることも問題なし
  48. 48. ◎コンテンツモデルの分類 ➡ メタデータ :ドキュメントのメタ情報 ➡ フロー :ドキュメント内のコンテンツ全般 ➡ セクショニング :章や節などのコンテンツグループ ➡ ヘディング :⾒見見出し ➡ フレージング :ドキュメント内のテキスト情報全般 ➡ エンベディッド :外部リソースの読み込み要素 ➡ インタラクティブ :リンクなどのユーザーの操作対象
  49. 49. ◎コンテンツモデルの分類 フロー フレージング ヘッディング インタラクティブ エンベディッド セクショニング メタデータ 各要素は複数のコンテンツモデルに 所属している 複雑ですので無理理に覚える必要は無いと思います。
  50. 50. ◎HTML5の定義 Defines  a  single  language  called  HTML5  which  can  be  written  in  HTML  syntax  and  in  XML  syntax. ➡ HTML5と呼ばれ、HTMLまたはXMLで記述する、ひとつの⾔言語仕様を 定義する。 Defines  detailed  processing  models  to  foster  interoperable  implementations. ➡ 詳細な処理理モデルを定義し、相互運⽤用可能な仕様の実装を⼿手助けする。 Improves  markup  for  documents. ➡ ⽂文書のマークアップを改善する。 Introduces  markup  and  APIs  for  emerging  idioms,  such  as  Web  applications. ➡ Webアプリケーションのような新しい表現に対し、マークアップと   API  を提供する。 HTML5  differences  from  HTML4 http://www.w3.org/TR/html5-‐‑‒diff/#introduction
  51. 51. ◎処理理モデルの定義ってなに? 仕様書にあるのにWeb標準ではNO! ➡ HTML5には⾮非推奨要素や⾮非推奨属性はありません。 ざっくり⾔言うと仕様書に存在する要素や属性についてはどれでも利利⽤用が 可能ということ。ブラウザのレンダリング⽅方法も定義されています。 BOMやDOMはブラウザまかせ!? ➡ HTML5ではBOMやDOMについての定義されています。 ブラウザ毎のJavaScript異異なる実装を解消し、アプリケーション作成を 容易易にします。
  52. 52. HTML5から削除された要素や属性はどうなる?対策・代替⼿手段を定義
  53. 53. ブラウザのレンダリング⽅方法や、他の要素・属性・CSSによる代替⼿手段、JavaScriptによる扱われ⽅方(DOM)についても定義されています。 HTML  Living  Standard http://www.whatwg.org/specs/web-‐‑‒apps/current-‐‑‒work/multipage/obsolete.html
  54. 54. HTML5は...IE6でも利利⽤用できます!※ただし、ブラウザに実装されていない機能を利利⽤用することは出来ません。
  55. 55. ブラウザは必要ない記述を 無視してる
  56. 56. <!DOCTYPE  HTML  PUBLIC  "-‐‑‒//W3C//DTD  HTML  4.01//EN"   "http://www.w3.org/TR/html4/strict.dtd"> 無視!<meta  http-‐‑‒equiv="Content-‐‑‒Type"  content="text/html; 無視! charset=UTF-‐‑‒8"><script  type="text/javascript"></script> 無視!<style  type="text/css"></style> 無視!
  57. 57. HTML5はブラウザの挙動に合わせた 仕様を策定している
  58. 58. 独⾃自実装仕様でも優れている仕様は 標準化する
  59. 59. HTML5の仕様 ⼿手厚い by  Hitachi,  Ltd.
  60. 60. ◎HTML5の定義 Defines  a  single  language  called  HTML5  which  can  be  written  in  HTML  syntax  and  in  XML  syntax. ➡ HTML5と呼ばれ、HTMLまたはXMLで記述する、ひとつの⾔言語仕様を 定義する。 Defines  detailed  processing  models  to  foster  interoperable  implementations. ➡ 詳細な処理理モデルを定義し、相互運⽤用可能な仕様の実装を⼿手助けする。 Improves  markup  for  documents. ➡ ⽂文書のマークアップを改善する。 Introduces  markup  and  APIs  for  emerging  idioms,  such  as  Web  applications. ➡ Webアプリケーションのような新しい表現に対し、マークアップと   API  を提供する。 HTML5  differences  from  HTML4 http://www.w3.org/TR/html5-‐‑‒diff/#introduction
  61. 61. ◎Webアプリケーションを想定した仕様 Canvas Form WebGL Application  Cash Web  Strage Video Indexed  DB Audio File  API Geolocation  API Web  Workers Orientation  Event XMLHttpRequest  2 WebRTC Web  Sockets Server-‐‑‒Sent  Events
  62. 62. Live  coding
  63. 63. Live  coding Semantics-‐‑‒  Outline  /  Frame  -‐‑‒
  64. 64. Live  coding Multimedia -‐‑‒Video-‐‑‒
  65. 65. Live  coding Graphics -‐‑‒Canvas-‐‑‒
  66. 66. HTML5講座 講座紹介
  67. 67. 基本+応⽤用=実⼒力力向上
  68. 68. JavaScriptスキルは 程度ある 必要です
  69. 69. この位の  レベル+α  です<script  type="text/javascript">var  country  =  Germany;var  weather;if(country){        if(country  ==  France){                weather  =  nice;        } アラートに表示される        if(country  ==  Germany){ メッセージは?                weather  =  fine;        }        var  message  =  this  is    +  country  +  ,  the  weather  is    +  weather;        alert(message);}</script>
  70. 70. <script  type="text/javascript">/*  localStorageにkey=numberが無い場合の処理理        ※key=numberが無いということはlocalStorageに              何もデータが存在しないということ -‐‑‒-‐‑‒-‐‑‒-‐‑‒-‐‑‒-‐‑‒-‐‑‒-‐‑‒-‐‑‒-‐‑‒-‐‑‒-‐‑‒-‐‑‒-‐‑‒-‐‑‒-‐‑‒-‐‑‒-‐‑‒-‐‑‒-‐‑‒-‐‑‒-‐‑‒-‐‑‒-‐‑‒-‐‑‒-‐‑‒-‐‑‒-‐‑‒-‐‑‒-‐‑‒-‐‑‒-‐‑‒-‐‑‒-‐‑‒-‐‑‒-‐‑‒-‐‑‒-‐‑‒-‐‑‒-‐‑‒-‐‑‒-‐‑‒-‐‑‒-‐‑‒-‐‑‒-‐‑‒-‐‑‒  */ if(!localStorage.getItem(number)){ //  変数iを初期化 i  =  0; //  ⼊入⼒力力欄を空にする すべてのスクリプトに memotitle.value  =  ; 解説を付けています memo.value  =  ; } /*  localStorage上にデータが存在する場合 -‐‑‒-‐‑‒-‐‑‒-‐‑‒-‐‑‒-‐‑‒-‐‑‒-‐‑‒-‐‑‒-‐‑‒-‐‑‒-‐‑‒-‐‑‒-‐‑‒-‐‑‒-‐‑‒-‐‑‒-‐‑‒-‐‑‒-‐‑‒-‐‑‒-‐‑‒-‐‑‒-‐‑‒-‐‑‒-‐‑‒-‐‑‒-‐‑‒-‐‑‒-‐‑‒-‐‑‒-‐‑‒-‐‑‒-‐‑‒-‐‑‒-‐‑‒-‐‑‒-‐‑‒-‐‑‒-‐‑‒-‐‑‒-‐‑‒-‐‑‒-‐‑‒-‐‑‒-‐‑‒-‐‑‒  */ else  { //  変数iを前回保存された最後の値+1に初期化 i  =  parseInt(localStorage.getItem(number))+1; //  localStorageに保存されているデータ数を条件として繰り返し処理理 for(var  j=0;  j<i;  j++){                            .....</script>
  71. 71. スクラッチでコードを書くのではなく コピー&ペーストや ブランク部分の書き込み 併⽤用しながら記述します
  72. 72. スクラッチでコードを書くのではなく コピー&ペーストや ブランク部分の書き込み 併⽤用しながら記述します もちろん 受講後の質問もOKです
  73. 73. 皆様お待ちしています本⽇日はありがとうございました ご質問・お問合せは a-‐‑‒miura@gtd.co.jp
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×