オープンソースのCDNを使って、WordPressの記事上でJavascriptを動かす(jsDelivr)

オープンソースのCDNであるjsDelivrがWordPressの記事上で動かしたいときにとても便利だったので備忘メモ https://www.jsdelivr.com 調べて、URLをコピーして、HTMLの中に書くだけ これで読み込める。 参考: Epochでリアルタイムグラフを描く リアルタイムグラフで遊ぶ(Epoch)

Epochでリアルタイムグラフを描く

Epochを使って、リアルタイムに動くグラフを描いてみる。 成果物はこちら リアルタイムグラフで遊ぶ(Epoch) Epochとは、チャートを描くツール https://epochjs.github.io/epoch/ 色々描けるが、今回は「Real-time Line」を使って、ドロップダウンリストで作成した式を即座に反映させて描くツールを作ってみる。 CDNからEpochの読込 WordPress上で動かすため、オープンソースのCDNからEpochを読み込む epoch-charting 必要なのは、 「epoch.min.css」「epoch.min.js」「tests.css」の三つ。 minではないjsとcssもあったが、とりあえず今回はminで良い 参考: オープンソースのCDNを使って、WordPressの記事上でJavascriptを動かす(jsDelivr) Epochの基本 基本は、横軸は時間として、yに好きな値を入れてpushする chartの変数に何が入っているかというと、 チャートをどのように描くか、データの中身(data変数で定義)などが入っている data変数の中には、このように定義されている 成果物はこちら リアルタイムグラフで遊ぶ(Epoch) フルコードは以下。かなり冗長になってしまった、、 成果物はこちら リアルタイムグラフで遊ぶ(Epoch)

Google Apps Scriptを使ってタスクをSlackにポストする2(User変数などGAS側の設定からSlackに投稿するまで)

Google Apps Scriptを使ってタスクをSlackにポストする1(Slack Appを作成するまで)の続き GASでコードの貼り付けまで まずは、Google Spread Sheetで、このようなタスクシートを作成する。内容は適当に。 「Tools」>「Script editor」をクリック。 このような画面に飛ぶので、もともと記載のあるfunctionは全て消してしまう。 そして、以下のコードを貼り付ける。 <>内の変数は適宜変更ください。 slack tokenの変数名は適当に名前をつけてください。 日付の計算が難しく、冗長になってしまった。。 slack token変数設定 貼り付けたら、先ほどのslack tokenの変数名の設定をする。 パスワード系の変数は、コードに直接書きたくないので、User変数として定義する。 「File」>「Project properties」をクリック。 変数定義する前に、project名をつけろと言われたら設定する。 「User properties」>「Add row」とクリック。 先ほど定義した変数と、tokenの値を入力して「Save」。 実行許可 実行関数「mainFunction」を選択する。 「Authorization required」と言われるので許可をする。 許可するアカウントを選んで進めていく。 実行 slackのポストするチャンネルで、作成したBotをinviteする。(「/invite 【ボット名】) GASのページの三角マーク(▶︎)より実行する。 無事に、未完了の直近タスク(1週間後までのタスクのうち「done」が付いていないタスク)だけがslackにポストされる。 以上

Google Apps Scriptを使ってタスクをSlackにポストする1(Slack Appを作成するまで)

Google Apps Scriptを使ってSpreadsheetの以下のようにまとめられたタスクのうち、1週間以内に期限が来るものをSlackにポストする ゴールイメージ 手順 https://api.slack.com/appsにアクセスする。 「Create New App」をクリック。適当な名前とワークスペースを選択して、New Appを作成する。 「Bots」を選択し、Botを作成する。 先ほどの画面(「Settings」>「Basic Information」)に戻り、「Install your app to your workspace」の右の三角を展開、「Install App to Workspace」より、インストールをする。 また、先ほどの画面(「Settings」>「Basic Information」)に戻り、「Manage distribution」の右の三角を展開、「Distribute App」をクリックする。 「Manage Distribution」の画面に飛ぶので、「Add OAuth Redirect URLs」の右の三角を展開、「Set Up Redirect URLs」をクリックする。 一応適当なURLを入れて、「Save URLs」で保存。 あとで使うので、「OAuth Access Token」と「Bot User OAuth Access Token」をコピーしておく。 「Manage Distribution」の画面に戻り、「Remove Hard Coded Information」の右の三角形を展開、チェックボックにチェックを入れる。 すると、「Activate Public Distribution」のボタンがActiveになるのでクリックする。 同じ「Manage Distribution」の画面を下にスクロールし、「Submit to the Slack…

WordPressの特定のページでJavascriptを動かす

WordPressの特定のページでJavascriptを動かす。 色々やり方があるようですが、一番簡単なのはプラグインを入れることかと! 私はこちらを使用。 インストールすると、ページの下部に「CJT Block」の項目ができるので「Create」をクリック。 https://ja.wordpress.org/plugins/css-javascript-toolbox/   もっと良いやり方があるかもしれないが、自分は「script」タグから入れている。(エラーがでるが無視) 以下コピペ用。 「Save」ボタンを押すのを忘れずに。 そして、ページの「Text」に以下の通り書いておけば、このページ内で呼び出すことができる。 click ここ