Home > 2008年06月

2008年06月

スポンサーサイト

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

Goal.comの CSS

  • 2008-06-29 (Sun)
  • css

スタイルシートを適用したGoal.com

Goal.comはやたらと Flashが多く、重いので、スタイルシートで Flashを消して、見た目を整えた。

具体的には、トップページの Flash4つ(!)と、記事のページの Flash1つ(前は3つだった)と、Googleの広告を消した。ヘッダを小さくした。メインのカラムの幅を広げ、文字を大きくした。幅が固定指定されていたので autoにして、ウィンドウのサイズを小さくしても下のスクロールバーが出ないようにした。

div.giantRight, div.giantBody, div.corpo, div.fasciaGiant {
    width : auto  !important;
}

div.testataL1, div.testataL2, div.col1, div.line1, div.pageCol3, div.MyGoo, div.testaPage,
.tabContenitore .articoloOption {
    display : none !important;
}

div#Articolo_divArticolo {
    background-image: none !important;
    background-color: transparent !important;
}

div.testata {
    background-image : none !important;
    height : 25px !important;
}

div.pageCol1 {
    width : 24%  !important;
}
div.pageCol2 {
    width : 70%  !important;
    margin : 0 14px;
}
div.col2 {
    width : 40%  !important;
}
div.col3 {
    width : 55%  !important;
}
div.flash_box embed {
    margin : auto  !important;
}

div.articoloTesto * {
    font-size : 14px !important;
    line-height : 1.4em !important;
}

a.news_box {
    font-size : 12px !important;
    line-height : 1.3em !important;
}

div.banner728, div.banner960, div.banner300H, div.banner300, div.banner300H , div.banner160X160, div.banner160H, div.banner160, div.bannervirgilio120, div.banner160G, div.banner160SX, div.bannerGhome, div.bannerART468 {
    display : none !important;
}

あふの似非マウス操作モード

似非マウス操作モードは、あふである程度マウス操作が出来るようになる機能。

どうも v0.217(from Aprilfool)あたりからあるようなのだけど、今まで(あふ v0.224)見つけられなかった。このモードは【あふ】本体のシステムメニューから『 似非マウス操作 』にチェックを入れる事によって有効となります。と、AFX.TXTファイルに書いてあったのを勘違いして、あふの設定を探していた。 システムメニューは、Alt+Spaceを押すか、ウィンドウのタイトルバー左にあるアイコンをクリックすると、左上に出てくるメニューのことだった。

それと、AFX.INIファイルの [CFG]に「RAT=1」を追加しておくと、あふは似非マウス操作モードで起動する。あふを起動する度に、いちいちシステムメニューの似非マウス操作にチェックを入れなくて済む。

あふはキーボードでほとんど操作できるのでマウス操作がなくても困らないけど、タイミング的に使いたくなることがあるかもしれない。

マウス操作の中で私が使いそうなのは、ファイル窓のファイルを左クリックして、カーソル移動。今までは、ファイルをクリックしてもカーソルが左右のファイル窓に移動するだけだったが、似非マウス操作モードではカーソルがファイルの位置まで動いてくれるようになった。あとは、ファイルを右クリックしておなじみのコンテキストメニューかな。

ロッカージェスチャ(左クリックをしながら右クリック、あるいは右クリックしながら左クリック)もあるんだけど、左クリック右クリックはファイル操作メニュー(複写・移動・削除など)で、右クリック左クリックは上のマーク(選択)からカーソルまでのすべてファイルをマークする機能になっている。Operaで慣れてしまったので進む、戻るにしてほしい気もするけど、ファイラーではあまり履歴の移動はしないか。

User JavaScriptの練習 - Cookieにデータを保存する(続)

User JavaScriptの練習 - Cookieにデータを保存するの続き。

userjs_setcookie_operahistory.png

