JavaScriptでXeyes

社長:これ、絶対誰か作ってるよね。いや、みんなが作ってたような記憶もある。

基盤:xeyes javascript … たくさんヒットしますね。まず日本語ウィキペディアからはこれ[1][JavaScript Kit]が参照されてます。検索の上位に来るのがこれ[2][JsFiddle.net]

社長:いや、そいつら目つきが Xeyes と違う。

基盤:白目剥いて固まってるこれとか[3][jQuery-xeyes]。あれ、これも固まってますね[4][Ajaxschmiede]。

社長:何かの互換性の問題でしょうかね?

基盤:おっと、これですね、見たかったのは。[5][Kero2]

社長:完璧です。感動しました。

開発:昔のはみなさん、gifイメージを動かす形で作られてますね。でもイマドキだとHTML5のCanvasというのを使うって直書きするんじゃ無いでしょうかね?

基盤:xeyes canvas で検索… ああ、これ[6][JsFiddle.net] とか、これ[7][annimationPolyfill.js] がそうですね。今の技術基準だと、この [7]が正解じゃないでしょうか。2014年の作品。オリジナルのウィンドウだとこう[eyes.html]。埋め込むとこんな感じ↓

https://gist.github.com/nielsdoorn/7959409

eyes.js
eyes.css
eyes.html
animationPolyfill.js

社長:うーむ、昔のよりコードがコンパクトでかつなめらかキビキビしてますね。

開発:マウスの動きを検出したらキャンバス全消去して書き直しか… ていうか JavaScript って、eye というクラスを定義して複数インスタンシエートとか出来ないんでしたっけ… いずれにしても onmousemove であの reCAPTCHA は何してるかに興味アリですね… それはそうと、このコード中のコメント、オランダ語のようですが‥

--
2020-0527 SatoxITS

私はロボットです

社長:昔 robots.txt を無視するロボットに業を煮やして、私はロボットです(ImRobot)、ロボットではありません(ImNotRobot)というクッキーを作りましてね。ヘビーにアクセスされると困るリソースから排除を試みたりしてました。

開発:その後ロボット対策に、ぶにゃぶにゃの文字とか画像とかを人間に認識させる対策が流行りましたが、あれってちょっと人間にはつらい仕打ちでした。ああいう画像認識はロボットのほうがよっぽど得意なんじゃかと思うんですが。

社長:だから、Google reCAPTCHA みたいのが現れた時は、救世主かと思いましたよ。あれを Google からまったく切り離した中立的なサービスなり製品として提供してくれると良いのですが。reCAPTCHA バッジの中のプライバシーとか利用規約だのをクリックして読むと、一体なんの事かと恐ろしい感じがします。

開発:Google reCAPTCHA を Google のロボットが突破できるのか、興味ありますね。盾鉾試験はしてるんでしょう。

社長:昔、自前で全文検索エンジンを作ってたんですが、主な検索対象はローカルなファイルでした。そこそこ気に入ってたし、今でも DeleGateミュージアムで動いています。ですが、Google から Google Desktopサーチが出て、ああもういらないかなって、開発をやめてしまいました。それが Google Desktop が 2011年に撤収してしまって。まあ reCAPTCHA はやめないだろうけど。

開発:Mac では Spotlight のごり押しがひどくてみんなから嫌われてましたが、最近使ってみたら面白いなとは思いました。

社長:でも結局私が欲しいのは、grep なんですよね。正規表現で検索できなくちゃ。そりゃあ Google みたいな巨大なデータには適用できないだろうけど、自分のローカルにある検索したいファイルの中のテキスト部分なんて、高々100MB〜1GB程度なわけです。全然 grep で行けます。1秒で grep できちゃうし、vi でだって編集できる。私は、find もかったるいので、tar でまとめて vi で検索なんてことをよくやります。

開発:コンピュータのプログラムに関しては、Eclipse とかの IDE の検索機能がとても良いですね。やはり形式が規定されたデータの間の参照関係は役に立ちます。いっそ文書も全部、Eclipseで検索してやろうかと思いましたが、さすがにうまく行きませんでした。

社長:でも結局、IDEで使ってたのも、主には grep 的なテキスト検索でしたね(笑)。正規表現でマッチして置き換える。これ、半世紀近く前 sed の時代に完成していて、今は退化したか社会の片隅化してしまった技術の一つだと思います。

開発:コンピュータのパーソナル化で「直感的に操作できること」に重心が移りすぎたですかね。正規表現だなんて抽象的なものは、火炙りの刑というか。

