Hatena::ブログ(Diary)

kazu0620の日記

2010-04-12

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

20:20

というわけで

プログラミング未経験の状態から、mixiアプリのリリースまでなんとか漕ぎ着けることができました!最近、OpenSocial界隈は盛り上がってるみたいだし、プログラミング経験はないけれど、興味ある!って人も多いと思います。そこで、所謂「ド素人」の状態からプログラミングを勉強してmixiアプリをリリースするに至るまでの僕の軌跡と、何をどう勉強すればいいのか?ってのをまとめてみました。webで調べたり、プログラマの知人に相談したりしてこれは良かった!って部分を抜き出してまとめたので、これから勉強するぞって方は参考にして頂ければ幸いです。これであなたもSAP(ソーシャルアプリプロバイダー)に!

完成したアプリ

「一行リレー小説」

f:id:kazu0620:20100411145810j:image

http://mixi.jp/view_appli.pl?id=15525

開発期間:実質3ヶ月程度

リリース日:3月24日

現在の投稿総数:7622行

現時点でのユーザー数:1112人

一日のPV数:3000超程度

サーバー運営にかかるコスト:月7000円ほど(amazonEC2/S3を利用)

という感じです。大赤字で涙目ですが、正直これくらいのユーザー数なら別にさくらの月1500円のレンタルサーバーでも捌けるはずなので、ちょこっとアプリ作りたい!って人はわざわざクラウドとか利用したりしなくても大丈夫そうな感じです!

スタート地点

htmlとかcssはなんとなく書ける。

レンタルサーバーを借りて、簡単なホームページは作ったことある

・でも、プログラミングは全く未経験。配列?ループ文?なにそれ、こわい。

という状態からガチでソーシャルアプリを作ることを決意。

1.サーバーサイドのお勉強をする

とにかく、素人でもPHP使えばいろいろできるんだぜ!みたいな記事をよくはてブで見ていたので、何はともあれまずPHPを勉強してみることに。(というか、この時点ではPHPMysqlだけでmixiアプリも作れると思ってた)amazonとかブログ書評とかを見てPHPの勉強のために読んだ本が下の2冊。両方読めばとりあえず、データベース使って簡単なwebアプリなら作れるようになります!多分。

改訂新版 基礎PHP

改訂新版 基礎PHP

最初に手をつけたのがこの本です。最初はすごく優しく教えてくれるんだけど、なんか途中から急にスパルタになったイメージ。でも、???って思ったところもgoogle先生に聞けば大抵教えてくれるんで、何とか読み進めてきました。

プログラミングPHP 第2版

プログラミングPHP 第2版

プログラミングの教科書は、動物の絵の本がおすすめという噂を聞いて購入。こちらは、開発と同時並行で読んで行きました。文法構造の細かいところやセキュリティ関係の部分が上述した一冊だけではカバーしきれて無かったので役立ちました。というわけで、まぁPHPのコード書けるようになったしアプリ作るか!と、なるのですが・・・。

2.クライアントサイドのお勉強をする

勢いに乗って、実際にmixiアプリの開発についてググって調べたりコードを見たりしてみると・・・。あれ・・・?あれ・・・?プログラミング勉強したハズなのに、なんだか見慣れない文法や記法ばかり・・・。なんと!mixiアプリ、というかOpenSocialPHPではなくjavascriptで動いたいたのです!いや、サーバーサイド(PHPなど)の知識も必要なのですが、メインの部分はjavascriptで書かれているのです!というわけで再びamazonのレビューやブログ書評を見たりして勉強の仕方を調べる。結論として、javascriptは以下の二冊だけやっとけばOKだという結論に至りました。javascriptの場合、下手な入門書だと本当に上っ面のことしか書いてなかったりするんで、以下の2冊を気合で勉強するのがいいと思います。

JavaScript 第5版

JavaScript 第5版

一見、とてもブ厚く見えるし実際こんなの読み進めれるのか?と不安になると思います。だけど、実際開いて読んでみると、やっぱ想像の通りで、わからない部分が何度もあってああ自分はアホだなーとか思って泣きそうになると思いますが、まぁとにかく読み進めてみましょう。

これも、開発と同時並行で読み進めて行きました。薄っぺらい本ですが、初心者が実際コーディングしてくと絶対ハマってしまうだろうなーってところの原因と対処方を書いてくれてるので、とても役に立ちました。わいはいも虫から蝶になれるのや!と妄想しながら気合で読み進めてください。

この2冊を読み終えたあと、PHPの知識と合わせてajaxで簡単なアプリを何か作ってみるといい感じです!mixiアプリは、基本全てajax(非同期処理)で書くことになるからです。あと、フレームワークの使い方も抑えておくとさらにグッドです。ちなみに、今回のアプリでは「prototype.js」というフレームワークを使用しました。

