シリーズ最後の記事です！
5月（1話目）に作った、PHPの権限変更ファイルについて、6月（2話目）にデザインをしたので、今月は、そのデザインの実装とPHPファイルの改良をします。
また今回は、デザイン実装のみでなく、最近よく耳にするHTMXを使ってみたいので、今回の記事で実際に使ってみようと思います！
▼1話目
▼2話目
1話目、2話目よかったらご覧ください。
HTMXを使ってみたい・・・
先日デザインしたカンプを使って実際に実装していきたいと思います！
そして今回は、HTMXも使ってみようと思っています。
前々から気になってはいたものの、なかなか手を出せなかったので、これを機にHTMXを初めて使ってみようと思いました。
今回の実装手順を考える（HTMXを使う＆デザイン実装）
- まず、HTMXの調査
- HTMXとは一体何なのか？？を調査する
- どの部分で使うか？どのように使うか？を調査＆手順を考える
- 実際に実装してみる
- 処理の速度の違いを検証
- CSSでカンプ通りに反映する
- 今回は、構造的に変更する部分は特にないので、構造的なレイアウトは気にしなくていい。
- インフォメーションのツールチップの実装
- トグルの実装
- CSSで装飾する
まず、HTMXの調査
HTMXとは一体何なのか？？を調査する
この記事が詳しく書かれていたので、読んでみます。
私にはまだ理解が難しい・・・！ですが、とりあえず分かるとこだけかいつまんで理解に努めます。上記の記事中から重要そうなところを抜き出してみます。
HTMXは、JavaScript を記述せずに、Ajax通信や高度なUXを実現できるライブラリ。
軽量 で 高速 で、既存のサーバーサイドのフレームワークとシームレスなやり取りができる。
ほうほう。軽量で高速になる・・・。
バックエンド技術に何を選んでもよい。
PythonでもRubyでもPHPでも、なんでも好きなバックエンド技術を採用できます。
とあり、PHPとも使えそう？？ということなので、
とりあえず使いながら理解してみよう！と思います。
HTMXを調べていて、以下のことが気になりました。
- HTMXを使うとサーバーに優しいの？
- 何か更新した際に、不要なものはリロードされないようにもできるみたいです。ということは「更新」を押した際にスムーズに表示されるの？
という部分で気になったので、
- 開発ツールの「ネットワーク」を使って、今回実装してみて、HTMXにする前と後で、読み込みの早さを比較検証してみようかなと思います。
どの部分で使うか？
HTMXの解説記事を読んでいると、ボタンでなにか処理をして画面上で見え方が変わる際に、変更される箇所だけが変わるのだと書かれていることが多いです。
なので、今回の場合、権限変更ファイルの「変更」を押したら「現在の権限」列に出力されるパーミッションの数字表示をHTMXを使って更新し、それ以外は更新しないようにするということをやってみようと思います。
実際にファイルの権限を変える役割はPHPが処理します。
どうやって使うか？
この記事を参考にして、インストールします。
AIに助けて貰いながら実装しました。
インストールはとても簡単でした。head部分に該当のスクリプトを読み込めば使えました（ですが本番環境には推奨されていないようです）。
PHPファイルの中身の詳細は載せませんが、HTMXを使用したコードはこんな感じで使いました。
bodyの中のHTMXを使用した部分を一部抜粋します。
<?php foreach ($items as $item): ?>
<?php
if ($item === '.' || $item === '..') continue;
$path = $baseDir . '/' . $item;
$perm = getPermissions($path);
$ownerGroup = getOwnerAndGroup($path);
?>
<tr id="row-<?= htmlspecialchars($item) ?>">
<td><?= htmlspecialchars($item) ?></td>
<td><?= is_dir($path) ? 'ディレクトリ' : 'ファイル' ?></td>
<td><?= htmlspecialchars($ownerGroup['owner']) ?></td>
<td><?= htmlspecialchars($ownerGroup['group']) ?></td>
<td><?= $perm ?></td>
<td>
<form
method="POST"
hx-post=""
hx-target="closest tr"
hx-swap="outerHTML">
<input type="hidden" name="filename" value="<?= htmlspecialchars($item) ?>">
<input type="text" name="permission" value="<?= $perm ?>" size="4">
<button type="submit">変更</button>
</form>
</td>
</tr>
<?php endforeach; ?>
ここでのHTMXでは、formタグが大事らしく、
PHPもHTMXもまだまだ理解が乏しいので、今後の目標として、指示内容と実行内容をきちんと理解するのを課題にします。
実際に実装してみる
紆余曲折ありつつ、なんとかできました
HTMXを導入して、見た目で変えたところ
- 権限の変更をした際に、オリジナル版だと「変更成功: hoge.php → 777」とテーブルの上に出るのが、「変更」の列のセルに表示されるようになりました。
- AIに記述して貰いましたが、こういう書き方をするのはおそらく、HTMXの特徴を利用しているのかなと推測しました。変更ボタンがある箇所にHTMXのメッセージを出力することで処理が早くなるために変更ボタンと同じセル内にメッセージを出力しているのでは？と推測。
処理の速度の違いを検証してみます。
▼オリジナルのときの処理です。
上記では、毎回、permission.phpを読み込んでいます。
▼HTMXのときの処理です。
上記では、HTMXで変更部分だけ処理されているようです。
必要なところだけHTMX.jsで処理されていると見受けられます。
HTMXを使ってみて理解したこと
- やっぱり処理が早くなる。今回は1/3〜1/2ほどの処理になった。
- 読み込みがされないから、権限の変更を実施した際に、いちいちページの先頭に飛ばされなくて便利！変更された箇所にページが固定されていて視覚的に安心。
CSSでカンプ通りに反映する
では、HTMXがなんとかなったので、先月デザインしたカンプをもとに見た目を変えていきます。
結果をいうと、モーダルをフローに入れると今の技術力では再現が難しかったので断念しました・・・。
インフォメーションのツールチップの実装
上記を参考にしました。
トグルの実装
とても簡単に実装できました。
tableの上に以下を配置。
<label class="switch">
<input type="checkbox" id="toggleSwitch">
<span class="slider"></span>
</label>
以下をbodyの閉じタグ前に配置。
<script>
document.getElementById('toggleSwitch').addEventListener('change', function () {
document.body.classList.toggle('dark', this.checked);
});
</script>
これで、チェックボックスにチェックが入ったら、darkというclass名を付与して、トグルのON/OFFで見た目を変えることができます。あとはチェックボックスの状態のものを、CSSでトグルの見た目にします。
残りをCSSで装飾する
できました
カンプから変更したところは以下です。
- Adobe Fontsに「ヒラギノ角ゴシック」のW5がなく、W3で実装。その代わり、フォント色を濃くしてバランスを取った。
- コントラストチェックをしてみて、ダークモードの背景色が適切なコントラストでなかったので、背景色を変更した。
- 文字サイズも調整した。
- 全体的に諸々調整。
今後の課題＆反省
HTMXを使っている状態でもモーダルを出せるようにしたいです・・・。
モーダルを入れる必要があったのをすっかり忘れていて、HTMXに夢中になってしまっておりました。HTMX使えるようになった！やった〜と思っていて、そのあとモーダルの存在を思い出しました。
ここから学んだのは、やっぱり「実装前に計画はめちゃくちゃ大事」ということです
。
でも、なんだかんだ、やりたいことができたので達成感
勉強になりました。