ソフトウェア

はじめに

1. 新しいupload.rbと，upload_fix.rbをダウンロードし，tDiaryのpluginディレクトリにコピーする．左の文中のものも含めて，このページの全てのリンクは新しいファイルになっています．また，upload.rbだけを新しいものに置き換えると，displayメソッドでエラーが出て編集もできなくなります．
2. これまでに書いた日記を全て編集し，上記表にある通りにメソッド名を書き換える．
3. upload_fix.rbを消す．

機能

• 任意のファイルをアップロードし，本文に画像やリンクを貼り付けることができます．
• アップロードしたファイルを別の名前のファイルで上書きすると，リンクに表示するテキストを自動的に書き換えてくれます(省略記法利用時)．
• アップロードした画像のサムネイルや，ファイルのダウンロードボタン等として利用する画像の登録を行えます．残念ながら，サムネイル画像の自動生成には対応していません．
• @secure=trueの場合は，JPEG画像のみのアップロードが可能となります(image.rb互換)．また，オプションの設定により1日にアップロード可能なファイル数の上限や，1個のファイルあたりのサイズの上限を指定できるようになります．

動作環境

tDiary 1.5.4かそれ以降のバージョンが動いている必要があります．

image.rbまたはimage_ex.rbをすでに利用している場合，それらを削除して移行する必要があります．

ダウンロード

upload.rb :
image2upload.rb :

インストールから設定まで

すでにtDiaryは動いているものとして説明します．以下の説明では，tDiaryのインストール先が/home/xxx/public_html/tdiaryであると仮定します．

1. プラグインのインストール

upload.rbを/home/xxx/public_html/tdiary/pluginにコピーします．image*プラグインからの移行の場合は，まずそれらのファイルを削除し，image2upload.rbもあわせて/home/xxx/public_html/tdiary/pluginにコピーしてください．

2. オプションの設定

もし必要であればtdiary.confを編集し，オプションを設定します．設定可能なオプションとその意味は以下のとおりです．

upload.dir

アップロードしたファイルを置くディレクトリを指定します．省略時は'./files/'です．image*プラグインを利用していて，image.dirオプションが未設定であった場合，このオプションを'./images/'にする必要があります．

upload.url

アップロードしたファイルの相対URLを指定します．省略時は'./files/'です．image*プラグインを利用していて，image.urlオプションが未設定であった場合，このオプションを'./images/'にする必要があります．

upload.maxnum (@secure=true時のみ有効)

１日にアップロードできる最大ファイル数を指定します．省略時は1です．

upload.maxsize (@secure=true時のみ有効)

ファイルの最大サイズを指定します．省略時は10000です．

@options['upload.dir'] = './images/'
@options['upload.url'] = './images/'
@options['upload.maxnum'] = 10
@options['upload.maxsize'] = 1000000

※ image*プラグインからの移行について

基本的にはtdiary.confで設定しているimage.*をupload.*に書き直せば移行は完了です．ただし，ファイルの保存先を指定していない場合は，upload.dirとupload.urlオプションを設定してください．ファイルの移動や，過去の日記の書き直し等を行う必要はありません．

3. ファイルの保存先の作成

設定が終わったら，ファイルの保存先となるディレクトリ(フォルダ)を作成します．Webサーバの権限で書き込みが行えるようなパーミッション(属性)になっている必要があります．

作成するディレクトリの名前は，標準では「files」ですので，/home/xxx/public_html/tdiary/filesを作成します．もし，upload.dirオプションで別の名前を指定した場合は，その名前のディレクトリを作成してください．

※ パーミッションの設定の仕方がわからない場合は，Webサーバの管理者に「Webサーバの権限で書き込みが行えるようなパーミッション(属性)に設定する必要があると書いてあったんですが，どうすればよいのでしょうか？」と聞いてください．Webサーバの設定やポリシーに依存する話ですので，一概にこうだとは書けないのです．

使い方

◆ ファイルのアップロード

編集用のページを開いた時，その日付で一つもファイルがアップロードされていないと，編集画面の下の方に次のようなシンプルなフォームが表示されます．

