【グーテンベルク時代は?】Tablepressからexcel(csv)、google spreadsheetに乗り換え

駄文ブロガーとしてデビューしたのち、個人的にテーブルの管理方法がいろいろと切り替わりました。その歴史を振り返っておきます。

大昔はTablePressというWordPressのプラグインを使っていました。2014年ぐらいまでですね
レスポンシブ対応の自分好みのデザインにしたかったため、コードで書いていました。この期間は短期間ですね。
Excel、Googleスプレッドシートでテーブルを管理しています。何しろ早いです。この方法が長らく続きました。クラシックエディタを使うなら今でもこの方法がイチオシです。
グーテンベルク時代はWordPressのデフォルトのテーブルを使っています。わりとマシになったからです

Tablepressのメリット・デメリット

TablepressというWordpressのプラグインを使っていたのは2014年頃の話です。

https://ja.wordpress.org/plugins/tablepress/

TablePressは高性能で素晴らしいプラグインです。

でも下記の理由により辞めてしまいました

なんか重たいなあ
ちょっとUIなどが微妙で管理しにくい
ショートコード依存は避けたい

重さなどは今はどうだかわかりません。

Tablepressのエクスポートとインポート(CSVではなくJSON)

引っ越し方法もあるため乗り換えしやすいです。

昔引っ越したため、そのメモは残しておきます。Tablepressのエクスポートとインポートはzipファイルでまとめて引越できるため、便利です。

「すべて選択」を選び出力するだけです。

ただし、CSVで何も考えず書き出したら(^^;、Data Tables Java Scriptライブラリの設定まで、うまく移行できなかったです。検索ボックスなんかは表示されちゃう。解決策はCSVではなくJSONを使います。そしたら、そちらの設定も引き継げていました。

数分で引越せますし、間違えても消せばいいだけなので、気楽にできます。

WordPressの移転についてはこちらにまとめてあります。

http://ebookbrain.net/inport-and-export-when-moving-wordpress-site/

Tablepressをやめる場合は普通にCSVで書き出せばいいでしょう。
スポンサーリンク

レスポンシブ対応のテーブル用のコードを書く

その次に導入したのが、コードで書く方法です。

作成方法はこちらの記事に以前書きました。

http://ebookbrain.net/responsive-tables-in-css/

この方法はコピペで作成していくのですが、data-labelを設定するのがめんどくさい(もちろん、コピペなどでやるのですが)。。しかも下手すると打ちミスなどもするかもしれません。時間がかかる。。。

デザインは制御しやすかったのですが、短期間で終了となります。

スポンサーリンク

エクセル(excel(csv)、google spreadsheet)からHtmlに変換、レスポンシブ/スマホ対応もさせる

ブログ運営をするにあたり、複雑な表を作成する機会が増えました。運営の効率化のため、スマホ対応のテーブルを最速で作る方法を考えました。

エクセルは表作成ソフトですから、エクセルから作ったら早いんじゃない!と。excel、今はgoogle spreadsheetからhtml変換する方法に行きつきます。実は表計算ソフトからhtmlにコンバートするツールはたくさん出回っているのです。

http://styleme.jp/tool/xls2html/

http://pressbin.com/tools/excel_to_html_table/

http://convertcsv.com/csv-to-html.htm

https://ao-system.net/exceltable/

https://tech-unlimited.com/exceltable.html

貼り付けるだけで終わりです。

なお、特殊文字が含まれていた場合はもう1つコンバーターが必要です。変換された特殊文字は元に戻す手順ですね。

https://tech-unlimited.com/escape.html

excelをhtmlに変換するツールと同じ会社さんがだじているのですね。要望としてはひとつになるといいのですけど。。

もちろん、data-labelを打たず、スマホ、レスポンシブ対応は行っていますよ。

ご参考になりましたら幸いです。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメントする