作成者アーカイブ: manabu uekusa

facebookの新機能 Recommendations Barの使い方

投稿日: 作成者:
返信

この記事の所要時間： 約 5分7秒



最近、Recommendations Barという機能がBetaリリースされたので
早速試してみました。

F8で発表されたオープン・グラフの強化機能です。
オープングラフに関しては。前の記事を参考して下さい。
ちょっと前のTechWaveでも「Facebookが先導する次のソーシャルはアプリによるログ自動発信」で話題になっていたので
機能を実装して試してみました。

どんな機能かと言うと、ページを見に行ったときに自動的に
フィードに”読みました”とログを出す機能です。
当然ですが全員が勝手にフィードされると困るので
最初にこのページはフィードに自動で流して良いよってチェックをします。

ページにリコメンデーションバーを設定すると、右下もしくは左下に
バーが表示されるようになります。



Add to Timelineをクリックした人が自動でフィードに流れるようになります。
以降はページを見たら自動でフィードされます。

やり方は、ページにコードを張るだけなんですが
ページ自体にOpenGraphの設定をしていないといけないとか
実はFacebookAppの登録もしていないといけないとか
結構大変でした。

リコメンデーションバー コードの作成

http://developers.facebook.com/docs/reference/plugins/recommendationsbar/
このページでパラメータを設定すればHTML5のコードが作成されます。

URL of the article

　自分のページのURLを指定します。

Trigger

　3種類あります。
　　onvisible ： このタグが張ってあるところまでスクロールすると動きます。
　　X% ： たとえば50%と指定すると半分まで読まれたら動くようになります。
　　manual ：　ちょっとコードを書いてボタンが押したらとか手動で動くようにできます。

Read Time

　読まれてから何秒で動くかという指定です。デフォルトは30秒に指定されています。

あとは、like か recomenndって表示するかとか、表示場所を右下か左下かって設定です。

アプリケーションの登録

次に、facebookアプリケーションの登録を行います。
https://developers.facebook.com/apps
このページで新しいアプリケーションの登録ボタンから行います。

こんな感じの内容を設定しました。

基本設定



OpenGraph

read / article で設定します。
細かい設定をするとフィードされるコメント内容も
カスタマイズすることが出来ます。

以上設定すれば動きます。
が、結構はまりました＾＾

こんなハマッタポイントは

１．OpenGraphのmetaタグはbodyじゃなくてhead部分に持って行く（じゃないと動かない）
　このページでOpenGraphが設定されているかテストができます。
　　https://developers.facebook.com/tools/debug
２．＜fb:recommendations-bar /＞のタグを付けておく
３．recommendations bar を付ける位置
　タグの位置が変なところに付けると２つ出力されたりします＾＾
　まだ、Bataだからしょうがないけど…

作ったサンプルサイトのコードを載せておきます。
デモサイト

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

<!DOCTYPE HTML>
<head>
<meta charset=UTF-8>
	<!-- OGP proflie -->
	<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# article: http://ogp.me/ns/article#">
	<meta property="fb:app_id"      content="157327414357189"> 
	<meta property="og:type"        content="article"> 
	<meta property="og:url" content="http://bot.vc/recbar.html">
	<meta property="og:site_name" content="botvc">
	<meta property="og:title" content="recommendations_bar_test">
	<meta property="og:description" content="facebook new function recommendations bar test ">
	<meta property="og:image" content="http://profile.ak.fbcdn.net/hprofile-ak-ash2/162059_191329184218216_1313551_n.jpg"/>
<title>Recommendations Barのテストサイト</title>
<body>
 
<!-- recommendations bar -->
<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) {return;}
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/all.js#appId=157327414357189&xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
 
<div class="fb-social-bar" data-href="http://bot.vc/recbar.html" data-read-time="10"></div>
<!-- /recommendations bar -->
 
<br>
<font color="#f00">このページは、Recommendations Barのテストサイトです。<br>
facebookの新機能を使って、10秒経つと自動でフィードにコメントを流すようになっています。<br></font>
 
<pre>
リコメンデーションバーは、facebookの新機能で現在βテスト中の
自動でフィードへ流してくれるログシステムです。
 
たとえば、Webページを最後まで読んだら投稿するとか
表示させたら投稿するとかが簡単にできるようになります。
 
facebookのソーシャルプラグインと一緒で
<a href="https://developers.facebook.com/docs/reference/plugins/recommendationsbar/
" target="_blank">https://developers.facebook.com/docs/reference/plugins/recommendationsbar/</a>
このサイトでパラメータを設定すると、HTML5が生成されるので
それをページに貼るだけ。
毎回フィードに投稿する手間がなくなって便利♪





こんな感じで、やっと動くようになりました。
ニュース記事だけじゃなくて、色々な使い方があるんじゃないかなぁと。
サンプルでは、料理のレシピサイトとかもあったりします。

