MyDiary

wDiaryの日記データをHTML化

このHTML変換プログラムを使うと、wDiaryで作成した日記データをHTMLファイルに変換できます。HTMLに変換すると、Webブラウザで閲覧したり、印刷したり、日記をWebにアップロードして公開することができるようになります。

見た目もいろいろ変更できます

サンプルではこのように出力されますが、HTMLやCSSを編集することで自由にデザインを変更することができます。

画像

音声・動画

音声・動画は『NHKクリエイティブ・ライブラリー』の素材をお借りしました。
http://www1.nhk.or.jp/creative/

※音声や動画はブラウザによっては再生されません。

リンク

日記本文中のURLなどはリンクとして変換されます。

URL
http://www.cc9.ne.jp/~pappara/

メールアドレス
example@example.com

使い方

※念のため、日記データをバックアップしてから実行することをおすすめします。

・wDiary本体フォルダにスクリプト一式を配置して変換を行う場合
[1] 「HTMLexport.js」ファイルと「_css」フォルダをwDiaryのフォルダに置く
[2] 「HTMLexport.js」ファイルをダブルクリックして実行
[3] すべての日記フォルダ内にHTMLが出力される

・一時作業フォルダを作成してその中で変換を行う場合
[1] HTML変換したい日記フォルダを「HTMLexport.js」と「_css」のあるフォルダにコピー
[2] 「HTMLexport.js」ファイルをダブルクリックして実行
[3] 日記フォルダ内にHTMLが出力される

※セキュリティソフトによってはスクリプトの実行がブロックされることがあります。

日記データの容量にもよりますが変換には多少時間がかかります。
処理後、日記フォルダの中のindex.htmlをWebブラウザ等で開いて閲覧することができます。

出力されたデータは、HTMLを整形したり、CSSを入れ替えたり、ご自由にお使いください。
スクリプトもご自由に編集してお使いください。

オプション

スクリプトの編集で次のような設定ができます。

・１年間の日記を出力
・すべての日記を出力
・サイドバー（カレンダーなど）の表示/非表示
・日記の並びを逆順にする
・日記の一行目を自動的に見出しに変換
・日記本文のHTMLタグを有効にする
・日記の始まりで常に改ページ印刷
など

日記を印刷してみよう

日記を一年単位で出力して印刷してみることにします。年単位のファイルは「2021.html」のような名前になっているのでそれをWebブラウザで開いて、「印刷プレビュー」をクリックしましょう。

↓2013年の日記を印刷

これは「Internet Explorer 11」のブラウザを使っていますが、「Microsoft Edge」や「Google Chrome」や「Mozilla Firefox」などでも同じような手順で印刷できると思います。

印刷プレビューで余白やヘッダ・フッタを調整。
今回は小冊子の設定で、全76ページ÷4＝計19枚印刷する設定にしました。

設定し終わったら、印刷開始！

印刷中…

うちのプリンタだと20分くらいかかりました。1枚1分くらい。

完成です！

今回は「無線綴じ」というとじ方で本にしました。表紙は厚紙で適当に作っています。なかなか良く出来ました^^
※はさみやカッターなどを使うときは気をつけましょう。

見出しが長い場合はこんなふうに表示されます。見出しが長い場合はこんなふうに表示されます。見出しが長い場合はこんなふうに表示されます。見出しが長い場合はこんなふうに表示されます。見出しが長い場合はこんなふうに表示されます。

フォルダ構成と入出力

出力HTMLの構造

対応ブラウザ

・Microsoft Edge
・Internet Explorer
・Google Chrome
・Mozilla Firefox

で表示できることを確認しました。スマートフォンやタブレットでも一応見れます。
※古いバージョンのブラウザだと正しく表示できないかもしれません。

HTMLタグ

スクリプトのオプションで日記本文のHTMLタグを有効にすると以下のような文字装飾などができます。現在は、pタグが変なところに付いたり、ネストを正しく変換できなかったりするので、まだまだ改良の余地あり。

文字装飾

<b>～</b> Bold（太字）
<i>～</i> Italic（斜体）
<u>～</u> Underline（下線）
<s>～</s> Strike（打ち消し線）

<em>～</em > Emphasis（強調）
<strong>～</strong> Strong（強い強調）

<ins>～</ins> Insert（追加）
<del>～</del> Delete（削除）
<mark>～</mark> Mark（ハイライト）

^～ Superscript 上付き^文字
_～ Subscript 下付き_文字

水平線

---

---

---

リスト

• リスト１
• リスト２
• リスト３

番号付きリスト

1. 番号つきリスト１
   
2. 番号つきリスト２
3. 番号つきリスト３

定義リスト

用語１

用語１の説明。

用語２

用語２の説明。

用語３

用語３の説明。

引用

引用文。引用文。引用文。引用文。引用文。引用文。引用文。引用文。引用文。引用文。引用文。引用文。引用文。引用文。引用文。引用文。引用文。引用文。引用文。引用文。引用文。引用文。引用文。引用文。引用文。引用文。引用文。引用文。引用文。引用文。引用文。引用文。引用文。引用文。引用文。引用文。引用文。引用文。引用文。引用文。引用文。引用文。引用文。引用文。引用文。引用文。引用文。

表

項目１	項目２	項目３
値	値	値
値	値	値
値	値	値

HTML・CSS・JavaScript構文チェック

こちらのサイトを使わせていただきました。便利です。

『Markup Validation Service』
http://validator.w3.org/

『CSS Validation Service』
http://jigsaw.w3.org/css-validator/

『CSS LINT』
http://csslint.net/

『JSHint』
http://jshint.com/

参考文献

その他、使った技術や詳しく解説されているサイトなど。

JScript

参考：JScript『Wikipedia』
http://ja.wikipedia.org/wiki/JScript

WSH

参考：Windows Script Host『Wikipedia』
http://ja.wikipedia.org/wiki/Windows_Script_Host

HTML5

参考：HTML5とは？『HTMLクイックリファレンス』
http://www.htmq.com/html5/001.shtml
参考：HTML5『Wikipedia』
http://ja.wikipedia.org/wiki/HTML5

CSS3

参考：CSSの基本『HTMLクイックリファレンス』
http://www.htmq.com/csskihon/
参考：Cascading Style Sheets『Wikipedia』
http://ja.wikipedia.org/wiki/Cascading_Style_Sheets