「WEB」タグアーカイブ

google adsenseの広告をPC用とスマフォで振り分ける

サイトを運営していると、各閲覧環境である程度の見た目を保証しないといけなくなります。

google adsenseもその一つ。広告収入なんて雀の涙ですが、ある方がやはりやりがいが出ます。そのついでにこうやって記事のネタにもなります。

今回はphpで閲覧者のブラウザを判定してPC用とスマフォ用に振り分けて広告を表示しましょう。

参考にしたのはこちら。
[WP] wp_is_mobile と iPad と WP Super Cache の怖い関係 – @mekemoke

function is_mobile(){
$useragents = array(
'iPhone', // iPhone
'iPod', // iPod touch
'Android.*Mobile', // 1.5+ Android *** Only mobile
'Windows.*Phone', // *** Windows Phone
'dream', // Pre 1.5 Android
'CUPCAKE', // 1.5+ Android
'blackberry9500', // Storm
'blackberry9530', // Storm
'blackberry9520', // Storm v2
'blackberry9550', // Storm v2
'blackberry9800', // Torch
'webOS', // Palm Pre Experimental
'incognito', // Other iPhone browser
'webmate' // Other iPhone browser
'webmate' // Other iPhone browser
);
$pattern = '/'.implode('|', $useragents).'/i';
return preg_match($pattern, $_SERVER['HTTP_USER_AGENT']);
}

自分でユーザーエージェントをそれぞれ調べるのは大変だったので、大変助かりました。そのままお借りして、こうします。

function googlead() {
if(is_mobile()) { //携帯デバイス
$ad = <<<"EOD"
<div class="googlead">
<!-- aowork mobile -->
<ins class="adsbygoogle"
style="display:inline-block;width:320px;height:100px"
data-ad-client="ca-pub-6633816946643511"
data-ad-slot="9684763319"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
EOD;
} else {
$ad = <<<"EOD"
<div class="googlead">
<!-- aoringo worksS -->
<ins class="adsbygoogle"
style="display:inline-block;width:468px;height:60px"
data-ad-client="ca-pub-6633816946643511"
data-ad-slot="6565776112"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
EOD;
}

return $ad;
}

これでスマフォとPCで広告表示を変える事が出来ますね。広告以外にも、色々な場所で利用する事がでできるかと思います。

ソーシャルボタンをJavaScriptではなく画像で読み込む

1秒台を目指せ!ソーシャルボタンを高速に読み込む方法を比較する » aoringo works

script.jsでgoogleアナリティクスを読み込む » aoringo works

散々迷っていたのに、結局ソーシャルボタンは画像で読み込むようにしました。

JavaScriptで公式から読み込むと時間がかかるんですよね・・・。数字が出るのは嬉しいのですが、私みたいな弱小ブログではどうせ0ばっかですよ。

JavaScriptで各種ソーシャルボタンを読み込むと3秒かかっていた

詳しくは前回の記事をご覧下さい→1秒台を目指せ!ソーシャルボタンを高速に読み込む方法を比較する » aoringo works

どれくらいの時間がかかるのか良く分かると思います。

ソーシャルボタンを読み込むだけで三秒。これはとても大きな数字です。ページを移動するたびにこれだけの時間がかかるのです。大変な事ですよ。

このストレスはページをみてくださる閲覧者に直接のしかかってきます。恐ろしい事ですね。

じゃあもう画像で読み込んじゃおうよ

というわけで本題です。それならもうJavaScriptを使用せずに、用意した画像で良いんじゃない? ということです。

結果ですが、こうなりました。

トップページの表示速度です。わあ。ソーシャルボタンを画像で表示するだけでこんな速度出るんですね。実際、見てみるとビックリしますよ。

各種ソーシャルボタンを画像で読み込むのは簡単です。

<div class="socialset">
<!-- twitter -->
<a href="https://twitter.com/share?text=テキスト&url=アドレス" target="_blank" rel="nofollow">
<img src="画像アドレス" alt="twitter_share"/>
</a>
<!-- facebook -->
<a href="http://www.facebook.com/share.php?u=アドレス" target="_blank" rel="nofollow">
<img src="画像アドレス" alt="facebook_share"/>
</a>
<!-- google+ -->
<a href="https://plus.google.com/share?url=アドレス" target="_blank" rel="nofollow">
<img src="画像アドレス" alt="googleplus_share">
</a>
<!-- hatena -->
<a href="http://b.hatena.ne.jp/add?mode=confirm&url=アドレス&title=ページタイトル" target="_blank" rel="nofollow">
<img src="画像アドレス" alt="hatena_share">
</a>
</div>

