Web Diary Professional 機能解説

機能解説

お絵かき関連

携帯関連

画像表示関連

投稿関連

その他

お絵かきアプレットとの連携について

しぃ堂さんのPaintBBS、しぃペインター、しぃペインタープロに対応しているので、ブラウザでイラストを描くことができます。各ペイントアプレットをアップロードすればCGIプログラムが自動的に認識するので、すぐに利用できるようになります。(設置方法が解らなくても、しぃ堂さんへ質問を送ったりしないようにしてください。

PaintBBSへの対応

  1. まず、イラスト投稿アプレットのしぃペインターを別途入手する必要があります。しぃペインターは配布もとのしぃ堂さんからダウンロードしてください。
  2. PaintBBSページから pbbs222_8.zip をダウンロードして解凍します。
  3. diarypro/ に、しぃ堂さんからダウンロードして入手した PaintBBS.jar をアップロードします。(PaintBBS.jarバイナリモードでアップロードしてください。
  4. アップロードが正しくできると、CGIが自動でアプレットを認識します。管理者ページのメニューに『イラスト投稿』が追加されるので、選択するとイラスト管理ページに移動できます。また、イラストを挿入した記事には、イラスト編集画面へのリンクも追加されます。
  5. しぃペインターを使用する場合、diarypro/skin/footer.html(フッタ部分のスキン)からでも、しぃ堂さんへのリンクを張ってください。(リンクは必須です。)

しぃペインター、しぃペインタープロへの対応

  1. まず、イラスト投稿アプレットのしぃペインターを別途入手する必要があります。しぃペインターは配布もとのしぃ堂さんからダウンロードしてください。
  2. しぃペインターページには複数ファイルバージョン と オールインワンバージョン がありますが、複数ファイルバージョン をダウンロードして解凍します。
  3. diarypro/ に、しぃ堂さんからダウンロードして入手した spainter.jarres フォルダとその中身をすべてアップロードします。(spainter.jarバイナリモードでアップロードしてください。
  4. アップロードが正しくできると、CGIが自動でアプレットを認識します。管理者ページのメニューに『イラスト投稿』が追加されるので、選択するとイラスト管理ページに移動できます。また、イラストを挿入した記事には、イラスト編集画面へのリンクも追加されます。
  5. しぃペインターを使用する場合、diarypro/skin/footer.html(フッタ部分のスキン)からでも、しぃ堂さんへのリンクを張ってください。(リンクは必須です。)

お絵かきアプレットからイラストを投稿すると、テキスト投稿画面で $PAINT1 のようなテキストが挿入されますが、この部分にイラストが表示されます。

$PAINT1_l のように、_l (アンダーバーと小文字のエル)を付加すると画像に対して左揃えの指定がされます。同様に、$PAINT1_r のように、_r (アンダーバーと小文字のアール)を付加すると画像に対して右揃えの指定がされます。同様に、$PAINT1_c のように、_c (アンダーバーと小文字のシー)を付加すると画像に対して中央揃えの指定がされます。ちなみに _l_r_c は、それぞれ left(左) と right(右) と center(中央) の意味です。

なお、回り込みは <br clear="all" /> もしくは <br style="clear:both;" /> というHTMLで解除することができます。

また、$PAINT1_path のように _path を付加すると、ファイルのパスをhttp://から取得する事ができます。別途テキストリンクを張りたい場合などに利用すると便利です。

動的パレットの導入について

WonderCatStudioさんの動的パレットを導入すれば、お絵かきアプレットのパレットが高機能になります。(設置方法が解らなくても、WonderCatStudioさんへ質問を送ったりしないようにしてください。

  1. WonderCatStudioさんの「倉庫」→「etc」から「DynPalette.lzh」をダウンロードする。
  2. 圧縮ファイルを解凍すると作成される、palette.js の文字コードを UTF-8N に変換する。(TeraPadの場合、palette.js を開いてから「ファイル」→「文字/改行コード指定保存」を選択し、文字コードで「UTF-8N」を選択してから「OK」を押す。)
  3. palette.jsdiarypro/skin/palette.js に置く。
  4. diarypro/skin/admin_paint.html の最後の方、</applet> の直後に以下のHTMLを追加する。
<div id="palette">
  <script type="text/javascript" src="${INFO_URL}skin/palette.js"></script>
  <script type="text/javascript">PaletteInit();</script>
</div>

これでイラスト投稿時にダイナミックパレットを使用することができます。なお、パレットを利用する場合は著作権表記部分に、WonderCatStudio さんへのリンクを追加しておいてください。一例を挙げると、diary/skin/footer.html(フッタ部分のスキン)にリンクを追加しておきます。

上の手順でパレットを導入できますが、パレット内部のレイアウトはテーブルで行われているため、そのままだと外部CSSの影響を受けてレイアウトが崩れてしまいます。JavaScriptが解れば palette.js を直接編集することも可能ですが、CSSファイルの修正のみで対応する方法を紹介します。方法は diary/skin/common.css に以下のスタイルを追加すればOKです。(CSSは div#canvas への設定直後に追加するといいかも。よく解らなければファイルの最後に追加すればOK。)

div#canvas applet {
  float: left;
}

div#palette * {
  font-size: 13px;
  text-align: left;
}

div#palette table {
  margin: 0px;
  border: 0px solid #000000;
}
div#palette td {
  padding: 1px;
  border: 0px solid #000000;
}
div#palette table tr td table tr td table tr td {
  padding: 5px;
}

