本マニュアルについて

本マニュアルでは、ノーコード Web アプリ開発ツールである Plasmic の一通りの操作について、暗号通貨ウォレットアプリの開発を通して説明することを目的とします。Plasmic を用いることで、プログラミングの知識がない人でも直感的に Web アプリのインターフェースを作成することができます。

Plasmic の Studio におけるプロジェクト作成からページ作成の進め方などの基本的な操作について説明し、また、Plasmic CLI の操作についても一部解説します。

解説すること

Plasmic Studio の基本的な操作方法
Plasmic CLI
- create-plasmic-app
- Custom app host

解説しないこと

Plasmic Studio
- Publish
- Custom arena
- Data queries
- State variables
- Global variants
Plasmic Loader
JavaScript
React
CSS
HTML
OpenID Connect

Plasmic とは

What is Plasmic?

Plasmic is a visual builder for the web.

You can use it to build web apps and websites, and you can use it as a visual content management system.

It lets anyone, regardless of coding background, design and build rapidly—code optional.

At the same time, it is powerful, with a deep feature set that scales to complex projects. And with codebase integration, it removes the ceiling typically associated with low-code tools.

Plasmic を一言で表すと ノーコード・デザイン・ツール です。

デザインにおける従来の流れである「アウトライン → デザインカンプ → プロトタイプ」をまとめて一つのツール内で行うことができ、さらにそれらを実利用に耐える React コンポーネントとして出力することができるのが大きな強みです。

また、無料プランでノーコード・デザイン・ツールとしてのすべての機能にアクセスすることが可能です！

Plasmic の魅力・利点

ビジュアル・ページ・ビルダー
ドラッグアンドドロップによる配置
独自のコンポーネントも追加可能
技術スタックに縛られない
静的コードとしての出力が可能

Plasmic が適さない場面

React がわかる人がいない状況
- LP のようなユーザーインタラクションの単純なものはSTUDIOで充分製作可能
あまりデザインを気にしない、かつ単純なページを作る場合
ロジック部分までローコードツールで行いたい場合
コーディングが得意な場合
大規模開発を行う場合

既存ツールとの比較

Plasmic も公式ドキュメントで比較していますが、具体的なツール名で比較してみます。

STUDIO
- 優れている点
  - マニュアルや日本法人など日本語のサポートが手厚い
  - 優れた CMS、フォームがビルトイン
  - Google Analytics や Hubspot などの追加が標準機能
  - デジタル庁も採用
  - ホスティングもしてくれる
- Plasmic の方が優れている点
  - 再利用可能なカスタムコンポーネントの概念がある
    - STUDIO はコピペで頑張ることになる
  - 静的サイトを生成して独自ホスティングを使える
    - 独自ドメインの接続が無料なので、好きなホスティングサービスを選択できる
  - 単一のシステムにロックインされることなく好きな CMS を使える
Framer
- 優れている点
  - 複雑なアニメーションの設定が可能
  - 用意されているコンポーネントが豊富
    - UI やグラフィック、外部サービスウィジェットの粒度でのコンポーネントが豊富
  - リアルなプロトタイプの出力が可能
  - JavaScript コードを Framer 内で記述可能
- Plasmic の方が優れている点
  - プロダクション利用に耐えるコードを生成可能
  - JavaScript のコードを Plasmic 外で書くことができる
  - コンポーネントの設計を自在に行える
    - いかなる粒度のコンポーネントでも作成可能
    - UI の粒度に限らず、命名してまとめておくというような意味論的な粒度でも作成可能
    - Framer は Plasmic ほどは自由にパラメータを与えられなさそう
Utopia
- 優れている点
  - 生成コードが完璧
  - 完全な React アプリケーションを Utopia 内で完結できる
  - コードの CSS プロパティとビジュアルエディタが双方向に編集でき、結果が反映される
  - Utopia 内でロジックが書ける
  - オープンソース
- Plasmic の方が優れている点
  - コードが書けなくても扱える
    - Utopia はコードが書ける人の支援ツールでしかない
  - コンポーネントを簡単に作れる
    - Utopia だとコンポーネントファイルを作成し、関数を書かないとビジュアルエディタに反映されない
  - ロジック作成には好きなエディタを使える
    - Utopia は内臓の Monaco エディタのみでの編集となりそう

用語

Plasmic Studio を使って実際にページを作る前に、Plasmic の開発でよく使われる用語についてあらかじめ説明します。用語を知らないと Plasmic を操作できないということは無いですが、本マニュアルではこれらの用語を用いて説明します。

各見出しは Plasmic の公式ドキュメントへのリンクになっています。

Component（コンポーネント）

コンポーネントとは、「部品」や「構成要素」を表す英単語 component からきています。Plasmic は React をベースとしたノーコードツールであり、React では UI を小さい独立した部品（コンポーネント）単位に分割して開発します。Plasmic でもその考え方は同じで、テキストやボタンなどの小さい部品（コンポーネント）を配置したり作成したりしてページという複雑なプロダクトを作り上げていきます。

Plasmic では、React とは異なり、コンテナなどレイアウトの調整に使われるものもコンポーネントと表現されることがあります。

Variant（バリアント）

バリアントはページやコンポーネントに対して複数のバリエーションを作成することができる機能です。例えばボタンのコンポーネントに対して大きさや色などでバリエーションを持たせることが用途としてあります。

Slot（スロット）

slot は特定の場所にものを入れるポケットのようなものです。コンポーネントに対して、他のコンポーネントを新たに入れるためのスペースを作成することができます。Slot の設定によって、コンポーネントごとにテキストの値を変更することや、コンポーネント内に含まれる要素の変更ができるようなコンポーネントの実装ができます。

React では同じく Props として扱われますが、Plasmic は JSX(コンポーネント)が渡されることを意図しているものを Slot、そうでないものを Props と分かれています。

Props（プロップス）

Props は「Properties（特性）」の略で、React コンポーネントに外部からデータを渡すための仕組みです。渡せるデータの形式としては、文字列やオブジェクト、数字など React コンポーネント以外のものが渡せます。

Dynamic values（ダイナミックバリュー）

Dynamic values は動的な値を設定できる仕組みで、Plasmic のいろいろなところで設定することが可能です。マウスホバーで出てくる緑色のボタンをクリックすることで設定できます。

例えば、配列を子コンポーネントの Prop として与えたり、State variable から動的に文字列を作って表示したりできます。

これにより、「チェックボックスをオンにしたらボタンを有効にする」、「テキスト入力欄 2 つの入力内容を結合して表示する」、「もし要素が要素の可視性を切り替え、表示する」といった簡単な処理を書くことができます。

Dynamic values が対応していない機能(コンポーネントを跨ぐデータ等)や、難しい処理を行う際は、コード生成して、Props として与えることによって処理しましょう。

Plasmic Studio

この章では、Plasmic を用いた Web アプリ作成について、実際に画像を交えながら説明を行います。

Plasmic で作るものの説明の前に、まずは最終的に作るアプリケーションの要件について確認し、どのようなページを作るかについても確認します。その後、Plasmic での命名規則について確認したうえで、実際にプロジェクト作成から、ページの作成方法、コンポーネントの追加・作成など順を追って説明します。

最終的には、今回作るアプリケーションの各画面についてもテクニック等を交えながら作り方を説明します。

