コーディング作業は無しで、デスクトップ・スマホ向けのテンプレートをすぐに構築できる次世代ツール -GrapesJS
Post on:2018年10月9日
HTMLやCSSのコーディング作業は無しで、デスクトップ・スマホ向けのさまざまな種類のテンプレートをすぐ簡単に構築できるフレームワークを紹介します。
ランディングページはもちろんのこと、CMSにも使用できるように設計されており、オープンソースとして利用できます。
普通のページビルダーのように見えますが、実際にはより多くの機能を備えています。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201804/2018100502-01.png)
GrapesJSの特徴
![GrapesJSは、CMSもサポート](http://coliss.com/wp-content/uploads-201804/2018100503-01.png)
CMSもサポート
-
- テンプレートを簡単に作成できる
- Webサイト、スマホアプリ、HTMLメールなど、HTMLベースのテンプレートを素早く簡単に作成できます。
-
- レスポンシブ対応
- レイアウトのベースはFlexboxで、デスクトップ、タブレット、スマホに完全対応。
-
- CMSをサポート
- 動的テンプレートの作成をスピードアップするためにCMS内部で使用できるように設計されています。
-
- HTML, CSSのコーディング作業は無し
- コーディング作業は一切無しで、テンプレートを作成できます。
-
- ライセンス
- BSD 3-clauseで、OSSの中でも非常に緩いライセンスとなっています。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201804/2018100503.gif)
デスクトップ、タブレット、スマホ、各サイズでの表示
GrapesJSのデモ
デモでは、Webページ用とHTMLメール用を試すことができます。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201804/2018100502-01.png)
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201804/2018100502-02.png)
GrapesJSの使い方
GrapesJSは、下記からダウンロードできます。
オンラインのデモ版で、使い方を簡単に説明します。
デモ版ですが、デザインのカスタマイズからHTMLのコード生成まで対応しています。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201804/2018100504-01.png)
上部のメニューでは、表示方法、エクスポート、インポート、やり直し、削除、ツールの切り替えが選択できます。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201804/2018100504-05.png)
ツールとかどれ使えばいいのか分からないよ! という人でも大丈夫です。プレビューでカスタマイズしたい要素を選択すると、ツールが自動的に表示されます。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201804/2018100504-02.png)
Flexboxなど、CSSの知識がなくても、簡単に利用できるのがこのツールのすごいところです。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201804/2018100504-03.png)
上部のエクスポートを選択すると、HTMLとCSSのコードが生成されます。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201804/2018100504-04.png)
sponsors