【はてなブログ】テーマストア自動更新ツールをアップデートする
今度は仕様変更でもなければ大丈夫…多分(; ･`ω･´)
noranuko13/hatena-theme-base
この記事を書いたのが2019年06月なので、ぼちぼち2年経過することになります。時が経つのは早いものです。
もっとも2020年2月の時点ではてな側から403が返ってきていたので使えませんでした。まああの状態で直接POSTできるというのもどうなんだろうと思っていたので、心境的にはMinecraftのバグを利用して動かしていた工場が使えなくなった程度のものです。
問題はこちら。
使用していたあらゆるライブラリはDeprecatedを訴え、request-promiseどころかSassまでもが「Dart Sassに移行してね！」とおっしゃる始末。時が経つのは早いものです。
技術ブログのダークモード対応もタグ追加も考えていて、このツールが使えないと更新もだるい、いよいよ重い腰を上げて対応しないといけない…ということで早速取り掛かることに。
開発中のあれこれ
ブラウザを操作する方向へ方針転換
当初の設計はheaderやformの情報を用意して直接リクエストを投げる、というものでした。これをヘッドレスブラウザを操作して更新するように修正しました。
POSTする情報の調査も抜け漏れの心配も要りませんし、仮に仕様変更が実施されてもURLやフォームのID変更が精々でしょう。ブラウザの操作には最近噂のPuppeteerを採用しました。
『Playwright vs Puppeteer』系の記事は検索すれば山程出てきますし、今回の用途だとぶっちゃけどちらでも然程変わらないのですが、Playwrightがまだまだ青くて追っていくのは大変そうなのでPuppeteerで。
少々ハマったのがテキストボックスやテキストエリア内のデータを更新する時の書き方。
async replaceFormText(selector, text) { await this.page.$eval(selector, (e) => { e.value = ''; }); await this.page.$eval(selector, (e, c) => { e.value = c; }, text); }
noranuko13/hatena-theme-base/scripts/core/kugutsushi.js
page.type()だとそれなりに早いスピードではありますが、あくまでタイピングでデータを入力していきます。page.$eval()を使用すれば瞬時に値を代入できますが、単純にtextを渡してもUnhandledPromiseRejectionWarningが出て上手くいきません。
まあGitHubやStack Overflowを見れば全部語られてるのでリンクを貼っておきます。
説明にリビジョンを追加
ローカル環境やCircleCIで開発をして、実際に動かして正常終了まで漕ぎ着けて、テーマストアの画面で更新されたか確認する…以下、これの繰り返しであります。ええ、リビジョンくらい埋め込まないと更新されたか判別するのが面倒なのです。
元々GitHubとCircleCIの使用を前提としているので、gitがインストールされている環境を想定しています。わざわざ存在チェックしてませんが、本当はあった方がいいのかもしれません。
git rev-parse --short HEAD
noranuko13/hatena-theme-base/scripts/core/utils.js
内部的にはこのコマンドを実行しているだけなので、不要であれば削除すれば良いですし、修正すれば日時や変更内容なども表示は可能でしょう。
dotenvの導入
余計なライブラリを含めたくないとは思いつつ、環境変数周りは誤コミットや誤設定による事故も心配です。dotenvほどのモジュールであれば今後も安泰だろうということで。
もう一つの理由はPuppeteerの動作を切り替えたかったからです。 CircleCIでPuppeteerを動かすにはDockerイメージとブラウザ起動時に指定するオプションの変更が必要です。
一方で開発環境でスクリプトの動きを確認する際は、ブラウザが見えている状態で確認できた方が都合が良いです。なので環境変数で切替が行えるように修正を行いたかった訳です。
const options = Env.htbEnv === 'ci' ? { args: ['--no-sandbox', '--disable-setuid-sandbox'] } : { headless: false };
noranuko13/hatena-theme-base
今までのようにいちいちsetするのは手間なので、.envファイルを作成して使うようにします。
開発サーバー起動スクリプト
お世話になったWeb Server for Chrome。
依存先は少ない方がいいだろうということで、こちらもnodejs.orgで紹介されている静的ファイルの配信方法をカスタマイズします。
BrowserSyncの導入も考えたのですが、httpsのサイトで導入しようとすると少々面倒そうでした。技術的には可能だが余計なものが増えまくるということで、もう少しスマートな方法が見つかってからにします。
おわりに
これでやっとスタート地点です。また半年くらい様子を見て大丈夫そうだったらv1.0.0かなぁという感じです。
これだけ放置しているとブログの書き方も忘れています。リファクタ前提で後で画像や文体など修正するでしょうが、適当にこの辺りで切り上げときます。