昔、ふたばちゃんねる等で、一世を風靡した『お絵かきBBS』。
自分もサイトに入れていたのだけど、java Appletがブラウザから拒絶されるようになって、使えなくなること数年。
レイヤー機能もあり、結構使いやすかったあの機能、WordPressに入れれたら…と思い、もう1回入れてみようという気持ちになって探してみた。
すると、現在PHP7かつHTML5(canvas)に対応していると『POTI-board改』があるというじゃないですか！
しかもスマホからもタブレット端末からも描ける！ やだステキ！
「ならば設置してみよう！」と設定したその方法と困った点の話。
因みにWordPressにお絵かき機能を入れたいがために、調べたに過ぎないので、置いたBBSは公開していない。
WordPressにお絵かきプラグイン入れたい話はコチラ
PHP7でHTML5版のお絵かきBBSの設置方法
単純に手順を書くと、下記3点のみ。
- POTI-board改とテンプレートシリーズにある、POTI-board改をGitHubからダウンロード。
- 『poti-kai/potiboard/potiboard.php』にブラウザから見ることが出来ればOK！
該当ディレクトリにindex.htmlが作成されているのを確認出来る。 - config.php（設定ファイル）の中身を色々変更しておく（パスワードや画像サイズ）
「これでは解らない！ もっと詳細に！」という場合は『お絵かき掲示板簡単設置方法 2019年版: STP^3』が、オススメです！
NEOをアップデート(任意)
しなくても問題はないが、せっかく上のバージョンが公開されているので、お絵かきする機能本体をアップデートする。
neoのGitHubをダウンロードし、『neo/dist/』の『neo.css』『neo.js』を先程作成したBBSのものと置き換える。
これだけ。
自分が困った点
手順を見るだけだと、どえらいカンタンに設置出来るのだけど、意外と上手く行かず困ってしまった。
ここから困った点を書いておく。
『PHP Fatal error』エラーで動かない！
設置時『PHP Fatal error: Call to undefined function gd_info()』とかエラーが出て動かなくなった。
NEO版potiboard.php(旧版：PHP5対応版)でも、エラーは出るものの、動きはしたのに…
調べてみたところ、どうやらPHP7対応に修正される際に『gd_info()』の存在チェックを追加された様子。
つまり『GDモジュール』が動いていないことが原因。
しかしサーバには『gd2』を入れていた。
なのに、有効ならば表示があるはずのphp_info()に、gd記載がない！
つまり『gd_info()』は完全に動いていないということ。
※『php.ini』に下記の記載があるかの確認でも良い。
extension=gd.so
XAMPP等Windows環境内にインストールだった場合は
extension=php_gd.dll
GDモジュール、入ってるのにな…、と思いつつ、再インストールしても直らず…
結果『gd2』と『gd』と両方入れることで解決とした。
『eval()』で実行指定されたPHPコードの構文間違いエラーが邪魔！
文字列をPHPコードとして実行してくれる『eval()』。
そのPHPコードが間違っているというエラー。
作ってある処理を直すとなると、結構内部を見なくてはならず結構面倒。
動きはするので、いっそ無視することにした。
『htmltemplate.inc』内の384行目のeval頭に@を付ける。
先頭『@』は処理エラーが出ても、無視してくれるのだ。
ob_start();
@eval('?>' .$code);
$cnt=ob_get_contents();
テンプレートが、実行ファイルと同じディレクトリなので、管理しづらい！
『POTI-board改』は、外観を変える際、テンプレートを変更する。
テンプレートは、掲示板本体や設定ファイル等、実行ファイルと同じディレクトリ下に保存する。
そしてファイル名は、一定ではなく自由度がすごく高い。
つまり、テンプレートを変えるとなると、そのディレクトリにドンドン増やえてツラい。
変える場合は、前のテンプレートを消さないとどんどん増える。
消さなかったら、どれとどれがセットか、何を使っていて使っていないのか、調べないと分からない。
すっごく手間。
そこで、注目すべきは前述したとおりテンプレート設定は『自由度がすごく高い』ということ。
ディレクトリ名を付けたテンプレート名を指定しても、問題なく動くのだ。
公開されているテンプレートが全て、実行ファイルと同ディレクトリであること前提なので、気付くまで時間がかかった。
そこで『テンプレート専用ディレクトリ』を作ることにした。
その『テンプレートを階層構造に設定する方法』については後述する。
config.phpの書き換えた方がいい内容
そのままでは使わずに、安全性やサーバに合わせて修正することをオススメする。
- 管理者パス(ADMIN_PASS)。※必須
- 『TITLE』や『HOME』など、公開情報やサイトにあわせて変更。
- 投稿容量制限(MAX_KB)・投稿サイズ(MAX_W、MAX_H)は、現在だと少し小さい気がする。※任意
- 強制サムネイル機能(FORCED_THUMB)は、個人的には切っておきたい。※任意
設定ファイルを分割してみた
ここは個人的な考えなので、各々の考えでやらなくてもいい話。
設定ファイルは管理したいけど、管理パスワードとかプライベートは、外部git管理対象にしたくない…と思った。
あと、UPするファイルと開発環境で同じファイルをUPしておきたい。
なので環境毎に読み込む『XXX_config.php』を用意して、あれば読み込ませ、そのファイルはgit管理から外すようにしてみた。
なければ無いでcongif.phpさえあれば、問題なく動くようにしてみた。
ここはやらなくてもいいので、詳しくは書かない。
テンプレートを階層構造に設定する方法
前述した通り、通常テンプレートは、掲示板本体や設定ファイル等、実行ファイルと同じディレクトリ下に保存する。
まるごとディレクトリ使用するように、設定とテンプレートを一部修正する。
テンプレート用フォルダを作る
『themes』フォルダを作成。
更に『テンプレート名』フォルダを作成。
そしてその中に解凍したテーマを丸ごと置いた。
つまり
↓
に配置が変更となる。
今回は『poti-kai-skins/nee』テンプレートを例として、下記に記載しておく。
template_ini.phpの書き換え
テンプレートの設定を、ディレクトリ。
//メインのテンプレートファイル
define('MAINFILE', "themes/nee/nee_main.html");
//レスのテンプレートファイル
define('RESFILE', "themes/nee/nee_main.html");
//その他のテンプレートファイル
define('OTHERFILE', "themes/nee/nee_other.html");
//お絵かきのテンプレートファイル
define('PAINTFILE', "themes/nee/nee_paint.html");
//カタログのテンプレートファイル
define('CATALOGFILE', "themes/nee/nee_catalog.html");
config.phpの書き換え
全体的な設定。
zipに同梱されてない場合は変更しなくてもいい。
//パレットデータファイル名
define('PALETTEFILE', 'themes/nee/palette.txt');
potiboard.phpの書き換え
掲示板本体。
zipに同梱されてない場合は変更しなくてもいい。
そもそもアプレットのヘルプファイルだから、使うのかな…？
//アプレットヘルプのファイル名
define('SIIHELP_FILE' , 'themes/nee/siihelp.php');
テンプレートファイルの書き換え
template_ini.phpに設定したファイル。
後々テンプレートをアップデートや変更することを考えると、本音書き換えたくない…
時間と気合があるときに、自動的に書き換えるようにプラグインを付けてもいいかも知れない。
そう、気合などいつ出るというのか問題。
やることは、ディレクトリ直下を前提としている部分を、見つけてはコツコツ書き換える。
<link rel="stylesheet" href="nee_main.css" type="text/css">
↓
<link rel="stylesheet" href="themes/nee/nee_main.css" type="text/css">
というように、jsやcssをテンプレート場所にあわせるくらいで、大概済む。
しかし、これはテーマによるので、各々探しては設定頑張って欲しい。
感想
個人的な思考により書き換えた部分は多数ある。
でも気にしない人ならば、ホイッと置くだけカンタンなので、是非とも設置して、使ってみてほしい！
カンタンにHTML5でお絵かきするためのソースは、結構公開されている。
しかし色々なカラーリング設定、レイヤーに対応しているソースの公開は、そうそうない！
この機能、是非ともWordPressに組み込んでみたいところ。
コメント