Plasmicでコードを書かずに作るReactアプリ
公開日
:
2025年5月8日
Plasmic
Web
ノーコード
技術
本マニュアルについて
本マニュアルでは、ノーコード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
CMS
Plasmic Loader
JavaScript
React
CSS
HTML
OpenID Connect
Plasmicとは
Plasmicは、ノーコードでリッチなWebアプリを作れる ノーコード・デザイン・ツール です。
🌈
Plasmic | Build powerful apps fast— without the limits
コードを書かなくても美麗なウェブサイトを作れ、その上、その他のローコードツールと異なり、Reactコードの生成を行うことでコードとの統合も容易であり、大規模で複雑なプロジェクトにも対応できます。
ドラッグアンドドロップで完結する直感的なエディターで、モックアップ、ワーキングプロトタイプ、さらにプロダクション開発までサポートします。
無料プランでノーコード・デザイン・ツールとしてのすべての機能にアクセスすることが可能です。
Plasmicの魅力・利点
ビジュアル・ページ・ビルダー
ドラッグアンドドロップによる直感的な操作
独自のコンポーネントも追加可能
技術スタックに縛られない
静的コードとしての出力が可能
Plasmicがあまり適さない場面
Reactがわかる人がいない状況
あまりデザインを気にしない、かつ単純なページを作る場合
ロジック部分までローコードツールで行いたい場合
ロジック実装機能はなく、JavaScriptコードを書く必要があります
コーディングが得意な場合
大規模開発を行う場合
既存ツールとの比較
優れている点
図形を描画し配置することができ、自由度が高い
コラボレーション機能が豊富で、複数人で編集やレビューをしやすい
プラグインが豊富
コミュニティが成熟している
Plasmicの方が優れている点
Webのルールでコンポーネントを配置でき、ブラウザで表示する際の再現度が高い
Figmaはその自由度故、破綻しがち
Webでは容易に実現できない図形を描画できてしまう
複雑なインタラクションを実装できる
所謂「紙芝居」ではなく、ユーザーの操作に応じた処理もできる
完全なReactコードを生成できる
デザインがそのままピクセルパーフェクトにプロダクションコードになり、実装との乖離がない
優れている点
マニュアルや日本法人など日本語のサポートが手厚い
優れたCMSやフォームがビルトイン
Google AnalyticsやHubspotなどの追加が標準機能
デジタル庁をはじめ有名企業も採用
ホスティングもしてくれる
Plasmicの方が優れている点
再利用可能なカスタムコンポーネントの概念がある
STUDIOはコピペで頑張ることになる
静的サイトを生成して独自ホスティングを使える
独自ドメインの接続が無料なので、好きなホスティングサービスを選択できる
単一のシステムにロックインされることなく好きなCMSを使える
優れている点
複雑なアニメーションの設定が可能
用意されているコンポーネントが豊富
UIやグラフィック、外部サービスウィジェットの粒度におけるコンポーネントが豊富
リアルなプロトタイプの出力が可能
JavaScriptコードをFramer内で記述可能
Plasmicの方が優れている点
プロダクション利用に耐えるコードを生成可能
JavaScriptのコードをPlasmic外で書くことができる
コンポーネントの設計を自在に行える
いかなる粒度のコンポーネントでも作成可能
UIの粒度に限らず、命名してまとめておくというような意味論的な粒度でも作成可能
FramerはPlasmicほどは自由にパラメータを与えられなさそう
優れている点
生成コードが完璧
完全なReactアプリケーションをUtopia内で完結できる
コードのCSSプロパティとビジュアルエディタが双方向に編集でき、結果が反映される
Utopia内でロジックが書ける
オープンソース
Plasmicの方が優れている点
コードが書けなくても扱える
Utopiaはコードが書ける人の支援ツールでしかない
コンポーネントを簡単に作れる
Utopiaだとコンポーネントファイルを作成し、関数を書かないとビジュアルエディタに反映されない
ロジック作成には好きなエディタを使える
Utopiaは内臓のMonacoエディタのみでの編集となりそう
用語
本章ではPlasmicの開発でよく使われる用語についてあらかじめ説明します。用語を知らないとPlasmicを操作できないということは無いですが、本マニュアルではこれらの用語を用いて説明します。
各見出しはPlasmicの公式ドキュメントへのリンクになっています。
Component（コンポーネント）
コンポーネントとは、「部品」や「構成要素」を表す英単語componentに由来します。PlasmicはReactをベースとしたノーコードツールであり、ReactではUIを小さい独立した部品（コンポーネント）単位に分割して開発します。Plasmicでもその考え方は同じで、テキストやボタンなどの小さい部品（コンポーネント）を配置したり作成したりして、ページという複雑なプロダクトを作り上げていきます。
PlasmicではReactとは異なり、コンテナなどレイアウトの調整に使われるものもコンポーネントと表現されることがあります。
Variant（バリアント）
バリアントはページやコンポーネントに対して複数のバリエーションを作成することができる機能です。例えばボタンのコンポーネントに対して大きさや色などでバリエーションを持たせることが用途としてあります。
Props（プロップス）
Propsは「Properties（特性）」の略で、Reactコンポーネントに外部からデータを渡すための仕組みです。渡せるデータの形式としては、文字列やオブジェクト、数字などReactコンポーネント以外のものが渡せます。
Slot（スロット）
Slotは特定の場所にものを入れるポケットのようなものです。コンポーネントに対して、他のコンポーネントを新たに入れるためのスペースを作成することができます。Slotの設定によって、コンポーネントごとにテキストの値を変更することや、コンポーネント内に含まれる要素の変更ができるようなコンポーネントの実装ができます。
ReactのコードではSlotもPropsとして扱われますが、Plasmic上ではJSX(コンポーネント)が渡されることを意図しているものはSlot、そうでないものはPropsというように区別されています。
Dynamic values（ダイナミックバリュー）
Dynamic valuesは動的な値を設定できる仕組みで、Plasmicのいろいろなところで設定することが可能です。マウスホバーで出てくる緑色のボタンをクリックすることで設定できます。
例えば、配列を子コンポーネントのPropsとして与えたり、State variableから動的に文字列を作って表示したりできます。
ダイナミックバリューを設定することにより、「チェックボックスをオンにしたらボタンを有効にする」、「テキスト入力欄2つの入力内容を結合して表示する」、「もし要素が変更されたら要素の可視性を切り替え、表示する」といった簡単な処理を書くことができます。
❗
Dynamic valuesが対応していない機能(コンポーネントを跨ぐデータ等)や、難しい処理を行う際は、コード生成して、Propsとして与えることによって処理しましょう。
Plasmic Studio
本章では、PlasmicでのWebアプリ作成について、画像も交えて説明を行います。
まずは最終的に作るアプリケーションの要件と、それぞれどのようなページを作るかについて説明します。その後、Plasmicでの命名規則について確認したうえで、実際にプロジェクトの作成方法、ページの作成方法、コンポーネントの追加・作成というように順を追って説明します。
また、Plasmicにおける細かいテクニックについて、各画面の作成方法に交えて説明します。
今回作るアプリケーションの要件
今回は、以下の機能を持つ暗号通貨ウォレットアプリの画面をPlasmicで作ります。想定しているアプリ利用者は暗号通貨ウォレットアプリの初心者も含む、マイナンバーカードの所有者全員です。
送金機能: 送金先アドレスと金額を入力、送金ボタン。確認画面を経てOpenID Connect認証で送金。
受け取り機能: 受け取り用アドレスとQRコードを表示。
アドレスの表示: ユーザーの暗号資産アドレスとコピー用ボタン。
保有アセットリスト表示: 保有暗号資産の詳細表示（資産名、ティッカーシンボル、数量、フィアット建て資産額）。
取引履歴の表示: 取引ID、日時、相手のアドレス、金額、取引手数料など取引履歴の詳細表示。
ログイン画面
ダッシュボード画面
送金画面
送金確認画面
受取画面
取引履歴一覧画面
取引詳細画面
ログイン画面を作る
一番最初に表示される画面であるログイン画面の作成を通して、基本的な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をクリックします。
Plasmicではテンプレートも用意されています。今回は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」をクリックすると新規ページの設定を行うダイアログが表示されます。今回はログインのページを作るので、「Name for the new page?」にSignInと入力します。また、イチからページを作りたいのでEmpty pageを選択し、Create pageをクリックすればページ作成完了です。
Empty page以外に、テンプレートからページを作成することもできます。
Empty pageでCreate pageするとまっさらなページが表示されます。この編集画面のことをartboard（アートボード）と言います。
Plasmicでのページの組み立て方
新規ページの作り方がわかったところで、実際のページの組み立て方について説明します。
Stackを使う
Plasmicでは、Vertical stackまたはHorizontal Stackというコンポーネントをレイアウトの調整のためにをよく用います。
左上にあるプラスボタンを押すとページ内にコンポーネントを追加できます。stackを追加してみましょう。
検索ボックスでコンポーネントを検索することが可能です。「stack」と入力してみてください。
「Vertical stack」と「Horizontal stack」の2つが出てきます。
それぞれのstackについて説明します。2種類のstackコンポーネントとボタンやテキストなどのコンポーネントを組み合わせてレイアウトを組み立てるのが基本的なページの組み立て方です。
Vertical stackの中にある要素（子要素）は縦並びになります。
Horizontal stackの子要素は横並びになります。
Plasmicでは階層構造でコンポーネントの配置状況を管理できるため、コンポーネントがどのコンポーネントの中に配置されているのかを確認しやすくなっています。左側のサイドパネルにあるハンバーガーメニューをクリックすると、ページ内に配置されているコンポーネントの階層構造を表示できます。
フレックスボックスレイアウト
フレックスボックスレイアウトはCSSにおけるレイアウトのモデルです。Plasmicの標準コンポーネントには、WidthやHeight、Size、Layout、Spacing等の設定項目があり、これらはCSSをラッピングしています。Vertical stackやHorizontal Stackなどのコンテナにおいて、これらの設定項目を適切に設定することで要素を自在に配置することが可能です。
画像のVertical stackの場合、SizeはWidth：Stretch Height：Hug content、Layoutは縦方向: Top 横方向: Centerとなっています。
このVertical stackの背景に色を付けてみました。水色のエリアがこのVertical stackの持つ幅です。
SizeとLayoutについてそれぞれ説明します。
Size
Sizeは要素の幅を設定する項目です。
Stretchだと要素の幅を最大限に拡げます。WidthをStretchに設定すると、スクリーンショットのように横幅が画面いっぱいに拡がります。
Hug contentは要素の幅を最小限に抑えます。HeightをHug contentに設定すると、スクリーンショットのように最小限の縦幅になります。ただし、Vertical stackの中にある各Text要素の幅は維持されます。
ここで、このVertical stackのWidthとHeightの値をWidth：Hug content Height: Stretch に変更してみると、Vertical stackの幅がスクリーンショットのように変化します。
WidthがHug contentになったことで横幅が最小限になり、Vertical stackの幅は中にあるText要素と同じ幅になりました。また、HeightがStretchになったことによって、縦幅は上下いっぱいに拡がりました。ただし、Vertical stackの下に配置されているHorizontal stackを押しつぶすようなことにはならないため、画面下部にはHorizontal stackとそこに含まれるText要素が表示されています。
Hug contentとStretchをうまく使いこなすことで、柔軟に要素を画面内に配置することが可能です。
Layout
Layoutは子要素の配置を設定する項目です。
前項でVertical stackのWidthとHeightの値をWidth：Hug content Height: Stretch に変更した際、Vertical stackが画面の左側に寄りましたが、これはVertical stackの親要素であるVertical stack（階層構造の一番上のVertical stack）のLayoutの横方向がLeftに設定されていたことに関係します。
一番上のVertical stackのLayoutの横方向配置をLeftからCenterにすると、子要素のVertical stackは画面中央に配置されます。
Plasmicでは階層構造で要素間の管理ができると説明しましたが、親要素に設定したLayoutが子要素の配置を決定します。上で挙げた例の画面では、一番上の親要素であるVertical stackのLayout設定はその子要素であるVertical stackとHorizontal Stackに対して適用され、Vertical stackとHorizontal StackのLayout設定もまたそれぞれの子要素であるTextに対して適用されます。
Layoutの設定によって、子要素を全体的に下に配置したり、等間隔で配置したりといったことも可能です。Between、Around、Evenlyは要素の持つスペースも配置に関係してくるため、使いどころには注意が必要です。
このように、Layoutも要素の柔軟な配置に欠かせない設定です。
PlasmicではHorizontal stackやVertical stackなどのコンテナを多用してページを作り上げていくため、柔軟なレイアウトを実現するためにもSizeやLayoutの設定は避けては通れません。また、これらコンテナにはGapとWrapという設定項目もあります。
Gap
Gapは等間隔にスペースを配置する設定で、親要素にGapを設定すると、指定したピクセル単位の幅で子要素を配置することができます。
親要素のLayoutをBetween、Around、Evenlyなどに設定することでも子要素を等間隔で配置することは可能ですが、Gapは指定したピクセル単位幅で配置できるのが大きな違いです。縦や横に並んだコンポーネントの間を程よく開けたいときなどはGapを使います。
Wrap
Wrapは、レイアウトを折り返すための設定です。子要素が親要素の幅を超えた際の折り返しを設定することができます。
Horizontal stackとその子要素のTextを用いて説明します。わかりやすいように、Textにはそれぞれ背景色を設定しました。
このHorizontal StackはSizeがWidth: Stretch Height: Hug content 、Layoutが縦: Center 横:Left となっています。
子要素であるTextをWidth: Hug content Height: Hug content に設定すると、Horizontal StackのLayout設定に従って左に寄って配置されます。
Wrapを設定していない場合はTextのスペースがHorizontal stackの持つスペース（画面幅）を超えてもただ見えなくなるだけです。動画のように、ページのプレビューで画面の幅を狭くしていくと、右端のText3から順にText要素が見えなくなります。
先ほどの状態から、Horizontal stackでWrapの設定をオンにしてみます。Layoutの表示は変わりますが、アートボード上で見た目の変化はありません。
しかし、先ほどと同様に画面の幅を狭めると、Text3から順に一段下に移動するようになりました。
Wrapのスイッチの横にあるReverseをオンにすると折り返す順番を逆にできます。
このように、Wrapを設定することで画面幅が小さいときなどにおける要素の折り返し表示について設定することができます。
幅の広い画面では横一列に表示し、狭い画面で表示する際には折り返して表示する、というような画面を実装する際にWrapを用いることでスムーズに実装することが可能です。
ここまでは、ページ全体のレイアウトのためにも必要なstackの設定項目について説明しましたが、Plasmicにはstack以外にもたくさんのコンポーネントがあり、それぞれに対して設定を行うことが可能です。
コンポーネントの設定やデザインを変更する
Plasmic標準のコンポーネントには様々な設定を行うことができます。先ほど説明したSizeに限らず、背景色やボーダーを設定するということなどができます。
コンポーネントをクリックすると、右側にそのコンポーネントの設定を行うためのパネルが表示されます。
このパネルには3つのタブがあり、以下のように分かれています。SettingsとDesignはクリックしたコンポーネントに対しての設定を行える画面ですが、Page dataタブはコンポーネント固有の設定ではなくページ全体の設定を行う画面です。
Setting
可視の設定、インタラクション、HTMLタグなどの設定
Design
サイズや余白、背景色、影、エフェクトなどの設定
Page data
ページ名、URLのパス、バリアント、Propsなどの設定
pageをstackに変換する
ここで、お好みではあるのですが、一番上のpage要素をstackに変換する方法を説明します。page（Document layout）は一律で左右に余白を設定できるのはいい点なのですが、Wrapを設定することが出来なかったり、余白がアートボード上で見えないためページによっては意図した位置にコンポーネントが置けなかったりと開発しづらくなる場合があるため、ページごとに余白を設定でき、また、細かい設定も可能なVertical stackに変更しておくのがおすすめです。
左側のパネルでpageをクリックし、右側パネルのDesignタブを開きます。Layout項目内にある「Document Layout」横にあるケバブメニューをクリックし、リストの中からVertical stackを選択すれば変換完了です。
設定パネルについて説明したところで、実際にコンポーネントを配置し、装飾してみます。
Textコンポーネントの配置
Textコンポーネントは文字列をページ内に配置するコンポーネントで、Plasmic標準のコンポーネントです。
子要素としてコンポーネントを配置したい階層をクリックします。今回は一番上のvertical stackを選択します。その状態で左上の＋ボタンをクリックし、出てきたタイルの中から「Text」をクリックします。
vertical stackの子要素としてTextコンポーネントが配置されました。
アートボード内にあるTextコンポーネントの文字列（Enter some text）を直接ダブルクリックするか、右側パネルにあるTextコンポーネントのDesignタブからContentをクリックすると文字列の編集モードに入り、文字列を入力することができます。
日本語入力も問題ありません。
コンポーネントをページに配置できたので、テキストの装飾について説明します。
装飾する
まずはテキストを中央寄せにしてみましょう。右側パネルのDesignタブでAlign centerを選択すると中央寄せできます。center以外もクリックしてみて挙動を確かめてみてください。
文字サイズはSizeで設定できます。32pxなどに設定してみましょう。また、文字色の変更やフォントの変更などもこのパネルから可能です。いろいろと触ってみるといいでしょう。
最終的にはフォントサイズ32px、Align: centerに設定してください。
💡
今回は使いませんが、背景色を変えたり、影をつけたり、枠線をつけたりすることもできます。これらの値は細かく設定可能です。
画面内に配置する
フレックスボックスレイアウトの項目で説明したように、stackを用いて「マイナカードApp」の文字を画面の中央に配置します。
左パネル内のTextコンポーネントを右クリックし、メニューから「Wrap in container...」を選択し、Vertical stackをクリックします。「Wrap in container...」は右クリックした要素の一つ上の階層にstackを挿入できるメニューです。
Textコンポーネントの親要素としてVertical stackが追加されました。
Vertical stackの設定を変えていきます。右のパネルで、SizeのHeightをStretchに、Layoutに表示されているオブジェクトを動かして、縦と横がCenterになるようにします。これでテキストを画面中央に置くことができました。
Buttonコンポーネントの配置
ログイン画面に必要なログインボタンを配置します。
ButtonコンポーネントというのがPlasmic標準コンポーネントで用意されているので、まずは配置してみましょう。
ボタンを一番上のVertical stackの子要素として配置するとこのようになります。
ボタン内にある「Button」というテキストはスロットになっているため自由に文字列を変更可能です。今回は「マイナンバーカードで本人確認」としておきます。
この「マイナンバーカードで本人確認」のボタンを押すと、デジタル認証アプリが立ち上がる想定です。
コンポーネントを自作する
Plasmicではコンポーネントを自分で作成し、再利用できることが強みの一つです。コンポーネントの基本的な作り方について、2通り説明します。
イチから自分で作る場合
新しくページを作ったとき同様に、左上のページ名のボタンをクリックし、メニューを表示します。「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を設定したのでプレビューでマウスカーソルが見慣れた手のポインターに変化しました。しかしクリックしても見た目に変化がないため、一般的なWebアプリにおけるボタンのデザインにはまだ足りません。インタラクションバリアントを追加して、よりボタンらしい動作に近づけていきます。
インタラクションバリアントを追加する
インタラクションバリアントは、コンポーネントのホバーや押された時の状態など、一般的なインタラクションに対応するバリアントを設定できる機能です。
今回はボタンに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に遷移すれば成功です。
これでボタンコンポーネントを自作することができましたが、ButtonコンポーネントがPlasmicには標準で用意されていました。これを編集するというのもコンポーネントを作る方法の一つです。
既存のコンポーネントを編集する場合
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が問題なく動作していれば成功です。
オーバーレイを設定する
ここまででログイン画面を作るのに必要なコンポーネントがある程度そろったため、画面に配置していきます。
また、下のボタン同士のスペースを確保するため、Vertical stackでラップし、Row gapを8px設定しています。
今回、「他のサービスのアカウントでログイン」を押すとダイアログの中にログインオプションが表示されるようにしたいため、ダイアログを追加します。
ダイアログの追加
ダイアログは画面に覆いかぶさるようにメニューやパネルを表示します。
Plasmic標準のDialogコンポーネントを使ってダイアログを実装します。
サイドバーのプラスボタンを押し、検索ボックスに「Dialog」と入力します。
Dialogコンポーネントは、body、title、triggerの3つのスロットで構成されています。
bodyのスロットにあるvertical stackの中にボタンを設置し、それぞれラベルを編集します。ボタンのWidthはStrechにすると見た目が揃ってきれいです。また、titleも編集します。
最後にこのダイアログを表示するためのトリガーを設定します。triggerのスロット内にはButtonコンポーネントが含まれています。これを編集してもいいのですが、今回は先ほど作ったアウトラインのボタンをドラッグアンドドロップでtriggerのスロット内に入れ、最初からあった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
ドロワー(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内に要素を配置していき、ドロワーを閉じるためのキャンセルボタンを配置します。
ボタンによってステートを操作するには、ボタンのSettingsタブにあるOn clickから設定します。
ActionsをUpdate state、OperationはToggle variableに設定します。
Stateの項目はクリックするとデータ選択画面が表示されるので、「drawer→open」となっているものを選択し、Saveをクリックします。
これで設定は完了です。プレビューでキャンセルボタンを押すとドロワーが閉じることを確認しましょう。
送金プロセス画面
送金確認画面でOpenID Connectによる認証を行った後、取引が確定するまでの間表示される画面です。完了後は画面が変わるような挙動を想定しています。
送金プロセス画面では、ページバリアントで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コンポーネントに少し手を加え、アドレスの表示とコピーボタンを追加したものです。
また、「金額をリクエストする」を押すと金額の入力欄が現れます。
バリアントを切り替えるためのボタンを配置し、ページバリアントを設定していきます。今回はデフォルト表示が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に設定した配列に合わせてコンポーネントも増減します。
ページにpropsを設定し、データを与える
このページに対して仮のJSONデータを設定し、そのデータの通りにRepeat elementさせてみます。Page dataタブのページ名の横にある歯車ボタンをクリックします。
Page settingsのパネルが表示されます。一番下にあるCreate propをクリックします。
Nameはdata、TypeをObjectに設定します。
Default Valueをクリックするとエディタが表示されるので、以下のJSONオブジェクトを入力し、Saveをクリックしてください。
JSON
[ { "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をそれぞれ設定すれば完了です。Cardコンポーネントは枠みたいなものなので作っても作らなくてもどちらでも大丈夫です。
プロトタイプの完成
ここまでで一通り画面が完成しました。ダッシュボード画面のDashboardButtonや各ページの戻るボタンに対応するページのリンクを設定すればプロトタイプの完成です。
ここから先は、要望に合わせて各ページをブラッシュアップしていきましょう。
【上級編】ロジックのための下準備をする
ここまでPlasmic上で作業を行ってきましたが、このアプリのプロジェクトでは最終的にロジック部分としてJavaScriptのコードを書きます。Plasmicではそのための下準備も同時並行で行うことが可能です。ログイン画面を例に説明します。
Event handlerの設定
ログイン画面では、マイナンバーカードを使ったログインボタンと、各種サービスのアカウントを使ったログインボタンを配置しました。ロジックの部分では、これらのボタンを押すとログインのための関数がはたらきますが、ボタンごとに関数を作成するというのは今後ボタンが増えることも考えるとあまりにも手間です。
そこで、それらを共通化する方法として、Plasmic上でEvent Handlerを設定しておきます。Page dataのpage settingsボタンを押し、Page Settingsパネルを表示します。一番下にあるCreate propのボタンを押してください。
Nameは「onProviderClick」、Typeは「Event handler」、Event handler argumentsとして「providerName」をTextにしてConfirmをクリックします。
これでEvent handlerが設定できました。あとは各ボタンのインタラクションとして設定します。まずは「マイナンバーカードで本人確認」のボタンに対して、onClickのアクションとして、ActionをRun interaction prop、Interaction propを先ほど設定したonProviderClick、ProviderNameにはauth and signの略でansと設定します。
次に、各種ログインボタンです。最初の実装ではボタンを複数個配置していましたが、Repeat elementを使って表示するように変えてあります。
signinDataは以下のようになっています。
JSON
[ { "service": "google", "buttonLabel": "Google" }, { "service": "yahoo", "buttonLabel": "Yahoo! ID" }, { "service": "facebook", "buttonLabel": "Facebook" }, { "service": "x", "buttonLabel": "X" } ]
「マイナンバーカードで本人確認」のボタン同様onClickのアクションを設定します。ここで、providerNameはDynamic valueを使用し、signinDataのserviceの値が入るように設定します。
これでロジックのための下準備であるEvent handlerの設定が完了しました。こうして設定しておくことで、ボタンごとの判別が可能になり、ロジックを作成する際に関数を複数作る必要がなくなります。
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モードでコードを生成する
本セクションでは、初めてプロジェクトをCodegenモードでコード生成をし、ローカルで起動する手順を解説します。
ターミナルで下記のコードを実行して下さい。
PlainText
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を入力します。
以下のようなメッセージが表示されたら準備完了です。
メッセージに従ってディレクトリを移動し、npm run dev してみましょう。
Bash
$ cd my-app $ npm run dev
同期する
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にマージすると利用できます。
JSON
{ "scripts": { "sync": "plasmic sync", "sync:watch": "plasmic watch" } }
毎回パッケージをアップデートするよう要求される
モノレポ構成をとっていると、パッケージを認識できないことがあり、アップデートを要求されることがあります。--skip-upgrade-checkオプションをつけるとアップデートをスキップできます。
Bash
$ 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を適用する
ことができます。
ホストのためのページを作成します。npx create-plasmic-app@latest でローカルリポジトリを作成した場合は自動的に作成されています。pages/plasmic-host.tsx があるかを確認してください。
ターミナルに戻り、npm run dev を実行します。
実行後、ブラウザのアドレスバーに以下を入力して移動します。
以下のページが表示されれば成功です。カスタムアプリホストとして利用できる準備が整っています。
Plasmicに戻ります。プロジェクト名の横にあるケバブメニューをクリックし、メニューの中からConfigure custom app hostをクリックします。
カスタムアプリホストを設定するためのダイアログが表示されます。URLのところに先ほどのページで表示されていたhttp://localhost:3000/plasmic-host/ を入力し、Confirmをクリックします。
ページが再読み込みされ、Plasmicのプロジェクトが表示されれば成功です！
なお、プロジェクトを開く度にローカル環境を用意する必要があります。
ホスティングサービスなどを利用し、 /plasmic-hostを配置できれば、ローカル環境を立ち上げずともCustom app hostを利用することが可能になります。
まとめ
今回は、ノーコードWebアプリ開発ツールであるPlasmicの一通りの操作について、暗号通貨ウォレットアプリの開発を通して説明することを目的として本マニュアルを作成しました。Plasmicを活用することで、スピード感をもってプロダクトを完成させることが可能です。実際に、本マニュアルで作成したウォレットアプリの初期バージョンの作成には1週間もかかっていません。また、マウスによる直感的な操作が可能なので、ブラッシュアップの際にもデザインを反映させやすいです。
まだまだ日本語資料の少ないPlasmicですが、本マニュアルがPlasmic初学者の支えになれば幸いです。