ご相談・お問い合わせはこちらから

CSS Flexbox のグリッドレイアウトがつくれる Sass Mixin ライブラリ「Flexbox Grid Mixins」をつくりました

スタイルシートの Flexbox を使ってグリッドレイアウトが生成できる Sass Mixin「Flexbox Grid Mixins」をリリースしました。

グリッドを自由自在につくりたい

どういうものかというと、以下のサンプルのような HTML と Sass があると、サクッとグリッドの CSS をつくってくれます。

HTML

<div class="grid">
<div class="grid__col-3">
  3
</div>
<div class="grid__col-9">
  9
</div>
</div>

Sass

@import 'node_modules/flexbox-grid-mixins/sass/flexbox-grid-mixins';
 
$default-grid-gutter: 2%;
 
.grid {
  @include grid($gutter: $default-grid-gutter);
 
  > .grid__col-3 {
    @include grid-col($col: 3, $gutter: $default-grid-gutter);
  }
  > .grid__col-9 {
    @include grid-col($col: 9, $gutter: $default-grid-gutter);
  }
}

CSS

.grid {
  box-sizing: border-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-flow: row nowrap;
  -ms-flex-flow: row nowrap;
  flex-flow: row nowrap;
  margin: 0 -1%;
}
 
.grid > .grid__col-3 {
  box-sizing: border-box;
  -webkit-flex: 0 0 23%;
  -ms-flex: 0 0 23%;
  flex: 0 0 23%;
  margin: 0 1% 2%;
}
 
.grid > .grid__col-9 {
  box-sizing: border-box;
  -webkit-flex: 0 0 73%;
  -ms-flex: 0 0 73%;
  flex: 0 0 73%;
  margin: 0 1% 2%;
}

グリッドシステムも作れます

ほんの数行の Sass コードでグリッドシステムがつくれます。

よく使われる 12 カラムのグリッドシステムはデフォルトでつくれることはもちろん。カラム数のオプションを指定すれば、いくつのカラム数のグリッドシステムも自由自在につくれます。

HTML

<div class="grid">
<div class="grid__col-12">
    12
</div>
</div>
 
<div class="grid">
<div class="grid__col-1">
    1
</div>
<div class="grid__col-11">
    11
</div>
</div>
 
<div class="grid">
<div class="grid__col-2">
    2
</div>
<div class="grid__col-10">
    10
</div>
</div>
 
<div class="grid">
<div class="grid__col-3">
    3
</div>
<div class="grid__col-9">
    9
</div>
</div>
 
<div class="grid">
<div class="grid__col-4">
    4
</div>
<div class="grid__col-8">
    8
</div>
</div>
 
<div class="grid">
<div class="grid__col-5">
    5
</div>
<div class="grid__col-7">
    7
</div>
</div>
 
<div class="grid">
<div class="grid__col-6">
    6
</div>
<div class="grid__col-6">
    6
</div>
</div>

Sass

@import 'node_modules/flexbox-grid-mixins/sass/flexbox-grid-mixins';
 
$default-grid-columns: 12;
$default-grid-gutter: 2%;
 
.grid {
    @include grid($gutter: $default-grid-gutter);
 
    @for $i from 1 through $default-grid-columns {
        > .grid__col-#{$i} {
            @include grid-col($col: $i, $grid-columns: $default-grid-columns, $gutter: $default-grid-gutter);
        }
    }
}

CSS

.grid {
  box-sizing: border-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-flow: row nowrap;
  -ms-flex-flow: row nowrap;
  flex-flow: row nowrap;
  margin: 0 -1%;
}
 
.grid > .grid__col-1 {
  box-sizing: border-box;
  -webkit-flex: 0 0 6.33333%;
  -ms-flex: 0 0 6.33333%;
  flex: 0 0 6.33333%;
  margin: 0 1% 2%;
}
 
.grid > .grid__col-2 {
  box-sizing: border-box;
  -webkit-flex: 0 0 14.66667%;
  -ms-flex: 0 0 14.66667%;
  flex: 0 0 14.66667%;
  margin: 0 1% 2%;
}
 
