JavaScript Image.onload

Comipoli Web 版を作るとココに随分前から書いているがそろそろ本気で。
使う人がいるかどうかなんてどうだっていいんだよ。
一度だけでもサーバーサイドをやりたい、経験になれば充分！

実は今までの TestPage で着々と準備はしている。
Canvas の動的作成やらスクロールのロックやら矢印キーの取得やらetc…
次は肝心な画像の見開き表示の実装だ。

で、コミックの見開き表示なら Canvas に Image を２つ表示すればいい。
困った、Image の読み込みは非同期だ。
２つの Image.onload コールバックを検知してから描写しないといけない。
つまり Linux, macOS 版みたいな画像切り替え処理は流用できない、なんてことだ。

歳くってジジイな頭でなんとか考えた。
ひたすらインクリメントして偶数だった場合に更新処理すればよくね？

HTML5 Canvas TestPage – L’Isola di Niente

一応抜き出しすると以下のように。

var Html5CanvaTest = class {
    readComic(files) {
        // var
        this.num = -1;
        this.en = 0; //Even number
        //
        // etc...
        //
        // image
        this.firstPage = new Image();
        this.firstPage.onload = ()=> {
            this.newPage();
        }
        this.secondPage = new Image();
        this.secondPage.onload = ()=> {
            this.newPage();
        }
        this.firstPage.src = this.comics[0];
    }
    newPage() {
        if (this.num == -1) {
            this.num = 0;
            this.drawPage();
            return;
        }
        this.en += 1;
        if ((this.en % 2) == 0) {
            this.drawPage();
        }
    }
    nextPage(num) {
        if (this.comics.length > 0 && this.comics.length > this.num + 1) {
            this.firstPage.src = this.comics[this.num + 1];
            if (this.comics.length > this.num + 2) {
                this.secondPage.src = this.comics[this.num + 2];
                this.num += 2;
            } else {
                this.en += 1;
                this.num += 1;
            }
        }
    }
    drawPage() {
        this.context.fillRect(0, 0, this.canvas.width, this.canvas.height);
        // etc...

解り辛ぇ…

onload コールバック毎に this.en をインクリメント。
その this.en が偶数だった場合に canvas に描写、というのが現在の処理。
とりあえず目的は果たしたけど、なんだかなぁ。

うーん、もっとイイ方法は無いのだろうか？

関係ないけど JavaScript で検索するとマジでみんな mac だなぁ。
エロゲ専用 OS はともかく Linux 使いは何をやっているのやら。

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 という事実。
そろそろ「ウインドウズ信者」という言葉が作られてもいいレベル。
現実世界とネット上での差が年々大きくなっている。