拙作Webアプリ「sa-boom（サ・ブーン）!!」 開発の際に参考にしたものリスト。

こんにちは、a-knowです。 先日βリリースさせて頂いた、iTunes再生回数解析＆共有サイト『sa-boom（サ・ブーン）!!』ですが、お陰様で、私を含めた登録ユーザー数16人・今のところエラーゼロ（実装をミスっちゃってたところはありましたが・・・）と、まだまだ気は許せないながらも、安定飛行の兆しを見せ始めています。 「ユーザー数少なっ！」と思われる方もあろうかと思いますが、ぼくにとっては一人一人が大事なユーザー様ですし、それになにより、GAEのリソース（お金）のこともあります。まぁゆっくりじわじわ増えていけばいいな〜、といったところです。

今回、このようなサイト・Webアプリを作るにあたって、非常に色々な本・サイトを参考にさせて頂きました。そういった助けが一つでも欠けていれば、このような成果を挙げることはできていなかったと思います。本当にありがとうございます。 上述の通り、「安定飛行の兆し」が見え始めてきたのもありますし、あまり期間を置き過ぎても忘れちゃいそうだってことで、ここらへんで一度簡単にまとめておこうかなと思い、このエントリを書いています。 ぼくような未熟者が作ったものではありますが、「sa-boomのこの部分、どうやって実現してるんだろ？？」というようなところがもしありましたら、このまとめが、そんな方のお役に立てればいいなぁという思いを込めて。。

Google App Engine・Slim3関係

Slim3で始める！GAE for Javaでクラウド・アプリケーション開発　目次（準備編・入門編） - シアトルコンサルティング株式会社

今回のこのsa-boom!!、全くのゼロから作り始めたというわけではありません。「CountDown iTunes!! for Web」という前身サイトがありました。これもまたGAEに構築していたのですが、このときにはSlim3は使っていなかったため、Slim3に頼らない・GAE開発の基礎をよく理解できた一方で、そのデメリットも、身に染みて理解することができました。「今度新しく作るときには、必ずSlim3で作ってやるぞ」、と、深く決意したものです。 そんなわけで、sa-boom開発着手時には、Slim3は全くの素人だった為、こちらのサイトは、後ろで紹介させて頂く本と合わせて、大いに助けとなりました。

URLマッピング - Slim3 日本語サイト(非公式)

「/user/a-know」というURL指定でユーザー名「a-know」のページに行く、といったことをSlim3でやりたかったのですが、普通にやろうとするとControllerが動いちゃうので、どーしたもんかなーと調べてみたらこちらを発見。Slim3に死角なし。

「GAE+Twitter4J」 によるbotの作り方

以前にbotを作成したときにも参考したこのサイトなのですが、それがちょっと前の話だったということもあり、今回も、twitter連携部分の実装の際には大いに参考にさせて頂きました。「bot」ではなく「登録ユーザーのtwitter連携」なので、それを置き換えながら読んでいった感じですが。結局は、ユーザー毎のAccessToken/AccessSecretTokenを保持しとく、ってことなんですよね。 一方で、「アプリ側からの連携解除の仕方」がわからないでいます（今は保持しているAccessToken/AccessSecretTokenを破棄するだけ）。良い情報はないでしょうか？

Slim3でのHot deploy時 ClassCastException

まさに、こちらのエントリに書いてあるのと同じExceptionが吐かれたことがあって。たぶん、自分で調べててもいつかはわかってたとは思うんですが、このようにしてまとめておいていただけると、原因判明・対処にかかる時間が短縮できて、本当に助かりますね。

appengine ja night #18で分かった、Google App Engineの課金の仕組み、節約術・自分用まとめ

手前味噌なことに、自分とこのエントリですが。あのとき、まとめておいて良かったと心底思いました。一度理解してしまえば、いいことなんですけどね。 これのお陰か、今のところ0.2$／日で推移しています。まぁ、ユーザー数が少ないから、なんですが！

API・JavaScript・jQueryプラグインなど

jqPlot Charts and Graphs for jQuery

