Archives for 9月2011

閑話休題:フロウトは減ってゆく

シロウトはまっすぐ行く。クロウトはよく考えて進む。フロウトは回り込む。
@kara_d
Kazuhiro Hara

ブログがない頃は、オモシロネタをTwitterへ投下してもスルーされて終わりがちだったが、自分のブログを作ったからには、もう違う。ここで更に取り上げて何度も味わえるようになるのだ。タイトルに閑話休題とつけているのは、意味があって、自分の過去のツイートとかをフィーチャーする際につけようと考えている。このタイトルがついたときは、役に立たないから要注意だ。

さて、今回はフロウトについてとりあげる。フロウトっての話をしすぎると、上のネタを解説してしまうことになるので、あまり書かないが、

CSS Nite LP, Disk 17「HTML5による電子書籍」

の境さんのセッションで少し紹介されたこれからのレイアウト手法は、時代の変わり目を印象づけさせるものであった。

CSSレイアウトの流れが大きく決まったのは、大昔WiredマガジンのサイトがフルCSSでリニューアルされた後のことだ。Wiredマガジンは、確かにフルCSSでレイアウトされていたものの、あれのソースを真似して自分で組んでみた事がある人は、意外とこの手法で細かなレイアウトをフレキシブルに縦方向を可変にした上で行うのは限界があるなと気づいたはずだ。

そこで別の某レイアウト手法が脚光を浴びていくことになるが、この手法も新しいグリッドレイアウト手法の発達により、過渡期の存在として歴史に残っていくことになるはず。

そのあたりも、レポートしていけたらと考えている(どこで?)

Read More

TwitterのようにチップスをシェアするサイトTipshare

ちょっと前にやって大好評だったデザイナー向けCakePHP勉強会を一緒に開催したCakePHP仲間である、

@mon_satさん
と、
@konsanさん

TipshareはTwitter Bootstrapをベースにしている

Tipshare
http://tipshare.info/

というサービスを立ち上げたみたい。

「チップスをツイッターみたいな気軽な感覚で共有できるサイト」とのことで、注目のプロジェクトだ。
ちょっとしたチップスはブログで気合い入れてかくほどでもなく、かといって忙しいさなかにどこかにメモるでもなく日々埋もれていきがちだ。

そんなときにTipshareを使うといいだろうね。

エンジニア視点での見所は、Twitter Bootstrapを使って一気にUIを作っていること(UIを作り込んでから公開ではなく、とにかく作って公開し、ブラッシュアップしていくというスタイル)の他にも、今年末にリリースされる予定のCakePHP 2.0を使っていたり、NoSQL系のデータベースMongoDBを使っているあたりも要注目ポイントといえる。

また、GitHubのマイクロコード共有サイトGistに投稿されたコードを取り込むという機能もついているのが面白い。

Gistにはちょっとしたコードがいっぱい

URLを入力するだけで、Gistのフォーマットに変換されて表示される。

Gist経由でコードがカラフルに!

CakePHPコミュニティで使う人が増えているためチップスの中心がCakePHPに偏っているが、IT系ならどんなチップスでもいいとのこと。

ところで、このサイトの名称は、Tip Share(チップスをシェアしよう)なのかTips Hare(チップスを貼れ)なのかというのがコピーライティング的な部分の筆者的ツボだ。

あと、このペンギンのようなキャラクターはなんだろう?

名前募集中なのであろうか?

詳細は追って待て!

※一部、TipshareをTipstarとTypoしてしまった..

Read More

Twitter Bootstrapの導入への3ステップ

Twitter Bootstrapには、導入をして使う方法が下記の3パターン存在する、、

  • そのままCSSをがりがり変えて使う方法。
  • lessを使って書いていき、JavaScriptを使って呼び出す方法
  • 黒い画面で専用のシェルスクリプトを使ってコンパイルする方法

と前回書いた。

ので、それらがどういうものかを書いていこうと思う。

まず、「そのままCSSをがりがり変えて使う方法」から見ていこう。

そのままCSSをがりがり変えて使う方法

Twitter Bootstrapは、CSSフレームワーク(というくくりにはいれないほうがいい気がする。UIフレームワークという位置づけがいいかもしれない)の中では、新しい世代のものだ。というのも、純粋なCSSの元ファイルがあり、それを継承したりいろいろして使うというタイプではなく、lessというスタイルシートコンパイラ的なアプリケーションを使って、より効率的にCSSをデベロップすることができるからだ。

と書くと、なんだか敷居があがってしまうかもしれない。
Twitter Bootstrapがlessを活かしたフレームワークだからといって、lessを使わないといけないわけではない。

そこで、手っ取り早いのは、ダウンロードしてついてくる「bootstrap.css」をそのまま使う点だ。

方法としては、「bootstrap.css」をそのままHTML上で読み込んで、別のオリジナルCSSを利用して上書きをするという手法が考えられる。標準のCSSをどうしても変更したい場合は「bootstrap.css」自体を編集してしまってもよい。

lessを使って書いていき、JavaScriptを使って呼び出す方法

泣く子もだまるlessの本家サイト

http://lesscss.org/

CSSをそのまま使う手法に慣れてきたら、JavaScriptで呼び出す手法を試してみよう。JavaScriptで呼び出す手法は、lessのトップページにも書かれていて、「less.js」を使って、「lib」ディレクトリに入っている

  • bootstrap.less
  • forms.less
  • mixins.less
  • patterns.less
  • reset.less
  • scaffolding.less
  • tables.less
  • type.less
  • variables.less

を動的にコンパイルをしてCSSとして呼び出す方法となる。
面白いのは「link rel=”stylesheet/css”」ではなく「link rel=”stylesheet/less”」となる点。

ちょい変則的な書き方

でも、この方法は実は中間点地点にしか過ぎないと思ってる。
というのも、ユーザーがアクセスするたびにコンパイルされるのは、表示の際のオーバーヘッドが大きすぎると思うからだ。何かアクセスごとに変化するようにしてあるのならともかく、何度アクセスしても変わらないものを出力するのにJavaScriptを使うのは非効率な気がする。

ただし、lessの練習をするには、うってつけだと思う。そもそもlessってなんぞや?って人もいるのではないだろうか。でもその話は長くなるからまた今度。

3つ目の「黒い画面で専用のシェルスクリプトを使ってコンパイルする方法」への移行もおすすめしておく。

黒い画面で専用のシェルスクリプトを使ってコンパイルする方法

Twitter Bootstrapはここにきてぐっとハードルがあがる。
ローカル環境でのコンパイルに必要なハードルは以下の5つ

  • 黒い画面での作業
  • node.jsのインストール
  • npmのインストール
  • lessのインストール
  • コンパイルコマンドの入力

具体的なインストールについては後日Mac版の話をしようと思う。

Twitter Bootstrapをこの方法で導入することによるメリットのほうを書いておきたいと思う。
まず、Twitter Bootstrapをこの方法で導入すると、出力ファイルが「bootstrap-min.css」のように
小さいサイズに出来る点がある。

加えて、これら出力ファイルの名前もシェルスクリプトの変更によりカスタマイズすることが出来る。

おまけに、lessのサーバー側での変換、node.js(あこがれているけど導入してないひと多いげ?)の導入、npmの勉強なども出来てしまうのだ。

ということで、3つ目の方法でいくのがいいっすね!

続きはまた書くよー。

Read More