今回作るアプリケーションの要件

今回は、以下の機能を持つ暗号通貨ウォレットアプリのフロント開発を Plasmic で行っていきます。想定している利用者は暗号通貨ウォレットアプリの初心者も含む、マイナンバーカードの所有者全員です。

送金機能: 送金先アドレスと金額を入力、送金ボタン。確認画面を経て OpenID Connect 認証で送金。
受け取り機能: 受け取り用アドレスと QR コードを表示。
アドレスの表示: ユーザーの暗号資産アドレスとコピー用ボタン。
保有アセットリスト表示: 保有暗号資産の詳細表示（資産名、ティッカーシンボル、数量、フィアット建て資産額）。
取引履歴の表示: 取引 ID、日時、相手のアドレス、金額、取引手数料など取引履歴の詳細表示。

Plasmic では以下の 7 つの画面を、デジタル庁デザインシステムに準拠する形で作成し、デジタル庁のマイナンバーカード関連ツールとの統一感を持たせるようにします。

ログイン画面
ダッシュボード画面
送金画面
送金確認画面
受取画面
取引履歴一覧画面
取引詳細画面

ログイン画面を作る

まずはログイン画面の作成を通して、基本的な Plasmic Studio での開発について説明していきます。

ログイン画面では、マイナンバーカードでのログインと OpenID Connect（OIDC）によるログインが可能です。以下のような画面を作ります。

要件でも触れられていたように、デジタル庁のデザインシステムにできる限り準拠するようにします。

Plasmic の命名規則

プロジェクトを作成する前に、Plasmic における命名規則について確認しておきます。

Plasmic は React をベースとしたノーコードツールであり、今回は最終的にコードとして出力するため、基本的には React の命名規則に沿って各種命名を行うことが好ましいです。

このルールに従っていなくても、Plasmic でのコード生成時に自動的に JavaScript で扱えるような名称に置換しようと試みますが、できるだけ自動置換に頼らないようにしましょう。

Plasmic 内での名称	React で扱う際の名称	命名規則	命名の例	備考
ページ名	コンポーネント名	アッパーキャメルケース	`SignIn`, `Dashboard`
コンポーネント名	コンポーネント名	アッパーキャメルケース	`Button`, `TextInput`, `KvItem`
Slot	プロップ	ローワーキャメルケース	`value`, `triggerSlot`
名前が children である Slot	`children`	`children`	`children`	React のルールとして`children`とすべきであるとき(概ね、その Prop が JSX(コンポーネント)をとる唯一の Prop である場合)
Props	プロップ	ローワーキャメルケース	`onClick`, `accountId`
名前付き子要素	プロップ	ローワーキャメルケース	`title`, `img`, `additionalHeader`	ページやコンポーネントの中にあって、外部から参照されることを想定される要素。名前を付けることで Props を介して操作できる。
URL Path	URL のパス	ケバブケース	`/signin`, `/user-info`
Variant	プロップ	ローワーキャメルケースが望ましい	`noTitle`, `color`
Global Variant	Global Variant Provider のプロップ	ローワーキャメルケースが望ましい	`darkMode`
Style Tokens	CSS の変数名	ローワーキャメルケースが望ましい	`green`, `darkBlue`

はじめてのプロジェクト作成

スクリーンショットを交えながら、実際にプロジェクトを作成し、プロダクトを作成する一連の流れについて説明します。

プロジェクトを作成する

プロジェクトを作成する際には、① チームを作成してワークスペース単位でプロジェクトを管理する方法と、② 個別にプロジェクトを作成する方法があります。

今回は ② の方法でプロジェクトを作成します。

まずは左上のタブの My Playground をクリックし、右上の New Project をクリックします。

いろいろなテンプレートが表示されます。今回は Blank Starter の Website starter をクリック。

少しだけ読み込みに時間がかかるかもしれません。しばらく待つと「Welcome to your first page.」というページが表示されます。これでプロジェクトの作成は完了です！

このままだとプロジェクト名が「Website starter」なので変更します。左上の「Website starter」と書かれた部分をクリックします。

ダイアログが表示され、プロジェクト名の変更ができます。今回は「wallet」にしておきます。入力したら「submit」をクリックしてください。

表示が wallet に変わっていれば成功です。

なお、トップページのプロジェクト一覧画面でもプロジェクト名は変更可能です。

プロジェクトのデフォルトスタイルテーマを設定する

フォントやフォントサイズなど全体的に適用したい部分については、プロジェクトのデフォルトスタイルテーマとして設定することができます。今回はデジタル庁のデザインシステムに原則従いたいため、設定できる部分は設定しておきます。

左側にあるサイドバーの歯車アイコンをクリックし、Default style theme をクリックします。

設定パネルが表示されます。今回はフォントを変更しておきます。デジタル庁のデザインシステムでは、Noto Sans JP または Noto Sans Mono が採用されているため、今回はそれに合わせて Noto Sans JP をデフォルトのフォントとして設定します。

Default style theme では、タイポグラフィに関する設定のみではなく、Document Layout のデフォルト値を設定したり、horizontal stack、vertical stack など一部コンポーネントにおけるデフォルト値を設定することも可能です！

新しくページを作成する

プロジェクトががつくれたため、ここからは実際にページを作成していきます。

左上の Homepage とあるボタンをクリックすると現在作成されているページの一覧が表示されます。

「New」のボタンをクリックすると表示される「New page」をクリックして新規ページを作成します。

「New page」をクリックすると新規ページの名称を設定することができます。今回はログインのページを作るので名前を SignIn とし、Empty page を選択し、Create page をクリックします。

Empty page 以外に、テンプレートからページを作成することもできます。

まっさらなページが出来れば完成です。編集画面のページのことをartboard（アートボード）とも言います。

Plasmic でのページの組み立て方

新規ページの作り方がわかったところで、実際のページの組み立て方について、細かく説明します。

Stack を使う

Plasmic では、Vertical stack または Horizontal Stack というコンポーネントをレイアウトの調整のためにをよく用います。

左上にあるプラスボタンを押すとページ内にコンポーネントを追加することができます。

検索ボックスでコンポーネントを検索することが可能です。「stack」と入力してみてください。

「Vertical stack」と「Horizontal stack」の 2 つが出てきます。

Vertical stack の下にある要素は縦並びになります。

Horizontal stack の下にある要素は横並びになります。

これらの stack コンポーネントとボタンやテキストなどのコンポーネントを組み合わせてレイアウトを組み立てるのが基本的な考え方となります。

Plasmic では階層構造でコンポーネントの配置状況を管理できます。左側にあるハンバーガーメニューをクリックすることで階層構造を表示できます。

フレックスボックスレイアウト

Plasmic の各コンポーネントには、Width や Height といったサイズの設定項目があり、さらに Vertical stack や Horizontal Stack などのコンポーネントにはレイアウトの設定項目があります。これらを適切に調整することで、CSS におけるフレックスボックスレイアウトのように要素を自在に配置することが可能です。

Vertical stack の場合、Size のデフォルト値はWidth：Stretch Height：Hug content、Layout のデフォルト値は縦方向がTop 横方向がCenterとなっています。

水色のエリアがこの Vertical stack の持つスペースです。

Size

Size は要素本体の大きさを設定します。

Stretch は要素の幅を最大限に拡げます。スクリーンショットの Vertical stack の場合は Width が Stretch なので横幅いっぱいに拡がります。

