Edited at

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


初めに

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ってライブラリを使うらしいけど軽く調べた程度じゃよくわからなかったので今回はこれで終わり。

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