Download to read offline
![はじめに一般的に”HTML5”と呼ばれている範囲（広義）Web Workers“HTML5”という仕様ドラッグ＆ドロップキャンバスData Cache APIコミュニケーションオフラインFile APIなど…Server-Sent APIWeb SocketsIndexed Database APIWeb SQL DatabaseWeb Storageなど…HTML5&API入門[白石俊平,2010,6頁,日経BP社]より引用、一部変更](https://image.slidesharecdn.com/workshop103-100701234413-phpapp01/75/Workshop1-03-2-2048.jpg)
Workshop1-03
- 1.
- 2. はじめに一般的に”HTML5”と呼ばれている範囲（広義）Web Workers“HTML5”という仕様ドラッグ＆ドロップキャンバスData CacheAPIコミュニケーションオフラインFile APIなど…Server-Sent APIWeb SocketsIndexed Database APIWeb SQL DatabaseWeb Storageなど…HTML5&API入門[白石俊平,2010,6頁,日経BP社]より引用、一部変更
- 3. 今後の予定「HTML5 の新機能」・キャンバス・ドラッグ＆ドロップAPI・リッチテキスト編集用API・フォーム要素・video要素、audio要素・その他新機能「関連API」・FileAPI・Geolocation API・コミュニケーションAPI・オフラインWebアプリケーション・WebStorage・Web SQL Database・Web Workers・Web Sockets・Server－Sent Events・その他API
- 4. > HTML5の新機能 > リッチテキスト編集用API > 目次目次・テキスト とリッチテキスト・リッチテキスト編集用APIとは・利用方法・関連するAPI・使いどころ・まとめ
- 5. > HTML5の新機能 > リッチテキスト編集用API > テキスト とリッチテキストリッチテキスト…？
- 6. > HTML5の新機能 > リッチテキスト編集用API > テキスト とリッチテキストテキスト文字だけの情報（プレーンテキスト）あいうえおかきくけこアイウエオカキクケコabcdefghijklmnopqrstuvwxyz0123456789文字情報のみリッチテキスト文字の大きさやフォント、色などの情報を埋め込むことが出来る文章形式あいうえおかきくけこアイウエオカキクケコabcdefghijklmnopqrstuvwxyz0123456789装飾・リンク・画像など
- 7.
- 8. > HTML5の新機能 > リッチテキスト編集用API > テキスト とリッチテキスト具体的に何ができるの？
- 9. > HTML5の新機能 > リッチテキスト編集用API > リッチテキスト編集用APIとはできること（簡単に言うと）ブラウザで表示されているコンテンツに対して、テキストの追加や文字装飾、画像やリンクの挿入などが行えるheader基本的に input要素以外はユーザは編集不可naviheadingarticle------------------------------------------------------------------------------footerheadernaviheading編集可能＋リッチテキストarticle------------------------------------------------------------------------------footer
- 10. > HTML5の新機能 > リッチテキスト編集用API > 利用方法リッチテキストを編集するためには１．編集が可能な領域であることをブラウザに教える （contenteditable 属性、designModeプロパティ）２．JavaScript でなんやかんやしてやる （execCommand メソッド）②ユーザーが編集JavaScript<h3>①この領域は編集可能<div>------------------------------------------------------------------------------③なんやかんや<img><img>
- 11. > HTML5の新機能 > リッチテキスト編集用API > 利用方法contenteditable 属性該当の要素が編集可能であることを表すdiv要素などの通常は編集不可能な要素を編集可能にする※補足contenteditable の状態は子要素に継承される<div contenteditable=“true”><div contenteditable=“true”>明示的に指定<div><div contenteditable=“false”>状態を継承
- 12. > HTML5の新機能 > リッチテキスト編集用API > 利用方法designModeプロパティドキュメント（文書全体）が編集可能であることを表すdocument オブジェクトが持つプロパティで、JavaScriptから操作することができる<html><body onload=“editable();”></body></html><script>function editable() { window.document.designMode = ‘on’;}</script>文書全体が編集可能
- 13. > HTML5の新機能 > リッチテキスト編集用API > 利用方法execCommand メソッド編集内容をリッチテキストとして操作するためのメソッド前述の属性やプロパティによって要素が編集可能な状態になっていることが前提document.execCommand(commandId,showUI, value);execCommand を使用して編集<div contenteditable=“true”><script>execCommand：文字スタイルの変更 execCommand：リンクの挿入 ：</script>
- 14.
- 15.
- 16.