div#palette input {
  margin: 1px 0px;
  padding: 1px 0px;

  height: 22px;
}
div#palette select {
  margin: 1px 1px 1px 0px;
}
div#palette textarea {
  width: 120px;

  text-align: left;
}
div#palette .button {
  text-align: center;
}

div#palette font {
  font-size: 11px;
}

また、パレットの枠線などの色設定は、palette.js の初めのほうに設定項目があります。
「設置できたけどどうやって使うの?」という方は、どこかで調べてください。(^^;

PCHViewerの導入について

PCHViewerを利用すれば、しぃペインターで描いたイラストの描画過程を表示できるようになります。ビューアーをアップロードすればCGIプログラムが自動的に認識するので、すぐに利用できるようになります。(設置方法が解らなくても、しぃ堂さんへ質問を送ったりしないようにしてください。

1つの記事にいくつでもイラストを掲載できる仕様上、どんな風にリンクを表示するか迷っていましたが…。イラストの表示と同じように「$PCH + イラスト番号」で表示できるようにしました。ちなみにPCHViewerへのリンクの記述は、PCHViewerをアップロードしておけば、イラスト投稿完了時に自動的に本文に代入されます。

  1. まず、PCHViewerを別途入手する必要があります。PCHViewerは配布もとのしぃ堂さんからダウンロードしてください。
  2. トップページの Downloadしぃペインター リンクからダウンロードページに移動することができます。Viewer にある pchview_123.zip をダウンロードして解凍します。
  3. diarypro/ に、しぃ堂さんからダウンロードして入手した PCHViewer.jarres フォルダとその中身をすべてアップロードします。しぃペインターを使用している場合、既に res フォルダが存在すると思いますが、上書きアップロードでOKです。(PCHViewer.jar はバイナリモードでアップロードしてください。)
  4. アップロードが正しくできると、CGIが自動でPCHViewerを認識します。これ以降、イラスト投稿完了時に自動で $PCH7 のような記述が本文に代入されます。

携帯からのアクセスについて

携帯メールでの投稿について

特定のアドレスに送信したメールを取り込み、記事に反映させる事ができます。もちろん、添付した画像ファイルを取り込む事も可能。メールを送れる環境なら何処からでも投稿できるようになるので、更新を手軽に行えるようになります。

  1. 「管理者用→環境設定→メール更新の設定」で設定可能。
  2. 「投稿用メールアドレス」には送信用のメールアドレスを指定します。ここで指定した以外のメールはすべて、迷惑メールとして扱います。
  3. 設定が完了したら、取得したメールアドレスにパソコンや携帯のメールでからメールを送信します。
  4. diary.cgi?mode=receive にアクセスするとメールを受信します。携帯からも同URLへアクセス可能です。

また、「投稿用メールアドレス」の後に、「,」に続けてユーザー名(管理者ページの「ユーザー管理」で設定したユーザー名)を記述すると、そのユーザーでの投稿とみなされます。具体的には

サンプルフォーム

このように設定します。この場合、aaa@sample.co.jp のアドレスから送信されたメールはユーザー kenbbb@sample.co.jp のアドレスから送信されたメールはユーザー jon からの投稿とみなされます。

ファイルアップロード機能について

日記を投稿する際にファイルをアップロードすると各日記の上部にファイルが表示されますが、本文の途中に表示させることもできます。

アップロードファイルを任意の位置に表示するには、日記を投稿する際まず普通に文章を入力し、普通にアップロードファイルを指定します。そして文章中のファイルを表示させたい場所に $FILE1 と記述します。そうすると、投稿の際『ファイル1』で選択したファイルがその位置に表示されるようになります。
同様にして、$FILE2$FILE5 で『ファイル2』~『ファイル5』も任意の場所に表示させることができます。

文章の途中にアップロードファイルを表示させる場合、具体的には以下のように記述します。

サンプルフォーム

そうすると、以下のように表示されます。

スクリーンショット

また、$FILE1_l のように、_l (アンダーバーと小文字のエル)を付加すると画像に対して左揃えの指定がされます。同様に、$FILE1_r のように、_r (アンダーバーと小文字のアール)を付加すると画像に対して右揃えの指定がされます。同様に、$FILE1_c のように、_c (アンダーバーと小文字のシー)を付加すると画像に対して中央揃えの指定がされます。ちなみに _l_r_c は、それぞれ left(左) と right(右) と center(中央) の意味です。

なお、回り込みは <br clear="all" /> もしくは <br style="clear:both;" /> というHTMLで解除することができます。

また、$FILE1_path のように _path を付加すると、ファイルのパスをhttp://から取得する事ができます。別途テキストリンクを張りたい場合などに利用すると便利です。
また、$FILE1_full のように _full を付加すると、画像ファイルが原寸で表示されます。特定の画像のみ、縮小したくない場合に便利です。

また、$FILE1(写真)$FILE1_c(写真) のように記述すると、画像の代替テキストが 写真 になります。画像表示指定の直後に半角カッコで囲まれた文字を記述すると、画像の代替テキストとして認識されます。

アップロードファイル一覧表示機能について

ミニ画像のアップロードについて

各記事に対して、ミニ画像を1つアップロードする事ができます。なお、アップロードファイル一覧ページは「ミニ画像の添付された記事のみ表示する」という指定もできます。しぃペインターでイラストを描いた記事や写真をアップロードした記事に対し、ミニ画像も一緒にアップロードしておけば、画像のある記事への一覧ページが作成できます。

アップロードされたミニ画像は、ナビゲーション部分に一覧表示させる事ができます。(表示件数は変更可能。)しぃペインターでイラストを描いた記事や写真をアップロードした記事に、ミニ画像も一緒にアップロードしておけば、画像のある記事へのショートカットになります。

repng2jpegの導入について

サーバーにImageMagickがインストールされていない場合、repng2jpegでサムネイル画像を作成する事ができます。(使用方法が解らなくても、菅処さんへ質問を送ったりしないようにしてください。

  1. まず、repng2jpegを別途入手する必要があります。repng2jpegは配布もとの菅処さんからダウンロードしてください。
  2. トップページの CGI配布小物たち リンクからダウンロードページに移動することができます。repng2jpeg 1.0.4resize.pl をダウンロードして解凍します。
  3. resize.zip を解凍して作成される resize.pl.re のファイル名を resize.pl に変更し、diarypro/ にアップロードします。
  4. 次に repng2jpeg_1.0.4.zip を解凍します。複数のフォルダが作成されますが、それぞれの中にサムネイル作成用プログラムが格納されています。環境によって使用するプログラムが異なるので、適切なものを選択して diarypro/ にアップロードします。(repng2jpeg もしくは repng2jpeg.exe がプログラムファイル。選択方法は後述。)
  5. 以降は Web Diary Pro 側の設定。「管理者用→環境設定→投稿記事の表示設定」で「サムネイル専用画像を自動作成」を「repng2jpegで作成」に設定します。
  6. サーバーエラーにならなければ成功です。ImageMagickの代わりにrepng2jpegでサムネイル画像が自動作成されます。

適切なrepng2jpegの選択方法

PerlMagick NG

NetPBM + libjpeg-progs NG
cjpeg -> Not Found
djpeg -> Not Found
pngtopnm -> Not Found
giftopnm -> Not Found
pnmscale -> Not Found

repng2jpeg(i386-solaris) static:OK
libc -> /lib/libc.so.1
libdl -> /lib/libdl.so.1

./repng2jpeg Not Found

Perl :v5.6.1 built for i86pc-solaris
HTTPd:Apache
./repng2jpeg Found
./repng2jpeg Permisson:OK
./repng2jpeg Exec:OK

タグエディタとネタバレボタンの導入について

本文装飾機能について

本文に特定の記号を書くことにより、手軽にマークアップを行うことができます。はてなダイアリーwikiなどで採用されている記法と同じようなものです。(基本的には、はてなと同じような記述方法ですが、全く同じという訳では無いので注意してください。)

本文の具体的な記述方法は、こちらのページをご覧ください。

なお、記法によってはCSSの調整が必要になる可能性があります。表示が乱れたらCSSを修正してください。
標準スキンの場合、diarypro/skin/common.css の最後に以下の記述を追加しておくといいでしょう。

div#diary h5 {
  margin: 10px;
}
div#diary h6 {
  margin: 10px;
}
pre {
  font-family: 'MS ゴシック', monospace;
}
div#diary .text dl {
  margin: 0px 10px 10px 10px;
}
div#diary .text dl dd {
  margin-left: 30px;
}
div#diary .text table {
  margin: 0px 10px 10px 10px;
}

