CloudSpiral 2013年度 Webアプリ講義

Cloud Specialist Program Initiative for Reality-based Advanced Learning

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

Webアプリクライアントサイド開発

まつ本真佑

佐伯幸郎

中村匡秀

神戸大学

柗本真佑

シュノーケリング

メタル・ロック

プログラミング


分野・地域を越えた実践的情報教育協働ネットワーク © Cloud Spiral partners 2013 2013/9/3 2

On-demand self-service いつでも好きなときに資源を利用可能

Broad network access ネットワークを通じて多様なクライアントから利用可能

Resource pooling 需要に応じた動的な計算資源の割り当て

Rapid elasticity 迅速なスケールアウト・スケールイン

Measured service 測定可能なサービス

クラウドの定義（by NIST）http://csrc.nist.gov/publications/nistpubs/800-145/SP800-145.pdf

http://csrc.nist.gov/publications/nistpubs/800-145/SP800-145.pdf



Broad network access

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問わず様々なクライアントから利用できる

Broad network access

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)





スタンドアローン

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

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

Windows/Macアプリ

Android/iPhoneアプリ

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

Skype …

BNAを満たさないシステムの例



Webアプリがデファクト（＝標準的なメカニズム）

Webアプリのアーキテクチャクライアントサイド

サーバサイド

BNAを満たすシステムとは？

動作環境：ブラウザ

動作環境：anyApache+Perl+CGITomcat+Java+DWR…

プロトコル：HTTP通信データ：HTML/CSS/JavaScript



非クラウド型（Thunderbird/Outlook）

クラウド型（gmail）

メールアプリの例

SMTP/POPネイティブアプリ

メールサーバ

Webサーバ

メールサーバ

SMTP/POPブラウザ

HTML



「研究会への投稿＆発表」

開発環境 : Cloud9 IDE/Eclipse Orion

発表申し込み・投稿 : Easychair

原稿執筆・コンパイル : Google Drive + Latexlab

スライド作成・発表 : Google Drive

音楽・動画 : Amazon MP3/Youtube

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

!




アプリ/データ計算資源（CPU/HDD…）

どこからでも

何からでも




どこからでも

何からでも



様々なデバイスへの対応が必須特にモバイル端末，ウィンドウサイズが定まらない

様々なブラウザ

デザインの考慮

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

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

技術進歩の嵐

クライアントサイド開発の難しさ



クラウド時代のソフトウェア＝Webアプリをどのような技術を使って，どう開発するか

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

今日やること

HTML5セマンティクス演習A

Geolocation API 演習B

WebSocket 演習C

CSS3レスポンシブWebデザイン

Bootstrap 演習D

デザインデザインの基本4原則

ユニバーサルデザイン

総合演習tinychat



WebSocket 演習C


Bootstrap 演習D






<html><head><title>CloudSpiral</title>

</head>

<body><h1>CloudSpiral</h1><a href="about.html">about</a><a href="news.html">news</a>

</body></html>

構造化された文章を記述するマークアップ言語

W3C （World Wide Web Consortium）策定

他のドキュメントへのハイパーリンク

HTML

aboutnews

CloudSpiralブラウザでレンダリング

ハイパーリンク



ティム・バーナーズ＝リーがWWWを考案

HTTP/HTML/URLを開発

「構造化文章の整理」が目的

HTMLの能力

「文章の構造化」と「ハイパーリンク」

HTML歴史 1989年

http://en.wikipedia.org/wiki/Tim_Berners-Lee

1990 1995 2000 2005

▼

http://en.wikipedia.org/wiki/Tim_Berners-Lee



HTML2が勧告される

「画像」利用への要求

CSS1が勧告

「装飾」したいという要求

NetscapeがJavaScriptを開発

「処理」したいという要求

HTML歴史 1995-1996

aboutnews

aboutnews

CloudSpiral

CloudSpiral

1990 1995 2000 2005

▼…



HTML4.01が勧告

しばらくWebのデファクトに

構造化文章はHTML・装飾はCSS

以降Webの激的な変化

HTML歴史 1999

<DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

1990 1995 2000 2005

▼



W3C

XHTML1.0を推進

「XML遵守」という思想

WHATWG

ブラウザベンダ（Apple/Mozilla/Opera）が設立

Web Applications1.0を推進

「Webアプリ構築」という思想

HTML歴史 1999以降

<br> → <br /><HEAD> → <head>

1990 1995 2000 2005

▼…………………



「マルチメディア」への要求が拡大

