Suche senden
Hochladen
Workshop1-02
•
0 gefällt mir
•
349 views
M
mashimonator
Folgen
ドラッグ&ドロップAPI
Weniger lesen
Mehr lesen
Technologie
Design
Melden
Teilen
Melden
Teilen
1 von 16
Empfohlen
Workshop1-03
Workshop1-03
mashimonator
Workshop1-01
Workshop1-01
mashimonator
20170705 apiをつくろう
20170705 apiをつくろう
CData Software Japan
DOO-005_裏 Inside Azure ~OSS 視点で理解する、Azure のテクノロジ & アーキテクチャ~
DOO-005_裏 Inside Azure ~OSS 視点で理解する、Azure のテクノロジ & アーキテクチャ~
decode2016
RDBからWebAPIを5分で自動生成
RDBからWebAPIを5分で自動生成
CData Software Japan
"Kongゲートウェイ2.5リリース" Kong Konnectアップデート オンラインミートアップ :kong 製品整理、優位性
"Kongゲートウェイ2.5リリース" Kong Konnectアップデート オンラインミートアップ :kong 製品整理、優位性
Junji Nishihara
English words-card-3
English words-card-3
gskychess
Where is mrs. smith
Where is mrs. smith
REad2202
Empfohlen
Workshop1-03
Workshop1-03
mashimonator
Workshop1-01
Workshop1-01
mashimonator
20170705 apiをつくろう
20170705 apiをつくろう
CData Software Japan
DOO-005_裏 Inside Azure ~OSS 視点で理解する、Azure のテクノロジ & アーキテクチャ~
DOO-005_裏 Inside Azure ~OSS 視点で理解する、Azure のテクノロジ & アーキテクチャ~
decode2016
RDBからWebAPIを5分で自動生成
RDBからWebAPIを5分で自動生成
CData Software Japan
"Kongゲートウェイ2.5リリース" Kong Konnectアップデート オンラインミートアップ :kong 製品整理、優位性
"Kongゲートウェイ2.5リリース" Kong Konnectアップデート オンラインミートアップ :kong 製品整理、優位性
Junji Nishihara
English words-card-3
English words-card-3
gskychess
Where is mrs. smith
Where is mrs. smith
REad2202
2016 Corporate Communications
2016 Corporate Communications
Mike KEPPELL
2016 Learning with technology
2016 Learning with technology
Mike KEPPELL
2016 Engaging Students
2016 Engaging Students
Mike KEPPELL
2015 Learning, Teaching and Assessment
2015 Learning, Teaching and Assessment
Mike KEPPELL
2016 Online CAP
2016 Online CAP
Mike KEPPELL
Beijing restaurant
Beijing restaurant
gskychess
English words-card-2
English words-card-2
gskychess
English words-card-5
English words-card-5
gskychess
Flc summer-school-2010
Flc summer-school-2010
gskychess
English words-card-6
English words-card-6
gskychess
2015 November ANZ M-Learn
2015 November ANZ M-Learn
Mike KEPPELL
2016 Swinburne Ecosystem
2016 Swinburne Ecosystem
Mike KEPPELL
2016 Innovative Teaching
2016 Innovative Teaching
Mike KEPPELL
2015 Public Sector Infrastructure Summit
2015 Public Sector Infrastructure Summit
Mike KEPPELL
2015 Learning, Teaching & Assessment @ Swinburne
2015 Learning, Teaching & Assessment @ Swinburne
Mike KEPPELL
2015 Learning Spaces: Future Campus Development
2015 Learning Spaces: Future Campus Development
Mike KEPPELL
2015 Graduate Certificate in Learning and Teaching
2015 Graduate Certificate in Learning and Teaching
Mike KEPPELL
2016 Analytics
2016 Analytics
Mike KEPPELL
2016 New Designs for New Times
2016 New Designs for New Times
Mike KEPPELL
Authentic Assessment and Student Engagement
Authentic Assessment and Student Engagement
Mike KEPPELL
今からハジメるHTML5プログラミング
今からハジメるHTML5プログラミング
SwapSkills
Concentrated HTML5 & Attractive HTML5
Concentrated HTML5 & Attractive HTML5
Sho Ito
Weitere ähnliche Inhalte
Andere mochten auch
2016 Corporate Communications
2016 Corporate Communications
Mike KEPPELL
2016 Learning with technology
2016 Learning with technology
Mike KEPPELL
2016 Engaging Students
2016 Engaging Students
Mike KEPPELL
2015 Learning, Teaching and Assessment
2015 Learning, Teaching and Assessment
Mike KEPPELL
2016 Online CAP
2016 Online CAP
Mike KEPPELL
Beijing restaurant
Beijing restaurant
gskychess
English words-card-2
English words-card-2
gskychess
English words-card-5
English words-card-5
gskychess
Flc summer-school-2010
Flc summer-school-2010
gskychess
English words-card-6
English words-card-6
gskychess
2015 November ANZ M-Learn
2015 November ANZ M-Learn
Mike KEPPELL
2016 Swinburne Ecosystem
2016 Swinburne Ecosystem
Mike KEPPELL
2016 Innovative Teaching
2016 Innovative Teaching
Mike KEPPELL
2015 Public Sector Infrastructure Summit
2015 Public Sector Infrastructure Summit
Mike KEPPELL
2015 Learning, Teaching & Assessment @ Swinburne
2015 Learning, Teaching & Assessment @ Swinburne
Mike KEPPELL
2015 Learning Spaces: Future Campus Development
2015 Learning Spaces: Future Campus Development
Mike KEPPELL
2015 Graduate Certificate in Learning and Teaching
2015 Graduate Certificate in Learning and Teaching
Mike KEPPELL
2016 Analytics
2016 Analytics
Mike KEPPELL
2016 New Designs for New Times
2016 New Designs for New Times
Mike KEPPELL
Authentic Assessment and Student Engagement
Authentic Assessment and Student Engagement
Mike KEPPELL
Andere mochten auch
(20)
2016 Corporate Communications
2016 Corporate Communications
2016 Learning with technology
2016 Learning with technology
2016 Engaging Students
2016 Engaging Students
2015 Learning, Teaching and Assessment
2015 Learning, Teaching and Assessment
2016 Online CAP
2016 Online CAP
Beijing restaurant
Beijing restaurant
English words-card-2
English words-card-2
English words-card-5
English words-card-5
Flc summer-school-2010
Flc summer-school-2010
English words-card-6
English words-card-6
2015 November ANZ M-Learn
2015 November ANZ M-Learn
2016 Swinburne Ecosystem
2016 Swinburne Ecosystem
2016 Innovative Teaching
2016 Innovative Teaching
2015 Public Sector Infrastructure Summit
2015 Public Sector Infrastructure Summit
2015 Learning, Teaching & Assessment @ Swinburne
2015 Learning, Teaching & Assessment @ Swinburne
2015 Learning Spaces: Future Campus Development
2015 Learning Spaces: Future Campus Development
2015 Graduate Certificate in Learning and Teaching
2015 Graduate Certificate in Learning and Teaching
2016 Analytics
2016 Analytics
2016 New Designs for New Times
2016 New Designs for New Times
Authentic Assessment and Student Engagement
Authentic Assessment and Student Engagement
Ähnlich wie Workshop1-02
今からハジメるHTML5プログラミング
今からハジメるHTML5プログラミング
SwapSkills
Concentrated HTML5 & Attractive HTML5
Concentrated HTML5 & Attractive HTML5
Sho Ito
オフラインファーストの思想と実践
オフラインファーストの思想と実践
Shumpei Shiraishi
オフラインWebアプリの再到来で今、再び注目されるAPIの本命 ーJavaScript SQL-like database
オフラインWebアプリの再到来で今、再び注目されるAPIの本命 ーJavaScript SQL-like database
yoshikawa_t
プログラム・マネジメント @ Open棟梁プロジェクト
プログラム・マネジメント @ Open棟梁プロジェクト
Daisuke Nishino
楽ちんユーザー認証付Spa
楽ちんユーザー認証付Spa
Takahiro Tsuchiya
ADO.NETでつながるクラウドデータ連携
ADO.NETでつながるクラウドデータ連携
CData Software Japan
最新Webプロトコル傾向と対策
最新Webプロトコル傾向と対策
Kensaku Komatsu
Data API + AWS = (CMS どうでしょう 札幌編)
Data API + AWS = (CMS どうでしょう 札幌編)
Yuji Takayama
サーバー管理よ、サヨウナラ。サーバーレス アーキテクチャの意義と実践
サーバー管理よ、サヨウナラ。サーバーレス アーキテクチャの意義と実践
真吾 吉田
技術者として抑えておきたい Power BI アーキテクチャ
技術者として抑えておきたい Power BI アーキテクチャ
Yugo Shimizu
HTML5 APIについて
HTML5 APIについて
moonfactory Inc.
OSS on Azure で構築するウェブアプリケーション
OSS on Azure で構築するウェブアプリケーション
Daisuke Masubuchi
Attractive HTML5
Attractive HTML5
Sho Ito
勉強会資料①
勉強会資料①
真亮 坂口
社内システムの構造と設計、実装のはなし(下書きバージョン)
社内システムの構造と設計、実装のはなし(下書きバージョン)
SATOSHI TAGOMORI
『RIA開発におけるサービス開発のイロハ』
『RIA開発におけるサービス開発のイロハ』
Jun Funakura
RIA開発におけるサービス開発のイロハ
RIA開発におけるサービス開発のイロハ
Jun Funakura
Google Compute EngineとPipe API
Google Compute EngineとPipe API
maruyama097
Google Compute EngineとGAE Pipeline API
Google Compute EngineとGAE Pipeline API
maruyama097
Ähnlich wie Workshop1-02
(20)
今からハジメるHTML5プログラミング
今からハジメるHTML5プログラミング
Concentrated HTML5 & Attractive HTML5
Concentrated HTML5 & Attractive HTML5
オフラインファーストの思想と実践
オフラインファーストの思想と実践
オフラインWebアプリの再到来で今、再び注目されるAPIの本命 ーJavaScript SQL-like database
オフラインWebアプリの再到来で今、再び注目されるAPIの本命 ーJavaScript SQL-like database
プログラム・マネジメント @ Open棟梁プロジェクト
プログラム・マネジメント @ Open棟梁プロジェクト
楽ちんユーザー認証付Spa
楽ちんユーザー認証付Spa
ADO.NETでつながるクラウドデータ連携
ADO.NETでつながるクラウドデータ連携
最新Webプロトコル傾向と対策
最新Webプロトコル傾向と対策
Data API + AWS = (CMS どうでしょう 札幌編)
Data API + AWS = (CMS どうでしょう 札幌編)
サーバー管理よ、サヨウナラ。サーバーレス アーキテクチャの意義と実践
サーバー管理よ、サヨウナラ。サーバーレス アーキテクチャの意義と実践
技術者として抑えておきたい Power BI アーキテクチャ
技術者として抑えておきたい Power BI アーキテクチャ
HTML5 APIについて
HTML5 APIについて
OSS on Azure で構築するウェブアプリケーション
OSS on Azure で構築するウェブアプリケーション
Attractive HTML5
Attractive HTML5
勉強会資料①
勉強会資料①
社内システムの構造と設計、実装のはなし(下書きバージョン)
社内システムの構造と設計、実装のはなし(下書きバージョン)
『RIA開発におけるサービス開発のイロハ』
『RIA開発におけるサービス開発のイロハ』
RIA開発におけるサービス開発のイロハ
RIA開発におけるサービス開発のイロハ
Google Compute EngineとPipe API
Google Compute EngineとPipe API
Google Compute EngineとGAE Pipeline API
Google Compute EngineとGAE Pipeline API
Workshop1-02
1.
HTML5 と 関連API
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 > 利用方法 実装するために最小限必要なこと
1.ドラッグ元の指定(draggable 属性) 2.ドラッグ開始のイベント処理 3.ドロップ対象のイベント処理 (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アプリケーションの可能性はかなり広がる