Google Documents Importerとは？

Zendesk Guideの記事投稿方法として現在提供されているのは、WYSIWYG Editorのみとなっており、細かいところはHTML Source Editorを使って編集をしたりする必要がありました。 Google Documents Importerを使うと、Google Documents上で書いた記事をZendesk Guideにインポートすることができ、簡単にZendesk Guideへの記事投稿ができるようになります。

使い方

How do I sign up? – Zendesk SupportのGoogle Formより申し込み、有効化されると、Zendesk Guideに下記のImport Articlesのメニューが追加されます。

f:id:toru-takahashi:20180326113318p:plain

自分のGoogle AccountにConnectすると、Google Driveからインポートしたいドキュメントを追加することができます。（3月26日時点では、このGoogle Documents Importerはベータ版のために、Google Driverの権限を与える際にワーニングが発生しますが、ベータなので無視しておきます。）

あとは、流れに従って追加していくだけです。複数ドキュメントを一括にインポートできます。

f:id:toru-takahashi:20180326113811p:plain

どのようにインポートされるか？

下記のようなGoogle Docsを用意して、インポートを行なっています。 (SELECT ...の部分がSyntax Highlightしているのは、Code Blocks - Google Docs add-onのアドオンを利用しています。)

f:id:toru-takahashi:20180326114102p:plain

結果は下記のようになりました。

f:id:toru-takahashi:20180326114230p:plain

HTMLをみてみる

ドキュメントにも記載の通り、最終的なレイアウトはZendesk GuideのCSS/JSの設定によって変わります。しかし、元となるHTMLはどうなっているでしょうか？下部にコードを掲載しておきます。

対応関係を簡単にまとめてみます。

Googleのドキュメント名 => Zendesk Guideの記事タイトル
Title => pタグ (font sizeがlargeのcss)
SubTitle => pタグ (font sizeがmediumのcss)
見出し1 => h1タグ
見出し2 => h2タグ
見出し3 => h3タグ
見出し4 => h4タグ
Syntax Highlight箇所は、Tableとして表現。各文字の色はそれぞれspanで色を表現。（もともとのGoogle Docs側もテーブルのため問題なし。）
Table => Tableで表現されるが、Google Docs側にHeaderの表現ができないため、Headerの表現ができない
リスト => リスト自体は表現されるが、ネストされたリストは表現できない
画像 => 自動でZendeskのarticle側に添付してくれる

まとめ

Google Docsで書く際には、見出し1 ~ 4を使って書くのが良さそう。テーブルやリストを書く際には、ネストされたリストや複雑なテーブルの表現が難しいので、修正が必要。また、コードを書くようなケースでは、表現方法をかんがえましょう。

あと自動で設定されるCSSのクラス(wysiwyg-xxx)が、Zendesk Guideのstyle.cssになかったので、この辺りはベータ中に色々変わるのだろうかと思ったり。ベータ版が終わったらうまく上書きするように変えてもいいのかなーと思ったり思わなかったり。

取り込んだソース