.grid > .grid__col-3 {
  box-sizing: border-box;
  -webkit-flex: 0 0 23%;
  -ms-flex: 0 0 23%;
  flex: 0 0 23%;
  margin: 0 1% 2%;
}
 
.grid > .grid__col-4 {
  box-sizing: border-box;
  -webkit-flex: 0 0 31.33333%;
  -ms-flex: 0 0 31.33333%;
  flex: 0 0 31.33333%;
  margin: 0 1% 2%;
}
 
.grid > .grid__col-5 {
  box-sizing: border-box;
  -webkit-flex: 0 0 39.66667%;
  -ms-flex: 0 0 39.66667%;
  flex: 0 0 39.66667%;
  margin: 0 1% 2%;
}
 
.grid > .grid__col-6 {
  box-sizing: border-box;
  -webkit-flex: 0 0 48%;
  -ms-flex: 0 0 48%;
  flex: 0 0 48%;
  margin: 0 1% 2%;
}
 
.grid > .grid__col-7 {
  box-sizing: border-box;
  -webkit-flex: 0 0 56.33333%;
  -ms-flex: 0 0 56.33333%;
  flex: 0 0 56.33333%;
  margin: 0 1% 2%;
}
 
.grid > .grid__col-8 {
  box-sizing: border-box;
  -webkit-flex: 0 0 64.66667%;
  -ms-flex: 0 0 64.66667%;
  flex: 0 0 64.66667%;
  margin: 0 1% 2%;
}
 
.grid > .grid__col-9 {
  box-sizing: border-box;
  -webkit-flex: 0 0 73%;
  -ms-flex: 0 0 73%;
  flex: 0 0 73%;
  margin: 0 1% 2%;
}
 
.grid > .grid__col-10 {
  box-sizing: border-box;
  -webkit-flex: 0 0 81.33333%;
  -ms-flex: 0 0 81.33333%;
  flex: 0 0 81.33333%;
  margin: 0 1% 2%;
}
 
.grid > .grid__col-11 {
  box-sizing: border-box;
  -webkit-flex: 0 0 89.66667%;
  -ms-flex: 0 0 89.66667%;
  flex: 0 0 89.66667%;
  margin: 0 1% 2%;
}
 
.grid > .grid__col-12 {
  box-sizing: border-box;
  -webkit-flex: 0 0 98%;
  -ms-flex: 0 0 98%;
  flex: 0 0 98%;
  margin: 0 1% 2%;
}

オプションでさらに自由自在なグリッドに

Sass Mixin「Flexbox Grid Mixins」には、たくさんのオプション (引数) が用意されています。くわしくは、Mixins リファレンスを読んでもらえればと思いますが。グリッドのカラム数やカラム周りのマージン指定の他、flexbox のプロパティ、事前に用意したカラム (プリセットカラム) が生成できたり。サンプルページもありますので、参考に一度ご覧ください。いろんなレイアウトが組めると思います。

作った理由。なぜフレームワークではなくライブラリなのか

Sass Mixin ライブラリ「Flexbox Grid Mixins」を作った理由は、3つあります。

まず自由自在なグリッドレイアウトを作りたいと思ったこと。CSSフレームワークでは、12 カラムのグリッドシステムが定番でそれを元に作っていくのですが。もっとシンプルに、作りたいグリッドを作りたいカラム数でその場で柔軟に作っていきたい。

次にフロントエンド開発環境。昨今ウェブアプリの開発環境で起こっていることがフロントエンド開発環境に波及していること。一例を挙げると、Node.js とそのパッケージ管理 npm のもと、package.json で依存関係を解決することで、プロジェクトのポータビリティが向上したことが挙げられます。また gulp や grunt などのタスクライナーで自動化、効率化が図られています。スタイルシートも Sass などプリプロセッサを通じて生成することが多くなりました。

