mieki256's diary



2014/02/28(金) [n年前の日記]

#1 [ruby] Windows上でnanocをインストール

nanoc は、jekyll と同様、静的html生成してサイトを作れるツール。jekyll ほどblogに特化したわけではないように見えたので、試しにインストールしてみようかなと。

以下の解説記事を参考にして作業。

_nanocのインストール方法(Windows環境) | サイト運営の私的メモ
_nanoc導入メモ 2/5 「Basic Concepts」編 - ナレッジエース
_ruby2.0上にnanocをインストールしたり設定したり | iii ThreeTreesLight
_【Rails(3.2系)開発】GWも終盤だし社会復帰を兼ねてpryを使ってみる:ゆでだこカンタービレ:So-netブログ
_君がOpsでもRubyでググる前に色々できることはある - Qiita

環境は、Windows7 x64 + _Ruby 2.0.0 p451 mingw32版

gemでインストール。 :

gem install nanoc
gem install adsf
gem install mime-types
gem install kramdown
nanoc 3.6.7 がインストールされた。

サイトの雛形を作成。 :

適当なフォルダに入って以下を実行。
nanoc create_site test_sample
cd test_sample
この場合、test_sample というサイトを作ってる。

contentフォルダ以下に原稿ファイル(*.html)が出来ている。しかし、デフォルトでは utf8nで保存されてる。このままだとエラーが出てしまったので、エディタで開いて、SJISで保存し直した。

_インストール - 日本nanocユーザ会 によると、環境変数に
set LANG=ja_JP.UTF-8
を指定すべし、という話もあって。しかし、他のアプリに影響が出そうなので、今回は指定しなかった。

Markdownで書けるようにする。 :

デフォルトでは、htmlタグをバシバシ書かないといかんのだけど、Markdownでも書けるようにする。Rules ファイルをエディタで開いて、以下のように修正。
compile '*' do
  if item.binary?
    # don’t filter binary items
  else
    filter :erb
    filter :kramdown
    layout 'default'
  end
end
「filter :kramdown」という一行を追加して、「kramdown という Markdownパーサを通しなさい」と指示してる。

コンパイルと閲覧。 :

コンパイル(ビルド)する。以下のどれかを入力すればコンパイルされる。
nanoc compile
nanoc co
nanoc
output/ フォルダ以下に、htmlが生成された。

ブラウザで確認するためにサーバを起動。
nanoc view
_http://localhost:3000/ にアクセスしてページが表示されればOK。

巷の解説記事では、「nanoc view で起動したサーバは Ctrl+C で停止できる」と説明されてるけれど。Windows + DOS窓上では謎のメッセージが表示されるだけで停止してくれなかった。おそらく、Linux か Mac に限定した停止方法なのだろう…。

仕方ないので、DOS窓を閉じて終了。もしくは、タスクマネージャからプロセスを終了。もっとスマートな手はないのかな…?

ページを新規作成。 :

nanoc create_item apple
apple.html が作成された。内容を修正してビルド。
nanoc

オートコンパイル。 :

せっかくだから、オートコンパイルとローカルサーバ立ち上げの両方を行う。ファイルが変更されていて、かつ、ブラウザでそのページを開こうとしたタイミングで、自動でコンパイルして閲覧可能にしてくれる。以下のどちらかを入力。
nanoc autocompile
nanoc aco
しかし、これは古いコマンドらしい。実行すると、「guard-nanoc を使え」と文句を言われる。

とりあえず、現時点では、nanoc autocompile も一応動いてくれるけれど…。せっかくだから guard-nanoc も試す。

guard-nanocを導入。 :

gem install guard
gem install guard-nanoc
gem install wdm
guard init nanoc
Guardfile というファイルが作成される。このファイルの記述内容で、ファイル変更を監視するらしい。デフォルトでは、以下のファイルとフォルダ以下を監視するように指定されていた。
  • nanoc.yaml ファイル、Rulesファイル
  • content/、layouts/、lib/ フォルダ以下

guard を動かすと pry が走る模様。なので、おそらく事前に、pry もインストールしておく必要がありそう。pry は以下でインストールできるはず。
gem install pry pry-doc
もし、エラーが出る場合は、以下を試す。
gem uninstall pry pry-doc
gem install pry pry-doc --no-ri --no-rdoc

