ヘッドレスCMS plasmicの導入についてあれこれ

# plasmicの導入について

## 動機
サイトの更新を検討していて、builder.ioを色々としていたら
コードからサイト上には反映するけど、サイトからコードへの自動統合がうまく動かなかったので何かいいものはないかと探していたらplasmicというものがあったのでちょっと試してみました。

検索で調べてもあまりほとんどヒットせず、日本語解説もないので場当たり的な内容となりますが

まぁいいかと導入履歴を残しておきます。

## plasmicとは
[公式](https://www.plasmic.app/)
>Plasmic は、Web サイトやアプリを構築するためのオープンソースのビジュアル編集およびコンテンツ プラットフォームです。既存のコードベースと統合し、驚くほど迅速に出荷できます。

よくある紹介内容なので話半分で読み飛ばして

## 料金体系
まぁ月1万プレビューまで無料なので、練習には十分かな？

コード化もできるみたいだし、無料でもカスタムドメイン使えるとか

AWSのS3で運用してる弱小サイトも無料で運用できそうで何よりです。

開発速度とか表示速度とかなんやのパフォーマンスは実際触ってみないとわからないけど

[他社比較](https://www.plasmic.app/vs-builder-io)を詳しく分析しているので眺めるだけでもありかな？

英語できないのでgoogle翻訳に頼りっぱなしだけどw

![palsmic_price.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/70171/834d2d4d-95fd-24aa-7200-2fab0283ab92.png)
2024/6/16現在

![palsmic_price_base.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/70171/a358f735-3377-26dd-66ac-b83867eee6b4.png)
![palsmic_price_host.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/70171/42350d7d-c38e-013a-b9a6-9cdfcfc2d485.png)
![palsmic_price_custom.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/70171/d2c3958c-88e9-949b-80b0-0c6a2f1e6641.png)
![palsmic_price_collabo.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/70171/a7b46530-a1e4-f36f-5221-b3516a2c1944.png)
![palsmic_price_security.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/70171/5b0731d4-38f5-bab6-a345-8f448e1f41c4.png)


## 導入編
やっと導入にたどり着けたヘルプを見ながら読み飛ばしてCLIでの導入に必要な最低限を行います。

### 1_新規プロジェクトを作成
#### 1_ログイン後「New project」をクリック

![palsmic_install_newproject.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/70171/5fe2e1af-d8c7-03b3-369f-0932d5fab08b.png)

#### 2_Workspaceを選択後テンプレートを選ぶ

![palsmic_install_tmp.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/70171/f4683cd4-2eac-b9ae-937b-091647e35db7.png)

#### 3_サイトを設定をする
テンプレートが作成されるので「Publish」をクリックして
Plasmic Hostingをクリックする

![palsmic_install_publish.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/70171/e109f797-afd2-0350-5f74-19cd44a699bc.png)

#### 4_カスタムドメインを設定をする
SubdomainとCustom domainを入力することができるので設定する

![palsmic_install_domain.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/70171/1365f141-74be-5be6-56e8-92bca0253094.png)

#### 5_サイトを設定をする
「Publish」をクリックして公開する
これで簡単にサイトが構築されました。

### 2_CLIとの連携

#### 1_必要なキーの収集

+ This project's public API token(「Code」をクリックで取得可能)
+ PROJECTID(URLのprojectsの後ろにPROJECTID)

![palsmic_install_key.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/70171/2128eb1b-ce55-329c-9459-273d3a879ddf.png)

#### 2_npmインストール
```bash
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_インストール完了 
```bash
~~~

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_起動 
```bash
~~~
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_変更の監視 
別のターミナルで実行
```bash
npx plasmic watch
```

#### 完了
この流れで確認できたこと

+ web上で変更するとローカルのコードの変更を確認できました
+ コード側で変更するとweb側での変更されませんでした
+ その後web上で変更するとweb上が正としてコードが上書きされる

    例)
    | WEB | -- | コード |
    | -- | -- | -- |
    | テキスト追加[test_msg1]<br>テキスト追加[test_msg2] | → | テキスト追加[test_msg1]<br>テキスト追加[test_msg2] |
    | 変化なし[test_msg1]<br>[test_msg2] | ← | テキスト変更[test1]<br>[test_msg2] |
    | [test_msg1]<br>テキスト変更[test2] | → | テキスト変更[test_msg1]<br>テキスト変更[test2] |


## コード生成の概要
[コード生成の概要](https://docs.plasmic.app/learn/codegen-guide/)ってまた別にコードから同期する方法があるけど、なぜか上手い事いかないから割愛させていただきます。

# 所感
それでも一応buildはできるので、成果物を持ってS3で稼働させたいなぁと

うまいこといけたらまた追記できたらいいなぁ

VSCodeのターミナルからコマンド打つとNGで
Macのターミナルから打つとOK出るとかもあるし、
権限的なところで詰まってそうな感じかな？

まぁなんてゆうか連携どうこうよりもローカルにコードを残したいってゆうのは
なんかあった時のバックアップ的な手元にないと不安ってゆうのが一番かなぁ