スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
総合案内当ブログについて
Windowsの目次Linuxの目次Linuxの目次2・ ・自作PC関連の目次Web技術関連の目次
全記事一覧情報サイト新着RSS一覧

Sponsored Link

最新Mikutter3.1で始めるておくれ最新Ruby(rbenv on LMDE 2回目)

以前にこんな記事を書きましたが(Mikutterで始めるておくれ最新Ruby(rbenv on LMDE))、rbenvとrubyとbundleとgemの関係はさっぱり理解できないまま使ってました。

しかし、最近mikutterは3.1系がリリースされ始め、これが動かない!!
というわけでrbenvとbundleとgemの何がなんだかな部分を色々調べながら何とか動かしてみることにします。

1.当方環境
ひとまずうちの環境はLMDEx64、標準の(aptで入る)rubyは1.9.3、rbenvは0.4.0。~.bashrcに

export PATH="$HOME/.rbenv/bin:$PATH"
eval "$(rbenv init -)"


を追記してrbenvで入れたruby2.1.2を標準に。

$ ruby -v
ruby 2.1.2p95 (2014-05-08 revision 45877) [x86_64-linux]



2.MikutterをDLしていつものように動かすと・・・
mikutterの下の方に3.1系のRCがあります。そもそも4年以上も安定版がなかったというのにいまさらRCもクソもないと思うのですが、作者は神様なので気にしたらいけません。肩書がなんだろうとリリースされたらとりあえずDLして動かすためになんやかんややるのがMikuttererの心得です。
というわけでDLして回答、いつものようにmikutterディレクトリに移動してruby mikutter.rbしてみます。

