ionic + Meteorのチュートリアル通してる所感メモ vol.2

前回vol.1

静的データを扱う

静的データの扱いについてです。
チャット相手のユーザー情報(名前とアイコンURL)、チャット相手ごとの最後に送信されたメッセージとその時間をクライアントのコントローラーに

$scope.chats = [
  {
    _id: 0,
    name: 'Ethan Gonzalez',
    picture: 'https://randomuser.me/api/portraits/thumb/men/1.jpg',
    lastMessage: {
      text: 'You on your way?',
      timestamp: moment().subtract(1, 'hours').toDate()
    },
    ...
  }
]

こんな形で用意します。

現在の日時を基準にtimestampを作成しているため、上記のチャット情報はmeteorコマンドを実行して日時から一日前の時刻情報を表示します。
この時点では日付情報の整形はされていません。

このチュートリアルでは、timestampの取得と整形のためにmomentjs:momentというMeteorのオフィシャルパッケージを利用しています。
以下のコマンドでプロジェクトにパッケージを追加しましょう。

$meteor add momentjs:moment

momentjs:momentについてはこちら。

チュートリアルアプリでは、タイムスタンプにフィルタをかけてフォーマットに合わせて表示できるようにしています。

client/scripts/filter/calendar.filtter.js

angular
  .module('Whatsapp')
  .filter('calendar', calendar);
 
function calendar () {
  return function (time) {
    if (! time) return;
 
    return moment(time).calendar(null, {
      lastDay : '[Yesterday]',
      sameDay : 'LT',
      lastWeek : 'dddd',
      sameElse : 'DD/MM/YY'
    });
  }
}

return moment(time).calendar(null, ...の部分で、時刻情報にフィルタをかけています。昨日、当日、先週、それ以外の区分でフィルタをかけ、合致した項目で指定しているフォーマットで整形された時刻情報を返します。

Step2まで完了していると、

chats.controller.js

$scope.chats = [
    {
      _id: 0,
      name: 'Ethan Gonzalez',
      picture: 'https://randomuser.me/api/portraits/thumb/men/1.jpg',
      lastMessage: {
        text: 'You on your way?',
        timestamp: moment().subtract(1, 'hours').toDate()
      }
    },
    {
      _id: 1,
      name: 'Bryan Wallace',
      picture: 'https://randomuser.me/api/portraits/thumb/lego/1.jpg',
      lastMessage: {
        text: 'Hey, it\'s me',
        timestamp: moment().subtract(2, 'hours').toDate()
      }
    },
    {
      _id: 2,
      name: 'Avery Stewart',
      picture: 'https://randomuser.me/api/portraits/thumb/women/1.jpg',
      lastMessage: {
        text: 'I should buy a boat',
        timestamp: moment().subtract(1, 'days').toDate()
      }
    },
    {
      _id: 3,
      name: 'Katie Peterson',
      picture: 'https://randomuser.me/api/portraits/thumb/women/2.jpg',
      lastMessage: {
        text: 'Look at my mukluks!',
        timestamp: moment().subtract(4, 'days').toDate()
      }
    },
    {
      _id: 4,
      name: 'Ray Edwards',
      picture: 'https://randomuser.me/api/portraits/thumb/men/2.jpg',
      lastMessage: {
        text: 'This is wicked good ice cream.',
        timestamp: moment().subtract(2, 'weeks').toDate()
      }
    }
  ];

このように用意したデータが日付情報を整形されて

このような画面を表示できます¹。

しめと次回

ひとまず今回はこんなところで。

次回はサーバーの作成と、クライアントとのデータの共有についてのStep3について書いたりすると思います。

おまけ

これはionicの内容ですが、ion-option-buttonというクラスがionicには用意されています。
これを上記のスクショのhtmlにこんな感じで使うと、

<ion-item
    ng-repeat="chat in chats | orderBy:'-lastMessage.timestamp'"
    class="item-chat item-remove-animate item-avatar item-icon-right"
    type="item-text-wrap">
    <img ng-src="{{chat.picture}}">
    <h2>{{chat.name}}</h2>
    <p>{{chat.lastMessage.text}}</p>
    <span class="last-message-timestamp">{{chat.lastMessage.timestamp | calendar}}</span>
    <i class="icon ion-chevron-right icon-accessory"></i>
    <ion-option-button class="button-assertive" ng-click="remove(chat)"> <!-- これ -->
      Delete
    </ion-option-button>
</ion-item>

こんな感じに、左にスワイプすることでボタンを表示するというUIができます。
ｱｰｲｲ･・・。

ちなみに右側の>ですが、<i class="icon ion-chevron-right icon-accessory"></i>のicon-accessoryクラスによるもので、ion-option-buttonでは関係ないです。

以上。

1. Step2の時点ではチャットやメッセージのデータをクライアントのコントローラーにまるまる用意していますが、Step3でクライアントからサーバー側に移します。 ↩