さて、なんかmixiすごいことになってますね。
流れに乗ってmixiチェックを付けてみました。
記事直下のところに配置してます。
付けたからなんだって話なんですが・・・。

mixiチェックの付け方は
ブログにmixiチェックを設置 - F.Ko-Jiの「一秒後は未来」さんを参照しました。
とってもわかりやすく解説されてます。

付けてみたはいいけど、チェック押した時に付いてくる画像は変更はできるけど削除はできないみたい？
記事と全然関係ないアフィの画像とかついてきてちょっと邪魔ですね。
どうにかならないのかしら・・・。

追記（08/08/07）

mixiチェックのチェックボタンを設置[to-R]さんのBLOGを見ていたらわかったことが！
設定いじったら画像の自動検出はされないみたいです。

XHTML

1. <meta name="mixi-check-robots" content="noimage" />

で、技術仕様を改めて見てみたら、画像は指定できるんですね。

病気療養中につき引きこもりがちなのでTwitterのほうでちょいちょい呟いてます。
べ、別に流行りにのってるわけじゃないんだからね！

そんなわけでTwitterアカウントここに置いておきますね。（プロフィールページとかにも書いてあったりしますが）
http://twitter.com/blurblue

さて、iPhone4いよいよ予約開始ですね。
1月に3GSを買った身としてはかなりうらやましいですが、"4"は買う気はしません。
iOS4入れておけばある程度同じことはできるし、違いと言えばデザインとジャイロセンサーその他諸々くらいだと思っているので、悔しくないです。悔しくないです。チキショウ。

そういえば、Chrome5が出たり、Safari5が出たりOperaが更新されたり色々ブラウザが進化しておりますね。
HTML5やCSS3に向けて本格的に実装が加速化していくんですかね～。

さて、全然関係ないですがコレ欲しいです。

ラウーンワン・ファイッ

はどぉぉーけん！タイーガァータイーガァタイガァーアパカッ
うーわうーわうーわ　ユーウィン！パーフェクトッ！

とか聞けたら幸せです。

Opera10正式版がリリースされました。

Opera10ダウンロード

私は勘違いしてたのですが、今回のバージョンにはOpera Uniteは標準搭載はされません。
Uniteは10.10からの搭載になるそうです。

9.6からのアップデートポイントはそんなに多くないみたいで、デザインがちょっと変わった以外の主な注目点は以下。

• アイコンが変わったよ！
• Opera Turboの実装
• スピードダイヤルのカスタマイズ
• レンダリングの向上。最大40%アップ
• Web標準準拠　“The Acid3 Test”で100点満点

アイコンが変わったよ！

アプリケーションアイコンが変更されました。
光沢が減って、シックな感じになったかな。

Opera Turboの実装

簡単に言うと、低速回線下でブラウジングを可能な限り高速化する機能です。

Opera Turboを有効にしていると、一旦Operaのサーバーで画像の圧縮などをしてから表示するため、ナローバンドでも条件が良ければブロードバンド並の速度で表示できるというもの。
Willcomとかの低回線でも表示が速くなるのは嬉しいけど、もっと速くあったら良かったねっていう技術かな。
日本じゃモバイルの高速回線化がかなり進んでいるので。

ちなみに、このOpera Turboは、高速回線下で使うと逆に遅くなります。
ぱっと表示できるものが一旦Operaのサーバーで無駄な圧縮をしてくるので。
しかも画像はものすごい圧縮率なので、表示が見るに堪えないことになります（笑）

Turboで表示したmixiのトップ。

最初見た時「どうしちゃったの！？」って思うくらい衝撃の汚さ（笑）
この機能は「有効（常に有効）」、「無効（常に無効）」、「自動（Operaが判断）」と3つの設定があります。
ナローバンド環境にならない人は常に無効で良いかと。
自動にしていると接続先サーバーが重い時にも有効になってしまいます。画像が圧縮されたところで表示速度に大差はないので、ただ画像が汚くなるだけ。

ちなみに、Opera Turboの設定は画面左下にあります。

スピードダイヤルのカスタマイズ

これはちょっと便利になりました。
壁紙を設置できる事、ダイヤルのレイアウトを変更できること、タブからドラッグドロップしたページをそのままサムネイルにしてダイヤルにできる、という３点が主なポイントです。

レイアウトは、2×2、4×4、3×3、5×4、4×3、5×5の6種類から選べます。

