<?xml version="1.0" encoding="UTF-8"?>
<feed xmlns="http://www.w3.org/2005/Atom">
   <title>BlurBlue-Note</title>
   <link rel="alternate" type="text/html" href="http://www.blurblue.com/" />
   <link rel="self" type="application/atom+xml" href="http://www.blurblue.com/atom.xml" />
   <id>tag:www.blurblue.com,2008://1</id>
   <updated>2008-07-04T09:03:05Z</updated>
   <subtitle>主にXHTML、CSSなどのWeb制作tipsや、Web業界的な事をメモしていきます。</subtitle>
   <generator uri="http://www.sixapart.com/movabletype/">Movable Type 3.35</generator>

<entry>
   <title>posterousがスゴイ件</title>
   <link rel="alternate" type="text/html" href="http://www.blurblue.com/2008/07/posterous.html" />
   <id>tag:www.blurblue.com,2008://1.119</id>
   
   <published>2008-07-04T08:47:00Z</published>
   <updated>2008-07-04T09:03:05Z</updated>
   
   <summary>tumblrを超えたと街で噂のposterousを試してみました。 poster...</summary>
   <author>
      <name></name>
      
   </author>
         <category term="web" scheme="http://www.sixapart.com/ns/types#category" />
   
   <category term="49" label="webサービス" scheme="http://www.sixapart.com/ns/types#tag" />
   
   <content type="html" xml:lang="ja" xml:base="http://www.blurblue.com/">
      <![CDATA[<p>tumblrを超えたと街で噂のposterousを試してみました。</p>
<p class="link"><a href="http://posterous.com/">posterous</a></p>
<h2>posterousに登録してみる</h2>
<p>簡単に言うと、メールを送るだけでポストされるブログサイト。</p>
<p>何がすごいって、その簡単さ。</p>
<p>メールを送るだけでもう登録できてる。しかもそのメールの内容が最初の投稿になる。<br />
つまり、<strong>登録＝使い方</strong>のマスターになっているということ。</p>
<p>トップページを見ると、その簡単さがよくわかる。</p>
<p class="img"><img class="zoom" src="/images/2008/posterous1_s.jpg" width="375" height="250" alt="posterous" /><br />
cleate an accountが打ち消されていているというユニークさ。</p>
<p class="link"><a href="http://jp.techcrunch.com/archives/20080628posterous-beats-tumblr-in-simplicity/">Tech Crunchでも紹介されている。</a></p>
<h2>使ってみる</h2>
<p>とりあえず最初のメールを受け取ったら、パスワードと、自分のページのURLを設定。<br />
プロフィールも暇があれば設定する。</p>
<p>あとはもうどんどんメールでポストするだけ。簡単。<br />
もちろん、posterous上で直接ポストできる。WYSIWYGが充実しているので色々便利に楽しく投稿できる。</p>
<p class="link"><a href="http://blurblue.posterous.com/blog-post-302">blurblue’s posterous - てすとてすと</a></p>
<p>メールアドレスを追加することもできる。<br />
メールアドレスはなんでもOKで、もちろんモバイルからも投稿できる。<br />
試しにauのケータイから写真を貼付して送信してみた。</p>
<p class="link"><a href="http://blurblue.posterous.com/blog-post-304">blurblue’s posterous - 携帯からテスト</a></p>
<p>しかも登録してあるメールアドレスならどれを入力してもログインできるようになる。</p>
<p>とにかく、思いついたらメールでポスト。<br />twitterより投稿しやすく、tumblrを超えた使い勝手。<br />
これは色々な使い道が思い浮かぶ素敵なWebサービスですね。</p>
<dl class="quoteLinks">
			 <dt>参照リンク</dt>
			 <dd>
			 <ul>
			<li><a href="http://posterous.com/">posterous</a></li>
			<li><a href="http://jp.techcrunch.com/archives/20080628posterous-beats-tumblr-in-simplicity/">Tech Crunch - Posterous：Tumblrに勝るカンタンさ</a></li>
			</ul>
			</dd>
		</dl>
]]>
      
   </content>
</entry>
<entry>
   <title>企業サイトでやってはいけない事柄TOP20</title>
   <link rel="alternate" type="text/html" href="http://www.blurblue.com/2008/07/ranking_website_embarrassed.html" />
   <id>tag:www.blurblue.com,2008://1.120</id>
   
   <published>2008-07-03T23:57:12Z</published>
   <updated>2008-07-04T00:46:09Z</updated>
   
   <summary>gooランキングで、企業サイトで困ってしまうことのランキングが発表されていた 企...</summary>
   <author>
      <name></name>
      
   </author>
         <category term="web" scheme="http://www.sixapart.com/ns/types#category" />
   
   <category term="66" label="web制作" scheme="http://www.sixapart.com/ns/types#tag" />
   <category term="99" label="ユーザビリティ" scheme="http://www.sixapart.com/ns/types#tag" />
   
   <content type="html" xml:lang="ja" xml:base="http://www.blurblue.com/">
      <![CDATA[<p>gooランキングで、企業サイトで困ってしまうことのランキングが発表されていた</p>
<p class="link"><a href="http://ranking.goo.ne.jp/ranking/092/corporate_website/">企業のウェブサイトで困ってしまうことランキング  - goo ランキング</a></p>
<p>どれもこれも「あるある」というようなものばかり。<br />
PDFがもっさーとローディングされると本当にイラ！っとしますよね。<br />
これらをやっちゃってるWeb制作者にはヒントにしてもらいたいものです。</p>
<ol>
<li>情報が数ヶ月間更新されていない</li>
<li>画像が多くて、重い</li>
<li>「準備中」のコンテンツだらけ</li>
<li>リンク先がPDFファイル</li>
<li>トップページからオールFlash</li>
<li>ポップアップがどんどん開く</li>
<li>情報が多すぎで探している情報にたどり着けない</li>	
<li>商品一覧などの一覧ページがない</li>
<li>突然音が鳴る</li>
<li>問合せ先が明記していない</li>
<li>サイトを見ても何を伝えたいかがわからない</li>
<li>商品の詳細情報がない</li>
<li>ブラウザのサイズを勝手に変えられる</li>
<li>サイト内検索が出来ない</li>
<li>会社案内の地図がわかりにくい</li>
<li>目に優しくない背景色（黄色や赤色など）</li>
<li>全体的に文字が小さい</li>
<li>公式ブログがスタッフの内輪ネタばかり</li>
<li>右クリック禁止</li>
<li>サイトメニューが英語で書いてある</li>
</ol>
<p>メニューを英語で表記してしまったり、オールFlashにしてしまったりは「かっこいい」デザインを目指すばかりにやってしまいがち。<br />
他のは・・・どれも普通ではありえないものばかりですが（笑）<br />
でもユーザーが望むものはなんなのか考えたらおのずと答えは出るはずですね。<br />
Web制作者ばかりでなく、Webサイトを持つ企業の担当者にも是非考えて欲しい内容ばかりです。</p>]]>
      
   </content>
