フリー効果音やBGM素材をダウンロードできる新サイトを立ち上げました。まだまだ素材をガンガン増やさなければいけない段階ですが、100点を越えたので発表します。
サイトへのリンク、若しくは素材製作元の表記をして頂ければ、個人・商用ともに無料で使って頂けます。
ポケットサウンド公式 Twitter アカウントを作っています。フォローして頂ければ、新着素材の更新をいち早く知る事ができます。
だいぶん前に効果音素材サイトを作りたいと思った事はありましたが、当時は時間がないだの手間がかかるだの理由をつけて着手しませんでした。しかし、今回 WordPress ベースで製作したのでいとも簡単に立ち上げる事ができました。必要な機能は探せばプラグインがリリースされているので。ただ、ない機能は自分で組む必要がありましたけどね。
ゲーム製作者の方、これからゲームを作ってみたいという方、是非お見知りおきを！
登録版 Web拍手には実装されているページID機能（どのページからのメッセージかわかる機能）を配布版に自力で実装しました。
尚、ここを見て改造する場合は自己責任で行ってください。
form タグの action 属性に指定されているWeb拍手 CGI のアドレスに以下の様に任意のページIDを付与する。（太字の部分）
http://www.hoge.info/cgi-bin/clap.cgi?toppage
１で指定したページID（?以降の部分）が cgi 側で 「$ENV{‘QUERY_STRING’}」に代入されます。そこで、clap.cgi で新たに変数を作ってページIDを代入します。
（例）
$page_id = $ENV{‘QUERY_STRING’};
108行目に入れました。
144行目以降の「さらに送るフォーム＆メッセージ」で一言メッセージを送る時にもページIDを送る為に、自分自身（clap.cgi）の URL を変更します。
$base = $base.”?”.$page_id;
$base にはファイル名が格納されており、「clap.cgi?toppage」のようにページIDが付与された状態のファイル名を格納しなおしています。147行目に入れました。
114行目以降の「一言メッセージ処理」で117行目に２の最初に作ったページID変数を追加。
$mesdata = “$getdate<>$tohour<>$hitokoto<>$page_id<>¥n”;
ログファイルに出力するものの指定です。
114行目以降の「メッセージ表示」という所で120行目に２で作ったページID変数を追加します。
($mesday,$meshour,$message,$page_id) = split(/<>/,$mes[$i]);
ログファイルの中身を分解して変数に代入しています。
ページIDの表示領域を確保します。123行目を変更してテーブルにページIDを表示するようにします。
print “<td>$message</td>¥n<td>$page_id</td><tr>¥n¥n”;
解析画面では次のように表示されるようになります。
ページの数だけWeb拍手をインストールしなくても１つで済みます。
WordPress 3.1.2 にアップデートしてからページ上部に不自然な余白が発生しました。このページで言えばグローバルナビゲーションとページ最上部の間の余白が他に比べて2倍になりました。
普段使ってるブラウザは Google Chrome なのですが、試しに他のブラウザで見てみたら余白は発生していません。Google Chrome だけ CSS が狂うなんて考え難いです。それも当然です。WordPress にログインしている時だけページ上部に余白が発生していたのですから。ログインするのは普段使ってる Google Chrome なので、他ブラウザで発生するわけがありません。
ページソースを見てみると body タグのクラス属性に「home blog logged-in admin-bar」が付加されています。このあたりに原因がありそうです。特に「logged-in」とかログイン中だけに適用される CSS っぽいじゃないですか。
調べてみると WordPress 3.1 から admin bar という機能が追加されたそうです。admin bar の表示領域の為、ページ上部に、しかもログイン中だけ不自然な余白が発生していたようです。うちの WordPress はテーマを独自に改良し他ページとデザインを合わせている為、admin bar たるものは表示されておらず表示領域の余白だけができていました。
不自然な余白などいらないので消しました。
WP3.1で追加された「admin bar」の非表示や、不必要メニューの削除、項目の追加方法 – Website Tips ノート : VARL
Google +1 ボタンが一般サイトにも設置できるようになりました。
+1 ボタンであなたのサイトがよりソーシャルでインタラクティブになります
+1 ボタンとは、ユーザーが気に入ったコンテンツを Gogole 検索でおすすめできる機能です。
Facebookの「いいね！」ボタンを目にしたことがある方もいらっしゃると思いますが、ようはそれの Google 版という事のようです。このボタンがクリックされる事でそのページの評価となり、 Google 検索結果に連動するそうです。既に Youtube などでも Google +1 ボタンが設置されています。
私は Facebook に登録してないし登録する気もない。Google アカウントは持っているのでこっちを支持しますね。 早速うちのサイトでも設置してみました。うちのサイトで設置してもほぼ無意味なのはわかっていますが、脱出ゲームのページであれば使われる事もあるんじゃないかなぁと期待しています。
Google +1 をウェブサイトに表示のページへ行ってボタンサイズなどを選択し、指示に従ってコードを2行追加するだけです。
a href=”http://code.google.com/intl/ja/speed/page-speed/”>Page Speed ホーム
Web サイトの表示速度を評価し、改善方法も提示してくれる Google の「Page Speed」というツールで自分のサイトを試してみました。
82点でした。なかなか良いのではないでしょうか。改善点を列挙してくれていますが、緑色はほぼ問題ない事らしいので無視する事にしました。
サイトが重いとすぐ閉じたくなるので、やはり Web サイトの表示速度は重要です。Web サイトをお持ちの方は試してみる価値ありです。
公式ツイートボタンが使われたら知らせてくれるようにするにはどうしたらいいか考えました。
１．についてはその通りです。単一ページであればそれで解決です。しかしブログのようにページタイトルが可変する場合そうはいきません。
２．の場合も解決できますが、わざわざ段階を踏ませてフォローを促すようなしつこい真似もしたくない。
３．でツイート数は出ますが、精度はいまいちで時間が経つと表示されなくなります。
以下のようにしてみました。
<a href=”http://twitter.com/share?text=<?php the_title(); ?> « <?php bloginfo(‘name’); ?> via @Azell365” class=”twitter-share-button” data-count=”horizontal” data-lang=”ja”>Tweet</a><script type=”text/javascript” src=”http://platform.twitter.com/widgets.js”></script>
the_title() で記事タイトルを、bloginfo(‘name’); でサイト名を表示させています。段階を踏ませてフォローを促すことなくツイートテキストにアカウント名を紛れ込ませる事ができました。
スマートフォンで twicca などのTwitterアプリを利用していればツイートボタンが使われたら（リプライがきたら）アラートで知らせてくれるような設定もできます。公式を使っていても自分宛のリプライに表示されるようになります。
記事の投稿サムネイルを取得したい場合、「get_the_post_thumbnail」という関数があります。（Wordpress 2.9以降）
しかし、これを使うにあたってはいくつかの罠がありました。
投稿サムネイルを有効にするには、使用しているテーマの functions.php に add_theme_support( ‘post-thumbnails’ ); を追加する必要があります。
そのまま追加すると、テーマエディタが崩壊したようになります。
「add_theme_support( ‘post-thumbnails’ );」 はphpで動作させる為に <?php ～ ?> でくくる必要があります。
ただ画像付きの記事を投稿するだけでは機能しません。
編集画面の右下に「アイキャッチ画像」というものがあります。そこからサムネイル用画像を指定する必要があります。
これでようやく機能しました。
ウェブサイトの右上に下図のようなサブメニューをよく見かけます。企業サイト等は特にサイトマップ等のメニューを配置している例が多いです。
これをやろうとすると、まずヘッダーにdivで段組みしてfloatで並べるという手を思いつくのですが、これはめんどくさいしコード的にも美しくないです。じゃあどうするかというと、下記のような方法を取る事にします。
floatなどを使わずに直接動かしちゃいましょうと。しかし、ここで問題にぶち当たる事になります。
IEでは問題ありませんが、Firefoxでは相対配置で右に動かした分だけ横スクロールが出てしまうのです。大変悩まされましたが、下記で解決できました。
overflow-x: hidden;
ちょっと待って、overflow-x ってIEの独自仕様じゃないんですか？と思って調べてみると、どうやら「overflow-x/y」はCSS3の草案に上がっており標準化される見込みだとか。Firefox・その他モダンブラウザはCSS3として解釈しているようです。
動かすボックスに width 指定するだけで大丈夫でした。
上の図はリストをナビゲーションメニューにして、その下にpタグで囲った画像を置いてあるシンプルなものですが、IEとFirefoxでは何かが違います。リストと画像の間のスペースです。
原因はわかっています。メニューにはfloatを使っていて、それを解除できていない為です。スペースは空いて欲しいですが、残念ながらCSSの解釈的にはIEが間違っている話になります。しかし、メニュー下部のpタグにcssのclearプロパティで回り込みを解除しても、解決しません。
調べた結果、下記のコードで解決できる事がわかりました。
ul:after{
content: “”;
clear: both;
display: block;
}
「:after」擬似要素でul要素の後に回り込み解除用の要素を挿入している模様。実質親要素(ul)で回り込み解除しているのかな。何故ul直後のpタグで解除できないのかよくわからない。
結果こうなりました。IEには影響なし！
どのような人にもサイトが使いやすいか、いわゆるアクセシビリティをWeb上でチェックできます。
ウェブアクセシビリティチェックサイトHAREL
当サイトは80点でした。まだまだです。
ところで、一応キーボードでナビゲーションメニューが操作できるようにaccesskey属性を設定しています が、それを使う人はどのようにして設定を知り得るのだろうと不思議に思っていました。わざわざソースを見たりしないでしょうし。
上記チェックサイトによると
accesskey属性で指定したキーをkbd要素を用いて記述して下さい。
とあります。
kbd要素とは何ぞと思って調べてみると、つまり直に書いてくださいと言っているようです。そんなサイト見た事ないのですが。直に書くのは厳しい。
尚、Operaだと「Shift + ESC」でaccesskey設定を確認できるようです。これも知ってないと使えない。