社長:たとえば干物みたいな、流通技術が乏しかった時代の対処技術は、実はものを美味しくする技術でもあった、みたいなとこもありますよね。

開発:最近少しだけ仕事した FPGA の統合開発環境もとても印象的でした。ハードウェア部品とは言え、結局は文字列か数値で表現されたデータのマッチングではあるのですが、図的な表示との双方向の検索は、ちょっと感動ものというか。

開発:まったく昔に戻ることなんてあり得ないけど、昔の本質的な技術とのベストミックスを考えると良さそうにも思います。

開発:タイトルと全然違う話になりました。

社長:まあ検索ということで、なんとか bot 繋がり。

--
2020-0527 SatoxITS

ブラウザだけで快適16進計算

これまで16進計算が必要な時に、bcコマンドやら printf「コマンド」やらを使ってきたのですが、どうも不便だと思っていました。それで今日ふと気づいたのが、ウェブブラウザについているDevToolsというデベロッパ向けの機能。そのコンソールで、JavaScript として計算を行うことができます。こんな感じ↓

DevToolsで快適16進計算

なんて手軽で便利なんでしょう。
数値を適当に _ で区切って書けるのも見易くて助かります。

こんなにらくちんなものに思いが至らなかったなんて、人生の貴重な時間をだいぶ無駄遣いした気がします。いったい自分はこれまで何回… たぶん人生で1万回くらいはやったと思われます。一回あたりの無駄時間を10秒としても、28時間ですね。

ただ、整数値が64ビット未満でへたれているのが残念です。できれば128ビットまでは行って欲しいものですが。

それと、結果を10進ではなく16進で見たい時はどうするんでしょう?とりあえずは toString(base) で、まあそれほど不便でもありません。ただ、かなりお得感が薄れます。

一番望ましいのは、結果を16進で表示するモードがあること。そうでなければ、toString(16) を tox() みたいに短く書けること。

面白そうなので調べてみます。

まず DevToolsのコンソールに関する解説はここが原点と思われます。https://developers.google.com/web/tools/chrome-devtools/console/javascript

これによると、DevToolsを呼び出すショートカットは、MacではCommand+Alt+J。いちいちメニューバーまで行かなくて良いので便利です。Operaの場合これをカスタマイズするのは以下の設定用ページ↓

コンソールのURLがあるとブックマークできて便利かなと思いますが、なさそうな感じ。

