webdesignの最近のブログ記事

yahoo.comの新しいUIで使用されているYUI 3.0のプレビュー版が公開されました。

http://developer.yahoo.com/yui/3/

http://m.www.yahoo.com/

軽量化・強力化などを目的にした結果、コアに変更を加えているので、
後方互換がないので現在2.xを使っている場合は乗り換えに注意！

使用率が高いであろうreset.cssとreset-font.cssは以前の2.6.0のままでした。
正式版のリリースの時には何かしら変更があるかもしれません。

スペックの低いPCだと、処理待ちのタイムラグなどが発生してしまって
ストレスの元になってしまうので、軽量化はうれしいところですね。

ブログのエントリーの最新n件をhtmlに表示するのに、
rssをPHPで読み込んで成型して、SSIでインクルードしてみてもエラーが。。。

最初はサーバー側のPEARと思ったけど、ちゃんと.phpでは表示されてるのでSSIの問題。

同じファイルを同じレンタルサーバ会社（ロリポップ）の違うURLにアップすると、
片方はちゃんと表示されて、もう一方はエラー。
このまま2時間くらいハマってましたorz

結局、下記の様に変更して解決しました。。。。はぁ。。。
<!--#include file="rss/blog.php" -->
　　　　　　　　　↓↓↓↓
<!--#include virtual="rss/blog.php" -->

外部RSS読み込みにPEARライブラリのXML_RSSでやってみるとひとつ問題が。

RSS1.0のブログは読み込めるんだけど、MT4はよく考えたらAtomなので
読み込みができない･･･orz

なので、MT4でRSS1.0も出力するように変更しました。

[1]テンプレに「RSS 1.0」を追加。タイプはRSS。

<?xml version="1.0" encoding="<$MTPublishCharset$>"?>

<rdf:RDF
  xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
  xmlns:dc="http://purl.org/dc/elements/1.1/"
  xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
  xmlns:admin="http://webns.net/mvcb/"
  xmlns:cc="http://web.resource.org/cc/"
  xmlns="http://purl.org/rss/1.0/">

<channel rdf:about="<$MTBlogURL$>">
<title><$MTBlogName encode_xml="1"$></title>
<link><$MTBlogURL$></link>
<description><$MTBlogDescription encode_xml="1"$></description>
<dc:language>ja</dc:language>
<dc:creator></dc:creator>
<dc:date><MTEntries lastn="1"><$MTEntryDate format="%Y-%m-%dT%H:%M:%S" language="en"$><$MTBlogTimezone$></MTEntries></dc:date>
<admin:generatorAgent rdf:resource="http://www.movabletype.org/?v=<$MTVersion$>" />
<MTBlogIfCCLicense>
<cc:license rdf:resource="<$MTBlogCCLicenseURL$>" />
</MTBlogIfCCLicense>

<items>
<rdf:Seq><MTEntries lastn="15">
<rdf:li rdf:resource="<$MTEntryPermalink encode_xml="1"$>" />
</MTEntries></rdf:Seq>
</items>

</channel>

<MTEntries lastn="15">
<item rdf:about="<$MTEntryPermalink encode_xml="1"$>">
<title><$MTEntryTitle encode_xml="1"$></title>
<link><$MTEntryPermalink encode_xml="1"$></link>
<description><$MTEntryExcerpt encode_xml="1"$></description>
<dc:subject><$MTEntryCategory encode_xml="1"$></dc:subject>
<dc:creator><$MTEntryAuthor encode_xml="1"$></dc:creator>
<dc:date><$MTEntryDate format="%Y-%m-%dT%H:%M:%S" language="en"$><$MTBlogTimezone$></dc:date>
</item>
</MTEntries>

</rdf:RDF>

[2]あとはテンプレのヘッダーに組み込んで再構築すればOK！

<link rel="alternate" type="application/rss+xml" title="RSS1.0" href="<$MTLink template="rss 1.0"$>" />

日本マクドナルドのwebがリニューアルしてました。
Flashメインで楽しいカンジがいっぱいのサイトに仕上がってました。

テクニカル的なポイントは検索ワードによってランディングページが異なるというもの。

例えば「朝マック」で検索してトップページに入ると最初に表示されるのがメニューになる。
でも、Yahoo！ではOKだけど、Googleでは適応されないし、
普通に検索すると朝メニューのページ（www.mcdonalds.co.jp/sales/morning/bf_menu.html）が
最初に出てくるので、正直あまり意味がない気がする・・・