Hug content は要素の幅を最小限に抑えます。スクリーンショットの Vertical stack は Height が Hug content なので縦幅が最小限です。今回の場合、Vertical stack の中にテキスト要素があるため、それらの幅を維持して最小限の縦幅になります。

ここで、この Vertical stack の Width と Height の値をWidth：Hug content Height: Stretch に変更してみます。

Vertical stack のスペースが先ほどと変化したことがわかります。

Width が Hug content になったことによって、Vertical stack 内のテキスト要素と同じ横幅になりました。

また、Height が Stretch になったことによって、縦幅が上下いっぱいに拡がりました。

Layout

Layout は子要素の配置を設定します。

先ほどの操作によって Vertical stack の位置が左に寄ったのは、親要素である Vertical stack のレイアウトが Left に設定されているためです。

レイアウトの横方向の配置を Left から Center にすると子要素の Vertical stack は画面中央に配置されます。

Plasmic では階層構造で親要素に設定されたレイアウトが子要素に反映されます。今回の場合、一番上の親要素である Vertical stack に設定されたレイアウトはその子要素である Vertical stack と Horizontal Stack に対して適用され、Vertical stack と Horizontal Stack に設定されたレイアウトもまたそれぞれの子要素である Text に対して適用されます。

レイアウトを設定することで、子要素を全体的に下に配置したり、等間隔で配置したりといったことも可能です。

Gap

親要素に Gap を設定すると、指定したピクセル単位の幅で子要素を配置することができます。

親要素のレイアウトの設定を Between、Around、Evenly などに設定することでも等間隔での配置は可能ですが、挙動が不明瞭なこともあり、Gap での設定が大抵の場合では好ましいです。

Wrap

Wrap は、レイアウトを折り返すための機能です。子要素が親要素の幅を超えた際の要素の折り返しについて設定することができます。

Horizontal stack とその子要素である Text を用いて説明します。わかりやすいように、Text にはそれぞれ背景色を設定しました。

この Horizontal Stack のサイズはWidth: Stretch Height: Hug content レイアウトは縦: Center 横:Left となっています。

子要素である Text はWidth: Hug content Height: Hug content に設定した場合、Horizontal Stack のレイアウトに従って左に寄るように配置されます。

画面の幅を変化させてみると、画面が狭くなった際に右端の Text3 から順に要素が見えなくなっているのがわかると思います。

このような状況に対して有用なのが Wrap です。

Horizontal stack のレイアウトに対して Wrap をオンにします。見た目上の変化はありません。

しかし、先ほどと同様に画面の幅を狭めると、Text3 が画面端に消えることなく一段下に移動するようになりました。

Reverse をオンにすることで、折り返す順番を逆にすることもできます。

幅の広い画面では横一列に表示し、狭い画面で表示する際には折り返して表示する、というような画面を実装する際に Wrap を用いることでスムーズに実装することが可能です。

コンポーネントの設定やデザインを変更する

ほとんどのコンポーネントに対して様々な設定を行うことができます。設定を変更したいコンポーネントをクリックすると、右側にそのコンポーネントの設定パネルが表示されます。

このパネルには 3 つのタブがり、以下のように分かれています。

Setting
- 可視の設定、インタラクション、HTML タグなどを設定できる
Design
- サイズや余白、背景色、影、エフェクトなどの設定ができる
Page data
- ページ名、URL のパス、バリアント、Props などの設定ができる

ここで、お好みではあるのですが、一番上の page 要素を stack に変換する方法を説明します。page のままだと余白が見づらいなどあるため、Vertical stack に変更しておくことでより直感的にページを作ることができます。

左側のパネルで page をクリックし、右側パネルの Design タブの Layout 項目内にある「Document Layout」横にあるケバブメニューをクリックします。

リストの中から Vertical stack を選択すれば変換完了です。

Text コンポーネントの配置

Text コンポーネントは Plasmic で文字列をページ内に配置するコンポーネントです。

テキストを配置したい階層をクリックします。今回は一番上の vertical stack を選択します。その状態で左上の＋ボタンをクリックし、出てきたタイルの中から「Text」を選択します。

vertical stack の下に Text コンポーネントが配置されました。

アートボード内にある Text の文字列（Enter some text）を直接ダブルクリックするか、右側パネルにある Text の Content をクリックすると文字列編集モードに入り、文字列の入力ができます。

装飾する

テキストを配置できたので、テキストの装飾について説明します。

右側パネルの Design タブから Align center を選択すると中央寄せできます。

文字サイズは Size で設定できます。32px などに設定してみましょう。また、文字色の変更やフォントの変更などもこのパネルから可能です。

今回は使いませんが、背景色を変えたり、影をつけたり、枠線をつけたりすることもできます。これらの値は細かく設定可能です。

自在に配置する

ログイン画面を作るにあたって、この「マイナカード App」の文字を画面の中央に置きたいですが、Text コンポーネントの設定だけで画面中央に文字を置くのは難しい…。そういうときに stack を活用して配置します。

左パネル内の Text コンポーネントを右クリックし、メニューから「Wrap in container...」を選択し、Horizontal stack または Vertical stack をクリックします。

Text コンポーネントの親要素として Vertical stack が追加されました。

Vertical stack の設定を変えていきます。右のパネルで、Size の Height を Stretch に、Layout に表示されているオブジェクトを動かして、縦と横が Center になるようにします。これでテキストを画面中央に置くことができました。

Button コンポーネントの配置

ログイン画面に必要な、ログインのためのボタンを配置していきます。

ボタン自体は標準コンポーネントとして用意されています。

ボタンを一番上の Vertical stack の子要素として配置するとこのようになります。

ボタン内にある「Button」というテキストは自由に文字列を変更可能です。今回は「マイナンバーカードで本人確認」としておきます。

この「マイナンバーカードで本人確認」のボタンを押すと、デジタル認証アプリが立ち上がる想定です。

ここで、デジタル認証アプリのデザインガイドラインを確認したところ、ボタンデザインには一定の条件があるようです。

条件を満たすデザインのボタンコンポーネントを作成します。

コンポーネントを自作する

Plasmic ではコンポーネントを自分で作成し、再利用できることが強みの一つです。コンポーネントの基本的な作り方について、二通り説明します。

イチから自分で作る場合

新しくページを作ったとき同様に、左上のページ名のボタンをクリックし、メニューを表示します。「New」ボタンを押して、「New component」とクリックします。

コンポーネント名を入力するダイアログが表示されます。コンポーネント名を決め、「Create component」をクリック。

プロジェクト内にコンポーネントが作成され、編集画面に移動します。

今回はガイドラインにあった外見のボタンコンポーネントを作りたいため、ガイドラインに沿って見た目を設定します。

Vertical stack の Setting タブで button タグを設定。

ボタンの高さは最低 48px なので Min Height は 48px に設定。

スペーシングにも規定があるため揃えます。今回ボタンラベルのフォントサイズは 16px にするので、左右に 16px、上下に 12px のパディングを設定する必要があります。

また、ボタンの背景色として#0017C1を Vertical stack の背景色に設定します。

次にボタンラベルのための Text コンポーネントを配置します。文字の色は#FFFFFFで、フォントサイズは 16px です。