3.やっと・・・mixiアプリの開発へ!

というわけで、ようやく開発へ。で、mixiアプリについてはどうやって勉強するんだ?と思ってるかもしれませんが、mixiアプリの中身自体はjavascriptで通信部分に関してはajax的なものとPHPで書くことになるので、新しいことを学ぶ、というより今まで学んだことを生かして実際にコーディングして行くという側面が強い感じです。では、実際にmixiアプリを開発するにあたって、大枠の手順を箇条書きにしてとめてみます。

○下記アドレスの手順に従い、ディベロッパー登録をする

http://developer.mixi.co.jp/appli/pc/pc_prepare/developer_account_regist_pc

xmlファイルを用意する

このxmlファイルがmixiアプリの本体となります。XML!?と聞いてもビビるかもしれませんが、安心して下さい。以下のアドレスにあるxmlの中身をコピーして、以下の部分にjavascripthtmlを記述すればいいだけです。

http://developer.mixi.co.jp/appli/pc/lets_enjoy_making_mixiapp/helloword_of_mixi_app

拡張子にビビらなくてもOK!コピペしたものの中身だけちょっと変えればほら!これでもう、あなたのアプリです!

 <?xml version="1.0" encoding="UTF-8"?>
<Module>

 〜省略〜

  <Content type="html"><![CDATA[
 <!--- 以下の部分にhtmlとjavascriptでコードを記述します。 -->
<h1>Hello mixi App World!</h1>
<p>これはわいのアプリや!</p>
<script type="text/javascript">
alert("わいのアプリなんや!");
</script>
 <!--- コード、ここまで -->
  ]]></Content>
</Module>
xmlファイルをサーバーアップロードする

サーバーの準備に関しては次項で詳しく説明しています。サーバーのレンタル方法やFTPの使用法なんかに関しては、事細かに説明してるサイトがたくさんあるので検索すればすぐに親切な解説サイトが見つかるはずです。サーバーを確保できたらば、xmlファイルをweb上にアップしましょう。

mixiアプリを登録する

以下のアドレスで、必要項目を入力すればとうとうあなたのアプリmixi上で動作するようになります!ガジェットURLという項目には、先程web上にアップしたxmlファイルのアドレスを入力すればOKです!

http://mixi.jp/add_appli.pl

○さぁ、アプリ作成開始!

いよいよ、実際のコーディングです。マイミク情報を取得したり、idからニックネームを取得する、などのmixiアプリOpenSocial固有の機能の使い方に関しては、以下のサイトを見ると参考になります。大体の疑問はmixi Developer Centerで解決するかと思います。最低限の機能はソースコードも掲載してくれているので、最悪コピペでも動作可能です。それでも分かりづらい部分や疑問があったときは、下の2サイトを見てみると同じことをより詳しくor分り易く書いてたりするので、オススメです。

mixi Developer Center

http://developer.mixi.co.jp/appli

goo Developer's Kitchen

http://developer.home.goo.ne.jp/

OpenSocial API デベロッパー ガイド

http://code.google.com/intl/ja/apis/opensocial/docs/0.8/devguide.html

○補足

アプリの開発を実際に始めると、コードを変更したのになぜか反映されない!ってここが起こります。これは、mixiアプリが強力なキャッシュ機能を備えているためです。詳細と対策は、以下のサイトなんかを参考にしてみるといいでしょう。

mixiアプリ開発日誌−mixiアプリ キャッシュを無効にする方法

http://blog.soratobu.jp/2009/04/465/

また、実際のコーディングを行う時にはFirebugなどのデバッグツールを使用すると飛躍的に効率がアップするのでオススメ(というか必須)です!それに加えて、プログラミング用のエディタを仕様するとさらに開発効率は上がると思います。僕は、次項で説明するlinux環境を用意できてからは、vimというエディタを使用して開発していました。

4.サーバー環境を整える

大体の個人アプリサクラレンタルサーバーで全然大丈夫だとは思うのですが、万が一大ヒット・・・なんてことがあるとmixiアプリの場合ケタ違いのアクセスが生まれるので、並のサーバーではとても持ちません。もちろん、ここまで読んでくれた方は、すでに頭の中で万が一の大ヒットのことを想像してヨダレをたらしていることかと思います。僕も、万が一のことを考え今回のアプリはamazonEC2でサーバーを構成していました。所謂、流行りのクラウドというやつです。実際の運用方法や概念については、下記の書籍が参考になりました。


下の入門書を読みながらVMwareを使って、仮想環境でroot権限の勉強をしました。まぁ、なんだかんだ言って普通にプログラミングしててもどっかでサーバー周りの話は絡んでくるので、linuxのお勉強をしておいて損することはないと思います。なお、VMwareインストールに関しては下記のサイトを参考にしまいた。

