Create mockup "Dropo"

javascript php heroku cloudflare travisci

Dropo（どろっぽ）というWEBサービスのモックアップを作成しました。

サイトにアクセス中の人たちの間でだけ画像を共有する、瞬間性の画像共有サービスです。 作成動機がPusherを使って何か作りたい！だけの一発ネタです。

Service architecture

Dropoの構成は上記の図のような構成で作成しています。 HerokuでPHP Phalconの作成したAPIを動かしつつ、ビルド済みのAngularJSを使用したSPAをCloudFlareで配信しています。 HerokuとかCloudFlareを使うとaddonという形で、他のサービスと連携したり、HTMLにスクリプトを埋め込めるので管理が楽で良いですね。

開発の面で言うと何気に初体験のものが多く、Pusher、Cloudinary、Heroku、Phalconと実験的要素が多かったです。 個人的にはPusherやCloudinaryなどはあっさりと手を出すことができましたが、Herokuはなかなか難しかったですね。 途中でHerokuを諦めてAmazon Beanstalkでいこうとして、でもやっぱり運用コスト低いからHerokuでがんばろうとの迷走してしまいました。

3日ぐらいかけてTravisCI→HerokuなCI環境を作ってからは楽に開発・管理できるようになったので、そういった面ではHerokuにして良かったです。

こういったおもちゃを作るならHerokuという選択肢は凄く良いですね。

Development style

開発のスタイルは上記の図のような形で進めています。 VagrantでAPIを実行できるようにしつつ、Gruntのwatchとconnect、proxyタスクを活用して即座に確認。 GitHubにPushするとTravisCIでビルド実行後にHerokuのProductionとDevelop環境にデプロイできるようにしています。

最近は個人で作成するときは、ほとんどこのスタイルですね。 このスタイルは最初にサイクルの型を作る必要があるので、そこだけが面倒ですが、サイクルさえ出来てしまえばあとはコーディングに集中できるので重宝しています。

Future

  • デザイン追加
  • クロスブラウザ対応
  • スマートフォン対応
  • テストコードの作成
  • 細々と機能追加andバグフィックす

取り敢えずはブラッシュアップして正式公開できるレベルまで持っていきたいと思います。 こんな機能があったらおもしろいよとかあれば、ぜひぜひコメントください。

Dropoのモックアップは開発期間が1週間強ぐらいですみました。 いろいろなサービスやツールのおかげで、このぐらいの品質であれば簡単に作れるようになるとか良い時代になりましたね。