Hatena::Groupptech

ぷちてく RSSフィード

Archive
 
ProfileProfile

2012-12-07

『「今どんな気持ち?」をアレする user script』 forkしてUserScript書いた

10:44

どーもこんちわ。id:udzura(@) さんの元コード結構レガシー感あったからforkして書き換えた

https://twitter.com/udzura/status/276972563756904449

べんりスクリプト たのしい id:udzura++!

MIT→WTFPLに昇格

反応してもらえてWTFPLになったので最下部に追記しておいたー

while(1) { id:udzura++; }


変更点

要点いうと

FacebookDOMNodeInsertedが頻繁に起こるようなときは軽いと思う。体感できるかはスペックによる

Gitでコミットメッセージ付けてるから、好きモノなひとにはいいとおもう

インストール

以下からどーぞ

Facebook使いじゃないひとは、一番下にデバッグ用の説明とかメソッドあるからそれで

元コード

現状こんなかんじ。古いIE系のGMとかにはいいかもしれない

// ==UserScript==
// @name ねえねえ今どんな気持ち?
// @namespace http://udzura.jp/kokubun
// @description 国分太一fier
// @include https://www.facebook.com/*
// @version 0.0.1.20121205
// ==/UserScript==

(function () {
  function pingTaichi () {
    var elms = document.getElementsByTagName('textarea');
    if(elms.length != 0) {
      for(i = 0; i < elms.length; i++ ) {
        var elm = elms[i];
        if(elm.getAttribute('placeholder') === '今どんな気持ち?') {
          elm.setAttribute('placeholder', 'ねえねえ今どんな気持ち?');
          elm.value = 'ねえねえ今どんな気持ち?';
        }
      }
    }
  }
  setInterval(pingTaichi, 300);
})();
http://qiita.com/items/cb27abcfc28581de1976

タイマーが無限にまわる

参考

「ねえねえ今どんな気持ち?」 ⇒ NDK

知らない人はどうぞ

forkしたやつ

ネタ文言以外ほぼフルスクラッチしたから、最初 MIT で BYしたけど、どの範囲から派生物とみなされるかわからない

とか、元ライセンスないと困る。後付けで継承性あるライセンスきた、とかだと問題出る場合あるんで、ノーライセンスもの敬遠ぎみになっちゃう

ユーザが困ることになるから、書いたやつはもらさず付けるようにしてるつもりだけど、欠けあったら教えてね

forkしたコード

変更こんな感じ

  • DOMNodeInserted with debouncing function calls にした
    • MutationObserversAPI、まだ少し早いかなと思ってやめた
    • debounce / throttle そのうちエントリにする
  • たぶんクロスブラウザ
    • スマホ系でも同じUIなら動くかも。IEコンポ系は知らない
  • クエリの時点で引いてくるノード絞るようにした
    • SelectorsAPIべんり

中身は現状こう

// ==UserScript==
// @name        kokubunizer
// @namespace   https://flavors.me/noromanba
// @description kokubunize aka NDKify for UserScript
// @include     https://www.facebook.com/*
// @downloadURL https://raw.github.com/gist/4236851/kokubunizer.user.js
// @installURL  https://raw.github.com/gist/4236851/kokubunizer.user.js
// @version     2012.12.8.3
// @license     WTFPL http://sam.zoy.org/wtfpl/ (Do What The Fuck You Want To Public License)
// @contributor udzura  https://gist.github.com/4212643
// @author      noromanba (http://flavors.me/noromanba)
// @homepage    https://gist.github.com/4236851
// @icon        https://upload.wikimedia.org/wikipedia/commons/thumb/b/ba/New_Bearnstar.png/32px-New_Bearnstar.png
// @icon64      https://upload.wikimedia.org/wikipedia/commons/thumb/b/ba/New_Bearnstar.png/64px-New_Bearnstar.png
// ==/UserScript==

// Warranty clause http://sam.zoy.org/wtfpl/
/* This program is free software. It comes without any warranty, to
 * the extent permitted by applicable law. You can redistribute it
 * and/or modify it under the terms of the Do What The Fuck You Want
 * To Public License, Version 2, as published by Sam Hocevar. See
 * http://sam.zoy.org/wtfpl/COPYING for more details. */

// Icon (Public Domain by Lawinc82)
// https://commons.wikimedia.org/wiki/File:New_Bearnstar.png

// Devel
// https://gist.github.com/4236851

// c.f. http://ptech.g.hatena.ne.jp/noromanba/20121207/1354931086
(function () {
    var slice = Array.prototype.slice;

    var debounce = function (func, threshould) {
        var timer;
        return function () {
            var context = this, args = slice.call(arguments);
            clearTimeout(timer);
            timer = setTimeout(function () {
                func.apply(context, args);
            }, threshould || 10);
        };
    };

    var kokubunize = debounce(function () {
        var hdif = '今どんな気持ち?',
            ndk = 'ねえねえ' + hdif;
        // c.f. http://ptech.g.hatena.ne.jp/noromanba/20120521/1337639496
        slice.call(document.querySelectorAll('textarea[placeholder="' + hdif +'"]')).forEach(function (area) {
                // some browser support c.f. http://help.dottoro.com/ljgugboo.php
                if (area.placeholder) {
                    area.placeholder = ndk;
                } else { // XXX redundant, if this block for polyfill, no needed to set @placeholder ...why?
                    area.setAttribute('placeholder', ndk);

                    if (area.value === hdif) {
                        area.value = ndk;
                    }
                }
        });
    }, 100);

    // TBD replace to MutationObserver
    document.addEventListener('DOMNodeInserted', function (evt) {
        kokubunize();
    }, false);
})();

