「AWS Amplify Studioではじめるフロントエンド+バックエンド統合開発」 輪読会②

開催日時

2022.11.19 (土) 21:00-22:00

はじめに

• 前回
• はじめての方がいらっしゃれば改めて自己紹介 → 特にいらっしゃらなかったので無し

Studioを触ってみての所感

今回、はじめてまともにStudioを触ったのでかんたんに所感を。
かんたんなモックやそこまでスケールしない(残念ながらしなかった、もしくは最初からする予定のない)サービスを作るのであれば問題ない感じ。むしろGUI上でデザインやデータを一元的に管理できるのはとても便利。
スケールさせるのであればもろもろ問題になってくる箇所はでてきそう(そこは追々記載していく)。

Chapter2

進め方の方針

• メンバーが素のAmplifyを触ったことがあったため、Studio特有のところ以外はスピーディーに終わらせる。
• Chapter2.3の「データモデルの設計」でAmplify Studioからデータモデルの定義、デプロイができるあたりからはStudioらしいことに取り組む。

内容

• Amplifyを触ったことがある人なら始め方は特段変わらない。

  • 本通りにやれば問題ないと思うが、素の?Amplify触ってた人間であれば本通りでなくてもOK。以下は私のざっくり手順。
    • Githubにリポジトリ作成→Amplifyにアプリ作成→双方連携→ローカルでcreate-react-appでひな形作成してgit push。

• デプロイが終わったらamplify pull でローカルに反映。

• 「Data」からテーブルをかんたんに作成できる。このあたりもStudio前だとDynamoDBで操作していたところなのでありがたいところ。

  • 

• 今回はブログを作成してみたいので、Postというテーブルを作成した。データ突っ込むコードまで吐いてくれる親切設計。

  • 

• Actionsメニューからかんたんに適当なデータを作成できるところも魅力。各属性の値に制約を設けてそれっぽいデータを好きな数だけ自動生成できるところも魅力。

  • 

一言メモ

議論として、データモデルの作成やContentからのデータ生成などはStudioを用いなくても可能ではあるが、DynamoDBからデータを作ろうとすると自動生成された属性があって初心者は特に混乱したりするので、Studioで一元的に管理したほうが直感的且つコンテンツ・マネジメントがシンプルで良いのでは、というような話があった。

Chapter3

進め方の方針

P145までのFigmaの基本的な操作についてはStudio特有の話ではなく、話だけ聞いていても習熟が難しいため、クイックに。

内容

• Figmaの基本操作としては、各パーツはフレームをベースにしてレイアウトしていく。

  • 

  • テキストの部分はContent Reelなどのプラグインを使ってサクッと埋めちゃうのが良いと思います(どうせあとでデータモデルで置き換えるので)。

• フレームはそのままではAmplify Studioにインポートされない。コンポーネントに変換する必要あり。

  • 作成したフレームを選択して「Create component」をクリック。

• 「UI Library」メニューからFigmaに接続してインポート。取り込みたいコンポーネントはAcceptを押して随時取り込み。

• Figma使い慣れてないのでしょうもないミス連発。

  • 
  • StudioどうこうじゃなくてFigmaの習熟の問題。レスポンシブデザインはauto layoutを使う。
  • auto layoutの概要は[こちら](実践で覚える！Figmaのオートレイアウト機能 | Pentagon Blog https://blog.pentagon.tokyo/2437/#index_id1)が非常にわかりやすかったです。一度手を動かしてみればさほど難しくなく感覚が掴めるかと思います。
    また、[こちら](Figmaでレスポンシブデザインを設計する | 東京工業大学デジタル創作同好会traP https://trap.jp/post/1437/)や[こちら](Figmaでテキストごとオブジェクトを拡大・縮小する方法 | wentz-design.com https://wentz-design.com/post/figma-how-to-use-scale/)を参照ください。自動でcssでいうところのfloatやflexboxみたいなことをやってくれるので便利です。
  • レスポンシブデザインにはconstraint(制約)も理解しておく必要があります。ただし、このあたりはStudioでインポートした際にFigmaでのconstraintが引き継がれないとの話もあり、もしこのあたりいろいろと試した方がいらっしゃいましたらシェアいただきたいです。

• データモデルをバインドできる。

  • 下図のようにComponent propertiesのTypeからPostを選択する。
  • 

• 必須 Plug-in

  • Better Font Picker

    • Figmaのフォント選択がフォント名しか出てなくてめちゃわかりづらいので。日本語フォントのみを扱った別Plug-inもある。
      • 

  • Unsplush

    • 画像検索

  • Iconify

    • アイコン検索

• 初心者のFigmaのはまりどころ

  • コンポーネントが解除できない
    • マスターコンポーネントのままではだめなのでインスタンス生成してコンポーネントからデタッチ、マスターコンポーネントを削除してからインスタンスをデタッチインスタンスでフレームに戻す
    • 【Figma】Component(コンポーネント)を解除してフレームに戻す方法をパパッと解説！ https://yesmanblog.com/figma-component-kaijo
  • コンポーネントはとりこめるけど画面全体のレイアウトはご自身で?
    • この問いに対する解はYESだと思っていて、Studioでは画面の各パーツを取り込んで、全体レイアウトは自分で、という形で進めていくのだと思う(間違ってたらごめんなさい)。

その他、出た話

• 出力したui-componentは極力いじらずに、それをラップしてコンポーネントを作るとStudioとの連携や設計上、シンプルでよい(モデルとプレゼンテーション層の分離のイメージ)
  • Abeさんから[こちら](「デザインからコードを生成するツール」は実運用に耐えうるのか｜seya｜note https://note.com/seyanote/n/n5657a1647911)の記事を教えて頂きました。
• StudioのコレクションからSearchやPaginationもかんたんに作れるが、DynamoDBで無理やり実現している(フルスキャンかけて手元で出しわけする)ため、いざ商用大規模システムを運用すると厳しいかも。
  • RDS使いてぇ・・・ Aurora Serverlessとの連携など、次回以降で試してみる。
• Figmaのコンポーネントの単位をどうするか問題。再利用性を高めるにはプリミティブな単位にするほうが良いが、それだとStudioの利便性が損なわれる?
  • Atomicデザイン的にある程度はまとまった単位でコンポーネント分割し、権限によるコンポーネントの出し分けや表示の変更など、ロジック的に分岐が発生するようなものはデザインする方とコミュニケーションとって(Figma上のコメントなどで良い)分割する、などが良いのでは(ここは解があるというよりは状況によりけりな感じですかね。)

次回、できたら調べてきたいこと

• ヘッダーに設定した背景画像ってStudioにインポートできない(ここらへんも勝手にassetsフォルダに入れてくれたりするとありがたいが・・・)

次回の予定について

• いつやる?
  • 三週間後目処
• 誰がやる?
  • 決定
• なにをやる?
  • ReactはAmply Studioの本題じゃないのでやらなくてよくね!? みたいな話を前回してしまいましたが、コンポーネントとしてStudioに読み込んでから、コードをコピーしてそれをReactのコードに組み込んでいくところもStudio特有の操作があると思いますので、このあたりはやったほうが良いように思いました。