【Twitterやってます】 koress project | しがく(shigaku) | おかじ(okaji)

2007年5月27日 21:12

実録! Webサービスの作り方 第2回


個人でWebサービスを作るための連載、第二回はコア機能開発からWebサイト制作、リリースについて説明します。システム構成図を起こしてから、それぞれの機能を担当するプログラムを書き上げます。また、デザインを整えるために便利なツールを紹介し、さらにランキング等の一般的な付加機能について作り方を説明します。

おさらい

この連載は、koress projectがWebサービス「Cha-Cha-le!(チャチャーレ!)」をリリースするまでを、時間を追って記述したものです。技術的な内容だけでなく戦略的な内容やメンバー同士のやりとりの実例も含んでいます。また、ポイントを掴みやすくするために、koress projectが「やったこと」、そこで芯になっている「鉄の掟」を併記しています。

Cha-Cha-le!の概要
  • Webページに対してニコニコ動画のようなコメントを付けられるサービス
  • 検討メンバー 3名 (内、開発メンバー1名)
  • 構築開始からリリースまでの期間 約40～50時間
  • プラットフォーム Perl + MySQL + Ajax
  • コスト 固定費6,000円/年

4. コア機能を開発する

いよいよ開発の段階です。まず最初に、前回にまとめたCha-Cha-le!のシステム構成図を示しておきます。

 

Cha-Cha-le!のコア機能となるプログラムは、３つ。サーバ上で動く「URLを一意のキーとして文字列を格納する」プログラム(putChale.cgi)と、「URLを一意のキーとして複数の文字列を取り出す」プログラム(getChale.cgi)、そしてクライアントで動く「文字列を表示する」プログラム(chachale.js)です。

4-1. URLをキーとして文字列を格納する putChale.cgi

当初決めた通り、Perlで書きました。CGIの引数でURLを受け取り、MySQLに受け取ったURLをキーに指定して、文字列を渡します。CGIの結果として、格納が成功したかどうかを返します。80行程度の小さなプログラムです。文字列の長さの切り詰めや、タグ除去などの投稿系のCGIプログラムに一般的な処理も行います。

4-2. URLをキーとして文字列を取り出す getChale.cgi

こちらも、Perlで書きました。CGIの引数でURLを受け取り、MySQLに渡し、文字列を受け取ります。そして、その文字列をCGIの結果としてテキストを出力します。このテキストはAjaxによって解析されることになるので、文字コードはUTF-8にしています。約50行程度。

4-3. ブラウザに文字を流す chachale.js

Ajaxを使うので、言語は当然JavaScriptです。特にPrototypeのようなライブラリは使いませんでした。いくつか工夫をしているので、少しだけ説明します。

まず、viewer.htmlというHTMLを用意します。このHTMLは、chachale.jsを呼び出すようになっています。表示する内容としては、ツールバーと、巨大なiframeがあります。viewer.htmlは、HTMLですが"viewer.html?url=abc"という風に、パラメータを指定することができます。どうしているのかと言うと、viewer.htmlの中にはURLを解析するJavascriptが組み込まれていて、"url="以降の文字列を取り出すようにしてあります。これで、viewer.htmlに対して、コメントを付けたいURL(対象URL)を引数として渡すことができます。URLのパラメータから対象URLを取り出せたら、getChale.cgiに引数として渡します。もちろんこの部分はAjaxを使っているので非同期通信です。getChale.cgiからは、対象URLについてのコメントが100件返ってきます。あとは、そのコメントを、順番にブラウザ上に流します。

ニコニコ動画のように画面上に文字を流す方法についても少し説明します。コメントが取得できたら、Document.Writeを使って、コメント一つを含んだDivを要素をviewer.htmlの中に動的に書き出します。それぞれのDiv要素にはidを振っておきます。そして、その要素のx座標とy座標をタイマーによって書き換えれば、流れるように見えるわけです。

その他、chachale.jsには、コメントを投稿する機能もあります。Cha-Cha-le!ツールバーにあるコメントフォームの中身をputChale.cgiに渡しています。ここもAjaxで非同期通信をしています。

やったこと (12時間, 累計18時間)
  • サーバサイドのプログラムを書く 6時間
  • クライアントサイドのプログラムを書く 6時間
鉄の掟
  • バグは友達なので仲良くする

5. 付加機能を開発する・サービスをチューニングする

コア機能がそれなりに動くことが確認できたら、見た目やサービスとしての価値を増大させるための機能を実装していきます。

デザインを整える

まず、デザインを整えます。見やすいデザインや美しいインタフェースは、サービスの使い心地だけでなく、思わずブックマークを誘うような効果を高めることができます。デザインセンスについては得意な人とそうでない人がいます。得意でない人は、今回のCha-Cha-le!のようにWebデザインツールを使うことで、それなりのレベルまで持っていけると思います。また、得意な人はこだわり過ぎてその後のモチベーションを低下させてしまわないように・・・。(※)

Cha-Cha-le!を作っていた時、「web2.0の流行サイトっぽく、角が丸いデザインで行こう」という風にざっくりと決めました。イチからデザインを作れる程のセンスはないので、まず、「Web2.0 デザイン ツール」などでネットを検索して、自分が気に入ったデザインを吐き出してくれるツールを探します。次に、ツールを使って、デザインのコードを生成します。今回は次のツールを使いました。

  • web2logo - Web2.0風ロゴメーカー(Flash)
  • AquaMaker - Web2.0風ボタン画像の作成ソフト

素材を生成したら、HTMLをコーディングします。コーディングにはDreamweaverを使いました。