最後にCSSフレームワーク。はじめ開発者向けに作られた Bootstrap はバージョンを繰り返し、フルスタックで様々なプロジェクトに導入されるようになりました。さらに多種多様なCSSフレームワークがたくさん作られています。フレームワークを導入すると、便利に効率的な開発ができます。しかし、フレームワークを導入することは融通さを犠牲にすることもあり、バランスを取るのが難しくなります。とくにスタイルシートは最終的に静的ファイルに生成するため、事前に様々なことを想定していろいろなものを詰め込んでしまいます。次第に複雑さが増し柔軟性がなくなっていきます。それは同時にプロジェクトにも柔軟性がなくなることを意味します。フレームワークの次が求められています。

そしてフレームワークの先へ...

これからのフロントエンド開発を考えるに、いかに柔軟性をもちつつ、開発ができる環境を整えるかが重要になってきます。プロジェクトの中でパッケージ管理を行い、必要な機能や部品だけをライブラリという形で取り込み、Sass などプリプロセッサで組み合わせて使っていくコンポーメントベースに向かっていくのではないか。と仮説を立ててみました。これも昨今のウェブアプリの開発環境と同じ方向に向かうのでは。フレームワークとは言えないほど薄っぺらいフレームワークを利用してウェブサイトを開発していく未来に。

という未来を見据え、実現に一歩近づきつつ、Sass Mixin ライブラリ「Flexbox Grid Mixins」が産まれました。

個人的にはこれをなんとかしたい。class属性の嵐

フレームワークを使ったり、OOCSS をもとに実装すると、HTML の class属性 にいっぱい値を記述しがちです。ボクもよくやりがち。

CSS の設計で構造と見た目の分離をした分、HTMLの方にしわ寄せがいって、気づいたら構造と見た目の class属性、状態の class属性でいっぱいになってしまいます。

必要最小限の記述でシンプルな解決を目指しつつ、Sass Mixin「Flexbox Grid Mixins」を作ったところもあります。

サンプルを作ってみた感想

flexbox ベースのグリッドは、ブラウザのサポート状況から float ベースのグリッドから次第に採用が増えたり、移行されたりすると思います。現状は flexbox のだいたいは使えるが、ブラウザの実装によっては細かいところでまだまだ不十分なところがありますね。これからもいろいろ改良をしていきたいと思います。

ということで

是非 Sass Mixin「Flexbox Grid Mixins」を使ってウェブサイトを設計したり、グリッドシステムを作ったりしてみてくださいね。

Flexbox Grid Mixins

Flexbox Grid Mixins is Sass Mixins library to help you write well-structured, readable, maintainable, component-based grid using Flexbox (CSS Flexible Box Layout Module).

Flexbox Grid Mixins documentation: http://thingsym.github.io/flexbox-grid-mixins/

Mixins Reference and Example

GitHub: https://github.com/thingsym/flexbox-grid-mixins

License

The MIT License (MIT)

WordPressプラグイン「Custom Post Type Widgets」に Search Widget を追加しました

カスタム投稿タイプで活用できるデフォルトウィジェット WordPressプラグイン「Custom Post Type Widgets」をアップデートしました。

今回のアップデートでは、新たに Search Widget を追加しました。

screenshot-7.png

投稿、固定ページ、カスタム投稿タイプで絞り込み検索ができます。

また、Search Widget と Comments Widget には Custom Post Type すべてを対象にできるようにしてみました。

開発裏話

今回いろいろ手を入れて、ウィジェット独自にキャッシュ機能があったのを削除したり、全面的にリファクタリングをして、コード数もざっくり減らすことが出来ました。

一番悩んだことは、Search Widget は GitHub でプルリクをいただいたのですが、うまく機能しなかったこと。 書いたプラグインがダメではなく WordPress 本体の方。個別ページだけの検索絞り込みができない。

ググってもあまり分からず、WordPressで検索の絞り込みノウハウが書いてあるブログ記事を見てもなぜか投稿ページだけの絞り込みに関してはたくさんあるが、ページに関してはほとんどなかったり。

