Foundation6に搭載予定の5つの新機能
スポンサーリンク
先月末、フレームワークの一つであるFoundationの新バージョン「Foundation6」についてのアナウンスがされました。
当サイトや、配布中のWelcart用テーマもFoundation5を使って作成しており、WordPressのサイト制作でFoundationを使っている方も多いのではないでしょうか。
※Bootstrapも新バージョン4のコンセプトが8月にアナウンスされました。年末～来年はまた勉強シーズンになりそうです。
日本語情報が全然見当たらなかったので、Foundationのブログでアナウンスされた骨子を自分用にまとめてみました。私の英語理解力が正しいかどうかは責任を持ちませんので悪しからず（ご指摘大歓迎）。
Foundation6のアナウンス記事はこちら。↓
A Look Under the Hood of Foundation 6
1. ナビゲーションの大幅改善
Foundation5では、「Top Bar」という、その名の通りページトップにナビゲーションを作るコンポーネントがあります。当サイトでも使用中。
Top Bar – Foundation5
現在は別々のコンポーネントになっている、IconbarやSubnavなどのメニュー関係のものも、より縮小されたコードになりカスタマイズしやすくなるそう。
classを書き換えるだけで、メニューを縦にしたり、右寄せ・左寄せ・等間隔、またはドロップダウンやアコーディオンにしたりも自在に出来るとのこと。
更に、レスポンシブ対応として、画面サイズに合わせて、やれここは画面サイズ中でドロップダウンにしたり、やれここはアコーディオンにしたり、そういうことも出来るんだとか。
2. 独自プラグインを使いやすく
ユーティリティ関数（よく使う関数）を作ることによって、これまで色々あったプラグイン用のJSファイルの縮小化をはかり、更に、そのユーティリティ関数はユーザー自身によるjQueryプラグインなどにも使えるように配慮。
Foundation6のアナウンス記事では、その関数は全てリストアップされていないものの、また別の記事で紹介予定の旨。
3. ブレイクポイントを自由に設定
Foundation5では、ブレイクポイントは完全に固定です。（※画面の最大幅・グリッド数・グリッド間の幅は変更してダウンロード可）
ブレイクポイントとは、画面サイズによってスタイルが切り替わるポイントのことで、例えばFoundation5では、中サイズと小サイズの間のブレイクポイントは、40.063em（約641px）です。
Foundation6では、Sass Mapsを使って、自由にブレイクポイントやブレイクポイント名を変更出来るようになります。
Sass Mapsについては、日本語では以下の記事がありました。
Sass 3.3で追加された新しいデータタイプ「マップ」まとめ解説 – HTML5Experts.jp
4. Sass Mixinでレイアウトをより自由に
こちらもSassを使ったカスタマイズ。
Foundation5では、カラム数は通常12、変更する場合はダウンロード時に指定する必要がありましたが、Sassを使って自由なカラム数を指定出来るようになるそう。
更に、現在は、例えば、
- メインカラム：
<div class="small-9 columns"> - サイドバー：
<div class="small-3 columns">
というように、カラム毎にHTML上でグリッドの数を指定する必要がありましたが、それもSass上で指定できるようになるようです。
またまた更に、今までグリッド数が12（つまり、1カラムの構成）の場合は
<div class="row"> <div class="small-12 columns"> コンテンツ </div> </div>
と書かなければいけなかったところ、
<div class="row columns"> コンテンツ </div>
と書けばいいんだそうです。HTMLデータの短縮化・簡略化になります。
5. 「パニーニ」でサイト制作をより楽に
Foundation6では、制作者側がより能率的にサイトを作成出来るようなシステムを備えており（テンプレート化できるようになる？）、それを「パニーニ」と呼ぶんだそう。
- SassからCSSへのコンパイル
- JSファイルを一つにする
- HTMLテンプレートをフラットなファイルにコンパイルする
その他、CSSやJSファイル、果ては画像のの縮小化も出来るとかなんとか。
更に、Handlebarsテンプレート（←すみません、私はよく知りません）では、HTML上で、【現在のページが表示されている時に「current」classを付ける】なんつうコードも書けるようになるとか・・・？
ともかく、より効率的にサイト制作が出来るようになるっぽいです。
まとめ
Foundation6では、より一層Sassを使ったカスタマイズに傾く方向に変わっています。いよいよSassを真面目に勉強しないといけない時が来ました。
現在Foundationを利用している人も、そのままcssやjsファイルの置き換えだけで移行出来るかどうかは微妙なところでしょう。Bootstrap4も、既存のBootstrap3をそのまま置き換えて使えない可能性大（使えないことはないだろうけど、グリッドのブレイクポイントがかなり変わることはわかってる）なので、使うならテンプレート（テーマ）リニューアル時の導入になりそうですかね。
リリース時には、既存と同じコンポーネントでも、作り方の詳細やclass名の再確認をする必要がありそうです。
Sassファーストガイド―CSSをワンランク上の記法で作成!
- 出版社 カットシステム
- 著者 相澤裕介
- 価格 ￥ 2,808
- 発売日 2015/11/25
[…] Foundation6に搭載予定の5つの新機能 – Welcart カスタマイズ タスクランナー「gulp」の導入手順（Windows）｜WEB Drawer […]