事業の成長を支えるマーケティングの顧問サービス / ウェブサイト内製・自主運営

ウェブエンジニア、プログラマのためのプログラミング開発環境「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: 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プラグイン「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のほしい物リスト

カスタム投稿タイプのデフォルトウィジェット一式が詰まったWordPressプラグイン「Custom Post Type Widgets」をリリースしました

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

作ったのはおよそ 3 年前になりますが。最近ソースコードを整理して、というかほぼ標準ウィジェットのソースをベースに機能拡張とリファクタリングしたのをリリースしました。

デフォルトウィジェット 6 点

機能は、Custom Post Type や Taxonomy で絞り込みができる以外は、WordPressの標準ウィジェットとほぼ同じです。






ユーティリティプラグイン「Custom Post Type Rewrite」で日付ベースのパーマリンクを追加

デフォルトでは、カスタム投稿タイプでカレンダーやアーカイブなど日付ベースのリンクが機能しません。WordPressは、カスタム投稿タイプを使ったパーマリンク設定が一部用意されていないようです。なのでカスタム投稿タイプでブログと同じように機能しません。そのためには、カスタム投稿タイプのパーマリンク設定が編集できたり、パーマリンクを追加してくれるプラグインを導入する必要があります。

今回パーマリンクを追加してくれるユーティリティプラグイン「Custom Post Type Rewrite」も作ったのであわせて使ってみてください。ほかにパーマリンク構造が編集できるプラグイン「Custom Post Type Permalinks」などいろいろあるので検討してみてください。

以上でカスタム投稿タイプでブログとほぼ同じように機能します。個人的にコレを実現したかった。是非活用してみてください。

標準ウィジェットと置き換える方法

WordPressプラグイン「Custom Post Type Widgets」を有効化すると、WordPress管理画面のウィジェットにある「利用できるウィジェット」に標準のウィジェットといっしょに追加されます。

標準ウィジェットと機能的に同じで重複して並ぶのはあれだなぁと。標準ウィジェットと置き換えたい場合の Tips です。以下のソースを functions.php にコピペするだけ。

function remove_default_widget() {
unregister_widget( 'WP_Widget_Recent_Posts' );
unregister_widget( 'WP_Widget_Archives' );
unregister_widget( 'WP_Widget_Categories' );
unregister_widget( 'WP_Widget_Calendar' );
unregister_widget( 'WP_Widget_Recent_Comments' );
unregister_widget( 'WP_Widget_Tag_Cloud' );
}
add_action( 'widgets_init', 'remove_default_widget' );

管理画面をスッキリとさせたい場合はどうぞ。

参考: Function Reference/unregister widget

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

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

ライセンス

GNU General Public License v2.0 (GPLv2) licenses

開発

GitHub

Donationware

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

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

thingsymのほしい物リスト