dara-j

sudo.cmd / su.cmd

Sun, 18 Oct 2015 21:57:13 +0900

コマンドラインから管理者に昇格したい

たとえば、mklinkでシンボリックリンクを作りたい場合、いちいちcmd.exeを右クリックから「管理者として実行」するのは非常に面倒くさく、いま開いてるプロンプトから権限昇格できると便利だよね、と思って調べると、まぁいろいろな方々がすでにやってたりするわけです。

要は、WSHでShell.Application（エクスプローラを外部から操作するためのActiveXインターフェイス）で実行ファイルに対して「管理者として実行」で起動させる、という仕組みを使う、と。

んで、久々になんちゃってコマンド

んで、まぁ、suとかsudoとかを作ってみようかと。いや、先ほどのGoogle検索の結果に出てくるあちこちの記事でもすでに実現されてるんだけど、なんとなく自分でもやってみるか、という程度で。

suとsudoを別々に実装してもいいんだけど、cmd.exeを「管理者として実行」できればsu、任意のコマンドならsudoになるので、同じスクリプトを別のバッチファイルから呼び出す方式で実装することに。

ダウンロード

こちらからダウンロードをどうぞ。

sudo / suコマンド一式

zipには

scripts/sudo.js
su.cmd
sudo.cmd

の3つのファイルが格納されてるので、この構造を維持したままパスが通ったところに設置するとコマンドラインからいつでも使えるようになります。

ソース - scripts/sudo.js

スクリプトのソースはこんな感じ。

キモは最後のほうにある「new ActiveXObject("Shell.Application").ShellExecute()」のところで、ここで第4引数に"runas"を与えると、エクスプローラのコンテキストメニューから「管理者として実行」を行ったことになる、という感じです。詳しくは以下のリンク先を参照。

Shell.ShellExecute method (Windows)

ソース - sudo.cmd

sudoのバッチはこんな内容です。

@echo off cscript //nologo "%~dP0\scripts\sudo.js" %*

バッチに渡された引数をそのままsudo.jsに丸投げしてるだけの簡単なつくりです。

ソース - su.cmd

suのバッチはこんな感じ。

@echo off cscript //nologo "%~dP0\scripts\sudo.js" cmd /k exit

sudo.cmdでは引数をそのまま丸投げしてたところを、明示的に「cmd.exe /k」しています。

あと、スクリプトを実行すると新しいプロンプトが開くので、なにも考えずに使ってるとコマンドプロンプトのウィンドウだらけになってウザいので最後にexitしてますが、これはお好みで削除してもよいでしょう。

あ、それからsudo.js側で小技を入れているので、suした場合は元のディレクトリを引き継ぎます。

使い道とか

suしてmklinkしてシンボリックリンクをバンバン作成するとか、hostsいじるのにsudo notepadするとか、まぁそんな感じでしょうか。

即吊ブックマークレット改善版

Tue, 26 May 2015 20:48:50 +0900

iOSでうまくいかなかったので…

前のエントリに載せたブックマークレットはソースが長すぎてiCloudで同期できなくてiOSでの動作確認もままならなかったので、意地になって改善しました。なんとか使い物になるかなぁ、と。

改善版ブックマークレット

即吊ダイアログ[改]

デスクトップブラウザなら↑のリンクをブックマークツールバーにドラッグドロップしてください。リンクをクリックするとpromptでjavascript:なURLを表示するので、スマートフォンやらタブレットの場合はこれをコピーした上で適当なページをブックマーク、編集で貼り付けてください。

ソース

こんな感じです。ブックマークレットにするにあたってはこのソースをpackerで圧縮して<をエスケープしています。

即吊ブックマークレット

Thu, 21 May 2015 01:35:49 +0900

またの名を「ソク吊嵐」

即吊☆キャプチャー|WEBキャプチャーをTwitterに投稿しちゃうアプリケーションってなサイトがあってですな。サイトの画面をキャプチャしてさくっとTwitterに投げ込むわけですよ。いたく便利で。

投稿するキャプチャー画像にコメント、ハッシュタグを入れる。特定のツイートにリプライするなど出来ます。
即吊☆キャプチャー

勢いです。勢い。

オプションもいろいろあって、ブックマークレットも用意されてるんだけども、prompt()連発のウィザード形式で、少々戸惑っちゃうんですわ。すぐに慣れるんだけども。

そこでなんとなく勢いでダイアログベースのブックマークレットを作ってみたわけなんですわ。ええ。

即吊ダイアログ

※：2015.5.25 ダイアログにスタイル適用したり、実験中パラメータ「callback」に対応したりで更新しました。

※：2015.5.26 ブックマークレットのURIが長すぎるせいか、iCloudでの同期がうまくいきません＆iOSだとうまく動かないかも。

→ iCloudで同期できるサイズまで小さくしてiOS 8で動作するバージョンを作成しました。

吊りたいページでブックマークレットを起動するとこんなダイアログが出ます。

Firefox 38とChrome 42（どちらもWindows）でしか試してないし、オプションも追加コメントとお仕事場モードくらいしか試してないんだけども、まぁ一応使えるのではないかと。サイトによってはレイアウト崩れたりいろいろ問題ありそうだけども。

中身はこんな感じ（雑です）。