「ファイル指定」右のテキスト入力エリアにファイル名を直接入力するか，[参照...]ボタンを使ってファイルを選択した後，[ファイルの追加]ボタンをクリックすると，ファイルがサーバにコピーされます．

※ 画像ファイルはサーバにコピーされる時点で管理用の別の名前に変更されますので，アップロードするファイルの元の名前は何でもかまいません．一方で，画像ではないファイル(拡張子がjpg,jpeg,gifおよびpng以外のファイル)は元の名前でサーバ上に保存されます．この場合，日本語のファイル名はトラブルの元ですので使えないようになっています．

※ 画像ではない同名のファイルを複数アップロードすると元のファイルは最後にアップロードしたファイルで上書きされます．ファイルを削除すると，その名前のファイルはサーバ上から抹消され，過去の記述が「リンク切れ」になります(エラーにはなりません)．これは「今の私が一番偉い」と名付けられたルールに則った，正しい仕様です．

「ファイルの一覧」では，アップロードしたファイルのうち，画像ファイルだけがまず横一列に並べて表示されます．このときリンク用の画像が登録されていると，左の鉄塔の画像のように，アップロードした画像の左肩にリンク用の画像が小さく表示されます(登録方法は後述)．登録されていなければ，アップロードした画像だけが表示されます．各画像の下にはチェックボックスと画像の識別番号，そして[本文に追加]というボタンが付きます．さらにその下に，画像以外のファイルの一覧が横一列に並べて表示されます．ここには，各ファイル毎に登録されたリンク用画像(もしあれば)，アップロードされたファイル名，チェックボックス・識別番号・[本文に追加]ボタンが表示されます．

◆ ファイルの操作

アップロードしたファイルの操作は，

1. 操作したいファイルのチェックボックスをチェックする．
2. ファイル一覧の下にあるラジオボタンで操作内容を選ぶ．
3. [OK]ボタンをクリックする．

新規ファイルを追加

新しくファイルをアップロードし，リストに加えます．

チェックしたファイルを削除

チェックを入れたファイルを削除します．リンク用の画像ファイルも同時に削除されます．

チェックしたファイルを上書き

チェックを入れたファイルを，指定したファイルで上書きします．ファイル名は上書き前と同じである必要は無く，別の名前のファイルをアップロードすると，デフォルトで表示されるリンクのアンカーテキストも自動的に修正されます．

チェックしたファイルにリンク用の画像を登録

リンク用の画像をチェックしたファイルに登録します．複数のファイルにチェックを入れると，それらすべてに同じ画像を登録します．

チェックしたファイルからリンク用の画像だけを削除

アップロードしたファイル本体は削除せずに，登録されたリンク用の画像ファイルだけを削除します．

◆ 本文への記入

百聞は一見に如かずといいますので，まず実際の本文での記述とそのプレビューを示します．

アップロードしたファイルを本文で表示するためのもっとも簡単な方法は，「ファイルの一覧」内に表示されている[本文に追加]ボタンをクリックすることです．このボタンをクリックすると，画像ファイルの場合は

<%=ul_display 0, '画像の説明'%>

画像以外のファイルの場合は

<%=ul_display 1%>

といった記述が本文の末尾に追加されます．ほとんどの場合はこれで十分だと思います．

- ul_displayメソッド

ul_displayを使うと，引数で指定したファイルが画像ファイルであるかどうか，またリンク用の画像が登録されているかどうかを自動判定し，画像の表示あるいはリンクの生成を自動的に行ってくれます．

基本的なul_displayメソッドの引数は2つです．

<%=ul_display 【識別番号】, 【代替テキスト】%>

第1引数の【識別番号】は必須の項目で，ファイルの一覧に表示される「0」「1」といった識別番号を書きます．第2引数の【代替テキスト】を省略すると，画像ファイルの場合は'image'，それ以外のファイルの場合はアップロードしたファイル名を指定した事になります．画像ファイルのときは<img>タグのalt属性(表示される画像ファイルにマウスカーソルを合わせたときに表示されるテキスト．障害者用のアプリケーションではこの文字を読み上げて画像の説明とする)となりますので，必ず適切な文字列に修正してください．また，第2引数はシングルクォートで囲むのを忘れないようにしてください．

