ホームページ制作のアレ

弊社ホームページを2014年版にリニューアルしました。 今回のポイントは ■スマホ最適化のためレスポンシブデザイン導入 ■もうIE8は切り捨てると決めて、CSS3を使用しはじめた あたりになります。 閲覧ユーザー中のスマホの比率は年々上がってきていますが、去年あたり特に大きなインパクトがあったらしく、もはや最適化なしではこの先不安、という状況になっておりましたので、レスポンシブデザインを採用してみました。 弊社のように更新するページが一部分に限られているサイトの場合、本来はモバイル向けに別ページを作るほうが向いていると思いますが、単純にレスポンシブデザインやってみたかったので、やっちゃいました。 今年の4月を持ってWindowsXPのサポートが全て終了＝IE8終了となるわけですが、CSS3を使うにはまだIE9というもう１枚でかい壁が残っています。このあたりでどのような構築にするか悩んだ訳ですが、やはりレスポンシブデザイン優先…という事で、IE9以下のブラウザには、余分な読み込みになりますがcss3-mediaqueries.jsを使わせてもらう事にしました。 他に擬似要素やアニメーションなど、対応していなくてもレイアウトが崩れないような場所にはCSS3を使いまくっています。 あと１つのネックはHTML5対応なのですが…いい加減各陣営仲直りしてもらいたいものです。

きつい見出しになりますが、久しぶりにMakeshopを覗いてみてびっくりしました。 未だにMakeshopではdoctypeが出力されません。 こう書いた時点で、コーディングに理解のある人なら、ああ…と思い当たるかと思いますが、 doctypeが無い（※html5の　!DOCTYPE html　が書いてある、という訳ではありません。doctypeそのものがないのです）という事は、IE8はおろか、IE9で見ても標準で互換モードになってしまうのです。 試しにサンプルショップをIEの開発者ツールを開いた状態でみていただければ、「ドキュメントモード：IE5Quirks」という寒気のする文字が見られると思います。（IE10だけは互換モードが進化しているので無事） しかも、カテゴリーリストや商品一覧の表示が、現在もう先進的なサイトでは完全にCSS3に移行している所も多くなっているこの時勢に、未だにガチガチのテーブルコーディング、しかもtableの多重入れ子になっています。 とにかくIE9でもしょぼい互換モードになってしまうので、それ相応の対応をしなければなりません。 IE=edgeいれときゃいいんじゃね？とお思いかもしれませんが、Makeshopは決められたMeta以外ヘッダをいじらせてもらえないのです… 即ち、互換モードが既定になってしまうのを防ぐ方法はないのです。 いつまでこんな時代遅れの設計にしておくのでしょうか。

ニュース記事より 「ＸＰ期限切れ、自治体「攻撃めったにない」」 それを言ったら、地震などの災害だって滅多にないから対策が遅れても大丈夫、てことになるじゃないですか。 仮にも「ＩＴ推進課」でこういう事言っていられるのは、ある意味羨ましくあります。 致命的な状態を招いても自分の生活に影響しないからこそ、安穏としていられるのでしょうね。

先月末あたりから、ディレクトリ登録サービス宛てにgoogleからリンクにnofollowを付与するようにというメッセージが来た、という話をちらほらみかけるようになりました。 まだ提案段階でペナルティの実働はないようですが、弊社のSEO解説ページでも前々から書いております通り、googleの目的は一貫して 「自社のキーワード広告以外にお金をかけてgoogle検索上位表示させる仕組みを潰す」、即ち商売敵を潰すという事でしょう。 サービスを売る側の立場としては、うちのコンテンツで優位に立ちたかったらうちに金を払うのが当然、という姿勢は営利企業としてこれまた当然ですので、この点はどうこう言えません。 問題はこの先、いつになるかは不明瞭ですが確実にYahoo!ディレクトリ等のほかのディレクトリ登録サービスにも同様の影響が出てくるであろうという事、そして当然ながら、近いうちによくある「リンク○個保証」と謳っている被リンクサービスにもその影響は及んでくるでしょう。 （勿論、多数の自社運営サイトでそれぞれちゃんとオリジナルのコンテンツを運営しているような所なら話は別ですが） 上記の通り今はまだ影響は些少なようですが、なにせgoogleは全ての判断をオートマチックで行う、というのがポリシーの会社ですので、怪しいと思われる行為はしないにこした事はありません。 影響が些少な今のうちに有為なコンテンツを増やしたりする地道な施策を併せて行っておくのが正解かと思います。