上述の通り、sa-boom!!の前身サイトがあったわけなんですが、そこでのグラフ表示の際には、Google Chart APIを使用していました。このAPI、呼び出し方はややこしいのですが、慣れてしまえばそうでもない。ただ、URL形式での取得ということで、どうしても「文字数制限」や「URLエンコーディングの必要性」といったところが付き纏うということで、Slim3と同じく、「今度作り変えるときにはグラフ表示をどうするか考えなアカンな〜」と思っていました。 そこで目をつけたのがこのjqPlot。日本での使用例はそれほど多くない？印象ですが、自分の表現したいグラフは実現できそうだったので、採用しました。JavaScript・Ajaxに不慣れだったので、最初の導入には苦労しましたが、慣れてしまえばこれもまたどうってこともなかったです。日本語のドキュメントが少ないので、「これをこうしたい！」ってときに目的の情報を探し当てるのが若干大変だったくらいかな？ でも、基本的なサンプルが豊富なので、自分のやりたいことをやっているサンプルを見つけて、それをトコトン読んでいく、という方法で大概の事は解決できた印象です。

jQueryのajax()でslim3のコントローラからjson取得

グラフ描画に使うものが決まったら、次はそいつに動的にデータを渡してやりたい・・・となるワケなんですが。その為には、こちらのエントリにある通りに「jQueryのajax()でslim3のコントローラからjson取得」したいなーということで検索・行き着いたエントリがこちらでした。 結論からいうと、こちらに書かれている方法だとちょっとうまく行かなくって、結局は、先日ここでまとめさせて頂いた方法（「Slim3＋Ajax＋jqPlotで、datastoreから取得したデータからグラフを動的に作成する」）でグラフを表示させることができましたー。めでたし。

jqPlot - mmjブログ

そんなわけで、sa-boom内で表示させているグラフは全てjqPlotによるものなわけなんですが、表示させる情報を都度変えて連続で表示させてみると、その文字とかがどんどん上に重なっていっちゃう現象が起きちゃったんですね。で、調べてみるとこのエントリがヒットしまして、ここには「良く分からないけど、描画divのinnerHTMLをクリアしてみたら、思い通りに動いてくれた。こんなんでいいんだろうか?」と書かれていて。・・・おお、確かにdivのinnerHTMLをクリアしたら、キレイに表示されるようになったっ。・・・でもほんと、こんなんでいいんだろうか？

リクエストには、必要なパラメータが含まれていません。必要なパラメータには、AssociateTagなどがあります。

sa-boom内では、Amazon Product Advertising APIを使用して、アーティスト名で引っ張ってこれるアートワークを表示させています。これは、下で紹介する本で挙げられていたテクニックをそのまま流用したものなのですが、この本を使って学習していたときには問題なく結果が取得できていたのに、今回sa-boomで似たようなことをしようとすると「リクエストには、必要なパラメータが含まれていません。必要なパラメータには、AssociateTagなどがあります。」というようなエラーが返ってくるようになってしまっていました。それで調べてみたところこのエントリが引っかかり、ここではじめて、APIに仕様変更があったことを知る、と。いや〜、ダメダメですねぇ。 てなわけで、僕の場合はAssociateTagの指定がなかったことによるものでした。ちゃんちゃん。（ちなみに最近になって、また似たようなメールが来てました。今度のは、古いバージョンのサポートを打ち切るよ、といった趣旨のようです。）

デザイン・CSS関係

Bootstrap, from Twitter

もう説明はいらないですよね、Twitter謹製のCSSフレームワークです。これなしでは、デザインセンス・デザインスキル共にゼロのぼくに、今のsa-boomを創り上げることは出来なかったでしょう！ 利用者もかなり多いとみられ、ちょっと躓いたときでもググればすぐに解決策が見つかります。そもそも、サンプル・デモがしっかりしてたので、そのソースコードとにらめっこすれば万事ＯＫです。 ところでこのBootstrap、最近バージョンアップしたそうですね（1.4→2.0）。互換性がないとのことなのでsa-boomへの導入はしばらくしない予定なのですが、次に作ろうと思っているWebアプリには、2.0を使おうと思ってます。それぐらい、もうぼくにとっては切っても切れない関係、Bootstrap。

