Web3.0検証(12)-MeteorでTODO管理アプリの開発(基本機能)

[前回] Web3.0検証(11)-MeteorでDapp開発(環境準備)

はじめに

Meteor(ミーティア)公式チュートリアルを参考に、TODO管理アプリを作ってみます。
TODOリストを管理可能で、他のユーザーと共有できるシンプルなアプリです。

前回の補足

• Meteorアプリの公開
  • Meteorで開発したWebアプリを、コマンド一つで世界に公開できる
    • meteor deploy hogehogeコマンドを実行
      • hogehogeは公開URLのサブドメイン
  • アプリが公開サーバーにアップロード・デプロイされ、Web上で公開される

早速アプリ作成開始

フレームワークを選択

Meteorプラットフォームは、複数のフレームワークをサポートしているようです。

• React
• Blaze
• Angular
• Vue

今回は、Reactを使用しアプリ作成します。

Meteorプロジェクトを作成

端末を開き、任意の作業ディレクトリに移動。

$ meteor create simple-todos-react
Created a new Meteor app in 'simple-todos-react'.

To run your new app:
  cd simple-todos-react
  meteor

If you are new to Meteor, try some of the learning resources here:
  https://www.meteor.com/tutorials

When you’re ready to deploy and host your new Meteor application, check out Cloud:
  https://www.meteor.com/cloud

ディレクトリ構成を確認

• client
  • クライアント側(Web)の設定用ファイル
    • client/main.jsx: アプリのメインコンポーネントをHTMLにレンダリング
• server
  • サーバー側(Node.js)のセットアップ用ファイル
    • main.js: MongoDBデータベースを初期化
      • MongoDBは埋め込みバージョンが用意されている、インストール不要
• imports/ui
  • Reactコード
    • App.jsx: React To-doアプリのルートコンポーネント

Meteorアプリを実行

$ cd simple-todos-react
$ meteor run
[[[[[ ~/simple-todos-react ]]]]]

=> Started proxy.
=> Started HMR server.
=> Started MongoDB.
=> Started your app.

=> App running at: http://localhost:3000/

Meteor起動後も、アプリへの変更は自動同期される。

タスクコンポーネントの作成

• imports/uiディレクトリにTask.jsxファイルを作成

タスクリスト内のタスクを表すReactコンポーネントをエクスポート。
リスト表示するためli要素を返す。

imports/ui/Task.jsx

import React from 'react';

export const Task = ({ task }) => {
  return <li>{task.text}</li>
};

サンプルタスクを作成

• タスクリストをレンダリングするため、サンプルデータを定義
  ※ 本来であれば、データはデータベースに保存される(コード上に記述せず)

タスクの配列tasksを作成

imports/ui/App.jsx

import React from 'react';

const tasks = [
  {_id: 1, text: 'First Task'},
  {_id: 2, text: 'Second Task'},
  {_id: 3, text: 'Third Task'},
];
 
export const App = () => (
  <div>
    <h1>Welcome to TODO List!</h1>
    <Hello/>
    <Info/>
  </div>
);

サンプルタスクをレンダリング

• Reactを使用し、レンダリングロジックを実装

上述タスクコンポーネントを使用し、リストアイテムをレンダリング。
※ Reactコード内で、{}を使用しJavascriptコードを記述可能
Arrayオブジェクトの.map関数を使用し、サンプルタスクを反復処理。

imports/ui/App.jsx

import React from 'react';
import { Task } from './Task';

const tasks = [
  {_id: 1, text: 'First Task'},
  {_id: 2, text: 'Second Task'},
  {_id: 3, text: 'Third Task'},
];

export const App = () => (
  <div>
    <h1>Welcome to TODO List!</h1>
    <ul>
      { tasks.map(task => <Task key={ task._id } task={ task }/>) }
    </ul>
  </div>
);

※ タスク毎にkeyプロパティを付与してください(keyを使って、特定タスクを操作可能)。

• アプリコンポーネントから、不要となったHelloとInfoを削除

以下のファイルも削除

$ rm imports/ui/Hello.jsx
$ rm imports/ui/Info.jsx

ブラウザでアプリを確認

ブラウザから、http://localhost:3000/にアクセス。

アプリがモバイル端末でどのように表示されるか確認

• ブラウザで、デベロッパーツールを表示(Chromeの場合、F12キー)
• 画面右上で、モバイルデバイスとタブレットを示す小さなアイコンをクリック

• シミュレートするモバイル端末を選択

(おまけ)モバイル端末で直接アプリを表示

‐ Meteor稼働サーバーのIPアドレスを確認

$ ip addr | grep "inet" | grep -Fv 127.0.0.1 | awk '{print $2}'
::1/128
172.22.149.79/20
fe80::215:5dff:fe1f:3e95/64

• モバイル端末で、上記IPアドレスを使用しアプリに接続

モバイル端末の表示サイズを調整

viewportを修正し、サイズ調整。

• client/main.htmlファイルのheadタグ内のtitleの後に以下追加

client/main.html

  <meta charset="utf-8"/>
  <meta http-equiv="x-ua-compatible" content="ie=edge"/>
  <meta
      name="viewport"
      content="width=device-width, height=device-height, viewport-fit=cover, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"
  />
  <meta name="mobile-web-app-capable" content="yes"/>
  <meta name="apple-mobile-web-app-capable" content="yes"/>

ブラウザをF5で更新すると、画面表示が変わることを確認できます。

おわりに

Meteorを用いて、簡単なTODO管理アプリを作成しました。
次回は、タスクデータをMongoDBデータベースに保存するように、機能拡張します。
お楽しみに。

[次回] Web3.0検証(13)-MeteorでTODO管理アプリの開発(MongoDBにデータ保存)