(function(act){
  var w=window,
    d=w.document,
    u=w.location.href,
    ex=function(){
      var args=Array.prototype.slice.call(arguments),ds=(args.shift()||{}),sr=(args.shift()||{});
      for(var p in sr){
        ds[p]=sr[p]
      }
      return args.length?ex.apply(null,[ds].concat(args)):ds;
    },
    dc=function(n){
      return d.createElement(n);
    },
    esc=function(s) {
      return s
        .replace(/&/g,'&amp;')
        .replace(/</g,'&lt;')
        .replace(/>/g,'&gt;')
        .replace(/'/g,'&apos;')
        .replace(/"/g,'&quot;');
    },
    term=function(e){
      setTimeout(function(){
        e.parentNode.removeChild(e);
      },100)
    },
    st={
      d:{
        fontSize:'14px',
        lineHeight:1.4
      },
      fm:{
        textAlign:'left',
        backgroundColor:'#fff',
        color:'#000',
        position:'absolute',
        width:'600px',
        padding:'10px',
        top:0,
        right:0,
        zIndex:9999,
        border:'solid 1px #999'
      },
      ttl:{
        textAlign:'center',
        fontWeight:'bold',
        fontSize:'20px',
        margin:'-5px -5px 5px -5px',
        backgroundColor:'#f9c',
        color:'#c71585'
      },
      txt:{
        width:'360px',
        border:'solid 1px #999'
      },
      lbl:{
        width:'195px',
        marginRight:'5px',
        display:'inline-block',
        textAlign:'right'
      },
      btn:{
        width:'150px',
        margin:'5px 5px 0 5px',
        padding:'4px 10px',
        border:'solid 1px #666',
        backgroundColor:'#eee'
      }
    },
    trimFields=function(fm){
      for(var ls=fm.getElementsByTagName('input'),i=0,l=ls.length;i<l;i++){
        if((ls[i].type=='text'&&!ls[i].value.length)||(ls[i].type=='checkbox'&&!ls[i].checked)){
          ls[i].disabled=true;
        }
      }
      setTimeout(function(){fm.submit();term(fm)},0)
    };
  d.body.appendChild((function(){
    var fm=ex(dc('form'), {
        method:'get',
        action:act,
        target:'_blank',
        onsubmit:function(){trimFields(fm)}
      }),
      title=ex(dc('div'),{innerHTML:esc('ソク吊嵐ダイアログ')}),
      btn=null;
    ex(fm.style,st.d,st.fm);
      ex(title.style,st.d,st.ttl);
    fm.appendChild(title);
    var items=[
      {lbl:'吊るURL',ttl:'即吊したいURLを入れてください（必須です。）',ele:ex(dc('input'),{type:'text',name:'url',value:u,readonly:'readonly'})},
      {lbl:'ハッシュタグ',ttl:'ハッシュタグを付けます。全角半角空白、カンマで多重に付けることができます。',ele:ex(dc('input'),{type:'text',name:'hashtag'})},
      {lbl:'サイト全体キャプチャを試行',ttl:'allとリクエストすると出来る限りWEBサイト全体をキャプチャーしようと頑張ります。',ele:ex(dc('input'),{type:'checkbox',name:'images',value:'all'})},
      {lbl:'追加コメント',ttl:'コメントを付けることが出来ます。',ele:ex(dc('input'),{type:'text',name:'text'})},
      (function(){
        if(!/^https:\/\/twitter\.com/.test(u))return {};
        return {lbl:'このツイートにリプライ',ttl:'1とリクエストすると吊るサイトがツイートならば、そのツイートに.@でリプライを付けて投稿します。',ele:ex(dc('input'),{type:'checkbox',name:'reply',value:'1'})};
      })(),
      {lbl:'返信元ツイートURL',ttl:'吊るサイトを狙ったツイートに.@でリプライを付けて投稿します。（ツイートのURL入れてね。）',ele:ex(dc('input'),{type:'text',name:'status'})},
      {lbl:'職場モード',ttl:'1とリクエストするとターミナル風CSSモードで投稿します。お仕事場でも恥ずかしくありません。かも',ele:ex(dc('input'),{type:'checkbox',name:'terminal',value:'1'})},
      {lbl:'自分にナルト',ttl:'1とリクエストするとピリオド無しの@でこっそり魚拓したのを自分に向けてメンションします。',ele:ex(dc('input'),{type:'checkbox',name:'mention',value:'1'})},
      {lbl:'戻り先',ttl:'吊り終わったら飛びたいURIにを入れてください。ページ出力前にページ遷移しちゃうのでちょっと動作が早いですが＞＜',ele:ex(dc('input'),{type:'text',name:'callback'})}
    ];
    for(var i=0,l=items.length,item=items[i],lbl;i<l;i++,item=items[i]){
      var ln=dc('div');ex(ln.style,{margin:'3px 0'});
      if('lbl' in item){
        lbl=ex(dc('span'),{innerHTML:esc(item.lbl)});
        ex(lbl.style,st.d,st.lbl);
        ln.appendChild(lbl);
      }
      if(('ttl' in item)&&lbl){
        ex(lbl,{'title':item.ttl});
      }
      if('ele' in item){
        if(item.ele.type=='text'){
          ex(item.ele.style,st.d,st.txt);
        }
        ln.appendChild(item.ele);
      }
      fm.appendChild(ln);
    }
    ln=dc('div');ex(ln.style,{marginTop:'10px',borderTop:'solid 1px #ccc'});
    ex(ln.style,{marginTop:'10px',textAlign:'center'});
    fm.appendChild(ln);
    btn=ex(dc('button'),{type:'submit',innerHTML:esc('吊る！')});ex(btn.style,st.d,st.btn);
    ln.appendChild(btn);
    btn=ex(dc('button'),{type:'button',innerHTML:esc('やめる'),onclick:function(){term(fm)}});ex(btn.style,st.d,st.btn);
    ln.appendChild(btn);
    return fm;
  })())
})('http://drinker.slfeed.net/archive/')

tumblrのキーボードショートカットが便利になっとる。

Wed, 17 Oct 2012 21:41:27 +0900

すんごい久しぶりにtumblrのことなど

それ以前にブログ更新するのがすんごい久しぶり、ってのは置いておいて。

いまだにメインブラウザがFirefoxなもので、tumblrのダッシュボード向けに、執念深く古いグリモン＋Minibuffer＋LDRize＋Autopagerizeという環境で回しているんだけども、最近ふと気が付いたらダッシュボードでjした時に「カクッ」と動くようになってることに気付いた。

いつのまにか標準キーバインドが復活しとる

結構前からダッシュボードには、標準でキーバインドが組み込まれてて、使いづらいのでこれをキャンセルするグリモンスクリプトを組み込んでたんだけど、どうやらこれが効かなくなったらしい。

何日か前にこれに気付いて、なんとかキャンセルできるようにしたんだが、今日になったらまたコードが効かなくなってた。矢継ぎ早なアップデートみたい。

なんとか解除してみる

仕方ないのでまたJSのデバッグコンソールをごにょごにょいじって調べたところ、いつの間にやらキーバインドを処理するための Tumblr.KeyCommands なるオブジェクトが加わってて、これが suspended プロパティやら、suspend() メソッドなんかが実装されてることが分かったので、ためしにグリモンで


unsafeWindow.Tumblr.KeyCommands.suspend();

なんてやってみたら見事にキャンセルできた。

ところで、標準キーバインドってなにができるん？

KeyCommands 周りを調べてる過程で気づいたんだけど、「like」とか「reblog」、「notes」、「play」なんて興味深いメソッドが実装されてて興味が出たので、どんなキー操作ができるのかを調べてみた。tumblrのほうにエントリ挙げたけどあんまり見やすくないので、以下にもう一度まとめておく。

j（ジェイ）	次のpostへ移動
k（ケー）	前のpostへ移動
l（エル）	like / like解除
n（エヌ）	notesを開く / 閉じる
r（アール）	reblog（別ウィンドウが開く）
R（Shift＋アール）	即時reblog
E（Shift＋イー）	キュー（投稿予約）へreblog
スペース	動画再生？（未確認）
カーソルキー左	前のページへ
カーソルキー右	次のページへ

謎の処理もあるんだけども

この他に修飾キー（Windowsの場合はWindowsキー、Macの場合はoptionキーと思われる）を押しながら以下のkeyCodeでTumblr.blog_switcher()という処理を呼び出してるみたい。

Windows	9（Tab）、27（Esc）、192（？？？）
Mac	9、27、192、37（カーソル左）、39（カーソル右）

なんだけど、これが何をするのかよくわからんし、自分の環境ではなにも起きないのでとりあえず無視。

標準キーバインドのほうが便利くさいので方針転換

先のキーバインドの機能、大体はこれまでのグリモン環境でもできてたことなんだけども、即時reblogは自分の環境ではできなかったので非常に魅力的。

ということで、www.tumblr.com ではMinibufferもLDRizeも外すことにして、標準キーバインドを使うようにするよう方針転換。ついでといってはなんだが、標準同士の組み合わせのほうが安定してるのは目に見えてるのでAutopagerizeも外して、settings/dashboard で「Enable endless scrolling」を有効に。

標準のendless scrollingを有効にしたのでiPadで見る場合なんかはかえって便利になったりといううれしい誤算もあり、結構うれしかったり。

でもちょっと手を入れないと

ただ、標準機能のままだとpostの移動が「カクッ」となっててこれはちょっと気持ち悪いのでなんとかならんかと調べたところ、 Tumblr.KeyCommands が「animate_scroll」というプロパティを持っていた。さっそくこれをtrueに設定したら案の定スムーズスクロールするようになって快適。

また、animate_scroll = true の状態でも個人的にはちょっと速度が速いように感じられたので、一緒に見つけてた「scroll_speed」プロパティをデフォルトの100から150にしたら結構いい感じ。

これらの設定（どころか、キーバインドの有効/無効の切り替えすら）はtumblrの設定からいじれないので、ひとまず


unsafeWindow.Tumblr.KeyCommands.animate_scroll = true;
unsafeWindow.Tumblr.KeyCommands.scroll_speed = 150;

みたいなグリモンスクリプトを作って対応。

オマケ：ブックマークレットも作ってみたよ

いちいち起動しなきゃなんないのは面倒だけど、おんなじようなことを行うブックマークレットも作ってみた。

スムーズスクロールを有効に

中身はこんな感じも。


(function() {
    if(Tumblr && Tumblr.KeyCommands) {
        with(Tumblr.KeyCommands) {
            animate_scroll = true;
            scroll_speed = 150
        }
    }
})()

dataスキームの画像をブロックしてみる - Chrome編

Thu, 22 Mar 2012 03:52:25 +0900

前のエントリの続きで、今度はGoogle Chrome行ってみよう。といっても、それほど書くことあるわけじゃないので比較的アッサリ気味の内容で。

他にもいろいろあるんだけど、Firefoxでソースをざっくり眺めて馴染みがでたので、ターゲットはAdblock Plus。現在タイトルに「(Beta)」がついてる1.2版です。

こちらもFirefox版と同じく、単純に「data:image/*」みたいな登録をしてもフィルタリングされないので、またまたデバッグコードを仕掛けて調べてみることに。

extensionのインストールされたディレクトリをざっと眺めてみたらmanifest.jsonてのがあったのでそちらを見てみる。

manifest.jsonの内容から推測するに、メインで使用されるのはどうやら「contentScript2.js」らしいのでそちらを見てみたところ、beforeloadHandlerという関数からshouldBlock()にURLを渡して判断してるっぽいのでその辺りにデバッグコードを仕掛けて調べたら、dataスキームURIを相対URLとみなして、現在のドキュメントURLからの絶対URLに変換してた。こりゃ引っかからんわ。

コードにパッチ当てちゃってもいいんだけど、モノは試しで「http://*/*data:image/*」なんてフィルタ登録してみたらあっさりうまくいっちゃった。まぁURLの途中に「:」を挟んだパターンがあったら誤爆する可能性もあるんだけど、とりあえずこれでいいか。

ただ、URLフィルタにマッチした場合でもHTTPでの通信そのものは発生しちゃうみたいで、それだったら「##img[src*="data:image"]」のほうが誤爆の恐れもないし安全かも。

あ、あとcssでbackground-imageに指定してる場合なんかはブロックされないっぽいです。

dataスキームの画像をブロックしてみる

Thu, 22 Mar 2012 03:06:18 +0900

面白いネタ、いただきました。

にーまるどっとこむ（旧「突然消失するかもしれないブログ」）のなかのきえたさんから、こんなメンションが飛んできた。

Adbloc PlusではData URIはフィルター対象に指定出来ないのですが、何か技術的に難しい理由があるのでしょうか？
Twitter / @typex20: @dara_j_ Adbloc PlusではData ...

Adblock Plusはこれまで使ったことなかったんだけど、なんだかえらく興味をひかれたので調べてみることに。

よくわからんが使ってしてみると

ちょっと調べたところ、Firefox用とChrome用があるみたいなんだけど、とりあえずFirefoxのほうを試してみる。

まずはAdblock Plusをインストールし、適当にググってみたページなんかを参考にして見よう見まねで

data:image/*

みたいな感じで登録、手持ちであったdataスキームで画像やらスクリプトを食わせているページを開いてみたが、なんの変化も見られない。ふむ。

ドキュメント類もろくすっぽ読まずに機能拡張のソースコードを追っていき、nsIContentPolicyというインターフェイスの実装を提供しているということがわかったので、ContentPolicy.jsmというモジュールのあちこちにデバッグコードをひっかけて調べたところ、内部で持っているスキームのホワイトリストにマッチするので、URLの突き合わせが行われる前にブロックされないことが確定していると判明。さて、ホワイトリストはどこに持ってるんだ？

ググってみると、あるもんだ。

キーワードは失念したがググってみたところ、adblockplus.orgのドキュメントが見つかった。

これ見ると、どうやら「extensions.adblockplus.whitelistschemes」で値を持ってるみたい。

さっそくabout:config開いて「adblockplus.whitelist」くらいでフィルタかけてみたらこんな感じで設定項目が見つかった。

なるほど、先のドキュメント通りに許可スキームをスペース区切りで持ってるので、"data"を取り除いてみることに。

一旦ブラウザを再起動して再度dataスキームを使ったページにアクセスしてみたら、こんどはちゃんと画像もスクリプトもロードされない！おお、やった。

実はもっと簡単な方法があったのねん…

なんてとこまで調べたあたりで、なかのきえたさんからこんなツイートが。

これで消せたみたいですけど、これであってます？→「##img[src*="data:image"]」
Twitter / @typex20: @dara_j_ これで消せたみたいですけど、これで ...

よくよく（よくよく、じゃなくても）調べてみたら、ブロックリストの書き方を解説してるページで詳しく解説されてるじゃない！

これはURLフィルタではなく、「非表示要素フィルタ」というものらしく、要素の属性に対してのマッチングパターンを記述できると。なんだ、こっちのほうが圧倒的に簡単じゃん… orz

ただ、負け惜しみじゃないんだけど、この書き方だと

画像の場合はimg要素で読み込んでいるものだけが対象、cssでbackground-imageなんかに指定してる場合はブロックできない
script要素には（表示もクソもないので）効果がない

という違いはありますが。えぇ、負け惜しみじゃないですよ？

ということで、サンプルページをば

作ってみました。

dataスキーム使ったサンプルページ

img要素で画像表示してるところと、cssでbackground-imageにdataスキーム指定してるところと両方あるので、「data:image/*」と「img[src*="data:image"]」のフィルタの違いをご堪能あれ。

オマケ情報

URLフィルタ使う場合は、「data:*」みたいな乱暴な指定もできます。これだとcssだろうがscriptだろうがなんでもブロックできるっぽいです。

次はChorme版だ。

と思ったけど、ちょっと記事が長くなったので別エントリを起こす予定です。

追記

Chrome編、簡単に書きました。

ローカルストレージを確認したり消したりするブックマークレット

Mon, 19 Mar 2012 12:31:51 +0900

TLでローカルストレージ絡みの話がちょろちょろ流れてたので、興味があったのと多少は需要がありそうな気がしたのでざっくり作ってみた。

用途は、スマートフォンやタブレットなどのモバイルOSで、例えばiOSなんかはorigin指定で削除することもできないし、消す場合はCookieやらなにやら一絡げで削除しちゃうので、「このoriginのlocalStorageだけ消したい！」というような用途で使ってください。

なお、削除すると元ページの機能が意図通りに動かなくなる可能性があるので慎重に。

ブックマークレット

ローカルストレージの内容確認

こんな感じ。

ローカルストレージの内容確認

ローカルストレージを削除

こんな感じ。

ローカルストレージを削除

インストール方法

どちらのブックマークレットも、リンクをクリックくするとソースがpromptで表示されるので、スマートフォンやらタブレットデバイスの場合はこれをコピーして使ってください。デスクトップブラウザの場合はそのままドラッグドロップでよいかと。

注意点とか

Web Storageは同一生成元ポリシーなので、確認/削除のスコープは当然これに縛られます。

また、処理対象にしているのはwindow.localStorageのみなので、ラッパーかませてCookie使ってるページとか、globalStorage使ってるページとかでは効力ないかと。

そうそう、いまさらTwitter始めました。

Tue, 13 Mar 2012 05:35:47 +0900

といっても、去年の10月くらいからなんですがね。もう右サイドのメニューには載っけてましたが。

こちらで細々やってます。

忍者ツールズアクセス解析経由の広告用トラッキングクッキーについて

Tue, 13 Mar 2012 05:29:54 +0900

追記：2012年3月14日

サムライファクトリーから3月13日付で「業務提携先へのデータ提供停止」のお知らせが出ました。

『忍者アクセス解析』業務提携先へのデータ提供の停止｜お知らせ｜忍者ツールズ

ただし、トラッキングの拒否方法については「お使いのブラウザのcookieを削除」と案内されており、オプトアウトの手続きについてはこれまで通りプライバシーポリシー経由で各社のオプトアウト手続きページをちくちくと探す必要があります。

忍者ツールズ経由でのトラッキングについて

当ブログで以前より設置していた忍者ツールズによるアクセス解析（株式会社サムライファクトリー提供）において、サムライファクトリー社の提携企業が発行するトラッキングクッキーが使用されていることが判明したためお知らせいたします。

このことにより、当ブログを訪問された皆様が気づかぬうちにWeb上の行動履歴がトラッキングされている可能性があります。

この行動履歴追跡はいわゆる「行動ターゲティング広告」で、直接個人情報を取り扱うわけではないのですが、複数のサイトをまたがって追跡されるという性質からプライバシー上問題なしともいえない行為のため、このような追跡を好ましく思わない場合はオプトアウトを行ってトラッキングクッキーを拒否されることをお勧めいたします。

当方で実際にトラッキングクッキーを確認できたのは株式会社マイクロアドのみですが、サムライファクトリーのこちらのページによればアクセス解析における提携企業は3社あるようです。各提携企業のオプトアウトはそれぞれ以下から行えます。

株式会社フリークアウト → こちら
株式会社マイクロアド → こちら
株式会社リクルート → こちら
※ リクルートアドネットワークは全部で15社あるようです…

また、当ブログではアクセス解析のみの利用でしたが、このほかに忍者AdMax（広告配信サービス）での提携で8社あるようです。詳しい情報はサムライファクトリーのプライバシーポリシーページをご覧ください。

この状況は昨年3月のプライバシーポリシー改定以降からだったようですが、当方でこの改定を見落としていたためお知らせが遅くなってしまいました。大変申し訳ございませんでした。

なお、当該のアクセス解析はすでに当ブログより削除し、これを機に忍者ツールズを退会いたしました。今後は同社・他社問わず外部のアクセス解析サービスは一切利用しないことといたします。

本件は、当ブログのみならず忍者アクセス解析を設置している他のサイト様においても同様のことですので、繰り返しになりますが、行動ターゲティング広告による追跡を好ましく思わない場合はオプトアウトされることをお勧めいたします。

はてなブックマークボタンにおける問題

忍者ツールズの問題に先立って、はてなブックマークボタンで同種の問題が発生していました（私が忍者ツールズの問題を知ったのも実はこちらの騒動の流れからでした）。

はてなのサービスは利用していないのでこちらに関してはなにか知見があるわけではないのですが、トラッキングクッキーの発行元も同じマイクロアド社であることや、ツール読み込みの外部JSの変更によっていきなりトラッキングを開始したことなどで非常に参考になるため、関連リンクを記しておきます。

無限箱の箱が全部ピンクになるまでがんばるブックマークレット

Fri, 24 Feb 2012 11:21:36 +0900

なんとなく~~無限なめこ~~無限箱ですべてが~~黄金なめこ~~ピンク箱になるまで自動的に抜きまくるブックマークレットを作ってみた。

※：いろいろ事情があってキノコから箱になったようです。あと、なんか様子がおかしくなって逃げ回るようになってたり。

無限箱用ブックマークレット

~~いまのとこWinのFirefox10とChrome17でしか動作確認取れてません。~~IEはちょっと無理っぽいので無視の方向で。

追記

~~ちぇ、iPadだとすんなり動かないか…~~

追記2

~~Androidもダメだな。なんかが根本的にダメなのか。~~

一応ソースも載せておこう。

javascript:(function(){
    var
        _f=arguments.callee,
        ns=$.makeArray($('#main>img')),
        i=0,g=0,
        fl=Math.floor,
        fnd=function(i){
            return arObj[fl(i/COL)]?arObj[fl(i/COL)][i%ROW]:null
        };
    setTimeout(function(){
        var t=(fnd(i)||{isAnimation:false}).isAnimation?null:ns[i++],TM=50;
        if(t){
            if(!/((golden)|(box2))/.test(t.src)){
                var p=$(t).position();
                p.left++;
                p.top++;
                onMouseDown({
                    preventDefault:$.noop,
                    pageX:p.left,pageY:p.top,
                    touches:[{pageX:p.left+1,pageY:p.top+1}]
                })
            }else{
                TM=0;
                if(++g>=ns.length){
                    alert('completed!!');return
                }
            }
        }
        setTimeout(t?arguments.callee:_f,TM);
    },0);
})();

追記3

iOS/Android対応で修正。たぶん動くはず…

追記4：ブックマークレットの登録方法

デスクトップブラウザなら「無限箱用ブックマークレット」のリンクをブックマークバーにそのままドラッグドロップするだけでOKです。

スマートフォンやタブレットデバイスの場合は以下の要領で登録・編集してください。

このページでもどこでも適当に新規ブックマークを追加する
「無限箱用ブックマークレット」をタップしてプロンプト表示されるブックマークレットURLをクリップボードにコピー
最初に新規登録したブックマークのURLをコピーしたもので置き換え、適当にタイトルを入れる

現在動作が確認できているのはFirefox10(Win) / Chrome 17(Win) / Safari 5.1(Mac, iOS5.0.1) / Android 2.3.3 くらいです。

追記5

タイミングによっては~~黄金なめこ~~ピンク箱も抜いてしまうバグの修正

ってか、なにやってんだ、俺…

追記6（2012-02-28 02:24）

箱対応

SafariとChromeの判別があやしくなったので改善してみる

Thu, 25 Aug 2011 20:10:51 +0900

夏も終わり間近というこのタイミングで今年最初のエントリになっちゃうんだけども、デスクトップ版Safariが5.1になったことで以前書いた「SafariとChromeを判別してみる」の方法が通用しなくなっちゃったのであわてて更新してみる。ほんとは中華パッド3号とか4号とかのこと書きたかったんだけども。

前回のおさらい

前回のアプローチは、SafariとChromeでwindow.constructorが違っている（SafariはObject、ChromeはDOMWindow）ことを利用してこんなアプローチをしてた。


// Safariはtrue、Chromeはfalseを返す関数
<script type="text/javascript">
window.check1 = function() {
  try {
    return window.constructor.prototype.alert == undefined;
  } catch(e) {
    // IEとかエラーでるし。
    alert(e.message || e.description);
  }
}
</script>


<button type="button" onclick="alert(check1())">check1</button>

ところが、Safari5.1からはwindow.constructorがDOMWindowConstructorとやらに変わっちゃったので、Chromeと判別されちゃう。さて、困りました。

Safari Developer Libraryを探したら

んで、急いでAppleのSafari Developer LibraryのDocument Additions Referenceでプロパティを確認したところ、「webkitCurrentFullScreenElement」「webkitFullScreenKeyboardInputAllowed」「webkitIsFullScreen」なんてのが見つかった。

念のためChromeのJavaScriptコンソールで「document.webkit」まで入力してタブキーで候補をさらってみたところ「Current～」とか「FullScreen～」、「Is～」とかは表示されなかったのでなんとなくで「webkitIsFullScree」を採用することに決定。

ただし、プロパティの名前からしてbooleanを返すだろうから、単純に


!document.webkitIsFullScreen

なんて試しても判別がつかないので、undefinedかどうかをテストすることにして、こんな感じに。


<script type="text/javascript">
window.check2 = function() {
  try {
    return window.constructor.prototype.alert == undefined ||
           document.webkitIsFullScreen !== undefined;
  } catch(e) {
    return e.message || e.description;
  }
}
</script>


<button type="button" onclick="alert(check2())">check2</button>

で、こうなりました。

この変更を適用すると、こんな感じに。前回同様is_webkitとis_mobileの判定が出来る前提で。


<script type="text/javascript">
// Safariかどうか
window.is_safari2 = (function() {
    // WebKitじゃなきゃ当然Safariじゃないわな
    if(! window.is_webkit) return false;
    if(window.is_mobile) {
        // モバイル版の場合、SVGをサポートしてたらSafari
        return !! window.SVGColor;
    } else {
        // デスクトップ版の場合、windowコンストラクタのプロトタイプで判別
        try {
            // ＊ ココ修正！！ ＊
            // どっちかtrueならSafari
            return window.constructor.prototype.alert == undefined ||
                   document.webkitIsFullScreen !== undefined;
        } catch(e) {
            // そもそもwindow.constructor とか そのプロトタイプにアクセスできない
            // ブラウザもあるので try - catch しとく
            return false;
        }
    }
})();

// Chromeかどうか
window.is_chrome2 = (function() {
    // WebKitじゃなきゃ(ry
    if(! window.is_webkit) return false;
    // 後は基本的にSafariと逆
    if(window.is_mobile) {
        return ! window.SVGColor;
    } else {
        try {
            // ＊ ココ修正！！ ＊
            return window.constructor.prototype.alert != undefined &&
                   document.webkitIsFullScreen === undefined;
        } catch(e) {
            return false;
        }
    }
})();

</script>


<button type="button" onclick="alert(window.is_safari2)">Safariっすか？（改）</button>
<button type="button" onclick="alert(window.is_chrome2)">Chromeっすか？（改）</button>

Chrome 13まではこれで大丈夫だけど、フルスクリーンがどうのこうのなんて機能はOS X Lion向けっぽいのでいずれこれでも判別できなくなっちゃいそうではあるが。

つか、そろそろ中華パッドネタ書いときたいなぁ。もうすでに旬をすぎちゃってるんだけども。

追記

Safari且つChromeとか判定されたり、前回の記事と同時に表示すると上書きされちゃったりなど細々と考慮漏れがあったりしたのでちくちく修正してました。もう平気かな。

追記2（2011.12.28）

ありゃ、気付いたらChromeもdocument.webkitIsFullScreenとかサポートしちゃってるしorz さて、どうするべ…

→ window.chrome が使えそう。なぜこれに気付かないし。

ブラウザで開いているページのURLをEvernoteにメールするブックマークレット

Sat, 18 Dec 2010 06:26:37 +0900

需要があるかはわかりませんが...

半年くらい前からちょろちょろとEvernote使ってるんだけども、dara-j的にはWebの内容をクリップするのが主目的なんです。たとえばTumblrのダッシュボードに流れてきたQuoteの元記事見に行って気に入った部分があったらクリップするとか。FirefoxのWebクリッパーなんかはかなり出来がいいので、なかなか快適に使えるわけです。

が、、内容をじっくり呼んでる時間がないときなんかは後回しにするためにちゃっちゃとタイトルとURLだけクリップしときたい、ってケースもままあるわけで。そんな時はメールで飛ばしちゃうのが手っ取り早いので、ページタイトルとURLをクリップボードに入れるJSActionスクリプトとか作ってみてたんだけど、これだと既定のノートブックに入るだけでしばらくすると後で探しづらかったり。

そこはEvernote、ちゃんとサブジェクトの書き方でターゲットのノートブックやタグを指定はできるんだけど、いちいち書くのも結構面倒になってくるわけで。

で、こういう用途ならブックマークレットを経由してmailtoで開いてやれば投稿用のtoアドレスやらタグをつけたサブジェクトを指定できて結構クイックに扱えるかな、と思って作ってみました。前置きが長かったな。

まずはソース

こんな感じ。


(function(opt){
    var a = '', t = document.title, u = location.href, e = encodeURIComponent, s = ' ';
    location.href =
        'mailto:' + a +
        '?subject=' + e(t + s + opt) +
        '&body=' + e([t, u].join('\n'));
})(prompt('input #tag and/or @notebook', '') || '');

で、実際のブックマークレットはこんなの。

→ Evernoteにメール
クリックしたらソースを表示

「クリックしたらソースを表示」のチェックボックスをOnにすると、クリック時にpromptでソースをポップアップするので、iPhoneなんかのドラッグドロップでブックマークレット登録できないブラウザ使ってる場合にちょっぴり便利。

ざっと解説

メインの関数式に渡す引数はprompt()の実行結果から受け取るようにしてて、これをページタイトルとくっつけたものをサブジェクトに指定してます。なので、「未読」ってタグをつけたい場合はprompt()に「#未読」って入れてやればOKと。

タグやノートブックを複数指定する場合はそれぞれの間をスペースで区切ります。ノートブック「個人用」にタグ「未読」と「url」をつけるなら、「#未読 #url @個人用」みたいな感じで。

改造とか

関数内の変数'a'はtoアドレスに使われるので、ここに自分のEvernoteメールアドレスをあらかじめ入れておけば送信先を選択やら入力やらしなくてもよくなります。さらに関数式への引数もリテラルで書いておけば、ブックマークレットを起動すればメーラーがすぐに起動するので後は送信するだけで目的を果たせるようになります。

ただし引数をリテラル記述する場合、マルチバイト文字はそのまま使えないので、あらかじめescapeしたものを使ってください。

改造が面倒だろうからジェネレータ

って、ブックマークレットのソースを改造するのはちとめんどくさいので、ジェネレータを作って起きました。自分が良く使うパターンで生成してブックマークしておくと便利じゃないかと。

toアドレス：
ターゲットのノートブック：
タグ（スペース区切り）：
リンクタイトル：

（ここにブックマークレットが作成されます）

クリックしたらソースを表示

使い方は、

toアドレスに自分のEvernoteメールアドレス（@m.evernote.com）を入力
ターゲットのノートブックやタグを入力。@や#は不要、タグは半角スペースで区切って複数指定可能
リンクタイトルに入れた文字列が、生成されるブックマークレットの見出しになる

てな感じ。ジェネレータがうまく動かなかったらコメントください。

追記

あー、ジェネレータでノートブック名やタグにマルチバイト文字使うと、IEじゃ化けちゃうなぁ...

SafariとChromeを判別してみる

Sat, 18 Dec 2010 04:32:45 +0900

※：Safari 5.1がChromeと区別できなくなったので修正版作ってみました。（11.08.25）

はい、またも3週間もほったらかしにしてたわけですが、ようやく前回の続きで、レンダリングエンジンがWebKitだった場合にAppleのSafariなのか、GoogleのChromeなのかを判別してみようかと。

当初の考えでは、まずSafariなのかChromeなのかを判断して、それからモバイル版なのかを見ようと思ってたんだけど、「SafariとモバイルSafariにはあって、ChromeとモバイルChromeには存在しないプロパティ」またはその逆ってのが見つからなかったのよね。

仕方ないのでデスクトップ版同士、モバイル版同士の差異を探して、

まずはモバイル版かどうか判断し
その後にそれぞれSafariかChromeかをチェックする

という方法に落ち着いた。

あ、この記事では便宜上、Androidの標準ブラウザを「モバイル版Chrome」とか呼んじゃってるけど、これたぶん正式な名前じゃないみたい。あくまで便宜上の呼称と思ってくださいな。

まずはモバイル版かどうか見分ける

これは前回の最後にふれてたけど、モバイル版ブラウザにはデバイスの向きを示す「window.orientation」というNumberなプロパティがあり、これはデスクトップ版には今のところ実装されてないのでこれを使ってみる。


<script type="text/javascript">
// WebKitかどうか。
window.is_webkit = (function() {
    try {
        return window.navigator.taintEnabled == undefined;
    } catch(e) {
        return false;
    }
})();

// モバイルブラウザかどうか
window.is_mobile = (function() {
    return window.is_webkit && ! isNaN(window.orientation);
})();
</script>

事前にWebKitであるかもあわせて判別しておく。

あとはこの情報を参照すればいいだけ。


<button type="button" onclick="alert(window.is_mobile)">モバイル版のWebKit？</button>

Safariであるかどうか - モバイル編

まずモバイル版の違い。エミュレータベースでしか確認してないけど、Android 2.3（Gingerbread）になってもモバイル版のChromeはまだSVGをサポートしてない模様。しかもありがたいことにWebKitはDOMとかブラウザ由来のオブジェクトのコンストラクタがちゃんとwindowのプロパティとしてアクセスできるので、SVG関連のコンストラクタの有無をチェックすればいいわけだ。

が、モバイルSafariのほうもSVGの実装が段階的に進んでいるため、バージョンによって存在するものとしないものがあるので、なるべく基本的なオブジェクトを使う必要がある。

ここではSVGColorを使うことにする。要はwindow.SVGColor が undefined かどうかを見るというわけ。コードは後述。

Safariであるかどうか - デスクトップ編

で、今度はデスクトップ版の場合だが、これがなかなか苦しかった。さすがに各ブラウザともHTML5街道へまっしぐら状態なのでなかなかブラウザ固有のものが見つからないのだ。windowのプロパティをfor..inで列挙してみると、たまに片方にしか存在しないプロパティ名が見つかるのだが、単にDontEnum属性がついてるだけでオブジェクトとしては存在してたりするし。

そんなわけで単純な存在の有無のチェックじゃ実現できないんだけど、windowプロパティの列挙時に値までチェックしてみたところちょっと面白いことに気づいた。たとえばデベロッパコンソール上でwindowのコンストラクタを出力してみると、Safariの場合は


> window.constructor
  function Object() {
      [native code]
  }

Chromeの場合は


> window.constructor
  function DOMWindow() { [native code] }

と、コンストラクタ関数がまったく異なっているようなのだ。

Safariの場合、コンストラクタがObject()ってことは、window固有のプロパティはコンストラクタから継承してるわけではないと推測できるし、ChromeのほうはモロにDOMWindowという名前なのでこれにwindow固有プロパティが実装されてそうだと推測できる。ってことで、Chromeで試してみた。


> window.constructor.prototype.alert
  function alert() { [navite code] }

お！いい感じですよ？じゃ、Safariでは？


> window.constructor.prototype.alert
  undefined

よし！予想通り！！要するに、window.constructor.prototype.alert が undefined ならSafari、そうでないならChromeと判断して間違いない、と。

これ試したのはChrome 8だったので、以前のバージョンがどういう実装になっていたのか、USBブート可能なポータブル版のChrome 4やら5やらを探し出してきて試してみたところ、まったく同じ状況だったのでこれで問題なさそう。

で、こうなる、と。

ようやく判別方法が固まったので、以下のような感じで。あ、先ほどのis_webkitとis_mobileの判断がでてることが前提でね。


<script type="text/javascript">
// Safariかどうか
window.is_safari = (function() {
    // WebKitじゃなきゃ当然Safariじゃないわな
    if(! window.is_webkit) return false;
    if(window.is_mobile) {
        // モバイル版の場合、SVGをサポートしてたらSafari
        return !! window.SVGColor;
    } else {
        // デスクトップ版の場合、windowコンストラクタのプロトタイプで判別
        try {
            // undefinedならSafari
            return window.constructor.prototype.alert == undefined;
        } catch(e) {
            // そもそもwindow.constructor とか そのプロトタイプにアクセスできない
            // ブラウザもあるので try - catch しとく
            return false;
        }
    }
})();

// Chromeかどうか
window.is_chrome = (function() {
    // WebKitじゃなきゃ(ry
    if(! window.is_webkit) return false;
    // 後は基本的にSafariと逆
    if(window.is_mobile) {
        return ! window.SVGColor;
    } else {
        try {
            return window.constructor.prototype.alert != undefined;
        } catch(e) {
            return false;
        }
    }
})();

</script>


<button type="button" onclick="alert(window.is_safari)">Safariっすか？</button>
<button type="button" onclick="alert(window.is_chrome)">Chromeっすか？</button>

そのうちライブラリにするよ。多分。

ということで、ようやく当初の目的どおりの判別ができるようになりましたとさ。

ここまでのスクリプトはすべて、window.onloadを待たずに判断できるので、単独ライブラリで実装して一番最初に読み込むスクリプトに仕立て上げちゃえばいいんだけど、ちょっとまとめるのがめんどくさいので、まぁそのうち。

追記

ちなみに、window.constructor.prototype のプロパティでの判断は、モバイル版では通用しません。モバイル版ChromeはSafariと同じで window.constructor.prototype.alert は undefined になります。と思いました。確か。


<button type="button" onclick="try { alert(window.constructor.prototype.alert); } catch(e) { alert(e); }">window.constuctor.prototype.alert は？</button>

JSでブラウザを判別してみよう

Thu, 25 Nov 2010 05:07:32 +0900

油断してたらまた4ヶ月も更新してなかったのだが、なんとなくJSでブラウザ判別を行うという、わりとありがちな事に挑戦してみる。

ライブラリとしてまとめようと思ってたんだけど、そろそろ眠いので、今日のところは断片的な記述にしておこう。

何を判別する？

メジャーどころだったらたいていはレンダリングエンジン≒ブラウザが成立しそうなもんなんだけど、WebKitの場合はSafariとChromeの両方がなかなか普及してるので、「レンダリングエンジンが何であるか」と「ブラウザが何であるか」の2種類を判別することにする。で、Safari/Chromeの場合はモバイル版かどうかも見ないとね。

ということで、レンダリングエンジンは

Trident
Gecko
Presto
WebKit

、ブラウザは

IE
Firefox
Opera
Safari
Chrome

を判別してみる。

まずは、Presto ＝ Opera。

めちゃくちゃ手抜きなんだけど、window.operaがundefinedじゃなければPrestoっつーことで。しかもPrestoだったら何も考えずにOperaっつーことで。


<button type="button" onclick="alert(!! window.opera)">レンダリングエンジンははPresto?</button>


<button type="button" onclick="alert(!! window.opera)">ブラウザはOpera?</button>

次はGecko ＝ Firefox。

まぁ、GeckoをみんなFirefoxとみなすのは乱暴なのはわかってるんだけども、こちらも手抜き。

昔、MooToolsの1.2.2のブラウザ判定部分のソース見たときは、window.document.getBoxObjectForがundefinedでなければGeckoてな判断してたみたいなんだけど、Firefox 3.6の環境で試したらこれが成立しなくなってたのでwindowのプロパティを総当りで調べたところ、window.mozInnerScreenXあたりが使えそうなので組み合わせで判別してみる。


<button type="button" onclick="alert(window.document.getBoxObjectFor != undefined || window.mozInnerScreenX != undefined);">レンダリングエンジンはGecko？</button>


<button type="button" onclick="alert(window.document.getBoxObjectFor != undefined || window.mozInnerScreenX != undefined);">ブラウザはFirefox？</button>

IEかどうか、までは簡単。

IEかどうかを判別するのは、window.ActiveXObjectをチェックするのが定番なんだけども、念のためMSDNを見てみたら、なんかIE9で廃止になっちゃいそうな記述が。

びっくりしてIE9ベータで確認したらnullは返してこなかったんだけど、ちょっと怖いのでもうひとつの定番「window.document.all」を使うことに。でもこれ、Operaも実装してるんだったよな、確か。っつーことで、こんな感じに。


<button type="button" onclick="alert(!!((window.ActiveXObject || window.document.all) && !window.opera))">レンダリングエンジンはTrident？</button>

IEのバージョンは細かく見てみたい。

で、IEの場合は他のブラウザよりもバージョンの違いをなるべく厳密に判別したくなるので、

IE6よりも前
IE6
IE7
IE8
IE9

をなんとか判別してみようかといろいろ探してみたところ、これまたMSDNにDetecting Internet Explorer More Effectivelyなんてぴったりの記事が見つかった。冒頭のほうではユーザエージェントで判別する方法を記載してるんだけど、これじゃ心もとないのでもう少し読み進めてみたら、「Another IE version detector snippet」と題するコメントが。

Another IE version detector snippet
function getIEVersion(odoc){
if (odoc.body.style.scrollbar3dLightColor!=undefined)
{
if (odoc.body.style.opacity!=undefined) {return 'IE9';}
else if (odoc.body.style.msBlockProgression!=undefined) {return 'IE8';}
else if (odoc.body.style.msInterpolationMode!=undefined) {return 'IE7';}
else if (odoc.body.style.textOverflow!=undefined) {return 'IE6'}
else {return 'IE5.5 or lower';}
}
}
Detecting Internet Explorer More Effectively

なるほど、styleプロパティでチェックするのね。ただこのサンプルどおりbody.styleをチェックする方法だとページロードが完了しないと判定できないので不便なので、head要素でチェックをしてみることに。あ、あとIE9かどうかの判別はwindow.msPerformanceでチェックしたほうがよさげ。

で、こんなコードを実行して、


<script type="text/javascript">
window.detected_ie_name = (function() {
    if(window.ActiveXObject == undefined && window.document.all == undefined) return "IEじゃない";
    if(window.msPerformance != undefined) return "IE9";
    var h = document.getElementsByTagName("head")[0];
    if(h.style.msBlockProgression != undefined) return "IE8";
    if(h.style.msInterpolationMode != undefined) return "IE7";
    if(h.style.textOverflow != undefined) return "IE6";
    return "IE5.5かそれ以前";
})();
</script>

こんな感じのボタンを貼ってみる。


<button type="button" onclick="alert(window.detected_ie_name)">IEのバージョンは？</button>

WebKitか否か。

MooTools 1.2.2では、navigator.taintEnabledのチェックでもって判別してた。これなんぞ？と思ったら、よい解説が見つかった。

navigator.taintEnabled() というのは、「ユーザーに非通知でデータ送信が可能かどうか（データテイント機能の使用有無）を返すメソッド」です。「何それ？」て思われた方、ご安心ください。Netscape Navigator 3.x の時代の、古い古ーい仕様で、データテイント機能は現在使われておりません。多くのブラウザは、ただfalseを返すだけです。
ただしSafari（WebKit）では、このメソッドそのものを定義していません。
非対応ブラウザでMooToolsを完全に無効にする方法 - 研究室

だそうで、まんま使わせてもらおう。


<button type="button" onclick="try { alert(window.navigator.taintEnabled == undefined) } catch(e) { alert(false); }">レンダリングエンジンはWebKit？</button>

って、IETester使ってるせいか、デフォルトIE以外だとwindow.navigator.taintEnabledにアクセスしただけで例外吐くのでtry catchで囲まなきゃ。

Safariか、Chromeか。

これはあんまりいい方法が見つからなかったので、両方でSafari5とChrome7の両方でwindowのプロパティを洗いざらい列挙してめぼしいところをいくつか試してみたところ、window.TouchListの有無がよさそうだった。

と思って今試したら、Safariでもwindow.TouchListがundefined返してきた。あれぇ？会社で試したときと違うなあ。

ということで、ちょっと別の方法探さなきゃ。ちなみにモバイル版かの判別は今のところwindow.orientationがNaNじゃなければモバイルってな判定でよさげ。

SmartPadから書きこんでみるテスト。

Wed, 28 Jul 2010 03:47:02 +0900

アクセスログ見てたら、解像度が800 x 480 x 16bitな人が見に来てた。

UAには「Android 1.6」て出てのでEKEN系かePad/FlyTouchの人だろうか。お仲間のようで、なんかうれしい。

てなことをスマパから書きこんでみているが、たったこれだけの文章でも結構ストレスだなあ。

フリック入力にはそれなりに馴れてるつもりだったんだけど位置の誤検出による入力ミスはちょっとイライラくる。

テンキーパッドで「た」はともかく「ま」を「あ」で検出しちゃうのと、DELキーの二重検出はしんどいなあ。

て、これだけで30分近くかかってるし orz