</entry>
<entry>
   <title>Firefox3がギネス達成</title>
   <link rel="alternate" type="text/html" href="http://www.blurblue.com/2008/07/firefox3_1.html" />
   <id>tag:www.blurblue.com,2008://1.118</id>
   
   <published>2008-07-03T08:26:44Z</published>
   <updated>2008-07-03T09:05:25Z</updated>
   
   <summary>先日のFirefox3リリースとともにギネス記録に挑戦したFirefoxですが、...</summary>
   <author>
      <name></name>
      
   </author>
         <category term="web" scheme="http://www.sixapart.com/ns/types#category" />
   
   <category term="19" label="firefox" scheme="http://www.sixapart.com/ns/types#tag" />
   
   <content type="html" xml:lang="ja" xml:base="http://www.blurblue.com/">
      <![CDATA[<p>先日のFirefox3リリースとともにギネス記録に挑戦したFirefoxですが、見事1日でのダウンロード数でギネスを達成したとお知らせがきました。</p>
<blockquote><p>私たちは 24 時間最多ダウンロードソフトとしてギネス世界記録を達成しました。あなたの協力のおかげで、ダウンロード数は 8,002,530,000,000 回を突破しました。</p></blockquote>
<p>ギネス記録に参加した人には同じメールが届いていると思いますが、PDF形式で証明書が発行されます。</p>
<p class="img"><img src="/images/2008/firefox3dl2.jpg" alt="firefox3ギネス参加証明書" /></p>
<p>Firefox3の総ダウンロード数は2800万件あまりのようです。</p>
<p class="img"><img src="/images/2008/firefox3dl1.jpg" alt="ダウンロードマップ" /></p>
<p>ところで、メールに書いてあった 8兆回というのは、Firefoxになってから3までの総ダウンロード数のことなんでしょうかね？<br />
それにしてもものすごい数です。</p>]]>
      
   </content>
</entry>
<entry>
   <title>紙に書いたものが自動的にデジタル化されるペン</title>
   <link rel="alternate" type="text/html" href="http://www.blurblue.com/2008/06/mv_pen.html" />
   <id>tag:www.blurblue.com,2008://1.117</id>
   
   <published>2008-06-23T17:38:03Z</published>
   <updated>2008-06-23T17:55:45Z</updated>
   
   <summary>これはすごい。 紙に書いたメモがそのままデジタル化されて、しかもデジタルテキスト...</summary>
   <author>
      <name></name>
      
   </author>
         <category term="ガジェット" scheme="http://www.sixapart.com/ns/types#category" />
   
   <category term="65" label="便利" scheme="http://www.sixapart.com/ns/types#tag" />
   
   <content type="html" xml:lang="ja" xml:base="http://www.blurblue.com/">
      <![CDATA[<p>これはすごい。</p>
<p>紙に書いたメモがそのままデジタル化されて、しかもデジタルテキスト化までしてくれるペンが発売されている。</p>
<p class="link"><a href="http://hb.afl.rakuten.co.jp/hgc/082a07a7.53db2266.082a07a8.a6bee43a/?pc=http%3a%2f%2fitem.rakuten.co.jp%2fsdma%2fbr9619%2f&m=http%3a%2f%2fm.rakuten.co.jp%2fsdma%2fi%2f10008433%2f">MVPenテクノロジーズ MVPen</a></p>
<p class="img"><a href="http://hb.afl.rakuten.co.jp/hgc/082a07a7.53db2266.082a07a8.a6bee43a/?pc=http%3a%2f%2fitem.rakuten.co.jp%2fsdma%2fbr9619%2f&m=http%3a%2f%2fm.rakuten.co.jp%2fsdma%2fi%2f10008433%2f"><img src="http://hbb.afl.rakuten.co.jp/hgb/?pc=http%3a%2f%2fthumbnail.image.rakuten.co.jp%2f%400_mall%2fsdma%2fcabinet%2f080508-1%2fbr9619.jpg%3f_ex%3d128x128&m=http%3a%2f%2fthumbnail.image.rakuten.co.jp%2f%400_mall%2fsdma%2fcabinet%2f080508-1%2fbr9619.jpg%3f_ex%3d80x80"></a></p>
<p></p>
<p>これがあれば、会議中にメモした内容も、電車の中でちょっとメモしたことも、スケジュール帳に書き込んだ内容でさえ、全てデジタル化してPCで管理できるのだ。</p>
<p>詳細は日経ビジネスオンラインの記事に書いてあるのだが、少し引用させてもらうと</p>
<blockquote><p>　ペンから手書きの軌跡データを赤外線で発信。この軌跡データをユニットのセンサーが受信して、内蔵メモリーに蓄積する。ユニットをUSBケーブルでパソコンに接続すると、手書き内容が画像として読み込まれる。</p></blockquote>
<p>ということらしい。</p>
<p class="link"><a href="http://business.nikkeibp.co.jp/article/nba/20080620/162896/?P=1">紙に書いたメモを簡単にデジタル化できる便利なペン：NBonline(日経ビジネス オンライン)</a></p>
<p>この魔法のようなアイテムだが、価格も13,000円弱とそこそこお手頃。<br />
以前ボイスレコーダー付きのスパイアイテムのようなペンを12,000円程で衝動買いしてしまった私としてはすぐにでも欲しいところだ。</p>]]>
      
   </content>
