Talkie.jsを使ってオシャンティスライドに挑戦!

  • 19
    Like
  • 0
    Comment
More than 1 year has passed since last update.

こんにちは。音楽と服と美少女をこよなく愛する陽気な関西人supermannerです。
本日はdots girls Advent Calendar 2015の8日目を書かせていただきます、よろしくお願い致します!

Talkie.jsとは?

さて、本日の表題にもなっているTalkie.jsですが一体どのようなものなのでしょうか。
皆さんは普段発表用のスライドを作るときに何をつかっておられますか?
パワーポイント?Key note??いやーアプリケーション起動するのめちゃめちゃめんどくさいですよね!!
あの独特のGUIも綺麗に作るのには一苦労...デザイナーみたいなスキルないお...
普段のMarkDown形式をそのまま転用できたらどれだけ楽か...

そんなあなたに朗報です!!このTalkie.jsですが
簡単に言いますと
「mdやHTML形式ででさらりとおしゃれなスライドを作成することができる!」
素晴らしいライブラリです!

私は普段主にサーバーサイドのプログラムを書くことが多いので、フロントエンドに関してはまだまだ修行中の身なのですが、
先日こちらの勉強会に参加した際、Talkie.jsで発表資料を作ることが流行っていた模様でした。
さすが、流行に敏感なフロントエンド業界!
私も見習って乗るしかないこのBIG WAVEに!!!ということで早速どのようなことができるか、さくっと見て行きたいと思います!

Talkie.jsをさわってみる

公式ページにもありますが、このライブラリは

  • ES6
  • bacon.js

でつくられたライブラリです。
https://github.com/ahomu/Talkie
※開発者はこちらの方!http://havelog.ayumusato.com/

npmに公開されているようなので早速インストール!

$ npm install talkiejs
$ open node_modules/talkiejs/index.html

キタ━━━━(゚∀゚)━━━━!!
使用するのに必要なコードはすでにdistに吐き出してくれた状態でinstallすることが出来ます。
それでは、私が以前投稿したQiitaののコードを使い、使える機能を紹介していきたいと思います。
http://qiita.com/supermanner/items/77200b0d00f1b1a352a2

成果物

codeモードがうまく貼り付けられなかったのでこちらを参照でお願いします。
https://gist.github.com/supermanner/5faaeaa7351e2285a8f5

talkie関連のファイルのパスはお好きにな場所でお願いします。
わたしはチュートリアル参照しながら作成していたので、
めんどくさいのでnode_modulesからcurrentにシンボリックリンク貼りました!

レイアウトモード

必要な使い方は基本的に, 先ほどopenしたファイルで説明してくださっています。
よく使うものは下記ではないでしょうか。
- cover
- bullets
- title
- code
ほかにもinvertをつけると白黒反転してくれたりとこのへんのcssを見ると全貌がわかります。
https://github.com/ahomu/Talkie/tree/master/src/theme

背景

レイアウトとはちょっと違いますが背景画像を当てることも出来ます
背景画像の明るさと、ボケ具合をパラメータに当てられます。

slide.html
<script layout="" type="text/x-markdown" backface="path/to/image" backface-filter="blur(10px) brightness(.8)">
</script>

記法

いいなと思ったのが

  • HTML
  • MarkDown

の両方が使えるという点です。特殊な装飾をcssなどで作った場合, HTMLもつかえるのがいいですね!

カスタマイズいろいろ

キーバインドの変更

紹介スライドの末尾で、talkieのオブジェクトに対して、様々なカスタムをすることが出来ます。
私は生粋のvimキーバインダーなので、今回はnextにlを、prevにhをあてています。

talkie.next.plug(talkie.control.keydown('l'));
talkie.prev.plug(talkie.control.keydown('h'));

画像アス比の変更

これはREADME.mdにもあるように、画像のアス比を4:3 or 16:9で切り替えられます

はまったところ

スライドを作るにあたって何も考えずにつくっていたらハマった点が2点だけあったので。

その1:インデントしているときちんと形式表示されない

ついついいつものコードを書くときの癖で最後にデーンとオートインデントを走らせてしまいました。
が、コレは罠です。

sample.html
<body>
    <template layout="cover" type="text/x-markdown">
        # Vagrant上で対話形式のものをinstallする
        ## @supermanner
    </template>
</body>

これだと、もろもろのスタイルを読んでくれません。

その2:DOCTYPEをかいていた

宣言を
sample.html
<!DOCTYPE html>

コレでかいていると表示が左寄りになります。windowサイズに応じてへんけいしてくれません。

両方ともきちんとsrc以下を読めば気づけたのかもしれませんね。。。。。

最後に

さて、おしゃれにスライドが作れるTalkie.js、いかがだったでしょうか?
コレを読んでひとりでも、興味を持ってスライドをTalkieで作ってくださる方がいれば嬉しいです!

フロントエンドの世界ではセンスあふれるスライドがたくさん転がっているそうです。
さすがみなさんCSSとJSの魔術師だけあります...!
私もフロントエンドかなり興味あるので、頑張って諸先輩方についていきたいです!

宣伝ですが、こちらのLT大会でアイスブレークのパートを担当します!笑
アイスブレークなんで技術の話はあまりしません笑
ですが、他の方はTipsをたくさんはなしてくださるはず!
http://eventdots.jp/event/575187

この時のスライドはTalkieで作っていこうかなって思ってます!
もしよければ聞きに来てくださいね!

さて、あしたはhiromiozawaaさんです!
dots女子部についての記事を書いてくれるそうなのでお楽しみに!

This post is the No.8 article of dots girls Advent Calendar 2015