iPhone のカレンダーに livedoorの 週間天気予報を『照会』させようとすると、アカウントの追加の『その他』で、ical の サーバ部分を入力する必要があるのですが、当然スマホですから入力が面倒なので、スマホで表示してコピーしてペーストすると楽ができます。その為のコンボボックスと入力フィールドを作成する為に、オリジナルページの TABLE 要素全体を使って jQuery で解析してビルドしています
▼ 作成するコードは以下のようになります。
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("jquery", "1");
</script>
<script type="text/javascript">
$(function(){
var sl = document.createElement("select");
$("#target").get(0).appendChild(sl);
$("td").each(function(index,me){
// 場所を記述している日本語は10文字以内(実際は4文字以内)
if ( $(me).text().length < 10 ) {
var opt = document.createElement("option");
$(opt).text($(me).text());
$(opt).attr("value",($("a", $(me).next()).get(0).href).replace("toolbox.winofsql.jp","weather.livedoor.com"));
sl.appendChild(opt);
}
});
$(test).val($(sl).val());
$(sl).change(function(){
$(test).val($(this).val());
});
$("#target_txt").val($("#target").html());
});
</script>
<div id="target"></div>
<textarea id="target_txt"></textarea>
<br /><input type="text" id="test" style='width:400px;'/>
まず、jQuery に関しては使いたいだけなので、Google の API を利用して一時的に使えるにしています。google.load("jquery", "1"); では、1.7.1 がロードされます。
対象の TABLE はごくふつうのテーブルですが、都合のいい事に必要なテキストは必ず TD が使われているので、$("td") で全ての TD を取得します。
TD はタイトルと、URL 用とがあって、必ず並んでいます。テキストの文字列がはっきり少ないので( 実際は4文字以内 )、$(me).text().length < 10 で対象をまず絞ります( $(me) は、$(this) でも可 )
次にその隣が欲しいわけですから、$(me).next() を対象としてセレクタを再度 "a" で絞って取得し、icalは、先頭の a だと解っているので get(0) で先頭要素を取得して href 属性を手に入れます。
同時に、テキストはすでに $(me).text() で手に入っているので、これらを利用して新しい select を作成してその HTML を TEXTAREA にセットして後で使えるようにします。
ただ、このままではもったいないので、その場で動作確認ができるようにイベントを追加しています。
※ このコードで作った HTML を以下のページで使っています
ip_ical.htm