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版 。
guard を動かすと pry が走る模様。なので、おそらく事前に、pry もインストールしておく必要がありそう。pry は以下でインストールできるはず。
ファイル監視を開始。以下のどちらかを入力。
また、pry上で、shellコマンドとして nanoc view を実行することもできる。
pry が走ってるので、exit と打てば、pryごと guard を終了できる。その後、バッチファイル終了を尋ねてきたら、「y」を押す。もし、入力プロンプトが出ていない時は、Enterを連打すれば、入力プロンプトがそのうち出てくるはず。
ただし、pry (guard) を終了させても、nanoc view が裏で延々と動き続けてしまう時もあるようで…。バッチファイル終了もしてくれる時と、してくれない時があるのだけど、条件が分からない。それを考えると、DOS窓を複数起動して、guard と nanoc view を別々に実行しつつ作業したほうがいいのかもしれない。
以下の解説記事を参考にして作業。
_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 kramdownnanoc 3.6.7 がインストールされた。
◎ サイトの雛形を作成。 :
適当なフォルダに入って以下を実行。
contentフォルダ以下に原稿ファイル(*.html)が出来ている。しかし、デフォルトでは utf8nで保存されてる。このままだとエラーが出てしまったので、エディタで開いて、SJISで保存し直した。
_インストール - 日本nanocユーザ会 によると、環境変数に
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 view で起動したサーバは Ctrl+C で停止できる」と説明されてるけれど。Windows + DOS窓上では謎のメッセージが表示されるだけで停止してくれなかった。おそらく、Linux か Mac に限定した停止方法なのだろう…。
仕方ないので、DOS窓を閉じて終了。もしくは、タスクマネージャからプロセスを終了。もっとスマートな手はないのかな…？
nanoc compile nanoc co nanocoutput/ フォルダ以下に、htmlが生成された。
ブラウザで確認するためにサーバを起動。
nanoc view_http://localhost:3000/ にアクセスしてページが表示されればOK。
巷の解説記事では、「nanoc view で起動したサーバは Ctrl+C で停止できる」と説明されてるけれど。Windows + DOS窓上では謎のメッセージが表示されるだけで停止してくれなかった。おそらく、Linux か Mac に限定した停止方法なのだろう…。
仕方ないので、DOS窓を閉じて終了。もしくは、タスクマネージャからプロセスを終了。もっとスマートな手はないのかな…？
◎ ページを新規作成。 :
nanoc create_item appleapple.html が作成された。内容を修正してビルド。
nanoc
◎ オートコンパイル。 :
せっかくだから、オートコンパイルとローカルサーバ立ち上げの両方を行う。ファイルが変更されていて、かつ、ブラウザでそのページを開こうとしたタイミングで、自動でコンパイルして閲覧可能にしてくれる。以下のどちらかを入力。
とりあえず、現時点では、nanoc autocompile も一応動いてくれるけれど…。せっかくだから guard-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 nanocGuardfile というファイルが作成される。このファイルの記述内容で、ファイル変更を監視するらしい。デフォルトでは、以下のファイルとフォルダ以下を監視するように指定されていた。
- 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 viewpry上では、頭に「.」をつけると、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窓内のスクロールが一部おかしくなるような？ 色付けもされてない…。ちゃんと動いてるのかどうか、よく分からない。
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を使うときのメモ - ひとりしずかに。 に解決策が提示されてた。
ちとやっかいなのは、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; ぐらいは使わせてもらいたいのだけど。
てなことを考えながら、再勉強中です。
昔は 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 日分です。