ToDoアプリの簡単な使い方

まずはToDoアプリの簡単な使い方。と言ってもToDoアプリの最低限の機能を実装してみただけです。

ToDoの追加・編集、優先度の変更が行えます。

ToDoデータはlocal storageに保存しています。不要になったら「設定」ダイアログからlocal storageのToDoデータのみ削除できます。

Office UI FabricとAngularJSの組み合わせ

Twitter BootstrapとAngularJSを組み合わせるのは良くあるパターンだと思いますが、ここでは
Office UI FabricとAngularJSを組み合わせる例を解説してみます。

ToDoデータの一覧表示

Office UI Fabricには、ListとListItemというUI部品が用意されています。以下のような表示のUIになります(OfficeUIをビルドした際のサンプルアプリの画面です)。

これを使ってToDoデータを表示すると見栄えが良さそうです。

ListItemへの独自スタイルの適用

が、このListItemは「選択(チェックボックスをON)したアイテムに対して何らかの操作をする」というUIで、ListItemの領域をクリックするとチェックボックスがONになってしまいます。ToDoでは「チェックボックスのみをON/OFFにしたい」ので、このままでは用途に合いません。

そのため、ListItemに独自のスタイルを適用します。"is-selectable"というスタイルでListItemのチェックボックスが描画されているので、今回のToDoアプリ用に"is-x-selectable"という独自スタイルを定義します。これでマウスオーバ時にはListItem項目の背景色が薄い灰色になり、別途用意したチェックボックスのON/OFFでToDoの完了/未完了が管理できるようになります。

.ms-ListItem.is-x-selectable:hover {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  background-color: #eaeaea; /* 薄い灰色 */
};

ToDoの項目表示は以下のような感じです。

グリッドレイアウトとListItemの表示

ListItemを用いて以下のようなToDoデータを表示します。このJSONデータを配列の形で管理することでToDoデータとしています。

{
  id   : id++,
  task : "悲しい時こそ涙の声を聞く",
  prio : 0,
  memo : "HAPPYぱLUCKY",
  done : false,
  showToDo : true,
  sample : true,
}

今回のToDoアプリはAngularJSを使用しているので、ng-repeatディレクティブで上記のToDoデータを表示します。単にUIフレームワークが異なるだけで、(あたり前ですが)Twitter BootstrapとAngularJSを組み合わせて使うケースと変わらないですね。

<div class="ms-Grid">
  <div class="ms-Grid-row">
    <div class="ms-Grid-col ms-u-sm6 ms-u-md4 ms-u-lg12">
      <div class="sample-wrapper">
        <ul class="ms-List ms-List--grid">
          <div ng-repeat="todo in todos | filter: { 'showToDo': true }">
            <!-- ListItemには独自スタイル(is-x-selectable)を適用する -->
            <div class="ms-ListItem is-unread is-x-selectable">
              <!-- ここからToDoの1項目 -->
              <div class="ms-ChoiceField">
                <!--- XXX ラベルの無いチェックボックスを作成している -->
                <input id="data{{todo.id}}" class="ms-ChoiceField-input" type="checkbox" ng-checked="{{isChecked(todo.id)}}" ng-click="check(todo.id)">
                <label for="data{{todo.id}}" class="ms-ChoiceField-field">
                </label>
                <!-- ToDoの概要はlabelタグで表示 -->
                <label class="ms-Label {{getPriorityColor(todo.id)}}" style="{{getTaskDecoration(todo.id)}}">
                  {{todo.task}}
                </label>
              </div>
              ...
              <!-- ToDoの1項目ここまで -->
            </div>
          </div> <!-- ng-repeatに対応するタグ -->
        </ul>
      </div>
    </div>
  </div>
</div>

ListItemの表示は以下のようなグリッドレイアウト上で行っています。ToDoデータの個数が多くなるとグリッドの幅を超えてしまいそうな気がしますが、List,ListItem側でケアしてくれるので表示がおかしくなることはありません。

<div class="ms-Grid">
  <div class="ms-Grid-row">
    <div class="ms-Grid-col ms-u-sm6 ms-u-md4 ms-u-lg12">
      ...
    </div>
  </div>
</div>

こんな感じで、複数行に渡ってToDoデータを表示してくれます。

まとめ

Office UI FabricとAngularJSでToDoアプリを作成してみました。やはり少し手の込んだアプリを作ろうとすると、AngularJSなどのMVCフレームワークが便利に思えてきます(AngularJSのお作法から外れると、途端に噴き出す謎のエラー！的な現象にはまだ馴染めませんが...)。

UIフレームワークでは、用意されている機能から外れるようなことをすると途端に面倒くさい感じになったりするのですが、今回のListItemをToDoデータの表示に使うケースのように、独自にスタイルを定義することで上手いこと対応できそうです。独自にUI部品を追加するような試みも面白そうです。

Office UI FabricとAngularJSでToDoアプリを作る

ToDoアプリの簡単な使い方

Office UI FabricとAngularJSの組み合わせ

ToDoデータの一覧表示

ListItemへの独自スタイルの適用

グリッドレイアウトとListItemの表示

まとめ