ファイル監視を開始。以下のどちらかを入力。
guard 
guard start
この状態で、例えば content/*.html を修正・保存すると、コンパイルしたことを示すメッセージが表示される。

また、pry上で、shellコマンドとして nanoc view を実行することもできる。
.nanoc view
pry上では、頭に「.」をつけると、shellコマンドが実行できるらしい。

pry が走ってるので、exit と打てば、pryごと guard を終了できる。その後、バッチファイル終了を尋ねてきたら、「y」を押す。もし、入力プロンプトが出ていない時は、Enterを連打すれば、入力プロンプトがそのうち出てくるはず。

ただし、pry (guard) を終了させても、nanoc view が裏で延々と動き続けてしまう時もあるようで…。バッチファイル終了もしてくれる時と、してくれない時があるのだけど、条件が分からない。それを考えると、DOS窓を複数起動して、guard と nanoc view を別々に実行しつつ作業したほうがいいのかもしれない。

ansiconを試す。 :

guard (というか pry)を実行すると「ansiconを使え。URLはココじゃ」と言ってくる。しかし、提示されたURLは404で。なんだかな。

ansiconのソースは、 _adoxa/ansicon - GitHub にある。バイナリは、 _ANSICON にあった。ansi166.zip をDL・解凍して…。64bit版OSを使ってるなら、x64フォルダ内のファイルを、32bit版OSを使ってるなら、x86フォルダ内のファイルを、PATHの通った場所にコピーしておく、らしい。

DOS窓上で ansicon 実行後、gurad を実行すれば、「ansicon を使え」の警告は出なくなる。しかし、DOS窓内のスクロールが一部おかしくなるような? 色付けもされてない…。ちゃんと動いてるのかどうか、よく分からない。

感想。 :

とりあえず、nanoc を使ってサイト生成はできるっぽい。blogに特化したツールというわけではないようで、常用するかどうかは別にしても、jekyllよりは自分の目的にあってるかなと。

ちとやっかいなのは、nanoc は1ファイル作成するたびに、フォルダを作って階層にしてしまうこと。1つのフォルダ内に複数のhtmlを入れておく構成はできないっぽい。ただ、このあたり、 _nanoc 3.3.xを使うときのメモ - ひとりしずかに。 に解決策が提示されてた。

#2 [css] CSSを再勉強中

CSSを使って段組レイアウトをするために再勉強中。

昔は float: left; 等を使ってやってた記憶があるけど、ググってみたら今時は display: box; が使えるらしい。早速使って表示確認してたけど。さらに調べてみたら、display: box; はガンガン仕様が変わっていって、現在は flexbox とやらになったそうで。しかもブラウザの対応状況がバラバラらしく。これじゃちょっと使えないな…。いや、ブラウザ毎にcssを変えればいいのだろうけど。うーん。

さらに調べてみたら、display: table;、display:table-cell; で、テーブルレイアウトっぽいことができるようで。こちらは比較的普及してるらしい。コレを使うか…。と思ったら、件の機能はIE8以降からの対応だそうで。となると、IE6、IE7のシェアが気になるところ。まだ多い・減る気配がないなら、display: table; の使用も諦めたほうがいいのだろうし…。

ググってみたけど…よく分からん…。IE6、IE7のシェアは…まだ多いと見るべきか、無視していいぐらいに少ないと見るべきか。どうなんだろうな…。 *1

float を使ってレイアウトできなくもないけど、「どうしてここの背景だけ色が合わせられないの?」とか言われそうだし、となると div を入れ子にしてアレなhtmlにするとか、あるいはこの御時勢に tableタグを使ってレイアウトとか。…せめて display: table; ぐらいは使わせてもらいたいのだけど。

てなことを考えながら、再勉強中です。
*1: もちろん、Web関連技術に傾倒してる人なら、「そんなの無視してガンガンCSS3使おうぜ」とか言い出すのだろうけど。シェアを無視するわけにもいかないよな…。ていうか、下手すると発注側がIE6を使って確認する場面もありそうで、どうしたもんかと。

以上、1 日分です。

過去ログ表示

Prev - 2014/02 - Next
1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28

カテゴリで表示

検索機能は Namazu for hns で提供されています。(詳細指定/ヘルプ


注意: 現在使用の日記自動生成システムは Version 2.19.6 です。
公開されている日記自動生成システムは Version 2.19.5 です。

Powered by hns-2.19.6, HyperNikkiSystem Project