JavaScript Event

DOM Keyboardイベントで押されたキーを判別するにはkeyプロパティを使う

JavaScript はたった数年で浦島太郎だ!
見つけてビックリ。
いやコンピューター関連は全部そうなんだけど。

JXA をやっている時に Objective-c 関連のサイトを探しまくった時。
日本の個人サイトは全部情報が古いまま放置ばかりででチト頭にきたことがある。
Linux 関連ではもう使えないコマンドを書いたブログの放置多すぎ!
古い情報なんか何も役に立たない。

そうはなりたくはないので色々と書き換えすることに。
Fedora Tips 以下も古いよな、次はココかな。

canvas size

Smart Phone Game ページを追加。
というか「ひよこを倒す」の糞みたいなコードを ES6 で書き換えた。
iPhone と Google Chrome の開発者モードでしか確認していない、多分大丈夫。

んでドハマリしたこと。
canvas のサイズは style で指定してはいけない。
こんなページをみつけてやっと解決した。

HTML canvas 基礎0 – socialakiba wiki

var ES6Game = class {
    constructor() {
        // etc...
    doBlockBreaking() {
        this.canvas = document.createElement("canvas");
        // Do not use.
        //this.canvas.style.width = `${document.documentElement.clientWidth}px`;
        //this.canvas.style.height = `${window.innerHeight}px`;
        // OK!
        this.canvas.width = document.documentElement.clientWidth;
        this.canvas.height = window.innerHeight;

と。

style 指定だと moveTo 等がワケワカな位置になってしまう。
それ以外は何も難しいことはなかった。

とにかく古臭いコードの一掃だ!

SyntaxHighlighter template literal

よく考えたら SyntaxHighlighter は JavaScript だった。
ES6 のテンプレートリテラルが色分けされないことが気になっていたんだよね。
よし、自分でカスタムしよう!

//{ regex: /\$\{\w+\}/g, css: 'keyword'},
{ regex: /\`[^\`]*\`/gm, css: 'string'}

を shBrushJScript.js の this.regexList に追加するだけだった。
コメントアウトしたほうで $ 変数が強調されるはずなんだけど…
色分け内部の色分けはできないみたい、残念。

変わらない人は Ctrl+F5 を押してね。

これだけで更新ってのも考え物だし、えっと。
そういえば前回ウインドウズ信者がとか書いたけど
10 が出てもう何年かたっているんだよな、ぶっちゃけ触ったことすら無い。
もう本サイトの情報も絶対に古いよな、いいかげんに消すことにした。

そうすると OS カテゴリが macOS だけになってスカスカなので移動して。
ついでだから comipoli jxa 版も置いてしまえで。
スゲェ時期外れなリニューアルになってしまった。

JXA: Shell

macOS の Finder で選択したファイルをアーカイブする作業。
zip ならコンテキストメニューで可能だけど筆者は tar.gz でないと困る。
アーカイブ名もディレクトリ名にしたい、Fedora でやっている事と同様に。

上記を一発で作る作業を自動化したい、つまり automation で。
同じ事をしたい人は少ないだろうけど JXA でシェルを使う参考に。

JXA で Finder を拡張でシェルを使おうとした場合。
そういえば起動時のカレントディレクトリはどうなるんだ?

let app = Application.currentApplication();
app.includeStandardAdditions = true;
app.doShellScript("echo $PWD > ~/jxa_pwd.txt");
//=> /

やはりルート。

つまりシェルを使う前にカレントディレクトリを移動しないといけない。
ならばこういう手で、tar.gz をディレクトリ名で自動作成する例。

#!/usr/bin/osascript

// get pwd
let finders = Application("Finder").finderWindows();
let uri = finders[0].target().url();
let pwd = decodeURI(uri).slice(7, uri.length-1);

// get dirname
let dir = pwd.slice(pwd.lastIndexOf("/")+1);

// create command
let sh = `tar -zcvf ${dir}.tar.gz`;
let selections = Application("Finder").selection();
selections.forEach((item)=> {
    sh += ` ${item.name()}`;
});

// create tar.gz
let app = Application.currentApplication();
app.includeStandardAdditions = true;
app.doShellScript(`cd ${pwd}
${sh}`);

できたお!

それにしても、JXA 関連を検索しまくって感じたこと。
DTP 屋やデザイナーなので mac を使っている人達、と筆者では JXA の捉え方に差がある。
彼等は純粋にアプリでの定型作業を自動化する目的で利用しようとしている。
筆者は Fedora でやっていることを mac で再現しようとしてシェルを使っている。

経験値の差で筆者の書いた事のほうが検索順位が上の場合があることは申し訳ない気分に。
純粋にアプリを使っている人のお役立ちより前に言語ヲタのコードが出てきたらイヤだろ。
コレを最低最悪な型でやらかしたのが Ruby だということは絶対に秘密だよ!

つまりガチで mac が必要な人から見ると筆者は完全に異端。
いや当然だよ、筆者は macOS を「ちょっぴり不便な UNIX」としてしか見ていないから。
パーミッションの変更や FTP が GUI でできないとか色々ね。

しかし Windows を仕事以外で使っている人ってマジでどこにいるのだ?
筆者の周辺には本当にいないし名駅ビックカメラに入っても外国人ばかり。
Apple のコーナーなら日本人はいるし試し打ちをする人も結構見るんだが。
JavaScript 関連で検索すると 9 割が mac という事実。
そろそろ「ウインドウズ信者」という言葉が作られてもいいレベル。
現実世界とネット上での差が年々大きくなっている。

JavaScript(ES6) Layer

ES6 Web TestPage にレイヤーを追加。
それにしても web 用 javascript は日本語情報ありすぎで笑える!
gjs や jxa だと英語でしかまともなページが無いのに。

問題はまたしても mobile Safari だ。
iOSのSafariで画面のサイズを取得する | chocolateorange.github.io

document.documentElement.clientHeight は
スクロールでアドレスバーやツールバーが出るのを引いた値に固定のようだ。
どちらも出ていない時だと隙間ができる、うーん。

var ES6Test = class {
    newLayer(text) {
        let element = document.createElement("div");
        element.appendChild(document.createTextNode(text));
        // style
        element.style.backgroundColor = "#000";
        element.style.position = "absolute";
        element.style.display = "block";
        element.style.opacity = "0.7";
        element.style.zIndex = "100";
        element.style.margin = "auto";
        element.style.top = `${window.pageYOffset}px`;
        element.style.width = `${document.documentElement.clientWidth}px`;
        //element.style.height = `${document.documentElement.clientHeight}px`;
        element.style.height = `${window.innerHeight}px`;
        // tap or click
        element.addEventListener("click", ()=> {
            element.parentNode.removeChild(element);
        });
        // add
        document.body.appendChild(element);
    }
}

とりあえず。

ところで Safari は普通に更新するだけで外部リンクの js を更新するみたい。
Ctrl+F5 すればいいだけだがチョロメや狐もそうなってほしいよ。

ついでに、前回のインデントはタブとスペースが混じっていたのでモードラインを付けた。
Python だと実行時に怒られるのですぐ気が付くのにね。