ＳＱＬの窓
<< スマホでYouTubeの… | TOP | Google Chromeで iP… >>

2012年08月11日


jQueryを使って livedoor の ical 天気ページから iPhone 用コンボボックスを作成する

 
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){
		// 場所を記述している日本語は１０文字以内(実際は４文字以内)
		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
【jQueryの最新記事】
posted by lightbox at 2012-08-11 14:39 | jQuery | このブログの読者になる | 更新情報をチェックする



Powered by Seesaa
container 終わり



✅ フリーフォントで簡単ロゴ作成
✅ フリーフォントでボタン素材作成
✅ フリーフォントで吹き出し画像作成
✅ フリーフォントではんこ画像作成
✅ ほぼ自由に利用できるフリーフォント
✅ フリーフォントの書体見本とサンプル
✅ 画像を大きく見る為のウインドウを開くボタンの作成
✅ CSS ドロップシャドウの参考デモ
✅ イラストAC
✅ ぱくたそ
✅ 写真素材 足成
✅ フリーフォント一覧
✅ utf8 文字ツール
右サイド 終わり
base 終わり