色彩センスのいらない配色講座

色彩センスは全くない！と自負しているぼくですから、この「色彩センスのいらない配色講座」というタイトルだけで、非常に心づよい気持ちになったのをよく覚えています。 サイトの方向性うんぬんよりも、ぼく自身、暖色系・明るい元気な色が好きということもあって、オレンジ色を中心にサイトを構成したつもりだったのですが、どうでしょうか？？うまくいってますでしょうか？？

Fireworksですぐできる！アメコミ風のデザインの作り方 【アメコミ風スタイルダウンロード付き】 | Fireworksマニア

上記の通り、「元気のある感じのするサイトにしたい」とはずっと思ってましたので、こちらの記事をホッテントリで見つけたときにはもう、「今度作るサイトのロゴは、これで作るしかない！！ドンピシャ！！」って感じでした（おかげで、配色的には賑やかな感じになってしまいましたが・・・）。 Fireworksは持っていなかったので、体験版でまかないました。こういう、描画系ツールの経験はからっきしだったのでまぁまぁ大変ではあったのですが・・・。まぁ、それにしては「すぐ出来た」、と思います。

Webサービスを作る人必見！Cacooでワイヤーフレームを作ろう - nanapi Web

こちらの記事を見つけたときは、すごくワクワクしましたね〜！「これなら、最初に持ってるイメージを手軽に、形に残せそう！」と。で、そのワクワクは全く裏切られませんでした。Cacoo、非常に重宝してます！ sa-boom構築の前に作っていたワイヤーフレーム、↓なかんじでした。構築の過程で付け足したり、削ぎ落としたりしている点、多々ありますが・・・。（画像クリックでもう少し大きな画像が見れます）

ICON FINDER

フリーワード検索で、各種アイコンを探せるサイト。sa-boom内の矢印アイコンとかは、主にこちらで拾ってきたものです。一度に多くの種類のアイコンからしっくりくるアイコンを探せるのがいいところだと思いました。

AJAX Activity Indicators(animated gifs)

情報読み込み時などのローディング画像は上記サイトではどうも見つからなかったので、こちらから頂きました。比較的大きなローディング画像って、いざ探してみるとなかなかないんですよね。

PNGを無劣化で圧縮できるWindowsソフト「PNGGauntlet」

今のsa-boomも、お世辞にも動作が軽いとは言えない出来だと思うのですが、ローカルでのテストのときは、それがもっと顕著でした。「じゃぁ、リリースの際にはパフォーマンスを考慮してロジックをいじったのか？」というとそうではなくて（ホントはそれもしたほうがいいんですが）、このエントリで紹介されいる「PNGGauntlet」を用いて、sa-boom内で用いている画像を圧縮したんですね。これを行う前はホントひどかったですね、久々に見ましたもん、画像が上から段々とロードされていく様子なんか。 サイト内で用いている画像をこうして圧縮しサイズを小さくすることは、サイトの表示速度はもちろんのこと、転送量の点でも大きい（と思う）ので、このツールは本当に助かりました〜。

ちょっとだけ気の利いた、スクロールしてトップへ戻るボタン

sa-boom内で、少し下にスクロールを掛けると出現する、「back-to-top」のボタン。これの実現に、大いに参考にさせて頂きました・・・というかもう、そのまんまっす。。ありがとうございます。

Google＋風の円形リストを作成できるjQueryプラグイン「CircleList」

sa-boom作りもいよいよ終わりが見えかけてきていたとき、「どーもsa-boomには華々しさ（？）がないな〜」という思いがアタマをもたげ始めてまして。「簡単にできて、少しカッチョいい系の見せ方、何かないかな〜？」と模索していたときに見つけたのが、こちら。sa-boom内では、アーティスト名検索結果ページでこれを利用しています・・・どうでしょうか。 僕の未熟さも手伝って、導入にかなり手こずりました。でもおかげで、少しは華を添えられたでしょうか？？

