プログラム初心者がwebサービスをリリース

もともとwikiで作っていたサイトがあり、それを作り直し今月リリースしました。

2010年10月時点でのスキルセット

• html：5年くらい。
• css：5年くらい。
• Javascript（jquery）：2年くらい。
• IA：3年くらい。

元マークアップエンジニアの現在webディレクターです。

リニューアル前のサイト

• 海外ドラマの情報サイト
• pukiwikiで構築
• html、css、デザイン全て一人
• api利用（yahoo、bing、楽天、amazon、WikipediaAPI）で自動取得できる情報は取得しまくった（全てJavaScript利用）
• サーバーはさくらのビジネスプラン（pukiwikiだと大量ページは重いのでスタンダードでは耐え切れず）

pukiwikiはインストールも簡単。
プログラムを知らなくてもちょっとしたカスタマイズはできるので、サイト立ち上げの時は便利でした。
立ち上げた当時の自分はJavaScriptもほとんど書けず、htmlとcssの知識で、どうにかwikiっぽくないサイト作った程度でした。
これが4年前。
それから細々とJavaScriptでできる範囲で機能拡張（俳優の画像自動表示とか、rssを読み込むとか）。

今回やったこと

1. 企画・要件定義書と設計資料（ワイヤーフレーム）を作った
2. phpを勉強した
3. デザインを見まくった
4. プログラムを書いた
5. デザイン、html作った

やったこと詳細

企画・要件定義書、設計

2010年春ぐらいで、当時やれることは全てやりきってました。
なので、次になに作ればいいかも定まって無く、それを決めるために企画から立てることにしました。

そもそも自分のサイトがデータベースサイトなのか、コミュニティサイトなのかも定まっていなかったので、 そのあたりのコンセプトを詰めます。

会社の業務でも企画の手伝いはするのですが、一からする経験はありませんでした。
とにかく過去の企画を見まくりました。

流れとしては

調査・分析→戦略立案→課題出しと解決作

です。
市場調査や、競合調査をして、どんなサイトがユーザーに受けるかを考えました。 そしてサイトの「あるべき姿」を見つけます。 そのあるべき姿と現状とのギャップが課題として浮き上がってきます。

その課題の解決作を設計書に落とし込み、サイトに実装していきます（設計の話は長くなるので割愛）。

• アイデアのまとめにはアウトラインプロセッサかマインドマップソフトが便利。私はマインドマネージャーを使いました。
• http://www.bookslope.jp/blog/：情報設計といえば、という方のブログです。考える時のヒントを一杯もらいました。

開発

この時点（2010年8月くらい）で作りたいものは決まっても、スキルが追いついてません。
開発言語はpukiwikiがPHPだったので、PHPがいいのかなーと思ってました。
一番開発者が多いとも聞いていたからです。

それから何冊かPHPの本を買ったのですが、全て挫折。

そして出会ったのが「よくわかるPHPの教科書」（たにぐち まこと著）。
初心者向けに書いてあるので、私には非常に分かりやすかったです。
ようやくhtmlとプログラムの関係が分かってきました。
この本のお陰で、思い描いていた機能が実装できそうだと思えてきました。

10月頃はこの本を元に、ブラウザに文字列を表示したり、フォームからデータをプログラムに渡したり、 ページに沿って基礎的なプログラムばかり書いてました。

そして恥ずかしながらgetとpostについて初めてしっかりと学びました。
これでフォームに入力した内容をサイトに反映できるようになりました。
具体的にいうと、検索結果表示とか、絞り込み検索とかの仕組みが分かってきました。

• htmlからプログラムに情報を渡すのはgetとpost

phpと同時にデータベース（mysqlです。以下、DB）についても解説がありました。
DBを使えば色々なデータを簡単に扱えることが分かりました。
いままでよく分からなかったDB、webのサービスにはほぼ必須なDB。

「これってエクセルやん！」というのが自分の中の答え。

それも素晴らしく検索性とデータの連係が得意なエクセル。
そう思えたのもphpMyAdminというGUIツールがあったため。
これがめっちゃ便利。
さくらサーバには標準でphpMyAdminがインストールされているので簡単にDBを扱えました。

• DBは取っつきにくいけどphpMyAdminがあれば簡単

まずはDBにデータをいれてみようと海外ドラマのデータをエクセルにまとめます。
この際、便利だったのが「http://www.lancers.jp/」。
デザインとか色々な仕事を依頼できるサービスです。

12月にたまたま、タスク方式というサービスが始まりました。
これはデータ集めや、テキスト入力など単純な作業を依頼できるサービスです。
これで400件くらいの海外ドラマのデータを収集して頂きました（収集元は英語Wikipedia）。
phpMyAdminにはCSV（カンマ区切りのテキストデータ）をインポートする機能があり、400件も一気に登録できました。
ちなみにCSVはエクセルから作れます。

• DBはエクセルデータをインポートできる

このデータをサイトに表示させる過程で学んだのが配列と繰り返し処理。
なんどもDBからデータを取り出すには必要不可欠なプログラムです。
JavaScriptを学んでいるときも配列と繰り返し処理は知っていました。
が、DBを扱ってようやくその真価を知った気がします。

• 配列と繰り返し処理、超便利......というか超基本？

次はテキストだけだと味気ないので、画像データを取得したいと思いました。
世の中にはAPIといってyahoo、googleやamazonなどのデータを引っ張ってこれ便利なサービスがあるのは知ってました。
このAPI、知れば知るほどステキです。
ルールに従い、簡単なURLを作って、アドレスバーに打ち込めばXMLやらJSONというファイルを表示してくれます。
そしてPHPはこのXMLの扱いが超簡単。
JavaScriptでもXMLは扱えるのですが、PHPの方が遥かに簡単にXMLをパースできます。
パースと言う言葉もここで覚えました。構造解析といったような意味。

画像はamazonから取得することにしました。
amazonのapiの解説書はとってもわかりずらいので「amazon api 使い方」などで検索。
「http://www.ajaxtower.jp/ecs/」が参考になりました。

ちなみに、個人的に分かりやすかったAPIは「yahoo」と「楽天」です。
実例交えた解説があり、ひとまずデータを取ってくるまでは簡単にできます。
APIを知れば、手間暇かけて、自分でデータを探さずとも、情報量のあるサイトがぱっと作れます。
「http://ma5.mashupaward.jp/」などにapi一覧がまとまっているので、ここから何ができるかアイデアを練るのもありかもしれません。

• API使えば、画像データやニュースなどの情報を簡単に取得できる

そして作ったサイトが「海外ドラマ検索サイト」です。

【海外ドラマJP DRACO】
http://www.kaigaidrama.jp/

一番時間がかかったのが「条件から探す」機能。

http://www.kaigaidrama.jp/search/

件数表示から、ページングまでいろいろな実装が必要で苦労しました。
その割に地味ですがw
その他の「50音一覧」「おすすめ・特集」ページも全てphpで作ってます。

11月頃から初めて、ようやくこの1月に公開。
ここまでたどり着けたのも、自分が好きな海外ドラマのサイトだったからです。
やはり好きなものにつぎ込む情熱は別格です。

次の課題はどうやってサイトをPRしていくかw

2012-03-30追記

調子に乗って続き書いてみました。

コーダー・ディレクターがプログラムを覚えた方が良い5つの理由