Google Apps ScriptとCheerioでSVGの中身を書き換えたら・・・【GAS】

座席表アプリで使うSVGファイルの特定のID達を手動で書き換えていくという作業があったりするのですが、こんなのを手作業でVSCodeでやってるとちょっと発狂したくなるような作業なので、どうにかしたいなと思い考えたのが、Cheerioと呼ばれるスクレイピングなどで大活躍のライブラリがあったので、これを使ってランダムなIDの置き換え作業を出来ないか?挑戦してみました。

Google Apps Scriptでスクレイピングを極める【GAS】

今回利用するスプレッドシートやライブラリ

今回は座席表アプリの1作業を自動化する為のコードなので、以下のエントリーも参考にしてみると良いと思います。

Google Apps ScriptでSVGを使ったイメージマップを操作 - 基礎編【GAS】

事前準備

今回はライブラリを使って操作等をしますのでライブラリの導入や、編集するSVGファイルの中身を確認しておく必要があります。

ライブラリの導入

以前は、HTML Parserライブラリ(1Mc8BthYthXx6CoIz90-JiSzSafVnT6U3t0z_W3hLTAX5ek4w0G_EIrNw)を使うのが主流でしたが、正直言って使いにくい。ので、最近はNode.jsなどでもおなじみのjQuery的にHTMLを処理できるCheerio.gsを使うのが非常に楽に処理できるので、おすすめです。

以下の手順で追加します。

  1. スクリプトエディタを開く
  2. 左サイドバーの「ライブラリ」の+ボタンをクリックする
  3. スクリプトIDに「1ReeQ6WO8kKNxoaA_O0XEQ589cIrRvEBA9qcWpNqdOP17i47u6N9M5Xh0」を追加する
  4. 検索をクリック
  5. 最新バージョンが出てくるので、追加ボタンをクリック。Cheerioで呼び出すことになります。

図:jQueryの使い手ならすぐ使いこなせるよ

編集するSVGファイルの該当箇所

座席表アプリで使ってるSVGファイルの座席ブロックの塊を編集します。

  • aタグで括られたgタグおよびその子要素、孫要素のid部分を書き換えます。
  • 今回のコードは訳合って直接replaceさせるコードになっているので、idは他の文字列と被らないようなユニークな文字列にしておく必要があるので単純すぎるIDだと関係ない場所がreplaceされてしまうので注意(-1-1とつけてるのは被らないようにランダムにつけておくと良いでしょう)
  • gタグのIDはseatA014といったようなスタイルのIDに変更します。
  • rectタグのIDは単純なA014というスタイルのIDに変更します。
  • tspanタグのIDはspanA014というスタイルのIDに変更します。
  • inkscapeはブロックをコピーするとオリジナルのIDに加えてランダムな文字列を加えたIDが自動で付与されるので、ユーザが作成時には意識する必要はありません(最初のブロックだけユニークなIDを付けておけばオッケー)

注意点

replace作業をreplaceメソッドで行うという方法ではなく、Cheerioを使った以下のコードでDOM操作でリプレースしてみたのですが、前述の塊の場合、gタグとrectタグは上手く置き換わるのですが、textタグの子要素であるtspanタグの内容が消えてしまったり、オカシナ事になったりしてファイルの中身が壊れてしまう(おそらくCheerioのバグと思われる)

よって、このコードを使ったIDの書き換えが上手くいかなかったので、replaceメソッドで直接取得した文字列データ内の文字列を置き換える仕様にしています。

1回目置き換え実行は上手くいくのですが、2回目連続して実行するとrectタグのIDは書き換わるものの、その次にあるtextタグの中身がごっそり消えてしまう謎現象で、断念しました。最終的には、以下のコードで変更したBody部分を持ってファイルを上書きする事が出来ます。(Cheerio.gsにはCheerio.htmlというメソッドがなく、loadしたその下にあるのでこのような書き方になります)

文字列をreplaceしてるだけなので、誤動作を防ぐことを考えたら、id=xxxxまで含めてreplaceするように構築すると、無関係の場所を置き換えてしまうのを防げます。其の場合ダブルコーテーションをきちんとエスケープする処理が必要です。

ソースコード

SVGファイルの中身をsvgfileとして取得しておきつつ(これを書き換える)、Cheerio.loadで同じファイルを別途読み込む。CheerioでDOM操作をしてIDを取得したら、同じ文字列に該当する内容をsvgfileの中でreplaceしていくという仕組みです。Cheerio自身では置き換えはさせていません。

inkscapeで最初の1個目のブロックに長いIDをそれぞれ付けておくとコピーするごとにユニークな長いIDが付与され、これまでこれを手作業で置き換えていましたが、この仕組の結果頭から通し番号で指定のスタイルのIDを付与する事が出来ます。

最終的にはDriveAppのsetContentでファイルを上書きさせています。

関連リンク

コメントを残す

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください。