Magick Pen

Magick Penは、Railsプロジェクトに組み込んで利用できるGemのプラグインです。テンプレートファイル(.erbファイル)の任意の部分を <vue-magick-pen> 〜 </vue-magick-pen> で囲むだけで、Webページから直接変更ができるようになります。

また、変更内容を履歴管理していますので、過去の内容に戻すことも簡単です。

Installation

あなたのRailsプロジェクトの Gemfiie に magick_penを追加します。

gem 'magick_pen'

bundleを更新して、Magick Penのインストールとmaigrationを以下の手順で実行します。

$ bundle
$ rails g magick_pen:install --with-migrate

準備

ここでは、Rails Sprocketsを使ってアセットコンパイルして利用する方法を説明します。

app/assets/stylesheets/application.css

nodeモジュールからmagick penのcssを読み込みます。

/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 
 *= require "vue-magick-pen/dist/vue-magick-pen"  
 */

app/assets/javascripts/application.js

nodeモジュールからvue.jsと magick penのVueコンポーネントを読み込みます。

/*

//= require vue/dist/vue
//= require vue-magick-pen/dist/vue-magick-pen.umd

*/

app/views/layouts/application.html.erb

  <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
  <%= javascript_include_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>

layouts/application.html.erb から application.jsと application.cssを読み込めば準備は完了です。

ページを作成する

app/views/xxxxx/index.html.erb

任意のコントローラー、アクションを作成し、テンプレートファイルをマークアップします。

<div id="magick-pen">
    <h1>Title</h1>
    <div>
        <magick-pen pen-key="snippet-1">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
            Mauris pellentesque malesuada convallis.
            Quisque condimentum ac odio ut congue. Integer ultrices a erat sed hendrerit.
        </magick-pen>
    </div>

    <div>
        <magick-pen pen-key="snippet-2">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
            Mauris pellentesque malesuada convallis.
            Quisque condimentum ac odio ut congue. Integer ultrices a erat sed hendrerit.
        </magick-pen>
    </div>
</div>

<%= render partial: 'magick_pen/load', locals: { editable: true } %>

マークアップのルールは以下の通りです。

id="magick-pen" で囲った部分が有効になります。この範囲内であれば、何か所でも Magick Pen を埋め込めます。
Magick Penを埋め込みたい部分を <vue-magick-pen> 〜 </vue-magick-pen> で囲みます。
この時、キーとなる文字列を pen-key属性に設定して下さい。
pen-key は (コントローラー名＋アクション名) のスコープでユニークとなるようにして下さい。別コントローラー、別アクションであれば、同じpen-keyでも別物として扱われます。
ページフッターやサイドバーなどサイト全体で共通に扱いたい部分にMagick Penを埋め込みたい場合は、pen-keyにプレフィックス 'g-' を付けて下さい (例：g-snippet-1)。
ファイルの最後に <%= render partial: 'magick_pen/load', locals: { editable: true } %> を記述します。
editableが falseであれば、何もなかったように普通にページが表示されます。trueであれば編集可能になります。ユーザー権限などに応じてeditableの値をコントロールして下さい。
id="magick-pen" の値を変更したい場合は、'magick_pen/load' の locals に、elementを渡すことができます。

<div id="page">
    <!- your markup -->
</div>
<%= render partial: 'magick_pen/load', locals: { editable: true, element: '#page" } %>

Magick Penは多言語対応になっていますので、ボタン名に日本語が表示されない場合は、config/application.rbに以下の設定をします。

  class Application < Rails::Application
    :
    :    
    I18n.available_locales = %i(ja en)
    I18n.enforce_available_locales = true
    I18n.default_locale = :ja
  end

デザインの適用

FontAwesome 5 を導入することをお奨めします。FontAwesomeが利用できる環境であればそのままボタン等にアイコンが表示されます。

Bootstrap 4 、または、Bulma を採用している場合は、各CSSフレームワークのデザインに準じて表示されます。独自デザインを適用する場合はCSSの調整が必要になります。

デザインを修正するには、app/magick_pen/config.rb を適宜変更をして下さい。config.rbには、 Magick Pen内で使用するボタンのクラス名やラベル名、アイコンのクラス名が定義されています。

module MagickPen
  class Config
    def self.default
      {
          date_format: "YYYY/MM/DD HH:mm",
          select: {
              class: "magick-pen-select",
              label: {
                  version: I18n.t('magick_pen.version'),
                  original: I18n.t('magick_pen.original'),
                  current: I18n.t('magick_pen.current'),
              }
          },
          buttons: {
              # Button Class - compatible with Bootstrap and  Bulma)
              # Icon Class - compatible with Fontawesome 5
              edit: {
                  class: "btn btn-primary btn-sm button is-primary is-small",
                  icon: "fas fa-edit",
                  label: I18n.t('magick_pen.buttons.edit')
              },
              update: {
                  class: "btn btn-primary btn-sm button is-primary is-small",
                  icon: "fas fa-upload",
                  label:I18n.t('magick_pen.buttons.update')
              },
              cancel: {
                  class: "btn btn-secondary btn-sm button is-light is-small",
                  icon: "fas fa-times",
                  label: I18n.t('magick_pen.buttons.cancel')
              },
              preview: {
                  class: "btn btn-primary btn-sm button is-primary is-small",
                  icon: "fas fa-eye",
                  label: I18n.t('magick_pen.buttons.preview')
              }
          }
      }
    end
  end
end

サンプルプロジェクト

こちらにサンプルのRailsプロジェクトがあります。

動作環境

Ruby 2.6 〜 3.0
Rails 6.0 / 6.1

License

The gem is available as open source under the terms of the MIT License.

magick_pen

Runtime