KYS-LAB ueda

WordPressへ移行してみます

Movable Typeで作業しているとバージョンアップされるたびに発生する学習コストがしんどくなってきたので、このラボブログは、WordPressへ移行してみようかと思います。

本日インストールしたばかりなので、まだ表示に不具合があるかもしれませんが、とりあえず。
http://www.kys-lab.com/ueda/wpblog/

Firefoxを違った設定で複数起動する

Firefox3.6が正式にリリースされていたので、インストールしてみました。
そして、Webサーフィン用、Web開発用など複数の設定を制作してみたいと思います。
一つの設定にたくさんのアドオンやブックマークを詰め込むと、整理がしづらくなりがちで、ブラウザの動作が重くなるような気がするので、私はいつも設定を複数制作しようとに応じて使い分けています。

１，初めて起動する前に、まずデスクトップ上にプログラムのショートカットを制作します

２，右クリック=>プロパティ
「リンク先」として
"C:\Program Files\Mozilla Firefox\firefox.exe"
のような、プログラムへのパスが記述されています。
この記述の最後に
『 -P』(半角スペースハイフンP)
と追記して、［OKボタン］クリック。

３，このショートカットをダブルクリックすると、プロファイルマネージャーが起動しますので、［新しいプロファイルを作成］クリック

４，［次へ］

５，プロファイル名を記入して［完了］

６，今、作成したプロファイルを選択して［Firefoxを起動］

このようにして起動させたFirefoxの設定やアドオンの情報は、起動時に選択したプロファイルへ保存されます。
私は、情報収集時のWeb閲覧用設定と、Webサイト開発時の設定を作り使い分けています。

さらに、「２」の作業と同じ要領で、
"C:\Program Files\Mozilla Firefox\firefox.exe" -no-remote -P "情報収集用"
"C:\Program Files\Mozilla Firefox\firefox.exe" -no-remote -P "web開発用"
という感じで、
-no-remote -P "プロファイル名"
を追記し、複数のショートカットを用意することで、複数の違う設定でFirefoxを起動することができます。

Firefox3.6で、ノートPCの加速度センサーを取得

JavaScriptで取得できると言うことは、そのままFlashへも伝えられると言うことですね。
これはおもしろい！
しかし、当社には加速度センサー付きノートPCがない。。。

以下、●Detecting device orientation - MDCより


function handleOrientation(orientData) {
  var x = orientData.x;
  var y = orientData.y;
  var z = orientData.z;
}
window.addEventListener("MozOrientation", handleOrientation, true);


Adobe社のフォントで編集可能状態でのフォント埋め込みが許可されているもの

アドビから入手したフォントファミリーに関して、日本語のフォントでは、
「平成角ゴシック」「平成丸ゴシック」「平成明朝」「りょう」「小塚ゴシック」「小塚明朝」
が、編集可能のフォント埋め込みがオッケーだそうです。
●Adobe - フォント：埋め込み許可リストより

以前、Flashにフォントを埋め込み、ブラウザから文言・メッセージを入力してもらうことで名刺やカードを制作できるWebサービスを考えたのですが、モリサワ社にライセンス的に問題ないか尋ねたところ「現状ではサーバーフォントライセンスになってしまいます」と言われ、お蔵入りになったことがあります。

これからは、CSS3のウェブフォント等も出てきますし、ライセンス形態も様々な形が出てきそうですね。

NHKオンデマンド、動画のフォーマットをFLVに変更

Web上の動画は、FLVがデファクトスタンダードとなりつつありますね。

●4月よりMacOS、Firefoxなどにも対応します！！ - NHKオンデマンド

MovableTypeログインページのクリスマステーマ

ログインページは、実際にブログを使用される方が最も目にする場所だと思います。
季節を感じるような　ちょっとした変化があるだけで、ログインすることや日々の更新作業が少し楽しくなるかもしれません。

動作確認は、
「Movable Type version 4.2x-ja」のデフォルトのログインページにて、
windows版の「IE 6,7,8」と「firefox 3」で行っています。
MTの別のバージョンや、その他のブラウザでは確認していませんのでずれている可能性が高いと思います。すいません

ログインページのCSS
｛MTインストールディレクトリ｝/mt-static/css/simple.css
の一番下に追記する形になっています。
記述内容は、続く以下で。