サイトを訪れた回数だけでなく、訪れたページの URLとページごとの回数を Cookieに記録するようにしてみた。

  • 「opera.com」ドメインのページを開いたら、Cookieを読み取り、'historyCount'の名前が見つかればその値を取得する。
  • 訪問回数を1回足して、Cookieに書き込む。
  • 訪問回数を左上に表示する。
  • 左上(3.)にマウスカーソルを乗せると、訪れたページのURLと回数を表示する。
  • 左上(3.)をクリックすると、クッキーを削除する。
  • 有効期限は1週間。1週間サイトに訪れなければCookieは消去される。
// ==UserScript==
// @include     http://*.opera.com/*
// ==/UserScript==

if (document.domain.indexOf('.opera.com') > -1){
    document.addEventListener('DOMContentLoaded', function (){

        function main(){
            var ck = new Cookie('historyURL', '', '.opera.com', '/', 60 * 60 * 24 * 7);
            ck.get();
            ck.add(location.href);
            ck.set();
            ck.makeElement();
            ck.display('count');

            // クリックでクッキーを削除
            ck.element.addEventListener('click', function (){
                ck.second = 0;
                ck.set();
                this.style.display = 'none';
            }, false);
            // 左上にマウスカーソルを乗せると訪問履歴を表示
            ck.element.addEventListener('mouseover', function (){
                ck.display('urlList');
            }, false);
            // 左上からマウスカーソルが離れると訪問回数を表示
            ck.element.addEventListener('mouseout', function (){
                ck.display('count');
            }, false);
        }

        function Cookie(name, value, domain, path, second){
            this.name = name;
            this.value = value;
            this.domain = domain;
            this.path = path;
            this.second = second;
            this.url = [];
            this.number = [];
            this.count = 0;
            this.element = null;
            this.urlList = '';
        }

        // Cookieの情報を取得
        Cookie.prototype.get = function (){
            var c = document.cookie;
            var v = c.split(';');
            var value = null;
            for (var i = 0; i < v.length; i ++ ){
                if (v[i].indexOf(this.name + '=') != -1){
                    value = v[i].substring(v[i].indexOf('=', this.name.length) + 1);
                    break;
                }
            }
            if (!value){
                return;
            }
            var v = value.split('&');
            for (var i = 0; i < v.length; i ++ ){
                var a = v[i].split('=');
                this.url[i] = decodeURIComponent(a[0]);
                this.number[i] = Number(a[1]);
                this.count += Number(a[1]);
            }
        }

        // Cookieを書き込む
        Cookie.prototype.set = function (){
            for (var i = 0; i < this.url.length; i ++ ){
                if (this.value){
                    this.value += '&';
                }
                this.value += encodeURIComponent(this.url[i]) + '=' + this.number[i];
            }
            var v = this.name + '=' + this.value + '; domain=' + this.domain +
                    '; path=' + this.path + '; max-age=' + this.second;
            document.cookie = v;
        }

        // 開いているページのURLをデータに追加する
        Cookie.prototype.add = function (URL){
            for (var i = 0; i < this.url.length; i ++ ){
                if (URL == this.url[i]){
                    this.number[i] ++ ;
                    URL = null;
                    break;
                }
            }
            if (URL){
                this.url[this.url.length] = URL;
                this.number[this.number.length] = 1;
            }
            this.count ++ ;
        }

        // Cookieのデータを表示する準備
        Cookie.prototype.makeElement = function (){
            var element = document.createElement('div');
            this.element = element;
            element.style.cssText = 'position: absolute; top: 10px; left: 5px; color: black;' +
                                    'background-color: white; font-size: 14px; z-index: 5;' +
                                    'height: auto; width: auto; padding: 1px;' +
                                    'border: solid 1px black;';
            document.body.appendChild(element);

            var ul = document.createElement('ul');
            ul.style.cssText = 'margin: 2px; padding: 0;';
            for (var i = 0; i < this.url.length; i ++ ){
                var li = document.createElement('li');
                li.style.cssText = 'font-size: 13px; margin: 0; padding: 1px;' +
                                    'text-align: left; list-style: none; line-height: 1.2;';
                li.innerText = this.number[i] + ' ' + this.url[i];
                ul.appendChild(li);
            }
            this.urlList = ul;
        }

        // Cookieのデータ表示
        Cookie.prototype.display = function (data){
            this.element.innerHTML = '';
            if (typeof this[data] != 'object'){
                this.element.innerHTML = this[data];
            } else {
                this.element.appendChild(this[data]);
            }
        }

        main();

    }, false);
}

