掲示板 yybbs のモバイルフレンドリー化

2017年5月21日

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

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

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

2017年5月28日

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

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

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

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

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

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

ステップ2

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

<meta name=”viewport” content=”width=device-width,initial-scale=1″>

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

ステップ3

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

body,td,th { font-size:$bSize; font-family:”$bFace”; }

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

 

ステップ4

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

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\”>&nbsp;\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=36 value=”$sub” class=f><BR>
<input type=submit value=”投稿する”>
</td>
</tr>
<tr>
<td colspan=2>
<b>メッセージ</b><br>
<textarea cols=”40″ rows=”8″ 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 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’);
}

に変更します。入力部分の幅がかなり狭くできました。
これでyyini.cgiの改造は一応終わりです。

ステップ5

次は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> &nbsp; $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 ” &nbsp; $url \n”;

に変更します。

ステップ6

最後に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);
}

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

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

番外編

Googleの広告を入れる場合は、

yyini.cgiを修正します。

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

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

# タグ広告挿入オプション
# → <!– 上部 –> <!– 下部 –> の代わりに「広告タグ」を挿入
# → 広告タグ以外に、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のモバイルフレンドリーテストをしましたが、無事モバイルフレンドリーなページに認定されました。

2017年5月30日

yybbsのすべてを改造しました。

ファイナンシャルプランニング技能検定2級の試験に行ってきました。

今日は、ファイナンシャルプランニング技能検定2級の試験に行ってきました。

お昼は早めに出て、近江町で食べようかなと思っていたのですが、めぼしいお店はどこも10人以上の列ができていて断念しました。午後の試験に遅刻したら大変です。
そういう訳で中華料理の仙桃で食事しました。

午前が学科の試験で2時間、午後は実技の試験で1時間30分でした、
試験が終わったら、どっと疲れました。

17:30から模範解答が発表されたので、確認しました。
学科は60問中49問正解でした。36問正解で合格なので学科は合格です。
実技は49問中39問正解でした。配点が不明なのでなんとも言えませんが、6割正解で合格なので不合格では無いと思います。計算がボロボロだったのでショックが大きいです。判ってて間違えたのも2問あるので馬鹿馬鹿しいです。

なんかすっきりしません。なんか負けたって感じです。
とても1級の受験なんで考えられません。

合格発表は7月4日です。

これからは旅行業務取扱管理者の受験勉強をします。

 

MovableTypeのブログにサイトマップ

2017年5月23日

最近、ブログをモバイルフレンドリーに改造していたのですが、MovableTypeのブログにもサイトマップを設置しようと思い、ネットを調べたり、いろいろ苦労したのですが、文字化けしたりして、なかなかうまく動作しませんでした。
試行錯誤を続けていたのですが、今日やっとサイトマップの設置に成功しました。
とりあえず「石川の食 美味しいもの食べたい」にサイトマップを設置しました。
サイトマップが無いと、ブログにどんな記事があるか調べるのが不便ですよね。
時間に余裕が出来たら、サイトマップの設置方法を掲載しようと思います。

2017年5月25日

MovableTypeのブログにサイトマップを設置する方法を掲載します。

MovableTypeのユーザーダッシュボード—設定画面のデザイン—テンプレート—アーカイブテンプレート—アーカイブテンプレートの作成—記事リスト
テンプレート名を設定 例えば Sitemap
本文に

<!DOCTYPE html>
<html lang=”<$mt:BlogLanguage$>”>
<head>
<$mt:include module=”HTMLヘッダー”$>
</head>
<META http-equiv=”Content-Type” content=”text/html; charset=Shift_JIS”>
<div class=”search-results-container”>
<h2 class=”search-results-header”>サイトマップ</h2>
<div>
<ul>
<li><a href=”<$MTBlogURL$>” title=”<$MTBlogDescription$>”>トップページ</a>
<MTTopLevelCategories>
<MTSubCatIsFirst>
<ul class=”tree”>
</MTSubCatIsFirst>
<MTIfNonZero tag=”MTCategoryCount”>
<li><a href=”<$MTCategoryArchiveLink$>” title=”<$MTCategoryDescription$>”><MTCategoryLabel></a>
<ul>
<MTEntries>
<li><a href=”<$MTEntryPermalink$>”><$MTEntryTitle$></a></li>
</MTEntries>
</ul>
<MTSubCatsRecurse>
</li>
</MTIfNonZero>
<MTSubCatIsLast>
</ul>
</MTSubCatIsLast>
</MTTopLevelCategories>
<MTIfArchiveTypeEnabled archive_type=”Monthly”>
<ul class=”tree”>
<li>月間アーカイブ
<ul>
<MTArchiveList archive_type=”Monthly”>
<li><a href=”<$MTArchiveLink encode_xml=”1″$>”><$MTArchiveTitle$></a></li>
</MTArchiveList>
</ul>
</li>
</ul>
</MTIfArchiveTypeEnabled>
</li>
</ul>
</div>
</div>
</MTIfArchiveTypeEnabled>

を記入して保存します。
上記をそのままCOPY&PASTしてもダメなようです。そのままCOPY&PASTすると「”」が全角になるようです。エディターで「”」を半角に戻してからPASTしてください。

本文は

http://bluehawk.infinitybird.com/2007/0403045644.html
を参考にして文字化けしないように修正しました。

