こんにちは！
ソリューションセクションの日野です。

最近いきなり寒くなってきましたね(;^ω^)
お昼はまだまだ暑い日もありますが風が冷たくなってきて秋を感じる間もなく冬って感じですね。。。
お店も早くもクリスマスソングが流れていてすぐそこに冬を感じます。

本題

さて、今回はGrapesJSを少し触ったのでご紹介させていただきます。

GrapesJSはWebビルダーのオープンソースのフレームワークです。
Web上でWebサイトのデザインが作れるというすごいフレームワークです。
作った人がすごすぎて私にはマネできない・・・・

ただこのGrapesJSの日本語リファレンスがあんまりないんですよね(;^ω^)
英語が苦手な私にとっては、はて・・・？って感じです。
公式サイトにはデモもあるのでこちらからどうぞ→https://grapesjs.com/

今回は導入部分だけ実装してみたので下記で確認してみてください。

See the Pen GrapesJSをつかってみた by hino (@anything_all_right) on CodePen.

オブジェクトはプラグインで基本セットを読み込んでいます。
下記の右上にある「田」のところをクリックするとオブジェクトが表示されるので、
D＆Dでキャンバス上に置いてみてください。
直感的な操作ができるかと思います！

キャンバス上に置いたオブジェクトを選択して、右上にある筆アイコンを選択すると詳細設定が可能です。
（※プロパティの名前は全て英語となってます）

ソースコード

基本的にはCDNで読み込んできてJSでInitしているだけです！
initするときのcontainerにはIDを設定します。（Classでも大丈夫です）

<link rel="stylesheet" href="//unpkg.com/grapesjs/dist/css/grapes.min.css" /> //css読み込み
<script src="//unpkg.com/grapesjs"></script> //Grapesjs読み込み
<script src="https://unpkg.com/grapesjs-blocks-basic"></script> //オブジェクトのプラグイン読み込み

<div id="gjs"></div> // Editorを生成するところ

const editor = grapesjs.init({
  container: "#gjs",
  fromElement: true,
  height: "400px",
  width: "1000px",
  storageManager: false,
  plugins: ["gjs-blocks-basic"],
  pluginsOpts: {
    "gjs-blocks-basic": {
      blocks: [
        "column1",
        "column2",
        "column3",
        "column3-7",
        "text",
        "link",
        "image",
        "video",
        "map"
      ],
    }
  },
  blockManager: {},
　・・・//ここに必要なオプションを入れる
});

作ったデザインをHTMLとして出力することも可能なので、WordPressのようなサイトを直感的に作ることができます。
また、TailwindCSSなどのCSSを読み込むことも可能なのでデザインの幅が広がりそうです！

最後に

公式のプラグインがかなり充実しているのでいろいろ試してみるのも楽しそうです。

また、公式じゃなくてもプラグインを公開している方が多いのでお気に入りの機能を探してみてください。

日本語化はまだ対応されていないようなので、PRを出してみるのもいいかもしれません。
オープンソースにPRを出す機会なんて滅多にないのでね！
ただ、私はTypeScriptはまだ触ったことがないのでまずはそこからの勉強になりそうです(;’∀’)

また、GrapesJSのGithubでは最近でも活発に開発が動いているようなので、どんどん使い勝手が良くなっていっているのではないでしょうか。

それでは今回はこの辺で(・ω・)ノ