SlideShare a Scribd company logo
1 of 84
Download to read offline
分野・地域を越えた実践的情報教育協働ネットワーク

Webアプリ
クライアントサイド開発
神戸大学

まつ本 真佑
佐伯 幸郎
中村 匡秀

Cloud Specialist Program Initiative for Reality-based Advanced Learning
柗本 真佑
シュノーケリング
メタル・ロック
プログラミング
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
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
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
Cloud Specialist Program Initiative for Reality-based Advanced Learning

BNAを満たさないシステムの例
スタンドアローン


メモ帳/マインスイーパ/…

動作プラットフォームが限定的



Windows/Macアプリ
Android/iPhoneアプリ

通信プロトコルが非「標準的」


Skype …
分野・地域を越えた実践的情報教育協働ネットワーク

© Cloud Spiral partners 2013

2013/9/3

5
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
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
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
Cloud Specialist Program Initiative for Reality-based Advanced Learning

Webアプリが可能にすること

何からでも

どこからでも

アプリ/データ
計算資源(CPU/HDD…)
分野・地域を越えた実践的情報教育協働ネットワーク

© Cloud Spiral partners 2013

2013/9/3

9
Cloud Specialist Program Initiative for Reality-based Advanced Learning

Webアプリが可能にすること

何からでも

どこからでも

分野・地域を越えた実践的情報教育協働ネットワーク

© Cloud Spiral partners 2013

2013/9/3

10
Cloud Specialist Program Initiative for Reality-based Advanced Learning

クライアントサイド開発の難しさ
様々なデバイスへの対応が必須
 特にモバイル端末,ウィンドウサイズが定まらない
 様々なブラウザ

デザインの考慮


ユーザビリティ
 使いやすさ,見やすさ



アクセシビリティ
 どんな人でも利用可能か?

技術進歩の嵐
分野・地域を越えた実践的情報教育協働ネットワーク

© Cloud Spiral partners 2013

2013/9/3

11
Cloud Specialist Program Initiative for Reality-based Advanced Learning

今日やること
クラウド時代のソフトウェア=Webアプリをどのよう
な技術を使って,どう開発するか


クライアントサイド開発あれこれ

分野・地域を越えた実践的情報教育協働ネットワーク

© Cloud Spiral partners 2013

2013/9/3

12
 HTML5
セマンティクス
Geolocation API
WebSocket

演習A
演習B
演習C

 CSS3
レスポンシブWebデザイン
Bootstrap
演習D

 デザイン
デザインの基本4原則
ユニバーサルデザイン

 総合演習
tinychat
 HTML5
セマンティクス
Geolocation API
WebSocket

演習A
演習B
演習C

 CSS3
レスポンシブWebデザイン
Bootstrap
演習D

 デザイン
デザインの基本4原則
ユニバーサルデザイン

 総合演習
tinychat
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
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
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
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
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
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
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
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
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
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
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
 HTML5
セマンティクス
Geolocation API
WebSocket

演習A
演習B
演習C

 CSS3
レスポンシブWebデザイン
Bootstrap
演習D

 デザイン
デザインの基本4原則
ユニバーサルデザイン

 総合演習
tinychat
Cloud Specialist Program Initiative for Reality-based Advanced Learning

セマンティックWeb
ネット上の情報に「意味=セマンティクス」を付与
することで,より便利なWebを実現する考え
現在のWeb

セマンティックWeb

文字 文字
文字 文字
文字

文字 文字
文字 文字
意味 意味
文字
意味 意味
意味

文字による検索

文字 + 意味による検索

k
3万円以下の良いタブレットは?

分野・地域を越えた実践的情報教育協働ネットワーク

© Cloud Spiral partners 2013

2013/9/3

27
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
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
Cloud Specialist Program Initiative for Reality-based Advanced Learning

意味付けのメリット
inputフォームに適切な意味付けをすることで,
ブラウザがその意味にあった処理をしてくれる


使いやすい入力フィールド,入力チェックなど
 従来はJavaScriptやライブラリでごりごり実装
 セマンティックWebのメリットの一つ

HTML5は意味の使い方を定義しているだけ



ブラウザが賢く処理している
開発者は適切に意味をつけるだけでよい

分野・地域を越えた実践的情報教育協働ネットワーク

© Cloud Spiral partners 2013

2013/9/3

30
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
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
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
Cloud Specialist Program Initiative for Reality-based Advanced Learning

Geolocation API
ユーザの現在地情報を取得するAPI



WiFi/携帯基地局/GPS/IPアドレスなどから算出
JavaScriptから呼び出す

モバイルアプリとの相性が良い
プライバシーの問題もあるのでオプトイン型


ユーザの許可が必須

分野・地域を越えた実践的情報教育協働ネットワーク

© Cloud Spiral partners 2013

