何もない場所 » WEB制作

ニコニコ動画のユーザーをニコニコチャートで検索するブックマークレット

KAY — Sat, 16 Jan 2010 06:40:51 +0000

ニコニコブックマークレット第4弾。

ニコニコ動画のうｐ主の中には、全ての情報を非公開にしてる方も少なくありません。
自分のウォッチリストを眺めてて「あれ？　この人はどんな動画を作ってる人だったっけ？」と思う事が多々あったので作ってみました。
本当はユーザーIDから動画を検索出来るのが望ましいのですが、そのようなサービスをやってるとこを知らないので……。
ウォッチリストにちょっとしたメモでも書けるように、公式で対応して欲しいところなんですけどねー。まあいいや。

使い方ですが、2通りあります。
まず、マイページのウォッチリストを開いている状態で使った場合。
各ユーザーの名前の横に「ニコニコチャートでニックネーム検索」というリンクが現れますので、そこからニコニコチャートにジャンプして下さい。
また、ユーザー個別のプロフィールを開いている状態で使うと、直でニコニコチャートへ跳びます。
そんだけ。

あっ、もしもニコニコチャート以外で、このブックマークレットの用途に合いそうなサービスを知ってる方がいらっしゃったら教えて下さいっ！

では～。

マイリストコメントページから公開マイリスト一覧ページへジャンプするブックマークレット

KAY — Wed, 16 Dec 2009 10:49:59 +0000

はい、ニコニコブックマークレット第3弾。

↓をブックマーク！
マイリストコメント→公開マイリスト

いつの間にか動画を開かないと公開マイリスト一覧が見られなくなっていたので。
最近、この程度の簡単なやつならちょくちょく作っていきたいなーとか思ってるんですが、あんまりネタも無いので、もしこういうのが欲しいってのがありましたら、ブログのコメントかTwitterでリプライ下さい。
実際に作るかどうかは判りませんが。
外部jsを読み込んでやらないと動作しないようなめんどくさいのはパス。

ニコニコミュニティ動画から元動画へジャンプするブックマークレット

KAY — Tue, 01 Dec 2009 08:00:22 +0000

またブックマークレット作ってみた。

↓をブックマーク！
ニコニコミュ動画から元動画へジャンプ

記事のタイトルだけで全容を説明してしまっているので書く事が無いです。
とりあえず、起動するとジャンプする前に確認ダイアログが出るので、動画IDだけ確認したい場合にも使えます。

なんか以前にそういったニーズをTwitterのTLで見掛けた気がしたので作ってみました。

ニコニコ動画で現在視聴している動画のサムネイルを表示するブックマークレット

KAY — Mon, 26 Oct 2009 04:20:29 +0000

昨日ふと思い付いてtwitterでも書いたんだけど、作ってみたので～。

↓をブックマーク！
ニコニコサムネイル確認

ニコニコ動画で、今現在視聴している動画のサムネイルが開きます。
ブラウザの設定によってはポップアップブロックとかが働くかも知れません。
サムネイル以外から動画にジャンプして、コメントで「ちょｗｗｗサムネｗｗｗｗｗｗ」とか書かれていたり「サムネ一本釣り」とかのタグが付いてて意味が判らんかった時とかに便利。

はてブ関連機能の追加

KAY — Sun, 28 Jun 2009 06:58:27 +0000

各記事にはてなブックマークのボタンを設置し、被ブクマ数が出るようにしてみました。
被ブクマ数は、なんかOperaだと画像が出てこない場合が……。widthとheightを指定していないのが原因だとは思うんだけど、これ無理だよねー。横幅は取得する画像によって変わるので。
まあ、間にスクリプトをかませばどうにかなりそうだけど……。
そーゆーのはまた今度。

固定幅でセンタリングされた要素の横にタブ風メニューをくっ付けるCSS

KAY — Thu, 22 Jan 2009 15:38:24 +0000

個人的にはリキッドデザインの方が好きなんですけどね。

ウィンドウをリサイズした時、ウィンドウではなく固定幅でセンタリングされたコンテンツに追随するようにメニューだのバナーだのをくっ付ける方法をば。

とりあえず以下の3点、

validなCSSである事
CSSハックを使わない
IE6にも対応させる

これを前提で。
↓サンプルソース

タブメニューサンプル

強調部分がポイント。応用利かせれば右側に引っ付ける事も出来ますね。IE6を無視すればもうちょい簡単に出来ますが……。

タブメニューサンプル

WordPressアップデートしました。

KAY — Sun, 26 Oct 2008 13:50:38 +0000

WordPress2.6.3日本語版にアップデートしてみました。
何か不具合があれば教えていただけるとありがたいです。

今のところ、管理画面のjavascript周りで文字化けが……。＾＾；

object要素による代替インラインフレームにjavascriptでアクセスしてみる

KAY — Fri, 27 Oct 2006 19:46:08 +0000

各ブラウザで、documentオブジェクトへは、以下のような感じでアクセスできる。

※インラインフレームを「name=”child” id=”iframe_object”」で定義したとする。

