@ledsun blog

無味の味は佳境に入らざればすなわち知れず

大拝承というWebアプリケーションを公開したら楽しかった話

大拝承というWebアプリケーションを公開しました。

一番大事なこと

とても楽しい。みんなもアプリを作って公開しよう。

アプリケーションを公開するとプログラミングしていた時と違う気分になるのが面白い。

TDDでテストが通る最短の実装をするときのプログラマの気分と、 実装の隙を突く嫌がらせテストを考えるテスターの気分の違いに似ている。

クソコードを見たときのイライラ感をいまいちなアプリケーションを見ながら感じられる。 アプリケーションの動きをかっこよく出来たときの爽快感は、リファクタリングしてかっこいいコードが書けたときの気分に似ている。

ドッグフードを食べる*1ほど しっかり使い込まなくてもユーザ気分を味わえて楽しい。 受託開発の発注者が実装が難しい機能の仕様の厳密さよりもボタンの配置の細かさにうるさいのはこういう気分かもしれない。

経緯

  1. はてなラボで大承認というアプリが公開される
  2. はてぶで大拝承に空目したというコメントが多数つく*2
  3. 大拝承という名前が気に入った
  4. Dominion525さんが作ればいいと言った
  5. だから、今日は大拝承リリース日

背景

YEOMANを使ってMEAN(MongoDB + Express.js + Angular.js + Node.js)のWebアプリケーションを作るで書いたようにYOEMANを使えばMEANのテンプレートアプリが作れることはわかっていた。 generator-angular-fullstackでアプリケーションを生成できるし、簡単なデータ登録ぐらいなら2時間くらいでできることがわかっていた。

別のアプリ作ったときに、同じGeneratorにHeroku公開用のGruntタスクがあることも知ってたし Herokuに公開するだけならMongoHQとPapertailのAdd-onを使えばいいことも知っていた。

だから、データ登録するだけの機能で、見た目が「大拝承っぽい」*3アプリにしようと思った。

実際

Version 0.1.0

最初のバージョンは3時間で公開した*4。 2ヶ月弱触っていなかったらGeneratorが進化していてPassportを使ったログイン機能を作れるようになっていた。 これも入れてみた。あとから思えばこれは邪心だった。

早速Dominionさんには星つけたり、OAuthとか足すといいねといわれた。 そのときは自分もそうしたいなと思った。

Version 0.1.3

Googleアナリティクスで監視していたら100人くらいの人が使ってくれた。 ページングすら入れてなかったのでデータが増えて初期表示が重くなってきた。 初期表示件数を制限して、続きを表示するための「もっと拝承」ボタンを追加した。

Version 0.1.4

二日目は700人ぐらい使ってくれた。驚くべきことに誰一人ログインしなかった。 Papertailのログを見ても登録ページを開いた人すら居なかった。

「公開された機能の8割は使われない」って格言は本当だった!

これでも公開前は「機能を足せ」って悪魔のささやきと、「早くリリースするのよ」って天使の助言の間で葛藤してた。 機能は公開前に思っているよりももっとずっと少なくていい。

その代わり、XSS用のスクリプトを入れてきたり、SQLインジェクションぽい入力したり、 たぶんブラウザのデバッガでパケット見たんだろうけどAPI推測して直接データ投入してきたりする人がいて、 面白かった。ツイッターに生息するハッカーの皆さん怖い。

とりあえずログイン機能を消すところから改良することにした。less is moreだ。

Version 0.1.7

「拝承」追加時のアニメーションに拘る。 Angular.jsのng-repeatにアニメーションを追加すること自体はng-enterクラスにCSSアニメーション設定するだけなので超簡単だった。

PCだと結構いい感じに動いたのにスマートフォンだともっさりなのでチューニング。 CSSのopacityが重いのではずす。 transform-style: preserve-3d;というおまじないを入れる。

Version 0.1.8

ログイン機能を消しても「もしかして復活するかも」と迷って、押しても何もおきないメニューを残していた。 しばらくしたらどうでもよくなったのでメニューも消した。

機能を減らすことはすばらしい。 ユーザの出来ることが減るほど説明の手間も減る。

この辺から 「ユーザの操作を追加せずにひたすら悪い点を削ったどうなるか?」 を試してみることにした。

仕事だとビビってできないことも趣味なら出来ちゃう。たのしー!

Version 0.2.0

ユーザーが要らないとユーザー名を表示する必要もなくなったので消した*5。 表示が詰まったので余白を広くしたらなんかリッチになった。

「デザインでは余白が大事」*6って言うけど本当だった。

表示する項目は少なければ少ないほどかっこいいアプリになる。 やはりless is moreである。

Version 0.2.1

なぜかWebScoketにとりくむ。 Socket.io使ったら一時間ぐらいできてビビった。 JavaScript怖い。

スマートフォンで入力したものがPC画面にも表示されるのはリモコン操作しているみたい。 すごくたのしい。 チャットアプリでは普通だけど。

Android4.0までの標準ブラウザだとWebSocket対応していない。 代わりにロングポーリングするのでローディングバーが途中でとまる。

スマートフォンのブラウザはバックグラウンドで眠っているときに「拝承」を取りこぼす。 フォアグラウンドに起き上がって来たときに最新の「拝承」を取り直したいなと思ってゴチャゴチャやっている*7。 ブラウザごとに挙動が違うし、なかなか上手く行かないので飽きてきた。 この記事を書くことにした。

アクセスはもうほとんど無い。

情報

変な機能を思いついた人は教えてください。

参考文献

ドッグフードの故事は「闘うログラマー」に載っている。

闘うプログラマー[新装版]

MVPの話は「リーン・スタートアップ」に載っている

リーン・スタートアップ

less is more はミース・ファン・デル・ローエの言葉らしいけど「UNIXという考え方」で把握した

UNIXという考え方―その設計思想と哲学

余白の大事さは「ノンデザイナーズ・デザインブック」のコントラストの説明に載っている

ノンデザイナーズ・デザインブック

まとめ

こんなシンプルなアプリケーションでも2週間くらいは遊べる。みんなもやるべき

*1:WindowsNT開発チームが開発中のOSを使いながら開発していた故事に由来する言葉

*2:拝承の意味が分からなくネタであることが理解できない方はこちらをご覧ください

*3:Version 0.2.1までは「あの木」画像を使ってた。

*4:MVPは不完全でも急いでリリースしろってエリック・リースが言ってた

*5:当初は「名無しさん」と表示していた

*6:正確にはコントラスト

*7:Githubに上がっているものよりもHerokuで公開しているバージョンの方が先に進んでいるのは秘密です。