Firefoxをインストールしたら最初に設定している項目

バージョンアップされると新しい機能や設定が増えるので、何をどう設定したのか忘れないための自分用メモでもあります（＾＾；
私は「Firefox 3.6 Beta」で書き設定を行いました。

Firefoxを使うときは、普段のブラウジング用と開発用でプロファイルを使い分けています。
参考：プロファイルの管理

つづく以降に設定の方法など。
主に普段のブラウジング用を想定しています。

Open Source CMS Award 2009結果

12000エントリーに対する投票結果
●Open Source CMS Award | Packt Publishingより
※日本語版サイトがみつかったものは、本家でなく日本語サイトをリンクしました

総合部門
WordPress
MODx
SilverStripe

「PHPのCMS」部門
Drupal
WordPress
Joomla!

「PHP以外のCMS」部門
Plone
dotCMS
mojoPortal

最も将来性があるCMS
ImpressCMS
Pixie
Pligg CMS

殿堂入り
Drupal

Drupalは、アメリカホワイトハウス公式サイトでも利用されています（参考）し、まさに横綱。
少しさわってみただけですが、枠組みがインストールされるので後はおのおのが必要な機能をモジュールで追加していくような感じです。
管理画面のカスタマイズもできるので、ユーザーの趣旨やレベルに合わせたサイトを構築できるものだと思います。
ただ逆に、「ちょっとブログをやりたいだけです」という場合には、モジュールを入れ込み準備することが手間に感じるかもしれません。
そのような場合は、WordPressを利用した方が早いと思います。

「ImpressCMS」や「Plone」など、知らなかったCMSもたくさんありました。
お客様の趣旨や使い方にマッチしたWebサイトを提供できるよう、スキルアップや情報収集はかかせないものだと感じます。

ホームページ制作・WEBデザインは広友社におまかせ！
お気軽にお問い合わせください。

EC-CUBEをインストールしてみました

ECサイトを構築するプログラムは、大規模で複雑になりがちでカスタマイズなどはプログラムファイルを直接さわらなければならないようなことも多いのですが、このEC-CUBEは構造が把握しやすく、PHPがわかる方ならデザインやテンプレートのカスタマイズもやりやすいと思います。
また、商品管理だけでなく、「顧客管理」や「売り上げ管理」といった機能も充実していて驚きました。
すごいソフトだと思います。

以下、簡単ですが、インストール作業の流れと少しさわってみた感想です。

こちらから『EC-CUBE‐EC-CUBEダウンロード』ダウンロード

◆解答すると「data」「html」フォルダができる。

◆「htlm」=>「define.php」でそれぞれのフォルダへのパスを設定する
dataディレクトリは、ブラウザからアクセスされない場所にする方がよいかもしれません。
/** HTMLディレクトリからのDATAディレクトリの相対パス */
define("HTML2DATA_DIR", "/../data/");
/** DATA ディレクトリから HTML ディレクトリの相対パス */
define("DATA_DIR2HTML", "/../html/");

◆FTPソフトでアップロードする

◆各ディレクトリ・ファイルのパーミッションの設定をします。
ここがこのEC-CUBEの最大の難関だと思います。Webデザイナーの方などは、ここで嫌気がさしあきらめた方も多いのではないでしょうか？
公式サイトの説明では、9個のディレクトリと2つのファイルのパーミッションの事しか書かれていませんが、説明されている9個のディレクトリ以下のファイルやディレクトリ全てに適切にパーミッションを設定していかなくてはなりません。
100個近くあるのではないでしょうか。
FTPソフトで一つ一つ作業すれば、2時間くらいかかると思います。

シェルログインできるサーバならば、
find ./ -type f | xargs chmod 666
find ./ -type d | xargs chmod 777
このような感じで、ささっと済ませられます。

◆データベースを用意する

◆ブラウザで「html」ディレクトリへアクセスし、指示に従いインストール作業をします。

詳しくは公式サイトをご覧ください
●EC-CUBEマニュアルサイト - EC-CUBE（2．x系）/1_インストール/02_インストール方法