→ ブラウザプラグインとして実現 Flash(Adobe)/Silverlight(MS)/アプレット …

「オープンなWeb」という思想との齟齬

「Webアプリ機能」への要求

位置情報の取得やローカルデータベースなど Google Gears

HTML歴史 2000年代

1990 1995 2000 2005

▼…………………………



HTML5 ドラフト策定（2014に正式勧告予定）

Web Applications1.0が前身 (XHTML2.0は打ち切り)

「マルチメディア」と「Webアプリ機能」をサポート Flash/Silverlight

後方互換性の保証 HTML1～4(strict/transitional/frameset) XHTML1.x(strict…)

“Living Standard” ブラウザベンダやデザイナのフィードバックを受けて継続的に仕様を更新

HTML歴史 2008年

1990 1995 2000 2005

▼



HTML DTD 利用率の変化

XHTMLtransitional

HTML5

HTML4.01transitional

2010/10 2013/08

HTML4.01transitional

HTML5

XHTMLtransitional



文章の構造表現の強化セマンティクス

マルチメディア機能の強化 audio/video/Canvas

より高度なAPIの追加 Geolocation/WebSocket/Web Storage/Web Workers/クロスドキュメン

トメッセージング/オフラインアプリケーション/アプリケーションキャッシュ/ドラッグ＆ドロップ/ファイルAPI/バッテリーAPI/…

HTML5の拡張ポイント

ブラウザ ≠ 文章の閲覧ツールブラウザ＝アプリケーションプラットフォーム



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/

HTML5で作成されたWebアプリ

http://webcamtoy.com/

http://www.css3maker.com/

http://clippingmagic.com/

http://codepen.io/stuffit/pen/KrAwx



HTML5の対応状況は各種ブラウザによって様々

HTML5はJavaScriptの利用が前提

将来どうなるかは誰にもわからない

Flashも健在

Web2.0 is dead. HTML5は？クラウドは？

注意点



WebSocket 演習C


Bootstrap 演習D






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

セマンティックWeb

文字意味

文字意味

文字文字

現在のWeb セマンティックWeb

文字文字文字意味

文字意味

文字意味

文字

文字による検索文字 + 意味による検索

k3万円以下の良いタブレットは？



ページ全体の構造の意味付けが標準化

HTML5のセマンティクス例1

<div>

<div> <div>

<div>

～HTML4・XHTML1.0

<header>

<nav> <article>

<footer>

HTML5

<header>

<nav><article>

<footer>k

フッタに[email protected]が含まれるページは？



inputフォームの意味が拡張

HTML5のセマンティクス例2

～HTML4・XHTML1.0 HTML5名前: <input type="text">年齢: <input type="text">メール:<input type="text">誕生日:<input type="text"><input type="submit" value="登録">

名前: <input type="text">年齢: <input type="number">メール:<input type="email">誕生日:<input type="date"><input type="submit" value="登録">



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

使いやすい入力フィールド，入力チェックなど従来はJavaScriptやライブラリでごりごり実装

セマンティックWebのメリットの一つ

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

ブラウザが賢く処理している

開発者は適切に意味をつけるだけでよい

意味付けのメリット



利用可能なinput type属性

search 検索テキスト

date 日付

month 月

week 週

time 時間

datetime UTCの日時

HTML5で追加

text 1行テキスト

password パスワード

submit 登録ボタン

tel 電話番号

url URL

email メールアドレス

number 数値

range 数値のレンジ

color 色



inputフォームが列挙された input.html を作成し，ブラウザで動作を確認しなさい

ワークスペースは trial でよい

HTML5ファイルのテンプレート（コピペ推奨） http://git.io/cspiral2013 から

html5-template.html を開く

演習A1

<form><input type="text"><input type="tel"><input type="submit" value="登録">

</form>

全input要素はform要素で囲うこと

http://git.io/cspiral2013



A2：required属性をつけてsubmitを試しなさい

A3：placeholder属性をつけて見やすくしなさい

演習A2～A3 （オプショナル）

<input type="text" required><input type="email" required><input type="tel">

<input type="text" placeholder="お名前" required><input type="email" placeholder="メールアドレス" required><input type="tel" placeholder="電話番号">

required: 必須入力項目であることを示す

placeholder: 入力時のユーザへのヒントを表すテキスト



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

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

JavaScriptから呼び出す

モバイルアプリとの相性が良い

プライバシーの問題もあるのでオプトイン型

ユーザの許可が必須

Geolocation API



JavaScriptからの座標の取得方法$(function(){if (navigator.geolocation) {navigator.geolocation.getCurrentPosition(

show_location, show_error);} else {alert('not supported');

};});