■Opera9.02
document.getElementById(“iframe_object”).documentでアクセス可能。

■Firefox2.0
child.documentでアクセス可能。

■IE6
document.getElementById(“iframe_object”).document、child.documentのどちらでもアクセス可能。（===の比較で同定出来る）

ここで問題になるのがOperaの場合。IE、Firefoxはchildがグローバル（インラインフレームのwindowオブジェクト）という事になりますが、じゃあOperaの時のグローバルはどこよ？　という話で。

実はOperaでも、iframe要素によるインラインフレームの場合だと、要素のname属性で指定した名前で親のスクリプトからインラインフレームのwindowオブジェクトへアクセス可能なんですね。
しかも、object要素の場合でも親の方のwindowオブジェクトのメンバでちゃんと名前空間が確保されてる。
「window.(name属性で指定した値)」を参照するとundefindではなくnullを返します。
これはなんなんですかねー。あえてこういう仕様にしてるとも取れるなあ……。

まあ実際、object要素でHTML文書を指定した場合はあくまで文書を埋め込むんであって、ウィンドウを埋め込むわけじゃないですからねえ……。
とはいえ、親のスクリプトから見た時にフレーム内のグローバルが行方不明になるというのもどーかと……。

でまあ、苦肉の策で、インラインフレーム側のスクリプトにこんな感じの記述を入れておく事で親のスクリプトからインラインフレームのグローバルへアクセスする事は出来ます。

parent[window.name] = window;

実際は、場合や環境によってインラインフレーム側のスクリプトが先に読み込まれるかも知れないので、各フレーム間でもうちょい厳密な同期処理を入れといた方がいいのかも知れない。（いらないのかも知れない）
事実、簡単なテストをしたところ、Operaの場合は親のスクリプトが先に実行され、Firefoxの場合は子のスクリプトが先に実行されるという現象を確認しました。これが上記の記述に影響するかどうかは未検証ですが。（そんくらい検証しとけよという話も）

んでまあ、最終的に何が言いたいかというと、もっとスマートに子フレームのグローバルにアクセスできる方法があれば誰か教えて下さい。orz

IEでウィンドウをフラットにする

KAY — Tue, 15 Aug 2006 20:34:15 +0000

winIEのhtml要素は、デフォルトでボーダーを持っています。
なので、

html {border:0;}

などとしてやると、閲覧領域の凹みが無くなり、フラットな表示になります。

……とここまでならなんて事の無い小技ですが、javascriptでイベントを扱ったりすると、これが思わぬ動作に繋がる事があります。
というのも、IEではdocument.documentElement.clientWidth(clientHeight)は内容領域（CSSのwidth、height）の値を返しますが、event.clientX(clientY)はボーダーまでを含めた座標を返します。ぶっちゃけ、html要素に何も指定しない場合だと2pxほどずれます。
clientWidthをoffsetWidthとかに変えても無駄です。スクロールバーは幅に含まれますが、相変わらずボーダーは含まれません。
しかもIEは、標準準拠モードと互換モードでdocumentElement周りの挙動が変わるらしく、加えて他のブラウザへの対応も考えると、もう何がなんだかわかりません。誰か助けて下さい。（←エントリの趣旨が変わってきている）

javascriptの俺様用メモ

KAY — Fri, 02 Jun 2006 17:58:18 +0000

IEで

obj.style.backgroundColor = “transparent”;

が効かね。

obj.style.backgroundColor = “”;

だと透明色になるみたい。

pukiwikiのスパム対策

KAY — Fri, 05 May 2006 09:39:35 +0000

最近OekakiBBS Wikiの方でスパム投稿がひどくて困ってたんですが、このほどスパム対策を施してみました。
なんか、マルチバイト文字を含まない投稿を弾くというのが結構効くらしい、という事で、trackerプラグインを改造して実装してみる事に。
trackerプラグインから投稿があった時に、以下の処理を実行します。

    //KAY追加部分
    $flag = true;
    $str_tmp = $post["_name"] . $post["name"] . $post["url"] . $post["body"];
    $n = strlen($str_tmp);
    for($i = 0; $i < $n; $i++) {
        if(ord(substr($str_tmp, $i, 1)) >= 0x80) {
            $flag = false;
            break;
        }
    }
    if($flag) {
        return array(
            'msg'=>'cannot write',
            'body'=>'error.'
        );
    }
    //KAY追加部分ここまで

$postというのはPOSTで渡ってきたデータらしいです。やり方としては、これで合ってるんだろうか。
ちょい様子見～。

テンプレートクラス

KAY — Sun, 30 Apr 2006 08:06:39 +0000

簡素なPHPのテンプレートクラス。置換、ループ、ifが使えます。

class template {
    var $pieces;               //テンプレート。ファイル名か、あるいは文字列そのものを配列で格納する。
    var $dir;                  //テンプレートが置かれているディレクトリ
    var $assigns;              //置換文字列バッファ
    var $if;                   //ifバッファ
    var $loops;                //ループバッファ
    var $loop;                 //カレントのループ
    var $exit = true;          //flushした時点でスクリプトを終了させるかどうか。
    var $ret_str = false;      //flushした時に出力を行わず、文字列を返す場合はtrue

