個人で作ったWebサービスの仕様書（Evernoteのメモ）を2つ公開してみる

2011/05/19

個人でWebサービスを作る際の考察に関する以下の記事が、とても興味深く面白かった。ここに書いてあることはだいたい同意で、自分も実践したいと思うことばかり。

個人でWebサービスを超高速でつくる人たちの作り方を考察。 │ モノづくりブログ株式会社8bitのスタッフブログです

で、記事の最後に執筆者が聞いてみたいこととして「個人Webサービスの場合、仕様書はどうしてるの？」と呼びかけていたので、僭越ながら自分が過去に作ったWebサービスの仕様書（Evernoteに書いたメモ）を公開してみる。公開するのはNekostagramとはてなスターカウンターのもの。

仕様書（TODOリスト）の書き方

自分の場合、Webサービスを作るときに書くものは「仕様書」などと呼べるようなちゃんとしたシロモノではなく、Evernoteに思いついたことをどんどんリストアップしていくだけ。いわゆるTODOリストですね。

この考察は面白い。自分の場合、仕様書はEvernoteにリスト形式で書き殴ってるだけだなー　個人でWebサービスを超高速でつくる人たちの作り方を考察。 │ モノづくりブログ株式会社8bitのスタッフブログです http://bit.ly/j6QHsd
— ルエダップ (@ruedap) May 18, 2011

Evernoteを使っている理由は、PCを触ってる時と、iPhoneしか持ってない時（外出時）のどちらでもすぐにメモれてなおかつ自動で同期が取れるからで、自分の場合は外出時に何かを思いつくことが多い。なので主にiPhoneでメモった（追記した）のを、PC利用時（Webサービス制作時）に参照・整理整頓するスタイル。それで、自分の中でいつも重視しているのは、そのリストアップした項目を優先すべき順序に並び替え、Webサービスの初回リリースまでにやることとそれ以降の作業で良いこととを「線引き」すること。これが一番重要だと思っていて、リストがどんどん増えていくのでこれをやらないとなかなかリリースできなくなる。そういった「Webサービスをリリースまで持っていくことの難しさ」などについては、以下の記事で詳しく触れているので参考までに。

ブログ駆動開発のすすめ～連続更新100日目を迎えて

今回公開してみる仕様書は、制作期間2日で作ったNekostagramと、制作に1か月以上かけたはてなスターカウンターの2つ。制作期間はかなり違うけど、書いた仕様書（メモ）の構成はほとんど同じ。また、これ以外のもほとんど同じなので、自分の場合は今のところこのスタイルが一番合っているのかなぁと思っている。

Nekostagramの仕様書

まずはNekostagram。EvernoteのNekostagram仕様書部分のキャプチャ画像をペタッと貼り付けてみる。2月26日に制作を開始して（メモを取り始め）、2月28日に公開したので、最初のバージョンをリリースするまでの制作期間は2日。

画面の左側は、自分のEvernoteの「project」タグを抽出した状態で、思いついた1つのWebサービス（プロジェクト）ごとに1つのメモを作るようにしている。思いついただけで実際には何も作らずに終わってるメモ（プロジェクト）もいっぱいあるけど、メモの更新日でソートしていて活動的なプロジェクトは上にあがってきて埋もれる心配はないので、何か思いついたらどんどんメモを作るようにしている。んで上のキャプチャ画像の右側にある仕様書（TODOリスト）部分をテキストで貼り付けたのが以下。

 +TODO

◯まずは拡大表示（LightBox） http://www.dynamicdrive.com/dynamicindex4/imagemagnify.htm
◯APIキーの取得
◯ラベル追加（東京、時間、投稿者）location, caption
◯Google Analytics設置
◯アクセスの確認 https://www.google.com/analytics/settings/home
◯favicon
◯InstagramのURLを開けるように
◯ソーシャルボタン詳細の調整・追加
　◯mixiに登録してmixiボタンを追加
◯ブログ記事執筆
◯moreボタンを押したら、ボタンがゆっくり消えるなどの効果を追加
━━━━━━最初のリリース━━━━━━
◯Staging環境の構築
◯FirefoxでTweetカウントが1000を超えると表示されない問題 → ボタンの言語設定を日本語にしているとなる模様。英語にすることで対応
◯英語表示対応 Cat Lovers Instagram Viewer
◯iPhone表示対応
　◯apple-touch-icon
▲Sass化（あとreset.scss）
◯ツイートに「ねこ大好き」「いぬ大好き」と入れる
　◯「ねこ大好き」の多言語化
◯ソースコードの整理
◯ソースをGitHubに公開して、Createdに追加
・README.mdの編集
━━━━━━Ver.2.0のリリース━━━━━━
■ドメイン取得 nekostagram.com
×猫カテゴリの写真総数表示
？不適切写真報告機能
・テキストが2行になるときの間のマージンを無くす
・各写真のバックグラウンドに猫アイコンうっすらと
◯ページネーション
　・最後のページでのendボタン
◯個々の写真に対するツイートボタン
　★ツイートに「ねこ大好き」「いぬ大好き」と入れる
・個別詳細ページ
　・RSS
　・Twitter Bot
　・ランキング

