【はじめての番外編】SPAとAlpine.jsとfigmaとBulmaとsvgとロゴと利用規約と私。
おはこんばんちはaomaです。
記念日を通知する『KINENBI』というサービスを作ってます！
— aoma23 (@aoma23) 2021年1月22日
当日だけでなく○ヶ月記念日や777日記念日といったキリ番にも対応しています！
現在事前登録受付中です！よろしくお願いします！#KINENBI#拡散希望 https://t.co/0deleLPFQA
この物語はそんなaomaがはじめてのFirebaseに挑む壮大なアクションアドベンチャーである！ 番外編！
番外編の内容
本編
figmaのprototypeの+ボタンなんで表示されないんだろーと思ったらやっと原因がわかった。
— aoma23 (@aoma23) 2021年1月22日
画面コンポーネントの中に含まれてなくて単独で存在してたからでした。
部品の一部として左のメニューからドラッグ＆ドロップで入れてあげたら無事出てきましたー。 pic.twitter.com/3G6A7fAlYy
PWAにしたい。bento-starter使ってみようかな。
— aoma23 (@aoma23) 2021年1月25日
cssフレームワークも使いたいし悩む。 https://t.co/XmbscM4CrL
使ってみちゃうぞ！
— aoma23 (@aoma23) 2021年1月25日
Bulma: Free, open source, and modern CSS framework based on Flexbox https://t.co/dmwBQlLrxf #bulmaio @jgthmsより
やっぱりbootstrapにしようかなw
— aoma23 (@aoma23) 2021年1月25日
アイコンはgoogle material icons！
— aoma23 (@aoma23) 2021年1月25日
figmaで画像書き出すときは画像右クリックしてコピー＆ペーストしてsvgでコピーがオススメ！
— aoma23 (@aoma23) 2021年1月25日
と師匠から聞いた。
（画像はsvgを取り込む必要ある。pngとかjpgだと画像を読み込むsvgが出力されるので意味ない）
alpine.jsでspaするときにブラウザバックどうしよう。URLどうしようってなって読んでる。
— aoma23 (@aoma23) 2021年1月25日
Alpine.jsのx-dataとURLをlocation / HistoryAPIと$ watchと同期しますhttps://t.co/bOMN2LwRTn
これでいけるかと思ったけどsetPage内のhttps://t.co/WLap71Pv7aがhttps://t.co/WLap71Pv7aではないらしく、ページ切り替わってくれない。。。 pic.twitter.com/oijl6DiEob
— aoma23 (@aoma23) 2021年1月25日
window.hash = '#' + value;
— aoma23 (@aoma23) 2021年1月25日
では
window.addEventListener('hashchange', this.setPage, false);
は発火しない！！さっき発火したと思ってたけど勘違いだった＞＜
window.location = '#' + value;
なら発火する！マジかよ！
いや間違えた！
— aoma23 (@aoma23) 2021年1月25日
window.hash なんてないわw
そりゃ発火しないぜ！！！！！！！
location.hash = value;
だった！発火した！疲れてる！！
addEventListenerに引数を渡したい！！
— aoma23 (@aoma23) 2021年1月25日
ということで読んでる。https://t.co/RSc1m75LmY
きた！！
— aoma23 (@aoma23) 2021年1月25日
引数渡すようにしたけどこれではダメで。
新しいthisになるので、関係ないとこ書き換えてる的な話なのかな？よくわかってないけど。。。。
つづく→ pic.twitter.com/GP4oqyP0E9
一度thisをselfに入れてそれを渡すようにしてhttps://t.co/xfWbAxLUOAを変更したらwatchも効いて画面遷移もいけたー！！最高！！天才！！ pic.twitter.com/BpafTgd1r0
— aoma23 (@aoma23) 2021年1月25日
<button>って初期値type=submitだったんや。。
— aoma23 (@aoma23) 2021年1月26日
知らんかった。。。
svg画像をsubmitにしたいときはlabelタグで囲むといける！と。なるほどねー。
— aoma23 (@aoma23) 2021年1月26日
<label>
<input type="submit" style="display: none;">
<svg 〜〜〜 />
</svg>
</label>https://t.co/GoLAWVS0WI
— aoma23 (@aoma23) 2021年1月27日
— aoma23 (@aoma23) 2021年1月27日
webpackはオンリーワン
— aoma23 (@aoma23) 2021年1月27日
ほにゃららローダーがいっぱいある
— aoma23 (@aoma23) 2021年1月27日
bulmaでHTMLをいい感じに表示したいときは<div class="content">で囲め！！！
— aoma23 (@aoma23) 2021年1月27日
利用規約とプライバシーポリシーの雛形。ありがたい。https://t.co/8KIX88sccu
— aoma23 (@aoma23) 2021年1月27日
個人開発では当社のところを運営者にするとよさそう。
— aoma23 (@aoma23) 2021年1月27日
いやー、テンプレよりも今いけてるサービスから作ったほうがわかりいい気がする。
— aoma23 (@aoma23) 2021年1月27日
しっかりやると時間かかるよね。やっぱり。。
— aoma23 (@aoma23) 2021年1月27日
そしてエンジニア的にまったく楽しくない作業です。
— aoma23 (@aoma23) 2021年1月27日
とりあえず形ができたからよしとするか。
— aoma23 (@aoma23) 2021年1月27日
alpine.js、x-showだとfalseでも一瞬表示されてしまう問題あるな。。一瞬だけど。。
— aoma23 (@aoma23) 2021年1月27日
細かいことばかりこだわりすぎて進捗悪いこと多い。。
— aoma23 (@aoma23) 2021年1月27日
しかしこのこだわりこそが職人魂！！！！！
vecteezyってすごい！svgでサンプルからさくっと作れるぞ！
— aoma23 (@aoma23) 2021年1月29日
これロゴ作成にいいのでは！https://t.co/WI3mI4Wiwl
ロゴ良い感じのできた！これでいいや。
— aoma23 (@aoma23) 2021年1月29日
あとフォントどうしようどうすればいいんだ問題ありますよね。
svg画像よくわかってなくて、strokeで良い感じになるように画像作ってたら、サイズ縮小でつぶれてしまった。。。
— aoma23 (@aoma23) 2021年2月1日
ということで勉強中。https://t.co/N7fxWNfUfM
リンク認証でログインできなくなった原因わかった気がする。x-ifでエレメント消してるからログインUIが表示されてなくて動かない的なやつと見た。
— aoma23 (@aoma23) 2021年2月2日
原因わかりました。ui.startの前に問答無用でui.reset();してたからでした。画面切り替えのたびにconsoleエラー履いてたので入れてたのが原因でした。
— aoma23 (@aoma23) 2021年2月2日
ui.reset();
ui.start('#login', uiConfig);
いまは表示方法かえたのでui.reset();なくても問題ないっぽい。削除しよう。
なにはともあれ良かった！
これはすごそうだ！https://t.co/qazmptyyAF
— aoma23 (@aoma23) 2021年2月12日
To Be Continued...