Cute Diary v0.2の設置法
Cute Diary v0.2をDLしていただき、ありがとうございます。

CGIの設置初心者の方を対象にしたものなので、設置経験がおありの方には回りくどい書き方になっています。適当にすっ飛ばしてお読みください。

設置法のご案内はSimpleバージョンを対象に行ないます。他のご案内も、各項目毎に行います。該当箇所をご参照ください。

Cute Diary v0.2が、あなたのサイトの彩りになれば幸いです。
Copyright(C) Aikon's CGI Kitchen
http://aikon.milkcafe.to/ 

Cute Diary v0.2の設置手順  不明な項目をクリックしてください
Perlのパスの変更  属性の変更  ERROR  カスタマイズ 
cute_diary.cgiの設定  アップロードディレクトリの設定

* The First Phase *
Perlのパスの変更
■ Perlのパスの変更

スクリプトの一行目を見てください。
#!/usr/local/bin/perl と書いてあります。これがPerlのパスです。

大方のサーバは#!/usr/local/bin/perl になっていますが、違う所もあります。このパスは、サーバーが提供するCGI設置情報に必ず掲載されていますから、よくご確認ください。

▲ MENU ▲


* The Second Phase *
属性の変更
■ 属性の変更

Perlのパスを変更したら、取り敢えず、アップロードしてみましょう。(画像はバイナリモード、それ以外のものはアスキーモードです。)
全てのファイルアップが終了したら、属性の変更を行います。

>>>CGIと画像を同じ場所に置けないサーバーの場合<<<
public_html (ホームディレクトリ)
  |
  |-- / cute_diary / cute_diary.cgi [755] 本体スクリプト
  |               jcode.pl [644] 日本語変換ライブラリ
  |               cgi-lib.pl[644] File up用ライブラリ
  |
  |             / cutelog [777] / ログファイル(自動生成)
  |
  |-- / homepage / img_g [755] / point.gif, pen.gif...
  |             / image [777] / 添付ファイル収納フォルダ
            

>>>CGIと画像を同じ場所に置けるサーバーの場合<<<
public_html (ホームディレクトリ)
  |
  |-- / cute_diary / cute_diary.cgi [755] 本体スクリプト
  |               jcode.pl [644] 日本語変換ライブラリ
  |               cgi-lib.pl[644] File up用ライブラリ
  |
  |             / cutelog [777] / ログファイル(自動生成)
  |
  |             / img_g [755] / point.gif, pen.gif...
  |             / image [777] / 添付ファイル収納フォルダ
            
 

DLされたままの属性は[644](フォルダは[755])です。
括弧内に書かれた数字に変更してください。

[755]や[777]を禁じている所もありますので(最近は禁じている所の方が多いかも…)、その場合は、サーバーが出しているCGI設置に関する情報をよくお読みください。

Forbidden - You don't have Permission deniedというエラーは、この属性変更が正しく行なわれていないケースが殆どです。

アイコンや背景画像用のフォルダはそれぞれ別個に作成した方がページ管理をしやすいと思いますが、ひとつにまとめてしまっても差し支えありません。

同梱のimgフォルダ名は、img_cocoa、img_slというように、サンプルによって名称を分けています。名称変更をされても構いませんが、その場合は、スクリプト内部のフォルダ名の変更も同時に実施してください。

Photo typeにはbgフォルダ(サンプルの壁紙収納)が梱包されています。iswebなどのように、画像のディレクトリに制限のないサーバをご利用の場合は、cute_diaryをフォルダごとアップロードし、属性を変更するだけで稼動します。

▲ MENU ▲


* The Third Phase *
ERROR
■ ERROR

アップロードが完了したら、「書き込みテスト」だけを実施してください。File upの設定は未完了なので、ここでは行ないません。正常動作を確認できれば、カスタマイズを行います。

この段階で出るERRORの多くがForbidden - You don't have Permission deniedで、前述したように属性の変更が正しく行なわれていないケースが大半を占めます。
サーバーエラー(500 Server Error)は、
Perlのパスを間違っている
FTPでの転送モード(画像はバイナリモード・その以外のファイルはアスキーモード)を間違えた
が考えられます。

Perlのパスと属性をしっかり変更したのに動かない、ERRORが出る、って場合はDLし直した方が良いと思います。

▲ MENU ▲


* The 4th Phase *
カスタマイズ
■ カスタマイズ

書き込み のテストに成功したらカスタマイズを行ないます。

