≒ ブログテーマ変更の件

前のエントリでこのブログのテーマを変更すると書いていたのだけれど、ほぼ形になったので経緯を備忘録。結構試行錯誤して、ほとんどカスタマイズせず出来合いのテーマに変更するだけなのに2日もかかった。

最初の方針変更

Twenty Seventeenをそのまま使って、ヘッダー部分だけ手持ちのCanvasアニメーションに差し替えようとしたんだけど、Twenty SeventeenにはCanvas配置のdefault機能は無いので、スクリプトでCanvas書いて、元々テーマの方で設定してあるimgのsrcへtoDataURL(“image/png”)で流し込むくらいしか方法が無い。ゴリゴリのWebGLアニメなんでthree.jsも使ってるし、当然クソ重い処理になるのは必定w　妥協して何秒か何分か毎に、裏で走らせてるCanvasアニメのスクショをとって差し替えるという案も考えたんだけど、妥協しすぎw　最終的に断念した決定打は、この仕組みだとページ遷移ごとに「three.js読み込み、その後の俺のスクリプト読み込み」「データ処理(座標計算とか)」が終わってやっとアニメーションが始まるということ。wordpressはSPAとかじゃないから、ページ遷移ごとに最初からスクリプトが走っちゃう。ブログに来たらアニメーション開始、そのまま離脱するまでページ遷移してもアニメは連続してる、というのがしたかったんだけどやり方が見つからなかった。いや、出来そうな方法は思いついたけどphp弄ってカスタマイズする方向だったので断念。正直出来る出来ないじゃなくていまさらもうphpは弄りたくないw

続いての試行錯誤

「もう良いや。この手持ちのスクリプトは別のページに置いてあってアクセスできるんだし、動画にしよう。このブログに動画上げたことないし、そうだ、YouTube使ってみよう。負荷分散になるし、その結果どのレベルで動画が見れるのかも検証してみたいし。」と思って次にぶつかったのが「スクリプトを走らせてるブラウザの動画を取る」だった。結末があほらしいのでこのエントリこれ以降は読まなくてもOK。

まずWhammy.jsを使おうとした。他の使い方もあるのかも知れないけど、このライブラリは「ブラウザの画面内でCanvasアニメを描画し、同じ画面内にそのアニメを変換したWebM動画を表示したり、変換後のWebM動画のダウンロードリンクを張ったり」するためのものだと理解した。俺は単に自作のCanvasアニメを動画データにしたいだけ。断念。

次にググりまくって見つけたのがChromeの拡張機能Screencastify。これは期待通り録画はできた。けどマウスカーソルが消えんw　過去の紹介記事だと消す設定もあるみたいなんだけど皆結構古い記事で、今の設定メニューと見た目も違う。探しまくっても結局設定項目が見つからなかった。なお、手で操作して動かしてるところを撮るのもかっちょ悪いんで、自動操作プラグインなんかも色々探した、クリック操作の記録・再生はどのプラグインやソフトも優秀なんだけど今回必要なドラッグ操作の記録がどれも上手くできん。結局これも断念して「かっちょ悪」く手で動かしてる。

結末

泣き乍らググり続けてたら「win10の標準機能のスクショ優秀」「ゲームバーウィンドウ録画良い」の声がチラホラ。まさか。そんな結末が!?

良かったんですねー。choromeでスクリプト走らせて(上のリンクのスクリプトとはちょっと変えてある。チェックボックスとかメアドリンクとかは表示させたくないから)、それからF11でフルスクリーン、winキー+Gでゲームバー立ち上げ、後は録画開始、操作して希望のアニメーションをさせて、録画終了、以上。カンターン。なおカーソル非表示を初め、録画レートやその他の詳細な設定はwin10の「設定」「ゲーム」の中にある。簡単な設定はゲームバー自体の設定画面でできる。

その他

プライバシーポリシー要変更のアラートが来た。外部メディア埋め込みって初めてやったから、それを検知してアラートしてくれた。「他サイトからの埋め込みコンテンツ」項目だって。提案テキストもほぼそのまま使える。カスタマイズしないで使うwordpressと公式テーマは優秀。変えてよかった。不満はヘッダー動画のリンク。これはこの部分はYouTube埋め込みなんでwordpress関係ないけど、動画をクリックすると再生/pauseのトグルになる。それは仕方ないかもしれないけど、マウスオーバーで現れるYouTubeロゴをクリックしても再生/pauseのトグルになっちゃう。動画のYouTubeページにはどうやったら行けるの?と思ったら動画「右」クリックでメニューが出て、「動画のURLをコピー」ができる。直接飛ぶリンクは無い。直感的じゃないよね。近い将来改善されることを期待する。以上、変更終了!

6/24追記
YouTube悪くなかった。wordpressのレイヤーが邪魔をして、YouTube埋め込み部分が設計通りのUI性能を発揮できていないだけだった。
広告の横長大バナーがヘッダーの下部に自動広告で入れられてるんだけど、Googleさんはそのためにそのwordpressのレイヤーをこじ開けている。
その部分にYouTube埋め込みのYouTubeロゴを持って行って、それからクリックすると期待通り動画のYouTubeページが開く。
でもwordpressに改善してって言うべきなのかは疑問。そのレイヤーなくしちゃうと今度はブログのロゴがクリックできなくなっちゃう。
まあやり方は色々あるけど、もういいや。めんどくせえ。

18年6月22日(金)‡11時33分09秒 ‡ ただの自分向けメモ