上のCSSは一例なので、好みに応じて適当に修正してください。

本文の省略表示機能について

日記に長文を投稿することが多い場合、日記帳トップページの文字量がどうしても多くなってしまいます。ですが、この機能を利用すれば表示される本文の量を調節し、『続きを読む』リンクからすべての文章を表示させることができるようになります。
また、日記のオチを見せたくない場合にも利用することができます。

このように表示させたい場合、日記本文に ----- と記述します。そうすると、それ以降は省略表示されます。

サンプルフォーム

このような文章を投稿した場合、日記に長文を投稿することが多い場合、日記帳トップページの文字量がどうしても多くなってしまいます。 までが表示され、それ以降は非表示なります。非表示なった文章の直後には 続きを読む というリンクが付加されるので、これをクリックすると続きを読む事ができます。

また、以下のように記述すると、『続きを読む』のテキストをその都度指定することができます。

サンプルフォーム

このような文章を投稿した場合、非表示なった文章の直後には 以下、ネタバレ というリンクが付加されるので、これをクリックすると続きを読む事ができます。

書式は、上のように -----表示したいテキスト----- となります。任意のテキストの前後に - を5つずつ記述します。

記事IDの設定について

投稿時に記事IDを設定しておくと、記事表示用のURLやアップロードファイル名を変更することができます。