公式サイトの説明書には書かれていませんが、私の環境では、自分で4つのフォルダと制作しなければエラーが発生し動きませんでした。
「data」=>「Smarty」=>「templates_c」
の中に、「default」フォルダ
その「default」フォルダ内に「mobile」「admin」「user_data」の3つのフォルダを作成。
Smartyのキャッシュが保存されるので、プログラムからの書き込みができるパーミッション設定に。

以上で、とりあえず動くと思います。

以下、少しさわってみた感想

◆郵便番号の横の「住所入力」ボタンが機能しない
　→どうやら「郵便番号DB登録」をしないといけないみたい
日本郵便から郵便番号データ(CSV)をダウンロード。
●郵便番号データダウンロード - 日本郵便

解凍すると「KEN_ALL.CSV」ができる。

テキストエディタで開きます。
※膨大なデータなのでwordやExcel等で開くと止まってしまうかもしれません。
１，半角カタカナを全角カタカナに
２，文字コードをUTF8(BOMなし)、改行コードLFにして保存
３，サーバ上のdata->downloadの「KEN_ALL.CSV」と差し替える
４，管理画面から郵便番号DB登録を押して登録
時間がかかります。
真っ白のブラウザが開いたままという不安をあおる仕様です。
私の環境では、5分くらいかかりました。
これをしておかないと、お客様が会員登録するページの「住所自動入力」ボタンも機能しないかも。

◆会員規約が既に制作されている！
自社の規約にあわせて書き直すこと。

◆デザイン管理
Smartyテンプレートをゴリゴリしなきゃいけないのだろうと思っていたのですが、
movabletypのウィジェット的な仕組みになっており、「ブロック」とよばれるパーツをドラッグドロップでレイアウトできる

ブロックのカスタマイズや追加、新規テンプレートの作成にはSmartyの知識は必須。
テンプレートファイルは、/data/Smarty/templates/default/

デフォルトテンプレートのフッターのidが「fotter」という罠
カスタマイズしようと思い、CSSにfooterと記述しても反映されず　はまりかけた＞＜

Smartyテンプレート内で、PHPコードからテンプレート変数を取得するには
<!--{php}-->
  $arrProduct = $this->get_template_vars('arrProduct');
  print_r($arrProduct);
<!--{/php}-->

◆参考にしたサイト：
●EC-CUBE標準規約 - EC-CUBE Trac - Trac
●[EC CUBE] - Mess with the Best Die like the Rest
●香川県でホームページ制作を行う社長のブログ
●EC-CUBEを、推奨サーバじゃないCORESERVERにインストールする手順。 - Naga Blog

Flash Player10.1登場とYoutube 1080p対応

「Flash Player10.1」と「Youtube 1080p」が、ほぼ同時に登場しましたが、何か関係があるのでしょうか？

「Youtube 1080p」は、想像以上の高画質に驚かされます。
Flash Playerのコンテンツ保護機能を著作者や業界団体がなっとくすれば、映画などのコンテンツネット配信が急激に進むような予感がします。

例として、バットマン「The Dark Knight」の予告編です。
●YouTube - The Dark Knight HD 1080p Trailer

フルスクリーンにしても画像が荒れず、まるでDVDを鑑賞しているようです。
HDボタンから画質を選択できます

しかし1080pはさすがに重たく、私のPC環境では初回読み込み時には、CPU使用率50％前後・ブラウザのメモリ使用量100Mb超で、コマ落ちが激しく紙芝居のようでした。読み込んでしまうと、CPU20%程度でスムーズ。

ここで重要になってくるのが、再生に使用される「Flash Player」
先日プレリリースされた「Flash Player10.1」では『H.264ハードウェアデコード(Windowsのみ)』がサポートされているそうで、対応しているGPUを使用しているPC環境ならば、H.264コーデックの動画再生時のCPU付加が軽減されスムーズに再生されるようです。
--対応GPU--
Radeon HD 4000シリーズ以降
Mobility Radeon HD 4000シリーズ以降
Radeon HD 3000以降(チップセット内蔵)
FirePro V3750/V5700/V7750/V8700/V8750以降
GeForce 8400 GS以降
GeForce 8400M GS以降
GeForce 8100以降(チップセット内蔵)
Intel G4xシリーズ
●【PC Watch】Flash Player 10.1のDXVAサポートを試すより
-----

