Fire.app 紹介

Fire.app は、ウェブサイト作成支援 GUI ツールです。 Sass と Compass は勿論、 CoffeeScript 、 Haml 、 Slim 、 ERB 、 Markdown も使えられます。インストールは必要ない、 Windows / Mac OS / Linux 全てに対応しています。

更に、 Fire.app を使用すればいろんな素敵な機能も使えられます。例えパーシャル、レイアウト、テンプレートヘルパーなど、ウェブサイト作成時の繰り返し作業から解放します。

基本操作と Sass/Compass

基本操作と Sass/Compass の部分は、 Compass.app と似てますので、ここを参考してください： http://compass.handlino.com/doc/getting_started_with_compassapp-jp.html

CoffeeScript

Fire.app は CoffeeScript をサポートしています、使い方は簡単です：

プロジェクトフォルダの中に、 coffeescripts/ フォルダを作成してください。
coffeescripts/ フォルダの中に、coffeescriptファイルを入れて、例え app.js.coffee 。
テンプレートやページファイルの中に <script src="/javascripts/app.js"></script> を書ければ app.js.coffee の出力結果が得れます。

もしフォルダネーム javascripts を変更したいなら、 config.rb 中の javascripts_dir を編集してください。

ビルド

Fire.app で作ったプロジェクトは、ビルドして静的サイト（static site）を作成することができます。Fire.app アイコンをクリックして、 "Build Project" を選んで、自動的にプロジェクトフォルダの中に静的サイトを込めた "build_YYYYMMDDHHmmSS" フォルダを作成します。

デフォルトでは、 image-url() に関連する Compass helper を使う場合は、作成されるCSSは絶対パスになります。相対パスに変更したい場合は、 config.rb の中に

relative_assets = true

と入力してください。

注意！ config.rb 更新後は必ず "Stop Watching …" をクリックしてから、再度このプロジェクトを "Watch" し直すと、新しい設定が利用できます。

テンプレート

Fire.app はいろんなテンプレート言語を提供しています：

ERB
http://ruby-doc.org/stdlib-1.9.3/libdoc/erb/rdoc/ERB.html
Markdown (Kramdown)
http://kramdown.rubyforge.org/
Slim
http://slim-lang.com/
Haml
http://haml.info/
Liquid
http://liquidmarkup.org/

テンプレート言語を使用すれば　HTML 開発はシンプルになります。でも、もし Fire.app 全ての機能が使いたいなら、 ERB と Haml をお勧めです。 HTML に詳しい方にとって、二つとも簡単に理解出来ます。 Ruby 言語も使えられますので、HTML 中の重複部分を避けられます。例えばこんな HTML：

<h1>sample list</h1>
<ul>
  <li>list 1</li>
  <li>list 2</li>
  <li>list 3</li>
  <li>list 4</li>
  <li>list 5</li>
</ul>

ERB で書くと、こんな感じになります：

<h1>sample list</h1>
<ul>
  <% (1..5).each do |n| %>
  <li>list <%= n %></li>
  <% end %>
</ul>

Haml で書いたらこんな感じになります：

%h1 sample list
%ul
  - (1..5).each do |n|
    %li="list "+n.to_s

Fire.app を使用すればテンプレート言語を使うのは簡単です。ファイル名にテンプレート言語の拡張子を付けば出来ます。例え ERB を使う時は .html.erb 、 Haml の時は .html.haml です。例えばプロジェクトフォルダの中に test.html.erb を入れると、プロジェクトが Watch している状態でブラウザに http://127.0.0.1:24681/test.html 入力して、 test.html.erb 実際の完成画面が見えます。

以下、全ての例は ERB で書きます。 ERB と Haml の詳細については、下記のリンクを参照して下さい：

ERB:

http://www.rubylife.jp/rails/template/index5.html（日本語）
http://www.treefrogframework.org/ja/%E3%83%89%E3%82%AD%E3%83%A5%E3%83%A1%E3%83%B3%E3%83%88/%E3%83%93%E3%83%A5%E3%83%BC/erb（日本語）
http://www.stuartellis.eu/articles/erb/（英語）

Haml:

http://fukuyama.co/haml2（日本語）
http://haml.info/（英語）

レイアウト

