Archive for 8月, 2011

30 8月FacebookページのSSL対応ページをロリポップの共有SSLを使って作る

FacebookページのSSL対応ページをロリポップの共有SSLを使って作る

ロリポップの共有SSLを使ったFacebookページ用ワードプレスの作り方

Facebookを通常のhttp://で見ている分には問題無いが、URLが https:// となっていた場合、Facebookページが表示されない場合はある。

その場合は下記のようなページが表示される。

これはiFrameを使って作成されたFacebookページのiFrame内に表示されているものがSSLに対応していないために起こる現象で、回避するには元のページをSSL対応にするほか無い。

※SSLとは
Secure Socket Layerの略で、米Netscape社が開発したインターネット上で情報を暗号化し、送受信できるプロトコルです。サーバ⇔クライアントPC間でクレジットカード情報などの機密性の高い情報を安全にやり取りできます。

https://www.sslcerts.jp/

通常SSLを使用するにはSSL対応のサーバーにデータを設置する必要がある。
利用しているサーバーによって、SSLの対応は様々だが、ココではロリポップの共有SSLを使ってワードプレスを動かし、FacebookのSSLページに対応できるよう設定してみる。

1.ワードプレスをロリポップにインストール

2.ユーザーページから、自分のアカウントに対応している共有SSLのURLを確認する。

※例)下記のアカウントを借りて普通にワードプレスをインストールしてみた。
「http://ftown.pupu.jp/wp/」

今の状態で、下の共有SSLのURLにaccessすると、画像やCSSが読み込まれていないため、白地に文字だけのページが現れる。

https://pupu-ftown.ssl-lolipop.jp/wp/

3.「小粋空間」さんの下のプラグインをダウンロードしてワードプレスにインストール
WordPressのURLをSSLや相対URLに変更する「wp_replace_domain」プラグイン

※ワードプレスを共有SSL対応にするためには「WordPress HTTPS」と言うプラグインもあるが、「wp_replace_domain」の方が直感的でおすすめです。

あとは画像の「ドメイン設定」画面を開いて赤枠部分を入力して完了。
※http:// や https:// は必要ないので注意

これでワードプレスのSSL対応は完了です。

4.Facebook用Wordpressテンプレートをダウンロードしてテーマ設定。

5.iFrame版 Facebookページ作成方法(最新版 仕様)のページを参考にSSLページをFacebookアプリに登録して完了

以上でSSL対応Facebookページの完成です。

30 8月iFrame版 Facebookページ作成方法(最新版 仕様変更対応)

iframeアプリを作るためのデベロッパーページの仕様が変更されたようなので、最新版を解説。

Facebookページの作り方。 その3
でも書いたが、Facebookページを簡単に作成する方法として、FacebookアプリのiFrameを利用した方法が一般的である。

この方法を使うには、Facebookとは別にコンテンツを設置するためのサーバーが必要となるが、その分できることの自由度も増す。

以前FacebookiFrameアプリの作り方を紹介したが、いつの間にか仕様が変更されているようなので改めて解説しよう。

手順1.サーバーの準備
Facebookアプリで表示するコンテンツを、自分で用意したサーバー上に用意する。
今回は当ページで配布している「Facebook様wordpressテーマ」を利用したワードプレスをFacebookページ上に表示できるよう設定してゆく。

手順2.Facebookのデベロッパーページにて開発者登録を行う。

【開発者登録ページ】

https://www.facebook.com/developers/

手順3.アプリの登録

上のURLにaccessして開発者ページにログイン後、右上の「create New App」ボタンをクリック。

「NEW APP」のダイアログボックスが表示されるので

App name に任意のアプリの名前
local に「日本語」を選択
利用規約を読んだ上でチェックボックスにチェックを入れて「続行」ボタンをクリック

セキュリティー認証のダイアログボックスが表示されるので、表示されている文字を入力して「送信」ボタンをクリック

上の画面が表示されるのを確認してください。

「Select how your app integrates with Facebook」のなかの

「App on Facebook」と「Page Tab」に必要な項目を入力します
※「Website」「Mobile and Devices」は今回は使いません。
開いてしまった場合は右上の「×」マークで削除してください。

■「App on Facebook」の入力

Canvas URL: には自分のサーバーのWPをインストールしたURLを入力

Secure Canvas URL: SSL対応ページがある場合はSSL対応ページのURLをココに入力

入力例)

Canvas URL: http://ftown.pupu.jp/wp/

Secure Canvas URL: https://pupu-ftown.ssl-lolipop.jp/wp/

今回はロリポップの共有SSLを使ってSSLページを用意しています。SSLページがない場合は空白でOK

■「Page Tab」の入力

Page Tab Name:Facebookページの左メニューに表示されるタブ名を入力(任意の名前

Page Tab URL: タブがクリックされた場合iFrame内に表示されるページのURLを入力

Secure Page Tab URL:タブがクリックされた場合iFrame内に表示されるページのURLを入力(SSLページがある場合のみ)

Page Tab Edit URL:空白

設定例)

Page Tab URL:http://ftown.pupu.jp/wp/index.php

Secure Page Tab URL:https://pupu-ftown.ssl-lolipop.jp/wp/index.php

Page Tab Edit URL:空白

上記を入力後「保存」ボタンをクリックして設定を保存してください。

手順4.設定したアプリをFacebookページに関連つける

1.下記左メニューの「View App Profile Page」をクリックして設定したアプリを表示

2.画像赤枠の「自分のFacebookページのお気に入りに追加」をクリックして自分のFacebookページを表示して追加ボタンをクリック