このTODOリストの左側についている記号は、

「・」は初期状態（思いついた状態）
「◯」は実装完了
「▲」は実装が中途半端
「×」は実装しないと決めた項目
「？」は実装するかどうか悩んでる項目

のような感じで、基本的には「・」でリストアップしたものを、あとから優先順位で並べ替え、上から順に「◯」の状態にしていく。また、最初に書いたとおり、ある程度リストが出揃ったらリリースするタイミングの線引きが重要で、このNekostagramでは初回リリース時とVer.2.0リリース時（Inustagram公開時、ソースコードを共通化した）で線が引かれている。このEvernoteメモのスタイルは、実装すべき仕様を小分けにする（小さな達成を積み上げる）ことを重視している。

はてなスターカウンターの仕様書

もうひとつ、はてなスターカウンター。Nekostagramの時とほとんど同じで代わり映えしないけど、制作期間はだいぶ違って、こちらは1か月以上かかっている。メモを取る目的も備忘録の役割が結構高めだった記憶。

上のキャプチャ画像の右側にある仕様書部分をテキストで貼り付けたのが以下。

■TODO
◎リリース前に静的画像15万をアップロード →999個
◎URLが不正だった場合の処理
◎favicon
◎DBの自動バックアップ
◎DBのサイズチェック方法
◎ブラウザーのバージョン処理
◎i/フォルダの整理
◎画像のaltタグを挿入
◎はてなスターを付けられるようになっていますか？のリンク追加
◎「使い方」を「HOW TO USE」
◎「以上で完了」を「FINISH!」
◎エラー画面で「ERROR」の画像
◎ランキングの解説文を追加「はてなスターカウンター利用サイトの中でのスター数TOP10」
◎Google Analytics導入→初期設定（リファラ）
◎ランキング10位
◎OGPタグ?
ーーーーーーーーー初回リリースーーーーーーー
・スター取得ボタンを2回押したときのアニメーション
・Enterで送信
・スラッシュ自動補完
・スター数を太字
◎リクエストが定期的に無いランキングの排除
・「これにした」画像の先読み
◎人気順は人気順に整列する
・矢印アニメーション
・#rankingでもブクマやFacebookのURLを固定
・Socialbuttonsをindex.slim内へ
・「これです」をページ読み込み後にフェードイン

このはてなスターカウンターは、アイデアを思いついてから実際に公開するまでの期間が長く、さらに実装する機能が最初から明確だった（元ネタのはてなブックマークカウンターの仕様を踏襲すればよかった）ので、Evernoteメモを取り始めたのが遅めだった。半分以上の実装が終わってから、このメモを取り始めたと記憶している。なのでリストアップされている項目もかなり具体的で、備忘録的なものが多いかも。

なんか今改めて読み返してみるとどういう意図で書いたか自分でも理解できない項目がチラホラあったり。まだメモを書いてから1か月しか経ってないのに思い出せないなんて。

まとめ

改めて自分で書いたメモを見返してみると、仕様書と呼べるようなレベルではないので小っ恥ずかしいけど、自分がこのメモを書いている目的は以下の2つにまとめられると思った。

実装する仕様の優先順位を明確にするため
思いついたアイデア・仕様を忘れないため

1つ目は、最初にも紹介したとおりやるべき事をリストアップして、優先順に並べ替えて、さらにリリースまでにやる必要があるかどうかを明確にするためのもの。このメモを作る一番の理由。2つ目は、個人で作るWebサービスの場合、それに注ぎ込める時間が断続的なので、再開したときに前回の続きをすぐ思い出せるように備忘録的な役割が少なからずあると思う。自分の場合はこんな感じだけど、他の人はどんな感じに仕様を決めたり、アイデアを具現化しているのか、気になるので紹介してくれる人が続いてくれると嬉しいかも。

あと余談だけど、前述のEvernoteキャプチャ画像のリスト部分に見えている「CSSNICE」に相当するCSSに関するWebサービス（アイデアは同じで、名称は別）を近日公開予定。これはメモの作成日にあるように、2か月前に思いついて、5月になってから作り始めたので、構想2か月制作1か月くらい。乞うご期待。

個人でWebサービスを超高速でつくる人たちの作り方を考察。 │ モノづくりブログ株式会社8bitのスタッフブログです HerokuでWebアプリ開発を始めるなら知っておきたい10のことブログ駆動開発のすすめ～連続更新100日目を迎えて