web/Projects.html

<!doctype html>
<html lang="ja">
<head>
    <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="A layout example with a side menu that hides on mobile, just like the Pure website.">

    <title>Projects</title>


<link rel="stylesheet" href="css/layouts/src.css">
<link rel="stylesheet" href="css/layouts/src_new.css">
<link rel="stylesheet" href="movie-wrap.css">


    <!--[if lte IE 8]>
        <link rel="stylesheet" href="css/layouts/side-menu-old-ie.css">
    <![endif]-->
    <!--[if gt IE 8]><!-->
        <link rel="stylesheet" href="side-menu.css">
    <!--<![endif]-->


</head>
<body>
<div id="layout">
    <!-- Menu toggle -->
    <a href="#menu" id="menuLink" class="menu-link">
        <!-- Hamburger icon -->
        <span></span>
    </a>

    <div id="menu">
        <div class="pure-menu">
            <a class="pure-menu-heading" href="index.html">Srobot</a>

            <ul class="pure-menu-list">
              <li class="pure-menu-item"><a href="About.html" class="pure-menu-link">About</a></li>
              <li class="pure-menu-item"><a href="Projects.html" class="pure-menu-link">Projects</a></li>
              <li class="pure-menu-item"><a href="Member.html" class="pure-menu-link">Member</a></li>
              <li class="pure-menu-item"><a href="Join.html" class="pure-menu-link">Join</a></li>
              <li class="pure-menu-item"><a href="Contact.html" class="pure-menu-link">Contact</a></li>
            </ul>
        </div>
    </div>

    <div id="main">
        <div class="header">
            <h1>Projects</h1>
            <h2>研究成果</h2>
          <!--  <h2>/subtitle/</h2>-->
        </div>

        <div class="content">
            <div class="pure-g">
                <div class="pure-u-1-1">
                  <div class="movie-wrap">
                    <iframe width="560" height="315" src="https://www.youtube.com/embed/piztxBJ0kdY" frameborder="0" allowfullscreen ></iframe>
                  </div>
                  <h2 class="content-subhead">Empathetic H2R Interaction -ヒトやロボットに共感するロボットたち</h2>
                   <p>“Making Robots more Sociable”，ミュンヘン工科大学 Gordon Cheng 教授の言葉です．人とロボット，ロボット同士のインタラクションにおいて，ロボットに求められる「社会性」とはどのようなものでしょうか．このプロジェクトでは，周囲の状況と相手の情動を感覚として理解し，どのような表情で相手に向き合うかを，ロボットの立場でデザインしています．

このデモンストレーションでは，人やロボットに共感してくれるロボットたちが登場します．人が落ち込んでいれば話しを聞いて一緒に落ち込んでくれる，落ち込んでいる人を2台で褒めて励ましてくれる，そんなロボットたちです．

ユビキタス情報空間，新たな人（身体）のカタチ，ソーシャブルなロボットたち，そしてそれらが三位一体となったインタラクションをご覧ください</p>


                  <div class="movie-wrap">
                    <iframe width="560" height="315" src="https://www.youtube.com/embed/n1veEJFxKdg" frameborder="0" allowfullscreen></iframe>
                  </div>
                  <h2 class="content-subhead">cookpepper</h2>
                   <p>cookpepperは日々の料理の手助けするアプリです。Pepperに食材を見せながら、オンラインのリソースを活用しつつ、食材に合った今日の献立を相談できます。レシピをタブレットへ表示してくれるだけでなく、Pepperが手取り足取り（？）調理手順を教えてくれるので、料理が一層楽しくなります。最後にはPepperから素敵なプレゼントがあります。</p>


                  <div class="movie-wrap">
                    <iframe width="560" height="315" src="https://www.youtube.com/embed/mYdPbclhbiY" frameborder="0" allowfullscreen></iframe>
                  </div>
                  <h2 class="content-subhead">一期一会</h2>
                   <p>2015年度　ORF展示作品</p>
        </div>
    </div>
</div>


<script src="ui.js"></script>


</body>
</html>