チュートリアル

必要なもの:

Ruby
Git
Bundler (gem install bundler)

Ruby と Git の導入には Heroku Toolbelt をインストールするのが簡単です (参考: Windows 7でHerokuを始める - 結城浩のはてな日記)。

$ ruby -v
ruby 2.2.3p173 (2015-08-18 revision 51636) [x86_64-darwin14]
$ bundle -v
Bundler version 1.10.6
$ git --version
git version 2.1.3

スタンザ開発用の togostanza gem をインストールします。

$ gem install togostanza
Successfully installed togostanza-2.1.0
28 gem installed

togostanza init でスタンザプロバイダの雛形を生成します。名前は適当で構いません。

$ togostanza init my_provider
      create  my_provider/Gemfile
      create  my_provider/config.ru
      create  my_provider/log/.keep
         run  bundle from "./my_provider"
Fetching gem metadata from https://rubygems.org/...........
Fetching gem metadata from https://rubygems.org/..
Resolving dependencies...
(snip)
Your bundle is complete!
Use `bundle show [gemname]` to see where a bundled gem is installed.
         run  git init . from "./my_provider"
Initialized empty Git repository in /home/ursm/my_provider/.git/
         run  git add -A from "./my_provider"

プロバイダのディレクトリに移動してスタンザの雛形を生成します。

$ cd my_provider
$ togostanza stanza new my_awesome
      create  my_awesome_stanza/Gemfile
      create  my_awesome_stanza/my_awesome_stanza.gemspec
      create  my_awesome_stanza/lib/my_awesome_stanza.rb
      create  my_awesome_stanza/stanza.rb
      create  my_awesome_stanza/template.hbs
      create  my_awesome_stanza/metadata.json
      create  my_awesome_stanza/assets/my_awesome/.keep
      append  Gemfile

stanza.rb でデータのセットアップを行い、そのデータを元に template.hbs テンプレートを使って HTML を生成します。

早速このスタンザを試してみましょう。bundle exec rackup コマンドでサーバを起動します。

$ bundle exec rackup
[2013-10-22 06:21:00] INFO  WEBrick 1.3.1
[2013-10-22 06:21:00] INFO  ruby 2.0.0 (2013-11-22) [x86_64-linux]
[2013-10-22 06:21:00] INFO  WEBrick::HTTPServer#start: pid=9725 port=9292

ブラウザで http://localhost:9292/stanza/my_awesome を開いてください。"hello, world!" と表示されているはずです。

スタンザの中身を見てみましょう。

# my_awesome_stanza/stanza.rb
class MyAwesomeStanza < TogoStanza::Stanza::Base
  property :greeting do
    'hello, world!'
  end
end

property メソッドでテンプレートに引き渡すデータを定義します。ここでは greeting というプロパティに 'hello, world!' という文字列を設定しています。

テンプレートも見てみましょう。

<!DOCTYPE html>
<!-- my_awesome_stanza/template.hbs -->

<html>
  <head>
    <title>My Awesome</title>
    {{#each css_uri}}
    <link rel="stylesheet" href="{{this}}" />
    {{/each}}
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.2.2/bootstrap.min.js"></script>
    {{adjust_iframe_height_script}}
  </head>

  <body>
    <h1>{{greeting}}</h1>
  </body>
</html>

スタンザのテンプレートは Handlebars という言語で書きます。プロパティ名を {{}} で囲むと、そこに値を埋め込むことができます。ここでは h1 要素の中に先ほど定義した greeting プロパティを出力しています。

スタンザにはパラメータを渡すことができます。パラメータは params でアクセスできます。

class MyAwesomeStanza < TogoStanza::Stanza::Base
  property :greeting do
    "hello, #{params[:name]}!"
  end
end

または、ブロック引数にパラメータ名を指定することでアクセスすることもできます。

class MyAwesomeStanza < TogoStanza::Stanza::Base
  property :greeting do |name|
    "hello, #{name}!"
  end
end

もしスタンザサーバを起動したままの場合は Ctrl+C で一度停止して、再度起動してください (bundle exec rackup)。ブラウザで http://127.0.0.1:9292/stanza/my_awesome?name=ursm を表示すると "hello, ursm!" と表示されているはずです。

それではもう少し実用的な例として、指定された gene に関連する feature を RDF ストアから取り出して表示してみましょう。

class MyAwesomeStanza < TogoStanza::Stanza::Base
  property :features do |gene_id|
    query('http://dev.togogenome.org/sparql-test', <<-SPARQL.strip_heredoc)
      PREFIX rdfs: <http://www.w3.org/2000/01/rdf-schema#>
      PREFIX insdc: <http://ddbj.nig.ac.jp/ontologies/nucleotide/>
      SELECT DISTINCT ?feature_product ?feature_gene ?feature_gene_synonym
      WHERE {
        ?s rdfs:label "#{gene_id}" .
        ?s insdc:product ?feature_product .

        OPTIONAL {
          ?s insdc:gene  ?feature_gene .
          ?s insdc:gene_synonym  ?feature_gene_synonym .
        }
      }
    SPARQL
  end
end

query メソッドで SPARQL クエリを発行し、結果を配列として取得することができます。合わせてテンプレートを修正します。

<!DOCTYPE html>

<html>
  <head>
    <title>My Awesome</title>
    {{#each css_uri}}
    <link rel="stylesheet" href="{{this}}" />
    {{/each}}
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.2.2/bootstrap.min.js"></script>
    {{adjust_iframe_height_script}}
  </head>

  <body>
    {{#each features}}
      <dl class="dl-horizontal">
        <dt>Feature Product</dt><dd>{{feature_product}}</dd>
        <dt>Feature Gene</dt><dd>{{feature_gene}}</dd>
        <dt>Feature Gene Synonym</dt><dd>{{feature_gene_synonym}}</dd>
      </dl>
    {{/each}}
  </body>
</html>

{{#each <name>}}...{{/each}} で、指定した配列の各要素に対して繰り返すことができます。

http://localhost:9292/stanza/my_awesome?gene_id=sll1098 にアクセスして表示を確認してみてください。

最後に、ここまでの作業をリポジトリにコミットしましょう。お疲れ様でした。

$ git add .
$ git commit -m 'Create my first stanza'
[master (root-commit) 2f9edb4] Create my first stanza
 12 files changed, 221 insertions(+)
 create mode 100644 Gemfile
 create mode 100644 Gemfile.lock
 create mode 100644 config.ru
 create mode 100644 log/.keep
 create mode 100644 log/development.log
 create mode 100644 my_awesome_stanza/Gemfile
 create mode 100644 my_awesome_stanza/assets/.keep
 create mode 100644 my_awesome_stanza/metadata.json
 create mode 100644 my_awesome_stanza/lib/my_awesome_stanza.rb
 create mode 100644 my_awesome_stanza/my_awesome_stanza.gemspec
 create mode 100644 my_awesome_stanza/stanza.rb
 create mode 100644 my_awesome_stanza/template.hbs

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

チュートリアル

Clone this wiki locally