--「Flash Player10.1」の主な新機能--
・Android等のモバイルデバイス向けのOS対応
・マイクから入力されるデータストリームへのアクセス機能
・ストリーミングメディアのコンテンツ保護機能
・H.264ハードウェアデコード(Windowsのみ)
●akihiro kamijoより
-----

※「Flash Player10.1」をインストールする場合、現在PCにインストール済みのFlash Playerをアンインストールしてからでないと、正しくインストール出来ない場合があるようなのでご注意ください。

現在PCにインストール済みのFlash Playerのバージョンを確認したい場合は、こちら『Version test for Adobe Flash Player』

「Flash Player10.1」のダウンロードは、こちら『Adobe Labs - Downloads: Flash Player 10.1』

余談ですが、
Flash Playerの任意のバージョンをインストールしたい場合は、こちら『テスト用のアーカイブ版 Flash Player の提供について』

InDesignからBlogへ投稿するJavaScript

インデザイン上で選択しているテキストを、XML-RPCでブログに投稿します。
ただそれだけです。
インデザインJSでのSocketでPOSTするサンプルがあまりなかったので、練習がてら書いてみました。

Windows VISTA
InDesign CS3
MT4とwordpress2.8
で動作確認。

エラー処理は、ほとんどしていません。サンプルということで。
Content-Length用にデータ量を計算しているところも、怪しいです。
UTF8は日本語が3byteとか4byteとか。インデザイン上で字形パレットから挿入した文字や制御文字等は未検証。

続き以降にソース

Movable Type 5の必要インストール環境

出荷日が2009年11月26日に決定したそうですが、
●Movable Type 5 出荷日決定のお知らせ - Six Apart

MTOSの方は、未だに4.261のままですね。
●MTOS: Movable Type オープンソース・プロジェクト | MovableType.jp

こちらの『code.sixapart.com』からは、SVNでコードを取得できるようですが。。。
例えば、
こちら『/branches/greyhound/lib/MT.pm ? movabletype』を覗いてみると、
( $VERSION, $SCHEMA_VERSION ) = ( '5.0', '5.0016' );
というコードが見られますので、ver5相当なのではないかと思います。

MTOSから派生するプロジェクトとして少し話題になった「Melody」は、プロジェクトのブログ自体9月から更新されていません。
●Melody: Community Powered Publishing

MT5では、サイト全体の構造が変わっているような感じですので、MT4からの移行が問題なく行えるのかかなり不安です。
公式にサポートする環境というのも、変わっていますので、MT4が正常に動いていた環境からバージョンアップしたのに問題が発生するということは十分考えられます。

【MT5の必要インストール環境】
データベースに関しては、
MySQL 4.0 以降, PostgreSQL 8 以降, SQLite
と書かれていますが、本家の説明ページでは、
MySQL 5.0 or greater
Oracle Database 11g (only Movable Type Enterprise)
Microsoft SQL Server 2008 (only Movable Type Enterprise)
となっています。
日本語版だけ、「PostgreSQL 8 以降, SQLite」等が使えるようにカスタマイズされているのでしょうか？
詳しく見てみようと思い『詳しくは、ドキュメント: 必要インストール環境、動作環境を参照ください』をクリックすると、MT4へのリンクになっているし。。。いい加減なものですね
●世界標準の CMS プラットフォーム : Movable Type

時間がとれ次第、このブログに『code.sixapart.com』から取得できるMTOS ver5.xっぽいコードをインストールしてみたいと思います。

参考ページ：
■本家
System Requirements | MovableType.org - Home of the MT Community

■MT5ベータ版の必要インストール環境
必要インストール環境（ウェブサーバー， DB）と、ブラウザ動作環境 | Movable Type 5 ドキュメント

■MT4の必要インストール環境
必要インストール環境、動作環境 | Movable Type 4 ドキュメント

Google Analyticsに新機能が追加

10月21日にGoogle Analyticsに新機能が追加されたので、勉強がてらこのブログにも導入してみました。

主な新機能は、
・今後重要になってくるであろう「携帯アクセス解析機能」
・ユーザー、セッション、ページの各レベルで定義できる「マルチカスタム変数」
・カスタムレポートの共有
・日次、週次、月次などの期間において、顕著な変化があった場合にメールでで知らせてくれる「インテリジェンス」
など。

