paiza開発日誌

IT/Webエンジニア向け総合求人・学習サービス「paiza」(https://paiza.jp ギノ株式会社)の開発者が開発の事、プログラミングネタ、ITエンジニアの転職などについて書いています。

JavaScriptで自分だけのWeb製作エディタを構築できる「GrapesJS」を使ってみた!

f:id:paiza:20171115125153j:plain
どうも、まさとらん(@0310lan)です!

今回は、ドラッグ&ドロップで誰でも簡単にWebサイトを製作できるサービスのご紹介です!

そのままでもWebオーサリングツールとして大変便利なのですが、JavaScriptで好きなようにカスタマイズしてオリジナルのエディタを開発&公開できるという面白い特徴があります。

現在、オープンソースとして活発に開発が進められているので、ぜひこの機会にみなさんも試してみてください!

GrapesJS

f:id:paiza:20171115131853j:plain

■「GrapesJS」の使い方!

それでは「GrapesJS」を使ったWeb製作エディタがどのようなツールなのかを見ていきましょう!

トップページにある「Webpage Demo」というボタンからアクセスすることができます。
f:id:paiza:20171115131917j:plain


登録なども不要で、すぐにブラウザ上で「エディタ」が表示されます。
f:id:paiza:20171115131931j:plain
この画面上で、自分の好きなようにWebサイトを製作することができるようになっています。

この記事後半では、JavaScriptからカスタマイズする方法なども掲載しているので、合わせてぜひ参考にしてみてください!

■「エディタ」の各種機能について

まずは、「GrapesJS」を使ったWeb製作エディタの便利な機能をいくつかピックアップしてご紹介しておきます!

基本的な使い方として、「①テキスト / コンテンツ」を直接クリックして編集したり、CSSなどのスタイルを「②メニュー」から変更していきます。
f:id:paiza:20171115135850j:plain
「メニュー」は、コンテンツに合わせて設定可能なスタイルが自動的に表示されるので使いやすいです。


ヘッダー・画像・テキスト・カラム…など、Web製作に必要なコンテンツはドラッグ&ドロップで簡単に追加できます!
f:id:paiza:20171115135906j:plain


例えば、「画像コンテンツ」をドラッグ&ドロップすると専用のライブラリ上で画像を選択することができます。
f:id:paiza:20171115135924j:plain


さらに、DropboxInstagramGoogleドライブなど…多彩なサービスと連携して画像を挿入することも可能。
f:id:paiza:20171115135939j:plain
もちろん、自分のPCに保存している画像ファイルをアップロードすることもできます。


画像を挿入したら「メニュー」から、自分の好きなようにスタイルを変更していくことができます。
f:id:paiza:20171115140002j:plain


同じ要領で「ドラッグ&ドロップ」するだけで、フォームコンテンツを追加したり…
f:id:paiza:20171115140014j:plain


住所を入力してGoogleマップを貼り付けたり…
f:id:paiza:20171115140025j:plain


「カウントダウンタイマー」もドラッグ&ドロップで簡単に追加できます!
f:id:paiza:20171115140036j:plain


ある程度サイトが完成したら、「PC / タブレット / スマホ」でのプレビュー確認もできます。
f:id:paiza:20171115140046j:plain


そして、問題なければ「HTML / CSS」の全ソースコードを圧縮ファイルでダウンロードすることができるのです!
f:id:paiza:20171115140057j:plain
ダウンロードしたファイルは自分のサーバーやGitHub Pagesなどにアップロードすれば、そのままWebサイトとして公開することができます。

また、手持ちのHTMLファイルがあれば、逆に「GrapesJS」にインポートして編集することができるのも魅力です。

JavaScriptで「GrapesJS」を動かそう!

GrapesJS」が持つすべての機能はJavaScriptから自由に制御&改造することができます。

この点が類似のWebオーサリングツールと大きく違うところで、自分が使いやすいように「見た目」も「機能」もカスタマイズできるわけです。

今回は、新規にHTMLファイルを作成しゼロの状態から「GrapesJS」を起動し、いくつか簡単なカスタマイズを試してみましょう!


まず最初に、以下の「CSS / JavaScript」ファイルを読み込むところから始めます!

https://unpkg.com/grapesjs/dist/css/grapes.min.css

https://unpkg.com/grapesjs

上記2つのファイルをHTMLから読み込んで簡単なJavaScriptを記述するだけで、「GrapesJS」のWebエディタが起動するわけです。


シンプルなHTMLを書くと次のようになります!

<!DOCTYPE html>
<html>
  <head>
      <meta charset="utf-8">
      <title>GrapesJSのサンプル</title>


      <link rel="stylesheet" href="https://unpkg.com/grapesjs/dist/css/grapes.min.css">
      <script src="https://unpkg.com/grapesjs"></script>


  </head>
  <body>
    
   <!-- ここにWebエディタが表示される -->
    <div id="gjs"></div>
    
    
    <script>


        //ここにプログラムを記述していく!


    </script>
  </body>
</html>

body要素内の「divタグ」は、実際に「GrapesJS」によるWebエディタが起動して表示される箇所になります。(id名は好きなもので構いません)


そして、JavaScriptによるプログラミングですが「GrapesJS」を起動させるだけなら以下の記述でOKです!

var editor = grapesjs.init({


    container : '#gjs'


});

これは「GrapesJS」の初期化処理なのですが、「container」の箇所に先ほどdivタグで設定したid名を記述するだけです。


作成したHTMLファイルをブラウザで表示すると、見事にエディタが表示されていますね!
f:id:paiza:20171115140537j:plain


さらに、「components」にHTMLソースを記述し、「style」にCSSソースを記述することでエディタへ反映させることも可能です!

var editor = grapesjs.init({
  container : '#gjs',
  components: '<h1 class="text-red">こんにちは!GrapesJS...</h1>',
  style: '.text-red{ color: red }',
});


実行するとこうなります!
f:id:paiza:20171115140614j:plain
このように簡単な記述だけで、GrapesJSによるWebオーサリングツールを活用できるのは非常に便利ではないでしょうか。

JavaScriptでカスタマイズしよう!

GrapesJS」のカスタマイズには、まさに無限の可能性があって、自分の好きなツールに丸ごと作り変えることもできます。

ここでは便利な機能をほんの一部ですがピックアップしてご紹介してみようと思います!


例えば、自分専用の「ボタン」を1つ作ってみましょう!

先ほど「GrapesJS」の初期化処理を行った際に、変数「editor」を作成しましたね。

ここから派生するAPIがたくさん提供されており、これを活用することでさまざまなカスタマイズをおこなえるようになっています。


今回の「ボタンUI」を作るのであれば「Panels」を利用して、次のように記述します。

var panelManager = editor.Panels;


panelManager.addPanel({
    id : 'myNewPanel',
    visible : true,
    
    buttons : [{


        //ボタンのデザインや属性を設定
        id : 'smile',
        className   : 'fa fa-smile-o',
        attributes  : { title: 'Smile' },


    }],
});

「addPanel()」メソッドを使って、ボタンのIDを設定したりアイコンデザインを決めることができます。

「className」の箇所にWebフォントアイコンを提供している「Font Awesome」をベースにした記述ができるので大変便利です。


実行すると「ボタン」が表示されましたね!
f:id:paiza:20171115140753j:plain
しかし、このボタンには「機能」をプログラミングしていないので、クリックしても何も動作しません。


そこで、ボタン設定の箇所に機能を組み込むための「ID登録」をしておきます。

buttons    : [{
    id          : 'smile',
    className   : 'fa fa-smile-o',
    attributes  : { title: 'Smile' },


    //機能を組み込むためのIDを登録する
    command     : 'helloWorld',
}],

このように「command」の箇所に好きなID名を記述すればOKです!


そして、この「ID名」を使って実際のプログラミングをするために「Commands」を利用します。

var commands = editor.Commands;


commands.add('helloWorld', {
    run:  function(editor, sender){


        alert( 'Hello world!' );


    }
});

このように「add()」メソッドを使えば、独自のプログラムを記述して好きな機能を組み込めるというわけです。
(今回は、単純にアラートを表示するだけの記述です)


作成したボタンをクリックすると、しっかりとアラートが表示されるのが分かります。
f:id:paiza:20171115140849j:plain


また、「BlockManager」を利用することで自分の好きなブロックコンテンツを作成&追加することも可能です。

例えば、「h1タグ」のブロックを作ってみましょう!

var blockManager = editor.BlockManager;


blockManager.add('h1-block', {


    label: 'Heading',
    content: '<h1>ここにテキストを入力…</h1>',
    attributes: {
        title: 'h1ブロックの挿入'
    }


});

「add()」メソッドを使い、「content」に実際のHTMLソースを記述すればいいので簡単です。


実際に実行すると、ブロックメニューから先ほど作ったコンテンツを利用できるようになっています。
f:id:paiza:20171115140952j:plain


あとは、このブロックをドラッグ&ドロップで配置すれば、「h1タグ」が挿入されるというわけです!
f:id:paiza:20171115141036j:plain
同じ要領で、自分がよく使うフォームのデザインやボタン・ギャラリー・フッター・カラム…などを設定しておけば再利用もしやすくなりますね。

このように、JavaScriptでさまざまな機能追加やカスタマイズをやりやすいように設計されているので、ぜひみなさんもオリジナルのWebオーサリングツールを作ってみてはいかがでしょうか?(公式マニュアルはコチラから)

ここまでご紹介したサンプルの全ソースコードを以下のリンクから閲覧できるので、ぜひ参考にしてみてください!

GrapesJSの基本サンプル|GitHub

JavaScript講座は完全無料!動画でプログラミングが学べるレッスン


paizaでは、プログラミング未経験者・初心者向け学習サービス「paizaラーニングを公開しています。

今回記事の中で使用しているJavaScriptが学べる入門講座をはじめに、PythonJavaC言語PHPRubySQL、HTML/CSSなど、プログラミング初心者でも動画で学べる入門レッスンが多数ございます。プログラミング初心者の方はぜひごらんください!

特に、今まで有料だった「JavaScript入門編」・「ゲームエンジニア入門編」は先月から【全編無料】となりました!

また、明日から「Rails入門編」・「ポートフォリオ制作」の有料レッスンを期間限定・連続無料公開いたします。ぜひごらんください!

詳しくはこちら

■まとめ

今回は、「GrapesJS」の基本的な機能やカスタマイズをご紹介しました。

公式サイトから利用できるWebエディタを活用するだけも十分なサイト製作を楽しめますが、やはりJavaScriptから自分好みにカスタマイズしていくのが醍醐味と言えるでしょう。

公式マニュアルには、細かいカスタマイズ方法なども丁寧に掲載されているので、ぜひみなさんもオリジナルの開発に挑戦してみてください!


<参考>





paizaラーニング」では、未経験者でもブラウザさえあれば、今すぐプログラミングの基礎が動画で学べるレッスンを多数公開しております。

詳しくはこちら
paizaラーニング

そして、paizaでは、Webサービス開発企業などで求められるコーディング力や、テストケースを想定する力などが問われるプログラミングスキルチェック問題も提供しています。

スキルチェックに挑戦した人は、その結果によってS・A・B・C・D・Eの6段階のランクを取得できます。必要なスキルランクを取得すれば、書類選考なしで企業の求人に応募することも可能です。「自分のプログラミングスキルを客観的に知りたい」「スキルを使って転職したい」という方は、ぜひチャレンジしてみてください。

詳しくはこちら
paizaのスキルチェック