狠狠撸

狠狠撸Share a Scribd company logo

AITC 女子部 第一回 Web HTML5 補足資料v0.1

?Download as DOCX, PDF?
?
Natsumi Irimura
Natsumi Irimura

AITC 女子部 第一回 Web HTML5 補足資料v0.1

1 of 31
Download to read offline
1 HTML5 開発ガイド 概要 HTML5 のウエブ開発を理解する為に、ウエブアプリケーションの開発において、どのようなベストプラクティ スがあるかガイドラインを提供します。当資料は上流（デザイン、アーキテクチャ）と下流（フレームワーク、 プロセス）を分けて記載することで全体を俯瞰しつつ、マークアップ言語の理解を深めることが目的です。 対象者 ウエブサイト、アプリケーション開発の技術者、アーキテクト、デザイナー 更新履歴 更新内容 日付 m/d/y 作成 レビューアー バージョン 初版作成 （未完） 8/8/15 入村夏実 高岡大介 v0.1 アプリケーションの分類方法 アプリケーションのカテゴリに応じて、求められる機能とそれを実装する為の技術が異なるため以下のように 分類することで技術とアプリケーションの役割のミスマッチを防げます。 URI の役割 情報系のサイト ナビゲーションやセマンティックは情報の掲載に集中しており、URI は使いやすく/共有可能で、RESTful であ
2 る。情報系のウエブサイトはオンラインのニュース、オンラインストア、会社のホームページ、そして、検索 エンジン等があります。 イベント型のサイト ナビゲーションやセマンティックはアプリケーションを利用する際の使いやすさが中心である。URI は明確で ある必要はありません。ウエブメール、カレンダー、マッピングやビジュライゼーション等があります。 技術 サーバーサイド（Thin クライアント） MVC(モデル?ビュー?コントローラ)をサーバーサイドに設定し、結果をユーザーのブラウザに出力する。デ ータを表示することや、ユーザーがサーバーサイドで処理をする為にアクションをとる際のインターフェイス を作ります。これらのアプリケーションはブラウザではなく、サーバーでロジックが実行されます。 クライアントサイド(Thick クライアント) MVC(モデル?ビュー?コントローラ)をブラウザ側で実行します。データの表示方法やアプリケーションのレ スポンスを速めることが重要でサーバーサイドの処理を減らし、クライアントによりインタラクティブなイン タフェイスを提供します。これらのアプリケーションはブラウザにロジックがあり、サーバーはコラボレーシ ョン、セキュリティ、冗長性などの役割を担います。 アーキテクチャ
3 開発手法 CSS プ レプロセッサー 素 早 く CSS を作成、運用する為に開発時に CSS のプレプロセッサーを使うことが推奨されます。 推奨: Sass（ +Compass） フ ロントエンド パッケージ マ ネージャ ウエブパッケージ手動でダウンロードし、更新があるたびに手動でダウンロードし直すよりも、パッケージマ ネ ージャで自動化することで効率化できます。 推 奨：Bower, NPM(node.js) CSS フレームワーク CSS フレームワークを使うことでアプリケーションのプロトタイプを作成する際にウエブサイトの基礎を素 早 く構築できます。 推 奨：Bootstrap, Zurb Foundation 参 考 :OOCSS, SMACSS, BEM Javascript 効果的な Javascript の開発は、設計、ツール、そしてコードのフレームワークを決めることから開始します。 厳密であることで、高品質なコードが可能になります。JSHint を利用すればバグを最小限に抑えることがで きます。そして、Coffee Script を使うことでコードの一貫性を保ち、トラブルを防止することができます 。 推 奨：”user strict” mode, JSHint, CoffeeScript, TypeScript, ECMAScript2015 ライブラリ – ライブラリは特定の課題に絞り込み、解決策を導きだします。ライブラリは軽く、対象とする 範囲は狭いです。ウエブアーキテクチャに関わることはないが、一助となります。 フレームワークーフレームワークはアプリケーションの構造にかかわり、コードにも影響します。フレームワ ークのルールに従いコーディングをし、かつ、コードからフレームワークを呼ぶのではなくフレームワークが コードを呼ぶ形を取ります。 例)jQueryは DOMに必要となるクロスブラウザで互換性のあるAPIを作るという課題を解決する為に出現した。 このようにライブラリは様々なウエブアプリケーションに利用されています。
4 背景知識 HTML5 って何？ HTML5 は 2014 年 10 月に、1997 年の HTML4 の後継であり World Wide Web に公開されたコンテンツを表示する マークアップ言語です。 ? マルチメディア、動画や音声を扱う要素が追加された。 - Web アプリケーションとしてのプラットフォームとなる為の API の仕様を含める。 - XHTML, HTML1 や DOM Level2 を含む、統合された言語でもある。 - HTML5 の背景 HTML4.01 に続くマークアップ言語の仕様として W3C は HTML を XML の文法で定義し直した XHTML を勧告しまし た。さらに XHTML2.0 の仕様策定にも着手したが XML 志向の強い内容となり、HTML との互換性がないこと、Web 制作者のニーズに応えていないことなどの理由から普及は進みませんでした。 XHTML2.0 の仕様に不満を持つ Apple 社、Mozilla.org、Opera 社は 2004 年に WHATWG(Web Hypertext Application Technology Working Group)を発足して、XHTML2.0 に変わる HTML の策定を開始します。その後 W3C がこの新 しい仕様を HTML5 として正式に採用した。 HTML５の特徴 HTML5 には従来のマークアップ言語としての機能に加えて Web アプリケーションのプラットフォームとなる為 の API の仕様も含まれています。プラグインノインストールが必要な RIA(リッチインターネットアプリケー ション)も HTML5 によりプラグインなしで閲覧できるようになりました。 HTML の進化
5 狭義の HTML5 / 広義の HTML5 HTML5 は狭義には HTML のマークアップのみをさします。一方で HTML5 のエクステンション、CSS3 やコンポー ネントライブラリ、Javascript フレームワークを含めることもあります。また、従来は HTML というと PC で 閲覧するウエブサイトをさしましたが、HTML5 はウエブアプリケーションを含み、携帯電話のウエブサイト、 アプリ、オフラインアプリケーション、ビデオのストリーミングサイト、等もさします。 HTML 要素が増えています CSS のプロパティが増えています
6 HTML5 は以下の 8 つの技術に特徴付けられています オフライン とストレージ Web サイトでユーザーのデータを保存する方法としては、これまではサーバ ー側に保存する仕組みを設けるか、クッキーを使うしかありませんでした。 HTML5 では、ブラウザ内に Web SQL データベースを持つことができるように なっており、Web Storage によりデータが 5Mbyte に増加し、機能面が強化 されています。 マルチメディア Web ページ上でオーディオやビデオを取り扱おうとすると、これまで Flash などプラグインを利用する必要がありましたが、HTML5 によりオーディオや ビデオなどのマルチメディアをブラウザ内でプラグインを用いず簡単に取 り扱うことができるようになりました。再生、停止、巻き戻し、現在の再 生時間を得るためのプロパティも用意されています。 パフォーマンス とインテグレーション HTML5 では Web Workers という技術を用い、バックグラウンドでの並行処理 が Web アプリケーションで可能になりました。フロントの Web ページとは 独立した形で JavaScript をバックグラウンドで動かせる仕組みとなって いるため、重い処理はバックエンドに任せることでユーザーインターフェ ース側の Web ページが応答しないという状況を避けることができます。 コネクティビティ データの送受信方法として、これまではクライアント側のブラウザがサー バ側にデータをリクエストするだけでした。しかし Web Sockets という技 術により、クライアント側からサーバ側にデータを送るだけでなく、サー バ側からクライアント側へデータを送ることもできるようになりました。 セマンティック HTML5 ではこれまでと同じタグを使って Web ページを組むことができます が、文書構造を明確に定義するための新たなタグが追加されています。要 素はより明確にそのページの文書構造を伝えることができるようになりま した。 グラフィック Canvas や SVG などを利用し、2D、3D グラフィックやエフェクトを利用した Web アプリの開発が可能です。 デバイスアクセス HTML5 で組まれた Web ページから、端末内の GPS や加速度センサーにアクセ スすることができる技術です。Google マップと組み合わせることで簡単に マップアプリを作ることができます。 CSS3 CSS3 によってスタイル機能が強化され、スマートフォンらしいデザイン、 ネイティブアプリケーションに近い表現など、幅広いニーズに応えること が容易になりました。
7 HTML の要素 (http://www.w3.org/TR/2011/WD-html5-20110525/) HTML 要素 分類 HTML 要素の役割 1 a Text-level sematics 2 abbr Text-level sematics 3 address Sections 4 area Embedded content 5 article Sections 記事であることを示す 6 aside Sections 余談であることを示す 7 audio Embedded content 音声を再生する 8 b Text-level sematics 9 base Document metadata 10 bdi Text-level sematics 文脈の前後から孤立させる 11 bdo Text-level sematics 12 blockquote Grouping 13 body Sections 14 br Text-level sematics 15 button Forms 16 canvas Embedded content 図形を描く 17 caption Tabular data 18 cite Text-level sematics 19 code Text-level sematics 20 col Tabular data 21 colgroup Tabular data 22 command Interactive elements 操作メニューの各コマンドを指定する 23 datalist Forms 入力候補となるデータリストを定義する 24 dd Grouping 25 del Edits 26 details Interactive elements 備考や操作手段などの詳細情報を示す 27 dfn Text-level sematics 28 div Grouping 29 dl Grouping 30 dt Grouping 31 em Text-level sematics
8 32 embed Embedded content プラグインデータを埋め込む 33 fieldset Forms 34 figcaption Grouping 図表のキャプションを示す 35 figure Grouping 図表であることを示す 36 footer Scripting フッタであることを示す 37 form Forms 38 h1 Sections 39 h2 Sections 40 h3 Sections 41 h4 Sections 42 h5 Sections 43 h6 Sections 44 head Document metadata 45 header Sections ヘッダであることを示す 46 hgroup Sections セクションの見出しを表す、見出しをまとめる 47 hr Grouping 48 html Root 49 i Text-level sematics 50 iframe Embedded content 51 img Embedded content 52 input Forms 53 ins Edits 54 kbd Text-level sematics 55 keygen Forms フォーム送信時にキーを発行する 56 label Forms 57 legend Forms 58 li Grouping 59 link Document metadata 60 map Embedded content 61 main - body のメインコンテンツを表します 62 mark Text-level semantics 文書内の該当テキストを目立たせる 63 menu Interactive elements 操作メニューを作成する（Firefox のみ対応） 64 meta Document metadata 65 meter Forms 規定範囲内の測定値を表す
9 66 nav Sections ナビゲーションであることを示す 67 noscript Scritping 68 object Embedded content 69 ol Grouping 70 optgroup Forms 71 option Forms 72 output Forms 計算結果を示す 73 p Grouping 74 param Embedded content 75 pre Grouping 76 progress Forms タスク完了までの進行状況を示す 77 q Text-level sematics 78 rp Text-level sematics ルビを囲む記号を指定する 79 rt Text-level sematics ルビのテキストを指定する 80 ruby Text-level sematics ルビをふる 81 s Text-level sematics 82 samp Text-level sematics 83 script Scripting 84 section Sections 一つのセクションであることを示す 85 select Forms 86 small Text-level sematics 87 source Embedded content メディア要素に選択可能なリソースを複数指定します 88 span Text-level sematics 89 strong Text-level sematics 90 style Document metadata 91 sub Text-level semantics 92 summary Interactive elements <details>の内容の要約を示す 93 sup Text-level semantics 動画や音声などの URL や種類を指定する 94 table Tabular data 95 tbody Tabular data 96 td Tabular data 97 textarea Forms 98 tfoot Tabular data 99 th Tabular data
10 100 thead Tabular data 101 time Text-level semantics 日付や時刻を正確に示す 102 title Document metadata 103 tr Tabular data 104 track Embedded content 動画や音声などにテキストを指定する。 105 u Text-level sematics 106 ul Grouping 107 var Text-level sematics 108 video Embedded content 動画を再生する 109 wbr Text-level sematics 改行しても良い位置を示す 廃止された要素 1 Acronym 略語（頭字語）であること を表す <abbr>に置き換える 2 applet JAVA アプレットを挿入す る <embed>や<object>に置き換える 3 base font テ キスト の基 準サイ ズ? 色?フォントを指定する font プロパティで指定 4 bgsound 効果音?BGM を鳴らす <audio>に置き換える 5 Big テ キスト のサ イズを ひと まわり大きくする font-size プロパティで指定 6 Center センタリングする margin:auto や text-align: center で指定 7 Dir リストを表示する <ul>に置き換える 8 Font フォントの種類?大きさ? 色を指定する CSS を使うか font プロパティで指定 9 Frame フ レーム に表 示する ファ イルを指定する <iframe>や CSS に置き換えるか、メニューなどの共通部 分はサーバー側でインクルードする。 10 Frameset ウ ィンド ウを フレー ムに 分割する <iframe>や CSS に置き換えるか、メニューなどの共通部 分はサーバー側でインクルードする。 11 Nobr 改行なしで表示する white-space: nowrap などの CSS で指定 12 Noframes フ レーム が表 示でき ない 環 境用の 表示 内容を 指定 する <iframe>や CSS に置き換えるか、メニューなどの共通部 分はサーバー側でインクルードする。 13 Rib ル ビをふ る文 字を指 定す <ruby>内に直接ルビベースを記述
11 る 14 Spacer スペースを挿入する margin や padding プロパティで指定 15 strike 打ち消し線を引く 削除を表す場合には<del>に置き換える、 正確ではなく なった内容を表す場合には<s>に置き換える、 それ以外 の場合は text-decoration: line-through で指定 16 tt 等幅フォントで表示する font-family: monospace で指定 CSS CSS3 の登場により、従来 Photoshop や Javascript を工夫したデザインから、CSS3 によるデザイン に移行しています。これによりアップデートが効率的になりました。更に、デバイスやスクリーンサ イズにより拡張し、Retina デバイスで美しく閲覧が可能です。アニメーションもまた充実しました。 CSS のプロパティ（http://www.w3.org/Style/CSS/） 1 color color 2 opacity color 要素の透明度を指定する 3 background background and border 4 background- attachment background and border 5 background-c olor background and border 6 background-i mage background and border 7 background- position background and border 8 background-r epeat background and border 9 background-c lip background and border 背景の適用範囲を指定する 10 background- origin background and border 背景の基準位置を指定する 11 background-s ize background and border 背景画像のサイズを指定する
12 12 border background and border 13 border-botto m background and border 14 border-botto m-color background and border 15 border-botto m-left-radius background and border 左下の角丸を指定する 16 border-botto m-right-radiu s background and border 右下の角丸を指定する 17 border-botto m-style background and border 18 border-botto m-width background and border 19 border-color background and border 20 border-image background and border 画像ボーダーを指定する 21 border-image -outset background and border ボーダーイメージエリアを広げる 22 border-image -repeat background and border 画像ボーダーの繰り返し方法を指定する 23 border-image -slice background and border 画像のボーダー使用範囲を指定する 24 border-image -source background and border ボーダーに使用する画像ファイルを指定する 25 border-image -width background and border 画像ボーダーの太さを指定する 26 border-left background and border 27 border-left-co lor background and border 28 border-left-st yle background and border 29 border-left-wi dth background and border 30 border-radius background and border 角丸をまとめて指定する
13 31 border-right background and border 32 border-right-c olor background and border 33 border-right-s tyle background and border 34 border-right- width background and border 35 border-style background and border 36 border-top background and border 37 border-top-co lor background and border 38 border-top-lef t-radius background and border 右 上の角丸を指定する 39 border-top-rig ht-radius background and border 左 上の角丸を指定する 40 border-top-st yle background and border 41 border-top-wi dth background and border 42 border-width background and border 43 box-decoratio n-break basic box ボ ックスが改行する際の表示形式を指定する 44 box-shadow basic box ボ ックスに影をつける 45 bottom basic box 46 clear basic box 47 clip basic box 48 display basic box 49 float basic box 50 height basic box 51 left basic box 52 margin basic box 53 margin-botto m basic box 54 margin-left basic box
14 55 margin-right basic box 56 margin-top basic box 57 max-height basic box 58 max-width basic box 59 min-height basic box 60 min-width basic box 61 overflow basic box 62 overflow-x basic box 63 overflow-y basic box 64 padding basic box 65 padding-bott om basic box 66 padding-left basic box 67 padding-right basic box 68 padding-top basic box 69 position basic box 70 right basic box 71 top basic box 72 visibility basic box 73 width basic box 74 vertical-align basic box 75 z-index basic box 76 align-content flexible box 77 align-items flexible box 78 align-self flexible box 79 flex flexible box 80 flex-basis flexible box 81 flex-direction flexible box 82 flex-flow flexible box 83 flex-grow flexible box 84 flex-shrink flexible box 85 flex-wrap flexible box 86 justify-conten t flexible box
15 87 order flexible box 88 align-content flexible box 89 align-items flexible box 90 align-self flexible box 91 flex flexible box 92 flex-basis flexible box 93 hanging-punc tuation text 94 hyphens text 単語途中での改行方法を指定する 95 letter-spacing text 96 line-break text 禁則処理とは、文章の読みやすさや美的な観点から、句 読点や括弧等の文字が行頭（または行末）に来ないよう にする処理です。 97 line-height text 98 overflow-wra p text 単語途中の改行を指定する 99 tab-size text 100 text-align text 101 text-align-last text エレメントの透過性 102 text-combine- upright text 複数の文字による，単独の文字空間の中への結合 103 text-indent text 104 text-justify text 均等割付の形式を指定する（IE が独自に採用） 105 text-transfor m text 106 white-space text 107 word-break text 文の改行の仕方について指定する（IE が独自に採用） 108 word-spacing text 109 word-wrap text 単語の途中で改行するかどうかを指定する（IE 独自の 仕様） 110 text-decoratio n text decoration テキストの下線?上線?打ち消し線?点滅を指定する 111 text-decoratio n-color text decoration テキスト装飾色
16 112 text-decoratio n-line text decoration テキスト装飾線 113 text-decoratio n-style text decoration テキスト装飾種 114 text-shadow text decoration テキストに影をつける 115 text-underline -position text decoration テキスト下線の位置 116 @font-face font 117 @font-featur e-values font 118 font font 119 font-family font 120 font-feature-s ettings font OpenType フォント機能の利用について、有効/無効を 指定する 121 font-kerning font 欧文フォントにカーニングを適用する 122 font-languag e-override font 123 font-size lists and counters 124 font-size-adju st lists and counters フォント同士のサイズのバラつきを調整する 125 font-stretch lists and counters フォントの形状を幅広?幅狭にする 126 font-style lists and counters 127 font-synthesi s lists and counters 128 font-variant lists and counters 129 font-variant-a lternates lists and counters 130 font-variant-c aps lists and counters 131 font-variant-e ast-asian lists and counters
17 132 font-variant-li gatures lists and counters 133 font-variant-n umeric lists and counters 134 font-variant-p osition lists and counters 135 font-weight lists and counters 136 direction lists and counters 137 text-orientatio n lists and counters 138 text-combine- upright table 139 unicode-bidi table 140 writing-mode table 141 border-collap se table 142 border-spaci ng table 143 caption-side table 144 empty-cells table 145 table-layout table 146 counter-incre ment lists and counters 147 counter-reset lists and counters 148 list-style lists and counters 149 list-style-ima ge lists and counters 150 list-style-posit ion lists and counters 151 list-style-type lists and counters 152 @keyframes animation 153 animation animation アニメーションについてまとめて指定する 154 animation-del ay animation アニメーションがいつ始まるかを指定する
18 155 animation-dir ection animation アニメーションを交互に反転再生させるかどうかを指 定する 156 animation-du ration animation アニメーション一回分の時間の長さを指定する 157 animation-fill- mode animation 158 animation-iter ation-count animation アニメーションの繰り返し回数を指定する 159 animation-na me animation アニメーション名を指定する 160 animation-pla y-state animation 再生中か一時停止かを指定する 161 animation-tim ing-function animation アニメーションのタイミング?進行割合を指定する 162 backface-visi bility transform 要素の裏面を見られるようにするかどうかを指定する 163 perspective transform 3D 変形の奥行きの深さを指定する（親要素に指定） 164 perspective-o rigin transform 奥行きの消失点を指定する 165 transform transform 要素に 2D 変形、または、3D 変形を適用する 166 transform-ori gin transform 2D 変形、または、3D 変形の原点を指定する 167 transform-styl e transform 子要素がフラットに描画されるか立体的に描画される かを指定する 168 transition transition transition 効果（時間的変化）をまとめて指定する 169 transition-pro perty transition transition効果を適用する CSS プロパティ名を指定する 170 transition-dur ation transition 変化に掛かる時間を指定する 171 transition-timi ng-function transition 変化のタイミング?進行割合を指定する 172 transition-del ay transition 変化がいつ始まるかを指定する 173 box-sizing basic user interface
19 174 content basic user interface 175 cursor basic user interface 176 ime-mode basic user interface 177 nav-down basic user interface 178 nav-index basic user interface 179 nav-left basic user interface 180 nav-right basic user interface 181 nav-up basic user interface 182 outline basic user interface 183 outline-color basic user interface 184 outline-offset basic user interface 185 outline-style basic user interface 186 outline-width basic user interface 187 resize basic user interface 188 text-overflow basic user interface 189 break-after Multi-column Layout 190 break-before Multi-column Layout 191 break-inside Multi-column Layout 192 column-count Multi-column Layout 193 column-fill Multi-column Layout 194 column-gap Multi-column Layout 195 column-rule Multi-column Layout 196 column-rule-c olor Multi-column Layout 197 column-rule-s tyle Multi-column Layout 198 column-rule- width Multi-column Layout 199 column-span Multi-column Layout 200 column-width Multi-column Layout 201 columns Multi-column Layout 202 widows Multi-column Layout 203 orphans paged media 204 page-break-a paged media
20 fter 205 page-break-b efore paged media 206 page-break-i nside paged media 207 marks Generated Content 208 quotes Generated Content 209 filter filter effects 210 image-orient ation image values 211 image-render ing image values 212 image-resolut ion image values 213 object-fit image values 214 object-positio n image values 215 mask masking 216 mask-type masking 217 mark speech 218 mark-after speech 219 mark-before speech 220 phonemes speech 221 rest speech 222 rest-after speech 223 rest-before speech 224 voice-balanc e speech 225 voice-duratio n speech 226 voice-pitch speech 227 voice-pitch-ra nge speech 228 voice-rate speech
21 229 voice-stress speech 230 voice-volume speech 231 marquee-dire ction marquee 232 marquee-pla y-count marquee 233 marquee-spe ed marquee 234 marquee-styl e marquee
22 Canvas と SVG ＜作業中＞
23 Audio & Visual ＜作業中＞ * 詳しくはブラウザ毎の audio / video 要素でサポートするメディアフォーマットをご覧下さい。 https://developer.mozilla.org/ja/docs/Media_formats_supported_by_the_audio_and_video_elements ビデオを再生する 例）<video src=/slideshow/aitc-web-html5-v01/51485480/"http:/filename.ogg" controls> </video> 音声を埋め込む 例）<audio src="/test/audio.ogg"> </audio> src 属性 オーディオファイルの URL またはローカルシステムにあるファイルのパスを指定できます。 <audio> 要素には以下の属性があります controls : Web ページに、オーディオ用の標準的な HTML5 コントロールを表示します。 autoplay : 自動的にオーディオを再生します。 loop : 自動的にオーディオを繰り返します (ループ)。 例）<audio src="audio.ogg" controls autoplay loop> </audio> preload ：大きなファイルをバッファリングする audio 要素で 3 種類のうち 1 つ を選択します。 "none" はファイルをバッファリングしません。 "auto" はメディアファイルをバッファリングします。 "metadata" はファイルのメタデータだけをバッファリングします。 例）<audio src="audio.mp3" preload="auto" controls></audio> <source> 要素を指定することで、ビデオ?音声共に複数のリソースを指定することができます。 ブラウザに応じて異なる形式のデータを指定する際に有用です。 例） <video controls> <source src="foo.ogg" type="video/ogg"> <source src="foo.mp4" type="video/mp4"> Your browser does not support the <code>video</code> element. </video> 上記の例では Ogg フォーマットをサポートしているブラウザでは Ogg ファイルが再生されます。 もしブラウザが Ogg に対応していなければ、MPEG-4 形式のファイルが再生されます。
24 Drag and Drop ＜作業中＞ ドラッグする要素とドロップを受け入れる要素があります。 dragstart、drag, dragend, dragenter, dragover, dragleave, drop 例 <!DOCTYPE HTML> <html> <head> <script> function allowDrop(ev) { ev.preventDefault(); } function drag(ev) { ev.dataTransfer.setData("text", ev.target.id); } function drop(ev) { ev.preventDefault(); var data = ev.dataTransfer.getData("text"); ev.target.appendChild(document.getElementById(data)); } </script> </head> <body> <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div> <img id="drag1" src=/slideshow/aitc-web-html5-v01/51485480/"img_logo.gif" draggable="true" ondragstart="drag(event)" width="336" height="69"> </body> </html>
25
26 Websocket クライアントとサーバー間で双方向通信を行うためのプロトコルです。AJAX による通信が Pull 型であるのに 対して、Pull/Push 型の通信を行うことができます。 HTTP は通信開始時に 1000 バイト程度のテキストデータをやり取りする必要がある。これに対して WebSocket では数バイトで済み通信を素早くスタートできる。 例えば、取引スピードが重要視される金融分野の情報システムでよく使われている。 ＜作業中＞
27 Webmessaging Web messaging は DOM を脆弱性にさらさずに文書をブラウザ間で共有する。ウエブサイト間のコミュニケーシ ョンでも、cross-domain XMLHttpRequest,や dynamic script insertion は DOM を脆弱製にさらすが、Web messaging はさらさない。 ウエブサイトから、第三者のホストする広告にデータを送信したい場合、通常はセキュリティの例外が認めら れます。しかし, Webmessaging を利用することでメッセージイベントとしてデータが送信されます。 web messaging は cross-document messaging と channel messaging と ２ 種 類 あ り ま す 。 前 者 は window.postMessage(), 後者は MessageChannel というコードを利用します。サーバーに送信されるイベント と web sockets と並ぶコミュニケーションインターフェイスでは重要の要素です。
28 Web Workers ウェブ ワーカーを使用すると、UI や他のスクリプトによるユーザー インタラクションの処理をブロックす ることなく、長時間実行のスクリプトによる計算集約型のタスクの処理をバックグラウンドで処理することを 可能にする API です。 例） var myWorker = new Worker("worker.js"); var worker = new Worker('task.js');
29 Web SQL アプリケーションデータをクライアント側に保存する仕組みのひとつです。Cookie や Web ストレージが Key-Value 形式をサポートするのに対し、Web SQL Database では SQLite ベースの SQL によってデータにア クセスします。ただし、Web SQL データベースが、特定のソフトウェア(SQLite)の実装に基づくのは中立性に 欠けるとの観点から、現在では Web SQL Database の検討は停止しており、代わりに Indexed Database API を 利用することが推奨されています。Indexed Database API は、SQL に依存しない NoSQL に分類される方法で データにアクセスします。Web SQL データベースに代わり、今後の標準となる予定です。 例） - openDatabase(name, version, displayName, size, callback) - transaction(callback, errorCallback, successCallback) - executeSql(sql, params, successCallback, errorCallback)
30 Web Storage ＜作業中＞
31 GeoLocation ＜作業中＞ <!DOCTYPE html> <html lang="ja"> <head> <meta charset=utf-8> <script> //ユーザーの現在の位置情報を取得 navigator.geolocation.getCurrentPosition(successCallback, errorCallback); / ユ ーザーの現在の位置情報を取得 / function successCallback(position) { var gl_text = "緯度：" + position.coords.latitude + "<br>"; gl_text += "経度：" + position.coords.longitude + "<br>"; gl_text += "高度：" + position.coords.altitude + "<br>"; gl_text += "緯度?経度の誤差：" + position.coords.accuracy + "<br>"; gl_text += "高度の誤差：" + position.coords.altitudeAccuracy + "<br>"; gl_text += "方角：" + position.coords.heading + "<br>"; gl_text += "速度：" + position.coords.speed + "<br>"; document.getElementById("show_result").innerHTML = gl_text; } / 位 置情報が取得できない場合 / function errorCallback(error) { var err_msg = ""; switch(error.code) { case 1: err_msg = " 位置情報の利用が許可されていません"; break; case 2: err_msg = "デバイスの位置が判定できません"; break; case 3: err_msg = "タイムアウトしました"; break; } document.getElementById("show_result").innerHTML = err_msg; //デバッグ用→ document.getElementById("show_result").innerHTML = error.message; } </script> <title>Geolocation API サ ンプル</title> </head> <body> <p>あなたの現在位置</p> <div id="show_result"></div> </body> </html>

More Related Content

AITC 女子部 第一回 Web HTML5 補足資料v0.1

  • 1. 1 HTML5 開発ガイド 概要 HTML5 のウエブ開発を理解する為に、ウエブアプリケーションの開発において、どのようなベストプラクティ スがあるかガイドラインを提供します。当資料は上流（デザイン、アーキテクチャ）と下流（フレームワーク、 プロセス）を分けて記載することで全体を俯瞰しつつ、マークアップ言語の理解を深めることが目的です。 対象者 ウエブサイト、アプリケーション開発の技術者、アーキテクト、デザイナー 更新履歴 更新内容 日付 m/d/y 作成 レビューアー バージョン 初版作成 （未完） 8/8/15 入村夏実 高岡大介 v0.1 アプリケーションの分類方法 アプリケーションのカテゴリに応じて、求められる機能とそれを実装する為の技術が異なるため以下のように 分類することで技術とアプリケーションの役割のミスマッチを防げます。 URI の役割 情報系のサイト ナビゲーションやセマンティックは情報の掲載に集中しており、URI は使いやすく/共有可能で、RESTful であ
  • 2. 2 る。情報系のウエブサイトはオンラインのニュース、オンラインストア、会社のホームページ、そして、検索 エンジン等があります。 イベント型のサイト ナビゲーションやセマンティックはアプリケーションを利用する際の使いやすさが中心である。URI は明確で ある必要はありません。ウエブメール、カレンダー、マッピングやビジュライゼーション等があります。 技術 サーバーサイド（Thin クライアント） MVC(モデル?ビュー?コントローラ)をサーバーサイドに設定し、結果をユーザーのブラウザに出力する。デ ータを表示することや、ユーザーがサーバーサイドで処理をする為にアクションをとる際のインターフェイス を作ります。これらのアプリケーションはブラウザではなく、サーバーでロジックが実行されます。 クライアントサイド(Thick クライアント) MVC(モデル?ビュー?コントローラ)をブラウザ側で実行します。データの表示方法やアプリケーションのレ スポンスを速めることが重要でサーバーサイドの処理を減らし、クライアントによりインタラクティブなイン タフェイスを提供します。これらのアプリケーションはブラウザにロジックがあり、サーバーはコラボレーシ ョン、セキュリティ、冗長性などの役割を担います。 アーキテクチャ
  • 3. 3 開発手法 CSS プ レプロセッサー 素 早 く CSS を作成、運用する為に開発時に CSS のプレプロセッサーを使うことが推奨されます。 推奨: Sass（ +Compass） フ ロントエンド パッケージ マ ネージャ ウエブパッケージ手動でダウンロードし、更新があるたびに手動でダウンロードし直すよりも、パッケージマ ネ ージャで自動化することで効率化できます。 推 奨：Bower, NPM(node.js) CSS フレームワーク CSS フレームワークを使うことでアプリケーションのプロトタイプを作成する際にウエブサイトの基礎を素 早 く構築できます。 推 奨：Bootstrap, Zurb Foundation 参 考 :OOCSS, SMACSS, BEM Javascript 効果的な Javascript の開発は、設計、ツール、そしてコードのフレームワークを決めることから開始します。 厳密であることで、高品質なコードが可能になります。JSHint を利用すればバグを最小限に抑えることがで きます。そして、Coffee Script を使うことでコードの一貫性を保ち、トラブルを防止することができます 。 推 奨：”user strict” mode, JSHint, CoffeeScript, TypeScript, ECMAScript2015 ライブラリ – ライブラリは特定の課題に絞り込み、解決策を導きだします。ライブラリは軽く、対象とする 範囲は狭いです。ウエブアーキテクチャに関わることはないが、一助となります。 フレームワークーフレームワークはアプリケーションの構造にかかわり、コードにも影響します。フレームワ ークのルールに従いコーディングをし、かつ、コードからフレームワークを呼ぶのではなくフレームワークが コードを呼ぶ形を取ります。 例)jQueryは DOMに必要となるクロスブラウザで互換性のあるAPIを作るという課題を解決する為に出現した。 このようにライブラリは様々なウエブアプリケーションに利用されています。
  • 4. 4 背景知識 HTML5 って何？ HTML5 は 2014 年 10 月に、1997 年の HTML4 の後継であり World Wide Web に公開されたコンテンツを表示する マークアップ言語です。 ? マルチメディア、動画や音声を扱う要素が追加された。 - Web アプリケーションとしてのプラットフォームとなる為の API の仕様を含める。 - XHTML, HTML1 や DOM Level2 を含む、統合された言語でもある。 - HTML5 の背景 HTML4.01 に続くマークアップ言語の仕様として W3C は HTML を XML の文法で定義し直した XHTML を勧告しまし た。さらに XHTML2.0 の仕様策定にも着手したが XML 志向の強い内容となり、HTML との互換性がないこと、Web 制作者のニーズに応えていないことなどの理由から普及は進みませんでした。 XHTML2.0 の仕様に不満を持つ Apple 社、Mozilla.org、Opera 社は 2004 年に WHATWG(Web Hypertext Application Technology Working Group)を発足して、XHTML2.0 に変わる HTML の策定を開始します。その後 W3C がこの新 しい仕様を HTML5 として正式に採用した。 HTML５の特徴 HTML5 には従来のマークアップ言語としての機能に加えて Web アプリケーションのプラットフォームとなる為 の API の仕様も含まれています。プラグインノインストールが必要な RIA(リッチインターネットアプリケー ション)も HTML5 によりプラグインなしで閲覧できるようになりました。 HTML の進化
  • 5. 5 狭義の HTML5 / 広義の HTML5 HTML5 は狭義には HTML のマークアップのみをさします。一方で HTML5 のエクステンション、CSS3 やコンポー ネントライブラリ、Javascript フレームワークを含めることもあります。また、従来は HTML というと PC で 閲覧するウエブサイトをさしましたが、HTML5 はウエブアプリケーションを含み、携帯電話のウエブサイト、 アプリ、オフラインアプリケーション、ビデオのストリーミングサイト、等もさします。 HTML 要素が増えています CSS のプロパティが増えています
  • 6. 6 HTML5 は以下の 8 つの技術に特徴付けられています オフライン とストレージ Web サイトでユーザーのデータを保存する方法としては、これまではサーバ ー側に保存する仕組みを設けるか、クッキーを使うしかありませんでした。 HTML5 では、ブラウザ内に Web SQL データベースを持つことができるように なっており、Web Storage によりデータが 5Mbyte に増加し、機能面が強化 されています。 マルチメディア Web ページ上でオーディオやビデオを取り扱おうとすると、これまで Flash などプラグインを利用する必要がありましたが、HTML5 によりオーディオや ビデオなどのマルチメディアをブラウザ内でプラグインを用いず簡単に取 り扱うことができるようになりました。再生、停止、巻き戻し、現在の再 生時間を得るためのプロパティも用意されています。 パフォーマンス とインテグレーション HTML5 では Web Workers という技術を用い、バックグラウンドでの並行処理 が Web アプリケーションで可能になりました。フロントの Web ページとは 独立した形で JavaScript をバックグラウンドで動かせる仕組みとなって いるため、重い処理はバックエンドに任せることでユーザーインターフェ ース側の Web ページが応答しないという状況を避けることができます。 コネクティビティ データの送受信方法として、これまではクライアント側のブラウザがサー バ側にデータをリクエストするだけでした。しかし Web Sockets という技 術により、クライアント側からサーバ側にデータを送るだけでなく、サー バ側からクライアント側へデータを送ることもできるようになりました。 セマンティック HTML5 ではこれまでと同じタグを使って Web ページを組むことができます が、文書構造を明確に定義するための新たなタグが追加されています。要 素はより明確にそのページの文書構造を伝えることができるようになりま した。 グラフィック Canvas や SVG などを利用し、2D、3D グラフィックやエフェクトを利用した Web アプリの開発が可能です。 デバイスアクセス HTML5 で組まれた Web ページから、端末内の GPS や加速度センサーにアクセ スすることができる技術です。Google マップと組み合わせることで簡単に マップアプリを作ることができます。 CSS3 CSS3 によってスタイル機能が強化され、スマートフォンらしいデザイン、 ネイティブアプリケーションに近い表現など、幅広いニーズに応えること が容易になりました。
  • 7. 7 HTML の要素 (http://www.w3.org/TR/2011/WD-html5-20110525/) HTML 要素 分類 HTML 要素の役割 1 a Text-level sematics 2 abbr Text-level sematics 3 address Sections 4 area Embedded content 5 article Sections 記事であることを示す 6 aside Sections 余談であることを示す 7 audio Embedded content 音声を再生する 8 b Text-level sematics 9 base Document metadata 10 bdi Text-level sematics 文脈の前後から孤立させる 11 bdo Text-level sematics 12 blockquote Grouping 13 body Sections 14 br Text-level sematics 15 button Forms 16 canvas Embedded content 図形を描く 17 caption Tabular data 18 cite Text-level sematics 19 code Text-level sematics 20 col Tabular data 21 colgroup Tabular data 22 command Interactive elements 操作メニューの各コマンドを指定する 23 datalist Forms 入力候補となるデータリストを定義する 24 dd Grouping 25 del Edits 26 details Interactive elements 備考や操作手段などの詳細情報を示す 27 dfn Text-level sematics 28 div Grouping 29 dl Grouping 30 dt Grouping 31 em Text-level sematics
  • 8. 8 32 embed Embedded content プラグインデータを埋め込む 33 fieldset Forms 34 figcaption Grouping 図表のキャプションを示す 35 figure Grouping 図表であることを示す 36 footer Scripting フッタであることを示す 37 form Forms 38 h1 Sections 39 h2 Sections 40 h3 Sections 41 h4 Sections 42 h5 Sections 43 h6 Sections 44 head Document metadata 45 header Sections ヘッダであることを示す 46 hgroup Sections セクションの見出しを表す、見出しをまとめる 47 hr Grouping 48 html Root 49 i Text-level sematics 50 iframe Embedded content 51 img Embedded content 52 input Forms 53 ins Edits 54 kbd Text-level sematics 55 keygen Forms フォーム送信時にキーを発行する 56 label Forms 57 legend Forms 58 li Grouping 59 link Document metadata 60 map Embedded content 61 main - body のメインコンテンツを表します 62 mark Text-level semantics 文書内の該当テキストを目立たせる 63 menu Interactive elements 操作メニューを作成する（Firefox のみ対応） 64 meta Document metadata 65 meter Forms 規定範囲内の測定値を表す
  • 9. 9 66 nav Sections ナビゲーションであることを示す 67 noscript Scritping 68 object Embedded content 69 ol Grouping 70 optgroup Forms 71 option Forms 72 output Forms 計算結果を示す 73 p Grouping 74 param Embedded content 75 pre Grouping 76 progress Forms タスク完了までの進行状況を示す 77 q Text-level sematics 78 rp Text-level sematics ルビを囲む記号を指定する 79 rt Text-level sematics ルビのテキストを指定する 80 ruby Text-level sematics ルビをふる 81 s Text-level sematics 82 samp Text-level sematics 83 script Scripting 84 section Sections 一つのセクションであることを示す 85 select Forms 86 small Text-level sematics 87 source Embedded content メディア要素に選択可能なリソースを複数指定します 88 span Text-level sematics 89 strong Text-level sematics 90 style Document metadata 91 sub Text-level semantics 92 summary Interactive elements <details>の内容の要約を示す 93 sup Text-level semantics 動画や音声などの URL や種類を指定する 94 table Tabular data 95 tbody Tabular data 96 td Tabular data 97 textarea Forms 98 tfoot Tabular data 99 th Tabular data
  • 10. 10 100 thead Tabular data 101 time Text-level semantics 日付や時刻を正確に示す 102 title Document metadata 103 tr Tabular data 104 track Embedded content 動画や音声などにテキストを指定する。 105 u Text-level sematics 106 ul Grouping 107 var Text-level sematics 108 video Embedded content 動画を再生する 109 wbr Text-level sematics 改行しても良い位置を示す 廃止された要素 1 Acronym 略語（頭字語）であること を表す <abbr>に置き換える 2 applet JAVA アプレットを挿入す る <embed>や<object>に置き換える 3 base font テ キスト の基 準サイ ズ? 色?フォントを指定する font プロパティで指定 4 bgsound 効果音?BGM を鳴らす <audio>に置き換える 5 Big テ キスト のサ イズを ひと まわり大きくする font-size プロパティで指定 6 Center センタリングする margin:auto や text-align: center で指定 7 Dir リストを表示する <ul>に置き換える 8 Font フォントの種類?大きさ? 色を指定する CSS を使うか font プロパティで指定 9 Frame フ レーム に表 示する ファ イルを指定する <iframe>や CSS に置き換えるか、メニューなどの共通部 分はサーバー側でインクルードする。 10 Frameset ウ ィンド ウを フレー ムに 分割する <iframe>や CSS に置き換えるか、メニューなどの共通部 分はサーバー側でインクルードする。 11 Nobr 改行なしで表示する white-space: nowrap などの CSS で指定 12 Noframes フ レーム が表 示でき ない 環 境用の 表示 内容を 指定 する <iframe>や CSS に置き換えるか、メニューなどの共通部 分はサーバー側でインクルードする。 13 Rib ル ビをふ る文 字を指 定す <ruby>内に直接ルビベースを記述
  • 11. 11 る 14 Spacer スペースを挿入する margin や padding プロパティで指定 15 strike 打ち消し線を引く 削除を表す場合には<del>に置き換える、 正確ではなく なった内容を表す場合には<s>に置き換える、 それ以外 の場合は text-decoration: line-through で指定 16 tt 等幅フォントで表示する font-family: monospace で指定 CSS CSS3 の登場により、従来 Photoshop や Javascript を工夫したデザインから、CSS3 によるデザイン に移行しています。これによりアップデートが効率的になりました。更に、デバイスやスクリーンサ イズにより拡張し、Retina デバイスで美しく閲覧が可能です。アニメーションもまた充実しました。 CSS のプロパティ（http://www.w3.org/Style/CSS/） 1 color color 2 opacity color 要素の透明度を指定する 3 background background and border 4 background- attachment background and border 5 background-c olor background and border 6 background-i mage background and border 7 background- position background and border 8 background-r epeat background and border 9 background-c lip background and border 背景の適用範囲を指定する 10 background- origin background and border 背景の基準位置を指定する 11 background-s ize background and border 背景画像のサイズを指定する
  • 12. 12 12 border background and border 13 border-botto m background and border 14 border-botto m-color background and border 15 border-botto m-left-radius background and border 左下の角丸を指定する 16 border-botto m-right-radiu s background and border 右下の角丸を指定する 17 border-botto m-style background and border 18 border-botto m-width background and border 19 border-color background and border 20 border-image background and border 画像ボーダーを指定する 21 border-image -outset background and border ボーダーイメージエリアを広げる 22 border-image -repeat background and border 画像ボーダーの繰り返し方法を指定する 23 border-image -slice background and border 画像のボーダー使用範囲を指定する 24 border-image -source background and border ボーダーに使用する画像ファイルを指定する 25 border-image -width background and border 画像ボーダーの太さを指定する 26 border-left background and border 27 border-left-co lor background and border 28 border-left-st yle background and border 29 border-left-wi dth background and border 30 border-radius background and border 角丸をまとめて指定する
  • 13. 13 31 border-right background and border 32 border-right-c olor background and border 33 border-right-s tyle background and border 34 border-right- width background and border 35 border-style background and border 36 border-top background and border 37 border-top-co lor background and border 38 border-top-lef t-radius background and border 右 上の角丸を指定する 39 border-top-rig ht-radius background and border 左 上の角丸を指定する 40 border-top-st yle background and border 41 border-top-wi dth background and border 42 border-width background and border 43 box-decoratio n-break basic box ボ ックスが改行する際の表示形式を指定する 44 box-shadow basic box ボ ックスに影をつける 45 bottom basic box 46 clear basic box 47 clip basic box 48 display basic box 49 float basic box 50 height basic box 51 left basic box 52 margin basic box 53 margin-botto m basic box 54 margin-left basic box
  • 14. 14 55 margin-right basic box 56 margin-top basic box 57 max-height basic box 58 max-width basic box 59 min-height basic box 60 min-width basic box 61 overflow basic box 62 overflow-x basic box 63 overflow-y basic box 64 padding basic box 65 padding-bott om basic box 66 padding-left basic box 67 padding-right basic box 68 padding-top basic box 69 position basic box 70 right basic box 71 top basic box 72 visibility basic box 73 width basic box 74 vertical-align basic box 75 z-index basic box 76 align-content flexible box 77 align-items flexible box 78 align-self flexible box 79 flex flexible box 80 flex-basis flexible box 81 flex-direction flexible box 82 flex-flow flexible box 83 flex-grow flexible box 84 flex-shrink flexible box 85 flex-wrap flexible box 86 justify-conten t flexible box
  • 15. 15 87 order flexible box 88 align-content flexible box 89 align-items flexible box 90 align-self flexible box 91 flex flexible box 92 flex-basis flexible box 93 hanging-punc tuation text 94 hyphens text 単語途中での改行方法を指定する 95 letter-spacing text 96 line-break text 禁則処理とは、文章の読みやすさや美的な観点から、句 読点や括弧等の文字が行頭（または行末）に来ないよう にする処理です。 97 line-height text 98 overflow-wra p text 単語途中の改行を指定する 99 tab-size text 100 text-align text 101 text-align-last text エレメントの透過性 102 text-combine- upright text 複数の文字による，単独の文字空間の中への結合 103 text-indent text 104 text-justify text 均等割付の形式を指定する（IE が独自に採用） 105 text-transfor m text 106 white-space text 107 word-break text 文の改行の仕方について指定する（IE が独自に採用） 108 word-spacing text 109 word-wrap text 単語の途中で改行するかどうかを指定する（IE 独自の 仕様） 110 text-decoratio n text decoration テキストの下線?上線?打ち消し線?点滅を指定する 111 text-decoratio n-color text decoration テキスト装飾色
  • 16. 16 112 text-decoratio n-line text decoration テキスト装飾線 113 text-decoratio n-style text decoration テキスト装飾種 114 text-shadow text decoration テキストに影をつける 115 text-underline -position text decoration テキスト下線の位置 116 @font-face font 117 @font-featur e-values font 118 font font 119 font-family font 120 font-feature-s ettings font OpenType フォント機能の利用について、有効/無効を 指定する 121 font-kerning font 欧文フォントにカーニングを適用する 122 font-languag e-override font 123 font-size lists and counters 124 font-size-adju st lists and counters フォント同士のサイズのバラつきを調整する 125 font-stretch lists and counters フォントの形状を幅広?幅狭にする 126 font-style lists and counters 127 font-synthesi s lists and counters 128 font-variant lists and counters 129 font-variant-a lternates lists and counters 130 font-variant-c aps lists and counters 131 font-variant-e ast-asian lists and counters
  • 17. 17 132 font-variant-li gatures lists and counters 133 font-variant-n umeric lists and counters 134 font-variant-p osition lists and counters 135 font-weight lists and counters 136 direction lists and counters 137 text-orientatio n lists and counters 138 text-combine- upright table 139 unicode-bidi table 140 writing-mode table 141 border-collap se table 142 border-spaci ng table 143 caption-side table 144 empty-cells table 145 table-layout table 146 counter-incre ment lists and counters 147 counter-reset lists and counters 148 list-style lists and counters 149 list-style-ima ge lists and counters 150 list-style-posit ion lists and counters 151 list-style-type lists and counters 152 @keyframes animation 153 animation animation アニメーションについてまとめて指定する 154 animation-del ay animation アニメーションがいつ始まるかを指定する
  • 18. 18 155 animation-dir ection animation アニメーションを交互に反転再生させるかどうかを指 定する 156 animation-du ration animation アニメーション一回分の時間の長さを指定する 157 animation-fill- mode animation 158 animation-iter ation-count animation アニメーションの繰り返し回数を指定する 159 animation-na me animation アニメーション名を指定する 160 animation-pla y-state animation 再生中か一時停止かを指定する 161 animation-tim ing-function animation アニメーションのタイミング?進行割合を指定する 162 backface-visi bility transform 要素の裏面を見られるようにするかどうかを指定する 163 perspective transform 3D 変形の奥行きの深さを指定する（親要素に指定） 164 perspective-o rigin transform 奥行きの消失点を指定する 165 transform transform 要素に 2D 変形、または、3D 変形を適用する 166 transform-ori gin transform 2D 変形、または、3D 変形の原点を指定する 167 transform-styl e transform 子要素がフラットに描画されるか立体的に描画される かを指定する 168 transition transition transition 効果（時間的変化）をまとめて指定する 169 transition-pro perty transition transition効果を適用する CSS プロパティ名を指定する 170 transition-dur ation transition 変化に掛かる時間を指定する 171 transition-timi ng-function transition 変化のタイミング?進行割合を指定する 172 transition-del ay transition 変化がいつ始まるかを指定する 173 box-sizing basic user interface
  • 19. 19 174 content basic user interface 175 cursor basic user interface 176 ime-mode basic user interface 177 nav-down basic user interface 178 nav-index basic user interface 179 nav-left basic user interface 180 nav-right basic user interface 181 nav-up basic user interface 182 outline basic user interface 183 outline-color basic user interface 184 outline-offset basic user interface 185 outline-style basic user interface 186 outline-width basic user interface 187 resize basic user interface 188 text-overflow basic user interface 189 break-after Multi-column Layout 190 break-before Multi-column Layout 191 break-inside Multi-column Layout 192 column-count Multi-column Layout 193 column-fill Multi-column Layout 194 column-gap Multi-column Layout 195 column-rule Multi-column Layout 196 column-rule-c olor Multi-column Layout 197 column-rule-s tyle Multi-column Layout 198 column-rule- width Multi-column Layout 199 column-span Multi-column Layout 200 column-width Multi-column Layout 201 columns Multi-column Layout 202 widows Multi-column Layout 203 orphans paged media 204 page-break-a paged media
  • 20. 20 fter 205 page-break-b efore paged media 206 page-break-i nside paged media 207 marks Generated Content 208 quotes Generated Content 209 filter filter effects 210 image-orient ation image values 211 image-render ing image values 212 image-resolut ion image values 213 object-fit image values 214 object-positio n image values 215 mask masking 216 mask-type masking 217 mark speech 218 mark-after speech 219 mark-before speech 220 phonemes speech 221 rest speech 222 rest-after speech 223 rest-before speech 224 voice-balanc e speech 225 voice-duratio n speech 226 voice-pitch speech 227 voice-pitch-ra nge speech 228 voice-rate speech
  • 21. 21 229 voice-stress speech 230 voice-volume speech 231 marquee-dire ction marquee 232 marquee-pla y-count marquee 233 marquee-spe ed marquee 234 marquee-styl e marquee
  • 23. 23 Audio & Visual ＜作業中＞ * 詳しくはブラウザ毎の audio / video 要素でサポートするメディアフォーマットをご覧下さい。 https://developer.mozilla.org/ja/docs/Media_formats_supported_by_the_audio_and_video_elements ビデオを再生する 例）<video src=/slideshow/aitc-web-html5-v01/51485480/"http:/filename.ogg" controls> </video> 音声を埋め込む 例）<audio src="/test/audio.ogg"> </audio> src 属性 オーディオファイルの URL またはローカルシステムにあるファイルのパスを指定できます。 <audio> 要素には以下の属性があります controls : Web ページに、オーディオ用の標準的な HTML5 コントロールを表示します。 autoplay : 自動的にオーディオを再生します。 loop : 自動的にオーディオを繰り返します (ループ)。 例）<audio src="audio.ogg" controls autoplay loop> </audio> preload ：大きなファイルをバッファリングする audio 要素で 3 種類のうち 1 つ を選択します。 "none" はファイルをバッファリングしません。 "auto" はメディアファイルをバッファリングします。 "metadata" はファイルのメタデータだけをバッファリングします。 例）<audio src="audio.mp3" preload="auto" controls></audio> <source> 要素を指定することで、ビデオ?音声共に複数のリソースを指定することができます。 ブラウザに応じて異なる形式のデータを指定する際に有用です。 例） <video controls> <source src="foo.ogg" type="video/ogg"> <source src="foo.mp4" type="video/mp4"> Your browser does not support the <code>video</code> element. </video> 上記の例では Ogg フォーマットをサポートしているブラウザでは Ogg ファイルが再生されます。 もしブラウザが Ogg に対応していなければ、MPEG-4 形式のファイルが再生されます。
  • 24. 24 Drag and Drop ＜作業中＞ ドラッグする要素とドロップを受け入れる要素があります。 dragstart、drag, dragend, dragenter, dragover, dragleave, drop 例 <!DOCTYPE HTML> <html> <head> <script> function allowDrop(ev) { ev.preventDefault(); } function drag(ev) { ev.dataTransfer.setData("text", ev.target.id); } function drop(ev) { ev.preventDefault(); var data = ev.dataTransfer.getData("text"); ev.target.appendChild(document.getElementById(data)); } </script> </head> <body> <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div> <img id="drag1" src=/slideshow/aitc-web-html5-v01/51485480/"img_logo.gif" draggable="true" ondragstart="drag(event)" width="336" height="69"> </body> </html>
  • 25. 25
  • 26. 26 Websocket クライアントとサーバー間で双方向通信を行うためのプロトコルです。AJAX による通信が Pull 型であるのに 対して、Pull/Push 型の通信を行うことができます。 HTTP は通信開始時に 1000 バイト程度のテキストデータをやり取りする必要がある。これに対して WebSocket では数バイトで済み通信を素早くスタートできる。 例えば、取引スピードが重要視される金融分野の情報システムでよく使われている。 ＜作業中＞
  • 27. 27 Webmessaging Web messaging は DOM を脆弱性にさらさずに文書をブラウザ間で共有する。ウエブサイト間のコミュニケーシ ョンでも、cross-domain XMLHttpRequest,や dynamic script insertion は DOM を脆弱製にさらすが、Web messaging はさらさない。 ウエブサイトから、第三者のホストする広告にデータを送信したい場合、通常はセキュリティの例外が認めら れます。しかし, Webmessaging を利用することでメッセージイベントとしてデータが送信されます。 web messaging は cross-document messaging と channel messaging と ２ 種 類 あ り ま す 。 前 者 は window.postMessage(), 後者は MessageChannel というコードを利用します。サーバーに送信されるイベント と web sockets と並ぶコミュニケーションインターフェイスでは重要の要素です。
  • 28. 28 Web Workers ウェブ ワーカーを使用すると、UI や他のスクリプトによるユーザー インタラクションの処理をブロックす ることなく、長時間実行のスクリプトによる計算集約型のタスクの処理をバックグラウンドで処理することを 可能にする API です。 例） var myWorker = new Worker("worker.js"); var worker = new Worker('task.js');
  • 29. 29 Web SQL アプリケーションデータをクライアント側に保存する仕組みのひとつです。Cookie や Web ストレージが Key-Value 形式をサポートするのに対し、Web SQL Database では SQLite ベースの SQL によってデータにア クセスします。ただし、Web SQL データベースが、特定のソフトウェア(SQLite)の実装に基づくのは中立性に 欠けるとの観点から、現在では Web SQL Database の検討は停止しており、代わりに Indexed Database API を 利用することが推奨されています。Indexed Database API は、SQL に依存しない NoSQL に分類される方法で データにアクセスします。Web SQL データベースに代わり、今後の標準となる予定です。 例） - openDatabase(name, version, displayName, size, callback) - transaction(callback, errorCallback, successCallback) - executeSql(sql, params, successCallback, errorCallback)
  • 31. 31 GeoLocation ＜作業中＞ <!DOCTYPE html> <html lang="ja"> <head> <meta charset=utf-8> <script> //ユーザーの現在の位置情報を取得 navigator.geolocation.getCurrentPosition(successCallback, errorCallback); / ユ ーザーの現在の位置情報を取得 / function successCallback(position) { var gl_text = "緯度：" + position.coords.latitude + "<br>"; gl_text += "経度：" + position.coords.longitude + "<br>"; gl_text += "高度：" + position.coords.altitude + "<br>"; gl_text += "緯度?経度の誤差：" + position.coords.accuracy + "<br>"; gl_text += "高度の誤差：" + position.coords.altitudeAccuracy + "<br>"; gl_text += "方角：" + position.coords.heading + "<br>"; gl_text += "速度：" + position.coords.speed + "<br>"; document.getElementById("show_result").innerHTML = gl_text; } / 位 置情報が取得できない場合 / function errorCallback(error) { var err_msg = ""; switch(error.code) { case 1: err_msg = " 位置情報の利用が許可されていません"; break; case 2: err_msg = "デバイスの位置が判定できません"; break; case 3: err_msg = "タイムアウトしました"; break; } document.getElementById("show_result").innerHTML = err_msg; //デバッグ用→ document.getElementById("show_result").innerHTML = error.message; } </script> <title>Geolocation API サ ンプル</title> </head> <body> <p>あなたの現在位置</p> <div id="show_result"></div> </body> </html>