2013/9/3

34
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
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
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
 HTML5
セマンティクス
Geolocation API
WebSocket

演習A
演習B
演習C

 CSS3
レスポンシブWebデザイン
Bootstrap
演習D

 デザイン
デザインの基本4原則
ユニバーサルデザイン

 総合演習
tinychat
Cloud Specialist Program Initiative for Reality-based Advanced Learning

WebSocket
HTTPによるブラウザ・サーバ間双方向通信技術


そもそもHTTPはクライアントからのPULL型
 クライアント 「データよこせ」



サーバ 「はいよ」

サーバ側からのPUSH通信可能
 サーバ 「データ送るわ」

クライアント 「OK」

リアルタイムなWebアプリが可能に


ゲーム/チャット/監視システム…

分野・地域を越えた実践的情報教育協働ネットワーク

© Cloud Spiral partners 2013

2013/9/3

39
Cloud Specialist Program Initiative for Reality-based Advanced Learning

比較 HTTP & Ajax
一般的なHTTP通信
 リクエスト後即時応等
 PULL型
サーバの
イベント発生

Ajax

 リクエスト後即時応答
 PULL型
 非同期での通信
 ブラウザの更新が不要
 EventSpiral

分野・地域を越えた実践的情報教育協働ネットワーク

© Cloud Spiral partners 2013

2013/9/3

40
Cloud Specialist Program Initiative for Reality-based Advanced Learning

比較 Comet & WebSocket
Comet

WebSocket

 リクエスト後に応答を保留
 必要なタイミングで応答
 疑似PUSH型通信
 実はPULL型

 一度サーバと接続確立
 必要なタイミングでサーバ

から通信
 PUSH型
 効率的な双方向通信
分野・地域を越えた実践的情報教育協働ネットワーク

© Cloud Spiral partners 2013

2013/9/3

41
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
Cloud Specialist Program Initiative for Reality-based Advanced Learning

tinychat
WebSocketを利用した簡単なチャットWebアプリ



サーバサイドシステム
は神戸大に設置
グループごとにサーブレット(受け口)を用意
神大サーバ

クライアント
tinychat

hello

tinychat01

分野・地域を越えた実践的情報教育協働ネットワーク

© Cloud Spiral partners 2013

2013/9/3

43
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
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
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
Cloud Specialist Program Initiative for Reality-based Advanced Learning

演習C3 (オプショナル)
ブラウザを閉じた際に "bye" というメッセージを
送信するように修正しなさい
 動作確認の際には複数タブを立ち上げればよい

分野・地域を越えた実践的情報教育協働ネットワーク

© Cloud Spiral partners 2013

2013/9/3

47
 HTML5
セマンティクス
Geolocation API
WebSocket

演習A
演習B
演習C

 CSS3
レスポンシブWebデザイン
Bootstrap
演習D

 デザイン
デザインの基本4原則
ユニバーサルデザイン

 総合演習
tinychat
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
Cloud Specialist Program Initiative for Reality-based Advanced Learning

レスポンシブWebデザイン
画面サイズに合わせて自動的にレイアウトを調整
マルチデバイス対応策の一つ

分野・地域を越えた実践的情報教育協働ネットワーク

© Cloud Spiral partners 2013

2013/9/3

50
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
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
Cloud Specialist Program Initiative for Reality-based Advanced Learning

利点・欠点
ワンソース・マルチデバイスの思想
利点



運用が楽
未知の端末でも対応可
 画面サイズだけで制御するため

欠点




通信量が大きい
メンテナンスが大変
端末ごとの細かい調整ができない
分野・地域を越えた実践的情報教育協働ネットワーク

© Cloud Spiral partners 2013

2013/9/3

53
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
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
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
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
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
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
 HTML5
セマンティクス
Geolocation API
WebSocket

演習A
演習B
演習C

 CSS3
レスポンシブWebデザイン
Bootstrap
演習D

 デザイン
デザインの基本4原則
ユニバーサルデザイン

 総合演習
tinychat
http://www.flickr.com/photos/dubblethinkdesign/3579519738/
Vincent van Gogh, The Starry Night, 1889
Cloud Specialist Program Initiative for Reality-based Advanced Learning

デザインは難しい ?
たくさんの考慮が必要




ユーザビリティ/アクセシビリティ/
効率/満足度/間違いにくさ/
学習しやすさ/…
認知科学の問題

善し悪しの判断が難しい
好みの問題?
そもそもセンスの問題?
分野・地域を越えた実践的情報教育協働ネットワーク

© Cloud Spiral partners 2013

2013/9/3

63
Cloud Specialist Program Initiative for Reality-based Advanced Learning

Good News
デザイン≠アート


アート
 自己表現のための行為
 他者に理解される必要はない



デザイン
 他者に伝えるための行為

