Unofficial Planet WordPress Japan

別に政治的にどうのとか全く関係ないんですが、アメリカ合衆国大統領候補のオバマ氏のサイトデザインが自分的にかなりヒット！グラデーションの使い方がうまいなぁ。質感を表現するのにグラデーションってもの凄く重要だと思うんだけど、本当に上手く使える人ってあまり居ないと思うのですよ。このサイト見ると「オーラ」が出てるｗ

学校で生徒に作品作らせるとグラデーション使う子が多いのだけど「もうちょっとグラデーションの使い方を工夫してみたら？」とかって良く言いたくなります。このオバマ氏のサイトみたいにグラデーションを上手く使えると微妙な陰影のニュアンスで見栄えが良くなりますが、下手な人が使うとそれだけでシロウトっぽさがでちゃう。簡単なようでいて難しいのがグラデーションなんでしょうねぇ。自分もまだまだ精進せねば。

グラデーションに関してはNitram+Nuncaさんのリアル・グラデーションの作法を読むといいですよ。 って誰に対して言ってるんだろ(笑)

デザインのことばかり言ってきましたけど、「情報の見せ方」という点でもオバマ氏のサイトは侮れないかも。jQueryなどのライブラリを効果的に使っていたり、サイトの作り方として参考にできる点が数多くあります。まぁそれだけ金掛けて作ってるんでしょうね。

コリスさんのエントリー[CSS]テーブル要素を使用しないで制作するカレンダーってのが紹介されていました。リストとCSSでカレンダーを作るというなんとも凄い力技なやり方。方法の一つとして面白いとは思うけれど、曜日と日付の関連を考えればtable使って作るほうが良いに決まってます。

公開されていたデモのソースは下記のようになってます。

<ul>
<li class="day">sun</li>
<li class="day">mon</li>
<li class="day">tues</li>
<li class="day">wed</li>

<li class="day">thurs</li>
<li class="day">fri</li>
<li class="day">sat</li>

<li> </li>
<li> </li>
<li>1</li>
<li>2</li>
<li>3</li>

<li>4 <span>event</span></li>
<li>5</li>

以下略

これだと曜日と日付の意味づけがされていません。例えば3日が何曜日なのか知りたいとしましょう。CSSが適用された状態では「見た目」で判断できますが、CSSが切られた状態では3とthurs(木曜日)は関係性が全くわかりません。数字は単に1,2,3,4,5・・・と並べられているだけ。もし曜日と数字のsemanticということを考えるのであれば下記のように書くべきです。

<dl>
<dt>sun</dt>
<dd>
  <ul>
      <li>6</li>
      <li>13</li>
      <li>20</li>
      <li>27</li>
  </ul>
</dd>
<dt>mon</dt>
<dd>
  <ul>
      <li>7</li>
      <li>14</li>
      <li>21</li>
      <li>28</li>
  </ul>
</dd>

～以下略

これなら意味的に数字と曜日を結びつけることができます。・・・ですが、普通こんな変な書き方しないですよね。カレンダーにするにしてもCSSがとっても複雑になりそうだし、こんな書き方するくらいならテーブルを使ってHTMLを書いたほうが100倍楽だし、早いし、HTML的にも曜日と数字の対応が意味づけられるのでtableを使うべきでしょう。tbodyやth要素を使ってしっかりとマークアップしてあげれば何ら問題はありません。

デモのようにカレンダー表記とリスト表記をスクリプトで切り替えたいといった特別な事情が無い限りはtableを使って作るのが無難だと思います。

IE7の自動更新が2008年2月13日に始まるそうなので「昔は透過pngが使えなかったんだよね。IEの実装がダメダメでさぁ～」なんて言う時代がそのうち来るのかなぁと思いつつも、実際問題としてはまだまだIE6のシェアは無視できないですよね。特にアルファ画像をIE6で扱うのは悩みどころです。しかし現在では数多くの方がIE6でアルファチャンネルを持ったpngを表示させる方法を公開していらっしゃいます。

• アルファ画像を扱うalphafilter.jsライブラリ - to-R
• 僕も半透明 png を使うためのライブラリ作った！ -IT戦記
• IE6でアルファチャンネルを含むPNGを表示する -ウノラボ
• IEでアルファチャンネルPNGを表示する （iepngfix.htc）-youmos
• 透過PNGをCSSで背景に指定してIE6や5.5のバージョンでも綺麗に表示してみる -DesignWalker

