Foundation6.2 Paniniで嵌るの巻

Foundation6.2公開

Paniniで嵌る

Foundation6.2が公開されました。

精力的に開発が進められているのは素晴らしいのですが、結構大胆に仕様を変更してくるのが毎回頭が痛いところです。
version6からは「cssフレームワーク」というよりも「CSSフレームワークを含むHTMLテンプレートエンジン」に変貌を遂げたと言ったほうが正確でしょう。

gulpによるコンパイルシステムに移行し、また、静的サイトジェネレータとしての「Panini」が採用されました。同じようなシステムとしてhugoやjekyllがありますが、（今のところは）その簡易版という感じのものでしょうか。あまりこの「Panini」についての解説サイトはないので、地道に作りながら勉強していたところにこのバージョンアップです。

Foundation6.2自体のアップデートはすんなりほとんど問題もなく済んで拍子抜けしてたぐらいだったのですが、「Panini」で不具合が生じました。{{root}}変数が全く機能しないというものです。

機能としては、

<link rel="stylesheet" href="{{root}}assets/css/app.css"/>

としたとき、ルートディレクトリのファイルの場合は、

<link rel="stylesheet" href="assets/css/app.css"/>

となり、一階層下のファイルでは

<link rel="stylesheet" href="../assets/css/app.css"/>

と自動的に変換してくれる便利な機能です。

で、今回嵌ったのが、この変換機能が正しく機能してくれないというものでした。Foundationサイトのフォーラムでも問題になっていないから、「Panini」自体使っている人は少ないのかと半ば諦めていました。まあそのうち解決するだろうから、その間「hugo」に「Foundation」を組み込んでみようか、何てほぼ気持ちは傾いていたのですが、やはり悔しい。

で、node_modules/panini/package.jsonを調べてみました。結果的にはこれが正解でした。

"_npmVersion": "3.3.12",
"_nodeVersion": "5.3.0",

こんな、バージョン指定がありました。この段階では、すでに「Node」も「npm」も最新版に置き換えていました。薄々そんなことだろうとは思っていたのは事実です。試さなかったのは依存関係に問題が出るだろうから面倒だなあと思っていたからです。この週末は体調を崩していて気力が萎えていたということもありました。

今時は、各ソフトウェアにはバージョン管理システムが存在しています。マイ開発環境は、Homebrewで賄っていますが、rbenvやpyenvなんかは使っているので、まあ、最後にもののためしでやってみるかとなった次第。

結論から言ってしまえば実に簡単。「Node」のバージョン管理は"ndenv"を採用しました。導入は、こちらを参照してください➡️Ruby・Nodeを使うなら、rbenv・ndenvが便利

で、実際のNodeとnpmのダウングレードの手順です。

$ node -v
$ v5.7.0
$ ndenv install v5.3.0
$ ndenv rehash
$ ndenv global v5.3.0
$ node -v
$ v5.3.0
$ sudo npm install -g npm@3.3.12

コンパイルの作業ディレクトリで、

sudo npm update

で完了です。
実に簡単。体調が悪かったとはいえ、三日は無駄にしたなあ。
これで、作業が進められます。

このブログのテーマであるFoundationPressも早速「Foundation6.2」対応版にアップデートされました。こちらも開発は活発です。今までで一番スムーズに移行は完了しました。

「BootStrap」に比べたら日本では使っている人は少ないんだろうなあ。
とりあえず見つけた日本語の情報サイトをご紹介しておきます。

• EXP
• foundation6とSassでサイトをつくる　なんと大胆なドメイン名でしょう …