ゆとり世代の文系でも一人でWebサービスを作ってみました
はじめに
こんにちは。文系学部卒の非エンジニアですが、Webサイトを作ってみたので、その舞台裏を公開したいと思います。
ちなみに、平成元年生まれで中高6年間どっぷりゆとり教育を受けた生粋のゆとり一世です。 サービス自体まだβ版ですし、ブログを書くか迷ったのですが、こんなゆとり文系でもWebサービスが作れるんだ、と参考になればと思い書くことにしました。
僕自身「作ってみた」系のエントリーを参考にし、つまずいたときには読み返してモチベーションを高めたりしました。 エンジニアからしたら当たり前のことも、僕ら非エンジニアからしたら新発見なので、「cron」とか「○○API」を勉強した、という内容がありがたかったりするんですね。 僕もなるべくキーワードを散りばめながら書いてみます。 このエントリーが誰かの励みになれば幸いです。
Webサービスを作ることにした背景
元々はWebについて全く知識のない中この業界に飛び込み、騙し騙しマーケターをやっていました。 アクセス解析や広告運用などは技術云々ではなかったりするので、それでもなんとかなってしまうんですね。 でもやっぱり仕様を書くときや、エンジニアとのコミュニケーションでは度々つまずくので、このままじゃダメだなぁと思っていました。 また、会社の中だと試してみたいことを好き勝手できるわけでもなく、自由な環境がほしいと思っていました。
そうこうしているうちにSEO対策担当になり、幸運にもトップレベルのコンサルタントの方々とプロジェクトを組むことができました。 会議の度にすごいなぁと感動し、こうなりたいと憧れるものの、仕様を作る度につまずき、うつうつとする日々でしたが、 これからは技術のわからないマーケター・ディレクターに未来はないと思い、一からWebサイトを作ることにしました。
プライベートの時間がなかったことと、追い込まれないとやらない性格なので、一念発起して会社を辞めました。
ゆとり×ニート、サラブレッドでござる。
サービスについて
今回作ったサービスはこちら。 メンズファッション類似検索 Monosy
メンズファッションでその商品に似ている商品を探せるサービスです。 画像やタイトルから特徴を抽出して、商品ページで似ているアイテムを20個ピックアップし、検索せずに目的の商品にたどりつくことを目指したサービスです。 とは言ってもまだ実装していないアルゴリズムが多いβ版なので、色検索ができる程度に考えて頂ければと思います。
商品は楽天のAPIを利用していて、現状楽天の商品しかありません。 楽天には色検索機能がなかったので、とりあえず色検索ができれば多少便利かな？と思って公開しました。 順次目的を果たせるようアップデートしていきます。 あとは楽天以外の商品の追加や、レディースへの拡大などやりたいと思います。
僕はファッションには疎いので、自分が欲しかったサービスを作ったわけではありません。 EC系で中・大規模サイトにしたいと思ったことと、SEO的に面白そうな分野を探したらファッションでした。
勉強と製作の過程
恥ずかしながらWeb業界にいて、Webサイトがどうやって動いているのか全く知りませんでした。 何を勉強すればいいのか、何から勉強すればいいのかもわからなかったので、とりあえずHTMLとCSSは必要だろうということで本一冊を流し読み、簡単そうだというイメージを掴みます。
動的なサイトにしたかったので、サーバーサイドの言語を覚えようとPHP,Ruby,Pythonを検討。 独学するのに日本語の情報が多い方がいいと思い、結局PHPを勉強することにしました。 PHPも本一冊流し読み。
次に商品データが必要なので、APIの勉強をしました。 APIという言葉は良く耳にしますが、実際どういう仕組になってるのか初めて知りました。 画像解析などの処理をするのに、手元にデータを蓄積する必要があり、同時にクローラーを作ることにしました。 この時点で初めてプログラミングに着手し、MacにMAMPを入れてローカル環境を作りました。 データベースはMAMPのデフォルトのMySQLを使い、クローラーを定期的に稼働させるのにcronも勉強しました。
始めはアマゾンとヤフーのクローラーも作ったのですが、商品データの統合が難しかったので最終的には楽天だけにしました。 アマゾンのAPIはちょっと面倒ですが、楽天やヤフーは簡単なので、練習には良い教材だと思います。 ただAPIの制限があるので、工夫しないと網羅率が低くなったりします。 クローラーが動いているとかなりモチベーションが高まります。
プログラムを書いてみて、プログラムを「書く」のは実は簡単で、誰にでもできるのだなぁと感じました。 本質はプログラムを「組む」ことなんですね。それがわかればパズルみたいで楽しいです。
データをためたら解析しなくちゃいけないので、画像解析について調べました。 画像解析なんてやったこともないし、どんなことをするかも全く知らないのに、企画を進めていたんですね。 調べてびっくり。次元が違う。 例えばこういう感じ
簡単にできる方法や、目的に合う手法を探すため、結構長い時間を調査に使いました。 どうやらOpenCVというライブラリを使えば、割と簡単に画像を扱うことができることがわかりました。 OpenCVはCやC++、Python用のライブラリらしく、やっぱりPythonにしとけばよかったと思いましたが、画像処理が重そうだったので、速度重視でC++を勉強することにしました。
一つ言語をやるとサンプルコードを見れば大体理解できるので、C++はサンプルコードとGoogle先生で勉強しました。 この頃友人にIDE使えと言われ、眠っていたWindowsPCにVisualStudioを入れ、後にMacにはEclipseを入れました。 物凄く捗ります。特にVisualStudioは曖昧な理解でC++を書くのに非常に頼りになりました。 ただ移植性に難ありで、後々苦労しました。
ここからは画像解析に長い時間をかけました。 論文の手法を試すも良い結果が得られなかったり、そもそもそのアルゴリズム(SIFT,SURFなど)は特許があって使えなかったりと、かなり苦戦しました。 結局独自の手法を開発することにして、特定カテゴリではある程度満足いく結果になりました。 しかし、色々と乗り越えなくてはいけない問題があり、この頃の研究結果の多くはまだ実装されていません。
ここで一旦画像から類似性を求めるということを保留し、色検索なら全カテゴリで実装できそうだと思い、そちらの研究に移りました。 OpenCVとC++で画像から色情報を取得し、その情報から機械学習によって商品の色を判定しようと思い、Rを使いました。 機械学習も異次元な領域なのですが、Rには様々なライブラリがあって、関数にデータを入れるだけで解析してくれるので、文系でもデータマイニングができる最高のツールです。
ただし、機械学習には答えとなる教師データが必要になるので、数万枚の画像に目視で色を割り振る作業を行いました。 これが地味ですぐ飽きるし、目は疲れるしで苦労しました。 今になってこの部分はもっと自動化する方法があったなぁと反省しています。
研究をひとまず終え、サイト製作に作業を戻します。 研究ばかりでサイトの具体性がなかったので、モチベーションを高めるためにモックを作ろうと思い、ようやくHTMLとCSSに着手しました。 僕は美術が大の苦手で、サイトのデザインも最初から諦め、CSSはTwitterBootstrapを使おうと決めていました。 Photoshop?GIMP?ナニソレ美味しいの？画像は背景以外、アイコンにすら使ってません。
参考にするサイトを決めて、そのマークアップをサンプルコードとして取り組みました。 ところがどうしても参考にしているサイトと同じものを書いても、ブラウザの挙動が違うことがあり悩みました。 どうやらブラウザの違いでデザインが変わらないように、CSSリセットというものを最初に書くらしいですね。 それが参考サイトとTwitterBootstrapでは違ったみたいです。
色々と調べている中で、sassとcompassの組み合わせが便利そうだとわかり、導入することにしました。 mixinは便利だし、管理はしやすいし、改行などをなくした形で出力してくれたりと至れり尽くせりですね。 結局TwitterBootstrapで使いたい部分だけ抽出して、CSSも自分で書くことにしました。
モックが出来上がり、これをどうやってPHPと連携させるのか調べていると、MVCモデルというものを知りました。 またフレームワークやオブジェクト指向というものも知りました。 フレームワークは学習コストの低さと軽量さでCodeIgniterを選びました。 CodeIgniterは日本語のドキュメントが充実しているので、開発する上で困ることはあまりありません。
MVCのVer1.0が完成し、Gitで管理しようと思った矢先、Macが壊れてデータが消えるという悲劇。
記憶を頼りに泣く泣く作り直し、今度こそクラウドに上げようと思った矢先、Macがこｗ(ry
独りよがりの汚いコードを公衆の面前に晒してはいけないと、GitHubではなくbitbucketで管理してます。
いよいよ公開できる状態に近づいたので、さくらVPSでサーバーを契約しました。 サーバーの設定方法はまずドットインストールを参考にし、必要に応じて調べました。 サーバーに限らずドットインストールには大変お世話になりました。
サービスを運営する上で、新商品が追加される度に色の判定と類似度の計算をしなければいけないので、C++とRとシェルスクリプトでバッチプログラムを作りました。 普通Rってバッチ処理でガッツリ使うものなのではない気がするのですが、PHPでデータハンドリングは微妙だし、C++で書きたくないから仕方ないですね。
バッチプログラムを回してみると、サーバーのメモリ不足で処理しきれないという事態。 最初メモリ2Gのサーバーだったのを4G、8Gと転々としました。 さくらVPSでは2週間は無料お試し期間なのがありがたいです。
でも8Gの最高スペックでも足らない！メモリにデータが乗りきらない！ Rにはメモリの限界を超えてデータを扱う、ffやbigmemoryというライブラリがあるのですがそれでもダメ。 AWSも考えましたが、お金がないので次善策で対処しました。 さくらVPS8Gでもニートには厳しいのです。
バッチ処理が回り、公開用データが準備できたので確認してみると、色々と問題が判明。 まず楽天のカテゴリ分類ミスが多すぎて見るに耐えない。重複商品が多い。そしてキーワード検索が遅すぎる。 検索に関してはMySQLの問題なので、設定ファイルやインデックスをいじって対応しました。でもまだまだ遅いです。カテゴリ絞って頂きたいです。 MySQL5.6から日本語でのFulltextインデックスが採用されていて、MeCabを使うことになった際に導入しました。
楽天側の問題については画像解析で適切なカテゴリに分類するのは極めて困難だと思い、タイトルと説明文を使って判定することにしました。 その際にはMeCabとRを用いてテキストマイニングを行い、バッチ処理の中にカテゴリ分類を追加しました。 それとタイトルが盛り過ぎで見るに耐えないので、自動で書き換える処理も入れました。 説明文も要約するプログラムを作ったのですが、全文ゴミ判定されるケースが多いのでやめました。 同時に重複問題にも出来る限り対策したつもりです。
また高速化に関しては、Apacheの設定をいじったり、php-apcを入れてみたりしています。 それとバッチ処理だけでサーバーが限界だったので、新たにSSD2Gのサーバーを契約してレプリケーションをとりました。
そして2013年5月1日、ついにβ版をリリースしました！ スタートして5ヶ月での公開です。
作業時間について
長々と、かつ端折りながら過程を述べましたが、それぞれのパートでどのくらい時間がかかっているかまとめます。
- API,PHP,MySQLの勉強+クローラー開発1週間
- 画像解析,C++,OpenCVの勉強3週間
- 商品類似度の研究1ヶ月
- 色判定の研究2週間
- HTML,CSSの勉強+モック製作1週間
- MVCの構築1週間
- MVCの復旧×21週間
- 設定、引越し等サーバー関係1週間
- バッチ処理スクリプトの開発1週間
- テキストマイニング系の勉強・開発2週間
- 高速化、タグの設置などのプラスα1週間
- 年末年始1ヶ月
アバウトですが、このような感じです。期間の長さが難易度といった感じでしょうか。 研究が必要ない企画や、集中力がある人ならもっと速く作れると思います。 ちなみに土日祝日はお休みを頂いておりますので、曜日感覚はバッチリです。
システムについて
Monosyのシステム構成についてまとめます。
- サーバーさくらVPS 8G,SSD2G
- WebサーバーApache
- データベースMySQL
- MVCフレームワークCodeIgniter
- バッチプログラムC++,R,シェルスクリプト
8Gのサーバーがマスターで、クローラーやバッチプログラムを動かし、SSD2Gがスレーブで、アクセスを一台で受けています。 マスターはバッチ処理でお腹いっぱいな場合があるので。 毎日新しく追加された商品のカテゴリ再分類、タイトル書き換え、色判定、在庫のなくなった商品の除外、変化のあったカテゴリ内の類似度の再計算を自動で行なっています。
おわりに
最後までお読み頂きありがとうございました。 最初は自分でサイトを作れるのか疑問でしたが、作ってみると意外と簡単です。 自分もWebサイトを作ってみたいと思っている方は、是非チェレンジしてみてください。 PHPなんか寝てても書けます（書けません）。
今後については、目的の機能を追加したり、色々いじって効果測定したいと思います。 当ブログでは、サイト製作やSEO、広告収益最大化など、Webマーケティングに関する記事を書いていきます。 定期的にチェックして頂けると幸いです。 また、シェアなどして頂けると涙を流して喜びます。
今後ともMonosyを宜しくお願い致します。
コメント機能は設置していないので、ご質問やご意見がございましたら、記事URLとともにTwitter