joppot

コピペで絶対動く。説明を妥協しない

プログラミング

Rails pluginでengineを使ったgemの作り方[5](view helper編)

投稿日:

Pocket

Gem

概要

みなさんこんにちはcandleです。今回はgemのview helperの作り方です。
helperというのは様はgemにすることで便利になる関数を作るとというイメージです。

よくあるのが、こんな感じのviewヘルパーですね。

<%= render_user_info() %>

これらはlib/helperで作れます。


前提

このシリーズは以下の記事からの続きです。gemの初期化などは前の記事で紹介しています。
Rails pluginを使ったgemの作り方[1](基本設定編)
Rails pluginを使ったgemの作り方[2](rails組み込み編)
Rails pluginを使ったgemの作り方[3](vendor/assets 読み込み編)
Rails pluginを使ったgemの作り方[4](controller helper編)


view helperを作成する

前回も説明したのですが、厳密にはヘルパーにはcontrollerヘルパー、viewヘルパーの違いはありませんが、ここでは明示的にviewヘルパーと呼びます。
一般にviewヘルパーを作成する時は以下の場所に配置します。

lib/gem名/view_helper.rb

ヘルパーのファイル名はなんでも良いのですが、分かり易いようにview_helper.rbにしました。

このシリーズを通して読んでいる方は以下の場所にヘルパーを作成すれば良いでしょう。

lib/good_item/view_helper.rb

viewhelptouch

そしたら、作成したview_helper.rbを開きます。

一般にviewヘルパーは以下の様にして記述します。

module gem名
  module 作成したヘルパーファイル名
    def 関数名
    end
    ……
    …
  end
end

「gem名」はキャメルケイスで記述します。
「作成したヘルパーファイル名」はキャメルケイスで記述します。今回の場合ですと「ViewHelper」になりますね。
「関数名」はなんでもいいです。

サンプルの場合は以下の様になります。

module GoodItem
  module ViewHelper
    def render_class(value)

    end
  end
end

modulegoodre

続いて、render_class関数を作って行きます。この関数がviewの中で使える関数になります。
今回は、view上であたえられた変数のクラスを表示するという、関数を作ってみましょう(実用性はないけどね)。

def render_class(value)
  class_name = value.class
  render partial: 'good_item/show_class', locals: { class_name: class_name  }
end

definerenderclass

valueを受け取り、classだけを取得して、gemの中のviewにあるパーシャルに変数を投げます。

view helperの1つのパターンとしては値を受け取って、編集して、パーシャルに投げて、整形して表示する事でしょう。

これでヘルパーは完成です。


パーシャルを作成する

viewヘルパーはその結果をviewに表示するので、表示する為のパーシャルを作成します。

パーシャルは一般に以下の場所に作成します。

app/views/gem名/パシャールファイル

今回の場合ですと、以下の様にします。

app/views/good_item/_show_class.html.erb

中身は簡単にrender_class関数から投げられた変数を表示するだけにします。

<p><%= class_name %></p>

easyclassname

パーシャルの完成です。

view helperの設定

helperは作成しただけではrailsアプリケーションの中で使う事はできません。
予めgemの中でhelperを使うという設定をする必要があります。
どうやら、この事はgem界では普通らしいのですが、railsはなにかと自動的にあれこれやってくれるので、どこまで自動なのか分かりにくいですよね。

設定は以下の場所にあるengine.rbを編集します。

lib/gem名/engine.rb

今回の場合ですと

lib/good_item/engine.rb

になります。
engine.rbを開いて、
以下を記述します。

require 'good_item/view_helper'
module GoodItem
  class Engine < ::Rails::Engine
    isolate_namespace GoodItem
    initializer 'good_item.action_view_helpers' do
      ActiveSupport.on_load :action_view do
        include GoodItem::ViewHelper
      end
    end
  end
end

require ‘good_item/view_helper’
はlibの中にある作成したヘルパーview_helper.rbを呼び込んでいます。

isolate_namespace GoodItem
はあっても無くても問題無いっぽいです。

initializer ‘good_item.action_view_helpers’ do
は一般に「gem名.action_view_helpers」で記述します。

ActiveSupport.on_load :action_view do
は多分、viewで使う何かだということを表しています。

include GoodItem::ViewHelper
は「gem名::ヘルパー名」です。キャメルケイスの記法で記述します。

renderfienginesetting

これで、gemの設定が終わりました。

railsアプリケーションで使ってみる

それでは作成したgemをインストールしている、適当なrailsアプリケーションを起動します。
私のrailsアプリケーションにはposts_controllerがあり、そのindexアクションで使ってみます。
indexアクションのviewに以下を記述します。

<% number = 1 %>
<%= render_class(number)  %>

renderclassisgood

これをブラウザで見てみると、
クラスが表示されていますね。
showfixnum


まとめ

このようにしてviewヘルパーが作れます。本番環境も考慮したビューヘルパーの作成は難しいと思いますが、デバッグ用やテスト用のビューはわりと簡単につくれます。あったらいいなというgemを作ってみるとよいでしょう。

スポンサードリンク

「為になったなぁ」と思ったら、シェアお願いします。

-プログラミング
-,

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

ruby on railsのgemのインストールで不要なファイルをインストールしない設定

概要 みなさんこんにちはcandleです。私の記事はどうしても先人のプログラマーがまとめた内容を追試しているような感じになっていますが、これも重要なことなので、忘れないためにもまとめておきます。 ru …

react0.14 + gulp + express + babelでReactのチュートリアル環境構築をする

概要 みなさんこんにちはcandleです。今回は、react0.14のnodeの環境構築をします。 react0.14はまだまだ、開発段階にあり、しばしば仕様変更が行われています。 0.13の時では使 …

railsのscaffoldでremote formで送信後jsonを取得する

概要 みなさんこんにちはcandleです。 今回はrailsのformをremoteを使ってajaxした時に、 サーバに送った値をjavascript側で受け取る方法を紹介します。 ちなみに、私は下の …

Mysqlのdatetime型とtimestanp型で保存されているデータを年月日だけを指定して任意の日にちのデータを取得する方法

概要 みなさんこんにちはcandleです。今日はmysqlのdatetime型とtimestanp型におさめられているデータの取得を紹介します。 datetimeやtimestanpは多くの場合下のよ …

Rails pluginを使ったgemの作り方[4](controller helper編)

概要 みなさんこんにちはcandleです。今回はgemの中枢とも言えるhelperの作り方です。 helperというのは様はgemにすることで便利になる関数を作るとというイメージです。 例えば、con …

  • English
  • 日本語

プロフィール


ベンチャー企業のCTOをやってます。大学時代にプログラミングを始め、javaから入門し、C++へて、PHPへと進み、会社ではRailsを使用。自動化が大好きなプログラマー

スポンサードリンク

アーカイブ