facebookはtwitterに比べてリアルタイム性が低い感じのサービスだったけど
よりリアルタイムに近い機能が増えてきた印象です。
今後は、色々なページにRecommendationsBarが付いてきそうです。







スマートフォンサイト構築に役に立つ３つのノウハウ

投稿日: 作成者:
返信

この記事の所要時間： 約 6分15秒


最近、スマートフォンの利用者が増えてきました。
そこで、Webサイトもスマートフォン化されてきたのが
ちょこちょこ増えたかなぁと思っています。

たとえば、

「ソフトバンク」


「Yahoo!」


「Google」


「ユニクロ」


「ローソン」


こんなサイトがスマートフォン対応サイトを構築しています。
HTML5/CSS3をつかったコーディングが増えてきたので
スマートフォンサイトの構築も増えてきたのかなと。

スマートフォンサイトの構築は、これからたくさん出てくると思うので
構築時に役に立つノウハウ３つを、まとめておきたいと思います。

１．レイアウト

スマートフォン対応サイトはＰＣサイトと違って
画面サイズが小さくなります。
しかも、iPhoneだけでなく、最近ではAndroidも増えてきたので
大きさが、まちまちになってきました。

どんなサイズがあるのでしょうか？
ちょっと調べてみました。

iPhoneの大きさはこんな感じです。


他の端末はどうでしょうか？

機種 解像度
iPhone3G / 3GS 320×480
iPhone4 640×960
iPad / iPad 2 768×1024
HT-03A 320×480
Xperia (SO-01B) / Xperia arc (SO-01C)
REGZAPhone(Docomo&AU)
IS05
IS01
REGZA Phone （T-01C）
Motorola MileStone2		 480×854
HTC Desire (X06HT)
Nexus One
Galaxy S　（SC-02B）
HTC Evo 4G
LYNX 3D （SH-03C）
DELL Streak 001DL
Nexus S
IS06		 480×800
IS03 / LYNX （SH-10B） 640×960
Galaxy Tab  （SC-01C） 600×1024
HTC-Aria
Optimus chat
004HW
HT-03A HTC Magic		 320×480
Huawei Ideos U8150-B(120dpi/ldpi)
PocketWifiS
Xperia10 MiniPro(120dpi/ldpi)		 240×320

こんなに種類がありました。

ではどの大きさに合わせればいいのでしょうか？
スマートフォンのサイトは、縦はスクロールするので
そんなに気にせずに、横はiPhoneにあわせて320pxが良いと思います。
ただ、横も可変で作ればそんなに意識して作ることないかなと画像サイズぐらいかな。

HTML5だと、下記のmetaタグのviewport指定で端末にあわせた可変長を指定できます。

<meta name="viewport" content="width=device-width, initial-scale=1,minimum-scale=1, maximum-scale=1">



２．１クリックで電話

２つめのノウハウは、せっかくスマートフォンサイトなので
電話が１クリックでかかるようにします。
実は簡単で、電話番号を入れたリンクを作るだけです。

こんな感じで作ります。

<a href="tel:電話番号">クリックで電話</a>


簡単に電話連絡できるページができるので
是非試してみて下さい。


３．地図

３つめのノウハウは、地図の表示です。
地図の表示はGoogleを使えば簡単にページ内に表示が出来るし
GPSが付いているので、GoogleMAPとの連携をして
迷子にならずに簡単に誘導することもできます！

やり方は簡単で、GoogleMAPから好きな場所を指定して
右上のリンクボタンを押して、「埋め込み地図のカスタマイズとプレビュー」から
大きさを指定してカスタマイズします。

GoogleMAPの右上リンクボタンを押す



カスタマイズ画面で大きさを変更して、下に表示されているHTMLをコピー



横幅を320pxにすれば画面にぴったり入るので
今回は、320×320にしてみました。

作った埋め込み用のHTMLを張ればOKです！
リンクの名前を「大きな地図で見る」から「GoogleMAP」とかに変更して
アプリが立ち上がる用のリンク文言に変更すれば、ちょっと良くなるかな…

今回サンプルで作った、地図のタグはこれです。

<iframe width="320" height="320" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.co.jp/maps?q=%E9%8C%A6%E7%B3%B8%E7%94%BA%E9%A7%85&amp;ie=UTF8&amp;hq=&amp;hnear=%E9%8C%A6%E7%B3%B8%E7%94%BA%E9%A7%85%EF%BC%88%E6%9D%B1%E4%BA%AC%EF%BC%89&amp;gl=jp&amp;t=m&amp;vpsrc=0&amp;brcurrent=3,0x601888d8988b4701:0x4f0db0656bf23228,0&amp;ll=35.69641,139.813986&amp;spn=0.020911,0.027466&amp;z=14&amp;iwloc=A&amp;output=embed"></iframe><br /><small><a href="http://maps.google.co.jp/maps?q=%E9%8C%A6%E7%B3%B8%E7%94%BA%E9%A7%85&amp;ie=UTF8&amp;hq=&amp;hnear=%E9%8C%A6%E7%B3%B8%E7%94%BA%E9%A7%85%EF%BC%88%E6%9D%B1%E4%BA%AC%EF%BC%89&amp;gl=jp&amp;t=m&amp;vpsrc=0&amp;brcurrent=3,0x601888d8988b4701:0x4f0db0656bf23228,0&amp;ll=35.69641,139.813986&amp;spn=0.020911,0.027466&amp;z=14&amp;iwloc=A&amp;source=embed" style="color:#0000FF;text-align:left">GoogleMAP</a></small>