</entry>
<entry>
   <title>ガソリン価格ランキングBlogパーツ</title>
   <link rel="alternate" type="text/html" href="http://www.blurblue.com/2008/06/gus_price_ranking_blogparts.html" />
   <id>tag:www.blurblue.com,2008://1.116</id>
   
   <published>2008-06-23T16:32:04Z</published>
   <updated>2008-06-23T16:45:29Z</updated>
   
   <summary>最近のガソリン価格高騰で有名になったgogo.gsでおなじみのゴーゴーラボがガソ...</summary>
   <author>
      <name></name>
      
   </author>
         <category term="web" scheme="http://www.sixapart.com/ns/types#category" />
   
   <category term="52" label="blogパーツ" scheme="http://www.sixapart.com/ns/types#tag" />
   
   <content type="html" xml:lang="ja" xml:base="http://www.blurblue.com/">
      <![CDATA[<p>最近のガソリン価格高騰で有名になった<a href="http://gogo.gs/">gogo.gs</a>でおなじみのゴーゴーラボがガソリン価格ランキングのBlogパーツを出しました。</p>
<p class="link"><a href="http://api.gogo.gs/parts/ranking.html">ガソリン価格ランキング ブログパーツ - gogo.gs</a></p>
<p>地域を3つ選んでコードをコピペするだけ。簡単。</p>
<p class="img"><img src="/images/2008/gogogs.jpg" alt="gogo.gs Blogパーツ" /></p>
<p>実装するとこんな感じ。うちは埼玉南部なので、埼玉と東京を選んでみました。</p>
<p><script type="text/javascript" src="http://api.gogo.gs/parts/js/writeBlogPartsObject_rk.js"></script><script type="text/javascript">var areaId_rk = '11_13_';writeBlogPartsObject_rk();</script><br /><a href="http://gogo.gs/" target="_blank"><image src="http://api.gogo.gs/parts/foot_rk.gif" alt="gogo.gs" style="border:none!important;margin:0!important;" /></a></p>
<p>地域を選べるのは、地域Blogなどを運営している方にはうれしいですね。</p>
<p>欲を言えば、VistaのウィジェットやAdobeAIRガジェットや、Googleガジェットなどに対応してもらえるととても便利かなぁと思います。<br />
<a href="http://api.gogo.gs/">API公開されてる</a>んだから自分で作れって？<br />
いやぁ、車持ってないのでガソリン価格にはあまり興味がなくて…（笑）</p>]]>
      
   </content>
</entry>
<entry>
   <title>mixiトップページの改善</title>
   <link rel="alternate" type="text/html" href="http://www.blurblue.com/2008/06/mixi_top_renewal.html" />
   <id>tag:www.blurblue.com,2008://1.115</id>
   
   <published>2008-06-23T07:50:03Z</published>
   <updated>2008-06-23T10:51:09Z</updated>
   
   <summary>昨年10月1日にリニューアルされてから早9ヶ月。 mixiのトップページが7月7...</summary>
   <author>
      <name></name>
      
   </author>
         <category term="web" scheme="http://www.sixapart.com/ns/types#category" />
   
   <category term="82" label="mixi" scheme="http://www.sixapart.com/ns/types#tag" />
   <category term="99" label="ユーザビリティ" scheme="http://www.sixapart.com/ns/types#tag" />
   <category term="56" label="リニューアル" scheme="http://www.sixapart.com/ns/types#tag" />
   
   <content type="html" xml:lang="ja" xml:base="http://www.blurblue.com/">
      <![CDATA[<p>昨年10月1日にリニューアルされてから早9ヶ月。<br />
mixiのトップページが7月7日にリニューアルされるようです。</p>
<p class="link"><a href="http://mixi.jp/renewal_info.pl">新しいmixiトップページ　5つのポイント</a></p>

<p>今回のリニューアルで改善されるポイントは上記リンクページにもあるように5点。</p>
<p class="img frt"><img class="zoom" src="/images/2008/mixi_toprenewal_s.jpg" width="250" height="450" alt="mixi TOPリニューアル" /></p>
<ol>
<li><a href="#mixitop_1">ページ上部のナビゲーションがシンプルに改善</a></li>
<li><a href="#mixitop_2">右サイドバーの天気予報・予定部分が改善。友人の誕生日や明日の予定が表示される</a></li>
<li><a href="#mixitop_3">自分のアイコン下部にショートカットが増加</a></li>
<li><a href="#mixitop_4">検索バーがコンパクトになり、ヘッダーに収納された</a></li>
<li><a href="#mixitop_5">日記、コミュニティ、マイミクシィの更新が見やすく。</a></li>
</ol>
<p>一つずつ見ていきましょう。</p>
<dl>
<dt id="mixitop_1">ページ上部のナビゲーションがシンプルに改善</dt>
<dd><p>現状は大量にメニューが並んでいてわけのわからん状態になっていたので、散々叩かれたところですね。<br />
ナイス改善。</p>
</dd>
<dt id="mixitop_2">右サイドバーの天気予報・予定部分が改善。友人の誕生日や明日の予定が表示される</dt>
<dd><p>今まであまり使われていなかったスケジューラー部分の改善ですね。<br />
カレンダーのページに行かないとスケジュールも友人の誕生日も見えなかったので、便利になります。<br />
友人の誕生日はたまたまその日に当人のページにアクセスしないとわからないですから。<br />
これくらいは「お知らせ」部分に表示しても良いのではないかと思ってました。</p></dd>
<dt id="mixitop_3">自分のアイコン下部にショートカットが増加</dt>
<dd><p>なぜ今までこうなってなかったのだろう…。と思うくらい良い改善点ですね。<br />
プロフィール管理・プロフィール・日記を書く・自分の更新履歴が一カ所にまとめられています。</p>
<p>今までは履歴はページ一番下、プロフィール編集は見つけづらかった。<br />
発信がしやすくなるのは非常に良いですね。</p></dd>
<dt id="mixitop_4">検索バーがコンパクトになり、ヘッダーに収納された</dt>
<dd><p>やたら存在感のあった検索バーがコンパクトに、ヘッダーに収納されてユーザビリティが良くなります。<br />
ページ毎にいちいち検索の使い勝手が変わるのはよろしくないですからね。</p></dd>
<dt id="mixitop_5">日記、コミュニティ、マイミクシィの更新が3ブロックに分かれて見やすく。</dt>
<dd><p>これってほとんど変わってないようですが、若干変わりました。<br />
今までは、マイミク日記更新、コメントした日記、最新コミュトピック、コメントしたコミュトピック、というように１つずつ分かれていたのが、日記・コミュニティ・マイミク情報の3ブロックに分かれて扱いやすくなったようです。<br />
ちょっと便利かな。</p></dd>
</dl>

<p>その他にも、マイミクブロックや参加コミュブロックのリンクも扱いやすくなっていたりと改善が見られるようです。<br />
全体的に今回は良いリニューアルになりそうです。</p>
<p>ところで、重い原因の一つにもなっているJavascriptの大量読み込み等諸々は今回のリニューアルで改善されるかも気になるところです。</p>
<dl class="quoteLinks">
			 <dt>参照リンク</dt>
			 <dd>
			 <ul>
			<li><a href="http://mixi.jp/renewal_info.pl">新しいmixiトップページ　5つのポイント - mixi</a></li>
			<li><a href="http://www.blurblue.com/2007/10/mixi.html">mixiリニューアルに伴う改悪</a></li>
			</ul>
			</dd>
		</dl>]]>
      
   </content>
