アニメ好きのためのサービス
 「あにみた!」作ってみた

         2012年 9月
              石山 宏幸
初プレゼンがこんな大きな偉大な
イベントなのでガクブルしてます…
生暖かく見守ってやってください!
自己紹介
名前:石山 宏幸(Hiroyuki Ishiyama)/ @ishiyama_amn
会社:アジャイルメディア・ネットワーク株式会社(AMN)
所属:システム部
役職:HWE(ハイパーウェブエンジニア)
2010年9月よりJOIN!
今のお仕事:
・Fans:Fans 「ファンでつながるファンサイト」
・Profill「プロフィール登録サービス」
・あにみた!「あなたが見たアニメを楽しく記録するサービス」
他、雑務色々w\(^o^)/
このプレゼンの流れ
1.あにみたで使用している技術の紹介
● FuelPHP
● MongoDB
● Twig
● JQueryMobile
● 外部API(Amazon,楽天,しょぼいカレンダー)
2.サービスを作っていて苦労した点と感想
3.時間余ったら(質問とか?ツッコミ?あるのかな?)
の前に…少しだけ

開発・保守してるサービスの紹介
Fans:Fans
 https://fansfans.jp/


       モノと人とファンがつながるサービス!

       ガジェット、本、DVD、ゲームなど、好きなアイテムを登
       録。自分だけのアイテムリストを作ることができます。


       ユーザー数:約15000人
       Apache-2.2.3
       PHP-5.3.10
       CakePHP-1.2
       MySQL-5.0.95
       サーバー構成:
       Webフロント1台、DB1台、DBバックアップ1台
Profill
http://profill.me/


            自分の好きなモノリストをプロフィールとし
            て外部公開できるサービス!
            Fans:Fansで登録した好きなアイテム(本やDVD、音
            楽など)を教えることが出来ます。
            あわせてTwitterやFlickrなどの外部サービスと連携
            しておくと最新情報を引っ張ってくるのでまとめとして
            みれるかも。

            サーバー構成はFans:Fansとほぼ同一です 。

            ※単体でのサービス提供はしておりません。
            Fans:Fansに登録いただくと、連動サービスとして
            自動的にページが作成されます!
あにみたサービス開発概要 1
 あにみた!(β)
     http://animita.tv/

               アニメ好きのための、アニメちぇっくいん
               サービス!
               チェックイン、コメント、いいね!というシンプルな機能、Twitter
               やFacebookへのソーシャルポスト対応。各話ごとの視聴履歴を
               ゲーミフィケーション的に管理できます。

               2012年6月 βリリース!
               全制作工程:約 3ヶ月
               Amazon Linux 64bit
               PHP-5.3.13
               APC-3.1.9
               memcached-1.4.13
               FuelPHP-1.2
               Twig-1.6.0
               JQuery-1.7.1
               jQueryMobile-1.1.0
あにみたを開発した思い


●   自分がアニメ好きで多くの視聴アニメを管理したかった!
●   得意なジャンルなら頑張れそうだから!
●   ある程度の要望があり、利用者は想定出来たから!
●   まだ知らない面白いアニメが発掘できそうだから!
開発経緯や詳細について
あにみた!ブログで開発や色々報告してます!
http://blog.animita.tv

詳細な開発経緯については、大先輩の小山さん(id:koyhoge)の
ブログを参照してください!

「あにみた!」ができるまで - Blog::koyhoge
http://d.hatena.ne.jp/koyhoge/20120605/animita
と、長くなりましたが


        おまたせしました!
FuelPHP




FuelPHP 公式サイト:http://fuelphp.com/
FuelPHP まとめ Wiki:http://fuelphp.phpfogapp.com/wiki/
何故、ネットサンプルも充実し、開発者も
多く、使い慣れたCakePHPではなく
FuelPHPを選んだのか?
なんかぁー、PHPerの間で流行ってるし?
CakePHP(1.2)やSymphonyよりチョッパヤって
どこかのブログで風の噂だし?
各地の実行速度比較リスト見ると心躍っちゃう…

なにより、自分が使ってみたかった! から!

