Workshop1-03

はじめに一般的に”HTML5”と呼ばれている範囲（広義）Web Workers“HTML5”という仕様ドラッグ＆ドロップキャンバスData Cache APIコミュニケーションオフラインFile APIなど…Server-Sent APIWeb SocketsIndexed Database APIWeb SQL DatabaseWeb Storageなど…HTML5&API入門[白石俊平,2010,6頁,日経BP社]より引用、一部変更

今後の予定「HTML5 の新機能」・キャンバス・ドラッグ＆ドロップAPI・リッチテキスト編集用API・フォーム要素・video要素、audio要素・その他新機能「関連API」・FileAPI・Geolocation API・コミュニケーションAPI・オフラインWebアプリケーション・Web Storage・Web SQL Database・Web Workers・Web Sockets・Server－Sent Events・その他API

> HTML5の新機能　>　リッチテキスト編集用API　>　目次目次・テキストとリッチテキスト・リッチテキスト編集用APIとは・利用方法・関連するAPI・使いどころ・まとめ

> HTML5の新機能　>　リッチテキスト編集用API　>　テキストとリッチテキストリッチテキスト…？

> HTML5の新機能　>　リッチテキスト編集用API　>　テキストとリッチテキストテキスト文字だけの情報（プレーンテキスト）あいうえおかきくけこアイウエオカキクケコabcdefghijklmnopqrstuvwxyz0123456789文字情報のみリッチテキスト文字の大きさやフォント、色などの情報を埋め込むことが出来る文章形式あいうえおかきくけこアイウエオカキクケコabcdefghijklmnopqrstuvwxyz0123456789装飾・リンク・画像など

> HTML5の新機能　>　リッチテキスト編集用API　>　リッチテキスト編集用APIとはリッチテキスト編集用APIとはリッチテキストを編集するためのネイティブなインタフェースColorBoldSizeあいうえおかきくけこアイウエオカキクケコabcdefghijklmnopqrstuvwxyz0123456789あいうえおかきくけこアイウエオカキクケコabcdefghijklmnopqrstuvwxyz0123456789斜体リンク画像

> HTML5の新機能　>　リッチテキスト編集用API　>　テキストとリッチテキスト具体的に何ができるの？

> HTML5の新機能　>　リッチテキスト編集用API　>　リッチテキスト編集用APIとはできること（簡単に言うと）ブラウザで表示されているコンテンツに対して、テキストの追加や文字装飾、画像やリンクの挿入などが行えるheader基本的に input 要素以外はユーザは編集不可naviheadingarticle------------------------------------------------------------------------------footerheadernaviheading編集可能＋リッチテキストarticle------------------------------------------------------------------------------footer

> HTML5の新機能　>　リッチテキスト編集用API　>　利用方法リッチテキストを編集するためには１．編集が可能な領域であることをブラウザに教える　　（contenteditable 属性、designMode プロパティ）２．JavaScript でなんやかんやしてやる　　（execCommand メソッド）②ユーザーが編集JavaScript<h3>①この領域は編集可能<div>------------------------------------------------------------------------------③なんやかんや<img><img>

> HTML5の新機能　>　リッチテキスト編集用API　>　利用方法contenteditable 属性該当の要素が編集可能であることを表すdiv 要素などの通常は編集不可能な要素を編集可能にする※補足contenteditable の状態は子要素に継承される<div contenteditable=“true”><div contenteditable=“true”>明示的に指定<div><div contenteditable=“false”>状態を継承

> HTML5の新機能　>　リッチテキスト編集用API　>　利用方法designModeプロパティドキュメント（文書全体）が編集可能であることを表すdocument オブジェクトが持つプロパティで、JavaScript から操作することができる<html><body onload=“editable();”></body></html><script>function editable() { window.document.designMode = ‘on’;}</script>文書全体が編集可能

> HTML5の新機能　>　リッチテキスト編集用API　>　利用方法execCommand メソッド編集内容をリッチテキストとして操作するためのメソッド前述の属性やプロパティによって要素が編集可能な状態になっていることが前提document.execCommand(commandId, showUI, value);execCommand を使用して編集<div contenteditable=“true”><script>execCommand：文字スタイルの変更 execCommand：リンクの挿入　　　：</script>

> HTML5の新機能　>　リッチテキスト編集用API　>　関連するAPI関連するAPI・テキストの選択、キャレット位置の操作　　選択状態の取得／操作をするためのAPIキャレット位置範囲選択・Undo処理　　Webアプリケーションでアンドゥ処理を実現するためのAPIUndo・Redo

> HTML5の新機能　>　リッチテキスト編集用API　>　使いどころ使いどころブログやCMSのコンテンツ更新、WYSIWYGエディタなどdemo-1demo-2demo-3

> HTML5の新機能　>　リッチテキスト編集用API　>　まとめリッチテキスト編集が簡単になった！テキストエディタでできる　≒　Web でもできる！

Workshop1-03

More Related Content

Viewers also liked (20)

Similar to Workshop1-03 (20)

Workshop1-03