ここで是非実行して欲しい事があります。
cgiスクリプトのバックアップ(コピー)を取ってください。
カスタマイズの際に、重要な記号を消してしまう事がよくあります。また、余分な空白や全角文字を入れてしまうとかなり厄介な事になります。英数字は、見た目では全角だか半角だかが分からない事が多いからです。
カスタマイズの際のERRORは原因を突き止め難いので、ダメだったらとっとと諦めて、バックアップ(コピー)した方で再挑戦してください。

必ず変更するもの
・戻りURL
・アップロードディレクトリのURLパス
・色々な画像の設定部に書き込んでいる当サイトのURL
・パスワード



動作確認を簡便化する為に、アイコンやタイトル部のポイント画像を当サイトのものに直リンしています。実稼動させる時点ではリンクを解除し、ご自身がDLされた画像をお使いください。


素材サイトの著作表示
サンプル画像をお借りしたPhoto material choco*chocoさん・Petit Roseさん・Night on the Planetさんの素材はリンクウエアです。
掲示板のお披露目は、リンクページの完成後にお願いします。

サンプル素材を同梱いただいたPhoto material choco*chocoさんの著作表示は必ず出力してください。

Photo typeの画像を追加される場合に、他のサイトのPhoto素材と混在させて使用するのはおやめください。双方のサイトに失礼な行為になりますので、ご理解くださいますようお願い申し上げます。

Photo material choco*chocoさん・Petit Roseさん・Night on the Planetさんの利用規定をよくお読みになった上でお使いください。

▲ MENU ▲


* The 5th Phase *
cute_diary.cgiの設定とカスタマイズ
■ cute_diary.cgiの設定とカスタマイズ


ファイルの設定
必ず変更していただくのは戻りURLの指定です。
$homepage = "http://aikon.milkcafe.to/";# 戻り先のURL (index.htmlなど)
Enterページがあるサイトではトップページにリンクしてください。

フレームに入れてご利用になる場合は、$url_use = 0にし、戻りURLを非表示にした方が良いかもしれません。

必須事項ではありませんが、ログファイルディレクトリ名の変更をなさった方が良いでしょう。ログファイルディレクトリの中にindex.htmlを置くと、他人からログファイルを覗かれる心配がなくなります。


#タイトル名を指定
#タイトル名を指定
$il_mode = 'no';
#好きなイラストをタイトルに使う場合は'yes'
#背景のイラストに$titleを重ねることができます。
#タイトル文字との重なりが気になる場合は、$ilheightの増減で調整してください。

$il_bg = './icon/titlel.gif';
#イラスト名(画像名)
$ilwidth = '200';
#画像の幅
$ilheight = '100';
#画像の高さ
$ilposition = 'center top';
#画像の位置
$title = "My Web*Diary"
;#タイトル名
$t_color = "#93A87B";
#タイトルの色

Photo タイプ サンプルA(こちら)は上記の設定を活用しています。

背景画像、最下部の一部にタイトル名が重なる仕様になっています。タイトル文字を単独で表示させたい場合は、実際の画像の高さよりも大きい数値を書き込んでください。背景の位置を左右にずらしたい場合は、実際の画像の幅よりも大きい数値を記入し、画像の位置を調整する事で、お好みの場所に移動できます。$il_mode = 'no';の場合は、$title = "My Web*Diary"以降の設定が有効になります。

【注意事項】タイトルバナーを使用する場合やテキストタイトルにする場合は、必ず$il_mode = 'no'にしてください。ここがyesの場合は、他の指定が無効になります。


文字(大きさはポイント数:スタイルシートで有効)
$fontana ='verdana,\"MS UI Gothic\",Osaka,\"MS Pゴシック\",chicago,Arial,Helvetica,sans-serif';#フォントタイプ 使いたいフォントを先頭に出してください。

使わないフォントタイプを消さないでください。動作環境によっては、文字化けが発生します。


背景の設定
#---日記表示ページ
#背景の設定
#背景画像を使いますか?(0=no 1=yes)

$backgif_use = 1;

上記が'0'の場合は、以下の設定が無効になります。

$kazu ='3';#個数は'0'から始まります。
$javabg0 ='./icon/kabe0.jpg';
     ・
     ・
     ・


初期設定部で指定できる背景画像の個数は8枚です。それ以上の数をご利用になりたい場合はスクリプト内部での設定が必要です。この事項は改造になりますが、サポートを実施いたします。

