ちょっと前の投稿でjQueryを使いました。 それである要素内のテキストを設定するため$(elem).text("文字列")を使ったところ不具合が。 いくつかの記号がコードを使った文字参照形式(&#???;)で、そのままブラウザの画面に表示されてしまったのです。 おそらく、文字参照への変換が2度行われてしまったのでしょう。
原因は調べてませんが、ローカルで試したときは問題なく表示されてたのでbloggerの使っているコードと自分で用意したjQueryが干渉してこうなってしまったのだと思われます。 $(elem).html("文字列")の方を使ったら問題なく記号を設定できました。
というわけで、bloggerで使うスクリプトにjQueryを含める場合、$(elem).text("文字列")に注意が必要です。
詳しい条件とかは忘れたけど、ieのなんかのバージョンでjQueryを使ったとき $("<p>") のようなコードで要素を作れないと聞いたので確かめてみました。 個人のページのネタなのでie10だけチェック。 試したコードはこんな感じ。
とりあえず、httpリクエスト送信前にリクエストを察知できるイベントでhttp-on-modify-requestってのがあります。 http-on-modify-requestのリスナを書くと、こんな感じです。
var httpRequestObserver = {
observe: function (aSubject, aTopic, aData)
{
if (aTopic !== "http-on-modify-request")
return;
var httpChannel = aSubject.QueryInterface(Ci.nsIHttpChannel);
...
},
QueryInterface: XPCOMUtils.generateQI(["nsIObserver"])
};
ここで、aSubjectをnsIHttpChannelにキャストしているコードはよく見ます。 でも、nsIHttpChannelに通信を止めるようなメソッドはありません。 nsIHttpChannelだけじゃhttpリクエストのキャンセルはできないんですね。
前の投稿で書いた「Greasemonkeyで広告を消去できないケース」を再現する例です。 広告消去のアドオンを作りたい人にとっては、簡易サーバとかログの確認とかがテストの参考になるかもしれません。
次の環境で確認。
まずはGreasemonkeyでimgタグを消すコードを書きます。 このコードはlocalhostでのみ有効です。
Rhinoのオフィシャルサイトで概要を見ると、「Rhino が含んでいるものは、JavaScript1.6 のすべての機能」などと書かれています。
「それでは、JavaScript1.7 の機能は使えないのか?」と思ったら使えました。 シェルでversion関数を使ってみると、version(170)までは有効なようです。 180以降の値を指定すると例外がはかれました。
js> version(170) 0 js> version(180) org.mozilla.javascript.WrappedException: Wrapped java.lang.IllegalArgumentExcept ion: Bad language version: 180 (<stdin>#3) ...
JavaScript1.6までは全ての機能が含まれていて、1.7以降の機能は一部しか含まれていないということでしょうか?
jsファイルで1.7の機能を使うには「-version 170」のオプションが必要でした。 「https://developer.mozilla.org/ja/New_in_JavaScript_1.7」を参考にこんなサンプルコードを書いて、
GUIが無かった時代の、コマンドプロンプト上でのカウント表示のコードです。 プログレスバーがまだ無かったときはこんなことをしていました。 Rhinoで遊んでいるときにコマンドプロンプトを使っているので、思い出して書いてみました。
var out = java.lang.System.out;
print_test(0);
function print_test(i)
{
if(100 < i)
{
out.println(' end.');
return;
}
out.format('\rtest %2d%%', java.lang.Integer(i) );
java.lang.Thread.sleep(100);
print_test(i + 1);
}
実行すると「test ?%」と表示されます。 ?の部分が1から100までカウントアップされ、100%になると「test 100% end.」と表示され終わります。
out.formatで最初にキャリッジリターン(\r)を出力しているのがポイントです。 \nは改行して行頭に、\rは改行せずに行頭に移動します。 \rして新しい文字列(test ?%)で書き直せば、見た目は ?% の部分だけが更新されているように見えます。
Rhino用だとこんなコードになるらしい。
// 角括弧[]の中身を取り出す(数字があった場合)
var text = 'a[0]bc[1]de[]fg[2][3]hij[4]klmn[';
var r = new RegExp(/\[(\d+)\]/g);
var m;
while( (m = r.exec(text) ) != null)
{
print('m[1] = ' + m[1] );
}
結果は、
m[1] = 0 m[1] = 1 m[1] = 2 m[1] = 3 m[1] = 4
globalマッチのときは '文字列'.match(/正規表現/g) をするとマッチした部分全体の文字列が入った配列が帰ります。 カッコ内の取り出しはできないっぽい?
Rhinoでファイル出力をするときは、javaのクラスを使います。 javaのクラスの使い方はRhinoのオフィシャルサイトの説明の通りです。 javaで書くときと同じようなコードになります。 簡単なコードですが、実際にファイル出力をするサンプルがネットで見つからなかったので書いてみました。
var file_name = "dummy_dir";
var out;
try
{
out = new java.io.PrintWriter(file_name);
out.println("test 日本語");
}
catch(exc)
{
print('ファイル出力エラー');
}
finally
{
if(out != null)
{
out.close();
}
}
file_nameがdummy_dirになっているのは例外のcatchを確認するためです。 「普通に出力」と「あらかじめディレクトリdummy_dirを作って実行 → ファイル作成失敗 → 例外発生を確認」の両方をやってみました。 どちらも普通に処理されました。
PrintWriterのcloseは例外発生の可能性があります。 javaだとcloseもtry～catchで囲む必要アリ。 ですがまぁ、「javascriptでコードを書く場合は雑になるのが普通だろう」ってことでこのコードでは割愛しました。
特定の属性を持った要素を取り出すコードを検索すると次のように正規表現を使ったものが多く見つかります。
// test3.js 例1
var x = <root>
<link ref="#ref0">section 0</link>
<link ref="http://dummy.jp/dummy.html#ref1">Outer section 1</link>
<link ref="#ref2">section 2</link>
</root>;
var elems = x.link.(@ref.match(/^#.*/) );
for(var i in elems)
{
var elem = elems[i]
print('link to "' + elem + '" ... ' + elem.@ref);
}
結果は、
D:\～\rhino1_7R2>java -jar js.jar -w -strict -encoding utf-8 test3.js link to "section 0" ... #ref0 link to "section 2" ... #ref2
これ、正規表現じゃなくても普通の文字列比較関数でもいいみたいです。 例えばこんなコードでも同じ結果になります。
Rhinoで標準出力と標準エラー出力を使う方法。 ちょっと試しただけなので確認不足かもしれませんが、一応投稿です。 javascriptだけでは出力できないのでjavaのクラスを使用します。 Rhinoがjava上で動いているからできるらしい。 次のようなコードで動きました。
var con_err = java.lang.System.err;
con_err.println('標準エラー出力テスト');
con_err.flush();
検索「Rhino 標準出力」で探すとStream系クラスでラッピングしているサンプルコードがあったけど、ラッピングは不要です。 なのでimportPackageも不要。 標準入力は試してません。 そっちもラッピング不要なんでしょうか? 使う当てがないから試しませんけどね。
上の例ではSystem.errオブジェクトを適当な変数に代入して使ってます。 毎回「java.lang～」と書くなら代入は不要です。
java.lang.System.out.println('標準出力テスト');
flushは無くても大丈夫でした。 でもそれは環境によって違うかもしれません。 色んな環境で使うコードではflushしておいた方が良さそうな気配です。
今日もポチポチとRhinoでxmlを読むコードを試してました。 どうやらe4xには「要素.hasChildNodes()」のメソッドが無いようですね。 代わりにこんな感じでいいのかな?
if(0 < 要素.*.length() )
{
子要素があるときの処理
}
一応動いているようだけど、よく確認してません。 ほんとにこれでいいんでしょうか?
前回の投稿で名前空間の扱いがよく分からず、力技で処理してました。 その後ちょっと勉強してデフォルト名前空間を設定するコードを発見。 次のようにすればいいようです。
var ns = xmlobj.namespace(); default xml namespace = ns;
これでxmlの各要素にアクセスできるようになりました。 例えば次のようなxmlファイル「test.xml」を用意して、
<?xml version="1.0" encoding="UTF-8"?>
<root xmlns="http://www.dummy.jp">
<msg attr="属性">テキスト</msg>
</root>
msg要素にアクセスするには次のようにします。
「どうでもよかった女.svg」の省サイズ化をしたとき、「スクリプトを作っておいた方が楽かも」とか書いてました。 簡単に言うと、
ってことです。 今svg画像を作っていないのですぐに必要はないのですが、とりあえずなにでスクリプトを組むか考え中。 javascriptについて調べてみたらRhinoに行き当たりました。
jQueryでコードを書くときの方針などです。 入門レベルの内容。 JavaScript自体あまり触ってないので、雑かもしれません。
まずは、htmlのヘッダでjQueryのライブラリを読み込みます。
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script type="text/javascript" src="自作コード.js"></script>
jquery.min.jsは公式サイトからダウンロードして自分のサイトにアップロードしてもいいですが、ここではGoogle AJAX Libraries APIを使用しています。 ちなみに、jquery.jsはコードを読みたい人用。 通常は無駄な文字やコメントが削除されたjquery.min.jsを使いましょう。
onloadの代わりに次のコードを使います。
$(document).ready(function()
{
// 初期化コード
});
短縮コードは、
$(function(){
// 初期化コード
});
昨日の続きで、ちょっとだけjQueryを触りました。 関数1個を数行書き換えただけです。
function showResult(data)
{
$('#result').empty();
var list = $('<ol/>').appendTo('#result');
$.each(data.feed.entry, function(i ,item)
{
var li = $('<li/>');
$('<a/>')
.attr('href', item.media$group.media$player[0].url)
.append(item.title.$t)
.appendTo(li);
li.appendTo(list);
}
);
}
アンカータグを並べて改行タグで区切っていたのを、リストタグを使うように書き換えました。 こういう作業をするとき、firefoxの「選択した部分のソースを表示」は役に立ちますね。
firefoxで何も選択せずに右クリックすると、メニューに「ページのソースを表示」があります。 これを選ぶとダウンロードしたファイルのソースがそのまま表示されます。 一部のテキストを選択すると、右クリックメニューの「ページのソースを表示」が「選択した部分のソースを表示」に変わります。 これを使うとJavaScriptやxml+xsltで変化した後、表示中のページのソースを見ることができます。 スクリプトでタグをチマチマ編集しているときに便利です。
そういえば、ペルソナ3フェスの攻略情報を書いたときもよく使ったっけ。 あれ、無駄にxml+xsltで書いたんですよね。
遅まきながら、今まで手を出していなかったjQueryを試してみました。 ネタは、googleガジェットやjavaでもやった「Youtubeの自分のチャンネルの動画一覧」です。 ぱっと思いつくネタがなかったので、今日はこれで。
htmlのheadにjsファイルを登録して、
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script type="text/javascript" src="test.js"></script>
bodyは次の要素を書きます。
<form><input type="button" id="check_btn" value="チェック" /></form><p id="result"></p>
test.jsの中身はこんな感じ。
昨日のコードはcssの部分が適当でした。 今日の作業で、一応それなりのcssになったので投稿です。
コードはこんな感じ。 コードがはみ出ているかもしれないけど、気にしない方向でお願いします。 よく見たいときはマウスドラッグとかで選択してテキストエディターに貼り付けてください。
昨日、自作ガジェットのコードがキャッシュに阻まれて更新できませんでした。 そのことをチョッと検索。 キーワード「google gadget キャッシュ」で調べてみるとそれっぽい対策情報をいくつか見つけました。 iGoogleにMy gadgetsというガジェットを入れると良いらしい。
で、実際にやってみるとハズレでした。 My gadgetsでキャッシュのチェックを外してからコードを更新しても反映されません。 正確に言うと、ローカルでコードを編集してgoogle gadget editorでUploadというのを繰り返そうとしたら、古いコードしか表示されませんでした。
結局、昨日と同様plalaのウェブサイトスペースにコードをアップロードして、bloggerで動作確認をしました。 面倒くさい。
今日書いたコードは、「YouTubeの自分のチャンネルの動画を再生回数が多い順にリストアップ」というものです。 bloggerの表示スペースを考えて、多い方から5つ表示させてみました。
JavaScriptでFF13exp計算機を作りました。 一応、攻略メモにあるitem.odsの最後のシートに同じような式はあるんですが、それだと不親切すぎるということでブラウザでも使えるようにしました。 でも使う人、いるのかな?
コレを作るとき、ieのバグを踏みました。 innerHTMLでselectタグの中のoptionを書き換えると変になるアレです。 Google Chromeで作って、動作チェックのときだけ他のブラウザ(ie、FireFox、Opera)で確認。 ieだけ動かなかったので「またieかっ!」ってなりましたね。
ペルソナ3フェスの攻略ページを作ったときも似たようなコードは書いてたんですが、その時は1つ外のタグを書き換えていたので気付きませんでした。 前ので上手くいっている分、今回はなぜ動かないのか分からずにチョッと戸惑いました。 少し調べてすぐに原因が分かったのは運が良かったかな?
アマゾン
