ポジティブ心理学研究所

幸福度(EQ)アップの研究所です。ポジティブ心理学に出会う前の古い記事はネガティブなので注意。

かべつべことCaveTubeの配信をソートできるシンプルビューアサイト「Cavetube Simple Viewer」を公開しました。

 

f:id:lettuce0831:20140127043406p:plain

http://ct-simple.appspot.com/

説明の仕様がないくらいシンプルな仕上がりとなっております。
昨日は一日中にこれにとりかかっていました。なんとか一日だけで公開することができました。

そもそも「かべつべ」って?

f:id:lettuce0831:20140127050334p:plain

正式名称はCaveTube。
P2Pを利用した配信サイトで、とても高ビットレートで快適な配信、視聴ができる。
ニコ生のように時間制限はなく、コメントもNGがないので快適。

放送者は配信中にもタイトル等を変えられ、気に食わないリスナーはBANにすることができる。
また、コメントにはAAも使うことができ、アスキーアートを貼ると最適化された表示がされる。

主な機能

ソートができます

視聴者数やコメント数等でソートができます。

タグでフィルタリングできます

まあこれは公式でもできますが

作ろうとしたきっかけ

かべつべで常々不便だなあと思っていたところは、視聴者数やコメント数でソートできないことでした。というかソート機能がないです。

もう1点はビューのスタイルがブロック型しかないことでした。サムネイルも非表示にできないし、リスト型等のビュースタイルがないので一覧性が低いことが常々不満でした。

そこで、一行リスト型のシンプルな一覧サイトを作ることにしました。視聴者数とコメント数でもソートできるので、どの配信が人が多いのか過疎ってるのかも一目瞭然となりました。

また、左上のフィルターをONにすればフィルタリングされた結果のみ返されます。

技術的な話

私は頭がよろしくないので特に難しいことはしてません。

サーバーはGoogle App Engineを使いました。理由はPythonがもっとも得意だし、GAEはアプリ作成も手軽でちょっぱやで公開できるからです。

作ればわかる!Google App Engine for Javaプログラミング

作ればわかる!Google App Engine for Javaプログラミング

本当はサーバー側はなしで、AngularJSを使ってクライアントのみでAjaxでデータ取ってきて作るつもりだったんですが、Access-Control-Allow-Originだかなんだかっていう忌々しい制限があってかべつべが用意してくれてるRSSにはヘッダにそれが指定されてなかったのでAngularJSは諦めてサーバー側でデータを取得、パースすることにしました。

AjaxでAccess-Control-Allow-Originのエラーを回避する方法もあることはあるのですがどっちみちサーバー側の処理を書くことになるので、不慣れなAngularJSは回避することに。

すっきりわかるGoogle App Engine for Javaクラウドプログラミング

すっきりわかるGoogle App Engine for Javaクラウドプログラミング

GAEなので、テンプレートエンジンはJinja2です。
サーバー側でテーブルタグで出力したものに対してDynatable.jsというインタラクティブなテーブルにしてくれるとてもよく出来たjQueryプラグインを実行することでソートやフィルタリングの機能を備えました。

ただ、高機能で素晴らしいことは素晴らしいのですが扱いに困る部分もあったのでそこらへんの話はこちらへまとめておきました。

Dynatable.js のCustom Queryで文字列を検索する - とあるJKのメモ用サブブログ

デザインは定番のBootStrapに丸投げです。しかもGetstartのサンプルそのまま拝借してます。

Dynatable.js はエロい

至れりつくせり

GAE + Python + Dynatable.js + BootStrap

ということで、偉大なるライブラリたちの力を借りることで私は最低限の労力をして望みの機能を備えたサイトを一日で公開することができました。
でも本当は最新版のAngularJSのお勉強もしたかったのでした。

プログラミング Google App Engine

プログラミング Google App Engine