Bookmarklet版COCOA接触キー確認

汝、翼を与える＠ばってん先に翼ばくれんね イベント・・（parody） @ryunosinfx

うーんスタイル効かないのか・・・ しんどいな・・・AAで描画するしかないじゃないか！ うーん。DOMの書き換えはできるが、CSSの概念のないxmlだと何も出来ないのな・・・

汝、翼を与える＠ばってん先に翼ばくれんね イベント・・（parody） @ryunosinfx

var.blog.jp/archives/71067… なんだ、このIE向けの古の野蛮な方法は・・・ IE9時代の野蛮な方法は現代では当然動かない。 しかし日付が2017年なのがヤバさを物語ってるな・・・ さて、こうなるとxmlから動かせない訳だけどできるのか？ jsは動くがhtml5の機能が死んでいる。使えるソースは64kb

汝、翼を与える＠ばってん先に翼ばくれんね イベント・・（parody） @ryunosinfx

corsに対応した鯖が居ればデータは受信可能。 しかし、正直corsに対応した鯖となるとGASしか無い訳で、 64kbだとzip解凍ライブラリが乗るのかというと・・・ Webpack経由でくっつけたら125kbになっちゃったなおい・・・

汝、翼を与える＠ばってん先に翼ばくれんね イベント・・（parody） @ryunosinfx

うーん・・・ ブックマークレットを分割でもいけるが・・・ 詰んだか・・・XMLで外部にCORSでソース配布通信が可能な鯖が無い。 いや、正確にはGASとか有るけど、50,000回/日なんよね。無料枠だと。うーん。実行時間90分/日は、まあなんとかなるとしてもさ。 developers.google.com/apps-script/gu…

汝、翼を与える＠ばってん先に翼ばくれんね イベント・・（parody） @ryunosinfx

mimetypeがtext/htmlでdtdがhtml5じゃ無いだけで 異常なぐらいのハードモードやな。 html5依存の仕様が無いとクリアできない。 documentTypeがnullのxmlだと色々詰む。 もしかして改行が出来なかったりする？ スタイル無いからなーふへー

汝、翼を与える＠ばってん先に翼ばくれんね イベント・・（parody） @ryunosinfx

まあ面倒だが、ブックマークレットを５分割ぐらいして、対応するか。 とにかく、外部サービスを使ったら負けだと思ってる。 すべて静的にする！ Webpackしたソースを1.333倍になるが、base64にして 分割したら確実にいける。 base64最高！後はハッシュ関数が有れば大丈夫

汝、翼を与える＠ばってん先に翼ばくれんね イベント・・（parody） @ryunosinfx

document.createElementではなく document.createElementNS("w3.org/1999/xhtml","a") で作ると、namespaceURIがHTMLになって普通にXMLの中にブラウザがHTMLと解釈するエレメントを打ち込めるな・・・ developer.mozilla.org/en-US/docs/Web…

汝、翼を与える＠ばってん先に翼ばくれんね イベント・・（parody） @ryunosinfx

じゃあ当初の予定通り・・・と言いたいところだが、 なんやな、Vue.jsを使うにもdocument.createElementを document.createElementNSでオーバーライドしないと駄目なのか・・・ まずはpostMessageAPIでGithubPagesと通信の確保かな。 それが出来たら好きなだけライブラリを召喚できる。

汝、翼を与える＠ばってん先に翼ばくれんね イベント・・（parody） @ryunosinfx

iframeがiframeとして出現する所までは確認した。 後は、通信してくれるかどうかなんだが・・・

汝、翼を与える＠ばってん先に翼ばくれんね イベント・・（parody） @ryunosinfx

iframe内のjsは動いている。 じゃあpostMessageでデータ通信ができるかどうかだな・・・

汝、翼を与える＠ばってん先に翼ばくれんね イベント・・（parody） @ryunosinfx

通信ができることは確認した。 したがって、自由気ままにGithubPagesから 400エラーのXMLページにjsを召喚できるようになる！ キタコレ！

汝、翼を与える＠ばってん先に翼ばくれんね イベント・・（parody） @ryunosinfx

Uncaught EvalError: call to eval() blocked by CSP ってクロスドメインだと怒られるなぁ・・・ うーむXSS対策なんだろうがXMLでも発動するのか 結構厳しいなぁ