まとめ

今回はスマートフォン用のサイトノウハウをまとめてみました。
iPhoneやAndoroidのサイトもどんどん作っていけるなと。

今回の作ったサンプルはこんな感じです。
レイアウト、電話、地図を含めて作ってみました。


実際に動くサンプルサイト
スマートフォンでアクセスしてみて下さい。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63

<!doctype html>
<html>
    <head>
        <meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1,minimum-scale=1, maximum-scale=1"> 
		<link rel="stylesheet" href="jquery.mobile-1.0b3.min.css" />
 
		<script src="jquery-1.6.1.min.js"></script>
		<script>
		$(document).bind("mobileinit", function() {
			  $.mobile.page.prototype.options.addBackBtn = true;
		 });
		</script>
		<script src="jquery.mobile-1.0b3.min.js"></script>
        <title>スマートフォン サンプルサイト</title>
    </head>
	<body>
	<div data-role="page" id="index" data-theme="d">
  			<div data-role="header">
			    <h1>ヘッダー</h1>
			</div>
			<header><img src="logo.jpg" width=320></header>
		<div data-role="content" >     
 
			<ul data-role="listview">
			<li data-role="list-divider">見出し</li>
			<li><a href="tel:0120010916">
					<h3>マクドナルド お客様相談センター 0120-010-916</h3>
				</a></li>
				<li><a href="#">
					<h3>メニュー２</h3>
				</a></li>
				<li><a href="#">
					<h3>メニュー３</h3>
				</a></li>
				<li>
					<h3>リスト１</h3>
				</li>
				<li>
					<h3>リスト２</h3>
				</li>
			</ul>
			<br><br>
			<ul data-role="listview">
			<li data-role="list-divider">地図</li>				
<iframe width="320" height="320" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.co.jp/maps?q=%E9%8C%A6%E7%B3%B8%E7%94%BA%E9%A7%85&amp;ie=UTF8&amp;hq=&amp;hnear=%E9%8C%A6%E7%B3%B8%E7%94%BA%E9%A7%85%EF%BC%88%E6%9D%B1%E4%BA%AC%EF%BC%89&amp;gl=jp&amp;t=m&amp;vpsrc=0&amp;brcurrent=3,0x601888d8988b4701:0x4f0db0656bf23228,0&amp;ll=35.69641,139.813986&amp;spn=0.020911,0.027466&amp;z=14&amp;iwloc=A&amp;output=embed"></iframe><br /><small><a href="http://maps.google.co.jp/maps?q=%E9%8C%A6%E7%B3%B8%E7%94%BA%E9%A7%85&amp;ie=UTF8&amp;hq=&amp;hnear=%E9%8C%A6%E7%B3%B8%E7%94%BA%E9%A7%85%EF%BC%88%E6%9D%B1%E4%BA%AC%EF%BC%89&amp;gl=jp&amp;t=m&amp;vpsrc=0&amp;brcurrent=3,0x601888d8988b4701:0x4f0db0656bf23228,0&amp;ll=35.69641,139.813986&amp;spn=0.020911,0.027466&amp;z=14&amp;iwloc=A&amp;source=embed" style="color:#0000FF;text-align:left">GoogleMAP</a></small>
			</ul>
			<br><br>
			<ul data-role="listview">
			<li data-role="list-divider">入力フォーム</li>
			<div data-role="fieldcontain">
				<label for="textarea">ラベル：</label>
				<input type="text" name="name" id="name" value=""  />
				<a href="#" data-role="button" >OK</a>
			</div>
			</ul>
		</div>
		<div data-role="footer">     
			<h4>フッター</h4>   
		</div> 
	</div> 
	</body> 
</html>



このサンプルは、jQueryMobileを使っています。
jQueryMobileのようなフレームワークを使うと
iPhomeアプリのようなサイトを作れて良いと思います！
jQueryMobileの詳しい説明は次回以降で＾＾

この書籍も参考になります
iPhone+Android スマートフォンサイト制作入門 (WEB PROFESSIONAL)




参考サイト

http://emylo0.com/androi%E3%81……%E3%81%8D/
http://blog.asial.co.jp/814
http://html5-css3.jp/smartphon……wport.html
http://www.nexchange.co.jp/blo……rchives/98
http://ascii.jp/elem/000/000/543/543575/

