JavaScript超初心者向け Meteor メモ (6) 外部パッケージを使ってみる
Meteor.jsは、 Webアプリづくりを楽しくする フレームワークです。
今日出た0.9.0！今回の目玉は、Meteoriteの統合！なので、早速使ってみることに。
これまでも、Rubyで言うところのgemのようなパッケージシステムとして、Meteoriteが利用できましたが、従来はMeteorとは別にnpmでインストールする必要がありました。
それが、今回のバージョンアップで統合されたようです。
これを機に、外部パッケージの使い方を見てみたいと思います。
早速Update！
まず、meteorを v0.9.0にupdateします。
これまで通り、
> meteor update
と入力することでUpdateできます。
Updateすると、
こんな画面が表示されます。
Exciting news! The Meteor package system has gotten a major upgrade.
うん！早く使いたいね！
meteor searchというものが追加されましたので、まずは検索してみよう
Meteor Blog 「Introducing Meteor 0.9.0 and the official Meteor packaging system」に、下記のような説明があります。
You can
meteor addandmeteor removeany package directly from the command line, not just core packages. You don't need to usemrtfor these things anymore. You can evenmeteor searchfor packages, even while offline (though you'll have to go online to download new packages that you don't have cached locally).
いままでは、meteoriteをインストール後、mrtコマンドを使って外部パッケージをインストールする必要があったけど、v0.9.0からは通常のパッケージ同様にmeteor addやmeteor removeが使える。さらには、検索のために、meteor searchが使えるようになったとのこと。
なるほど！
早速やってみましょう。
とりあえず、前回触ったaccounts-uiに関連する外部ライブラリが無いか探してみることにします。
>meteor search accounts-ui
すると、
こんな風に表示されました。
標準のaccounts-uiやaccounts-ui-unstyledが見つかるのは当然として、それ以外に、4つほどmrt:という文字で始まる名前のパッケージが見つかりました。これらが 0.9.0より前のバージョンではmeteorコマンドでは利用できなかった外部パッケージのようです。
外部パッケージがどのようなものか、atomosphereで調べる
名前だけ判っても、それでが何なのか判らないと使えませんよね。
さっそく、外部パッケージについて調べてみましょう。
Meteorの外部ライブラリは、atomosphereというサイトに登録されています。
こちらで検索をかけることで、各パッケージがどのようなものなのか調べることができます。
さきほど見つかった、mrt:accounts-ui-bootstrap-3-blazeを例にとって、これがどのようなものなのか調べてみることにします。
atomosphereでmrt:accounts-ui-bootstrap-3-blazeを検索すると、meteor-accounts-ui-bootstrap-3が見つかります。
そこには、
Meteor accounts-ui styled with twitter/bootstrap 3
という説明が見つかります。
このページに使い方も書いてありますが、このページには、まだ
[sudo] npm install -g meteorite
mrt add bootstrap-3
という説明があります。
v0.9.0では、npmで meteoriteを入れる必要がなく、meteorコマンドが使えるようになっていますので、mrtの部分はmeteorコマンドに読み替えればOKです。
ただし、上記以外の部分、例えば他のパッケージへの依存関係や使い方などは変わりませんので、ページで確認しておきましょう。
mrt:accounts-ui-bootstrap-3-blazeの場合は、mrt:bootstrap-3や、accounts-xxxに依存してるようです。（そりゃそーだw）
使ってみる
ようやく使い方がわかったので、使ってみることにしましょう。
まず、適当なプロジェクトを作ります。
meteor create t90
cd t90
次に、パッケージを導入します。
> meteor add accounts-password mrt:bootstrap-3 mrt:accounts-ui-bootstrap-3-blaze
こんな感じで一気にパッケージを追加します！
{{> loginButtons}}をhtmlに追加する必要がありますので、
<head>
<title>t90</title>
</head>
<body>
<h1>Welcome to Meteor!</h1>
{{> loginButtons}} <!-- ←ここだけ追加 -->
{{> hello}}
</body>
<template name="hello">
<button>Click Me</button>
<p>You've pressed the button {{counter}} times.</p>
</template>
上記のように、1行だけ追加してMeteorを実行します。
> meteor
これでアプリが起動しますので、ブラウザから、http://localhost:3000にアクセスしてみます。
すると、下記のように表示されるはずです。
！！！
なんと、bootstrap追加されて見た目も変わってるけど、そもそも、v0.9.0からhello worldテンプレートも変わってるようですね！
hello worldと表示されないだと！？w 予想外の展開w
気を取り直して、sign in / up をクリックしてみると、
こんな感じで表示されました。
標準のものより綺麗ですね！
えっと、すでに meteoriteが入ってて、mrtでパッケージ入れてるんだけどどうすればいいの？
すでに、v0.8.x以前にmeteoriteを利用されている方は、どうすれば良いでしょうか。
を見ると、下記のような記載があります。
How do I migrate my app from Meteorite to the Meteor Package System (0.9.0) ?
Ekate: First, you should run the ‘mrt migrate-app’ command. Hopefully, that will do everything! It is super cool, I have played around with it! Go Meteorite, yay!
なんだか、mrt migrate-appを最初に実行すれば全然OK！みたいなノリですね。
手元にmrtを使った古いVersionのプロジェクトが無いので、下記のような実験をしてみました。
> meteor create t82
> cd t82
さきほど、v0.9.0にmeteorをupdateしましたので、一旦v0.9.0でプロジェクトが作られます。
これを、v0.8.2に先祖帰りさせます。
> meteor update --release 0.8.2
これで0.8.2に先祖帰りしました。
私の環境では、npmで既にmeteoriteがインストールされていますので、先ほど0.9.0でやったことを旧来の方法でやってみます。
つまり、
> meteor add accounts-password
> mrt add bootstrap-3
> mrt add accounts-ui-bootstrap-3-blaze
こんな感じで入れます。
もちろん、htmlにも{{> loginButtons}}を追加しておきます。
> meteor
これで、さきほどv0.9.0でやったときと同じ画面が出たはずです。
それでは、一旦このコンソールを終了させ、このプロジェクトのversionを0.9.0にupdateしてみることにします。
どうなるでしょうか？
> meteor update
それから実行してみます。
> meteor
あれれ？普通に実行されて、問題ありませんね。。。
mrt migrate-appは特に実施してないのですが、本当にやんなきゃだめなの？という感じです。必ず必要、というわけではない？ようです。
このあたりは、もう少し見てみる必要がありそうですね。
というわけで、私の方では確認できませんでしたが、update時にパッケージに問題が起こったらmrt migrate-appを試してみると良いかもしれません。
(ただ、Updateそのものが要らないことの方が多いとは思いますが。。)
まとめ
今回は、取り急ぎv0.9.0で統合された外部パッケージの利用方法を見てみました。
もともとMeteoriteを使ってる人にとっては、あまり意味のない更新かもしれませんが、これから始める人にとっては、いろんなパッケージの導入が簡単になるのはとてもメリットだと感じています。これを機に、どんどん使っていきたいですね！
さて、meteor標準環境から簡単に利用できるようになったことで、がぜんMeteorのパッケージ作成のモチベーションも上がって来たのではないでしょうか！少なくとも私は作りたくなりましたよ！
というわけで、次回あたり挑戦してみたいと思います！
バックナンバーと続き
(すいません。。まだパッケージには挑戦できていませんw)
バックナンバーと続きのリンクを追加しました！
下記もよろしくお願いします！
JavaScript超初心者向け Meteor メモ (1)
JavaScript超初心者向け Meteor メモ (2) v0.8.0でのテンプレートエンジンの変更について
JavaScript超初心者向け Meteor メモ (3) シンプルなチャットを作ってみる
JavaScript超初心者向け Meteor メモ (4) ログイン画面を作る （基本編）
JavaScript超初心者向け Meteor メモ (5) ログイン画面を作る （Google/Twitterアカウント編）
JavaScript超初心者向け Meteor メモ (7) テンプレートを使ってみる