JavaScript超初心者向け Meteor メモ (6) 外部パッケージを使ってみる

# JavaScript超初心者向け Meteor メモ (6) 外部パッケージを使ってみる

[Meteor.js](https://www.meteor.com/)は、 **Webアプリづくりを楽しくする** フレームワークです。

<a href="https://www.meteor.com/"><img src="http://img.dfm.lrv.jp/meteor1/meteorlogo.jpg"></a>

## 今日出た0.9.0！今回の目玉は、Meteoriteの統合！なので、早速使ってみることに。

これまでも、Rubyで言うところのgemのようなパッケージシステムとして、Meteoriteが利用できましたが、従来はMeteorとは別にnpmでインストールする必要がありました。
それが、今回のバージョンアップで統合されたようです。

これを機に、外部パッケージの使い方を見てみたいと思います。


## 早速Update！

まず、meteorを v0.9.0にupdateします。
これまで通り、

```
> meteor update
```

と入力することでUpdateできます。

Updateすると、

![Update成功！](http://img.dfm.lrv.jp/meteor6/ss1.png)

こんな画面が表示されます。

> 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」](https://www.meteor.com/blog/2014/08/26/meteor-090-new-packaging-system)に、下記のような説明があります。

>You can `meteor add` and `meteor remove` any package directly from the command line, not just core packages. You don't need to use `mrt` for these things anymore. You can even `meteor search` for 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
```

すると、

![meteor search accounts-ui 実行結果](http://img.dfm.lrv.jp/meteor6/ss2.png)

こんな風に表示されました。

標準のaccounts-uiやaccounts-ui-unstyledが見つかるのは当然として、それ以外に、4つほど`mrt:`という文字で始まる名前のパッケージが見つかりました。これらが 0.9.0より前のバージョンではmeteorコマンドでは利用できなかった外部パッケージのようです。

## 外部パッケージがどのようなものか、[atomosphere](http://atmospherejs.com/)で調べる

名前だけ判っても、それでが何なのか判らないと使えませんよね。
さっそく、外部パッケージについて調べてみましょう。

Meteorの外部ライブラリは、[atomosphere](http://atmospherejs.com/)というサイトに登録されています。
こちらで検索をかけることで、各パッケージがどのようなものなのか調べることができます。

さきほど見つかった、`mrt:accounts-ui-bootstrap-3-blaze`を例にとって、これがどのようなものなのか調べてみることにします。

[atomosphere](http://atmospherejs.com/)で`mrt:accounts-ui-bootstrap-3-blaze`を検索すると、[meteor-accounts-ui-bootstrap-3](http://atmospherejs.com/mrt/accounts-ui-bootstrap-3-blaze)が見つかります。

そこには、

> 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に追加する必要がありますので、

```t90.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`にアクセスしてみます。

すると、下記のように表示されるはずです。

![アクセスしてみると](http://img.dfm.lrv.jp/meteor6/ss3.png)

！！！
なんと、bootstrap追加されて見た目も変わってるけど、そもそも、v0.9.0から`hello world`テンプレートも変わってるようですね！

`hello world`と表示されないだと！？w　予想外の展開w

気を取り直して、`sign in / up` をクリックしてみると、

![mrt:accounts-ui-bootstrap-3-blazeで呼び出されるUI](http://img.dfm.lrv.jp/meteor6/ss4.png)

こんな感じで表示されました。
標準のものより綺麗ですね！

## えっと、すでに meteoriteが入ってて、mrtでパッケージ入れてるんだけどどうすればいいの？

すでに、v0.8.x以前にmeteoriteを利用されている方は、どうすれば良いでしょうか。

[Meteor Packaging Q&A](http://blog.percolatestudio.com/engineering/meteor-packaging-questions/)

を見ると、下記のような記載があります。

> 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)](http://qiita.com/tadfmac/items/a63bb85e5cfb12bbbfc8)
[JavaScript超初心者向け Meteor メモ (2) v0.8.0でのテンプレートエンジンの変更について](http://qiita.com/tadfmac/items/823fd909bf3af2f6c7b7)
[JavaScript超初心者向け Meteor メモ (3) シンプルなチャットを作ってみる](http://qiita.com/tadfmac/items/e7e0d95b2affcf2438a9)
[JavaScript超初心者向け Meteor メモ (4) ログイン画面を作る （基本編）](http://qiita.com/tadfmac/items/714654958c127c053d51)
[JavaScript超初心者向け Meteor メモ (5) ログイン画面を作る （Google/Twitterアカウント編）](http://qiita.com/tadfmac/items/5bfe73f181f9b45abe71)
[JavaScript超初心者向け Meteor メモ (7) テンプレートを使ってみる](http://qiita.com/tadfmac/items/2b5e111e8986fc98f6f8)