More Related Content Similar to CloudSpiral 2013年度 Webアプリ講義 Similar to CloudSpiral 2013年度 Webアプリ講義 (20) CloudSpiral 2013年度 Webアプリ講義3. Cloud Specialist Program Initiative for Reality-based Advanced Learning
クラウドの定義 (by NIST)
http://csrc.nist.gov/publications/nistpubs/800-145/SP800-145.pdf
On-demand self-service
いつでも好きなときに資源を利用可能
Broad network access
ネットワークを通じて多様なクライアントから利用可能
Resource pooling
需要に応じた動的な計算資源の割り当て
Rapid elasticity
迅速なスケールアウト・スケールイン
Measured service
測定可能なサービス
分野・地域を越えた実践的情報教育協働ネットワーク
© Cloud Spiral partners 2013
2013/9/3
2
4. Cloud Specialist Program Initiative for Reality-based Advanced Learning
Broad network access
http://csrc.nist.gov/publications/nistpubs/800-145/SP800-145.pdf
Capabilities are available over the network
and accessed through standard mechanisms
that promote use by heterogeneous thin or
thick client platforms (e.g., mobile phones,
laptops, and PDAs)
分野・地域を越えた実践的情報教育協働ネットワーク
© Cloud Spiral partners 2013
2013/9/3
3
5. Cloud Specialist Program Initiative for Reality-based Advanced Learning
Broad network access
http://csrc.nist.gov/publications/nistpubs/800-145/SP800-145.pdf
システムの機能
ネットワークを通じて利用可能
Capabilities are available over the network
and accessed through standard mechanisms
that promote use by heterogeneous thin or
thick client platforms (e.g., mobile phones,
laptops, and PDAs)
Thin/Thick問わず様々な
クライアントから利用できる
分野・地域を越えた実践的情報教育協働ネットワーク
標準的なメカニズム(?)で
アクセスできる
© Cloud Spiral partners 2013
2013/9/3
4
6. Cloud Specialist Program Initiative for Reality-based Advanced Learning
BNAを満たさないシステムの例
スタンドアローン
メモ帳/マインスイーパ/…
動作プラットフォームが限定的
Windows/Macアプリ
Android/iPhoneアプリ
通信プロトコルが非「標準的」
Skype …
分野・地域を越えた実践的情報教育協働ネットワーク
© Cloud Spiral partners 2013
2013/9/3
5
7. Cloud Specialist Program Initiative for Reality-based Advanced Learning
BNAを満たすシステムとは?
Webアプリがデファクト (=標準的なメカニズム)
Webアプリのアーキテクチャ
クライアントサイド
動作環境:ブラウザ
プロトコル :HTTP
通信データ :HTML/CSS/JavaScript
サーバサイド
動作環境:any
Apache+Perl+CGI
Tomcat+Java+DWR
…
分野・地域を越えた実践的情報教育協働ネットワーク
© Cloud Spiral partners 2013
2013/9/3
6
8. Cloud Specialist Program Initiative for Reality-based Advanced Learning
メールアプリの例
非クラウド型
(Thunderbird/Outlook)
ネイティブ
アプリ
クラウド型
ブラウザ
SMTP/POP
メール
サーバ
Web
サーバ
SMTP/POP
メール
サーバ
(gmail)
HTML
分野・地域を越えた実践的情報教育協働ネットワーク
© Cloud Spiral partners 2013
2013/9/3
7
9. Cloud Specialist Program Initiative for Reality-based Advanced Learning
Webアプリが可能にすること
「研究会への投稿&発表」
開発環境
発表申し込み・投稿
原稿執筆・コンパイル
スライド作成・発表
音楽・動画
:
:
:
:
:
Cloud9 IDE/Eclipse Orion
Easychair
Google Drive + Latexlab
Google Drive
Amazon MP3/Youtube
!
分野・地域を越えた実践的情報教育協働ネットワーク
© Cloud Spiral partners 2013
2013/9/3
8
10. Cloud Specialist Program Initiative for Reality-based Advanced Learning
Webアプリが可能にすること
何からでも
どこからでも
アプリ/データ
計算資源(CPU/HDD…)
分野・地域を越えた実践的情報教育協働ネットワーク
© Cloud Spiral partners 2013
2013/9/3
9
11. Cloud Specialist Program Initiative for Reality-based Advanced Learning
Webアプリが可能にすること
何からでも
どこからでも
分野・地域を越えた実践的情報教育協働ネットワーク
© Cloud Spiral partners 2013
2013/9/3
10
12. Cloud Specialist Program Initiative for Reality-based Advanced Learning
クライアントサイド開発の難しさ
様々なデバイスへの対応が必須
特にモバイル端末,ウィンドウサイズが定まらない
様々なブラウザ
デザインの考慮
ユーザビリティ
使いやすさ,見やすさ
アクセシビリティ
どんな人でも利用可能か?
技術進歩の嵐
分野・地域を越えた実践的情報教育協働ネットワーク
© Cloud Spiral partners 2013
2013/9/3
11
13. Cloud Specialist Program Initiative for Reality-based Advanced Learning
今日やること
クラウド時代のソフトウェア=Webアプリをどのよう
な技術を使って,どう開発するか
クライアントサイド開発あれこれ
分野・地域を越えた実践的情報教育協働ネットワーク
© Cloud Spiral partners 2013
2013/9/3
12
16. Cloud Specialist Program Initiative for Reality-based Advanced Learning
HTML
構造化された文章を記述するマークアップ言語
W3C (World Wide Web Consortium) 策定
他のドキュメントへのハイパーリンク
<html>
<head>
<title>CloudSpiral</title>
</head>
ブラウザで
レンダリング
<body>
<h1>CloudSpiral</h1>
<a href="about.html">about</a>
<a href="news.html">news</a>
</body>
</html>
分野・地域を越えた実践的情報教育協働ネットワーク
CloudSpiral
about
news
ハイパーリンク
© Cloud Spiral partners 2013
2013/9/3
15
17. Cloud Specialist Program Initiative for Reality-based Advanced Learning
HTML歴史 1989年
ティム・バーナーズ=リーがWWWを考案
HTTP/HTML/URLを開発
「構造化文章の整理」が目的
HTMLの能力
「文章の構造化」と
「ハイパーリンク」
http://en.wikipedia.org/wiki/Tim_Berners-Lee
▼
1990
1995
分野・地域を越えた実践的情報教育協働ネットワーク
2000
2005
© Cloud Spiral partners 2013
2013/9/3
16
18. Cloud Specialist Program Initiative for Reality-based Advanced Learning
HTML歴史 1995-1996
HTML2が勧告される
「画像」 利用への要求
CloudSpiral
about
news
CSS1が勧告
「装飾」 したいという要求
NetscapeがJavaScriptを開発
「処理」 したいという要求
CloudSpiral
about
news
▼…
1990
1995
分野・地域を越えた実践的情報教育協働ネットワーク
2000
2005
© Cloud Spiral partners 2013
2013/9/3
17
19. Cloud Specialist Program Initiative for Reality-based Advanced Learning
HTML歴史 1999
HTML4.01が勧告
しばらくWebのデファクトに
<DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
構造化文章はHTML・装飾はCSS
以降Webの激的な変化
▼
1990
1995
分野・地域を越えた実践的情報教育協働ネットワーク
2000
2005
© Cloud Spiral partners 2013
2013/9/3
18
20. Cloud Specialist Program Initiative for Reality-based Advanced Learning
HTML歴史 1999以降
W3C
XHTML1.0を推進
「XML遵守」という思想
<br>
→ <br />
<HEAD> → <head>
WHATWG
ブラウザベンダ (Apple/Mozilla/Opera) が設立
Web Applications1.0を推進
「Webアプリ構築」という思想
▼…………………
1990
1995
分野・地域を越えた実践的情報教育協働ネットワーク
2000
2005
© Cloud Spiral partners 2013
2013/9/3
19
21. Cloud Specialist Program Initiative for Reality-based Advanced Learning
HTML歴史 2000年代
「マルチメディア」への要求が拡大
→ ブラウザプラグインとして実現
Flash(Adobe)/Silverlight(MS)/アプレット …
「オープンなWeb」という思想との齟齬
「Webアプリ機能」への要求
位置情報の取得やローカルデータベースなど
Google Gears
▼…………………………
1990
1995
分野・地域を越えた実践的情報教育協働ネットワーク
2000
2005
© Cloud Spiral partners 2013
2013/9/3
20
22. Cloud Specialist Program Initiative for Reality-based Advanced Learning
HTML歴史 2008年
HTML5 ドラフト策定
(2014に正式勧告予定)
Web Applications1.0が前身 (XHTML2.0は打ち切り)
「マルチメディア」と「Webアプリ機能」をサポート
Flash/Silverlight
後方互換性の保証
HTML1~4(strict/transitional/frameset) XHTML1.x(strict…)
“Living Standard”
ブラウザベンダやデザイナのフィードバックを受けて継続的に仕様を更新
▼
1990
1995
分野・地域を越えた実践的情報教育協働ネットワーク
2000
2005
© Cloud Spiral partners 2013
2013/9/3
21
23. Cloud Specialist Program Initiative for Reality-based Advanced Learning
HTML DTD 利用率の変化
HTML5
XHTML
HTML4.01
transitional
transitional
HTML5
XHTML
transitional
HTML4.01
transitional
2010/10
分野・地域を越えた実践的情報教育協働ネットワーク
2013/08
© Cloud Spiral partners 2013
2013/9/3
22
24. Cloud Specialist Program Initiative for Reality-based Advanced Learning
HTML5の拡張ポイント
文章の構造表現の強化
セマンティクス
マルチメディア機能の強化
audio/video/Canvas
より高度なAPIの追加
Geolocation/WebSocket/Web Storage/Web Workers/クロスドキュメン
トメッセージング/オフラインアプリケーション/アプリケーションキャッシュ/ド
ラッグ&ドロップ/ファイルAPI/バッテリーAPI/…
ブラウザ ≠ 文章の閲覧ツール
ブラウザ = アプリケーションプラットフォーム
分野・地域を越えた実践的情報教育協働ネットワーク
© Cloud Spiral partners 2013
2013/9/3
23
25. Cloud Specialist Program Initiative for Reality-based Advanced Learning
HTML5で作成されたWebアプリ
HTML5 Webcam Toy (カメラ)
http://webcamtoy.com/
CSS 3.0 Maker (CSSジェネレータ)
http://www.css3maker.com/
Clipping Magic (画像処理)
http://clippingmagic.com/
Tear-able Cloth - CodePen (布シミュレータ)
http://codepen.io/stuffit/pen/KrAwx/
分野・地域を越えた実践的情報教育協働ネットワーク
© Cloud Spiral partners 2013
2013/9/3
24
26. Cloud Specialist Program Initiative for Reality-based Advanced Learning
注意点
HTML5の対応状況は各種ブラウザによって様々
HTML5はJavaScriptの利用が前提
将来どうなるかは誰にもわからない
Flashも健在
Web2.0 is dead. HTML5は? クラウドは?
分野・地域を越えた実践的情報教育協働ネットワーク
© Cloud Spiral partners 2013
2013/9/3
25
28. Cloud Specialist Program Initiative for Reality-based Advanced Learning
セマンティックWeb
ネット上の情報に「意味=セマンティクス」を付与
することで,より便利なWebを実現する考え
現在のWeb
セマンティックWeb
文字 文字
文字 文字
文字
文字 文字
文字 文字
意味 意味
文字
意味 意味
意味
文字による検索
文字 + 意味による検索
k
3万円以下の良いタブレットは?
分野・地域を越えた実践的情報教育協働ネットワーク
© Cloud Spiral partners 2013
2013/9/3
27
29. Cloud Specialist Program Initiative for Reality-based Advanced Learning
HTML5のセマンティクス例1
ページ全体の構造の意味付けが標準化
~HTML4・XHTML1.0
HTML5
<div>
<div>
<header>
<div>
<div>
<nav>
<article>
<footer>
<header>
<article>
フッタにshin@mat.comが
k
含まれるページは?
分野・地域を越えた実践的情報教育協働ネットワーク
<nav>
<footer>
© Cloud Spiral partners 2013
2013/9/3
28
30. Cloud Specialist Program Initiative for Reality-based Advanced Learning
HTML5のセマンティクス例2
inputフォームの意味が拡張
~HTML4・XHTML1.0
名前: <input type="text">
年齢: <input type="text">
メール:<input type="text">
誕生日:<input type="text">
<input type="submit" value="登録">
分野・地域を越えた実践的情報教育協働ネットワーク
HTML5
名前: <input type="text">
年齢: <input type="number">
メール:<input type="email">
誕生日:<input type="date">
<input type="submit" value="登録">
© Cloud Spiral partners 2013
2013/9/3
29
31. Cloud Specialist Program Initiative for Reality-based Advanced Learning
意味付けのメリット
inputフォームに適切な意味付けをすることで,
ブラウザがその意味にあった処理をしてくれる
使いやすい入力フィールド,入力チェックなど
従来はJavaScriptやライブラリでごりごり実装
セマンティックWebのメリットの一つ
HTML5は意味の使い方を定義しているだけ
ブラウザが賢く処理している
開発者は適切に意味をつけるだけでよい
分野・地域を越えた実践的情報教育協働ネットワーク
© Cloud Spiral partners 2013
2013/9/3
30
32. Cloud Specialist Program Initiative for Reality-based Advanced Learning
利用可能なinput type属性
text
password
submit
tel
url
email
number
range
color
1行テキスト
パスワード
登録ボタン
電話番号
URL
メールアドレス
数値
数値のレンジ
色
分野・地域を越えた実践的情報教育協働ネットワーク
search
date
month
week
time
datetime
検索テキスト
日付
月
週
時間
UTCの日時
HTML5で追加
© Cloud Spiral partners 2013
2013/9/3
31
33. Cloud Specialist Program Initiative for Reality-based Advanced Learning
演習A1
inputフォームが列挙された input.html を作成し,
ブラウザで動作を確認しなさい
ワークスペースは trial でよい
HTML5ファイルのテンプレート (コピペ推奨)
http://git.io/cspiral2013 から
html5-template.html を開く
全input要素はform要素で囲うこと
<form>
<input type="text">
<input type="tel">
<input type="submit" value="登録">
</form>
分野・地域を越えた実践的情報教育協働ネットワーク
© Cloud Spiral partners 2013
2013/9/3
32
34. Cloud Specialist Program Initiative for Reality-based Advanced Learning
演習A2~A3 (オプショナル)
A2:required属性をつけてsubmitを試しなさい
required: 必須入力項目であることを示す
<input type="text" required>
<input type="email" required>
<input type="tel">
A3:placeholder属性をつけて見やすくしなさい
placeholder: 入力時のユーザへのヒントを表すテキスト
<input type="text" placeholder="お名前" required>
<input type="email" placeholder="メールアドレス" required>
<input type="tel" placeholder="電話番号">
分野・地域を越えた実践的情報教育協働ネットワーク
© Cloud Spiral partners 2013
2013/9/3
33
35. Cloud Specialist Program Initiative for Reality-based Advanced Learning
Geolocation API
ユーザの現在地情報を取得するAPI
WiFi/携帯基地局/GPS/IPアドレスなどから算出
JavaScriptから呼び出す
モバイルアプリとの相性が良い
プライバシーの問題もあるのでオプトイン型
ユーザの許可が必須
分野・地域を越えた実践的情報教育協働ネットワーク
© Cloud Spiral partners 2013
2013/9/3
34
36. Cloud Specialist Program Initiative for Reality-based Advanced Learning
JavaScriptからの座標の取得方法
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
▼ geolocation API対応のブラウザか調べる
$(function(){
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(
show_location, show_error);
▲
} else {
alert('not supported'); 座標を取得する
-成功したら show_location 関数を呼ぶ
};
-失敗したら show_error 関数を呼ぶ
});
function show_location(position) {
var lat = position.coords.latitude;
var lon = position.coords.longitude;
$('#latlon').val(lat + ' ' + lon);
}
▲取得した緯度と経度を <input id="latlon"> に書込む
function show_error(error) {
:
分野・地域を越えた実践的情報教育協働ネットワーク
© Cloud Spiral partners 2013
2013/9/3
35
37. Cloud Specialist Program Initiative for Reality-based Advanced Learning
演習 B1
座標を取得する geolocation.html を作成しなさい
ソースは以下より取得 (コピペ推奨)
http://git.io/cspiral2013 より2つのファイルが必要
geolocation.html
js/geolocation.js
ワークスペース上のフォルダ構成も上記と同じようにすること
分野・地域を越えた実践的情報教育協働ネットワーク
© Cloud Spiral partners 2013
2013/9/3
36
38. Cloud Specialist Program Initiative for Reality-based Advanced Learning
演習 B2 (オプショナル)
現在地のGoogle Mapsを表示する geomap.html
を作成しなさい
地図表示領域の作成 (HTML)
<div id="map" style="width:400px; height:400px"></div>
Google Maps APIの読み込み (HTML)
<script src="//maps.google.com/maps/api/js?v=3&sensor=false">
</script>
緯度35:経度135の地図を表示 (JS)
function show_map(position) {
var latlng = new google.maps.LatLng(35, 135);
var opts = {zoom: 6, center: latlng};
map = new google.maps.Map(document.getElementById('map'), opts);
}
分野・地域を越えた実践的情報教育協働ネットワーク
© Cloud Spiral partners 2013
2013/9/3
37
40. Cloud Specialist Program Initiative for Reality-based Advanced Learning
WebSocket
HTTPによるブラウザ・サーバ間双方向通信技術
そもそもHTTPはクライアントからのPULL型
クライアント 「データよこせ」
サーバ 「はいよ」
サーバ側からのPUSH通信可能
サーバ 「データ送るわ」
クライアント 「OK」
リアルタイムなWebアプリが可能に
ゲーム/チャット/監視システム…
分野・地域を越えた実践的情報教育協働ネットワーク
© Cloud Spiral partners 2013
2013/9/3
39
41. Cloud Specialist Program Initiative for Reality-based Advanced Learning
比較 HTTP & Ajax
一般的なHTTP通信
リクエスト後即時応等
PULL型
サーバの
イベント発生
Ajax
リクエスト後即時応答
PULL型
非同期での通信
ブラウザの更新が不要
EventSpiral
分野・地域を越えた実践的情報教育協働ネットワーク
© Cloud Spiral partners 2013
2013/9/3
40
42. Cloud Specialist Program Initiative for Reality-based Advanced Learning
比較 Comet & WebSocket
Comet
WebSocket
リクエスト後に応答を保留
必要なタイミングで応答
疑似PUSH型通信
実はPULL型
一度サーバと接続確立
必要なタイミングでサーバ
から通信
PUSH型
効率的な双方向通信
分野・地域を越えた実践的情報教育協働ネットワーク
© Cloud Spiral partners 2013
2013/9/3
41
43. Cloud Specialist Program Initiative for Reality-based Advanced Learning
JavaScriptでWebSocketを使う
ws = new WebSocket('ws://133.30.159.3:8080/...');
ws.onopen = function() {
//接続成功時の処理
}
▲ 接続先サーバアドレスを指定して
WebSocketオブジェクトを生成する
ws.onmessage = function(message) {
...
サーバからのPUSHメッセージを取得した場合の処理を定義する
}
▲
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
ws.onerror = function() {
//接続エラー発生時の処理
}
ws.onclose = function() {
//切断時の処理
}
分野・地域を越えた実践的情報教育協働ネットワーク
© Cloud Spiral partners 2013
2013/9/3
42
44. Cloud Specialist Program Initiative for Reality-based Advanced Learning
tinychat
WebSocketを利用した簡単なチャットWebアプリ
サーバサイドシステム
は神戸大に設置
グループごとにサーブレット(受け口)を用意
神大サーバ
クライアント
tinychat
hello
tinychat01
分野・地域を越えた実践的情報教育協働ネットワーク
© Cloud Spiral partners 2013
2013/9/3
43
45. Cloud Specialist Program Initiative for Reality-based Advanced Learning
tinychat
WebSocketを利用した簡単なチャットWebアプリ
サーバサイドシステム
は神戸大に設置
グループごとにサーブレット(受け口)を用意
神大サーバ
クライアント
tinychat
hello
hello
tinychat02
tinychat01
hello
分野・地域を越えた実践的情報教育協働ネットワーク
tinychat03
© Cloud Spiral partners 2013
2013/9/3
44
46. Cloud Specialist Program Initiative for Reality-based Advanced Learning
演習C1
Tinychat のひな形ワークスペースのクローンを
作成しなさい
別紙 「Cloud9 IDEの使い方.pdf」 を参照
クローンするリポジトリのURL
https://github.com/shinsuke-mat/tinychat
分野・地域を越えた実践的情報教育協働ネットワーク
© Cloud Spiral partners 2013
2013/9/3
45
47. Cloud Specialist Program Initiative for Reality-based Advanced Learning
演習C2
グループ内でチャット可能なように修正しなさい
各班のtinychatサーブレットへの接続先
1班:
2班:
3班:
4班:
5班:
6班:
7班:
8班:
9班:
ws://133.30.159.3:8080/tinychat01/send
ws://133.30.159.3:8080/tinychat02/send
ws://133.30.159.3:8080/tinychat03/send
ws://133.30.159.3:8080/tinychat04/send
ws://133.30.159.3:8080/tinychat05/send
ws://133.30.159.3:8080/tinychat06/send
ws://133.30.159.3:8080/tinychat07/send
ws://133.30.159.3:8080/tinychat08/send
ws://133.30.159.3:8080/tinychat09/send
分野・地域を越えた実践的情報教育協働ネットワーク
© Cloud Spiral partners 2013
2013/9/3
46
48. Cloud Specialist Program Initiative for Reality-based Advanced Learning
演習C3 (オプショナル)
ブラウザを閉じた際に "bye" というメッセージを
送信するように修正しなさい
動作確認の際には複数タブを立ち上げればよい
分野・地域を越えた実践的情報教育協働ネットワーク
© Cloud Spiral partners 2013
2013/9/3
47
50. Cloud Specialist Program Initiative for Reality-based Advanced Learning
CSS3
CSS: HTML文章を「装飾」するための記述
1 .element {
2
background: orange;
3
border: solid 1px #666;
4 }
▲
▼ セレクタ: 「class=“element”」 の全要素に対して…
このスタイルを適用する
1 <div class="element">...</div>
CSS3で装飾能力が大幅に強化された
グラデーション/変形/アニメーション/Webフォント…
CSS 3.0 Marker
http://www.css3maker.com/
分野・地域を越えた実践的情報教育協働ネットワーク
© Cloud Spiral partners 2013
2013/9/3
49
51. Cloud Specialist Program Initiative for Reality-based Advanced Learning
レスポンシブWebデザイン
画面サイズに合わせて自動的にレイアウトを調整
マルチデバイス対応策の一つ
分野・地域を越えた実践的情報教育協働ネットワーク
© Cloud Spiral partners 2013
2013/9/3
50
52. Cloud Specialist Program Initiative for Reality-based Advanced Learning
百聞は一見に如かず
NTT Data
http://www.nttdata.com/
CAAAAAAAAAAT
http://roxik.com/cat
AWWWARDS
http://www.awwwards.com/
CloudSpiral
http://cloud-spiral.enpit.jp/
分野・地域を越えた実践的情報教育協働ネットワーク
© Cloud Spiral partners 2013
2013/9/3
51
53. Cloud Specialist Program Initiative for Reality-based Advanced Learning
レスポンシブの実現方法
CSS3のメディアクエリを使用 (一つのやり方)
▼ class="line" に対するデフォルトのスタイル
1 .line {
(枠線を書いているだけ)
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
width: 100%;
border: solid 1px #666;
}
▼ 幅200px以上
@media screen and (min-width: 200px) {
.line {
background: cyan;
}
}
▼ 幅300px以上
@media screen and (min-width: 300px) {
.line {
background: magenta;
}
}
分野・地域を越えた実践的情報教育協働ネットワーク
© Cloud Spiral partners 2013
2013/9/3
52
54. Cloud Specialist Program Initiative for Reality-based Advanced Learning
利点・欠点
ワンソース・マルチデバイスの思想
利点
運用が楽
未知の端末でも対応可
画面サイズだけで制御するため
欠点
通信量が大きい
メンテナンスが大変
端末ごとの細かい調整ができない
分野・地域を越えた実践的情報教育協働ネットワーク
© Cloud Spiral partners 2013
2013/9/3
53
55. Cloud Specialist Program Initiative for Reality-based Advanced Learning
Bootstrap3
http://getbootstrap.com/
Twitter社が開発したCSSフレームワーク
手軽に見栄えをよくできる
レスポンシブWebデザインに対応
HTML要素の class="xxx" の部分に特定の値を
指定するとかっこよくなる
Bootstrap v3.0.0を使う
2系列と大幅に変わっているので注意
分野・地域を越えた実践的情報教育協働ネットワーク
© Cloud Spiral partners 2013
2013/9/3
54
56. Cloud Specialist Program Initiative for Reality-based Advanced Learning
準備 (HTML)
1 <!DOCTYPE html>
2 <html lang="ja">
3
<head>
4
<meta charset="utf-8">
5
<meta name="viewport" content="width=device-width">
6
<title>Bootstrapテンプレート</title>
7
<link rel="stylesheet" href="css/bootstrap.min.css">
8
<link rel="stylesheet" href="css/bootstrap-theme.min.css">
▲ Bootstrapのスタイルシート2つをロード
9
</head>
10
11
<body>
12
<-- この部分を自由に記述する -->
13
14
<script src="//code.jquery.com/jquery.js"></script>
15
<script src="js/bootstrap.js"></script>
16
</body>
▲ BootstrapのJavaScriptライブラリをロード
17 </html>
分野・地域を越えた実践的情報教育協働ネットワーク
© Cloud Spiral partners 2013
2013/9/3
55
57. Cloud Specialist Program Initiative for Reality-based Advanced Learning
label要素を試す
1
2
3
4
5
6
7
8
<body>
<span
<span
<span
<span
<span
<span
class="label
class="label
class="label
class="label
class="label
class="label
label-default">Default</span>
label-primary">Primary</span>
label-success">Success</span>
label-info">Info</span>
label-warning">Warning</span>
label-danger">Danger</span>
▲ classに "label" と "label-xxx" を指定する
"label" → 白文字に
"label-xxx" → xxxのコンテキストにあった背景色に
Bootstrapなし
分野・地域を越えた実践的情報教育協働ネットワーク
© Cloud Spiral partners 2013
2013/9/3
56
58. Cloud Specialist Program Initiative for Reality-based Advanced Learning
table要素を試す
1
2
3
4
5
6
7
8
9
<body>
<table class="table table-hover">
<tr>
▲ table要素のclassに "table" と "table-hover"
:
を指定する
</tr>
<tbody>
▼ shinsukeの発言だけに "success"を指定する
<tr class="success">
<td>shinsuke</td>
Bootstrapなし
分野・地域を越えた実践的情報教育協働ネットワーク
© Cloud Spiral partners 2013
2013/9/3
57
59. Cloud Specialist Program Initiative for Reality-based Advanced Learning
他にも
CSSの切り替え
公開されているCSSテンプレートを取得し,
bootstrap.min.css を上書きするだけ
http://bootswatch.com/
http://bootswatch.com/cyborg/
分野・地域を越えた実践的情報教育協働ネットワーク
http://bootswatch.com/flatly/
© Cloud Spiral partners 2013
2013/9/3
58
60. Cloud Specialist Program Initiative for Reality-based Advanced Learning
演習D1~D3
演習D1
tinychatのチャットメッセージ領域を,bootstrapのテーブル装飾を
利用して改善しなさい
演習D2 (オプショナル)
ステータス領域を改善しなさい
D2
演習D3 (オプショナル)
D3
入力領域を改善しなさい
D1
分野・地域を越えた実践的情報教育協働ネットワーク
© Cloud Spiral partners 2013
2013/9/3
59
64. Cloud Specialist Program Initiative for Reality-based Advanced Learning
デザインは難しい ?
たくさんの考慮が必要
ユーザビリティ/アクセシビリティ/
効率/満足度/間違いにくさ/
学習しやすさ/…
認知科学の問題
善し悪しの判断が難しい
好みの問題?
そもそもセンスの問題?
分野・地域を越えた実践的情報教育協働ネットワーク
© Cloud Spiral partners 2013
2013/9/3
63
65. Cloud Specialist Program Initiative for Reality-based Advanced Learning
Good News
デザイン≠アート
アート
自己表現のための行為
他者に理解される必要はない
デザイン
他者に伝えるための行為
デザインは理論的に解決できる部分がある
「デザインの基本4原則」
「ユニバーサルデザイン」
分野・地域を越えた実践的情報教育協働ネットワーク
© Cloud Spiral partners 2013
2013/9/3
64
66. Cloud Specialist Program Initiative for Reality-based Advanced Learning
基本4原則: 整列
要素を揃えて配置する
見えない糸で揃える
統一感や要素同士の視覚的なつながりを生む
分野・地域を越えた実践的情報教育協働ネットワーク
© Cloud Spiral partners 2013
2013/9/3
65
67. Cloud Specialist Program Initiative for Reality-based Advanced Learning
基本4原則: 近接
関連する要素を近くに配置する
視覚的に構造化する
cloud1 cloud2
cloud1 cloud2
分野・地域を越えた実践的情報教育協働ネットワーク
© Cloud Spiral partners 2013
2013/9/3
66
68. Cloud Specialist Program Initiative for Reality-based Advanced Learning
近接+整列
Cloud Spiral
Cloud Specialist Program Initiative for
Reality-based Advanced Learning
TEL: 06-6879-4395
cloud-spiral-info@ist.osaka-u.ac.jp
http://cloud-spiral.enpit.jp
分野・地域を越えた実践的情報教育協働ネットワーク
Cloud Spiral
Cloud Specialist Program Initiative for Reality-based
Advanced Learning
TEL: 06-6879-4395
cloud-spiral-info@ist.osaka-u.ac.jp
http://cloud-spiral.enpit.jp
© Cloud Spiral partners 2013
2013/9/3
67
69. Cloud Specialist Program Initiative for Reality-based Advanced Learning
基本4原則: 反復
全体を通して一貫して似た要素を使う
テンプレートやテーマカラーを決める
統一感を生む+特別な要素を目立たせる
Cloud Spiral
About
News
Cloud Spiral
Event
Misc
About
News
Event
Misc
enPiT-Cloud(分野・地域を越えた実践的情報教育協働ネットワー
ク・クラウド分野)の 取り組み、Cloud Spiral のWebサイトがオープン
しました。Cloud Spiral は、西日本9大学、…
2013/03/11
by masa-n
enPiT-Cloud(分野・地域を越えた実践的情報教育協働ネットワー
ク・クラウド分野)の 取り組み、Cloud Spiral のWebサイトがオープン
しました。Cloud Spiral は、西日本9大学、…
2013/03/11
by masa-n
2013年3月9日~11日の日程で、CloudSpiralの若手教員が集結し
て合宿形式のFD(Faculty Development)活動を行いました。 今回
参加した教員は、阪大,神大,和大,京産…
2013/03/11
by masa-n
2013年3月9日~11日の日程で、CloudSpiralの若手教員が集結し
て合宿形式のFD(Faculty Development)活動を行いました。 今回
参加した教員は、阪大,神大,和大,京産…
2013/03/11
by masa-n
どーもー CloudSpiral,講義広報担当のさちをです.早い物で
CloudSpiralの講義も3回目を迎えました.1年目ということで,毎回
準備にドタバタしていますが,ぼちぼち慣…
2013/09/03
by sachio
どーもー CloudSpiral,講義広報担当のさちをです.早い物で
CloudSpiralの講義も3回目を迎えました.1年目ということで,毎回
準備にドタバタしていますが,ぼちぼち慣…
2013/09/03
by sachio
分野・地域を越えた実践的情報教育協働ネットワーク
© Cloud Spiral partners 2013
2013/9/3
68
70. Cloud Specialist Program Initiative for Reality-based Advanced Learning
基本4原則: コントラスト
異なる要素ははっきりと違わせる
強調したい部分に強いコントラストを加える
どーもー CloudSpiral,講義広報担当のさちをです.早い
物でCloudSpiralの講義も3回目を迎えました.1年目とい
うことで,毎回準備にドタバタしていますが,ぼちぼち慣
…
2013/09/03
by sachio
Cloud Spiral
Cloud Specialist Program Initiative for Realitybased Advanced Learning
TEL: 06-6879-4395
cloud-spiral-info@ist.osaka-u.ac.jp
http://cloud-spiral.enpit.jp
分野・地域を越えた実践的情報教育協働ネットワーク
© Cloud Spiral partners 2013
2013/9/3
69
71. Cloud Specialist Program Initiative for Reality-based Advanced Learning
ユニバーサルデザイン
誰でも同じように利用できるデザインのこと
文化/言語/国籍
老若男女
障害/能力の差
アクセシビリティ確保のための考え方
Webサイトでのユニバーサルデザイン (抜粋)
読みやすさの配慮
小さすぎないフォントサイズ/狭すぎない行間
使いやすさの配慮
小さすぎないボタン/混乱しない操作/理解しやすい用語
カラーユニバーサルデザイン
分野・地域を越えた実践的情報教育協働ネットワーク
© Cloud Spiral partners 2013
2013/9/3
70
72. Cloud Specialist Program Initiative for Reality-based Advanced Learning
カラーユニバーサルデザイン
色覚異常者にも間違いなく情報が伝わるような
デザインのこと
色覚異常の種類
赤~緑の識別が困難 (男性4.5%, 女性0.2%)
青系の識別が困難
全色の識別が困難
赤
緑
分野・地域を越えた実践的情報教育協働ネットワーク
青
© Cloud Spiral partners 2013
2013/9/3
71
73. Cloud Specialist Program Initiative for Reality-based Advanced Learning
カラーユニバーサルの考え方1
コントラストを確保する
明度差と色差の2つを考える
文字の色(■)を固定して明度差と色差を変更
明度差確保
色差
確保
色差 ×
明度差 ×
色差 ×
明度差 ○
色差 ○
明度差 ×
色差 ○
明度差 ○
分野・地域を越えた実践的情報教育協働ネットワーク
© Cloud Spiral partners 2013
2013/9/3
72
74. Cloud Specialist Program Initiative for Reality-based Advanced Learning
カラーユニバーサルの考え方2
色だけで情報を伝えない
東京都 都内地下鉄路線図
http://www.metro.tokyo.jp/SUB/SUBWAY/
分野・地域を越えた実践的情報教育協働ネットワーク
© Cloud Spiral partners 2013
2013/9/3
73
75. Cloud Specialist Program Initiative for Reality-based Advanced Learning
応用例
グラフの見せ方
黒線による
コントラスト確保
Excelのデフォルト
A
色による凡例の
説明を回避
A
B
B
C
C
D
E
F
F
G
F G
D
E
E
G
分野・地域を越えた実践的情報教育協働ネットワーク
D
A
C
© Cloud Spiral partners 2013
B
2013/9/3
74
76. Cloud Specialist Program Initiative for Reality-based Advanced Learning
ツール
シミュレータ
http://colororacle.org/
カラーユニバーサルデザイン推奨配色セット
http://jfly.iam.u-tokyo.ac.jp/colorset/
コントラストの計算式
http://www.w3.org/TR/AERT#color-contrastWCAG
コントラスト計算ツール
http://snook.ca/technical/colour_contrast/colour.html
デスクトップの色取得
http://www.vector.co.jp/soft/win95/art/se350616.html
分野・地域を越えた実践的情報教育協働ネットワーク
© Cloud Spiral partners 2013
2013/9/3
75
77. Cloud Specialist Program Initiative for Reality-based Advanced Learning
まとめ
BNAの観点でクラウドの性質を満たすシステム?
HTML/CSS/JavaScriptで作られたWebアプリ
HTML5・CSS3で色々できるようになった
ブラウザ ≠ 文章閲覧ツール
= アプリケーションプラットフォーム
デザインはアートではない
人に伝えるための方法,軽視すべからず
クライアントサイドの開発も大変
花形ともいえる
分野・地域を越えた実践的情報教育協働ネットワーク
© Cloud Spiral partners 2013
2013/9/3
76
79. Cloud Specialist Program Initiative for Reality-based Advanced Learning
総合演習
tinychatのクライアントサイドを改善しなさい
まず改善の方針を決めること
何が問題でどう改善するかを記述すること
クライアントサイドでの機能拡張
・ Google Mapsとの連携
デザインの改善
・ レスポンシブWebデザイン化,レイアウト・見た目の改善
・ ユーザビリティの改善 (入力しやすく,チャットを見やすく)
・ アクセシビリティの改善 (色彩設計等)
改善方針とCloud9登録アカウント名を書込むこと
http://goo.gl/qZcvZ1
分野・地域を越えた実践的情報教育協働ネットワーク
© Cloud Spiral partners 2013
2013/9/3
78
81. Cloud Specialist Program Initiative for Reality-based Advanced Learning
Tinychat
サーバサイドのソースコード
1 @WebServlet(value = { "/send" })
2 public class CMainServlet extends WebSocketServlet {
3
private static final long serialVersionUID = 6946416208261279049L;
4
private static final Set<ChatMessageInbound> inbounds =
5
new CopyOnWriteArraySet<ChatMessageInbound>();
6
@Override
7
protected StreamInbound createWebSocketInbound(String subProtocol,
8
HttpServletRequest request) {
9
return new ChatMessageInbound();
10
}
11
class ChatMessageInbound extends MessageInbound {
12
@Override
13
protected void onOpen(WsOutbound outbound) { inbounds.add(this); }
14
@Override
15
protected void onClose(int status) { inbounds.remove(this); }
16
@Override
17
protected void onBinaryMessage(ByteBuffer message) throws IOException {}
18
@Override
19
protected void onTextMessage(CharBuffer buffer) throws IOException {
20
for (MessageInbound socket : inbounds) {
21
socket.getWsOutbound().writeTextMessage(buffer);
22
buffer.position(0);
23
}
24
}
That's all!
分野・地域を越えた実践的情報教育協働ネットワーク
© Cloud Spiral partners 2013
2013/9/3
80
84. I woke up today and thought about what the worst design
would look like. I think I got pretty close with this one.
Craig Keeling
朝起きて最もクソなデザインについて考えてみたんだ.たぶ
んこんな感じじゃないんかな.
http://www.flickr.com/photos/dubblethinkdesign/3579519738/