記事IDは半角英数字で任意のものを指定することができ、例えばIDに test を設定すると、以下のようになります。

複数の管理者で記事を投稿する方法について

複数の人が日記を投稿する際、投稿者それぞれにIDとパスワードを発行することができます。

管理者宛コメントの投稿について

訪問者が、管理者のみ閲覧可能なコメントを投稿することができます。他の訪問者に対しては非公開になるため、管理者のみにメッセージを送ることができます。

Ver4.42以前のバージョンに付属していたスキンを使用している場合、この機能を利用するにはスキンも一部修正する必要があります。
機能を利用するには diarypro/skin/comment.html にある

<!--FORM_PWD_START-->
<dt>削除キー</dt>
  <dd><input type="password" name="pwd" size="20" value="${FORM_PWD}" /></dd>
<!--FORM_PWD_END-->

この直後に、以下のHTMLを追加します。

<!--FORM_STAT_START-->
<dt>公開設定</dt>
  <dd>${FORM_STAT}</dd>
<!--FORM_STAT_END-->

HTML書き出し機能について

  1. 管理者専用ページの『環境設定』画面に『HTMLファイル書き出しの設定』があるので、そこで機能をONにします。
  2. 管理者専用ページの『サイト再構築』画面で『すべてを構築』を実行すると、各HTMLファイルが作成されます。
  3. 記事を投稿したときやコメントが投稿されると、その記事ページとトップページはHTMLファイルが自動で更新されます。

