![はじめに 一般的に”HTML5”と呼ばれている範囲（広義） Web Workers “HTML5”という仕様 ドラッグ＆ドロップ キャンバス Data Cache API コミュニケーション オフライン File API など… Server-Sent API Web Sockets Indexed Database API Web SQL Database Web Storage など… HTML5&API入門[白石俊平,2010,6頁,日経BP社]より引用、一部変更](data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7)
Recomendados
Mais conteúdo relacionado
Destaque
Destaque (20)
Semelhante a Workshop1-02
Semelhante a Workshop1-02 (20)
Workshop1-02
- 2. はじめに 一般的に”HTML5”と呼ばれている範囲（広義） Web Workers “HTML5”という仕様 ドラッグ＆ドロップ キャンバス Data Cache API コミュニケーション オフライン File API など… Server-Sent API Web Sockets Indexed Database API Web SQL Database Web Storage など… HTML5&API入門[白石俊平,2010,6頁,日経BP社]より引用、一部変更
- 3. 今後の予定 「HTML5 の新機能」 ・キャンバス ・ドラッグ＆ドロップAPI ・リッチテキスト編集用API ・フォーム要素 ・video要素、audio要素 ・その他新機能 「関連API」 ・FileAPI ・Geolocation API ・コミュニケーションAPI ・オフラインWebアプリケーション ・Web Storage ・Web SQL Database ・Web Workers ・Web Sockets ・Server－Sent Events ・その他API
- 4. > HTML5の新機能 > ドラッグ＆ドロップAPI > 目次 目次 ・ドラッグ＆ドロップAPIとは ・DnD の “これまで” と “これから” ・利用方法 ・使いどころ ・まとめ ・おまけ － 個人的な感想 －
- 5. > HTML5の新機能 > ドラッグ＆ドロップAPI > ドラッグ＆ドロップAPIとは ドラッグ＆ドロップAPIとは HTML5 で ドラッグ＆ドロップを扱うためのネイティブなインタフェース Web標準として DnD という操作をサポート
- 6. > HTML5の新機能 > ドラッグ＆ドロップAPI > DnD の “これまで” と “これから” ！？ 前からできるよね？
- 7. > HTML5の新機能 > ドラッグ＆ドロップAPI > DnD の “これまで” と “これから” 今までとの最大の違い ≒ ブラウザによるネイティブサポート
- 8. > HTML5の新機能 > ドラッグ＆ドロップAPI > DnD の “これまで” と “これから” これまで ・マウスイベント（mousedown, mouseover, mousemove, mouseup...）の利用 ・クロスブラウザ対応 ・JavaScriptを使った複雑な処理 ・DnD 用の JavaScript ライブラリ導入 これから ・実装がより簡単になる ・他のアプリケーションとのデータ連携が可能になる ・テキストより複雑なデータタイプを扱える ・ファイルのドラッグ＆ドロップも…？
- 9. > HTML5の新機能 > ドラッグ＆ドロップAPI > 利用方法 実装するために最小限必要なこと １．ドラッグ元の指定（draggable 属性） ２．ドラッグ開始のイベント処理 ３．ドロップ対象のイベント処理 （JavaScript） box-1 box-2 ドラッグ元 ドロップ対象
- 10. > HTML5の新機能 > ドラッグ＆ドロップAPI > 利用方法 draggable 属性 要素のドラッグ元としての状態を指定する （全ての HTML要素 に指定可能） ※補足 以下の場合は draggable 属性を指定しなくてもデフォルトでドラッグ可能 ・href属性がセットされた a 要素 ・src属性がセットされた img要素 ドラッグ元とする要素には draggable属性を指定する
- 11. > HTML5の新機能 > ドラッグ＆ドロップAPI > 利用方法 JavaScriptによるデータのやりとり ドラッグ＆ドロップ ≒ ドラッグ元とドロップ対象の間でデータをやりとりすること ドラッグ元 ドロップ対象 データ保存場所 <script> ドラッグのタイミングで保存 </script> <script> ドロップのタイミングで取り出し </script>
- 12. > HTML5の新機能 > ドラッグ＆ドロップAPI > 使いどころ ドラッグ＆ドロップAPIの使いどころ ≒ ドラッグ＆ドロップの使いどころ
- 13. > HTML5の新機能 > ドラッグ＆ドロップAPI > 使いどころ ドラッグ＆ドロップAPIの使いどころ ≒ WebアプリケーションのUI
- 14. > HTML5の新機能 > ドラッグ＆ドロップAPI > 使いどころ 使いどころ 直観的な並び替えや移動が求められるケースや操作ステップ数を減らしたいケース demo-1 demo-2 demo-3 他のアプリとの連携、複雑なデータタイプを扱うケース、ファイルアップロードなど demo-4 demo-5
- 15. > HTML5の新機能 > ドラッグ＆ドロップAPI > まとめ DnDは、もはや “凝ったUI”ではない！ もっと色々な場面で使ってみよう！
- 16. > HTML5の新機能 > ドラッグ＆ドロップAPI > おまけ（個人的な感想） 使い易さ ： ？ 記述するコード量や難易度は劇的に変わらない印象 使いどころ ： ↑ よりリッチなWebアプリケーションを構築するうえでは、 使いどころは増えていく 可能性 ： ↑↑↑ 仕様策定中のAPIが実装され、それらと連携可能となれば、 Webアプリケーションの可能性はかなり広がる