Opal製のスライドアプリ「Hyaslide」

この記事はOpal Advent Calendar 2016の4日目の投稿として書いています。

私はOpalでReact-likeなVirtual DOM実装のHyaliteを作っている(このアドベントカレンダーの他の記事を読んでいただけば何度か出てきます)のですが、このgemについてRubyKaigiなどで発表するためにスライドアプリをHyaliteで作ったらインパクトがあるかなと思いHyaslideというスライドアプリをつくりました。
名前はHyaliteでHyaliteのために作ったのでHyaslideという感じで極めて適当に決められました。
自画自賛すると、これが思いのほか良くできたので自分がどこかで発表する機会があれば必ずこのスライドアプリを使っています。

Hyaslideの登場は、RubyKaigi 2015のときでそのときの様子はこのまとめで伺い知ることができます。(そのときのスライドはこちらです)

RubyKaigi 2015以来いくつかの改良が重ねられていまに至ています。
主なものは以下のとおりです。

• gem化して誰でもセットアップして使えるようにしました。
• 一つのスライドアプリで複数のスライドをホストすることができるようになりました。
• スクリプトをつけることができ、スクリプトのページからスライドをコントロールすることができるようになりました。

私の発表の機会があるたびにバージョンアップしている感じですが、自分としては大分つかえるツールになってきた感触がありますので、他のひとにもつかってもらえるとよいなと思っています。

この記事ではHyaslideのつかい方などを解説しようかと思ったのですが、そこはOpalのアドベントカレンダーなのでやはり内部的なことを書くことにします。
(つかいかたなどはREADMEや私のスライドを参考にしてもらうのと、また別の機会に記事を書こうかと思います。)

とはいえしくみを説明するのに最低限の使用法の知識を

• Hyaslide gemはスライドアプリというより、スライドアプリを生成するジェネレータとして働きます。
  • 例: $ hyaslide new slide-app
• スライドはslide.mdというファイルから生成されます。

Hyaslideの動作のしくみについて説明します。

スライドアプリの起動時にslide.mdを読みこんでpages.rbというスライドを表示するプログラムを生成します。
このpages.rbがOpalによってJavaScriptに変換されてWebブラウザ上で動きます。
サンプルのスライドで確認してみましょう。

class Hyaslide::Page0 < Hyaslide::PageBase
def header
  h1(nil, "Title")
end

def content
  [].tap do |children|
      children << p({className:"author"}, "Your Name")
  end
end
end

class Hyaslide::Page1 < Hyaslide::PageBase
def content
  [].tap do |children|
      children << h4(nil, "Press 's' then starting the race of rabbit and turtle.")
  end
end
end

class Hyaslide::Page2 < Hyaslide::PageBase
def header
  h2(nil, "Slide")
end

def content
  [].tap do |children|
      children << ul(nil,
                    li(nil, "Listing"),
                    li(nil, "...")
      )
  end
end
end

Hyaslide.page_count = 3
Hyaslide.title = "Title"

インデントがくずれていますが自動生成なのでご容赦を。

ページ毎にHyaslide::PageBaseを継承するHyaslide::Page#{n}クラスが定義されています。
headerメソッドやcontentメソッドがHyaliteの要素(列)を返すようになっています。

module Hyaslide
  class PageBase
    include Hyalite::Component

    def render
      section({className: "page #{page_class_name}", style: style}, header, content)
    end
  end
end

Hyaslide::PageBasegクラスはHyaliteのコンポーネントでrenderのなかで、headerとcontentを呼んでいます。

スライド本体のプログラムは、hyaslideコマンドで生成された、app/slide.rbになります。説明すると長くなりそうなのでソースを読んでください。

あとはスライドを生成する部分はOpalではないのでやめておきましょう。
config.ruとserver.rbは私がいつもSinatraでOpalを動かすときのパターンで作られているのでてっとり早くOpalのアプリを作りたいひとはどうぞ参考にしてください。

最後に

終りのほうが適当になってしまったのは、今、台湾から日本に帰る帰途で書いているからです。
日付もとっくに変ってしまったので早々にパブリッシュします。