<p id="h.4r089er6zusp" class="wysiwyg-color-black wysiwyg-font-size-large wysiwyg-text-align-left"><span class="wysiwyg-color-black wysiwyg-font-size-large">Hello Title</span></p>
<p class="wysiwyg-color-black wysiwyg-font-size-medium wysiwyg-text-align-left"> </p>
<p id="h.8qw7l01mbfu6" class="wysiwyg-color-black60 wysiwyg-font-size-medium wysiwyg-text-align-left"><span class="wysiwyg-color-black60 wysiwyg-font-size-medium">Hello SubTitle</span></p>
<p class="wysiwyg-color-black wysiwyg-font-size-medium wysiwyg-text-align-left"> </p>
<h1 id="h.m1rkz1dh5nj2" class="wysiwyg-color-black wysiwyg-text-align-left"><span class="wysiwyg-color-black wysiwyg-font-size-large">Hello H1</span></h1>
<h2 id="h.efnle23uaa1v" class="wysiwyg-color-black wysiwyg-text-align-left"><span class="wysiwyg-color-black wysiwyg-font-size-medium">Hello H2</span></h2>
<p class="wysiwyg-color-black wysiwyg-font-size-medium wysiwyg-text-align-left"> </p>
<h3 id="h.nd4w4lu288t4" class="wysiwyg-color-black70 wysiwyg-text-align-left"><span class="wysiwyg-color-black70 wysiwyg-font-size-medium">Hello H3</span></h3>
<p class="wysiwyg-color-black wysiwyg-font-size-medium wysiwyg-text-align-left"> </p>
<h4 id="h.mebw9vifirra" class="wysiwyg-color-black60 wysiwyg-text-align-left"><span class="wysiwyg-color-black60 wysiwyg-font-size-medium">Hello H4</span></h4>
<p class="wysiwyg-color-black wysiwyg-font-size-medium wysiwyg-text-align-left"> </p>
<p class="wysiwyg-color-black wysiwyg-font-size-medium wysiwyg-text-align-left"><span class="wysiwyg-color-black wysiwyg-font-size-medium">Hello</span></p>
<p class="wysiwyg-color-black wysiwyg-font-size-medium wysiwyg-text-align-left"> </p>
<p> </p>
<table>
<tbody>
<tr>
<td colspan="1">
<p class="wysiwyg-color-black wysiwyg-font-size-medium wysiwyg-text-align-left"><span class="wysiwyg-color-orange70">SELECT</span><span class="wysiwyg-color-black10"> code, </span><span class="wysiwyg-color-orange70">COUNT</span><span class="wysiwyg-color-black10">(</span><span class="wysiwyg-color-red80">1</span><span class="wysiwyg-color-black10">) </span><span class="wysiwyg-color-orange70">as</span><span class="wysiwyg-color-black10"> cnt<br /></span><span class="wysiwyg-color-orange70">FROM</span><span class="wysiwyg-color-black10"> www_access<br /></span><span class="wysiwyg-color-orange70">GROUP</span><span class="wysiwyg-color-black10"> </span><span class="wysiwyg-color-orange70">BY</span><span class="wysiwyg-color-black10"> </span><span class="wysiwyg-color-red80">1</span></p>
</td>
</tr>
</tbody>
</table>
<p class="wysiwyg-color-black wysiwyg-font-size-medium wysiwyg-text-align-left"> </p>
<p class="wysiwyg-color-black wysiwyg-font-size-medium wysiwyg-text-align-left"> </p>
<p> </p>
<table>
<tbody>
<tr>
<td colspan="1">
<p class="wysiwyg-color-black wysiwyg-font-size-medium wysiwyg-text-align-left"><span class="wysiwyg-color-black wysiwyg-font-size-medium">Header</span></p>
</td>
<td colspan="1">
<p class="wysiwyg-color-black wysiwyg-font-size-medium wysiwyg-text-align-left"><span class="wysiwyg-color-black wysiwyg-font-size-medium">Header</span></p>
</td>
<td colspan="1">
<p class="wysiwyg-color-black wysiwyg-font-size-medium wysiwyg-text-align-left"><span class="wysiwyg-color-black wysiwyg-font-size-medium">Header</span></p>
</td>
</tr>
<tr>
<td colspan="1">
<p class="wysiwyg-color-black wysiwyg-font-size-medium wysiwyg-text-align-left"><span class="wysiwyg-color-black wysiwyg-font-size-medium">Body</span></p>
</td>
<td colspan="1">
<p class="wysiwyg-color-black wysiwyg-font-size-medium wysiwyg-text-align-left"><span class="wysiwyg-color-black wysiwyg-font-size-medium">Body</span></p>
</td>
<td colspan="1">
<p class="wysiwyg-color-black wysiwyg-font-size-medium wysiwyg-text-align-left"><span class="wysiwyg-color-black wysiwyg-font-size-medium">Body</span></p>
</td>
</tr>
<tr>
<td colspan="1">
<p class="wysiwyg-color-black wysiwyg-font-size-medium wysiwyg-text-align-left"><span class="wysiwyg-color-black wysiwyg-font-size-medium">Body</span></p>
</td>
<td colspan="1">
<p class="wysiwyg-color-black wysiwyg-font-size-medium wysiwyg-text-align-left"><span class="wysiwyg-color-black wysiwyg-font-size-medium">Body</span></p>
</td>
<td colspan="1">
<p class="wysiwyg-color-black wysiwyg-font-size-medium wysiwyg-text-align-left"><span class="wysiwyg-color-black wysiwyg-font-size-medium">Body</span></p>
</td>
</tr>
<tr>
<td colspan="1">
<p class="wysiwyg-color-black wysiwyg-font-size-medium wysiwyg-text-align-left"><span class="wysiwyg-color-black wysiwyg-font-size-medium">Body</span></p>
</td>
<td colspan="1">
<p class="wysiwyg-color-black wysiwyg-font-size-medium wysiwyg-text-align-left"><span class="wysiwyg-color-black wysiwyg-font-size-medium">Body</span></p>
</td>
<td colspan="1">
<p class="wysiwyg-color-black wysiwyg-font-size-medium wysiwyg-text-align-left"><span class="wysiwyg-color-black wysiwyg-font-size-medium">Body</span></p>
</td>
</tr>
</tbody>
</table>
<p class="wysiwyg-color-black wysiwyg-font-size-medium wysiwyg-text-align-left"> </p>
<p class="wysiwyg-color-black wysiwyg-font-size-medium wysiwyg-text-align-left"> </p>
<ul>
<li><span class="wysiwyg-color-black wysiwyg-font-size-medium">List1</span></li>
<li><span class="wysiwyg-color-black wysiwyg-font-size-medium">List2</span></li>
</ul>
<ol start="1">
<li><span class="wysiwyg-color-black wysiwyg-font-size-medium">Number1</span></li>
<li><span class="wysiwyg-color-black wysiwyg-font-size-medium">Number2</span></li>
</ol>
<p class="wysiwyg-color-black wysiwyg-font-size-medium wysiwyg-text-align-left"> </p>
<p class="wysiwyg-color-black wysiwyg-font-size-medium wysiwyg-text-align-left"> </p>
<p class="wysiwyg-color-black wysiwyg-font-size-medium wysiwyg-text-align-left"><img src="https://support.treasuredata.com/hc/article_attachments/360001315088/image-0.png" alt="" /></p>