２０１７年５月２１日
最近、サイトのモバイルフレンドリー化を進めているのですが、今回は掲示板のモバイルフリー化に挑戦してみました。
掲示板は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>より上部）に
<meta name=”viewport” content=”width=device-width,initial-scale=1″>
を挿入します。これがモバイルフリレンドリーへの第一歩です。
ステップ３
フォントを大きくするために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>より下のほうに
<STYLE type=”text/css”>
<!–
body,html{
max-width:860px;
margin-right: auto;
margin-left : auto;
}
–>
</STYLE>
を挿入します。これは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>より下のほうに
<STYLE type=”text/css”>
<!–
.******_responsive_1 { width: 320px; height: 100px; }
@media(min-width: 500px) { .******_responsive_1 { width: 468px; height: 60px; } }
@media(min-width: 800px) { .******_responsive_1 { width: 728px; height: 90px; } }
–>
</STYLE>
を挿入します。
これでモバイルフレンドリー対策の広告が表示されます。
上記をそのまま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>が各２か所削除してあったのですが、よく見るともう一か所ありました。全部で３か所削除が必要でした。