aoma blog

エンジニアの日常とか技術とか

【はじめての番外編】SPAとAlpine.jsとfigmaとBulmaとsvgとロゴと利用規約と私。

IT alpinejs figma bulma logo svg

この記事は移転しました。約5秒後に新記事へ移動します。
移動しない場合はココをクリックして新サイトをお楽しみください。

おはこんばんちはaomaです。

記念日を通知する『KINENBI』というサービスを作ってます！
当日だけでなく○ヶ月記念日や777日記念日といったキリ番にも対応しています！
現在事前登録受付中です！よろしくお願いします！#KINENBI #拡散希望 https://t.co/0deleLPFQA
— aoma23 (@aoma23) 2021年1月22日

この物語はそんなaomaがはじめてのFirebaseに挑む壮大なアクションアドベンチャーである！番外編！

番外編の内容

はじめてのAlpine.jsでSPA
はじめてのfigma
はじめてのbulma
はじめてのsvg画像
はじめての利用規約とプライバシーポリシーページ作成
ロゴをつくるならこのサイト！

本編

figmaのprototypeの+ボタンなんで表示されないんだろーと思ったらやっと原因がわかった。
画面コンポーネントの中に含まれてなくて単独で存在してたからでした。
部品の一部として左のメニューからドラッグ＆ドロップで入れてあげたら無事出てきましたー。 pic.twitter.com/3G6A7fAlYy
— aoma23 (@aoma23) 2021年1月22日

PWAにしたい。bento-starter使ってみようかな。
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より
— aoma23 (@aoma23) 2021年1月25日

やっぱりbootstrapにしようかなw
— aoma23 (@aoma23) 2021年1月25日

アイコンはgoogle material icons！
— aoma23 (@aoma23) 2021年1月25日

figmaで画像書き出すときは画像右クリックしてコピー＆ペーストしてsvgでコピーがオススメ！
と師匠から聞いた。
（画像はsvgを取り込む必要ある。pngとかjpgだと画像を読み込むsvgが出力されるので意味ない）
— aoma23 (@aoma23) 2021年1月25日

alpine.jsでspaするときにブラウザバックどうしよう。URLどうしようってなって読んでる。

Alpine.jsのx-dataとURLをlocation / HistoryAPIと$ watchと同期しますhttps://t.co/bOMN2LwRTn
— aoma23 (@aoma23) 2021年1月25日

これでいけるかと思ったけどsetPage内のhttps://t.co/WLap71Pv7aがhttps://t.co/WLap71Pv7aではないらしく、ページ切り替わってくれない。。。 pic.twitter.com/oijl6DiEob
— aoma23 (@aoma23) 2021年1月25日

window.hash = '#' + value;
では
window.addEventListener('hashchange', this.setPage, false);
は発火しない！！さっき発火したと思ってたけど勘違いだった＞＜
window.location = '#' + value;
なら発火する！マジかよ！
— aoma23 (@aoma23) 2021年1月25日

いや間違えた！
window.hash なんてないわw
そりゃ発火しないぜ！！！！！！！
location.hash = value;
だった！発火した！疲れてる！！
— aoma23 (@aoma23) 2021年1月25日

addEventListenerに引数を渡したい！！
ということで読んでる。https://t.co/RSc1m75LmY
— aoma23 (@aoma23) 2021年1月25日

きた！！
引数渡すようにしたけどこれではダメで。
新しいthisになるので、関係ないとこ書き換えてる的な話なのかな？よくわかってないけど。。。。
つづく→ pic.twitter.com/GP4oqyP0E9
— aoma23 (@aoma23) 2021年1月25日

一度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タグで囲むといける！と。なるほどねー。

<label>
<input type="submit" style="display: none;">
<svg 〜〜〜 />
</svg>
</label>https://t.co/GoLAWVS0WI
— aoma23 (@aoma23) 2021年1月26日

読んでる。https://t.co/HQbmF08ZCd
— aoma23 (@aoma23) 2021年1月27日

読んでる。https://t.co/X7eOBGPSoZ
— 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でサンプルからさくっと作れるぞ！
これロゴ作成にいいのでは！https://t.co/WI3mI4Wiwl
— aoma23 (@aoma23) 2021年1月29日

ロゴ良い感じのできた！これでいいや。
あとフォントどうしようどうすればいいんだ問題ありますよね。
— aoma23 (@aoma23) 2021年1月29日

svg画像よくわかってなくて、strokeで良い感じになるように画像作ってたら、サイズ縮小でつぶれてしまった。。。
ということで勉強中。https://t.co/N7fxWNfUfM
— aoma23 (@aoma23) 2021年2月1日

リンク認証でログインできなくなった原因わかった気がする。x-ifでエレメント消してるからログインUIが表示されてなくて動かない的なやつと見た。
— aoma23 (@aoma23) 2021年2月2日

原因わかりました。ui.startの前に問答無用でui.reset();してたからでした。画面切り替えのたびにconsoleエラー履いてたので入れてたのが原因でした。
ui.reset();
ui.start('#login', uiConfig);
いまは表示方法かえたのでui.reset();なくても問題ないっぽい。削除しよう。
なにはともあれ良かった！
— aoma23 (@aoma23) 2021年2月2日

これはすごそうだ！https://t.co/qazmptyyAF
— aoma23 (@aoma23) 2021年2月12日

To Be Continued...