Webサービスを作るときに考えたこと(PetaTube)
PetaTubeをリリースしてみて感じたことや考えていたことを自分のためにメモしておきます。
http://d.hatena.ne.jp/koba04/20121002/1349103920
長いので先に結論だけ書いてしまうと、多くの人に使ってもらうサービスを作るためにはyusukebeさんによるYAPC::ASIA2012のベストトーク「「新しい」を生み出すためのWebアプリ開発とその周辺」で語られているようなことをしっかりやっておかないとダメだなと思いました。
考える
アイデア
- アイデアはいつも考えています。
- 自分は音楽が好きでいい音楽に出会うと人に勧めたくなるので、そういった思考がサービスを考える際にも大きく影響しています。
- 基本的には「自分が欲しいサービス」という点で考えています。自分の他に数人でも欲しいと思っている人がいるんじゃないかと思った時にサービスに出来ないかを考えます。つまり基本的には自己満足です。もっと多くの人に使ってもらうためにはここでもっとしっかりと考えないとダメなんじゃないかと思っています。
- 今回のPetaTubeでは、あるNaverまとめの動画が全部見たいと思ったけどこれ再生終わるたびに埋め込まれている動画をクリックして再生させるの面倒だなぁと思い、これIDだけ抽出できればJavaScriptで連続再生させられるんじゃないかと思ったのがきっかけです。
機能
- 基本的には「最低限の機能」は何か、「あったらいい機能」は何かを分けて考えます。そして基本的には最低限の機能だけの実装を目指します。理由としては仕様が膨らむと途中で投げ出す可能性が高くなるからです。また、出来ることを単純な形で見せたいということがあります。
- PetaTubeの場合はURLから動画を抽出して連続再生することが最低限の機能だと考えていました。あとブックマークレットも使われるかわかりませんが、あると相当便利なので最低限の機能として考えていました。
運用
- ここでリリースした後の運用のイメージについても考えています。コンテンツを運営者が追加し続ける必要があるモデルを選択する場合はそれが実際に可能なのかということや、ユーザーが集まらないと成り立たないサービスの場合どうやって最低限の人数を集めて運用が可能なところまで持っていくかということです。
- 個人的には、放置していても更新性があるようなサービスにしたいなと思っています。
- LastFMが毎週作ってくれるランキングを活用しているCountDown LastFM Rankingもそうなっています
- PetaTubeの場合は、ユーザーが動画がいっぱい貼ってあるウェブページを探して来てくれることを想定しているのでここは心配していませんでした。
名前
- これはとても大事だと思っていて、後々のモチベーションにも関わってくるので作る前の段階で決めておくのがいいと思っています。（途中で変更してもいいとおもいますが）
- PetaTubeという名前は正直これだ！という感じではないのですが、コンセプトを考えた時に「ペタ」っと簡単にYou「Tube」の動画を楽しめるということでこの名前にしました。YouTubeの動画ということをわかりやすくしたいなぁと思うとどうしても「〜Tube」なサービス名になるんですよね。。。
実装
技術の選択
- ここは人それぞれだと思いますが、自分は「早く実装出来る」ことか「使いたい技術」であることを基準に考えています。どちらも楽しく開発をするためということが目的で、早く実装出来たほうが早く形に出来て楽しいですし使いたい技術だと実装自体を楽しむことが出来ます。そこまで大規模なアプリは想定していないので仕事の時のような基準では選択しません。ここは個人でサービスを作る醍醐味の一つかなと思っています。
- 注意点としては、考え過ぎないということでしょうか。無駄にアクセスがいっぱい来る時のこととか色々考えすぎて大きなシステムにしないことは重要だと思います。そこはヒットしてから悩めばいいと思っています。
- PetaTubeの場合は、早く実装出来るものとして「Amon2::Lite」、使いたい技術ということで「Backbone.js」と「Compass」を使っています。
デザイン(PC)
- レイアウトだけは最初に考えて、色の調整などは機能の実装後に行いました。ホントはよくないのですが確認はChromeだけで行なっていました。変なことをしなければこれでまぁFirefoxとSafariはなんとかなるかなと思い。I.Eは...対象ユーザーの中に少ないかなと思ったので気にしていませんでした。I.E10だとマシなんじゃないかという期待も込めて...
- PetaTubeのデザインはとあるサイトを参考にさせてもらいました。分かる人には分かると思いますが。。色は自分で色々試して決めました。
- 細かい点ですが、オススメなどをモーダルで実装したのはビデオの再生を止めないためという意図があったりします。
- 実装については、Compassを使っていたので楽しく出来ました。
- favicon.icoはあったほうがいいと指摘をもらったので、それはGIMPでなんとか作ってみました。。
デザイン(スマートフォン)
開発
- ここでの最大の注意点は無理しないということでしょうか。個人でウェブサービスを作るときはどうしてもムラが出てしまうので、のらないときはやらないほうがいいと思います。逆にのってくるととにかく実装したくてたまらない状態になったりするので、そのときにガッとやったほうが進みも早いしいいものが出来ると思います。無理してヤル気が0になって放置というのが一番避けたいというところです。誰もがそんな放置されたリポジトリを持っているのではないでしょうか。
- あとはとにかくプロトタイプを早く作ることを心掛けていました。デザインが全くされていない状態で動作を試すことでイメージ通り使いたいサービスになりそうかを考えていました。この段階で動いたのでしばらく自分だけで遊んでましたｗ。
作業する時間
- 私事ですが、家族がいて休日は家族のためにほとんど時間を使うのでなかなかまとまった時間が取れません。これに対する自分の答えは寝る時間を削るしかないということです。といっても最低限の睡眠時間は確保すべきですが。これは他の方がどうやっているのか是非教えて欲しいです。
- PetaTubeも基本的には仕事帰ってきてから寝るまでのちょっとした時間で実装していました。タスクの管理などはしていなくて、今日はここまでやりたいなぁという目安を作ってそこまで実装して寝るという感じでやってました。ハッカソンとかでまとまった時間とれたらよかったんですが。。ただその分考える時間は多かったのはいい部分でもあったなと思いました。
罠
- Web Application Framework(WAF)
- 最近のWAFはよくできているので、setupするだけでデザインもそこそこされている状態になります。この段階で満足してちょっといじって放置ということがよくあるので注意。
- あと、無駄にWAFの機能の拡張を始めたり、どういうアーキテクチャにするかを複雑に考え過ぎるとサービスを作るという目的を見失ったりしがちです。素直にWAFに従うといいんじゃないかなと思います。
- Twitter Bootstrap
- これホント便利なんですが、ツールや管理画面などでないなら使う際は注意が必要かなと思います。というのもBootstrapっぽいサイトになってしまいそこをカスタマイズしていくのは結構面倒だなという印象があるからです。まぁBootstrapっぽい感じでいいなら問題無いですが違うデザインにしたい場合は使わないという選択肢も考えていいいのかなと思います。便利なんですけどね。
環境の準備
リリース
ウェブサービスを作るのは楽しい
- とまぁ色々書きましたが、ウェブサービスを作るのは楽しいです。
- 自分は面白いものを作りたくてウェブの勉強を始めたので、簡単に自分の作ったものをみんなに見てもらえてTwitterなどでリアクションをもらえる今の環境はとても素晴らしいなと思っています。
- とりあえず最低限のところまで作って後々機能追加していく方法は、モチベーションを高めるという意味でも効果的だなと思います。
- リリースすると色々意見をもらえるのでとても勉強になります。Petatubeでも途中からtitleに再生中のビデオのタイトルを表示するようにした方が便利だと教えてもらい実装しました。これをすることでタブを選択して開かなくても再生中のビデオが何か確認することが出来るようになり便利になりました。この発想は自分にはなかったものなのでとても勉強になりました。
おまけ
- 自分がウェブの世界面白いなと思ったきっかけはPerlのコミュニティに出会ったのがきっかけなので、何かPerlに恩返し出来ないかなと考えています。
- その時に自分が出来るのは便利なモジュール作ったりなどというよりは、Perlを使って面白いものを作りアピールしていくことかなと思っていたりします。なのでAmon2::Liteで作っているというのをfooterに入れていたりブログでPerlで作っていると書いたりしています。
- それでPerlで何か作ってみようと思ったり*.pmに参加してみようと思う人が１人でも増えればいいなと思っています。
というわけで自分用のメモですが、最後まで読んでくださりありがとうございました。
まぁ個人でウェブサービスを作るのは、好きに出来るしリアクションももらえて楽しいという話でした。