これで読み込めます。その他のソーシャルボタンについては私は利用してないので調べてないです。もうしわけぬい。

また、ワールドプレスの場合は今表示しているページのアドレスを出力する関数がありません。なので、

<?php $url = is_single() ? get_permalink() : home_url();?>

とすると、「$url」変数に投稿ページでは現在のアドレスを。その他のページではトップページのアドレスを表示するようになります。

新規ウインドウでページを開くのと、nofollow属性は念のためつけてます。

JavaScriptでポップアップウインドウ内に投稿画面を開く

こんな奴です。小さなポップアップを出しましょう。新しいタブやウインドウよりは個人的にこっち派です。

jQuery(document).ready(function () {
jQuery(".socialset a").click(function () {
window.open(this.href, 'sosialwindow', 'width=550, height=450,personalbar=0,toolbar=0,scrollbars=1,resizable=1');
return false;
});
});

ちゃちゃっとjQueryで記述しちゃいます。socialsetクラスのリンクがクリックされたら小さなウインドウを表示するようにします。

これでソーシャルボタンの画像化終了になります。高速! 早い!

ちなみに、各種ソーシャルアイコンは→画像 – Arabiki – 上質なweb素材とソーシャルアイコン類 » aoringo works

ここで紹介している「Arabiki」様より頂きました。日本のソーシャルサービスの画像もあって素敵です。

上質なweb素材とソーシャルアイコン類を大量に配布する「Arabiki」

Arabiki

個人・商用利用OK、加工OK、条件付きの再配布許可までされている上質なweb素材を配布されています。

全体的にシックで落ち着いた雰囲気の物が多く、高級感のあるサイトを作る事ができそうです。

ソーシャルアイコン素材は日本のサービスもフォローしているのがとても嬉しいです。

サイズも大きくて高画質です。利用する大きさに合わせてリサイズすることも加工OKなため気兼ねなくできますね。

1秒台を目指せ!ソーシャルボタンを高速に読み込む方法を比較する

どもっち。最近TRPGじゃなくてツールばっかり作ってるaoringoです。サイト調整に奮闘しております。

サイトの速度、気になりますかね? 私は超絶気になりますよ。特にソーシャルボタンです。こいつらが原因で遅くなっているのでは・・・・と常々思っております。

今回はこのソーシャルボタンに手を入れてみましょう。

とはいえ、どれくらい表示速度に違いがあるのか・・・ちょっと確認してみましょうか。

計測に使うのはこちら→【これは便利】あなたのWebサイト表示のどこが遅いかを一発で調べるブックマークレット | Web担当者Forum

お手軽に、正確に表示できるので好きです。

素のコードを記述する

空のhtmlファイルにソーシャルボタンを読み込んだだけのページを作成し、これを計測します。

読み込むソーシャルボタンはtwitter、はてな、facebook、グーグルプラスです。ついでにアナリティクスコードも読み込んでみます。

ソーシャルボタンテスト

時間はこんな感じです。何度かリロードを繰り返してみたところ、2秒~2.3秒かかるようなイメージです。

次、このページをiframeで読み込みます。

iframeテスト

時間的には変わらず。が、一応副次的な効果はありますよ。

iframe内でJSファイルを読み込むため、描写が途中で止まってしまうという事がありません。

また、iframe内で読み込むため検索エンジンとかにはjsファイルを隠せるという利点もあります。どれくらいの効果があるかはちょっとわかりませんが。

あと少し古いブラウザだと正常に動作しません。

 非同期読み込みにしてみる

Facebookやtwitterなどのソーシャルボタンを高速に読み込む方法まとめ | Cappee Design

こういう記事を見つけました。非同期読み込みをする事によって、ストレスフリーに記事を閲覧するというものです。試してみましょう。

twitterボタンを例にしてみます。

 

<a href="https://twitter.com/share" class="twitter-share-button" data-via="moeringo" data-lang="ja">ツイート</a>
<script>!function (d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0], p = /^http:/.test(d.location) ? 'http' : 'https';
if (!d.getElementById(id)) {
js = d.createElement(s);
js.id = id;
js.src = p + '://platform.twitter.com/widgets.js';
fjs.parentNode.insertBefore(js, fjs);
}
}(document, 'script', 'twitter-wjs');</script>