汝、翼を与える＠ばってん先に翼ばくれんね イベント・・（parody） @ryunosinfx

うーむ、当然のようにリンクにjsを入れてもCSPで Content Security Policy: ページの設定により次のリソースの読み込みをブロックしました: inline (“script-src”) で弾かれるな。 ふむふむ。 さあどうするか。

汝、翼を与える＠ばってん先に翼ばくれんね イベント・・（parody） @ryunosinfx

あーそうか！ iframeを開くことはできるので、 ①bookmarkletで該当ドメイン内にiframeを展開 ②bookmarkletはデータをiframeに送る ③メイン処理はiframe内で実行する すると 巨大なjsファイルをベースにCORS対応でないAPIのデータを処理可能になる。

汝、翼を与える＠ばってん先に翼ばくれんね イベント・・（parody） @ryunosinfx

ユーザーはiframeを操作することになるんやな。 複数windowというかタブを生きた状態で触れるなら マルチドメインをデータ送受信が可能になるけど まあ今回は１ドメインからデータ引っ張って来るだけだからね。 ということは逆に言うと、jsで複数ドメインでデータを構成するとコピー出来ないのか。

汝、翼を与える＠ばってん先に翼ばくれんね イベント・・（parody） @ryunosinfx

逆にxssを許す設定になっている場合は逆襲を行う攻性防壁jsを置いておけばかなり時間稼ぎができるな。 こう、変なところで実行すると時限爆弾の様にやらかしを電子透かしで入れてくみたいな。 例えば、時間、IPアドレスや機材の情報を取るのはかなり重要で。

汝、翼を与える＠ばってん先に翼ばくれんね イベント・・（parody） @ryunosinfx

bookmarkletを外部ファイルにwebpackで出しておいて、 それをfetchで取ってくればいい。 ここは純然と64kb制約があるのでterserで圧縮と。 でも中身は普通にclass定義してロジックが組める。 ただし、マングリングはclassのプロパティまではsafeに及ばないからメソッド名は人力短縮名で

汝、翼を与える＠ばってん先に翼ばくれんね イベント・・（parody） @ryunosinfx

アレやがな。 自分のやる気駆動でやってるとなかなか進まない。 単純にとても進まない。 一応、Webpackなbookmarkletまでは作ってiframeでgithubpagesのvue.js@webpackなページの表示までは出来た。 次はファイルをgithubpagesに送信する部分でパワーダウン！

汝、翼を与える＠ばってん先に翼ばくれんね イベント・・（parody） @ryunosinfx

ファイルを取って、githubPagesにもって来れる所までは出来た。 うん。後はデータ処理に移行すると。 あーVuejs真面目に使わないとなぁ にしてもWebpackというかTerserの遅さは罪深い。

汝、翼を与える＠ばってん先に翼ばくれんね イベント・・（parody） @ryunosinfx

じゃあ、何をしたらいいのかな？ グラフライブラリでも突っ込んでグラフィカルに見るのが良いのか？うーん？

汝、翼を与える＠ばってん先に翼ばくれんね イベント・・（parody） @ryunosinfx

欲しい機能はなにか？ ・普通にキーと追加日の密度が欲しい？ ・自分の持ってるキーと突き合わせしたい？ ・自分の持ってるキーの集合をアナライズしたい？ ・２Weekで消える運命のデータを未来永劫所持したい？ うーん・・・

汝、翼を与える＠ばってん先に翼ばくれんね イベント・・（parody） @ryunosinfx

まあzipを取ってくるところまで出来たかなー じゃあ次はファイルの中身か。

汝、翼を与える＠ばってん先に翼ばくれんね イベント・・（parody） @ryunosinfx

ファイルの中身がProtocol Buffersと言うことを 今更知るなど。 なんやな、凄くめんどくさいです。

汝、翼を与える＠ばってん先に翼ばくれんね イベント・・（parody） @ryunosinfx

bookmarkletに改行を含められないので terserでコメントを残す設定に出来ないな・・・ まあ本体はgithubPagesの方なので、自作モジュール以外bookmarkletに入れなければ良いんだけど。

汝、翼を与える＠ばってん先に翼ばくれんね イベント・・（parody） @ryunosinfx

Protocol Buffersのライブラリの扱いが なかなか書いてあるとおりにやっても動かないぞごるぁ protobufjs.github.io/protobuf.js/#u…