管理画面用 gem yukiusagi の作り方

はじめに

新しい技術にチャレンジし続けるeishisのアドベントカレンダーDay13です！

昨日はNetlifyとは？ 〜概要から導入まで〜についての記事でした。

Netlifyとは？ 〜概要から導入まで〜

今日は開発中の管理画面用のCSSを適用する gem yukiusagi の作り方をお伝えします！
「gemの作り方」の項目は管理画面用gemに限らず、gemを作る時の共通の流れになります。

yukiusagi のGithubリポジトリ

gemの作り方

gem をコマンドで生成！

それでは gem を作っていきましょう。
gemの雛形はコマンドで作成することができます

$ bundle gem { gemの名前 }

オプションの -tをつけるとrspecによるテストも作成されます。

gemspecの編集

コマンドで生成された雛形ですが、そのままではrails アプリにインストールしようとしてもエラーになってしまいます；

{ gemの名前 }.gemspecというファイルがリポジトリ直下にあります。
最低限以下の部分を編集します。

  spec.authors       = ["yuh harata"]
  spec.email         = ["foo@bar.com"]

  spec.summary       = %q{Write a short summary, because RubyGems requires one.}
  spec.description   = %q{TODO: Write a longer description or delete this line.}
  spec.homepage      = "TODO: Put your gem's website or public repo URL here."

authors

gemの作者名

email

作者のメールアドレス

summary

gemの説明を簡単に書く

description

summary より詳しい gem の説明。なければこの行を削除してもOK

homepage

gem のホームページ もしくは githubのURL

これで最低限の編集は終わりです。
その他必要に応じて add_dependency（依存するgem）などを追加してください。

開発中のgemをrailsアプリにインストール

ここまでくるとrailsアプリにインストールすることができるようになります。
以下のようにパスを指定するとローカルのgemをインストールすることができます。

gemfile

gem 'yukiusagi', :path => '/Users/name/projects/yukiusagi'

ジェネレーターを作成する

テンプレートファイル index.html.erb を指定されたディレクトリにコピーするジェネレーターを作成してみます。

テンプレートファイルを準備

index.html.erb を用意。
今回は app/views/yukiusagi ディレクトリに置きました。

ジェネレーターを作成

app/lib/generators/yukiusagi/index_generator.rb

module Yukiusagi
  module Generators
    class IndexGenerator < Rails::Generators::Base
      source_root File.expand_path('../../../app/views/yukiusagi/', __dir__)

      argument :directory, type: :string

      def copy_views
        copy_file "index.html.erb", "app/views/#{dir_name}/index.html.erb"
      end

      private

      def dir_name
        directory.downcase
      end

    end
  end
end

ジェネレーターをテスト

以下のコマンドでジェネレーターの一覧が表示されます

$ rails g -h

結果

    ...

TestUnit:
  test_unit:generator
  test_unit:plugin

Uploader:
  uploader

Yukiusagi:
  yukiusagi:index

ジェネレーターを実行してみます。

$ rails g yukiusagi:index admin/users

これで views/admin/users にテンプレートファイルがコピーされます！

CSSをrailsアプリケーションに適用する

CSSを用意

app/assets/stylesheets にCSSファイルを置く。（.scssでもOK）
今回は yukiusagi.scss

Sassのload_pathを追加する

app/lib/yukiusagi.rb に以下を追加

module Yukiusagi
  Sass.load_paths << File.expand_path("../app/assets/stylesheets", __FILE__)
end

RailsアプリでgemのCSSを読み込む

application.scss

@import 'yukiusagi';

これでyukiusagiのCSSが適用されます！

まとめ

以上が管理画面用 gem yukiusagi の作り方です。
gemに共通する部分もあるので、参考にしてみてください！

yukiusagiについて

yukiusagi は 国産の おせっかいじゃない 管理画面用gemを目指し実際に開発中のgemです。
今後ジェネレーターの機能の充実や javascript追加を予定しています！

弊社デザイナーが作成したとてもかわいい管理画面なので、ぜひお試しください！
yukiusagi のGithubリポジトリ

管理画面イメージ　注）開発中のため実際とは異なる場合があります。ご了承ください