twitterフィッシング、スパムDMが流行ってるので注意。

投稿日: 作成者:
返信

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



最近、数人の知り合いからTwitterDMでspamが連続して
送られてきたので、ちょっと注意かなと。
「I saw a real bad blog about you, you seen this?」 URLリンク付き
などでDMが送られてきます。

リンクに行くと、Twitterそっくりのサイトに行って
ID・Passwordを取得するというスパムサイトです。
PCにウィルス感染するって事はないと思いますが
TwitterのIDが乗っ取られたり、DMを勝手に送られたりするので注意です。

URLだけ違う、Twitterそっくりなサイトです。


最近では、Twitter側がスパムサイトと判定して
ブロックするようになっているので、大丈夫かなとも思いますが
スパムサイトのURLは複数で作成されていると思うので
怪しいURLはクリックしないようにして下さい。

フィッシング・スパムサイト判定


注意点は
１）怪しいDM・MensionなどのURLはクリックしない。
２）知らないサイトのTwitter認証は行わない。
３）知らないサイトのTwitterアプリ連携の認証は行わない。

もしID・Passwordを入力してしまったら
４）パスワードをすぐに変更する。
　このURLで変更できます。
　　 http://twitter.com/settings/password
５）アプリ連携の許可を取り消す。
　このURLで許可を取り消せます。
　　 http://twitter.com/settings/applications

偽装サイトには注意して下さい。

iOS5の予測変換が固定でボタンが押せないのを回避する方法

投稿日: 作成者:
返信

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



iOS5で通知や、フリックのみの設定が出来るようになって
便利になったなと思って使っていたのですが、不便なところも出てきました。
通知センターや、フリックのみの設定は前の記事を参考にして下さい。

一番不便なのは、iOS5にアップデートしたことで
フリック入力時の予測変換が固定表示になって、
いままで押せていたボタンが隠れてしまって押せない…
候補がないのに表示されるのは邪魔だよぉ〜



たとえば、TweetDeckやfacebookアプリで
写真を添付するボタンが隠れていたり、送信ボタンが隠れていたりと。
最終的にはアプリ側で対応してもらわないとダメみたいです。

でも、アプリが対応していないときの応急処置としては
英語キーボードを表示することで回避できます。
地球ボタンを何回か押せば見慣れたボタンが表示されるようになります。


比較するとこんな感じです。


ようやくこれで、写真添付でツイートできるようになります＾＾
でも、毎回切り替えは面倒なので、早くアプリで対応してほしいですｗ

それと便利になった通知センターですが、
通知しなくても良いのが出たり、通知が消えなかったりしてませんか？

通知もアプリ個別で細かく設定出来るようになりました。

・通知センター
　通知センターに表示するかどうかを設定出来ます。
　オンにすれば通知があれば一覧に表示されます。
　表示で何件表示するかも設定出来ます。

・通知のスタイル
　通知があった場合に、どのように表示するか3種類選べます。


　１）なし：　表示しない。
　２）バナー：　上側にバナー型で表示します。
　３）ダイアログ：　いままでと同じようにPOPUPダイアログで表示します。
　通知センターでオフにしてもバナー表示になっていると上側に通知されるから
　画面に表示したくなければ両方オフにしないとダメですね。
　（ハマリました＾＾）

ここまでは何となく見て分かる設定なのですが
もうちょっと便利な設定項目があります。


・Appアイコンバッチ表示
　地味に嬉しいのはこの機能です。
　アプリアイコンの右上に赤丸の数字が出ます。
　たとえば、メールの未読数とか、facebookの通知数とか
　それを個別に非表示にできます。
　未読をためてしまって気になってしまう人はオフにすると良いかもしれません。

↓メールの通知数が消えてます。


・サウンド
　通知の時に音を出すかどうか
　私はいつもマナーモードにしてるからあんまり関係なかったり＾＾

・ロック中の画面に表示
　いままではロック中には、通知があったときにダイアログで
　表示されるだけだったんですが、iOS5になったら、facebookとか
　メール・カレンダーなどの通知をロック中の画面に一覧で
　表示することが出来るようになりました。