ほぼこれで事足りてしまうので、今更という感はありますが･･･今回はそれをjQueryのプラグインで実現するというお話です。jQueryを使っている方は一考の価値があるのではないでしょうか。導入も非常に簡単です。

まずは、jQuery本体とIEで透過pngを使うためのjQueryプラグイン「IE PNG Fix」をダウンロードします。そしてhtmlのhead内に次のように書きjQuery本体とプラグインを読み込みます。

<script src="jquery-1.2.1.pack.js" type="text/javascript" charset="utf-8"></script>
<script src="jquery.pngfix.js" type="text/javascript" charset="utf-8"></script>

srcの部分はフォルダ構成によって変えてください。これで使う準備ができました。ページ内すべてのimg要素に対して適用したい場合は次のようにスクリプトを書きます。

$(document).ready(function() {
$("img").pngfix();
});

これだと透過情報を持たないjpgなど全てのimg要素に適用されてしまうので、ちとスマートなやりかたではありませんね。もう少しスクリプトを変えて、pngのみに適用させたい場合は次のように書きます。

$(document).ready(function() {
$("img[@src$=png]").pngfix();
});

さらに「特定のid=”foo”にも適用させたい」と言った場合はカンマで区切って次のように書きます。

$(document).ready(function() {
$("img[@src$=png],#foo").pngfix();
});

IE PNG Fixに実際に適用させたサンプルファイルも置いてあります。なおこのプラグインはMIT Licenseで提供されているので、著作権表示を消さなければ自由に使うことができます。(ダウンロードすれば最初から著作権表示は書いてあります)

2008年には3G版のiPhoneがリリースされるだろうと噂されています。もちろん来年には日本でも発売となるでしょう。長らく鎖国状態だった日本の携帯市場にも大きな変革の時が到来すると予想できます。iPhoneの売り上げによって大きくシェアが変わる可能性があるでしょう。

本当の変革はシェアじゃなく携帯の使われ方

日本の携帯電話各社はiPhone発売によるシェアの変動ばかり気にしているかもしれませんが、 本当に重要な変革は「携帯によるWebの使われ方の変化」だと思います。最近発表された調査結果で『女子高生、携帯でネット１日平均１２４分』というのがありました。『ネット閲覧はPCより携帯』へと明らかに変化しています。mixiの利用状況などを見てもその傾向は明らかです。今後Webサイトも携帯から閲覧する人が増えるのは疑いようがありません。

2つの大きなブレーキが外れるとき

これまでは携帯でのWebサイト閲覧という流れにブレーキをかける２つの仕掛けがありました。
一つめのは携帯電話の小さな液晶画面、そして携帯特有のインターフェースです。快適にかつ長時間Webを閲覧するには明らかに不向きで、携帯専用のサイトしか見ることができなかったり･･･。自分はtwitterとかに携帯からちょこちょこと投稿したりしています。それだけだったら今の携帯でも十分事足りるのですが、長時間のWeb閲覧あるいは調べものとかになるともうダメです。そういう時はやっぱりパソコンからWebを使いますね。この使いにくさが携帯からのネット利用にブレーキをかけていた要因の一つでしょう。

二つ目のブレーキは携帯端末の貧弱なWebブラウザとキャリアごとの異なる仕様です。今でこそフルブラウザが搭載されている端末が増えてきましたが、携帯電話全体を見渡すとまだまだです。独自規格がはびこり、他社携帯では使えないタグがあったりといった制作面での障害がブレーキとなっていました。

これら2つのブレーキのおかげで「PCでWebを見る」というスタイルがかろうじて維持されてきたと言えます。しかしそれももう若い世代では破綻しているようですね。「ネットは携帯で」という若い世代が今現実に来ています。

一方、若い世代だけじゃなく30～50代くらいの人も『携帯でのWebブラウズ』のニーズはあるはずです。発売当初の初代W-ZERO３の熱狂振りを省みれば、中高年でも『携帯でのWeb閲覧』の素地があるのではないかと思います。

そして２つのブレーキが外れる時がもうすぐやってくるはずです。その契機になるのが「日本でのiPhone発売」になると睨んでいます。