チャックマークレットを作る

ネットサーフィン中に、任意のページにすぐコメントを付けられるようにできたら便利なので、ブックマークレットならぬチャックマークレットを作ってみました。

作るのはブックマークレットの仕組みが分かれば簡単です。ブックマークレットは、クリックされると、ＵＲＬではなく、JavaScriptが実行される特殊なブックマークです。たとえば、次のはてなのブックマークレットのソースが参考になります。

javascript:window.location='http://b.hatena.ne.jp/add?mode=confirm&title='+escape(document.title)+'&url='+escape(location.href);

ブックマークレットの実体は、１行の小さなJavaScriptプログラムです。ブックマークレットがクリックされると、現在見ているページのタイトルとＵＲＬを、ブックマークレット追加用のＣＧＩに渡しています。

これと同じで、現在見ているページのＵＲＬをCha-Cha-le!のviewer.htmlに渡すようなJavascriptプログラムを書きました。ユーザの方には、このJavaScriptをお気に入りしてもらい、チャックマークレットとして使ってもらえます。

ランキングを集計するプログラムを書く

どのＵＲＬにどのぐらいコメントが書き込まれているのか、ランキングとしてコンテンツにすれば面白そうです。ここでは、ランキング集計のシステムについて説明します。ランキングは、１０分ごとに自動更新し、更新間を出すために、順位は１週間ぐらいでリセットされるようにします。

ランキングは、ＵＲＬに対してコメントの投稿数を保存しておけば実現できます。まず、データベースに用意したchale_url_storageテーブルに、投稿数カウント用のフィールドを追加し、putChale.cgiでコメントが投稿されるときにインクリメントするようにします。これで各URLに対して投稿数が保存されます。

次に、ランキング用のＨＴＭＬを生成するプログラムを用意します。このプログラムは、データベースからカウント数が多い順に上位１０件を抽出し、ランキングを表すHTMLコードを作成します。このHTMLコードを、Cha-Cha-le!トップページからSSIとして読み込まれるようにします。そして、ランキング生成プログラムを１０分ごとに実行するようにcrontabを設定すれば、１０分ごとにトップページが更新されることになります。また、カウント数を０にリセットするプログラムを作成し、これを毎週日曜日に実行するようにしました。crontabの機能はさくらインターネットのプランに標準で付いてきます。

やったこと (7時間, 累計25時間)
  • デザインを整える 3時間
  • チャックマークレットを作る 1時間
  • ランキングを集計するプログラムを書く 3時間
 鉄の掟
  • デザインはツールを使って手軽に
  • 付加機能はサービスのニーズを考えて作る
[コラム]こだわる人が多く関わると開発スピードが劇的に低下する

文中で(※)を付けた部分について、このような偏りは企業の中でもよくあることです。デザイナーはデザインを究極的に突き詰めようとし、開発者は面白い機能開発を求め、営業はとにかく案件を引っ張って来ようとします。異なったミッションを持つ人が多く絡むようになると、制作や開発の効率・スピードが悲劇的に低下します。業務経験からですが、サービスに関わる実務担当者が5,6人以上に分散すると、意思疎通や調整に必要なコストが指数関数的に爆発を起こします。企業で、特にサービスをマネジメントする立場の人は注意が必要です。個人サービスであればそのような心配はありませんが、自分が得意な分野がある場合には、サービス全体の中でその部分が担うべき重みを常にを意識するようにしましょう。

6. リリースする

付加機能まで開発した時点で、リリースまでの準備が整いました。一通りバグがないかチェックして、リリース作業に取り掛かります。参考までに、この段階でのスクリーンショットを図に示します。

チェックが終わったら、ドメイン(chachale.jp)を申請します。 ドメインを取る段階はいつでも良いのですが、技術的な壁に当たる可能性や、モチベーションの低下、その他の事情でリリースができなくなる可能性を考慮して、この段階で申請しました。もちろん、企業のサービスであればモチベーションの有無は関係ないので、リードタイムを考慮して前もって申請しておくべきです。ドメインの維持費は業者によってまちまちですが、数千円/年が相場です。数年間の長期契約をすることでディスカウントされる場合がほとんどです。

さくらインターネットでは、１つのレンタルサーバーに複数のドメインを付加することができます。 申請フォームにさらっと記入・登録します。登録からしばらくすると、さくらインターネットのコントロールパネルからドメインが選択できるようになりました。コンテンツが格納されているディレクトリに、chachale.jpをマウントします。マウント後、実際に chachale.jp を叩いてからコンテンツが表示されるようになるまで、数時間から数日程度かかります。これはDNSのプロトコルの仕様です。

DNSの情報が全インターネットに浸透すれば、晴れてサービスのリリースとなります。

やったこと (1時間, 累計26時間)
  • さくらインターネットでドメインを申請し、設定をする(1時間)

 

連載第二回では、コア機能や付加機能の開発からリリースまでを述べました。飲み屋で議論になってから、ここまで約26時間です。個人でWebサービスを作る時には、この段階までの行動力・開発力がモノを言います。細かいことを気にせずに、どんどん作って行きましょう。第三回では、Webサービス作りで最も難しいリリース直後のプロモーションやユーザの導線分析について述べます。

>> 第一回はこちら

--

関連情報

田口元の「ひとりで作るネットサービス」探訪
米国主導は終焉し、個人Webサービス革命へ
Web2.0っぽいデザイン
Web2.0風サイトを作るのに必要なモノあれこれまとめ


(written by しがく)

トラックバック