デザインは理論的に解決できる部分がある



「デザインの基本4原則」
「ユニバーサルデザイン」
分野・地域を越えた実践的情報教育協働ネットワーク

© Cloud Spiral partners 2013

2013/9/3

64
Cloud Specialist Program Initiative for Reality-based Advanced Learning

基本4原則: 整列
要素を揃えて配置する



見えない糸で揃える
統一感や要素同士の視覚的なつながりを生む

分野・地域を越えた実践的情報教育協働ネットワーク

© Cloud Spiral partners 2013

2013/9/3

65
Cloud Specialist Program Initiative for Reality-based Advanced Learning

基本4原則: 近接
関連する要素を近くに配置する


視覚的に構造化する

cloud1 cloud2

cloud1 cloud2

分野・地域を越えた実践的情報教育協働ネットワーク

© Cloud Spiral partners 2013

2013/9/3

66
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
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
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
Cloud Specialist Program Initiative for Reality-based Advanced Learning

ユニバーサルデザイン
誰でも同じように利用できるデザインのこと
 文化/言語/国籍

老若男女

障害/能力の差

アクセシビリティ確保のための考え方
Webサイトでのユニバーサルデザイン (抜粋)


読みやすさの配慮
 小さすぎないフォントサイズ/狭すぎない行間



使いやすさの配慮
 小さすぎないボタン/混乱しない操作/理解しやすい用語



カラーユニバーサルデザイン
分野・地域を越えた実践的情報教育協働ネットワーク

© Cloud Spiral partners 2013

2013/9/3

70
Cloud Specialist Program Initiative for Reality-based Advanced Learning

カラーユニバーサルデザイン
色覚異常者にも間違いなく情報が伝わるような
デザインのこと
色覚異常の種類




赤~緑の識別が困難 (男性4.5%, 女性0.2%)
青系の識別が困難
全色の識別が困難

赤

緑

分野・地域を越えた実践的情報教育協働ネットワーク

青
© Cloud Spiral partners 2013

2013/9/3

71
Cloud Specialist Program Initiative for Reality-based Advanced Learning

カラーユニバーサルの考え方1
コントラストを確保する


明度差と色差の2つを考える
文字の色(■)を固定して明度差と色差を変更
明度差確保

色差
確保

色差 ×
明度差 ×

色差 ×
明度差 ○

色差 ○
明度差 ×

色差 ○
明度差 ○

分野・地域を越えた実践的情報教育協働ネットワーク

© Cloud Spiral partners 2013

2013/9/3

72
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
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
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
Cloud Specialist Program Initiative for Reality-based Advanced Learning

まとめ
BNAの観点でクラウドの性質を満たすシステム?
 HTML/CSS/JavaScriptで作られたWebアプリ

HTML5・CSS3で色々できるようになった
 ブラウザ ≠ 文章閲覧ツール
= アプリケーションプラットフォーム

デザインはアートではない
 人に伝えるための方法,軽視すべからず

クライアントサイドの開発も大変
 花形ともいえる

分野・地域を越えた実践的情報教育協働ネットワーク

© Cloud Spiral partners 2013

2013/9/3

76
 HTML5
セマンティクス
Geolocation API
WebSocket

演習A
演習B
演習C

 CSS3
レスポンシブWebデザイン
Bootstrap
演習D

 デザイン
デザインの基本4原則
ユニバーサルデザイン

 総合演習
tinychat
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
分野・地域を越えた実践的情報教育協働ネットワーク

参考資料

Cloud Specialist Program Initiative for Reality-based Advanced Learning
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
最古のWebサイト
http://info.cern.ch/hypertext/WWW/TheProject.html
とそのソースコード
http://info.cern.ch/hypertext/WWW/TheProject.html
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/

More Related Content

What's hot

クラウドネイティブによる低コスト開発
クラウドネイティブによる低コスト開発クラウドネイティブによる低コスト開発
クラウドネイティブによる低コスト開発Shinichi Ueno
 
[AWS DevDay] Cognito / Amplify で加速するエンタープライズのアプリケーション開発
[AWS DevDay] Cognito / Amplify で加速するエンタープライズのアプリケーション開発[AWS DevDay] Cognito / Amplify で加速するエンタープライズのアプリケーション開発
[AWS DevDay] Cognito / Amplify で加速するエンタープライズのアプリケーション開発Yuki Ando
 
クラウドネイティブが行なういまどきWebサービス開発
クラウドネイティブが行なういまどきWebサービス開発クラウドネイティブが行なういまどきWebサービス開発
クラウドネイティブが行なういまどきWebサービス開発Yuuji Arakaki
 
GCPで実現するクラウドネイティブアプリケーション
GCPで実現するクラウドネイティブアプリケーションGCPで実現するクラウドネイティブアプリケーション
GCPで実現するクラウドネイティブアプリケーションKiyoshi Fukuda
 
