こんにちは、虎の穴ラボ インフラエンジニアのhk220です。
今回は、「GoogleSitesをMarkdownに変換するChrome拡張機能を作ってみた」と題して、Google SitesのページをMarkdown記法に変換する作業をアシストするChrome拡張機能「GoogleSitesToMarkdown」について紹介します。
この記事は、 虎の穴ラボAdvent Calendar 2022の5日目の記事です。
はじめに
虎の穴ラボのインフラエンジニアチームでは、WikiとしてGoogle Sitesを使っています。 Google Sitesで作るWikiには、表が組めないことや使えるデザインがシンプルすぎることといった特徴があります。 インフラエンジニアチームのWikiとして最初は良かったものの、情報がWikiにまとまっていくにつれて、これらの特徴が制約となってきました。
そこで、Markdown記法を使ったWikiに移行したいという話が出ました。 つまり、Google Sitesにある情報をいかにMarkdown記法を使ったWikiに移行するか検討する必要が出てくることになります。
移行方法を検討する中で、Google SitesはAPIに対応していないため、変換ツールを作って一気に変換するという手法は取れないことが分かりました。 また、SeleniumやPuppeteer、Playwrightといったブラウザ自動化を使って変換する方法も検討しましたが、これらのツールではGoogleの認証が通らないという問題があることも分かりました1。
そうなると、ページごとに人力で移行するしかない！となるわけですが、さすがに何のアシストもなく人間がポチポチと移行するのはとても辛いです。 そこで、私たちはGoogle SitesのページをMarkdown記法に変換する作業をアシストするChrome拡張を作成しました。
このChrome拡張機能を使うことにより、人力の移行作業を多少効率化できるようになりました。
GoogleSitesToMarkdownの紹介
GoogleSitesToMarkdownは上で述べましたとおり、Google SitesのページをMarkdown記法に変換することをアシストするChrome拡張機能です。
Chrome Web Storeに公開済みで、下記よりインストールできます。
また、ソースコードを公開しているため、どのように実装されているのか見ていただく事もできます。
インストール後、以下の手順でGoogle SitesをMarkdownに変換することができます。
- 拡張機能の設定でGoogleSitesToMarkdownのアイコンをツールバーに出すようにします。
- Markdownに変換したいGoogle Sitesのページにアクセスします。
- GoogleSitesToMarkdownをクリックします。
- お好みのテキストエディタに貼り付けます。
GoogleSitesToMarkdownでできること
GoogleSitesToMarkdownでは、下記のことに対応しています。
- Google Sitesの見出しをMarkdownの見出し記法に変換できます。
- Google Sitesの順序付きリストや箇条リストをMarkdownの記法に変換できます。
- Google Sitesのコードブロックを、Markdownのコードブロック記法に変換できます。
- Google Sitesの通常のテキストを、Markdownの記法に変換できます。
大体のGoogle Sitesのエディタ機能には対応できているはずです。
GoogleSitesToMarkdownでできないこと
一方で、現状ではGoogleSitesToMarkdownは下記のことに対応していません。
- 画像のコピーに対応していないため、画像をGoogleSitesToMarkdownを使って移行することはできません。
<br>や<b>や<span>といった、文章を改行または修飾するタグに対応していません。（対応予定）- Google Sitesのページに埋め込まれたHTMLを移行することはできません。
- Google Sitesのページに埋め込まれたアプリを移行することはできません。
いくつかは仕組み上、難しいところもありますが今後対応できればと考えています。
GoogleSitesToMarkdownの仕組み
GoogleSitesToMarkdownは、現在Chrome上に表示されているページのHTMLを解析し、Markdownに変換しています。
具体的には、ある特定のクラスを持つ<div>を起点にその子要素を解析してMarkdownに変換し、クリップボードに書き込むJavaScriptのコードをページに注入することで実現しています。
どのように実現しているかは、上記のリポジトリのcontent_script.jsのコードを見ていただくのが良いかと思います。
今後の予定
現状の対応状況でも私たちが使う分には十分な機能を持っているのですが、今後下記の対応を進めていく予定です。
文章を改行または修飾するタグに対応
<br>や<b>や<span>といった、文章を改行または修飾するタグに対応する予定です。
折角、簡単にMarkdownに変換できたとしても文字の修飾をもう一度手動でやるのはつらいです。この機能の対応は現在進めています。
ショートカットキーによるMarkdownのクリップボードへの保存
現在の実装では、クリップボードへの保存にGoogleSitesToMarkdownのアイコンをクリックする必要があります。
この作業は毎回マウスで操作する必要があるため、めんどくさいです。
将来の実装では、Ctrl+U（macOSの場合はCmd+U）といったショートカットでクリップボードへの保存をできるようにする予定です。
まとめ
Google SitesのページをMarkdown記法に変換する作業をアシストするChrome拡張「GoogleSitesToMarkdown」について紹介しました。
まだ私たちのWikiの移行は計画段階ですがこのようなツールがあることにより、すべて手動で進めるよりもMarkdownへの移行コストを低く見積もることができるのではと考えています。
明日はH.Hさんによる記事の投稿を予定しています。
P.S.
採用
虎の穴では一緒に働く仲間を募集中です！
この記事を読んで、興味を持っていただけた方はぜひ弊社の採用情報をご覧下さい。
yumenosora.co.jp
LINEスタンプ
エンジニア専用のメイドちゃんスタンプが完成しました！
「あの場面」で思わず使いたくなるようなスタンプから、日常で役立つスタンプを合計40個用意しました。
エンジニアの皆さん、エンジニアでない方もぜひスタンプを確認してみてください。
store.line.me