function show_location(position) {var lat = position.coords.latitude;var lon = position.coords.longitude;$('#latlon').val(lat + ' ' + lon);

}

function show_error(error) {：

1234567891011121314151617

▼ geolocation API対応のブラウザか調べる

▲座標を取得する

-成功したら show_location 関数を呼ぶ-失敗したら show_error 関数を呼ぶ

▲取得した緯度と経度を <input id="latlon"> に書込む



座標を取得する geolocation.html を作成しなさい

ソースは以下より取得（コピペ推奨） http://git.io/cspiral2013 より2つのファイルが必要

geolocation.html

js/geolocation.js

ワークスペース上のフォルダ構成も上記と同じようにすること

演習 B1

http://git.io/cspiral2013



現在地のGoogle Mapsを表示する geomap.html を作成しなさい

演習 B2 （オプショナル）

<script src="//maps.google.com/maps/api/js?v=3&sensor=false"></script>

Google Maps APIの読み込み（HTML）

緯度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);

}

<div id="map" style="width:400px; height:400px"></div>地図表示領域の作成（HTML）



WebSocket 演習C


Bootstrap 演習D






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

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

サーバ側からのPUSH通信可能サーバ「データ送るわ」クライアント「OK」

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

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

WebSocket



一般的なHTTP通信

Ajax

比較 HTTP & Ajax

リクエスト後即時応等PULL型

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

サーバのイベント発生



Comet

WebSocket

比較 Comet & WebSocket

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

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

から通信PUSH型効率的な双方向通信



JavaScriptでWebSocketを使うws = new WebSocket('ws://133.30.159.3:8080/...');

ws.onopen = function() {//接続成功時の処理

}

ws.onmessage = function(message) {...

}

ws.onerror = function() {//接続エラー発生時の処理

}

ws.onclose = function() {//切断時の処理

}

123456789101112131415

▲ 接続先サーバアドレスを指定してWebSocketオブジェクトを生成する

サーバからのPUSHメッセージを取得した場合の処理を定義する▲



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

サーバサイドシステムは神戸大に設置

グループごとにサーブレット（受け口）を用意

tinychat

hellotinychat

神大サーバ

tinychat01

クライアント



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

サーバサイドシステムは神戸大に設置

グループごとにサーブレット（受け口）を用意

tinychat

tinychat01hello

tinychat

hello hello

神大サーバクライアント

tinychat02

tinychat03



Tinychat のひな形ワークスペースのクローンを作成しなさい

別紙「Cloud9 IDEの使い方.pdf」を参照

クローンするリポジトリのURL https://github.com/shinsuke-mat/tinychat

演習C1

https://github.com/shinsuke-mat/tinychat/



グループ内でチャット可能なように修正しなさい

各班のtinychatサーブレットへの接続先

演習C2

1班： ws://133.30.159.3:8080/tinychat01/send











ブラウザを閉じた際に "bye" というメッセージを送信するように修正しなさい

動作確認の際には複数タブを立ち上げればよい

演習C3 （オプショナル）



WebSocket 演習C


Bootstrap 演習D






CSS: HTML文章を「装飾」するための記述

CSS3で装飾能力が大幅に強化された

グラデーション/変形/アニメーション/Webフォント…

CSS 3.0 Markerhttp://www.css3maker.com/

CSS3

.element {background: orange;border: solid 1px #666;

}

1234

▼ セレクタ: 「class=“element”」の全要素に対して…

このスタイルを適用する▲

<div class="element">...</div>1

http://www.css3maker.com/



画面サイズに合わせて自動的にレイアウトを調整

マルチデバイス対応策の一つ

レスポンシブWebデザイン



NTT Datahttp://www.nttdata.com/

CAAAAAAAAAAThttp://roxik.com/cat

AWWWARDShttp://www.awwwards.com/

CloudSpiralhttp://cloud-spiral.enpit.jp/

百聞は一見に如かず

http://www.nttdata.com/

http://roxik.com/cat

http://www.awwwards.com/

http://cloud-spiral.enpit.jp/



CSS3のメディアクエリを使用（一つのやり方）

レスポンシブの実現方法

.line {width: 100%;border: solid 1px #666;

}

@media screen and (min-width: 200px) {.line {

background: cyan;}

}

@media screen and (min-width: 300px) {.line {

background: magenta;}

}

▼ class="line" に対するデフォルトのスタイル（枠線を書いているだけ）

▼ 幅200px以上

