MongoDBのAggregationフレームワークの紹介

青柳です。
そろそろリリースされるMongoDB2.2で利用できるAggregationフレームワークについて紹介します。

例としてTwiiterAPIのHomeの結果をコレクションとして保存します。
具体的には以下のリンク先を参考にしてください。
https://dev.twitter.com/docs/api/1/get/statuses/home_timeline

・Count
コレクションやクエリーにマッチするオブジェクトの数を返します。

> db.tweet.count();
> db.tweet.count({user.screen_name: "aoyagikouhei"});

indexがあると早くなります。
> db.tweet.ensureIndex({user.screen_name: 1});

・Distinct
指定したキーに対してコレクションの個別のリストを返します。

>db.tweet.distinct("user.screen_name");
["aoyagikouhei", "masason"]

クエリーもオプションでつけられます。
> db.tweet.distinct("user.screen_name", {id : {$gte : 1234567}});

Distinctは単体のBSONを返すので最大ドキュメントサイズ(4MB/16MB)を超える場合はMapReduceを使います。

・Group
SQLのgroup byと同じような、要素をグループ化した配列を返します。
例えば、IDが1234567以降で各ユーザがつぶやいた数の集計は以下のようになります。

> db.tweet.group({
  key : {"user.screen_name" : true},
  cond : {id : {$gte : 1234567}},
  initial : {count : 0},
  reduce : function(obj, prev) {prev.count++;}
});

Groupも単体のBSONで返すので結果が大きい場合はMapReduceを使います。
また、複雑な集計の場合もGroupでは限界があるので、MapReduceを使います。

Webサイト設計で利用したいツール

高瀬です。

ここ最近で個人的に仕事上で気になった、以下の3つの言葉について書いておく。

• マークアップエンジニア
• ワイヤーフレーム
• コンセプトダイアグラム

マークアップエンジニア

「マークアップエンジニア」という単語で検索してみると、2007～2008年くらいの記事が上位に表れる。すなわちその頃によく使われていた単語だということなのだろう。

ITPro マークアップ・エンジニアのTips(2008年)
第1回　マークアップ・エンジニアって何？

この記事によると、Webページに表示する情報を、デザインとユーザインターフェイスを含めて設計し、HTMLで実装する職種、ということになるだろうか。その単語を考えたという人(森田 雄 氏)のスライドを見つけた。

slideshare(2010年)
マークアップエンジニアのキャリアパス

おっと、「フロントエンドエンジニア」という単語が登場した。

とみー(2011年)
フロントエンドエンジニアを探す方法５つ

抜粋：
-----
フロントエンドエンジニアとはバックエンドエンジニアと対比して説明される職種で、ここでは、HTMLやJavaScript、CSSといったクライアントサイドの技術を中心に扱う、いわゆるWebアプリケーション部分を担当する人々と考えていただいて問題ないかと思われます。
-----

komacchi.com/blog(2010年)
フロントエンドエンジニア（マークアップエンジニア）とコーダーの違い

サーバ側の開発を行うエンジニアに対比させた呼び方ということであれば、フロントエンドエンジニアとマークアップエンジニアの仕事に大きな違いはないのかもしれない。

ともかく、「HTMLコーダー」はHTML+CSSでコーディングする人、マークアップエンジニアとフロントエンドエンジニアはJavaScriptでのプログラミングもするし、設計もする、という位置付けだと認識する。

ワイヤーフレーム

先日、同じプロジェクトを担当しているメンバーに、「画面のワイヤーですでに作っているものがあれば参考にしたいので見せてほしい」とお願いしたところ、色付き、影付き、写真付きの画面図案を出してくれた。

うむむ、「ワイヤー」「フレーム」というくらいだから線と枠で作成されたレイアウト図だと思っていたのだが、これはもはやデザインを含めた画面の完成図案に近いのではないだろうか。自分の認識違いなのか。

では、本でも読んでみよう。

Webデザインレシピ(2012年)
現場のワークフローで覚える Webサイト制作教室

この本では、「ワイヤーフレームという言葉に明確な定義はない」としており、そのうえで以下のような言葉を使うこととしている。

サイトマップ	Webサイト全体の構造を表す図。登場するページとそのつながりを示す。
ワイヤーフレーム	サイトマップに、各ページや導線の詳細を記述したもの。Webサイトの設計図。
ページレイアウトのワイヤーフレーム	ページの構成要素と配置を記述した図。
デザインモックアップ	ページのデザインを決定するために、ページを画像として作成したもの。

この定義に当てはめると、自分の認識していた「ワイヤーフレーム」とは「ページレイアウトのワイヤーフレーム」で、見せてもらったのは「デザインモックアップ」に近い内容、ということになりそうだ。

そうすると、次に自分はどちらの図を作成するべきなのかだが、この時点では自分が開発を担当する機能に必要な、情報の整理や画面の構成要素の洗い出しを行う段階だったはずで、「ページレイアウトのワイヤーフレーム」の辺りで間違いではなかったつもり。

ならば、もう少しワイヤーフレームという言葉の、社内での定義を明確にしておきたいと思う。

• ワイヤーフレームは、Webページの構成要素を洗い出すとともに、実際に表示するサイズで配置を決定するために作成する図。

くらいでどうだろうか。ポイントは表示する内容が網羅されていること。これによりサーバサイド側で用意しなければならないデータやロジックが決まってくる。さらに、実際に画面に表示する際のサイズで作成すること。デザインモックアップにする際に、想定していた画像などのサイズが大幅に変わってしまった、なんてことがあるようでは、何のために設計しているのか分からない。

