STEP3: サンプルアプリ作成(ブックマーク管理アプリ)

このステップでは、サンプルアプリのベースとなるコードを書いていきます。

3.1 サンプルアプリ設計

このチュートリアルでは簡単なブックマーク管理アプリをサンプルアプリとして作成していきます。

ブックマーク管理アプリは、以下の機能を持つものとします。

  • ブックマーク一覧を表示する

  • ブックマークをクリックすると指定のページが開かれる

  • WebページのURLとタイトルを入力してブックマークを保存できる

  • 指定したブックマークのURLおよびタイトルを編集できる

  • 指定したブックマークの削除ができる

また、ブックマーク情報を永続化するため、Bookmarksコレクションを作成します。

Bookmarksコレクションのドキュメントフィールドは以下の通りです。

Bookmarks

フィールド 型 説明
url String WebページURL
title String Webページタイトル
createdAt Date ブックマーク作成日時

早速サンプルアプリを作っていきましょう。

3.2 Meteorパッケージの追加

まずはサンプルアプリ作成に必要なMeteorパッケージを追加します。

$ meteor add http nimble:restivus

使用するMeteorパッケージは以下の通りです。

パッケージ名 説明
http クライアント\/サーバーサイドのどちらでも使えるHTTPクライアント
nimble:restivus REST API 機能を提供するパッケージ

3.3 npmパッケージの追加

続いて、サンプルアプリで使用するnpmパッケージを追加します。アプリの見た目を整えるため、CSSフレームワークのBootstrapを導入します。

$ meteor npm install -S bootstrap

3.4 ソースコード修正

必要なパッケージを追加したら、ソースコードを修正していきましょう。

client/main.css

