| 第159回 | jQuery, HTML5, WebAPI時代の リッチなWebコンテンツを作ってみよう |
|---|
- WebコンテンツなのでWebブラウザさえあれば
- 基本的な構成は？
- 色々な部品たち（ライブラリ）
- 基本的GUI
- リスト表示、プログラムソース等の整形表示
- 表、グラフ、数式
- プレゼン、その他
- Web APIで広がる用途
- モバイル・タブレット対応
©2013 中野裕司 |
ラーニング推進機構eラーニング授業設計支援室 ランチョンセミナー |
1 |  |
|---|
| 第159回 | jQuery, HTML5, WebAPI時代の リッチなWebコンテンツを作ってみよう |
|---|
| ©2013 中野裕司 |
ラーニング推進機構eラーニング授業設計支援室 ランチョンセミナー |
|---|
WebコンテンツなのでWebブラウザさえあれば
| WebコンテンツなのでWebブラウザさえあれば |
|---|
- そうです。Webブラウザさえあればよいのです。基本的にはネットに繋がなくともよいのです。
- 表示（中には操作も）のためのアプリケーションが不要です。
- というか、アプリケーションがコンテンツに含まれているというべきかも。
- グラフィックス、GUIの各種パーツ、動画、グラフ、表、数式、プレゼン...いろんなことができます。
- ｅポートフォリオのデータとしてそのまま使えるでしょう。
- まだよい編集ツールがあまりないかも。
- 基本的にはテキストエディタでも編集できますし、Webページ作成ツールも役に立つでしょう。
|
|
2 | |
|---|
基本的な構成は？
| 基本的な構成は？ |
|---|
- HTML5 (.html)
- CSS (.css)
- JavaScript (.js)
- JavaScriptライブラリ
- jQuery : 本来はAjaxライブラリだがGUIやイベント処理も強力。
- jQuery(+HTML5)各種ライブラリ
- GUI、リスト、文書整形、表、グラフ、数式、プレゼン他
- その他、画像、メディアファイル等
|
|
3 | |
|---|
色々な部品たち（ライブラリ）
・基本的GUI
| 色々な部品たち（ライブラリ） |
|---|
| 基本的GUI |
- jQuery UI
- ドラック、ドロップ等の操作、メニュー、ダイアログ、ツールチップス等の部品、フェード等のエフェクト等ができます。
- ポップアップダイアログ使ってみました。
|
|
4 | |
|---|
・リスト表示、プログラムソース等の整形表示
| 色々な部品たち（ライブラリ） |
|---|
| リスト表示 |
- リスト表示
- jzaefferer-jquery-treeview
- <ui>タグがそのままツリー表示に
- ホーム
- ダウンロード
- ASCII.jp：jQueryでエクスプローラ風メニューに！
- 使ってみました
- jsTree
- jzaefferer-jquery-treeview
|
|
5 | |
|---|
| 色々な部品たち（ライブラリ） |
|---|
| プログラムソース等の整形表示 |
- プログラムソース等の整形表示
- SyntaxHighlighter
- 行番号や背景色で見やすいソースコード表示
- ホーム
- ソースコードの装飾表示方法
- 使ってみました
- SyntaxHighlighter
|
|
6 | |
|---|
・表、グラフ、数式
| 色々な部品たち（ライブラリ） |
|---|
| 表 |
- 表
- DataTables
- 表を動的に作成でき、ソートや抽出等多機能でJavaScriptプログラムによる拡張も可能。
- ホーム
- HTML テーブルをナイスに扱う DataTables ～導入編～ - etc9
- 使ってみました(アクセスできません)
- DataTables
|
|
7 | |
|---|
| 色々な部品たち（ライブラリ） |
|---|
| グラフ |
- グラフ
- Flot
- 動的でインタラクティブなグラフのプロットが可能。
- ホーム
- jQueryベースでクールなグラフを作成するjavascript「Flot」
- 使ってみました
- 使ってみました2(学内)
- jqPlot
- pluginで色々な種類のグラフが描ける
- ホーム
- ASCII.jp：jQueryで見栄えのいいグラフが描ける「jqPlot」
- 使ってみました...見つからない..
- Flot
|
|
8 | |
|---|
| 色々な部品たち（ライブラリ） |
|---|
| 数式 |
- 数式
- MathML
- ライブラリはいらない。新しいブラウザに備わる機能。
- Wikipedia
- MathJax
- pluginで色々な種類のグラフが描ける
- ホーム
- MathJaxの使い方
- MathML
|
|
9 | |
|---|
・プレゼン、その他
Web APIで広がる用途
モバイル・タブレット対応