男女比はカレーと福神漬けと同じくらい

マサカリよろしくお願いします。

Slackにアップしたスライドをいい感じに見れるやつ作った

これは呉高専 Advent Calendar 2018の23日目の記事です。

先日、kosen12sというコミュニティで発表した内容をつらつらと書いていきます。
スライドはこちら ↓

speakerdeck.com

なぜ作ったのか

自分が所属している研究室では毎週交代で最近読んだ論文をスライドにまとめて発表し合うイベントがあります。
とても良いイベントなのですが、現状として作ったスライドが共有されず「他の人が作ったスライドを見返せない」「自分が紹介するときに紹介済みの論文を載せていないか心配」という問題がありした。

以下のような脳内議論が行われた結果、、、


案1 : Slackにアップロードするよう声かけをすればよさそう?

Pros

  • Slackは研究室でよく使ってるのでアップロードは楽で良い

Cons

  • スライドを見返すのに使うのは難しい、整頓されていてほしい
  • スライドアップ時にキーワードも同時にpostすれば検索できるかもしれないけどSlackの検索のUXあんまり良くない(個人的感想)
  • 無料枠で使っているのでファイル容量を超えると古いファイルは削除されてしまう

案2 : speaker deck, slideshareにアップするよう声かけすればよさそう?

Pros

  • スライドが見やすく、検索しやすい
  • publicに公開するので自分のポートフォリオページとして活用できる

Cons

  • そこまで真面目にスライドを作り込んでないので心理的ハードルが高い
  • ページ開いてわざわざアップロードするのは面倒

 

Slackの特定のチャンネルにスライドをアップロードしたらシュッとweb上で公開されるランニングコスト0のツールがあればいいのでは?と思ったので作りました。

作ったもの

webページ(サンプル) → https://teppei-slides.netlify.com/

主な機能

  • アップロードしたスライドが一覧できる
  • スライドがキーワード検索できる
    • Slackでアップしたpdfのスレッドに書き込んでもらうことによりキーワードを設定
  • ユーザーのアイコンをクリックするとユーザーごとのスライドが見られる

リポジトリ

github.com

github.com

ざっくりとバックエンド、フロントエンドはこんな感じのツールで構成されています。

f:id:euglena1215:20181223154729p:plain

バックエンド

  1. GASがSlackの特定のチャンネルに新しいスライドがアップされていないか定期的に見に行く
  2. 新しいスライドがアップされていた場合、Google Driveにスライドを保存し直してスライド情報をスプレッドシートに保存する
    (Driveに保存し直しているのはSlackのファイル容量対策)
  3. GASがシートの内容をAPIとして公開する

フロントエンド

  1. GatsbyJSを使ってReactでページを作り、↑で作成したAPIを叩いて情報を取得し静的サイトを生成する
  2. netlifyを使ってwebページをホスティング

これら一連のフローで使っているツールは全て無料です。ほんといい時代ですよね。

GAS, GatsbyJS, netlifyなどのツールの説明はここでは割愛します。 スライドではめちゃくちゃ雑に紹介してるので初耳な人は↑のスライドを見てみてください。

がんばったところ

PDFの表紙画像の取得

表示画像の取得はスライド共有ツールを作るときに悩む問題で、この記事だとpdftocairoを使っています。

今回は無料の範囲という制約があるためGASで完結できるよう色々調べていると、 Slackはpdfをアップロードすると表紙の画像も取得できることを発見しました。

f:id:euglena1215:20181223191210p:plain

今回はこの機能を利用して表紙画像を取得しました。

余談ですが、Slackは画像をアップロードすると数種類のリサイズした画像も返してくれます。Slackは画像のリサイズ用マイクロサービスとしてとても優秀です。

react-pdf-js で日本語が表示されない

PDF.jsをReactで使いやすくするためにwrapしてくれているreact-pdf-jsを使ってスライドの表示をしていたのですが、日本語が表示されないという致命的問題がありました。

原因としてはフォント情報が入っているcmapファイルのpathがPDF.jsにちゃんと届いてないという、PDF.jsを使った開発をしているときによく発生するあるある問題でした。

github.com

なのでreact-pdf-jsにPRを投げて修正しました。

研究室での普及活動

いくら頑張ってツールを作っても、作りっぱなしだと普及しないのは今までの経験から分かっていることなので

  • 使い方スライドを作ってアップロードする
  • 論文紹介の担当者にアップロードしてもらえるようDMで根回しをする

といった普及活動をしています。

まだ論文紹介の担当が1周していないのでもう少し普及活動は続けていく必要があるかなと思ってます。

 


 

こんな感じのツールがランニングコスト0&だいたい3日間くらいでできたのでほんといい時代だなと思いましたまる。