難しいですねえ。先日師匠にMP3ファイルの扱いがうまくいかないので助けてちょーだいと言われて、単に音声ファイルにコントローラを付けて聴けるようにするだけということだったんで何をそんなに苦労しているのかな等と不思議に思ったんですが、実際はけっこうジャングルな領域ですねえ。
objectタグでホイホイだと思っていたらな〜んとWindows版のFirefoxが足を引っ張ってダメ。IE8もChromeもSafariもOperaもみ〜んな動くしFirefoxもMac版はしっかり動くのにこれじゃあねえ。非推奨タグを使わざる得ないのかなあ。
と書いてしまったんですが、訂正しておきます。もしやと思ってネットにアップロードしたらあっさり動きました。Windows版のFirefoxでは恐らくセキュリティ上の仕様の為に単にデスクトップで動かないというだけでした。書く前にチェックしておけば良かったというマヌケな結末でした。「綾瀬はるか おっぱい連発」なていうココログニュースのルビを横目で見ながらチェックしていたバチが．．． 
Internet Explorer 7用にAJAXアプリのインターフェースを手直ししていて、最終的にはけっこうまともに動くじゃないのという結論に至りました。今まで動かなかったのは自分の手抜きとJavaScriptの邪道な書き方が原因だったかと (^^;
どこがいけなかったかというとセレクトメニューの処理でした。Safari、Firefox、Opera、Netscape Navigatorではセレクトメニューで選択した項目を得る時にvalueが設定されてないとvalueと書いても自動的にtextを選んでくれます。例えばshokujiというセレクトメニューの選択された項目を得たい時は、
taberu = document.getElementById('shokuji').value;
だけで
meshi1 = document.getElementById('shokuji').selectedIndex;
taberu = document.getElementById('shokuji').options[meshi1].text;
とやるのと同じ結果が得られます。Internet Explorer 7ではこれは使えず下側の書き方をせねば動きませんでした。Internet Explorer 7の方が他のブラウザに比べて基本に忠実なんですけど、怠け者のわたしにとってはちょっち痛いところだったかと。最初に手を抜くと後々苦しむという典型的な見本ですね。情けない．．．
それにしてもインターフェースでJavaScriptに頼らざるをえない部分でのInternet Explorer 7の動きはかなり優れていますな。Safari程ではないですが、FirefoxやOperaなんかよりずっと速いですし非常に安定した動きをします。正直見直しました。FirefoxやOperaだとサーバー側から送られてくるデータの量が多いとよくこけるんですが、Internet Explorer 7ではそんなことは全くありませんでした。後はselectionStartとかサポートしてくれたらかなり使えるんだけどな。
いや何がってAJAXで使うXMLファイルのencodingことです。フィンランド語で使う文字限定ですが（というか他はテストしていません）、FirefoxやOperaでは実際はutf-8でもencodingはISO-8859-1にしておかないとresponseTextをdivやtextareaなんかに流し込むと文字化けしてしまいます。encodingをutf-8にする場合はEncodeモジュールなんかを使ってutf-8に変換しないと化け物が出ます。Safariでもdivに流し込む時は同様にutf-8に変換しないとなりませんが、textareaなんかに編集可能なテキストとして流し込む時は変換なしでOKです。逆にXMLファイルのencodingをISO-8859-1にしておくとSafariでは変換しないと文字化けします。これだからJavaScriptってメンドッチーのよね。現状ではブラウザ選別をしないとあきまへんな。
Professional Editionが99ドルなんて．．．Community Editionは一番美味しい部分が削られているし。99ドルも払ってまで使いたいソフトではないし、今後はこのブログで取り上げることもないでしょう。
以前に公開したコードに間抜けなミスがありましたので修正しました（過去記事も修正しました）。太字の部分が以前はowariだけになっていました。動かなくて困ってしまった方お許しください。
function wrap(){
var tag1 = '<HOGE>';
var tag2 = '</HOGE>';
var area = document.getElementById('txtarea');
var bun = document.getElementById('txtarea').value;
var nagasa = bun.length;
var hajimari = area.selectionStart;
var owari = area.selectionEnd;
var mae = bun.substr(0, hajimari);
var naka = bun.substr(hajimari, owari-hajimari);
var ushiro = bun.substr(owari, nagasa);
document.getElementById('txtarea').value = mae + tag1 + naka + tag2 + ushiro;
}
この前アップしたプログラムのバグに偶然気づいてしまった。もうコードを見るのも嫌なんですけど、仕方がないので直しますか。今日はゆっくり眠りたかったのに．．．
使い勝手を良くしようとしたら地獄にハマりました。最後の最後で動かない部分が出てきて、途中でチェックをしていなかった為に一からチェックのし直しです。さいあくぅ〜
ちなみに使い勝手はフィンランド語でkäytettävyysと言います。いや、ブログなんかに書き込みをしている場合じゃないですな。ということでサイナラでっさ．．．
ついていけません．．．しかしJavaScriptって速くなって便利になりましたねえ。昔はJavaScript多用しているページは敬遠していましたけど、今はそれほど気を遣わなくても良い感じです。その代わりと言ってはなんですが、Flash多用のページはうんざりですねえ。
Windows側で今修正中のAJAXアプリを試してみました。Safari 3.0.3βとFirefoxでは全く問題なく動いていますが、IE 7は全然だめ。AJAXサポートが云々と言う前にJavaScriptがだめ。おそらくIE用に大幅に書き直さないとだめなんでしょうね。そんな時間はないということでIE 7さん、さようなら。タンペレで長年webデザイナーとして働いている友人と話したら、彼女も今では最初に他のブラウザ用のものを作っておいて後からIE 7用に別途に作ると言うことです。彼女の場合IEは強制ですが、うちの仕事場ではIEなしでもだ〜〜〜〜れも困らないのが幸いです。
以前に作ったAJAXアプリがSafari 3.0.3βでうまく動かないと思ったら、以前のSafariのJavaScriptにあったUNICODEに関するバグが修正されていて、自分で書いたバグ修正用のコードが問題を引き起こしていました。JavaScriptに関してはFirefoxと同じものでも動くようになっていたのですね。あまり邪魔には感じていなかったバグですが、無駄なコードが減ることは大歓迎です。
このブログにJavaScript経由で辿り着かれる方がけっこういるので、「JavaScriptでカーソルの位置に文字を挿入 その２」に書いたソースの応用編で「選択したテキストのラッピングの仕方」を書いておきます。前回と同様ソースは最小限しか書きません。変数の名称を出来るだけヒントを与えるものにしてありますので、応用して使ってみてください。
まずはHTMLのソース。
<html>
<head>
<title>
</title>
<script type="text/javascript" src="wrap.js">
</script>
</head>
<body>
<input type="button" value="Hogehoge" onclick="wrap()" />
<textarea id="txtarea" cols="50" rows="10">
</textarea>
</body>
</html>
wrap.jsの内容は下記の通りです。
function wrap(){
var tag1 = '<HOGE>';
var tag2 = '</HOGE>';
var area = document.getElementById('txtarea');
var bun = document.getElementById('txtarea').value;
var nagasa = bun.length;
var hajimari = area.selectionStart;
var owari = area.selectionEnd;
var mae = bun.substr(0, hajimari);
var naka = bun.substr(hajimari, owari-hajimari);
var ushiro = bun.substr(owari, nagasa);
document.getElementById('txtarea').value = mae + tag1 + naka + tag2 + ushiro;
}
これでtextareaに書いた文章の一部をマウス等で選択してボタンを押すと、選択した部分が<HOGE></HOGE>タグにくくわれます。SafariとFirefoxでしか実験していません。
ソースを書いたついでにもう一つJavaScriptネタを。
Jeffrey E. F. Friedlさんの「Mastering Regular Expressions」に『(?=.*?this)(?=.*?that)』というような前方一致検索を二つ使ってand検索をする例が載ってましたが（ちょっと違うかもしれません。記憶に自信なし）、実はこれをOSXのPerl 5.8.6でやるとかなり遅いです。ところが、SafariのJavaScriptで同じことをさせるとメチャンコ速い！ あの速さにはPerl さまでも勝てません。他のブラウザのJavaScriptではえらく遅いか使えないかのどちらかでしたので役に立たない情報ですけどね。
このマイナーなブログに「javascript textarea 挿入」で辿り着かれる方が多いみたいですし、前回この題で書いた時はソースを書かなかったのでで少し書いてみます。これってあまり選択の余地はないと思いますけどね。簡単にする為に、「セレクトメニューで選んだ文字列をテキストエリアのカーソルがある位置に挿入する」ということで話を進めます。まずは以下のソースのHTMLを書いてください。
<html>
<head>
<title></title>
<script type="text/javascript" src="insert.js"></script>
</head>
<body>
<select id="letters" onchange="insert()"> <option>ABC</option>
<option>DEF</option>
<option>GHI</option>
</select>
<textarea id="txtarea" cols="50" rows="10">
</textarea>
</body>
</html>
で、JavaScriptはinsert.jsという外部ファイルに以下のものを書きます。
function insert(){
var mojiretsu = document.getElementById('letters').value;
var area = document.getElementById('txtarea');
var bun = document.getElementById('txtarea').value;
var nagasa = bun.length;
var basho = area.selectionStart;
var mae = bun.substr(0, basho);
var ushiro = bun.substr(basho, nagasa);
document.getElementById('txtarea').value = mae + mojiretsu + ushiro;
}
これでセレクトメニューを変えるたびにカーソルの位置に選択された文字列が挿入されるはずです。SafariとFirefoxでしか実験してません。Internet Explorer？ 何ですかそれ？（笑） まあ適当に調整して使ってください。
ブックマークしてなかったのでうろ覚えですが、MozillaかなんかのJavaScriptのtipsにselectionStartを使ったカーソルの位置の取得の仕方が載っていたと思います。
idと同じ名称を関数に使うと動かなくなる。我ながら間抜けなことやってますなあ．．．
以下完全に自分用の覚え書き。当然と言えば当然なことですけど、HTMLの時にいい加減に書いていたので、悪い癖がなかなか直りません。
JavaScriptでXHTMLのコンポーネントの外観をいじる場合、幅や長さには必ず数値の単位（px等）を付けること。でないと動かない。スタイルや位置がページのコードやスタイルシートに書き込まれてしまっている場合、後からいじろうとしてもうまくいかない。
textareaやinputの文章中のカーソルの位置にセレクトメニューから選んだ文字列を挿入するJavaScriptが欲しくて色々ネットで検索したのですが、ぴったり合うのがなかったので自分で作ってしまいました。selectionstartとsubstr()を使ってあっけないほど簡単にできてしまいました。下手に人に頼るよりは自分でやってみるものだということをあらためて痛感しました。
Apple | AppleScript & Automator | HTML | iPhone | japani-suomi | JavaScript | Mac | OSX | Suomeksi, koska en uskalla kirjoittaa japaniksi | Suomeksi, koska haluan kirjoittaa suomeksi | Suomeksi, koska tietsikka ei ymmärrä japania | suomi-japani | XML | おすすめサイト | お知らせ | ぼやき | ぼやき （フィンランド語版） | ウェブログ・ココログ関連 | クルマ | サッカー | スクリプト | スポーツ | ニュース | バイク | パソコン・インターネット | ファッション・アクセサリ | フィンランド | フィンランド人 | フィンランド語 | ユーミン | 北欧 | 悲劇 | 携帯・デジカメ | 文化・芸術 | 旅行・地域 | 日記・コラム・つぶやき | 映画・テレビ | 書籍・雑誌 | 私的Mac生活 | 経済・政治・国際 | 芸能・アイドル | 言語学 | 音楽
最近のコメント