TopFacebook > 2011年5月
2011年5月27日

WordPress+共有SSLでFacebookページにコンテンツを表示する

May 27,2011 1:55 AM
Tag:[, , ]
Permalink

Facebookアプリ「HTTPS+OAuth2.0」の利用を義務付けへ」でお知らせしたとおり、FacebookのIFrameタブはセキュアな接続のみとなる予定です。IFrameタブのコンテンツを制作する場合、この条件は避けて通れなくなります。

このエントリーではそれにさきがけて、WordPress+共有SSLでFacebookページのIFrameタブにコンテンツを表示する実験を行ってみました。WordPressで通常のサイト(http)を運営しつつ、同時にFacebookページをWordPressを使って管理するケースを想定しています。

実験環境は次のとおりです。

  • 独自ドメイン(Value Domain取得)
  • さくらインターネット・マネージドサーバ+共有SSL ※スタンダードプラン以上であれば共有SSL利用可能
  • WordPress 3.1

1.さくらインターネットに独自ドメインを設定する

Value Domainの管理画面で、取得したドメインのネームサーバ設定画面で、「他社提供/自前ネームサーバー」を選択してから「ns2.dns.ne.jp」「ns1.dns.ne.jp」を設定します。他に設定する項目はありません。

ネームサーバ設定画面

さくらインターネットのコントロールパネルの「ドメイン設定」→「新しいドメインの追加」をクリック。

新しいドメインの追加

「他社で取得したドメインを移管せずに使う~」の「ドメインの追加へ進む」をクリック。

ドメインの追加

ドメイン名を設定して「送信する」をクリック。

ドメイン名を設定

内容を確認して「送信する」をクリック。

内容を確認

追加されました。続いて「詳細設定にすすむ」をクリック。

設定完了

「マルチドメインの対象のフォルダをご指定ください」の項目で、ドメインに対応するパスを設定します。ここではWordPressのインストールディレクトリのひとつ上位の階層を設定します。

詳細設定

2.共有SSLを設定する

注:この作業は、1項の作業を終えて30分ほど待ってから行ってください。

共有SSLを設定するには、1項の設定画面にある「共有SSLの利用をお選びください」から「共有SSLを利用する」を選択。

共有SSLの設定

非推奨の旨のダイアログが表示されるので「OK」をクリック。

ダイアログ

正常に反映されると、ドメイン一覧の「共有SSL」欄に「表示」のリンクが表示されます。クリックすれば、SSLでアクセスします。さくらで共有SSLを利用する場合のURLは「https://securexxxxx.sakura.ne.jp/独自ドメイン/」となります。

設定完了

1項の作業直後に共有SSLを設定しても「このドメインでは利用できません」というエラーではじかれるので、焦らず、時間を空けて再度実行してください。

設定エラー

共有SSLを設定した状態での、httpとhttps(SSL)でWordPressのトップページにアクセスした画面を比べておきます。