Webの世界はどうなるか？

ここから先は僕の個人的な主観入りまくりの『予想』です。iPhoneが日本で発売されるとどうなるかを考えてみます。

1. 携帯電話業界のシェアが変動する
2. iPhoneに触発されたスゴイ携帯電話がいっぱい出てくる
3. 携帯電話でのWeb閲覧がPCを抜く
4. コンテンツ産業がエライことになる (と思うｗ)

今のところiPhoneを発売するのはソフトバンクという説が有力です。そうなればシェアがかなり変わってくるはず。まず、間違いなくMacユーザーは買うでしょう。そしてiPodTouchを買った人もきっと買ってしまうでしょう(笑)さらには一般のiPodユーザをはじめ、多くの人がiPhoneを手にするんじゃないでしょうか？

さらにiPhone発売による影響で非常に大きいのは似たような携帯電話がたくさん出てくるだろうということです。つまりiPhoneのように使いやすくフルブラウザ搭載の画期的な携帯電話が数多く出てくる(と願いたい)。もしそうなればネット閲覧 のPCから携帯電話シフトが劇的に進むでしょう。

iPhoneは携帯電話というよりむしろ高機能なコンパクトPCとでも言ったほうがしっくりくるような気がします。音楽も聴けてWebも閲覧できる。しかもそれを革新的なインターフェースで直感的に操作ができる。

ここで重要なのがiPhoneのインターフェースと内臓されているブラウザsafariです。これは前述の2つのブレーキを外す大きなきっかけにな るのは間違いありません。PCとあまり遜色ない操作性でWebを閲覧できて、直感的で使いやすければiPhoneからWebサイトを見ないほうがおかしい でしょう。どこでも持ち運べてどこでも繋がり、(今までの携帯に比べると)比較的大きな画面で Webを見ることができる。便利で使いやすいものがあれば絶対使ってしまいますよね。

携帯でのWeb閲覧があたりまえになれば「いかに携帯で見やすく使いやすいWebサイトを作るか」ということを考えていかねばなりません。 横幅800px以下の神話は跡形も無く消えてなくなるでしょうし、PCでの各種ブラウザチェックに加えiPhoneでのチェックというのも当たり前になってくるのではないでしょうか？

Web制作者はiPhone発売に備えるべき

Web制作に携わる人は皆(自分も含めて)iPhoneの日本発売とその後の展開に備えるべきだと思います。プラットフォームが変わるのです。かつてゲーム業界にもあったファミコンからプレステへの劇的な変化のように、Web業界のプラットフォームもPCから携帯へとシフトします。その時になっても同じ業界で働いていくためには、流れに敏感になり一早くその流れに乗ることです。「ここの角丸組みづらいなぁ～」とか愚痴をいいつつ、のほほんとコーディングしているだけではダメだということです。

かなり過激(？)な見出しで長々と文章を書いてきましたが、このエントリーを書こうと思ったきっかけは下記リンク先の長谷川恭久さんの素晴らしい記事がほとんどブックマークされていなかったからです。併せて下記記事を通読することを強くおすすめします。(時間が無い方はiPhoneからみるモバイルサイトデザインのヒントだけでも読んで見るといいですよ)

• iPhoneサイトを構築しよう–第1回：iPhoneサイト構築で知っておきたい5項目
• iPhoneサイトを構築しよう–第2回：iPhoneならではのサイト構築テクニック
• iPhoneサイトを構築しよう–iPhoneからみるモバイルサイトデザインのヒント

はてぶ経由で知ったのですが、CNET Japanのこのブログの記事が隠しリンクが貼ってあるらしくSEOスパムではないかと話題になっています。この人の記事をいくつか読んでみたけど、中身があってないような感じの文章。同じ単語が何回もでてくるし、相当SEOについて勉強してらっしゃるようですね。

SEO業者の人って今でも普通に隠しリンクみたいなことをやっているのでしょうか。バックリンク目当てなんでしょうけど、短期的にトラフィックが上がっても、ユーザ視点で作られた良コンテンツが無ければ先は見えているでしょうに。「SEO企業の功罪」とかって言っておきながらこの業者もSEOという言葉に踊らされているに過ぎないんじゃないですかね。

