開発日誌

開発した時に躓いたこととかの記録

VPSのSFTP接続設定をして、CalckeyをWindowsでPWAした時のアプリアイコンを変更したかった

tech Calckey vps ubuntu

【追記】

packagesの中を自分で置き換えるのは推奨されないようで、customディレクトリ内にファイルを置いてpnpm run gulpするのが推奨のやり方のようです。

が、Calckeyの最新のstableバージョンである13.1.4.1 ではassets配下のディレクトリの中身のコピーに対応しておらず、したがってhttps://yourinstance.tld/static-assets/icons/filename.extと1階層深堀したところにあるiconsファイルは置換ができません。

developでは当該箇所は修正されているので、新しいバージョンはstableになったらまた挑戦してみようかなと思います。

【追記ｺｺﾏﾃﾞ】

TLにて『AndroidでMisskeyのアイコンがfaviconにならないの……』という話を見てわたしも～～と思って参戦してみた。

※ iOSではfaviconがアイコンになりますが、Android/WindowsのPWAでは仕様が違うようです。

やること

  • 公式にやり方が書いてある
  • manifest.jsonに書いてあるファイルを置き換えに行けばOK。
  • manifest.jsonを確認すると/static-assets/icons/192.pngと/static-assets/icons/512.pngと置き換えればよさそう
  • 私のサーバーはSSH接続しかできないので、SFTP接続できるようにして、ファイルを配置できるようにしていく

SFTP接続をできるようにする

前提

手順

メモ

  • 最初FFFTPで試行錯誤してたのだが、FFFTPだとSSH鍵認証できないのでダメっぽい

サーバー内のファイルを置き換えて反映！

  • ……できればよかったのですが、calckey 13.1.4.1では現状推奨される手段では置換ができません。developではそれなりに前に修正されているので、次のバージョンでは反映されると思います。
  • その時にきっと動くようになる手順を打消しつつおいておきます。

手順

  • /home/[calckey実行ユーザー名前]/calckey/custom/iconsに192.pngと512.pngを配置する
  • calckeyディレクトリでpnpm run gulpを叩く
  • キャッシュクリア or https://[鯖のドメイン]/static-assets/icons/192.pngとhttps://[鯖のドメイン]/static-assets/icons/512.pngにアクセスして何度か更新して画像を反映！！
  • Windowsの場合、右の『･･･』からアプリを選択してインストール！

  • 🎉！！！

  • 下の画像の右上、インストールされているアプリの文言の左が元々Calckeyロゴにしかならなかった感じ。

おわり

  • SFTP接続できるようにするのってどうやるの？？で3時間くらい使った気がする
    • インフラエンジニア偉大すぎる
  • 画面のことだからclientディレクトリだろうと思ったら違ったのでぴえんってなった
    • でも確かに『バックエンドに置くもの（クライアント側の持ち物ではない）』と言われたらそうかも。
  • サーバー再起動、VPSかりてから初だったのでちょっとドキドキした
    • サーバー再起動したらKAGOYAのサイトが落ちててちょっと焦った。すぐなおったようで良かった。
  • 実はWindowsでPWAできるのをこの時はじめて知った。スマホだけだと思ってた。