5G時代のアプリケーション開発とは - 5G+MECを活用した低遅延アプリの実現へ
5G時代のアプリケーション開発とは - 5G+MECを活用した低遅延アプリの実現へ5G時代のアプリケーション開発とは - 5G+MECを活用した低遅延アプリの実現へ
5G時代のアプリケーション開発とは - 5G+MECを活用した低遅延アプリの実現へVirtualTech Japan Inc.
 
Building a Flutter Development Environment with VSCode and Useful Extensions
Building a Flutter Development Environment with VSCode and Useful ExtensionsBuilding a Flutter Development Environment with VSCode and Useful Extensions
Building a Flutter Development Environment with VSCode and Useful ExtensionsShotaro Suzuki
 
de:code 2019 Cloud トラック 総まとめ! 完全版
de:code 2019 Cloud トラック 総まとめ! 完全版de:code 2019 Cloud トラック 総まとめ! 完全版
de:code 2019 Cloud トラック 総まとめ! 完全版Minoru Naito
 
さくらのクラウド サービス開発とデータセンター運用
さくらのクラウド サービス開発とデータセンター運用さくらのクラウド サービス開発とデータセンター運用
さくらのクラウド サービス開発とデータセンター運用SAKURA Internet Inc.
 
大規模 Vue アプリケーションの TypeScript 移行
大規模 Vue アプリケーションの TypeScript 移行大規模 Vue アプリケーションの TypeScript 移行
大規模 Vue アプリケーションの TypeScript 移行Shingo Sasaki
 
インフラCICDの勘所
インフラCICDの勘所インフラCICDの勘所
インフラCICDの勘所Toru Makabe
 
DevOpsに求められる様々な技術とその連携の学習方法
DevOpsに求められる様々な技術とその連携の学習方法DevOpsに求められる様々な技術とその連携の学習方法
DevOpsに求められる様々な技術とその連携の学習方法CASAREAL, Inc.
 
AWS & Google Cloud 両方を駆使するチームでの技術選定
AWS & Google Cloud  両方を駆使するチームでの技術選定AWS & Google Cloud  両方を駆使するチームでの技術選定
AWS & Google Cloud 両方を駆使するチームでの技術選定修一 高橋
 
ミッション : メガクラウドを安全にアップデートせよ!
ミッション : メガクラウドを安全にアップデートせよ!ミッション : メガクラウドを安全にアップデートせよ!
ミッション : メガクラウドを安全にアップデートせよ!Toru Makabe
 
【検証してみた】いま話題のVMware on IBM Cloud SoftLayer 配布版
【検証してみた】いま話題のVMware on IBM Cloud SoftLayer 配布版【検証してみた】いま話題のVMware on IBM Cloud SoftLayer 配布版
【検証してみた】いま話題のVMware on IBM Cloud SoftLayer 配布版Hayama Kyouhei
 
hbstudy#88 5G+MEC時代のシステム設計
hbstudy#88 5G+MEC時代のシステム設計hbstudy#88 5G+MEC時代のシステム設計
hbstudy#88 5G+MEC時代のシステム設計VirtualTech Japan Inc.
 
AWS 技術者向け Azure サービス解説 de:code2019版 #CD81
AWS 技術者向け Azure サービス解説 de:code2019版 #CD81AWS 技術者向け Azure サービス解説 de:code2019版 #CD81
AWS 技術者向け Azure サービス解説 de:code2019版 #CD81Minoru Naito
 
クラウドを活用してスモールビジネスを立ち上げよう
クラウドを活用してスモールビジネスを立ち上げようクラウドを活用してスモールビジネスを立ち上げよう
クラウドを活用してスモールビジネスを立ち上げよう亮介 山口
 
de:code 2019 Cloud トラック 総まとめ!
de:code 2019 Cloud トラック 総まとめ!de:code 2019 Cloud トラック 総まとめ!
de:code 2019 Cloud トラック 総まとめ!Minoru Naito
 
Azure App Service Overview
Azure App Service OverviewAzure App Service Overview
Azure App Service OverviewTakeshi Fukuhara
 
オートモーティブ領域における 位置情報関連アルゴリズムあれこれ
オートモーティブ領域における 位置情報関連アルゴリズムあれこれオートモーティブ領域における 位置情報関連アルゴリズムあれこれ
オートモーティブ領域における 位置情報関連アルゴリズムあれこれDeNA
 

What's hot (20)

クラウドネイティブによる低コスト開発
クラウドネイティブによる低コスト開発クラウドネイティブによる低コスト開発
クラウドネイティブによる低コスト開発
 