ガイドラインによるとアプリアイコンを Text の左隣に配置する必要があります。Wrap in container...で Text コンポーネントの親要素として Horizontal stack を配置します。Horizontal stack のパディングは 0 でも大丈夫です。

Horizontal stack を配置したら、その中にアイコンを入れるための Icon コンポーネントを配置します。アートボード内のコンポーネントや、左側のパネル内の階層構造はドラッグアンドドロップで位置を変更可能です。アートボード上で Icon コンポーネントが Text コンポーネントの左側に来るように調整してください。

ガイドラインのページで配布されているアイコンをセットします。色は#FFFFFFです。また、アイコンのサイズはフォントサイズの 1.5 倍なので、Width と Height を 24px に設定します。

微調整を行います。アイコンとボタンラベルの間には今回の場合 12px のスペースが必要なので、Horizontal stack の Cols gap に 12px と設定します。Gap を設定することで、その Stack 内の要素は設定したサイズ分のスペースを空けて配置されるようになります。

角丸なデザインがいいので、Vertical stack の Corner radius を 12px に設定します。

マウスカーソルがボタンに重なったときにどう変化するかを Effects で指定することもできます。デフォルトでは Auto になっていますが、ポインターを指定してみます。

右上にある緑色の再生ボタンアイコンをクリックすると、プレビュー表示することが可能です。プレビュー画面からはブラウザの戻るボタンか右上の「Back to studio」のボタンをクリックすると編集画面に戻ることができます。

Effects を設定したのでプレビューでマウスカーソルが見慣れた手のポインターに変化しました。しかしクリックしても見た目に変化がないため、ボタンっぽくないです。インタラクションバリアントを追加して、よりボタンらしい動作に近づけていきます。

インタラクションバリアントを追加する

インタラクションバリアントは、ボタンのホバーや押された時の状態など、一般的なインタラクションに対応するバリアントを設定できる機能です。

今回はボタン用に Hover と Pressed のインタラクションバリアントを追加してみます。

Base の右にある大きいプラスボタンを押してインタラクションバリアントを追加します。

メニューが表示されるので、Hover を選択して Done をクリックします。

Hover 状態のバリアントが作成されました。

デザインガイドラインによると、Hover 時は背景色が#00118Fに変化します。

左上の記録モードがオンになっていることを確認して、背景色を変更します。

バリアントは記録モードがオンになっている間のみ変更が記録されます。オンになっていないときは元の（Base）コンポーネントごと編集できてしまうので注意。

変更できたらプレビューで確認します。マウスカーソルがボタンの上に来たときに色が変わっていれば成功です。

もしできていない場合は、Base バリアントを編集してしまっていないか、または記録モードがオンになった状態で編集しているか確認してもう一度設定してみてください。

次に、クリックしたときの設定を行います。新たにインタラクションバリアントを追加し、Pressed を選択します。

Pressed（Active）の場合は背景色が#000071に設定されていればよいので、Hover と同様に背景色を変更します。

プレビューを確認します。クリックした瞬間に色が変わっていれば成功です。

インタラクションバリアントを追加することでボタンらしい動作をするようになりました！

バリアントを追加する

バリアントは、コンポーネントに対して複数のパターンを追加できる機能ですので、インタラクションバリアント以外にもバリアントを追加することが可能です。

各バリアントについて説明します。

Toggle variant
- スイッチでオンオフを切り替えられるようなイメージです。例えばボタンアイコンの表示/非表示を切り替えるバリアントを実装することができます。
Single-select group of variant
- 複数の中から一つを選べるようなイメージです。ボタンの色をプリセットとして用意しておき、バリアントで変えるというようなことができます。
Multi-select group of variant
- 複数のバリアントを組み合わせられるもので、トグルバリアントのグループ化というイメージです。トグルバリアントとして個別に実装すると良いことの方が多いかもしれません。
Screen variant
- モバイルや PC など画面サイズのバリエーションを作成できます。

バリアント設定の注意点

コンポーネントにいろいろなパターンを持たせられて便利なバリアント機能ですが、実装の際には気を付けることがあります。

それが、バリアントは表示/非表示の切り替えに留める意識を持つ（＝変更点を最小限にすることを意識する）ということです。

標準の Button コンポーネントを例に説明します。Button コンポーネントには Show Start Icon と Show End Icon というバリアントが存在します。これらはそれぞれアイコンの表示を切り替えるバリアントですが、そのアイコンは Base バリアントの時点で実装されており、Base では非表示状態になっています。

Show Start Icon のバリアントでは、Base で非表示になっていたアイコンを表示に変更するという変更のみが記録されています。

左のパネルにおける赤いドットは、バリアントとして記録された変更点を表しています。マウスカーソルを合わせることで変更点を確認することができます。

Base バリアントに要素をあらかじめ設定しておくことで、コンポーネントの異なるバリアント間でできるだけ多くのパターンを共有することが可能です。バリアントを作成する際には、変更点を最小限にするという意識をもつことで、意図しない挙動を避けることができます。

Slot を設定する

次に、配置ごとにコンポーネントのボタンのラベルを自在に変更できるように slot を設定します。

Base のアートボードをクリックして、他のバリアントの編集モードを終了します。画面上に記録モードのアイコンが出ていないことを確認してください。

現状ではボタンのラベルは「マイナンバーカードで本人確認」のみです。ページによってラベルを「マイナンバーカードでログイン」にすることや、ボタンを複数置いてそれぞれのラベルを変える、というようなことは出来ません。ひとつを変えるとすべてのボタンのラベルが変わります。

Slot を設定することでラベルを個別に変更できるようになります。左側のパネルから Text コンポーネントを右クリックし、「Convert to a slot target」をクリックします。

Text が「Slot Target "children" - ...」というように変化しました。

ページに自作のボタンコンポーネントを配置し、それぞれのラベルを変更できることを確認して下さい。

Slot はポケットのようなものですので、例えばアイコンに slot を設定することでボタンごとにアイコンを変更するというようなこともできます。

Props を設定する

最後にボタンの機能として重要な、「クリックすると他のページに移動する」機能を付けます。この機能の実装にはいろいろなパターンが考えられますが、そのどれにおいても Props を設定することが必要です。

ここまで作ってきたボタンのコンポーネントに遷移先の URL を設定するための Props を設定します。右側パネルの Component data タブを開き、Props の横にあるプラスボタンをクリックします。

Name には link など URL を入力することがわかる名称を設定し、Type は Link URL を設定します。Default Value や Preview Value は空白のままで Confirm をクリックします。これで link という Props が設定できました。

試しに適当なページに配置してみます。コンポーネントの Settings タブを見てみると「<コンポーネント名>props」という項目が追加されていると思います。クリックするとプロジェクトに存在するページがリストで表示されます。

この状態ではまだクリックしても反応しないため、さらに設定を行います。

ボタンのインタラクションと Dynamic value を設定する

ボタンを押したら Props のリンク先に遷移するように設定します。作成しているボタンコンポーネントの画面に戻り、一番上の button 要素の Settings タブを開きます。Intaractions の項目にある On click の横の「⚡0 actions」をクリックします。

表示されるダイアログで Add new action ボタンをクリックすると、各種設定をするための画面が表示されます。

Action を Go to Page に設定すると Destination という項目が現れます。Destination の値のところにマウスカーソルを置くと右上に表示される「⚡」の緑色の吹き出しをクリックし、Dynamic value を設定します。

