lilbox導入とカレンダースクリプトの修正

MovableTypeのアップグレードを実施して、週末を利用して内部の動きやスクリプトの一部に修正を入れました。今回の最大の変更点は、lilboxの導入です。Google AdSense相当のものを貼り付けできます。それと、lilbox関連記事でキーワード検索にも対応させてみました。いろいろなノウハウを提供してくださった各位に感謝。
まずは、lilboxのドキュメントにある通りに導入します。このblogは、さくらインターネットのレンタルサーバーですから、特に問題なく終了。で、JavaScriptの変更点ですが、


問題は、このlilboxのスクリプトそのもので、スクリプトは、iframeを利用したスクリプトだったので、そのまま貼り付けてビルドすると、同じようにiframeを利用して実装しているカレンダーが見事にlilboxのiframeの中にも入ってしまいます。
このblogで使っているカレンダーは、小粋空間さんのblogにあるスクリプトを元に導入したんですが、どうやら、こいつのために使っている状態保持JavaScriptである、calender.js が悪さをしていた模様。元々のスクリプトを解析したところ、

var yearmonth = readCookie(name);
if (yearmonth) {
  var iframe = this.document.getElementsByTagName(‘iframe’);
  iframe[0].setAttribute(“src”,”archive-URL/calendar/” + yearmonth + “/index.php”);
}

太字の部分のメソッドで探している文字列が、iframeなので、lilboxを使った場合、同じ画面にiframeが複数ある状態になるために、そこもカレンダーになってしまう模様。なので、以下のように修正。

var yearmonth = readCookie(name);
if (yearmonth) {
  var iframe = this.document.getElementsByName(‘cal-iframe’);
  iframe[0].setAttribute(“src”,”archive-URL/archives/calendar/” + yearmonth + “/index.php”);
}

このスクリプト上では、iframeを探す考え方で作成されていて、小粋空間さんのblog上のテンプレート見てても、iframeが複数あることが前提になっていないので、今まで問題がなかったようです。HTMLの規則上では、iframeが複数許されているので、ここでは、nameの中身を見るように改良しました。
今は、画面にいっぱい表示してありますが、問題まったくありません。Skypeでバグ探索につきあってくれた友人に感謝。

投稿者

SAP認定テクニカルコンサルタント(Basis)、AWS認定12冠、情報処理安全確保支援士(SC)、情報処理技術者資(ST/SA/PM/NW/DB/SM/AU/SU/SG/AP/FE/IP)
Swift/Kotlin愛好会、SORACOM UG Tokyo、AWS IoT専門支部の3つのコミュニティ運営、AWS Community Builder の一員としても活動。
フィギュアスケート観戦、クラシックや吹奏楽鑑賞、アイドル、アニメ、声優など興味の対象は幅広いです。

おおぐち さとるをフォローする
MovableType
よかったらぜひシェアください
まりぱらおーぐ

コメント

タイトルとURLをコピーしました