カテゴリー別アーカイブ: Programming

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 だと実行時に怒られるのですぐ気が付くのにね。

ES6 Web TestPage

Comipoli Web 版の制作が全然進まない。
このままでは更新が滞ってしまい筆者のファン(?)に申し訳ない。
そんなこんなで JavaScript Test Page の ES6 化でも。
まだ途中だけど。

ES6 Web TestPage – L’Isola di Niente

前とは変えて全部一つのクラスにまとめる。
var は class の参照のみに使う、Gjs と同じように。
なるべく無名関数を使う、setInterval しか用が無いような?
id は引数で処理して可搬性を上げる。

JabaScriptCode

こんな感じになった。
Python 等でアプリを作った経験があるならほぼ同じように書けると解る。
とにかく this にくっつけとけばクロージャなんていらないんだよ。
ES6 様々です。

それと let のスコープなんだけど。
同じ HTML(PHP) ファイル内ならタグブロックが違っても参照できるのね。
そのために var は全部グローバル変数になるのかなんて思っていたよ。

しかし ES6 ってこんなに楽なのに普及しないなぁ、IE のせいかな。
一番普及している Shift-JIS を使え!とか糞みたいな企業公式ブログもあるし。
日本企業が中国に抜かれっぱなしな理由が解るわ、古いものから変えようとしないんだもん。
新しいものを全力否定するのはネラーだけにしようよ。

Gjs on Visual Studio Code

Fedora 28 でプログラミング。

っても GTK+ の大幅な変更は二年毎になったので 29 までメンテのみ。
半年毎にゴロッと変わる GTK3 初期の頃は今考えると結構楽しかった。

OpenJDK は 1.8 のまま、1.9 から jjs が es6 完全対応なんだが。
Gjs はプロファイラがどうたららしいけど、正直どうでもいい。
Python3 も 3.6 のまま、つーことで何も変化無し。
変わらなすぎて面白くないのは筆者だけなのだろうか。

特に書くこともないので終わり、では悲しいので。
Visual Studio Code で gjs アプリ(comipoli)の F5 実行でも。
長いので以下 vscode と略。

書くまでもなく”ウザい!邪魔!迷惑!”のコード保管は全部無効に。
Visual Studio Code 2018 | PaePoi
現在は更に以下を追加。

// 拡張機能の推奨なんて超迷惑
"extensions.ignoreRecommendations": true,
"extensions.showRecommendationsOnlyOnDemand": true

vscode を起動しウエルカムページから開発したいアプリのディレクトリを開く。
キーボードショートカットの設定を開く。
F5 で検索して Node.js の debug 実行のキーを Delete キーで殺す。
Node.js もやりたい人はデフォルトのキーにしてね、筆者はやらん。

.vscode/tasks.json は以下のように。

{
    // See https://go.microsoft.com/fwlink/?LinkId=733558
    // for the documentation about the tasks.json format
    "version": "2.0.0",
    "tasks": [
        {
            "label": "Start Comipoli",
            "type": "shell",
            "command": "gjs",
            "args": [
                "./comipoli"
            ],
            "group": {
                "kind": "build",
                "isDefault": true
            },
            "presentation": {
                "focus": true,
                "reveal": "always",
                "panel": "new"
            }
        }
    ]
}


こうしておけば部品ファイルを開いている状態でも実行できて便利。
下に出るコンソールから Ctrl+C で強制終了もできる。
終了したら何かキーを叩けばコンソールは終了してくれる。

後はスニペットをガシガシ登録。
Ctrl+Space を先に打ち込む必要があるのがメンドイぞ!

{
	 "_connect": {
		"prefix": "con",
		"body": [
			"${1:Widget}.connect(\"${2:SignalName}\", ($3)=> {",
            "    $0",
            "});"
		],
		"description": "connect"
	},
	"_imports": {
		"prefix": "imp",
		"body": [
			"const ${1:GLib} = imports.gi.${1};$0"
		],
		"description": "imports"
	}
}

って。
おいおい Gedit より便利じゃなったじゃないか!
シェルスクリプトだけで拡張できる Gedit よりはるかに面倒だが。

でも vscode って思いっきり拡張子依存なのよね。
拡張子が無いファイルを扱うことが多い Linux ではチト困る。
それを補う Gedit のモードラインが再現できればなぁって感じ。