Karappo web design room

こんな基本的なことで、つまずいてしまいました。
localStorageのあるキーの値を削除したいときは localStorage.removeItem を使いましょう。
nullやundefinedを代入しても、文字列扱いになってしまい条件分岐等に使ってると、気づきにくいです。。。

間違った方法

localStorage.hoge = 'buuu';

localStorage.hoge = null;　　　　// 'null' が代入されてしまう

localStorage.hoge = undefined; // 'undefined' が代入されてしまう

正しい方法

localStorage.hoge = 'buuu';

localStorage.removeItem('hoge');

GooglemapsAPIでは、googlemapsを使う際は文字コードにutf-8を使うことが推奨されてます。FirefoxではEUCなどのソースコードに埋め込んでも普通に動きますが、IEでも以下のような方法で問題なくいくことが判明（そのままだと、地図の部分が真っ白になって何も表示されない）。イッツ・ア・ソー・ナイス！おかげで一気に問題解決です。
方法はjavascriptでgooglemapsAPIを呼び出すところに「charset="utf-8"」を加筆するだけ。

<script src="http://maps.google.com/maps?file=api&v=1&key=....." 

  type="text/javascript"></script>

↓

<script src="http://maps.google.com/maps?file=api&v=1&key=....." 

  type="text/javascript" charset="utf-8"></script>

情報元

ブログなんかでよくみかけるJavaScriptを利用したタグ挿入機能。
Nucleusのソースから必要な箇所だけ抜き出してみた。
Mozilla系ブラウザへの対応で、とても複雑になっている。
だが、これでもMacIEでは選択範囲がうまく取れずに最後尾にタグが挿入されるバグがある（当然Nucleusでも解決されていない）。


こんなかんじ

JavaScript

function ahrefThis() {

	if (document.selection)

		strSelection = document.selection.createRange().text;

	else

		strSelection = '';

		

	strHref = prompt("Create a link to:","http://");

	if (strHref == null) return;

	

	var textpre = "<a href=\"" + strHref.replace(/&/g,'&') + "\">";

	insertAroundCaret(textpre, "</a>");

}



// stores the caret

var lastSelected, lastCaretPos;

function storeCaret (textEl) {



	// store caret

	if (textEl.createTextRange) 

		lastCaretPos = document.selection.createRange().duplicate();



	// also store lastselectedelement

	lastSelected = textEl;

	

	nonie_FormType = textEl.name;



	scrollTop = textEl.scrollTop;

}





// inserts text at caret (overwriting selection)

function insertAtCaret (text) {

	var textEl = lastSelected;

	if (textEl && textEl.createTextRange && lastCaretPos) {

		var caretPos = lastCaretPos;

		caretPos.text = caretPos.text.charAt(caretPos.text.length - 1) == ' ' ? text + ' ' : text;

	} else if (!document.all && document.getElementById) {

		mozReplace(document.getElementById('input' + nonie_FormType), text);

		if(scrollTop>-1) {

			document.getElementById('input' + nonie_FormType).scrollTop = scrollTop;

		}

	} else if (textEl) {

		textEl.value  += text;

	} else {

		document.getElementById('input' + nonie_FormType).value += text;		

		if(scrollTop>-1) {

			document.getElementById('input' + nonie_FormType).scrollTop = scrollTop;

		}

	}

	updAllPreviews();

}



// inserts a tag around the selected text

function insertAroundCaret (textpre, textpost) {

	var textEl = lastSelected;

	

	if (textEl && textEl.createTextRange && lastCaretPos) {

		var caretPos = lastCaretPos;

		caretPos.text = textpre + caretPos.text + textpost;

	} else if (!document.all && document.getElementById) {

		mozWrap(document.getElementById('input' + nonie_FormType), textpre, textpost);

		if(scrollTop>-1) {

			document.getElementById('input' + nonie_FormType).scrollTop = scrollTop;

		}

	} else {

		document.getElementById('input' + nonie_FormType).value += textpre + textpost;

		if(scrollTop>-1) {

			document.getElementById('input' + nonie_FormType).scrollTop = scrollTop;

		}

	}



	updAllPreviews();

}





/* some methods to get things working in Mozilla as well */

function mozWrap(txtarea, lft, rgt) {

	var selLength = txtarea.textLength;

	var selStart = txtarea.selectionStart;

	var selEnd = txtarea.selectionEnd;

	if (selEnd==1 || selEnd==2) selEnd=selLength;

	var s1 = (txtarea.value).substring(0,selStart);

	var s2 = (txtarea.value).substring(selStart, selEnd)

	var s3 = (txtarea.value).substring(selEnd, selLength);

	txtarea.value = s1 + lft + s2 + rgt + s3;

}

function mozReplace(txtarea, newText) {

	var selLength = txtarea.textLength;

	var selStart = txtarea.selectionStart;

	var selEnd = txtarea.selectionEnd;

	if (selEnd==1 || selEnd==2) selEnd=selLength;

	var s1 = (txtarea.value).substring(0,selStart);

	var s2 = (txtarea.value).substring(selStart, selEnd)

	var s3 = (txtarea.value).substring(selEnd, selLength);

	txtarea.value = s1 + newText + s3;

}

function mozSelectedText() {

	var txtarea = document.getElementById('input' + nonie_FormType);

	var selLength = txtarea.textLength;

	var selStart = txtarea.selectionStart;

	var selEnd = txtarea.selectionEnd;

	if (selEnd==1 || selEnd==2) selEnd=selLength;

	return (txtarea.value).substring(selStart, selEnd);

}

リンク挿入ボタン

<input type="button" value="リンク挿入" onClick="ahrefThis()">

テキストエリア

<textarea 

		name="body" id="inputbody" 

		onkeyup="storeCaret(this); updPreview('body');"

		onclick="storeCaret(this);"

		onselect="storeCaret(this);" 

		tabindex="20" cols="60" rows="20">

</textarea>

↑

※注意

idの名前は、name属性と統一する。
つまり、
name="text"　→　id="inputtext"
name="name" → id="inputname"
といった感じ。

2006.07.25 mio

Flashで、パブリッシュをするときに、「Flash Playerのバージョンを検知する」にチェックを入れてすると、VB Scriptや、java scriptを書き出してくれるが、これらのコードのうち、VB Scriptの部分を、外部ファイルにすると、Windows IEでこのファイルが読み込まれないのか、何故か動かなくなってしまうようです。ちなみにFireFoxでは外部ファイルのVB Scriptはちゃんと読み込まれて動作するようです。

ということで、VB Scriptの部分についてはHTMLファイルに埋め込んだ方が良さそうです。尚、複数のHTMLでFLASHを用いている場合に、このようにjava scriptを外部ファイルにすることが多いかもしれませんが、Full Flashのサイトなどのは場合、HTMLファイルに全て埋め込んだままでOKだと思います。