$filter = '100';#背景を透けさせる程度。(0〜100)100で透けません。

Photoタイプではテーブルの背景色を透明にしています。発色が鮮明なPhoto素材に使用されると、記事が読みづらくなります。その場合は、背景色を指定した上で、フィルター機能をお使いください。


フレームの設定
$frame_position = 0;#カレンダーを左に置く場合は「0」右に置く場合は「1」
$frame_w = '220';
#カレンダー表示部分の幅

カレンダー表示部分の幅は、後述の「カレンダーの「マス」のサイズ」に合わせて増減してください。「マス」の横幅サイズ×7+10が適正値になります。


テーブルの設定
#---記事の位置
#記事部を好きな位置に置けます。フォト素材やイラストが映えると思います。

Pretty type$kijiposition = '<blockquote><div align=left>';に設定しています。フォト素材やイラストが映え、記事も読みやすくなります。フィルター機能は、Macユーザーには反映しませんので、Macユーザーが多いサイトでは、この設定を利用された方が良いと思います。

#---ポイント画像(記事タイトル・ページタイトル・リンクメニュー部分に使用)
$sub_touka = 0;#日記タイトルのポイント画像を可変にする?(yes=1 no=0)
$cel_bg = './img_g/point_toka.gif';
#$sub_touka=1の時に指定$subpoint = '<img src=./img_g/point.gif>';#$sub_touka=0の時に 指定タグ可

#---日記、日付表示部の背景画像
$daytoka = 0;#日付表示部背景画像のドットの色を可変にする?(yes=1 no=0)
$daybg_toka = './img_g/daybg_toka.gif';#$daytoka=1の時に指定
$daybg = './img_g/daybg.gif';#$daytoka=0の時に指定

「記事部の枠色を可変」にした場合、ポイント画像や日付表示部のドット背景画像を、枠色と同色にする事ができます。





【注意事項】ポイント画像・日付表示部背景画像を可変にした場合は、その周囲が白になります(画像の縁取りが白になっています)。Photo typeのように、記事部を透明にした方が良い場合は、固定色モードにしてお使いください。


アイコンの設定
#---書き込み案内アイコン(カレンダーに表示するアイコン)
$cal_ico_use = 0;#固定は0で$cal_pointを指定 可変は1で@wriを指定

可変モードの場合は左のように表示されます。

可変モードの場合は、記事部の日付欄にもアイコンが表示されます。

可変モードの場合は、書き込みフォームのカレンダーアイコン表示部分にサンプルが表示されます。

Night on the Planetさんも、お天気アイコンを配布されていますので、Elegant typeDLされた方はご検討ください。


記事部に表示するアイコンは、セレクトメニューに「使用しない」という設定があり、その日の気分で使い分けていただく形になります。

サンプルで記事部のアイコンを使用しなかったスクリプトに関しては、@icon1@icon2の前に「#」を入れてコメントアウトしています。アイコンを使用される場合は、この「#」を削除して、ファイルの設定を行なってください。アイコン未使用で、「#」が記入されていないと、セレクトメニューにアイコン名が表示されてしまいます。(表示されて困るものでもありませんが…笑)


ファイルアップの設定(次項に別記)


その他
・画像のパス(URL)について。
NIFTYではCGIのある場所に画像を置けません。BIGLOBEでは、置き場所の指定はありませんが、パス(URL)の記述に特異性があります。サーバの、CGIの設置に関する情報を再読し、仕様に準じた設定を行なってください。

・ログファイルについて
ログファイルは自動生成されます。tripodなど、使える機能に制約があるサーバでは禁止コマンドをコメントアウトした上で、ログファイルを作成していただく形になります。ファイル名は西暦年月.txt(例:2003年4月のファイルは200304.txt)とnew.datになります。

・動作確認について
IE6.0、NN6.0で動作確認を行なっていますが、只今我が家のMacが闘病中なので、Winのみの対応です。不具合がありましたら、お知らせください。

・削除・修正について
添付ファイルの修正が行なえますが、修正モードに入った段階で添付ファイルの削除処理が行なわれる為、他を修正したい場合にも、再入力が必要になります。

・「設定完了」以降の部分を変更なさった場合
「設定完了」以降の部分に変更があった場合は、サポート対象外の措置を取らせていただきますので、予めご了承ください。

不明な点はHELP BBSでお尋ねください。

▲ MENU ▲