時々 Cookieに保存したデータが消えてしまうことがある。データの URLに含まれる文字列に問題があるのか。それとも変なデータがあると判断されてサーバに消去されることなんかもあるのだろうか。

User JavaScriptの練習 - Cookieにデータを保存する

Opera User JavaScriptです。

Cookieは「document.cookie」でスクリプトから参照することができる。読み書きが可能。

Cookieに書き込む内容
名前 = 値
Cookieの名前と値。値にセミコロン、カンマ、空白、日本語などの2バイト文字を使うにはエンコード(URLエンコードなど)が必要になる。この属性のみ必須。
expires = 日付
有効期限。日付はGMT形式。過去の日付が書かれると削除される。有効期限(expires、max-age両方)を省略すると、セッションが終わる時 Cookieは削除される。
max-age = 秒数
有効期限。 expiresと違い秒数で指定する。 0が設定されると Cookieは削除される。省略すると、上のとおりセッションの後削除される。
domain = ドメイン名
ドメインを指定する。省略するとサーバのホスト名になる。
path = パス
URLのパスを指定する。省略すると documentのパスになる。
secure
セキュリティの設定。安全な接続時(HTTPSなど)のみ送信される。
Cookieの制限
Cookieのサイズは 4KBまで。サーバもしくはドメインにクッキーの数は20まで。
Operaで Cookieを有効にするには、
右クリックしてサイト設定>Cookie(または設定>詳細設定>Cookie)の「Cookieを許可する」か「アクセスしているサイトからの Cookie のみ許可する」をチェックする。
Operaで Cookieの情報を見るには、
右クリックしてサイト設定>Cookie(または設定>詳細設定>CookieのCookie 設定)から選択する。「名前 = 値」のセットを一つずつ見ることができる。
または、JavaScriptの「alert(document.cookie)」でも見れる。が、「名前 = 値」すべてのデータがごっちゃになっているから見づらい。

Cookieの読み取り、書き込みのテスト

userjs_setcookie_operacount.png

  1. ドメインが「opera.com」のページを開いたら、Cookieを読み取り、'historyCount'の名前が見つかればその値を取得する。
  2. 訪問回数を 1回足して、Cookieに書き込む。
  3. 訪問回数を左上に表示する。
  4. 左上(3.)をクリックすると、クッキーを削除する。
  5. 有効期限は 1週間。1週間サイトに訪れなければCookieは消去される。
// ==UserScript==
// @include http://*.opera.com/*
// ==/UserScript==

if (document.domain.indexOf('.opera.com') > -1){
    document.addEventListener('DOMContentLoaded', function (){

        function Cookie(name, value, domain, path, second){
            this.name = name;
            this.value = value;
            this.domain = domain;
            this.path = path;
            this.second = second;
        }

        // Cookieの情報を取得
        Cookie.prototype.get = function (){
            var c = document.cookie;
            var v = c.split(';');
            for (i = 0; i < v.length; i ++ ){
                if (v[i].indexOf(this.name + '=') != -1){
                    this.value = v[i].substring(v[i].indexOf('=', this.name.length) + 1);
                    break;
                }
            }
        }

        // Cookieを書き込む
        Cookie.prototype.set = function (){
            var v = this.name + '=' + this.value + '; domain=' + this.domain +
                    '; path=' + this.path + '; max-age=' + this.second;
            document.cookie = v;
        }

        // Cookieのデータを表示
        Cookie.prototype.display = function (){
            var element = document.createElement('div');
            this.element = element;
            element.style.cssText = 'position: absolute; top: 10px; left: 5px; color: black;' +
                                    'background-color: white; font-size: 14px; z-index: 5;' +
                                    'padding: 3px; border: solid 1px black;';
            element.innerHTML = this.value;
            document.body.appendChild(element);
        }


        var ck = new Cookie('historyCount', 0, '.opera.com', '/', 60 * 60 * 24 * 7);
        ck.get();
        ck.value ++ ;
        ck.set();
        ck.display();

        // クリックでクッキーを削除
        ck.element.addEventListener('click', function (){
            ck.second = 0;
            ck.set();
            this.style.display = 'none';
        }, false);

    }, false);
}