壁紙設定とレイアウトを5×4にしてみた

今までは3×3しかなかったので、ダイヤル足らないなーっていう人には良い改良かな。

レンダリングの向上。最大40%アップ

新しいレンダリングエンジンとして「Presto 2.2」を搭載し、レンダリング性能が向上したそうです。

正直、まだ体感できてないのでなんとも言えません。
Gmailなどで主に発揮するっていう話なんですが、Gmailを開いてみても何が速いのか体感できません。
Firefox3.xとどっこいです。
まぁこのへんは最大で40%っていう事なので、そんなに体感できるほどの快速感はないでしょうね。
小数点2位より小さいところで速くなっても体感できないというのが正直な感想。
多分、Chromeみたいな速さを実感してしまってからでは多少速くなっても気にならないのかもしれないです。

Web標準準拠　“The Acid3 Test”で100点満点

そういえばSafari4も満点だったなーなんて思いつつ。
Web Fontsなどに対応してます。

あれ。あんまり特筆すべき点がなかった気がします。
今回売りのOpera Turboは利用価値高いのかなぁ？
モバイルを使ってない人には恩恵は少ないかもしれません。

次回リリースになる10.10のOpera Uniteに期待ですね。

（追記）タブがおもしろいことに

タブが伸びます。

伸ばしてみた

なんとサムネイルがタブにも出ます。
でもこんな無駄な画面領域の使い方、するのかなぁ？（笑）
面白い機能ではありますね。

ChatPadとは、アクセスすると他にアクセスしている正体のわからない誰かと強制的に2ショットチャットになるチャットツールです。

使い方は、アクセスしてちょっと待つだけ。勝手に他の誰かと接続されます。

知らない誰かと2ショットってことでだいたい想像は付くとおもいますが、こうなります↓

話してみた

相手の情報が何一つ無い状況で強制2ショット。いったい何を話せばいいのやら。
とりあえず挨拶→無言というパターンに陥りがちです。（それしかない感じも）
今のところ情報入手が早い人やIT関連の人しかいなさそうなので、とりあえず順応性は高そうな人しかいませんが、一般に広まったらどうなることやら・・・。

きっと出会い系チャットツール化するはず。
入室後一言目が「男？女？」とか。
せめてプロフィールでもあればわかりやすいのですが、それがあったら余計サクサクと出会い厨が発生しそうです。

用途は一体なんなんだろう？
行きずりの知らない誰かと喋ってドキドキ・・みたいなのってわざわざこういうツールじゃなくても、不特定多数から各自で選んで話すほうが目的や対象も絞られてていいと思うんですけどね。

一般の正直な感想は、http://blog.livedoor.jp/insidears/archives/51983344.html　この通りだと思う。というか私もそう思います（笑）

Top Sites

ブックマークボタンを押すとiTunes風になってかっこよかです。
カバーフロウも再現されております。

ブックマーク

起動時以外の動作はサクサクです。
サイトの表示はさすがに速いです。めちゃくちゃ速いです。
体感でいうと、Chrome＞＞＞Safari4＞＞＞＞＞Firefox3＞Opera9.6といった感じかなぁ？

とりあえず、インストールしてちょこっと動かした感想まで～。

それにしてもiPhone 3G S欲しすぎます。

googleの発信するtwitterにこんな書き込みが。

Love video games? iGoogle now has themes from Mario, Mega Man, Guitar Hero and more. http://bit.ly/v7Ar5

http://twitter.com/google/status/1392330038

どんなゲームのテーマがラインナップされているかというと、Mega Man（なんだろうと思ったらロックマンのことでした）、Mario、Street FighterIV、Zeldaなどなど。

マリオやドンキーコングにゼルダ、ギャラガにスト4など有名どころが揃ってます。
しかも絵柄が1テーマにつき数種類用意されてます。

設定するとこんな感じ。

ゲームiGoogleテーマはこちら

ゲーム好きな皆様、お一ついかがでしょうか。

ところでこれらのテーマって、タブごとに設定しないといけないのかなぁ？
逆に言えばタブごとに設定できるのはおもしろいけど、一括でやって欲しい気がします。

IE8ダウンロード

さて、新機能のほうは色々なサイトで語られている通りです。

正直、webスライスをみてみたかったんですが、どこで対応してるんですか？（笑）
対応サイトじゃないと使えないってどういう機能…。