表示された Select data の画面では、設定可能な値が一覧表示されます。この中から、先ほど設定した Props である link を選択し、Save ボタンをクリックします。

Select data の画面が消え、Destination に$props.<Props名> と設定できていれば設定完了です。スクリーンショットでは$props.link と表示されています。右上の × ボタンでダイアログを閉じます。

適当なページに作成したボタンコンポーネントを配置し、link の Props に Homepage を設定します。

プレビュー画面を開いてボタンをクリックし、Homepage に遷移すれば成功です。

既存のコンポーネントを編集する場合

Plasmic では様々なコンポーネントが既に用意されているため、それ既存のバリアントを編集することでも目的のコンポーネントを作成できる場合があります。

今回は Plasmic で既に用意されている Button コンポーネントを編集して、「マイナンバーカードで本人確認」のためのボタンにもできるようにします。

左上のページ名のボタンをクリックしてページとコンポーネントの一覧を表示し、「Button」コンポーネントに移動します。もし一覧に表示されていない場合は、適当なページに標準のボタンコンポーネントを配置することで一覧に表示されます。

Button コンポーネントでは既にインタラクションバリアントやトグルバリアント、その他バリアントが設定されています。

まずは Base の設定から行います。今回はデザインガイドラインでボタンのレイアウトについて定められているため、それに沿うように修正します。

左のパネルで一番上の要素の horizontal stack（button という名前になっています）をクリックし、Min Height を 48px、Cols gap を 12px、padding を上下 12px、左右 16px と設定します。

次に色を追加します。Color の行にあるプラスボタンをクリックすると新たなバリアントが追加されます。ここでは「Myna」という名称に設定します。

左上の記録モードがオンになっていることを確認して、背景色を#0017C1 に設定します。

また、テキストの色も#FFFFFF に変更します。

次に、Hover と Pressed の状態の時の色を設定します。Combinations の行末にあるプラスボタンをクリックし、「Hover」と「Myna」を選択した状態で Create artboard をクリックします。

Hover の色は#00118F です。記録モードがオンになっていることを確認してから背景色を変更します。

同様に、Pressed の組み合わせを設定します。

Pressed の色は#000071 です。記録モードがオンになっていることを確認してから背景色を変更します。

これで完成です！右上の緑色の再生アイコンを押し、プレビューで動作を確認してみましょう。

プレビューではバリアントの切り替えも可能です。左上のバリアント名になっているボタンをクリックすると一覧表示されるので、その中から選択して切り替えることができます。

Hover や Pressed が問題なく動作していれば成功です！

オーバーレイを設定する

ここまででログイン画面を作るのに必要なコンポーネントがある程度そろったので配置していきます。

Button コンポーネントには、2. 既存のコンポーネントを編集する場合を応用し、アウトラインだけのボタンを追加しました。

また、下のボタン同士のスペースを確保するため、Vertical stack でラップし、Row gap を 8px 設定しています。

今回、「他のサービスのアカウントでログイン」を押すとダイアログの中にログインオプションが表示されるようにしたいため、ダイアログを追加します。

ダイアログの追加

ダイアログは画面に覆いかぶさるようにメニューやパネルを表示します。

Plasmic 標準の Dialog コンポーネントを使ってダイアログを実装します。

サイドバーのプラスボタンを押し、検索ボックスに「Dialog」と入力します。

Dialog コンポーネントは、body、title、trriger の 3 つのスロットで構成されています。

body のスロットにある vertical stack の中にボタンを設置し、それぞれラベルを編集します。ボタンの Width は Strech にすると見た目が揃ってきれいです。また、title も編集します。

最後にこのダイアログを表示するためのトリガーを設定します。trriger のスロット内には Button コンポーネントが含まれています。これを編集してもいいのですが、今回は先ほど作ったアウトラインのボタンをドラッグアンドドロップで trriger のスロット内に入れ、最初からあった Button コンポーネントは削除します。

ログイン画面の完成

プレビューで動作を確認して、動画通りの挙動であればログイン画面の完成です！ひとまずお疲れさまでした！

他の画面を作る

ログイン画面を作る過程で一通り Plasmic の基本操作を抑えられたかと思います！

それらを踏まえつつ、また、細かいテクニックの解説をしつつ他の画面を作っていきます。

レイアウトの共通部分をコンポーネントとして作成する

1 つの Web サービスのページレイアウトにおいては、ヘッダーやフッター、サイドバーなどの共通部分があるかと思います。

今回は、ヘッダー部分がログイン画面を除く全ページに共通し、PC 表示の際には横幅を制限したいことから、それらの機能を持つコンポーネントを作成し、各ページを作る際に適用します。

コンポーネント化して一律で適用することによって全体的な統一感にもつながり、また、色やサイズの指定ミスなどを防ぐことが可能です。

まずはヘッダーを作成します。コンポーネント化していますが、そこまで複雑なことはしていないため、共通レイアウト用コンポーネント内で実装してもいいと思います。

Vertical stack の Layout を center, center にし、Text を Hug content で中央に設置します。背景色は画像では#0017C1 を設定しています。ヘッダーらしい高さを出すために、Min Height を 64px に設定します。

ページによってヘッダーのタイトルは変更するので、Text を Convert to a slot target でスロットにすれば完成です。

共通レイアウトコンポーネントを作成していきます。新たにコンポーネントを作成し、まずはヘッダーを配置します。各ページでコンテンツを配置するためのスペースとして Vertical stack を配置し、それをスロットにします。これで共通レイアウトとしては完成したため、続いて PC 表示の際の横幅を制限する設定を行います。

通常バリアントを作るように、Base のアートボード下にあるプラスボタンをクリックします。メニューの中から、Add screen variant にカーソルを合わせ、Desktop only を選択します。プロジェクトの作成方法次第では Mobile only が表示されるかもしれません。

モバイルと PC 両方のスクリーンが表示されたら、PC 画面のスクリーンの方で Vertical stack の Max Width に 768px を指定します。768px なのは、主流なタブレットである iPad Mini の横幅に由来します。

実際にページに適用してみます。新たにページを作成し、一番上の要素を右クリックします。Wrap in component を選択し、表示されるコンポーネントの中から作成したレイアウト用のコンポーネントを選択します。

コンポーネントが親要素として配置されます。意図したように PC 表示で幅が狭まっていれば完成です。

ダッシュボード画面

ダッシュボード画面では、ユーザーのフィアット建ての総資産額や保有しているアセットリストが表示されます。さらに、送金ボタン、受取ボタン、履歴が配置されており、ユーザーはここから各機能にアクセスできます。

この画面では、DashboardButton と AssetListItem の 2 つの自作コンポーネントが配置されています。

DashboardButton コンポーネント

DashboardButton コンポーネントは、ダッシュボード画面から他の画面へと遷移するためのボタンです。

コンポーネントの構造は比較的単純です。Vertical stack 内にアイコン用の Icon と Text を配置します。Vertical stack には上下 8px 左右 16px のパディングと背景色を#F2F2F2 で設定し、Layout を center, center に設定します。Text の Width を Hug content に設定することで中央揃えになります。また、Icon の Size は Width と Height を 32px ずつに設定するとインターフェースとして見やすくなるでしょう。

