Aggressive Style 5

Aggressive Style 5

昨今はコミケ関係を中心に書いています。同人やニコニコ動画方面で活躍される方の相互リンクをお待ちしています。

Webサイト制作の会社に入社してからの一月を振り返って

新しい会社に入り漸く一月が経過しました。今月はとあるサイトのトップページを担当する事に。今までPHPMySQL(CURD)*1データーベースに関する事が中心だったのですが、いきなりJavascriptjQueryなど初めての言語を担当する事となった上、サイトのデザイン周りの事なので本当に戸惑いながらの作業でした。諸先輩方や上司の助言なども有り、無事に完成近い状況です。そこで今日はここまでの経過について話そうと思います。

今作っているサイトについて

詳細はここに記しませんが、まずは作っている物に近いサイトを紹介致します。以下はMercedesが新型Aクラス販売を記念して、iPhoneなどのアプリケーション「Instgram」で「#mb a」とハッシュタグを付けて送信された写真の、フォトコンテストの結果を表示しているサイトです。Instgramを経由する事で、宣伝の場所が増えると言う点も上手いやり方です。

New A-Class Photo Contest

URL:http://mb-fans.com/photo/aclass/


技術的な面ですごい点

技術的にすごい点はブラウザの解像度に応じて、写真の配置を変えている点です。写真のサイズが不均一なので見ていて飽きさせません。自分の方でも、ブラウザの解像度に応じて写真の表示を変えて居ますが、このサイトはそれ以上の事をやっています。Instgramの写真は正方形状になっているので、正方形を敷き詰める感じで配置するのはすごいです。

読み込みの工夫が上手い

又画像の読み出しが遅いと感じさせない演出は上手く、今の自分では手に負えません。見る人間の立場では写真などのサイトで読み出しが遅いのは宿命だと思っています。しかし作る人間の立場ではなるべく無駄を抑えるように動かねばなりません。まずこういったアプリケーションが動くまでの流れとして、「サイトのデザインの読み込み→画像の読み込み→画像をサイト上に配置→動作→スライド」と言った五段階に別れます。以下はその工程の内、画像の読み込みに関してみて行こうと思います。以下はfirefoxプラグインfirebug」を使って検証していきます。

まず自宅のwimax環境のmacbook(Core 2 Duo 2.0GHz/2GB/SSD)で、2.0MBのデータを読み込むのに94秒位かかっている事が分かります。




さらに画像のみだと79秒かかっています。恐らく読み込む順番を調節してこの時間なのかもしれません。「icon_ranking4.png」の画像は1.5KBに押さえられており、写真も100KB前後に押さえられています。写真をInstgramから拾って来る段階でImageMagick等で圧縮処理を施しているのかなと思ってしまいます。



反省点

話変わって今回の設計で失敗した点は、この全体の流れを追えなかったのもあり、読み込みのやり方を関数などで上手くまとめられなかった事です。突き詰めれば仕事をする等、今までと違った環境に身を置か無ければ分からなかった事が多かったです。しかしながら、良くTVゲームなどでは、次の画面に遷移するまでの時間が長い(ロード時間が長い)事がクレームになります。ゲーム屋はこれを対処するのに、1日〜数日と時間をかけていると思うと大変な限りです。今後の課題は似たような経験を積む事で、手早く作る事が目標となりそうです。

以上の点は、実際に作る立場(商売する立場)でないと気がつかない物です。いや、物ぐさな性格でして、細かなズレとか気にしないので良く上司から注意されるんですよ(汗)。その一方で利用者の立場としては、サイトの見てくれを気にしないときは本当に気にしません。自分風俗が好きで風俗のサイトを見ますが、多少古くさかったり、デザインがズレててもあんまり気にしませんもの(笑)。

一方今回設計した画像や映像重視のページは、長い目で見て飽きられてしまいやすいのではないか?という不安もあります。これを解消するのに定期的に写真を更新したり、見せる順番に工夫を入れたりは必要な気がします。さらに飽きられてしまうのを避ける為に、写真を切り替える際の演出などにこだわるようです。ちなみにデーターベースや画像数が少ない場合ならば、以下のプラグインと言うものを使い、画像の表示や、スライドの画像を切り替える演出を簡単に実現できる場合もあります。

Lightbox2

URL:http://lokeshdhakar.com/projects/lightbox2/



Skitter

URL:http://www.skitter-slider.net/
カスタマイズ事例:http://today-only.net/customizing-skitter/



このブログについて

さて諸々の技術が進化し、見てくれにこだわったサイトも増えているようです。そんな中このブログはどうかと言いますと、みてくれや操作性どころか、誰に見てもらいたいのか、どういう人を集めて収益を得たいのかを考えずに突っ走っております(笑)。しかしながら従来風俗体験一本でやっていたので、更新回数を稼げないと言う問題に直面していました。これを解消するために食べた物をブログに載せてみる事を始めました。

さらには本ブログ初と言えるmercedesを試乗した経験(こちら)を書く等、車が好きな人向けの記事を書いてみました。みんカラなど車系のブログに載せる程ネタ数を稼げないので、ここのブログに書いてみました。このブログの方でも数ヶ月位経ってからの反応があれば嬉しいですし、ひいては、mercedesやdimler AGの良さが世間に知れ渡ってくれれば嬉しい限りです。

Mercedes-Benz C63 AMG こんな凄いパワーがCクラスに備わると... (国際試乗会)




話変わって同じ自動車の感想でも、自分程度では300km/hはおろか200km/hを出せるだけの腕前が無いのも悩みどころです。このレビューの「リミッターがあればPorsheについてけたのに!」等と言えるのは何時の日やら。ともかく車等を買えるようにお金を稼いで行きたいと思う今日この頃です。

*1:Select,Insert,Update,Deleteなどデーターベース上のデータを検索、登録、更新、削除する操作の総称