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


前回[vol.1](http://qiita.com/tacksman/items/00a3a49e47a0f6858e02)

## 静的データを扱う

静的データの扱いについてです。
チャット相手のユーザー情報(名前とアイコン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`については[こちら](https://atmospherejs.com/momentjs/moment)。

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

```js: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まで完了していると、

```javascript: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()
      }
    }
  ];
```

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

![スクリーンショット 2015-11-18 15.42.50.png](https://qiita-image-store.s3.amazonaws.com/0/66681/b27ffa2c-2f6f-c1c7-764a-26865cd1a188.png "スクリーンショット 2015-11-18 15.42.50.png")
このような画面を表示できます[^1]。

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

### しめと次回

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

次回はサーバーの作成と、クライアントとのデータの共有についての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>
```


![スクリーンショット 2015-11-18 15.47.21.png](https://qiita-image-store.s3.amazonaws.com/0/66681/68a4eb9a-a631-ec5f-147b-7b94a35be636.png "スクリーンショット 2015-11-18 15.47.21.png")

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

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

以上。