ローカルで使っているWebアプリを外部公開してみた

SEなので、仕事ではもちろんですが、プライベートでもプログラミングをしてはアプリ開発しています
ですが、ほぼほぼ「自分が使えればいいやー」くらいの、あらゆる意味でかなりお粗末なアプリです
せっかくVue+GitHub Action+GitHub Pages+Slackを使ってCIを構築したので、適当にローカルで使っているWebアプリを見繕って外部公開してみました

公開したWebアプリ

カレーの具材がガチャれるアプリです
アプリ名は特につけてないので、そのまま「カレー具材ガチャ」にしました
URLもGitHub PagesのURLそのままです

見た目修正や機能追加で、もうちょっといい感じになったら、ちゃんとしたアプリ名をつけて、ドメインを取得してカスタムします

縛り

そのまま公開したら結局自分しか使えないので、以下の制約を設けました

誰かが扱える様にする

誰でも扱える様にするのは、デザインやUI、UXの勉強が必須(だと思う)なので、とりあえずは私以外の誰かが説明無しで使えるレベルにしました
具体的には以下のことをしました

• デザインを当てる
  • 「ガチャで出てくる具材」「具材の個数」「ガチャるボタン」「ガチャ結果」が最低限わかるようにする
  • 色合いやテーマはとりあえずスルー(なので、見た目がカレーっぽい雰囲気がない)
  • デザインそのものは極力CSS(今回はless+bootstrapなどのcssパッケージ)だけで実現する
• 簡単なアイコンをつける
  • ローカルでは文字だけだったので、つまらなく感じやすそう&かなり見辛い
  • fontawesomeを使用したが、パーツ不足なのでsvgでアイコン自作するかパッケージを追加する予定(svgは未対応)

誰でも扱えるよう準備、正確かつ素早く反映できる環境にする

とはいえ外部公開するので、使って頂いたユーザから何らかのご意見をもらえると思います(バグや要望など、より扱いやすくなる種になるもの)
基本的にしたことはCIの構築です

技術的なこと

ここからは縛りにある内容を実現する上で、躓いたところやそれの対応方法、モヤモヤしているところを書き出しています
最終的なソースコードはこちらで公開しています

コンポーネントでimportしているのに、スタイルが反映されない問題

1コンポーネントに1ファイルのlessファイルを用意していますが、インポートしているのにも関わらずlessファイルにかかれているスタイルが反映されませんでした
その時のlessファイルは↓になります

// 反映されない
.class-name {
  color: blue;
}
// 反映されない
#id-name {
  color: red;
}
// これは反映された
div {
  color: green;
}

ディベロッパーツールを開いて、cssのセレクタとクラス名、ID名を確認したら、反映されないcssのセレクタにだけランダムっぽい文字列がサフィックスされていました
イメージとしては↓になります(その時のcssを保存し忘れたので、細かいところが誤っているかもしれません・・・)

.class-name__hogehoge_ {
  color: blue;
}
#id-name__hogehoge_ {
  color: red;
}
div {
  color: green;
}

https://developers.karte.io/docs/understand-css-modules を見ると、:global(.class-name)で書くとcss側のサフィックスが抑制されるので、これを臨時で反映して、スタイルが反映されるようにしました
ですが、毎回これをするのは面倒なので、今のうちに止めたいです(html側でサフィックスされないのが問題?)

:global(.class-name) {
  color: blue;
}
:global(#id-name) {
  color: red;
}

抽選対象の具材アニメーションがカクつく問題

抽選対象の具材とガチャ結果部分にアニメーションを付けていますが、抽選対象の方だけアニメーションがカクつきます
Vue.jsのトランジションにある<transition>をガチャ結果の方に、<transition-group>を抽選対象の方に使っているので、<transition-group>がカクついていることになります
カクつくこと以外は期待通りのアニメーションをしている気がするので、とりあえずは保留にしていますが、もうちょっと滑らかに動かせないのかは模索しています

最後に

vueの公式ガイドが充実していたので、vue起因によるつまづきはほとんどありませんでした
むしろ今までおろそかにしていたcss部分で色々躓いてた気がします