httpでアクセス(http://独自ドメイン/)
httpでトップページにアクセス

httpsでアクセス(https://securexxxxx.sakura.ne.jp/独自ドメイン/)
httpsでトップページにアクセス

httpsでアクセスしたときにスタイルが反映されないのは、link要素のhref属性がhttpsになっていないためです(この対処は後で実施します)。

3.WordPressの画面をFacebookアプリのIFrameタブとして設定する

注:Facebookアプリの作成方法は割愛しますので、「FacebookページにMovable TypeやWordPressの最近のブログ記事を表示する」の2項を参照してください。

登録したFacebookアプリの「Facebook Integration」→「Secure Tab URL」に任意の記事ページのセキュアURLを設定します。この後Facebookページにアプリを追加するのですが、現状は「タブのURL」にも通常のURLを設定しておかないと、IFrameタブをFacebookページに表示する設定が行えないようです。

セキュアURLを設定

これでFacebookアプリを追加したFacebookページのIframeタブからアクセスすると、次のように表示されます(実験ですのでレイアウトは無視してください)。これはFirefox 3.6/4での表示です。

Facebookページ(Firefox)

ただし、IE9では次のようにスタイルが適用されません。

Facebookページ(IE9)

ちなみに、IFrameタブにアクセスするときのFcebookアカウント設定の「アカウントのセキュリティ」→「セキュアな接続(https)」は、次のようにチェックをしています。

アカウントのセキュリティ

4.スタイルを適用できるようにする

2011.06.01 プラグイン作りました。プラグインを利用すれば本項の設定は不要です。

WordPressのURLをSSLや相対URLに変更する「wp_replace_domain」プラグイン

ということで、IEでもスタイルを適用できるようにする方法を紹介します。これはWebデザイナーの口田さんから教えて頂いたサイト情報「WordPress で URL をすべて相対 URL にする方法」のコードを元にしています。

対処方法は、利用しているテーマのfunctions.phpの最後に、以下のコードを設定します。

class relative_URI {
    function relative_URI() {
        add_action('get_header', array(&$this, 'get_header'), 1);
        add_action('wp_footer', array(&$this, 'wp_footer'), 99999);
    }
    function replace_relative_URI($content) {
        $home_url = trailingslashit(get_home_url('/'));
        return str_replace($home_url, 'https://securexxxxx.sakura.ne.jp/独自ドメイン/', $content);
    }
    function get_header(){
        ob_start(array(&$this, 'replace_relative_URI'));
    }
    function wp_footer(){
        ob_end_flush();
    }
}
if ($_SERVER['HTTPS']) {
    new relative_URI();
}

元情報のコードと異なる部分は以下です。

  • httpsでアクセスがあった場合のみ追加コードを起動するように変更(青色部分)
  • 元のコードではスタイルが反映されなかったため、赤色部分(変更前は'/')をセキュアURLに変更

実際の運用では、IFrameタブで利用する特定のページのみ起動するようにした方が良いでしょう。

WordPressでFacebookページのコンテンツを作る方法は、7月刊行予定の「Facebookページプロフェッショナルガイド」に掲載しています(宣伝)。

Facebookページプロフェッショナルガイド
Facebookページプロフェッショナルガイド
蒲生トシヒロ・他
毎日コミュニケーションズ

5.注意事項

今回の実験結果は他のレンタルサーバでも同様に表示されることを保障するものではありません。予めご了承ください。

6.関連情報

Comments [0] | Trackbacks [0]
2011年5月23日

Facebookテストユーザー作成ツール

May 23,2011 1:55 AM
Tag:[]
Permalink

Facebookテストユーザー作成ツールを公開します。

Create and Delete tool for Facebook Test Users
Facebookテストユーザー作成ツール

1.テストユーザーの概要

「Facebookテストユーザー」とは何か?というところから説明します。

Facebookではアプリケーション動作確認のために、テストユーザー作成機能が提供されています。Facebookのデフォルト機能を確認することもできるようです。

スクリーンショットは作成したテストユーザーでログインしたところです。

Facebookテストユーザー画面

テストユーザーはFacebookアプリにひもづいて作成します。主に以下の機能があります。

  • ひもづいてるアプリケーションにアクセスできます
  • テストユーザー同士で友人になることができます
  • テストユーザーは複数作成できます(1アプリケーションにつき500まで)

複数作成できるので、異なるブラウザで別々のテストユーザーでログインすれば、1つのPCでチャットも行えます。

テストユーザーの主な制限事項は次の通りです。

  • 本物のユーザーと友人になることはできません
  • Facebookページを作ることはできません
  • 本物のアカウントに切り換えることはできません

テストユーザーを作成するには「Test Users API」を利用するのですが、入力が面倒なのでブラウザから操作できるようにしてみました。

なお、開発者ロードマップによると、2011年の第3四半期にツールが改善されるようです。

Facebook開発者ロードマップ

2.ツールの概要

ツールでは次の機能を提供しています。

  • テストユーザーの作成
  • テストユーザーの一覧表示
  • テストユーザーのパスワード変更
  • テストユーザー同士の友人承認
  • テストユーザーの削除
  • テストユーザーの一括削除

3項以降で各機能の利用方法について簡単に紹介します。

3.テストユーザーの作成

「Create Test User」のフォームに以下の内容を設定して「Create」をクリックします。

  • Application ID:アプリケーションID
  • Application Secret:シークレットID(アプリの秘訣)
  • Number of Test User:作成したいユーザー数
  • Installed:アプリケーション登録済みの指定
  • Permissions:テストユーザーに与えたい権限

作成に成功すると、次の情報が表示されます。「Login URL」をクリックすればテストユーザーとしてFacebookにログインできます。

テストユーザー作成成功

「TEST_USER_ID」「TEST_USER_ACCESS_TOKEN」「Login URL」は4項の「一覧表示」で確認できます。メールアドレスはFacebookのログイン画面で確認できます。パスワードは(多分)確認手段がないので、忘れた場合は5項の「パスワード変更」を実行してください。

ログインURLは1時間で無効になりますが、同一ユーザーに対し新しいログインURLを取得できます(一覧表示で取得できると思いますが未確認)。

作成完了ページでは削除・友人承認・パスワード変更が行えるようになっています。

4.テストユーザーの一覧表示

「List Test User」のフォームに以下の内容を設定して「List」をクリックします。

  • Application ID:アプリケーションID
  • Application Secret:シークレットID(アプリの秘訣)

一覧ページでは削除が行えるようになっています。

5.テストユーザーのパスワード変更

「Change Test User's Password」のフォームに以下の内容を設定して「List」をクリックします。

  • TEST_USER_ID:テストユーザーのID
  • TEST_USER_ACCESS_TOKEN:テストユーザーのアクセストークン(テストユーザー作成時に表示されます)
  • NEW_PASSWORD:新しいパスワード

6.テストユーザー同士の友人承認

「Make friend connections」のフォームに以下の内容を設定して「Make friend」をクリックします。設定するテストユーザーは、同じアプリケーションで生成されている必要があります。

  • Application ID:アプリケーションID
  • Application Secret:シークレットID(アプリの秘訣)
  • TEST_USER_ID1:一方のテストユーザーID
  • TEST_USER_ID2:もう一方のテストユーザーID

7.テストユーザーの削除

「Delete Test User」のフォームに以下の内容を設定して「Delete」をクリックします。

  • Application ID:アプリケーションID
  • Application Secret:シークレットID(アプリの秘訣)
  • TEST_USER_ID:テストユーザー
  • TEST_USER_ACCESS_TOKEN or APP_ACCESS_TOKEN:テストユーザーのアクセストークンまたはアプリのアクセストークン

8.テストユーザーの一括削除

「Delete All Test User」ののフォームに以下の内容を設定して「Delete」をクリックします。

  • Application ID:アプリケーションID
  • Application Secret:シークレットID(アプリの秘訣)

9.制限事項

現在、「Adding existing test users to other apps」の動作確認ができていないため機能提供していません。

Comments [2] | Trackbacks [0]
2011年5月12日

Facebookアプリ「HTTPS+OAuth2.0」の利用を義務付けへ

May 12,2011 1:55 AM
Tag:[, , ]
Permalink

ブログヘラルドで知りましたが、今後、Facebookアプリは「HTTPS+OAuth2.0」の利用が義務付けられることになるようです。

Facebookから開発者へ: OAuthとHTTPSを利用せよ原文

ユーザーが楽しさと安全性と言う究極の選択を行わなければいけない状況を避けるため、フェイスブックは、HTTPSの利用に対する期限を開発者に向けて定めた(OAuth 2.0の利用も併せて)。

FacebookアプリをHTTPSでアクセスできるようにすることで、利用ユーザーはFacebookに対し、常にセキュアな接続でアクセスすることができます。

すぐに移行が必要というわけではなく、約5ヶ月の移行期間が設定されています。詳細は次項のロードマップをご覧ください。

1.ロードマップ

移行に関するロードマップは次の通りです(画像は公式サイトの開発者ロードマップより)。下の表に示すように段階的な移行を行い、2011年10月1日にすべて完了となります。翻訳が間違っていたらすいません。

2011年7月1日PHP SDKとJavaScript SDKについて、OAuth2.0と新しいクッキー形式(=アクセストークンなし)が利用可能となるアップデートを行います。JavaScript SDKは、直接アクセスしている場合は自動的にアップデートされます。
2011年9月1日すべてのアプリケーションは、OAuth2.0と暗号化されたアクセストークンに移行しなければなりません。
2011年10月1日すべてのCanvasアプリケーションはsigned_request(fb_sigは10月1日から利用不可)を処理し、そしてSSL証明書を入手しなければなりません(Sandboxモードは除く)。

2.HTTPSでアプリを提供するには

HTTPSでアプリを提供するためには、アプリを提供しているサーバにSSLの設定が必要になります。利用サーバで共用SSLなどを提供していれば簡単な設定で済みます。国内の主要レンタルサーバでは、下位グレードでなければ共用SSLが利用できるところが多いようです。

問題なのは、サーバでSSLを利用できない場合でしょう。公式ブログでのアナウンスのコメント欄に、は「利用しているサーバにSSL証明書をインストールできない」と嘆いている人がいました。

自前でSSLを設定する場合、SSL証明書の入手が必要となります。SSL証明書は「日本ベリサイン」や「グローバルサイン」で入手できますが、代理店などを利用すると安価で入手できます。無償で証明書が入手できる「StartSSL™」というサービスもあります。

3.関連情報

Comments [0] | Trackbacks [0]
Now loading...
ギターに入った猫
掲載広告募集
Styles
Font Size
Default
For defective color vision
Gray Scale
RGB Color
Search this site

このブログをメールで購読する by:FeedBurner

AMN
Categories
Monthly Archives
2020年
2019年
2018年
2017年
2016年
2015年
2014年
2013年
2012年
2011年
2010年
2009年
2008年
2007年
2006年
2005年
2004年
2003年
BlogPeople
Syndicate this site
FeedBurner(RSS1.0/RSS2.0/Atom)
Counter
これまでのアクセス
Powered by
Movable Type 6.0.3