Webプログラミング未経験からmixiアプリを作るまでにやったこと

mixiアプリ「大喜利PHPプレイバック」を公開しました - 理系のためのTIPS集

上記エントリでも書きましたが、今年の目標だったmixiアプリの公開までなんとかこぎつけることができました。
アプリ名：大喜利PHPプレイバック
URL:http://mixi.jp/view_appli.pl?id=16441
2012/02/28 追記 mixiアプリの仕様変更に伴い、上記のアプリは提供を終了しました。

公開日は2010年10月26日。現時点での利用者数は50人(！)です。大喜利好きな人は使ってみてください！（泣）

このエントリの趣旨

Webプログラミング未経験だった自分がmixiアプリの開発をすすめるにあたっては、以前話題になった下記の２エントリにたいへん刺激を受けました。

文系ド素人がmixiアプリを開発〜リリースするまでのまとめ - kazu0620の日記

Webプログラミング素人が利用者9万人のmixiアプリを作るまで - mixiアプリ開発日記 - 毒蛇は急がない -

そこで先人に習い、やったこと・学んだことを振り返ってみようと思います。技術的なノウハウについてはすでに上記２エントリで詳細にまとめられているので、自分の場合はどう取り組んだかという点も含めて振り返ってみようと思います。
自分のように、Webプログラミング未経験だけど余暇を使って何かWebサービスを作ってみたい、という人の参考になればと思います。記事の前半で技術的なこと、後半に取り組み方についてまとめます。

目次

• 開発前の状態
• 技術的なこと
  • 外部サーバ
  • 開発環境
  • クライアント、UI
  • HTTP
• 取り組み方
  • 一日の過ごし方を見直して時間捻出
  • Twitterは情報収集＆備忘録に利用
  • 学んだことやハマった点はブログに公開
  • 作業に集中するための工夫
  • 学習／開発に役立つWebサービス
  • 勉強会の参加について
  • 英語への苦手意識を克服する
• おわりに

開発前の状態

・普段はVB6やVBAによるWindowsアプリケーションの開発など。
・Webプログラミング(javascript, HTTP, サーバーサイドなど)はほぼ未経験。
・HTML+CSSは自社サイトを作ったときに駆け足で勉強。
・Java+Eclipseは過去に経験あり（非Web)

技術的なこと

外部サーバ

外部サーバはGoogle App Engine for Javaにしました（アプリ名にはPHPがついてますがアプリの実装には無関係です）。経験のあるJava+Eclipseが使えること、月間500万pv相当のサーバが即座に無料で使えることが理由でした。国産フレームワークのSlim3があることも魅力でした。さらにApp Engineは、app engine ja night（略称ajn） という勉強会が各地で定期的に開催されていて、とても活気があります。余談ですが、のちに「App Engineはその特性から個人のWebサービス開発やソーシャルアプリ開発に向いている」という有識者の意見をきいて、選んで良かったーと思いました。（とは言っても自分の場合、App Engineの恩恵にあずかれるほど集客できていませんが…。）とにかくインフラ面をGoogleに丸投げできるのはとってもらくちんです。
注意すべき点として、Google App Engineの永続化機構であるDatastoreを、RDBMSと見なして使わないということです。JDOで実装するのは茨の道と言われています。しっかりとDatastoreの仕組みを理解するにあたっては、ajnでの@bufferingsさんの発表が理解を深めるのに大変役立ちました。bufferingsさんのブログに資料やUSTが公開されています（URL）。また7月末に出版されたSlim3本が、Datastoreを学ぶのにもってこいです。タイトルはSlim3ですが、特にDatastoreについてみっちりと解説されています。

オープンソース徹底活用Slim3onGoogleAppEngineforJava

開発環境

GAE/Jは、GPE(Google Plugin for Eclipse)によりEclipseで快適に開発できます。opensocialについても、Eclipseのプラグインopensocial-development-environment(OSDE)でソーシャルアプリコンテナをシミュレートできます。

クライアント、UI

