LoginSignup
1

More than 5 years have passed since last update.

OpalでWebアプリケーションをつくろう

Last updated at Posted at 2018-12-24

この記事は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

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
1