<a href="https://twitter.com/share" class="twitter-share-button" data-via="moeringo" data-lang="ja">ツイート</a>
<script>!function (d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0], p = /^http:/.test(d.location) ? 'http' : 'https';
if (!d.getElementById(id)) {
js = d.createElement(s);
js.id = id;
js.async = true;
js.src = p + '://platform.twitter.com/widgets.js';
fjs.parentNode.insertBefore(js, fjs);
}
}(document, 'script', 'twitter-wjs');</script>

「js.async = true;」を追加で記述するだけです。簡単ですね。

asyncテスト

全体の時間はそこまで変わっていません。あまり効果は無さそうですね。

最近海外で流行りのTwitter,Facebook,Google+1,Analyticsをまとめる非同期スクリプトにはてなを加えてみた | ゆっくりと…

一歩進み、この記事の通り非同期スクリプトをまとめられた人が入るようなので使ってみます。

まとめたテスト

時間的には変わりませんが、スクリプトが圧縮されてるので取り回しが楽です。

script.jsを使う

はい、本題です。script.jsを使いましょう。

Javascriptファイルを非同期に読み込む$script.jsを使ってみた | notnil creation weblog

非同期によるファイル読み込みを行うスクリプトファイルです。イエイイエイ!

使い方はとても簡単です。

$script(['foo.js', 'bar.js'], function() {
  // foo.js & bar.js is ready
})

このようにJSファイルを記述するだけで非同期で読み込んでくれます。今回は全てまとめてこのようにしました。詳しい使い方はドキュメントを見てくださいね。

<script type="text/javascript" src="./script.min.js" charset="utf-8"></script>
<script type="text/javascript">
$script(["//platform.twitter.com/widgets.js", "//connect.facebook.net/ja_JP/all.js#xfbml=1","//b.st-hatena.com/js/bookmark_button.js", "//apis.google.com/js/plusone.js", "//www.google-analytics.com/analytics.js"], function () {
ga('create', 'UA-35371593-2', 'ao-works.net');
ga('send', 'pageview');
})
</script>

アナリティクスコードは正常に動作するかわからないのでしばらく検証、別に記述かするようにしたほうがいいかもしれません。また、script.js自体は非同期で読み込んではいけません。正常に動作しなくなります。

script.jsテスト

いきなり早くなりましたね!なんですかねこれ。全ての読み込みが終わり次第jsファイルの読み込みが始まるのでしょうか。実際全ての表示が終わるのは2秒くらいかかりますが、少なくともロードは全て終わってるっぽいです。恐ろしい・・・。

そんなわけで私はscript.jsを選択しようかなと思います。皆さまも色々試してみてくださいね!!

そのTRPGリプレイは誰のもの、目的に合わせて考える書き方と見せ方

そのリプレイ、議事録になってはいませんか

IRCやどどんとふで遊ぶと楽しかった軌跡が確実に残りますよね。特にどどんとふでは、色つきで出力してくれる上、html形式なのでそのままアップロードしちゃえばページとしてコンテンツになっちゃいます。大変便利。

私も見た目を変えるツールなんかを作ったりして、よく利用させてもらっています。

aoringo CHAT logger

さてはて、そういうわけで簡単にログが取れてしまう最近のTRPG事情ですが、それは本当にリプレイでしょうか? 議事録になってやいませんか。今回はそういうお話です。

そもそもTRPG暦が一年にも満たない輩がなに言ってんの? っていう感じですが、お付き合いください。

目的をはっきりさせる

遊んだログを丸々載せる事が無意味だとは言っておりません。例えば遊んだプレイヤーさんが見返して当時を振り返るには、やはり生のログが良いのです。ただ、それを「楽しかったです! 見てください!!」と第三者に見てもらうには、あまりにも大変です。

五時間の文字セッションを遊んだとして、その文字数は全体で数万文字にも及びます。もしかすると数十万文字にも。数万文字というのは感覚的にわかりづらいかもしれませんが、ライトノベル一冊で七万文字程度です。一万文字もあれば、30ページくらいの短編小説ほどの長さになります。

それを「この前こんなセッションしたんだよ」と渡されて、最後まで読む人は何名いるでしょうか、というお話です。一緒に遊んだプレイヤーなら、「面白かったところ」や「特に印象に残ったところ」にさっと移動して「ああ、こんな感じだったよね」と楽しめますが、そのセッションの盛り上がりどころがわからない場合は大変です。この大変さを「負荷」といったりします。

負荷の低いものにするにはどうすればいいでしょうか。方法はいくつかあります。

分割する、短くする、粗筋をつける、見た目を工夫する、効果を活用する。ざっとこれくらい。ひとつずつ見ていきますよ。