テンプレートの設定をクリック
新しいアーカイブマッピングを作成
種類でユーザーを選択—追加  パスがauthor/author-basename/index.htmlになっていると思います。
プレビューで動作確認して正常に動作していれば 変更を保存
サイトを再構築
FTPソフトでブログフォルダーのauthorの中を見て、index.htmlが存在するアドレスをメモしておきます。
何故かauthor/author-basename/index.htmlになっている場合とauthor/author1-1/index.htmlになっている場合があります。
そのindex.htmlがサイトマップのページになります。
サイトマップを表示するボタンを挿入したい場所にauthor/author-basename/index.html(もしくはauthor/author1-1/index.html)へのリンクを挿入します。
最後にサイトを再構築して完了です。

ちなみに自分の場合はバナーヘッダーに挿入しましたが、ウィジェットセットのウィジェットテンプレートを作成してリンクを埋め込んでも大丈夫です。

福井はガソリンが安い

2017年6月27日

福井県鯖江市の坊商店で給油しました。ガソリンが115円でした。

ちなみにカナショクの看板価格は119円でした。

2017年6月20日

福井県坂井市のベストプライスで給油しました。ガソリンが116円でした。
福井県坂井市のPLANT3も116円でした。

ちなみにカナショクの看板価格は119円でした。

2017年6月13日

福井県坂井市のベストプライスで給油しました。ガソリンが117円でした。
福井県坂井市のPLANT3も117円でした。

ちなみにカナショクの看板価格は121円でした。

2017年6月6日

福井県坂井市のベストプライスで給油しました。ガソリンが116円でした。
福井県坂井市のPLANT3では117円でした。

ちなみにカナショクの看板価格は121円でした。

2017年5月26日

福井県鯖江市の坊商店で給油しました。ガソリンが116円でした。

ちなみにカナショクの看板価格は122円でした。

2017年5月23日

福井県坂井市のベストプライスで給油しました。ガソリンが115円でした。

ちなみにカナショクの看板価格は122円でした。

2017年5月16日

福井県坂井市のベストプライスで給油しました。ガソリンが118円でした。

福井県坂井市のPLANT3では117円でした。

ちなみにカナショクの看板価格は122円でした。

2017年5月9日

福井県坂井市のベストプライスで給油しました。ガソリンが119円でした。

ちなみにカナショクの看板価格は122円でした。

ほとんど差が無くなってきました。

2017年4月21日

福井県鯖江市の坊商店で給油しました。ガソリンが119円でした。

ちなみにカナショクの看板価格は126円でした。

2017年4月11日

福井県坂井市のベストプライスで給油しました。ガソリンが121円でした。

ちなみにカナショクの看板価格は126円でした。

2017年4月4日

福井県坂井市のベストプライスで給油しました。ガソリンが121円でした。

ちなみにカナショクの看板価格は126円でした。

2017年3月24日

福井県鯖江市の坊商店で給油しました。ガソリンが122円でした。

ちなみにカナショクの看板価格は126円でした。

2017年3月17日

福井県坂井市のベストプライスで給油しました。ガソリンが121円でした。

ちなみにカナショクの看板価格は126円でした。

2017年2月28日

福井県坂井市のベストプライスで給油しました。ガソリンが119円でした。随分、値上げになりました。

ちなみにカナショクの看板価格は123円でした。

2017年2月21日

福井県鯖江市の坊商店で給油しました。ガソリンが116円でした。

ちなみにカナショクの看板価格は123円でした。

2017年2月14日

福井県坂井市のベストプライスで給油しました。ガソリンが117円でした。

ちなみにカナショクの看板価格は123円でした。

2017年2月7日

福井県坂井市のベストプライスで給油しました。ガソリンが117円でした。

ちなみにカナショクの看板価格は124円でした。

2017年1月31日

福井県坂井市のベストプライスで給油しました。ガソリンが117円でした。

ちなみにカナショクの看板価格は124円でした。

2017年1月24日

福井県鯖江市の坊商店で給油しました。ガソリンが117円でした。

ちなみにカナショクの看板価格は126円でした。

2017年1月17日

福井県坂井市のベストプライスで給油しました。ガソリンが117円でした。

ちなみにカナショクの看板価格は126円でした。

2017年1月6日

福井県坂井市のベストプライスで給油しました。ガソリンが115円でした。

ちなみにカナショクの看板価格は125円でした。

2016年12月19日

福井県坂井市のベストプライスで給油しました。ガソリンが115円でした。

ちなみにカナショクの看板価格は123円でした。

2016年12月6日

福井県坂井市のPLANT2で給油しました。ガソリンが112円でした。

ちなみにカナショクの看板価格は118円でした。

2016年11月29日

福井県坂井市のPLANT2で給油しました。ガソリンが110円でした。

ちなみにカナショクの看板価格は118円でした。

2016年11月15日

福井と石川のガソリンの価格差が無くなったので、金沢で給油する事が多くなっていたのですが、福井にいる時に、ガソリンが少なくなったので、ベストプライスで給油しました。111円でした。PLANT2も111円でした。
ちなみにカナショクでは看板価格117円でした。

2016年2月23日

今日、福井県坂井市のベストプライスでレギュラーガソリンが96円だったので給油してきました。

ちなみにカナショクの看板価格は102円でした。

2016年2月16日

福井県坂井市のベストプライスとPLANT2、福井県鯖江の坊商店は、いずれもガソリンが99円でした。

ちなみにカナショクの看板価格は103円でした。

2016年2月2日

興味があって、福井県坂井市のベストプライスとPLANT2の前を通りましたが、いずれもガソリンが99円でした。

ちなみにカナショクの看板価格は103円でした。

2016年1月19日

今日、福井県鯖江の坊商店の前を通ったらガソリン100円の看板がたっていたので思わず給油しました。
ガソリン100円というのは、以前は普通って感覚でしたが、最近はガソリンが高かったので安いって感じがします。

ちなみにカナショクの看板価格は105円でした。