honjarake blog

自分用にテキトーにまとめる

JavaScript ループの次へ ループを抜ける

以降の処理を飛ばして次へ(ループは抜けない)

while(条件式){
  実行される文;
  実行される文;

  continue;

  実行される文;   // continueが実行されると、この文は実行されない
  実行される文;   // continueが実行されると、この文は実行されない

  // continueが実行されるとここへ処理が移る
}
for (var i = 0; i < 10; i++){
  if (i % 2 == 1){
    continue;
  }

  alert(i);
}
}
continue文 - 繰り返し処理 - JavaScript入門

ループ処理を抜ける(終了する)場合は、case文でもやった

break;

Stylish 他

FirefoxChromeのアドオンStylishを使う
デザインの変更について、CSSの変更だけでカバーできれば、それにこしたことはない
それ以外で対応できない部分を他のアドオンなり、スクリプトで対応する感じ

グリモンはuserscript.orgが動いてないけど
Stylishはアドオンから、現在見ているWEBサイトのスタイルを探せるから便利だ
自分の作ったスタイルも、userstyles.orgに保存しておける

Stylishで色々なサイトのスタイルをいじりながら
CSSもhtmlも徐々に変化しているけど)勉強不足だなと思った
CSS3・html5


特にhtml5については知識がないが、Silverlightを思い出す機能がいくつかあった。
Silverlightってサポート終了になったんだっけ?大成しなかったなあ…

javascript backgroundImage

例によって、グリモンのスクリプト作成中
imgタグの背景画像に読込中の画像を設定してみた

// LOADING_GIFには、画像データののURI
img.style.backgroundImage = 'url(\'' + LOADING_GIF + '\')';

あとは

.style.backgroundSize="60px 120px"; //サイズ
.style.backgroundRepeat = 'no-repeat'; //リピート
.style.backgroundPosition = 'right bottom'; //位置

こんな感じで変更する模様

今回は、下記のサイトで画像データをのdataスキームURI生成(画像データのBase64変換)して使ってみた
[JavaScript] dataスキームURI生成(画像データのBase64変換)

greasemonkey データの保存

最近作っているスクリプトにNG機能を持たせようと思っており
NGワードを保存する処理を考え中
やはり、グリモンが用意したものを使ったほうがいいのかなあ…

そこで、GM_setValueについて調べる

自分の過去記事のスクリプトでは、JSONでlocalstrageへのデータ保存を使っていた

    //======================================================
    //set
    //------------------------------------------------------
    function setData(key, data) {
        if (window.JSON == false) {
            alert('Your Web Browser is not supported JSON.');
            return ;
        }
        if (key != null && data != null) localStorage.setItem(key, data);
    }
    //======================================================
    //get
    //------------------------------------------------------
    function getData(key, defValue) {
        var data = '';
        if (window.JSON == false) {
            alert('Your Web Browser is not supported JSON.');
            return data;
        }
        data = localStorage.getItem(key);
        if (data == null) (typeof defValue == 'defined') ? data = '' : data = defValue;
        //alert(data);
        return data;
    }

GM関数を使うのに、@grant指定しないといけないことと、@grant指定をすると
jQueryの処理を入れるときにjQueryのjsファイルを@requireしないといけない
参照先はgoogleの提供するライブラリがあるとはいえ、どう影響するのかわからなかったから

今までは数値とフラグにしか使用しなかった(数値以外は保存しない処理で弾いていた)が
NG文字列となると、問題のおきそうな文字をエスケープさせないとまずい気がする
この辺りの知識が乏しいので、xss関連の記事を参考に調べ中

greasemonkey 「@include * 」のときのbodyへのタグ追加

iframe中のbodyにも適応されちゃうんだな
というか、iframe中のbodyでも同じ処理が走ってるわけだ
iframeの方だけ実行したくない

思いついた解決方法は

  1. @include、@excludeを指定する
  2. iframe判断してタグ追加を中止、または、追加された後iframe内だけ消す

1.が処理的には簡単だけど、融通が聞かない、どのサイトに限定するか決めるのは面倒

2.iframe判断はまだ調べていない
 iframeの中のタグを後から消すのはDOMの仕様上ややこしそうだ
 jqueryに方法があるようだけど、jqueryの知識が把握できるようになるまで保留

この問題はタグを追加する以外でも起きるけど
そっちも保留だ

追記

これならできそうだ!
Javascriptでiframeとして表示されているか否かを判断する | t87r

if(window!=parent){
    //iframeで埋めこまれた場合の処理
}
else if (window==parent){
    //通常表示された場合の処理
}

javascript 条件分岐(switch~case文)

プログラミング言語によって微妙に違うif~else以外の条件分岐文
selectだったり、switchだったり、breakしないと次の判定を行ったり、breakしなくても一回の判定で処理を抜けたり…etc

javascriptでは、switch~case文らしいのでメモしとく

switch (式){
  case 値1:
    実行する文;
    break;
  case 値2:
    実行する文;
    break;
  case 値3:
    実行する文;
    break;
}

やりたいのは正規表現の一致チェックだったので色々探してみた

testメソッドは使ったことないのでついでに補足

    switch( true ){
    case /abcd/.test( s ) :
        break;
    case /defg/.test( s ) :
        break;
    }
http://d.hatena.ne.jp/hasegawayosuke/20091002/p2

result = regex .test( checkstring )

result 正規表現チェックを行った結果
true … マッチした
false … マッチしなかった
regex 正規表現文字列(RegExp
checkstring 正規表現チェックを行う文字列
http://www.24w.jp/study_contents.php?bid=javascript&iid=javascript&sid=string&cid=006

関係ないけどはてな記法の表使いづらいなあ