Your SlideShare is downloading. ×
0
CloudSpiral 2013年度 Webアプリ講義
CloudSpiral 2013年度 Webアプリ講義
CloudSpiral 2013年度 Webアプリ講義
CloudSpiral 2013年度 Webアプリ講義
CloudSpiral 2013年度 Webアプリ講義
CloudSpiral 2013年度 Webアプリ講義
CloudSpiral 2013年度 Webアプリ講義
CloudSpiral 2013年度 Webアプリ講義
CloudSpiral 2013年度 Webアプリ講義
CloudSpiral 2013年度 Webアプリ講義
CloudSpiral 2013年度 Webアプリ講義
CloudSpiral 2013年度 Webアプリ講義
CloudSpiral 2013年度 Webアプリ講義
CloudSpiral 2013年度 Webアプリ講義
CloudSpiral 2013年度 Webアプリ講義
CloudSpiral 2013年度 Webアプリ講義
CloudSpiral 2013年度 Webアプリ講義
CloudSpiral 2013年度 Webアプリ講義
CloudSpiral 2013年度 Webアプリ講義
CloudSpiral 2013年度 Webアプリ講義
CloudSpiral 2013年度 Webアプリ講義
CloudSpiral 2013年度 Webアプリ講義
CloudSpiral 2013年度 Webアプリ講義
CloudSpiral 2013年度 Webアプリ講義
CloudSpiral 2013年度 Webアプリ講義
CloudSpiral 2013年度 Webアプリ講義
CloudSpiral 2013年度 Webアプリ講義
CloudSpiral 2013年度 Webアプリ講義
CloudSpiral 2013年度 Webアプリ講義
CloudSpiral 2013年度 Webアプリ講義
CloudSpiral 2013年度 Webアプリ講義
CloudSpiral 2013年度 Webアプリ講義
CloudSpiral 2013年度 Webアプリ講義
CloudSpiral 2013年度 Webアプリ講義
CloudSpiral 2013年度 Webアプリ講義
CloudSpiral 2013年度 Webアプリ講義
CloudSpiral 2013年度 Webアプリ講義
CloudSpiral 2013年度 Webアプリ講義
CloudSpiral 2013年度 Webアプリ講義
CloudSpiral 2013年度 Webアプリ講義
CloudSpiral 2013年度 Webアプリ講義
CloudSpiral 2013年度 Webアプリ講義
CloudSpiral 2013年度 Webアプリ講義
CloudSpiral 2013年度 Webアプリ講義
CloudSpiral 2013年度 Webアプリ講義
CloudSpiral 2013年度 Webアプリ講義
CloudSpiral 2013年度 Webアプリ講義
CloudSpiral 2013年度 Webアプリ講義
CloudSpiral 2013年度 Webアプリ講義
CloudSpiral 2013年度 Webアプリ講義
CloudSpiral 2013年度 Webアプリ講義
CloudSpiral 2013年度 Webアプリ講義
CloudSpiral 2013年度 Webアプリ講義
CloudSpiral 2013年度 Webアプリ講義
CloudSpiral 2013年度 Webアプリ講義
CloudSpiral 2013年度 Webアプリ講義
CloudSpiral 2013年度 Webアプリ講義
CloudSpiral 2013年度 Webアプリ講義
CloudSpiral 2013年度 Webアプリ講義
CloudSpiral 2013年度 Webアプリ講義
CloudSpiral 2013年度 Webアプリ講義
CloudSpiral 2013年度 Webアプリ講義
CloudSpiral 2013年度 Webアプリ講義
CloudSpiral 2013年度 Webアプリ講義
CloudSpiral 2013年度 Webアプリ講義
CloudSpiral 2013年度 Webアプリ講義
CloudSpiral 2013年度 Webアプリ講義
CloudSpiral 2013年度 Webアプリ講義
CloudSpiral 2013年度 Webアプリ講義
CloudSpiral 2013年度 Webアプリ講義
CloudSpiral 2013年度 Webアプリ講義
CloudSpiral 2013年度 Webアプリ講義
CloudSpiral 2013年度 Webアプリ講義
CloudSpiral 2013年度 Webアプリ講義
CloudSpiral 2013年度 Webアプリ講義
CloudSpiral 2013年度 Webアプリ講義
CloudSpiral 2013年度 Webアプリ講義
CloudSpiral 2013年度 Webアプリ講義
CloudSpiral 2013年度 Webアプリ講義
CloudSpiral 2013年度 Webアプリ講義
CloudSpiral 2013年度 Webアプリ講義
CloudSpiral 2013年度 Webアプリ講義
CloudSpiral 2013年度 Webアプリ講義
CloudSpiral 2013年度 Webアプリ講義
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

CloudSpiral 2013年度 Webアプリ講義

3,712

Published on

Published in: Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
3,712
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. 分野・地域を越えた実践的情報教育協働ネットワーク Webアプリ クライアントサイド開発 神戸大学 まつ本 真佑 佐伯 幸郎 中村 匡秀 Cloud Specialist Program Initiative for Reality-based Advanced Learning
  • 2. 柗本 真佑 シュノーケリング メタル・ロック プログラミング
  • 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
  • 62. http://www.flickr.com/photos/dubblethinkdesign/3579519738/
  • 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
  • 80. 分野・地域を越えた実践的情報教育協働ネットワーク 参考資料 Cloud Specialist Program Initiative for Reality-based Advanced Learning
  • 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
  • 82. 最古のWebサイト http://info.cern.ch/hypertext/WWW/TheProject.html
  • 83. とそのソースコード http://info.cern.ch/hypertext/WWW/TheProject.html
  • 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/

×