ちなみに、web上に公開するリプレイとしてのお話なので、本にしたりするにはまた違ったノウハウなどが必要になるかと思います。でも、大体一緒かなとは考えています。

分割する

本一冊にも及ぶ長々とした文章が、ひとつのページに収まった状況を見た事ありますでしょうか。スクロールバーが恐ろしく小さくなって、それだけで「うっ」となります。場合によっては一文字も見る事なくページを閉じてしまう人もいるでしょう。

最初の一行を見てもらう事がいかに大変か、お分かりになるかと思います。

まずはスクロールバーを大きくしましょう。分割するのです。「part1」とか「第1話」とかつけるのです。それで大体そのページがどれくらいの長さなのか、どれくらいで読み終わるのかがわかります。そこで面白いと思ってもらえれば、次へと移ってくれるはずです。

個人的な考えとして、ひとつのページあたり最大でも一万文字程度が限界だと考えてます。できるなら三千文字程度で抑えられるといいかな、と。

短くする

とにかく削る。ダイスボットの出目や、間延びした会話、相談の内容、はては行動などもガリゴリ削ります。判定は成功したかどうかを書き、戦闘などでお互いが何度もミスをしたらそこをカット。ダンジョンで探索していたら「それからかなりの時間がたち」の一言で時間をかっ飛ばしてもいいですよ?

何度も全体像を見渡して、少しずつ少しずつ影響の低そうなところをとにかく削っていきます。

場合によってはオープニングを一行で済ませて既にダンジョンの前に居る、でも問題ないかもしれませんね。

そのリプレイがロールプレイのやり取りを見せたいのであればそこを濃く、戦闘を見せたいのであればそこを濃くします。そうすると明暗がハッキリと出て読み応えのあるものになります。

粗筋をつける

リプレイの最初に、こんなセッションでしたというのは有効です。内容がわかっても、それが特徴的だったらもっと詳しく見てみたいという人を惹きつける要素になります。

粗筋をどこまでつけるのかは自由ですが、半分以上、最悪エンディングまで書いてしまっても特に問題はありません。10行くらいに圧縮できて、それが面白ければむしろ読みたいと思わせる重要な要素になります。

見た目を工夫する

リプレイ自体の見た目を工夫しましょう。文字がぎゅうぎゅう詰めに詰まっているのは目の毒だし、なにより他の人と一緒の見た目だと読まないままスルーされる可能性すらあります。

好みはあるでしょうが、私の場合は間を大きくあけて文字を少し大きめに、合間に破線を入れております。

これだけでもとても特徴的になります。webページの知識は必要になりますが、勉強しても損はありませんよ。

効果を活用する

これは簡単です。文字の大きさや色を変えるのです。効果的に仕えればとても印象に残りますが、センスが問われますねw 私はやってません。

熱量を大切に

遊んだ後は独特の”熱”があるはずです。それが冷めないうちに是非ともリプレイを作ってもらいたいなと思います。どこが面白くてどこが間延びしたのか、文字では把握しづらい独特な感覚が残っているうちに手をつけたほうが確実に出来はよくなると私は考えていますよ。

そうやって残した物は後になって見返しても確実に楽しいもののはずですし、価値のあるものになるでしょう。そのリプレイが第三者にとって面白いものなのかどうかは最後までわかりません。なにが正解なのかわからないからこそ、こういうものはやりがいがありますよね。

表現、表記、語句の統一を心がける

それぞれのプレイヤーによってその文章の書き方はまちまちでしょう。そういう時によくあるのが表現の違いです。表記の違いでもいいでしょう。笑うときに「(笑)」と「w」で違うときもあるし、「言った」と「いった」とか、「何」と「なに」とか。本当に色々です。リプレイにするとき、これらのゆらぎをどうするか迷うと思いますが、統一するべきです。

これらがゆらいでいると読者が混乱します。誤字脱字、判定方法の間違いなどもその都度、修正や注釈をしていきましょう。読んでくれる人の負荷をできるだけ少なくするように考えるといいかと思います。

同時に、句読点などにも注意を払うようにもします。文字チャットだと句読点をつけないで喋る人や、喋ってしまうことがありますが、著しく読みづらくなる要素なので特に気を配ります。

最後に

楽しいリプレイを書くため、どうすればいいのかという記事は驚くほど少なく、迷うものです。ブログの一コンテンツとしてリプレイをいくつか書き、まとめるには良い時期だと思ったので形にしてみました。

ちなみにこの記事はこの時点で大体2700文字です。ショートショートひとつ分といったところですが。人がさらりと読める文字数は大体これくらい、というのが私の感覚です。そう考えると一万文字というのは結構気合を入れて読む必要があるということ。長くても一万文字にはやっぱり収めたいというのが私の今のところの答えです。

