自分用twitter bootstrapを管理する

ウェブ業界なんかだとデザイナーさんがいるので、「デザインがーーーーー」みたいなのはクリティカルな問題にはならないのかもしれないが、製薬系の研究所とかだと、研究所内のシステム構築のためにデザイナーを雇うとかまずあり得ないので、しょっちょう悩みます。

特に、イントラでウェブサービスやろうとか思ったらjQuery使って見ためを良くしたりとかユーザビリティとか考えて使いやすくしたりといったフロントエンドのスキルは必須。

つまり、モックを使ってできるだけ早く70点のユーザーインターフェイスを作るスキルが超重要なわけだ。

しかも、twitter bootstrapを使おうと思ったら、頻繁なバージョンアップに対応しないといけないわけで。

GitHub対応

GitHubハンズオンやったので、その時の@ishisaka資料を参考にすればいいと思います。

とりあえず、本家からforkしたらcloneして、upstreamを設定します。

git clone git@github.com:kzfm/bootstrap.git
cd bootstrap/
git remote add upstream https://github.com/twitter/bootstrap.git
git fetch upstream
git merge upstream/master

これで最後のニ行を叩けば常に本家の更新に追随できるようになります。

設定を変更

Twitter Bootstrap Customization Best Practicesの後半を参考に、bootstrap.lessとvariavles.cssをコピーして自分用の設定ファイルを用意する。my_bootstrap.lessとmy_variavles.lessにした。Makefileのbootstrap.lessもmy_bootstrap.lessに変えておく。

こうしておけば本家のファイル群を変更する必要がないので、いつでも

git fetch upstream
git merge upstream/master

すれば、本家の更新に対応できる。

コンパイルしたい場合には

