ホームページにIE5.5でもPS3でも動く情報窓を組み込もう！
ホームページにInternet Explorer 5.5でも、PlayStation 3でも動作してしまう情報窓を組み込む(埋め込む)方法を紹介します！
ひととおり読んでからの利用を推奨しますが、手っ取り早く組み込みコードが欲しい人は呪文じぇねれーたーへどうぞ。
他の呪文じぇねれーたーを探す
情報窓とは
その名のとおり様々な情報を選択的に表示できるウィジェットです。
今日の歴史や行事、誕生日の有名人リスト等が用意されています。
ここで説明する情報窓の組み込みには、例によって総合情報通信技術研究機関 ADS(通称ソフトハウス ADS、ADS)と呼ばれるNGO、民間の工学研究機関がサービスしているシステムを流用します。
ツイ窓の一件で反省しまして、今回は最初に了承を頂きました。
利用した結果について自己責任であることを条件に、黙認して頂けるそうです。
ADS式情報窓の長所
無料
登録不要
広告が無い(少ない)
目立つ広告どころか、広告そのものが無いようにも見受けられます。
多くのブラウザーに対応
SSLやTLSに未対応の端末でも正常に利用できます。
ネット民が利用する端末は千差万別です。
誰もが最新のブラウザーを使ってくれているとは限りません。
できるだけ多くの人に見てもらいたい、多くの顧客を獲得したいと考える店舗や会社のホームページ製作者にとっては、最も嬉しい要素だろうと思います。
商利用可
不可とは明言されていないので、この場合は自己責任を理解して使う限り商利用もできるものと思われます。
注意点
HTTPのみ
一般的なHTTPで提供されているコンテンツを<iframe>(インラインフレーム)タグ等を利用してHTTPS(暗号通信)ベースのホームページに組み込むと、混在したコンテンツとして表示をブロックするブラウザーがあります。
これは、HTTPS(暗号通信)で公開されているページの内部から、一般的なHTTPで公開されているコンテンツを参照する際のみに生じる問題です。
当然ながら、この問題は、暗号通信を必要としないHTTPで公開されている一般的なページの内部から、同じHTTPで公開されているコンテンツを参照する場合には生じません。
一般的なHTTPで公開されているページであれば、HTTPS(暗号通信)で公開されているコンテンツを読み込み、混在したコンテンツとなっていても、表示にトラブルは生じません。
HTTPS(暗号通信)で公開されているページであれ、読み込むコンテンツが同じHTTPS(暗号通信)で公開されているページであれば、ホームページの表示そのものにトラブルは生じませんが、この場合、本ホームページで解説する情報窓は組み込めません。
ようするに、ホームページ全体を最初から一般的なHTTPで公開しておけば、ユーザーのブラウザーが暗号通信に対応しているか否かを問わず、いかなるブラウザーでも閲覧してもらえます。
しかし、HTTPS(暗号通信)で公開したページが存在すると、そのページは暗号通信に対応していないブラウザーで一切見られなくなってしまいます。
たとえブラウザーが対応していたとしても、OSが対応していない場合は同様です。
Google Chromeの例では、以下のようなエラーが表示されます。
Windows 98やXPユーザーの数は、最新OSのユーザー数に比べて相対的、絶対的に少ないのかもしれませんが、それでもゼロではなく、確実に存在するのです。
旧世代のOSやブラウザーに限らず、テレビに接続して使う汎用のネット端末ほか、HTTPS(暗号通信)が利用できないネット環境は無数にあります。
地方の旅館やホテル、観光案内コーナー等に設置されている専用端末にも、一般的なHTTPでの通信しか受け付けない仕様の製品が多いです。
ホームページ全体をHTTPS化(全ページを暗号通信ページに強制リダイレクトさせるなど)してしまうのは細心の注意が必要で、閲覧者を間違いなく減らすでしょう。
HTTPS(暗号通信)に対応しないか、対応が不完全なブラウザーは山ほどありますが、一般的なHTTPに対応しないブラウザーは存在しません。
そもそも、暗号通信に頼らなければならないほど、ホームページの管理者が、ユーザーに対してプライベートな情報の送信を求めるケースは滅多にないはずです。
訪問者にクレジットカード情報の入力を促す必要があるなど、特別に大きな事情がない限り、一般的なHTTPで公開しておけば問題ありません。
無保証・無サポート
トラブルが生じても、使えなくなっても全て自己責任です。
組み込み方法
ADSのトピックス・システムのURL(http://ads.selfip.com/topics/)や配下のCGIに対し、組み込みたい情報窓の仕様をクエリに記述して投げると、仕様に沿った情報窓が出力されます。
サーバーへクエリを渡す手段には様々な方法がありますが、ここで解説するクエリとは、URLの末尾に付与する文字列のことです。
URLの末尾に?を加え、その後に名=値の形式(いずれも半角)でデータを渡します。
各データは半角の&で区切り、例をあげると次のようになります。
| http://ads.selfip.com/topics/ |
? |
t=h&fs=11&fc=808080 |
|
|
クエリ |
この場合、t=h&fs=11&fc=808080がクエリ文字列です。
つまり、この例では、要素tの設定がh、要素fsの設定が11、要素fcの設定が808080ということになります。
データを受け取ったADSのトピックス・システムが、クエリで指定した情報を、クエリで指定した仕様に沿い、PlayStation 3でも正常に表示できる形式で出力してくれます。
ホームページ製作者は、それをホームページ内の情報窓を表示したい位置に <iframe> で組み込んでやればいいだけです。
たったそれだけで、PlayStation 3だろうがIE5.5だろうが、正常に表示される情報窓をホームページに組み込むことができます。
複雑なプログラミング言語を習得する必要は一切ありません。
各要素名と意味は次のとおりです。
※組み込む情報窓の種類によって使用しない要素もあります。
| t | 種類 | tbfc | ヘッダ文字色 |
| fs | 文字の大きさ | bc | 罫線色 |
| fc | 文字色 | tbgc | 本文背景色 |
| bgc | 背景色 | stbc | 項目背景色 |
| tbc | ヘッダ色 | stbfc | 項目文字色 |
トラブル対策
糞ブラウザーとして名高いiPhoneやiPadのSafari等は <iframe> のサイズをうまく調整しないので、その問題を解決するために <div> で囲ってゴニョゴニョしておく必要があります。
具体的には以下のようにします。
<style>
.outer_frame {
width: 320px;
height: 320px;
overflow: auto;
-webkit-overflow-scrolling: touch;
}
.inner_frame {
width: 100%;
height: 100%;
}
</style>
<div class="outer_frame">
<iframe src="hogehoge" class="inner_frame"></iframe>
</div>
内側にある <iframe> のサイズをwidth、height共に100%とした上で、外側の <div> に狙ったサイズを指定する形です。
このコーディングなら、多くのブラウザーでトラブルなく表示されると思われます。
これとは別の問題として、ADSのトピックス・システムがメンテナンスやトラブル等で正常に動作しないとページの読込が完了せず、貼り付けるホームページの仕様によっては、そのタイミングでホームページが表示されない事態が考えられます。
※メンテナンスは毎日、主に早朝に行われているようで、その時間帯は情報窓の読み込みが終わりません。
トラブルやメンテナンス中などでページ全体の表示が遅れる事態を回避するため、以下のように、ひととおりページの表示を終えてから情報窓の中身を読み込むようにしたほうが良さそうです。
window.onload = function() {
document.getElementById("history").src
= "http://ads.selfip.com/topics/?hogehoge";
}
つまり <iframe src="" id="history"> のように最初は <iframe> 側のsrcを空にしておき、ページを読み込み終えたタイミングで history のsrcを設定すれば問題は解決します。
この方法なら、情報の読み込みに時間がかかるか、何らかの事情で情報窓が読み込めない場合でも、ページ自体は表示を完了できます。
自分で工夫したように偉そうに書いていますが、どちらもADSの実装を丁重にパクらせて頂きました。
ただ、これはJavaScriptの実行を前提とした手法なので、JavaScriptを利用しないで動くようにしたい場合には上記の手法が使えません。
その場合には呪文を直接srcに記述しましょう。
呪文じぇねれーたー
いずれかの項目を変更するたび、下段のテキストボックスへ、組み込みに必要なソースコードがジェネレートされます。
プレビューを押すと実際の情報窓が表示(窓サイズは固定)されますので、完成品の雰囲気を確認できます。
「呪文をコピー」ボタンを押すと、ジェネレートされたコードがクリップボードにコピーされるので、ホームページの情報窓を組み込みたい位置にペーストすれば(貼り付ければ)、簡単に情報窓が組み込めます。
※ソフトハウス ADS公式情報窓の値がデフォルトになっていますので、カスタマイズしたい部分を変更してください。
※複数の情報窓を同じページへ同時に組み込むことも可能です。
ここで1点、申しわけありませんが「IE5.5でも動くぞヤッホぅ！」と散々語っておきながら、呪文じぇねれーたーをIE5.5に完全対応させられませんでした(うぉい)。
一応IE5.5でも動作するようには作っていますが、何かの拍子にスクリプト・エラーが生じるかもしれません。
入力エラーのチェックは一切行っていません。
正直IE8対応も完璧にはできなかったので、IE5.5とかマジ無理、マジ勘弁で、このへんが私の技術の限界のようです。
旧ブラウザー対応に足を突っ込んでみると、いかにADSの技術力が ”ありぇんてぃ” なのか、「謎」と形容されている理由を痛感されられます。
恐らくADSでは、数十人の優秀なエンジニアが、総掛かりで研究開発しているものと思われます。
動かなければ最新のブラウザーで試して頂くか、呪文を直接編集してください(ホントごめん)。
ジェネレートされる完成品は安心のADS製となりますので、IE5.5でもちゃんと動作します。
ソフトハウス ADSに感謝して使いましょう。
《 十文字 じゅもんじぇねれーたー 》
