掲示板 yybbs (YY-BOARD)のモバイルフレンドリー化

２０１７年５月２１日

最近、サイトのモバイルフレンドリー化を進めているのですが、今回は掲示板のモバイルフリー化に挑戦してみました。
掲示板はyybbs(YY-BOARD)という日本で一番使われているCGIを利用しているのですが、ネットで探しても、そのような試みをしているという記事は一向に見つかりません。
それでダメ元で挑戦してみました。
完璧では無いですが、なんとかそれらしいところまで頑張れました。
https://kimassi.net/cgi/yybbs11/yybbs.cgi

ＦＰ２級の試験１週間前に、こんなことしなくても良いと思いますが、気になると途中でやめられないので仕方ないです。

変更箇所は、試験が終わってから紹介しようと思います。

２０１７年５月２８日

yybbs(YY-BOARD)の改造について１つ１つ進めていくことにします。
なお、yybbs(YY-BOARD)は基本形の物を使っていなくて、スパム対策済みバージョンを使っていますので、標準のyybbs(YY-BOARD)とは多少の違いはあるかもしれません。

ステップ１
まず、アイコンやカウンターの使用をやめます。
yyini.cgiの

# アイコンモード (0=no 1=yes)
$iconMode = 0;
を0にします。

# ミニカウンタの設置
$counter = 0;
を０にします。

# 家アイコンの使用 (0=no 1=yes)
$home_icon = 0;
を０にします。

これらは変更しなくても良い場合がほとんどだと思います。

ステップ２

yyini.cgiの# HTMLヘッダの部分（<head>より上部）に

を挿入します。これがモバイルフリレンドリーへの第一歩です。

ステップ３

フォントを大きくするためにyyini.cgiの# HTMLヘッダの部分（<head>より下部）スタイルシート設定部の

body,td,th { font-size:$bSize; font-family:”$bFace”; }
を
body,td,th { font-family:”$bFace”; }
に変更します。
これで文字が大きくなります。これで基本的な対処は終わりで、後は幅を狭くするための微調整になります。

ステップ４

#————————————————-
# 投稿画面
#————————————————-
はかなり変更します。

print <<EOM;

<table ><TR><TD>
<table border=0 cellspacing=1>
<tr>
<td><b>お名前</b></td>
<td><input type=text name=$RNDname size=28 value=”$nam” class=f></td>
</tr>
EOM

if ($use_form_email == 1 or $use_form_email == 3) {
my $message = ($use_form_email == 3 ? $dont_use_this_form : “”);
print <<EOM;

EOM

}

print <<EOM;

<tr>
<td><b>タイトル</b></td>
<td>
<input type=text name=$RNDsub size=36 value=”$sub” class=f>
<input type=submit value=”投稿する”><input type=reset value=”リセット”>
</td>
</tr>
<tr>
<td colspan=2>
<b>メッセージ</b><br>
<textarea cols=56 rows=7 name=$RNDcomment wrap=”soft” class=f>$com</textarea>
</td>
</tr>
EOM

if ($use_form_url == 1 or $use_form_url == 3) {
my $message = ($use_form_url == 3 ? $dont_use_this_form : “”);
print <<EOM;
<tr>
<td><b>参照先</b>$message</td>
<td><input type=text size=52 name=$RNDurl value=”$url” class=f style=”ime-mode:inactive”></td>
</tr>
EOM
}

# 管理者アイコンを配列に付加
@ico1 = split(/\s+/, $ico1);
@ico2 = split(/\s+/, $ico2);
if ($my_icon) {
push(@ico1,$my_gif);
push(@ico2,”管理者用”);
}
if ($iconMode) {
print “<tr><td><b>イメージ</b></td>
<td><select name=icon class=f>\n”;
foreach(0 .. $#ico1) {
if ($ico eq $ico1[$_]) {
print “<option value=\”$_\” selected>$ico2[$_]\n”;
} else {
print “<option value=\”$_\”>$ico2[$_]\n”;
}
}
print “</select><font size=\”-1\”> \n”;

# イメージ参照のリンク
if ($ImageView == 1) {
print “[<a href=\”javascript:ImageUp()\”>イメージ参照</a>]”;
} else {
print “[<a href=\”$script?mode=image\” target=\”_blank\”>イメージ参照</a>]”;
}
print “</font></td></tr>\n”;
}