</entry>
<entry>
   <title>2008年上半期検索キーワードまとめ</title>
   <link rel="alternate" type="text/html" href="http://www.blurblue.com/2008/06/2008_first_harf_of_year_access.html" />
   <id>tag:www.blurblue.com,2008://1.114</id>
   
   <published>2008-06-22T14:23:29Z</published>
   <updated>2008-06-22T15:40:57Z</updated>
   
   <summary>先日、5-6月のブラウザ比率をまとめてみたので、ついでに今年上半期の検索エンジン...</summary>
   <author>
      <name></name>
      
   </author>
         <category term="web" scheme="http://www.sixapart.com/ns/types#category" />
   
   <category term="60" label="SEO" scheme="http://www.sixapart.com/ns/types#tag" />
   <category term="25" label="考える" scheme="http://www.sixapart.com/ns/types#tag" />
   
   <content type="html" xml:lang="ja" xml:base="http://www.blurblue.com/">
      <![CDATA[<p>先日、5-6月のブラウザ比率をまとめてみたので、ついでに今年上半期の検索エンジンからのアクセスキーワードを発表してみる。</p>
<h2>2008年上半期検索エンジンからのアクセスキーワードTOP10</h2>
<ol>
<li>/hidden</li>
<li>hidden</li>
<li>interface.js</li>
<li>jquery スクロール</li>
<li>javascript スムーズスクロール</li>
<li>pagebute</li>
<li>ニコ割 時報</li>
<li>ニコ割</li>
<li>css clearfix</li>
<li>スムーススクロール</li>
</ol>
<p>こんな感じでした。<br />
なんというか・・・。</p>
<p>1、2、7、8位がhiddenとかニコ割って。完全にニコニコ動画の件ですよね。</p>
<p class="link"><a href="http://www.blurblue.com/2007/10/hidden.html">「/hidden」で検索されすぎ</a> - 2007年10月25日</p>
<p class="link"><a href="http://www.blurblue.com/2007/10/post_11.html">「ニコ割時報」のちょっとした裏技</a> - 2007年10月14日</p>
<p>で、3、4、5、10位がjQueryのスムーススクロールの件。</p>
<p class="link"><a href="http://www.blurblue.com/2007/10/class.html">class指定もいらない超お手軽スムーズスクロール</a> - 2007年10月6日</p>
<p>6位がMTのPageButeプラグインのコードを改良した件。</p>
<p class="link"><a href="http://www.blurblue.com/2007/12/pagebute.html">PageButeプラグインのページャーをちゃんとマークアップする</a> - 2007年10月30日</p>
<p>9位がCSSのclearfixの件。</p>
<p class="link"><a href="http://www.blurblue.com/2007/02/safariclearfix.html">[Safari]Clearfixで下スペースが出てしまう問題</a> - 2007年2月26日</p>
<h2>総括</h2>
<p>偏りすぎです…。しかも全て2007年に書いた記事（笑）<br /><br />
ちなみに10位以降もニコニコやスムーススクロールが続きます（笑）<br />
たしかに、これらのキーワードはGoogleやYahooからひっかかりやすいです。<br />
スムーススクロールなんて大した記事ではないのにずっと上位なので申し訳ない気が。</p>
<p>それにしても「/hideen」のせいでニコニコ動画ユーザーがこれほどひっかかってしまうとは想定外でした。<br />
本来のターゲットとは異なる方々が来てしまっているので、やはり記事はなるべく関連性をもたせて書かないといけないと再認識。</p>
<p>結局のところ、何を書こうが検索にかからなければ誰の目にも触れない、ということですね。<br />
うちのような無名弱小サイトははてなブックマークなどから注目されるわけでもなく、そもそもそんなに人に注目されるような記事を書いているわけでもないので、検索エンジン頼りなわけです。<br />
SEOをも意識した記事内容を考えて書かないといけないわけですね。</p>
<p>とは言え、ですよ。<br />
そもそもメモ程度の意識で書いているので、アクセスは気になるもののやっぱり「書く」ことが大事だったりするので、今後も無理にアクセスを稼ぐようなエントリーはしません（笑）<br />
結果、どなたかのエントリーで紹介して頂けたり、誰かのお役に立ってれば御の字です。</p>]]>
      
   </content>
</entry>
<entry>
   <title>Google AdSenseに動画が出た。</title>
   <link rel="alternate" type="text/html" href="http://www.blurblue.com/2008/06/google_adsense.html" />
   <id>tag:www.blurblue.com,2008://1.113</id>
   
   <published>2008-06-21T09:00:18Z</published>
   <updated>2008-06-21T09:22:06Z</updated>
   
   <summary>Google AdSenseに動画ユニットが追加されていたのでテストしてみる。 ...</summary>
   <author>
      <name></name>
      
   </author>
         <category term="web" scheme="http://www.sixapart.com/ns/types#category" />
   
   <category term="58" label="AdSense" scheme="http://www.sixapart.com/ns/types#tag" />
   <category term="17" label="google" scheme="http://www.sixapart.com/ns/types#tag" />
   
   <content type="html" xml:lang="ja" xml:base="http://www.blurblue.com/">
      <![CDATA[<p>Google AdSenseに動画ユニットが追加されていたのでテストしてみる。</p>
<p><div id='vu_ytplayer_vjVQa1PpcFOk8XaPrZvk5f4kSL6THX5aMxm_Go0Oa0Y='><a href='http://jp.youtube.com/browse'>Watch the latest videos on YouTube.com</a></div><script type='text/javascript' src='http://jp.youtube.com/cp/vjVQa1PpcFOk8XaPrZvk5f4kSL6THX5aMxm_Go0Oa0Y='></script></p>
<p>キーワードに「猫」と入れてコードを作成してみました。<br />
マウスオンすると左右にボタンが現れて、押すたびに関連のある動画が出てきます。<br />
更新してもランダムで出てくるみたい。<br />
しかも、１つ動画が終わっても次の動画が連続して再生されるという無限猫地獄。<br />
これはたまらん（*´ω｀*）</p>
<p>どうやら、広告枠は動画の中と外枠内に表示される模様。</p>
中の動画はピンポイントで選べないのかなぁ？できればピンポイントでエントリーに使えて便利っぽいのに。<br />
でも、キーワードでかなり限定はできるので、気に入ったキーワードの動画まとめっぽくなるので、使い方によってはAdSense抜きで考えてもナイスかも（笑）</p>
]]>
      
   </content>