ミーハーですいません、すいません!そんな理由です!


※本当は、今年の目標として「新しい技術やフレームワークに触れて自分を向上させ
る」という目的のためです。
FuelPHPここがすごいよ!

●   API作成が超楽
●   MongoDBも標準対応
●   PHP5.3.x以降対応なのでAutoload安定
●   様々なParser対応(Smarty,Twigなど)
●   コンセプトや名前が無骨でかっこいい!
FuelPHPここが大変だったよ!

●   フォルダやファイルの命名規則覚えるのが大変
●   Configがちょっと癖あるよ
●   Viewの表示に手間取ったよ(Twig使った場合)
●   Model(MongoDB)周りの扱いが難しい
(↑はCoreを見てPackeges内に似た形で実装。)
せっかくなので
API作成がいかに簡単かの説明でも!
FuelPHPでのAPI作成例
Controller_RESTの使い方

<?php
class Controller_Hoge extends Controller_REST {
     public function get_list() {
         $q = Input::get('q'); // list.json?q=xxx が受け取れる
         $data = array('hoge' => $q, 'result' => 1);
         return $this->response($data);
     }

    public function post_update_list() {
        $q = Input::post('q'); // これでpostデータを受け取れます!
        $data = array('q' => $q, 'result' => 1);
        return $this->response($data);
    }
}
API呼び出し方
先ほど作ったAPIはこんな感じで呼べます。

GET:http://[yourdomain]/hoge/list.[format]?q=foo
※POSTの場合はフォームなどから通常通り送信すればOKです


formatには、json,xml,csv,phpなど
様々な形式を指定出来ます!
当然、開発者はそこを意図しなくても自動的に指定したフォー
マットで戻ってきます!←ここ重要
と、これじゃFuelPHP紹介になってしまうのと、過去にスラ
イドシェアしてくださってる先輩方のを見てもらったほうが
はるかにいいので・・・

次は、FuelPHP+MongoDB周りのお話
前職含め、5年以上も使い慣れていた
MySQLからMongoDBへと変更した理由
サービス開発前
DB選定のためにやったこと
あにみたで求められる仕様

● 柔軟に変更に耐えられる(仕様決まってないw)
● βサービスなので試行錯誤したい(カラムを気楽に追加で
 きる)
● 負荷対策を比較的楽に、簡単にしたい(単純なサー
 バー増加など)
● ユーザーアクションはupdateより、insertが圧倒的に
  多いと想定
MongoDB vs MySQL
● 宣言が不要(自動作成)            ● カラム等の宣言が必要
● 非トランザクション(※出来          ● トランザクションで安心感
    ないわけではない)            ● DB構成&サーバー拡張
●   select,insertが圧倒的な       が若干大変
    速度で早い                ●   join句やgroup by句などで
●   sharding標準対応してる          柔軟なselectが可能
●   join句など結合系が出来        ●   ネット上でのサポート情報
    ない(一応group byは出来         や技術ブログなどが数多く
    るが…)                     あるので、トラブル対応し
●   複数のコレクションをまた             やすい
    ぐ処理は向いていない
選ばれたのは…


MongoDB
 でした!

 \パチパチパチパチ/
FuelPHP x MongoDB
            FuelPHPにMongoDBのReplicaSetレプリケーションを設定する




FuelPHP-1.2時点ではMongoDBを使うことは標準で出来るもの
の、残念ながら公式でReplicaSetレプリケーション対応していない
ようなので、あまりしたくはなかったのですがCoreをいじりました。

※事前にサーバー内にはMongoDB&ReplicaSetが使える環境が整っていることが前提です。
FuelPHPで使用するためのconfig設定

まずは、ReplicaSet用のconfig設定。
ConfigサンプルにあるMySQLなどと同じように、'mongo'という連想配列キーで設定。
オプション項目は他にもありますが下記だけ設定すればとりあえず動きます。

FilePath:
/fuel/app/config/[production or development]/db.php

