<!–[if lt IE 7]><br /> <div style=’border: 1px solid #F7941D; background: #FEEFDA; text-align: center; clear: both; height: 75px; position: relative;’> <div style=’position: absolute; right: 3px; top: 3px; font-family: courier new; font-weight: bold;’><a href=”#” mce_href=”#” onclick=’javascript:this.parentNode.parentNode.style.display=”none”; return false;’><img src=”http://www.ie6nomore.com/files/theme/ie6nomore-cornerx.jpg” mce_src=”http://www.ie6nomore.com/files/theme/ie6nomore-cornerx.jpg” style=”border: none;” mce_style=”border: none;” alt=’Close this notice’/></a></div> <div style=’width: 640px; margin: 0 auto; text-align: left; padding: 0; overflow: hidden; color: black;’> <div style=’width: 75px; float: left;’><img src=”http://www.ie6nomore.com/files/theme/ie6nomore-warning.jpg” mce_src=”http://www.ie6nomore.com/files/theme/ie6nomore-warning.jpg” alt=’Warning!’/></div> <div style=’width: 275px; float: left; font-family: Arial, sans-serif;’> <div style=”font-size: 14px; font-weight: bold; margin-top: 12px;” mce_style=”font-size: 14px; font-weight: bold; margin-top: 12px;”>You are using an outdated browser</div> <div style=”font-size: 12px; margin-top: 6px; line-height: 12px;” mce_style=”font-size: 12px; margin-top: 6px; line-height: 12px;”>あなたは旧式ブラウザをご利用中です</div> <div style=”font-size: 12px; margin-top: 6px; line-height: 12px;” mce_style=”font-size: 12px; margin-top: 6px; line-height: 12px;”>このウェブサイトを快適に閲覧するにはブラウザをアップグレードしてください。</div> </div> <div style=’width: 75px; float: left;’><a href=”http://www.firefox.com” mce_href=”http://www.firefox.com” target=’_blank’><img src=”http://www.ie6nomore.com/files/theme/ie6nomore-firefox.jpg” mce_src=”http://www.ie6nomore.com/files/theme/ie6nomore-firefox.jpg” style=”border: none;” mce_style=”border: none;” alt=’Get Firefox 3.5′/></a></div> <div style=’width: 75px; float: left;’><a href=”http://www.browserforthebetter.com/download.html” mce_href=”http://www.browserforthebetter.com/download.html” target=’_blank’><img src=”http://www.ie6nomore.com/files/theme/ie6nomore-ie8.jpg” mce_src=”http://www.ie6nomore.com/files/theme/ie6nomore-ie8.jpg” style=”border: none;” mce_style=”border: none;” alt=’Get Internet Explorer 8′/></a></div> <div style=’width: 73px; float: left;’><a href=”http://www.apple.com/safari/download/” mce_href=”http://www.apple.com/safari/download/” target=’_blank’><img src=”http://www.ie6nomore.com/files/theme/ie6nomore-safari.jpg” mce_src=”http://www.ie6nomore.com/files/theme/ie6nomore-safari.jpg” style=”border: none;” mce_style=”border: none;” alt=’Get Safari 4′/></a></div> <div style=”float: left;” mce_style=”float: left;”><a href=”http://www.google.com/chrome” mce_href=”http://www.google.com/chrome” target=’_blank’><img src=”http://www.ie6nomore.com/files/theme/ie6nomore-chrome.jpg” mce_src=”http://www.ie6nomore.com/files/theme/ie6nomore-chrome.jpg” style=”border: none;” mce_style=”border: none;” alt=’Get Google Chrome’/></a></div> </div> </div> ![endif]–>

使い方は簡単！コードをコピーして</head> </head>に貼りつけるだけ！！
みんなでこれを貼りつけてIE6を駆逐しようぜ！！

思いつきと勢いだけで作ったWEBアプリ「Mobile Browser Emulator」をリリースしました。

「Emulator」とか言っておきながら、実はiframeの中にURLを呼んでくるだけのアプリですが、携帯サイトのデザインイメージを確認する位には利用出来るのではないかと思い、勢いだけでリリースしてしまいます。
使い方は簡単。「Enter URL」に確認したいサイトのURLを入力して「Check this!!」ボタンを押すだけで、3パターンのディスプレイの表示イメージが確認できます。ディスプレイサイズは少し前の携帯電話に多い「240×320」と最近の縦長ディスプレイ「240×480」、何故かiPhone用「320×480」の3パターンを用意しました。

