【WordPress/Cocoon/Javascript/プログラム初心者】D3を記事上で使う方法

Wordpress/cocoon上でD3で絵を描くPrograming
Photo by Stephen Dawson on Unsplash

D3をSagasoon.

今回は、前回使った WordPress / Cocoonでの javascriptライブラリ利用方法を用いたサンプルをご紹介します。

なんてことはない見た目ですが、簡単に D3 が使えるようになるのはとても面白いかと思います。

まずは、前回の記事をご覧いただけてない方は、一度、お目通しください。

【Cocoon/WordPress】手軽にグラフを書いてみる(準備編)
Cocoon/WordPressを使って、手軽にグラフを描いてみたいと思います。 プログラム初心者の方にもとても有意義かなと思います。
【Cocoon/WordPress】手軽にグラフを書いてみる(実践編)
Cocoon/WordPressを使って、手軽にグラフを描いてみたいと思います。 プログラム初心者の方にもとても有意義かなと思います。


ご紹介するサンプルはこんな感じです

簡単なサンプルです。
現在の時間を取得して、バーを時間/分/秒のバーを表示するだけのもの。
こんな感じです。

やり方

手順は2つです。

  • 出力する場所にタグを仕込む
  • D3で描画をかける

出力する場所にタグを仕込む

簡単です。
空のタグを入れ込むだけです。

<div id="time_bar"></div>

D3の処理を入れる

CocoonのカスタムJavascript欄に、下記のソースを入れ込みます。

var script = document.createElement("script");
script.src = "https://d3js.org/d3.v5.min.js";
var head = document.getElementsByTagName("head");
head[0].appendChild(script);

script.onload = function(){
        var data = [];
        setInterval(function(){
          var now = new Date();
          data[2] = now.getSeconds()/60*100;
          data[1] = now.getMinutes()/60*100;
          data[0] = now.getHours()/24*100;
          var time_bar_data = d3.select("#time_bar").selectAll("div").data(data);
          time_bar_data .enter().append("div").merge(time_bar_data).style("width", function(d) { return d  + "%"; }).text(' ');
        }, 1000);
};

カスタムCSSに、下記を入れておいてください。

#time_bar div {
  font-size: 12px;
  background-color:#ff9999;
  padding:1px;
  height:10px;
}

これで、にょきにょきと、バーが動き出します。

プログラム初心者の方は

毎度のお話ですが、プログラム初心者の方は、このソースをいじり倒すといいです。

【プログラム初心者さん必見】初心者がする勉強の仕方はこれ
4月からの新人さんを多くみてきた私が思うんですが、プログラム初心者さんは勉強する意欲はあるんですよね。でも、その方向を間違うと、「あー、プログラムってめんどくさい」とか「いらいらする」とかの塊になってしまいます。今日は、そんな間違いをしないためのちょっとした秘訣をお伝えします。

まとめ

いかがだったでしょうか。
1つ、javascriptを使う方法を覚えると、色々違う場面で利用できます。
プログラム初心者の方は特にそうですが、改造しまくってくださいね。

それではまた!


炭酸野郎

今日も何かを Sagasoonを運用してます。炭酸野郎です。
皆さんの「何か」が探せるべく、記事書いてます。
新卒で中堅SIerに就職→10年ちょいで退職→フリーランス→起業。副業としてのブログに目覚める(今ここ)。
時間作って、色々なことがやりたいお年頃です!

炭酸野郎をフォローする
Programing初心者IT未分類
炭酸野郎をフォローする
SAGASOON

コメント

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