個人的にはアクセラレータがお気に入りです。これは便利。
Operaにも付けばいいのに。

で、web制作者の皆さん、事件です。

IE6、IE7で使えていたCSSのhackが効きません

下記三つのhackがIE用としてメジャーでした。

CSS

1. * html selector {...}
2. *+html selector {...}
3. *:first-child+html selector {...}

これらが使えなくなったとなると、IE8はどうCSSで分岐したらいいんでしょうね？
HTML的に条件分岐コメントでも使えというのでしょうか。
それともJavascript…。

ともあれ、早急に新しいhackを探さなくてはなりません。

と、思ってIE8 CSS Hackちょっと探したらあった！

.test { color /*\**/: blue\9 }

CSS hack for IE8 Standards Mode

とりあえず、あった！ということで。
IE8正式版で効いて、Opera9.64、Firefox3.0.7、Safari3.2.2、Chrome1.0.154.48で効かないことを確認。
いやー、これで一安心ですね。
ただ、思いっきりW3C CSSチェッカーに引っかかるんでものすごく微妙なのですが…。

その他細かい検証はまた今度ということで。

追記

IE8について参考になるメモ

IE8のドキュメントメモ - ヲゾゾ wozozo ウンコプログラマー 〜綺麗なお姉さん〜

エコーの位置と、エコー内のリンク先の変更という修正だったのだが、なぜか見づらい位置、書き込みづらい配置になってくれた。

今まではtwitterよろしく入力フィールドがメイン画面に出ていたので、それこそtwitterのように気軽に書き込めた。
改悪後は、マイトップページにそれなりに広く取られていたエコーのエリアは、自分の更新履歴の直下に申し訳程度に配置され、明らかに窓際族な感じ。
しかも入力フィールドが「もっと見る」というリンク先にいかないと無いので、すぐ書き込めるというメリットが完全に失われた。

これは携帯版でも同じ修正が行われており、携帯版もマイトップページに直接入力できるフィールドがあったのだが、わざわざ「もっと読む」というリンクをクリックしてからでないと入力ができなくなった。

これはひどい。

エコーの存在意義として、いつでも思ったことを気軽にすぐ書けるというのがあったように思うのだが、mixiサイドとしては意図が違ったということなのだろうか。
つまりこれは、エコーのトラフィックを落としたい、という背景が見え隠れしているようにも見えなくもない。

こんな紹介ページも作るくらいなので、そんなことはないと思いたい。

あなたの"今"を伝えよう！「みんなのエコー」

私はtwitterにはあまりアクセスせず、mixiへのアクセスのほうが多いのでエコーをちょくちょく利用していただけに、この改悪は残念だ。

さて、今日はちょっと設計的なものを思いついてみた。

グラフィカルなデザインを実現しようとすると、毎回ネックになるのが内包物や文字サイズ変更に対する縦幅の可変対応。
例えば、周囲に枠線があってさらに上から下に向けてグラデーションがかかっちゃってるような角丸デザインを実現しようとすると、

1. ボックス最下部の角丸直前部分を横長に縦1pxスライスし、それをrepeatさせて、上部からグラデーション終わりまでをスライスしtopに配置、下部の角丸をbottomに配置する3重入れ子
2. 上（もしくは下）から横いっぱいで想定しうる縦サイズにながーくデザインしスライスして、下の画像で閉じる2重入れ子
3. 気にせず1枚画像で。

などが考えられる。無難なのは（１）だろう。
なにしろ中にどんなに長いものが入ろうが対応可能だ。
（２）は小さいサイズならまだしも、サイト全体を包むような巨大なサイズのコンテンツ背景だとどうにもならない。
（３）については話すことは何もありません。
今回は（１）を使う前提でのお話です。

「多重入れ子なんて…」とか「JSで処理すれば？」とか「CSS3でいいじゃん」とか色々ご意見はあるでしょうが、経験上そうそう甘い問題でもなく、どうしても対応しなければならない事が多い問題だと思う。
むしろ無いことが無いんじゃないかというくらい頻出する…。

というわけで、毎度悩むのがDIV要素のID/class名じゃないだろうか。
無駄に3重にしないとできないデザインなんて！！と思ったりもする。
そんなに角丸が好きならデザイナーさんがこのDIVの意味づけを考えてくれたらいいのに！！
マークアップエンジニアは常に命名ルールや要素の意味づけに頭を悩ましている。

