Monthly Archives: March 2011

IEのレンダリングモードをタグで明示的に指定する

地震の影響で日本語版は、リリースが延期になったが、「Internet Explorer 9」がリリースされた。 私も英語版をダンロードしているが、パフォーマンス面で大きな改善が見られる。 ウェブ標準準拠については、IE8で個人的に満足が行くレベルになっていたし、HTML5やCCS3へ新たに準拠しているが、これについては実際に恩恵に預かるのは、まだ先の事と考えている。 私が管理しているHPも当面はXHTMLで記述するつもりだ。 ともあれ、他の主要ブラウザと比較しても遜色のないレベルに仕上がっており、近年のIEとしては、評価に値するバージョンだ。 しかし、ウェブ作成者の立場で、1つ気に入らない点がある。 正確にはIE8から実装された機能だが、アドレスバーに「(後方)互換モード」への切り替えボタンが表示される点が気に入らない。 世の中には、様々なウェブサイトが存在する。 W3Cが勧告するウェブ標準に沿った記述がされているサイトもあれば、ウェブ標準からズレたサイトもある。 その為、多くのブラウザは、複数のレンダリングモードを持ち、ウェブ標準に従ったサイトも、そうでないサイトも、綺麗に表示されるように工夫されている。 実際、FireFoxなどにも、ウェブ標準に基づいた解釈する「標準モード」や「ほぼ標準モード」の他、「(後方)互換モード」というウェブ標準からズレたサイトを表示するレンダリングモードが実装されている。 通常は、HTML上の「DOCTYPE」の記述によって、ブラウザがレンダリングモードを自動的に判断してる。 勿論、IEも例外ではない。 しかし、IE8以降では、ユーザーが「互換モード」へ明示的に切り替えるためのボタンが付いている。 IEの場合、過去の経緯から「DOCTYPE」での判断だけでは、不順分なため、「もし、綺麗に表示されなかったら押して下さい。」的な、親切機能として付いているのだが、逆に、「DOCTYPE」による自動判断で正しいレンダリングモードが選択されるような記述を行なっているウェブ作成者にとっては、不愉快な機能だ。 書類が破れたように見えるアイコンで、見た目も良くない。 加えて、ユーザーが間違って押せば、予想外の結果を招く可能性もある。 そこで、IE8が登場してからは、このアイコンを消すためのだけに、ある「metaタグ」を追加してきたが、このブログには、追加していなかった。 IE8やIE9には、ブラウザモードとドキュメントモードという2つのモードがある。 ブラウザモードは、ブラウザの「振る舞い」を決め、ドキュメントモードは、所謂、レンダリングモードを指し、描画を決定している。 IE8やIE9を開いた状態で、「F12」キーを押すと、開発者ツールが表示されるが、ここで、ブラウザモードとドキュメントモードが切り替えられ、様々な描画条件での表示を確認する事ができる。 これはあくまで、開発者ツール上の機能で、一般向けではない。 ユーザーやサイト作成者が、ブラウザモードやドキュメントモードを明示的に指定する方法もあるが、正しく、HTMLを記述してさえいれば、通常は全く意識しなくて良い。 IE9では、4つのブラウザモードを実装してる。 IE9・・・IE9して振舞う。 IE9互換・・・「互換モード」ボタンを押したときに、このモードになる。IE7として振る舞うが、サーバーが受け取るユーザーエージェントから、本当はIE9であることも分かる。 IE8・・・IE8として振舞う。 IE7・・・IE7として振舞う。 具体的にブラウザモードを説明すると、ブラウザモードの切替で、IE9でも、IE7のように振舞わせる事ができる。 例えば、ブラウザモードをIE7に切り替えれば、サーバーが受け取るユーザーエージェントのバージョン情報もIE7になる。 しかし、ドキュメントモードは、別だ、ブラウザモードの切り替えだけでは、ドキュメントモードは変わらない。 ブラウザモードがIE7だが、ドキュメントモードはIE9標準という事もあり得る。 ただし、「互換モード」ボタンを押した時は、ブラウザモードだけでなく、ドキュメントモードも自動的に変更されるようになっているようだ。 ドキュメントモードは、描画、つまりサイトの見た目に影響する。 IE9に実装されているドキュメントモードは4つだ。 IE9標準・・・(標準モードの)IE9での描画になる。 IE8標準・・・(標準モードの)IE8での描画になる。 IE7標準・・・(標準モードの)IE7での描画になる。 Quirksモード(所謂、互換モード)・・・IE5での描画に近い。 ドキュメントモードは、HTML上の「DOCTYPE」の記述に従って自動選択されるので、「DOCTYPE」を正しく記述していれば意識する必要はない。 しかし、HTML側で明示的にドキュメントモードを指定する「meta」タグがIEでは用意されている。 細かな文法は割愛するが、下記のような「meta」タグだ。 <meta http-equiv=”X-UA-Compatible” content=”IE=8 ; IE=9″ /> 上記の例では、IE8で参照した場合は、ドキュメントモードは、IE8標準モード、IE9で参照した場合は、IE9の標準モードが選ばれ、「互換モード」ボタンが表示されなくなる。 追加しなくても良い、むしろ不要なタグだと思うが、IE8、IE9から「互換モード」ボタンを消したい場合は、最も手軽の方法だ。 このタグは、ドキュメントモードのみを変更し、ブラウザモードやサーバーが受け取るユーザーエージェントには影響を与えない。 少なくとも、IE8ではそうであったが、IE9では、少し違うようである。 ドキュメントモードは変化しないが、サーバーが受け取るユーザーエージェントは、ドキュメントモードに合わせて変化する。 私は、ドキュメントモードやユーザーエージェント、その他の振る舞いを確認できるページを作成してチェックした。 以下で、ブラウザーモード、ドキュメントモード、ユーザーエージェントなどを確認できるHTMLをダウンロード出来るようにしておく。 サイズ:2KB さて、ここまでは、横道。 本題は、このサイトから「互換モード」ボタンを消す事であるが、私がWordPressで使用しているテーマ「Weaver 2.0」の場合、HTML5を先取りしたのか「DOCTYPE」や「meta」タグの記述が少し変わっている。 もし、気になるなら、まずは、これを変更する。 現時点ではHTML5に関する知識がないので正しく判断できないが、おそらく、このテーマはHTML5で記述されている。 試した限りでは古いブラウザでも表示に問題はなく、必ずしも、この修正は必要ではない。 変更は、テンプレートの「ヘッダー(header.php)」に対して行う。 まず、 ?><!DOCTYPE html> <html <?php language_attributes(); ?>> <head> <meta charset=”<?php bloginfo( ‘charset’ ); ?>” /> という記述を <?php echo ‘<?xml version=”1.0″ encoding=”utf-8″?>’; ?> <!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” <?php language_attributes(); ?> xml:lang=”ja”> <head> <meta http-equiv=”Content-Type” content=”text/html; charset=<?php bloginfo( ‘charset’ ); ?>” … 続きを読む →

