お絵かき掲示板をHPに設置してみよう

実際に自分のHPサーバーにCGIを設置して動作するようにアップしてみます。
こちらも必要なものを準備・ダウンロードしていきます。

  • CGIの使えるHPサーバー
    CGIをアップするためのサーバーを用意します。レンタルする場合はCGI(Perl)が使えるサーバーを選びます。
    無料でCGIが使えるとなるとなかなかないのですが、このサイトでも使わせてもらってるRibbon Networkさんは大丈夫そうです。
    これまで問題なく利用できているので、おすすめします。

  • FTPクライアントソフト
    借りたサーバーさんに、自分のPCからファイルをアップするために必要。
    HP制作の必需品です。超定番の「FFFTP」などがオススメです。

  • テキストエディタ
    CGIをアップしたり、スキンを用意する際にhtmlやCGIファイルを編集する必要があります。
    Windows標準装備の「メモ帳」でもできますが、膨大なテキストの中から探すのが大変なので、専用のエディタを一つ入れとくと良いです。
    サクラエディタ・TeraPadなどが有名です。

  • お絵かき掲示板CGI「Relm」
    こちらのCGIを使ってお絵かき掲示板を利用するので、配布されているHPからダウンロードが必要です。
    Snow-Materiaさまからどうぞ。(・CGI-Perl-Tips>・Relm)
    HPには設置に関してのあれこれなどもしっかり乗っています。頑張って読めばちゃんと設置できます。スキン配布もされています。

  • お絵かきjavaアプレット
    上記のCGIはあくまで掲示板のページ側のサポートをしてくれるものなので、お絵かきアプレット本体は、別でダウンロードします。
    しぃ堂(vecter)さまより。
    自分の使いたいアプレットを選んでダウンロードしておきます。
    基本的には、お絵かきしぃペインター・お絵かきしぃ掲示板 PaintBBSどちらもDLしておきます。(後で掲示板内で選択できます)
    また、描いた後の絵をアニメーションで見られる(描いた手順を見られる)ビュワー「PCHview」もあります。

  • その他
    絵を描くときに使う拡張パレットや掲示板デザインスキン、Relmで使える拡張ツールなど、追加できるものがいくつかありますが
    ここでは基本的な物だけにしておきます。
    設置手順内で説明してますので、必要な場合はその時にDLします。

1*Relmの設定

準備ができたら、まずは掲示板「Relm」を設定していきます。
公式サイトさんでしっかり説明されているので、順序通りできればそれをそのままHPサーバーにアップするだけです。
デザイン(スキン)などに関しては、後からでもいくらでも追加・変更できるので、とりあえずCGIをアップするだけしましょう!

CGIの書き換え
最初に配布HPの「設置方法」を参考に、ファイルの書き換えをします。
メモ帳やテキストエディタを使います。
そもそものファイルの数がとても多いので目当てのファイルを探すのがちょっと大変かと思いますが……

設置にかんして、私が分かりにくかったところをピックアップして補足します。

