![非公式スマホサイト][1]
[1]: /media/images/20130827_ss.png
CEDEC という、主にゲーム系の国内最大手カンファレンスがあるのですが、これの非公式スマホサイトを作ってみました。
# 動機
CEDEC の公式サイトは一応スマホで表示してもレイアウトが崩れないようになっていて、じゃああえて非公式スマホサイト作らなくてもいいんじゃね?と思われる方もいると思うのですが、以下の 2 つの問題を解決したくて作りました。
## 公式サイトには必要な情報が載っていない
公式サイトには、当日セッションを確認するのに必要な「セッションがどこの部屋で行われるのか」という情報がありませんでした。
セッションの部屋割り情報は、当日会場で配られるパンフレット(と、公式サイトでダウンロードできるパンフレットの PDF ファイル)には載っているのですが、公式サイト自体には載っていません。
当日会場で使うことを考えると、スマホで PDF を見るのは面倒なので、スマホに最適化された UI で情報が見たかったです。
## ネット上で議論したい
よその勉強会(ないしカンファレンス、セミナー、...)だと、だいたい勉強会ごとのハッシュタグが決められていて、Twitter 上で[tsuda り](http://ascii.jp/elem/000/000/428/428621/)的なことをしたり感想を tweet する人がそれなりにいるんですが、CEDEC だとそれが無いのが個人的にすごい残念に思っています。
これがあると、参加できなかった裏番組セッションの内容を垣間見れたり、他の参加者の意見を知ることができて有益だと思っています。
最初はセッションごとに何らかのユニークなハッシュタグを設定して、そのハッシュタグで tweet ができれば大丈夫かと考えました。ただその方法だと今回作るスマホサイトの利用者の tweet しか拾えず、利用者がそこまで増えないことが想定できていたので不十分でした。
そこで、公式サイトのセッション詳細ページの URL をリンクとして仕込むことで後で拾えるようにしました。これは公式サイトの tweet ボタンと同じ内容になるので、公式サイト経由で tweet されたものも後で拾えます。(ただ、公式サイトの tweet ボタンはなぜか同じ URL が 2 つ入力されてしまうという不具合があるようでした)
# 実装
セッションのデータを収集する部分と、収集したデータを HTML 化する部分からできています。
セッションのデータを収集する部分は、公式サイトから HTML をダウンロードしてきて、HTML の中身を解析して保存する、ということを行っています。
こういうプログラムは一般的に[クローラーとかウェブスクレイピング](http://ja.wikipedia.org/wiki/%E3%82%A6%E3%82%A7%E3%83%96%E3%82%B9%E3%82%AF%E3%83%AC%E3%82%A4%E3%83%94%E3%83%B3%E3%82%B0)と呼ばれるそうです。
今回は、Python と[BeautifulSoup(HTML の階層構造をたぐるライブラリ)](http://www.crummy.com/software/BeautifulSoup/)を使って解析しました。
なお、公式サイトにネットワーク負荷をかけないよう、以下のように対策を行いました。
- 同じ URL のページを複数回取得しないように、ローカルにキャッシュとして保存しておく
- 1 度に取得するファイルは 1 個までで、リクエストごとに 1 秒スリープを入れる
解析したデータは、ローカルに JSON 形式で保存しておきました。
CEDEC 公式サイトのデータは、1 つのセッションに複数の発表者が含まれる、という階層構造を持ったデータ構造になっています。
JSON 形式だと、今回のような階層構造をもつデータを保存する際にそのままの形式で保存できるので簡単でした。
収集したデータを HTML 化する部分では、これまた Python と Jinja2(テンプレートエンジン)を使って HTML を生成しました。
HTML 側では、jQuery Mobile を使ってページ遷移を行うような作りとしました。
今回 jQuery Mobile を初めて使ってみたんですが、それっぽい HTML を出力するだけで簡単にスマホ向き UI が作れて便利でした。
また今回は全ページを 1 つの HTML ファイルにして、基本的にはページ遷移の際に HTTP リクエストが飛ばないようにしました(外部サイトに飛ぶリンクは別ですが)。
CEDEC 会場の回線(Wi-Fi とモバイル回線)は割と不安定で、よく応答が返ってこなかったり接続が切れたりしたんですが、この方法だと最初に 1 つの HTML ページを読み込んでしまえばあとはオフラインでも表示できるので、いい感じに使えました。
# 結果
Google Analytics によると、150 ほどのユニークアクセスがあったようです。
また、Twitter で[「便利ですね！」](https://twitter.com/datsuryoku_k/status/369983422078263296)と言っていただけて、ありがたかったです。
今回は、結局この非公式スマホサイトからの tweet はほとんど無かったようです。
この理由を考えてみたのですが、ざっくりいうと「時代が追い付いていない」ということだと思います。
もうちょっと分解すると、以下の 3 つがあるのではないかと思います。
## メモをとるのに忙しい
CEDEC は個人で来ている人があまりいなく、だいたいの方は会社から業務として来ていると思うのですが、そういう人は後で社内レポートを書く必要があるのでセッションの内容のメモをとるのに忙しく、tweet している暇がないのではないかと思います。少なくとも、自分がそうでした。
## tweet していいセッションなのかどうかわかりづらい
セッションによっては、開始前に「このセッションは SNS 等での内容の公開を厳禁とします」と言われることがあるのですが、どのセッションが公開 OK でどのセッションが公開 NG なのかがわかりづらく、公開していいのかどうかがわからないことがありました。
こういう場合、リスクの少ない方に倒す人がほとんどだと思うので、tweet しないのだと思います。
## tweet する人がいないので、tweet しない
セッションの内容や感想を tweet する人が少ないので、「他の人がやっていないことはやらない」という負のスパイラルにいるのではないかと思います。
[イノベーター理論](http://ja.wikipedia.org/wiki/%E6%B5%81%E8%A1%8C#.E3.82.A4.E3.83.8E.E3.83.99.E3.83.BC.E3.82.BF.E3.83.BC.E7.90.86.E8.AB.96)でいうところの「イノベーター」「アーリーアダプター」がろくにいない状態なので、まあそんなもんではないかと。
最近は[CEDiL](http://cedil.cesa.or.jp/)や SlideShare で一部セッションの資料が公開されたり、ニコ生で放送された中継動画がタイムシフト試聴できたりと、あとから資料を見ることが徐々に可能にはなってきているのですが、まだまだ十分ではないと思っています。
例えば、事前に「このセッションのスライドは CEDiL にアップロードされます、ニコ生は中継されません、tweet はしていただいて OK です」のような情報がパンフレットに載っていれば、多少対応がしやすいと思うのですが。
# 感想
最初に、スマホサイトを作るのは楽しかったです。
jQuery Mobile を使うと簡単にいい感じのデザインに仕上がるので、デザインセンス 0 の自分でもいい感じの見た目のものが作れてよかったです。
次に、[@o_ob](https://twitter.com/o_ob)さん作の[CoFun](http://cofun.shirai.la/)が、会期中にがんがん機能追加のアップデートをされていてすごかったです。
CoFun は主に「どのセッションを受講しようか迷っている人に、参考となる情報を示す」という方針で作られていて(勝手な想像ですが)、そのための「時間帯に対して tweet して、どのセッションが面白そうかわかる」「待ち列の可視化」などの機能が実装されていました。
こちらの非公式スマホサイトでは、セッションに対しての感想等を tweet する目的で作っていたので、違いがわかって面白かったです。
時間的余裕があればこっちもバージョンアップしたかったのですが、ちょっと無理でした。
また、これと同じ方法で Google Docs Spreadsheet 版も作ってみたのですが、自分以外にも CEDEC のセッションデータを Excel にしたいという話を Twitter 上でちらほら見かけました。
できれば、公式サイト側でそういう要望に対応できるような何かがあるといいと思います。
例えば、CSV や JSON 形式でセッションのデータを公開するとか。
来年似たようなことをやるかもしれませんが、その場合はとりあえず「サイトに名前をつける」「わかりやすいドメインでアクセスできるようにする」ということをしたいです。
「非公式スマホサイト」という名前だと微妙なのと、他にもスマホサイトを作られる方がいた時にどっちがどっちかわからなくなってしまうので。
CEDEC非公式スマホサイトをつくってみた
2013-08-27