    //コンストラクタ
    function template($list, $dir = "./") {
        $this->pieces = $list;
        $this->dir = $dir;
        $this->assigns = array();
        $this->if = array();
        $this->loops = array();
    }

    //改行コードを統一
    function CR($str) {
        $str = str_replace("\\r\\n", "\\n", $str);
        $str = str_replace("\\r", "\\n", $str);
        return $str;
    }

    //ループの定義
    function set_loop($loop) {
        $this->loop = $loop;
        $this->loops[$loop] = array();
    }

    //割り当て
    function assign($name, $value) {
        $this->loops[$this->loop][$name][] = $value;
    }

    //出力
    function flush() {
        $html = "";

        //ファイルの読み込み
        foreach($this->pieces as $val) {
            $file = $this->dir . ((substr($this->dir, -1) == "/")? "": "/") . $val;
            if(file_exists($file)) {
                $html .= file_get_contents($file);
            } else {
                $html .= $val;
            }
        }
        $html = $this->CR($html);

        //if処理
        preg_match_all("/%if:(.+?)%/", $html, $match);
        foreach($match[1] as $val) {
            $html = preg_replace("/\\s*%if:" . $val . "%(.*?)\\s*%endif:" . $val . "%/s", (isset($this->if[$val]) && $this->if[$val])? "$1": "", $html);
        }

        //ループ処理
        foreach($this->loops as $key => $val) {
            preg_match("/\\s*%loop:" . $key . "%(.*?)\\s*%next:" . $key . "%/s", $html, $matches);

            $names = array_keys($val);
            $values = array_values($val);
            array_walk($names, create_function('&$names', '$names = "%" . $names . "%";'));

            $inner = "";
            $n = count(isset($values[0])? $values[0]: array());
            while($n--) {
                foreach($values as $key2 => $val2) {
                    $replace[$key2] = array_shift($values[$key2]);
                }
                $inner .= str_replace($names, $replace, $matches[1]);
            }

            $html = preg_replace("/\\s*%loop:" . $key . "%.*?\\s*%next:" . $key . "%/s", $inner, $html);
        }

        //置換処理
        foreach($this->assigns as $key => $val) {
            $html = str_replace("%" . $key . "%", $val, $html);
        }

        if($this->ret_str) { return $html; } else { echo $html; }
        if($this->exit) { exit(); }
    }
}

●使い方

$tmpl = new template(array("header.html", "hoge.html"), "template");

でインスタンスを作成します。第一引数は配列なので、複数のファイル名を指定できます。
最終的には配列の順番で各ファイルは結合されて出力されます。

$tmpl->flush();

でテンプレートを出力します。

$tmpl->pieces[1] = "foo.html";

のようにして後からテンプレートファイルを差し替える事も可能。
第二引数はテンプレートファイルが置かれたディレクトリを指定します。最後の「/」はあっても無くても構いません。
絶対指定でもカレントからの相対指定でも可。省略した場合はカレントのディレクトリからファイルを探します。

○置換

※テンプレート側の記述


※スクリプト側の記述
$tmpl->assigns["val"] = "hogehoge";

●結果

○ループ

※テンプレート側の記述

%loop:list%
    %name%
%next:list%


※スクリプト側の記述
$arr = array("hoge", "foo", "bar");
$tmpl->set_loop("list");
foreach($arr as $val) {
    $tmpl->assign("name", $val);
}

●結果

    hoge
    foo
    bar

○if

※テンプレート側の記述
見えるかな？
%if:message%見えてますね？%endif:message%
どうでしょう。

※スクリプト側の記述
$tmpl->if["message"] = true;

●結果
見えるかな？
見えてますね？
どうでしょう。

※スクリプト側の記述
$tmpl->if["message"] = false;

●結果
見えるかな？
どうでしょう。

ifはtrue以外は常に非表示となるので、表示させる時だけtrueを指定する、という感じでいいと思います。

デフォルトではflush()を実行した時点でスクリプトが終了してしまいます。

$tmpl->exit = false;

とするとflush()後もスクリプトは続行します。
また、

$tmpl->ret_str = true;

とすると出力を行わず、結果を文字列として返します。

$tmpl->ret_str = true;
$html = $tmpl->flush();

でflush()の結果が$htmlに代入されます。ちなみに、ret_strがtrueの場合、exitがtrue（デフォルト）でもスクリプトは終了しません。

あと、CR()は改行を「\n」に置換します。便利なので何かっつーと

$str = template::CR($str);

みたいな感じで使ってます。

う～ん、説明すべき部分はこんなもんかなあ。なんか、ループを入れ子に出来るようにしようと思ったんだけど、脳が沸騰しそうになったのでやめた。
あーループといえば、ほんとはこれもメソッドじゃなくて配列だけでプロパティとして扱いたかったんだよなあ……。いや、現時点の仕様でもそういう風に扱えるんだけど。
あまりに多次元すぎて逆に判りにくいかなと。で、配列を意識しなくて済むようにメソッドを実装しました……。