踊らされているというより、SEOへの無知を利用して金を搾取しているって言ったほうがいいのか。こんなのがまかり通ってしまうのってなんだかなぁ・・・。あ、これってもしかしてリンクベイティングってやつなのか。そこまで計算し尽してやっているとしたら、なんたる孔明の罠。まんまと釣られたのは僕って訳ですね。

住太陽さんのブログにこんなステキな一節がありました。

SEOは価値を生み出さない。時間や能力や予算などのリソースは無限ではありません。その限られたリソースを最大に活用としようとするなら、SEOのような何の価値も生み出さないことにリソースを割くのではなく、ユーザーにとって何らかの価値のある情報を発信していくべきです。

スパマーと検索エンジンが演じるイタチごっこの構図

全くもってその通りだと思います。
CNETの該当記事へのリンクはnofollowにしておこう。

重すぎる腰を上げてようやくWordPressを2.3.1にアップグレードしました。

WordPress2.3系はデータベースの構造などが変わっていたり、いろいろと仕様が変更されています。プラグインも2.3では使えなくなってしまうものや不具合が発生するものなどがあります。そのためアップデートするのにも少しばかり慎重にならざるを得ませんでした。

今回WordPress2.3.1にアップデートするに当たり、いろいろと他のWPユーザーさんの情報を参考にさせていただきました。 特にpower source*さんのWP: WordPress 2.3 へアップグレードする前にしておきたいことという記事は分かりやすくまとまっており、関連する情報へのリンクも充実していてとてもとても助かりました。アップデート手順は下記リンク先がオススメです。

• WordPress 2.3 へアップグレード (power source*)
• WordPress ME 2.2からWordPress 2.3へのアップグレード(アスカゼ)

power sourceさんのところでも紹介されてますが「Wordpress Upgrade Preflight Check」というとても便利なプラグインがあります。これは2.2.x から 2.3 へアップデートしたときにエラーなどの問題を引き起こす可能性のあるプラグイン・テーマを、事前にチェックできるというシロモノ。WordPress2.3.1へアップデートするのを考えている方は是非使ってみてくださいませ。

2.3になってタグ機能がWordPress本体に実装されたこともあり、それまで使っていたUltimate Tag Warriorはお役御免となりました。WordPress2.3にはこの Ultimate Tag Warriorのタグデータをインポートできる機能が備わっています。UTWを使っている方はアップデートの際にデータをインポートするといいでしょう。

まだ自分もいろいろと試行錯誤の段階で、徐々に機能やプラグインをカスタマイズしていこうと思っています。

気付けばもうすぐ師走。長らくブログ放置してましたが、少し仕事も心も余裕が出てきたのでまたぼちぼち再開していきますよぉ。

既に各所で情報が出てますが、来年1月15日から開催されるMacworld ExpoでついにUltra-portable macが発表されるみたいですね。独自ルートで仕入れた情報によるとリークしている情報のとおり、光学ドライブは搭載されないっぽい。重さは今のMacBookProの約半分くらいということで、持ち歩き用のサブ機で欲しいな。出たら買ってしまいそう。

一方で海外ではAsus Eee PCが話題になっているようで、日本円にして3万円という破格の値段。しかも軽いし(値段の割りに)性能も良い。その上MacOSX Leopardも動いちゃうらしいからかなりお買い得？まぁLeopard動くとは言っても「快適に」とはいかないでしょうけどね。

3万円なら欲しいな～。ただ残念ながら日本では売ってないみたいです。日本でもこういうやつ出せば絶対売れると思うんだけどなぁ。

少し前にWWW Watchさんで紹介されていたJavaScript でバナーをクロスフェード表示というやつ。これくらいならjQueryだけでも実現できそうだなーと思って作ってみました。

かなり力技でやってますが一応動きます。jQueryのfadeInとfadeOutメソッドを使っています。なんかもっと上手いやりかたありそうだけど、「こうした方がいいよー」ってのがありましたら是非教えてくださいませ。ちょっといじれば簡単な画像のスライドショーみたいのも作れそうです。

以下HTMLとスクリプトです。

jQueryでクロスフェード

HTMLは下記のようになります。ulでくくってliの中に画像を入れています。必ずulにslideshowというidをつけて下さい。HTML側での設定はこれだけです。