ということでソースコード (wp-includes/post.php) を読むと、個別ページを作成する register_post_type には、publicly_queryable に false が設定されており、フロントエンドで post_type クエリが実行できないようになっています。(なぜそうなっているのか開発フォーラムを見ても経緯がよく分からなかったのですが...)

実際、?post_type=page でアクセスしても post_type が破棄されて (unset)、裏で revision以外すべてのタイプ (any) が検索対象になったりします。

個別ページだけの検索絞り込みをするために対処したことは、検索ページが表示される時に、pre_get_posts にフックして破棄された post_type を再度追加してみました。

他のアプローチとしては、register_post_type で登録されたものを変更してもいいのではと思ったのですが、そもそも register_post_type を実行途中で変えていいのか、検索時だけなので影響範囲を考えるとこれでいいのではないかと。 また、register_post_type の変更方法がわからないというのもあります... 誰かどういうアプローチがあるのか教えてください。

おかげさまで

WordPressプラグイン「Custom Post Type Widgets」は2015年1月にリリースして一年あまり。海外の開発者に反応が良く、プルリクをいただいたり、段々使われるプラグインに育ちつつあります。カスタム投稿タイプを使ったテーマ開発に是非使ってみてくださいね。

ダウンロード & インストール

WordPress の公式プラグインページ

ライセンス

GNU General Public License v2.0 (GPLv2) licenses

開発

GitHub

投稿コンテンツがデバイス毎に切り替えられる新機能「Display Switcher」がWordPressプラグイン「Multi Device Switcher」に加わりました

デバイス毎にテーマを切り替える WordPressプラグイン「Multi Device Switcher」をアップデートしました。

アップデート内容は2つあります。

デフォルトのユーザーエージェント更新

デフォルトのユーザーエージェントを更新しました。いままで アンドロイド端末は、Android OS が搭載されているスマホとタブレット端末の両方がスマートフォン用テーマに切り替えられていました。

そのため、WordPressプラグイン「Multi Device Switcher」でAndroidスマホとタブレット端末のWordPressテーマ切り替え方法 を参考に手動でユーザーエージェントを設定してもらっていましたが、今回の更新でデフォルトでスマホとタブレット端末別々にテーマが切り替わるように見直しました。

コンテンツがデバイス毎に切り替えられるショートコード「Display Switcher」

「Multi Device Switcher」のデバイス判定を用いたショートコードでコンテンツの切り替えができるようになりました。

設定は、WordPressの投稿画面のエディター上でショートコード [multi]を使うだけ。device属性にデバイスの名前を付けるとそのデバイスで見たときだけショートコードで設定したコンテンツが表示されます。device属性になにも付けない場合は PC の時だけコンテンツが表示されます。Custom Switcherにも対応。device属性に Custom Switcher の名前を付けるとちょうどよい具合にコンテンツが切り替わってくれます。

[multi]PCで見ている時に表示します[/multi]
[multi device="smart"]スマホで見ている時に表示します[/multi]
[multi device="tablet"]タブレット端末で見ている時に表示します[/multi]
[multi device="test"]Custom Switcherでもコンテンツが切り替わります[/multi]

CSSだけでコンテンツの表示非表示をすると検索エンジンからテキスト非表示でスパム的になる可能性をはらんでしまうことを避けるために切り替えたり、コンテンツや画像をスマホ用などデバイス毎に最適化したり、投稿やコンテンツ制作に是非活用してみてください。


Download:

WordPress のプラグインページからどうぞ。

Installation:

WordPress プラグイン「Multi Device Switcher」のインストール詳細はこちらからどうぞ。

Code Repository:

thingsym / multi-device-switcher (GitHub)

Licenses:

Licensed under GPL version 2.0

Donationware:

よろしければ、開発とメンテナンスのために寄付していただければうれしいです。

Donationware

ページの先頭へスムーズに戻る WordPressプラグイン「Back to the Top」をリリースしました

去年 2014年10月に jQuery プラグイン「Back to the Top」 をリリースしました。今回、そのWordPressプラグイン版をちょこちょこ作ってリリースしてみました。

