Twitter BootstrapでWebサイト構築したいなあって人はこれ見とけばいいかもしれないよ的なまとめを作る試み
最近はやってますよね、Twitter Bootstrap。もっと早く知っていたらきっとしあわせになれたんじゃないかなって人も多いと思います。ようやくかよ(笑)とか言わないでくださいお願いします
そこで、Twitter Bootstrapを使うために回るといいよっていうサイトをいくつかご紹介。
用意する
いざ使うとなっても、モノがないと話になりません。公式サイトから引っ張ってきてもいいのですが、それだとちょっとナンセンスかなーってお思いの方はこちらへどうぞ。
HTML5 Initializer
このサイトはマウスをぽちぽちするだけで超簡単にTwitter Bootstrapの準備ができます。
一番右の「Bootstrap」をクリックすると細かいチューニング画面が出てくるので、気の向くままにﾌﾝﾌﾌﾝと必要なものやら気になるものやらを選んでいき、あとは「Download it!」をクリックするとZipファイルがダウンロードできます。この間ものの30秒ほど。どこぞの人から「42秒で支度しな！」とふっかけられても余裕ですね。
調整する
これでひとまずTwitter Bootstrapを使ったWebサイトを作ることができますが、Twitterっぽい配色がいや！っていう人もいるでしょう。でもCSSを直接いじるのはちょっと…そんな時はこちらをどうぞ。
まず 簡単に済ませるにはこちら。
Bootswatch: Free themes for Twitter Bootstrap
ここには無料で使えるTwitter Bootstrapのカスタムテーマをダウンロードできます。テーマは11種類、一部はweb fontsなんかも使っているので、デフォルトのテーマとはかなり趣も異なります。お持ち帰りするときは青いボタンの▼をクリック→出てきたメニューの項目を右クリックで保存しましょう。クリックしてしまうと、画面にCSSが表示され、ひょっとしたら白目をむくことになるかもしれないですよ？
※ちなみに、Lessの場合はちゃんとダウンロードしてくれます。
そしてもう少しだけこだわりたい時には。
StyleBootstrap.info
先のサイトにあるテーマでは満足できない場合はこちらをどうぞ。見た目を確認しながら細かい調整ができます。項目がだいたいパーツごとにわかれていて見やすいですね。納得のいく設定ができたらダウンロードしましょう。とりあえず押し間違えたり押し損ねたりすることはないであろうサイズのでっかいボタンが下の方にあるので押すとCSSを作成してくれます。すると右上にボタンが出現するので右クリックで保存しましょう。クリックしてしまうと(ry
組み合わせる
そうして持ってきたTwitter BootstrapのCSSやJavaScriptをまま使うなんてことはまずなくて、たいていは何らかのアプリケーションフレームワークなんかと一緒に使うとおもいます。そこで使えそうなものをいくつかご紹介。
Kickstrap
jQuery UIにTwitter Bootstrapをかぶせたものです。こちらはスタイルの調整にLessを使っており、メンテナンスの手間がかなり省けるかと思います。これを期にLessを導入したいとお考えならばCss2Lessというサイトは覚えておいて損はないでしょう。紹介されているブログがこちらにあります。
Twitter Bootstrap jQuery Mobile Theme
お次はjQuery mobile向けのカスタマイズ。Twitter Bootstrapのデフォルト配色をそのままテーマにしたような感じのカラーが6つ用意されています。謹製のテーマローラーでも似たようなことができるのですが、こちらを使う方がはるかに楽ですね。
CakePHP1.3でBootstrap, from Twitterを使うためのたった2つのファイル - 忍び歩く男 - SLYWALKER
調べてみるとCakePHP向けのカスタマイズされたヘルパーもあるのですが、こちらは今ひとつ思ったとおりに動いてくれないので困りもの。(実はサーバーにアップロードされてなかったせいでしたのであとで紹介します)CakePHPとTwitter Bootstrapを組み合わせたときの問題点を解決した方のブログ記事をご紹介。2.x系を使っている場合は手を加える必要がありますが、スクラッチするよりは随分楽でしょう。
2012/07/05追加。
slywalker/TwitterBootstrap - gitHub
うまく動かない理由がどういうわけかプラグインがサーバーにうまくアップロードされてなかったという落ちでした。というわけで名誉挽回を祈念しつつご紹介。こちらはCakePHPにもとあったヘルパーを上書きするプラグインです。上のリンクからgitなり何なりを使って落としてきましょう。これを/app/Pluginに置いて、ディレクトリ名をTwitterBootstrapに書き換えたら、/app/ControllerにAppController.phpを作成し、
<?php
class AppController extends Controller {
public $helpers = array(
Session', 'Html' => array('className' => 'TwitterBootstrap.BootstrapHtml'), 'Form' => array('className' => 'TwitterBootstrap.BootstrapForm'),
'Paginator' => array('className' => 'TwitterBootstrap.BootstrapPaginator'),
);
}とします。
準備はこれだけ。そうするとCakePHPのヘルパーがTwitter Bootstrapの仕様にあったHTMLを作ってくれるようになります。リファクタリングの必要一切なし！
バージョン管理とは何だったのか
gitoliteの設定をいじっていた時にハマったことがあったのでめもめもです。
その1：リモート側で名状しがたいエラーが出てリポジトリの更新ができない
大元のリポジトリにpushしたらわざわpullしに行かなくてもミラーリポジトリが更新できるようにしたいなーっと思い、ﾌﾝﾌﾌﾝとちょっと設定を変えて、終わったのでうまく動くか確認してみると、こんなことになってしまいました…
$git push
Enter passphrase for key '/c/Users/myname/.ssh/hoge':
Counting objects: 32, done.
Delta compression using up to 2 threads.
Writing objects: 100% (17/17), done.
Total 17 (delta 13), reused 0 (delta 0)
remote: remote: error: refusing to update checked out branch: refs/head/master
remote: remote: error: By default, updating the current branch in a non-bare repository
remote: remote: error: is denied, because it will make the index and work tree inconsisatant
remote: remote: error: with what you pushed, and will require 'git reset --hard' to match
remote: remote: error: the work to HEAD.
remote: remote: error:
remote: remote: error: You can set 'receive.denyCurrentBranch'configuration variable to
remote: remote: error: 'ignore' or 'warn' in the remote repository to allow pushing into
remote: remote: error: its current branch; however, this is not recommended unless you
remote: remote: error: arranged to update its work tree to match wat you pushed in some
remote: remote: error: other way.
remote: remote: error
remote: remote: error:To squelch this message and still keep default behaviour, set
remote: remote: error: 'recieve.denyCurrentBranch' configuration variable to 'refuse'.
remote: To /home/xxxx/certain/git/repository
remote: - [deleted] origin/master
remote: ! [remote rejected] master -> master (branch is currently checked out)
remote: Bad owner or permissions on /xxxx/xxxx/.ssh/config
remote: fatal: The remote end hung up unexpectedly
To gitolite@gitserver:hoge
bf21aa0..f2b9422 master -> master
エラーなのはわかったから貴重な横幅を取らないでください原因はgitoliteの管理ユーザの設定ファイル(上のコードに下線を引いたところのファイル)のパーミッションでした。これが他のユーザにも見えていたため、エラーが起きてしまったようです。他のユーザに見えないように変えてやると、何事も無かったかのように動いてくれました。gitoliteの管理ユーザになり、このコマンドひとつで解決ですね。
$ chmod 600 /xxxx/xxxx/.ssh/config
参考にさせていただいたのはこちらです。助かりました。
ssh で Bad owner or permissions エラー | futuremix
その2：よくわからないけど衝突が起きてリポジトリの更新ができない
これはどう考えても私の不注意です。
add せずにコミットしたら、行頭にdeleteのついたメッセージをやたら大量に吐き出してくれたので慌てて元に戻したんです。それがまずかったらしいですねええ。
$ git pull
fatal: loose object f2b942203b6a3ce514ac9529de4faebb69580d13 (stored in .git/objects/f2/b942203b6a3ce514ac9529de4faebb69580d13) is corrupt
fatal: The remote end hung up unexpectedly
というメッセージが表示され、pushもpullも出来ない困った状況に…
どうやらリポジトリをクローンし直すといいらしいという話を聞いたので、ファイルを一旦退避させ、クローンし直すことに。
$cd git/repositories
$mv repository repo_tmp
$git clone gitolite@gitserver:repository大元のリポジトリも無事で、確認のためにpushやpullをすると問題なくメッセージが表示されました、めでたしめでたし。
それにしても今のところ私一人で使っているリポジトリなのに衝突が起きる時点でなにかおかしいと思うんですよ
なんかyumの調子がおかしいんですけど…
こう、なんか気が触れてたのでしょうね…
$sudo yum install ほげほげって打ったあと、Yumさんがデータベースを更新している最中に
(そういえばアップデートやってなかったなぁ…)
と思いCtrl+Cでキャンセルしてしまいまして。
人として軸がぶれているダメな人ですねはい
改めて
$sudo yum updateと打ってみるとこんなメッセージが。
Error: database disk image is malformedエラーメッセージはとりあえず検索してみるのが基本です。
「yum database disk image is malformed」検索してみると、
「そこはいったんキャッシュをクリアするといいよ」
というがわかりました。さっそく
$sudo yum clear all
$sudo yum updateそうするとうまく行ってくれました。
こんどからはダイアログが出てからNを押してやることにしましょう…
参考にさせていただいたのはこちらです。ありがとうございました。
database disk image is malformed - think-tの晴耕雨読
Fedoraのアルファ版をリリース版にしたかもしれない記録。
私が個人的に使ってたFedora17のアルファ版をリリース版にした時に結構苦労したのでメモメモです。
Ubuntu同様楽だろうなと思って余裕ぶってたら1日潰れてしまいました。アレは楽すぎたので参考になりませんでしたね
はじめはGUIで何とかできないだろうかとpreupgradeでやろうと思いましたあれこれ考えなくてもいいから楽だし。
というわけで早速インストール…
$sudo yum install preupgrade
パッケージ preupgrade-1.1.10-2.fc17.noarch はインストール済みか最新バージョンです
何もしませんされてました(^_^;) というわけで
$sudo preupgradeでPreupgradeを起動してみたものの、ここでまさかの問題が…
アップグレードするバージョンを選択する画面で、選択肢が出てこない
アルファなんぞ使う物好きさんがGUIでアップグレードなんて(笑)という事ですかそうですか…
結局1時間ほどあれこれしたあと、この方法は断念しました。
次にインストールメディアを落としてきて、それでアップデートしてやろうと思いました楽だし。PC組むときにケチったったおかげで光学ドライブを積んでないので、Fedora 17リリース版のLiveUSBを作ってやらないといといけません。
幸運にも謹製のLiveUSB作成ツールがあるので、今回もそれをありがたく使わせていただきました。
FedoraのライブUSBを手軽に作成「Fedora Live USB Creator」 - MOONGIFT|オープンソース・ソフトウェア紹介を軸としたITエンジニア、Webデザイナー向けブログ
アルファ版をインストールした時にもやったし、これなら楽勝だろう。(ヴァルキリープロファイルのルシオ風に)
そう思ってたのですが…
…なぜかブートしてくれない(´・ω・｀)なんだ、この異常な波動は…(ヴァルキリープロファイルの(ry)
二度三度とUSBメモリをフォーマットし、BIOSの設定も見直し、と一からやり直しを試みたのですがちっともブートしてくれない。
仕方なくこれも諦めました。
最終的にyumでアップデートする選択肢を取りました。Fedoraは16から17にバージョンが上がるタイミングでディレクトリ構造が変わっています。具体的には、いままでの/bin、/sbin、/lib、/lib64が/usrディレクトリ以下に移動し、ルートディレクトリにある奴はぜんぶリンクになってます。なので、ツールを使わないアップグレードは少々めんどくさいというかFedoraって所詮RHELの人柱だしだいたいどのバージョンでもアップグレードには四苦八苦したという話しか(ryと聞いていたのですが、もともと変更後のディレクトリ構造だしまあいいよね…ということで、小難しいことは考えずにYumでパッケージのアップデートをします。
$sudo yum updateすると、依存性の解決で競合が起きていました。
sane-backends.x86_64を消すとupdateがとおったなど。[ついっか@ぺりあHD]
— ゆうなんとか@安心と信頼の居眠り姫さん (@yuu_hara) 6月 3, 2012
ということで、sane-backends.x86_64を一旦削除しました。
$sudo yum remove sane-backends.x86_64ツイートの通り、依存性の解決ができたので更新をインストールします。お風呂に入ってる間には終わるだろうと思い、席を外してたのですが、エラーが出て止まってました…
nm-connection-editor.x86_64 リムったらうpだてせいこう
— ゆうなんとか@安心と信頼の居眠り姫さん (@yuu_hara) 6月 3, 2012
今度はnm-connection-editorで名前が競合していたようです。また64bit版と32bit版とで名前が競合していたか…これを一旦削除するとしばらく待った後うまく行きました。
$sudo yum remove nm-connection-editor.x86_64最後に念のため、upgradeしておきました。
$sudo yum upgrade
更新と設定されたパッケージがありません。…どうも必要がなかったようです。
試しにバージョン情報を確認してみます。
$cat /etc/fedora-release
Fedora release 17 (Beefy Miracle)
$uname -a
Linux ********** 3.3.7-1.fc17.x86_64 #1 SMP Mon May 21 22:32:19 UTC 2012 x86_64 x86_64 x86_64 GNU/Linux めでたしめでたし。
今度のオフ会で着る服買いたかったけど予定がパーになったよ！
スケジュール管理の方法としてこれはどうだろうか、なんて。
実は恥ずかしながらこの年にもなって、 今までまっとうにタスク管理ができた試しがない んです。
夏休みの宿題なんかははじめはそこそこやるのものの、中盤になってくるとどんどん溜まってきて、そして間に合わない。そんないけない生徒でした。
そして未だにこれといった特効薬が見つからないまま大人になってしまいました。あーあ…
担当の先生からも再三注意され、おすすめのツールを教えてもらって少しやってみるものの、あれよあれよと達成できないタスクが山積みになり、気がつけばだれててやめている…ああ、そういうのがうまくできない人間なんだなと思っています。
ただ、今回は色々と環境を整えてみました。まあ続くかどうかはわかんないんだけどねー
タスクリスト「Astridタスク」
とりあえずやることから逃げないようにしようと、なるべく「溜まってきてることを意識できる」ようにしようと考えました。
そこでみつけたのがこれ。たこさんウィンナーみたいなマスコットがかわいい(*´ω｀*)
GoogleアカウントかFacebookアカウントがあればすぐに使えて、Google Tasksと同期させることができます。
タスクごとに優先度を設定でき、コメントを残したり(まだやったことないけど)作業時間を測ったりもできます。また、設定しておけば毎月やるようなタスクなら自動的にタスクリストに加えるといったこともしてくれます。
アプリとプラグインは、期限が過ぎたタスクがあると知らせてくれます。添えられる一言が地味にグサッときます。
(ここでスクリーンショットと言いたいところですが今溜まってるタスクがないのでまたあとで追加する、という旨をタスクリストに追加しましたｗ)
溜まってくると通知領域がこのキャラだらけになります。
(3つほどダミーのタスクを貯めておく仕事をタスクリストに追加しておきましたｗ)
先週の火曜日、私が使っているガジェットやブラウザに、プラグインやアプリをインストールし、Webのタスクリストをブックマークするだけの簡単なお仕事を済ませました。ここまでやって続けられなかったらどうしよう…自分との勝負ですね。
