岐阜ホームページ制作 アイ・ラボ

前回、Facebookページでオリジナルコンテンツを製作する方法を書きましたが、いくつか気づいたことがありますので忘れないうちにφ(..)メモメモ

あ、それとは別に後日、Facebookページの制作方法をスタートからまとめたいと考えています。

まずは文字コードの違いのお話し。UTF-8で制作するのは当然なのですが・・・・

Facebookで使用されている文字コードはUTF-8になります。

数年前までWEBサイトといえばEUC-JPが主流でしたが、最近ではUTF-8が多く使われるようになりました。Facebookもですが、TwitterやGoogle+もUTF-8が使われています。

ところがこのUTF-8、使用する際に注意が必要です。

それが以前書いたこの記事

PHPでUTF-8の文字コードを使用する場合にはBOM付きに注意し、『UTF-8N』というBOM無しUTF-8を使用すること。

実はあれからHTMLを書く場合にはUTF-8Nを使うように心がけていたのですが、今回はこれで問題発生。

はい、見事に日本語が文字化けしましたwww

しかもデフォのFacebookページ部分はまともに表示されて文字化けの発生はiframeの部分だけwww・・・orz

 

文字化けって表示された文字列で、どの文字コードをどの文字コードで認識して表示したかわかるものです。

文字化けのSSはありませんが、表示の文字列を見ると『UTF-8の文字コードをShift-JISとして認識した時の文字の化け方』でした。

最初はファイルの保存で文字コードの指定を間違えたのかと思いました。

確認してみるとHTML、CSS共に『UTF-8N』。

ブラウザでキャッシュが残っている場合もありますが、アップしてはじめてのアクセスでしたのでキャッシュが表示されたわけでもなし。

まさかなと思い、文字コードをUTF-8に変更してアップしなおすと、まともに表示されるようになりました。

この現象、全く原因がわからないんです。

HTMLの製作時にUTF-8Nは普通に使うようにしていますし、作ったサイトでも文字化けするということはありませんでした。

もしご存知のかたがいれば教えていただきたいです。

まだ検証はしていませんがPHPを使った動的コンテンツを組み込む場合、不安が残りますね。

 

次の問題。

web fontが使えない(表示されない)ブラウザがあること。

『いや、それって当然でしょ』

という声が聞こえてきそうですが。

今回起こった問題は通常のwebサイトだとweb fontが表示されるにも関わらず、Facebookのiframeだと指定したweb fontが表示されないということ。

そのブラウザがOpera11.60。このブログの執筆時点で最新バージョンです。

下に並べたのが実際の表示。

Merry Christmas!
WEB CREATOR, GIFU
Welcome to
i.Lab Facebook Page

上記の文にweb fontを使用しています。まずはIE8。“Merry Christmas”にグリーンの文字影がないのはCSSのtext-shadow属性をIE8がサポートしていないから。

次にFireFox8.0。

次にChrome。いつもChromeをメインに制作を行なっています。だって、軽いからw

同じwebkit系のSafari。

ここまでは問題ありません。

さて、Opera。

・・・・もう、がっかりです。

Operaってシェアは少ないものの結構使いかっての良いブラウザです。動作は軽いですし。

当社のサイトもgoogle web fontを使用していまして、Operaでも下のようにちゃんと表示されます。

タイトル部分のImpact風な文字がweb fontになります。

Facebookのiframeのみがなぜ表示されないのか、なぞです。。。

(ちなみにHTML、CSS共にw3cのvalidatorでHTML5、CSS3としてエラーがないことをチェック済みです。HTMLのチェックでは『BOM付きになってるよー』と、忠告してくれています)

このあたり、詳しい方がいたら是非教えて下さい。

 

最後に、制作のための基本的なことを幾つか。

Facebookページでiframe用HTMLを作る場合は左右が520px、天地800pxに収まるようにします。

HTMLの作り方は通常ホームページの作り方と同様です。CSSを読み込みファイルとして設置することも出来るようです。(アイ・ラボのwelcomeページではこの方法を採用しています)

SSLは必須です。

HTMLを設置するサーバにSSLがインストールされている必要があります。

但し、独自ドメインで運用する必要はなく、レンタルサーバで共有SSLを提供している場合はそのURLを指定も問題はないようです。