参考にしたページ

WikipediaAPIで検索するブックマークレット

WikipediaAPI

WikipediaAPIWikipediaを検索することができるAPI。現時点では、ウィキペディア日本語版をタイトルで前方一致検索しているようです。

Wikipediaの情報のダイジェストを XML、RSS、JSON、PHP、HTML、TSV、JavaScriptの形式で返す。

WikipediaAPIのURLは
http://wikipedia.simpleapi.net/api?keyword=(検索文字列)&output=(出力方式: xml,rss,json,html,javascript,php,tsv)&callback=(関数名)

返ってくるデータ JSONの場合

[
{"language":"ja","id":(Wikipedia内の管理コード),"url":(WikipediaにリンクするURL),"title":(キーワードのタイトル),"body":(本文のダイジェスト),"length":(本文の長さ),"redirect":(別キーワードへのリダイレクトがあるか。ある 1、ない 0),"strict":(キーワードと完全一致するか一致する 1、しない 0),"datetime":(更新日時)},
{"language":"ja","id":"","url":"","title":"","body":"","length":,"redirect":,"strict":,"datetime":""},
{"language":"ja","id":"","url":"","title":"","body":"","length":,"redirect":,"strict":,"datetime":""}
]

選択した文字列を WikipediaAPIで検索するブックマークレットを作ってみた

  • 文字列が選択されていない場合は入力ダイアログを出す。何も入力されなければそこで終了。
  • WikipediaAPIで一致する情報がなければ、「キーワードに一致しませんでした」と表示して、消す。
  • 当てはまる情報があれば、左上に表示する。
  • リンクをクリックすると、Wikipediaのキーワードのページを開く。
  • 情報の表示されたところ以外をクリックすると、表示している要素を消す。

選択した文字列を WikipediaAPIで検索するブックマークレット

javascript:(function (){

    var word = window.getSelection().toString();
    if (! word){
        word = prompt('キーワードを入力してください');
        if (! word) return;
    }
    word = word.substring(0, 1000);
    load();

    function load(){
        var script = document.createElement('script');
        script.type = 'text/javascript'; 
        script.src = 'http://wikipedia.simpleapi.net/api?keyword=' + encodeURIComponent(word) + '&output=json&callback=displayWikipediaapiSearch';
        script.addEventListener('load', function (){
            document.body.removeChild(script);
        }, false);
        document.body.appendChild(script);
    }
})();

// コールバック関数
function displayWikipediaapiSearch(ary){
    var flag, div;
    createDiv();

    if (! ary){
        displayNull();
    } else {
        displayData();
    }
    if (! flag){
        addEvent();
    }
    displayWikipediaapiSearch = null;

    function createDiv(){
        if (document.getElementById('wikipediaapidiv')){
            div = document.getElementById('wikipediaapidiv');
            div.innerHTML = '';
            flag = true;
        } else {
            div = document.createElement('div');
            div.id = 'wikipediaapidiv';
            document.body.appendChild(div);
            flag = false;
        }
    }

    // キーワードに一致しなかった場合
    function displayNull(){
        div.style.cssText = 'position: fixed; top: 2px; left: 2px; color: black; background-color: white; z-index: 99; margin: 0px; padding: 3px; border: solid 1px black; font-size: 14px; width: auto; height: auto;';
        div.innerHTML = 'キーワードに一致しませんでした';
        setTimeout(function (){document.getElementById('wikipediaapidiv').style.display = 'none';}, 2500);
    }

    function displayData(){
        div.style.cssText = 'position: fixed; top: 2px; left: 2px; background-color: white; z-index: 99; margin: 0px; padding: 3px; border: solid 1px black; text-align: left; line-height: 1.3; width: 400px; height: 150px; overflow: auto;';
        for (var i = 0; i < ary.length; i ++){
            var link = document.createElement('a');
            link.href = ary[i].url;
            link.innerHTML = ary[i].title;
            link.style.cssText = 'color: blue; background-color: white; font-size: 14px; text-decoration: underline;';
            div.appendChild(link);
            var br = document.createElement('br');
            div.appendChild(br);
            var inf = document.createElement('div');
            inf.innerHTML = ary[i].body;
            inf.style.cssText = 'color: black; background-color: white; margin: 4px 0 14px; font-size: 14px; line-height: 1.3; border-bottom: dotted 1px gray; padding: 4px;';
            div.scrollTop = 0;
            div.appendChild(inf);
        }
    }

    function addEvent(){
        div.addEventListener('click', function (e){
            e.stopPropagation();
        }, false);
        // クリックして終了
        document.addEventListener('click', function (){
            if (document.getElementById('wikipediaapidiv')){
                document.getElementById('wikipediaapidiv').style.display = 'none';
            }
        }, false);
    }
}

