雑記

WordPressでグラフを描こうとしてChart.jsやVisualizerやら試して分かったこと。

chart0323
こんにちは。サイトの性質上、かっこいいグラフを描きたくて四苦八苦した話です。

当サイトの感じからして、あまりこういう記事は書かない感じではあるのですが…
個人的に備忘録としても残しておきたかったので。

WordPressでグラフを描こうとすると、多分、プラグインのVisualizerか、
JavaScriptのグラフ描画ライブラリであるChart.jsになると思うのですが…
もちろん選択肢はもっと多くありますが、まずは調べて辿り着きそうな着地点が上記のふたつかなと思います。

そして、本記事はどちらを使っても壁にぶつかり、その度に何とかした話になります。
同じような壁に当たった方に、何かしら残せれば、と。

ここで言う「何とかした」とは、その通り、恐らく「正しい方法」ではなく、何か適当にやってみたら表面上は成立したという話になります。
私自身はプログラミングなんて分からないし、本当に行き当たりばったりなことをしただけですので、ご注意を。

CocoonでVisualizerを使う上での注意点

私はWordPressでCocoonをテーマとして使用させて頂いています。
素晴らしいテーマですし、解説されているブログはたくさんあるので、ここではテーマの話は割愛するとして…

いわゆる、「おま環」というものかもしれませんが、
Visualizerでグラフを描く過程において、苦労したことがあります。
解決策は単純だったんですけど…。

結論から言うと、私の環境下では、Cocoonの高速化設定で
「JavaScript縮小化」にチェックを入れている状態では、Visualizerのグラフが表示されませんでした。

このチェックを外したことにより、無事にVisualizerのグラフが記事に反映されたのですが、
今度はどういうわけか、レスポンシブであるはずのグラフがモバイル環境でうまく表示されない壁に当たりました。
具体的にはうまく縮小されず、画面からグラフがはみ出してしまう現象です。

PC環境ではこれ以上ないほどに良い具合に表示されたのですけど…
モバイル環境での解決の糸口が見つからなかったので、諦めました。

つまり、Visualizerを使うことを諦めました。

Chart.jsを使ってみる

次にChart.jsを使用してみました。
これも解説されている方々が多くいらっしゃるので、ここでは失敗と、解決策のみ提示致します。

まず、前提として当サイトの記事ではCocoonブロックのトグルボックスを使用しています。
クリックすると展開されて、中の記事が見えるアレです。
アコーディオンボックスとも言われますが、どちらが正式名称なのかは分かりません。

主にゲームの「ネタバレ」に当たる文章の表示を読者の意思に委ねる為です。
当サイトのように所謂ビジュアルノベルを扱っているサイトでは、読者にとってネタバレが致命的なものになる事がある為です。
小説を読む前に内容を言われたような事態を回避する為に、作品のネタバレを含む記事はCocoonブロックのトグルボックスを使用して執筆しています。

ゆらめく心に満ちた世界で、君の夢と欲望は叶うか
ゆらめく心に満ちた世界で、君の夢と欲望は叶うか 感想 レビュー

続きを見る

そういう環境下でChart.jsを使って文末の作品批評の棒グラフ(シナリオやグラフィック等、個人的な視点で項目ごとに採点しています)を設置しようとしたのですが、ここで問題がひとつ。

PC環境のGoogle Chromeでのみ起こった事象なのですが、Chart.jsを設置した状態でトグルボックスを開くと、トグルボックス内の最後の文章が表示された状態でボックスが開いてしまう現象が起きました。
これは、Cocoonのトグルボックスを使っても、HTMLとCSSで同じ機能を再現しても、同様でした。

正常な事象としては、トグルボックスを開くと、最初の1行目から表示されます。

他のブラウザ(エッジやサファリ)やスマホ、タブレットではボックスを開くと、きちんとボックスの1行目から見えるのですが、
PC環境のGoogle Chromeのみ、ボックスを開くとボックス内の最後の文章から見えてしまうのです。
(要するに、ボックスを開くとスクロールダウンされ、上に画面移動しないとボックス内の最初の文章から読めない状態)

この事象は、Chart.jsでグラフを設置している記事のみで起きている事象でした。
つまり、原因はChart.js用に設置したスクリプトが何か悪さをしているか、導入しているプラグインの何かとぶつかっているかという予想になります。

色々試し、最終的に、本文に入れたcanvasタグと、その直下に書いたChart.jsのグラフのscriptをまるっとdivタグで囲ってやると、問題は解決しました。

2020年3月24日追記
[jquery.inview]でスクロール時にグラフがアニメーションするように設定しました。
なので、 [jquery.inview] を効かせたい要素であるcanvas要素のみdivタグで囲み、 ブロック要素を作りました。

→Script全てを囲わなくても、上記のトグルボックスの事象は起きなかったので、これにて私の中では解決です。

何故解決したのか、正直意味が分からないですし、本当に解決しているのかも分かりません。
が、同じような壁に当たった方の参考になればと、ここに記事を残します。

ちなみにCocoonの記事投稿画面の下にあるカスタムJavaScriptのエリアがこれまた私の環境では何故か機能したりしなかったりなので、そのエリアを使わずに本文中にカスタムHTMLでグラフのプログラムも入れています。

2020年5月5日追記
Cocoonテーマを使うのを止めたので、本当にただの備忘録になりました。

あとがき

Chart.jsや jquery.inviewにチャレンジする方に、当記事が少しでもご参考になれば幸いです。
プラグインを使うにしても、scriptを使うにしても、色々と難しいことがあるんだなぁと、私は実感しましたし、当記事に辿り着いた方も実感していると思います。

そして、偶然この記事に辿り着いた方、偶然エロゲーマーだったなら、どうぞ当サイトをよろしくお願い致します。

-雑記
-, ,

Copyright © エロゲは黄昏ない 2020 All Rights Reserved.