※ 画像以外のファイルにおける第2引数
画像ではないファイルに対して第2引数を指定すると，その意味はリンク用の画像が登録されているかどうかで変化します．

リンク用の画像が登録されている場合

表示されるリンク用の画像の代替テキストになります

リンク用の画像が登録されていない場合

ファイル名の代わりに，この引数で指定した文字列がリンクとして表示されるテキストになります．

ややこしいですね．リンクとして表示する文字列の変更はこのあと説明するul_tlinkを使えば可能ですので，こちらの方法を覚える必要はありません．

- ul_dleft, ul_drightメソッド

上で説明したul_displayメソッドは，書いた位置に画像が表示されます．これに対してul_dleftやul_drightメソッドでは画像の水平方向の表示位置を指定することができます．

<%=ul_dleft 【識別番号】, 【代替テキスト】%>
または
<%=ul_dright 【識別番号】, 【代替テキスト】%>

引数の意味はul_displayとまったく同じですのでここでは説明しません．ul_dleftを使うと，画像が左寄せされ，文字が回りこみます．ul_drightを使うと右寄せになります．このページの「ファイルの一覧」の説明で使っている画面がul_drightを使った例になっています．

- ul_tlinkメソッド

アップロードした画像を日記に直接表示させるのではなく，文字列を使ったリンクを張りたい，あるいはリンク用の画像ファイルが登録されているファイルに対して，(ちょうどこのページのように)本文の中で文字列を使ったリンクを張りたい．といった目的を達成するために用意されているメソッドがul_tlinkです．

<%=ul_tlink 【識別番号】, 【文字列】%>

このメソッドは，【文字列】で指定した文字列を表示して【識別番号】番のファイルへのリンクとします．【文字列】が省略された場合の値は，ul_displayの【代替テキスト】と同じになります．省略記法はリンク用の画像を登録しているが，テキストでリンクを作りたいときに便利です．例えば，このページの概要に表示されている「upload.rb」や「image2upload.rb」というリンクは，

<%=ul_tlink 3%>

などのように記述するだけです．省略記法のもう一つのメリットは，アップロードしたファイル名を上書きしたときに，リンクとして表示されるテキストも自動的に新しい名前に置き換わることです．これをうまく使うと，公開するファイルをバージョンアップするたびに，あちこちに散らばったアンカーテキストを書き換えてまわる必要が無くなります．

<%=ul_tlink 0, 'ムービー'%>

ムービー

２．２．本文にムービーを埋め込む場合

<HTML>
<HEAD>
<TITLE>cuberoll</TITLE>
</HEAD>
<BODY bgcolor="#FFFFFF">
<!-- URL's used in the movie-->
<!-- text used in the movie-->

<OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
 codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0"
 WIDTH=550 HEIGHT=400>
 <PARAM NAME=movie VALUE="cuberoll.swf">
 <PARAM NAME=quality VALUE=high>
 <PARAM NAME=bgcolor VALUE=#FFFFFF>
 <EMBED src="cuberoll.swf" quality=high bgcolor=#FFFFFF  WIDTH=550 HEIGHT=400 TYPE="application/x-shockwave-flash" PLUGINSPAGE="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash"></EMBED>
</OBJECT>

</BODY>
</HTML>

cuberoll.swf → files/cuberoll.swf

<OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
 codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0"
 WIDTH=550 HEIGHT=400>
 <PARAM NAME=movie VALUE="files/cuberoll.swf">
 <PARAM NAME=quality VALUE=high>
 <PARAM NAME=bgcolor VALUE=#FFFFFF>
 <EMBED src="files/cuberoll.swf" quality=high bgcolor=#FFFFFF  WIDTH=550 HEIGHT=400 TYPE="application/x-shockwave-flash" PLUGINSPAGE="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash"></EMBED>
</OBJECT>

連絡先

バグ報告やご意見・ご感想等は下のコメント欄もしくはhs@on-sky.net宛てのメールでお願いします．