Slaterを試してみた

webflowのSlaterが便利そうなので、いろいろ試してみました。

Slaterとは？

SlaterはWebflow専用に設計されたCSS/Javascriptのコーディング環境のWebflowのプラグインです。

Slater

通常WebflowでCSS/Javascriptをコーディングする場合はカスタムコードを使って実装しますが、これがあまり使いやすくありません。

Webflowのカスタムコードのいまいちにな点

Webflowのカスタムコードのいまいちな点は以下の3つです。

• サイト全体をパブリッシュをしないとカスタムコードの確認ができない
• 10,000文字（スペースを含む）の制限がある
• コードを保存する機能がない

Slaterを導入することでこれらの問題を解決することができます。

サイト全体をパブリッシュをしないとカスタムコードの確認ができない

Webflowのカスタムコードはサイト全体をパブリッシュをしないと変更を確認することができません。

カスタムコードの簡単な修正の確認をするだけでもサイト全体をパブリッシュする必要があるため、開発の効率がとても悪いです。

SlaterはCSS/Javascriptなどのコードだけをパブリッシュすることができるため、開発中の確認を容易にすることができます。

10,000文字（スペースを含む）の制限がある

Webflowのカスタムコードは実は10,000文字（スペースを含む）の制限があります。（Webflowで10,000文字以上のCSS/Javascriptを書くことはあまりないとは思いますが）

Slaterを使用することで10,000文字を超えたコードを書くことができます。

コードを保存する機能がない

Webflow上にはコードを保管する機能がありません。そのためよく使うコードは別のサービス上に保存しておく必要があります。

SlaterではLibrary機能があり、Libraryにコードを保管しておくことですぐにコピペして使うことができます。

実際に使ってみた

Slaterの新規作成

コードを追加したいWebflowのDesigner画面を開きます。

Appのアイコン→SlaterのLaunchをクリックします。

<>アイコンをクリックします。

表示されたコードをコピーします。

コピーしたコードをProject SettingのFooter codeに張り付け、サイトをパブリッシュします。

※初回だけサイト全体のパブリッシュが必要です

Slaterのエディタに戻り、Hello world!を追記するコードを書き、Ctrl + Sで保存します。

サイトを確認するとHello world!が追記されています。

このように一度設定してしまえば、Ctrl + Sで保存するだけでコードがサイトに反映されます。

パブリッシュしたサイトを確認すると、Hello world!が追記されています。

これでSlaterテスト1で設定したコードが共通的に使用できることが確認できました。

コードを編集する場合

先ほど作成したコードの編集は、Slaterのサイトからも編集することができます。

Slaterから「Sign up with Webflow」をクリックします。

‍

Webflowのアカウントでログインします。

Slaterを使うプロジェクトにチェックを入れて「Authorize App」をクリックします。

Slaterのページに飛んで「START A FREE TRIAL」をクリックします。

作成したプロジェクトをクリックします。

先ほど作成したプロジェクトを編集することができます。

Library機能

Library機能を使うことでよく使うコードを保存しておくことができます。

Libraryにコードを登録する場合は、WebflowからではなくSlaterにアクセスする必要があります。
（登録したコードを使用するの場合はWebflowからでも大丈夫です）

Slaterのプロジェクトを開き、Libraryのアイコン→＋のアイコンをクリックします。

赤枠の中に保存したいコードを記入します。

その他の項目は名前や説明文や種別などを自由に書き、Create Libraryをクリックします。

上記設定を行うと他のプロジェクトからも参照できるようになります。

Copyをクリックするとクリップボードに入るので自由にコピペして使うことができます。

‍

【補足】有料プランについて

Slaterは月額10ドルの有料プランがあります。

有料プランだとAIによるコーディングのアシスト機能が使えたり、チームに関する機能が追加されたり、作成できるプロジェクトの上限が増えたりするようです。

こちらはまた別の記事で検証していこうと思います。

まとめ

Webflowの標準機能のカスタムコードのエディタを使ったコード開発はかなりやりづらいため、Slaterを使った開発は結構ありなんじゃないかなと思いました。

ただ、フリープランではプロジェクト数に制限があるようなので、とりあえずは開発用に使用して、運用に使えると判断した場合は有料プランを検討するのが良いかなと思います。

また、プロジェクト共通のコードなどがもしあればSlaterを使って管理するのもよさそうです。

簡単にWebflow上で設定できるのでみなさんもぜひ一度使ってみてはいかがでしょうか。