http://bach.istc.kobe-u.ac.jp/lect/tamlab/ubuntu.html


とっても丁寧に書いてくれてるのですが、いかんせん「cd」と「ls」だけ覚えた状態から読み始めたのでなかなかハードでした。また涙目に。でも、セキュリティからバックアップまで詳しく解説してくれてて、とても良書でした。rootって何?ってのから、実際の運用してみるところまでこの一冊で行けちゃうのでは、と思います。

クラウドAMAZON EC2/S3のすべて (ITpro BOOKs)

クラウドAMAZON EC2/S3のすべて (ITpro BOOKs)

amazonEC2の実際の運用の実例と共に説明してくれます・・・が、具体的な内容に関してはこの本よりも著者のブログの方がはるかに充実しています。実際、運用を初めてからググって、この著者のブログを読んで解決ってパターンが多かったです。ちなみに実際に運用するまでには、詰まってgoogleで検索して・・・っていうのをかなり繰り返しました。クラウドの概念的なものをこの本でつかんで、運用に関しては下記のブログを熟読すると良いのでは、と思います。

RX-7乗りの適当な日々 

Amazon EC2/S3を使ってみた - まとめ (Amazon Web Services関連エントリ目次)

http://d.hatena.ne.jp/rx7/20080528/p1

5.そして、公開へ!

mixiアプリの公式カテゴリ掲載の申請をすると、mixi側の審査を受けた後それが通ってれば正式公開となります。注意点としては、

・推奨環境を書いておかないと審査に落ちる

バーチャルグラフを使ったアプリは審査は通るが18歳未満の利用が制限される

バーチャルグラフを用いたアプリは、オススメ欄掲載は絶望的

などでしょうか。審査には大体1〜2週間くらいかかるとmixiディベロッパーセンターには書いてあったのですが今回開発したアプリの場合、申請から3営業日での公開となりました。実際には大体2〜3日で公開されるアプリが多いみたいです。また、確信はないのですがバーチャルグラフを利用したアプリmixiアプリのオススメの項目には掲載されないようです。さらに、どんなジャンルのアプリであろうがまず間違いなくカテゴリ「その他」に分類され導線は限りなく細くなるので、ヒットを狙うならソーシャル・グラフに絞って利用できるものを開発するのが良さそうですね。あ、それからアプリインストールしていなくて、かつマイミクではないユーザーの個人データは取得できない仕様となっています。ここまでは良いのですが、アプリを一度入れたけれど削除してしまった人のデータも当然取得出来なくなるというのが意外と盲点なので気をつけて下さい。バーチャルグラフを利用したアプリだと、下手するとコレで致命的なバグを引き起こす可能性もありそうなので。

6.まとめ

・開発にはサーバーサイドとクライアントサイド、両方のプログラミング知識が必要

・ヒットする可能性があると思うなら、サーバー環境を大規模アクセスに耐えれるよう整えてから公開しよう

・ヒットを狙うならバーチャル・グラフは極力利用しないようにしよう

以下、技術的なお話に関するまとめでした。戦略的なお話のまとめも用意しましたので、これを読んでアプリを開発するぞ!と思った方はぜひこちらもお読み頂ければ、と思います。

http://d.hatena.ne.jp/kazu0620/20100413/1271181653


余談

というわけで、文系でプログラミングは未経験だと言う人でも数カ月かければmixiアプリは作れます。ちなみにこれは完璧余談なのですが、このアプリの公開は大学の卒業式の前夜に始まりました。おかげで、思いも知らなかったバグの修正やまだ時間的余裕があると思ってたために追加してなかった必須機能の追加などのため式の直前まで徹夜でプログラミングをするハメに・・・。とはいえ、なんとか無事式には出席できて僕も晴れてニートの仲間入りを果たすことができました。世間の噂を真に受ければ既卒なのですでに人生終了!という噂ですが・・・。これより、就職活動を開始したいと思っております。アルバイトでも構わないので何とか、仕事を見つけられれば・・・と思っています。

というわけで

もしも面接して頂ける、という会社があれば

kazu620@gmail.com 

まで連絡を頂ければ幸いです。

uturauturauturautura 2010/04/14 16:34 こんにちは
プログラム勉強したかった時だったんですごくためになりました。
ありがとうございます。

fmactionfmaction 2010/04/15 09:20 これは、刺激になる記事です。作りますよーmixiアプリ。

tamakontamakon 2010/04/17 22:08 こんにちは。
Web系はほとんど経験のない初級PGです。
大変刺激を受けました。参考になります。
ありがとうございました。

yuka_upayuka_upa 2010/04/29 07:51 これ読んで勉強はじめました!ありがとう。

トラックバック - http://d.hatena.ne.jp/kazu0620/20100412/1271071223