Help us understand the problem. What is going on with this article?

簡単なデザイン実装gemを作る

More than 1 year has passed since last update.

初めに

ruby on railsでbootstrapを使ってデザインを整えることがある

そのさいいつも適当にコピペして作っていたのでgemで最初に簡単なbootstrapデザインを実装出来たらよいのではないかということで作ってみる

ちなみに

今回はとりあえず動けばよいということで機能は後々追加していくことにする

gemパッケージ作成

とりあえずgemパッケージを作成するには

pach.rb
gem install bundler
bundle gem gemname -b

でとりあえずファイルが作られる

gemspec編集

このあとgemspecを編集する

最初はこんな感じになっている

gemspec.rb
lib = File.expand_path("../lib", __FILE__)
$LOAD_PATH.unshift(lib) unless $LOAD_PATH.include?(lib)
require "gemname/version"

Gem::Specification.new do |spec|
  spec.name          = "gemname"
  spec.version       = Gemname::VERSION
  spec.authors       = ["sibakenY"]
  spec.email         = ["sibakoro.919@gmail.com"]

  spec.summary       = %q{TODO: 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."

  # Prevent pushing this gem to RubyGems.org. To allow pushes either set the 'allowed_push_host'
  # to allow pushing to a single host or delete this section to allow pushing to any host.
  if spec.respond_to?(:metadata)
    spec.metadata["allowed_push_host"] = "TODO: Set to 'http://mygemserver.com'"

    spec.metadata["homepage_uri"] = spec.homepage
    spec.metadata["source_code_uri"] = "TODO: Put your gem's public repo URL here."
    spec.metadata["changelog_uri"] = "TODO: Put your gem's CHANGELOG.md URL here."
  else
    raise "RubyGems 2.0 or newer is required to protect against " \
      "public gem pushes."
  end

  # Specify which files should be added to the gem when it is released.
  # The `git ls-files -z` loads the files in the RubyGem that have been added into git.
  spec.files         = Dir.chdir(File.expand_path('..', __FILE__)) do
    `git ls-files -z`.split("\x0").reject { |f| f.match(%r{^(test|spec|features)/}) }
  end
  spec.bindir        = "exe"
  spec.executables   = spec.files.grep(%r{^exe/}) { |f| File.basename(f) }
  spec.require_paths = ["lib"]

  spec.add_development_dependency "bundler", "~> 1.17"
  spec.add_development_dependency "rake", "~> 10.0"
end

これのTODOって書いてあるところは編集しておかないとエラーが出てしまう。

とりあえず適当に編集してそのあとlibのなかにある***.rbってファイルにいろいろ書く

とりあえず今回はapp/views/layoutsのapplication.html.erbを編集してbootstrapでそこそこきれいに見えるようheaderとfooterを追加して<%= yield %>のところを.containerでくくりたいと思う。

完成したコードがこんな感じ

b_format.rb
require "b_format/version"
require 'boot_format_erb.rb'

module BFormat
  class Error < StandardError; end


  def self.bformat
    @directory_all = []
    Dir.chdir 'app/views' do
        @directory_all << Dir.glob("*")
    end 
    @directory_all.flatten!
    @directory_all.each do |name|
        if name == "layouts"
            Dir.chdir 'app/views/layouts'
            File.open '_header.html.erb', "w" do |file|
                file.write APPLICATION_HTML_BOOT_HEADER
            end 
            File.open '_footer.html.erb', "w" do |file|
                file.write APPLICATION_HTML_BOOT_FOOTER
            end 
            File.open 'application.html.erb', "r" do |file|
                @data = file.read
                @data.gsub!("<%= yield %>", APPLICATION_HTML_BOOT_BODY)  
            end 
            File.open 'application.html.erb', "w" do |file|
                file.write @data 
            end 
        end 
    end 
  end 



end

@directory_allはviewsの中にあるディレクトリを入れるもので後々の機能としてlayouts以外のものにもいろいろ手を加えるようにしたいから作った。
今回は用なし…

Dir.chdir 'app/views/layouts'

で現在のディレクトリをlayoutsにして、そこから

File.open '_header.html.erb', "w" do |file|
    file.write APPLICATION_HTML_BOOT_HEADER
end 
File.open '_footer.html.erb', "w" do |file|
    file.write APPLICATION_HTML_BOOT_FOOTER
end 
File.open 'application.html.erb', "r" do |file|
    @data = file.read
    @data.gsub!("<%= yield %>", APPLICATION_HTML_BOOT_BODY)  
end 
File.open 'application.html.erb', "w" do |file|
    file.write @data 
end 

これでファイルを開いてAPPLICATION_HTML_BOOT_HEADERとかをファイルに書き込んでいます。

パーシャルを使うことにしたので

_header.html.erb と _footer.html.erbというファイルを作ってそこにテンプレートを書き込む感じ

application.html.erbに関しては<%= yield %>と書かれてい場所を書き換えて保存しています。

APPLICATION_HTML_BOOT_HEADER,FOOTER,BODYのそれぞれのコードはboot_format_erb.rbという別のファイルに保存してそれを

require 'boot_format_erb.rb'

として読み込んでいます

boot_format_erb.rbはこんな感じ

boot_format_erb.rb
APPLICATION_HTML_BOOT_BODY = <<EOS
<%= render partial: '_header.html.erb' %>
<% if flash[:notice] %>
  <div class="alert alert-success">
    <%= flash[:notice] %>
  </div>
<% end %>
<div class="container min-height">
  <%= yield %>
</div>
<%= render partial: "_footer.html.erb" %>
EOS

APPLICATION_HTML_BOOT_HEADER = <<EOS
<nav class="navbar navbar-default navbar-static-top">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Your Site Title !</a>
    </div>
    <div id="navbar" class="navbar-collapse collapse">
      <ul class="nav navbar-nav">
        <li><a href="#">Home</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <% unless session[:user_id] %>
          <li><a href="#">Log in</a></li>
          <li><a href="#">Create Account</a></li>
        <% else %>
          <li><a href="#">MyPage</a></li>
          <li><%= link_to "Logout", "#"%></li>
        <% end %>
      </ul>
    </div><!--/.nav-collapse -->
  </div>
</nav>
EOS

APPLICATION_HTML_BOOT_FOOTER = <<EOS
<footer class="footer">
  <div class="container">
    <p class="text-muted">Your Site Title</p>
  </div>
</footer>
EOS

gemをリリース

gemをリリースするには

rake release

とコマンドを打てばよいのですがその前にすることがあります。

まず
https://rubygems.org/
ここにアクセスしてアカウントを作ります。

そのあとログインしマイページ的なところに書いてあるEdit profileをクリックします。

下に

curl -u sibakenY https://rubygems.org/api/v1/api_key.yaml > ~/.gem/credentials; chmod 0600 ~/.gem/credentials

こんな感じのコマンドが出ます。

sibakenYはアカウント名です。

windowsの場合うまくいかない

windowsの場合さっきのコマンドがうまくできません。(少なくとも自分の場合は…)

なので今回はこのコマンドだけはWSLを使ってubuntuからコマンドを打ちました。

rake release

rake releaseするときにgit commitをしていないと

rake aborted!
There are files that need to be committed first.

こんな感じで怒られると思うのでcommitしてからrake releaseする

最後に

あとはgem install gemnameでインストールできる。

だけど問題点があってどうやってコマンドでメソッドを実行させるのかわからない…

とりあえず動作確認に

gem.rb
require 'b_format'

BFormat.bformat 

というファイルをルートディレクトリに作ってこれを実行する感じにして動作確認をしましたがやはりコマンドで実行したりしたい。

thor

rubyでコマンドラインを作るならthorってライブラリを使うらしいけど軽く調べた程度じゃよくわからなかったので今回はこれで終わり。

また今度調べて実装していきたい

sibakenY
大学卒業後Ruby, Ruby on Railsを勉強しています。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away