Icon と Text は配置場所によって変化させたい部分であるため、Convert to a slot target でスロットにします。また、今回はボタンとして使うため、Vertical stack を右クリックし、Convert to a link でリンクに変換します。

Slot の命名を忘れないように気を付けてください。

ページに配置します。配置の際には最終的にどのような配置となるかを考えながら stack の入れ子構造を作ります。特にボタンの配置について、1 段目は横に 2 つ、2 段目は 1 つという配置なので、Vertical stack と Horizontal stack をうまく組み合わせ、その中にボタンを配置する必要があります。

ボタンのアイコンとラベルを変え、配置を調整していきます。

モバイル表示ではそのままでも良さそうですが、PC 表示では横に伸びてしまい少し見た目が悪いので、Vertical stack の Width を 200px にします。

また、このままだとボタンがくっついてしまっているので、Vertical stack と Horizontal stack の gap にそれぞれ 4px ずつ設定します。これでボタンの配置は完成です。

AssetListItem コンポーネント

AssetListItem コンポーネントは、ユーザが保有する各アセットの詳細（資産名、ティッカーシンボル、数量、フィアット建て資産額）を表示するためのコンポーネントです。ユーザによっては複数アセットを所持することが考えられるため、コンポーネントとして作ることで容易に複数表示できます。

構成的にはやや複雑で、全体的には横に要素を配置していくので一番上は Horizontal stack とします。一番左にアイコンを配置、その横に Vertical stack を置いて 2 段組みにし、各 stack に Text を配置します。一番上の Horizontal stack には下にだけボーダーを設定すると並べた時に見た目がよくなります。

アイコンやシンボルなどが左端に寄り、フィアット建て資産額が右に寄るようにしたいため、stack の Width を Stretch にしてスペーサーとして間に配置します。一番上の Horizontal stack の Layout を Between などに設定することでも実現可能なため、挙動に注意してお好みの方法で設定してください。

このように入れ子で要素を配置すると、各要素の Size が Stretch か Hug content かでレイアウトが結構変わります。試しながら配置してみてください。

参考までに各要素の Width は以下のようになっています。

ダッシュボード画面に戻り、複数配置してみて違和感がなければ完成です。

送金画面

送金画面では、送金先のアドレスと送金金額を入力するためのフィールドが用意されています。金額入力フィールドには全額入力のボタン、アドレス入力フィールドにはクリップボードから貼り付けるためのボタンがあります。ユーザーが送金ボタンをクリックすると、送金確認画面が表示され、内容を確認して送金を確定する際に OpenID Connect による認証を求められます。

TextInput と Select

送金画面の金額やアドレスを入力するフィールドは Plasmic 標準コンポーネントの TextInput を利用し、トークンやガス代のドロップダウンリストは同じく標準の Select コンポーネントを利用します。

TextInput にボタンを挿入するには、TextInput コンポーネントの Show End Icon バリアントを利用します。バリアントをオンにすると、TextInput 内にアイコンが表示されます。

end icon スロット内にある svg を削除し、Button コンポーネントを配置します。Button コンポーネントの Size や Color といったバリアントを調整し、ボタンのラベルやテキストカラーを変更してください。

また、プレースホルダーなどを設定することも可能です。Settings タブにプロップスとして用意されており、各値の設定はここで行います。

Select コンポーネントも配置後に Settings タブにて選択肢などの設定を行うことができます。

Value は送信時のデータの値、Label はユーザに表示される値です。また、Select コンポーネントのプレースホルダーはスロットとして設定されているので、Text を編集するときのように編集します。

Drawer

ドロワーは画面の端からスライドして表示されるメニューやパネルのことです。送金画面では、「確認」のボタンを押すと表示されます。

ドロワーは Plasmic 標準コンポーネントの Drawer を使って実装することができます。

ドロワーは標準状態ではこのように右から表示されるため、コンポーネントを編集して下から表示するように変更します。

Drawer コンポーネントの編集画面を開き、Slot:"children"の子要素の Drawer Content の Settings タブを開きます。

Drawer Content props の Side の値を right から bottom に変更します。他にも left や top に変えることが可能です。

このままでは画面の右側に Drawer Content が寄っているため、画面の下側に表示されるように変えます。

Drawer Content の Design タブの Position の項目で、並んでいるアイコンの中から Push to Bottom を選択します。

背景色や角丸など Drawer Content の見た目を変えることも可能です。今回はこのように設定しています。

ページに配置してみます。Slot "children"にはタイトルを入力するための Text、Slot: "slot"にはドロワーに表示したいコンテンツを入れるための Vertical stack、Slot: "trigger"にはドロワーを表示するためのボタンが配置されています。

また、Drawer コンポーネントは Settings タブにある Open スイッチで開閉状態を設定できます。

State を操作する

Drawer 内に要素を配置していき、ドロワーを閉じるためのキャンセルボタンを配置します。

Drawer の開閉はState（ステート）で制御されています。ステートは、UI 上で変更される可能性のあるデータが入っている変数です。

ボタンによってステートを操作するには、ボタンの Settings タブにある On click から設定します。

Actions を Update state、Operation は Toggle variable に設定します。

State の項目はクリックするとデータ選択画面が表示されるので、「drawer→open」となっているものを選択し、Save をクリックします。

これで設定は完了です。プレビューでキャンセルボタンを押すとドロワーが閉じることを確認しましょう。

送金プロセス画面

送金確認画面で OIDC による認証を行った後、取引が確定するまでの間表示される画面です。完了後は画面が変わるような挙動を想定しています。

送金プロセス画面では、ページバリアントで 2 つの画面を用意します。

送金プロセス画面の構成自体は単純です。stack を用いて画面の中央に画像とテキストを表示するようなレイアウトを作成します。

ページバリアントを設定する

「取引を確認中」の画面が作れたら、ページバリアントを設定します。

バリアント実装の基本として、「バリアントは表示/非表示の切り替えに留める意識を持つ（＝変更点を最小限にすることを意識する）」があります。

一つの画面に対して複数のページバリアントを実装する際もこの意識が大事です。表示/非表示の切り替えのみで実装するために、最初に作った画面と並列で、バリアントとして実装する画面を作ります。

2 つ並べていると画面のイメージがしづらい場合は、最初のページの親要素である Vertical stack にマウスを合わせ、目のマークを押すことで非表示にできます。

ページバリアントを設定します。Hide に設定している要素は全て Unhide してください。

Page data タブの Page Variants 横にあるプラスボタンをクリックし、メニューの中から Add toggle variant をクリックします。

トグルバリアントが作成されます。命名規則に従い、ローワーキャメルケースで命名します。

Base のアートボードに戻ります。今回はデフォルト状態では「取引を確認中です」の画面を出したいので、「完了しました」の Vertical stack を非表示にします。

バリアントのアートボードを確認すると、Base 同様「完了しました」の方が非表示になっていると思います。

バリアントの記録モードがオンになっていることを確認してから、「取引を確認中です」の Vertical stack を非表示にし、「完了しました」の Vertical stack を表示に切り替えます。

プレビュー画面で挙動を確認してみます。Base の状態では「取引を確認中です」が表示され、completed に変更すると「完了しました」の画面に切り替われば完成です！

「取引を確認中です」画面の中央で回っている円は、Plasmic の機能ではなく SVG アニメーションです。

受取画面

受取画面では、QR コードとアドレスの表示が可能です。

