プログラミングとSEOと暇つぶし

駆け出しエンジニアdallPのブログです。元SEOコンサルタントです。プログラミング、SEO、アフィリエイト、お金などについて役に立つかもしれない情報をやりたいように書きます。

MeteorJSとReactを勉強してみる その10: publishとsubscribeで表示するデータをフィルタリングしよう【公式翻訳】

MeteorJSを勉強してみるシリーズ第10回です。

チュートリアルとしての実装は今回で終了となります。


publishとsubscribeでデータをフィルタリングする

アプリのセンシティブなコードは全てメソッドに移したので、これからMeteorのセキュリティの後半を学習しましょう。

ここまでは、データベース全体がクライアントに表示される想定でコーディングしてきました。 これはつまり、Tasks.find()するとコレクション内の全てのタスクが表示されてしまうということです。

しかし、もしユーザーがプライベートなデータを保存しておきたいとしたらこれはよくありません。 Meteorがどのデータをクライアントに送るのかをコントロールする方法が必要です。

前回のステップのinsecureと同様に、Meteorアプリはデフォルトでautopublishパッケージを含みます。 これはデータベースの情報を全てクライアントに自動的に同期させる機能です。

autopublishを外すとどうなるか見てみましょう。

meteor remove autopublish

アプリが更新されると、タスクリストが空になっていると思います。 autopublishパッケージが無い状態だと、サーバーからクライアントになんのデータを送るのか、明確に示さないとなりません。

Meteorでそれを行う関数として、Meteor.publishMeteor.subscribeが用意されています。

まずは、全てのタスクにpublicationを追加しましょう。

imports/api/tasks.js

before

import { Meteor } from 'meteor/meteor';
import { Mongo } from 'meteor/mongo';
import { check } from 'meteor/check';

export const Tasks = new Mongo.Collection('tasks');

Meteor.methods({
  'tasks.insert'(text) {
    check(text, String);

    // Make sure the use is logged in before inserting a task
    if (!this.userId) {
      throw new Meteor.Error('not-authorized');
    }

    Tasks.insert({
      text,
      createdAt: new Date();
      owner: this.userId,
      username: Meteor.users.findOne(this.userId).username,
    });
  },

  'tasks.remove'(taskId) {
    check(taskId, String);

    Tasks.remove(taskId);
  },

  'tasks.setChecked'(taskId, setChecked) {
    check(taskId, String);
    check(setChecked, Boolean);

    Tasks.update(taskId, { $set: { checked: setChecked } });
  }
});

after

import { Meteor } from 'meteor/meteor';
import { Mongo } from 'meteor/mongo';
import { check } from 'meteor/check';

export const Tasks = new Mongo.Collection('tasks');

if (Meteor.isServer) {
  // This code only runs on the server
  Meteor.publish('tasks', function tasksPublication() {
    return Tasks.find();
  });
}

Meteor.methods({
  'tasks.insert'(text) {
    check(text, String);

    // Make sure the use is logged in before inserting a task
    if (!this.userId) {
      throw new Meteor.Error('not-authorized');
    }

    Tasks.insert({
      text,
      createdAt: new Date();
      owner: this.userId,
      username: Meteor.users.findOne(this.userId).username,
    });
  },

  'tasks.remove'(taskId) {
    check(taskId, String);

    Tasks.remove(taskId);
  },

  'tasks.setChecked'(taskId, setChecked) {
    check(taskId, String);
    check(setChecked, Boolean);

    Tasks.update(taskId, { $set: { checked: setChecked } });
  }
});

次に、Appコンポーネントができた時点でこのpublicationをsubscribeしましょう。

imports/ui/App.js

before

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { Meteor } from 'meteor/meteor';
import { withTracker } from 'meteor/react-meteor-data';

import { Tasks } from '../api/tasks.js';

import Task from './Task.js';
import AccountsUIWrapper from './AccountsUIWrapper.js';

// App Component - represnts the whole app
class App extends Component {
  constructor(props) {
    super(props);

    this.state = {
      hideCompleted: false,
    };
  }

  handleSubmit(event) {
    event.preventDefault();

    // find the text field via the React ref
    const text = ReactDOM.findDOMNode(this.refs.textInput).value.trim();

    Meteor.call('tasks.insert', text);

    // clear form
    ReactDOM.findDOMNode(this.refs.textInput).value = '';
  }

  renderTasks() {
    let filteredTasks = this.props.tasks;

    if (this.state.hideCompleted) {
      filteredTasks = filteredTasks.filter((task) => !task.checked);
    }

    return filteredTasks.map((task) => (
      <Task key={task._id} task={task} />
    ));
  }

  toggleHideCompleted() {
    this.setState({
      hideCompleted: !this.state.hideCompleted
    });
  }

  render() {
    return (
      <div className="container">
        <header>
          <h1>Todo List ({this.props.incompleteCount})</h1>

          <label className="hide-completed">
            <input
              type="checkbox"
              readOnly
              checked={this.state.hideCompleted}
              onClick={this.toggleHideCompleted.bind(this)}
            />
            Hide Completed Tasks
          </label>

          <AccountsUIWrapper />

          {
            this.props.currentUser ?
            <form className="new-task" onSubmit={this.handleSubmit.bind(this)}>
              <input
                type="text"
                ref="textInput"
                placeholder="Type to add new Tasks."
              />
            </form> : ''
          }

        </header>
        <ul>
          {this.renderTasks()}
        </ul>
      </div>
    );
  }
}

export default withTracker(() => {
  return {
    tasks: Tasks.find({}, { sort: { createdAt: -1 } }).fetch(),
    incompleteCount: Tasks.find({ checked: { $ne: true } }).count(),
    currentUser: Meteor.user()
  };
})(App);

after

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { Meteor } from 'meteor/meteor';
import { withTracker } from 'meteor/react-meteor-data';