サイトマップやその詳細は、まとめて「サイトマップ」と呼べばいいと思う。Webシステム全体の機能の洗い出しをした段階でできてくる成果物になるのではないだろうか。これに対してページレイアウトは詳細設計の段階の成果物になるだろう。

 定義を決めたところで、ワイヤーを書いてみよう。例として、以下のようなWebシステムの開発を想定する。

概要	社内で各メンバーが読んだ書籍を紹介するサイト。書籍のタイトルや感想を投稿すると、それに対して他のメンバーがコメントを記入する。
目的	書籍の情報を共有することで、社内での技術書の利用と自己啓発を促す。

サイト名は、適当に「UV Shelf」とでもしておこう。以下の流れで進める。

1. サイトマップ(サイト構成のみ)を作成する
2. サイトマップ(各ページの詳細含む)を作成する
3. 各ページのワイヤーフレームを作成する

では、サイトマップから。

社内で利用することを想定しているのでユーザ認証なんてどうでもいいが、投稿やコメントをする際にあらかじめユーザ名がわかっている方がいいように思うので、一応ログイン画面などを付けてみた。

次にサイトマップの詳細。管理画面とユーザ登録画面の導線がサイトマップと違ってしまったが、これはサイトマップを直す方向で考えることにする。

最後にTOP画面のワイヤーフレーム。

TOP画面には書籍の一覧と、ログイン（ログアウト）、書籍の投稿、管理画面へのボタンまたはリンクを配置。これでサイトマップ詳細に記述した画面の構成要素を満たす。

また、横幅はスクロールバーを含めて920px、スクロールバーを除くと900pxとなるようにしている。これで実際のWebページ表示のサイズを表現する。適当に描いたのでマージンなどはバラバラなのだが、きっちり作りこめばデザインモックアップに利用できるようになるはず。

と、ここまで書いて、そういえばページングの機能が抜けているなぁとか、パスワード変更をする画面がないなぁとか、いろいろ気づくことがある。まだまだ仕様が詰め切れていないようだ。

ちなみにこの図はCacooで作成している。

Cacoo

ワイヤーフレームを作成するツールは他にも以下のようなものがある。

Webクリエイターボックス(2010年)
Webサイトの骨組み: ワイヤーフレームを素早く・手軽に・美しく制作する

コンセプトダイアグラム

Webサイトをリニューアルする案件において、現行サイトの整理をするために「コンセプトダイアグラム」を作ってみた、というメンバーがいる。

少し調べて見ると、Webサイトのアクセス解析などで利用されているらしい。立ち寄った本屋では以下の本に4ページだけ記載されているのを発見した。

murak.net(2012年)
『入門ウェブ分析論[増補改訂版]』レビュー

以下、その本の内容である。コンセプトダイアグラムの前に、Webサイトを分析するうえで覚えておかなければならない用語がある。

用語	意味
KGI	Key Goal Indicator：経営目標達成指標。サイトの目的、目標。目標は数値を含めて設定する。
CSF	Critical Success Foctor：重要成功要因。KGIに決定的な影響を与える要素。
KPI	Key Performance Indicator：業務評価指標。CSFの具体的な施策と目標設定。

それぞれ、いくつか例が記載されている。以下、分析対象のサイトをメディアサイト、広告型サイトとした場合の例。

指標	指標例
KGI	利用者を800万人に増やし、月間1000万円の広告収入を得る
CSF	・閲覧数を増やす ・滞在時間を増やす ・ブランド名を理解してもらう
KPI	・新規ユーザのページビュー数を1.5倍にする ・新規ユーザの訪問数を月間500万から800万に増やす ・サイト名(ブランド名)での検索回数を1.5倍に増やす ・1訪問あたりの滞在時間を1.5倍に増やす ・1訪問あたりの平均ページビュー数を10から12に増やす ・広告掲載ページのページビュー数を現在の2倍に増やす ・広告枠を現在の1.5倍に増やす

KGIやKPIの指標を設定するためには、対象サイトの目的やユーザ像を理解しておく必要がある。サイトを整理し、理解するために、コンセプトダイアグラムを作成する、という手法がある。

「入門 ウェブ分析論」の内容抜粋は以上。というわけで、コンセプトダイアグラムは、Webサイトの利用者が閲覧している、主要なコンテンツと導線を図に描き、どのようなKPIを設定するのがよいかを検討するための図、といえる。

実例が以下のサイトで紹介されている。

Web担当者Forum(2011年)
アクセス解析新手法「コンセプトダイアグラム」とは？ サイトの全体像を可視化して知るべき指標を知る【レポート】

また、コンセプトダイアログによるWeb改善フレームワークを提唱されている清水 誠氏のスライドが以下のサイトに掲載されている。

Six Apart ブログSix Apart ブログ(2012年)

「Webサイト改善は図を描きなさい！」 〜 SiteCatalyst達人から教わった分析フレームワーク

おわり

「技術ブログ」ということで、もっと実装寄りの内容が期待されていると分かってはいるのだけれども、現在取りかかっている案件の作業フェーズの都合上、今回はずいぶんと設計よりな話になってしまった。

このブログにおいて自分が担当するテーマは「マークアップエンジニア」ということになっているが、テーマを決める際に「Web関連」などと曖昧なことを言ってしまったためにそうなったのであって、果たしてそれに向かっていけるかどうか不安ではある。

マークアップにたどり着くのはまだまだ先になりそうな気はしているが、一応次回以降も自分担当の回はそれっぽい方向で。