ブラウザーチェックをばっちりやって納入したのに、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になって、ボタンのデザインが… こんなですよ。(※紙が破れたようなマークが互換ボタン） どう考えても「再読み込み」と間違えておします。 このレイアウト考えたデザイナー、なに考えてるんでしょう。 普通こんなん上げてきたらグーで殴られてもおかしくない酷さだと思います。 —————- IE10へのバージョンアップがはじまった今、今後はもう上記のをデフォで書いておく必要があると思いますが、問題は… このタグ、ヘッダのかなり上、おそらくはエンコードのすぐ下くらいの順位で書かないと場合によっては動作しない事があります。なので弊社が得意とするカラーミーSHOP-PROなんかでは使えない方法なんですよね。 ※カラーミーSHOP-PROのMETA追加はヘッダ内の「一番下」に追加される 実際やってみましたが、IE8/9では対処できたものの、IE10では互換ボタンがでたままという… 肝心なIE10が対処できないという結果でした。

実に４年以上ぶりに、弊社サイトをリニューアルしました。 ただこのデザイン、２年前に作成しかけで、業務に手一杯になり放置されていたものを完成させたもので、 現時点で作りたかったものではありません。 ※コンテンツ文章の見直しなども全然できていませんし いつまでもTOPにFlashを置いている事態だけはなんとしても一刻も早く改善したかったので、このような ２段階のリニューアルに踏み切った次第です。 あくまで「つなぎ」の状態ですが、今後とも宜しくお願い致します。 このブログのテンプレートまで手が廻らない状態ですので、しばらく既存のテンプレートを使用しておきます。

弊社は高度なプログラムの制作は許可を頂いた上で下請けに出しているのですが、今回その下請関連でかなりひどい目にあってます。 窓口の人には何の罪もないんだけど、連絡を取れるのがその人なのでどうしてもきつめの対応になってしまう。 申し訳ない限りです。 自社製作なら遅れる事はありえないし、自分の努力次第でどうにもなるんですが、こういったケースではとにかくあの手この手で 連絡をつけるしかない。非常にもどかしいです。 しかしなんなんですか本当に。きちんとセーフティネットができていない会社とか信じられない。

最新の統計では、IE勢で約50%、残りがモダンブラウザ、という風になっているようです。 http://www.netmarketshare.com/browser-market-share.aspx?qprid=2&qpcustomd=0 TOPがIE8というのがWEB屋にとってはまだまだ頭が痛いところです。 CSS3PIEを使うにしても、完全に同じ挙動が使えないため、表現法の幅が狭くなったり、ソースコードが重くなったりといい事はありません。早いとこ最低レベルをIE9にしてほしいものですが… ただcss3はcss3で、いつまで内輪もめしているんだという感はぬぐえません。 いちいちwebkit系用、Mozzila用…と3つも記述しなければいけないのは冗長の一言につきますので、 はやいとこ正式勧告としてほしいものです。 しかしIE6ユーザーがまだいるのが恐ろしいですね… 強制的にWindowsupdateを切っていればIE6は保持できると思いますが、ブラウザシェア調査にひっかかっているということは、その状態でネットを閲覧しているって事ですよね。恐ろしい。

あまりにひさびさのBlogになって恐縮ですが、 http://www.microsoft.com/ja-jp/windows/lifecycle/sp3eos.aspx こちらのページにある通り、2014年4月9日、すなわちあと11ヶ月後にWindowsXPの延長サポートが終了します。 そうなるとどうなるか、といいますと、セキュリティアップデートが行われなくなり、終了後に発生した問題・Web脅威に対する対処がなされなくなります。 「アンチウィルスソフトを導入しているから平気じゃないか」とお考えの方もおられるかもしれませんが、それは「エアバッグを搭載しているからシートベルトをしなくても平気じゃないか」とまったく同じ考えで、 実際はエアバッグはシートベルトをしていて初めて効果が出るように、アンチウィルスソフトもWindows本体を適宜セキュリティアップデートしていて、はじめて有効に動作します。 そもそもWindowsXPはすでに発売から10年が過ぎており、構造そのものが既に古く、使用には適しません。 Windows7は使用感がXPと似ておりますので、フィーリングだけの問題でしたら、今すぐ乗り換えても違和感はでませんので、乗換えをお奨めいたします。 尚、ここからホームページ制作に関わってくる問題となりますが、WindowsXPのサポート終了に伴い、確認ブラウザーのうち、Internet Explorerの最低バージョンが「9」となります。 http://technet.microsoft.com/ja-jp/ie/hh859701.aspx こちらのページにある通り、IEはすでに「強制的アップデート」がなされており、WindowsVistaはIE9に、WindowsxpはIE8に強制的にバージョンアップされています。このうちWindowsXPが消えるので、IEの最低ラインが「9」となります。 これに伴い、来年4月10日以降、弊社でもアクセス解析のブラウザー比率を検証しつつ、基本対応ブラウザーからIE8以下を外す事を検討しております。 ※WindowsVistaでもSP（サービスパック）をあてていない方はIE7や8を保持する事は可能ですが、そもそもサービスパックをあてていないということは巨大なセキュリティの穴を意図的に放置している事と同義であり、弊社としてはその場合「まずSPをあててください」とお願いする事になります。 セキュリティの穴を放置するということは、自己の環境を危険に晒すだけに留まらず、ウィルス等脅威に感染したPCから発送されるメールやホームページの改ざんを通じて、閲覧者をも脅威に晒す可能性があります。 ですので、セキュリティ対処を常に最新の状況に保っておくことは、お客様に対する最も重要かつ基本のサービスであり、ホームページの制作・コンテンツの充実・チューニング云々よりも真っ先にとりかかるべき事だと弊社では考えます。

Microsoft、IE 6終了促進のカウントダウンサイトを立ち上げ このようなニュースがあります。 遂にIE6は、発売元からも使用しないよう呼びかけられる存在となっています。 現在、古いブラウザに対する対応が最も広いと思われているYahoo!Japanも、既にIE6対応を終了しておりますが、今後IE6対応終了の動きは間違いなく加速してゆきます。 IE6はWindows XPの無印状態に基本搭載されているブラウザです。 WindowsXPに対し、バージョンアップなどを適切に当てていれば既にIE7以上になっているはずですが、それでも未だに20%弱のユーザーがIE6を使用していると解析されています。 弊社では現在でもIE6向けのブラウザ確認をしておりますが（※実ソフトではなく、エミュレータIEtesterによる）、 お客様におかれましては、できましたらIE8以上に更新をお勧めいたします。