import { Tasks } from '../api/tasks.js';

import Task from './Task.js';
import AccountsUIWrapper from './AccountsUIWrapper.js';

// App Component - represnts the whole app
class App extends Component {
  constructor(props) {
    super(props);

    this.state = {
      hideCompleted: false,
    };
  }

  handleSubmit(event) {
    event.preventDefault();

    // find the text field via the React ref
    const text = ReactDOM.findDOMNode(this.refs.textInput).value.trim();

    Meteor.call('tasks.insert', text);

    // clear form
    ReactDOM.findDOMNode(this.refs.textInput).value = '';
  }

  renderTasks() {
    let filteredTasks = this.props.tasks;

    if (this.state.hideCompleted) {
      filteredTasks = filteredTasks.filter((task) => !task.checked);
    }

    return filteredTasks.map((task) => (
      <Task key={task._id} task={task} />
    ));
  }

  toggleHideCompleted() {
    this.setState({
      hideCompleted: !this.state.hideCompleted
    });
  }

  render() {
    return (
      <div className="container">
        <header>
          <h1>Todo List ({this.props.incompleteCount})</h1>

          <label className="hide-completed">
            <input
              type="checkbox"
              readOnly
              checked={this.state.hideCompleted}
              onClick={this.toggleHideCompleted.bind(this)}
            />
            Hide Completed Tasks
          </label>

          <AccountsUIWrapper />

          {
            this.props.currentUser ?
            <form className="new-task" onSubmit={this.handleSubmit.bind(this)}>
              <input
                type="text"
                ref="textInput"
                placeholder="Type to add new Tasks."
              />
            </form> : ''
          }

        </header>
        <ul>
          {this.renderTasks()}
        </ul>
      </div>
    );
  }
}

export default withTracker(() => {
  Meteor.subscribe('tasks');

  return {
    tasks: Tasks.find({}, { sort: { createdAt: -1 } }).fetch(),
    incompleteCount: Tasks.find({ checked: { $ne: true } }).count(),
    currentUser: Meteor.user()
  };
})(App);

これらのコードを追加すると、全タスクが再度表示されるでしょう。

Meteor.publishをサーバーで呼ぶと、「tasks」という名前のpublicationが登録されます。 Meteor.subscribeをクライアントでpublicationの名前付きで呼ぶと、クライアントはそのpublicationから全てのデータをsubscribeします。 つまり今回のケースでは、データベース内にある全てのtasksデータです。

publish/subsribeモデルの真価を確認するために、ユーザーがタスクを「プライベート」化し、他のユーザーには見えなくする機能を開発してみましょう。

タスクをプライベート化するボタンを追加する

tasksに新しい「private」というプロパティと、ユーザーがタスクをプライベート化できるボタンを作成しましょう。 このボタンはそのタスクのownerにしか表示されるべきではありません。 さらに、タスクがpublicかprivateか、どちらの状態なのかを示すラベルも追加しましょう。

まず、タスクのprivateステータスをセットできるメソッドを追加します。

imports/api/tasks.js

before

import { Meteor } from 'meteor/meteor';
import { Mongo } from 'meteor/mongo';
import { check } from 'meteor/check';

export const Tasks = new Mongo.Collection('tasks');

if (Meteor.isServer) {
  // This code only runs on the server
  Meteor.publish('tasks', function tasksPublication() {
    return Tasks.find();
  });
}

Meteor.methods({
  'tasks.insert'(text) {
    check(text, String);

    // Make sure the use is logged in before inserting a task
    if (!this.userId) {
      throw new Meteor.Error('not-authorized');
    }

    Tasks.insert({
      text,
      createdAt: new Date();
      owner: this.userId,
      username: Meteor.users.findOne(this.userId).username,
    });
  },

  'tasks.remove'(taskId) {
    check(taskId, String);

    Tasks.remove(taskId);
  },

  'tasks.setChecked'(taskId, setChecked) {
    check(taskId, String);
    check(setChecked, Boolean);

    Tasks.update(taskId, { $set: { checked: setChecked } });
  }
});

after

import { Meteor } from 'meteor/meteor';
import { Mongo } from 'meteor/mongo';
import { check } from 'meteor/check';

export const Tasks = new Mongo.Collection('tasks');

if (Meteor.isServer) {
  // This code only runs on the server
  Meteor.publish('tasks', function tasksPublication() {
    return Tasks.find();
  });
}

Meteor.methods({
  'tasks.insert'(text) {
    check(text, String);

    // Make sure the use is logged in before inserting a task
    if (!this.userId) {
      throw new Meteor.Error('not-authorized');
    }

    Tasks.insert({
      text,
      createdAt: new Date();
      owner: this.userId,
      username: Meteor.users.findOne(this.userId).username,
    });
  },

  'tasks.remove'(taskId) {
    check(taskId, String);

    Tasks.remove(taskId);
  },

  'tasks.setChecked'(taskId, setChecked) {
    check(taskId, String);
    check(setChecked, Boolean);

    Tasks.update(taskId, { $set: { checked: setChecked } });
  },

  'tasks.setPrivate'(taskId, setToPrivate) {
    check(taskId, String);
    check(setToPrivate, Boolean);

    const task = Tasks.findOne(taskId);

    if (task.owner !== this.userId) {
      throw new Meteor.Error('not-authorized');
    }

    Tasks.update(taskId, { $set: { private: setToPrivate } })
  }
});

さて、表示されているタスクにprivateボタンを表示するかどうかを判定するために、タスクには新しいプロパティを渡しておかなくてはいけません。 ボタンは、現在ログイン中のユーザーがそのタスクのownerである場合のみ、表示されるべきです。

imports/ui/App.js

before

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { Meteor } from 'meteor/meteor';
import { withTracker } from 'meteor/react-meteor-data';

import { Tasks } from '../api/tasks.js';

