新しい研究テーマに書き換え

src/content_home.js

@@ -27,23 +27,23 @@ export class ContentHome extends React.Component {
               <h2 className='subtitle'>
                 {this.props.texts['home_keywords']}:
               </h2>
-              <HashLink to='/research#research_section_iai' key='/research_iai' className='button is-primary mr-2 mb-2'>
-                <strong>{this.props.texts['research_head']}</strong>
+              <HashLink to='/research#research_section_ai' key='/research_ai' className='button is-primary mr-2 mb-2'>
+                <strong>{this.props.texts['research_ai_head']}</strong>
               </HashLink>
-              <HashLink to='/research#research_section_hai' key='/research_hai' className='button is-primary mr-2 mb-2'>
-                <strong>{this.props.texts['research_hai_head']}</strong>
+              <HashLink to='/research#research_section_si' key='/research_si' className='button is-primary mr-2 mb-2'>
+                <strong>{this.props.texts['research_si_head']}</strong>
               </HashLink>
-              <HashLink to='/research#research_section_hri' key='/research_hri' className='button is-primary mr-2 mb-2'>
-                <strong>{this.props.texts['research_hri_head']}</strong>
+              <HashLink to='/research#research_section_ad' key='/research_ad' className='button is-primary mr-2 mb-2'>
+                <strong>{this.props.texts['research_ad_head']}</strong>
               </HashLink>
-              <HashLink to='/research#research_section_ca' key='/research_ca' className='button is-primary mr-2 mb-2'>
-                <strong>{this.props.texts['research_ca_head']}</strong>
+              <HashLink to='/research#research_section_iu' key='/research_iu' className='button is-primary mr-2 mb-2'>
+                <strong>{this.props.texts['research_iu_head']}</strong>
               </HashLink>
-              <HashLink to='/research#research_section_as' key='/research_as' className='button is-primary mr-2 mb-2'>
-                <strong>{this.props.texts['research_as_head']}</strong>
+              <HashLink to='/research#research_section_ui' key='/research_ui' className='button is-primary mr-2 mb-2'>
+                <strong>{this.props.texts['research_ui_head']}</strong>
               </HashLink>
-              <HashLink to='/research#research_section_cn' key='/research_cn' className='button is-primary mr-2 mb-2'>
-                <strong>{this.props.texts['research_cn_head']}</strong>
+              <HashLink to='/research#research_section_ag' key='/research_ag' className='button is-primary mr-2 mb-2'>
+                <strong>{this.props.texts['research_ag_head']}</strong>
               </HashLink>
             </div>
           </div>

src/content_research.js

@@ -1,68 +1,11 @@
 import React from 'react';
-import { Box, Heading, Subhead, Image } from 'rebass';
 
 // Images
-import LayerImg from '../res/research/top_3layers.jpg';
-import HaiMigrationImg from '../res/research/hai_migration.jpg';
-import HaiMigrationVid from '../res/research/hai_migration_demo.mp4';
-import HriLivenessImg from '../res/research/hri_liveness.jpg';
-import HriLivenessVid from '../res/research/hri_liveness_demo.mp4';
-import HriImmersionImg from '../res/research/hri_immersion.jpg';
-import HriImmersionVid from '../res/research/hri_immersion_demo.mp4';
-import HriEmotionImg from '../res/research/hri_emotion.jpg';
-import CaWheelchairImg from '../res/research/ca_wheelchair.jpg';
-import CaWheelchairVid from '../res/research/ca_wheelchair_demo.mp4';
-import AsTeroosImg from '../res/research/as_teroos.jpg';
-import AsTeroosVid from '../res/research/as_teroos_demo.mp4';
-import AsProtImg from '../res/research/as_prot.jpg';
-import AsProtVid from '../res/research/as_prot_demo.mp4';
 import CnMouseImg from '../res/research/cn_mouse.jpg';
-
-// -----------------------------------------------------------------------------
-// ----------------- Common functions to create research pages -----------------
-// -----------------------------------------------------------------------------
-function createSpatialText(rawText) {
-  var texts = [];
-  // Replace newline with Box element
-  rawText.split('\n').map(
-    (s, i) => { texts.push(<Box width={1} p={1} key={i}>{s}</Box>); }
-  );
-  return (<Box width={1} pt={1}>{texts}</Box>);
-}
-
-function createHead(text) {
-  return (<Heading pt={3}>{text}</Heading>);
-}
-
-function createSubhead(text) {
-  return (<Subhead pt={3}>{text}</Subhead>);
-}
-
-const RESP_MEDIA_WIDTH = ['100%', '90%', '75%', '70%'];
-
-function createRespImage(img, caption) {
-  return (
-    <div>
-      <Box mx='auto' width={RESP_MEDIA_WIDTH}>
-        <Image src={img} width={1} />
-      </Box>
-      {caption !== undefined &&
-        <Box width={1}><div style={{textAlign: 'center'}}>{caption}</div></Box>
-      }
-    </div>);
-}
-
-function createRespVideo(video, poster, caption) {
-  return (
-    <div>
-      <Box mx='auto' width={RESP_MEDIA_WIDTH}>
-        <video src={video} poster={poster} controls style={{width: '100%'}} />
-      </Box>
-      {caption !== undefined &&
-        <Box width={1}><div style={{textAlign: 'center'}}>{caption}</div></Box>
-      }
-    </div>);
-}
+import AiImg from '../res/research/ai_ja.png';
+import AgImg from '../res/research/ag.png';
+import IuImg from '../res/research/iu_1.jpg';
+import UiImg from '../res/research/ui.png';
 
 // -----------------------------------------------------------------------------
 // ------------------------------- Research pages ------------------------------
@@ -83,83 +26,50 @@ export class ContentResearch extends React.Component {
           </div>
         </section>
 
-        <ResearchSection key='iai' id='iai' title={this.props.texts['research_head']}>
-          <ResearchSubSection text={this.props.texts['research_exp']}>
+        <ResearchSection key='ai' id='ai' title={this.props.texts['research_ai_head']}>
+          <ResearchSubSection text={this.props.texts['research_ai_exp']}>
             <div className='column has-text-centered'>
-              <img src={LayerImg} />
-              <p>{this.props.texts['research_layer_cap']}</p>
+              <img src={AiImg} />
             </div>
           </ResearchSubSection>
         </ResearchSection>
 
-        <ResearchSection key='hai' id='hai' title={this.props.texts['research_hai_head']}>
-          <ResearchSubSection
-            title={this.props.texts['research_hai_migration_head']}
-            text={this.props.texts['research_hai_migration_exp']}>
+        <ResearchSection key='si' id='si' title={this.props.texts['research_si_head']}>
+          <ResearchSubSection text={this.props.texts['research_si_exp']}>
             <div className='column has-text-centered'>
-              <img src={HaiMigrationImg} />
-              <video src={HaiMigrationVid} controls />
+              <img src={CnMouseImg} />
             </div>
           </ResearchSubSection>
         </ResearchSection>
 
-        <ResearchSection key='hri' id='hri' title={this.props.texts['research_hri_head']}>
-          <ResearchSubSection
-            title={this.props.texts['research_hri_liveness_head']}
-            text={this.props.texts['research_hri_liveness_exp']}>
+        <ResearchSection key='ad' id='ad' title={this.props.texts['research_ad_head']}>
+          <ResearchSubSection text={this.props.texts['research_ad_exp']}>
             <div className='column has-text-centered'>
-              <video src={HriLivenessVid} poster={HriLivenessImg} controls />
-            </div>
-          </ResearchSubSection>
-          <ResearchSubSection
-            title={this.props.texts['research_hri_immersion_head']}
-            text={this.props.texts['research_hri_immersion_exp']}>
-            <div className='column has-text-centered'>
-              <video src={HriImmersionVid} poster={HriImmersionImg} controls />
-            </div>
-          </ResearchSubSection>
-          <ResearchSubSection
-            title={this.props.texts['research_hri_emotion_head']}
-            text={this.props.texts['research_hri_emotion_exp']}>
-            <div className='column has-text-centered'>
-              <img src={HriEmotionImg} />
+              <img src={CnMouseImg} />
             </div>
           </ResearchSubSection>
         </ResearchSection>
 
-        <ResearchSection key='ca' id='ca' title={this.props.texts['research_ca_head']}>
-          <ResearchSubSection
-            title={this.props.texts['research_ca_wheelchair_head']}
-            text={this.props.texts['research_ca_wheelchair_exp']}>
+        <ResearchSection key='iu' id='iu' title={this.props.texts['research_iu_head']}>
+          <ResearchSubSection text={this.props.texts['research_iu_exp']}>
             <div className='column has-text-centered'>
-              <video src={CaWheelchairVid} poster={CaWheelchairImg} controls />
+              <img src={IuImg} />
             </div>
           </ResearchSubSection>
         </ResearchSection>
 
-        <ResearchSection key='as' id='as' title={this.props.texts['research_as_head']}>
-          <ResearchSubSection
-            title={this.props.texts['research_as_teroos_head']}
-            text={this.props.texts['research_as_teroos_exp']}>
+        <ResearchSection key='ui' id='ui' title={this.props.texts['research_ui_head']}>
+          <ResearchSubSection text={this.props.texts['research_ui_exp']}>
             <div className='column has-text-centered'>
-              <video src={AsTeroosVid} poster={AsTeroosImg} controls />
-            </div>
-          </ResearchSubSection>
-          <ResearchSubSection
-            title={this.props.texts['research_as_prot_head']}
-            text={this.props.texts['research_as_prot_exp']}>
-            <div className='column has-text-centered'>
-              <video src={AsProtVid} poster={AsProtImg} controls />
+              <img src={UiImg} />
             </div>
           </ResearchSubSection>
         </ResearchSection>
 
-        <ResearchSection key='cn' id='cn' title={this.props.texts['research_cn_head']}>
-          <ResearchSubSection
-            title={this.props.texts['research_cn_mouse_head']}
-            text={this.props.texts['research_cn_mouse_exp']}>
+        <ResearchSection key='ag' id='ag' title={this.props.texts['research_ag_head']}>
+          <ResearchSubSection text={this.props.texts['research_ag_exp']}>
             <div className='column has-text-centered'>
-              <img src={CnMouseImg} />
+              <img src={AgImg} />
             </div>
           </ResearchSubSection>
         </ResearchSection>
@@ -168,99 +78,6 @@ export class ContentResearch extends React.Component {
   }
 }
 
-// ------------------------------------ HAI ------------------------------------
-export class ContentResearchHai extends React.Component {
-  render() {
-    return (
-      <Box width={1}>
-        {/* Head */}
-        {createHead(this.props.texts['research_hai_head'])}
-        {/* Migration */}
-        {createSubhead(this.props.texts['research_hai_migration_head'])}
-        {createRespImage(HaiMigrationImg)}
-        {createRespVideo(HaiMigrationVid)}
-        {createSpatialText(this.props.texts['research_hai_migration_exp'])}
-      </Box>
-    );
-  }
-}
-
-// ------------------------------------ HRI ------------------------------------
-export class ContentResearchHri extends React.Component {
-  render() {
-    return (
-      <Box width={1}>
-        {/* Head */}
-        {createHead(this.props.texts['research_hai_head'])}
-        {/* Liveness */}
-        {createSubhead(this.props.texts['research_hri_liveness_head'])}
-        {createRespVideo(HriLivenessVid, HriLivenessImg)}
-        {createSpatialText(this.props.texts['research_hri_liveness_exp'])}
-        {/* Immersion */}
-        {createSubhead(this.props.texts['research_hri_immersion_head'])}
-        {createRespVideo(HriImmersionVid, HriImmersionImg)}
-        {createSpatialText(this.props.texts['research_hri_immersion_exp'])}
-        {/* Emotion */}
-        {createSubhead(this.props.texts['research_hri_emotion_head'])}
-        {createRespImage(HriEmotionImg)}
-        {createSpatialText(this.props.texts['research_hri_emotion_exp'])}
-      </Box>
-    );
-  }
-}
-
-// ------------------------------------- CA ------------------------------------
-export class ContentResearchCa extends React.Component {
-  render() {
-    return (
-      <Box width={1}>
-        {/* Head */}
-        {createHead(this.props.texts['research_ca_head'])}
-        {/* Wheelchair */}
-        {createSubhead(this.props.texts['research_ca_wheelchair_head'])}
-        {createRespVideo(CaWheelchairVid, CaWheelchairImg)}
-        {createSpatialText(this.props.texts['research_ca_wheelchair_exp'])}
-      </Box>
-    );
-  }
-}
-
-// ------------------------------------- AS ------------------------------------
-export class ContentResearchAs extends React.Component {
-  render() {
-    return (
-      <Box width={1}>
-        {/* Head */}
-        {createHead(this.props.texts['research_as_head'])}
-        {/* TEROOS */}
-        {createSubhead(this.props.texts['research_as_teroos_head'])}
-        {createRespVideo(AsTeroosVid, AsTeroosImg)}
-        {createSpatialText(this.props.texts['research_as_teroos_exp'])}
-        {/* PROT */}
-        {createSubhead(this.props.texts['research_as_prot_head'])}
-        {createRespVideo(AsProtVid, AsProtImg)}
-        {createSpatialText(this.props.texts['research_as_prot_exp'])}
-      </Box>
-    );
-  }
-}
-
-// ------------------------------------- CN ------------------------------------
-export class ContentResearchCn extends React.Component {
-  render() {
-    return (
-      <Box width={1}>
-        {/* Head */}
-        {createHead(this.props.texts['research_cn_head'])}
-        {/* Mouse (?) */}
-        {createSubhead(this.props.texts['research_cn_mouse_head'])}
-        {createRespImage(CnMouseImg)}
-        {createSpatialText(this.props.texts['research_cn_mouse_exp'])}
-      </Box>
-    );
-  }
-}
-
 class ResearchSection extends React.Component {
   render() {
     return (