facebook F8 で発表された２つの新機能、タイムライン・オープングラフと、最近リリースした４つの新機能まとめ

投稿日: 作成者:
1

この記事の所要時間： 約 4分55秒



今回のF8でfacebookの新機能２つがkeynoteで紹介されました。
タイムラインとオープングラフです。

F8 の keynote動画


それぞれと、あと最近リリースされた４つの機能
ティッカー、ニュースフィード統合、フレンドリスト、フィード購読
も、まとめておきます。

★timeline

これからのプロフィールページは、タイムライン表示となります。
今まではその人の最新投稿のウォールを見ていたが
時系列でその人の生涯の記録をビジュアル的に見やすく表示させます。

Timelineはこんな感じで表示されます。

http://www.facebook.com/mauekusa




タイムラインに表示されているコンテンツは、非表示にしたり日付の変更をしたり自由に編集することも出来ます。
また、Feature on Timelineの機能で大きく表示して目立たせることも出来ます。

現在、デベロッパーにのみ提供されています。
使ってみたいという方は、このブログに詳しくやり方が載っているので
参考にしてみたらいいかなと思います。
http://f.daccot.com/2011/09/23/9077/

ちなみに、Mobile用（スマートフォン）の画面も作ったそうです！素敵♪

★オープングラフ

いままで、「いいね！」ボタンがfacebookだけじゃなくて、Webページに色々付いていて
ボタンを押すとfacebookのニュースフィードに流れていく仕組みになっていたけど
今後は、3rd partyでも色々なアクションボタンを作ることが出来るようになるみたいです。
APIにはActionDefinisionとアクションを定義する仕組みになっているので
Likeの他にReadやListen、Watch、Cookとか言われていますが、
それ以外にも色々定義されていくようです。

たとえば、レシピサイトには、Cookボタンが配置されて
Cookボタンを押すとティッカー、ニュースフィード、タイムラインにそれぞれ表示されるようになります。
いままでは、フィードだけだったのが、ニュースフィードとは別の時間の流れの
ティッカーや、タイムラインが出来ることで目に触れる機会が増える気がします。

この動画を見ると、新しいSocialAppsのイメージが分かります。
見てるとワクワクしますね〜。


■ティッカー

友達の状況がリアルタイムに反映されているティッカー
画面の右上に流れているのがティッカーになります。

最近、facebookのソーシャルゲームをやると、ゲームだけフィルターされて
ティッカー表示されています。SocialAppsのカテゴリごとにフィルタされて
ティッカー表示される新しいAppsを発見できるのでいいですね〜

オープングラフのデータをフル活用するのが、このティッカーの役割かなと。
ティッカーが出来てからfacebookの中の時間の流れがTwitterに近づいた気がします。

■フレンドリスト

気がつくとHOMEの左側にリストが増えていて
親しい友達、家族などのリストが表示されるようになりました。
リストは前からあった機能ですが、HOME左側に常時出すことで
リストのメンバーだけ簡単に、コミュニケーションをとることが出来るようになりました。

たとえば、親しい友達のリストに追加して、近況のUPDATEを行うと
デフォルトで親しい友達だけ参照できるようにコメントに制限をかけているので
Google+のサークル内の人だけにメッセージの交換と同じような使い方ができそうです。
facebookからするとリストって機能もあるから活用してねってことなのかなと。

■ニュースフィード統合

ハイライト（EdgeRankによる重み付けされた記事）と、最新情報（最新のものから全て表示）の2種類あったが
１つに統合されました。ハイライトと最新記事の配分はユーザーのアクセス頻度から判断して調整されるそうです。

