🍇

Grapesjsを構築①-ノーコードWEBビルダー

2025/03/20に公開

CSS

 GrapesJSとは？GrapesJS（グレープスジェイエス） は、ドラッグ＆ドロップで簡単にWebサイトやメールテンプレートを作成できるオープンソースのWebビルダーです。

特に、コーディングの知識がなくてもWebページを作れるのが大きな特徴です。
GrapesJSを使えば、ノーコードでのデザイン作成やカスタムHTMLの編集が可能になるため、Webデザイナーやマーケター にも便利なツールとなっています。
参考：GrapesJSドキュメント（公式）

参考：GrapesJS (github)
自分なりに色々カスタムしています😀

https://pf-creater.com/grapesjs-app/

 GrapesJSの主な特徴ドラッグ＆ドロップのエディタ

GrapesJSでは、テキストや画像、ボタンなどのパーツ（ブロック）をドラッグ＆ドロップで配置できます。

HTMLやCSSの知識がなくても、直感的な操作でWebページを作成できるのが大きなメリットです。
リアルタイムプレビュー

編集画面上で変更がすぐに反映されるため、リアルタイムでデザインを確認しながら作業できます。

これにより、デザインの微調整が簡単になります。
HTML/CSSのエクスポート

作成したデザインはHTML/CSSとしてエクスポートできます。
プラグイン拡張

GrapesJSはプラグインによる機能拡張が可能です。

例えば、カスタムブロックの追加など、用途に応じた拡張ができます。

 GrapesJSのインストール方法基本的なセットアップ（CDN利用）
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>GrapesJS エディタ</title>
  <link rel="stylesheet" href="https://unpkg.com/grapesjs/dist/css/grapes.min.css">
</head>
<body>

  <div id="gjs"></div>

  <script src="https://unpkg.com/grapesjs"></script>
  <script>
    const editor = grapesjs.init({
      container: '#gjs',
      height: '100vh',
      fromElement: true,
      plugins: [], // 追加プラグインがあればここに設定
    });
  </script>

</body>
</html>
ひとまずベースの部分しかできたいないのでプラグインなどで拡張する必要があります。

自分なりに色々カスタムしています😀

GrapesJS -ドラッグ＆ドロップで簡単にWebページ作成-

GrapesJSとは？

GrapesJSの主な特徴

GrapesJSのインストール方法

Discussion