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

今日はOpalで実際にWebアプリケーションを作る方法について書こうかと思います。

まずは公式サイトからRackで動かすチュートリアルがあります。(http://opalrb.org/#getting-started-rack-and-sprockets)

チュートリアルのとおりファイルを作成し

Gemfile

gem 'rack'
gem 'opal-sprockets'

config.ru

require 'opal-sprockets'

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

app/hello_world.js.rb

require 'opal'
require 'native'
$$.alert 'Hello World from Opal!'

サーバーを起動します。

$ bundle install
$ bundle exec rackup

http://localhost:9292へアクセスするとエラーになります。ファイル名が間違っているようです。
app/hello_world.js.rb=>app/application.rbにリネームします。
サーバーを再起動してブラウザをリロードするとアラートが表示されました。

htmlファイルを置きたいときには、index_pathを追加してerbファイルを作ります。
せっかくなのでここではちょっとアレンジしてhamlで書くことにします。

Gemfileにgem 'haml'という行を追加して

config.ru

require 'opal-sprockets'

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

index.haml

!!!
%head
  %title Hello world
%body
  %h1 Hello world
  = javascript_include_tag @server.main

ここまでは6日目のyharaさんの記事でも触れられています。

本格的なWebアプリケーションを作るには、Opalの組込みサーバーだけでは少々役者不足です。
Railsにインテグレーションして使うという方法もありますが、ここではもうすこしライトにSinatraで始める方法を書きます。

opalをsinatraで動かすexampleがリポジトリにありました。=> https://github.com/opal/opal/tree/master/examples/sinatra

exampleに倣ってconfig.ruを書きかえます。

config.ru

require 'opal-sprockets'
require 'sinatra'

opal = Opal::Server.new { |server|
  server.main = 'application'
  server.append_path 'app'
  server.index_path = 'index.haml'
}

sprockets   = opal.sprockets
prefix      = '/assets'
maps_prefix = '/__OPAL_SOURCE_MAPS__'
maps_app    = Opal::SourceMapServer.new(sprockets, maps_prefix)

configure do
  set sprockets: sprockets
  set prefix: prefix
end

map maps_prefix do
  run maps_app
end

map prefix do
  run sprockets
end

get '/' do
  haml :index
end

run Sinatra::Application

configureでindex.hamlの中で参照するための変数をsettingsに入れておきます。

Gemfileにも忘れずにgem 'sinatra'を追加しておきましょう。

index.haml

!!!
%head
  %title Hello world
%body
  %h1 Hello world
  = ::Opal::Sprockets.javascript_include_tag('application', sprockets: settings.sprockets, prefix: settings.prefix, debug: true)

サーバーを再起動してブラウザをリロードしてみましょう。どうでしょうか上手く動きましたか?

最後にまたしても我田引水ですが、hyaliteおよびmeniliteをつかってのWebアプリケーションを作る方法です。

こちらは設定する項目も大分多くなります。そこでsilicaというツールをつかってテンプレートを生成することにします。

$ gem install silica
$ silica new sample-app

sample-appというプロジェクトができました。

$ cd sample-app
$ bundle install
$ bundle exec rackup

http://localhost:9292へアクセスしてみましょう。

Welcome!!!

と表示が出ましたか?
コマンドを実行するだけですぐにWebアプリケーションをつくりはじめることができて便利ですね：P