import Task from './Task.js';
import AccountsUIWrapper from './AccountsUIWrapper.js';

// App Component - represnts the whole app
class App extends Component {
  constructor(props) {
    super(props);

    this.state = {
      hideCompleted: false,
    };
  }

  handleSubmit(event) {
    event.preventDefault();

    // find the text field via the React ref
    const text = ReactDOM.findDOMNode(this.refs.textInput).value.trim();

    Meteor.call('tasks.insert', text);

    // clear form
    ReactDOM.findDOMNode(this.refs.textInput).value = '';
  }

  renderTasks() {
    let filteredTasks = this.props.tasks;

    if (this.state.hideCompleted) {
      filteredTasks = filteredTasks.filter((task) => !task.checked);
    }

    return filteredTasks.map((task) => (
      <Task key={task._id} task={task} />
    ));
  }

  toggleHideCompleted() {
    this.setState({
      hideCompleted: !this.state.hideCompleted
    });
  }

  render() {
    return (
      <div className="container">
        <header>
          <h1>Todo List ({this.props.incompleteCount})</h1>

          <label className="hide-completed">
            <input
              type="checkbox"
              readOnly
              checked={this.state.hideCompleted}
              onClick={this.toggleHideCompleted.bind(this)}
            />
            Hide Completed Tasks
          </label>

          <AccountsUIWrapper />

          {
            this.props.currentUser ?
            <form className="new-task" onSubmit={this.handleSubmit.bind(this)}>
              <input
                type="text"
                ref="textInput"
                placeholder="Type to add new Tasks."
              />
            </form> : ''
          }

        </header>
        <ul>
          {this.renderTasks()}
        </ul>
      </div>
    );
  }
}

export default withTracker(() => {
  Meteor.subscribe('tasks');

  return {
    tasks: Tasks.find({}, { sort: { createdAt: -1 } }).fetch(),
    incompleteCount: Tasks.find({ checked: { $ne: true } }).count(),
    currentUser: Meteor.user()
  };
})(App);

after

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { Meteor } from 'meteor/meteor';
import { withTracker } from 'meteor/react-meteor-data';

import { Tasks } from '../api/tasks.js';

import Task from './Task.js';
import AccountsUIWrapper from './AccountsUIWrapper.js';

// App Component - represnts the whole app
class App extends Component {
  constructor(props) {
    super(props);

    this.state = {
      hideCompleted: false,
    };
  }

  handleSubmit(event) {
    event.preventDefault();

    // find the text field via the React ref
    const text = ReactDOM.findDOMNode(this.refs.textInput).value.trim();

    Meteor.call('tasks.insert', text);

    // clear form
    ReactDOM.findDOMNode(this.refs.textInput).value = '';
  }

  renderTasks() {
    let filteredTasks = this.props.tasks;

    if (this.state.hideCompleted) {
      filteredTasks = filteredTasks.filter((task) => !task.checked);
    }

    return filteredTasks.map((task) => (
      const currentUserId = this.props.currentUser && this.props.currentUser._id;
      const showPrivateButton = task.owner === currentUserId;

      <Task
        key={task._id}
        task={task}
        showPrivateButton={showPrivateButton}
      />
    ));
  }

  toggleHideCompleted() {
    this.setState({
      hideCompleted: !this.state.hideCompleted
    });
  }

  render() {
    return (
      <div className="container">
        <header>
          <h1>Todo List ({this.props.incompleteCount})</h1>

          <label className="hide-completed">
            <input
              type="checkbox"
              readOnly
              checked={this.state.hideCompleted}
              onClick={this.toggleHideCompleted.bind(this)}
            />
            Hide Completed Tasks
          </label>

          <AccountsUIWrapper />

          {
            this.props.currentUser ?
            <form className="new-task" onSubmit={this.handleSubmit.bind(this)}>
              <input
                type="text"
                ref="textInput"
                placeholder="Type to add new Tasks."
              />
            </form> : ''
          }

        </header>
        <ul>
          {this.renderTasks()}
        </ul>
      </div>
    );
  }
}

export default withTracker(() => {
  Meteor.subscribe('tasks');

  return {
    tasks: Tasks.find({}, { sort: { createdAt: -1 } }).fetch(),
    incompleteCount: Tasks.find({ checked: { $ne: true } }).count(),
    currentUser: Meteor.user()
  };
})(App);

ボタンを追加し、この新しく追加されたプロパティを使って表示可否を判断するようにしましょう。

imports/ui/Task.js

before

import React, { Component } from 'react';
import { Meteor } from 'meteor/meteor';

import { Tasks } from '../api/tasks.js';

// Task component - represents a single todo item
export default class Task extends Component {
  toggleChecked() {
    // set the checked property to the opposite of its current value
    Meteor.call('tasks.setChecked', this.props.task._id, !this.props.task.checked);
  };

  deleteThisTask() {
    Meteor.call('tasks.remove', this.props.task._id);
  };

  render() {
    // give tasks a different className when they are checked off,
    // so that we can style them nicely in CSS.
    const taskClassName = this.props.task.checked ? 'checked' : '';

    return (
      <li className={ taskClassName }>
        <button className="delete" onClick={ this.deleteThisTask.bind(this) }>
          &times;
        </button>

        <input
          type="checkbox"
          readOnly
          checked={ !!this.props.task.checked }
          onClick={ this.toggleChecked.bind(this) }
        />

        <span className="text">
          <strong>{ this.props.task.username }</strong>: { this.props.task.text }
        </span>
      </li>
    );
  }
}

after

import React, { Component } from 'react';
import { Meteor } from 'meteor/meteor';

import { Tasks } from '../api/tasks.js';

// Task component - represents a single todo item
export default class Task extends Component {
  toggleChecked() {
    // set the checked property to the opposite of its current value
    Meteor.call('tasks.setChecked', this.props.task._id, !this.props.task.checked);
  };