$ make bootstrap
mkdir -p bootstrap/img
mkdir -p bootstrap/css
mkdir -p bootstrap/js
cp img/* bootstrap/img/
recess --compile ./less/my_bootstrap.less > bootstrap/css/bootstrap.css
recess --compress ./less/my_bootstrap.less > bootstrap/css/bootstrap.min.css
recess --compile ./less/responsive.less > bootstrap/css/bootstrap-responsive.css
recess --compress ./less/responsive.less > bootstrap/css/bootstrap-responsive.min.css
...
cat bootstrap/js/copyright.js bootstrap/js/bootstrap.min.tmp.js > bootstrap/js/bootstrap.min.js
rm bootstrap/js/copyright.js bootstrap/js/bootstrap.min.tmp.js

bootstrapディレクトリ以下にコンパイルされる。

その先

あとは、Twitter Bootstrap+その他で「本当に」イケてるモックを作る手順なんかを参考にしながらいい感じの自分用モックを量産すればいいと思うのだが、そういうのをもくもくとやるといい気がしませんか?

というか、やることにしたので興味があれば参加するといいと思います。プレゼンしたいひとも歓迎。

静岡デベロッパーズつくる会#6 (Mock! Mock!)

だらだらと作ってもよし、黙々と作ってもよしのつくる会です。前回同様、好きな時間に来て好きな時間に帰ってかまいません。

今回はMock! Mock!とモックをモクモクいじる回にしてみました。みんなで一緒にtwitter bootstrapをいじりましょう。

ProductName レスポンシブ・ウェブデザイン標準ガイド あらゆるデバイスに対応するウェブデザインの手法
こもりまさあき
エムディエヌコーポレーション / 2625円 ( 2012-05-25 )


素数夜曲: 4章 ゆるやかに等しく

群論の初歩みたいな章。整数論から群の説明に入っており非常にわかりやすい。

要素間にある計算方法があり、それに関して閉じていること、その計算方法が結合法則を満たすこと、単位元が存在すること、及び各要素それぞれに対応する逆元があることの4つを満足するものを群と呼ぶ

合同という概念は特殊なものだと思っていたけど、合同の特殊な概念(0を法とした)が、慣れ親しんだ等号という説明は目から鱗だった(p. 101)。

4.7から偶奇に対する剰余系を例にとって群とは何かを説明しているのだがわかりやすかった。

ProductName 素数夜曲: 女王陛下のLISP
吉田 武
東海大学出版会 / 3780円 ( 2012-06-26 )


これはガロア理論につながるわけですな。あみだくじの操作体系を例にとった理由がなんとなく納得できたが、これは今思うとそもそも閉じているので、閉じているというのはどういうことなのかは剰余群の説明のほうがしっくりきたかも。

ProductName 数学ガール ガロア理論 (数学ガールシリーズ 5)
結城 浩
ソフトバンククリエイティブ / 1995円 ( 2012-06-01 )


結局なんのための群論なのかというと、僕にとっては圏論のためであって。

ProductName Basic Category Theory for Computer Scientists (Foundations of Computing)
Benjamin C. Pierce
The MIT Press / 2302円 ( 1991-08-07 )


通勤どこでも仕事術

だいたい知っていることだった。出張報告書の予想版を予め書いておくというのは参考になった。

ProductName 通勤どこでも仕事術
美崎栄一郎
ぱる出版 / 1470円 ( 2011-07-30 )


電源タップは持ち歩くのに便利なのが欲しいなぁと思ったので、モバイルタップを買ってみた。

ProductName SANWA SUPPLY モバイルタップ 2P・3個口 ホワイト TAP-M1W

サンワサプライ / 682円 ( 2012-01-31 )


今日の畑(120909)

土日は久しぶりに暑い週末だった。

1347179921

先週でオクラとゴーヤを処分して、まる二日くらいかけて畑を綺麗にした。一ヶ月くらい放ってあったので、雑草がジャングル化していた。ゴミ袋4袋の分量を捨てたのは始めてた(一袋分くらいは堆肥として埋めたけど)。

畝立てをして、大根(三太郎、紅芯大根)とホウレンソウ、浅葱を植えといた。

1347179920

今残っているのは、モロヘイヤとサツマイモ。サツマイモはそろそろ収穫できるんだけどいつ掘ろうか考え中。娘と息子の暇な時を見計らって決行予定。

1347179918

近所のホームセンターとか苗屋さんにいったら、ブロッコリーの苗が出回っていたんだけど、年内収穫予定の苗らしい。今から種を撒くと2月収穫らしいので、種から蒔いてみることにした。害虫対策めんどくさいしね。

1347179923

発泡スチロールの箱にブロッコリーとカリフラワーを10ポットづつ作った。

こうしておくと、蓋すれば保温になるし移動も楽だしね。となりのおじさんに教わった。

みんなのPython 第3版

白地から赤地へと、ちょっと攻撃度が上がった。

ProductName みんなのPython 第3版
柴田 淳
ソフトバンククリエイティブ / 2940円 ( 2012-08-29 )


そろそろpython3に移行すべきか悩む。

まぁ、僕の場合はFlaskがサポートすればさくっと移行するような気がするが。

それまでは2.7系で頑張る。

pygamessも対応させないといけないなぁ。

インターネットのカタチ

読み物として面白かった。

オススメ。

つながりすぎた世界は正のフィードバックに脆い

僕はFacebookがあまり好きじゃなくて、その理由が、なんとなく雰囲気がポジティブすぎるっていうことなんだけど、元はてな・GREEのプログラマ 伊藤直也が語る、ソーシャルメディアの功罪。を読んで、なるほどと思った。

なるべく個人個人が見たいと思っているものだけが表示されるようになってきている。見たくないものはネットに存在しないかのように。このままいくとコンテンツの中立性もなくなってしまうから、インターネットのアーキテクチャをもっと基本に沿ったものにしろ、と。イーライ・パリサーの『フィルターバブル(邦題:閉じこもるインターネット)』という本でも同様の指摘がされています。そういったインターネット批判というか、以前と比べて良くないものになってきてるんじゃないの、っていう指摘をする方は多くなりましたよね。

というわけで、僕の中ではFacebookの設計思想そのものがダメという結論に達して満足した。強連結ってのは知っている情報しか集まらないし、ムダに増幅しちゃうしね。

そういう視点を持てると、本書は面白いと思う。

ProductName つながりすぎた世界
ウィリアム・H・ダビドウ
ダイヤモンド社 / 1890円 ( 2012-04-20 )


  • インターネットは、帰属感を醸し出す上でこのうえないメディアだ
  • レバレッジに規制を

生体系だと、正のフィードバックってのは血液凝固系とか危機管理のために存在することが多いよね。基本的にシグナル伝達系はデフォルトで負のフィードバック(基本off)がかかっていることが多いし。実際に、正のシグナルが行きすぎると癌化するメカニズムも多いよね。

個人的には、正のフィードバックをデフォルトにもってくアーキテクチャは制御できなくて最終的に破綻するんじゃないの?と思ってる。

Scratchがなかなか良い感じ

子どもにプログラミングを教えようかなぁと思って、Scratchをちょこちょこと触っている。

この前、数当てゲームを作ったんだが、もうちょっと突っ込んだことをやってみたかったので探したら、Scratchでシューティングゲームをつくる連載があった。これを一週間くらいかけてやってみたら、Scratchのプログラミングを一通り覚えられたのでオススメ。

実際にシューティングゲームを作ってみたら、意外に大人でも楽しいということがわかったのが収穫。おもちゃ系の言語かなとおもっていたが侮れない。ワークショップなんかは親子で楽しめそうなので、是非やりたいところ。

侮れないポイント

普通にオブジェクト指向だが、継承は使わずにコピーする。

新しい機能を加えたらコピーしなおしなのがちょっとめんどくさいけど、普通はあまり気にならないかもしれない(僕は面倒に思ったが)。

メッセージングでやりとり

他のオブジェクトにはメッセージで意図を伝える。オブザーバーパターンが最初から組み込まれている感じかな。ブロードキャストなメッセージングなので送ると受け取るメソッドで悩まない。

ここらへんはイベントドリブンな感じがして楽しい。

当たり判定がついてる。

最初から接触系のメソッドがあるので余計なことに悩まなくていい。これは非常に楽。

子供に教えるために、軽い気持ちで触ってみたけど、HTML5のCanvas使ってゲームをつくるのが初めてだったら先にScratchでシューティングゲームでもつくってみたほうが学習効果が高いかもと思った。

この本もいいけど、こっちのほうが説明が丁寧だな。

もう少し作って覚える系のScratchの本が出てもいいのにと思う。

HTML5でゲームを作ろうと思ったら余計な作業が多くて、ちょっと飽きるかも。enchant.jsはどうなんだろうかと興味がある。

ProductName HTML5 Canvas
Steve Fulton
オライリージャパン / 3360円 ( 2012-01-21 )


とかいいつつ僕はそろそろTitanium Mobileに戻るわけであるが。

日付の扱いを簡単にするPythonのパッケージ

そろそろ、うちの家庭菜園も秋植えの準備をしないといけないのに、お盆辺りから3週間くらい放っておいたら草ぼうぼうになってしまいげんなりしている。

さらに逆算したら大根の蒔きどきがギリギリなのでちょっと焦っている。石灰なんてまく余裕が無いので、このまま畝を立てて種まきしようかなどと思っている。

浅葱も植えてないし、8月は完璧に堕落したなぁ。葉物はやらんからいいけど。

さて、野菜を育てているとわかると思うのだが、収穫時期が

  • 定植してから100日後
  • 蒔いてから120日後

などと書いてあることが多いので、家庭菜園系のパイソニスタは日付計算に明るくないといけない。

>>> from datetime import datetime,timedelta
>>> datetime(2012, 5, 6) + timedelta(120)
datetime.datetime(2012, 9, 3, 0, 0)

こんな感じで収穫時期を見積もっているが、実際のところ覚えにくい。

そんなわけで、もうちょっと簡単に書けるwhenってのを見つけた。

これを使えば、今人参を撒くといつ収穫できるかとかさくっとわかる。

>>> import when
>>> when.future(days=110)
datetime.datetime(2012, 12, 23, 19, 55, 23, 107442)

今日撒くと年内くらいから収穫できる感じですかね。

まぁ、timedeltaの使い方を覚えてしまったのでいつものように計算してもいいかなぁ。

それよりも何を育てるか決めないと。

最近AudioPornがお気に入り

最近AudioPornというDrum'n'Bass,Dubstepのレーベルが良い感じだ。

Having been a huge contributor in the growth of Ram Records for over a decade, Shimon was an integral part of the label from 1994 through 2006 releasing anthem after anthem with hits such as ‘Quest’, the instantly recognizable ‘Hush Hush’, the infectious ‘Body Rock’, and the hugely popular ‘The Shadow Knows’. He also made up one-third of the super-group Ram Trilogy, alongside Ant Miles & Andy C, releasing a torrent of chart-topping tracks such as ‘Chase Scene’, ‘Gridlock’, ‘Titan’, ‘Beastman’, and ‘Screamer’, helping to build the iconic reputation the label enjoys today.

とあるが、RAMよりはサイバーっぽさが少なめで艶多めな感じのRaveのテーストが漂う感じが気に入っている。

それからBlu Mar Tenのポッドキャストも始まって、これもなかなか良い感じ。ドラムンベースのポッドキャストというよりはもっと幅広い話題を扱っていて、初回にFSOLの曲が流れてきて、おー懐かしいというか、アンニュイ度が高くてこれもなかなかオススメ。

ProductName Natural History
Blu Mar Ten
Blu Mar Ten / 2634円 ( 2009-10-23 )