それでもデザイン的にもFlash的にも非常にいいサイトと思います。
あとは、クーポンがflash対応機種じゃなくてもOKにしてほしい(--;
Nokia N73だと未対応だし、それでお客を逃すのは最大のミスだと思う。

日本マクドナルド
http://www.mcdonalds.co.jp

24日、米Adobe社からCS4が正式発表されました。

アメリカでの出荷が10月とのことなので、日本には年内くらいでしょうか。
ラインナップはこれまでと変わらず、Fireworksもちゃんとあります（笑）

普段使うのは優先順位で

• Dreamweaver
• Fireworks
• Photoshop
• Illustrator
• Flash

ってことなので、購入するならやはり「Web Premium-$1699」という事になりそうです。
（PhotoshopとIllustoratorは以前のVerでもいいのでStandard-$999でも最悪はいいかな）

CS3で度々Photoshopが落ちるのでCS4での改善を期待しながら、
日本での発売を待とうと思います。

製品の詳細はAdobeで。
http://www.adobe.com/

Google Chromeも出たことだし、ちょっとAcid2テスト結果を掲載しときます。

環境はXPのSP3。

CSSを解釈してると↓このスマイリーが表示されます。

結果はこちら。

9/2深夜、Googleから新ブラウザ「Goole chrome」のベータ版が発表されたのでテストしてみました。

ファーストインプレは『やや早いベータ版のwebブラウザ』。

画面はこんな感じ。

以下、インプレです。

[インターフェース]

• ぱっと見のアイコンの並びはIE7風（残念！）
• アドレスバーと検索ウィンドウが統合されてすっきり
• ダウンロードマネージャーは画面左下に控えめ表示
• タブはメニューより上位にあり、あくまでもタブひとつ＝1ブラウザの位置付け
• 新規タブで最近よく行くサイトのサムネイル表示 

[機能]

• URLと検索はGoogle検索を使っているらしく、インクリメントサーチ対応で使い勝手もいい
• クラッシュコントロールは便利←出くわさなかったけど
• シークレットモードはIE8に負けてるかな

[レンダリング]

• やっぱり全体的にやや早い程度。僕の環境ではFirefox＞Chrome＞IE
• 特にJavaScriptエンジンがすばらしい気がする
• CSS2.1対応はもちろんgood！！

[デザイン]

• スッキリはしているが個人的には×
• Chromeアイコンがどうしてもポケモンに出てくるアレにしか見えない

[結論]

• まだベータ版だが正式リリース版に十分期待できるブラウザと言えそう
• Googleの財産である検索とwebアプリとがChromeと連携すると強力なので面白そう
• デザインは×。残念ながらそのポイントだけで使う気がしないのでカスタマイズ希望

ダウンロードサイトはこちらから
http://www.google.com/chrome/

8/28にIE8のBeta2が出てたので触ってみた。
7と8のレンダリングをボタンひとつで切り替えれたり便利。

おぉ、CSSがちゃんとレンダリングされる（笑）
IEがちゃんとCSS2.1に準拠しちゃうと困るのは他のモダンブラウザだよねぇ。
（僕はSleipnirが使えればOK）

いろいろなブラウザごとにハックしたりで対応させるけど、
日本の一般的なユーザは相変わらずIE。
管理してるサイトでは90%がIE。

いくら準拠してるからモダンブラウザがいいと言ったってこれが現実だしね。
とりあえず、圧倒的シェアを持ってるIEが標準レンダリングで、
ちゃんと描画してくれるようになる（ハズ）のは歓迎です。

いまだにIE5からのアクセスがあることを考えると、
完全に切り替わるのに長い時間がかかるだろうけど、
こっちもそれが商売だし、いろいろやってやりましょう。

IE8Beta2
http://www.microsoft.com/japan/windows/products/winfamily/ie/beta/default.mspx

画像をクリックすると、画面がブラックアウトして画像を見ることができるプラグインLightBox。

http://www.huddletogether.com/projects/lightbox2/

複数のimageをグループ化して閲覧できるので、ちょっと便利。

上記のURLからDL。
　　　↓
lightbox.jsの画像へのパスを変更。←アップ予定のURLに。
　　　↓
サーバーにアップ。今回は/designare/直下にlightboxフォルダでアップ。
　　　↓
モジュールテンプレートにてLightBox(js)作成して上記URLにあるjsとcssを記述。
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
　　　↓
ヘッダーテンプレートに<$MTInclude module="LightBox(js)"$>を追加
　　　↓
エントリーの画像リンクタグにrel="lightbox"を追加。
<a href="image1.jpg" rel="lightbox" title="caption">

複数の画像でグループ化する場合はlightbox[グループ名]でOK！
<a href="image1.jpg" rel="lightbox[groupA]" title="caption">
<a href="image2.jpg" rel="lightbox[groupA]" title="caption">
<a href="image3.jpg" rel="lightbox[groupA]" title="caption">

flash埋め込みの定番SWFObjectが2.1になってました。

SWFObject: Javascript Flash Player detection and embed script

http://blog.deconcept.com/swfobject/

<script type="text/javascript" src="swfobject.js"></script>

<div id="flashcontent">
  This text is replaced by the Flash movie.
</div>

<script type="text/javascript">
   var so = new SWFObject("movie.swf", "mymovie", "400", "200", "8", "#336699");
   so.write("flashcontent");
</script>

【参考】SWFObjectを使用したJavaScript Flash Playerの検出と埋め込み
        Adobeデベロッパーセンター

http://www.adobe.com/jp/devnet/flash/articles/swfobject.html