Google Apps ScriptでCKEditorを使ったウェブアプリ

自分のウェブアプリケーションに於いて、ユーザ入力してもらうエリアで単なるテキストエリアだと非常に味気ない。そこで、HTML入力も可能な各種CMSやプラグインとしても活用されている「CKEditor」を搭載できたら、一気にアプリが豪華になります。

今回このCKEditorをGASで作ったウェブアプリケーション側に搭載してみて、その中で得た知見などをここにまとめてみようと思います。Google Apps ScriptだけでなくElectronなどのアプリでも活躍すると思います。

今回使用するライブラリ等

CDNで利用しますが、Standardの場合、フォントカラー変更などの一部が無いので、Full PackageのCDNを今回は利用しています。

実行と結果

サンプルの使い方

さんぷるすぷレッドシートには、CKEditorを含めたコードと実行用のメニューが用意されています。以下の手順でセットアップを実行し、表示します。

  1. スプレッドシートを開く
  2. メニューより、CKEditor -> セットアップを実行(スプレッドシートのIDがスクリプトプロパティに記述されます)
  3. 続けて、CKEditor -> エディタの表示で表示されます。
  4. 左サイドバーをクリックすると対応するHTMLコードがエディタ内に展開されます。
  5. 右上の保存ボタンをクリックするとスプレッドシートに書き込まれます。

図:セットアップをまずしておきましょう

結果

デモでは書き込みは出来ないようにしてあります。

ソースコード

今回はいきなり開くとCKEditorの画面であるため、現実にはダイアログ表示などをした時にその中にCKEditorを表示するパターンが多いと思われる(実際自分のアプリではそのような作り)。そのため、CKEditorの初期化のタイミングや、保存する時に一時配列にスプレッドシートの値を読み込ませてから表示 -> 保存時は一時配列の中身を本来のデータ格納用配列に保存しつつ、スプレッドシート書き込みになるため、よりコードは複雑になります。

また、ダイアログ表示をする場合、CKEditorの縦横のサイズをリサイズ対応する必要があると、その為のリサイズ用の処理を入れておく必要があります。

また、今回はアプリの外観用にVue.js + Vuetifyも利用しています。

CDNを利用

CKEditor本体のライブラリを読み込む時には、いくつかパターンがあり、今回のようなフルセットの場合には、HTMLのHEAD内に以下のコードを追記しておいて読み込ませるだけです。

フォントカラーの変更などは、standardには含まれていないようで、fullのパッケージを読み込ませるようにしています。

図:フルパッケージだと機能が豊富

初期化

GAS側コード

GAS側はHTML側からのデータ要求に対して、JSON形式でデータを送り返してあげる必要があります(v-data-tableがその形式で受け入れる為)。今回はスプレッドシートのIDをsheetidというプロパティに格納してあります。

HTML側コード

今回はVuetifyのmountedではなく、初回起動時の左サイドバーのパネルをクリック時に初期化をしています。初期化をしなければ、CKEditorが表示されないので注意が必要です。また、2回目クリック時はパネル間移動となるため、そのままではデータが消えてしまう。よって、まずはCKEditorの中身を一時配列に保存してから、次のパネルの値をCKEditorに読み込ませる仕組みにしています(保存ボタンを押した時に初めて、スプレッドシートには反映する)

  • 初期化は、CKEDITOR.replaceにて、textareaタグの中身を置き換える形で実行します。
  • この時、後からそのインスタンスをいじれるように、ckevent変数にインスタンスを格納しています。
  • 初期化時に縦横のサイズ指定できますが、今回はapprove2のエリアにフィットするようにevt.editor.resizeにてCKEditorの縦横のサイズを変更させています。
  • パネル間で移動した際に一時配列のmtemp変数には変更を反映してから、次の表示をするようにしています(でないと、パネル移動すると、データが消えてしまい、再度呼び出し時には初期値が表示されてしまう。

値をセットと取得

CKEditor自体は、textareaタグの領域をリプレースする事で表示する仕組みになっています。よって、必ずtextareaが一個は必要になります。そして、このCKEditorは表がWYSIWYGのエディタ、裏側がHTMLのソースコードになっており、HTMLの値をセットすると、表のWYSIWYGの表示が適切なGUIのHTMLエディタの表記になってくれます。

予め、初期化時にインスタンスを取得しておき(ckevent)、これに対してsetDataでHTMLデータをセットし、編集後の値はgetDataで取得します。

データの書き込み

今回は1行ずつデータを書き込みではなく、まとめてセーブする形式を取っているので、データはまるごと渡して書き換えるようにしています。

GAS側コード

  • JSONで受け取って配列に直し、一発で書き込みをしています。

HTML側コード

  • 最後の書き込みを一旦セーブしないと、変数には反映されていないので、まず変数に保存するコードが必要です
  • mtempのJSONデータをGAS側へ渡してあげています。

リサイズ対応

サイズ可変のウィンドウであったり、ダイアログなど、その時の外枠のサイズは動的に変わるケースの場合、固定サイズのCKEditor表示だと少々見栄えが悪いです。フルスクリーンやサイズ変更時にはその外枠に合わせてリサイズしてくれたほうがスマートな表示になります。

そこで、リサイズを行った時にサイズ変更を行う関数を実行させて、対処しています。

これをVuetifyの初期化マウント時のイベントや、以下のようなリサイズ時のイベントの中で呼び出すようにしておけば、リサイズするとそのサイズに追従する形で、CKEditorがフィットするようになります。横幅は100%していで簡単にフィットします。

左サイドバーはv-data-tableで作成しているので、こちらは横幅固定で高さだけをウィンドウ枠の高さに合うように調整しています。調整で-140などしてるのはVuetifyのツールバーの高さ分などを差し引きして、高さ調整を行っているためです。

ツールバーのカスタマイズ

CDNで取り込んだCKEditorですが、今回はfullを選んでいるため、デフォルトで非常に多くのボタンが表示されてしまっています。しかし、実際に使うであろうボタン類というのはそこまで多いわけではないので、これではオーバースペック。ということで、Toolbar Configuratorで必要なものだけを残して、Get Toolbar Configをクリックするとカスタマイズ用のコードが得られます。

これをそのまま使うのではなく、以下のようにCKEDITOR.replace時のオプション設定として指定する事で、必要なボタンだけを表示する事が可能です。

  • toolbarGroupsで表示するツールバーグループを指定
  • removeButtonsにて、非表示にするボタン類を指定
  • これらを手動で作るのは面倒なので、Toolbar Configuratorを使ってオンオフや位置移動をすることで、上記に必要なコードが得られます。

図:デフォルトよりもスッキリな表示になった

関連リンク

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください