いま作っているテーブルユニットについて

これはa-blog cms Advent Calendar 2016の4日目の記事です。
現在、a-blog cms Ver. 2.7 の新しい機能として、テーブルユニットというものを開発しています。
名前を聞いただけで大体どんなものかはピンとくるかもしれません。下のイメージのようにテーブルと書かれたボタンを押すと、テーブルのレイアウトが出現します。そこに直感的に文字入力が行えます。


ボタンを押すと下のようなテーブルのUIが出現して、そのUIに文字などを打ち込んでいくことができます。


テーブルユニットでは以下の操作が可能です。

  • 行の削除
  • 列の削除
  • 行の追加
  • 列の追加
  • セルの結合
  • セルの分割
  • 文字の右寄せ、左寄せ、中央寄せ
  • セルへの文字入力

列の追加や行の追加などは、「0,1,2...」などの数字や「a,b,c...」などのアルファベットがふられたセルにホバーして表示されるアイコンをクリックして行うことができます。



体験してみよう

実際の操作感は下のテーブルで体験してみてください。現在PCでの利用を想定しています。触ってくださった方はフィードバックなどをいただけるととても嬉しいです。

どう開発しているか

普段はJavaScriptとa-blog cmsを完全に切り離して、開発しています。まずはJavaScript単体で開発して、ある程度仕組みができたときにカスタムユニットとして作ったJavaScriptをユニットに組み込んでいます。Ver.2.7から使えるようになる機能ですが、バージョンアップも大変だと思いますので、ここではカスタムユニットとして、どうテーブルユニットを組み込むかということをご紹介したいと思います。

カスタムユニットとしてテーブルのJavaScriptを組み込むには

  1. テーマにJavaScriptを追加する
  2. /include/unit/extend.htmlを編集
  3. /admin/entry/unit/extend.htmlを編集
  4. 管理画面より諸々の設定

1. テーマにJavaScriptを追加する

まずは下のボタンよりzipファイルをダウンロードしてください。その中の/build/a-table.min.jsが今回使用するJavaScriptですので、それをお使いのテーマで読み込んでください。
*現在まだ制作途中のJavaScriptです。なにかご意見がありましたらTwitterの@steelydylanにツイートしていただければ嬉しいです。
a-table.jsをダウンロード

2. /include/unit/extend.htmlを編集

お使いのテーマの/include/unit/extend.htmlを編集し、以下のソースコードを貼り付けてください。

<!-- BEGIN unit#custom_table -->
<div class="entry-container">
{table}[raw]
</div>
<!-- END unit#custom_table -->

3. /admin/entry/unit/extend.htmlを編集

お使いのテーマの/admin/entry/unit/extend.htmlを編集し、以下のソースコードを貼り付けてください。

<!-- BEGIN custom_table -->
<!-- BEGIN_IF [{table}[delnl]/em] -->
<div class="table-{id}">
<table>
	<tr>
		<th></th>
		<th></th>
		<th></th>
	</tr>
	<tr>
		<td></td>
		<td></td>
		<td></td>
	</tr>
	<tr>
		<td></td>
		<td></td>
		<td></td>
	</tr>
</table>
</div>
<!-- ELSE -->
<div class="table-{id}">
{table}[raw]
</div>
<!-- END_IF -->
<textarea type="text" name="table{id}[]" rows="10" style="width:100%;display:none;" class="entryFormTextarea {diff}" placeholder="日本語">{table}</textarea>
<input type="hidden" name="unit{id}[]" value="table{id}" />
<script>
$(function(){
var table = new aTable(".table-{id} table",{
	"lang":"ja"
});
table.afterRendered =
table.afterEntered = function(){
	$("[name^='table{id}']").val(this.getTable());
}
table.afterRendered();
});
</script>
<!-- END custom_table -->

4. 管理画面より諸々の設定

次に管理画面の設定です。管理画面>コンフィグ>編集設定 より下の図のようにテーブルユニットを追加してください。今回はカスタムユニットを拡張して、custom_tableという名前で作っています。


その後、管理画面>コンフィグ>ユニット設定より下の図のようにテーブルユニットがユニットとして表示されるようにします。


あとは編集画面より、テーブルボタンをクリックして正しくテーブルのUIが表示されるか確かめてみましょう。

まとめ

拡張ユニットはすごい!!

ここまで読んでくださった方はおわかりの通り拡張ユニットを使えばまったくオリジナルなユニットを作成することができます。世の中には様々なJavaScriptがありますのでぜひ皆さんもそういったJavaScriptを活用してオリジナルのユニットを作ってみてはいかがでしょうか?
ちなみにカスタムユニットの拡張方法は以下のページがわかりやすいです。


今回テーブルユニットを作るのに使用した、a-table.jsについて

a-table.jsはspreadsheetのようなUIを簡単に実現してくれるJavaScriptで、そのUI上で作成したテーブルは、プレーンなHTMLやマークダウンとして取り出すことも可能です。
実は自分が一から作ったJavaScriptです。
まだ機能としては、未完ですが完成したらまた後日ブログを書こうかなと考えています。
次は、弊社デザイナー今井さんです。


堀 悟大

アップルップル フロントエンドエンジニア。2014年高知大学理学部卒業。学生時代にHTML5のCanvas要素を使ってゲームを作っていたことでWeb全般に興味をもつ。アップルップル入社後はa-blog cmsを便利に使うための機能の実装や、HTML5の技術を使ったデジタルサイネージの実装を行う。趣味は英語。読むことも話すことも好き。

Home
Next entry →