TOP Storyの機能を使うことで、自分の興味があうニュースフィードになっていきます。
「All Updates(全投稿）」「Most Updates(ほとんどの投稿）」「OnlyImportant(重要としたもののみ）」と
フィルタをかけて表示させる量を調整することも出来るようになりました。

ハイライトと最新記事の切り替えをやって見ていたのが
面倒だから統一して、TOP Storyで調整してねってことかなと。

■フィード購読

友達申請は5000人までが上限となっていて、それ以上の申請は承認できないようになります。
いままでは友達申請に承認されたものだけフィードに流れてきましたが
このフィード購読って機能を使うと、友達承認しなくても購読をしておくと
フィードに記事が流れてくるようになります。

フィードの購読は許可を行えば、申請しなくてもユーザーが自由に見ることが出来るので
いままでfacebookページとか作っていて情報を広範囲に流していた人は
良い機能なのかなと思います。フィードの購読者一覧も見えます。

■まとめ

facebookは、UIを含めてどんどん新しい機能をリリースしています。
はじめは画面が変わってビックリしたりするけど、そのうち慣れて
便利に感じてくるのかなぁと思っています。

この動画を見ると最近のリリースした機能を分かりやすく理解できます。


オープングラフはとても興味深い機能なので
APIも含めて調べてちょこちょこ作ってみようかなと思ってます。
調べたら、BLOGにまとめてみたいと思います。

The Sims Social をやってみました！

投稿日: 作成者:
返信

この記事の所要時間： 約 1分57秒


先日書いたんですが、FarmVilleを抜いて2位になって話題になっている
EAのTheSimsSocialという新しいソーシャルゲームをやってみました。

ゲームの内容は、ハコニワ系で自分の家を飾っていくような感じのソーシャルゲームです。



Zyngaと同じようにEnergy制になっていて、一定時間で行動が制限される仕組みになっています。
ちなみに今LV9になっていて、EnergyがMAX15です。5分で1つ回復するので
75分サイクルですね。

家の中で、パソコンを使ったり、電子レンジで料理をしたり
ギターで演奏をしたり、音楽で踊ったりと色々アクションができます。





アクションをするとXPが入ったりして特定アクションを繰り返していくと
スキルがあがる仕組みになっています。



あと、CityVilleとかと違うのは、家の中のGoodsがめちゃおおくて
家具や家電、水回りの用具など用意されています。



お金の種類が、Simoleons、SimCash、SocialPointsと3種類あって
それぞれで買えるアイテムが買えてあります。Cashはお金で買えて
SocialPointsは友達の家に行ってアクションを起こすともらえます。

Zyngaのゲームと違うのは、友達の家に遊びに行ったときでも
使用するEnergyの制限が無くて自分のEnergyを使って活動できるのが
ちょっと違うかなって感じがしますが、基本はクリックのソーシャルゲームなので
少しやればやり方は分かると思います。

SimsSocialが2位になるのは、やっぱり凝った家具などの家具の種類かなと。
FarmVilleとは違って種類が多いから人の家と違う感じに出来るのが
人数が増える理由の一つかなぁと。
あとは、FarmVilleとかよりも友達の家に行って多くのアクションを行うので
他の人と遊んでいる感じがより多くするのがいいのかなと。

しばらく様子を見ながらやってみたいと思います。
みなさんも息抜きにやってみたらどうでしょ？

TheSimsSocial
http://apps.facebook.com/thesimssocial/

Sims Social が Farm Villeを抜いて2位に。Zyngaの一人勝ちも終わり？

投稿日: 作成者:
1

この記事の所要時間： 約 2分5秒



EAから出ているTheSimsSocialが、ZyngaのFarmVilleを抜いて
2位になったという記事を見つけました。
http://d.hatena.ne.jp/gumilab+……1316576714

socialbakersを見ると2011/09/22のLastmonthのランキングでも
1位がCityVilleでDAU 12,968,991、2位がTheSimsSocialで11,299,942で
差も詰まってきてるじゃないですか！
http://www.socialbakers.com/fa……ry/8-games



いままで、facebookのsocial gameはZyngaの一人勝ちが続いてきてたけど
それも陰りが見えてきた？と言うよりも新しいのが出てきたって事だと思うけど＾＾
ちなみに、TheSimsSocialは、Simsのソーシャルゲーム版で
まあ、ハコニワ系かな。友達の家に遊びに行って仲良くなったり
自分の家にアイテムを置いて飾ったり出来るので
CityVille/FarmVilleと同じ系統なんだけど、まあ家って事で見た目が違うかなと
ゲームの内容自体は、今度レビューを別の機会に書いてみたいと思います。

Zyngaは、3ヶ月ぐらいの間隔で新しいゲーム出してるので
上位5位を見ても、CityVille、FarmVille、Empires&Allies、TexasHoldEmPokerと
TheSimsSocial以外はZyngaのタイトルで埋まっていて、これからも
新しいCityVille系のが出れば10位には確実に入ってくるのかなぁと。

EAもTheSimsSocialでガッツリ人を集められているので
FarmVille→CityVilleのように、ゲーム内で誘導をかければ
EAから新しいゲームがリリースされても人数を集めるのは強いかも。
まあ、それよりも面白いソーシャルゲームが作れるかってのが問題だけど＾＾

個人的には、Mafia Wars 系で、新しいゲームがEAでないかなぁ。
まあ、3ヶ月はTheSimsSocialで引っ張ると思うけど〜

ということで、EAのTheSimsSocialをしばらく見てみようと思います。
当然、Playもしてみます＾＾

WordPress 関連記事の表示方法

投稿日: 作成者:
返信

この記事の所要時間： 約 0分59秒


ちょっと前に、インストールしたプラグイン30個を紹介しましたが
その１つに、Similar Postsって関連記事を表示出来るプラグインを入れたんですが
なんと！表示されてませんでしたｗ
正確に言うと、設定されてなかった…

ということで、改めて設定しました。
Similar Postsのプラグインを入れると設定に表示されるようになるので
Placement の設定項目で、Output after post:をYESにすれば
関連記事が表示されるようになります。
ちなみにパラメータは、こんな感じで設定しました。

 prefix=<br /><h2>関連記事:</h2><div  class="similar-posts">&suffix=</div>





ということで、関連記事が表示されるようになりました
めでたしめでたし。

Similar Postsプラグイン
http://wordpress.org/extend/pl……lar-posts/
一緒に必要なプラグイン
http://wordpress.org/extend/pl……n-library/

HTML5 の新機能 WebStorageAPI

投稿日: 作成者:
返信

この記事の所要時間： 約 5分18秒


前回、前々回とHTML5の新機能の話をしました。
前回は、スマートフォンが圏外でもコンテンツが見えるキャッシュマニフェスト
前々回は、HTML5の新要素のについてまとめました。
今回は、WebStorageAPIについてまとめてみます。

WebStorageはデータが保存できるようになります。
いままでは、データを保存するのに、Cookieなどを使用していましたが
Cookieは4kByteしか使えない、使用できる数はドメインごとに300程度
必ずサーバ通信が発生するという制限がありました。
また、Cookieでは有効期限も設定出来ました。

HTML5で新登場したWebStorageの特徴は
・容量が5MByte
・テキストのみ保存可能
・サーバー通信なし
・キー名と値のペアでデータ保存
って感じです。

まあ、Cookiが良いとかWebStorageが良いとかいうんじゃなくて
用途によって新しい方法が増えたって感じです。

WebStorageAPIは、データ保存が異なる2種類があります
・LocalStorage
・SessionStorage
LocalStorageは、データの保存期間が無制限です。
SessionStorageは、Webブラウザを閉じるまでデータが保存されています。

使い方はすごいシンプルで

localStorage.setItem("keys", value);


keysのキー名で、valueが保存されます。

データを取得するときは

data = localStorage.getItem("keys");


で、keysに保存されたデータを取得することができます。

関連する関数一覧を作ってみました。

こんな感じです。

ローカルストレージにデータを保存・取得する
サンプルを作ってみました！

サンプル デモ

サンプル ソース

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54

<!DOCTYPE HTML>
<head>
<meta charset=UTF-8>
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=0"> 
<link rel="stylesheet" href="hello.css"> 
<title>localStorage</title>
	<script type="text/javascript" src="jquery.min.js"></script>	
	<script type="text/javascript"> 
		$(function() {
		    $('#nameForm').submit(function() {
		        if ($('#data1').val() != '') {
		        	localStorage.setItem('data1', $('#data1').val());
		        }
		        if ($('#data2').val() != '') {
				localStorage.setItem('data2', $('#data2').val());
		        }
		    });
		});
 
		$(document).ready(function(){
		    // データ読み込み
		    var data1 = localStorage.getItem('data1');
		    var data2 = localStorage.getItem('data2');
		    if(data1 != null || data2 != null){
		    	$('#navigator-online').html("前回データ<br /> data1:"+data1+"<br /> data2:"+data2+"<br />");
		    }
	        $("#cl").click(function(){
				// 全データクリア
				localStorage.clear();
	        });
	        $("#cl1").click(function(){
				// data1削除
				localStorage.removeItem('data1');
	        });
	        $("#cl2").click(function(){
				// data2削除
				localStorage.removeItem('data2');
	        });
		});
 
	</script> 
</head>
<body>
<h1>HTML5 <br />localStorage テスト<br /></h1>
<form id="nameForm">
   <p id="navigator-online">データを入力して保存を押すとlocalStorageに保存されます。</p>
   data1:<input type="text" name="data1" id="data1" /><br />
   data2:<input type="text" name="data2" id="data2" />
   <input type="submit" value="保存" /><br /><br />
   <input type="button" id="cl" value="全データクリア" />
   <input type="button" id="cl1" value="data1削除" />
   <input type="button" id="cl2" value="data2削除" />
</form>
</body>



ちなみに、こんな感じで書いても動くみたい…。

localStorage.setItem('data1', $('#data1').val());
localStorage['data1'] = $('#data1').val();
 
var data1 = localStorage.getItem('data1');
var data1 = localStorage['data1'];
 
localStorage.removeItem('data1'); 
delete localStorage['data1'];



localStorageの注意点は、ドメインごとで管理されているので
ホスティングされている共通ドメインのサービスとかで
clear()を使うとドメイン内の全部のデータが消えてしまうので
注意が必要です。ホスティングとかだとremoveItemsで
明示的に消した方がいいです。

ちょっとした保存するデータ。たとえばサービスのオプション設定とかは
DB使わなくても、localStorageで十分かもしれない。

あと、前回の記事で書いたキャッシュマニフェストとlocalStorageの組み合わせで
オフライン（圏外）の時にも表示出来るサイトも作成出来るし
localStorageにXMLやJSONデータを先読みしておけば
プリフェッチ機能として利用でき、サイトを高速に表示しているように出来るし
便利な機能だと思います。

今後は、WebStorageAPIも活用していこうと思います。

過去記事：
　HTML5/CSS3の新しい機能
　HTML5新機能　キャッシュマニフェスト

HTML5新機能　キャッシュマニフェスト

投稿日: 作成者:
1

この記事の所要時間： 約 4分53秒


前回は、新しい要素の追加について書きました。前回記事
今回は、キャッシュマニフェストについて書きたいと思います。
HTML5の新機能というか、キャッシュ機能は前からあったと思うのですが
まあ、HTML5で CACHE MANIFESTの紹介がたくさん載っているので
新機能でも良いかなとｗ

キャッシュマニフェストは、HTML、JS、CSS、画像などのファイルを
PC側にキャッシュとしてもって次回の表示を速くしたり、
オフライン（スマートフォンだと圏外）でも表示してくれる機能です。
圏外で表示が出来るなんて、スマートフォンには必須の機能な気がします。

設定の仕方は、
１．apacheにmime追加
２．キャッシュマニフェストファイル作成
３．HTMLへキャッシュマニフェストの利用設定
ってな感じで、そんなに難しくありません。
簡単に手順をメモっておきます。

１．apacheにmime追加

mimeの追加の方法は2つあります。
httpd.confに直接各方法と、.htaccessに記述する方法

下記の1行を.htaccessに記述して
公開するフォルダにファイルをおいておきます。

AddType text/cache-manifest .manifest



２．キャッシュマニフェストファイル作成


1
2
3
4
5
6
7
8

CACHE MANIFEST
# version 1.0  2011.09.13-07
 
CACHE:
hello.html
hello.css
banana.gif
jquery.min.js


.manifestファイルを作成します。
#がコメント行になります。

このキャッシュマニフェストファイルを更新しないと
HTMLなどのコンテンツを更新しても反映されないので
コメント行をつけて、Version管理などをして
HTMLファイルを更新したときにVersionを変えて
HTMLを反映させます。

キャッシュマニフェストファイルを更新しないと
HTMLが更新されないんです＾＾


３．HTMLへキャッシュマニフェストの利用設定


HTMLファイルに、先ほど作成したマニフェストファイルを指定します。

<html manifest="hello.manifest">


作ったHTMLのサンプルを載せておきます。
ポイントは、HTML宣言の次の行にキャッシュマニフェストの指定をすること
何気にハマッたんですが、metaタグの後とかに書くと
キャッシュマニフェスト効かなかったりします＾＾
一番最初に宣言するのがいいですね。
（まあ、キャッシュ宣言なんだから当然といえば当然だけど…）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

<!DOCTYPE HTML>
<html manifest="hello.manifest">
<head>
<meta charset=UTF-8>
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=0"> 
<link rel="stylesheet" href="hello.css"> 
<title>タイトル</title>
	<script type="text/javascript" src="jquery.min.js"></script>	
	<script type="text/javascript"> 
      (function($) {
        $(function() {
          if(!("applicationCache" in window)) {
            alert('ApplicationCache is not supported in this browser.');
            return;
          }
          $(applicationCache).bind('updateready', function() {
            applicationCache.update();
            applicationCache.swapCache();
          });
          if(applicationCache.status == applicationCache.UPDATEREADY) {
            applicationCache.update();
            applicationCache.swapCache();
          }
          $('#navigator-online').html(navigator.onLine ? 'online' : 'offline');
        });
      })(jQuery);	
	</script> 
</head>
<body>
<style>p{color: red;}</style>
<p>HTML5 <br />CACHE MANIFEST テスト<br />
	<img src="banana.gif"><br>
	<a href="hello2.html">hello2 リンクテスト</a><br />
	リンク先もキャッシュが効きます。
<p id="navigator-online"></p>
</p>
</body>



実際の動きはこっちで
　デモ
実は、見ても変化がないので、何じゃって感じですが
1回参照したら、後はオフラインにしても見えます！
PCだったらLANを抜くとか無線を切るとか、スマホだったらフライトモードに。

こんな感じの画面になります。
フライトモードでも見えてるよ♪


キャッシュファイルの確認もブラウザだと出来ます。
chromeだとコマンドをURLに指定すればキャッシュファイルが表示されます。

about:appcache-internals



こんな感じでキャッシュファイルが確認できます
キャッシュの削除を意図的にすることも出来ます。


これで、オフラインでも見える便利なサイトが完成です。
スマートフォンでは非常に有効な機能かなと。
たとえば、イントラのナレッジDBを参照したりとか
アドレス帳を作っておいてクリックしたら電話がかかるとか
頻繁に更新されないコンテンツには最適ですね。

次回は、localStorage機能をまとめてみたいと思います。

前回記事：
　 http://blog.bot.vc/2011/09/html5css3new/

HTML5/CSS3の新しい機能

投稿日: 作成者:
2

この記事の所要時間： 約 2分20秒




HTML5/CSS3の記事や書籍が多くなってきた気がする。
Wikipediaによると、2008年にドラフトが発表されて
2014年まで正式勧告を目指しているそうです。

HTML5/CSS3で書かれているサイトも
最近は結構増えてきたなぁと思ってます。
appleとかローソンとかはHTML5で書かれてますね〜

apple.com
http://www.apple.com/


ローソン
http://www.lawson.co.jp/


ちなみに、chromeであれば、HTML5Detectorを
使えればHTML5で記述されているか簡単にチェックできます。

HTML5で新しいなぁと思う機能は
この３つかなと。

１．新しい要素の追加
２．キャッシュマニフェスト
３．WebStorage

とりあえず、今日は１．の新しい要素の追加について
まとめてみます。



実際はこんな感じで動きます。

search:

tel:

url:

email:

file:

number:

range:

color:

datetime:

date:

month:

week:

time:

datetime-local:


progress:50%

meter:75%


コード

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

search:<input type="search"/><br/>
tel:<input type="tel"/><br/>
url:<input type="url"/><br/>
email:<input type="email"/><br/>
file:<input type="file"/><br/>
number:<input type="number"/><br/>
range:<input type="range"/><br/>
color:<input type="color"/><br/>
datetime:<input type="datetime"/><br/>
date:<input type="date"/><br/>
month:<input type="month"/><br/>
week:<input type="week"/><br/>
time:<input type="time"/><br/>
datetime-local:<input type="datetime-local"/><br/>
<input type="submit" value="送信">
<hr>
progress:<progress max="50">50%</progress><br/>
meter:<meter value="75" min="0" max="100">75%</meter><br/>



こんな感じに新要素が使えます。
まだまだ、ブラウザが対応していないので
chromeとかでもcolorとかdateとかで
カラーダイヤログやカレンダーが表示されない感じですが
入力チェックは動いているみたい。これから対応されるのが楽しみです。
しばらくは、jqueryで頑張るしかないかな。

次は、キャッシュマニフェストについて調べてまとめてみます。
オフラインでもWebが使えるので非常に気になっている機能です

参考URL

HTML5 要素
http://www.html5.jp/tag/elemen……index.html

Wikipedia：HTML5
http://ja.wikipedia.org/wiki/HTML5

Chrome extensions HTML5Detector
http://www.html5.jp/library/ht……ector.html

WordPress スタイルの変更

投稿日: 作成者:
返信

この記事の所要時間： 約 3分13秒



記事タイトルとか、Widgetのタイトルとかを
CSS3を使って変更しました！

最近は、文字に影を付けたり
角丸のBOXにしたりをCSS3で簡単にすることが
出来るようになりました！

特に、スマートフォンにはHTML5/CSS3は有効みたいです。
スマートフォン用のCSS3の話は、また今度にするとして
今回は、WordPressに設定したCSS3をメモで残しておきます。

今回変更したのは
BLOGタイトル
記事タイトル
Widgetタイトル
検索BOX
を変えてみたよん。

実際には、style.cssを書き換えた程度
/wp-content/themes/[使っているテーマ]/style.css です。


BLOGタイトル

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

.entry-title {
	clear: both;
	color: #222;
	text-shadow: 1px 1px 1px #999;
	font-size: 22px;
	font-weight: bold;
	line-height: 1.5em;
	padding-bottom: .3em;
	padding-top: 15px;
 
	border-style: none none none solid; 
	border-color: #3399cc; 
	border-width: 1px 1px 1px 5px; 
	padding: 5px 10px; 
	margin-bottom: 1em; 
	background-color: transparent; 
}



このスタイルで影を付けています。
text-shadow: 1px 1px 1px #999;

Widgetタイトルの角丸は

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

.widget-title {
	color: #666;
	font-size: 14px;
	font-weight: bold;
	letter-spacing: 0.1em;
	line-height: 2.6em;
	text-transform: uppercase;
	border-style: solid; 
	border-color: -moz-use-text-color -moz-use-text-color #3399cc; 
	border-width: 1px 1px 1px 1px;  
	margin-bottom: 1em; 
	background-color: #f2f2f2; 
	padding: 0px 10px; 
	border-color: #ddd;
	border-radius: 7px;
}



このスタイルでタイトルの背景を角丸にしてます。
border-radius: 7px;

同じ感じで、検索窓とか
記事タイトルも変更しています。

参考になれば☆

追記

サブタイトルについても変更してみました。

<h2>サブタイトル</h2>


こんな感じで指定するとスタイルが変更されるようにCSSに記載を追記しました。

1
2
3
4
5
6
7
8
9

.entry-content h2 {
	font-size: 20px;
	border-style: none none solid solid;
	border-color: #ccc; 
	border-width: 1px 1px 1px 5px; 
	padding: 5px 10px; 
	margin-bottom: 1em; 
	background-color: transparent; 	
}



良い感じで表示されるようになりました〜