LinkedIn(リンクトイン)が日本語化に! 7つの機能特徴もついでに紹介


この記事の所要時間: 625



ついに、ビジネスプロフェッショナルのためのSNS、 LinkedIn(リンクトイン)が10/20に日本語化されました。
アメリカでは2番目に使われているSNSが、Linkedinです。
日本語化されたんですが、日本語表示にするのに迷ったので、やり方を紹介します。

ついでに、7つの機能特徴も紹介しちゃいます。
LinkedInの使い方が分かるように入門編として参考になればと思います。

LinkedIn日本語表示

facebookとかの設定と違って、言語設定はページの一番下にあります。
LinkedInにログインしたら一番下の「Language」をクリックして「日本語」を選択すれば
すぐに日本語表記に変更されます。簡単でしょ。
でも、知らないとSettingsを探したりウロウロしちゃいますww


LinkedInとは

LinkedIn(リンクトイン)は、2003年5月にサービスを開始した
ビジネスに特化したSNSです。リンクドインじゃなくて、リンクトインと読みます。
2011年10月時点で200カ国、1億2000万人の会員が登録されています。
1秒に2人のペースで増え続けているそうです。

ユーザーは、自分のキャリアを管理して、生産性を高めるためのツールとして
利用します。転職だけに利用するものではないそうです。
法人にとっては、B2Bのマーケティングや、採用などをするために利用します。

Facebookは、プライベートのコミュニケーションの場で、
LinkedInは、ビジネスの場になります。

法人利用の場合、FacebookはB2Cのマーケティングとして利用が多く、
LinkedInの場合は、B2Bのマーケティングに活用するのが多いようです。
また、非営利活動NPOの利用も想定されていて、
75,000の非営利団体が登録・活用しています。

LinkedInの収益源は、プレミアム会員費、広告、採用ソリューションが
各1/3の割合でバランスくなっています。
求人ページは月8000円程度の破格の値段で一枠出せるそうです。
強力な検索ツールや、外部連携ボタン(いいね!ボタンのような
ソーシャルプラグイン)などもあります。

日本語版のiPhoneアプリもリリースされています。
http://itunes.apple.com/jp/app……29040?mt=8


7つの機能特徴

LinkedIn入門編として、簡単に7つの機能特徴についても説明します。
LinkedInの使い方が、少しでも理解できればと^^

1.求人の検索(Jobs)
おすすめの仕事が出てきます。自分のプロフィールとのマッチングがされ最適な結果が表示されます。
自分のキャリアを想定して、こんな経験経験がしたいというキーワードなどを入力し、フィルタをかけて職業を探せます。



2.会社ページ(Companies)
企業・大学・NPOの検索が出来きます。
会社をフォローすると情報がシグナルに流れてきます。
その会社で働いている人のプロフィールも見ることが出来ます。

あなたのネットワーク(your network)から、
会社に所属している自分の知人を探すことも出来ます。
企業の統計情報で、元社員が、次にどの会社に就職しているかも分かります。


あと、求人情報や製品情報も、企業ページに載せられます。
製品情報は、商品を誰が使っているかなども見え、
ユーザーレビューなども見ることが出来ます。
プロダクトごとに推薦文がつけられる仕組みになっています。

3.ニュース(LinkedInToday)
ニュース機能もあります。自分に最適化されたニュース画面が表示されます。
残念ながら、現時点では日本語には対応していないみたいです^^
ニュースは、自分が欲しいリソース情報を登録(フォロー)しておくと、
業種に合わせた情報が見えるようになります。


4.プロフィール(Profile)
どうやって検索に引っかかるようにするか、自分をアピール出来るという
観点で登録します。他のユーザーも、かなり詳細にプロフィールは登録しています。
プロフィールを参照されると、誰が見たか、mixiの足跡みたいな機能があります。
プロフィールをチェックした人も一覧で表示が出来て、プロフィール閲覧数(PV数)
検索キーワードのレポートが見えます。


5.シグナル機能(LinkedIn Signal)
ホーム(HOME)を選択すると、Twitterのタイムライン(TL)や、
Facebookのウォール のようなアクティビティが流れます。
(3次コンタクト以内まで見えるそうです)

キーワードによるフィルタをかけることも可能です。
キーワード検索にマッチした結果にフィルターをかけて絞り込むことも出来ます。
人探し機能とや、口コミ調査にも役立ちます。検索キーワードは保存も可能です。

6.広告(Advertise)
ユーザーは、プロフィールを細かく入力しているため
ターゲットを絞った広告を打つことができます。
1億2000万人のビジネスパーソンがターゲットになるため非常に有効です。

今までのターゲティングは性別や年齢・地域などでターゲットしてましたが
LinkedInでは、所属会社などでターゲット出来るのが特徴です。


広告はユーザーの利用画面の右側に表示されます。

7.スマートフォンアプリ
スマートフォンアプリは、HTML5で記述されたアプリです。
iPhone / BlackBerry / Android / Palmの端末プラットフォームに対応しています。


スマートフォンに最適化されたWebインターフェースもあります。
https://touch.www.linkedin.com/
このURLにアクセスすると利用できます。


スマートフォン用のアプリ利用は、youtubeで紹介されています。


まとめ

LinkedInが日本語化されたことで、日本ユーザーも増えると思います。
SNSがたくさんあって、どう使っていいか困ってしまうという話も良く聞きます。
まあ、適当に自分にあった使い方をするのが一番イイと思います。

私は、こんな感じで使い分けています。

