« CMSツールで記事中に表示できない問題に対処 | メイン | amazie on AWS ブログ »

2005年6月 8日

amazie 開発謝辞&参考資料4

なかなかまとまった時間がとれないため、間延びしてしまってすいません。
今回で終わる予定。さらっといきます。

サイズを決めよう

Flash部分を作り出すときに、はじめにサイズを決める必要がありました。
先行のサービスでは、Googleのアドセンスのサイズになってました。
でも、いまひとつ、大きさが好きになれなかったのと、アドセンスの代替としての出番はそんなにないだろう、と。
どうやってサイズを決めようかと考えていたある日、たまたま見ていた美術番組で、ミロのビーナスの黄金比が。
コレだ!と。すごい単純な理由でサイズを決めてしまいました。

amazieのサイズは、基本の1個表示の縦横の比率が黄金比になってます。
人間がもっとも美しさを感じると言われる比率。
まぁ、ホントに余談ですね(^^;

画像はやっぱり小さかったでしょうか?
もう少し、文字情報を減らして、画像を大きくしたレイアウトも用意しようかな・・・。

Flashでレイアウトを自由に変えれるほどスキルがないので、悩ましいところです。


DHTML版

そういうこともあって、途中、Javascript+HTMLで表示させるバージョンも作ったことがありました。

amazie (DHTML版)

その当時、外部データを読み込む方法や、文字コードの問題など解決するメドがつかず、あまり開発を進めませんでした。
Flashはそのあたりのブラウザ環境の差を吸収してくれるというメリットがあります。でも、今思うとこちらのほうがレイアウトの融通が効いておもしろかったかも。
JSON化したデータを、キャッシュしておいて、スクリプトタグで読み込むことで、たぶんできますね。Safariが問題ですが・・・。

複数表示

結局、Flashに立ち戻り、もう一度ゼロから書き直しはじめました。
最初は、表示させる商品の個数ごとに別のSWFを作ろうと考えていたのですが、メンテナンスと負荷の両面から、商品表示の部分は共通のパーツにして、各SWFから呼び出すことにしました。
パーツに分けることで、負荷が増大したときに分散させやすいかもしれないという期待もありました。

そして、表示が複数できるようになったのですが、5個ぐらい表示させたとところで、CPU負荷が100%に。
個数を多くするとマシンがフリーズしたかと思える遅さ。

なぜ?

しばらく悩んだのですが、いっこうに糸口がみつからないので、FLASH-JPフォーラムで聞いてみました。

FLASH-JP.COM - フォーラム

疑問が氷解。
とても助かりました。
おかげで、複数個表示も簡単にできるようになりました。


Ajax

Flash部分は、比較的早くできていたのですが、最後まで詰まっていたのが、設定画面のインターフェースです。もっとも手間がかかる部分なので、なかなか手が出せなかったというの正直なところ。

検索結果はiFrameで表示するようにしていたのですが、ちょうど話題になっていたAjaxを使って読み込むことにしました。(正確にはAjaxではありません。単にページのリロードをサーバーからしないだけ。)

ブラウザの戻るボタンが使えなくなるため、なんとか有効にしたいとか思ったのが、間違いの始まり。
リロードが無限ループに入ってしまいブラウザがクラッシュしてしまうという問題にハマりました。
なんとか回避できるようになりましたが、最初の公開時点でも発生しており、やはり根本的なアプローチが間違ってるのかもしれません。

最速インターフェース研究会 :: [Ajax] location.hashを使ったセッション復元
http://la.ma.la/blog/diary_200502270128.htm

こちらを参考にしました。

細々と調整、そして公開

設定画面などもできあがり、この時点で、いちおうの体裁が整いました。
が、検索結果の表示が異様に遅い。
この時点で、検索を実行してから表示されるのに10秒(^^;
他の AWS を使ったサイトではもっと軽快に動いてます。

Ajaxを使ってる関係で、AWSを呼び出すのに、サーバー上に簡易的なプロキシプログラムを置いて呼び出していたのですが、これが遅い原因でした。
いろいろ試してみると、phpを使うより、perlのほうが速かったので変更。
else if → elsif にはまりました。
php もe-accelarator を入れてましたが、mod_perlでやってみるとかなり軽快になりました。
PHPが遅いのではなく単に作り方がマズかったのかもしれません。


友人や、Asociatehelperのユーザーで知ってる方にテストを依頼。
友人から、LABELタグを使えばもっと使いやすくなるよ。と教えてもらいました。

LABELタグで何ができるかは以下のページに。

Googleも使ってるなんて知らなかった。
ちょっとしたことですが、Webアプリを使うユーザーにとって、とても便利だと思います。


他にも、商品レビューを表示する機能や、画像がズームアップする機能も入れてたのですが、レスポンスがもったりしてたので思い切って削りました。

作りこんでいくと、一度ややこしくなって、その後、作り直してシンプルになるというのを繰り返しますね。


そうこうして、ようやく公開。
ちょっとづつ、Blogなどで取り上げていただいて、利用者も増えてる感じです。
当面は、サーバーの負荷の心配はなさそうです。


終わりに

参考にさせていただいたサイトや、テストに協力していただいた方に感謝を。
特に、呑むたびに、「今度こそ完成する!」を聞かされつづけてくれた友人のSakuさんに感謝を。

まだまだ、行き届かないところや、手の問題で、レイアウトが追加できてないなかったりしますが、ボチボチ改良していく予定です。
愛用していただければ幸いです。


いかがだったでしょうか?
開発謝辞とあわせて、かけあしの紹介でしたが、もし、もっとここについて書いてくれとかありましたら、コメントにどうぞ。
また、amazie へのご要望もお待ちしてます。

はてなブックマーク - nektixeのブックマーク
http://b.hatena.ne.jp/nektixe/

紹介しきれなかったサイトも含め、参考にさせていただいたサイトを はてなブックマークにまとめてみました。これで、ようやく溜め込んでた情報をアウトプット完了。

これまでのまとめ記事
amazie 開発謝辞&参考資料1
amazie 開発謝辞&参考資料2
amazie 開発謝辞&参考資料3

投稿者 AUSGANG SOFT : 2005年6月 8日 16:16

トラックバック

このエントリーのトラックバックURL:
http://blog.amazie.jp/mt/mt-tb.cgi/16