MuseページにBBS表示

MuseにBBSを組み込む　[2017/11/25]

第３者のMuse用BBSライブラリーを使っていましたが、表示に時間がかかり操作が気に入らないこともあり、CGIを使ったBBSソフトをMuseに組み込むことにしました。こちらもCGI配布ウェブであるKentWebより組み込みが容易にそうな、SunBBSを導入し、組み込みました。

1. CGIプログラムの入手

ここではAccessCounterと同じくフリーソフトを多く配布しているKentWebからBBSソフトのSunBoardを入手しました。このサイトには多くのBBSソフトがアップロードされていますが、このソフトを選んだ理由は表示の綺麗さとHTMLファイルを書き出すと唄っていたので、実装の容易さを感じて選びました。

Clipmail: hhttp://www.kent-web.com/bbs/sunbbs.html

2. 実装方法

2.1 CGIファイルのダウンロード

上記のWebからsunbbsをダウンロードします。

2.2 フォルダーの自サーバーへのアップロード

ダウンロードした"sunbbs"フォルダーをそのまま自サーバーのpublic_htmlにアップロードします。

public_html->sunbbsディレクトリーをFTPソフトで見た絵

2.3 ファイルの修正と設定

まず各ファイルのアクセス権を元Webの記述どおりに設定します。

次にinit.cgiをエディットします。これは設定用CGIで、最終的に色々と詳細に設定しなければならないのですが、説明の手順として最低限下記の部分を修正します。

　　　　　$cf{cgi_url} = "http://www.example.com/sunbbs";

　　　　　　　掲示板sunbbs.cgiを置くディレクトリのURLを記述します.

　　　　　$cf{html_url} = "http://www.example.com/sunbbs/html";

　　　　　　　掲示板表示部index.html他を置くディレクトリのURLを記述します.

上記　www.example.com の部分に自分のサーバーアドレスに変更します。

2.4 実際に動かしてみる

この状態で、ブラウザから

http://www.example.com/sunbbs/sunbbs.cgi?mode=form

と打ち込みます。（www.example.comの部分は上記自分のサーバーアドレス）

右図のような新規投稿画面が表示されます。ここで、必須項目を入力し、投稿します。その後BBS画面が表示され使用可能になります。

この作業により、/sunbbs/html/にindex.htmlが作成されるので、次からは

http://www.example.com/sunbbs/html/index.html

と打てばこのBBSが利用できることになります。

2.5 Museで作成したページで動作させる

Museのページからこのページにリンクを張れば利用可能になりますが、これでは本来の目的であるMuseページ内で動作させることにならないので、Museで作成したページに埋め込む方法を検討します。

htmlの<iframe>を使って、下記のページを参考に組み込むことにしました。

https://helpx.adobe.com/jp/muse/using/embedding-videos-html-content.html

http://www.allinthemind.biz/markup/javascript/iframe.html

ここで、Museで作成したBBS.htmlに”htmlを挿入”機能をつかって

　　　　<!DOCTYPE html>

　　　　<head>

　　　　</head>

　　　　<body>

　　　　$('iframe')

　　　　.on('load', function(){

　　　　 try {

　　　　 $(this).height(0);

　　　　 $(this).height(this.contentWindow.document.documentElement.scrollHeight);

　　　　 } catch (e) {

　　　　 }

　　　　})

　　　　.trigger('load');

　　　　</script>

　　　　</body>

　　　　</html>

とhtmlコードの部分に書き込みます。

デザイン画面には右図のように表示されますが、サイズは位置は右図のように表示したい部分に画面いっぱいにします。

この状態で、とりあえず動作させてみることにします。

このMuseで書いたWebページをパブリッシュして動作させると下記ののように表示されるはずです。前回最初に投稿した部分も表示されるはずです。

2.6 最終設定

大筋のところで良好に動作するはずですが、さらに詳細な設定の変更を行います。

init.cgiにおいて

　　　　# 掲示板タイトル

　　　　$cf{bbs_title} = 'MUN2の掲示板';　　　　　　の様にタイトルに表示される文字列を変更します。

　　　　# 管理用パスワード(英数字)

　　　　$cf{password} = '0123';　　　　　　　　　　パスワードは個人のものに変更した方が良いと思います。

　　　　# 過去ログ生成 (0=no 1=yes)

　　　　$cf{pastkey} = 0;　　　　　　　　　　　　　過去記事を押すとエラーになるので、とりあえずこのボタンを削除

　　　　# 戻り先 (index.htmlなど)【URLパス】

　　　　# → http://からの絶対パスで記述　　　　　　　　　　この部分はHomeボタンを押した時の戻り先を指定します。

　　　　$cf{homepage} = "http://mun2.s308.xrea.com/";

/tmpl/bbs.htmlの修正

Homeボタンを押した時の戻り先が!homepage!となっていますが、このままではhtmlで挿入されたページ内になってしまうので、Museで作成されたページにするため、
　　　target="_top"

を追加します。

これらの変更を修正したのち実行すると下記の様に表示されるはずですが、ブラウザー側とサーバー側にキャシュがあるため直ぐには反映されないかもしれません。ブラウザー履歴の削除、新規投稿や管理画面での変更を行えは反映すると思います。

これで、BBSのページに掲示板CGIソフトを組み込むことができました。

3. 結論

3rd Partyのサーバーではなく自サーバーにプログラムを組み込むことにより、より高速に動作させることができました。またレイアウトも自由であり、美しく表現できる様になりました。完成品は当ホームページのbbs.htmlを参照ください。