「携帯アクセス解析機能」については、
『現在のところパイロット版として特定のパートナーのみに提供。数週間の内に、全ての広告主様でご利用いただけるようになる予定』
と書かれています。

英語版の『Google Analytics Blog』を見てみますと、Expanded Mobile Reportingの項目に『download snippet instructions』としてサンプルプログラムのようなものがダウンロードできるようになっていましたので、少し見てみました。

解凍してみると、jsp, aspx, php, pl用のサンプルプログラムが入っていたので、私でも理解できそうなphp用を見てみると、
同胞されている「go.php」というファイルに対し、アカウントID, HTTP_REFERER, QUERY_STRING, REQUEST_URI等をGETで投げると、「go.php」側でクッキーやIPアドレスの処理をし、「http://www.google-analytics.com/__utm.gif」へデータを投げる仕組みのようです。
携帯用ページにはimgタグのsrcで呼び出す。

「guid=ON」というパラメータも付加されていて、HTTP_X_DCMGUIDも取得しているので、「iモードID」はサンプルのままでもアクセス解析できそうな感じです。

しかし、これだけの機能とユーザーインターフェイスを無料で提供できてしまうのは、すごいとしかいいようがありません。

Googleには、webサイトのデザイン案によるコンバージョン率の違いを比較するようなサービス『ウェブサイト オプティマイザー』というものもあるようです。
こちらは、まだ使用したことがないので、使ってみてから使用感を書いてみたいと思います。

凸版印刷のデジタルサイネージ端末

-----
ICカードや2次元コードを読み取る機能があり、顧客にスーパーの会員カードや携帯サイトなどで得た2次元コードをかざしてもらうことで、サンプル商品が出てくる
「単純にデジタルサイネージで商品の広告を流しても、当事者意識がないために見てもらえない場合がある。サンプル商品を持つことで、広告に対する関心を高めることができる」

ディスプレーの上部にもカメラが設置してあり、こちらは顔認識技術を使って、広告やコンテンツを見た人の人数やそれぞれの性別、年代を判断できるようになっている。
--●凸版印刷がスーパーにデジタルサイネージ端末を設置：日経ビジネスオンラインより--

これはすごい！
会員カード情報や顔認識技術を使うことで、今までよりも濃いマーケティング情報が得られそうですね。

店舗設置型なので、狭く深く。
新聞折り込みチラシなどは、広く浅く。
という、感じでしょうか。

印刷屋が『紙』を売るのではなくなってきた。
そこに載っている情報が重要なのであり、伝える手段は時代・テクノロジーによって変わるということでしょうか。

ウィンドウの幅によって可変させてみる

いわゆる「エラスティックレイアウト」というのでしょうか
Elastic：
「弾力のある」「しなやかな」「軽快な」という意味の言葉のようです。

最近では、ウィンドウ幅に合わせて、カラムの幅だけでなく、画像のサイズやトリミングまで可変させるレイアウトもあるようです。

私も練習がてら作ってみました。
幅が狭くなると、1カラムになります。

どうせなら、可変の様子が変形特撮ロボットのように見えるとおもしろそうなので、jQueryでanimateさせてます。
勢いで作ったので、かなり強引です。
そして、ウィンドウを広げても戻りません＞＜

擬音のフォントは、こちら『ジョジョフォント』です。

今日はここまで。
時間のあるときに、ウィンドウ幅に合わせて、何パターンかレイアウトを作ってみたいと思います。

TortoiseSVNで簡単バージョン管理

「TortoiseSVN」って、これ単体でバージョン管理が出来てしまうのですね！
恥ずかしながら今まで知りませんでした。

バージョン管理システムなんて言われると、Svnserveやデータベースのセッティング等ややこしそうだなと尻込みしてしまいますが、「TortoiseSVN」をwindowsマシンにインストールするだけでオッケーです。

ローカルマシン上ではもちろん、「バッファローTeraStation」や「Dropbox」のようなファイル共有環境と併用すれば、共同作業でのバージョン管理も簡単に出来るのではないかと思います。

私もまだあまり理解していない部分もあるのですが、使ってみた流れを簡単に書いてみます。
作業環境は、
Windows VISTA SP1
TortoiseSVN 1.6.5
で進めます。

「食べログ」は、月1億アクセス

