DOM Keyboardイベントで押されたキーを判別するにはkeyプロパティを使う
JavaScript はたった数年で浦島太郎だ！
見つけてビックリ。
いやコンピューター関連は全部そうなんだけど。
JXA をやっている時に Objective-c 関連のサイトを探しまくった時。
日本の個人サイトは全部情報が古いまま放置ばかりででチト頭にきたことがある。
Linux 関連ではもう使えないコマンドを書いたブログの放置多すぎ！
古い情報なんか何も役に立たない。
そうはなりたくはないので色々と書き換えすることに。
Fedora Tips 以下も古いよな、次はココかな。
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 は JavaScript だった。
ES6 のテンプレートリテラルが色分けされないことが気になっていたんだよね。
よし、自分でカスタムしよう！
//{ regex: /\$\{\w+\}/g, css: 'keyword'},
{ regex: /\`[^\`]*\`/gm, css: 'string'}
を shBrushJScript.js の this.regexList に追加するだけだった。
コメントアウトしたほうで $ 変数が強調されるはずなんだけど…
色分け内部の色分けはできないみたい、残念。
変わらない人は Ctrl+F5 を押してね。
これだけで更新ってのも考え物だし、えっと。
そういえば前回ウインドウズ信者がとか書いたけど
10 が出てもう何年かたっているんだよな、ぶっちゃけ触ったことすら無い。
もう本サイトの情報も絶対に古いよな、いいかげんに消すことにした。
そうすると OS カテゴリが macOS だけになってスカスカなので移動して。
ついでだから comipoli jxa 版も置いてしまえで。
スゲェ時期外れなリニューアルになってしまった。
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 だと実行時に怒られるのですぐ気が付くのにね。
Comipoli Web 版の制作が全然進まない。
このままでは更新が滞ってしまい筆者のファン（？）に申し訳ない。
そんなこんなで JavaScript Test Page の ES6 化でも。
まだ途中だけど。
ES6 Web TestPage – L’Isola di Niente
前とは変えて全部一つのクラスにまとめる。
var は class の参照のみに使う、Gjs と同じように。
なるべく無名関数を使う、setInterval しか用が無いような？
id は引数で処理して可搬性を上げる。
こんな感じになった。
Python 等でアプリを作った経験があるならほぼ同じように書けると解る。
とにかく this にくっつけとけばクロージャなんていらないんだよ。
ES6 様々です。
それと let のスコープなんだけど。
同じ HTML(PHP) ファイル内ならタグブロックが違っても参照できるのね。
そのために var は全部グローバル変数になるのかなんて思っていたよ。
しかし ES6 ってこんなに楽なのに普及しないなぁ、IE のせいかな。
一番普及している Shift-JIS を使え！とか糞みたいな企業公式ブログもあるし。
日本企業が中国に抜かれっぱなしな理由が解るわ、古いものから変えようとしないんだもん。
新しいものを全力否定するのはネラーだけにしようよ。