'mongo' => array(
     'default' => array(
           'hostname'        => '192.168.0.97,192.168.0.98,192.168.0.99',
           'port'            => 27017,
           'database' => 'hoge',
           'replicaSet' => "rshoge",
           'timeout' => 300,
     ),
),
こんな感じで、DBが複数にわかれている場合のDB切り替え設定と、外部にある
MongoDB利用設定なども出来ます! So, Cool!
FuelPHP - Core内 MongoDBのReplicaSets設定
FilePath:/fuel/core/classes/mongo/db.php
Line:146 付近に下記を追加。(わかりやすくするためコメントいれてます)
public function __construct() 内
FuelPHP x Twig
FuelPHPは標準だとテンプレートエンジンは利用なしで拡張子
が.phpファイルとなります。
(自分で使用するエンジンを設定する必要があります)

Smartyでも良かったのですが、せっかくなのでこちらも色々試し
てみようと思い、Twigを選択してみました!
Twigのいいところ!
● FuelPHPで標準サポートされている(またこれか)
● 構文がわかりやすい、学習コスト低いのは利点
例)変数:{{hoge}} 、if構文:{% if hoge %}処理{% endif %}
● 組み込みフィルターが多数ある
例)date,sort,format,upperなど
● 継承システムが素晴らしい(ブロック単位で継承可!)
こんな感じ extends と parent() で直感的に別ファイルから読める
Twig - テンプレート継承の簡易説明


                       共通部分(layout.twig)
                        ヘッダーやフッターなど



          pc.twig          contents.twig      mobile.twig




                        メインコンテンツ(データ
      PC版レイアウト                             Mobile版レイアウト
                           表示部分)
FuelPHP x JQuery Mobile
PHPカンファレンスの本質とはずれるので今回は飛ばし気味に
要点だけ簡単に摘みます。

ある程度は、デザインなしで超カンタンに定番スマホぽいUIデザイン
が作成できるよ!
標準機能のAjaxのページ先読み&ページ追加の挙動を理解してな
いならオフのがいいよ!
JQM独自UI部分をいじるのはちょっと大変だよ!
API周りのお話
(m´・ω・`)m ゴメン…
資料作成終わってから気づいたんだ。
あ!これ言っちゃいけなかった!
まいっかー!ンフフ☆オッケー!

・Amazon
・楽天
・しょぼいカレンダー
プレゼンまとめ!
● FuelPHPはフレームワークかじったことある人な
  らオススメで軽くて便利だよ!
● MongoDBは早いし、DB構築・拡張・修正が便
  利だよ!
● Twigを使うとデザイン修正やコードがすっきりす
  るよ!
● JQuery Mobileはデザイン苦手系プログラマー
  向けの救世主
Webサービスを初リリースしてみて

・新しい技術って楽しくて苦しい!
・とりあえずサービスを出してみるって大事!
・サービスは「作って終わりじゃない」は本当!
・Webサービスの利点もいっぱいだよ!
・ユーザーさんの反応があるって嬉しい!
・皆さんもこの機会にアニメ視聴しませんか!
終わると思った?

まだだ・・・まだ終わらんよ!
なんかーいまーアプリって話題じゃん?
出しとくべきじゃね?
っていうかー社内の事例1個もないし?

じゃ、あにみたアプリよろぴこーw

(※かなりのフィクションです)
Objective-Cとかもうぬるぽ_(:3 」∠ )_
Xcodeをまず使いこなせって?
そして今更、懐かしのCか…
学習コストが高すぎる…俺には無理だ…

(※ノンフィクション かなりガチ)
tTitanium Mobile
JavaScript最高ーーーー!
Titanium Mobileちゃんちゅっちゅ
時代はWebだよねー!
\( 'ω')/ウオオオオオアアーーーッ!!!
Titanium Studio?
意外といいじゃん!すげーじゃん!
あにみた! for iOS(仮)

       初秋(10月)あたりをめどにリリース
       予定です!

       ヘタレエンジニアな私が
       Objective-Cに挫折し
       救世主 TitaniumMobileによって
       開発が着々と進んでおります!

       乞うご期待!
ご静聴ありがとうございました!

あにみた!(PHPカンファレンス用資料)