それで、コンソールのインタプリタはどう出来ているかというと。きわめて抽象的な概説が (^-^;

Overview
The Console is a REPL, which stands for Read, Evaluate, Print, and Loop. It reads the JavaScript that you type into it, evaluates your code, prints out the result of your expression, and then loops back to the first step.

うーん、その「prints out the result」のところをイジりたいのですが… いずれまた。

そういえば、ときどきやる man ascii のインスタント版も欲しいところです。

--
2020-0527 SatoxITS

私はロボットではありませんので

開発:それで、あれ(Simple Google reCAPTCHA = sgr)がどういう仕組みになっているか覗いてみたのですが、サーバ側の生成するソースをみるとHTML的には単なる sgr-recaptcha というクラス名の div です。これだけ。

<div class="sgr-recaptcha"></div>

開発:その sgr-recaptcha の定義はというと単にこれだけです。

.sgr-recaptcha {
    transform: scale(0.895);
    transform-origin: 0 0;
    clear: both;
    padding: 10px 0 5px 0;
}

開発:ですが、サーバ側(ブラウザ側)で reCAPTCHA のエレメントを覗くと、こんな感じです。div の中身に iframe の世界が詰められています。

開発:この中に、以下のように取得した「サイトキー」 k=6Ldm …が含まれてるのが見えます。

開発:それでこのキーは、まあプラグインの設定のインターフェイスからも明らかですが、1プラグインに1つしか設定できません。となると、例えばページごとにキーを変えたいというような使い方ができないことになります。まあ、プラグインを複製すりゃいいっちゃあいいんですけど。サイト全域に仕掛けて、ロボット以外が来たら「ヒトが来た!」ってメールをくれるようにするとかもしたいですね。

開発:Google reCAPTCHA にはアクセス解析機能がついているので、これは是非活用したいわけです。こんな感じなんですが。

開発:もごもご妄想。

そういう意味ではこれもまた、ロボット対策に名を借りたGoogle様のユーザ追跡機能の、お先棒担がされてるんでしょうかね。まあ、ただほど高いものは無いってやつかもですね。

開発:ですので、もし reCAPTCHA 用のWordPressプラグインを自作するとしたら、複数のキーを登録できること、そのうちのどのキーを使うかを埋め込み時に選択できること、が要件かなと思います。

開発:あと、この reCAPTCHA による一種の非ロボット認証は、フォームやらログインやら、結局は HTTP のアクションに行って使われるんだと思うんですが、そうすると、この認証を通ったかどうかを行った先で確認しないといけないので、「対応・非対応」ということがおきていると思います。ですがたとえば、認証されてなかったらそもそもその対象を表示しない(HTTPレスポンスの中に生成しない)ということで一元的な reCAPTCHA 適用ができると思います。それこそ、detailes の中身を空にするとか。CSSでブロックできるかも。まあ、表示しないと人間にも存在が認識できないとか、逆に表示しないだけで存在はしているので陰湿なロボットはダイレクトにアクセスしてくるだろうとか、不完全です。ならば、URLのパターンとかとセットにして、サーバの根っこに反映させれば良いのではないかと思います。たとえば認証されてなかったらPOSTメソッドを禁止するURLとか。

開発:reCAPTCHA のキーは、それを管理をするサーバ、HTTPサーバで良いと思いますが、それで管理すると良いかもしれません。これならば、コンテツを管理するサーバとは独立に、鍵を共有管理できます。アクセス対象のURLと、対応するキーのURLを機械的に変換可能にしておけば、いちいち対応づけをする必要もなくなります。

社長:ふーん。それ、ぜんぶまとめて(リバース)プロキシでやればいいんじゃね?

開発:まあ、我が社的にはそういう方向になるでしょうね(笑)

社長:もごもご妄想。

なんにしてもこの、一見おとなしげに見える reCAPTCHA のアイコン、上空を通過するマウスポインタの動きを偵察し続けてる JavaScript なんだよね。いっそ、Xeyes みたいな目をつけたらウケるのでは。

開発:くわばらくわばら。

--
2020-0527 SatoxITS

私はロボットではありませんから

社長:Googleのあれ、可愛いので導入したいですね。

基盤:先人の手引きを頼みましょう… WordPressのプラグインでやる方法を解説してくれている記事がありますね。2019年7月のだから結構新鮮です。

社長:それそれ、その reCAPTCHA てやつ。

基盤:じゃあ先人の手引きどおりにやってみます。まずは Google reCAPTCHA の作成ページを開いて、必要項目を2、3選択して「送信」。「登録されました」。「サイトキー」と「シークレットキー」というのができました。

社長:とりあえずそのキー、PDFにして保存しときますか。で、それを WordPress に入れろと。

基盤:reCaptcha でプラグインを検索すると色々ありますね。この先人のお勧めは Invisible reCaptcha for WordPress。確かに有効インストール数 100,000+、人気上位ですね。ただ、ちょっと更新が2ヶ月止まってるとか。まあ、とりあえずインストールして、さっきのキーを入力して保存と。

社長:それでそれを表示するには?

基盤:どのフォームに適用するか選択するだけですね。とりあえず全部プチプチっと。保存。

社長:で、フォームに行ってみると… おー、出た出た。

基盤:確かに、5分でできるという看板に偽り無しですね。

社長:正確には、3分くらいかな。

基盤:でも、このバッジ、Safariではちゃんと表示されませんね((これはiframeをclient-side CSSで消していたためだった))。Edgeではぷるぷるするし。少なくともインライン表示にしといたほうが良いみたいです。

社長:うーん、v2 にしといたほうが安全かもね。

基盤:では、Google で v2 のキーを作ります。で貼り付けるとこんな感じ。

社長:ああ、これのほうが安心感もあるね。投稿フォーム用なら、手動かつ visible のほうがかえって良い気がする。

基盤:それで WordPress のプラグインのほうも、さっきのはやめて、この Simple Google reCAPTCHA というのにしました。このシンプルさ加減、必要にして十分。最高です。

社長:すばらしい。なんかイマイチ評価が低いみたいだけど、世の中ゴテゴテしたのが好きな人が多いからかな。わたし的にはこの「いざとなったらFTPで(Keep on mind, that in case of emergency, you can disable this plugin via FTP access, just rename the plugin folder.)」という但し書きがいいと思います。

社長:気にいったので、ためしにちょっとだけ寄付してみましょう。

経理:経費ではちょっと難しいかと…

社長:ではポケットマネーで。ポチッと。

--
2020-0527 SatoxITS