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

2017年5月21日

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

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

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

2017年5月26日

MovableTypeの掲示板を設置してみました。ユーザーが自由にトピックを設置できるようです。

http://kimassi.net/fp/

2017年5月28日

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

まず、アイコンの使用をやめます。
yyini.cgiの

# アイコンモード (0=no 1=yes)
$iconMode = 0;
を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”; }
に変更します。
これで文字が大きくなります。これで基本的な対処は終わりで、後は幅を狭くするための微調整になります。

# ミニカウンタの設置

$counter = 0;
にします。

# 家アイコンの使用 (0=no 1=yes)

$home_icon = 0;
にします。

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

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=”投稿する”><input type=reset 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の改造は一応終わりです。
次は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”;

に変更します。

yyregi.cgi の

#————————————————-
# 時間取得
#————————————————-
sub get_time {
$ENV{‘TZ’} = “JST-9”;
$times = time;
($sec,$min,$hour,$mday,$mon,$year,$wday) = localtime($times);
local(@week) = (‘Sun’,’Mon’,’Tue’,’Wed’,’Thu’,’Fri’,’Sat’);

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

#————————————————-
# 時間取得
#————————————————-
sub get_time {
$ENV{‘TZ’} = “JST-9”;
$times = time;
($sec,$min,$hour,$mday,$mon,$year,$wday) = localtime($times);
local(@week) = (‘Sun’,’Mon’,’Tue’,’Wed’,’Thu’,’Fri’,’Sat’);

# 日時のフォーマット
$date = sprintf(“%04d/%02d/%02d(%s) %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>

これでモバイルフレンドリー対策はそこそこいってるのではと思います。

ファイナンシャルプランニング技能検定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>

 

を記入して保存します。
本文は
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年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円でした。

Androidで全角数字の入力に苦労した

白ロムのAndroidスマートフォンを使い始めて1カ月になろうとしています。
重宝して利用しているのですが、時々、戸惑う事があります。
今日は、全角数字の入力に躓きました。
何をしても変換対象に全角数字が出てこないんです。
OSはAndroidのバージョンは4.0.4でGoogle日本語入力(バージョン2.17.2160.3-arm)を使っています。入力キーボードはQWERTYを選択しています。
ネットで調べても自分の環境に合わない解決法ばっかりで、役に立たないです。
色々触っていて、偶然解決法を見つけました。
変換選択のキー(あa)をクリックして英字入力になった時に、?123というキーが表示されるのでクリックします。それで数字を入力すると変換候補に全角数字も現れます。