LoginSignup
0

More than 5 years have passed since last update.

Opalのgemをつくる

Posted at

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

またまた遅れてしまいました…

当初、「JavaScriptのライブラリをOpalから利用できるようなラッパーをつくってみましょう。」という予告をしておいたのですが、そのまえにOpalからつかえるgemをつくるほうが先な気がしたので、今日は「Opalのgemをつくる」ということをします。

まずは、通常のgemをつくるように、

$ bundle gem opal-audio

これか作るgemはOpalからWeb Audioを使うgemなので、opal-audioという名前にします。

http://opalrb.org/docs/guides/v0.10.3/configuring_gems.html
このへんを参考にgemを作成していきます。

Opalのgemでは、

  1. 通常のOpalのコンパイルの対象となる.rbファイル
  2. サーバーサイドでgemとして扱われるブートストラップコード

を用意する必要があります。
Opalの多くのgemでは、この2種類のファイル群をopalディレクトリとlibディレクトリに分ける方法と、libディレクトリに入れて、Opalの中で呼ばれているコードかそうでないか(サーバーサイド)で分岐する方法とがあるようです。
チュートリアルにはディレクトリを分けずに、RUBY_VERSIONで分岐するようになっているのでそちらの例でやります。

ブートストラップ

ブートストラップというか、サーバーからOpalのコードが読めるように、append_pathするコードを置きます。

lib/opal/audio.rb

require "opal/audio/version"
require "opal"

Opal.append_path File.expand_path('..', __FILE__)

Opalのコードを書く

Opal側ではrequire_relativeでロードするファイルを指定します。
今回はExampleというファイルをロードすることにしましょう。

require_relative "audio/example"

先ほどのブートストラップのコードとRUBY_ENGINEという定数を見て分岐させます。

lib/opal/audio.rb

if RUBY_ENGINE == 'opal'
  require_relative 'audio/example'
else
  require "opal/audio/version"
  require "opal"

  Opal.append_path File.expand_path('..', __FILE__)
end

サンプルコードは以下のようなものを使います。

lib/opal/audio/example.rb

require 'native'

module Opal
  module Audio
    class Example
      def alert
        $$.alert('Hello Opal-audio')
      end
    end
  end
end

gemを使うサンプル

このgemを使うサンプルをつくましょう。examplesディレクトリを作って、8日目のサンプルに倣って以下のようなファイルを作りましょう。

Gemfile

gem 'rack'
gem 'opal-sprockets'
gem 'opal-audio', path: '..'

config.ru

require 'opal-sprockets'

Opal.use_gem 'opal-audio'

run Opal::Server.new { |server|
  server.main = 'application'
  server.append_path 'app'
}

app/application.rb

require 'opal'
require 'opal/audio'

Opal::Audio::Example.new.alert
$ bundle install
$ bundle exex rackup

http://localhost:9292を開くとアラートは表示されましたでしょうか?

次回は満を持して、Web Audioラッパーのgemを作りましょう。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0