[AWS DevDay] Cognito / Amplify で加速するエンタープライズのアプリケーション開発
[AWS DevDay] Cognito / Amplify で加速するエンタープライズのアプリケーション開発[AWS DevDay] Cognito / Amplify で加速するエンタープライズのアプリケーション開発
[AWS DevDay] Cognito / Amplify で加速するエンタープライズのアプリケーション開発
 
クラウドネイティブが行なういまどきWebサービス開発
クラウドネイティブが行なういまどきWebサービス開発クラウドネイティブが行なういまどきWebサービス開発
クラウドネイティブが行なういまどきWebサービス開発
 
GCPで実現するクラウドネイティブアプリケーション
GCPで実現するクラウドネイティブアプリケーションGCPで実現するクラウドネイティブアプリケーション
GCPで実現するクラウドネイティブアプリケーション
 
5G時代のアプリケーション開発とは - 5G+MECを活用した低遅延アプリの実現へ
5G時代のアプリケーション開発とは - 5G+MECを活用した低遅延アプリの実現へ5G時代のアプリケーション開発とは - 5G+MECを活用した低遅延アプリの実現へ
5G時代のアプリケーション開発とは - 5G+MECを活用した低遅延アプリの実現へ
 
Building a Flutter Development Environment with VSCode and Useful Extensions
Building a Flutter Development Environment with VSCode and Useful ExtensionsBuilding a Flutter Development Environment with VSCode and Useful Extensions
Building a Flutter Development Environment with VSCode and Useful Extensions
 
de:code 2019 Cloud トラック 総まとめ! 完全版
de:code 2019 Cloud トラック 総まとめ! 完全版de:code 2019 Cloud トラック 総まとめ! 完全版
de:code 2019 Cloud トラック 総まとめ! 完全版
 
さくらのクラウド サービス開発とデータセンター運用
さくらのクラウド サービス開発とデータセンター運用さくらのクラウド サービス開発とデータセンター運用
さくらのクラウド サービス開発とデータセンター運用
 
大規模 Vue アプリケーションの TypeScript 移行
大規模 Vue アプリケーションの TypeScript 移行大規模 Vue アプリケーションの TypeScript 移行
大規模 Vue アプリケーションの TypeScript 移行
 
インフラCICDの勘所
インフラCICDの勘所インフラCICDの勘所
インフラCICDの勘所
 
DevOpsに求められる様々な技術とその連携の学習方法
DevOpsに求められる様々な技術とその連携の学習方法DevOpsに求められる様々な技術とその連携の学習方法
DevOpsに求められる様々な技術とその連携の学習方法
 
AWS & Google Cloud 両方を駆使するチームでの技術選定
AWS & Google Cloud  両方を駆使するチームでの技術選定AWS & Google Cloud  両方を駆使するチームでの技術選定
AWS & Google Cloud 両方を駆使するチームでの技術選定
 
ミッション : メガクラウドを安全にアップデートせよ!
ミッション : メガクラウドを安全にアップデートせよ!ミッション : メガクラウドを安全にアップデートせよ!
ミッション : メガクラウドを安全にアップデートせよ!
 
【検証してみた】いま話題のVMware on IBM Cloud SoftLayer 配布版
【検証してみた】いま話題のVMware on IBM Cloud SoftLayer 配布版【検証してみた】いま話題のVMware on IBM Cloud SoftLayer 配布版
【検証してみた】いま話題のVMware on IBM Cloud SoftLayer 配布版
 
hbstudy#88 5G+MEC時代のシステム設計
hbstudy#88 5G+MEC時代のシステム設計hbstudy#88 5G+MEC時代のシステム設計
hbstudy#88 5G+MEC時代のシステム設計
 
AWS 技術者向け Azure サービス解説 de:code2019版 #CD81
AWS 技術者向け Azure サービス解説 de:code2019版 #CD81AWS 技術者向け Azure サービス解説 de:code2019版 #CD81
AWS 技術者向け Azure サービス解説 de:code2019版 #CD81
 
クラウドを活用してスモールビジネスを立ち上げよう
クラウドを活用してスモールビジネスを立ち上げようクラウドを活用してスモールビジネスを立ち上げよう
クラウドを活用してスモールビジネスを立ち上げよう
 
de:code 2019 Cloud トラック 総まとめ!
de:code 2019 Cloud トラック 総まとめ!de:code 2019 Cloud トラック 総まとめ!
de:code 2019 Cloud トラック 総まとめ!
 
Azure App Service Overview
Azure App Service OverviewAzure App Service Overview
Azure App Service Overview
 
オートモーティブ領域における 位置情報関連アルゴリズムあれこれ
オートモーティブ領域における 位置情報関連アルゴリズムあれこれオートモーティブ領域における 位置情報関連アルゴリズムあれこれ
オートモーティブ領域における 位置情報関連アルゴリズムあれこれ
 

Similar to CloudSpiral 2013年度 Webアプリ講義

