【グーテンベルク時代は?】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の移転についてはこちらにまとめてあります。

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

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

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

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

ebookbrain
【縦並び】tableのレスポンシブ・スマホ対応のcssデザイン・作成 先日、tableが使いたくなり、今更ながら、スマホにも対応できるレスポンティブテーブルを調べてみました。 現在はWordPressは他の方法で運用しています。詳しくはこちらの...

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

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

スポンサーリンク

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

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

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

http://pressbin.com/tools/excel_to_html_table/
あわせて読みたい
CSV To HTML Converter Convert CSV data to HTML Table or MediaWiki Table format

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

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

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

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

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

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

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

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

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

コメント

コメントする