</entry>
<entry>
   <title>当サイトの閲覧ブラウザ比率</title>
   <link rel="alternate" type="text/html" href="http://www.blurblue.com/2008/06/post_34.html" />
   <id>tag:www.blurblue.com,2008://1.112</id>
   
   <published>2008-06-19T10:40:22Z</published>
   <updated>2008-06-20T06:58:47Z</updated>
   
   <summary>Opera9.5、Firefox3とブラウザのリリースが続いたので、久々に閲覧ブ...</summary>
   <author>
      <name></name>
      
   </author>
         <category term="web" scheme="http://www.sixapart.com/ns/types#category" />
   
   <category term="19" label="firefox" scheme="http://www.sixapart.com/ns/types#tag" />
   <category term="16" label="IE" scheme="http://www.sixapart.com/ns/types#tag" />
   <category term="13" label="opera" scheme="http://www.sixapart.com/ns/types#tag" />
   <category term="131" label="safari" scheme="http://www.sixapart.com/ns/types#tag" />
   
   <content type="html" xml:lang="ja" xml:base="http://www.blurblue.com/">
      <![CDATA[<p>Opera9.5、Firefox3とブラウザのリリースが続いたので、久々に閲覧ブラウザ比率が気になって、GoogleAnalyticsで見てみました。</p>
<p>あ、そうそう。本題に行く前に、OperaユーザーにもFirefoxユーザーにもお勧めなエントリーがあったのでリンク貼っておきます。</p>
<p class="link"><a href="http://d.hatena.ne.jp/TERRAZI/20080618/p2">「それ、Firefox3でも出来るよ？」とOpera信者に言い放つためのアドオン26個 - TERRAZINE</a></p>
<p>Firefox3のアドオンの記事なのに、ちゃんとOperaがフィーチャーされてるという参考になる上面白いエントリーです。</p>
<h2>さて、本題。5月～6月のブラウザ比率</h2>
<p class="img"><img class="zoom" src="/images/2008/browser_s.jpg" width="300" height="216" alt="全体ブラウザ比率" /></p>
<ol>
<li>Internet Explorer・・・（44.56%）</li>
<li>Firefox・・・（41.91%）</li>
<li>Safari・・・（9.31%）</li>
<li>Opera・・・（3.51%）</li>
</ol>
<p>以下略</p>
<p>一応本サイトはWeb制作関連のエントリーが多いはずなので、Webリテラシーがさっぱり無い人っていうのは少ないはずなんですが、やっぱりIE比率が圧倒的。<br />
おそらく、一般BlogよりはIE比率が低いと思うんですが…。<br />
とは言え、Firefoxの比率はかなり高いですね。ちょっと安心。<br />
しかしOpera低いな～～～！Safariより圧倒的に低い（笑）<br />
それにしても意外や意外。ケータイから見て下さっている方がいますね！<br />
ケータイからじゃ見づらかろうと思いますが、毎度ありがとうございます。</p>
<p>さて、各ブラウザのバージョン比率も見てみますか。</p>
<h3>Internet Explorer</h3>
<p class="img"><img class="zoom" src="/images/2008/browserie_s.jpg" width="300" height="144" alt="Internet Explorerバージョン比率" /></p>
<p>未だIE6が半数以上を占めてはいますが、かなりIE7が浸透してきていることがわかりますね。<br />
そんなことより驚きなのが、5.xで見てる人が何名かいますね（笑）<br />
まさかCSSの検証でもされてるんだろうか…。</p>
<h3>Firefox</h3>
<p class="img"><img class="zoom" src="/images/2008/browserff_s.jpg" width="300" height="295" alt="Firefoxバージョン比率" /></p>
<p>これはもう、2.0最新版が圧倒的ですね。<br />
ただ、2位が3.0なのはちょっと意外でした。正式版リリース前にβ版から使っている人が結構多かったということかな。<br />
それにしても、バージョンがバラつきすぎな印象。バージョンアップしない人が多いんですかね？</p>
<h3>Safari</h3>
<p class="img"><img class="zoom" src="/images/2008/browsersf_s.jpg" width="300" height="217" alt="Safariバージョン比率" /></p>
<p>やっぱりというか、Safari3が多いですねー。Windows版が出たのは大きかった。</p>
<h3>Opera</h3>
<p class="img"><img class="zoom" src="/images/2008/browserop_s.jpg" width="300" height="144" alt="Operaバージョン比率" /></p>
<p>9.27と9.5が競ってる感じですね。<br />
意外や意外、出たばかりなのにかなり9.5が多いことにびっくりです。<br />
やはりOperaユーザーはコアユーザーが多いっていうことかな？（笑）</p>
<p>たまにこうやって検証するのも案外面白いモノです。<br />
半年に一回くらいやってもいいかもしれない。</p>]]>
      
   </content>
