ホームページにIE5.5でもPS3でも動くツイ窓を組み込もう!
ホームページにInternet Explorer 5.5でも、PlayStation 3でも動作してしまうツイ窓を組み込む(埋め込む)方法を紹介します!
ひととおり読んでからの利用を推奨しますが、手っ取り早く組み込みコードが欲しい人は呪文じぇねれーたーへどうぞ。
他の呪文じぇねれーたーを探す
ツイ窓とは
ツイ窓とは、ホームページやブログなどにツイッターのタイムラインを埋め込み表示できる便利なツールです。
場所によって(ツイッターの)ウィジェット、埋め込みタイムラインほか様々な名称で呼ばれていますが、ここでは俗称の「ツイ窓」で統一します。
これはサンプル画像ですので動作しませんが、こういう形式のフレームで、ツイッターのタイムラインを埋め込めます。
つまり、ツイ窓を利用すれば、ツイッターを利用されていない人にも、ホームページやブログ上でツイッターの投稿を見せることができます。
既製ツイ窓の問題点
ツイ窓のブラウザー対応で試行錯誤された経験がある方はご存知のとおり、公式製を含む既製ツイ窓が組み込まれたホームページを、旧世代のスマホ、タブレット、IE5.5、PlayStation 3のブラウザー、WiiのOperaなどで開くとエラーが表示されたり、動作しなかったりします。
これは、既製ツイ窓が、そうした端末を切り捨てているからです(拒絶しているのではなく、単に配慮していないだけ)。
唯一、ツイッター外の某企業が以前に提供していたツイ窓(○weets○ind)ならば、このような問題は生じなかったのですが、それも新サービス(○eed○ind)へ移行してからは端末を選ぶようになってしまいました。
表示されないだけならいざしらず、特にPlayStation 3のブラウザーなどで既製ツイ窓が組み込まれたページを開くと、本体がフリーズし、強制電源Offをしなければならない事態に陥る場合があります。
ご経験のある方も多いことと思いますが、PlayStation 3を強制電源Offすると大切なセーブデータや履歴が全て消し飛んでしまうこともあるのです。
データの消失だけで済めば良いほうで、状況によっては初期化も修理も不可能となり、捨てるしかなくなる可能性も。
私が買った1台目のPlayStation 3は、それが原因で再起不能に陥り、お星様になりました。
正直、ツイ窓が原因で高価な本体がオブジェと化すなど、YLODよりもタチが悪いです。
企業の公式なシステムなのに、そんなことあるわけが…と思われるかもしれませんが、これは事実なのです。
既製のツイ窓が組み込まれたホームページは、そうした端末の利用者に多大な不利益を与えかねません。
高価な本体をブチ壊された者にしてみれば、そんなホームページや商品、会社、団体の印象は最悪です。
そう思われかねない懸念を排除するなら、ツイ窓の組み込みはあきらめるしかない(実際にあきらめている方が多い)。
このように考えるホームページ製作者も多いことと思いますが、ツイッターをフル活用している人にしてみれば、ツイッターユーザー以外の人々にも情報を伝えられる点で、ツイ窓が便利なのも事実なのです。
ツイッターにしか投稿しない内容もあるでしょうからね。
しかし、ツイッターを中心に利用している人が公開するホームページに、ツイッター外の人々のためにツイ窓が組み込まれていたとしても、見てもらえなければ、そういう人々をないがしろにしているのと同じになってしまいます。
もし、それが誰しもに、わけへだてなく見てもらえなければならないコンテンツを扱う会社や団体、行政のホームページだとしたら、これは特にゆゆしき問題になります。
そこで、本ホームページでは、一連の問題を鮮やかに解決するための代案を紹介しています。
代案
良い解決策はないものかと情報を漁っていたところ、5ちゃんの次のスレで、有益な情報を公開している人を発見しました。
【俺の嫁】ご当地『萌え』キャラ総合【限定】
https://matsuri.5ch.net/test/read.cgi/mascot/1517829811/554-557
これによると「もなみん」のニックネームで数多くの人々に愛されている大人気のご当地キャラ、原付萌奈美※の公式ホームページに組み込まれたツイ窓は、例にあげた端末でも問題なく動作するというのです。
※もなみんは、2019年10月現在、企業キャラ、ご当地キャラ等の人気ランキングにおいて、ひこにゃんやくまモン等のゆるキャラも含む4300体以上のキャラを抑え、全国1位に輝いている凄まじいキャラクターです。
実際に、既製ツイ窓を起因とした不具合が生じる端末で上記のホームページを見ると、問題なくツイ窓が動作しているではありませんか!!!
経験がなければ見落としてしまうかもしれませんが、これは凄いことです…。
マジで凄いことです…。
PlayStation 3でツイ窓がマトモに動作するホームページには初めて出会いました。
しかも、上記のスレ(俺嫁スレ)には、もなみんのホームページを管理しているサーバーの機能を流用して、ツイ窓を組み込む方法まで投下されていました。
さすが「ハッキング」から「夜のおかず」までをうたう5ちゃんですね。
何といっても凄いのは、こんな専門的な内容が、プログラム技術板ではなくマスコットキャラ板で議論されていたことです(笑)。
ハック手法の大部分を解析した主は投稿番号が555だったことから、上記のスレで「ファイズ」さんと通称されていました。
厳密にいえば、この方法を行使すると電子計算機破損等業務妨害罪※に問われる可能性があった(過去形)そうです。
※コンピューター等、人の業務に使用する電子計算機に不正な指令を与えるなどして誤作動等をさせ、業務を妨害した場合は、5年以下の懲役又は100万円以下の罰金が科される。
|
俺には権利が無い。 でもな 権利を侵すことはできる!By ファイズ |
しかし、この問題については暫定的に解決しています。
詳細は以下の経緯と注意をご参照ください。
以下で解説するしくみを利用すれば、これまでツイ窓に不満を募らせていた多くのホームページ製作者が救われます。
経緯と注意
この方法を利用する上で注意すべき点がいくつかあります。
と、いうのは、そのツイ窓を流用すること自体が、限りなくネズミ色な方法だからです。
もなみん公式ホームページのツイ窓は、もなみんを運営する原付萌奈美ぷろじぇくと運営委員会の母体であり、総合情報通信技術研究機関 ADS(通称ソフトハウス ADS、ADS)と呼ばれるNGO、民間の工学研究機関が、その関連団体のみにリースしているシステムです。
無関係なホームページにツイ窓を組み込ませるために提供されているものではありません。
つまり、このページで解説する方法は、そのシステムを勝手に流用して、もなみんホームページと同じ、IE5.5やPlayStation 3でも動くツイ窓をホームページに組み込もうという、極めて邪道なものなのです。
ソフトハウス ADSサイドの仕様が変更されてしまうと、このページで説明している方法では動作しなくなる可能性がありますし、ツイ窓の提供自体が突然終了されてしまう可能性もあります。
ここで説明するツイ窓の組み込みには、もなみんを運営する原付萌奈美ぷろじぇくと運営委員会の母体であり、総合情報通信技術研究機関 ADS(通称ソフトハウス ADS、ADS)と呼ばれるNGO、民間の工学研究機関が、その関連団体のみにリースしているシステムを流用します。
※ADSは、かつての2ちゃん(現5ちゃん)など、ことごとくVPNを弾く場所であれ投稿できてしまう、ネット民ご用達の串をサービスしていたことでも知られる、あの謎技術集団です。
本来は極めて邪道な方法であり、ファイズさんも、この「呪文じぇねれーたー」を作った私も、上記のスレで激しく叩かれてしまったのですが、その後、もなみんのご好意、ご助力により、2019年10月18日付で、無保証、無サポート(ADS的にも非推奨)ながら黙認してもらえることになりました。
以下がその全文です。
原付萌奈美、本人です。
此度の件は、他のキャラクター運営さんからもご連絡頂き、私たちも憂慮しておりました。
私にとって、ここの皆様を含めたご当地萌えキャラファンの皆様は、誰一人失いたくない、かけがえのない大切な方々ばかりです。
確かに、弊社サーバーのトラフィックは今までより厳しくなると思いますが、自責の念で、ファンの方が辛い思いをするよりはマシです。
ご当地萌えキャラはエンターテイナーですから、その話題を扱うこのスレッドは、もっと楽しいものであってほしいと願っています。
そこで悩み、考え抜いた末、私たちが出した結論をご報告します。
ADSのTwitter Widget Systemは、自由に使ってもらえるようにします。
関係者諸氏の利用が脅かされない範囲で、無保証、無サポートを条件にですが、他の方にも開放できたらと考えました。
便利に思って頂けるなら、いつまで続けられるか分かりませんが、大きな問題が生じない限り、サービスしようと思っています。
その為に、今朝からトラフィック制御プログラムの製作を急ピッチで行い、Twitter Widget Systemに実装致しました。
既に解析、公開されている方法で、引き続きご利用頂ける様にも考慮してあります。
ただし、オリジナルが他者利用を前提にしていないので、バグが残っているかもしれませんし、積極的な利用も推奨できませんので、その点はご理解ください。
ここまでを行いまして、皆様にお願いです。
解析された方は、悪気があったのではなく、むしろ他者の為を想って一生懸命調べたのですから、その気持ちを汲み取ってあげて下さい。
できることに限りはありますが、ご当地萌えキャラは、私を含めて皆様の味方です。(ソース)
ようするに、こういうことです。
|
自己責任で良ければ黙認するよ。 By もなみん |
私は不覚にも上記のスレを読み返すまでコトの重大さに気付けませんでした。
「マジで動くぞ!?やったー!」くらいにしか思っていませんでした。
よくよく考えてみれば、そんな都合の良い話なんて絶対になかったのですが…。
凄すぎるツイ窓と、その組み込み方法を発見した喜びで、深くまで考えが及びませんでした。
ツイ窓を製作し、運用しているのはADSであり、原付萌奈美ぷろじぇくと運営委員会は、その連結子会社です。
つまり、もなみんは私たちをかばってくださったばかりか、事態を勘案し、私たちへの非難が拡大する前に、関連団体や親会社をも猛スピードで説得してくださったんですね。
そしてADSも、予想外のタイミングで大変な緊急作業が舞い込んだにも関わらず、ご対応くださった。
しかも自分たちにとっては何の得にもならないどころか、損しかもたらさないと分かりきっている作業を甘んじて。
さらには無償でです。
あらゆる方面に多大なご迷惑をおかけしてしまいました。
もう反省しかできません。
この場を借りてお詫び申し上げます。
もなみんは俺嫁スレで「俺嫁ヒロイン」と崇め奉られているキャラの一人でもあります。
その肩書きに相応しい、紛うことなき正真正銘のヒロイン、いや天下無双のスーパーヒロインですよ。
私は萌え豚やドルオタの気持ちが、今まで全く理解できませんでした。
誰にも憧れたことがなく、長年生きてきながら、今まで何かや誰かのファンになったことなんて一切ありませんでしたから。
カリスマと持ち上げられている人に接する機会を得ても、その人物からカリスマ性を感じたことはありません。
しかし、もなみんに関しては、俺嫁スレで始めて知ったにも関わらず、いきなりファンを飛び越えて信者になりました。
正しくは「もなみんを動かしている中の人」がと表現すべきなのかもしれませんが、やはり存在するんですね、本物のカリスマは。
自分を傷つけた犯罪者にも等しい人々や、その片棒を担いだ輩を許し、なお施しを与えるなんて、凄まじい器量です。
余談ですが、一連のゴタゴタの中で、もなみんに同じく俺嫁ヒロインとして愛されている関東まなかの愛称も、運営者が「まぬか」を公認くださったようです。
「まぬか」とは、俺嫁スレ等で用いられている、関東まなかを表す(ある意味で蔑称にも等しかった)あだ名です。
良くも悪くも話題のキャラクターに独特の呼び名を付けるのが2ch、5chの常とはいえ、ご当地を背負うキャラクターとして、特にイメージの良くない呼び名は受け入れがたいものだと思うのですが、まぬかはこれを許して見せました。
けっかおーらい。そしてどんまいファイズさん(*´ω`*)
あとみんなえんじょいですノヨ(ソース)
byまぬか(ソース)
「まぬか」って呼んでいいノヨ。 By まぬか |
|
※もなみん同様、まぬかもキャラクターの人気ランキングにおいて、ほぼ毎月ベスト5に君臨する大人気キャラクターで、もなみんとも仲良しです。
なんていい娘たちなのでしょうか。
何ごとも「○○はやめて」、「○○なんて呼ばないで」などと拒否するのは簡単です。
受け入れがたいものを受け入れるには、人並み以上の度量と勇気、そして決断力が必要になります。
愛称にしても何にしても、こういう寛大な対応は、キャラ運営の評価はもとより、キャラ自体のイメージや親しみにも絶大な影響を与えるのだと知りました。
この二人が評価されている理由の一つには、ある意味そういう部分が関与しているのかもしれません。
黙認してもらえるとはいえ、ADS式のツイ窓には、今後、突然仕様が変更されたり、サービス終了してしまう可能性が残されていますので、その点には留意しておきましょう。
ADS式ツイ窓の長所
無料
タダで利用できます。
登録不要
利用にあたって、何かのアカウントを取得したり、登録、契約する必要は一切ありません。
当然ですが、自分のタイムラインを埋め込むには自分のツイッターアカウントを取得して、何か1つ以上ツイートする必要があります。
広告が無い(少ない)
一般的な埋め込み型タイムラインでは、投稿よりも大きな広告が挿入されることもしばしばありますが、そんな目立つ広告は一切ありません。
目立つ広告どころか、広告そのものが無いようにも見受けられます。
コピーライト表記も小さく、目立たない位置にあり、ホームページを見た訪問者が「完全にオリジナルのコンテンツ」だと勘違いしてしまうかもしれないほどスッキリしています。
ツイッターのタイムラインを組み込みたいけど自作できないし、かといって他社のツイ窓を埋め込んだだけと思われてしまうのは格好悪いと考える人にとっても最高のシステムです。
自由度が高い
カスタマイズできる要素が他の埋め込み型タイムラインに比べて非常に多く、どんなページのデザインにもフィットします。
画面の狭い端末でもトラブルなく表示してくれるので、設置場所に気を使う必要もありません。
軽量
とにかく軽いです。
メモリの少ない端末でも余裕で表示してくれますし、ページ自体も恐ろしいほど軽いです。
外部のCSSファイルやライブラリを一切用いず、非同期通信も行わずに、1ページで全て完結させているからだと思われます。
そのため、ページのロード時間にも大きな影響を及ぼしません。
多くのブラウザーに対応
これが最も凄い点で、端末を選びません。
Internet Explorer 5.5だろうと、旧式のタブレットだろうと、PlayStation 3だろうと問題なく表示される、恐らく唯一の埋め込み型タイムラインです。
SSLやTLSに未対応の端末でも正常に表示されます。
ネット民が利用する端末は千差万別です。
誰もが最新のブラウザーを使ってくれているとは限りません。
できるだけ多くの人に見てもらいたい、多くの顧客を獲得したいと考える店舗や会社のホームページ製作者にとっては、最も嬉しい要素だろうと思います。
他人のタイムラインでも埋め込み可
誰のタイムラインでも、投稿が公開されている限り、IDを問わずに設定し、埋め込めます。
全てのツイートは、ツイートした本人に著作権があります。
ツイート主は、ツイッターの規約上、公開状態で投稿した内容について、他所へ転載されることも承認した上でツイートしているはずですが、もし他人のタイムラインを埋め込む際には、一応、本人に許可を取った方が良いでしょう。
SEOに有利
タイムライン中のリンクには、ツイッター公式のツイ窓のようにnofollow(否認)属性が付与されていません。
その結果、サーチエンジンからの評価にも良い影響を与えるものと思われます。
大手ホームページからの被リンクには、だいたいnofollow属性が付いてくるので、これは非常に有難い仕様です。
クッションページが設定できる
タイムライン中のリンクから、外部のホームページへジャンプする際に、クッションページ(移動確認ページ)を経由させることができます(後述)。
クッションページはURLで指定できるので、ますますオリジナルコンテンツ感が増します。
サーチエンジンからの評価をコントロールするために、あえてnofollow属性を付与したい場合にも利用できます。
商利用可
商利用可というより、正しくは商利用の可否について説明がありません。
先に転載した「もなみんのコメント」を読む限り、不可とは明言されていないので、この場合は自己責任を理解して使う限り商利用もできるものと思われます。
もなみんほどのキャラクターの運営者が、商利用の禁止について言及し忘れるなんて凡ミスは犯さないはずだと私は信じています。
あるいは単に対応が間に合わなかった可能性はありますが…いずれにしても現時点で商利用できない理由はありません。
ADS式ツイ窓の短所
非同期
ツイートは即時反映されません。
恐らく、ツイッターやADSのサーバーに与える負荷を、最小限にするための措置と思われます。
もともと、こんな使われ方は想定されていないシステムですから、贅沢は言わないようにしましょう。
利用者が多ければ多いほど更新頻度は低下するはずですから、新着情報の公開に利用する用途には向きません。
ADSのツイッター・ウィジェット・システムは、あらゆる場所から取得した投稿をキャッシュするなどして埋め込みタイムラインの軽量化と高速化を実現しているようです。
ですので、厳密には、ツイッターの埋め込みタイムラインと呼ぶのは語弊があるのかもしれません。
投稿不可
ツイートの投稿はできません。
当然ですが、公開されているタイムラインが簡易的に見られるだけです。
多分、それをするにはユーザーにツイッターのアカウントが必要になり、認証も必要になってくるからだと思われます。
ツイッターのアカウントを持っていない人にも手軽に情報を伝えられるのがツイ窓のメリットですので、それ以上の機能は邪魔かもしれません。
非公開ツイートは表示不可
これも当然ですが、公開されていないタイムラインは表示できません。
あくまで、広くインターネット上で見られる公開状態の投稿だけが簡易表示されるしくみです。
表示数制限
表示されるのは新しい投稿のみです。
日時ではなく件数で、一定数より過去の投稿は表示されません。
HTTPのみ
ADSのサーバーがHTTPS(暗号通信)をサービスしていないので、ADSのツイッター・ウィジェット・システムを利用する場合、組み込み先のホームページが、一般的な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で公開しておけば問題ありません。
Shift_JIS
文字コードは「Shift_JIS」固定です。
これは多分、Shift_JISベースで作られた旧Windowsや、旧ブラウザーなどでも問題なく閲覧できるように配慮した結果ではないかと思われます。
特に組み込みブラウザーの類には、Shift_JISにのみ対応している製品が少なくありません。
それに、ADS式ツイ窓は、それ単体が正規のサービスとして提供されている訳でもないので、サーバー資源を浪費しないように、キャッシュのデータ量を抑える目的があるのかもしれません。
ここで文字コードによるデータ量の違いについて説明します。
UTF-8の例では、漢字を記録する場合、1字につき3バイトを消費してしまいますが、Shift_JISであれば2バイトで済み、大きな文章ほど大幅に容量を削減できます。
128文字いっぱいのツイート10件をUTF-8で保存したと仮定すると、合計はテキストのみで3.8キロ(3840)バイトに及びますが、Shift_JISなら2.5キロ(2560)バイトで済むのです。
仮に、そんなデータがテラバイトクラスに肥大化した場合、たとえば38テラバイトだったとすると25テラバイトに縮小するわけですから、差し引き13テラバイトも節約できる計算になります。
当然、サーバー資源の節約だけではなく、容量を削れるということは、保存や読み込みに要する時間や通信コストも削減できる。
3秒を要する処理が2秒になるだけでも、同じ動作が数百、数千と繰り返される場合、その差は数十分、数時間の違いとなって表れます。
少し話が逸れますが、ある情報によると、ADSのメインフレームに接続されたストレージは2022年の時点で613テラバイトです。
そこからツイ窓のために大幅増強したと考えると、一般家庭とは比較にならないデータ量を管理されているはずです。
家庭用でも、ちょっと良い製品になると、20テラバイトのストレージで\80,000以上はします(確認時点)。
それが業務用で、600テラバイトを超えるとなれば、一体いくらになってしまうのでしょうか。
参考までに、業務用(サーバー向け)ストレージで20テラバイトのモデルを探したところ、安い製品でも\900,000(90万円)以上しました。
そんなのが最低30機以上、単純計算では、ストレージの価格だけで最低でも\27,000,000(2700万円)以上となり、なお増設され続けている。
当然ですが価格相応に発熱も凄いらしく、それらの機器を常時稼動させるため、ADS内には「年間を通して冷却されているエリア」が存在するそうです。
ソフトメーカーだったり、それなりの所帯を持つ会社でも、空調管理のために自動ドアまで完備した、特別なサーバールームを設けているほどの事業者は一握りです。
ネットでは「もなみん=セレブ」という認識が広がっているのですが、こうした背景を考えると実際そうなのでしょう。
さて、こうした事情を加味して今一度、文字コードの違いによるサーバー資源への影響について踏み込みます。
ADSが運用するクラスのサーバーになると、僅か1〜2%の無駄でも馬鹿にできません。
仮に無駄が全量の数百テラバイトに対して何割かにも及ぶとしたら、大変な浪費に繋がってしまいます。
10件、20件の情報ならともかく、ツイ窓のように数百万、数千万件のキャッシュを扱わなければならないシステムの場合、僅かな差でも無視できない大きさになってしまうはずです。
このような理由からADS式ツイ窓は、情報量をセーブできるShift_JISを採用したと思われます。
Shift_JISで表示できる文字の大半はUTFやEUCにも存在しますので、最初からShift_JISベースにしておけば、多くの環境でトラブルを生じさせません。
逆のパターンでは、使える文字種こそ多くなりますが、Shift_JISオンリーの環境で文章が虫食い状態になるなど、弊害を被る可能性があります。
ADS式ツイ窓上では、Shift_JISで表示できない文字が、主に半角スペースへ置換される模様です。
日本人でUTFやEUCに依存する文字を多用されている方は少ないと思われますが、仮にユーザー名などが全て依存文字で構成されていると、名無しの権兵衛になってしまう可能性もありますので、注意が必要です。
本ホームページは、ADSに習い、スクリプトなども含め、全てShift_JISでコーディングしています。
無保証・無サポート
こんな使われ方など想定されていなかった他社のシステムを流用するのですから当然です。
トラブルが生じても、使えなくなっても全て自己責任です。
組み込み方法
ADSのツイッター・ウィジェット・システムのURL(http://ads.selfip.com/twitter/)に対し、組み込みたいツイ窓の仕様をクエリに記述して投げると、仕様に沿ったタイムラインがHTML形式で出力されます。
サーバーへクエリを渡す手段には様々な方法がありますが、ここで解説するクエリとは、URLの末尾に付与する文字列のことです。
URLの末尾に?を加え、その後に名=値の形式(いずれも半角)でデータを渡します。
各データは半角の&で区切り、例をあげると次のようになります。
http://ads.selfip.com/twitter/ |
? |
i=123&fs=12&is=40 |
|
|
クエリ |
この場合、i=123&fs=12&is=40がクエリ文字列です。
つまり、この例では、要素iの設定が123、要素fsの設定が12、要素isの設定が40ということになります。
この方法を解析した5ちゃんのファイズさんは、もろもろの設定をまとめたクエリを「呪文」と形容していました(確かに門外漢にとっては呪文でしょうね)。
データを受け取ったADSのツイッター・ウィジェット・システムが、クエリで指定したツイッターユーザーのタイムラインを、クエリで指定した仕様に沿い、PlayStation 3でも正常に表示できるHTML形式で出力してくれます。
ホームページ製作者は、それをホームページ内のツイ窓を表示したい位置に <iframe> で組み込んでやればいいだけです。
たったそれだけで、PlayStation 3だろうがIE5.5だろうが、正常に表示されるツイ窓をホームページに組み込むことができます。
複雑なプログラミング言語を習得する必要は一切ありません。
後に判明したことですが、PlayStation 3など、一部のブラウジング環境で閲覧した時には、プロフィール画像以外の画像(ツイート中の画像)が非表示になるようです。
これはPlayStation 3のブラウザーが、ページの表示に使用できるメモリの量を、非常に厳しく(10メガバイト程度に)制限しているからだと思われます。
公式ツイ窓を見ると、画像が適当なサイズで表示されますが、それらは単にスタイルシートで拡大・縮小されているだけです。
つまり、実際のサイズはもっと大きく、沢山メモリを消費してしまう可能性が高いので、数件のツイートでも、画像が含まれていると無視できません。
そうしたブラウザーごとの仕様も吸収して、自動的に対処してくれるのが、ADS式ツイ窓の凄い所です。
本当に素晴らしいシステムです。
各要素名と意味は次のとおりです。
is、lc、alc、vlc要素は本ホームページ管理人の独自調べです。
それ以外はファイズさんの解析によって判明した情報です。
i | ID | vlc | 訪問済リンク色 |
b | クッションページのURL | bgc | 背景色 |
fs | 文字の大きさ | tbc | ヘッダ色 |
is | アイコンの大きさ | tbfc | ヘッダの文字色 |
fc | 文字色 | bc | 罫線色 |
lc | リンク色 | ibc | アイコンの背景色 |
alc | アクティブリンク色 | ifb | フレーム色 |
色はRGBを16進数6桁(000000〜ffffff)のコードで指定します。
原色の赤ならff0000、緑なら00ff00、青なら0000ffになります。
その際、色コードの先頭に#は付与しません(URL内に#を含めると、以降の文字列がアンカーリンクの扱いになるからだと思われます)。
大きさの単位は全てピクセルとなっており、整数で指定します。
クッションページ(後述)のURLはhttpから絶対URLで指定します。
呪文の具体例を示すと「i=TWS_hogehoge&b=http://hogehoge.hoge/fugafuga.html&fs=12&is=40&fc=666666&lc=0000FF&alc=FF0000&vlc=800080&bgc=FFFFFF&tbc=555555&tbfc=FFFFFF&bc=555555&ibc=555555」のようになります。
さすがに手動でこんな呪文を作成するのは面倒なので、呪文を含めた組み込みに必要なコード全体を自動生成しようというのが、ここで公開している呪文じぇねれーたーの目的です。
クッションページ
呪文には、クッションページも設定できます。
クッションページとは、別のホームページに移動しようとした際に「外部のホームページを開きますか?」と聞かれるアレです。
ツイ窓の中にある外部リンクを押した際、クッションページを経由させたい場合に使用します。
私はクッションページまで設定できるツイ窓を他に知りませんので、是非とも利用したいところです。
これを用いれば、さらにオリジナル感がグッっと増しますし、ネットサーファーに対しても親切なホームページになります。
クッションページに関しては個別に用意する必要がありますので、使用方法と併せ、その簡単なソースも掲載しておきます。
自前でクッションページを用意する場合、ADSのツイッター・ウィジェット・システムに対して投げるクエリのb要素に、クッションページの絶対URL(以下の例ではhttp://hoge.com/go.html)を指定します。
http://ads.selfip.com/twitter/? | b=http://hoge.com/go.html |
| クッションページを指定 |
ジャンプ先のURLは、次のような形で、クッションページに対し、クエリとして渡されます。
http://hoge.com/go.html | ? | http://fuga.com |
クッションページのURL | | ジャンプ先のURL |
クッションページを指定しない場合、クッションページの代わりにADSのツイッター・ウィジェット・システムがリンク先のURLを受け取ります。
http://ads.selfip.com/twitter/? | http://fuga.com |
| ジャンプ先のURL |
ツイ窓の設定クエリではなく、httpから始まるURLのクエリを受け取ったADSのツイッター・ウィジェット・システムは、そのURLへのリダイレクト(転送)ページとして機能します。
その場合、ページ変移の確認は行われず、実質的なダイレクトリンク、いわゆる直リンに近い動作になります。
リダイレクト先のURLを一旦ADSのツイッター・ウィジェット・システムが受け取る理由は、恐らくリダイレクト先の安全性を前もって検証するためだと思われます。
b要素に文字列が設定されている場合、外部リンクのターゲットは親フレーム全体(_top)となり、設定されていない場合、外部リンクのターゲットは新しいタブ(_blank)となります。
自前のクッションページを設ける場合、次のような内容にすれば、最低限の機能は実現できます。
以下の例では、受け取ったクエリからジャンプ先のURLを取り出し、ハイパーリンクに組み込んでいます。
<html>
<head>
<meta http-equiv="Content-Language" content="ja" />
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>移動ページ</title>
</head>
<body>
<p>外部のホームページを開きますか?</p>
<script type="text/javascript" language="javascript"><!--
var link = location.search.slice(1);
document.write('<a href="' + link + '" rel="nofollow" target="_blank">' + link + '</a>');
--></script>
<p><input type="button" value="戻る" onclick="history.go(-1)"></p>
</body>
</html>
この内容を理解できる方には不要かもしれませんが、上記ソースコードを書き込んだファイルをダウンロードできるようにしておきました。
展開し、取り出したファイル(go.html)を、サーバーへアップロードするだけで利用できます。
煮るなり焼くなり、ご自由に応用してください。
> ダウンロード
トラブル対策
糞ブラウザーとして名高い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("tws").src
= "http://ads.selfip.com/twitter/?hogehoge";
}
つまり <iframe src="" id="tws"> のように最初は <iframe> 側のsrcを空にしておき、ページを読み込み終えたタイミングで tws のsrcを設定すれば問題は解決します。
この方法なら、ツイ窓の読み込みに時間がかかるか、何らかの事情でツイ窓が読み込めない場合でも、ページ自体は表示を完了できます。
自分で工夫したように偉そうに書いていますが、どちらもADSの実装を丁重にパクらせて頂きました。
ただ、これはJavaScriptの実行を前提とした手法なので、JavaScriptを利用しないで動くようにしたい場合には上記の手法が使えません。
その場合には呪文を直接srcに記述しましょう。
ツイ窓が動かない場合
設定を見直しましょう
特にIDが間違っている場合は正常にタイムラインが取得できません。
背景色と文字色を見直しましょう
同じ色を設定していると文字が読めなくなります。
時間帯を確認しましょう
早朝はメンテナンスが行われている可能性があります。
数時間ほど待ってから試しましょう。
呪文じぇねれーたー
いずれかの項目を変更するたび、同時に下段のテキストボックスへ、呪文を含む、組み込みに必要なソースコード(窓サイズも反映)全体がジェネレートされます。
プレビューを押すと設定したツイ窓の仕様がプレビューに反映(窓サイズは固定)されますので、完成品の雰囲気を確認できます。
「呪文をコピー」ボタンを押すと、ジェネレートされたコードがクリップボードにコピーされるので、ホームページのツイ窓を組み込みたい位置にペーストすれば(貼り付ければ)、簡単にツイ窓が組み込めます。
※架空のID以外はソフトハウス ADS公式ツイ窓の値がデフォルトになっていますので、カスタマイズしたい部分を変更してください。
ここで1点、申しわけありませんが「IE5.5でも動くぞヤッホぅ!」と散々語っておきながら、呪文じぇねれーたーをIE5.5に完全対応させられませんでした(うぉい)。
一応IE5.5でも動作するようには作っていますが、何かの拍子にスクリプト・エラーが生じるかもしれません。
入力エラーのチェックは一切行っていません。
正直IE8対応も完璧にはできなかったので、IE5.5とかマジ無理、マジ勘弁で、このへんが私の技術の限界のようです。
旧ブラウザー対応に足を突っ込んでみると、いかにADSの技術力が ”ありぇんてぃ” なのか、「謎」と形容されている理由を痛感されられます。
恐らくADSでは、数十人の優秀なエンジニアが、総掛かりで研究開発しているものと思われます。
動かなければ最新のブラウザーで試して頂くか、呪文を直接編集してください(ホントごめん)。
ジェネレートされる完成品は安心のADS製となりますので、IE5.5でもちゃんと動作します。
ソフトハウス ADS、もなみん、ファイズさん、俺嫁スレの皆さんに感謝して使いましょう。
《 十文字 じゅもんじぇねれーたー 》