仕事 / 備忘録

HTML、CSSでアプリ開発

個人的にある機能をもったアプリを探していたのだけど、なんか色々と高性能の機能で有料になってしまっていたり、機能多すぎてそこまで必要じゃないんだよなーと思って手を出さなかったりと中々アプリが見つからないので、自分の得意分野であるWeb制作の知識を生かして、アプリ作ってみようと思ったのが始まり。

そんな中、Tauriというフレームワークを使うことでHTMLで作成したものをEXE化にすることでデスクトップにインストールできるんだとか。

そうそう、自分だけ使えればいいという内容だけど、それならメモ帳でよくない？っていうのもなんか寂しい。

そう思ってTauri使ってみるけど、さすがにデバッグとビルドでは大きな違いがでてきた。

 

セキュリティ問題で外とつながらない

Web制作感覚で作るため、cssやjsをCDNで読み込むようにしていたのだが、リリース用にビルドしてみるとセキュリティ的にブロックされて読み込まれていなかった。

その為フロントは崩れているし、jsが動かないのでボタンを押しても動作しない。

AIに聞きつつネットでも調べ、何とか動くようになったのでその記録を残します。

あくまで個人的に使うということから始めたアプリなのでそこはご了承くださいｗ

 

ビルト時のセキュリティ解除
src-tauri/tauri.conf.json の security 項目を以下のように null にする

//tauri.conf.json のセキュリティを完全に無効化
"security": {
"csp": null
}

JSファイルをネット読み込みからローカル読み込みに変更

srcディレクトリでローカルにJSファイルを作成する
curl -L https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4 -o tailwind-offline.js
curl -L https://unpkg.com/lucide@latest/dist/umd/lucide.js -o lucide-offline.js

headタグで作成したJSファイルパスをローカルパスにする

<script src="./tailwind-offline.js"></script>
<script src="./lucide-offline.js"></script>

これでビルドを実行してできたEXEファイルを実行してみるとフロントがしっかりと出来ていました。

アプリが起動したときにサーバーに接続してバージョンアップ情報があってバージョンアップするかどうがなどの機能ってそういうふうに作成するんだという仕組みを知れて勉強になった。

まあそうなったらポップアップなどで促したりなどさらなる機能構築しなきゃならんのでそれはいずれ配布できるくらいの計画をしたときにでもやろうかな。