</entry>
<entry>
   <title>Webサイトを紙のように編集しちゃおうCMS</title>
   <link rel="alternate" type="text/html" href="http://www.blurblue.com/2008/06/webcms.html" />
   <id>tag:www.blurblue.com,2008://1.111</id>
   
   <published>2008-06-19T08:21:54Z</published>
   <updated>2008-06-19T08:55:16Z</updated>
   
   <summary>ワークスタイル・メモさんで紹介されていた、Lite.inという新しいコンセプトの...</summary>
   <author>
      <name></name>
      
   </author>
         <category term="web" scheme="http://www.sixapart.com/ns/types#category" />
   
   <category term="66" label="web制作" scheme="http://www.sixapart.com/ns/types#tag" />
   <category term="141" label="仕事" scheme="http://www.sixapart.com/ns/types#tag" />
   
   <content type="html" xml:lang="ja" xml:base="http://www.blurblue.com/">
      <![CDATA[<p><a href="http://www.ariel-networks.com/blogs/tokuriki/">ワークスタイル・メモ</a>さんで紹介されていた、Lite.inという新しいコンセプトのCMSをプレゼンする動画。<br />
面白いなぁと思ったのでご紹介。</p>
<p class="link"><a href="http://www.ariel-networks.com/blogs/tokuriki/workstyle_voice/litein_webcms.html">Lite.in （Webサイトの使い勝手を「紙」レベルに変える新感覚CMS） : ワークスタイル・メモ</a></p>
<p>ちょっと音声のほうが聞き取りづらいので音量大きめでどうぞ。</p>
<p><object width="425" height="344"><param name="movie" value="http://www.youtube.com/v/LN-zgYWtgbw&hl=ja"></param><param name="wmode" value="transparent"></param><embed src="http://www.youtube.com/v/LN-zgYWtgbw&hl=ja" type="application/x-shockwave-flash" wmode="transparent" width="425" height="344"></embed></object></p>
<p>プレゼンしているのは、株式会社ユビキタスエンターテイメントの清水さんという方。<br />
</p>
<p>紙面のようにHTML＝CMSと捉えてサクサクと編集ができちゃう。もっと紙のように！<br />
っていうコンセプトの新しいCMSのようです。<br />
もう特許も取っているという。</p>
<p>これってどういう使われ方するんだろう？<br />
例えばカレンダーという例が出ていたけれど、<br />
GoogleカレンダーのようなものをMTのように誰もが簡単に作れるよ！ということでいいんですか？（理解遅い？（笑））<br />
これは非常に触ってみたいです。<br />
こんな簡単に管理・編集できてしまうのなら、本当に運用コストは激減するだろうし、むしろスタッフが楽しめてできちゃうんじゃないだろうか。<br />
これは素晴らしいですね。<br />
実用化が待ち遠しいです。</p>]]>
      
   </content>
</entry>
<entry>
   <title>IE6で1pxずれて正確にセンタリングできない件</title>
   <link rel="alternate" type="text/html" href="http://www.blurblue.com/2008/06/ie61px.html" />
   <id>tag:www.blurblue.com,2008://1.109</id>
   
   <published>2008-06-18T16:58:56Z</published>
   <updated>2008-06-18T19:43:06Z</updated>
   
   <summary>IE6に、margin: auto;でセンタリングしても1pxだけ横にずれるとい...</summary>
   <author>
      <name></name>
      
   </author>
         <category term="CSS" scheme="http://www.sixapart.com/ns/types#category" />
   
   <category term="30" label="css" scheme="http://www.sixapart.com/ns/types#tag" />
   <category term="16" label="IE" scheme="http://www.sixapart.com/ns/types#tag" />
   <category term="75" label="IE6" scheme="http://www.sixapart.com/ns/types#tag" />
   <category term="33" label="IE7" scheme="http://www.sixapart.com/ns/types#tag" />
   <category term="20" label="tips" scheme="http://www.sixapart.com/ns/types#tag" />
   <category term="34" label="バグ" scheme="http://www.sixapart.com/ns/types#tag" />
   
   <content type="html" xml:lang="ja" xml:base="http://www.blurblue.com/">
      <![CDATA[<p>IE6に、<code>margin: auto;</code>でセンタリングしても<strong>1pxだけ</strong>横にずれるというそこそこメジャーなCSSのバグがある。</p>
<p class="img"><img class="zoom" src="/images/2008/iecss1_s.jpg" width="250" height="160" alt="IE6の1pxずれるセンタリングのバグ" /><br />
こうなる。IE6のコンテンツ部分が左に1pxずれている。</p>
たかが1px。されど1px。この1pxのせいでデザインがパーになる事もあるし、クライアントと言い合いになることもナキニシモアラズ。</p>
<p>久々にはまっちゃったのでぐぐらずに解決してみた。（ぐぐれよ）</p>
<p>要は、IE6だけ1pxずらしてちゃんとした位置にしてあげればいいので、無理矢理ずらしちゃう。<br />
具体的な回避方法は2つ。</p>
<h2>1つ目。potisionでコンテンツ部分をずらす。</h2>
<dl class="htmlcode">
	<dt>XHTML</dt>
	<dd><ol>
<li><code>&lt;div id=&quot;wrapper&quot;&gt;</code></li>
<li><code>&lt;p&gt;コンテンツ&lt;/p&gt;</code></li>
<li><code>&lt;/div&gt;</code></li>
	</ol></dd>
</dl>
<dl class="csscode">
	<dt>CSS</dt>
	<dd><ol>
<li><code>body {</code></li>
<li><code>width: 300px;</code></li>
<li><code>background: url(bg.jpg) center top repeat-y;</code></li>
<li><code>margin: 0 auto;</code></li>
<li><code>text-align: center;</code></li>
<li><code>}</code></li>
<li><code>div#wrapper {</code></li>
<li><code>width: 298px;</code></li>
<li><code>margin: 0 1px;</code></li>
<li><code>}</code></li>
<li><code>div#wrapper p {</code></li>
<li><code>height: 250px;</code></li>
<li><code>background: #C9DFBB;</code></li>
<li><code>}</code></li>
<li><code><em class="notesLv1">*+html div#wrapper p {</em></code></li>
<li><code><em class="notesLv1">position: relative;</em></code></li>
<li><code><em class="notesLv1">left: 1px;</em></code></li>
<li><code>}</code></li>
<li><code><em class="notesLv1">* html div#wrapper p {</em></code></li>
<li><code><em class="notesLv1">position: relative;</em></code></li>
<li><code><em class="notesLv1">left: 1px;</em></code></li>
<li><code>}</code></li>
	</ol></dd>
</dl>
<p>wrapper以下のコンテンツ全部に付けないといけないけれど、wrapper直下のコンテンツは大分すればheader、mainContents、footerの3つくらいだしそんなに手間でもないかなと。<br />
増えてもまとめ書きしちゃえばいいし。</p>
<p>※bodyに背景を与えている今回のような場合は、#wrapper自体にpositionとleftを与えてもOKです。</p>

<h2>2つ目。ぐぐってみました。bodyに対して左paddingを与えてみる。</h2>
<dl class="csscode">
	<dt>CSS</dt>
	<dd><ol>