Posted in WordPress, ネット・PC | Tagged , , , , | 4 Comments

海外向けの販売に便利なショッピングカート「Ecwid」

個人的に、仙台在住のデザイナーさんが手がける、手作り手帳の海外向け販売をお手伝いしている。 非常に素晴らしい出来栄えの革の手帳である。 デザイン・ワイ 私は、海外でのマーティングを得意としているわけではないので、残念ながら沢山売れているわけではないのだが、「こんな少ないアクセスでよくも」と思えるほど、コンスタントに売れている。 そもそも、沢山受注しても、手作りなので、注文を処理出来ないのだが・・・。 驚いたことに、非常に高い確率でメール、お手紙、場合によっては、なんと、お礼の品という形でフィードバックが届く。 海外でも非常に高い評価を受けているようだ。 本来のブログのテーマからすれば、この手帳の事を書くべきだが、手帳の話は別の機会に書くことにする。 現在、海外向けの手帳の注文は、メールフォームで受け、折り返し、メールで支払先の「PayPal ID」を連絡する形で対応しているが、使い方が分かり難いという意見があったり、間違った金額を支払われたりすることもある。 また、コンスタントに注文も来るので、出来れば管理上の手作業を減らしたい。 そこで、ショッピングカートを導入しようと、昨年末から、様々なカートをテストしてきた。 その結果、1つのカートに絞ったのだが、それがロシア生まれのショッピングカート「Ecwid」である。 「開発元である「Creative Development LLC」は、「XCART」などのショッピングカートも手がけており、この分野に強い会社のようだ。 「Ecwid」は、サーバーにインストールするタイプではない。また、ホスティング型のサービスでもない。 「JavaScript」で記述されたコードを、自分のサイトに貼りつければ、そのページがショッピングカートになる。 サーバーではなく、ブラウザでの演算に依存する手法なので、理屈的には、「JavaScript」の使用に制限のないホームページ、サーバーなら、場所を選ばず、「Ecwid」を利用出来るのだ。 有料版と無料版が用意されており、無料版でも十分な機能を持っている。 管理機能や受注データの保存は、「Ecwid」サイトのコントロールパネル内で行っているので、ホームページさえあれば、特に追加投資無く、ショッピングサイトを構築する事が可能である。 「Ecwid」の利点としては、 自サイトへの導入が簡単でサーバーに依存しない。 サーバーやサイトの移転の際の作業が簡単。 多言語表示に対応。 たっぷりと画像や動画を使って商品ページの作成が可能。 ダウンロード製品の販売にも対応。 柔軟な配送設定が可能。 柔軟な決済が可能。 決済方法としてPayPal、GoogleCheckoutをサポート。 携帯電話用ページも作成出来る。 Facebookページに、カートを表示させる事が可能。 プラグインを利用してWordPessに表示させる事も可能。 などが上げられる。 しかし、「JavaScript」を利用しているため、スクリプトの読込みにやや時間がかかる印象がある。 また、ページ全体をSSLで暗号化出来ないため、フォームデータの送信に関しても不安があるが、最低限のセキュリティは施されている。 加えて、カートやメールはUTF-8でエンコードされているため、日本の携帯電話では、機種によっては、2バイト文字が文字化けする可能性があるが、海外の携帯電話では問題ない。 「Ecwid」が提供するショッピングカートは、シンプルなデザインで、様々なサイトにマッチする。 デザインが気に入らなければ、CSSでカスタマイズする事も可能だ。 買い物の仕方も、一般的なカートを踏襲したものであり、顧客が使い方に悩むことはないだろう。 技術的にはAjaxが使われており、ページを移動してもページの再読込みが発生しないので、買い物をする側としても楽だ。 携帯電話用のページも用意されているが、フルブラウザでの参照を前提としており、HTMLで記述されている。 画面が小さい携帯電話でも、無理なく表示できるように、横幅が狭く、画像も極力廃したデザインになっている。 ショッピングカートの表示言語は、コントロールパネルから設定出来る。同時に複数の言語が設定でき、顧客のPC環境に合わせて、自動的に表示言語が選択される。 英語の他、ブラジルポルトガル語、ブルガリア語、中国語、クロアチア語、チェコ語、デンマーク語、オランダ語、エストニア語、フランス語、ドイツ語、ギリシャ語、ヘブライ語、ハンガリー語、インドネシア語、ラトビア語、ポーランド語、ルーマニア語、ロシア語、セルビア語、スロベニア語、スペイン語、スウェーデン語、タイ語、ウェールズ語に対応してる。 現時点では日本語には対応していないが、後で述べる通り、将来、対応する可能性もある。 追記:Ecwid 7.0から、ショッピングカートについては日本語での表示に対応。ただし、管理画面のメニューは、日本語表示されない。 多言言語表示と言っても、あくまでショッピングカートの表示言語であり、コントロールパネルの表示言語は英語を基本としている。 しかしながら、テスト段階であるためかスマートなやり方とは言い難いものの、コントロールパネルの表示言語を切り替える事も可能だ。 現状、英語、ロシア語、フランス語、ドイツ語、イタリア語に対応している。 なお、コントロールパネルの言語の切り替え方法については、ナリッジベースの「Backend translations」に記述がある。 「Ecwid」では、ショッピングカート上のラベル(表示)をJavaScriptによって書き換える機能も提供している。また、エンコードがUTF-8であるため、日本語などの2バイト文字での置き換えも可能だ。 このラベルの置き換え機能を利用した、言語インターフェースが、JavaScriptの形でダウンロード出来るようになっている。 How to install other storefront translations? 現状、用意されているJavaScriptは、ノルウェー語、トルコ語、フィンランド語、リトアニア語、イタリア語のもので、画像として表示されるボタンの置き換え方法は、「How can I translate or change buttons?」でまとめられている。 ただし、この手法で言語の変更を行った場合は、コントロールパネルで設定した言語の自動切り替えが無効になる。 つまり、使用したJavaScriptに応じた1言語のみでの表示となり、様々な国に向けの販売には向かない。出来れば、言語の設定はコントロールパネル内で完結させるべきだろう。 また、これらのJavaScriptは、現行バージョン用に作成されたものではなく、置き換えも不完全で、翻訳されないラベルも発生する。 「Ecwid」では、ラベルを置き換えるJavaScriptを簡単に作成できる「Ecwid Translate Tool」を提供しているので、これを利用して翻訳や気に入らない表現の置き換えが可能だが、このJavaScriptの使用は、1言語で運営する場合に限り、有効と言える手段だ。加えて、現行バージョンでは、置き換えが不完全である。 前にも書いた通り、最も良い、言語の設定は、コントロールパネル上で設定することだが、必要とする言語に未対応の場合でも、その気になれば、「Ecwid」から提供されるのを待つ必要はない。 「Ecwid」は、翻訳に関してはボランティアを募集している。 翻訳のやり方は、「How to translate my Ecwid store to a new language?」にある。 また、コントロールパネルの翻訳に関してもボランティアを募集しているが、ラベルなどの情報は公開されていないようなので、興味があれば「Ecwid」にコンタクトしてみるのも良いだろう。 実は、私も、ショッピングカート部分だけではあるが、日本語訳を作成し、「Ecwid」に提出した。次期バージョンで採用される可能性もある。 ファイルは、「Japanese language files」で公開されており、その中の「ecwid-ja.js」を使えば、採用を待たなくとも、日本語化が可能だ。 ただし、間違いがあるかもしれないので、使用に関して何の保証もしない。 「buttons_ja.zip」には、日本語版のボタン、「notifications_ja.zip」には、コントロールパネルの「Mail」で設定するためのメール用メッセージが含まれている。 日本語化した場合でも、住所の入力方法までもが日本風に変わるわけではないので、日本国内向けの販売には不向きだ。 これは、仮にコントロールパネル上で日本語の選択が可能となった場合でも同じこと。あくまで、「Ecwid」における日本語版とは、海外から日本に対して販売を行う場合に便利な機能である。 日本人にとっては、コントロールパネルの日本語訳こそ、一番有益かもしれない。 日本語で管理出来れば、海外向けのショッピングサイトの運営が楽になる。

Posted in WordPress, ネット・PC | Tagged , , , , , , | 1 Comment