半年前の記事ですが、
--●Noppin's stock cafe:「食べログ」、店舗ＰＲ可能に　月１億アクセスより--
カカクコムが運営する　飲食店情報の口コミサイト「食べログ」は、2月のアクセス数が前年同月比2倍強の1億2500万件となるなど急成長。
-----

1億アクセスをさばく、サーバーってのも　すごいですね。
検索なども軽快に動作しますし、どのような構成になっているのか見てみたいものです。

多機能な中国製ブラウザ「Maxthon Browser」

●Maxthon Browser - Full-Featured Browser

■主な機能
タブ、マウスジェスチャー、フィードリーダー、入力候補のオートコンプリート、広告ブロック、スクリーンキャプチャや、httpsのグリーン表示、プラべートデータの削除など、とても多機能。
プロキシ機能を有していて、中国政府の情報規制を迂回することが出来るそうで、中国国内では人気のブラウザのようです。
19カ国の言語に対応し、もちろん日本語対応。
プラグインやスキンなども用意されているようです。
ウィキペディアによると、ブラウザエンジンをIE（Trident）とGeckoの間で切り替えて使用できるそうです。

とても多機能・高性能な感じなのですが、「中国製でロシアのサーチエンジンとも提携」と聞くと、なんだか尻込みしてしまいます（＾＾；

しかし、中国のインターネット人口はアメリカの総人口を上回る3億人を超え世界最大。
今後、中国語サイトを覗きに行く機会が増えるのは間違いないと思います。

そんな時、中国製ブラウザを使用していれば、ちょっとだけ歓迎されるかもしれません（＾＾）

モバイルサイトをGoogleに認識させる

●Google Webmaster Central：モバイルサイトを正しく Google に認識させるためにはより
-----
Googlebotが携帯電話で閲覧できないと判断したページはモバイルページであるとみなされず、モバイルサイトのインデックスに登録されません
適切に XHTML Mobile や Compact HTML など携帯端末向けのフォーマットの DTD を宣言していれば問題なくモバイルページとして登録されるでしょう。
-----

具体的にGooglebotさんがモバイルサイトだと判断する基準がよくわからいのですが、
とりあえず「XHTML Mobile」や「Compact HTML」などのDTDを使用すればモバイルサイトだと思ってくれるようです。

「MovableType5」出荷延期だそうです

●Movable Type 5 出荷延期のお知らせ - Six Apart
出荷時期は11月後半を予定
現在実施中の『Movable Type 5 発表記念キャンペーン』期間も、製品出荷予定の11月後半まで延長

MTは、「ベータ版」と「製品の個人ライセンス (無償) 」と「Movable Type Open Source」等、複数のソフトウェア利用許諾契約書があってややこしいですね。
ベータ版のソフトウェア利用許諾契約書は、こちら『Movable Type ベータ・ソフトウェア利用許諾契約書』ですね。
ダウンロードは、『Movable Type 5.0 ベータ | Movable Type ベータ』

Movable Type オープンソース・プロジェクトは、GPLですね。
最新のコードのダウンロードは、こちら『code.sixapart.com』でしょうか。

「Adobe BROWSERLAB」を使用してみました

IEやSafariなど、各ブラウザでのスクリーンショットを比較閲覧できる「Adobe BROWSERLAB」を使用してみました。

AdobeIDを持っていれば利用できるようです。
現在持っていなくても、無料で登録できます。

「続く」以降にスクリーンショットなどあります。

超精密ペーパークラフト「ヤマハ発動機」

これは楽しそう！

YAMAHAのHPで、歴代バイクの超精密ペーパークラフトの図面をダウンロードできるようです。

●ペーパークラフト | ヤマハ発動機株式会社

PDFファイルをダウンロードし、プリンタで出力。
ハサミと糊で組み立てれば、懐かしの名車が蘇ります。

バイク以外にも動物や昆虫などもあって、親子で楽しめる素敵なコンテンツですね

これは便利！PSDスポイトツール

●CreativeTechs Tips ≫ Use the Photoshop Eyedropper Anywhere!より

webサイト制作時、デザインパーツを切り抜きする際などに、背景色を合わせておきたいときがあります。
しかし、フォトショップのスポイトツールでIEやfirefoxなどブラウザから直接色を拾おうとクリックしても、ブラウザがアクティブになるだけで色の値は取得できません。