  deleteThisTask() {
    Meteor.call('tasks.remove', this.props.task._id);
  };

  render() {
    // give tasks a different className when they are checked off,
    // so that we can style them nicely in CSS.
    const taskClassName = this.props.task.checked ? 'checked' : '';

    return (
      <li className={ taskClassName }>
        <button className="delete" onClick={ this.deleteThisTask.bind(this) }>
          &times;
        </button>

        <input
          type="checkbox"
          readOnly
          checked={ !!this.props.task.checked }
          onClick={ this.toggleChecked.bind(this) }
        />

        { this.props.showPrivateButton ? (
          <button className="toggle-private" onClick={this.togglePrivate.bind(this)}>
            { this.props.task.private ? 'Private' : 'Public' }
          </button>
          ) : ''
        }

        <span className="text">
          <strong>{ this.props.task.username }</strong>: { this.props.task.text }
        </span>
      </li>
    );
  }
}

ボタン押下時に呼ばれるイベントハンドラも定義しておきましょう。

imports/ui/Task.js

before

import React, { Component } from 'react';
import { Meteor } from 'meteor/meteor';

import { Tasks } from '../api/tasks.js';

// Task component - represents a single todo item
export default class Task extends Component {
  toggleChecked() {
    // set the checked property to the opposite of its current value
    Meteor.call('tasks.setChecked', this.props.task._id, !this.props.task.checked);
  };

  deleteThisTask() {
    Meteor.call('tasks.remove', this.props.task._id);
  };

  render() {
    // give tasks a different className when they are checked off,
    // so that we can style them nicely in CSS.
    const taskClassName = this.props.task.checked ? 'checked' : '';

    return (
      <li className={ taskClassName }>
        <button className="delete" onClick={ this.deleteThisTask.bind(this) }>
          &times;
        </button>

        <input
          type="checkbox"
          readOnly
          checked={ !!this.props.task.checked }
          onClick={ this.toggleChecked.bind(this) }
        />

        { this.props.showPrivateButton ? (
          <button className="toggle-private" onClick={this.togglePrivate.bind(this)}>
            { this.props.task.private ? 'Private' : 'Public' }
          </button>
          ) : ''
        }

        <span className="text">
          <strong>{ this.props.task.username }</strong>: { this.props.task.text }
        </span>
      </li>
    );
  }
}

after

import React, { Component } from 'react';
import { Meteor } from 'meteor/meteor';

import { Tasks } from '../api/tasks.js';

// Task component - represents a single todo item
export default class Task extends Component {
  toggleChecked() {
    // set the checked property to the opposite of its current value
    Meteor.call('tasks.setChecked', this.props.task._id, !this.props.task.checked);
  };

  togglePrivate() {
    Method.call('tasks.setPrivate', this.props.task._id, !this.props.task.private);
  };

  deleteThisTask() {
    Meteor.call('tasks.remove', this.props.task._id);
  };

  render() {
    // give tasks a different className when they are checked off,
    // so that we can style them nicely in CSS.
    const taskClassName = this.props.task.checked ? 'checked' : '';

    return (
      <li className={ taskClassName }>
        <button className="delete" onClick={ this.deleteThisTask.bind(this) }>
          &times;
        </button>

        <input
          type="checkbox"
          readOnly
          checked={ !!this.props.task.checked }
          onClick={ this.toggleChecked.bind(this) }
        />

        { this.props.showPrivateButton ? (
          <button className="toggle-private" onClick={this.togglePrivate.bind(this)}>
            { this.props.task.private ? 'Private' : 'Public' }
          </button>
          ) : ''
        }

        <span className="text">
          <strong>{ this.props.task.username }</strong>: { this.props.task.text }
        </span>
      </li>
    );
  }
}