ウェブサイトの各ページは、多少同じ HTML があります。そのまま HTML で作ると、毎ページにヘッダ、メニューとかの部分をペーストが必要ですし、こんな部分を編集する時も沢山ファイルが修正しなければなりません、一つ外すと大変です。こんな時レイアウトを使用すれば共通 HTML を集められていて、個別ページのコンテンツは <%= yield %> の所で生成します。例え：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Site Title</title>
    <link href="/stylesheets/style.css" rel="stylesheet">
</head>
<body>
    <div class="container">
        <div class="header"></div>
        <%= yield %>
        <div class="footer"></div>
    </div>
</body>
</html>

レイアウトの使い方は２つです：

フォルダの中にレイアウトファイルを入れます。
特定のレイアウトファイルを指定します。

フォルダの中にレイアウトファイルを入れます

ERB と Haml ファイルは自動的に同じフォルダや親フォルダ中の _layout.html.erb や _layout.html.haml をレイアウトファイルにとって使用します。ファイルネームの頭文字の_は、「このファイルは単一ページではありません」の意味です、ビルド時はページファイルを作成しません。もしカレントフォルダと親フォルダ二つともレイアウトファイルがあったら、カレントフォルダのを使います。

特定のレイアウトファイルを指定します

もし、ある特別ページはデフォルトレイアウトと合わないなら、専用のレイアウトを指定できます。例えばページ contact.html.erb は専用のレイアウト /special_layouts/_special_layout.html.erb を使用したい時は、ページファイルネーム相応の contact.html.layout を作ります。内容は：

special_layouts/_special_layout.html.erb

そして contact.html.erb は /special_layouts/_special_layout.html.erb をレイアウトとして使います。

パーシャル

ウェブサイトページの間またはレイアウトの間にも同じパーツがあるかもしれません、例えサイドバー、広告なと。パーシャルはこんなコンテンツを単一ファイルで保存して、簡単にメンテナンスと再利用出来ます。パーシャルのファイルネームはレイアウトファイルと同じ、アンダースコア（_）の頭文字があります。例え： _footer.html.erb や _footer.html.haml 。パーシャルを使用する時は、 render ステートメントを使えば出来ます。例え：<%= render :partial => "footer" %>

詳しい使用例は以下です：

まずは、メインメニューのパーシャルを作ります、ファイルネームは _main_menu.html.erb ：

<ul id="main_menu">
  <li class="about"><a href="#">About</a></li>
  <li class="products"><a href="#">Products</a></li>
  <li class="contact"><a href="#">Contact</a></li>   
</ul>

こんな内容の_layout.html.erbを同じフォルダに入れて：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Site Title</title>
    <link href="/stylesheets/style.css" rel="stylesheet">
</head>
<body>
    <div class="container">
        <div class="header">
            <%= render :partial => "main_menu" %>
        </div>
        <%= yield %>
        <div class="footer"></div>
    </div>
</body>
</html>

注意： render ステートメントの引用符中のファイルネームはアンダースコアと拡張子もいらない。

そしてこのレイアウトを使用したページの <%= yield %> 部分の前にはメインメニューを生成します。

テンプレートヘルパー

テンプレートヘルパーは、HTML作業をシンプルになるため、テンプレート中で使えられるメソッドです。 Fire.app は沢山ビルトーインテンプレートヘルパーを提供していて、自作ヘルパーもできます。

コンテンツヘルパー

コンテンツヘルパーは、コンテンツ作成の繰り返し作業を解消します。

capture(&block)

出力結果を変数に格納。

例：

<% @today = capture do %>
  Today is
  <%= Time.now.to_date %>
<% end %>

使う時は：

<%= @today %>

content_for(symbol, &block)

レイアウトに複数のコンテンツを設定。

例：

<% content_for :special_block do %>
  <h2>Our boss says</h2>
  <p>Blah blah blah blah blah…</p>
<% end %>

使う時は：

<%= yield :special_block %>

content_for?(symbol)

content_for ブロックが存在するか確認します。

前の例を続きます、もし :special_block が設定しないページはデフォルトリンクを表示したい時：

<% if content_for?(:special_block) %>
  <%= yield :special_block %>
<% else %>
  <a href="#">Special Discount!!!</a>
<% end %>

タグヘルパー

タグヘルパーは、ビューテンプレート内の html "タグ" を作成します。

link_to(name, href, …)

リンクを生成。

<%= link_to("twitter", "http://twitter.com", :id => "twitter") %>
# => <a id="twitter" href="http://twitter.com">twitter</a>

mail_to(email_address, …)

メールアドレスへのリンクを生成。