if ($pwd ne “??”) {
print “<tr><td><b>暗証キー</b></td>”;
print “<td><input type=password name=pwd size=8 maxlength=8 value=\”$pwd\” class=f>\n”;
print “<font size=\”-1\”>（英数字で8文字以内）</font></td></tr>\n”;

# 投稿キー
if ($regist_key) {
print “<tr><td><b>投稿キー</b></td>”;
print “<td><input type=text name=regikey size=6 style=\”ime-mode:inactive\” class=f value=\”\”>\n”;
print “<font size=\”-1\”>（投稿時 <img src=\”$registkeycgi?$str_crypt\”> を入力してください）</font></td></tr>\n”;
print “<input type=hidden name=str_crypt value=\”$str_crypt\”>\n”;
}
}
print “<tr><td><b>文字色</b></td><td>”;

# 色情報
@col = split(/\s+/, $color);
if ($col eq “”) { $col = 0; }
foreach (0 .. $#col) {
if ($col eq $col[$_] || $col eq $_) {
print “<input type=radio name=color value=\”$_\” checked>”;
print “<font color=\”$col[$_]\”>■</font>\n”;
} else {
print “<input type=radio name=color value=\”$_\”>”;
print “<font color=\”$col[$_]\”>■</font>\n”;
}
}

print <<EOM;
</td></tr></table></TD><td></TD></tr></table>
EOM
print $antispam->get_post_wait_html(‘wait’, ‘wait_key’);
}

の部分を

print <<EOM;
<table ><TR><TD>
<table border=0 >
<tr>
<td colspan=2><b>お名前　</b><input type=text name=$RNDname value=”$nam” class=f></td>
</tr>
EOM

if ($use_form_email == 1 or $use_form_email == 3) {
my $message = ($use_form_email == 3 ? $dont_use_this_form : “”);
print <<EOM;

EOM

}

print <<EOM;
<tr>
<td colspan=2><b>タイトル</b><BR>
<input type=text name=$RNDsub size=38 value=”$sub” class=f>
</td>
</tr>
<tr>
<td colspan=2>
<b>メッセージ</b><br>
<textarea cols=”42″ rows=”8″ name=$RNDcomment wrap=”soft” class=f>$com</textarea><BR>
<input type=submit value=”投稿する”>
</td>
</tr>
EOM

if ($use_form_url == 1 or $use_form_url == 3) {
my $message = ($use_form_url == 3 ? $dont_use_this_form : “”);
print <<EOM;
<tr>
<td><b>参照先</b>$message</td>
<td><input type=text name=$RNDurl value=”$url” class=f style=”ime-mode:inactive”></td>
</tr>
EOM
}

if ($pwd ne “??”) {
print “<tr><td colspan=2><b>暗証キー　</b><input type=password name=pwd size=8 maxlength=8 value=\”$pwd\” class=f>\n”;
print “<font size=\”-1\”>（英数字で8文字以内）</font></td></tr>\n”;

# キー
if ($regist_key) {
print “<tr><td colspan=2><b>投稿キー　</b><input type=text name=regikey size=6 style=\”ime-mode:inactive\” class=f value=\”\”>\n”;
print “<font size=\”-1\”>（投稿時 <img src=\”$registkeycgi?$str_crypt\”> を入力）</font></td></tr>\n”;
print “<input type=hidden name=str_crypt value=\”$str_crypt\”>\n”;
}
}
print “<tr><td><b></b></td><td>”;
print $antispam->get_post_wait_html(‘wait’, ‘wait_key’);
}

に変更します。入力部分の幅がかなり狭くできました。

#————————————————-
# HTMLヘッダ
#————————————————-
の<head>より下のほうに

を挿入します。これはPCで見る場合に、不必要に幅を広くしないための設定です。
これでyyini.cgiの改造は一応終わりです。

ステップ５