画面内にあるタブをクリックすると、QR コード画面とアドレス画面が切り替わります。

この画面も送金プロセス画面同様にページバリアントによって実装していますが、送金プロセス画面と異なるのは、画面内に配置されたボタンを押すことで画面が切り替わる点です。

ボタンを押すとページバリアントが切り替わるようにする

送金プロセス画面同様、ページバリアントで切り替える前提で画面を作ります。

AddressCard コンポーネントは自作のコンポーネントで、Plasmic 標準の Card コンポーネントに少し手を加え、アドレスの表示とコピーボタンを追加したものです。

RequestPanel コンポーネントも自作で、「金額をリクエストする」を押すと金額の入力欄が現れるボタンです。

バリアントを切り替えるためのボタンを配置し、ページバリアントを設定していきます。今回はデフォルト表示が QR コード画面、アドレス表示画面はバリアントに設定します。

ボタンのインタラクションを設定します。まずはクリックすると address のバリアントに切り替わるボタンを作成します。「アドレス」ボタンの Settings タブから On click の横の「0 actions」をクリックします。

Action に Update variant を選択、Group は address、Operation は Activate variant と設定し、× ボタンで閉じます。

これで「クリックすすと address バリアントに切り替わるボタン」ができました。プレビューで確認してみます。

Operation を Toggle にするとクリックするたびにバリアントが切り替わり、Deactivate にすると address バリアントをオフ、つまり Base の表示に戻すことができます。

1 つのボタンで切り替える場合は Toggle がいいと思います。今回はボタンが 2 つあるので、片方に Activate、もう片方に Deactivate を設定することで、ボタンを押すたびにバリアントが切り替わるようにします。

「QR コード」ボタンの方のインタラクションを「アドレス」ボタン同様に編集し、Operation に Deactivate を設定します。

プレビューでボタンをクリックすると画面が切り替わるようになっていればボタンによるページバリアントの切り替え設定は完了です！

取引履歴一覧画面

取引履歴一覧画面では、ユーザーが過去の取引履歴を一覧で確認でき、各取引の詳細リンクをクリックすることで詳細画面に遷移できます。

画面が二つあるのは、取引履歴がないユーザーが閲覧したときのためです。いろいろな Web サービスでそのような画面の用意があるかと思います。

送金プロセス画面や受取画面と同様に、ページバリアントで「取引履歴がありません」の画面を追加します。

TransactionListItem

TransactionListItem は、各取引履歴情報を表示するコンポーネントです。履歴は増えていくものなのでコンポーネントとして実装します。

これまでに作成したコンポーネント同様に、stack と Text、Icon を活用して組み立てます。ステータスが送金か受取かによってアイコンの表示を変えたいため、Single-select group of variants で send と receive のバリアントを作成しました。

コンポーネントに Props を設定する

ページに配置した際にデータを表示しやすくするために、Props を設定します。右側パネルの Component data から設定が可能です。

TransactionListItem コンポーネントでは、日付、取引 ID の値、トークン、総量の 4 つの値を設定できるようにするために 4 つ Props を設定します。全て Type は Text にしています。また、なにかしら値が表示されていた方がイメージしやすいので Preview value に仮の値を設定します。

props をダイナミックバリューとして各 Text コンポーネントの Content に設定します。Fallback 値の設定はお好みで行ってください。

例えば日付の場合は、日付を表示したい位置の Text コンポーネントの Content に対してダイナミックバリューを設定し、Select data 画面で date の Props と紐づけます。

Repeat element で値を表示する

実際の運用において、履歴が増えるたびに人手で Plasmic を編集して TransactionListItem コンポーネントを追加する、というのは考えづらく、与えられたデータに従って TransactionListItem コンポーネントが勝手に増えてくれると便利ですよね。

それを実現できるのが Repeat element の機能です。Repeat element では、与えた情報の通りにコンポーネントを増やし、Props も変更してくれます。

そのやり方について説明します。コンポーネントを配置し、Settings タブにある Repeat element のプラスボタンをクリックします。

コンポーネントが増え、Repeat element の表示も変わりました。現在は、Plasmic 側で用意されている仮の配列データである[2, 3, 4]に従い、配列のサイズである 3 個にコンポーネントが増えた状態です。

試しに[2, 3, 4]のところをクリックし、Select data の画面で Switch to Code をクリックします。

この画面では、直接 JavaScript のコードを書くことが可能です。では試しに配列を[2, 3]に変えて Save してみます。

コンポーネントの数が 2 つになりました。このように、Repeat element の Collection に設定した配列のサイズに合わせてコンポーネントは増減します。

このページに対して仮の JSON データを設定し、そのデータの通りに Repeat element させてみます。Page data タブのページ名の横にある歯車ボタンをクリックします。

Page settings のパネルが表示されます。一番下にある Create prop をクリックします。

Name は data とでも設定し、Type を Object に設定します。

Default Value をクリックするとエディタが表示されるので、以下の JSON オブジェクトを入力し、Save をクリックしてください。

[
  {
    "id": "1",
    "transactionType": "receive",
    "date": "2024-01-01",
    "amount": "1000",
    "symbol": "JPYC",
    "transactionId": "0x000000A1"
  },
  {
    "id": "2",
    "transactionType": "send",
    "date": "2024-01-02",
    "amount": "2000",
    "symbol": "JPYC",
    "transactionId": "0x000000A2"
  },
  {
    "id": "3",
    "transactionType": "receive",
    "date": "2024-01-03",
    "amount": "3000",
    "symbol": "JPYC",
    "transactionId": "0x000000A3"
  }
]

パネル上でこのようになっていれば追加できています。

Page settings のパネルを閉じ、コンポーネントの Settings タブに戻ります。Repeat element の collection をクリックし、Switch to Data Picker で Select data の画面に戻ります。

先ほどまではなかったdataという項目が増えていると思います。data をクリックし、Save ボタンをクリックします。data をクリックするとさらに右側に 0,1,2 と表示されますが、そこは触らなくて大丈夫です。

collection が$props.dataに変わり、コンポーネントの数が 3 つになりました。

コンポーネントの各 Props と$props.dataの内容を紐づけていきます。まず amount にダイナミックバリューを設定します。

Select data の画面にある currentItem をクリックし、さらにその中の amount をクリックしたら Save をクリックします。

コンポーネントの値が変わりました。先ほどページに追加した JSON の内容に従い、上から順に 1000、2000、3000 となっています。

同様に他の Props にもダイナミックバリューを設定すると、JSON に従ってそれぞれのコンポーネントの表示が変化します。

また、バリアントを操作することも可能です。バリアントの値と合致したデータを設定することで、対応したバリアントを表示させることができます！

ここまでは設定しませんでしたが、ログイン画面のダイアログに設定したボタンや、ダッシュボード画面の AssetListItem なども Repeat element によってコンポーネントを複数表示させることが可能です！ぜひ試してみてください。

取引履歴詳細画面

取引詳細画面では、ユーザーが選択した取引の詳細情報を確認できます。

このようにデータを表示する際には、適切な表示形式でまとめるとわかりやすい表示にすることが可能ですが、Plasmic で用意されているものは多いとは言えません。

今回は、キーとバリューの組み合わせで値を表示できるような KvItem コンポーネントを作成します。