ところが、
スポイトツールで、まずフォトショップのウィンドウ内をクリックしそのままズイーーっとブラウザ上までドラッグしていくと、ブラウザ上の色の値を取得することが可能です。

この機能は知りませんでした。
長年使用しているフォトショップですが、まだまだ知らない機能が多いです。
宝の持ち腐れにならぬよう、しっかり使いこなしていかなければ　と思います。

MTベースの新顔CMS「Melody」

●Melody: Community Powered Publishing

MTOSとの違いが、わかりにくいですね。
『YOMIURI ONLINE』の記事には、『Melodyは、コミュニティーメンバーが自由に発展させたり、変更したりできるオープンソース版のMT』と紹介されています。

試しにダウンロードしてみたのですが、「mt-config.cgi」などみるとそのままMTという感じです。

今後、「商用Movable Type」と「MTOS」と「Melody」の位置づけや互換性がどうなっていくのか、気になるところです。

CSSで上下中央揃えサンプル

■サンプル

グラフィックとWebデザインの制作会社「広友社」が提供する無料画像素材サイト【KOYU写】

矢田寺の紫陽花
June 17, 2009
Auther 堀田氏

携帯サイト研究「無印良品　公式サイト」

携帯サイト作成の参考にしようと思い「無印良品の公式サイト」へ、FirefoxのFireMobileSimulatorでアクセスしてソースを見てみました。

●DoCoMoは、わかります。
HTMLでShift_JIS。
しかし、HTMLモードでは使えないと思われる<div>タグを使用しています。<div>タグに対しalign="right"などの指定をしていますが、携帯端末は指定通り表示しているのでしょうか？

●auは、なんですか？
DOCTYPE宣言が2つで、間にxml宣言を挟んでる！？
auでは、このように記述しなければ、問題が起きるのでしょうか？
モバイル業界では有名なハックとか、そういうものなのでしょうか？？

●SoftBankは、<head>タグが消されています
<head>タグを使うと、何か問題が起きるのでしょうか？

色々と見れば見るほど、混乱してきました（＠＠

※あくまでFirefoxのアドオン「FireMobileSimulator」で、6月9日16時にアクセスした表示結果です。

【DoCoMo(DC N505i)設定でアクセス】

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html lang="ja-JP">


<head>

<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">

<title>無印良品 MUJI.net</title>

</head>

<body link="#333333" vlink="#333333" alink="#cccccc">

【au(W63H)設定でアクセス】

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<?xml version="1.0" encoding="Shift_JIS"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">


<head>

<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" />

<title>無印良品 MUJI.net</title>

</head>

<body link="#333333">

【SoftBank(SB 705P)設定でアクセス】

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html lang="ja-JP">


<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">

<title>無印良品 MUJI.net</title>

<body link="#333333">

携帯サイトを作る為に勉強中

読めば読むほど萎えてきますね；；
-----
【フォントのサイズ】
auとSoftBank
機種によってフォントサイズが違うので、例えば12pxが「小」や「極小」のどれになるかはその機種次第

【文字コード】
UTF-8運用の場合
mailtoで、DoCoMoとauはURLエンコード前にShift_JISに変換しておかないと、題名などの文字が化けてしまう
DoCoMoのみ、特定の文字(丸数字など)をフォームで入力した場合に消えてしまことがある
DoCoMo、特定の文字実体参照（…など）を表示できない機種がある

【ドキュメントタイプ】
DoCoMoのFoma端末は、HTML(DoCoMo独自)モードとXHTML(DoCoMo独自)モードを別々に持ってる

【絵文字】
ちょっとエグイですね；；
手入力する場合のSoftBankがストイックすぎる

※エグ過ぎるゆえに変換用ライブラリが多数あり
-----

できれば、『基本となるテンプレートからキャリア振り分けで出力』という感じで運用したいと考えているのですが。うむむ

見た目の確認はエミュレータでそれなりに出来るのですが、

• フォームやメールでの文字化け、
• IME入力モードの指定、
• 短縮キーの動作、
• 位置情報取得時の確認画面

●参考にしたサイト：
●３キャリア対応のテンプレートの話 - ゆどうふろぐ
●3キャリア対応ケータイXHTMLのTIPS 8つ : アシアルブログ

