【触ってみたよ】Foundation 6は『Panini』がキモだ！【CSSフレームワーク初心者】
今年こそはせめて月に1記事くらいは書こうと思っているショートホープこと齋木です。
『CSSフレームワークはテンプレートじゃない』
少し前の話になるが、『これからのWebサイト設計の新しい教科書 CSSフレームワークでつくるマルチデバイス対応サイトの考え方と実装』という書籍の出版イベントの時に、著者の一人である松田さんが『CSSフレームワークはテンプレートじゃない』ということをおっしゃっていた。それまで僕自身ろくにCSSフレームワークを使ったこともなく、なんとなくCSSフレームワークに手を出しづらい感じがあったのだが、それまでのもやもや感が吹き飛ばされる思いだった。
デザインテンプレートのような使い方を想定して、なんでもかんでもCSSフレームワークのものを使おうとするから「似たようなデザインになる」という変なことになるわけで、『必要な部分だけ読み込ませて使えばいい』というやはり著者の一人のこもりさんの話もなるほどという感じだった。
あとで気づいたんだが『フレームワークはテンプレートじゃない』って書籍の『まえがき』にちゃんと書いてあったよ…orz
この書籍ではBootstrapを主な題材として扱っているが、もう一つ主力のCSSフレームワークにFoundationがある。Bootstrapではいよいよv4がデビュー間近と言われているが、一足先にFoundationからFoundation 6がリリースされた。
http://foundation.zurb.com/sites/docs/panini.htmlぎゃー！ panini便利。条件分岐とループもつかえるのね。Posted by 大串 肇 on 2016年1月13日
こんなメガネさんの投稿をたまたま僕のFacebookのタイムラインで見かけ、いろいろ新しい機能が追加されたということだったので、勉強がてら公式ドキュメントを見ながら自分で触ってみることにした。
既にFoundationに触れたことがある、あるいはもう導入している人にはこちらの記事に新しい機能が簡潔に説明されていてわかりやすいと思うので、目を通しておくといいだろう。
以前から何度も書いていることだが、ここ最近のWebの（特にフロントエンド周りの）技術の進化は凄まじく、あっという間にバージョンが上がり、また新しい技術がどんどん誕生してくる。
今回のFoundation 6もそのうちのひとつなわけだが、いまここでやっとの思いで覚えても来年にはとっくに古い技術になってしまっている可能性もある。そのリスクは絶えず意識しておく必要があるだろう。
ただ、こういった技術はだいたい今あるものをベースにして進化していくものなので、フレームワークにしろタスクランナーにしろ、一度触ってやり方をちゃんと会得すれば、次に新しい技術が来てもなんとなく方向性はわかるからぐっと敷居は低くなる。
情報をキャッチアップしていくのはとても大変で、僕自身もまだまだやりたくてもできない・やってはみたもののちんぷんかんぷんなものばかりだが、いま苦労することで次のステップに進めるのであればとにかくまずやってみる、といったところだ。
まずは事前準備から
なにはともあれ、まず最初にNodeJSのインストールが必要。
大変申し訳ないのだが、ここから先の手順は基本的に「Macでの操作」を前提としていることをお断りしておく。
念のため、Windows向けにはこちらの記事を共有しておくのでご覧いただければと思う。
公式ページでダウンロードボタンをクリックしてNodeJSをインストールしてもいいが、できることならちゃんとNodeJSのバージョン管理ができたほうがあとあと助かるので、Macだったらnodebrewかndenv、Windowsだったらnodistをインストールしてバージョン管理できるようにしておこう。
詳しくはこちらの記事の後半、7章以降を参照されたし（ステマ
ちなみに、上記の写真のとおりNodeJSの公式ページには（記事の作成時では） v4.2.4 と v5.4.1 の2バージョンのダウンロードリンクが並んでいる。
一般的には「stable（安定版）」の表記のある新しい v5.x.x をダウンロードしておけば問題ないはずと思うところだが、この場合のインストールするべきバージョンは v4.x.x のようだ。
というのも、v.4.x.x に記載のある「LTS」とは「Long Term Support」の意味で、v4.x.x の「LTS」はリリースしてから2年半のサポートが約束されるが、v5.x.x は次のバージョンが出たらサポートされなくなる、ということなのだそうだ。
（こちらの記事に詳しい説明がある）
ようやくインストールへ
前置きが長くなってしまったが、インストール後にターミナルで
$ node -v
と入力して
v4.2.4
と表示されればOK。
ここで、Bowerがインストールされていない環境の場合は
$ npm install bower -g
とコマンドを入力してBowerをインストールしておこう。この場合も
$ bower -v
と入力してバージョン番号が返ってくればインストールOKだ。
さて、いよいよFoundation for Sites 6へアクセスする。
ちなみに、Foundation 6からFoundation for Sites 6の他にもFoundation for Emails、Foundation for Appsの合わせて3つのフレームワークが提供されるようになっている。読んで字のごとく、それぞれWebサイト、HTMLメール、Webアプリの制作のためのフレームワークということになる。
いずれも気にはなるが、一度にあれこれやってもどうせ僕のアタマでは理解できないorzので、Foundation for Sites 6から始める。
ここではいきなり Download Foundation 6 ボタンをクリックするのではなく、ドキュメントから見ていくことにする。
ナビゲーションの右端の DOCS をクリックして、プルダウンからSite Docsを選択する。
すると「Foundation for sites」のドキュメントのページが開き、まず最初に「インストール」の節がある。
そこに Install Foundation for Sites ボタンがあるのでクリック。
インストールページでは、一番最初に Yeti Launch の中見出しが目に飛び込んでくる。
Yeti Launch
説明を読むと、 Yeti Launch はMac用のアプリで、Foundation 6のプロジェクトをGUIで管理できるものだとわかる。ちなみにYeti（イエティ）とは「雪男」の意味で、Foundationのマスコットキャラクターのことだ。
ここ最近ようやく日常的にターミナルを使うようになってきているので、これはいらないかな〜と思ったが、念のためダウンロードしてみることに。
ダウンロードページを見ると、近々Windows向けのアプリも用意されるようだった。
ちなみに、ダウンロード後にインストールして起動してみると最初はこんな画面。
「まずプロジェクト選択してから始めて」とある。登録欄もあるが必ずしも登録しなくても利用できるので、まずはプロジェクトのルートディレクトリだけを指定して「Continue & Sign Up Later」をクリックする。
先に進むとこのような画面になるので、左カラムの「New Project」をクリックする。
「プロジェクト名」「プロジェクトのタイプ」「テンプレート」の選択画面になるので、それぞれを入力して「CREATE PROJECT」をクリックする。
なんだけど…
この先の画面は
こんな感じ。えーと？これって右側は「黒い画面」ですよね。これだけだったらわざわざ『GUI』使う必要なくないですか…？w
今回はこの画面を見てガックリしてしまいこれ以上 Yeti Launch を触る気をなくしてしまったwのだが、画面のとおりいろいろメニューが並んでいるので、興味のある方はどうぞお試しあれ。
ターミナルからコマンドを入力すると言っても、これまでほとんどターミナルに触ったことがない人でも以下のとおりにやればまず間違いなくできると思うので、改めてコマンドラインから起動する方法を説明しようと思う。
というか、nodebrewやnodistがインストールできたならここからはもっと簡単。
やることはいま Yeti Launch で説明したことと全く一緒。ボタンをクリックする代わりにテキストを選ぶのとコピペをするだけ。これでもまだ「黒い画面」お嫌いですかね…？
Command-Line Tool
どうしてもどうしてもどーーしてもコマンドラインが打ちたくない初心者デザイナーさん以外はこちらのほうがいいだろう。
もちろんGUIを否定するわけではないし、僕自身もGUIのほうが気が楽な場合も多々ある（git操作はSourceTreeばっかりだし…）が、やってることはボタンをクリックするかコマンドをひとつ打つかの違いだけで一緒だし、実際ここでやっていることはターミナルができることのほんの一部分でしかない（つまり僕もそれくらいしかできない）。
おまけに先ほど見たように「GUI」のアプリの半分に『黒い画面』を表示するのなら、わざわざ Yeti Launch を使わなければいけない理由もないかな…と思ってしまう。
食わず嫌いで触らずに済ませている人は、ほんとうに困る前に少しずつ慣らしていったほうが将来の自分のためになると思うのだが。ま、老婆心ですわね…。
手順としては、まず最初にターミナルからコマンドラインツールをインストールする。既にNodeJSはインストールしてあるので、ここはあっという間に終わってしまうはず。
$ npm install --global foundation-cli
これをコピペしてターミナルに貼るだけだ。そうするとなにやらパッケージ群がダダダッとインストールされる。
ただし、これまでにFoundation 5 CLIを利用したことがある場合は、ドキュメントに注意事項が記載されているのでよく確認していただきたい。
これがインストールされたら Yeti Launch の時と同様に cd コマンドでプロジェクトのルートディレクトリへ移動し、
$ foundation new
コマンドを入力。
最初に3つ、質問形式で聞かれる内容に従ってインストールするものを選択していく。1つ目は
? What are you building today?
と聞かれるので
A website (Foundation for Sites)
を選び、次に
? What's the project called?
と聞かれるので適切なプロジェクト名を入力し（これも Yeti Launch の時と一緒で、プロジェクトのルートディレクトリ直下にプロジェクト名のディレクトリが作成され、その中にFoundationがインストールされる）、最後に
? Which template would you like to use?
と聞かれる。
ここでの選択肢は
Basic Template: includes a Sass compiler
ZURB Template: includes Handlebars templates and Sass/JS compilers
と出るのだが、ここは是非 ZURB Template を選んで欲しい。
もちろん Basic Template がダメとか悪いとかではないし、例えばプロジェクトのケースによってはこちらを元に作ったほうがいい場合もあるだろう。ただ、ざっと確認したところでは Basic Template はFoundation 6本来の機能の3割くらいしか使ってないのではないか、という印象だった。
特に、初めてFoundation（あるいはCSSフレームワーク）に触ろうというのであれば、まずは『なにができるか』をいろいろ試さないといつまでも機能を理解できないので、あれこれやってみるためにも全機能が入る ZURB Template を使うのがいいだろう。
ちなみに、このへんの設定を一気にしてしまうコマンド
$ foundation new --framework sites --template zurb
がStarter Projectsのページで紹介されている。また、Githubからデータを直接ダウンロードし、
$ npm install
$ npm start
でプロジェクトを開始することもできるようだ。
プロジェクト名のディレクトリにFoundationがすべてダウンロードされて、シェルプロンプト（「$」とか「>」とか）が再び表示されたら、
$ cd （プロジェクト名）
と入力してプロジェクト名のディレクトリに移動する。ターミナルにパスをちまちま入力するとタイポしてエラーになることがままあるwwので、Macならば cd（半角スペース） と入力した後にFinder上のプロジェクト名のディレクトリをターミナル上へドラッグアンドドロップすれば、そのディレクトリへのフルパスが入力されるのでオススメ。
プロジェクト名のディレクトリへ移動したら
$ foundation watch
と入力すればおk。
ZURB Template にはBrowserSyncも含まれているので、foundation watch コマンドで規定のブラウザが起動し、「Welcome to Foundation for Sites」ページが表示される。
このようなページが表示される。ここまで、本当にあっという間！
CSSフレームワークとしてのFoundation 6
ここで表示されている
のページ、内容はというとプロジェクト名のディレクトリ内の dist/index.html が表示されている。これを見ていけばざっとデフォルトのスタイル構造が確認できる。
CSSフレームワークだから、もちろんスタイルの設定はかなり細かく用意されている。
Bootstrapに触れたことがある人ならば、それほど難しく感じることはないのではないだろうか。考え方はBootstrapとそれほど大きく違うものではないので、仮に移行しようとした場合でもすんなり移行できるだろうと思う。
とはいえ、初めてCSSフレームワークを触ろうとする人にはやはりそれなりに難しいだろうことは想像に難くない。
公式サイトにドキュメントは豊富に用意されているが、すべて英語なので僕のように英語が苦手な人には輪をかけて荷が重い。Bootstrapと比較しても、Foundationに関する日本語の情報は少ないようだ。
ただ、声を大にして言いたいのは、自戒も含め『英語の公式ドキュメントを必ず読め（なぜならそこに全部書いてあるから』ということ。
これはお師匠さま（と勝手に思っている）から僕がまぁ口酸っぱく言われたことで、「そこに書いてあることを読まないで『わからない・できない』とかなんで言いますかね？（意訳）」ということを毎回毎回繰り返していたので…（今もあまり進歩していないけどorz
Foundation（あるいはCSSフレームワーク）でできること
これを1から説明し始めると解説サイトひとつ、本1冊分の大変な量になってしまうので、ここでは割愛させていただく（手抜きじゃないよ（・∀・）
ただ「公式サイト読め」だけではあんまりなので、Foundation for Sites 6の概要へのリンクを紹介しておく。
SUMMARY
これからCSSフレームワークを触ってみようという人には、公式サイト全部というのはちょっと情報が多すぎる。最初に書いたように、別にこれらの機能すべてを使わなければいけないわけではないので、まずは上記3項目を読んでから気になる機能・便利そうな機能だけ試してみながら慣れていくのがいいだろう。
まず要旨だけでも簡単に把握するには、いま表示されている（はずの） dist/index.html と、上記で最後に出てきたKitchen Sinkを見ていただければ、Foundation for Sites 6を使うとだいたいどんなことが出来て、どんなふうに書けばいいのかがわかるだろう。
ちなみに、「Kitchen Sink」というのは公式で用意している簡単なデモページ、というかリファレンスと思っていただければいい。これならコードと英語の説明を読んでみようって気になるでしょ？
HTMLテンプレートの構造 – Panini
Foundation for Sites 6では、全く新しい機能として、HTMLテンプレートエンジンのHandlebarsをベースにしたPaniniというファイルコンパイラ（とFoundationには記述してあるが、実際のところFoundation 6に最適化したテンプレートフレームワーク的なライブラリ、ということだろうか）を用意している。
今回のFoundation 6へのバージョンアップの目玉はたぶんこれ。どうやらFoundation for Sites 6で単なるCSSフレームワークから「CSSフレームワークを含むHTMLテンプレートエンジン」になった、ということのようだ。てかFoundationのトップの画像には『front-end framework』って書いてあるのね（ちゃんと読め案件
なので次にこれを触ってみようと思ったのだが、実はHTMLテンプレートエンジンもきちんと触ったことがなくて、以前JADEで挫折した苦い思い出が…。
ということで、Paniniの『公式ドキュメント』を読みながらメモがてら超訳+独自解説してみた。
中学生程度の英語読解力しかないwwうえにHTMLテンプレートエンジンをまともに触ったことがないので、おかしなところ・気づいたところがあったら是非ツッコんでくださいm(_ _)m
基本：テンプレートとページ
プロジェクトのルートディレクトリ直下の src ディレクトリ内のファイルを操作すると dist ディレクトリ内に書き出されるのは一般的なタスクランナーのプロジェクトなどと一緒。そして src/layouts ディレクトリに default.html がある。
Foundation for Sites 6でデフォルトで書き出される default.html はこのような内容になっていて、このファイルにある {{…}} がHTMLテンプレートエンジンで関数などを呼び出す書き方になる。
ちなみに、 {{!-- … --}} はコメントアウトだ。
phpで言うところの include 、WordPressで言うところの get_template_part のように、コンテンツ部分を別ページにして、表示前にコンパイルして1つのhtmlファイルとして書き出す、という構造になっている。
この src/layouts/default.html にある {{> body}} には、Paniniによって src/pages 内のファイルがそれぞれ内包され、コンパイルされて出力される。
Foundation 6インストール直後の状態では src/pages 直下には index.html があるだけだが、これがコンパイルされて dist/index.html に書き出されて BrowserSyncでブラウザ上に表示されている、というわけだ。
Partials – パーツ（モジュール？）
Handlebarsに限らず、HTMLテンプレートエンジンでは、（呼び方は様々だが）このPartialsという機能（といえばいいのかな…）でページやレイアウトなどのどこにでも「パーツ」を書き出すことができる。
Paniniの公式ドキュメントにあるサンプルそのままだが、 src/layouts/default.html が
<html>
<head>
<title>Definitely STILL a Website!</title>
</head>
<body>
{{> header}}
{{> navigation}}
{{> body}}
{{> footer}}
</body>
</html>
のような形だったとすると、その時のディレクトリ構造は
src
├── layouts
│ └── default.html
├── pages
│ └── index.html
└── partials
├── header.html
├── navigation.html
└── footer.html
となっている、ということだ。
これはまさにWordPressのテーマ作成に便利そうな予感…！
ページ変数
page
現在表示しているテンプレート名を書き出す変数
root
現在のページに合わせてrootへのpathを書き出す変数
これもPaniniの公式ドキュメントにあるサンプルそのままだが、先ほどの src/layouts/default.html の
<link rel="stylesheet" href="{{root}}assets/css/app.css">
の部分の記述が dist/index.html では
<link rel="stylesheet" href="assets/css/app.css">
dist/folder/page.html では
<link rel="stylesheet" href="../assets/css/app.css">
とちゃんと正しいパスに変換されて出力される、ということだ。なんかすごい…(ღ✪ω✪)
ヘルパー関数
PaniniはHandlebarsがもともと持っているヘルパー以外にも、いくつか独自のヘルパーを用意している。
ifpage
例えば dist/index.html と dist/about.html とでだけ表示したいコンテンツ部分には
{{#ifpage 'index' 'about'}}
<p>This is definitely either the Index or About page.</p>
{{/ifpage}}
と記述する。
unlesspage
ヘルパー #ifpage の逆。例えば dist/index.html でだけ表示したくない場合は
{{#unlesspage 'index'}}
<p>This is definitely <em>not</em> the Index page.</p>
{{/unlesspage}}
と記述する。
repeat
{{#repeat n}}{{/repeat}} で囲われた部分のコンテンツを繰り返し表示する。“n”には繰り返す回数が入る。プロトタイプで重複したHTMLを表示する場所に便利！
<ul>
{{#repeat 5}}
<li>Five hundred ninety-nine US dollars</li>
{{/repeat}}
</ul>
WordPressでサイトを制作する場合、プロトタイプとしてHTMLで事前にテストサイトを用意するケースはよくある。こういう「プロトタイプで重複したHTMLを表示する場所」をいちいち書いたりコピペしたりしなくていいのでこれは便利だ…！
markdown
{{#markdown}}{{/markdown}} で囲われた部分のmarkdown文書をHTMLにコンパイルして出力する。コンテンツ部分だけをmarkdownで書く、とかも最近よくあることなので、これもめっちゃ便利じゃないすか！！
{{#markdown}}
# Heading 1
Lorem ipsum [dolor sit amet](http://html5zombo.com), consectetur adipisicing elit. Nam dolor, perferendis. Mollitia aut dolorum, est amet libero eos ad facere pariatur, ullam dolorem similique fugit, debitis impedit, eligendi officiis dolores.
{{/markdown}}
カスタムヘルパー
『オレオレ』ヘルパー関数も追加できる！ src/helper ディレクトリ内にjsファイルを追加して npm を再起動すればいい。
これまたPaniniの公式ドキュメントにあるサンプルそのままだが、例えば
// Example file src/helpers/bold.js
module.exports = function(options) {
// options.fn(this) = Handelbars content between {{#bold}} HERE {{/bold}}
var bolder = '<strong>' + options.fn(this) + '</strong>';
return bolder;
}
というjsファイルを追加した場合、
{{#bold}}ideas{{/bold}}
というカスタムヘルパーが使えるとか！！ちょっと凄くないすかこれ！！！便利！！！
まぁ僕の場合、デキる人が公開してくれるカスタムヘルパーを使わせてもらうだけなんですけどね…。
カスタムデータ
コンテンツデータをページに追加できる。
1. ページに変数を追加する方法
JekyllでのFront Matterのようなもの（と書いてあるけど肝心のJekyllを全く知らないorz）。例えば src/pages/index.html に
---
title: Page Title
description: Lorem ipsum.
---
<!-- The rest of your HTML is down here. -->
と記述すれば、 index.html または default.html で
<h1>{{ title }}</h1>
のように出力できる（と書いてあるけど、いまいちピンとこないww これはいろいろ試してみないとorz）。
2. 外部ファイルから変数を追加する方法
JSONファイルやYAMLファイルを作成してプロジェクト内の src/data ディレクトリに追加することで、変数をグローバルに追加することができる。
これまでの例にならってPaniniの公式ドキュメントにあるサンプルを見ると、以下のように breakfast.yml を
- eggs
- bacon
- toast
と記述して作成したとすると、この breakfast.yml の内容を変数 {{breakfast}} で出力することができる。
<ul class="breakfast-items">
{{#each breakfast}}
<li>{{ this }}</li>
{{/each}}
</ul>
この場合 breakfast.yml は配列として記述されているので、handlebarのThe each block helperの {{#each yml-name}}{{/each}} でループを出力する。
いかん、いま冬場だというのにオーバーヒートしてきた…orz
まとめ
- Foundation 6はCLIで！事前にNodeJSだけは必須
- 学習コストは決して高くないので、まずは試してみよう
- CSSフレームワーク部分の機能を確認するのはKitchen Sinkで
- Paniniが超強力！
- WordPressのテーマをHTMLのプロトタイプから作成しているのであれば導入する価値あり？
- コンパイルされたHTMLが書き出されるのはあくまでも
distディレクトリ内なので、src、dist双方を上手に使えばWordPressのテーマ化がものすごく便利になる予感…！
ちなみに、ここまでの記述例を全部ディレクトリ表示すると
├── src
│ ├── layouts
│ │ └── default.html
│ ├── pages
│ │ └── index.html
│ ├── partials
│ │ ├── header.html
│ │ ├── navigation.html
│ │ └── footer.html
│ ├── helper
│ │ └── bold.js
│ ├── assets
│ │ └── scss
│ │ └── app.scss // distディレクトリにはcssが出力される
│ └── data
│ └── breakfast.yml
└── dist
のようになる。
てかPaniniを使いこなしたいんだったら、ちゃんとHandlebarsを勉強しろってことだよねこれorz もっとがんばります…
written by: ショートホープ
Webでの職歴はようやく3年経ったところだが、バイクメカニック歴17年、Mac歴28年。ショートホープ歴はもっと長いけどな！ バイク、マン島、ラリー、ツール・ド・フランス、そしてブルースとショートホープ。