$ cd mikutter
$ ruby mikutter.rb
Could not find gem 'gettext (~> 3.0.1) ruby' in the gems available on this machine.
Run `bundle install` to install missing gems.
(以下略


エラーですね。今回gettextで出てますが、初回起動はglibだったような気もします。

言われるがままにとりあえずbundle install を走らせます。

$ bundle install
Fetching gem metadata from https://rubygems.org/.......
Resolving dependencies...
Using rake 10.3.2
Using addressable 2.3.6
Using pkg-config 1.1.5

Gem::Installer::ExtensionBuildError: ERROR: Failed to build gem native extension.

/usr/bin/ruby1.9.1 extconf.rb
/usr/lib/ruby/1.9.1/rubygems/custom_require.rb:36:in `require': cannot load such file -- mkmf (LoadError)
from /usr/lib/ruby/1.9.1/rubygems/custom_require.rb:36:in `require'
from /tmp/bundler20141026-14037-rda90x/glib2-2.2.0/gems/glib2-2.2.0/lib/mkmf-gnome2.rb:13:in ``<top (required)>''
from /usr/lib/ruby/1.9.1/rubygems/custom_require.rb:36:in `require'
from /usr/lib/ruby/1.9.1/rubygems/custom_require.rb:36:in `require'
from extconf.rb:15:in `<main>'

Gem files will remain installed in /tmp/bundler20141026-14037-rda90x/glib2-2.2.0/gems/glib2-2.2.0 for inspection.
Results logged to /tmp/bundler20141026-14037-rda90x/glib2-2.2.0/gems/glib2-2.2.0/ext/glib2/gem_make.out
An error occurred while installing glib2 (2.2.0), and Bundler cannot continue.
Make sure that `gem install glib2 -v '2.2.0'` succeeds before bundling.


またもエラーですね。
/usr/lib/ruby/1.9.1/rubygems/ ってのが気になります。2.1.2で動いてるはずなんだけどなぁ。
まぁ、言われるがままにgem install glib2 -v '2.2.0'を走らせましょう。

$ gem install glib2 -v '2.2.0'
Building native extensions. This could take a while...
Successfully installed glib2-2.2.0
Parsing documentation for glib2-2.2.0
Done installing documentation for glib2 after 0 seconds
1 gem installed


入るのですが・・・

$ bundle install
Fetching gem metadata from https://rubygems.org/.......
Resolving dependencies...
Using rake 10.3.2
Using addressable 2.3.6
Using pkg-config 1.1.5

Gem::Installer::ExtensionBuildError: ERROR: Failed to build gem native extension.

/usr/bin/ruby1.9.1 extconf.rb
/usr/lib/ruby/1.9.1/rubygems/custom_require.rb:36:in `require': cannot load such file -- mkmf (LoadError)
from /usr/lib/ruby/1.9.1/rubygems/custom_require.rb:36:in `require'
from /tmp/bundler20141026-14761-bfzhay/glib2-2.2.0/gems/glib2-2.2.0/lib/mkmf-gnome2.rb:13:in `'
from /usr/lib/ruby/1.9.1/rubygems/custom_require.rb:36:in `require'
from /usr/lib/ruby/1.9.1/rubygems/custom_require.rb:36:in `require'
from extconf.rb:15:in `<main>'

Gem files will remain installed in /tmp/bundler20141026-14761-bfzhay/glib2-2.2.0/gems/glib2-2.2.0 for inspection.
Results logged to /tmp/bundler20141026-14761-bfzhay/glib2-2.2.0/gems/glib2-2.2.0/ext/glib2/gem_make.out
An error occurred while installing glib2 (2.2.0), and Bundler cannot continue.
Make sure that `gem install glib2 -v '2.2.0'` succeeds before bundling.


また同じエラー。ループです。

3.そも何が起こっているのか?
mikutter 3.1の新機能
1.9.3のサポートは打ち切られています。よって、古き良きDebian安定版ユーザーやLMDEユーザーはなんとか自前で新しいruby環境を作らねばいけません。しかしうちではrbenvで2.1.2を使っているとry

このあたりでrbenvで入れたrubyとgemとbundleの基本のきすらわかっていない自分に気づき始め色々調べてみます。
頭が弱すぎてruby + rbenv + gem + bundle + (+rails)の仕組みが理解できない・・・
完全に仲間を見つけました。しかしこの記事読んでもいまいちわからない。MacとLinuxの違いもあるしなー。
rbenvのインストール、Railsプロジェクトの作成まで
これはわかりやすい。
ふたたび mikutter のインストール
同じくrbenvでMikutterを動かそうとしている人の記事。

なんかもう全てが疑わしくなってきたので、片っ端から試してみることにします。

4.色々やってみる
gem自体のUpdate。

$ gem update --system
$ gem --version
2.4.2


bundler をインストールし直し

$ gem install bundler
Successfully installed bundler-1.7.4
Parsing documentation for bundler-1.7.4
Done installing documentation for bundler after 2 seconds
1 gem installed
$ bundle install
Fetching gem metadata from https://rubygems.org/.......
Resolving dependencies...
Using rake 10.3.2
Using addressable 2.3.6
Using pkg-config 1.1.5
(以下略


やはりここで止まる。

$ gem list

*** LOCAL GEMS ***

atk (2.2.3, 2.2.0)
bigdecimal (1.2.4)
bundler (1.7.4)
cairo (1.12.9)
gdk_pixbuf2 (2.2.3, 2.2.0)
gettext (3.1.4)
glib2 (2.2.3, 2.2.0)
gtk2 (2.2.3, 2.2.0)
io-console (0.4.2)
json (1.8.1)
locale (2.1.0)
minitest (4.7.5)
oauth (0.4.7)
pango (2.2.3, 2.2.0)
pkg-config (1.1.5)
psych (2.0.5)
rake (10.1.0)
rbenv-rehash (0.3)
rdoc (4.1.0)
rubygems-update (2.4.2)
test-unit (2.1.2.0)
text (1.3.0)


アップデートかけてみる

$ gem update
Updating installed gems
Updating bigdecimal
Fetching: bigdecimal-1.2.5.gem (100%)
Building native extensions. This could take a while...
Successfully installed bigdecimal-1.2.5
Parsing documentation for bigdecimal-1.2.5
Installing ri documentation for bigdecimal-1.2.5
Installing darkfish documentation for bigdecimal-1.2.5
Done installing documentation for bigdecimal after 2 seconds
Parsing documentation for bigdecimal-1.2.5
Done installing documentation for bigdecimal after 1 seconds
Updating minitest
Fetching: minitest-5.4.2.gem (100%)
Successfully installed minitest-5.4.2
Parsing documentation for minitest-5.4.2
Installing ri documentation for minitest-5.4.2
Installing darkfish documentation for minitest-5.4.2
Done installing documentation for minitest after 2 seconds
Parsing documentation for minitest-5.4.2
Done installing documentation for minitest after 0 seconds
Updating psych
Fetching: psych-2.0.6.gem (100%)
Building native extensions. This could take a while...
Successfully installed psych-2.0.6
Parsing documentation for psych-2.0.6
Installing ri documentation for psych-2.0.6
Installing darkfish documentation for psych-2.0.6
Done installing documentation for psych after 1 seconds
Parsing documentation for psych-2.0.6
Done installing documentation for psych after 0 seconds
Updating rake
Fetching: rake-10.3.2.gem (100%)
rake's executable "rake" conflicts with /home/tmin/.rbenv/versions/2.1.2/bin/rake
Overwrite the executable? [yN] y
Successfully installed rake-10.3.2
Parsing documentation for rake-10.3.2
Installing ri documentation for rake-10.3.2
Installing darkfish documentation for rake-10.3.2
Done installing documentation for rake after 3 seconds
Parsing documentation for rake-10.3.2
Done installing documentation for rake after 0 seconds
Updating rdoc
Fetching: rdoc-4.1.2.gem (100%)
rdoc's executable "rdoc" conflicts with /home/tmin/.rbenv/versions/2.1.2/bin/rdoc
Overwrite the executable? [yN] y
rdoc's executable "ri" conflicts with /home/tmin/.rbenv/versions/2.1.2/bin/ri
Overwrite the executable? [yN] y
Depending on your version of ruby, you may need to install ruby rdoc/ri data:

<= 1.8.6 : unsupported
= 1.8.7 : gem install rdoc-data; rdoc-data --install
= 1.9.1 : gem install rdoc-data; rdoc-data --install
>= 1.9.2 : nothing to do! Yay!
Successfully installed rdoc-4.1.2
Parsing documentation for rdoc-4.1.2
Installing ri documentation for rdoc-4.1.2
Installing darkfish documentation for rdoc-4.1.2
Done installing documentation for rdoc after 16 seconds
Parsing documentation for rdoc-4.1.2
Done installing documentation for rdoc after 10 seconds
Updating test-unit
Fetching: power_assert-0.1.4.gem (100%)
Successfully installed power_assert-0.1.4
Fetching: test-unit-3.0.2.gem (100%)
Successfully installed test-unit-3.0.2
Parsing documentation for power_assert-0.1.4
Installing ri documentation for power_assert-0.1.4
Installing darkfish documentation for power_assert-0.1.4
Parsing documentation for test-unit-3.0.2
Installing ri documentation for test-unit-3.0.2
Installing darkfish documentation for test-unit-3.0.2
Done installing documentation for power_assert, test-unit after 4 seconds
Parsing documentation for power_assert-0.1.4
Parsing documentation for test-unit-3.0.2
Done installing documentation for power_assert, test-unit after 2 seconds
Gems updated: bigdecimal minitest psych rake rdoc power_assert test-unit


$ rbenv exec gem list

*** LOCAL GEMS ***

atk (2.2.3, 2.2.0)
bigdecimal (1.2.5, 1.2.4)
bundler (1.7.4)
cairo (1.12.9)
gdk_pixbuf2 (2.2.3, 2.2.0)
gettext (3.1.4)
glib2 (2.2.0)
gtk2 (2.2.3, 2.2.0)
io-console (0.4.2)
json (1.8.1)
locale (2.1.0)
minitest (5.4.2, 4.7.5)
oauth (0.4.7)
pango (2.2.3, 2.2.0)
pkg-config (1.1.5)
power_assert (0.1.4)
psych (2.0.6, 2.0.5)
rake (10.3.2, 10.1.0)
rbenv-rehash (0.3)
rdoc (4.1.2, 4.1.0)
rubygems-update (2.4.2)
test-unit (3.0.2, 2.1.2.0)
text (1.3.0)


だがまだダメです。

5.結局どうすれば?
そういえばいつぞやのなにやらで、「Mikutterはフレームワークだ!!」とか明言されてましたね。
次元が違うような気もしますが、Railsの人たちがやってるのと同じ作法で行けるんじゃないでしょうか?
rbenvのインストール、Railsプロジェクトの作成まで
mikutterのフォルダを眺めてみると確かにvendor/bundle があります。
ということは・・・!?
Bundlerのインストール

$ source ~/.bash_profile
$ rbenv exec gem install bundler --no-ri --no-rdoc
Successfully installed bundler-1.7.4
1 gem installed


Railsのとこ以外を実行してみましょう。

$ rbenv rehash
$ bundle install --path vendor/bundle
Fetching gem metadata from https://rubygems.org/.......
Resolving dependencies...
Installing rake 10.3.2
Installing addressable 2.3.6
Installing pkg-config 1.1.5
Installing glib2 2.2.0
Installing atk 2.2.0
Installing cairo 1.12.9
Installing safe_yaml 1.0.4
Installing crack 0.4.2
Installing delayer 0.0.2
Installing gdk_pixbuf2 2.2.0
Installing locale 2.1.0
Installing text 1.3.0
Installing gettext 3.0.9
Installing pango 2.2.0
Installing gtk2 2.2.0
Installing json_pure 1.8.1
Installing power_assert 0.1.4
Installing test-unit 3.0.2
Installing memoize 1.3.1
Installing metaclass 0.0.4
Installing mocha 0.14.0
Installing moneta 0.8.0
Installing oauth 0.4.7
Installing ruby-hmac 0.4.0
Installing typed-array 0.1.2
Installing watch 0.1.0
Installing webmock 1.20.0
Using bundler 1.7.4
Your bundle is complete!
It was installed into ./vendor/bundle


これは・・・来たんじゃないでしょうか?

$ ruby mikutter.rb
/home/tmin/mikutter/core/plugin/notify/notify.rb:6: warning: already initialized constant DEFINED_TIME
/home/tmin/mikutter/core/plugin/extract/extract.rb:8: warning: previous definition of DEFINED_TIME was here


起動しました!!

mikutter console.
下にRubyコードを入力して、Ctrl+Enterを押すと、ここに実行結果が表示されます
>>> RUBY_VERSION
"2.1.2"


Screenshot from 2014-10-26 19:04:47 来ましたね。3.1.0です。

Rails開発環境の構築(rbenvでRuby導入からBundler、Rails導入まで)

基本的には、そのプロジェクトでのみ使いたいgemであれば、bundlerでbundle install --path vendor/bundleして、プロジェクトに閉じた形でgemをローカルインストールし、bundle exec ~で実行する形を取るのがよい。


Bundler概要

単純に
bundle install
と実行されると、rbenv利用下の場合、/Users/ユーザー名/.rbenv/versions/バージョン名/lib/ruby/gems/...以下にインストールされる
bundle install --path <フォルダ名>
とすれば、指定のフォルダにインストール先を指定できる。
たとえば、
bundle install --path vendor/bundle
と記述すると、railsアプリのルートディレクトリの下のvendor/bundleディレクトリにインストールされ、そのアプリケーションの中だけにインストールされる。


結局のところエラーの原因はいまだにいまいち分かってないんだけれども、どーもただrbenvでシステムのrubyを2.1(なりその他新しいもの)にした上で、ただアプリ(mikutter)のディレクトリで
$ bundle install
すると/usr/bin/ruby1.9.1 extconf.rb と、rbenvのディレクトリではなく、システムに(aptなりyumで)rubyを実行してしまうみたい。かといって
$ ruby bundle install
しても
$ ruby bundle install
ruby: No such file or directory -- bundle (LoadError)
などと出てしまいどうしよーもない。
ので、結局mikutterディレクトリで
$ bundle install --path vendor/bundle
してやれば、明示的にmikutterアプリのルートディレクトリの下のvendor/bundleディレクトリにインストールされ、そのアプリケーションの中だけにインストールされ、これで問題なく動くんじゃないかなぁ?

結論
rbenvで対応rubyを入れる。
その上でシステムのrubyを対応したものに変える
$ rbenv global $RUBY_VERSION
$ rbenv rehash
とか、パス通してシェルに入り直す
$ export PATH="$HOME/.rbenv/bin:$PATH"
$ eval "$(rbenv init -)"
とか、環境変数(~.bashrcとかに
export PATH="$HOME/.rbenv/bin:$PATH"
eval "$(rbenv init -)"
を書いておくとかして、なんとかruby -vしたら対応Verが実行される状態を作って、
$ cd mikutter
$ bundle install --path vendor/bundle
$ ruby mikutter.rb
で起動できるはず!!
たぶんRailsで色々やってる方々の記事とかはしっかり読めばすごい参考になるというか、ほぼそのまま使えるはず。

関連記事
Mikutterにプラグイン突っ込んで(魔)改造しようず
Mikutter3.0αReleased!!
Mikutterで始めるておくれ最新Ruby(rbenv on LMDE)
にわかでも浦島でも今から始めるMikutter
Windows10 TPで最新mikutter3.2.2にしたらrubygemsにSSL接続できなくてどハマった
bundle installのエラーでglib2が入らない→解決
LMDE2にrbenvでruby2.2.2入れてmikutter起動まで(rbenv on LMDE 3回目)
スポンサーサイト
総合案内当ブログについて
Windowsの目次Linuxの目次Linuxの目次2・ ・自作PC関連の目次Web技術関連の目次
全記事一覧情報サイト新着RSS一覧

Sponsored Link

Bootstrap3を使ってFC2ブログのテンプレを作ろうその二

Bootstrap3を使ってFC2ブログのテンプレを作ろうその一の続き。
コメント欄、TB欄、あとCSSちょこちょこ。

追記
共有通ってました。DLしてくれた方々ありがとー><
bootstrap3-2で共有に載ってます



1.コメント欄をBootstrap3を使って作ってみよう
最初は標準のInput Groupesでなんとか行けないものかと試行錯誤してたけどダメ。
というか、参考にしてたテンプレみんなtableタグとかdtタグとか使って何とかしてたのね。
それをそのまま置き換えたりしてみたけど、どーーーーーーもカラムが落ちたり、コメント内容表示のところにTB欄が埋め込まれたりと謎挙動。
結局一番参考になったのはBootSwatchの適当なテーマ内のForms。
form.png 一番近かった。

コードはこんな感じ

これを元にFC2のコメント独自変数とかを組み入れてく感じ。
適当にサイズ調整なんかをはさみながら、時には標準のフォームのコードを見ながらなんとかかんとかうんたらかんたらしてみるとこのように。

form class="form-horizontal"で囲って、"form-groupe" でそれぞれを定義していく感じ。めんどいのはFC2独自の変数が入るところで、これは公式のbasic_whiteテーマのコメント欄の記述を参考に代入していきます。
edit_areaも基本は同じ。
label for="name" class="col-md-2 control-label" col-md-2 の幅で後ろの%template_name(日本語表示では「名前」と出ます)
フォーム自体は div class="col-md-6"で幅指定して input class="form-control" id="name" type="text" で入力欄を作っていく感じです。
ハマったのは<form>~</form> の中でaction="./" method="post"・・・・の部分があったんだけど、これを入れてなくって別タグで定義してた(ので結局</form>がひとつ足りない状態になってた?)ために、入力欄は表示されてるけど、送信押すとすべて破棄されてコメント入力ページに飛ばされるという現象w
ついでに入力支援ツールバー(これ↓)の内容が反映されなかったりしたんだけど、

それもこれもなにもかもこのform閉じ忘れから発生したもので、一つにまとめたら解消。
コメントエリア(comment_aria内)と編集エリア(edit_aria内)は変数が違うだけで基本一緒。
送信ボタンはinput class=のところにBootstrapのボタン定義(今回はbtn-default btn-sm)を入れればBootstrap標準のあのボタンになります。もちろんここの定義変えれば色んな色、大きさのボタンに変更可能。
見た目的に form-inline でチェックボックス~送信ボタンを一行にしたけど、別にしてもいいかもね。

2.TB欄も合わせて作ってみよう
コメント欄に比べれば非常に楽なもんです。
同じくform-horizontal form-groupe使って適当に整形するのですが、まぁ項目が項目なのですぐ。

こんな感じ。input classの中にトラックバックURL自動表示&Readonlyの呪文を代入。
onfocus="this.select()" value="<%trackback_url>" readonly="readOnly" /

あ、ちなみにBootstrapはCSSフレームワークなので、ここまでの状態のhtmlのみでもそこそこな感じで表示されます。

3.CSSでちょこちょこ気になるところを整えよう。
最初はClean BlogのCSSをそのまま突っ込んでみました。(Apacheライセンスです)
まぁ、英語圏のブログっぽいかんじよね。海外のWP使ったブログみたいな感じになります。
とはいえ、うちのブログの場合かなり軽い記事や、やってみた的な記事、Tipsというにはあまりに曖昧な記事など、真面目すぎるレイアウトではいまいちしっくりこない感じなので、ぶっちゃけ合いません。かっこいいけどね。
そこで、いらないところをバンバン削除した上で、今まで使ってたPs_960とかからもイイトコ取ってきてうまいこと見た目を整えます。とはいえせっかくBootstrapなので、あまり込み入ったCSSは書きたくないにゃー。

てなわけでうまいことイイトコどり最低限な感じで、ページ全体の色とか、フォントのサイズとか、あとborder入れるとこは入れてみたりしたCSSがこれ

もしかしたらhtmlとちゃんと定義が咬み合ってなくって意味のない記述が紛れ込んでるかもしれません。もし使われる方がいらっしゃるならば、そのへんはご自分でどーにかしてください。どーにかしたうえで「ここおかしかったからこー直したよ」的なお知らせをいただけると幸いですが、ぶっちゃけおかしいところがあっても、それがどうおかしくてどうなってるのかわかるほどのレベルに僕が達してません。

そんなこんなでできたテンプレがとりあえずGitHubにあります。https://github.com/t-min/bootstrapforfc22clumn
まぁ使ってやってもいいかなという方は使ってやってください。(あー、ライセンスって必要なんかねー?MITとかにした方がいいんかねー?
Bootstrapの勉強には・・・なったのかなぁ?FC2の独自変数とかめんどいよねー。しかもそのへんは応用効かないからあれですよねー。

次はWPのテンプレ改造とか作成とか行きたいですねー。

関連記事
久々のテンプレ変更
Bootstrap3を使ってFC2ブログのテンプレを作ろうその一
Bootstrap3でFC2のテンプレを作ろう 2回目( blue-navbar )
Bootstrap3でFC2のテンプレを作ろう 2回目( lightgreen-navbar,black-navbar,white-navbar )
新年明けましてテンプレート不承認
総合案内当ブログについて
Windowsの目次Linuxの目次Linuxの目次2・ ・自作PC関連の目次Web技術関連の目次
全記事一覧情報サイト新着RSS一覧

Sponsored Link

Bootstrap3を使ってFC2ブログのテンプレを作ろうその一

今使ってるFC2のテンプレをBootstrap3(3.2)で作った(書きなおした?)ので、覚書的に。
久々のテンプレ変更
Bootstrapを使えば簡単にレスポンシブデザインのサイトが作れるので、勉強がてら作ってみましたが、一から書いたわけではないです。今まで使ってたPs960_2C_ver001、Bootstrap-2column、公式のbasic_white(作者さんありがとうございます!!でも作者さんのブログが無くなってたり凍結されてたり・・・)から必要部分のコードをパクらせて参考にさせていただきながら、BootstrapのGetting startedAll Templatesを見ながら作っていきます。
GitHubにリポジトリ作ってあげてるのでほしい方はどーぞ。ただ、ちょびちょび修正したりしてるのでご利用は自己責任でお願いします。(共有申請したけど通るかなぁ?

追記 共有通ってました。DLしてくれた方々ありがとー><
bootstrap3-2で共有に載ってます。



1.基本レイアウト
右プラグインの2カラムにします。
共通のheader footerは幅いっぱい、メインの記事とプラグインをBootStrapのグリッドシステムを使ってレイアウト。
layout.png 基本はこんな感じ。
layout2.png 幅を狭めるとこんな感じ。にしたい。

Bootstrap3超速レビュー!刷新されたグリッドシステムを理解しよう!
Bootstrap 3 学習ノート
グリッドはかなり細かく指定できるんですが、めんどいシンプルに行きたいので、今回はメインを col-md-8 サイドを col-md-4 としました。もちろんこの部分に.col-xs- .col-sm-  .col-md- .col-lg- とそれぞれ指定することで、画面サイズに応じて細かく表示の挙動を変えることも可能です。

2.HTML宣言文とheadタグ内
HTML宣言、headタグ内に必要事項をFC2の変数入れて設定、CDN使ってBootstrap3のCSS、jQueryのCSSを読んでから、カスタマイズ用のCSSへのリンク、となります。BootstrapではCSSはあとから読み込んだものが優先されるので、先に本家のCSSを読んでからカスタマイズ用のCSSを読むようにします。

Bootstrap本体のCSSを読み込んだあとにカスタマイズCSS(FC2のテンプレート管理から編集可能なCSS)へのリンクを張ります。BootstrapをDLしてブログのアップローダーにあげてもいいんだけど、それだとFC2のサーバー次第だったりするしなー、ってことでCDNを使いました。
Bootstrap CDN
ついでにjQueryとjQuery mobileもCDNから持ってきます。
Google Hosted Libraries - Developer's Guide
まぁGoogleからじゃなくてもいいのでしょうが。そもそもjQuery mobileまで使うのかどーかよくわかってないんですがとりあえず同梱。
あとはベースに使わせてもらったいくつかのテンプレのheadタグ内のなんかをパクらせて真似させてもらったり何だったり。
とりあえずBootstrap3のCSSとBootstrapのjs、あとjQueryを読み込んでいれば、Bootstrap3のいろんなパーツがコピペで使えるはず。

3.bodyを作ろう
いよいよ本体を作っていきます。
class="container"で全体を組んで、class="container-innner"でfooter以外のすべて(header,main,side)を覆いました。
よくよく考えるとfooterだけ外す意味がよくわかりませんがまぁいいでしょう。
containner-innnerの中にまずはheader、次にcol-md-8でメインコンテンツ表示エリア、col-md-4でサイドのプラグイン表示エリア、containner-innnerを閉じて、containnerの終了前にfooterを作ります。こんなかんじでうまく行けば当初の構想通りのレイアウトをBootstrap3のグリッドシステムを使って実現できるはずです。

というわけでやってみましょう。

4.headerを作ろう

class="well"で囲むとシンプルなエフェクトをかけられます。header,side,footerはこれでエフェクトかけてみました。
header内左寄せしてFC2の変数使って%blog_name %introductionを表示。
すぐ下にナビバーをつけました。
ナビバーはjs入っているのでカスタマイズ次第ではドロップダウンとかもつけられるのですが、めんどいそんなに表示しておきたい項目もないだろうということでシンプルにAbout(ブログの説明記事へのリンク)、リスト(全記事表示)、RSS、Adminとしました。
基本的にはcomponentsのナビバーをちょっといじっただけなので、まぁこれ見ながらいろんなメニュー足したり引いたりすることもできるし、いらないようならばナビバー自体を削ってもいいでしょう。

5.メインを作ろう
いよいよメインの記事表示部分です。
class="row" "container"で囲んでcol-md-8指定してここにメインコンテンツを放り込みます。
まずはBootstrap標準コンポーネントのパンくずリスト、その下に記事、(RSS)、ページャー、みたいな感じ。
ホントはこの下にコメント欄、TB欄を作らなきゃいけないんだけど、これかなりハマったのでまた別記事で。

breadcrumb(パンくずリスト)はbreadcrumbsからまんまとってきてFC2独自変数を放り込めばおっけ。

記事欄はarticle class="post"で囲んで、タイトル(%topentry_link、%topentry_title)、下の行にinline-listで囲んでautherと日時、コメントやトラバがあればそれ表示する行を作りました。
moreとか自分のとこで使ってないしちゃんと動くかどうかよくわからないけれど、まぁこのへんは公式テンプレートや今まで使っていたテンプレの該当部分からパクって参考にしてテキトーに記述。

pagerはこれまたAligned linksから。ほんとは12345678って並んでる奴(Default pagination)


(なぜ縦に並ぶし!!
こーいうの使いたかったんだけど、どーもFC2は標準ではこれめんどいみたいで。JavaScriptとかでプラグイン作ってる方々は結構いらっしゃるので、そちらからいただいてきてもいいと思います。ただ、俺にはBootstrapのPaginationに当てはめる方法がわからなかったのでギブアップ。

6.サイドバーを作ろう
こっちはメインカラムに比べて格段に楽でした。(メインカラムはコメントやトラバにはまってたのもあるけど)
右カラムなのでメインの後に"col-md-4"で囲んで、さらに"well"でグラデーション。

一番上にあるタブはBootstrap-2columnからパクらせてお借りしてきました。これパンくずリストのすぐ下くらいに移動するのもありっちゃありだよねー。
あとはプラグインエリア作って、プラグインの変数入れていくだけ。というわけでとりあえずプラグイン1.2をサイドに縦に並べて表示する仕様になりました。これ、カラムの組み方次第でプラグイン1.2.3に対応させて、左2段とか左右振り分けとかも出来るよねー。その場合はメインをcol-md-6くらいにしてサイドを6 3 3とかにするとかね。まぁ気が向いたらやるかもしれないけど、イマドキは割とシンプルな方が受けるのかなぁ?

閑話休題
7.footerを作ろう
floatを解除してfooter。
表示したのはコピーライト表記(Copyright %blogname)、Powerd by FC2、あと削除禁止なFC2の広告タグ(%ad %ad2)

で、html閉じタグで終了。
次回は多分コメント、TB欄とCSSやるよー。

関連記事
久々のテンプレ変更
Bootstrap3を使ってFC2ブログのテンプレを作ろうその二
Bootstrap3でFC2のテンプレを作ろう 2回目( blue-navbar )
Bootstrap3でFC2のテンプレを作ろう 2回目( lightgreen-navbar,black-navbar,white-navbar )
新年明けましてテンプレート不承認
総合案内当ブログについて
Windowsの目次Linuxの目次Linuxの目次2・ ・自作PC関連の目次Web技術関連の目次
全記事一覧情報サイト新着RSS一覧

Sponsored Link

ブログ内検索

カスタム検索

フリーエリア

クリックで救える命がある。

レンタルサーバー

さくらのマネージドサーバ
さくらインターネットのVPS
ConoHaのVPS
WebARENA VPSクラウド
99円レンタルサーバー
【CloudCore VPS】
GMOクラウドのレンタルサーバー
転送量無制限 ABLENET
@WAPPYレンタルサーバー
SPPDレンタルサーバー

カテゴリー+月別アーカイブ

 

アクセスカウンター

現在の閲覧者数:

プロフィール

Author:tmin
PCヲタ。ライト2ちゃんねら。
スロット好きのギャンブラー。(元
むしろ人生がギャンブルだが目下のところ負けっぱなし。
座右の銘は「結果オーライ」。故に基本適当。
トラブルもまた楽しみのひとつ

コメント、トラバ、相互リンク歓迎。お気軽にどうぞ。
当ブログについて
Twitterでこっちとあっちの更新情報流すことにしてみます。
http://twitter.com/t_min
Project Mikunchu♪Wikiできました。
Mikunchu200x40.png


上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。