さらに、内包する要素がfloatしていた場合にはclearfixを最も内側の要素に入れておかないと、背景が出なくなってしまう。

そこで、そんなデザイン用ブロックの名称を包括的に使い回せないものかと考えた結果、以下のようなXHTMLになった。

XHTML

1. <div id="hoge" class="wrapper">
2.  <div class="wrapperInner">
3.   <div class="content">
4.    <p>コンテンツ</p>
5.   <!-- /content --></div>
 <!-- /wrapperInner --></div>
6. <!-- /wrapper --></div>

この際、最も外側の要素には個別にID（最悪class）を振りたい。
このIDに対してのwrapperやcontentであるというヒモ付けをしているので、これがないと、何の「wrapper」なのか？何の「content」なのか？意味づけができなくなってしまう。

尚、wrapper、wrapperInner、contentと命名してみたが、このあたりは好きな名称にしても良いと思う。

そして、ベースレイアウトに入れるCSSは以下のようになる

CSS

1. .wrapper,
2. .wrapper .wrapperInnner { zoom: 1; }
3.  
4. .wrapper .wrapperInnner .content:after {
5. display: block;
6. clear: both;
7. height: 0;
8. visibility: hidden;
9. content: " ";
10. line-height: 0;
11. font-size: 0;
12. }
13. .wrapper .wrapperInnner .content {
14. display: inline-table;
15. min-height: 1%;
16. zoom: 1;
17. }
18. * html .wrapper .wrapperInnner .content {
19. height: 1%;
20. }
21. .wrapper .wrapperInnner .content {
22. display: block;
23. }

要は最も内側の要素にclearfixを充てただけ。
ついでにzoom: 1;が入っているので、IEの多重入れ子になった場合のバグ対策もできている。

あとは個別に　#ID .wrapper { }　などにスタイルを充てるだけ。
div.wrapperのように要素名を入れていないのは、DIVに固執せずどんな要素にでも対応できるようにするため。
例えば、wrapperに内包する要素がDLだった場合、.wrapper > .wrapperInnner > DL > DT,DDとなるため、div.contentが必要なくなり、DL要素にclass="content"を振ればいい。

このように事前に包括的な入れ子の設計をしておけば、どんなデザインが来ても使い回しで使っていける。
clearfixのためのコード行数も減るし、何よりいちいちこのDIVのclassどうしようかな・・・と悩まなくて良い。
一回でも多重入れ子になりそうなデザイン要素が出てくるのならばどんどん使っていった方が良いだろう。

googleカラーですね～。単純な「ｇ」よりは好きかも。

mixiモバイル用URL対策GMスクリプト

Operaでも使えるのでご利用下さい。

本来mixi側で修正して表示すべき問題じゃないのかなぁ。
わざわざ1ページ設けるくらいならURL変換したほうがいいだろうに。

公開する範囲のマイミクを選びリストを作っておかなければならない。
これが非常に面倒だという不評をよく聞く。
特定の友達グループや会社の同僚などのmixiがあらかじめ想定していた使い方に対しては非常に有効であろうが、なにかのイベントや私信的な内容の日記だと公開範囲はかなり狭くなり、いちいち汎用的ではない二度と使わないようなグループを設定しなくてはならない面倒な事態になったりする。
また、特定の数人だけに見せたくない日記もしばしばあるだろう。これが一番面倒になる。
例えば300人のマイミクがいる人が特定の10人に見せたくない日記を書くとしたら、公開するグループには290人を入れなくてはならない。
こんな面倒なことはやってられないだろう。

というわけで、このホワイトリストだけではなく、ブラックリスト的な「公開しない範囲」というものを設けてはどうかと思う。
その際もう一つ追加して欲しいのが、「該当日記内だけの公開範囲」の設定だ。
グループを作らずとも、公開しないマイミクをその日記の中でだけ選べるようにできれば、かなり楽になる。

そうすればもっとプライベートな日記も書きやすくなるのではないだろうか。

HTML

1. <ul>

2. <li>メニュー</li>
3. <li>メニュー</li>
4. <li>メニュー</li>
5. <li>メニュー</li>
6. <li>メニュー</li>
7. <li>メニュー</li>
8. <li>メニュー</li>
9. </ul>