SEO – goodkeyword – SEO対策、無料で使える関連キーワード検出webツール

【goodkeyword】Yahoo/Google関連キーワードツール

キーワードによく併用される関連キーワードを探す事が出来るツールです。

無料で使えて、手軽。余計な情報は一切ついてこなくてとても便利です。

試しに「SEO」で検索してみました。対策、無料、相場、チェックなど、よく併用されるであろう単語が並んでおります。

この結果をみて考えたタイトルが「SEO対策! 無料で使える関連キーワード検出webツール「goodkeyword」がスゴイ」です。SEOに適したタイトルを考えるのはブログ運営では必要になる技術です。是非ともマスターしておきたい・・・ですが、正直SEOなんてよくわかんないよーとか思ってました。

今度からはこれを上手に使っていこうかなと思います。

TRPGのリプレイに最適なCSSスタイルを考える

タイトル通りです。

CSSってのは、HTMLの見た目をエレガントにカッチョウヨクデザインする事の出来る特別な文法であります。この機会に勉強するのもよいでしょう。

この記事では、CSSはある程度理解しているという前提に立ち考えていこうかと思いますよ。

pre か p か dl か。

まずどのHTMLタグを使用してデザインをするのか、選定をしていかないといけませんね。

テキストをそのまま持って来るという意味で、一番簡単なのが「pre」タグです。

<pre>
改行なんかも気にせずいけるもんね
わーいわーい
</pre>

brタグなんかを利用しなくてもそのままコピペでいけちゃいますね。ただ、問題点もあります。

それは各行のデザインをする事が出来ないということ。無難なテキスト丸出しなのでションボリーにな感じになりがちです。

二つ目、「dl」タグです。これは辞典などの項目に用いられますね。

<dl>
 <dt>PC1</dt>
 <dd>あいうえお</dd>
</dl>

こんな感じです。見出しと内容でこのように分かれてくれるの比較的見やすい形になるし、CSSでスタイリングもしやすいです。

が、htmlタグを見ての通り、それぞれの項目をタグで包む必要があるので面倒くさいという点があります。

そんなわけで、今回私は「p」タグを利用することにしました。

このブログを作るのに利用されている「wordpress」では、普通に文章を打てば、吐き出されるhtmlデータは全て「p」タグで囲われているのです。

これを利用しない手はありません。

実際にデザインしていく

とはいっても特に難しい事は考えません。見やすい文章になるように細かく調整していくだけです。

<div class="replay">
 <p>PC1:テスト</p>

<p>GM :テテスト</p>

<p>
 PC1:テストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテスト</p>

<p>GM :テ、テスト</p>
</div>

利用するテキストはこんな感じ。div.replayに囲まれた物のみに適応される形ですね。

素のままだとこんな感じ。

まず横幅を大体600pxにします。これは、横長になりすぎるとそれだけでストレスになる場合があるからですね。

読みやすい!

しかし折り返された文章が名前と被って読みづらい気もします。

そこで。

「text-indent」と「padding-left」を使用します。

text-indentは文章の一行目だけをインデントします。

p{
 text-indent:1em;
}

これで、

こんな感じになるわけですね。

じゃあこうしてみると?

p{
 text-indent:-3em;
 padding-left:3em;
 }

こんな感じで二行目以降にインデントする事が出来るわけですね。

他にも色々と装飾を乗っけて、見やすいTRPGリプレイを目指してみて下さいね。

軽く修正してみて最終的にはこんな形に。

<style type="text/css">
 body{
 max-width :600px;
 margin :0 auto;
 }

p{
 margin :0;
 text-indent :-4em;
 padding :10px 0 10px 4em;
 border-bottom :1px dotted gray;
 font-size :12px;
 font-family :monospace;
 }
 </style>

今回のデモは↑より。

また、aoringo worksではIRCやどどんとふの利用により生成されたチャットログを見やすくするためのwebツールを開発しています。

aoringo CHAT logger

こちらもご利用下さいな。

記事内に自動で広告などの要素を表示する+内容によって場所を変える

広告の場所は悩み物。記事内に表示されるようなページも多いですね。このサイトも同じことをやっています。

記事は基本的に「single.php」によって書き出されます。記事自体の関数は「the_content()」だけで呼び出されているのでここを置き換えてやる。記事内容を変数に代入して、内容に割り込むようにするのだ。

続きを読む 記事内に自動で広告などの要素を表示する+内容によって場所を変える