　でも、ロックしているときに見られたら嫌だなって
　思うアプリ通知はオフにしておくと、表示されないので便利です。

あと、通知の設定で、緊急地震速報がOS標準で出来るようになりました。
この機能をオンにすると電池の減りが早くなるので注意です。
ゆれくるコールを設定してるので、私はオフにしています


電池の減りを少なくするテクニックとして、もう１つ設定があります。
位置情報サービス→システムサービスの設定でオフにすると電池の持ちが良くなります。


たとえば、海外にあまり行かなければ、時間帯の設定などはオフでいいと思います。
GPSで場所を判断して、時差の設定をしてくれるんです。
空港に行ったときにオンとかでいいのではないかなと。


私は、位置情報に基づくiAdもオフにしました。
iAdあんまり活用してないので＾＾

今回は、iOS5にした時に不便になったところの
設定方法のまとめでした。参考になれば。

　

ZyngaのMafiaWarsが2になって新リリース！

投稿日: 作成者:
返信

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



Zyngaといえば、Mafia Warsは有名ですが、なんと！
Mafia wars2がリリースされました。
MafiaWarsは、twitterとかだとspamじゃねぇの？とか
色々言われているゲームですが
とりあえず、Facebookアプリからやってみました。



さすが、Zyngaのゲームだけあって良くできてます。
待ちにいる人とかのアニメーションもイイ動きだし
チュートリアルも分かりやすいし、最初の1時間ぐらいで
世界観と操作、ストーリーもしっかり出来ていて
ゲームに入り込めるように出来ています。

あとCityVilleとかよりも、ガッツリ友達を呼ぶようになっています。
友達を招待するにデフォルトで全員に招待ってある！
これってすごいなぁ。さすが、spamじゃねぇのと言われていたほどの
ガッツリユーザーを呼ぶように出来ている。



しかも、はじめから日本語対応されているので（一部英語で残ってるけど）
日本人も始めやすいかも。っていってもゲーム性がマフィアなのと
キャラクターは日本っぽくないので、そんなに日本でブレイクはしないかなｗ
まあ、GTAが流行ったりとかもしたので、望みはゼロじゃないと思うけど。

ちょこちょこやってみようかな。
トレイラーとプレイ紹介の動画もあったので参考まで。

マフィアウォーズ２ 公式サイト
http://mafiawars2.com/

このリンクからゲームができます！
http://apps.facebook.com/mafiawars-two/

トレイラー


ゲームプレイ動画


WordPressに最近追加した４つのプラグイン

投稿日: 作成者:
返信

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



前の記事にWordpressに追加した30個のプラグインを紹介しましたが
最近４つのプラグインを追加しました。


1.所要時間
http://smkn.xsrv.jp/blog/2010/……estimated/

このプラグインを入れると、記事の先頭に
「この記事の所要時間： 約 x分xx秒」 と表示されて便利です！

2.facebook comment
http://bit.ly/nCmj5y

コメントにはDisqusでFacebookとかTwitterとか
色々対応させたんですが、コメント入力するときにこの画面だと抵抗があるかなと。
ということで、facebookのコメントプラグインも表示してみました。
こっちの方がよさそうだったら、Disqus は止めちゃうかも＾＾

3.TSL iframe unfilter
http://wordpress.org/extend/pl……-unfilter/

Wordpressのデフォルトだとiframeを記事の中に表示出来ません。
別にいいんじゃね？って思うかもしれないけど、色々不便です。

たとえば、youtubeを埋め込むとか、slideshareを埋め込むとか
埋め込みタグはだいたいiframeなので、
うまく表示するためには必須のプラグインです。

4.Exec-PHP
http://wordpress.org/extend/pl……/exec-php/

wordpressの記事内にPHPを動かします。
あまり必要ないかもしれないけど＾＾
ちょこっと使えると便利なときあるよね。

ということで、最近追加した４つのプラグイン紹介でした。
所要時間と、facebook commentは、さくっと表示されるので
Wordpressやっていて付けてない人はやってみるといいかも。

いずれも、pluginフォルダにコピーして、プラグインメニューから
有効化をするだけで、設定しなくても動くので。

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/