<ul id="slideshow">
<li><img></li>
<li><img></li>
<li><img></li>
</ul>

CSSは下記のようになります。liを絶対配置position:absoluteを使って重ねています。

#slideshow{
   margin-top:100px;
   width:600px;
   position:relative;
}

#slideshow li{
   position:absolute;
   left:0;
   top:0;
   border:3px solid #000000;
}

#slideshow li img{
   vertical-align:bottom;
}

そしてスクリプトは下記のようになります。

$(function()
{
  $("#slideshow li:not(:first)").hide();
  $("#slideshow li:first").addClass("selected");
  var dim=1;
  var count = function(){
  var len =$("#slideshow").children().length;
     if(dim>=len){
         dim=1;
         crossfeadeF();
     }else{
        dim +=1;
     crossfeade();}
  }
  var crossfeade = function(){
$("#slideshow").children(".selected").fadeOut("3300").removeClass().next().fadeIn("slow").addClass("selected");
   };
   var crossfeadeF = function(){
$("#slideshow").children(".selected").fadeOut("3300").removeClass().siblings("li:first").fadeIn("slow").addClass("selected");
   };
   var intervalID = setInterval(count, 5000);
  }
);

今回は画像をliの中にいれてますが、テキストでも同様にできると思います。jQueryを使う時のお決まりですが上記スクリプトは必ずjQueryを読み込んだ後に書くようにしてください。こんなのでも使ってみたいという方はご自由にどうぞ。

• jQueryでクロスフェードのデモ

ちょっと遅くなりましたが、Web標準の日々２日目のメモ兼感想です。１日目のレポートはこちらからどうぞ。

2日目に聴講したセッション

1. 混ぜるな危険?複合文書から見たXHTML+CSSとスキーマ活用 (X5)
2. Web制作におけるアートディレクションとテクニカルディレクション(D2)
3. Ajax/Flashで、らくらく・わくわく・マッシュアップ!(J7)
4. 情報アーキテクチャ入門(D8)

X5:混ぜるな危険?複合文書から見たXHTML+CSSとスキーマ活用

2日目の最初は元W3Cの石川さんのセッション。石川さんご自身が関わったruby(Ruby on RailsじゃなくてXHTMLのrubyタグ)の仕様やその裏話などをご披露下さいました。話の内容はかなりマニアックでXHTMLとそのスキーマの活用方や、スキーマトロンの話。話としては面白いけど実務じゃほとんど使わなそうだなー。

XHTML1.0のMedia Typesはtext/htmlは”should not”なワケだけども、石川さん曰くこのshould notは「空気よめ」という意味らしいです。複合文章での利用を前提とするとやっぱりapplication/xhtml+xmlにした方が良いのだろうけど、ネックなのはIEですね。普通にapplication/xhtml+xmlと書けるようになるのはいつの日だろうか･･･。開発が始まっているIE8はどうなのだろう？

このセッションで石川さんが使っていたoXygenというエディターを初めて知りました。

D2:Web制作におけるアートディレクションとテクニカルディレクション

２コマ目は神森さんと佐分利さんのセッション。実際のアンカーテクノロジーでの仕事をアートディレクションとテクニカルディレクションという立場から説明をしてくださいました。

佐分利さんの時々挟むスパイスの効いたギャグ(？)に 会場は幾度と無く笑い声が。佐分利さん曰くアートディレクションをやる人は布団や浄水器を売れるそうです(笑)クライアントにデザインをしっかりと説明できなきゃ駄目ってことですね。

実際にアンカーで制作した某サイトのデザインが、クライアントとのやり取りを経てどのように遷移してFixまで持っていったのかを詳細に説明して下さり、プロジェクトの進め方も大いに参考になりました。「あるある」と頷かされる場面が幾度と無くありました。

J7:Ajax/Flashで、らくらく・わくわく・マッシュアップ!

個人的には一番楽しみだったセッション。１日目のAdobe AIRのセッションと一緒に受けといて良かった。前半の内容は川崎有亮さんがAjaxの基礎的な部分とjQueryについて解説して下さいました。他に聞いてた方はどうなのか分かりませんが、この辺の話題は個人的にjQueryをいじっていたのでスンナリ入っていけました。

