みんなで物語をつくりながら連想力を鍛えてアイデア発想力を磨こう

アイデア発想力とは？

アイデアとは、情報と情報の掛け合わせであると言われています。
その掛け合わせるために必要な力が、連想力です。

例えば、情報Aと情報Bの関連性を発見したり、情報Aと情報Bをベースにホップ・ステップ・ジャンプで飛躍してみたりするような連想によって、新しいアイデアを生み出していきます。

なので、アイデアを生み出す力を磨くには、連想力を磨くことが大事です。

じゃあ、どうやると磨いていけるのか？

言葉遊びゲーム「空文字アワー」とは？

その１つの方法が、言葉遊びゲーム「空文字アワー」です。

このゲームは、ある一文から連想した情報を文に追加することで、
新たな物語をつくっていきます。

まあやってみるとわかると思うので、
詳細はこちらをご覧いただき、
ぜひ最新の文に情報を追加してみてください。

使った技術

・nuxt.js
・Vue.js
・FirebaseのCloud Firestore

実装の仕方

今回は、初めてnuxt.jsってやつを使いました。
正直使いこなすには程遠いですが、それでも、nuxt.js、Vue.js、Cloud Firestoreを使い、独自ドメインでNetlifyで公開まで持っていけたのは進歩です。

nuxt.jsの流れ

yarn create nuxt-app [任意のプロジェクト名]

今回のUI frameworkは、

UI framework: Bulma

を使用。

ひとまず形ができたら、

$ yarn dev

をして、ローカルサーバーからサイトが閲覧できるようにしながら、
pagesやComponentsの中のファイルを作りました。

で、それができたら、

$ yarn generate

する。

これによって、distファイルができるので、そのファイルごとNetlifyに取り込むと、すぐにWEBアプリが公開できました。

独自ドメインでの公開の流れ

まずは無料で独自ドメインを取得します。色々無料で取得する方法があるようですが、今回はfreenomで取得しました。

freenomで取得する際の流れはこちらを参照しました。

ドメインを取得できたら、My domainのURLや情報をNetlifyの方に入力すると、少し時間はかかかるものの、わあしはすぐににWEBが独自ドメインで公開できます。

nuxt.jsのpages

index.vue

<template>
  <div class="container">
    <div>
      <Logo />
      <h1 class="title">
        【言葉ゲーム】空文字アワー
        <p>～ないものつなぎ～</p>
      </h1>
      <div class = "content-explain">
        <p>ある簡単な文に（　）があります。ここに「言葉」を入れ、さらに（　）を加えます。
          次の人も同じことをする。これを全員で繰り返していくゲームです。
          「空文字アワー」は、どんどんつないで変化を起こすのが醍醐味です。
          最終的にどんなストーリーができあがるかは、みなさんのセンス次第。</p>
      </div>
      <div class = "content-explain">
        <h2>進め方</h2>
        <ol>
          <li>最初の一文と（　）を提示します。</li>
          <li>次に答える人が（　）に言葉を加え、自分の言葉を加えた（　）を外します。</li>
          <li>さらに（　）を好きな位置に加えます。これを期間内繰り返します。</li> 
        </ol> 
      </div>

      <div class = "content-explain2">
        <h2>ルール</h2>
        <ol>
          <li>連続して同じ人が答えることはできません。</li>
          <li>連続しない限り、期間中何度でも回答できます。</li>
          <li>手前の全ての回答をコピペして残してください。</li> 
          <li>元の文を修正することはできません。</li>
          <li>文意が伝わるように展開していきましょう。</li> 
        </ol> 
      </div>

      <div class = "content-explain2">
        <h2>例はこちら</h2>
        <p>【Hiro】東京では（　）雨が降っていた。</p>
        <p>【お名前】（　）東京では季節はずれの雨が降っていた。</p>
        <p>【お名前】高層ビルの立ち並ぶ東京では季節はずれの雨が（　）降っていた。</p>
        <p>【お名前】高層ビルの立ち並ぶ東京では季節はずれの雨がしとしとと降っていた（　）。</p>
        <p>【お名前】高層ビルの立ち並ぶ東京で（　）は季節はずれの雨がしとしとと降っていたのを見て昨年のことを思い出した。</p> 
      </div>

      <div class = "content-explain2">
        <h2>今回のテーマ：桃太郎</h2>
        <img src = "../image01.jpg">
        <client-only placeholder="Loading...">
              <Memo />
        </client-only> 
      </div>
      <div class = "footer">
        
      </div>

    </div>
  </div>
</template>

<script>
export default {}
</script>

<style>
h2{
  font-size:30px;
}

.container {
  margin: 0 auto;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.content-explain{
  margin: 40 auto;
  height: 150px;
}

.content-explain2{
  margin: 40 auto;
  height: 200px;
}

.title {
  font-family:
    'Quicksand',
    'Source Sans Pro',
    -apple-system,
    BlinkMacSystemFont,
    'Segoe UI',
    Roboto,
    'Helvetica Neue',
    Arial,
    sans-serif;
  display: block;
  font-weight: 300;
  font-size: 50px;
  color: #35495e;
  letter-spacing: 1px;
}

.subtitle {
  font-weight: 300;
  font-size: 42px;
  color: #526488;
  word-spacing: 5px;
  padding-bottom: 15px;
}

.links {
  padding-top: 15px;
}

.footer{
  height: 200px;
}
</style>

memo.vue

<template>
    <div>
        ★★★つくられた物語★★★
        <!-- {{allData}} -->
        <ul v-for="data in allData" :key="data.id" class="menu-list" >
            <li>
                {{data.name}} / {{data.answer}}
            </li>
        </ul>

         <p>
            <input v-model="name" placeholder="名前">
            <input v-model="answer" placeholder="回答">
            <button v-on:click='post'>送信</button>
        </p>
    </div>
</template>

<script>
    import firebase from "firebase/app";
    import "firebase/firestore";

    export default {
        components: {},

        data(){
            return{
                db: {},
                allData: [],
                name: '',
                answer: 'ここに回答',
            }
        },

        methods: {
            init: () => {
                const config = {
                    apiKey: "AIzaSyBvouEQqs3Cqz_F-re7SCW-FLvPuISQsnc",
                    authDomain: "protoout-2359e.firebaseapp.com",
                    databaseURL: "https://protoout-2359e.firebaseio.com",
                    projectId: "protoout-2359e",
                    storageBucket: "protoout-2359e.appspot.com",
                    messagingSenderId: "1085072592944",
                    appId: "1:1085072592944:web:30da6171b08c3734979df5",
                    measurementId: "G-T3FMEWMY87"
            };

            // Initialize Firebase
            firebase.initializeApp(config);
            },

            post: function(){
                const testId = firebase.firestore().collection('memos').doc().id; //ユニークなIDを生成
                const docRef = firebase.firestore().collection('memos').doc(testId);
                const setAda = docRef.set({
                name: this.name,
                answer: this.answer
            });
            this.get();
            },

            get: function(){
                this.allData = [];
                firebase.firestore().collection('memos').get().then(snapshot => {
                    snapshot.forEach(doc => {
                    // console.log(doc);
                    this.allData.push(doc.data());
                })
            });

            }

        },

        mounted(){
            this.init();
            this.get();
        },
    }
</script>

<style>

</style>