クライアントにはFlashを使わず、jsだけで作りました。単純にFlashを持ってなかったのが理由です。jsを学ぶには、定番のJavaScript:The Good Partsが参考になりました。はっきりとした論調でのjsの取り扱い指南は、理解や実用面でとても役立ちました。
自分はクラスベースのJavaを下敷きにJavaScriptを理解しようとしてしまったために、プロトタイプチェーンやスコープチェーンなどJavaScript独特の概念を理解するのになかなか苦労しました。また、特に入門者向けの記事では便宜上の方便で解説されてたりすることも、混乱する要因になりました。ECMAScriptの仕様書はオンラインで参照できるので、言語仕様のことで混乱した際はそちらをあたるようにしました。jQueryやjsdeferredなど、各種ライブラリのソースコードを読んでみるのも良い勉強になりました。（読むのは大変苦労しますが…）

JavaScript: The Good Parts ―「良いパーツ」によるベストプラクティス

jsのライブラリにはopensocial-jqueryを利用しました。jQueryはajax通信やDOM操作にとても便利なライブラリですし、ブラウザ間の差異を吸収してくれます。opensocial-jqueryは簡潔な記述でソーシャルアプリコンテナと通信できる点が魅力でした。前述のjsdeferredもバインドされています。
UIとデザインは、jQuery UIを利用しました。当初はUIデザインも自作にしていたのですが、デザイン作業がいかに大変かを痛感しました。そこで中途半端に自作するよりjQuery UIを使った方がデザイン性も保守性も良くなると判断し、jQuery UIに切り替えました。
jQueryおよびjQuery UIについての書籍は下記を購入しました。jQueryだけでなくテンプレートエンジンpureなどの便利なプラグインや、QUnitによるユニットテストの手法についても紹介されています。

jQueryクックブック

書籍「mixiアプリをつくろう！」には、opensocial-jqueryを利用したアプリの作り方が紹介されています。

mixiアプリをつくろう!OpenSocialで学ぶソーシャルアプリ

HTTP

サーバとクライアントは、ajaxでデータをやりとりします。そういったコードを書いているうちに、サーバとクライアントがどういう仕組みでどんなデータをやりとりしているのか理解する必要があると気づきました。その仕組みHTTPについては、下記の書籍が参考になりました。HTTPの歴史的な経緯から技術的な仕様やREST、実際の設計手法まで多岐にわたって解説されています。

Webを支える技術 -HTTP、URI、HTML、そしてREST (WEB+DB PRESS plus)

技術的なことについてはこんなところです。ここから、取り組み方について振り返ります。

一日の過ごし方を見直して時間捻出

取り組み始めたのは２月中旬からです。日中はサラリーマンなので、余暇を開発の時間に充てました。ひと月に確保した時間はざっくりと平均して８０時間くらいだと思います。総作業時間は単純計算で約640時間。アプリの仕様自体はごくシンプルなので、大半は学習／調査に時間を割いていると思います。
時間を捻出するため、一日の過ごし方を見直しました。それまで平日の帰宅後や休日は録りためたテレビ番組を見たりすることが多かったのですが、その時間を学習時間にあてました。また、平日朝に一時間の時差出勤で朝の学習時間を確保しました。早起きするようになったぶん、早く寝るようにして睡眠時間は減らさないようにしました。睡眠を削ると翌日に響くので、デメリットのほうが大きいと判断しました。

Twitterは情報収集＆備忘録に利用

学習をはじめたのと平行して、Twitterをコンスタントに利用し始めました。自分は２つの用途でTwitterを利用しました。ひとつは技術的なツイートをしている人をたくさんフォローして、情報を収集すること。もうひとつは、調べてわかったこと・調べてもわからなかったことをツイートして、メモ代わりにしておくことです。時々解決策をリプライでもらえたりするのもメリットです。
しかしそんなTwitterには恐ろしいデメリットもありました。これについては後述します。

学んだことやハマった点はブログに公開

自分で解決したことや、調べてもあまり情報が出てこないものは、ブログのエントリにして公開しました。自分はメモTweetの延長上としてエントリを起こすことが多かったです。記事として公開しようと思うと、なかなか迂闊なことは書けないので自分の理解不足が見つかることもあり、その点も有用でした。
それ以外に外部に公開することのメリットとしては、内容へのツッコミやブクマなどのフィードバックが得られることです。これらも学習のモチベーションにつながりました。

作業に集中するための工夫

