reveal.js & Google Spread Sheets からスライド形式ウェブサイトを簡単に作る方法 #GoogleSpreadSheet

（現在とりま投稿状態）
元々の題名「reveal.js & Google Spread Sheets でサーベイを簡単にかっこよくまとめる方法」
はじめはこんな題名だったのですが，サーベイ以外にもいろいろなスプレッドシートデータに適応できると思ったので，改題しました．

Github pagesを使って無料でネットに公開するところまで書いているので，最後まで読んでくれるとありがたいです．

↓先にモノを見せてくれよって人向け↓
こういうサイトが作れるようになります

スプレッドシートにまとめた論文サーベイをかっこよくまとめてたい！

これから研究論文をもっと読むことになって，いまスプレッドシートにまとめているものをどうせならかっこよくまとめられたらなと思っていたところ，Reveal.jsに出会いました．

簡単にReveal.jsとGoogle Spread Sheetsをつなげて，簡単に格好良くまとめる方法を見つけたので紹介します．

なにを目標にするか

先端技術とメディア表現1 #FTMA15 from Yoichi Ochiai

分野によって，どういう風に論文を読むかは全く異なるかと思います．僕も研究内容に合わせてポイントを絞って読みます．

例えば，Face Detection系の研究をしていて，それにまつわる論文を読んでたら，Average Precision, 使用したデータセット，手法・工夫などがポイントになります．

ML応用系で例えば，スポーツの怪我予防だったら，まず何になぜ着目したのかから気になります．

まぁ，なので，誰もが一度は試してみる，我が筑波大の落合先生方式でまとめることを目標としましょう．

Points

先行研究と比べてどこがすごい？
キモはどこ？
どんなもの？
どうやって有効だと検証した？
議論はある？
次に読むべき論文は？

Reveal.js

Reveal.jsとはHTMLでスライドが作れちゃうパッケージです．

Reveal.js の使い方

参考にできるqiita記事

reveal.jsでスライド作り。

こちらが優しそうですね．インストールの参考にしてください．一応，手順こちらです．

ステップ 1. Node.jsをインストールする (9.0.0以降)．

ステップ 2. reveal.jsリポジトリをクローンする．

cmd

$ git clone https://github.com/hakimel/reveal.js.git

ステップ 3. reveal.jsディレクトリに移動する．

cmd

$ cd reveal.js

ステップ 4.　Dependenciesをインストールする．

cmd

$ npm install

ステップ 4. サーバーを起動させ，ファイルの変化をモニタリングする．

cmd

$ npm start

ステップ 5. http://localhost:8000 を開いてプレゼンを見る

Tabletop.js

Tabletop.jsとは簡単にGoogle Spread Sheetsからjsonデータを作成してくれます．

Tabletop.js easily integrates Google Spreadsheets with templating systems and anything else that is hip and cool. It will also help you make new friends and play jazz piano.

あまり有名ではないのでしょうか？githubでは3.4kのスターがついていますが，Qiitaでは"TableTop.js"で検索しても関係ありそうな記事はありませんでした．

Tabletop.jsの使い方

公式リポジトリのreadme.mdそのままですが，

ステップ１. Google Spread Sheetsでスプレッドシートを作り，ウェブに公開する．

Google Spread Sheetsに行って新しいスプレッドシートを作る．１行目に列名，２行目以降はデータを適当に記入していく．
「ファイル」＞「ウェブに公開」を押して，ウェブに公開する．
URLを取得する．下記画像のURL(https://docs.google.com/spreadsheets/d/1MdaTjLmT4ZAb1WtbLEIHoXof8Tn37x8Q7rCSYEGjNB4/edit#gid=0) でOK！

ステップ２．コードエディタを開いてコードを書き込む．

index.htmlに以下のスクリプトをコピペする．

index.html

<script src='https://cdnjs.cloudflare.com/ajax/libs/tabletop.js/1.5.1/tabletop.min.js'></script>
<script type='text/javascript'>    
  var publicSpreadsheetUrl = 'https://docs.google.com/spreadsheets/d/1sbyMINQHPsJctjAtMW0lCfLrcpMqoGMOJj6AN-sNQrc/pubhtml';

  function init() {
    Tabletop.init( { key: publicSpreadsheetUrl,
                     callback: showInfo,
                     simpleSheet: true } )
  }

  function showInfo(data, tabletop) {
    alert('Successfully processed!')
    console.log(data);
  }

  window.addEventListener('DOMContentLoaded', init)
</script>

ページをロードして

アラートが表示される
consoleにデータがログされている

ことを確認して，大丈夫そうだったら設定完了．

Reveal.js & Tabletop.jsを組み合わせる

クローンしたReveal.jsのリポジトリのindex.htmlに正しくTabletop.jsをコピペできていたら，とりあえずこんな画面がでてくるかと思います．

コンソールをみるかぎり，正しくGoogle SpreadSheets からデータを読み込めているようですね．

スライドにデータをぶち込む！

一番簡単な方法は下記の画像のように，先程コピペしたTabletop.jsのコードをいじって，行ごとにスライドを作ることじゃないですかね．
（ウェブ系強くないので，もっと良いやり方はたくさんあると思います．）

おっとー，ミスが見つかったので，修正したコードをAtomScott/reveal-spreadsheetsから拾ってください．

スプレッドシートの列名を日本語にしてしまったので，コードに日本語が入って気持ちが悪いですが，これで簡単に論文の題名を表示することができました．このコードを参考にstr+=""の中身を増やして，著者名や画像などを加えて行きたい人はどうぞ開発をしてみてください！

Github Repos

Master branch - スタイリングなどを加えたリポになります．こちらはこのウェブページに出ているものと同じはずです．
Level-one branch - 題名だけ出るようにしたシンプルなリポ．

クローンして，npmの設定などしてnpm startで走るはず！

refs

こちらの記事にインスピを受けました．
https://hackernoon.com/data-driven-presentations-b97a16caadf4