1 / 46

情報工学特別講義（第１４回目） ２０１３年７月１８日 担当 　石原真紀夫

情報工学特別講義（第１４回目） ２０１３年７月１８日 担当 　石原真紀夫. ＨＣＩ研究分野の紹介. 人 にやさしいユーザインタフェースとは？. ユーザインタフェースとは？. ユーザ と コンピュータ を結ぶもの。 たとえば、キーボードやマウスなどのように、人間とコンピュータの間で直接情報を送受信する部分を指します。 （パソコンＩＴ用語辞典２０１０年版より）. ?. ？に何を使うかで ○○ユーザインタフェース と言います。. CUI. GUI. PUI. TUI. WUI. BMI. ユーザインタフェースとは？.

takara
Download Presentation

情報工学特別講義（第１４回目） ２０１３年７月１８日 担当 　石原真紀夫

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. 情報工学特別講義（第１４回目） ２０１３年７月１８日 担当　石原真紀夫 ＨＣＩ研究分野の紹介 人にやさしいユーザインタフェースとは？

  2. ユーザインタフェースとは？ ユーザとコンピュータを結ぶもの。 たとえば、キーボードやマウスなどのように、人間とコンピュータの間で直接情報を送受信する部分を指します。 （パソコンＩＴ用語辞典２０１０年版より） ? ？に何を使うかで○○ユーザインタフェースと言います。

  3. CUI GUI PUI TUI WUI BMI ユーザインタフェースとは？ CUI - CharacterUserInterface 命令の入力をキャラクター・ベースで行う ユーザインタフェースのこと。 ・MS DOS ・Linux たとえば、ＤＯＳプロンプトなどでコマンド（命令）を文字で入力することで操作を行います。 dirコマンド フォルダとファイルの一覧を表示するコマンドです。 tree, ver, ipconfigなど様々な命令が準備されています。

  4. CUI GUI PUI TUI WUI BMI ユーザインタフェースとは？ GUI – GraphicalUserInterface コンピュータの操作に、図形などの視覚情報を利用するインタフェースのこと。 ・MS Windows ・Max OS ・X Window 操作の入力を、アイコンやメニューの選択といった図形情報により行うことができるので、初心者でも使いやすい。 WIMPメタファー ウィンドウとアイコン、メニュー、ポインタをベースとしてGUIを設計する方針のこと。 メンタルモデルを 作りやすい!!

  5. Voice Sign language Eye tracking PUI CUI GUI TUI WUI BMI ユーザインタフェースとは？ PUI – PerceptualUserInterface 次世代ユーザインタフェースの一つ。 コンピュータの操作に、音声や身振り手振り、視線などの知覚情報を利用するインタフェースのこと。

  6. TUI CUI GUI PUI WUI BMI ユーザインタフェースとは？ TUI – TangibleUserInterface 次世代ユーザインタフェースの一つ。 色も重さもない情報に実在の物体を対応付けて、情報が実体として存在するかのように操作できるインタフェースのこと。 ・BUILD-IT, MortenFjeld et al.

  7. WUI CUI GUI PUI TUI BMI ユーザインタフェースとは？ WUI – WebUserInterface ユーザインタフェースとしてWebブラウザを利用したインタフェースのこと。 HTML5 WebGL ユーザはブラウザの使い方さえ覚えれば、様々なアプリケーションソフトを使える利点があります。 現在では、様々なアプリがWebブラウザ上で利用できますね。たとえば、メール、ワープロ、表計算。

  8. BMI CUI GUI PUI TUI WUI ユーザインタフェースとは？ BMI – Brain MachineInterface コンピュータの操作に、脳波を利用するインタフェースのこと。 私たちが集中したり、リラックスしたりするときの脳波の活動状態を解析してコンピュータを操作できます。 Brain waves Paralysed patients use thoughts to control robotic arm http://www.bbc.co.uk/news/health-18092653 at HCII2009 conference

  9. Windowsの進化と ユーザインタフェース 米国マイクロソフト社が開発しているＯＳの名称。 １９８６年にバージョン１が出荷されて以来、事実上の業界標準になっており、パソコンで一般的に使用されている。 （パソコンＩＴ用語辞典２０１０年版より）

  10. Windowsの進化 GUI, Multi-tasking ・MS Windows 1.01 (1985~) http://www.saunalahti.fi/janij/blog/images/2008_nov_windows_1_0.png

  11. Windowsの進化 Overlaps windows, Mini-Maximum buttons ・MS Windows 2.1(1988~) http://osxbook.com/book/bonus/ancient/vpc/images/win21.gif

  12. Windowsの進化 16 colors, Multimedia (CD-ROM, sound) ・MS Windows 3.0 (1990~) http://catb.org/~esr/writings/taouu/html/graphics/win30progman.png

  13. Windowsの進化 Start menu, Task bar, Desktop folder ・MS Windows 95 (1995~) http://cybernetnews.com/wp-content/uploads/2006/10/Windows95.jpg

  14. Windowsの進化 True-color, Soften appearance ・MS Windows XP (2001~) http://www.winsupersite.com/images/reviews/wxp_rtm_home_004.gif

  15. Windowsの進化 Aero interface, Side bar &Gadgets ・MS Windows Vista (2007~) http://www.otterbein.edu/ITS/images/vista-screen.jpg

  16. Windowsの進化 Peek, Shake, Snap, Windows Touch ・MS Windows 7 (2009~) http://screenshots.winfuture.de/Windows-7-Build-6.1.7048-1235994358.jpg

  17. Windowsの進化 Windows Touch http://msdn.microsoft.com/ja-jp/library/windows/desktop/dd940543%28v=vs.85%29.aspx

  18. Windowsの進化 Modern UI (Metro UI) ・MS Windows 8 (2012.10~) http://windowsteamblog.com/cfs-filesystemfile.ashx/__key/CommunityServer-Blogs-Components-WeblogFiles/00-00-00-59-23-metablogapi/4666.win8_5F00_start_5F00_screen_5F00_68436351.jpg

  19. 新しいユーザインタフェース を支える様々機器 現在、我々は主にキーボードやマウス、ディスプレイを用いて、 コンピュータと情報のやり取りをします。これ以外にも様々な機器が新しいユーザインタフェースを支えています。

  20. ユーザインタフェース 支える機器 Touch Screen-- GUI 触れる（タッチ）と、それが入力とみなされるスクリーンのこと。 Google Android MS Surface Apple iPad スクリーン上のタッチした場所がポイントした位置になるため、 自然でわかりやすい利点がある。 Apple iPad

  21. ユーザインタフェース 支える機器 Data Glove -- PUI 人間の手の動作を読み取ることができるセンシング機器のこと。 手袋のように手に装着して使用します。 加速度センサや曲率センサにより、手の傾きや各指の曲がり具合を読み取ることができます。 仮想物をつまんで動かしたり、持ち上げていろんな角度から観察したりすることを直感的に行えます。 ADGTechVHand

  22. ユーザインタフェース 支える機器 Force FeedbackDevice -- PUI 振動や力を人に伝える機器のこと。 ゲームパッドやジョイスティック、ハンドル型コントローラ,マウス、トラックボールなど様々な入力機器と組合わせて使用されます。 重さのない仮想物に重みを加えたり、その固さや柔らかさを感じることができます。 Novint Falcon

  23. ユーザインタフェース 支える機器 Eye TrackingDevice -- PUI 人間の視線を読み取ることができるセンシング機器のこと。 メガネのように頭に装着して使用します。 見ている箇所をクリックしたり、注目している領域に応じた情報を表示したりできます。 NAC EMR9

  24. ユーザインタフェース 支える機器 Camera BasedInput Device -- PUI カメラ画像を用いて人の様々な動作を読み取る機器のこと。 マイクロソフトのKinectやソニーのMoveが有名です。 人はコントローラを持ったり、余分なセンサを身に着ける必要がなく、身振り手振りで機器に命令を出すことができます。 DEMO RGBセンサー 深度センサー Microsoft XBox360 Kinect Kinectによる３次元復元

  25. ユーザインタフェース 支える機器 Head MountedDisplay& CAVE System 人の左目と右目の視野に視差のある別々の画像を提示して、立体的な仮想世界を表示する機器のこと。 人は仮想世界の中に入り込んでいるかような感覚を得ることができます。 eMagin Z800 3DVisor Remote Impact game in action http://news.bbc.co.uk/go/em/fr/-/2/hi/uk_news/scotland/7423404.stm

  26. ユーザインタフェースと アフォーダンス アフォーダンスとは、その物体を使って何ができるのかを伝える知覚的な明示のこと。 アフォーダンスをうまく考えて作られた機器は見てその使い方を自然に推測できるため、分厚い取扱い説明書の必要がなくなります。 最近のタブレット端末の説明書はとても薄いです!! （※）コンストレイントとは、その物体を使って何ができないのかを伝える知覚的な明示のこと。

  27. アフォーダンス ★アフォーダンスの実例１

  28. アフォーダンス ★アフォーダンスの実例２

  29. 私の研究室とテーマ 経験ベース デザイン ユーザフレンドリ デザイン ダイレクト操作 Windowメタファ スクロール Googleマップ 拡大と縮小 MSペイント M. Ishihara et al, “Porthole: A spatial interface to provide scrolling, zooming-in, and zooming-out”, 2005 M. Ishihara et al, “Fingertip-shadow for click, db-click, and drag on a wall”, 2005

  30. 私の研究室とテーマ 3D立体迷路～迷子問題 マーカーを用いた算数ドリル A B 指さしによるGoogleMap操作 AR地図システム

  31. 私の研究室とテーマ マルチ画面とマウス操作 Virtualマウス お魚計測アプリ HMDを用いた地図閲覧 AR屋内案内アプリ

  32. 国際会議 口頭発表（Oral session） ポスター（Poster session）

  33. 国際会議 SMART Table SMART Technologies UIST2008, Monterey, CA, USA デモ（Demo） 展示会（Exhibition） Spherical Display Microsoft Research UIST2008, Monterey, CA, USA

  34. 国際会議 The Colloseum Palatine Hill

  35. 国際会議 Glacier Venetia Innsbruck town Swarovski Crystal Aircraft carrier MIDWAY NASA

  36. お　わ　り ★ARアプリ ★Androidアプリ 来年はLeap Motionが熱い!! 以上で終わります。

  37. おまけ★拡張現実感 ＣＧで作られた仮想物を現実空間に重ね合わせて表示する技術のこと。 拡張現実 現実の大学キャンパス 仮想空間 Quake I Photos from ARQuake project, Wearable Computer Lab, University of South Australia

  38. 拡張現実感 ★拡張現実感の位置付け 現実感 現実空間に仮想物が置かれているイメージ 拡張現実感 混合現実感 仮想空間に現実のものが置かれているイメージ 拡張仮想感 仮想現実感

  39. 拡張現実感 ★ARToolkitを用いた拡張現実感の仕組み AR Toolkit ・ARを手軽につくるためのソフトウェアライブラリ ・フリーウェア ・C, Java, OpenGL overlay G マーカー

  40. 拡張現実感 １）パソコンはマーカーの模様とそのサイズを予め知っています。 たとえば、 「マーカーは、８ｃｍ×８ｃｍでＧマークの模様」 8cm G 8cm マーカー

  41. 拡張現実感 ２）マーカーの模様データを使ってカメラ画像からマーカーの場所を探します。 カメラ画像 G G G 8cm 8cm マーカー

  42. 拡張現実感 ３）マーカーのサイズデータを使ってマーカーまでの距離と姿勢を計算します。遠くにあればマーカーは小さく映り、傾いていれば台形のように歪んで映ります。 カメラ画像 G G G 8cm 8cm マーカー

  43. 拡張現実感 ４）仮想世界を作り、マーカーとまったく同じ距離、姿勢の位置に仮想物を描きます。 カメラ画像 G 仮想カメラ G 仮想世界 マーカー

  44. 拡張現実感 ５）仮想カメラからみたＣＧを生成します。 カメラ画像 G 仮想カメラ G 仮想世界 マーカー ＣＧ画像

  45. 拡張現実感 ６）最初のカメラ画像の上にＣＧ画像を上書きします。 カメラ画像 G G G マーカー 拡張現実画像！！ ＣＧ画像

More Related