[開発進捗8]PHPでレスポンシブで動的なテーブルを作る

ブログ

[開発進捗1]決算短信XBRLをデータベース化する
[開発進捗2]XBRLファイルを決算データ化する
[開発進捗3]XBRLファイルをBeautifulSoupで解析する
[開発進捗4]決算短信XBRLから決算情報を抽出する
[開発進捗5]XseverのSSH接続,FTP接続,Python実行,MySQL接続
[開発進捗6]WordPressで自作テーブルを使う方法
[開発進捗7]WordPressでグリッド(handsontable)を使う

前回グリッドをhandsontableで表現して良い感じだったのですが辞めました。
現在は普通にphpでtableを書いています。
データの都合上、tableがどうしても横に長くなってしまいますのでスマホだとほぼ読めません。
これに対応するためについでにレスポンシブデザインにも代えています。

handsontableを辞めた理由

理由は以下の通りです。

  • 重い(たぶん使い方が悪かった)
  • 最新版から商用利用は有償のみになってしまった
  • スマホだと横に長くて表示が厳しい

2番目の有償化が最も大きい理由です。
最新Verより商用利用時は有償版の購入が必須となりました。
パソコンの電気代すら稼げていないクソブログですが、一応アフィリエイト広告貼ってますので商用利用という事になります。
かつて無償で提供していたバージョンを商用利用し続けるのは問題なかったそうなのですが、 今後どうなるかわかりませんので辞めることにしました。重いし。

PHPで動的でレスポンシブなTableを描く

前述の理由にもありますが、スマホ・タブレット端末では横スクロールが辛いので、横長のテーブルを作ってしまうとスマホでは読みにくくなってしまいがちです。
以下のような感じでウィンドウが狭いスマホやタブレット端末の場合はデザインを変えて読みやすくすることで、この問題を解決するのがレスポンシブデザインです。(私の浅い理解ですが)

PC版

スマホ版

正直言うと、「php table array」とか「html table レスポンシブデザイン」とかでググって出てきた結果を組み合わせれば出来るレベルです。
が、コピペで済ませたい人は私以外にもいると思いますので、ソースを貼ってしまいます。

phpのhtml出力

css

終わりに

デザイン技術が無いので、handsontableを辞めたことによってさらに見た目がやばくなりました。
Excelへのコピーペーストも出来なくなるなー。と思っていたのですが、今はExcelの機能でhtmlテーブルを雑にコピペしても良い感じにペーストされます。
handsontableはデータが多いとすごく重かったので、最初から単純なtableで良かったなと。 (巷の評判では大量データも捌けるらしいので使い方の問題と思われます)
難易度もこちらの方がだいぶ低かったです。
というかWordpress上で handsontableを強引に使うのは無茶でした。
解かってはいたけど。。。

コメント

タイトルとURLをコピーしました