>CGIファイル(relm.cgi, getpics.cgi)の 1行目のパス #!/usr/bin/perl の部分はサーバの指定通りに
とくに変更しなくても大丈夫なときもあります。CGI使えるサーバーさんなら必ずどこかに書いてあるのでレンタルサーバーのページをよく探してみてください。
(余談ですが、このHPのあるリボンさんは、サイトだと「/usr/local/bin/perl」になってましたが、普通に「#!/usr/bin/perl」で行けました)
>管理パスワード $mpass = 'test'; の部分は好みの英数字に
こちらはなんでもOKでした。後々ブラウザ上から編集するときに管理ページを多用するので、忘れないような物に。
あと、「relm.cgi」 「getpics.cgi」それぞれのパスを同じ物にしないとページに入れません。必ず2つとも変更します。

javaアプレットの追加
アプレットRelm側の書き換えができたら、ダウンロードしておいたお絵かきjavaアプレットのファイルを、同じフォルダに全部入れます。

お絵かきしぃ掲示板 PaintBBSは「PaintBBS.jar」、お絵かきしぃペインターはDLしたフォルダ内すべて(「res」フォルダ含む)、
アニメーション再生用のPCHViewerは、「PCHViewer.jar」をそれぞれ追加します。
(PCHViewerは「PCHViewer.jar」だけでも動作しますが、フォルダ内の全てのファイルをアップすると、
ダウンロードボタンやアニメ再生ページにスキンデザインが適用されるようになります)


2*ファイルをHPサーバーにアップする

CGIの書き換えができたら、HPサーバーにアップします。

私は「FFFTP」を使っているので、それを使った場合の説明を簡単にします。
基本的なFFFTPの使いかたなどは、他のサイトさんなどで詳しくわかりますので「FFFTP 使い方」などで調べてみてください。

  1. フォルダごとサーバーにアップする
    ダウンロードしたばかりのRelmのデフォルトフォルダ名は「relm_2_38」になってますが、アップする前に好きな名前に変えておくと、
    HPアドレスもその名前に変更されます。「bbs」などわかりやすい名前に変更するといいかも。

  2. ファイルのパーミッションを変更する
    ファイルをアップできたら、右側(サーバー側)の窓に、一覧がずらっとでてきます。
    そこで、ファイル一つずつのパーミッション(属性)を変更していきます。
    Relm配布HPの「設置方法」のページに、全てのパーミッションがのっているので、ちょっと面倒かもですが一つずつ変更していきます。


    ↑FFFTPを利用している場合は、この右側の一覧のファイルを右クリックすると出てくる「属性変更」から編集できます。
    Ctrl押しながら複数ファイルを選択してから右クリックで一気に変更すると楽かもしれないです。
    こつこつ頑張ります。

  3. ちゃんと動いているか確認する
    全部設定できたら、実際に「relm.cgi」をブラウザで実行してみます。
    「http://○○○(HPアドレス等)/○○(CGIの入ってるフォルダ名)/relm.cgi」というアドレスになってると思います。

上記の手順で動かない時やエラーが出るときは、どこかのファイルがアップできていなかったり、設定が間違っているかもしれません。
なかなか自分でエラーを見つけるのは難しいのですが、配布HPでもQ&Aコーナーがあるので、そちらも参考になります。


3*管理画面から設定をする

無事にアップして表示されたら、自分でためしがきなどをして動作確認してみます。
問題なく動くようでしたら、今度は細かい設定をつめていきます。

掲示板の下の方に「Admin」という項目があるので、そちらをクリックすると管理画面に行けます。
パスを要求された場合は、最初にCGIの書き換え時に設定したパスワードを入力してください。

このRelmの凄いところは、一度サーバーにアップしてしまえば、掲示板の細かい設定はもちろん、
掲示板のデザインやフォルダ内のファイルの管理なども、全てブラウザ上で可能なところです。
管理画面からはいくつかの設定ができますが、その中でもメインで使うであろうモードについて説明します。

  • CGIの設定
    掲示板を動かすときに必要なほぼ全部の設定はこちらからできます。
    ページタイトルや、ホームの戻り先URL、コメントのカラー、1Pごとの記事表示数、使用するアプレットの設定など。

  • スキンの選択
    ページ全体のデザインを決めるスキンファイルをここで変更できます。
    あらかじめFFFTPなどで「skin」フォルダに変更したいデザインのスキンをアップしておくと、ここで選択可能です。

  • スキンデザインの変更
    現在使っているスキンのデザインを細かく変更できます。
    ブラウザ上からcssやhtmlファイルに直接手を加えたり記述変更ができるので、その場で試しながらデザイン変更ができます。

    とはいえ、掲示板で利用しているスキンデザインがそのまま管理画面にも適用されているので、
    デフォルトのスキンだと非常に文字が小さく変更しづらいです。
    まずは、この項目の中の「スタイルシート」を選択し、
    基本フォントスタイル内の「font-size:x-small;」の部分を「font-size:10pt;」くらいの適切な大きさにすると
    かなり見やすくなります。

ざっと簡単に説明しただけなので、これからまたそれぞれの項目について、順次追記しながら説明を書ければと思います。

ここまで来れたら設置完了!!あとは楽しくお絵かきするだけです!!


※附則項目

基本的な設置手順の他に、プラスで変更できる項目があればここに追記していきます。

パレットについて

お絵かき掲示板でお絵かきするときに使える「パレット」というものがあります。
パレットは、ツール内の基本的な色づくりに利用されますが、これは、好みのパレットに自由に変更可能です。
Relmには基本のパレットとして「Palette-Selfy」というパレットが同梱されています。
配布サイトでこちらの使い方が説明されています。→Palette-Selfy

また、別のパレットデータを配布しているサイトさんもあるので、使いやすいパレットをそれぞれ設置するのがオススメです。
(私が主に利用しているのはLinkから行けるAzSKyさんの「HLSカラーパレット」。AzLocalPBBSというソフトの場所からダウンロードできます)

パレットの変更・追加方法
FFFTPなどでRelmのフォルダ内に直接パレットデータをアップロードし、
その後、「CGIの設定」内の「アプレットの設定 1」から、
「・拡張パレットを使う場合はここに」の下にあるファイル名・関数名を書き換えます。
HLSカラーパレットをつかうなら、ファイル名は「paletteHLS.js;」。関数名は、「PaletteInit();」です。
各パレットによって名前が違うため、それぞれ変更してください。

※お絵かきアプレットを選ぶ時のように、掲示板で直接その時に使うパレットを選べる機能があったらな〜と探しています。
いまいち自分では設定の仕方がわからないので、そのあたりがもしわかる方がいらっしゃったら、ぜひ教えてください!