シングスブログ

中小企業のマーケティングやブランディングのコンサルティング。事業運営、組織運営のPDCA改善やホームページの制作、ウェブサイト改善などITネット活用を中心にサービスを提供しています。

メニュー

Nav Menu メニュー項目の id/class 属性を整えるWordPressプラグイン「Nav Menu Trim」を作りました

WordPress が生成する Nav Menu のメニュー項目には、id 属性や class 属性にたくさんの値が追加されます。

実際 WordPress テーマの設計やスタイルシートで使うのは、
現在の表示しているページかどうかの class 属性値 current-menu-item だったり、
ドロップダウンメニューを作るために、または矢印アイコンをつけたりするためにサブメニューがあるかどうかの class 属性値 menu-item-has-children の 2 つだけあれば良かったりします。

WordPressプラグイン「Nav Menu Trim」は、Nav Menu のメニュー項目の id/class 属性を必要なものだけに整えてくれるプラグインです。
ユーティリティな感じで作ってみました。

使い方は簡単。

インストールして有効化すると。WordPress のカスタマイザー「Menus」の下のほうに メニュー「Nav Menu Trim」が追加されます。
そこで取り除きたい項目をチェックするだけ。

外観 > カスタマイズ > メニュー
(Appearance > Customize > Menus)
Nav Menu Trim オプション項目

id 属性値と class 属性値すべてを取り除きたかったらすべて選択。
ドロップダウンメニューを作ったり、メニューにアイコンを付けたかったら上 3つだけ選択。

またメニュー項目を作るときにつけられるオプション CSSクラスで独自の属性値がつけられるので、class 属性を独自の値だけにしたいときにも役に立つと思います。

WordPress テーマ設計で HTMLやCSS にこだわりを持つ方にどうぞ。

ウェブエンジニア、プログラマのためのプログラミング開発環境「VAP」をリリースしました

プログラミング開発環境 Vagrant Ansible Programming languages (VAP) を作りました。

VAP は日常的にプログラミングするウェブエンジニア、プログラマのための Ansible playbooks です。Vagrant でプログラミング開発環境を立ち上げて、プログラミングをしてプロダクトを作ったり、ソフトウェアの技術課題の検証やバグ・不具合の検証ができます。

エンジニアにとって開発環境の構築に時間がかかる手間を減らしていきたい、社内で開発環境を整えるツールとして活用できます。

VAP の特長は、3つ。

  • 様々な組み合わせのサーバとデータベース構成で構築
  • Ruby, PHP, Perl, Python などプログラミング言語をバージョンを指定してインストール
  • Develop & Deploy ツールのインストール

以前 2014年12月に WordPressサイトを開発する WordPress開発環境 Vagrant Ansible WordPress (VAW) を作ってリリースしました。VAW はアップデートを続け、いろいろなノウハウを蓄積してきました。VAP は、そのコンセプトをベースに開発環境を素早く立ち上げてアイデアを試して、終わればその開発環境を捨てるという試行錯誤ができる環境を目指してみました。

今後もサポートするプログラミング言語を増やしたり、Develop & Deploy ツールの充実をしていきたいと思います。

以下、GitHub にある VAP の readme-ja.md です。(updated: version 0.1.2 - 2016.09.12)

続きを読む

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: https://thingsym.github.io/flexbox-grid-mixins/

Mixins Reference and Example

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

License

The MIT License (MIT)

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

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

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

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

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

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

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

カスタム投稿タイプのリンクを追加するWordPressプラグイン「Custom Post Type Rewrite」をリリースしました

カスタム投稿タイプのパーマリンクを追加するWordPressプラグイン「Custom Post Type Rewrite」をリリースしました。

カスタム投稿タイプを使ってテーマを開発するとき、ブログとして機能しなかったりします。カスタム投稿タイプでは日付ベースと投稿者ベースのパーマリンクが対応していないのが原因。

プラグイン「Custom Post Type Rewrite」は、カスタム投稿タイプを使ったとき、WordPressがデフォルトで用意されていない一部のパーマリンクを追加してくれるユーティリティプラグインです。

WordPress管理画面のパーマリンク設定に対応して以下のパーマリンクを追加します。

  • 日付ベース
  • 投稿者ベース
  • フロント

カスタム投稿タイプを使ったテーマ開発に是非使ってみてください。

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

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

ライセンス

GNU General Public License v2.0 (GPLv2) licenses

開発

GitHub

Donationware

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

If you like this plugin, please donate to support development and maintenance.

thingsymのほしい物リスト