田舎の技術者が奮闘中

php ruby node.js javascript などのスクリプト言語とサーバー(Chef、Vagrant)に関して書きます。

meteorにtwitter bootstrapを導入する

前回socketstreameにbootstrapを導入したのですが、今度はmeteorに導入を試みてみます。

meteorにbootstrap導入は非常に簡単です。(5分で終わります)
実はmeteorはpackageとしてbootstrapが準備していますので、コマンド一発で導入は完了します。

プロジェクト作成

まずプロジェクトを作成し、作成したプロジェクトに移動します。

$ meteor create test
$ cd test

packageのインストール

とりあえずpackageの一覧を確認してみます。

$ meteor list

amplify           Cross browser API for Persistant Storage, PubSub and Request.
autopublish       Automatically publish all data in the database to every client
backbone          A minimalist client-side MVC framework
bootstrap         UX/UI framework from Twitter
code-prettify     Syntax highlighting of code, from Google
coffeescript      Javascript dialect with fewer braces and semicolons
handlebars        Simple semantic templating language
htmljs            Easy macros for generating DOM elements in Javascript
http              Make HTTP calls to remote servers
jquery            Manipulate the DOM using CSS selectors
jquery-history    pushState module from the jQuery project
jquery-layout     Easily create arbitrary multicolumn layouts
jquery-waypoints  Execute a function when the user scrolls past an element
less              The dynamic stylesheet language.
madewith          Made With Meteor badge
sass              Sassy CSS pre-processor.
showdown          Markdown-to-HTML processor
stylus            Expressive, dynamic, robust CSS.
underscore        Collection of small helper functions (map, each, bind, ...)

上から4番目に「bootstrap」ってのが有りました。
ですのでとりあえずjqueryを入れてbootstrapを入れます。

$ meteor add jquery
$ meteor add bootstrap

これで完了!
5分かからないですね。

感想

かなり便利ですが、ちょっと未熟な部分もまだまだあります。
例えば、lessを使用する際、プロジェクト内のlessファイルは全て自動コンパイルしてしまうので、コンパイルしたくないlessファイルまでコンパイルしてしまいます。

自動コンパイルは確かに便利ですが、コンパイル除外の設定が出来るとイイなぁと思いました。
(publicディレクトリ以下のファイルはコンパイルが走らないので、publicをうまく利用すればいいかもしれないです。。。)

以上です。