JavaScriptでgreasemonkeyを作成する方法4

新規フォームの作成をする

今回は実際に前回のイベント作成を利用して、はてなメッセージに便利なコンテンツを設けようと思います。

設ける物

• はてな検索フォームの追加

今回はgreasemonkeyの一歩という事ではてな検索その物のフォームを、はてなメッセージに追加させようと思います。

追加させる際には二通りの方法があります

• innerHTMLで直接既存のコンテンツの後ろに新しいコンテンツを追加する。
• createElement,appendChildを使い既存のコンテンツの後ろに新しいコンテンツを追加する。

初心のうちは前者の方が使いやすいかと思います。

Sample1 : innerHTMLの場合

(function(){

document.getElementById("header-body").innerHTML += '<input type="text" id="contentText"><input type="button" id="contentButton" value="検索">';

})();

Sample2 : createElement,appendChildの場合

(function(){

	formInput  = document.createElement("input"); //text用
	formButton = document.createElement("input"); //button用
	
	/* text用フォームの製作 */

	formInput.type   = "text";
	formInput.id	 = "textContent";

	/* button用フォームの製作*/ 

	formButton.type  = "button";
	formButton.id	 = "buttonContent";
	formButton.value = "検索";

	document.getElementById("header-body").appendChild(formInput);
	document.getElementById("header-body").appendChild(formButton);

})();

どちらも同じ検索フォームが出来上がります。

Image1

基本的に短いコンテンツであれば速度を重視してinnerHTMLを用いると良いですが

複雑なコンテンツを作成しようと思った場合オブジェクトで各属性を決定するcreateElementでコンテンツを作成してappendChildでまとめてコンテンツを追加する方が容易です。

基本的に両方の方法でイベントが作れるようにソースを記述していきます。

ボタンをクリックするとアラート表示

前回説明した、addEventListenerを使い各イベントに応じての処理わけを行います

Sample3

 	document.getElementById("buttonContent").addEventListener("click",function(){

		alert("");

	},"true");

コードはさっきの続きに記入するという形になります。

document.getElementで先ほど作成したボタンのid名を取得します(innerHTML , createElementで共にid名を作成)オブジェクトとしてaddEventListener(,,)を繋げます。引数は3つ(onを除いたイベントの種類 , 関数(無名関数で直接書いても良い) , true及びfalse(基本的にtrue))

今回は関数名の無駄な消費を抑えるため無名関数で直接書いていきます。

これでid名(buttonContent)を持つ要素(検索ボタン)を押すと(click)関数が呼び出され中にあるアラートが呼び起こされる。という形になります。

これに最後の仕上げとして、はてなの検索フォームに変えます。

はてな検索の移動にはlocation.hrefを用います。

Sample4 : はてな検索フォームの仕組み

http://search.hatena.ne.jp/search?word= [ここに検索する内容の文字列が入る]

上記のURLははてな検索で実際に単語を検索して返されたURLになります。

検索フォームを使わなくても意図的にURLに任意の単語を決められた場所に入れ検索するとその検索結果が返ってきます。

これにより以下のソースを生成します。

Sample5

 	document.getElementById("buttonContent").addEventListener("click",function(){

		textContentValue = document.getElementById("textContent").value;
		location.href = "http://search.hatena.ne.jp/search?word=" + textContentValue;

	},"true");

getElementByIdで取得しているのはテキストフォームのvalue値です。

基本的にボタンとテキストフォーム両方にid名をつけましたのでそれからユーザーが入力した値を参照します。後は検索結果の表示となるわけですが、文字には文字コードという問題が必ずついてきます。URLの文字列は必ずエンコードしなければなりません。そのため結果的に英数字以外では文字化けしてしまいます。基本的に大手の検索フォームには文字コードを設定するプロパティがあるのですが、はてなには無いようですので今回作成する検索フォームはここまでとします。

以下今回の全体のソース

Sample6

 // ==UserScript==
// @name		Hatena Message Form
// @namespace		http://www.hatena.ne.jp/
// @author		flandlescalet
// @description		Hatena search box append
// @include		http://m.hatena.ne.jp/*
// @exclude		http://yahoo.co.jp/
// ==/UserScript==


(function(){

	formInput  = document.createElement("input"); //text用
	formButton = document.createElement("input"); //button用
	
	/* text用フォームの製作 */

	formInput.type   = "text";
	formInput.id	 = "textContent";

	/* button用フォームの製作*/ 

	formButton.type  = "button";
	formButton.id	 = "buttonContent";
	formButton.value = "検索";

	document.getElementById("header-body").appendChild(formInput);
	document.getElementById("header-body").appendChild(formButton);

	document.getElementById("buttonContent").addEventListener("click",function(){

		textContentValue = document.getElementById("textContent").value;
		location.href = "http://search.hatena.ne.jp/search?word=" + textContentValue;

	},"true");

	
	

})();

今まで1～4の内容を踏まえれば大抵の事はgreasemonkeyで製作することが可能となります。

greasemonkeyは特別なJavaScriptといった感じがしますが、決してそうではなくDOMの概念を深くもったJavaScriptの一つであることを捉えておく必要があります。

データの取得にはgetElementだけでなくXPATHといった方法もありますのでいろいろパターンを探して自分なりのソースの記述を見つけると良いかもしれません。