残りは「Facebookページの作り方。 その3」を参照

これでFacebookページのいっちょあがりです

03 8月フォースクエア(foursquare)が来ている

フォースクエア(foursquare)が来てるらしい、フォースクエアとは2009年にアメリカでスタートしたソーシャルメディアサービスだが、2011年6月には全世界のユーザー数が1000万人を突破したという(情報ソース:http://zasshi.news.yahoo.co.jp/article?a=20110722-00000003-trendy-mobi)

このフォースクエア、比較的新しいサービスではあるが、今年2月に日本語化もされていて、昨年比で約250%と今年に入り急激にユーザー数を増やし、日本のユーザー数はすでに世界5位担っているとのこと。

また、日本のユーザー数の劇的増加の理由にKDDIとの提携がある。現在IS05などのAUのスマートフォンにはフォースクエアのアプリがプリインストールされており、これがユーザー急増の原動力の一つとなっている。

フォースクエアのサービスとは。
フォースクエアの利用には「スマートフォン」の仕様が前提となる。ユーザーはスマートフォンのGPS機能を使った専用アプリで、駅やお店など自分がいる場所を定めてボタンを押す(チェックインという)ことで自分のいる場所がフォースクエアに登録されて友人に公開される。

一度チェックインすると履歴がのこり、友達が後日おなじ店にチェックインしたときに、あなたがいつこの店にいたのかを知ることができる。

ただこれだけだと何がおもしろいのかよくわからないし、Facebookやmixiにも同じ機能があるが、フォースクエアにはこのチェックインを生かしたおもしろい要素がちりばめられている。

先ず大きいのは「ゲーム要素」だ。
フォースクエアを使ってチェックインをすると、チェックインした場所や回数に応じて「バッジ」がもらえる。(友人を招待したり友達が増えてももらえる)
なんてことは無い機能だが、不思議とこのバッジがたまってゆくのを見るのは楽しく、ついバッジがほしくて、いろいろな場所でチェックインしたくなる。

また、「メイヤー」という仕組みが有り、おなじ場所になんどもチェックインしていると、自分がその場所の「メイヤー」になることができる。(メイヤーとはその場所の主といった意味)

実用的な機能もある。
初めて行った場所でも、フォースクエアのアプリを利用することでその場所の人気スポット・おすすめ店や店舗の口コミ情報を知ることができる。
さらに近くにスペシャル特典(クーポンなど)を配布している店があれば、その情報も教えてくれる。

といろいろ考えていたら、7月30日にニュースが飛び込んできた
「Grouponがfoursquareと提携~チェックインでその場でクーポン購入・使用可能に 」

クーポンの共同購入サイト大手のグルーポンとフォースクエアが提携したそうだ。

http://internet.watch.impress.co.jp/docs/news/20110801_464495.html

今のところはアメリカでの話だが、すぐ日本でも始まるんじゃないかな?

記事によると「クーポンが提供されている店舗でfoursquareからチェックインすると、Groupon Now!のクーポンが表示される。そこで即時にクーポンを購入し、割引を受けることができるという仕組みだ。 」と言うことのようだ。

この提携は非常にお互いのメリットを使い合える利点が有り、両方のユーザーをとりこみさらにユーザー数が増加する可能性もある。

そもそもフォースクエアはスマートフォンに特化したサービスで、スマートフォンに関してはmixiやFacebookよりも親和性が高く、まだまだ続くスマートフォンの普及にそってユーザーは間違いなく増えるだろう。

近いうちに日本でもTwitterやFacebookに並ぶサービスになることは間違いない。

01 8月ページスピードサービス(Page Speed Service)とは

米googleで又驚くべきサービスが発表された。「Page Speed Service」、内容をざっと紹介すると、自分のホームページをgoogleに登録すると、googleがページのソースや材料をgoogle自社サーバー内に取り込み、無駄な部分をごっそりと削除しスリムな状態に整形した上でユーザーのサーバーの代わり検索結果をgoogleのサーバーから表示する。

これにより25%~60%程度ページの表示速度が速くなると言う。

【ページスピードサービス(Page Speed Service)とは】
googleサイト「ページのスピードサービスとは何ですか?」より引用

「ページのスピードサービスは、自動的にWebページの読み込みを高速化するオンラインサービスです。ページのスピードサービスは、サーバーからコンテンツをフェッチし、ウェブパフォーマンスのベストプラクティスを適用することによって、ページが書き換えられ、世界中のGoogleのサーバーを経由してエンドユーザに提供しています。」

http://code.google.com/intl/ja/speed/pss/index.html

さて、では正直なところ、このサービスどうなんだろうか?
64Kでダイアルアップで接続していた頃ならばいざ知らず、現在のブロードバンド環境でのページの表示速度はほとんど気にすることのないレベルまで来ている。
(たしかにモバイル環境ではまだページが軽いに越したことはないが)また、SEO的にはページの反応速度は軽い方がいいと言われているが、自分のサイトをgoogleに任せてしまうことがSEO的にどうなのかと言うことはまだまだ未知数である。(ただし、あまりgoogleに手の内を知らせすぎてしまうイメージもあるので、SEOに関してはこのサービスを導入するには二の足を踏んでしまうのではないだろうか?)

発表によるとgoogleは将来的にこのサービスを有料で展開する予定、googleが最初から有料サービスを基本とするサービスをはじめるのは珍しいが、これがページランクや検索結果にどう影響を及ぼすのか、まずは英語圏の動向を細かくチェックする必要がある。