copy_people copy_things copy_matter copy_heart copy_txt ttl_topics ico_blank ico_facebook ico_twitter ico_hatebu ico_index

2018/09/11

スプレッドシートをtableに表示したい

INDEX

    こんにちは。tsubouchiです。
    今回は、はじめてVue.jsに触れたことを。
    スプレッドシートをJSON出力してVue.jsで表示します。

    経緯

    弊社では、ページ数が多いサイトを構築する時にスプレッドシートでページ一覧を管理することがあります。
    また、ページ一覧をhtmlにも表示してお客さまとのやりとりに使っています。

    実はこれまで、html版も手作業でtableタグを組んでいました。
    これをスプレッドシートと一緒に一括管理にしたい。

    「せっかくだからVue.jsにしなよ」の鶴の一声でVue.jsでつくりました。

    流れとしては
    1.スプレッドシートをJSON形式で出力する
    2.Vue.jsでhtmlに表示する
    です。

    1.スプレッドシートをJSON形式で出力する

    実は、ここまでは鶴・・・okoshiさんが紹介してくださいました。
    こちらの記事を参考に、スプレッドシートとGoogle App Scriptを作成します。

    2.Vue.jsでhtmlに表示する

    (1)スクリプト読み込み

    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    

    axiosはVue.jsでjsonを読み込む時に使います。

    (2)json読み込み

    公式を参照します。

    new Vue({
      el: '#app',
      data () {
        return {
          info: null
        }
      },
      mounted () {
        axios
          .get('https://script.google.com/macros/s/AKfycbxBzb-mvxcuUgH19ILr76vZUm577Ka-ouTwSvkWq_f3D5ta2Mk/exec')
          .then(response => {
            this.info = response.data
          })
      }
    })
    
    <div id="app">{{info}}</div>
    

    スプレッドシートが↓だったとして、

    出力結果はこちら。

    あとはこれをループにして取り出します。
    if文きったりしたものがこちら。

    <!DOCTYPE HTML>
    <html lang="ja">
    
    <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <meta name="viewport" content="width=device-width">
    
    <title>サンプル</title>
    
    <style>
    table {
        width: 100%;
        max-width: 100%;
        border-collapse: collapse;
        border-bottom: 1px solid #ccc;
        border-left: 1px solid #ccc;
        border-right: 1px solid #ccc;
    }
    
    table th,
    table td {
        border-top: 1px solid #ccc;
        border-right: 1px solid #ccc;
    }
    
    table td.id {
        width: 4rem;
    }
    
    table td.title {
        width: 20rem;
    }
    
    table td.title.lvl2 {
        padding-left: 2rem;
    }
    table td.title.lvl3 {
        padding-left: 4rem;
    }
    
    table td.design,
    table td.test {
        width: 8rem;
    }
    </style>
    </head>
    
    
    
    <body>
    
    <div id="app">
    <table>
        <thead>
            <tr>
                <th>ID</th>
                <th>タイトル</th>
                <th>デザイン</th>
                <th>テストアップ</th>
                <th>備考</th>
            </tr>
        </thead>
        <tbody>
            <template v-for="item in info">
                <tr>
                    <td class="id">{{item.id}}</td>
                    <td class="title lvl1" v-if="item.title_lv1">{{item.title_lv1}}</td>
                    <td class="title lvl2" v-if="item.title_lv2">{{item.title_lv2}}</td>
                    <td class="title lvl3" v-if="item.title_lv3">{{item.title_lv3}}</td>
                    <td class="design">
                        <a :href="item.design_url" target="_blank" v-if="item.design_date">{{item.design_date | moment }}</a>
                    </td>
                    <td class="test">
                        <a :href="item.test_url" target="_blank" v-if="item.test_date">{{item.test_date | moment }}</a>
                    </td>
                    <td class="note">{{item.assigned_c}}</td>
                </tr>
            </template>
        </tbody>
    </table>
    </div>
    
    
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.1/moment.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.1/moment-with-locales.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment-timezone/0.5.21/moment-timezone.min.js"></script>
    
    <script type="text/javascript">
    new Vue({
        el: '#app',
        data () {
            return {
                info: null
            }
        },
        mounted () {
            axios
                .get('https://script.google.com/macros/s/AKfycbxY7rSv8Mw3qRoZQRdaZ_3GPyc1JKClkz1rIcZt9Y6rjQGyRrY/exec')
                .then(response => {
                    response.data.shift();//スプレッドシートの1行目は日本語の列名だから除く
                    this.info = response.data
                })
        },
        filters: {//日付をフォーマットする
            moment: function (date) {
                return  moment(date).format('M/D');
            }
        }
    })
    </script>
    
    </body>
    </html>
    

    参考

    CONTACT

    お仕事のご相談や、弊社についてのご質問や
    ご要望など、お気軽にお問い合わせください。

    View