<li><code>*+html body,</code></li>
<li><code>* html body {</code></li>
<li><code>padding-left: 1px;</code></li>
<li><code>}</code></li>
	</ol></dd>
</dl>
<p>わぁ。これは便利。一発ですね。さすがグーグル先生。<br />
どっち使う？って言ったら2つ目使いますね。わかりやすいし。<br />
で、実際使ってみたら、一部うまくいったけどなぜか一部逆にずれた…。<br />
原因不明で気持ち悪かったので結局1つ目を使いました。<br />
うまくいった人は極短いコードで済むし便利なのでおすすめです。<br />
とりあえずお試しアレ。</p>
<p>positionなら、原因不明でも部分的に調整っていうこともできるので、使い勝手はいいです。</p>
<p>その他にもぐぐってみたところ、背景画像自体で1pxずらしたものを用意するなんて方法があるみたいですが、ちょっと画像を用意するのは面倒だったので、potisionを使おうかなと思います。</p>
<p>Firefox3が出たばかりですが、本当にIEどうにかならないものですかね。<br />
IEのシェア落ちないかなぁ（´・ω・｀）</p>]]>
      
   </content>
</entry>
<entry>
   <title>Selectボックスでフォントが明朝体になってしまうIEのバグ</title>
   <link rel="alternate" type="text/html" href="http://www.blurblue.com/2008/06/selectie.html" />
   <id>tag:www.blurblue.com,2008://1.108</id>
   
   <published>2008-06-16T17:21:28Z</published>
   <updated>2008-06-16T19:36:00Z</updated>
   
   <summary>select &gt; option要素内に&quot;┏&quot;などの太い罫線記号を使うとなぜかIE...</summary>
   <author>
      <name></name>
      
   </author>
         <category term="(X)HTML" scheme="http://www.sixapart.com/ns/types#category" />
   
   <category term="16" label="IE" scheme="http://www.sixapart.com/ns/types#tag" />
   <category term="75" label="IE6" scheme="http://www.sixapart.com/ns/types#tag" />
   <category term="33" label="IE7" scheme="http://www.sixapart.com/ns/types#tag" />
   <category term="34" label="バグ" scheme="http://www.sixapart.com/ns/types#tag" />
   
   <content type="html" xml:lang="ja" xml:base="http://www.blurblue.com/">
      <![CDATA[<p>select > option要素内に"┏"などの太い罫線記号を使うとなぜかIEでは明朝体になってしまいます。<br />
意味がわかりません。</p>
<h2>症状</h2>
確認した限りではIE6、IE7にて、下図のように太罫線記号を頭に入れると明朝体になります。
<p class="img"><img src="/images/2008/select.jpg" alt="select要素が明朝体になっちゃう＠IE" /><br />
IEでの表示。3の倍数だけ<strong>アホ</strong>（バグ）になってます。</p>
<h2>実際にバグが発生するコード</h2>
 <dl class="htmlcode">
		<dt>HTML</dt>
		<dd><ol>
<li>&lt;p&gt;&lt;select name=&quot;&quot; size=&quot;9&quot;&gt;</li>
<li>&lt;option value=&quot;1&quot;&gt;　┏いっこめ&lt;/option&gt;</li>
<li>&lt;option value=&quot;2&quot;&gt;　┣にこめ&lt;/option&gt;</li>
<li>&lt;option value=&quot;3&quot;&gt;┣さんこめ&lt;/option&gt;</li>
<li>&lt;option value=&quot;4&quot;&gt;　┣よんこめ&lt;/option&gt;</li>
<li>&lt;option value=&quot;5&quot;&gt;　┣ごこめ&lt;/option&gt;</li>
<li>&lt;option value=&quot;6&quot;&gt;┣ろっこめ&lt;/option&gt;</li>
<li>&lt;option value=&quot;7&quot;&gt;　┣ななこめ&lt;/option&gt;</li>
<li>&lt;option value=&quot;8&quot;&gt;　┣はっこめ&lt;/option&gt;</li>
<li>&lt;option value=&quot;9&quot;&gt;┣きゅうこめ&lt;/option&gt;</li>
<li>&lt;/select&gt;&lt;/p&gt;</li>
		</ol></dd>
	</dl>
<p>※select要素のsizeプロパティは特に必要ありません。</p>
<h2>対策</h2>
<p>3の倍数以外は、"┣"の前に全角空白が入ってます。<br />
これだけ。</p>
<p>なぜか全角文字が罫線記号の前に入れると回避できるようです。<br />
何この意味のわからない仕様っていうかバグ。さすがMS。</p>
<p>半角文字ではだめなようです。&amp;nbsp;等も試してみましたがだめでした。<br />
また、直接font-familyを設定しても無効でした。</p>
<p>もしその他の回避策が見つかったらご一報をお願いします。</p>
<p>そもそも罫線記号なんかselect要素に入れるなって？<br />
大人の事情というものがあるのですヨ…。</p>
]]>
      
   </content>
</entry>
<entry>
   <title>やっぱりPicLensはスゴイ。</title>
   <link rel="alternate" type="text/html" href="http://www.blurblue.com/2008/06/piclens_2.html" />
   <id>tag:www.blurblue.com,2008://1.107</id>
   
   <published>2008-06-14T16:05:13Z</published>
   <updated>2008-06-14T18:00:39Z</updated>
   
   <summary>PicLensというFirefoxアドオンを知っていますか？ ボタンをぽちっと押...</summary>
   <author>
      <name></name>
      
   </author>
         <category term="web" scheme="http://www.sixapart.com/ns/types#category" />
   
   <category term="19" label="firefox" scheme="http://www.sixapart.com/ns/types#tag" />
   <category term="71" label="デザイン" scheme="http://www.sixapart.com/ns/types#tag" />
   
   <content type="html" xml:lang="ja" xml:base="http://www.blurblue.com/">
      <![CDATA[<p>PicLensというFirefoxアドオンを知っていますか？<br />
ボタンをぽちっと押すだけで、検索エンジンから画像を引っ張り出してきてまるでiTunesのアートワークのようにずらーっと並べてくれるんです。<br />
以前はGoogleイメージだけだったんですが、先日更新されてYahoo!やFlickr、YouTubeなど7種類のサイトに対応されました。</p>
<p class="link"><a href="https://addons.mozilla.org/ja/firefox/addon/5579">PicLens</a></p>
<p class="img"><img class="zoom" src="/images/2008/piclens_s.jpg" width="400" height="250" alt="PicLens" /><br />
右に思い切り投げた（ドラッグ）感じ。下部に見えるドット1つずつが画像を表してます。</p>
<p>各サイトの検索結果画面でPicLensのボタンを押せばどんどん結果が読み込まれ、一覧表示されます。<br />
YouTubeの場合はサムネイル画像のみが表示され、動画の再生はできません。</p>
<p>スタイリッシュかつ直感的に使えるナイスGUI。<br />
むしろGoogleの画像検索がデフォルトでこれになっちゃえばいいのに！って思うくらいナイスです。すごすぎます。<br />
まだ使っていない方は一度使ってみてください。<br />
ギュンギュン動く感覚はクセになりますよ。</p>]]>
      
   </content>
