1. Qiita
  2. 投稿
  3. Ruby

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

  • 0
    いいね
  • 0
    コメント

    この記事は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のなかで、headercontentを呼んでいます。

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

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

    最後に

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