Twitterは情報収集に有用ですが、先述したように、恐ろしいデメリットもあります。それは、おもしろツイートやおもしろ記事へのリンクがTLに流れてきて、気づくと作業を放っぽってネットサーフィンに夢中になってしまう怪現象のことです。これが、Twitterの恐ろしいデメリットです。これを防ぐにはTLを見なければいい話なのですが、備忘録的なツイートはしておきたいのです。そこで、TLを見ずに投稿できるクライアントがないものかと探しました。Chrome拡張のChromed BirdはオプションでTLを非表示に出来るので、これを使って投稿専用のクライアントとして活躍してもらいました。
Google Readerやはてなブックマークなども、気づくと勉強の邪魔をしてきます。これらもChrome拡張に対策してもらいました。使ったのはChrome Nanny（→PC作業の心強い味方Google Nanny　- 理系のためのTIPS集）という拡張で、指定したURLを時間指定でブロックできます。この拡張は個人的にものすごく重宝しています。
ほかにもカフェで作業するときなど周囲の雑音が気になるときは、RainyMood.comのお世話になりました。

学習／開発に役立つWebサービス

まずはとにかくご存知はてなブックマークです。新しい技術から定番の技術、仕事術など役に立つ記事が日々話題にあがってくるので、Google Reader経由で頻繁にチェックしました。
作図WebサービスCacooは、いろいろな用途で役立ちました。ロジックを考えるときにはUMLやフローチャートを書いたり、画面レイアウトを考えるときにはワイヤーフレームを書いたりしました。
上記の用途以外でもcacooは重宝しました。自分は新しい概念を学ぶとき、とりあえず図にしてみることが多いです。そういった目的で図を書くときにも、フリーレイアウトで描けて、画像をURL指定や画面キャプチャで簡単に入れこむことができるcacooは大変重宝しました。アイコンやオブジェクトもとても充実していて、現在もどんどん増えていってます。９月末にスタートした有料プランにすると、図を無制限で保存できます（無料でも25枚まで作成可能）。下記はjavascriptのプロトタイプチェーンを理解するために図にしてみたものです。こうやってブログに乗せるのも簡単です。

表を起こしたいときは、Google Spreadsheetを利用しました。iPhoneから利用できるのが地味に便利です。
またjsやcssの動作を理解したいときにはjsdo.itを利用しました。ささっと試せますし、他の人のコードを読んだりいじったり出来るのも勉強になりました。

勉強会の参加について

勉強をはじめてから、いくつかの勉強会・イベントに参加しました（USTREAM視聴も含め）。とても得るものは多かったです。個人的に一番衝撃だったのは、Slim3本著者の@shin1ogawaさんのEclipseによるライブコーディングです(→USTREAMのURL)。これを見てから自分も開発環境を使いこなすということに意識を向けるようになりました。
得るものが多い反面、予習は大事だなと思いました。予習をさぼって参加すると、発表中ほとんどハテナ状態になってしまいます。もったいないですし、なによりせっかくの発表に対して申し訳ないです。なので目次をざっと見てよくわからなかったら、簡単にでも予習しておくのが良いなと思いました。
あと、名刺をいただく場合もあったりするので、一応自分の名刺も用意しておいた方がいいかなと思います。自分はProcaでTwitter IDから個人用のミニ名刺を作りました。

英語への苦手意識を克服する

やはりこの世界、一次情報が英語であることは多いです。ECMAScriptしかり、App Engineしかり（※AppEngineについては公式に日本語の技術情報が公開されていますが、内容には間違いが多くもっぱら危険物扱いされています）。国産のフレームワークであっても、Slim3の公式なドキュメントは英語です。
そういったこともあり、英語に苦手意識のあった自分でしたが英語に触れる機会を増やして徐々に慣れるように努めました。例えば開発環境のEclipseやTwitterなどのWebサービスをあえて日本語化せず使うようにするなどです。また、通勤中を英語の勉強にあてるようにしました。絶対的な勉強量が少ないので目覚ましい効果はありませんが、徐々に英語力をつけていこうと目論んでいます。（しかし、先日受けたTOEICは悲惨な結果でした。道は険しいです…）

おわりに

Webサービスを作ろうと思い立ったきっかけのひとつは、技術者として成長していきたいなら業務関係なく技術を学び続ける姿勢が必要なのだなーと思ったからです。やってみたら楽しいものですね。課題として、家庭と勉強の両立は慎重に探っていく必要がありますが、技術者として一皮向けるように今後もこの姿勢は保ち続けていきたいと思います。