そもそもなぜこんなしょうもないものを作ろうと思ったのかといいますと、最近いくつか携帯サイトを構築させていただく機会がありまして、当然デザインを確認したり、クライアントに確認してもらったりする必要が出てくるわけなんですが、僕が携帯をiPhoneにしてしまった関係もあり、なかなか実機での確認というのができにくくなってしまいました。

そこで登場するのが各携帯会社から出ているエミュレータなんですが、当然のごとくMac版なんかあるわけもなく、結局MacをWinを行ったり来たり・・・ただデザインのバランスを見たり見てもらったりするためだけにいちいちそんな七面倒臭いことができるわけがありません。
しかしテキストだけの簡易的なサイトならいざ知らず、やはり少しデザインに凝ってみたりサイトの中で重要なポイントがある場合は出来るだけ実機に近い環境でバランスやイメージを確認したい。
今まではPC用サイトと同じくカンプを作成してPC用のブラウザで表示させて幅を狭めてみたり、Operaのスモールスクリーンなんかで確認してみたりしていたんですが、それもなんか面倒くさいしいまいち雰囲気がつかめない。なんとかいつも使っているブラウザでサクッと確認できんものかと。それで何日か悶々としていたわけなんですが、ふと「あーiframeの中に呼べたらモニタサイズも何パターンか用意できるし、ネット環境があればサクッと確認出来るなー」などと考えついたわけです。

当然今まで同じようなことを考えた人もいたんでしょうが、面倒くさかったorアホらしすぎて作らなかったというところだと思うのですが、ネットを一通り確認してみたところなさそうだったのでココはひとつ作ってみるかということで作ってしまいました。構想2時間、作業時間2時間の超便利ウェブアプリです。

全力で適当に作ったので色々と突っ込みどころ満載だとは思いますが、そこは華麗にスルーしてもらって自分でレイアウトを作りこんだり、クライアントに携帯ディスプレイで見るとこんな感じですよーと説明しながら確認してもらうくらいには使えるのではないかと思います。
まだベータのベータということで、全然UIも適当ですし、ディスプレイサイズもこれでイイのかという問題もありますが、そこは一つ生当たたいめで見守ってくださいませ。

本当はUser Agent Switcherあたりでユーザーエージェントをいじりながらゴニョゴニョしてもいいんですが、最近YahooやGoogleをユーザーエージェント触って見に行くとエラーがでるので非推奨ということでお願いします。

なお、このアプリを使って発生したいかなる事態にも当方は責任は負いかねますので使用はあくまでも自己責任の下で行ってください。

OpenOffice Calcで編集したカラーミーショップCSV一括更新用CSVがアップロードエラーになる件。
アップロードしようとすると「商品が300件以上云々〜」となりエラー。
Apple Numbersにて編集したCSVファイルもWindowsエンコーディングで書き出すと文字化け。Macエンコーディングで書き出すとアップロードエラー。
UTF-8で書き出したファイルでアップロード成功。
ちなみにダウンロードしてきた商品データをFF3.6でアップロードするとエラー。エラーログさえ吐き出さない。
Safari4.0.3では成功。
ブラウザの件はよく検証していないので要検証。

投稿できるツールがあるんだなー。
誰が作るんだ。エライもんだ。
どうでもいいポストで申し訳ない。

愛媛県の広告クリエーターズクラブ「アドクリエーターズ愛媛（ACE）」ホームページを制作（リニューアル）させていただきました。

今回はACEの代表である株式会社シンプルの正岡さんがデザイン、僕はコーディングおよび構築を担当させていただきました。

クライアント側で手軽に更新・管理ができるようにということで、全体をWordpressで構築しました。プラグインを入れてバリバリカスタマイズした訳ではありませんが、トップページと各コンテンツのテンプレートを別のものにしたり、カスタムフィールドを使って新着情報を更新できたりと、小技を効かせています。

今回のリニューアルのメインはACE広告賞2009ということで、告知ページ・広告賞へのエントリーフォームも作成しました。

エントリーフォームは別ウィンドウで開かず、javascriptライブラリjquery.prettyPhotoを利用してインラインフレームで開いています。jqueryプラグインですが、全部で20KB程度とそれほど重くなく、動作も軽快なので、こういう形でフォームを組み込む場合は重宝するのではないでしょうか。なによりアニメーションが滑らかで気持ちいいのが良いですね。

今回の広告賞、仕事部門は会員限定ですが広告クリエートに携わる人なら誰でも応募できますので、この機会に会員になって応募してみるのも良いかもしれません。僕も会員ですので、何点か応募させてもらう予定です。

みなさんお忙しく、なかなか時間のない中ミーティングなど重ねていただいて構築することが出来ました。代表の正岡さんはじめ事務局の皆様のご協力に感謝します。
今後ともよろしくお願いします。