12345678910111213141516

▼ 幅300px以上



ワンソース・マルチデバイスの思想

利点

運用が楽

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

欠点

通信量が大きい

メンテナンスが大変

端末ごとの細かい調整ができない

利点・欠点



Twitter社が開発したCSSフレームワーク

手軽に見栄えをよくできる

レスポンシブWebデザインに対応

HTML要素の class="xxx" の部分に特定の値を指定するとかっこよくなる

Bootstrap v3.0.0を使う

2系列と大幅に変わっているので注意

Bootstrap3http://getbootstrap.com/

http://getbootstrap.com/



準備（HTML）<!DOCTYPE html><html lang="ja"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width"><title>Bootstrapテンプレート</title><link rel="stylesheet" href="css/bootstrap.min.css"><link rel="stylesheet" href="css/bootstrap-theme.min.css">

</head>

<body>

<script src="//code.jquery.com/jquery.js"></script><script src="js/bootstrap.js"></script>

</body></html>

1234567891011121314151617

▲ Bootstrapのスタイルシート2つをロード

▲ BootstrapのJavaScriptライブラリをロード

<-- この部分を自由に記述する -->



label要素を試す<body><span class="label label-default">Default</span><span class="label label-primary">Primary</span><span class="label label-success">Success</span><span class="label label-info">Info</span><span class="label label-warning">Warning</span><span class="label label-danger">Danger</span>

12345678 ▲ classに "label" と "label-xxx" を指定する

Bootstrapなし

"label" → 白文字に"label-xxx" → xxxのコンテキストにあった背景色に



table要素を試す123456789

<body><table class="table table-hover"><tr>

:</tr><tbody>

<tr class="success"><td>shinsuke</td>

▲ table要素のclassに "table" と "table-hover"を指定する

▼ shinsukeの発言だけに "success"を指定する

Bootstrapなし



CSSの切り替え

公開されているCSSテンプレートを取得し，bootstrap.min.css を上書きするだけ http://bootswatch.com/

他にも

http://bootswatch.com/cyborg/ http://bootswatch.com/flatly/

http://bootswatch.com/

http://bootswatch.com/cyborg/

http://bootswatch.com/flatly/



演習D1 tinychatのチャットメッセージ領域を，bootstrapのテーブル装飾を

利用して改善しなさい

演習D2 （オプショナル）ステータス領域を改善しなさい

演習D3 （オプショナル）入力領域を改善しなさい

演習D1～D3

D1

D2

D3



WebSocket 演習C


Bootstrap 演習D




http://www.flickr.com/photos/dubblethinkdesign/3579519738/


Vincent van Gogh, The Starry Night, 1889



デザインは難しい ?

たくさんの考慮が必要

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

認知科学の問題

善し悪しの判断が難しい

好みの問題？

そもそもセンスの問題？



デザイン≠アート

アート自己表現のための行為

他者に理解される必要はない

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

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

「デザインの基本4原則」

「ユニバーサルデザイン」

Good News



要素を揃えて配置する

見えない糸で揃える

統一感や要素同士の視覚的なつながりを生む

基本4原則: 整列



関連する要素を近くに配置する

視覚的に構造化する

基本4原則: 近接

cloud1 cloud2

cloud1 cloud2



近接＋整列


Cloud Spiral

http://cloud-spiral.enpit.jp

TEL: 06-6879-4395

[email protected]


Cloud Spiral


TEL: [email protected]



全体を通して一貫して似た要素を使う

テンプレートやテーマカラーを決める

統一感を生む＋特別な要素を目立たせる

基本4原則: 反復

enPiT-Cloud(分野・地域を越えた実践的情報教育協働ネットワーク・クラウド分野)の取り組み、Cloud Spiral のWebサイトがオープンしました。Cloud Spiral は、西日本9大学、…

2013/03/11 by masa-n

Cloud SpiralAbout News Event Misc

2013年3月9日～11日の日程で、CloudSpiralの若手教員が集結して合宿形式のFD(Faculty Development)活動を行いました。今回参加した教員は、阪大，神大，和大，京産…

2013/03/11 by masa-n

どーもー CloudSpiral，講義広報担当のさちをです．早い物でCloudSpiralの講義も3回目を迎えました．1年目ということで，毎回準備にドタバタしていますが，ぼちぼち慣…

2013/09/03 by sachio

enPiT-Cloud(分野・地域を越えた実践的情報教育協働ネットワーク・クラウド分野)の取り組み、Cloud Spiral のWebサイトがオープンしました。Cloud Spiral は、西日本9大学、…

