phpとOpera widgetでtwitter自作クライアントをつくる３

前回、phpとOpera widgetでtwitter自作クライアントをつくる２ - 付箋的メモ帳の続き。

今回はwidgetの動作を決めるjavascriptを書いていきます。
jQuery使用を前提としていきます。

やりたいこと

• 発言
• メンションの自動取得（1分おき）
• ＠を返す（ID手打ちなし）
• アクセストークン、アクセストークンキーの保存
• メンション自動取得のON・OFF切り替え
• 手動メンション取得
• メンション欄の表示非表示

$(function(){
	var ResizeFlg = true;
	var m_viewFlg = true;
	var url = "phpを設置したURL";
	var mantion = false;
	var mantion_clear = 0;
	var mentionsTimer = null;
	var getmantion = (function(){
			var accT = String(widget.preferenceForKey("access_token"));
			var accTs = String(widget.preferenceForKey("access_token_secret"));
			$("#repstat").text("＠取得なう"+new Date());
			var timerId = setTimeout('$("#repstat").text("")',20000);
			var req = new XMLHttpRequest();
			req.open( 'POST', url, false);
			req.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
			var last_id = widget.preferenceForKey("last_id");
			var param = 'job=mention&AT='+accT+'&AS='+accTs+'&last_id='+last_id;
			req.send(param);
			if (req.readyState == 4 && req.status==200) {
				var data = eval("("+req.responseText+")");
				widget.setPreferenceForKey(String(data[0].id[0]),"last_id");
				var reps = "";
				if(data!=null && data!=""){
					jQuery.each(data,function(){
						reps += "<div><span class='rep'>"+this.screen_name[0]+"</span>"
						+"<span>:"+this.text[0]+"</span></div>";
						mantion_clear++;
						if(mantion_clear>30){
							$("#mentions").empty();
							mantion_clear = 0;
						}
					});
					//$("#textbox").val(req.responseText);
					
					$("#repstat").text("＠取得しました"+new Date());
					clearTimeout(timerId);
					setTimeout('$("#repstat").text("")',3000);
					
					$("#mentions").prepend(reps);
					//$(".rep").unbind("click");
					$(".rep").bind("click",function(){
						var txt = String($("#textbox").val());
						$("#textbox").val("@" + $(this).text() + " " + txt);
					});
				}
			}else{
				clearTimeout(timerId);
				$("#repstat").text("＠取得できませんでした"+new Date());
				setTimeout('$("#repstat").text(mainstatus)',3000);
			}
		});
		
	//widgetロード処理
	$(window).load(function(){
		$("#settingform").css("display","none");
		if (!window.widget) return;
		var AT = String(widget.preferenceForKey("access_token"));
		var ATS = String(widget.preferenceForKey("access_token_secret"));
		if(AT==null){
			$("#AT").val("初起動です。設定してから使ってください。");
			$("#settingform").css("display","block");
		}else if(AT==""){
			$("#AT").val("設定されていません");
		}else{
			$("#AT").val(AT);
		}
		if(ATS==null){
			$("#ATS").val("初起動です。設定してから使ってください。");
			$("#settingform").css("display","block");
		}else if(ATS==""){
			$("#ATS").val("設定されていません");
		}else{
			$("#ATS").val(ATS);
		}
		//mentionをはじめは20件取得する。
		widget.setPreferenceForKey("","last_id");
		//mentionを取得するかどうか
		mention = Boolean(String(widget.preferenceForKey("mantion_view")));
		if(mention){
			$("input[name=mention]").filter(function(){
				 return ($(this).val() == "true") 
			}).attr("checked", true);
			window.resizeTo(200,380);
			getmantion();
			mentionsTimer = setInterval(getmantion,90000);
			m_viewFlg = false;
		}else{
			$("input[name=mention]").filter(function(){
				 return ($(this).val() != "true") 
			}).attr("checked", true);
			$("#mentions").css("display","none");
		}
	});
	
	//windowを閉じた
	$(window).unload(function(){
		clearInterval(mentionsTimer);
		widget.setPreferenceForKey("","last_id");
	});
	
	$("#setting").click(function(){
		if(ResizeFlg){
			$("#settingform").css("display","block");
			window.resizeBy(0,100);
			ResizeFlg = false;
		}else{
			$("#settingform").css("display","none");
			window.resizeBy(0,-100);
			ResizeFlg = true;
		}
	});
		
	$("#save").click(function(){
		var AT = String($("#AT").val());
		var ATS = String($("#ATS").val());
		widget.setPreferenceForKey(AT,"access_token");
		widget.setPreferenceForKey(ATS,"access_token_secret");
	});
	
	$("#tweetbutton").click(function(){
		var tweet = $("#textbox").val();
		var accT = String(widget.preferenceForKey("access_token"));
		var accTs = String(widget.preferenceForKey("access_token_secret"));
		var req = new XMLHttpRequest();
		req.open( 'POST', url, false);
		req.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
		var param = 'job=update&message='+tweet+'&AT='+accT+'&AS='+accTs;
		req.send(param);
		if (req.readyState == 4 && req.status==200) {
		 	var data = eval("("+req.responseText+")");
		 	var text = data.status[0];
		 	$("#status").text(text);
		 	$("#textbox").val("");
		}else{
			$("#status").text("通信に失敗しました："+req.status);
		}
		//getmantion();
	});
	
	$("input[name=mention]").click(function(){
		mantion = Boolean($("input[name=mention]:checked").val());
		if(mantion){
			$("#status").text("取得します");
			widget.setPreferenceForKey(String(mantion),"mantion_view");
			mentionsTimer = setInterval(getmantion,90000);
			m_viewFlg = false;
		}else{
			$("#status").text("");
			widget.setPreferenceForKey("","mantion_view");
			$("#mentions").css("display","none");
			clearInterval(mentionsTimer);
			m_viewFlg = true;
		}
	});
	
	$("#view").click(function(){
		if(m_viewFlg){
			$("#mentions").css("display","block");
			m_viewFlg = false;
		}else{
			$("#mentions").css("display","none");
			m_viewFlg = true;
		}
	});
	$("#repv").click(function(){
		getmantion();
	});
})

ざっくり解説

Opera widgetはクッキーに似たような変数を保持できるので、アプリを閉じても保持しておきたい情報はpreferenceForKeyを使います

• widget.preferenceForKey('キー名')で取得
• widget.setPreferenceForKey('値','キー名')で設定

メンション取得は起動時は＠最新20件を取得しておきたいので、指定のためのIDは空にしておきます。
以降は最新IDを記憶して新しいメンションを取得します。

ON・OFFでメンション自動取得を切り替えてられるようにしておきます。
このON/OFFは設定値としてwidgetに記憶させておきて、次回起動時にもその設定を引き継ぐようにしておきます。

メンション取得がうまくいっているかどうかを見るために、取得開始時にメッセージを出します。
今のところ、新しいものがないと戻り値がないので、20秒程度で表示を消すように…。
取得後は結果を表示して3秒後にメッセージを消します。

実行してみる

widgetを表示させてctrl+Rで再表示させて、きちんと取得できていれば成功です。