Operaのコンテキストメニューから WikipediaAPIを使う

Operaのメニューファイルの[Hotclick Popup Menu]に下記を追加すれば、右クリックメニューから WikipediaAPIで検索できるようになる。

Item, "WikipediaAPI検索"="Go to page, "javascript:(function (){var word=window.getSelection().toString();if(!word){word=prompt('キーワードを入力してください');if(!word)return;}word=word.substring(0,1000);load();function load(){var script=document.createElement('script');script.type='text/javascript';script.src='http://wikipedia.simpleapi.net/api?keyword='+encodeURIComponent(word)+'&output=json&callback=displayWikipediaapiSearch';script.addEventListener('load',function (){document.body.removeChild(script);},false);document.body.appendChild(script);}})();function displayWikipediaapiSearch(ary){var flag,div;createDiv();if(!ary){displayNull();}else{displayData();}if(!flag){addEvent();}displayWikipediaapiSearch=null;function createDiv(){if(document.getElementById('wikipediaapidiv')){div=document.getElementById('wikipediaapidiv');div.innerHTML='';flag=true;}else{div=document.createElement('div');div.id='wikipediaapidiv';document.body.appendChild(div);flag=false;}}function displayNull(){div.style.cssText='position: fixed; top: 2px; left: 2px; color: black; background-color: white; z-index: 99; margin: 0px; padding: 3px; border: solid 1px black; font-size: 14px; width: auto; height: auto;';div.innerHTML='キーワードに一致しませんでした';setTimeout(function (){document.getElementById('wikipediaapidiv').style.display='none';},2500);}function displayData(){div.style.cssText='position: fixed; top: 2px; left: 2px; background-color: white; z-index: 99; margin: 0px; padding: 3px; border: solid 1px black; text-align: left; line-height: 1.3; width: 400px; height: 150px; overflow: auto;';for(var i=0;i<ary.length;i++){var link=document.createElement('a');link.href=ary[i].url;link.innerHTML=ary[i].title;link.style.cssText='color: blue; background-color: white; font-size: 14px; text-decoration: underline;';div.appendChild(link);var br=document.createElement('br');div.appendChild(br);var inf=document.createElement('div');inf.innerHTML=ary[i].body;inf.style.cssText='color: black; background-color: white; margin: 4px 0 14px; font-size: 14px; line-height: 1.3; border-bottom: dotted 1px gray; padding: 4px;';div.scrollTop=0;div.appendChild(inf);}}function addEvent(){div.addEventListener('click',function (e){e.stopPropagation();},false);document.addEventListener('click',function (){if(document.getElementById('wikipediaapidiv')){document.getElementById('wikipediaapidiv').style.display='none';}displayWikipediaapiSearch=null;},false);}}""

参考

自分好みのガジェットを作る! Windowsサイドバーガジェット作り入門:第3回 ガジェットを作ってみる(中編)|gihyo.jp … 技術評論社

Home > 2008年06月

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

Page Top

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