次はyybbs.cgiの改造になります。
if (!$re) { print “<b>$nam</b> ：$dat “; }
else { print “<b>$nam</b> – $dat “; }

print “<font color=\”$subCol\”>No\.$no</font></td>“;
print “<td valign=top nowrap>   $url </td><td valign=top>\n”;

を

if (!$re) { print “<br><b>$nam</b> ：$dat “; }
else { print “<br><b>$nam</b> – $dat “; }

print “<font color=\”$subCol\”><br>No\.$no</font>”;
print ”   $url \n”;

に変更します。

記事表示部で<blockquote>と</blockquote>が各２か所ありますので削除します。
記事表示の際に無駄に左右の空間を大きくしないための変更です。

これでyybbs.cgiの改造は一応終わりです。

ステップ６

最後にyyregi.cgi　の改造になります。

# 日時のフォーマット
$date = sprintf(“%04d/%02d/%02d(%s) %02d:%02d”,
$year+1900,$mon+1,$mday,$week[$wday],$hour,$min);
}

を

# 日時のフォーマット
$date = sprintf(“%04d/%02d/%02d %02d:%02d”,
$year+1900,$mon+1,$mday,$hour,$min);
}

に変更しました。すでに投稿済みの原稿はそのままですが、以後の投稿は曜日を表示しなくなります。

これで随分幅を狭くできました。

番外編

Ｇｏｏｇｌｅの広告を入れる場合は、

yyini.cgiを修正します。

とりあえず下記のページを参考にします。
https://support.google.com/adsense/answer/6307124?hl=ja#exact

$banner1 = ‘”;の部分に、Ｇｏｏｇｌｅレスポンシブの公告を挿入します。*****はサイトによって個別の番号・記号を与えらえます。

# タグ広告挿入オプション
# → <!– 上部 –> <!– 下部 –> の代わりに「広告タグ」を挿入
# → 広告タグ以外に、MIDIタグや LimeCounter等のタグにも使用可能
$banner1 = ‘<script async src=”//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js”></script>
<!–******_responsive_1 –>
<ins class=”adsbygoogle ******_responsive_1″
style=”display:inline-block”
data-ad-client=”ca-pub-****************”
data-ad-slot=”*********”></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>’;

スタイルシートのコマンドを挿入します。

#————————————————-
# HTMLヘッダ
#————————————————-
の<head>より下のほうに

を挿入します。
これでモバイルフレンドリー対策の広告が表示されます。

上記をそのままCOPY&PASTすると、「”」が全角にPASTされるようです。PASTする際には半角に戻してからにして下さい。

最後にGoogleのモバイルフレンドリーテストをしましたが、無事モバイルフレンドリーなページに認定されました。

２０１７年５月３０日

yybbs(YY-BOARD)のすべてを改造しました。

２０１８年９月２０日

記事表示の枠内の空間が全く無くなっていて窮屈なので、空間を少し入れました。

yybbs.cgiの

if (!$re) {
print “<TABLE BORDER=1 WIDTH=’100%’ BGCOLOR=\”$tblCol\” CELLSPACING=0 CELLPADDING=0><TR><TD>\n”;
$flag=1;
}

を」

if (!$re) {
print “<TABLE BORDER=1 WIDTH=’100%’ BGCOLOR=\”$tblCol\” CELLSPACING=0 CELLPADDING=10><TR><TD>\n”;
$flag=1;
}

に変更しました。

かなり見栄えが良くなりました。

２０１８年１１月２７日

記事表示の２ページ以降の投稿表示の枠の幅が異様に広い事に気づきました。

yybbs.cgiの改造で、
記事表示部で<blockquote>と</blockquote>が各２か所削除してあったのですが、よく見るともう一か所ありました。全部で３か所削除が必要でした。

きまっし金沢の雑記帖

きまっし金沢に掲載しなかった情報と掲載する前の情報を中心に掲載しています。自分の備忘録も兼ねています。

掲示板 yybbs (YY-BOARD)のモバイルフレンドリー化

コメントを残すコメントをキャンセル

コメントを残す コメントをキャンセル

コメントを残すコメントをキャンセル