JISAAwards2013講演会資料(hifive)
JISAAwards2013講演会資料(hifive)JISAAwards2013講演会資料(hifive)
JISAAwards2013講演会資料(hifive)Osamu Shimoda
 
Solution semniar vs2013_multi_device-1209-new
Solution semniar vs2013_multi_device-1209-newSolution semniar vs2013_multi_device-1209-new
Solution semniar vs2013_multi_device-1209-newShotaro Suzuki
 
W3C Recent Activities 2014 Q4 : W3C最新活動 2014 Q4
W3C Recent Activities 2014 Q4 : W3C最新活動 2014 Q4W3C Recent Activities 2014 Q4 : W3C最新活動 2014 Q4
W3C Recent Activities 2014 Q4 : W3C最新活動 2014 Q4W3C
 
Cloudian meets CloudStack
Cloudian meets CloudStackCloudian meets CloudStack
Cloudian meets CloudStackCLOUDIAN KK
 
Visual Studio 2019 GA ! ~ 最新情報 & これからの開発スタイル
Visual Studio 2019 GA ! ~ 最新情報 & これからの開発スタイルVisual Studio 2019 GA ! ~ 最新情報 & これからの開発スタイル
Visual Studio 2019 GA ! ~ 最新情報 & これからの開発スタイルAkira Inoue
 
Nttドコモ事例から見るモバイル&クラウド時代のサービス開発についてr4(public)
Nttドコモ事例から見るモバイル&クラウド時代のサービス開発についてr4(public)Nttドコモ事例から見るモバイル&クラウド時代のサービス開発についてr4(public)
Nttドコモ事例から見るモバイル&クラウド時代のサービス開発についてr4(public)Osaka University
 
「クラウドの変質化」Yako presen 141005
「クラウドの変質化」Yako presen 141005「クラウドの変質化」Yako presen 141005
「クラウドの変質化」Yako presen 141005知礼 八子
 
Opening remarks at cloudian seminar 2013
Opening remarks at cloudian seminar 2013Opening remarks at cloudian seminar 2013
Opening remarks at cloudian seminar 2013CLOUDIAN KK
 
Immutable Infrastructureを利用したソフトウェア工学教育のためのサーバ運用手法の検討
Immutable Infrastructureを利用したソフトウェア工学教育のためのサーバ運用手法の検討Immutable Infrastructureを利用したソフトウェア工学教育のためのサーバ運用手法の検討
Immutable Infrastructureを利用したソフトウェア工学教育のためのサーバ運用手法の検討Hiroshi Igaki
 
Cloud Native and Agile Approach
Cloud Native and Agile ApproachCloud Native and Agile Approach
Cloud Native and Agile ApproachShinya Yanagihara
 
Web標準化 (W3C) とHTML5の状況 Remix
Web標準化 (W3C) とHTML5の状況 RemixWeb標準化 (W3C) とHTML5の状況 Remix
Web標準化 (W3C) とHTML5の状況 RemixYasuhisa Hasegawa
 
レガシー Web からの脱却 ~ 開発者が次に目指すべき Web アプリの姿とは?
レガシー Web からの脱却 ~ 開発者が次に目指すべき Web アプリの姿とは?レガシー Web からの脱却 ~ 開発者が次に目指すべき Web アプリの姿とは?
レガシー Web からの脱却 ~ 開発者が次に目指すべき Web アプリの姿とは?Akira Inoue
 
≪インテル x ブロケード 特別対談≫ 2020年。どうなる?車とデータセンタの関係 ~SDxの、その先へ~
≪インテル x ブロケード 特別対談≫ 2020年。どうなる?車とデータセンタの関係 ~SDxの、その先へ~ ≪インテル x ブロケード 特別対談≫ 2020年。どうなる?車とデータセンタの関係 ~SDxの、その先へ~
≪インテル x ブロケード 特別対談≫ 2020年。どうなる?車とデータセンタの関係 ~SDxの、その先へ~ Brocade
 
rePiT2015_アジャイルソフトウェア開発教育のためのチケットシステムを用いたプロジェクト定量評価手法
rePiT2015_アジャイルソフトウェア開発教育のためのチケットシステムを用いたプロジェクト定量評価手法rePiT2015_アジャイルソフトウェア開発教育のためのチケットシステムを用いたプロジェクト定量評価手法
rePiT2015_アジャイルソフトウェア開発教育のためのチケットシステムを用いたプロジェクト定量評価手法Hiroshi Igaki
 
Cloudian for cloud stack days japan 2014
Cloudian for cloud stack days japan 2014Cloudian for cloud stack days japan 2014
Cloudian for cloud stack days japan 2014CLOUDIAN KK
 
