🦄
Framer + RemixでWebサイトをつくる #1 - やることきめてFramerの準備する
1日目 - やることきめてFramerの準備まで
目的
「Framer + RemixでWebサイトをつくる」ととりあえず思いつきではじめてみます。
作るWebサイトは毎週開催しているもくもく会「Kamakura MokMok Hack」のサイト。
とりあえず時間あまりないので記事もサイトも雑になりますがご容赦あれ。
そしてFramerに至っては初歩的なところもあるのでご容赦あれ。
今回アドベントカレンダーでやること
今回アドベントカレンダーでやることは以下。
- サイトデザインと各種Basic Component（AtomicでいうAtoms, Molecules)はFramerでつくる
- ルーティングはRemixを使う
- ViewはRemixなのでReact Component
- Gateway層設けてConnpass情報はAPIか静的jsonかでRemixのloader関数にぶん投げる
- RemixのPage ComponentにFramerのSmart ComponentをHandshake機能を使いURL importしpropsで渡す
- またはContainer的なComponent設けてpropsで渡す
- vercelかどっかにdeployする
- 所感をまとめる
余裕があればやる
- Framer以外でつくるReact ComponentをFramerに逆importする
- bitで共有してFramerのCode ComponentでURL importする
ざっくり要件定義
別になくてもいいけど一応まとめておく。必要なら追記してく。
開発・デザイン
用語集
| 概念名 | Name | 説明 |
|---|---|---|
| 会 | Association |
もくもく会「Kamakura MokMok Hack」を主催・運営する「Kamakura Dev」のこと |
| イベント | Event |
もくもく会「Kamakura MokMok Hack」や関連するイベントのこと |
| 目的 | Purpose |
会の目的のこと |
| 雰囲気 | Vibes |
会の雰囲気、どんな人が参加して、どんなことやっているのかのこと |
| 参加 | Entry |
イベントへの参加のこと |
| 直近 | RecentEvent |
翌週・今週のイベントのこと |
サイトのOutline
- 紹介
- 会の目的
- 会の雰囲気・やってること
- 会のルール
- 参加方法
- イベント
- 直近のイベント
- APIある のでAPI叩くか
- 直近のイベント
んな感じかな。とりあえずここまでやる。無理はしない。その後にイベントの記録とか自己紹介記載できるようにとかすると思うような思わないような…。
Framerを準備する
まずはプロジェクトをつくりましょー
とりあえずiPhone 12サイズでScreenをつくりしょー
※FramerのScreenはFigmaでいうFrameと同じです。
Screenサイズは後で変えられますが、各コンポーネントのサイズを Relative にしておかないと横幅（ Width ）は固定サイズになるので注意しましょー。詳しくは次回へ。
Discussion