jQueryプラグイン版は、jQueryを読み込んだり、HTMLを用意したりと、いろいろ設定が必要になります。オプションがたくさんあるのでカスタマイズが自在にできます。反面、設定が煩わしかったりします。

WordPressプラグイン版は、WordPressにインストールして有効化すると、もろもろデフォルトで設定してくれてそのまま使えます。カスタマイズもオプションページでプレビューを見ながらかんたんに設定できるように作ってみました。

screenshot-backtothetop.png

カスタマイズは、ラベルに Webフォントを採用したアイコンが選べたり、スクロールの動き (easing) も。また、上級者向けにスタイルシートがカスタマイズできます。

インストールは、WordPressプラグインページから。または、管理画面のプラグインの新規追加から「Back to the Top」で検索してインストールできます。

WordPressプラグインのインストール方法は「プラグインをインストールする - WordPressマニュアル」を参考にどうぞ。

WordPressプラグイン「Jetpack」のCDN「Photon」をWordPressテーマ・プラグインに実装するスニペット

WordPress プラグイン「Jetpack」にCDN (Contents Delivery Network) で画像を配信する「Photon」があります。「Photon」を使うと、画像配信の分散ができ、サーバの負荷分散やサイトの表示パフォーマンスの向上に繋がります。

「Photon」 は、WordPress.com で使われていたり、自分でホストしている WordPress サイトにプラグイン「Jetpack」をインストールすることで導入できます。

「Photon」の導入は、プラグイン「Jetpack」の「Photon」を有効化するだけで CDN で画像配信されます。

画像配信されるのは、サムネイル画像やアイキャッチ画像だけで、「Photon」で配信されない画像もあります。たとえば、ご自身でテーマやプラグインをカスタマイズしたり、開発した場合。img タグで埋め込んだりすると、画像が「Photon」に対応した形にならないのでうまく配信されません。こういう場合も Photon API が用意されているので、対応ができます。

以下のスニペットで 「Photon」を有効化していると、画像URLを元に Photon用URL を生成して画像配信してくれます。

$image_url = class_exists( 'Jetpack' ) && method_exists( 'Jetpack', 'get_active_modules' ) && in_array( 'photon', Jetpack::get_active_modules() ) ? 'http://i' . mt_rand( 0, 2 ) . '.wp.com/' . str_replace( array( 'http://', 'https://' ), '', esc_attr( $image_url ) ) : esc_attr( $image_url );

「Photon」を利用する場合、WordPress.com を使っているか、WordPress サイトにプラグイン「Jetpack」をインストールしている場合に限りますと、利用規約にあるのでご注意を。

新しいサービスのアイデアに役立つデベロッパーブログです。IT/Web技術メモや問題解決策、開発に役立つTips、作ったソフトウェアやツールの紹介。

プロフィール

Thingsym (シングスワイエムと発音します)

個人事業・小規模・中小企業のマーケティングやITネット活用、ウェブサイト改善をしています。個別プログラムで経営者の経営課題を戦略・施策実務・技術の面で解決に導くのが主な仕事。ウェブサービスをつくってアイデアをカタチにしているウェブエンジニア・デベロッパーの面も。プログラムを書いたり、設計をしたり、メディアを作ったり。

最近のテーマは、創造性 (creativity)、マーケティング (marketing)、マネジメント (management)

グローバルブログ (英語)

Twitter, GitHub, WordPress

最近のコメント

  • キャッシュ系のプラグインをWordPre (thingsym)
  • いつもお世話になっています。 初めて質問 (岡田)
  • ご報告ありがとうございます。 そうですね (thingsym)
  • こんにちは。Custom Post Ty (Kei)
  • ご報告ありがとうございます。 エラーは (thingsym)
  • こんにちは最近 vagrant を使い始 (enomoto)
  • 切り替えにスマホ用のテーマはインストール (thingsym)
  • はじめまして。WP初心者になります。スマ (野澤)
  • 先ほどupdateして、問題なく動作する (kome)
  • ご報告ありがとうございます。 本日バグ修 (thingsym)
ページの先頭へ