なお、『各分類をHTMLファイルに書き出し』を『ON』にすると、『書き出す分類の設定』で指定した分類の記事一覧ページをHTMLに書き出すことができます。
トップページから特定の分類ページにリンクする場合などに利用すると、プログラムへの負荷を抑えることができます。

書き出す分類は、初期設定では

./archives/note/index.html,雑記
./archives/days/index.html,雑記::日々の事

となっています。これは『雑記』の記事一覧を ./archives/note/index.html に書き出し、『雑記::日々の事』の記事一覧を ./archives/days/index.html に書き出す、という意味です。この場合、archives ディレクトリ内に、あらかじめ note ディレクトリと days ディレクトリを作成し、パーミッションを707に設定しておく必要があります。
書き出し先は特に制限していないので、./fields/note.html など、他の場所に変更することもできます。

トップページにはナビゲーション(デフォルトのスキンでは、ページの右側に表示されている部分)が表示されていますが、初期設定では記事個別表示の際には表示されません。
ですが、環境設定を変更すれば表示することができます。(ナビゲーションの表示にはJavaScriptが必要です。)

分類コードから分類一覧を表示させる方法について

デフォルトスキンの場合、分類一覧へのリンクは http://www.xxx.com/diary.cgi?field=1 こんな風に分類番号を渡しています。ですが、この番号は分類を追加すると変更になる可能性があります。でもそれだと、分類一覧へ直接リンクを張りたい場合に不便ですし、SEO上も好ましくないです。その対策に http://www.xxx.com/diary.cgi?field=%e9%9b%91%e8%a8%98 こんな風に、URLエンコードした分類名を渡せるようにしています。(機能を使用するにはスキンの編集が必要。)

JSファイル書き出し機能について

日記の一部をJSファイルに書き出し、任意のHTMLファイルから呼び出すことができます。これにより、トップページなどに日記の一部を表示させることができます。

設定は、環境設定画面の『JSファイル書き出しの設定』で行います。『題名一覧をJSファイルに書き出し』と『最近の記事をJSファイルに書き出し』の項目があるので、それぞれONにすると機能が利用できます。

JSファイルの書き出し先は、初期設定では diarypro/data/title.jsdiarypro/data/text.js です。HTMLファイルからこれらのJSファイルを呼び出せば、日記を表示させることができます。JSファイルは以下のように記述して呼び出します。(./diarypro/data/title.js の部分には、各JSファイルへのパスを記述します。)

<script type="text/javascript" src="./diarypro/data/title.js"></script>

なお、JSファイルの文字コードはUTF-8で書き出されます。呼び出しもとのファイルがShift-JISなどで記述されている場合、scriptタグの属性に charset="utf-8" を追加します。具体的には以下のようになります。

<script type="text/javascript" src="./diarypro/data/title.js" charset="utf-8"></script>

これで、JSファイルと呼び出しもとのファイルの文字コードが異なっても、文字化けせずに表示させる事ができます。

なお、JSファイルに書き出す際のレイアウトは、以下のスキンで設定可能です。

JSファイルへの書き出しは、分類別に行う事も可能です。特定の分類のタイトル一覧や本文をJSファイルに書き出せるので、更新情報をサイトトップページに表示させる際に便利です。

インデックスページの設定について

Web Diary Pro にアクセスすると通常は記事が一覧表示されますが、初期ページのみ専用のページを表示させることができます。トップページに目立たせたい情報を掲載したいとき・ブログっぽくないページにしたいとき…などに便利です。

コンテンツの設定について

ナビゲーション部分に、各コンテンツへのリンクを表示することができます。(自サイト内へのリンクを張るための機能ですが、機能としてはリンク集の設定と同じです。)

ナビゲーション部分に、リンク集を表示することができます。(他サイトへのリンクを張るための機能ですが、機能としてはコンテンツの設定と同じです。)

プロフィールの設定について

プロフィールを登録して表示することができます。複数の管理者で記事を投稿している場合、各ユーザーごとにプロフィールを登録することができます。

デザインの変更について