MyDiary

2014-09-01 (月)

wDiaryの日記データをHTML化

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

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

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

2014-09-02 (火)

画像


音声・動画

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

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

リンク

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

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

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

2014-09-04 (木)

使い方

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

1. 「HTMLexport.js」ファイルと「_css」フォルダをwDiaryのフォルダに置く
2. 「HTMLexport.js」ファイルをダブルクリックして実行
3. すべての日記フォルダにHTMLが出力される

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

2014-09-06 (土)

オプション

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

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

2014-09-12 (金)

日記を印刷してみよう

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


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

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

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

印刷中…

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

完成です!


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

2014-09-14 (日)

2014-09-15 (月) 敬老の日

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

2014-09-23 (火) 秋分の日

フォルダ構成と入出力

2014-09-26 (金)

出力HTMLの構造

2014-09-27 (土)

対応ブラウザ

・Internet Explorer
・Mozilla Firefox
・Google Chrome

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

2014-09-28 (日)

スクリプトのオプションで日記本文の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(ハイライト)

<sup>~</sup> Superscript 上付き文字
<sub>~</sub> Subscript 下付き文字

水平線




リスト

  • リスト1
  • リスト2
  • リスト3

番号付きリスト

  1. 番号つきリスト1
  2. 番号つきリスト2
  3. 番号つきリスト3

定義リスト

用語1
用語1の説明。
用語2
用語2の説明。
用語3
用語3の説明。

引用

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

項目1 項目2 項目3

2014-09-30 (火)

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

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