Home > 2008年08月

2008年08月

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
  • Comments (Close): -
  • TrackBack (Close): -

フレームのあるページで選択文字列の取得とイベントリスナーのテスト

User JavaScriptを作る時、フレームのあるサイトを無視してきたが、少なくなったとはいえまだまだあるので、選択文字列の取得とイベントリスナーについてだけ少し試してみた。

フレーム

フレーム(枠)によって複数の文書を表示することができる。

frameset要素

フレームの設定。HTML文書は head要素と frameset要素で構成される。(通常は head要素と body要素。)

<html>
<head>
<title>frameset要素</title>
</head>
<frameset cols="200,*">
<frame src="left.html" name="left">
<frame src="right.html" name="right">
</frameset>
</html>
iframe要素

HTML文書の中に HTML文書を埋め込む。

<html>
<head>
<title>iframe要素</title>
</head>
<body>
<iframe src="center.html" width="500" height="400"></iframe>
</body>
</html>

frameオブジェクト

window.frames

フレームのウィンドウの数
window.frames.length
フレームのウィンドウを参照
window.frames[(番号、名前)]
フレームのあるページの選択文字列の取得
var word = window.getSelection().toString();
if (! word){
    if (frames.length){
        for (var i = 0; i < frames.length; i ++ ){
            word = frames[i].getSelection().toString();
            if (word) break;
        }
    }
}

これでフレームのあるページの選択した文字列を取ってこれる。ただし、フレームの中のページが外部ドメインの場合は、セキュリティ上取得できない。

フレームのあるページにイベントリスナーを登録
document.addEventListener('click', function (e){
    alert(e.target);
}, false);
if (frames.length){
    for (var i = 0; i < frames.length; i ++ ){
        frames[i].document.addEventListener('click', function (e){
            alert(e.target);
        }, false);
    }
}

上の選択文字列の取得と同じようにフレームの中のページが外部ドメインの場合は、イベントリスナーは登録できない。

参考にしたページ

livedoor クリップのクリップするページにはてなブックマークのタグを表示する User JavaScript (2)

User JavaScriptを適用したクリップするページ

livedoor クリップのクリップするページが少し変更されたため、前に作った livedoor クリップのクリップするページにはてなブックマークのタグを表示する User JavaScriptが動かなくなったから、修正した。

スクリプトの内容

  • 「隠されている過去に入力したタグ」の下にはてなブックマークに付けられたタグを表示する。
  • タグは 15まで多い順に表示する。2桁は赤、3以上は青、2以下は灰色。
  • livedoor クリップのユーザ数の右にはてなブックマークのユーザ数を表示する。

ダウンロード

ldc_show_hbtags2.js


livedoor クリップの変更について

livedoor クリップはクリップするページ以外もちょこちょこと変更があるようで、コメントを重視していくという感じなのかな。見る分には良いけど、利用するとなると良いことばかりじゃない。

クリップするページに他人のコメントが表示されるんだけど、すでにクリップすることに決めているのに、読む人はいるの?コメントは下のほうにあって邪魔にならないからまだいいけど、コメントを記入する左にプロフィール画像が表示される。これが場所を取る(60x60)。クリップするページなんだから自分のコメントということは分かっているし、プロフィール画像を設定してない人にとっては意味がない。

Firefox 3をインストール

今頃、Firefox 3をインストールした。

Firebugや Web Developerを利用する時だけ、Firefoxを起動しているので、インストールする拡張機能は少ない。

Firefox 3にインストールした拡張機能

DOM Inspector
DOMの調査。Firefox 3からは拡張機能になったようで、DOM Inspector :: Firefox Add-onsからインストールできる。
Firebug
HTML、CSS、JavaScriptの解析、編集など。Firebug 日本語版(ベータ版)を入れてみた。公式のものでも簡単な英語なんだけど、日本語だと安心感がある。
Web Developer
HTML、CSS、JavaScript、Cookieなどをあれこれ、いろいろ。日本語版の配布先がInfoaxia(インフォアクシア)からミナトラボに移った。
Live HTTP Headers
HTTPヘッダの表示。何となく入れてみた。
Greasemonkey
サイトでユーザスクリプトを実行できるようにする。(入れたのを忘れてた。)

Firefox 3になって気になったこと

  • メモリの使用量が減った。Firefoxはメモリの使用量が半端じゃなかったんで減ったことは驚かなかったけれど、減った量がなかなか。気分的には3割以上減った(?)。
  • オプション>セキュリティの「攻撃サイトとして報告されているサイトを表示するときに警告する」、「偽装サイトとして報告されているサイトを表示するときに警告する」を設定してあると、「Google Safe Browsing」のページに飛んでるようなんだけど、タイミングがちょっと気になる。

Google Analyticsに変更

  • 2008-08-19 (Tue)
  • web

FC2 アクセス解析から Google Analyticsに移行した。

