もういい加減、馬鹿の一つ覚えのようにBootstrapを採用するのは辞めろ

ってことで、釣り的なタイトルで始めました。
口を開けば「ブートストラップでいいじゃん」とか言っちゃうエンジニアが多いので、
ちょっと言及しときますよ。

エンジニアにとってのWEBデザインの歴史

エンジニアとして見てきた経験上ですが、

その昔から長らくは、テーブルタグとBRタグによるデータの配置

そして一昨年くらいから、Twitter Bootstrap(現Bootstrap)を使ってみたりしてる。

そりゃあ、見た目には雲泥の差があります。
使いたいのは分かるし、個人的にも(見た目が重要ではないシステムでは)使っている。

別に使っていいんですよ?

別に、手っ取り早くサービスを展開させたい場合にBootstrapを使うのは間違っていない。
何より、工数も減りさくっとリリースできる。
デザインのセンスがなくてもそれなりの見た目になる。
おまけに、スマホ対応もレスポンシブで解決!
スタートアップにはこれ以上のツールは無いかもしれません。

ただ、適さない場合もある

適さない例をいくつか挙げます。

  • サービスがブランディングを大事にしている
    →ブランディングを大事にする場合、独自色を出さなければなりません。
     Bootstrapをカスタムするよりデザイナが一から組んだ方が早いです。
  • 表示するデータが多い
    →密にデータを表示したい場合や、様々なデータを表示しなければいけない場合は素のBootstrapが適してるとは言い難いです。
     また、下手にレスポンシブにするとデータが見にくくなるし、考慮対象が増えます。

要は、カスタムしていく前提であるなら、0からCSSを書いた方が早いしメンテナンス性に優れています。

Bootstrapを採用する場合の懸念

今を大事にするばかりに勢いで採用してしまいますが、懸念はいっぱいあります。

  • バージョンアップがしばしば行われますが、定期的にかつ確実にメンテできますか?
    JQueryのバージョンも絡んできますが、保証して動かしていけますか?
  • そもそも、HTML4.01と、XHTMLと、HTML5のマークアップの違いを理解してますか?
    現状で、ちゃんとマークアップできますか?テストでマークアップの間違いを見てますか?
  • ユーザビリティを意識して画面を設計できますか?
    レスポンシブを採用する場合、さらに設計は難しくなりますがあなたの設計でユーザを引っ張っていけますか?
  • カスタマイズする場合は、クラス指定などが増えますが、ちゃんとついていく意志がありますか?

要するに、HTMLやCSSを理解する気がない場合に採用するのは開発を楽する為でしかなく、知識としての問題解決には至りません。
ユーザーの環境やユーザー層、求められるUI・UXについて理解は及んでいますか?理解する気はありますか?

また、エンジニアとして工数が減るからBootstrapを採用するという理由の場合は、サービスとしては間違っています。
開発の最適化をしても、ユーザ数や売上の最大化にはなりません。

まとめ

提供するサービスの目的とサービス全体としての目標を見紛うこと無くやっていきましょう。
ツールやモジュールは用法用量を正しい知識を持って使いましょう。

最後に

JapdoorはBootstrapを応援しています。
http://getbootstrap.com/

Ubuntu Studio 13.10 の日本語入力を設定したので覚書。

目指すのは英語環境+日本語入力(英語キーボード)。