最後に、Taskコンポーネント内の

  • 要素のクラスを、タスクのprivacyステータスを反映するように更新しましょう。 このために、classnamesのnpmパッケージを使います。

    meteor npm install --save classnames

    タスクのレンダリング中にクラスが選択されるようにパッケージを使ってみましょう。

    imports/ui/Task.js

    before

    import React, { Component } from 'react';
    import { Meteor } from 'meteor/meteor';
    
    import { Tasks } from '../api/tasks.js';
    
    // Task component - represents a single todo item
    export default class Task extends Component {
      toggleChecked() {
        // set the checked property to the opposite of its current value
        Meteor.call('tasks.setChecked', this.props.task._id, !this.props.task.checked);
      };
    
      togglePrivate() {
        Method.call('tasks.setPrivate', this.props.task._id, !this.props.task.private);
      };
    
      deleteThisTask() {
        Meteor.call('tasks.remove', this.props.task._id);
      };
    
      render() {
        // give tasks a different className when they are checked off,
        // so that we can style them nicely in CSS.
        const taskClassName = this.props.task.checked ? 'checked' : '';
    
        return (
          <li className={ taskClassName }>
            <button className="delete" onClick={ this.deleteThisTask.bind(this) }>
              &times;
            </button>
    
            <input
              type="checkbox"
              readOnly
              checked={ !!this.props.task.checked }
              onClick={ this.toggleChecked.bind(this) }
            />
    
            { this.props.showPrivateButton ? (
              <button className="toggle-private" onClick={this.togglePrivate.bind(this)}>
                { this.props.task.private ? 'Private' : 'Public' }
              </button>
              ) : ''
            }
    
            <span className="text">
              <strong>{ this.props.task.username }</strong>: { this.props.task.text }
            </span>
          </li>
        );
      }
    }
    

    after

    import React, { Component } from 'react';
    import { Meteor } from 'meteor/meteor';
    import classnames from 'classnames';
    
    import { Tasks } from '../api/tasks.js';
    
    // Task component - represents a single todo item
    export default class Task extends Component {
      toggleChecked() {
        // set the checked property to the opposite of its current value
        Meteor.call('tasks.setChecked', this.props.task._id, !this.props.task.checked);
      };
    
      togglePrivate() {
        Method.call('tasks.setPrivate', this.props.task._id, !this.props.task.private);
      };
    
      deleteThisTask() {
        Meteor.call('tasks.remove', this.props.task._id);
      };
    
      render() {
        // give tasks a different className when they are checked off,
        // so that we can style them nicely in CSS.
        const taskClassName = classnames({
          checked: this.props.task.checked,
          private: this.props.task.private
        });
    
        return (
          <li className={ taskClassName }>
            <button className="delete" onClick={ this.deleteThisTask.bind(this) }>
              &times;
            </button>
    
            <input
              type="checkbox"
              readOnly
              checked={ !!this.props.task.checked }
              onClick={ this.toggleChecked.bind(this) }
            />
    
            { this.props.showPrivateButton ? (
              <button className="toggle-private" onClick={this.togglePrivate.bind(this)}>
                { this.props.task.private ? 'Private' : 'Public' }
              </button>
              ) : ''
            }
    
            <span className="text">
              <strong>{ this.props.task.username }</strong>: { this.props.task.text }
            </span>
          </li>
        );
      }
    }
    

    privacyステータスに応じてタスクを選択して表示する

    タスクをプライベートにすることができるようになったので、publication関数で各ユーザーが閲覧権限を持つタスクだけを出力するように変更しましょう。

    imports/api/tasks.js

    before

    import { Meteor } from 'meteor/meteor';
    import { Mongo } from 'meteor/mongo';
    import { check } from 'meteor/check';
    
    export const Tasks = new Mongo.Collection('tasks');
    
    if (Meteor.isServer) {
      // This code only runs on the server
      Meteor.publish('tasks', function tasksPublication() {
        return Tasks.find();
      });
    }
    
    Meteor.methods({
      'tasks.insert'(text) {
        check(text, String);
    
        // Make sure the use is logged in before inserting a task
        if (!this.userId) {
          throw new Meteor.Error('not-authorized');
        }
    
        Tasks.insert({
          text,
          createdAt: new Date();
          owner: this.userId,
          username: Meteor.users.findOne(this.userId).username,
        });
      },
    
      'tasks.remove'(taskId) {
        check(taskId, String);
    
        Tasks.remove(taskId);
      },
    
      'tasks.setChecked'(taskId, setChecked) {
        check(taskId, String);
        check(setChecked, Boolean);
    
        Tasks.update(taskId, { $set: { checked: setChecked } });
      },
    
      'tasks.setPrivate'(taskId, setToPrivate) {
        check(taskId, String);
        check(setToPrivate, Boolean);
    
        const task = Tasks.findOne(taskId);
    
        if (task.owner !== this.userId) {
          throw new Meteor.Error('not-authorized');
        }
    
        Tasks.update(taskId, { $set: { private: setToPrivate } })
      }
    });
    

    after

    import { Meteor } from 'meteor/meteor';
    import { Mongo } from 'meteor/mongo';
    import { check } from 'meteor/check';
    
    export const Tasks = new Mongo.Collection('tasks');
    
    if (Meteor.isServer) {
      // This code only runs on the server
      // Only publish tasks that are public or belong to the current user
      Meteor.publish('tasks', function tasksPublication() {
        return Tasks.find({
          $or: [
            { private: { $ne: true } },
            { owner: this.userId }
          ]
        });
      });
    }
    
    Meteor.methods({
      'tasks.insert'(text) {
        check(text, String);
    
        // Make sure the use is logged in before inserting a task
        if (!this.userId) {
          throw new Meteor.Error('not-authorized');
        }
    
        Tasks.insert({
          text,
          createdAt: new Date();
          owner: this.userId,
          username: Meteor.users.findOne(this.userId).username,
        });
      },
    
      'tasks.remove'(taskId) {
        check(taskId, String);
    
        Tasks.remove(taskId);
      },
    
      'tasks.setChecked'(taskId, setChecked) {
        check(taskId, String);
        check(setChecked, Boolean);
    
        Tasks.update(taskId, { $set: { checked: setChecked } });
      },
    
      'tasks.setPrivate'(taskId, setToPrivate) {
        check(taskId, String);
        check(setToPrivate, Boolean);
    
        const task = Tasks.findOne(taskId);
    
        if (task.owner !== this.userId) {
          throw new Meteor.Error('not-authorized');
        }
    
        Tasks.update(taskId, { $set: { private: setToPrivate } })
      }
    });
    

    この機能が動いていることを確かめるためには、ブラウザーのプライベートブラウジングモード(Chromeならシークレットブラウザー)を使って別ユーザーとしてログインしてみればよいでしょう。

    2つのウィンドウを隣り合わせに配置して、他のユーザーが閲覧できないようにタスクをプライベート化してみて下さい。 もう一度パブリックにすると、再表示されるはずです!

    セキュリティ機能を追加する

    プライベートタスク機能を完成させるため、deleteTasksetCheckedにチェック機能をつけましょう。 これでタスクのownerのみがプライベートタスクを削除したり、チェックを外したり出来るようになります。

    imports/api/tasks.js

    before

    import { Meteor } from 'meteor/meteor';
    import { Mongo } from 'meteor/mongo';
    import { check } from 'meteor/check';
    
    export const Tasks = new Mongo.Collection('tasks');
    
    if (Meteor.isServer) {
      // This code only runs on the server
      // Only publish tasks that are public or belong to the current user
      Meteor.publish('tasks', function tasksPublication() {
        return Tasks.find({
          $or: [
            { private: { $ne: true } },
            { owner: this.userId }
          ]
        });
      });
    }
    
    Meteor.methods({
      'tasks.insert'(text) {
        check(text, String);
    
        // Make sure the use is logged in before inserting a task
        if (!this.userId) {
          throw new Meteor.Error('not-authorized');
        }
    
        Tasks.insert({
          text,
          createdAt: new Date();
          owner: this.userId,
          username: Meteor.users.findOne(this.userId).username,
        });
      },
    
      'tasks.remove'(taskId) {
        check(taskId, String);
    
        Tasks.remove(taskId);
      },
    
      'tasks.setChecked'(taskId, setChecked) {
        check(taskId, String);
        check(setChecked, Boolean);
    
        Tasks.update(taskId, { $set: { checked: setChecked } });
      },
    
      'tasks.setPrivate'(taskId, setToPrivate) {
        check(taskId, String);
        check(setToPrivate, Boolean);
    
        const task = Tasks.findOne(taskId);
    
        if (task.owner !== this.userId) {
          throw new Meteor.Error('not-authorized');
        }
    
        Tasks.update(taskId, { $set: { private: setToPrivate } })
      }
    });
    

    after

    import { Meteor } from 'meteor/meteor';
    import { Mongo } from 'meteor/mongo';
    import { check } from 'meteor/check';
    
    export const Tasks = new Mongo.Collection('tasks');
    
    if (Meteor.isServer) {
      // This code only runs on the server
      // Only publish tasks that are public or belong to the current user
      Meteor.publish('tasks', function tasksPublication() {
        return Tasks.find({
          $or: [
            { private: { $ne: true } },
            { owner: this.userId }
          ]
        });
      });
    }
    
    Meteor.methods({
      'tasks.insert'(text) {
        check(text, String);
    
        // Make sure the use is logged in before inserting a task
        if (!this.userId) {
          throw new Meteor.Error('not-authorized');
        }
    
        Tasks.insert({
          text,
          createdAt: new Date();
          owner: this.userId,
          username: Meteor.users.findOne(this.userId).username,
        });
      },
    
      'tasks.remove'(taskId) {
        check(taskId, String);
    
        const task = Tasks.findOne(taskId);
        if (task.private && task.owner !== this.userId) {
          // If the task is private, make sure only the owner can delete it
          throw new Meteor.Error('not-authorized');
        }
    
        Tasks.remove(taskId);
      },
    
      'tasks.setChecked'(taskId, setChecked) {
        check(taskId, String);
        check(setChecked, Boolean);
    
        const task = Tasks.findOne(taskId);
        if (task.private && task.owner !== this.userId) {
          // If the task is private, make sure only the owner can check it off
          throw new Meteor.Error('not-authorized');
        }
    
        Tasks.update(taskId, { $set: { checked: setChecked } });
      },
    
      'tasks.setPrivate'(taskId, setToPrivate) {
        check(taskId, String);
        check(setToPrivate, Boolean);
    
        const task = Tasks.findOne(taskId);
    
        if (task.owner !== this.userId) {
          throw new Meteor.Error('not-authorized');
        }
    
        Tasks.update(taskId, { $set: { private: setToPrivate } })
      }
    });
    

    ちなみに、このままではパブリックなタスクであればownerが誰であろうと、誰でもタスクを削除できてしまいます。 ownerのみがタスクを削除出来るようにするためには簡単な修正を加えれば良いだけですので、試してみても良いでしょう。

    これでプライベートタスク機能は完成です! 攻撃者が誰かのプライベートタスクを覗いたり修正したりすることを防げるようになりました。


    第10回の内容は以上です。

    Meteorのチュートリアルも残すところあと1つとなりました。

    見てくださっている方がもしいましたら、是非最後までお付き合いくださいm(. .)m

  • MeteorJSとReactを勉強してみる その9: メソッドでセキュリティを強化する【公式翻訳】

    あけましておめでとうございます。 本当は去年のうちに終わらせておくつもりだったのですが、仕事が立て込んだので2018年に食い込んでしまいました・・

    MeteorJSチュートリアルの第9弾、今回はアプリのセキュリティ強化のお話です。


    メソッドでセキュリティを強化する

    このステップの実装を行う前では、作成中のアプリのあらゆるデータベースを誰でも編集できてしまいます。

    組織内部向けの小さなアプリケーションやデモのアプリであれば良いでしょうが、不特定多数に公開される本来のアプリケーションであれば、データへのアクセスにはパーミッションのコントロールが必須です。

    Meteorでは、パーミッションコントロールを行う最善の方法は関数を宣言することによるものです。

    クライアント側のコードで直接insertupdateremoveなどを呼ぶのではなく、ユーザーがそれらのアクションを行う権限を持っているかをチェックし、クライアントの代わりにデータベースに変更を加えるようにします。

    insecureを外す

    新しく作成されたMeteorのプロジェクトは、デフォルトでinsecureパッケージが追加されています。 これはクライアント側からデータベースを編集できるようにするためのパッケージです。

    insecureはプロトタイピングの段階では便利ですが、もはや補助輪を外す段階に来ています。

    このパッケージを外すために、ターミナルでアプリのディレクトリに移動し、下記のコマンドを打ちましょう。

    meteor remove insecure

    insecureパッケージを除外した後でアプリを使おうとすると、全ての入力欄やボタンが動かなくなっていることが分かるでしょう。

    これは、クライアントサイドのデータベース編集パーミッションが無効化されたためです。

    この状態からアプリを動かすには、いくつかコードを書き換える必要があります。

    メソッドを定義する

    まず、いくつかのメソッドを定義する必要があります。 クライアント上で動かしたいデータベース操作それぞれについて、一つのメソッドが必要です。

    メソッドはクライアントとサーバーで実行されているコードの中で定義される必要があります。 (これについては、後ほど「Optimistic UI」という段落で少々解説します)

    imports/api/tasks.js

    before

    import { Mongo } from 'meteor/mongo';
    
    export const Tasks = new Mongo.Collection('tasks');
    

    after

    import { Meteor } from 'meteor/meteor';
    import { Mongo } from 'meteor/mongo';
    import { check } from 'meteor/check';
    
    export const Tasks = new Mongo.Collection('tasks');
    
    Meteor.methods({
      'tasks.insert'(text) {
        check(text, String);
    
        // Make sure the use is logged in before inserting a task
        if (!this.userId) {
          throw new Meteor.Error('not-authorized');
        }
    
        Tasks.insert({
          text,
          createdAt: new Date();
          owner: this.userId,
          username: Meteor.users.findOne(this.userId).username,
        });
      },
    
      'tasks.remove'(taskId) {
        check(taskId, String);
    
        Tasks.remove(taskId);
      },
    
      'tasks.setChecked'(taskId, setChecked) {
        check(taskId, String);
        check(setChecked, Boolean);
    
        Tasks.update(taskId, { $set: { checked: setChecked } });
      }
    });
    

    メソッドを定義し終わったので、これまでのコードでコレクションに対して直接操作を行っていた部分について、上記メソッドを利用するように書き換えましょう。

    imports/ui/App.js

    before

    import React, { Component } from 'react';
    import ReactDOM from 'react-dom';
    import { Meteor } from 'meteor/meteor';
    import { withTracker } from 'meteor/react-meteor-data';
    
    import { Tasks } from '../api/tasks.js';
    
    import Task from './Task.js';
    import AccountsUIWrapper from './AccountsUIWrapper.js';
    
    // App Component - represnts the whole app
    class App extends Component {
      constructor(props) {
        super(props);
    
        this.state = {
          hideCompleted: false,
        };
      }
    
      handleSubmit(event) {
        event.preventDefault();
    
        // find the text field via the React ref
        const text = ReactDOM.findDOMNode(this.refs.textInput).value.trim();
    
        Tasks.insert({
          text,
          createdAt: new Date(),
          owner: Meteor.userId(),
          username: Meteor.user().username
        });
    
        // clear form
        ReactDOM.findDOMNode(this.refs.textInput).value = '';
      }
    
      renderTasks() {
        let filteredTasks = this.props.tasks;
    
        if (this.state.hideCompleted) {
          filteredTasks = filteredTasks.filter((task) => !task.checked);
        }
    
        return filteredTasks.map((task) => (
          <Task key={task._id} task={task} />
        ));
      }
    
      toggleHideCompleted() {
        this.setState({
          hideCompleted: !this.state.hideCompleted
        });
      }
    
      render() {
        return (
          <div className="container">
            <header>
              <h1>Todo List ({this.props.incompleteCount})</h1>
    
              <label className="hide-completed">
                <input
                  type="checkbox"
                  readOnly
                  checked={this.state.hideCompleted}
                  onClick={this.toggleHideCompleted.bind(this)}
                />
                Hide Completed Tasks
              </label>
    
              <AccountsUIWrapper />
    
              {
                this.props.currentUser ?
                <form className="new-task" onSubmit={this.handleSubmit.bind(this)}>
                  <input
                    type="text"
                    ref="textInput"
                    placeholder="Type to add new Tasks."
                  />
                </form> : ''
              }
    
            </header>
            <ul>
              {this.renderTasks()}
            </ul>
          </div>
        );
      }
    }
    
    export default withTracker(() => {
      return {
        tasks: Tasks.find({}, { sort: { createdAt: -1 } }).fetch(),
        incompleteCount: Tasks.find({ checked: { $ne: true } }).count(),
        currentUser: Meteor.user()
      };
    })(App);
    

    after

    import React, { Component } from 'react';
    import ReactDOM from 'react-dom';
    import { Meteor } from 'meteor/meteor';
    import { withTracker } from 'meteor/react-meteor-data';
    
    import { Tasks } from '../api/tasks.js';
    
    import Task from './Task.js';
    import AccountsUIWrapper from './AccountsUIWrapper.js';
    
    // App Component - represnts the whole app
    class App extends Component {
      constructor(props) {
        super(props);
    
        this.state = {
          hideCompleted: false,
        };
      }
    
      handleSubmit(event) {
        event.preventDefault();
    
        // find the text field via the React ref
        const text = ReactDOM.findDOMNode(this.refs.textInput).value.trim();
    
        Meteor.call('tasks.insert', text);
    
        // clear form
        ReactDOM.findDOMNode(this.refs.textInput).value = '';
      }
    
      renderTasks() {
        let filteredTasks = this.props.tasks;
    
        if (this.state.hideCompleted) {
          filteredTasks = filteredTasks.filter((task) => !task.checked);
        }
    
        return filteredTasks.map((task) => (
          <Task key={task._id} task={task} />
        ));
      }
    
      toggleHideCompleted() {
        this.setState({
          hideCompleted: !this.state.hideCompleted
        });
      }
    
      render() {
        return (
          <div className="container">
            <header>
              <h1>Todo List ({this.props.incompleteCount})</h1>
    
              <label className="hide-completed">
                <input
                  type="checkbox"
                  readOnly
                  checked={this.state.hideCompleted}
                  onClick={this.toggleHideCompleted.bind(this)}
                />
                Hide Completed Tasks
              </label>
    
              <AccountsUIWrapper />
    
              {
                this.props.currentUser ?
                <form className="new-task" onSubmit={this.handleSubmit.bind(this)}>
                  <input
                    type="text"
                    ref="textInput"
                    placeholder="Type to add new Tasks."
                  />
                </form> : ''
              }
    
            </header>
            <ul>
              {this.renderTasks()}
            </ul>
          </div>
        );
      }
    }
    
    export default withTracker(() => {
      return {
        tasks: Tasks.find({}, { sort: { createdAt: -1 } }).fetch(),
        incompleteCount: Tasks.find({ checked: { $ne: true } }).count(),
        currentUser: Meteor.user()
      };
    })(App);
    

    imports/ui/Task.js

    before

    import React, { Component } from 'react';
    
    import { Tasks } from '../api/tasks.js';
    
    // Task component - represents a single todo item
    export default class Task extends Component {
      toggleChecked() {
        // set the checked property to the opposite of its current value
        Tasks.update(this.props.task._id, {
          $set: { checked: !this.props.task.checked },
        })
      };
    
      deleteThisTask() {
        Tasks.remove(this.props.task._id);
      };
    
      render() {
        // give tasks a different className when they are checked off,
        // so that we can style them nicely in CSS.
        const taskClassName = this.props.task.checked ? 'checked' : '';
    
        return (
          <li className={ taskClassName }>
            <button className="delete" onClick={ this.deleteThisTask.bind(this) }>
              &times;
            </button>
    
            <input
              type="checkbox"
              readOnly
              checked={ !!this.props.task.checked }
              onClick={ this.toggleChecked.bind(this) }
            />
    
            <span className="text">
              <strong>{ this.props.task.username }</strong>: { this.props.task.text }
            </span>
          </li>
        );
      }
    }
    

    after

    import React, { Component } from 'react';
    import { Meteor } from 'meteor/meteor';
    
    import { Tasks } from '../api/tasks.js';
    
    // Task component - represents a single todo item
    export default class Task extends Component {
      toggleChecked() {
        // set the checked property to the opposite of its current value
        Meteor.call('tasks.setChecked', this.props.task._id, !this.props.task.checked);
      };
    
      deleteThisTask() {
        Meteor.call('tasks.remove', this.props.task._id);
      };
    
      render() {
        // give tasks a different className when they are checked off,
        // so that we can style them nicely in CSS.
        const taskClassName = this.props.task.checked ? 'checked' : '';
    
        return (
          <li className={ taskClassName }>
            <button className="delete" onClick={ this.deleteThisTask.bind(this) }>
              &times;
            </button>
    
            <input
              type="checkbox"
              readOnly
              checked={ !!this.props.task.checked }
              onClick={ this.toggleChecked.bind(this) }
            />
    
            <span className="text">
              <strong>{ this.props.task.username }</strong>: { this.props.task.text }
            </span>
          </li>
        );
      }
    }
    

    これで全ての入力欄とボタンがまた動くようになりました。 これにより何が良くなったのかというと、

    1. データベースにタスクを入力する際、ユーザーがログインしており、createdAtが正しく、ownerとusernameが正しく、ユーザーが他の誰かを偽装しているわけではない、ということを確認できる
    2. 後のステップでタスクのプライベート化を行う際に、setCheckeddeleteTaskに更なるバリデーションを追加できる
    3. クライアントコードがデータベースのロジックと分割されており、イベントハンドラの中で様々な処理が行われる状況を避け、どこからでも呼び出せる共通メソッドを書くことができた

    ことが挙げられます。

    Optimistic UI

    ここで、なぜクライアント側とサーバー側でメソッドを定義したいのかを確認しましょう。 それは、我々が「optimistic UI」と呼ぶ特徴を利用したいためです。

    Meteor.callを使ってクライアント側でメソッドを呼び出す際、並行して二つの処理が行われています。

    1. AJAXリクエストの動き方と同じような感じで、クライアントがサーバーにセキュアな環境でメソッドを動かすようにリクエストを送る
    2. 利用可能な情報から、サーバーにより出力されるであろう結果を予測するためにクライアント上でメソッドのシミュレーションが実行される

    これはつまり、サーバーから結果が出力される前に、スクリーン上には新しく作成されたタスクが表示されるということです。

    サーバーから結果が返却され、その結果がクライアントのシミュレーションと矛盾しなければ、シミュレーションによる結果はそのまま残ります。

    仮に返却値がシミュレーションと異なった場合は、クライアント側の方がサーバーの実際の状態と合致するように修正されます。

    メソッドとoptimistic UIについては、Meteor Guideのメソッドの記事及び、optimistic UIに関するブログ記事で詳しく知ることができます。


    いかがでしょうか。

    初心者の方の場合、これでなぜセキュリティが強化されているのかよくわからない、ということもあるかと思いますが、とにかくまずはクライアント側とサーバー側で役割分担すべき、ということは覚えておくと良いかと思います。

    MeteorJS with React 公式チュートリアル 日本語訳版まとめ (翻訳中)

    Javascriptフルスタックフレームワーク、Meteorのチュートリアルを勉強がてら翻訳しました。

    Meteorのバージョンは1.6.0.1です。

    フロントのフレームワークがMeteor独自のBlaze、React、Angularから選べるのですが、個人的な意向でReactのやつを翻訳してます。

    未翻訳のものは出来次第リンクを付け足します。

    チュートリアル

    1. MeteorJSを勉強してみる その1: 初めてのアプリを作ろう【公式翻訳】

    2. MeteorJSを勉強してみる その2: ReactコンポーネントでViewを作成しよう【公式翻訳】

    3. MeteorJSを勉強してみる その3: コレクションにタスクのデータを蓄積しよう【公式翻訳】

    4. MeteorJSを勉強してみる その4: フォームからタスクを追加してみよう【公式翻訳】

    5. MeteorJSを勉強してみる その5: タスクの完了と削除を実装してみよう【公式翻訳】

    6. MeteorJSを勉強してみる その6: iOSとAndroidでアプリを動かしてみよう【公式翻訳】

    7. MeteorJSを勉強してみる その7: コンポーネントのステートにUIの状態を保存してみよう【公式翻訳】

    8. MeteorJSを勉強してみる その8: ユーザーアカウント機能を追加してみよう【公式翻訳】

    9. MeteorJSとReactを勉強してみる その9: メソッドでセキュリティを強化する【公式翻訳】

    10. MeteorJSとReactを勉強してみる その10: publishとsubscribeで表示するデータをフィルタリングしよう【公式翻訳】

    11. 1/8週(予定)

    その他関連記事翻訳

    チュートリアルが終わったらやります。