/* CSS declarations go here */
.list-group-item:hover { background-color: #F6F6F6; }
.list-group-item > a { display: block; width: 100%; height: 100%; text-decoration: none; }
.list-group-item > a:hover,.list-group-item > a:active,.list-group-item > a:focus { text-decoration: none; }
.bookmark-title { display: block; font-weight: 200; font-size: 16px; }
.bookmark-url { display: block; font-weight: 200; font-size: 13px; color: #999; }
.bookmark-form { margin-top: 15px; margin-bottom: 15px;}
.btn-bookmark-edit { margin-top: 5px;}

client/main.html

<head>
  <meta charset="utf-8" />
  <title>Bookmarks</title>
</head>

<body>
  <div class="container">
    <h1>Bookmarks</h1>
    {{> Bookmarks}}
  </div>
</body>

<template name="Bookmarks">
  <ul class="list-group"> 
    {{#each bookmark in bookmarks}}
      {{> Bookmark bookmark=bookmark}}
    {{/each}}
  </ul>
</template>

<template name="Bookmark">
  <li class="list-group-item">
     <a href="{{bookmark.url}}" target="_blank"> 
       <span class="bookmark-title">{{bookmark.title}}</span> 
       <span class="bookmark-url">{{bookmark.url}}</span>
     </a>
  </li>
</template>

client/main.js

import { Template } from 'meteor/templating';
import 'bootstrap/dist/css/bootstrap.min.css'; 
import 'bootstrap/dist/js/bootstrap.min.js';
import './main.html';

Template.Bookmarks.helpers({
  bookmarks: [
    {
      url: 'http://www.meteor.com/',
      title: 'Meteor',
    },
    {
      url: 'https://guide.meteor.com/',
      title: 'Meteor Guide',
    },
    {
      url: 'http://docs.meteor.com/',
      title: 'Meteor API Docs',
    },
    {
      url: 'https://forums.meteor.com/',
      title: 'Meteor Forums',
    },
    {
      url: 'https://crater.io/',
      title: 'Crater.io',
    },
  ],
});

ソースコードを書き換えたら、ターミナルでmeteorを実行します。

$ meteor

meteorが起動したら、Webブラウザで http://localhost:3000/ にアクセスしてみましょう。

次のような画面が表示されます。

ここまでのコード: https://github.com/j-hack/meteor-rest-app/tree/step3.4

3.5 Bookmarksコレクションの作成と表示

MeteorはドキュメントデータベースのMongoDBを簡単に使用できる仕組みが備わっています。

3.4のブックマーク一覧ではソースコード内にハードコーディングしているため、このままではソースコードの修正無しにはブックマークの追加・更新・削除ができません。

よりブックマークを管理しやすくするためにMongoDBのBookmarksコレクションを作成していきます。

まず、プロジェクトディレクトリ内で以下のコマンドを実行します。

$ mkdir -p imports/api/bookmarks
$ touch imports/api/bookmarks/bookmarks.js

続いて、ソースコードを書き換えます。

imports/api/bookmarks/bookmarks.js

import { Mongo } from 'meteor/mongo';

const Bookmarks = new Mongo.Collection('bookmarks');

export default Bookmarks;

server/main.js (←serverディレクトリなので要注意)

// Server 側
import { Meteor } from 'meteor/meteor';
import Bookmarks from '../imports/api/bookmarks/bookmarks';

Meteor.startup(() => { 
  // 初期データ投入
  if (Bookmarks.find().count() === 0) {
    const data = [
      { 
        url: 'http://www.meteor.com/', 
        title: 'Meteor', 
        createdAt: new Date(), 
      }, 
      { 
        url: 'https://guide.meteor.com/', 
        title: 'Meteor Guide', 
        createdAt: new Date(), 
      }, 
      { 
        url: 'http://docs.meteor.com/', 
        title: 'Meteor API Docs', 
        createdAt: new Date(), 
      }, 
      { 
        url: 'https://forums.meteor.com/', 
        title: 'Meteor Forums', 
        createdAt: new Date(), 
      },
      { 
        url: 'https://crater.io/', 
        title: 'Crater.io', 
        createdAt: new Date(), 
      }, 
    ];
    data.forEach(bookmark => { 
      Bookmarks.insert(bookmark); 
    }); 
  }
});

client/main.js

// Client 側
import { Template } from 'meteor/templating';
import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/js/bootstrap.min.js';
import './main.html';

import Bookmarks from '../imports/api/bookmarks/bookmarks'; // 追加

Template.Bookmarks.helpers({
  bookmarks: Bookmarks.find(), // 変更
});

ソースコードを保存したら、Webブラウザで http://localhost:3000/ にアクセスして挙動を確認します。

NOTE: meteorコマンド実行中にソースコードを書き換えて保存すると、ホットコードプッシュ機能により、開いているWebブラウザのウィンドウ(またはタブ)が自動的にリロードされます。

見た目が3.4の時と変わっていなければ成功です。

これでBookmarksコレクションの準備ができました。

ここまでのコード: https://github.com/j-hack/meteor-rest-app/tree/step3.5

3.6 meteor mongo

Meteorはアプリ開発用のMongoDBを同梱しています。別途MongoDBをインストールする必要はありません。

その同梱のMongoDBにアクセスするには、meteorアプリ実行中に、別のターミナルウィンドウで以下のコマンドを実行します。

$ meteor mongo

すると、MongoDBのREPL(対話型実行環境)が起動します。

MongoDB shell version: 2.6.7
connecting to: 127.0.0.1:3001/meteor
meteor:PRIMARY>

MongoDBのDBとコレクションを確認してみましょう。

meteor:PRIMARY> show dbs
admin (empty)
local 0.063GB
meteor 0.031GB

meteor:PRIMARY> show collections
bookmarks
system.indexes

MongoDBにbookmarksコレクションが作成されているのがわかります。

bookmarksコレクションの中身を覗いてみましょう。

meteor:PRIMARY> db.bookmarks.find()
{ "_id" : "5AwNBRBPS4cArsCGB", "url" : "http://www.meteor.com/", "title" : "Meteor", "createdAt" : ISODate("2016-07-22T14:19:14.064Z") }
{ "_id" : "osgRPH83T2bPoEQM8", "url" : "https://guide.meteor.com/", "title" : "Meteor Guide", "createdAt" : ISODate("2016-07-22T14:19:14.064Z") }
{ "_id" : "BRw643GHnbL8Hsig9", "url" : "http://docs.meteor.com/", "title" : "Meteor API Docs", "createdAt" : ISODate("2016-07-22T14:19:14.064Z") }
{ "_id" : "9wjwws85MGpdHEuzp", "url" : "https://forums.meteor.com/", "title" : "Meteor Forums", "createdAt" : ISODate("2016-07-22T14:19:14.064Z") }
{ "_id" : "jWnK9eZPRYb5jZfwN", "url" : "https://crater.io/", "title" : "Crater.io", "createdAt" : ISODate("2016-07-22T14:19:14.064Z") }

bookmarksコレクションに初期データ(ドキュメント)が格納されていますね。

続いて、以下のコマンドを実行してbookmarksコレクションにドキュメントを追加してみましょう。

meteor:PRIMARY> db.bookmarks.insert({url: 'http://stackoverflow.com/', title: 'Stack Overflow', createdAt: new Date()})

再び db.bookmarks.find() を実行すると、「Stack Overflow」のドキュメントが増えているのがわかります。

また、Webブラウザで http://localhost:3000/ にアクセスすると、「Stack Overflow」の項目が増えているのが確認できます。

今度は、先ほど追加したブックマークのタイトルを変更してみましょう。

MongoDBのREPLで、以下のコマンドを実行します。

meteor:PRIMARY> db.bookmarks.update({title: "Stack Overflow"}, {$set: {title: "stackoverflow"}})

すると、「Stack Overflow」から「stackoverflow」というタイトルに変更されます。

それから、ドキュメントの削除も試してみましょう。

以下のコマンドを実行して、先ほど変更したドキュメントを削除します。

meteor:PRIMARY> db.bookmarks.remove({title: "stackoverflow"})

これでMongoDBのCRUD操作(Create,Read,Update,Delete)の確認ができました。

exitコマンドでMongoDBのREPLを終了します。

meteor:PRIMARY> exit
bye

このチュートリアルでは、BookmarksコレクションのCRUD操作を行うREST APIを提供していきます。

次のステップに進みましょう。

results matching ""

    No results matching ""