のんびり日曜大工

いきなりコード。

<![CDATA[// ペーストを監視したいtextareaを取得 var textarea = document.getElementsByTagName()[0]; textarea.onpaste=function (e){ // onpaste実行。この時はまだペーストされていない。 // textareaと同じ var t=e.target; // onpaste発生時のカーソルの位置を取得。 // これからペーストされる位置にカーソルがあるはず var start=t.selectionStart; // ちょっと（22行目の10msec）遅れて、関数を実行。 // 実行時にはペーストが完了している。 setTimeout(function(){ // ペースト完了直後のカーソルの位置を取得。 // ペースト文字列の末尾にカーソルがあるはず var end=t.selectionStart; // ペースト前後のカーソルの位置の間がペースト文字列のはず var val=t.value.substring(start,end); // あとは煮るなり焼くなりいかようにも console.log(val); },10); };]]>

これは、

<![CDATA[document.getElementsByName()[0];]]>

と

<![CDATA[document.getElementById();]]>

が同じ結果になる、という謎仕様。

先日、社内システムが何故IEでしか動作しないか調べていたら、 コレにぶちあたった。

なので今回はこの違いをUserscriptで吸収してみた。

という訳でコード。

<![CDATA[ document.getElementsByNameOrig=document.getElementsByName; document.getElementsByName=function(name){ var a=document.getElementsByNameOrig(name); if(a.length==0){ a.push(document.getElementById(name)); } return a; }; ]]>

やっているのは、Document.getElementsByNameを上書き。 上書き後のDocument.getElementsByNameの挙動は、

まずは通常のDocument.getElementsByName通り

1.の結果が空なら、Document.getElementByIdを実行して結果を追加

になる。 ただし、 <![CDATA[ // ==UserScript== // @name ほげほげ〜 // @namespace https://fuga.fuga/ 　　： // @run-at document-start // @grant none // ==/UserScript==]]>

みたいに@run-at属性に、document-startを付けて、 他のスクリプトが実行される前に、上記上書き処理が走らないといけない。

Chromiumがv37に上がってshowModalDialog APIがdeprecatedになったが、 Mac OSでの対応例が、

<array> <string>ShowModalDialog_EffectiveUntil20150430</string> </array>

と何の事かわからない記述だったが、イロイロ探った結果、 こいつの事だったらしいので、まとめておく。

Appleのサイトから、Workgroup Managerをダウンロードしインストールする

インストールしたWorkgroup Managerを起動し、 「Address」に「localhost」、 「User Name」に「administrator」、 「Password」に管理者パスワード を入れて、「Connect」ボタンを押す ※一瞬フリーズしかけるが、我慢して待つ

起動した後、左側のペインでポリシーを変更したいユーザを選択して、ツールバーの「Preferences」を押し、『Details』タブを選ぶ

左下の「+」を押してポリシーを変更したいアプリ（今回はChromium）を選ぶ

「Always」を選択した状態で「New Key」ボタンを押す

「New Item」という項目ができるので、プルダウンで「Enable deprecated web platform features」を選択する

選択したまま再度「New Key」 ボタンを押し、valueに「ShowModalDialog_EffectiveUntil20150430」を入れる

「Done」ボタンを押して設定内容を保存したあと、 一旦ログアウトして再ログインする

最近、社内でもブラウザで動くシステムが増えてきている。 でも、使い勝手が悪い、クロスブラウザが考慮されてない、など、 もの申したいことも度々。

そんな時、まず最初に 『それ、BookmarkletとかUserScriptでなんとかなるんじゃない？』 と考えてしまうほど、UserScript厨化が進行している。

まぁ、実際できるんだから、いいじゃん。

で、実際UserScriptを書くときは、 Chromeの拡張機能で、UserScript実行環境でありエディタでもあるTampermonkeyを使っている。

これでデバッグ用コードを書いて動作検証した後に、 GoogleのClosure Compilerでコード圧縮してから配布／公開、 というのが、最近の基本的な流れ。

で、作業がルーチン化すると、人間どうしても、 その作業を全自動／半自動化したくなるもので。

今回は、今までTampermonkeyで書いてたコードをclosurecompilerにコピペして圧縮してたルーチン作業を、 Tampermonkeyから直接実行できるようにしてみた。 これはBookmarkletで。 ホントは、UserScriptで圧縮用ボタンでも追加したかったが、 さすがに「chrome-extension://」で始まる画面でUserScriptは実行できないらしいので

以下、コード。

<![CDATA[ (function(){ var mask; var compile=function(js_code){ var metas=js_code.match(/\/\/ ==UserScript==[\w\W]*\/\/ ==\/UserScript==\n/g); var xhr=new XMLHttpRequest(); xhr.open("POST", "http://closure-compiler.appspot.com/compile"); xhr.onreadystatechange=function(){ if (xhr.readyState==4&&xhr.status==200){ var textarea=mask.getElementsByTagName("textarea")[0]; textarea.innerHTML=(metas!=null?metas[0]+"\n":"")+JSON.parse(this.responseText).compiledCode; mask.getElementsByTagName("div")[1].style.display="inline"; mask.getElementsByTagName("input")[0].onclick=function(){ d.body.removeChild(mask); }; textarea.focus(); textarea.select(); } }; xhr.setRequestHeader( 'Content-Type', 'application/x-www-form-urlencoded;charset=UTF-8'); var encoded=encodeURIComponent(js_code); xhr.send("compilation_level=SIMPLE_OPTIMIZATIONS&output_info=compiled_code&output_info=warnings&output_info=errors&output_info=statistics&compilation_level=SIMPLE_OPTIMIZATIONS&warning_level=default&output_format=json&output_info=compiled_code&js_code="+encoded); } var d=document; try{ mask=d.createElement("div"); mask.innerHTML='<div style="width: 100%; height: 100%; position: fixed; left: 0px; top: 0px; opacity: 0.7; background-color: black;"><div style="width: 80%; height: 80%; position: fixed; top: 0px; right: 0px; bottom: 0px; left: 0px; margin: auto;display:none" align="right"><textarea style="font-size:12px;width: 100%; height: 100%;background-color: white;" readonly=""><input type="button" value="閉じる">'; mask.id="mask"; mask.style.cssText="width:100%;height:100%;position:fixed;left:0;top:0;z-index:9999;"; d.body.appendChild(mask); if(location.href.indexOf('chrome-extension://dhdgffkkebhmkfjojejmpbldmpobfkfo/')==0) { var at=(function(){var tabs=d.getElementsByClassName("tv_content");for(var i=0;i<tabs.length;i++){if(tabs[i].id.indexOf("_details_c")>=0&&tabs[i].style.display!="none")return tabs[i]}return null;})(); var a=at.getElementsByClassName("CodeMirror-scroll")[0]; var b=$(at.getElementsByClassName("CodeMirror-editor")[0]); var c=0,cl=0; var allsrc=[]; var pos=a.scrollTop; if(pos==0)a.scrollTop=1; var onscroll=function(){ var s=at.getElementsByClassName("CodeMirror-scroll")[0].innerText; var lines=s.match(/(?:\n|^)[1-9]{1}\d*/g); if(cl==parseInt(lines[lines.length-1])){ a.removeEventListener("scroll",onscroll); a.scrollTop=pos; compile(allsrc.join('\n')) return; } cl=parseInt(lines[lines.length-1]); c=a.scrollTop; var m=0; var n=at.getElementsByClassName("CodeMirror-scroll")[0].innerText.replace( /(?:\n|^)([1-9]\d*)\n([^\n]*)/g, function(a,b,c){ if(m==0)m=parseInt(b); return "@"+b+","+c+""; }); var src=n.split(/\@[1-9]\d*,/); src.forEach(function(e,i,a){ if(allsrc[i+m-1]==null)allsrc[i+m-1]=e; }); var before=a.scrollTop; a.scrollTop+=b.height(); var after=a.scrollTop; if(before==after)onscroll(); } a.addEventListener("scroll", onscroll); if(a.scrollTop==0)onscroll(); else a.scrollTop=0; } }catch(e){ if((mask=d.getElementById("mask"))!=null){ d.body.removeChild(mask); } } })();]]>

前半は、Closure Compilerに投げる関数の宣言で、 これはREST APIがあるので、XMLHttpRequestでPOSTするだけ。

Tampermonkey固有のコードは３０行目付近から。 面倒だったのは、Tampermonkeyのエディタから、表示中のソースコードを取得する部分。

どうもこのエディタ、どこかの要素に全てのソースコードを保持してる訳ではなく、 表示されている部分と前後±αしか保持してなく、 残りはスクロールする度にロードされていた。

なので、上記のコードでは、一旦一番上までスクロールして、 自動でスクロールしながら、上の行から順番に配列に確保し、 最後にArray.joinで(改行コードを挟みながら)連結している。

ソースコードが出来上がれば、後はClosure Compilerに投げるだけ。

このコード自体をClosure Compilerで圧縮して、 Bookmarkletとして使っている。

基本的には、HTMLモードで<script>タグを書くだけで、 いろんなスクリプト（全部かは知らん）が実行可能。

スクリプトの実行に外部ライブラリが必要な場合は、 「カスタマイズ」の「説明」欄に読み込む為の<script>タグを書く。

こういう風にスクリプトを読み込めば、 公開ライブラリを使えるようになる。

例えばThree.jsを使った例。

二つ目の投稿にして、いきなりニッチなんだがｗ

ちょっと前の話、

デスクトップからブラウザにドラッグ＆ドロップしたSTLファイルを サーバにアップせずに、Three.jsを使ってブラウザで表示する

なんてことしていた。

その時にぶちあたったのが、

Chrome/Safariではすんなり開けるが、 Firefoxでは開けない

と言うありがちなブラウザ互換性問題。

「IEではできない」はよく見るけど、「Firefoxではできない」？ なにやらめんどくさそう。

という訳で、どこでFirefoxが処理を投げ出しているのか、追いかけてみた。

最初にChromeで動いて、てんぐになっていたコードはこんな感じ。

var loader = new THREE.STLLoader(); var droppable=document.getElementById("target");//ドロップ先 droppable.bind("drop", function(event){ var file = event.originalEvent.dataTransfer.files[0]; loader.addEventListener("load", function(e) { // STL読み込み完了時の処理 // e.contentからMeshを作ってSceneに貼る、とか。 }); loader.load(window.URL.createObjectURL(file)); event.preventDefault(); event.stopPropagation(); return false; });

Chrome/Safariだと呼ばれるloadイベントのリスナーが、Firefoxだと見事にに呼ばれない。

どうやら、STLLoaderのloadメソッドの中では、jQueryのajaxメソッドが使われていて、 さらにコレがXMLHTTPRequestを呼んでいる。

一方で、FileAPIから取れるオブジェクトURLは、”blob:”スキーム。

このblobスキームのURLをXMLHTTPRequestが処理できるかどうか、が今回の分かれ道の様子。

Chrome(V8)/Safari(JavaScriptCore?)のXMLHTTPRequestの実装はblobスキームを処理できるが、 Firefox(SpiderMonkey?)のXMLHTTPRequestはblobスキームを処理できない、のようす。 （困る人は少ないだろうが）

なのでこの時はSTLLoaderのloadメソッドを使わずに読み出すよう、ドロップ後の処理を変更。 直したコードはこんな感じ。

var loader = new THREE.STLLoader(); var droppable=document.getElementById("target");//ドロップ先 droppable.bind("drop", function(event){ var file = event.originalEvent.dataTransfer.files[0]; var reader = new FileReader(); reader.onload = (function(theFile) { return function(e) { // "data:application/sla;base64,...."というdata-scheme形式でファイルが取れる var data=reader.result; // base64エンコードされた部分だけ取り出す var contentBase64=data.split("base64,")[1]; // base64デコードする var contentBin=window.atob(contentBase64); // STLLoaderのparse関数だけを使う var content=loader.parse(contentBin); // ここまできてSTLの読み込みが完了 // あとはcontentからMeshを作ってSceneに貼る、とか。 }; })(file); reader.readAsDataURL(file); event.preventDefault(); event.stopPropagation(); return false; });

 Tween.jsの使い方。 まずはサンプルをそのまま。

var tween = new TWEEN.Tween( { x: 50, y: 0 } ) .to( { x: 400 }, 2000 ) .easing( TWEEN.Easing.Elastic.InOut ) .onUpdate( function () { output.innerHTML = 'x == ' + Math.round( this.x ); var transform = 'translateX(' + this.x + 'px)'; output.style.webkitTransform = transform; output.style.transform = transform; } ) .start();

Tweenのコンストラクタで、操作したいプロパティを持ったオブジェクトを渡して、 toメソッドで、操作したいプロパティの名前とゴールの値、 あとアニメーションにかかる時間を指定して、 easingメソッドで、アニメーションのタイプを指定して、 onUpdateメソッドで、値が更新されるたびに呼ばれるコールバック関数を指定して、 startで実行。

で、実際に使ってみた。 やってみたのは、Three.jsのカメラをTweenを使って、 ボタンクリックで初期位置に移動させること。

こんな状況です。

最初は直接カメラの座標を操作してみた。その時のコードはコレ。 # コードを簡単にする為に2次元にした。カメラ初期位置は(20,0)

var tween = new TWEEN.Tween( camera.position ) .to( { x: 20, y:0 }, 500 ) .easing( TWEEN.Easing.Linear.None ) .start();

コレだと、アニメーションの最中に物体に一度ズームしてしまう。

そりゃそうだ。

円周上の一点から別の点に移動するとき、 その点を結んだ直線上を移動しているので、 物体とカメラの間の距離が、一度近づいているから。

なので、ちょっと工夫。 # 工夫、つーか、当然の処理なんですが。

カメラと物体の間を一定に保てば、ズームせずに回転だけするはず。 実際には、カメラのpositionプロパティ（直交座標系）を直接操作するのはやめて、 いったん極座標系に直してアニメーションを実行する。 こうすることで、物体とカメラの距離は一定に保てる。

実際やってみらうまくいった。 コードはこんな感じ。

var rectp=camera.position; var polarp = { r:Math.sqrt(rectp.x*rectp.x+rectp.y*rectp.y), theta:rectp.x!=0?Math.atan(rectp.y/rectp.x):(rectp.y>0?Math.PI/2:-Math.PI/2) }; var tween = new TWEEN.Tween( polarp ) .to( { r: 20, theta:0 }, 500 ) .easing( TWEEN.Easing.Linear.None ) .onUpdate(function(){ camera.position.x = this.r*Math.cos(this.theta); camera.position.y = this.r*Math.sin(this.theta); }) .start();

onUpdateの中では、 thisがアニメーションの対象オブジェクト（polarp）になっているので、 thisから現状の極座標系の座標を取り出し、 それを直交座標系の座標を計算しなおし、 カメラの座標を更新している。

はじめまして。 Tumblrを（今更ながら）始めました。

これは、某メーカーにつとめる達観系アラフォー男子が、 趣味レベルのソフト開発メモを書くミニブログです。

kあた仕事は、（メーカー勤めなのに）商品開発とは直結してなくて、 人間観察したり、アイデア出したり、それを即興で形にしたり、と なんでもござれ、な仕事ですが、 形にするところでソフトの知識を使ったりしてます。

メインはJava（Android）、Javascript（HTML5/Node.js）ですが、 昔はC++もVB6（.NETではない）もいじってました。

以後お見知り置きを。