後半はtrick7.com blogのteraiさんがGainerを用いてDOMならぬガンダムのドムのプラモデルでGainerとFlashを連動させたデモを実践して下さいました。Gainerの実物を見たのはこの日が初めて。あんなことできるんだ！ちょっと感動。

その後はGainerとリクルートAPIを用いてその場でマッシュアップサイトを制作。いや、ホント面白かったです。久々にFlash熱が沸いてきましたよ。自分も何か創ってみたい！そんな思いが芽生えたセッションでした。

このときの制作過程がビデオチュートリアルとして公開されていますので、興味のある方はそちらもチェックしてみてください。セッション終了後teraiさんとちょこっとだけご挨拶させて頂きました。ありがとうございます。

D8:情報アーキテクチャ入門

最後は株式会社コンセントの長谷川さんのセッション「情報アーキテクチャ入門」を受けました。受けた後は今まで自分の中に抱えていたモヤモヤがすっきりした感じ。

事例を紹介しつつ、情報アーキテクチャの概観を明瞭に解説されていました。実際コンセントで行っているワークフローや情報アーキテクチャから見たプロジェクトのポイントなど、とても参考になりました。

情報アーキテクトがデザインの知識を持っていない場合は、デザインの知識がある”デザイナー”と共同でワイヤーフレームを作ったほうが良いとのことでした。 そりゃそうですよね。考えてみれば当然。情報アーキテクチャはワイヤーフレームを作ることじゃない！

前の会社にいた時もこの辺りのことをかじっていたのですが、今まで上手く飲み込めていませんでした。なんだか違和感があったというか「それって正しいの？」みたいな。ペルソナとかワイヤーフレームなど今まで疑問を抱いていた部分が長谷川さんの話を聞いてストンと落ちた感じ。最後にこういう話を聞けたのは良かったなー。

２日間通してのまとめ

個人的に思うのはセッションの当たりハズレがあるなーということ。うまいこと自分の興味のある話(期待していた通りの話)だったら良いのだけれど、そうじゃなかったらちょっと嫌ですね。今回僕がチョイスしたセッションは概ね期待していた通りだったので個人的には満足の行く内容でした。

ただ一点不満だったのが登録方法のこと。僕はチケットをイープラスで買ったのですが、イープラスで申込みした時点で登録されたものだと思っていました。ところがイープラスで申込みしても登録されたことになっていなくて、前日になって気づき慌てて登録しました。

チケットにも公式サイトにもその事が書いてあったので、見落としていた僕がいけないのですが、登録しないで会場に行ってしまった人も多数いるんじゃないかな？

今回運営側の面で色々と不備があったことは事実ですし、お金を取る以上はそういった所を改善していって欲しいです。CSS NiteやWeb標準の日々に関して様々な意見があると思いますが、Web業界全体を盛り上げる貴重なイベントなので来年もまたやって欲しいと思います。

昨日今日とWeb標準の日々に参加してきました。台風直撃でどうなることかと思いましたが、関東はそうでもなかった？夜帰るときは雨も止んでましたしね。

今回はもの凄い数のセッションで、豪華顔ぶれWeb業界のオールスター勢ぞろいって感じでしたね。でも残念なのが聞きたいセッションが被っていたこと。断腸の思いで泣く泣く諦めたものもありました。木達さんのセッションとか聞きたかった…。( CSS Nite LP4で人気セッションは再演されるということでそれに期待)関係ないけどダイビルとダイドービルは紛らわしかったです。

僕が聴講したセッションは下記の通り。

1日目の聴講したセッション

1. デザインパターンによるユーザーインターフェース革命 (Z1)
2. 名前のウェブ(X2)
3. デザイナーズ・ハイ デザインタイトルマッチ!(V3)
4. Webのスピード感をデスクトップアプリケーションに：AIRテクノロジー(R4)

2日目の聴講したセッション

1. 混ぜるな危険?複合文書から見たXHTML+CSSとスキーマ活用 (X5)
2. Web制作におけるアートディレクションとテクニカルディレクション(D2)
3. Ajax/Flashで、らくらく・わくわく・マッシュアップ!(J7)
4. 情報アーキテクチャ入門(D8)

こう見ると、何ていうか「雑食」って感じですね(笑)好き嫌いは基本的にないので興味のあるセッ