作成者アーカイブ: manabu uekusa

iOS5にアップデートする際のポイントと、便利な５つの新機能

投稿日: 作成者:
2

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


iOS5にアップデートしました。
昨日はサーバが混んでいたので、エラーが出ちゃってあげられなかったけど
今日は、ようやくアップデート出来ました。

と言っても、すんなりアップデート出来なかったので
そのメモをまとめておきます。

まず、アップデートする前に必ずバックアップをとっておきましょう！
私の場合は、アップデートする前にバップアップが自動でされるだろうと
思っていたんですが、取れてなかったので手動でとるのが必要かなと。

iTuneでバックアップ対象の端末を選択して、右クリックから
バックアップで出来ます。詳しくはアップルサイトを見て下さい。

で、アップデートを行うと本来はiOS5に上がるのですが
私の場合は、iOS5に上がった後の設定ウィザードで、「iPhoneを探す」画面から
先に進まなくなってしまいました。
次へボタンを押しても動かない！え〜って感じでした。

ちなみに、iOS更新までのiTuneのステータス変化は
こんな感じで変わっていきます。
結局途中で寝ちゃったんで、細かく取れてないけど＾＾



で、設定ウィザードは、下記の画像の感じで進んでいきます。
1枚目の画像が復元になっているけど、それ以外は一緒です。
最初のアップデートで止まっちゃったのは、「iPhoneを探す」の画面で
次へを何回押しても次の画面に行かなくてハマリました。
結局HOMEボタンを押して「初期化」を選んで、復元させました＾＾




他の人の話を聞くと、やっぱりエラーが出たりとかするらしいので
何回かチャレンジするとiOS5に上げられますよ。

便利そうな５つの新機能


iOS5の機能紹介は、下記のURLで確認できますが
http://www.apple.com/jp/ios/fe……tures.html
個人的に便利そうな機能をまとめてみます。

１．フリックのみ設定
今回、一番便利なんじゃないかと思ったのは
フリックの設定が変わって、たとえば「ああ」って入力するときは
２つめの「あ」を入力するときに、ちょっと待つか、→を押して
入力していたんですが、このフリックのみに設定すると
「あ」を２回押すと「ああ」と入力されます。
これで、文字入力ももっと楽になりますね！




２．カメラ機能
カメラも「オプション」設定が撮影時に増えて
HDRの設定と、グリッド表示の設定が出来るようになりました。
グリッドは９分割になるように、グリッドが表示されるので
センターに合わせて撮りたいとかが楽になります。



あと、自動編集で色味などを変更してもらえます。
１タッチで綺麗になったりするから
これも、結構便利な機能じゃないかなぁと。

（編集前）


（編集後）


３．通知センター
時間が表示されている画面を、下にフリックすると
通知センターが表示されます。
「天気」「カレンダー」「メール」「facebook」などの通知が
一元的に見えるので便利になりました。



ちなみに、Boxcarを入れるとTwitterも通知されるようになるそうです。
Boxcar
http://itunes.apple.com/jp/app……93542?mt=8

４．Twitter連携
OSレベルでtwitterと連携するようになりました。
写真もメール添付と同じ感覚で、ツイートを選べばツイートが簡単にできます。
連絡先にもTwitterアカウントが設定出来るようになりました。
Twitterからアイコンを取り込むことも出来るようになったので
ちょっとは便利になったかな。（TwitterIDを個々に追加登録するのが面倒だけど）



５．iCloud
iCloudでフォトストリームとか便利だなぁって思ったんだけど
Mac側がLionOSじゃないと動かないことに気がつくｗ
ということで、Lionじゃないと何が出来るかっていうと…
うーん、バックアップぐらい？ｗ

設定画面はこんな感じです。
何をiCloudに同期するかとか設定出来ます。



実は、このサイトからアクセスすると
https://www.icloud.com/
「メール」「コンタクト」「スケジュール」「iPhoneを探す」「iWork」のメニューが出来ます。
メールとスケジュールはExchange使ってるから使わないので
結局、無くしたときに探すぐらいしかないのかな＾＾
iCloudはもうちょっと調べてみないとダメかな…。



参考サイト

http://www.apple.com/jp/icloud……p/mac.html
http://www.appbank.net/2011/10……312027.php

facebook Mobile用モジュールが公開されました！

投稿日: 作成者:
返信

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


fecebookは毎月3億5000万超のアクセスがMobile端末からあるそうです。
今回は、Mobile用のモジュールがfacebookから公開されました。
モジュールは大きく３つのプラットフォームに提供されています。

１）WebApps用
HTML5/CSS3を活用しています。
２）iOS用
　iPhone/iPad ネイティブアプリに組み込めます。
３）Android用
　Android ネイティブアプリに組み込めます。

WebAppsで何が出来るのか、サマリを簡単にまとめてみます。

１．ログイン・ログアウト
　認証用のMobileダイアログが表示されてログインができます。
　SocialPluginのログインボタンが簡単に使えるようになるみたいです。

２．GraphAPIも簡単に使える
　たとえば、ユーザー情報や、友達の情報が簡単に取得できます。
　アイコンも簡単に表示が出来ます。

３．友達に紹介も簡単に
　友達に紹介するためのIUも簡単にできるように用意されています。
　ユーザーは友達を選ぶだけで簡単にWebAppsを紹介出来ますね！

　しかも、iPhoneのfacebookAppsを入れているユーザには
　Notificationを使ってPush通知も簡単に送れるみたいです。これはすごい！


４．Timeline対応
　これはまだ出来てないみたいで、Comming soonになってます。
　そのうち、対応するみたいです。

５．News Feed
　当然、ニュースフィードも簡単にあつかえます。
　フィードへ投稿も出来るし、表示も簡単に出来そうです。

６．Social Plugins
　Likeボタンも簡単にタグを書くだけで表示させられます。
　OGPを設定すれば、「いいね！」した時のコメント・アイコンもカスタマイズ出来ます。


７．その他
　検索や、ブックマーク、facebook creditsも使えそうです。

詳細は。facebook developersページに書いてあります。
　 http://developers.facebook.com……web/build/

スマートフォンのSDK対応をfacebookがしてきたことで
facebook対応のスマートフォンサイトやアプリが増えてきそうですね。
時間があったら、サンプル作って試してみようかな。

参考記事

http://techwave.jp/archives/51……05577.html
http://developers.facebook.com……es/mobile/

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/