●絵文字関連
●絵文字データベースと相互変換マッピングデータベースのJSONファイルを公開します。 : アシアルブログ
●PHP携帯絵文字表示ライブラリ (PHP埋込型・au絵文字名対応版)
●絵文字対応表

CSSのセレクタやプロパティでのハック一覧が便利

●セレクタでのCSSハック一覧表｜web bibo
●プロパティでのCSSハック一覧表｜web bibo

とても見やすくまとめられていて、素晴らしいです。
随時更新されておられるので、IE8やSafari3も対象に入っています。

複数人で開発を進める時に、自分の知らない記述方法が使われていると、どのブラウザをターゲットに何を回避しているのかを理解するのに時間を費やしてしまうこともあります。
社内や作業チーム内でこのような一覧表を用意すれば、コーディングルールの統一に便利かも知れません。

このようなハックを使う場面は、IE6への対応という部分が多くなってくると思います。
IE6の挙動をIE7互換にしてくれるJavaScript「ie7-js」というものもあります。

IE6で起きる以下のような悩みを、解決できるようです。
・透過 PNG が透過しない
・min-width/max-width が通じない
・position: fixed が通じない
・width を % で指定するとうまくいかない

●ie7-js - Google Code

IE8をインストールしてみました

スクリーンショットをたくさん載せようと思ったのですが、『更新プログラムの確認』からインストールしたので2画面表示されただけで、特に面白いものはなかったです（＾＾；

初めて起動した状態。

ツールバーが、大変なことになっていますね(>_<)
VAIO typeP みたいなマシンだと画面の半分がツールバーになりそう

設定を変更してみましたが、たいして変わらず
Nortonって、ツールバーを非表示にすると機能も失われるのですね。
フィッシング対策をしつつバーは非表示って出来ないのでしょうか？

少しさわってみて最初に疑問に思ったのが、タブの色。
検索してみると、タブグループと言って、あるタブから開いたタブが同じ色になるみたい。
配色はランダムのようなので、いくつか開くと気持ち悪い色の組み合わせになることも。

このグループは、あくまでそのタブから開いたタブ」というだけなので、
・ヤフーからMSNを開き、そのMSNからGoogleを開いても、もちろん同じグループ
逆に
・違うグループだと、同じURLでも違う色。

驚いたのは、あるグループになっているタブにお気に入りから新たにページを開いても、そのグループのまま。

それと、色が付いているおかげで『現在閲覧中のタブ』や『まだ閲覧していない』がどれなのか非常に解りづらい。

この色づけ機能は私には必要なさそうなのでオフにします。
ツール、インターネットオプション、タブの設定、「タブグループを有効にする」のチェックを外してブラウザを再起動。

『現在閲覧中のタブ』は、少し解りやすくなりました。

まだ少ししか触っていませんが、
アクセラレータは猛烈に便利ですね。FirefoxやSleipnirには以前からありましたが。。。
開発者ツールはよいですね。さわったらクラッシュしたけど。。。
互換表示ボタンもありがたい。制作者しか使わないような気がしますが。。。

もう少し、使い込んでみたいと思います。

個人的には、マウスジェスチャがないのは普段使いには致命的。
OS常駐型になりますが、●「かざぐるマウス」というフリーソフトが、VISTAでも使用できて良い感じのようです。

MT再構築時間の比較記事が秀逸

●ロリポップを卒業したい人のためのレンタルサーバー選び2009（MT再構築比較編） :Heartlogic
さくらサーバ、チカッパ、80code.com、ヘテムル、Xserverでの、Movable Type 4.22での再構築にかかる時間を比較した記事。
8時、12時、23時の時間別にテストされた、とても内容のあるものだと思います。

使用されたデータベースが書かれていないのですが、再構築に関しては、データベースによってもかなり変わってくるかもしれません。

ふと思ったのですが、テンプレートとサンプル記事1000本程度をパックにした「比較テスト用MTセット」みたいな物があれば、便利かもしれませんね。

私、個人的には、ロリポ、Xserver、CORESERVER.JP、さくらサーバ、その他海外などを利用してきましたが、現在は「Xserver」と「さくらサーバ」を利用しています。
Xserverは、一度も止まったことがなくMySQL5,PHP5への対応なども着実で、気がつくと一番長く契約しているサーバーになっています。