Googleドキュメント(rtf)を任意のhtmlに変換する / 開発者向けブログ・イベント

Googleドキュメントで作成したrtfファイルをHTMLに変換し、任意のクラスを付与する方法を紹介します。
詳細は下記内容をご確認ください。

要約

googleドキュメントで作成されたrtfファイルをHTMLに変換し、任意のクラスを付与する

※実装すべての記述はしません

経緯

文量が多いブログ記事のようなページのため、見出しや本文などのクラスを振り分けて一括でHTMLに変換したい業務があったため個人用にツールを作成しました。

欲しかった機能

原稿からざっくり見出し2, 3, 本文をそのままコピペできる形に変換する
- 見出し2, 3に章ごとの連番でid出力
- 見出し2直下に画像用のコードを出力
太字/アンダーラインなどを固有のクラスをつけたspanで囲む

実装について

Googleドキュメントからダウンロードする際、HTML形式を選ぶとminifyされた状態でファイルが保存されるため、一旦rtfファイルでダウンロードしHTML形式へ変換する工程を挟んでいます。

当初、MacOS標準のtextutilでrtfファイルからhtmlへの変換を行っていましたが、ツール内での操作で完結させたかったため、npmパッケージのrtf.js（ https://www.npmjs.com/package/rtf.js ）を使用しています。

変換後の処理はPHPで行っています。

HTMLを配列に格納

rtfから変換されたHTMLの改行ごとにフォントサイズや太字箇所を判定し、配列へ格納します。

その際に不要なスタイルを削除し、また続いている文章が細切れになっている場合があるので結合します。

//フォントサイズを確認
preg_match('/font-size\:\s([\d]*)/', $value, $matches);
	if(empty($matches)){
		$this_fontsize = '';
	}else{
		$this_fontsize = $matches[1];
		//初出のフォントサイズの場合数値を追加
		if(!in_array($this_fontsize, $arr_fontsize, true)){
			$arr_fontsize[] = $matches[1];
		}
	}

太字箇所がfont-weight:bold;として出力されているため、一旦b要素で囲みます。

これは後に固有のクラスがついたspan要素に変換されます。

if(strpos($value, 'font-weight: bold;')){
	$htmlTag_pattern = '[0-9a-zA-Z\s\'\"\=\-\:\;\(\)\,\.]*';
	$bold_pattern = "<span${htmlTag_pattern}font-weight\: bold;${htmlTag_pattern}>";
	$value = preg_replace("/${bold_pattern}(.*?)<\/span>/", '<b>$1</b>', $value);
	//細切れになっている<b>を結合
	$value = str_replace('</b><b>','', $value);
	$value = strip_tags($value, '<b>');
}

bタグ以外のHTMLを削除し、フォントサイズとともに本文を配列へ格納します。

//太字以外のspanを削除
$value = strip_tags($value, '<b>');

//出力配列に追加
$arr_text_formated[] = [
	'font-size' => $this_fontsize,
	'text' => $value
];

$arr_text_formatedに記事の全体が格納されるため、各要素を見出しや本文などに判定して固有のクラスをつけます。

また見出し2・3には連番でidを振り、アンカーリンクで移動できるようにします。

//例：見出し2の場合
if($this_fontsize == $arr_fontsize[0]){
　	// 固有のクラスを設定
	// 太字設定はは見出し用のクラスで設定されるためbタグは削除する
	$this_text = strip_tags($this_text);
	$text_formated = '<h2 '.$arr_web_class['h2'].' id="article'. $h2_num.'_0">'. $this_text . '</h2>';

	// id用の連番を更新
	$h2_num ++;
	$h3_num = 1;
	$result .= $text_formated;
	continue;
}

任意のHTMLタグ・クラスを設定した見出し・本文は$resultに結合し、file_put_contentsとreadfileでHTMLファイルで出力します。

躓いたところ

前述の通りGoogleドキュメントからダウンロードする際HTML形式を選択すると、すべてminifyされた状態でファイルが作成され、html_entity_decodeしない限り日本語が読めない状態でファイルが保存されるため内容の確認がしづらくなってしまいました。

そのため、rtf形式でダウンロードするのですが、その場合はrtfファイルからHTMLへの変換が必要になります。MacOSの使用者は標準で搭載されているtextutilを使用すればよいのですが、Windowsを使用している人が変換できないためパッケージやライブラリを使いツール内でファイル形式の変換から対応できるようにしました。