2013/03/11 by masa-n

Cloud SpiralAbout News Event Misc

2013年3月9日～11日の日程で、CloudSpiralの若手教員が集結して合宿形式のFD(Faculty Development)活動を行いました。今回参加した教員は、阪大，神大，和大，京産…

2013/03/11 by masa-n

どーもー CloudSpiral，講義広報担当のさちをです．早い物でCloudSpiralの講義も3回目を迎えました．1年目ということで，毎回準備にドタバタしていますが，ぼちぼち慣…

2013/09/03 by sachio



異なる要素ははっきりと違わせる

強調したい部分に強いコントラストを加える

基本4原則: コントラスト



TEL: 06-6879-4395

[email protected]

Cloud Spiral

どーもー CloudSpiral，講義広報担当のさちをです．早い物でCloudSpiralの講義も3回目を迎えました．1年目ということで，毎回準備にドタバタしていますが，ぼちぼち慣… 2013/09/03 by sachio



誰でも同じように利用できるデザインのこと文化/言語/国籍老若男女障害/能力の差

アクセシビリティ確保のための考え方

Webサイトでのユニバーサルデザイン（抜粋）

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

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

カラーユニバーサルデザイン




色覚異常者にも間違いなく情報が伝わるようなデザインのこと

色覚異常の種類

赤～緑の識別が困難 (男性4.5%, 女性0.2%)

青系の識別が困難

全色の識別が困難

カラーユニバーサルデザイン

赤青緑



コントラストを確保する

明度差と色差の2つを考える

カラーユニバーサルの考え方1

色差 ×明度差 ×

色差 ×明度差 ○

色差 ○明度差 ×

色差 ○明度差 ○

色差確保

明度差確保

文字の色（■）を固定して明度差と色差を変更



色だけで情報を伝えない

カラーユニバーサルの考え方2

東京都都内地下鉄路線図http://www.metro.tokyo.jp/SUB/SUBWAY/

http://www.metro.tokyo.jp/SUB/SUBWAY/



グラフの見せ方

応用例

A

B

C

D

E

F

G

A

B

C

D

EF GA

B

C

D

E

F

G

黒線によるコントラスト確保

色による凡例の説明を回避

Excelのデフォルト



シミュレータ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

ツール

http://colororacle.org/

http://jfly.iam.u-tokyo.ac.jp/colorset/

http://www.w3.org/TR/AERT

http://juicystudio.com/services/translations/colourcontrast-ja.php

http://www.vector.co.jp/soft/win95/art/se350616.html



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

HTML5・CSS3で色々できるようになったブラウザ ≠ 文章閲覧ツール

＝アプリケーションプラットフォーム

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

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

まとめ



WebSocket 演習C


Bootstrap 演習D






tinychatのクライアントサイドを改善しなさい

まず改善の方針を決めること

何が問題でどう改善するかを記述することクライアントサイドでの機能拡張

・ Google Mapsとの連携

デザインの改善・レスポンシブWebデザイン化，レイアウト・見た目の改善・ユーザビリティの改善（入力しやすく，チャットを見やすく）・アクセシビリティの改善（色彩設計等）

改善方針とCloud9登録アカウント名を書込むこと http://goo.gl/qZcvZ1

総合演習

http://goo.gl/qZcvZ1

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


参考資料



Tinychatサーバサイドのソースコード

@WebServlet(value = { "/send" })public class CMainServlet extends WebSocketServlet {

private static final long serialVersionUID = 6946416208261279049L;private static final Set<ChatMessageInbound> inbounds =

new CopyOnWriteArraySet<ChatMessageInbound>();@Overrideprotected StreamInbound createWebSocketInbound(String subProtocol,

HttpServletRequest request) {return new ChatMessageInbound();

}class ChatMessageInbound extends MessageInbound {

@Overrideprotected void onOpen(WsOutbound outbound) { inbounds.add(this); }@Overrideprotected void onClose(int status) { inbounds.remove(this); }@Overrideprotected void onBinaryMessage(ByteBuffer message) throws IOException {}@Overrideprotected void onTextMessage(CharBuffer buffer) throws IOException {

for (MessageInbound socket : inbounds) {socket.getWsOutbound().writeTextMessage(buffer);buffer.position(0);

}}

123456789

101112131415161718192021222324

That's all!

最古のWebサイト

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

朝起きて最もクソなデザインについて考えてみたんだ．たぶんこんな感じじゃないんかな．


Education

CloudSpiral 2013年度 Webアプリ講義