* The 6th Phase *
アップロードディレクトリ
アップロードディレクトリ
ファイルアップ系を上手く設置できない原因の9割以上が、このアップロードディレクトリの設定ミスによって起こっています。

cute_diary.cgiには、「アップロードディレクトリ」「アップロードディレクトリのURLパス」を指定する箇所があります。このタイプのスクリプトを初めて設置される方の為に、仕様の説明をしておきます。

「アップロードディレクトリ」というのは、各自のコンピュータからupさせるファイルが収まる場所の事です。この場所が正しく設定されていないとファイルが行き場を失い、その結果、画像のアップロードに失敗しましたというエラー表示を見るはめになります。

・画像のディレクトリを制限しているサーバーは要注意。
例えば当サイトがお世話になっているmilkcafeや、最近、利用者が急増しているiswebでは、画像のディレクトリを特に制限していません。
従って、DLされたスクリプトをそのまま丸ごとアップロードした場合は、「アップロードディレクトリ」を書き換える必要はありません。初期設定のままで上手く稼動します。
ですが、NIFTYのようにcgi-binには画像を置けないサーバー、hi-hoのように、cgi-binにはフォルダを置けないサーバー、Biglobeのように相対パスを記述できないサーバーは厄介です。

NIFTYの場合
honepage直下にアップファイルを入れるフォルダを置くと仮定しますと、

# アップロードディレクトリ
# → パスの最後は / で終わること
# → フルパスだと / から記述する
$ImgDir = "/homepage/image/";


上記のような記述になります。


hi-hoの場合
honepage直下にアップファイルを入れるフォルダを置くと仮定しますと、

# アップロードディレクトリ
# → パスの最後は / で終わること
# → フルパスだと / から記述する
$ImgDir = "$ENV{'HOME'}/html/image/";


上記のような記述になります。


Biglobeの場合
cute_diary.cgiと同じ場所にアップファイルを入れるフォルダを置くと仮定しますと、

# アップロードディレクトリ
# → パスの最後は / で終わること
# → フルパスだと / から記述する
$ImgDir = "/home*/***/*****/public_html/cute_diary/image/";


上記のような記述になります。

/home*/***/*****/public_html/は各自に与えられている絶対パスです。
この絶対パスは、会員ページで、IDとパスワードを入力して照会すると表示されます。(昔はそうだったのですが、今はどうなってるかは知りません。ダメだったら、KENTさんのフルパスチェッカーで簡単に調べられます)


アップロードディレクトリのURLパスについて
次に「アップロードディレクトリのURLパス」について書きます。
これは、upされたファイルを表示するために必要なパスです。
画像を貼り付ける場合は<img src="http://aikon.milkcafe.to/image/***.gif">というタグを書きますが、このスクリプトにも<img src="$ImgUrl$no$tail">という記述が入っています。
$noには記事番号が入り、$tailには、.gif、.jpgなど、up fileの拡張子が入ります。
そして、$ImgUrlには、使用者が指定したURLが入るという訳です。
ですから、「アップロードディレクトリのURLパス」の記述を間違えると、エラーではなくて × が出ます。

iswebの場合
http://isweb**.infoseek.co.jp/+++/ユーザーID/
上記のアドレスにホームページを持った人がcgi-bin直下にcute_diary.cgiをアップロードしたと仮定しますと

# アップロードディレクトリのURLパス
# → パスの最後は / で終わること
$ImgUrl = "http://isweb**.infoseek.co.jp/+++/ユーザーID/cgi-bin/cute_diary/image/";


上記のような記述になります。

imageフォルダを置いた位置のURLを正しく記述すれば、fileはきちんと表示されます。


file up をしてERRORが出たら、「アップロードディレクトリ」を再点検
× が出たら「アップロードディレクトリのURLパス」を再点検してみてくださいね。

画像の表示位置
#---記事の上「0」記事の中「1」記事の下「2」

■「0」を指定した場合


レシピノートやお弁当日記等、添付画像を目立たせたい場合はこの位置に指定してください。


■「1」を指定した場合


この位置に置く場合は、テーブル幅を大き目に設定し、添付画像の縮小率を高目にしてください。サンプルでは、縦・横共に、200pxを越える画像は縮小表示する設定になっています。


■「2」を指定した場合


文字と画像の調和が取れた位置です。画像サイズの適正値は、テーブル幅×0.9です。


■align属性 「left」「center」「right」と記入してください。
上下位置を「1」にした場合は「left」か「right」にしてください。

 

▲ MENU ▲