2018年12月13日

プログラミング

管理画面用 gem yukiusagi の作り方

目次

  1. はじめに
  2. gemの作り方
  3. ジェネレーターを作成する
  4. CSSをrailsアプリケーションに適用する
  5. まとめ

はじめに

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

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

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

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

yukiusagi のGithubリポジトリ

今回使用する環境

  • Bundler: 1.17.1

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 ディレクトリに置きました。

ジェネレーターを作成

POINT!!

– source_root はテンプレートファイルの相対パス
– argument を指定すると引数を受け取ることができるようになり、directory が値を返すメソッドになる
– ファイル内のメソッドが上から順に実行される
– ジェネレーターのファイル名は必ず xxx_generator.rb にする

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リポジトリ

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

スクリーンショット 2018-12-10 12.52.45.png (349.5 kB)

0

0

AUTHOR

はらた

はらた エンジニア

サーバーサイドエンジニア Ruby on Railsを使った開発を行なっています

アプリでもっと便利に!気になる記事をチェック!

記事のお気に入り登録やランキングが表示される昨日に対応!毎日の情報収集や調べ物にもっと身近なメディアになりました。

eishisでは一緒に働く仲間を募集しています

正社員や業務委託、アルバイトやインターンなど雇用形態にこだわらず、
ベテランの方から業界未経験の方まで様々なかたのお力をお借りしたいと考えております。

話を聞いてみたい

運営メンバー

eishis

Eishi Saito 総務

SIerやスタートアップ、フリーランスを経て2016年11月にeishis, Inc.を設立。 マーケター・ディレクター・エンジニアなど何でも屋。 COBOLからReactまで色んなことやります。

sasakki デザイナー

アメリカの大学を卒業後、日本、シンガポールでデザイナーとして活動。

しまだ デザイナー

WebAR/VRのデザインと3DCG制作がメインです。 肩書きは「アニメ案件に関わりたいデザイナー」。

Miu マーケター

ドイツでWEBマーケティングしています。

しんのき エンジニア

新しい技術が好きなWebエンジニアです。 元々インフラやPHPをやっていたのですが、最近はReact NativeとFirebaseを使って頑張ってます。

yamakawa

やまかわたかし デザイナー

フロントエンドデザイナー。デザイン・HTML/CSSマークアップ・JSアニメーション実装を担当しています。

furuya エンジニア

サーバーサイド、フロントエンド、Unityと色々手を出してる雑食系エンジニア。ReactNativeが最近のマイブーム。

Sayaka Osanai デザイナー

Sketchだいすきプロダクトデザイナー。シンプルだけどちょっとかわいいデザインが得意。 好きな食べものは生ハムとお寿司とカレーです。

はらた

はらた エンジニア

サーバーサイドエンジニア Ruby on Railsを使った開発を行なっています

うえまつゆい エンジニア

サーバーサイドエンジニアからフロントエンドエンジニアになりました。主にReact Nativeでのアプリ開発をしています。

CONTACT PAGE TOP