IBMが取り組むクラウドのオープンスタンダードとoss @ 20130604
IBMが取り組むクラウドのオープンスタンダードとoss @ 20130604IBMが取り組むクラウドのオープンスタンダードとoss @ 20130604
IBMが取り組むクラウドのオープンスタンダードとoss @ 20130604Shinichiro Arai
 
CloudSpiralの振り返りと今後~反転授業とポートフォリオ~
CloudSpiralの振り返りと今後~反転授業とポートフォリオ~CloudSpiralの振り返りと今後~反転授業とポートフォリオ~
CloudSpiralの振り返りと今後~反転授業とポートフォリオ~Hiroshi Igaki
 
IoTビジネス共創ラボ 第4回勉強会(2017 07-03)
IoTビジネス共創ラボ 第4回勉強会(2017 07-03)IoTビジネス共創ラボ 第4回勉強会(2017 07-03)
IoTビジネス共創ラボ 第4回勉強会(2017 07-03)博宣 今村
 
【de:code 2020】 Azure Expert MSP の FIXER が処方、DX に効く 「クラウド運用」「AI」「人材育成」 の即効薬
【de:code 2020】 Azure Expert MSP の FIXER が処方、DX に効く 「クラウド運用」「AI」「人材育成」 の即効薬【de:code 2020】 Azure Expert MSP の FIXER が処方、DX に効く 「クラウド運用」「AI」「人材育成」 の即効薬
【de:code 2020】 Azure Expert MSP の FIXER が処方、DX に効く 「クラウド運用」「AI」「人材育成」 の即効薬日本マイクロソフト株式会社
 

Similar to CloudSpiral 2013年度 Webアプリ講義 (20)

JISAAwards2013講演会資料(hifive)
JISAAwards2013講演会資料(hifive)JISAAwards2013講演会資料(hifive)
JISAAwards2013講演会資料(hifive)
 
Solution semniar vs2013_multi_device-1209-new
Solution semniar vs2013_multi_device-1209-newSolution semniar vs2013_multi_device-1209-new
Solution semniar vs2013_multi_device-1209-new
 
W3C Recent Activities 2014 Q4 : W3C最新活動 2014 Q4
W3C Recent Activities 2014 Q4 : W3C最新活動 2014 Q4W3C Recent Activities 2014 Q4 : W3C最新活動 2014 Q4
W3C Recent Activities 2014 Q4 : W3C最新活動 2014 Q4
 
Cloudian meets CloudStack
Cloudian meets CloudStackCloudian meets CloudStack
Cloudian meets CloudStack
 
Visual Studio 2019 GA ! ~ 最新情報 & これからの開発スタイル
Visual Studio 2019 GA ! ~ 最新情報 & これからの開発スタイルVisual Studio 2019 GA ! ~ 最新情報 & これからの開発スタイル
Visual Studio 2019 GA ! ~ 最新情報 & これからの開発スタイル
 
Nttドコモ事例から見るモバイル&クラウド時代のサービス開発についてr4(public)
Nttドコモ事例から見るモバイル&クラウド時代のサービス開発についてr4(public)Nttドコモ事例から見るモバイル&クラウド時代のサービス開発についてr4(public)
Nttドコモ事例から見るモバイル&クラウド時代のサービス開発についてr4(public)
 
「クラウドの変質化」Yako presen 141005
「クラウドの変質化」Yako presen 141005「クラウドの変質化」Yako presen 141005
「クラウドの変質化」Yako presen 141005
 
Opening remarks at cloudian seminar 2013
Opening remarks at cloudian seminar 2013Opening remarks at cloudian seminar 2013
Opening remarks at cloudian seminar 2013
 
Immutable Infrastructureを利用したソフトウェア工学教育のためのサーバ運用手法の検討
Immutable Infrastructureを利用したソフトウェア工学教育のためのサーバ運用手法の検討Immutable Infrastructureを利用したソフトウェア工学教育のためのサーバ運用手法の検討
Immutable Infrastructureを利用したソフトウェア工学教育のためのサーバ運用手法の検討
 
Cloud Native and Agile Approach
Cloud Native and Agile ApproachCloud Native and Agile Approach
Cloud Native and Agile Approach
 
Hybrid cloud
Hybrid cloudHybrid cloud
Hybrid cloud
 
Web標準化 (W3C) とHTML5の状況 Remix
Web標準化 (W3C) とHTML5の状況 RemixWeb標準化 (W3C) とHTML5の状況 Remix
Web標準化 (W3C) とHTML5の状況 Remix
 
レガシー Web からの脱却 ~ 開発者が次に目指すべき Web アプリの姿とは?
レガシー Web からの脱却 ~ 開発者が次に目指すべき Web アプリの姿とは?レガシー Web からの脱却 ~ 開発者が次に目指すべき Web アプリの姿とは?
レガシー Web からの脱却 ~ 開発者が次に目指すべき Web アプリの姿とは?
 