新しくコンポーネントを作成します。横に要素が並ぶようなコンポーネントなので、一番上の要素は Horizontal stack とします。

まずは Key の部分を設定します。Text を配置し、スロットにします。スロットの親要素である stack の Min Width を 160px 程度に設定します。これによって、複数並べた際に Value の先頭が同じ位置に並ぶようになります。また、スロットの命名を忘れず行います。

続いて Value です。最終的には Value の値はボタンを押すとクリップボードにコピーできるようにしたいため、value の横にボタンも配置します。

Horizontal stack の下に Text と stack を配置し、stack の子要素に Icon を配置します。Text はスロットに、Icon はリンクにします。

値によってはコピーさせたくない Value もあると思いますので、コピーボタンの表示をバリアントで切り替えられるようにします。

Toggle variant を追加し、link の親要素の stack を非表示に設定します。

プレビューでバリアントが意図通りに機能することを確認すれば完成です。

コンポーネントが出来たらページに配置し、Key と Value をそれぞれ設定すれば完了です。SimpleCard コンポーネントは枠みたいなものなので作っても作らなくてもどちらでも大丈夫です。

プロトタイプの完成

ここまでで一通り画面が完成しました！ダッシュボード画面の DashboardButton や各ページの戻るボタンに対応するページのリンクを設定すればプロトタイプの完成です！要望に合わせて各ページをブラッシュアップしていきましょう！

Plasmic CLI

Plasmic はノーコードツールですが、Web アプリ上で作成したプロジェクトの内容をコードで出力して管理することや、逆にコードで作成したコンポーネントを追加することなども可能です。

開発ワークフロー

仕組

Plasmic Studio の実体はほぼ iframe で、描画の大部分は iframe 内の PlasmicCanvasHost が行っています。

PlasmicCanvasHost は import もできるので、独自コンポーネント(Code components)も利用できます。

Plasmic Studio の編集結果は他のページに影響を与えることはありません。plasmic syncで同期をすることによって、変更結果をコードに反映することができます。

出力モード

コードの出力モードは以下の 2 モードがあります。

Codegen
- Plasmic Studio で編集した内容をコードとして生成してくれる。
Plasmic Loader
- Plasmic Studio で編集した最新の内容をサーバーから毎度取得する。

今回は Codegen モードを利用し、すべてのコードを生成し、Git にコミットします。

新しいディレクトリに Codegen モードでコードを生成する

公式ドキュメント https://docs.plasmic.app/learn/quickstart-cli/#scheme=codegen

本セクションでは、初めてプロジェクトを Codegen モードでコード生成をし、ローカルで起動する手順を解説します。

ターミナルで下記のコードを実行して下さい。

npx create-plasmic-app@latest

対話型で設定が進みます。y/N を尋ねられたら基本的には全て y で大丈夫です。

最初の project name はローカルに生成されるディレクトリ名になります。Plasmic 上でのプロジェクト名と合致している必要はありません。

入力を求められたら、以下の通りに入力してください。

What is your project named? 新しく作成されるディレクトリの名前
What language do you want to use? TypeScript
- TypeScript のテンプレートを使用します。
What React framework do you want to use? Next. js
- 複数の出力方式がありますが、その中でも Next.js をお勧めします。
Which scheme do you want to use to integrate Plasmic? Codegen

次はプロジェクト URL を入力します。

https://studio.plasmic.app/projects/XXXXXXXXXXXXX/のような形式の Plasmic のプロジェクトの URL をコピーし、ターミナルにペーストします。

以下のようなメッセージが表示されたら準備完了です。

メッセージに従ってディレクトリを移動し、npm run dev してみましょう。

$ cd my-app
$ npm run dev

ブラウザでhttp://localhost:3000/にアクセスすると、ビルド結果を閲覧できます。

同期する

Plasmic CLI には、Plasmic Studio で編集した結果をリアルタイムに取得し、リアルタイムに Codegen でコードを生成してくれる協力な機能があります。

本セクションでは、Plasmic Studio と同期し、最新のコードを生成する方法を解説します。

以下の 2 コマンドを利用可能です。

npx plasmic sync
- 一回だけ同期します。
npx plasmic watch
- Plasmic Studio 上での変更を監視し、リアルタイムに同期します。
- next dev等と同時に利用でき、Hot Module Replacement が有効になっていれば(Next.js は既定で有効)、リロードすることなく、Plasmic Studio で変更した内容が即時反映されます。

NPM Scripts として、以下のコマンドを設定しておくと便利です。

npm run sync , npm run sync:watch

以下の JSON を package.jsonにマージすると利用できます。

{
  "scripts": {
    "sync": "plasmic sync",
    "sync:watch": "plasmic watch"
  }
}

毎回パッケージをアップデートするよう要求される

モノレポ構成をとっていると、パッケージを認識できないことがあり、アップデートを要求されることがあります。--skip-upgrade-checkオプションをつけるとアップデートをスキップできます。

$ npm run sync -- --skip-upgrade-check
$ plasmic sync --skip-upgrade-check

Git にコミットする

生成したコードは、Git リポジトリに含めることをお勧めします。

components/plasmic配下をコミット対象に含めるように設定しましょう。

ただし、Prettier や ESLint 等のツールの対象からは外すことをお勧めします。

Custom app host を設定する

Plasmic を自分で用意したサーバー上でホストすることが可能です。これにより、Plasmic Studio と独自のコードベースを統合することができ、例えば:

独自コンポーネント(Code Components)を Plasmic Studio で扱う
独自の Provider を適用する

ことができます。

公式ドキュメント https://docs.plasmic.app/learn/app-hosting/

ホストのためのページを作成します。npx create-plasmic-app@latest でローカルリポジトリを作成した場合は自動的に作成されています。pages/plasmic-host.tsx があるかを確認してください。

ターミナルに戻り、npm run dev を実行します。

実行後、ブラウザのアドレスバーに以下を入力して移動します。

http://localhost:3000/plasmic-host/

以下のページが表示されれば成功です。カスタムアプリホストとして利用できる準備が整っています。

Plasmic に戻ります。プロジェクト名の横にあるケバブメニューをクリックし、メニューの中から Configure custom app host をクリックします。

カスタムアプリホストを設定するためのダイアログが表示されます。URL のところに先ほどのページで表示されていたhttp://localhost:3000/plasmic-host/ を入力し、Confirm をクリックします。

ページが再読み込みされ、Plasmic のプロジェクトが表示されれば成功です！

なお、プロジェクトを開く度にローカル環境を用意する必要があります。

ホスティングサービスなどを利用し、 /plasmic-hostを配置できれば、ローカル環境を立ち上げずとも Custom app host を利用することが可能になります。

まとめ

今回は、ノーコード Web アプリ開発ツールである Plasmic の一通りの操作について、暗号通貨ウォレットアプリの開発を通して説明することを目的として本マニュアルを作成しました。Plasmic を活用することで、スピード感をもってプロダクトを完成させることが可能です！実際に、本マニュアルで作成したウォレットアプリの初期バージョンの作成には 1 週間もかかかっていません。また、ビジュアルに操作が可能なので、ブラッシュアップの際にも直感的にデザインを反映させやすいです。

まだまだ日本語資料の少ない Plasmic ですが、本マニュアルが Plasmic 初学者の支えになれば幸いです！

Plasmicでウェブアプリを作る(仮)