もうCSSハックは必要なし!? ブラウザ毎にCSSを切り替える「cssuseragent」

sa-boomを色んなブラウザで動作確認をしていく過程で、どうしても、ブラウザ間でレイアウトが崩れてしまう、という箇所がありました。なんとかしたくて、「CSS ブラウザ毎」というようなワードで検索してみたりもしたんですが、どうも、どれもゴリ押し感が否めない。笑 そんなところにこのエントリを発見致しまして。このエントリで紹介されている「cssuseragent」を導入することで、比較的スマートな形で、これに対応できたのではないかなと思います。 sa-boom内では、アーティスト名検索結果ページでこれを利用しています。

その他ツール類

Brainstorming and Mind Mapping Software. Make a Mind Map Online! - Mindomo

オンラインでマインドマップを編集できるWebアプリケーションサイトです。英語ですが、初めてマインドマップを触るぼくでも簡単に編集することができました。 sa-boom（前身サイトの再構築）の構想自体はかなり早い段階からやっていて、アイデア出し・出たアイデアのまとめ、といったところを、このマインドマップで整理していましたー。

Egitからgithubを利用する(1) - 転石はどん底まで止まらない(・∀・)

最初の方は気をつけていたんですが、だんだんとクソなコードになってきていたsa-boom（アプリの完成形が見えてくると、もう、早く形にしたくてしょうがなくなってしまうんです・・・）。そんなクソなコードでも、前々からgithubにコードをpushするのはやりたいなぁと思っていたので、こちらのエントリを参考にさせて頂きました。クソpushです。

参考にした書籍

何度かこのブログでも挙げている以下の2冊が、もうフル稼働でした。

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

上述の通り、Slim3の全くの初心者だった為、着手の前にまずこの一冊を読み干しました。そういう意味では、GAE自体の基礎はあった（と思う）ので、読んでしまえば後はわからないときにちょいちょい参照する、という方式で十分対応できました。特に、関連・Global Transactionといった頁はよく参照していたように思います。 出版年月的にちょっと古い部分もあるかと思ったので、一応「本で調べる→オンラインドキュメントも見ておく」という手順を踏むようにしてました。

作ればわかる！Google App Engine for Javaプログラミング

これはもう本当に、技術的な意味でもモチベーション的な意味でも、非常に大きかった一冊。このブログでもシリーズ記事にしてたぐらいですが、昨年はずっとこれを参考にGAEアプリケーションを作成・アレンジしながら、sa-boomに使えそうなところ・アイデアに、逐一付箋を貼っていってました。

ちょっと貼りすぎてわけわからん状態であったことも否めませんがｗ 参考になったのは「Amazon Product Advertising APIの利用」「Twitter連携」「Ajax通信」、あとは地味に「JSTLのお作法」といったあたり。「GAEで何か作りたいんだけど、今はアイデアが・・・」という方には、そのアイデア待ちの間にこちらをどんどん消化していくことをオススメします！

最後に、sa-boom!!構築に掛かった時間。

最後にですが、個人的な興味として「今回のsa-boom!!ぐらいのアプリケーション構築に、今のぼくはどれくらいの時間が掛かるんだろう？」という思いがありまして、日記がてら、構築に要した時間を工程毎にメモっていってました。それを計算してみたので、その結果をここにメモしておきます。

工程（大）	工程（小）	所要時間（時間）
デザイン	ワイヤーフレーム	6.00
デザイン	画像作成	4.50
デザイン	CSS,JSP	29.50
実装	JavaScript	36.75
実装	Java	44.25
実装	client修正	2.00
その他	参考文献参照	6.00
その他	アウトプット	1.00
その他	ソース管理	1.00
その他	リリース作業	4.00

開発期間：2011/12/27 〜 2012/02/03 総所要時間：135.0時間

まぁ結構要しているようなそうでないような感じなんですが、今はっきり言えることは、「今ならこの半分の時間で作れる！」という自信がある、ということです・・・（当然か）。