初めてまともなWEBアプリを作ってみたので知見を走り書き
この記事はアドカレに参加しています。
反省会
初めてまともなWEBアプリを作ってみたので反省会をします。反省会は独りでやります。ぼっちって言うな
作ったWEBアプリのコードなどはこちらから見られます。
1. contenteditable
一番の壁はcontenteditable
でした。やばすぎてこれだけで一本の記事になるレベルです。
はい、次。
2. CSS変数
CSSで変数を使えるというのがCSS変数です。これは革命です。
:root {
/*変数を宣言*/
--text-color: #000000;
--border-size: 3px;
}
div {
/*var()で変数の値を参照*/
color: var(--text-color);
padding: var(--border-size);
}
p {
color: var(--text-color);
padding: 10px;
}
はい。すごいです。
更にさらに、JavaScript側からCSS変数を取得、設定することもできます。
//取得
let col = getComputedStyle(document.documentElement).getPropertyValue("--text-color")
//設定
document.documentElement.style.setProperty("--text-color", "#ff0000")
便利すぎる。
参考
3. LaTeXから画像ファイル
LaTeXコードから画像ファイルを生成するにはいろいろな方法があるみたいです。canvas
のtoDataURL
メソッドが一番楽そうだったので、それを用いて実装しました。
4. コマンド処理
コマンドを入力することで特定の挙動を起こしたかったので、コナミコマンドを参考にコマンド処理クラスを作りました。
//(いろいろ省略してます)
class shortcut_M {
array = {}//コマンドがどこまで入力されたかのフラグ
//arrayをリセットする
reset() {}
//タイマーを止める
uncheck() {
if (this.timer_id !== undefined) {
clearTimeout(this.timer_id)
this.timer_id = undefined
}
}
//タイマー起動
check() {
this.uncheck()
this.timer_id = setTimeout(() => { this.reset() }, 3000)
}
constructor() { this.reset() }
put(key) {
if () {
//コマンド入力で何らかの処理
this.reset()
this.uncheck()
return true
}
else {
this.reset()
this.uncheck()
}
return false
}
}
keydown
イベントでどのキーが押されたかを確認していきます。コマンド以外のキーが押されたり、キーが3000ms以上押されなかった場合にはreset
メソッドが呼ばれます。
let s = new shortcut_M()
ele.addEventListener("keydown", (event) => {
s.put(event.key)
}
参考
5. 画面分割
画面分割しながらも、ユーザーがそれぞれの要素のサイズを動的に変えられるようなもの実装したいと考えました。スプリットウィンドウと呼ばれたりしているようです。
つまみ用のelement
を用意しておいて、そのつまみがドラッグされたら画面分割の比率も変更されるようにしました。
Math.min(Math.max(num, min), max)
にして比率num
が画面外(min~max)に行かないよう工夫しました。
参考
6. 一部文字のエスケープ
innerText
から文字列処理をしてDOM構造を構築し、innerHTML
に直接挿入するような処理を書いたのですが、予約済み文字をエスケープしていなかったので躓きました。
4つの予約済み文字をしっかりエスケープしてから、文字列処理をしてinnerHTML
する必要があります。
ele.innerHTML = ele.innerText
//予約済み文字をエスケープ
.replace(/&/gu, "&").replace(/</gu, "<")
.replace(/>/gu, ">").replace(/"/gu, """)
//文字列処理
.replace(/(#[0-9a-fA-F]{6})/gu, "<span class=\"color\" style=\"background: $1;\"></span>$1")
.replace(/(%[^<]*)/gu, "<span class=\"comment\">$1</span>")
参考
7. 正規表現
初めて正規表現を使用しましたが、分かると意外と楽しかったです。簡単な文字列処理であれば正規表現で記述したほうが楽ですし、コードの可読性にも優れています。ただ、正規表現に慣れるまでが大変でした。正規表現の記法は暗黙のルールが多いように感じます。
参考
むすび
独り反省会の議事録でした。
(後から見返すと反省会というよりほぼ備忘録ですね笑)