FC2 アクセス解析の「自動登録機能」が停止になり、「手動登録」だけになり、困ったことになったなあと思っていたところに、「タグクローラ」機能が新たに追加されて外のアクセス解析に移らないで済むかと思ったが、そういうわけにはいかなかった。

「タグクロール」は解析用のタグを設置したページを探し出す。FC2 アクセス解析の管理ページの設定>タグクロールのページで、解析するページの URLを入力して、クロールを実行して、ページをチェックして登録する必要がある。そのため、「手動登録」と手間はそんなに変わらないのだ。

Google Analytics以外にも、ClickyQLOOKも良さそうだったんだけど、Googleはアカウントを持っていて、簡単に試せるということで決めた。こうやって、Googleのサービスが増えていくのか。

本当は訪問者数が分かるだけの簡単なカウンターみたいなものでいいんだけど、広告が表示されたり、保存期間が短かったりするのが残念。FC2にも、FC2カウンターがあるけど、保存するのが30日間と短い。

最後に、Google Analyticsを始めて一ヶ月以上が経つが、検索エンジンの比率がえらくいびつなんだけど、こんなもんなのか。(FC2 アクセス解析を使用している時も同じような比率だったので、Google Analyticsが間違っているわけではないと思われる。)

検索エンジン別の構成比率の円グラフ

青が googleで 97.91%。緑が yahoo 1.62%。その他残り。

参考にしたページ

Yahoo! Pipesで英語を翻訳する User JavaScript

User JavaScriptで翻訳された日本語

Yahoo! Pipesで英語を翻訳するパイプを作った。Yahoo! Pipesはフィードだけでなく、JSONや JSONPでもデータを返してくれるので、そのパイプから JSONPデータを受け取る User JavaScriptを作成して、Operaのコンテキストメニューからスクリプトを呼び出すようにしてみた。

Yahoo! Pipesで英語を日本語に翻訳するパイプ

英語を日本語に翻訳するパイプ

  1. 「Text Input」モジュールで英語を入力する。
  2. 「Translate」モジュールで文字列を日本語に翻訳する。
  3. 「Item Builder」モジュールでフィードを作成する。'title'を「Text Input」モジュールと、'description'を「Translate」モジュールとつなぐ。

作成した英語を日本語に翻訳するパイプ

英語を日本語に翻訳するパイプの JSONPの URL

http://pipes.yahoo.com/pipes/pipe.run?_id=FidANf8t3RGDU4Kvjtzu1g&_render=json&textinput1=(英語)&_callback=(関数名)

JSONPデータ
(関数名)({
    "count":1,
    "value":{
        "title":"\u82f1\u8a9e\u3092\u65e5\u672c\u8a9e\u306b\u7ffb\u8a33\u3059\u308b"(英語を日本語に翻訳する),
        "description":"Pipes Output",
        "link":"http:\/\/pipes.yahoo.com\/pipes\/pipe.info?_id=FidANf8t3RGDU4Kvjtzu1g",
        "pubDate":"(日時)",
        "generator":"http:\/\/pipes.yahoo.com\/pipes\/",
        "callback":"(関数名)",
        "items":[
            {"title":"(英語)","description":"(Unicodeエスケープされた翻訳した日本語)"}
        ]
    }
})

Yahoo! Pipesで英語を翻訳する User JavaScript

選択した英語の文字列を作成したパイプに渡し、パイプから返ってきた JSONPの中の翻訳した日本語を表示する。

  1. 文字列が選択されていなければ、何もしないで終わり。
  2. パイプから空のデータしか返ってこなければ、「翻訳に失敗しました」と表示して、終わり。
  3. パイプからデータが返ってくれば(必ずしも翻訳に成功したとは限らない)、左上に表示する。
  4. マウスを少し動かすと、表示を消す。

パイプに送る英語の文字数を 2000語までにした。それ以上選択していても、先頭から 2000語で切る。パイプで改行が削除されてしまうので、2000語でも見づらいぐらいだ。

ダウンロード

yahoopipes_translate_englishintojapanese.js

Operaのコンテキストメニューから User JavaScriptを呼び出す

上のUser JavaScriptをダウンロードして、User JavaScriptを保存するフォルダにコピーする。

Operaのメニューファイルの[Hotclick Popup Menu]に以下を追加すれば、右クリックメニューから Yahoo! Pipesで英語を翻訳できるようになる。

Item, "Yahoo! Pipes翻訳(英日)" = "Go to page, "javascript:opera.yahooPipesTranslate()""

注意:Yahoo! Pipesのサービスに頼っているので、Yahoo! Pipesに障害などが出て、スクリプトが思うように動かないこともありえます。翻訳の精度の方はあれです。

参考にしたページ

Home > 2008年08月

おまかせリンク(R)
全記事表示リンク
Search
Meta
Feeds

Page Top

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。