// DBG with <at>include http://*
// c.f. http://www.ne.jp/asahi/nanto/moon/2010/12/28/placeholder.html
//      http://webdesignerwall.com/demo/html5-placeholder-text/
/*
        slice.call(document.querySelectorAll('input[placeholder]')).forEach(function (area) {
*/
/*/
var rapidfire = function () {
    Array.apply(null, Array(100)).forEach(function (_, idx) {
        console.info('*', _, idx);
        var input = document.createElement('input');
        input.name = idx;
        input.placeholder = idx;
        input.value = !!(idx % 2) ? idx : '';
        document.body.appendChild(input);
    });
};
//*/
https://gist.github.com/4236851

データ量的な効率は多分よくなってるけど、抽象化も進んでるから大して変わんない気もする

debounce、外部関数に引き出すの初めてだったからノーカンペで書いてみた、たのしかった

ただ、3~4箇所割と有名なとこあるから、結構そのどれかに似てるか全部に似てるとおもう

setAttributeいるのかな

多少違う形にしたけど意図分からないところがあって、area.setAttribute('placeholder', ndk); これ

HTML5placeholder、まだW3Cドラフトにいて実装ブラウザ少ない

クロスブラウザ調査、載ってるところいいの無かった

たぶん代替実装(polyfill)のためにarea.valueつかってるのだけど、

  • Textrea.placeholder使えるブラウザならarea.valueいらないはず
    • 邪魔感を楽しむなら必要
  • placeholder無いブラウザsetAttribute('placeholder', ndk)の意味無い気がする
    • 規定値入ってて意味ないきがした

まとめ

「ネタスクリプトになにマジになってんの?クスクス」みたいに言われそうだけど、結構べんきょうになってよかった

ので、クスクス楽しんでいてください あ そのままで そのままで

  • for文いつ使ったか忘れてるくらいだいぶ使ってないなーと思った
  • debounce まぁ大丈夫なんじゃないのか
  • そろそろMutationObserver使おうかなーと思った

デバックコード面白書きしたからもうちょっと汎化してもいいかなとおもう

var rapidfire = function () {
    Array.apply(null, Array(100)).forEach(function (_, idx) {
        console.info('*', _, idx);
        var input = document.createElement('input');
        input.name = idx;
        input.placeholder = idx;
        input.value = !!(idx % 2) ? idx : '';
        document.body.appendChild(input);
    });
};
https://gist.github.com/4236851

実は本命こいつでした説 :-b


Replied

udzuraさんからお手紙ついたー

ライセンシーがライセンサーにライセンス ボイスしてもらったのでMITから変えた、みたいなかんじ

なんのこっちゃ

WTFPLに昇進

ゆるい方向にいったからよかったー id:udzuraさん ありがとうございますー

udzura

comment.user.url_name

あ、そうだライセンス忘れてました……

ライセンスこれで

http://sam.zoy.org/wtfpl/

http://qiita.com/items/cb27abcfc28581de1976#comment-c9a82993c3af53b61703
対応した

ステキ!

// @license     WTFPL http://sam.zoy.org/wtfpl/ (Do What The Fuck You Want To Public License)
https://gist.github.com/4236851/99ee81026fafcba3ee069c11b1034e5dcab25b84

公開してるのだと2個目

怖がらせちゃった///

アイコン、ガミラス星人だからこわかったですか?青い顔はだめですか?ごめんなさいごめんなさい

@

https://twitter.com/udzura/status/277239418094501888

怖いときはコツがあって、投稿全部英文にするといいですね!明らかに参照量減るのでオススメです!

ぼくはそうなってます><

WTFPL

あんまり使ったことある人いないとおもうので、少し載せておく

ニュアンス訳だと「どうにでもしやがれこのクソッタレ一般公衆利用許諾書」というたいへん気品あふれるなまえ

COPYING

「だいたいGPL互換と FSFからお墨付きが付いてて、Public Domain が出来ない国で同相当のことを実現する」

という割と実用的なライセンス

            DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE
                    Version 2, December 2004

 Copyright (C) 2004 Sam Hocevar <sam@hocevar.net>

 Everyone is permitted to copy and distribute verbatim or modified
 copies of this license document, and changing it is allowed as long
 as the name is changed.

            DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE
   TERMS AND CONDITIONS FOR COPYING, DISTRIBUTION AND MODIFICATION

  0. You just DO WHAT THE FUCK YOU WANT TO.
http://sam.zoy.org/wtfpl/COPYING

な癖に、名前がオチャメでお気に入り。GPL全部これに変えればおもしろいのに

トラックバック - http://ptech.g.hatena.ne.jp/noromanba/20121207