≪インテル x ブロケード 特別対談≫ 2020年。どうなる?車とデータセンタの関係 ~SDxの、その先へ~
≪インテル x ブロケード 特別対談≫ 2020年。どうなる?車とデータセンタの関係 ~SDxの、その先へ~ ≪インテル x ブロケード 特別対談≫ 2020年。どうなる?車とデータセンタの関係 ~SDxの、その先へ~
≪インテル x ブロケード 特別対談≫ 2020年。どうなる?車とデータセンタの関係 ~SDxの、その先へ~
 
rePiT2015_アジャイルソフトウェア開発教育のためのチケットシステムを用いたプロジェクト定量評価手法
rePiT2015_アジャイルソフトウェア開発教育のためのチケットシステムを用いたプロジェクト定量評価手法rePiT2015_アジャイルソフトウェア開発教育のためのチケットシステムを用いたプロジェクト定量評価手法
rePiT2015_アジャイルソフトウェア開発教育のためのチケットシステムを用いたプロジェクト定量評価手法
 
Cloudian for cloud stack days japan 2014
Cloudian for cloud stack days japan 2014Cloudian for cloud stack days japan 2014
Cloudian for cloud stack days japan 2014
 
IBMが取り組むクラウドのオープンスタンダードとoss @ 20130604
IBMが取り組むクラウドのオープンスタンダードとoss @ 20130604IBMが取り組むクラウドのオープンスタンダードとoss @ 20130604
IBMが取り組むクラウドのオープンスタンダードとoss @ 20130604
 
CloudSpiralの振り返りと今後~反転授業とポートフォリオ~
CloudSpiralの振り返りと今後~反転授業とポートフォリオ~CloudSpiralの振り返りと今後~反転授業とポートフォリオ~
CloudSpiralの振り返りと今後~反転授業とポートフォリオ~
 
IoTビジネス共創ラボ 第4回勉強会(2017 07-03)
IoTビジネス共創ラボ 第4回勉強会(2017 07-03)IoTビジネス共創ラボ 第4回勉強会(2017 07-03)
IoTビジネス共創ラボ 第4回勉強会(2017 07-03)
 
【de:code 2020】 Azure Expert MSP の FIXER が処方、DX に効く 「クラウド運用」「AI」「人材育成」 の即効薬
【de:code 2020】 Azure Expert MSP の FIXER が処方、DX に効く 「クラウド運用」「AI」「人材育成」 の即効薬【de:code 2020】 Azure Expert MSP の FIXER が処方、DX に効く 「クラウド運用」「AI」「人材育成」 の即効薬
【de:code 2020】 Azure Expert MSP の FIXER が処方、DX に効く 「クラウド運用」「AI」「人材育成」 の即効薬
 

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
  • 14.  HTML5 セマンティクス Geolocation API WebSocket 演習A 演習B 演習C  CSS3 レスポンシブWebデザイン Bootstrap 演習D  デザイン デザインの基本4原則 ユニバーサルデザイン  総合演習 tinychat
  • 15.  HTML5 セマンティクス Geolocation API WebSocket 演習A 演習B 演習C  CSS3 レスポンシブWebデザイン Bootstrap 演習D  デザイン デザインの基本4原則 ユニバーサルデザイン  総合演習 tinychat
  • 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
  • 27.  HTML5 セマンティクス Geolocation API WebSocket 演習A 演習B 演習C  CSS3 レスポンシブWebデザイン Bootstrap 演習D  デザイン デザインの基本4原則 ユニバーサルデザイン  総合演習 tinychat
  • 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
  • 39.  HTML5 セマンティクス Geolocation API WebSocket 演習A 演習B 演習C  CSS3 レスポンシブWebデザイン Bootstrap 演習D  デザイン デザインの基本4原則 ユニバーサルデザイン  総合演習 tinychat
  • 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
  • 49.  HTML5 セマンティクス Geolocation API WebSocket 演習A 演習B 演習C  CSS3 レスポンシブWebデザイン Bootstrap 演習D  デザイン デザインの基本4原則 ユニバーサルデザイン  総合演習 tinychat
  • 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
  • 61.  HTML5 セマンティクス Geolocation API WebSocket 演習A 演習B 演習C  CSS3 レスポンシブWebデザイン Bootstrap 演習D  デザイン デザインの基本4原則 ユニバーサルデザイン  総合演習 tinychat
  • 63. Vincent van Gogh, The Starry Night, 1889
  • 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
  • 78.  HTML5 セマンティクス Geolocation API WebSocket 演習A 演習B 演習C  CSS3 レスポンシブWebデザイン Bootstrap 演習D  デザイン デザインの基本4原則 ユニバーサルデザイン  総合演習 tinychat
  • 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/