</entry>
<entry>
   <title>Opera9.5リリース</title>
   <link rel="alternate" type="text/html" href="http://www.blurblue.com/2008/06/opera95.html" />
   <id>tag:www.blurblue.com,2008://1.104</id>
   
   <published>2008-06-12T18:41:40Z</published>
   <updated>2008-06-12T19:46:50Z</updated>
   
   <summary> Opera9.5最終版がリリースされました。 Opera大好き人間なので何はさ...</summary>
   <author>
      <name></name>
      
   </author>
         <category term="web" scheme="http://www.sixapart.com/ns/types#category" />
   
   <category term="13" label="opera" scheme="http://www.sixapart.com/ns/types#tag" />
   
   <content type="html" xml:lang="ja" xml:base="http://www.blurblue.com/">
      <![CDATA[<p class="img"><a href="http://jp.opera.com/"><img src="/images/2008/opera9.jpg" alt="Opera9.5" /></a></p>
<p>Opera9.5最終版がリリースされました。<br />
Opera大好き人間なので何はさておき、書かずにはいられません。</p>
<p class="link"><a href="http://jp.opera.com/">Opera ブラウザ</a></p>
<p>今回のバージョンから、<strong>Opera Link機能</strong>が搭載されました。<br />
Opera Linkとは、ブックマーク、スピードダイヤル、Operaでのメモなどをオンライン同期し、いつでもどこからでもアクセス可能となる機能です。<br />
これは携帯専用の<strong>Opera Mini</strong>とも同期できます。モバイルからでも利用可能なのは非常に嬉しい。<br />
Opera Linkの利用には<a href="http://my.opera.com/">My Opera</a>への登録が必要。<br />
ID、Password、メールアドレスだけの簡単登録です。<br />
同期の操作は簡単で、[ファイル]メニューから[Operaの同期]を選択するだけです。<br />
既にサインアップが終了していれば、IDとPasswordを入力するだけで同期が完了します。簡単！<br />
これで友人宅でも、会社でも、ネットカフェでもどこからでも自宅PCのOperaと全く同じデータで扱うことができます。最高！<br />
まぁ、会社PCにはインストールできても、友人宅やネットカフェのPCにOperaがインストールされている可能性が低いのが難点ですが…。</p>
<p>さらに、全文履歴検索機能も備えており、キーワードを一語でもアドレスバーに入力すれば一覧表示してくれます。<br />
ちょっとでも記憶に残っているキーワードがあれば、一発検索可能。これは便利。</p>
<p class="img"><img class="zoom" src="/images/2008/opera95_s.jpg" width="400" height="141" alt="Opera9.5 全文履歴検索機能" /></p>
<p>ブックマークに入っているキーワードからも検索してくれるし、例えば「google」と打てば最近googleで検索した語句も全て羅列してくれます。<br />
仕事で調べモノをしていて数十、数百のサイトを見た後に、「あー！どのページだったっけ！」となった時にもOperaなら安心ですね。</p>
<p>この素晴らしい最新のOperaですが、ユーザーからはまだ不安定とのコメントもちょろちょろ出ており、若干不安要素を抱えている模様。<br />
私が使った感じでも、「Flashの上で右クリックした後、その他のエリアで右クリックしても右クリックメニューがそのままFlash用のものが出続ける（左クリックすれば消える）」というような謎の不具合があったりします。<br />
ただ、クラッシュするようなバグはほぼ無いようなので安心してご利用ください。</p>
<p>今回のバージョンアップで、IE、Firefox、Safariなどの他のブラウザとはまた一線を画すOperaならではの路線を確立できたのかな、と思います。<br />
Operaユーザー増えるといいなぁ…。<br />
こんなに使いやすいブラウザは他にないと思っている筆者なのでした。</p>]]>
      
   </content>
</entry>
<entry>
   <title>Firefox3がギネスに挑戦</title>
   <link rel="alternate" type="text/html" href="http://www.blurblue.com/2008/06/firefox3.html" />
   <id>tag:www.blurblue.com,2008://1.103</id>
   
   <published>2008-06-11T14:51:32Z</published>
   <updated>2008-06-11T14:58:50Z</updated>
   
   <summary>Firefoxが&quot;Download Day 2008&quot;と銘打って、24 時間での...</summary>
   <author>
      <name></name>
      
   </author>
         <category term="web" scheme="http://www.sixapart.com/ns/types#category" />
   
   <category term="19" label="firefox" scheme="http://www.sixapart.com/ns/types#tag" />
   
   <content type="html" xml:lang="ja" xml:base="http://www.blurblue.com/">
      <![CDATA[<p>Firefoxが"Download Day 2008"と銘打って、24 時間での最多ダウンロードソフトとして世界記録に挑戦するらしいです。</p>
<p class="link"><a href="http://www.spreadfirefox.com/ja/worldrecord">Spread Firefox | Download Day 2008</a></p>
<p>上記サイトでメールアドレスを登録しておくとFirefox 3のリリース時のリマインダーメールを送信してくれる他、ギネス記録達成時に報告メールをくれるらしいです。</p>
<p>日本は現時点でまだ3万ちょい…。意外と少ないですね。ただヨーロッパ諸国と近い数値を出している上、まだまだこれから増えるでしょうから、日本国内でのFirefox知名度はかなり上がってきている模様。<br />
喜ばしいことです。</p>
<p>Operaも9.5をリリースした（？）のに一部のユーザーくらいしか知らないので、もうちょっと宣伝しても良いと思うんのすが…。</p>]]>
      
   </content>
</entry>

</feed>
