XHTMLになった時に、苦労してCSSにスタイルをまとめる方法のXHTMLを時間をかけて学んだものです。次に対応したのが、携帯サイトいわゆるガラケーサイトの３キャリア対応の具合を見ながらiモードやezWEBと睨めっこしたものです。

今後重要なスタンダード技術は、

1. マルチデバイス対応（PC、スマホ、ガラケー）
2. HTML5
3. Facebookページ等ソーシャルメディア

この３つが新しく習得しなければならない技術となってきますが、どれかを省略していい訳ではなく、全て３つとも必須のスキルとなるところが痛いところではあります。HTML5とマルチデバイス対応は一応似ているといえば似ている部類になり、さほど隔たりはないのですが、スマホ独自のレイアウトの種類を把握する必要あります。

また第二のホームページと言われるFacebookページももはや必須のコンテンツとしての受け皿になっていることは間違いなく、Twitterよりもウェブ制作者としては制作という意味でもFacebookは対応していかなくてはならない。

覚えることがまた増えてきている感じではありますが、良いコンテンツが全てであることには変わりはありません。新技術の対応に気が取られて貧弱な内容のサイトになっては元も子もないので、徐々に覚えていくしかないのかなと感じている。

この三大新技術は丁度、雑誌WEB DESIGNINGでも９月１０月１１月の特集になっていて、タイムリーな話題をしっかりとフォローしているWeb制作雑誌は他にはもうほとんどなくなっている感じもします。１２月jQuery特集とウェブフォントのフィーチャーとなっています。Flashの埋没が、jQueryの代等として技術的に必要となり、需要が浮上していることもあり、限定的ですがJavaScriptも使えるに越したことはない。

SSLページいわゆる暗号化されたhttpsページの制作では、
そのページに httpの通常URLでの画像が入っていたり、
外部パーツが入っているとSafariやIE6なら特に警告表示されないので
気付きづらいのだが、ChromeやFirefoxではあからさまにURLの左に
警告アイコンが出て、通信が安全ではありませんとマークが出る。

同じサーバー、同じドメインでもhttpが含まれていると画像表示はされるけど、
ダメなので、全ての画像などは相対パスやサイトパスで書くと安心です。

また、アクセス解析が困りダネで、Chromeではhttpが含まれてると
イエロー警告ですが、javascriptなどの外部アクセス解析が入っていると
レッドカードの１発表示がされます。しかし、さすがはGoogle Chromeで、
Google Analyticsではれば警告は出ずに青信号の鍵マークのままです。

当サイトはエックスサーバーを使っているのですが、
php includeの記述はChromeでもFireFoxでも安全ですの鍵マークでした。

後は、docomoのiモード1.0の携帯を携帯サイト閲覧用に用意してるのですが、
画像がhttpで記述してあると表示もされませんでした。

ネットショップの構築ではもちろん必須のSSLですが、最近は意識している
エンドユーザーも多いことでしょうし、独自SSLの導入やまだまだhttpのままが
多いですが、問い合わせフォームなどもSSL暗号化が今後は必要な感じです。

共有SSLでもいいと思いますが、ちょっとカッコつかない場合もあります。
独自SSLも安くなってきているものもあるので、サイトシールとかが発行
されるものを専用SSLでは使っていきたいですね。

フォームのテキストエリアをカーソルでなぞって、コピーするのはちょっと面倒！という時に便利なのが、このJavaScript。マウスオーバーで選択できるものと、領域をクリックすると全てが選択されるものの二種類があります。

マウスオーバーで全文選択されるタイプは、一般のOS操作とちょっとかけ離れる場合もあるので、一般のユーザービリティ用には、テキストエリアをクリックすると全選択されるタイプの方が、迷いがないというか間違えないというか、意外とクリックの方がいいと思います。

ちょうどECサイト何かで複数画像のサムネイルがあって、クリックで拡大するか、マウスオーバーで写真を拡大するかみたいなのに似ていますね。画像拡大の場合もユーザービリティ的には、クリックで拡大の方が一般的というか、普通のユーザーに使ってもらうことを前提のサイトはクリック操作にするべきだというユーザービリティが一般的なようです。クリックもしないのにマウスオーバーで表示が変わったりするのを気嫌うユーザーさんがいるらしいです。自分用であれば、マウスオーバーの方が早くていいですけどね。

クリック全選択の場合
<input onclick=”this.select(0,this.value .length)” size=”20″ type=”text” value=”●●●●●” />

マウスオーバーで全選択の場合
<input onmouseover=”this.select()” size=”20″ type=”text” value=”●●●●●” />

ページのリロードをボタンで表示する時に、使うタグ。

【リロード・最新の情報に更新F5 してください】と記載するより
リロードボタンがあった方が、直感的でブラウザに慣れていない人に
とっては、ユーザービリティが良いかと思う。

HTMLで記述するやり方があり、javascript:history.go(0) を
紹介しているところが目立つがFireFoxに対応していない。
しかし、ご安心 javascript:location.reload() なら対応している。

記述例○：FireFoxおよびIEやSafariなど主要ブラウザ対応

<button onClick=”javascript:location.reload()”>ページを更新する</button>

記述例×：FireFox非対応のリロードボタン

<button onClick=”javascript:history.go(0)”>ページを更新する</button>

また、<button>タグでなくても<from>タグと<input>タグでも
HTML記述できるが<button>タグの方がカッコイイ。

<form><input type=”button” value=”更新する” onClick=”javascript:location.reload()”></form>

javascriptなので、携帯サイトには使えないが。
実際こんな感じ（リロードしても特に何も変わりません！）
ページを更新する

フォームタグの送信でCGIなどに送信する場合、送信側と受信側でどうしても文字コードが異なってしまう場合があります。別サイトにactionするときや、検索窓などウィジェットがあると思います。そんな時に、送信側ページの文字コードで通常は送信されますが、JavaScriptでその送信する内容だけ文字コードを変換して同一化して送れるスクリプトがあるんですね。

非常に助かる機能なんですが、またしてもIE非対応。。。IE8も非対応。。。
FireFox, Safari, Chromeなんかは対応しています。やり方は、簡単でformタグ内に変換したい文字コードを指定するだけでOK！

例

<form method=”***” action=”http://***”>

送り先がEUC-JPの場合
<form method=”***” action=”http://***”Accept-charset=”euc-jp”>

IE対応策として、送信前に元ページの文字コードを変換してから、次に送信アクションをさせる荒技などが紹介されています。
複数の文字コードをformからCGIへ送信する方法