Twitter : リアルタイムに近いもののやり取り、ノイズっぽいのも気にせずにツイート
facebook : 実際に会ったことのある友人のみを基本的に承認。プライベートなことを多く投稿。写真を多めに投稿。
LinkedIn : ビジネスに関することを投稿。人にコンタクトするのに、誰に紹介してもらえると良いのかなども活用できる。

LinkedInの強みは、多くのキャリア詳細を入力されているので、自分のキャリアによりあった情報がたくさん入ってくるようになります。
また、ビジネス上で人とコンタクトする際の助けになったりすると思います。

facebookと大きく違うのは、この人に到達するには、この人を経由すれば良いと
コンタクトの経路が明確に分かるように、表示されているのが特徴だと思います。

使ってみると色々分かってくると思うので、LinkedInのIDを持っていない人は
是非登録して、チャレンジしてみて下さい。

LinkedIn(リンクトイン)
http://www.linkedin.com/

iOS5のフリックがもっさり感じる時の解消法


この記事の所要時間: 159



iOS5にしてから、フリックがもっさり遅くなったと感じませんか?
色々調べてみたら、学習辞書のリセットを行うと解消できるというのを知りました。
そういえば、iOS5に限らずiOS4の時も、メモリが足りなくなったら学習辞書のリセットをしたなと。

具体的な方法は、設定から一般でリセットを選択


キーボードの変換学習をリセットを選択


辞書をリセットで、学習した変換辞書が削除されます。


予測変換とかを学習しているので、その学習が削除されるだけで
登録しているユーザー辞書は削除されませんので、あしからず。

これで、80%ぐらいの人は、もっさり解消できるみたい。
一番の解消はiPhone4Sに変えるのがいいみたいですw

ちなみに、iOS5はiOS4に比べてパフォーマンスが良くなっているみたいなので
iPhone3GSでもアップデートして、色々設定をいじった方が速くなるかも。
アップデートの方法は、前の記事を参考にして下さい。

iOS5にアップデートして通知やiCloudの設定を色々してみた結果
電池の持ちを考えると、通知は最低限使うものだけに絞って
iCloudもほとんどの同期を止めちゃいました。

通知設定はこんな感じです。


細かい設定方法は、前の記事を参考にして下さい。

iCloud設定はこんな感じ。


フォトストリームと写真とデータをオンにしているんですが
もうちょっと様子を見て、両方オフにしちゃうかも^^
結局他のデバイスで見るときはDropboxに入れたりするので
フォトストリームはLionOSに上げたら必要なのかなと。

あと、Spotlight検索もほとんどの項目をオフにしています。
連絡先だけ検索対象にして、あとは止めちゃいました。


みなさんもSpotlight検索使わなければ止めちゃうのがいいですよ。
必要ならば、必要なときにオンにすればいいので。

ということで、今回はiOS5のチューニングの話で
フリックもっさり解消と、メモリの節約についてまとめました。

iOS5関連記事

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

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

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


この記事の所要時間: 127



最近、数人の知り合いから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はクリックしないようにして下さい。

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


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

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

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

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


この記事の所要時間: 324



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

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



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

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


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


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

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

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

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

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


 1)なし: 表示しない。
 2)バナー: 上側にバナー型で表示します。
 3)ダイアログ: いままでと同じようにPOPUPダイアログで表示します。
 通知センターでオフにしてもバナー表示になっていると上側に通知されるから
 画面に表示したくなければ両方オフにしないとダメですね。
 (ハマリました^^)

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


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

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


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

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

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

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


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


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


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

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

 

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


この記事の所要時間: 126



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



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

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



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

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

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

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

トレイラー


ゲームプレイ動画


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


この記事の所要時間: 150



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


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を動かします。
あまり必要ないかもしれないけど^^
ちょこっと使えると便利なときあるよね。

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

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

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


この記事の所要時間: 412


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

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

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

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

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

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



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




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

便利そうな5つの新機能


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

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




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



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

(編集前)


(編集後)


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



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

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



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

設定画面はこんな感じです。
何を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用モジュールが公開されました!


この記事の所要時間: 221


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

1)WebApps用
HTML5/CSS3を活用しています。
2)iOS用
 iPhone/iPad ネイティブアプリに組み込めます。
3)Android用
 Android ネイティブアプリに組み込めます。

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

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

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

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

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


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

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

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


7.その他
 検索や、ブックマーク、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の使い方


この記事の所要時間: 57



最近、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 で設定します。
細かい設定をするとフィードされるコメント内容も
カスタマイズすることが出来ます。

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

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

1.OpenGraphのmetaタグはbodyじゃなくてhead部分に持って行く(じゃないと動かない)
 このページでOpenGraphが設定されているかテストができます。
  https://developers.facebook.com/tools/debug
2.<fb:recommendations-bar />のタグを付けておく
3.recommendations bar を付ける位置
 タグの位置が変なところに付けると2つ出力されたりします^^
 まだ、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が付いてきそうです。







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


この記事の所要時間: 615


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

たとえば、

「ソフトバンク」


「Yahoo!」


「Google」


「ユニクロ」


「ローソン」


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

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

1.レイアウト

スマートフォン対応サイトはPCサイトと違って
画面サイズが小さくなります。
しかも、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">



2.1クリックで電話

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

こんな感じで作ります。

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


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


3.地図

3つめのノウハウは、地図の表示です。
地図の表示は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>メニュー2</h3>
				</a></li>
				<li><a href="#">
					<h3>メニュー3</h3>
				</a></li>
				<li>
					<h3>リスト1</h3>
				</li>
				<li>
					<h3>リスト2</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/