設定方法

  1. ibus-anthyをインストール
  2. 一旦ログアウトして再ログイン
  3. Settings – Keyboard Input Methods – General – Next input method:
    テキトーに好きなものを設定。個人的には[Alt] + `でwindows環境と合わせた。
    Macと合わせるのもアリです。(両方英字配列で使っている)
  4. Settings – Keyboard Input Methods – Input Method
    show all input methodsを押し、JapaneseからAnthyを選択し、Add
  5. Settings – Keyboard Input Methods – Advanced
    Use System keyboard layoutにチェックを入れる

参考

UbuntuStudioTips
第296回 Ubuntu 13.10と日本語入力 / Ubuntu Weekly Recipe

Ubuntu Studio をインストールしてみた。

“クリエーターの為のOS”って事で、響きだけでごはん3杯くらい食べられそうなUbuntu Studioをインストールしてみました。

きっかけはDTM界隈での有名なライターさんである藤本さんのこちらの記事
「UbuntuでDTM」の人気再び? USBオーディオやDAWソフトとの連携を試す
Ubuntu Studioという存在自体を知らなかったので、目からうろこでした。

インストール

通常のUbuntuからも、apt-getでモジュールを入れることでアップグレード(?)できるということでやってみましたが、
なんだか半端な状態になったので、クリーンインストールしました。

OSのダウンロードとインストールはこのへん。
http://ubuntustudio.org/download/
DVDからのインストールとUSBからのインストールが公式に紹介されています。

キャプチャ

バージョンは最新の13.10です。
デフォで色んなアプリが入っており、
マウスオーバーでどんな機能があるかを表示してくれるので、初心者にもやさしいです。
Screenshot20140225_235202

Screenshot20140225_235709

Screenshot20140225_235818

Screenshot20140226_001233

現在、取り敢えずインストールしたという段階で、
日本語入力の設定がよくわかっていないので、その辺を別途記事にできたらと思います。

[Cakephp2]CakeShellの俺氏用テンプレ

クーロンジョブに登録して一括メール送信とかに使うパティーンのコード

app/Console/Command/SampleShell.php とかで保存

<?php
//テキトーに書いたので動きません。
//こんな感じってのをつかむ用のコード
App::uses('CakeEmail', 'Network/Email');
class SampleShell extends AppShell {
	// tables
	public $uses = array('Order');
	public function main() {
 
		$data = $this->Order->find('all', 'conditions' => array(/* コンディション書いちゃいなよ */));
		foreach($data as $one) {
			$Email = new CakeEmail('default');
			$Email->template('reminder', 'default');
			$Email->subject('さむしんぐらいく るーてぃーん');
			$Email->to($one['User']['email']);
			$Email->viewVars(array(
				'name' => $one['User']['name'],
				'product' => $one['Product']['name']));
			$Email->send();
		}
 
		$this->out('Fin.');
	}
}

参考

Console and Shells
Running Shells as cronjobs

Chromeで拡張機能なしでスマホ画面エミュレート

https://developers.google.com/chrome-developer-tools/docs/mobile-emulation

標準機能でできます。

emu01

emu02

emu03

結構使えます。

PhantomJS で サーバーサイドHTMLキャプチャー(ブラウザサイズ指定、オフセット指定、レクタングルサイズ指定、ズーム指定)

PhantomJS

サーバーサイドはコマンド実行できれば何の言語でも問題ないです。

たとえばPHPで

php

<?php
 $imageName = exec("/usr/local/bin/phantomjs ./js/capture.js $target $filename $browser_width $browser_height $offset_x $offset_y $rectangle_x $rectangle_y $zoom $is_all");
 echo "<img src='{$imageName}' />";

capture.js

var system = require('system');
var page = require('webpage').create();
 
var filename = 'output/' + system.args[2];
 
page.viewportSize = { width: system.args[3], height: system.args[4] };
if (system.args[10] != 'true') {
 // setting : capture offset, rectangle size
 page.clipRect = { top: system.args[6], left: system.args[5], width: system.args[7], height: system.args[8] };
}
// setting zoom
page.zoomFactor = (system.args[9] / 100);
 
page.open(system.args[1], function() {
  page.render(filename);
  console.log(filename);
  phantom.exit();
});

パラメーターは想像してください。

[CakePHP2] FormHelper::submit は escape 設定に対応してない

デフォはtrueでfalseに変えられない。

ってことで、エスケープされたくない場合は
FormHelper::button を使いましょう。

使用バージョン CakePHP2.4.3(現最新)