ホームページ制作のアレ

Website Design tips array.

IE8以上なのにレイアウトが崩れていると言われたら、互換機能を疑う。

2013/07/11
ブラウザーチェックをばっちりやって納入したのに、IE8やIE9でレイアウトが思い切り崩れていると言われる。 見せてもらうと、まるでIE6やIE7で表示したような崩れ方。 この症状の場合、ほぼ100%そのIEの「互換機能」がONになっているのが原因と思われます。 互換機能という名前からして「いいもの」と思われがちですが、実のところは「IE8以上でもまともに動かなくなるような旧い旧いシステム(…どんなものか想像もつきませんが)を搭載したWEBサイトでも、IE8以上で見られるようにする」という機能で、端的にいうと「解釈をIE7程度に戻す」という機能です。 いわば、「旧式ブラウザー表示機能」と言えます。 …しかし先にも書きました通り、マイクロソフト自体がIE6/IE7を撲滅しておきながらこの機能、一体なんなんだと言わざるを得ません。 この機能を制作側で回避するには2つ方法があり、 1、Doctypeをがっちり書いておく…HTML5のDOCTYPEにしておけばIE9/IE10では最初から標準モードになるはずですが、ASPの利用などでそうもいかない場合もあり、そもそもIE8がこぼれてしまいますので 2、METAタグを書く < meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" /> と書く事で、モードを強制的にそのIEの「最新Verでレンダリング」に固定でき、互換機能ボタンを消せます。 —————- 余談ですが、この機能、IE8や9ではあまり心配する必要がありませんでした。 ちゃんとボタンとして独立しているため、意図的に押さない限りまず発動しませんし、自分で押した結果レンダリングが変わったというのが分かるので、もう一回押せば元に戻る、というのもすぐ分かるためです。 ところがIE10になって、ボタンのデザインが… gokan こんなですよ。(※紙が破れたようなマークが互換ボタン) どう考えても「再読み込み」と間違えておします。 このレイアウト考えたデザイナー、なに考えてるんでしょう。 普通こんなん上げてきたらグーで殴られてもおかしくない酷さだと思います。 —————- IE10へのバージョンアップがはじまった今、今後はもう上記のをデフォで書いておく必要があると思いますが、問題は… このタグ、ヘッダのかなり上、おそらくはエンコードのすぐ下くらいの順位で書かないと場合によっては動作しない事があります。なので弊社が得意とするカラーミーSHOP-PROなんかでは使えない方法なんですよね。 ※カラーミーSHOP-PROのMETA追加はヘッダ内の「一番下」に追加される 実際やってみましたが、IE8/9では対処できたものの、IE10では互換ボタンがでたままという… 肝心なIE10が対処できないという結果でした。

WordPressとMovabletype、どちらが良いか。

2013/07/03
WordpressとMovabletype、どちらが良いか。 WEB制作系のブログを書く人なら、一度は必ずネタにする話ですね。 勿論、うちはDrupal!Joomla!や、カスタマイズされた有料CMSパッケージサービス!という方も沢山いるとは思いますが、やはり日本でCMSのビッグタイトルといえばWPとMTというのは確実なところかと思います。(※海外ではWPが圧倒的です) 日本でもいうまでもなく今はwordpressのほうが優勢ですが、弊社はMovabletypeをお奨めするケースがあります。 —– CMSを導入するお客様にとって、大きな「障壁」が3つあります。 (1)ひとつは(CMSに限りませんが)プレーンなWEBに何かシステムを追加する事による「セキュリティの問題」 (2)もうひとつは万一のデータベース破損による「バックアップの問題」 (3)そして最後が「直感的な管理画面の問題」です。 上記のうち(1)はwordpressが圧倒的に優れていますね。今まで見てきたCMSの中でも、WPのアップデートのしやすさは秀逸です。管理画面に「アップデートのお知らせ」がでたら「このボタンを押せばOK」と嫌でも分かるこのインターフェイスは実に素晴らしいです。OPENPNEあたりはこの簡単さを是非見習ってほしいものです。UIというのは「分かる人だけ分かればいい」というものでは絶対にありません。 (2)はwordpressにも優れたバックアップツールがいくつもあり、自動的かつ定期的にバックアップを取ってくれます。一方Movabletypeは基本のバックアップ機能はいちいち手動操作ですが、そもそも静的HTMLを吐き出すシステムなので万一のDBクラッシュが起きてもとりあえづホームページが見られない状態にならない、というのは非常に大きなアドバンテージです。 ※Wordpressにも静的化プラグインはありますが、どうも動作関連や他プラグインとの相性で問題があります。 ※wordpressはクラッシュが起きたら修復するまではWEBサイトは壊れたままです。 まぁ今時のレンタルサーバは大抵データベースのミラー化を採用してますのでこのような事態はまずありませんが、ごく稀にRAIDを採用していないレンタルサーバもあります。某大手とか… で、弊社がMovabletypeをお奨めする大きな要因になるのが、以外にも(3)です。 Wordpressもカスタム投稿タイプの導入により、コーナーの分類はMovabletypeと互角の仕様になったと言えますが、管理画面がどうしても、それぞれのコーナーへの入り口が縦一直線に並んでしまいます。これが弊社としては、わかりづらいと感じています。 (勿論管理画面自体を改造すれば解消できますが、そこまでの予算をかけられない場合が多数ですので…) MovabletypeはWEBサイト→それぞれのコーナー→それぞれのカテゴリとツリー式になっているため、WEBに不慣れなお客様でも分かりやすい管理画面構造をしているのがポイントなのですね。 —– ですので弊社としては、 頻繁に更新するページが一箇所のみ、もしくは少ない→Wordpress 全てのページをある程度更新する可能性がある→Movabletype という風に提案を分けております。 あ、あとあれですね、どうしても特定のメールフォームを使いたいというかcontactform7以外を使いたい時。 あとハウジングの同居数が多そうなサーバだと、静的HTMLを出してくれるMTのほうを使いたいです。 投稿時は圧倒的にWPのほうが速いのですが、それは投稿する側の快適性の問題であって、閲覧する側はプレーンなHTMLで見られるのがより良いのではないかと思っています。 …勿論、プラグインの関係で、どうしてもWordpressでないといけないというケースもあります。 今は大抵の要件はjqueryのプラグイン導入でどうにかなりますが、そうもいかないケースもやはりありますからね。