Mojolicious、Twitter Bootstrapを使ったレスポンシブなエロサイト「morolicious」 β版をリリースしました
[PR] morolicious（モロリシャス）ってサービスをリリースしました！XVIDEOS他、むふふーな動画をたくさん見られるサービスなので是非活用して下さいね☆特徴は「類似動画」のレコメンド機能（β版）！ #morolicious morolicio.us
— ピンクテクス 大人専用。さん (@pinktx_jp) 11月 25, 2012
という事で、とりあえず動くものをリリースしました。
未完成ながらある程度の機能を盛り込んでいるので使う分には困らないと思います。
徐々に機能を充実させつつ、これまでの経緯なんかをエントリーしていきたいと思います。
2012/11/26追記
ちょっと前にばっちんぐするサービス がリリースされていたようですので、リスペクト記事を書かなくては！、と真似っこしてみました。ごめんなさい。以下真似っこエントリー。
参加している勉強会で作る！って宣言してからはや半年。ちっとも動くもの出来ないじゃないかと飽きられてきたのでこれはマズイと基本機能だけで早漏リリースしました。
や、開発は一生懸命していたのですが、コーディングは遅いし、仕事は忙しいしで...。新しいものを試すのは時間がかかりますね！
コンセプト
１）キュレーション
キュレーションって何かと調べてみたら
ASCII.jp：キュレーションって何ですか？ NAVER森川社長に聞く
情報を価値付けし、情報と情報をつなぎ合わせて新しい価値（文脈＝コンテキスト）を生み出す、という行動や概念を指す
ふむ、情報に付加価値を付けるという意味では合っているのかも。moroliciousの場合はズバリ「関連性」１ユーザーとしてブラウジングしている時に欲しい機能という事で関連（しそうな）動画をレコメンドしています。
キュレーションって言っていいのかな？
２）ユーザビリティ
ユーザビリティは常に考えてますが、moroliciousの場合は一番のユーザーは自分です。なので自分が使い易いように設計しています。作った人のメリットと言う事で。
画面遷移についてですが、個人的には動画ページをタグで開きたいのでそのような使い方に沿って作っています。この辺は好みでしょう。
サムネイルを大きくしたほうが見やすいのは間違いないでしょうね。バランスを考えて諦めましたが...。
３）スマホ対応
こちらも当然の流れと思います。ただ、当初は jQuery mobileでスマホっぽいUIにしようと思っていたのですが、以前BootstrapのLTをした手前、レスポンシブデザインにする事にしました。
PCとスマホ、テンプレートを分けた方がいいか迷いましたが、ワンテンプレートで表示しています。メリットはデザインのちょっとした変更が両方同時に行われることですね。
使っている技術
１）Mojolicious
フレームワークにはmoroliciousの名前の由来であるPerlのWAF、Mojoliciousを使っています。ちょっと紛らわしいですが、おとなむけの Mo「j」oliciousという事でmo「r」oliciousとなっています。
テストサーバや本番サーバも付属していてとても便利なフレームワークです。リアルタイムwebフレームワークというだけに、WebSocketなんかも使えます。
RubyのWAFであるRoRやSinatraを意識してつくられたものだそうで、すごく似ているとの事（Ruby使い談）。Mojolicious::Liteという単一ファイルでアプリケーションを作成できるモードもあります。
なんと言っても日本語ドキュメントが充実しているのが助かります。
インストールも簡単でCGIとしても実行可能なフレームワークです。ただし、現バージョンは perl 5.10.1以上（5.12以上推奨）となっています。
２）テスト
実は作り始めの頃に練習としてほぼ初めてくらいにテストを書いていました。ですが、途中からサボっています（汗）発表する都合上、まずは動くものを優先させてしまいました。
これからはなるべく書こうと、思います。
３）Twitter Bootstrap
知るきっかけとなったのは他のWAFである、Amon2に採用されていたからです。
Bootstrapの説明は他のサイトに任せるとして、何と言っても便利なのがレイアウトを組む時。グリッドシステムが超便利！
ただし、意外とバージョンアップでの変更が多いので注意が必要です。また、バグも残っていたりするのでちょっとしたTipsや調整は必要になります。
個人的にはbootstrap.css、bootstrap-responsive.cssを素のまま呼んだあと、bootstrap.override.cssというふうに呼び出してオーバーライドして使っています。
４）jQuery、jQueryプラグイン
jQueryはBootstrapでも使うし、必須です。Bootstrap標準のプラグインをはじめ、レイアウトにBox要素を詰めて表示（Pinterest風？）してくれる jQuery Masonry、Twitterのような無限スクロールを実現するinfinite Scrollというものを使っています。
５）スクレイピング
まぁ、Perlを使っているという事で超有名なWeb::Scraperを使っています。
説明要らないと思います。さすがmiyagawaプロダクト。なんでも出来ます。インターフェースが素晴らしい。これ使うだけでもPerlを使う価値あり。
６）７）画像系
サムネイル表示はimgタグでオリジナルを表示しているだけです。スクレイピング処理でURLも拾ってきています。まずいかな、と思いつつEmbedとしてシェアしていいよ！ってタグを配信しているのでサムネイル使っちゃってます。
ただ、表示が遅い時があったりするのでキャッシュした方がいいかと思っています。サーバに迷惑かけてもまずいですし。
８）Webサーバ
Nginx + Starmanという構成です。Nginxはまともに使うのが初めて。Starmanも初めて。何事も練習！という事で初めてのものが多いです。
９）サーバ監視
webminいれてWebminstatsというモジュールを使っています。入れるのにちょっと苦労するのですが、グラフ表示は便利ですね。あまり監視らしいことはしていないのでこれからという事で。
１０）デーモン監視
今回はCGIではなくデーモンとして３つ程アプリケーションを動かしているのでdaemontoolsを使ってみました。
”デーモンプロセスの監視・制御(起動・停止・管理)とログを収集管理するツール群”という事で、プロセスが死んだ時には自動的に立ち上げてくれます。
実は、supervisordを使おうと思ったんですけど、うまく行かなかったのでdaemontoolsを使っています。
１１）検索機能
一番メインの機能です。と、言ってもライブラリ使っているだけですが。高速な類似検索エンジンという事でLuigiというものを使っています。
いつか使ってみよう、何に使おうか、とずっと思っていましたので今回試すことが出来てなによりです。
LuigiにはBayonというクラスタリングツールが必要になるのですが、こちらも素晴らしいものなので興味がある方は是非試してみて下さい。
形態素解析にはMeCabを使っています。秘密の辞書を作成して使っています（笑
おわりに
他にもいろいろな文献やエントリーを参考にしているので出来る限り紹介したいと思っていますが、忘れていることも多々あるので思い出しながら徐々にエントリー出来たらな、と思っています。
アプリケーションに関しては「とりあえず動く」というレベルのものなのでやりたい事があり過ぎます。機能の充実をがんばっていきたいと思います。
ネタ元エントリー様
Gunma.web #8でLTしてきました「LDDによるWebアプリケーション開発」
このエントリーは時間が経ってから書いたものになりますが、スライド載せちゃえ！って事で日付を変更してエントリーします。
発表したスライドはこちら
前回参加した後から構想はあったのですが、なにせ時間が無くなってしまってなかなか開発が進まなかったので発表内容はネタ的なものとなってしまいました。
参加者の皆さんには生暖かく見守っていただけた（と思う）ので安心しています。
ちょっとアウト感漂っていたらしいですけど、次回から気をつけます！という事で...。
