plasmicの導入について
動機
サイトの更新を検討していて、builder.ioを色々としていたら
コードからサイト上には反映するけど、サイトからコードへの自動統合がうまく動かなかったので何かいいものはないかと探していたらplasmicというものがあったのでちょっと試してみました。
検索で調べてもあまりほとんどヒットせず、日本語解説もないので場当たり的な内容となりますが
まぁいいかと導入履歴を残しておきます。
plasmicとは
Plasmic は、Web サイトやアプリを構築するためのオープンソースのビジュアル編集およびコンテンツ プラットフォームです。既存のコードベースと統合し、驚くほど迅速に出荷できます。
よくある紹介内容なので話半分で読み飛ばして
料金体系
まぁ月1万プレビューまで無料なので、練習には十分かな？
コード化もできるみたいだし、無料でもカスタムドメイン使えるとか
AWSのS3で運用してる弱小サイトも無料で運用できそうで何よりです。
開発速度とか表示速度とかなんやのパフォーマンスは実際触ってみないとわからないけど
他社比較を詳しく分析しているので眺めるだけでもありかな？
英語できないのでgoogle翻訳に頼りっぱなしだけどw
2024/6/16現在
導入編
やっと導入にたどり着けたヘルプを見ながら読み飛ばしてCLIでの導入に必要な最低限を行います。
1_新規プロジェクトを作成
1_ログイン後「New project」をクリック
2_Workspaceを選択後テンプレートを選ぶ
3_サイトを設定をする
テンプレートが作成されるので「Publish」をクリックして
Plasmic Hostingをクリックする
4_カスタムドメインを設定をする
SubdomainとCustom domainを入力することができるので設定する
5_サイトを設定をする
「Publish」をクリックして公開する
これで簡単にサイトが構築されました。
2_CLIとの連携
1_必要なキーの収集
- This project's public API token(「Code」をクリックで取得可能)
- PROJECTID(URLのprojectsの後ろにPROJECTID)
2_npmインストール
npx create-plasmic-app@latest
? What is your project named? my-app
? What language do you want to use? TypeScript
? What React framework do you want to use? Create React App
? If you don't have a project yet, create one by going to
https://studio.plasmic.app/starters/blank.
What is the URL of your project? "PROJECTID"
各説明
-
What is your project named
プロジェクト名は？
-
What language do you want to use?
使う言語は?
-
What React framework do you want to use?
フレームワークは？
-
What is the URL of your project?
プロジェクトの URL は何ですか?
↑で何度もURLを入力してもNGをくらったので「PROJECTID」に切り替えると一発で通りました。
3_インストール完了
~~~
Congrats! We created the Plasmic-connected project at my-app
Change directories into your new project and start the development server:
cd my-app
npm run start
To watch for changes in Plasmic components, in a separate terminal run:
npx plasmic watch
4_起動
~~~
cd my-app
npm run start
Compiled successfully!
You can now view my-app in the browser.
Local: http://localhost:3000
On Your Network: http://192.168.1.1:3000
Note that the development build is not optimized.
To create a production build, use npm run build.
webpack compiled successfully
No issues found.
5_変更の監視
別のターミナルで実行
npx plasmic watch
完了
この流れで確認できたこと
-
web上で変更するとローカルのコードの変更を確認できました
-
コード側で変更するとweb側での変更されませんでした
-
その後web上で変更するとweb上が正としてコードが上書きされる
例)
WEB -- コード テキスト追加[test_msg1]
テキスト追加[test_msg2]→ テキスト追加[test_msg1]
テキスト追加[test_msg2]変化なし[test_msg1]
[test_msg2]← テキスト変更[test1]
[test_msg2][test_msg1]
テキスト変更[test2]→ テキスト変更[test_msg1]
テキスト変更[test2]
コード生成の概要
コード生成の概要ってまた別にコードから同期する方法があるけど、なぜか上手い事いかないから割愛させていただきます。
所感
それでも一応buildはできるので、成果物を持ってS3で稼働させたいなぁと
うまいこといけたらまた追記できたらいいなぁ
VSCodeのターミナルからコマンド打つとNGで
Macのターミナルから打つとOK出るとかもあるし、
権限的なところで詰まってそうな感じかな？
まぁなんてゆうか連携どうこうよりもローカルにコードを残したいってゆうのは
なんかあった時のバックアップ的な手元にないと不安ってゆうのが一番かなぁ