<%= mail_to("[email protected]", "example mail address") %>
# => <a href="mailto:[email protected]">example mail address</a>

content_tag(name, content, …)

本体を持つ任意のタグを生成。

<%= content_tag(:p, "OOPS!", :class => "strong") %>
# => <p class="strong">OOPS!</p>

ネストもできます：

<%= content_tag(:div, content_tag(:p, "OOPS!"), :class => "strong", :id => "oops") %>

出力結果は：

<div id="oops" class="strong">
  <p>OOPS!</p>
</div>

tag(name, …)

本体を持たない任意のタグを生成。

<%= tag("br") %>
# => <br />

image_tag(src, …)

イメージタグを生成。

<%= image_tag("test.jpg") %>
# => <img src="test.jpg" />

javascript_tag(…)

Javascript タグを生成。

<%= javascript_tag "alert('OOPS')" %>

出力結果は：

<script type="text/javascript">
//<![CDATA[
alert('OOPS')
//]]>
</script>

javascript_include_tag(*sources)

JavaScriptをインクルード。

<%= javascript_include_tag "main" %>
# => <script src="/javascripts/main.js" type="text/javascript"></script>

stylesheet_link_tag(*sources)

外部スタイルシートを指定するリンクタグを生成。

<%= stylesheet_link_tag "main" %>
# => <link href="/stylesheets/main.css" media="screen" rel="stylesheet" type="text/css" />

エスケープヘルパー

エスケープが必要なタグやフォーマットを処理します。

html_escape(string) 文字列 string を HTML 用にエスケープした文字列を返します。 alias: h
json_escape(string) 文字列 string を JSON 用にエスケープした文字列を返します。 alias: j

ダミーテキストヘルパー

Fire.app は Frank と Middleman の影響を受けて、ダミーテキストヘルパーも提供しています。

lorem_word                    　　　　# 1 文字を返す
lorem_words(argument)         　　　　# 括弧中指定数量の文字を返す
lorem_sentence
lorem_sentences(argument)
lorem_paragraph
lorem_paragraphs(argument)
lorem_date                    　　　　# "ddd mmm dd, yyyy"
lorem_date("%Y/%m/%d", 2011..2013) 　# 2011~2013間の日付を "yyyy/mm/dd" で返す
lorem_date.to_date            　　　　# "yyyy-mm-dd"
lorem_name
lorem_first_name
lorem_last_name
lorem_image("WIDTHxHEIGHT")         # ダミーイメージの urlを返す

lorem_image("WIDTHxHEIGHT") は http://placehold.it/ を利用して、ダミーイメージを作成します。よく　image_tag と一緒に使用します。

<%= image_tag(lorem_image("300x400")) %>
# => <img src="http://placehold.it/300x400" />

または HTML img タグで使用します：

<img src="<%= lorem_image("300x400") %>" />
# => <img src="http://placehold.it/300x400" />

カスタム定義ヘルパー

Serve と Middleman の影響を受けて、 Fire.app も自作ヘルパーを追加ことができます。プロジェクトフォルダの中に view_helpers.rb を加えて、ヘルパーを書いたら使えられます。フォーマットはこんな感じです：

module ViewHelpers
  def helper_name(arg1, arg2, ....)
      return "something"
  end
end

例えば、仮メニューのヘルパーを作ります。 view_helpers.rb の内容は：

module ViewHelpers
  def lorem_menu(num)
    @list = ""
    (1..num).map do |list|
      @list += content_tag(:li, link_to(lorem_word, '#'));
    end
    return '<ul class="menu">'+@list+'</ul>'
  end
end

そして <%= lorem_menu(3) %> を使って、仮メニューができます：

<ul class="menu">
    <li><a href="#">adipisci</a></li>
    <li><a href="#">dolor</a></li>
    <li><a href="#">eum</a></li>
</ul>

Fire.app

中文文件 (Chinese version)

日本語ドキュメント (Japanese version)

Fire.app-紹介

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Fire.app 紹介

Fire.app 紹介

基本操作と Sass/Compass

CoffeeScript

ビルド

テンプレート

レイアウト

フォルダの中にレイアウトファイルを入れます

特定のレイアウトファイルを指定します

パーシャル

テンプレートヘルパー

コンテンツヘルパー

タグヘルパー

エスケープヘルパー

ダミーテキストヘルパー

カスタム定義ヘルパー

Fire.app

中文文件 (Chinese version)

日本語ドキュメント (Japanese version)

Clone this wiki locally