TopFacebook > 2011年9月
2011年9月30日

Facebookアプリで「HTTPS+OAuth2.0」の利用義務付けが始まります&setAutoResize()が使えなくなります

September 30,2011 12:03 AM
Tag:[, , ]
Permalink

Facebookアプリで「HTTPS(SSL)+OAuth2.0」の利用義務付けが始まることと、setAutoResize()が使えなくなることについてのお知らせです。

1.「HTTPS+OAuth2.0」の利用義務付けについて

2011年5月に「Facebookアプリ「HTTPS+OAuth2.0」の利用を義務付けへ」でお伝えしたとおり、2011年10月1日よりFacebookアプリはHTTPS(SSL)とOAuth2.0の利用が必須となります。

HTTPSに対応するには、App on Facebook」の「Secure Canvas URL:」と「Page Tab」の「Secure Page Tab URL:」に「https://」で始まるURLを設定します。

Facebookアプリ

設定していないと、アプリを保存するときに次のような警告が表示されます。

Facebookアプリ

JavaScriptでOAuth2.0に対応する方法は、「FacebookのJavaScript SDKがOAuth 2.0サポート」を参照してください。

2.setAutoResize()について

Facebookアプリでスクロールバーを表示しないための手段としてsetAutoResize()を使っているケースが少なくないと思われます。当ブログでも以下の記事で解説しています。

FacebookのIFrameタブページでスクロールバーを消す方法

このsetAutoResize()が2012年1月1日より利用できなくなります、とFacebook開発者ブログでアナウンスされています。

Platform Updates: Operation Developer Love
Platform Updates: Operation Developer Love

記事では「setAutoResize()はsetAutoGrow()にリネームしてください」と書かれています。setAutoGrow()はすでに使えます。

ちなみにリネームの理由は次の通りです(間違ってたらすいません)。

setAutoResize()が正しく動作しないケースがあり、バグを修正したが、高さを正しく縮めることが難しいという結論に達しました。よって機能を正しく説明するためにsetAutoGrow()に変更します。正しく動作しない場合は、FB.Canvas.setSize()の利用を推奨します。

要するに「高さを縮めることが難しいので、高さを伸ばす意味の関数に変更します。この関数を使ってスクロールバーが表示される場合は代替手段を利用してください」ということみたいです。

問題なく動作している場合は単にリネームするだけですので、特筆すべきことはありませんが、ブログに掲載されているサンプルをこちらでも掲載しておきます。青色が変更部分です。

<html> 
  <head> 
    <title>FB.Canvas.setAutoGrow Example</title> 
  </head> 
 
  <body style="margin:0; padding:0; border:0; background-color:#555555;" > 
    <div id='fb-root'></div> 
    <script src="http://connect.facebook.net/en_US/all.js"></script> 
    <script type="text/javascript"> 
      FB.init({
        appId  : 'YOUR_APP_ID',
        oauth  : true,
      });
 
      FB.Canvas.setAutoGrow();
 
      function growSize() {
        var height = Number(
          document.getElementById('myContent').style.height.split('px')[0])
          + 100;
        document.getElementById('myContent').style.height = height + 'px';
      }
    </script> 
    <div id="myContent" style="background-color:#FF0000; height: 100px;"> 
      <input type="button" value="Grow!" onclick="growSize();"/> 
    </div> 
  </body> 
</html>

サンプルの動作は「小粋空間」Facebookページの「setAutoGrow」タブから確認できます(そのうち削除します)。

Comments [0] | Trackbacks [0]
2011年9月26日

1分で分かるFacebookタイムラインの使い方

September 26,2011 1:55 AM
Tag:[, ]
Permalink

Facebookのタイムラインの表示がなんだか分かりにくいという方へ。実際にあれこれ操作してみて、気がついた範囲で紹介します。

1.真ん中の上下に伸びている線は?

真ん中の上下に伸びている線(赤枠部分)は「時間軸」です。一番下が生まれたとき、一番上が現在です。

タイムライン

また任意の位置で線をクリックすれば、クリックした時間軸に遡って記録を記すことができます。これで過去の記録をFacebookにどしどし投稿できます。

タイムライン

もちろん日付も指定可能です。

タイムライン

2.左右のボックスは?

2カラムレイアウトのような感じでレイアウトされている箱はFacebook上のアクション(アクティビティ)で、時間軸からのふきだしという形で左右に分けて表示されています。

タイムライン

ボックスにマウスをのせると右上にアイコンが表示されます。

タイムライン

左が投稿を目立たせたい場合にクリック。右はタイムラインの表示や投稿の削除を行うときに使います。以前のプロフィール画面では、自分の投稿を削除したい場合はウォールから行えましたが、新しいフォーマットではこのアイコンで削除するようです。

投稿の非表示

★アイコンをクリックしたアクションは、左右に横断して表示されます(下)。また、投稿時に「ライフイベント」を選択した場合も大きく表示されます。

タイムライン

時間軸からのふきだしになっていないボックスは友達や「いいね!」をしているFacebookページ、写真などのエリアになるようです。

3.右上の年月表示は?

月または年の部分をクリックすれば、月または年単位でFacebook上のアクションを参照できます。

タイムライン

4.ウォールに投稿するには?

これは見てのとおり、左上のフォームから投稿できます。1項の投稿フォームと同じで、最新の時間軸からのふきだしとして表示されています。

タイムライン

投稿方法は「Facebookのウォール投稿方法が変更」と大体同じですが、「クエスチョン」がないのと、イベント(仕事・結婚・子供 etc.)について書くときのアイコンが5つ追加されているようです。

5.プロフィールを更新するには?

上部にある「基本データを編集」をクリックすればプロフィールの編集画面に移動します。

タイムライン

6.上部にある「アクティビティを見る」のリンクは何?

タイムライン

「アクティビティを見る」クリックすると、Facebook上のアクションを時系列に表示する画面(アクティビティログ)に移動します。

タイムライン

この画面では、アクティビティ単位にタイムラインの表示方法や公開範囲を指定できます。

公開範囲の指定
タイムライン

タイムラインの表示・非表示など
タイムライン

7.プレビュー

プレビュー機能を使えば、他のユーザーから自分のタイムラインがどのように見えるかを確認することができます。

右側にあるプルダウンメニューから「プレビュー」をクリック。

プレビュー

これで友達以外(フィード購読者含む)のユーザーへのプレビューが確認できます。

タイムライン

友達になっているユーザーからの見え方を確認するには、上部のテキストフィールドに友達(フィード購読者含む)の名前を入力。

プレビュー

これで友達ユーザーのプレビュー画面が表示されます。

タイムライン

8.ノート・フィード購読・アプリ追加など

ノートの投稿・フィード購読・アプリの追加などは、上部右側にあるアイコンをクリック。

お気に入り

これで表示エリアが拡張されて、ノートの投稿・フィード購読・アプリの追加が行えます。

タイムライン

Comments [0] | Trackbacks [0]
2011年9月25日

Facebookタイムラインの利用方法

September 25,2011 1:33 AM
Tag:[, ]
Permalink

Facebookの新機能、タイムラインを使ってみました。

注:この記事は、タイムラインが正式公開される2011年10月2日までの話です。
タイムラインの使い方については「1分で分かるFacebookタイムラインの使い方」をご覧ください。

この機能を利用することで、プロフィールのページが下のスクリーンショットのようなレイアウトに切り替わります。

タイムライン機能

タイムラインは現在Open Graphのデベロッパー向けのみに公開されているようで、タイムラインを見る方法がTechCrunchで公開されています。

TechCrunch - Facebookのタイムラインを今すぐ見る方法

ということで、記事の説明を日本語向けにかみくだいて説明します。既存のアプリにOpen Graphを設定したあとに別のアプリを作り直してOpen Graphを設定した手順なので、初回と操作が異なるかもしれません。

タイムライン利用方法

タイムラインを利用するには、ダミーアプリを1つ作ります。アプリのページで「Create New App」をクリック(初めて作る場合はその前に許可画面が表示されると思います)。

アプリのページ

適当なアプリ名とネームスペースを入力し、「I Agree~」をチェックして「続行」をクリック。ネームスペースに数字は使えません。

アプリ作成ダイアログ

セキュリティコードを入力して「送信」をクリック。

セキュリティコード

作成アプリの編集画面が表示されるので「Open Graph」をクリック(この部分はTechCrunchの記事と説明が異なるので、別の画面が出るかもしれません)。

アプリ編集画面

「People can」の右に任意の文字列(ここではread)、その右のセレクトボックスから任意のオブジェクト(ここではbook)を選択して「スタート」をクリック。

Open Graph

「Edit your Action Type」の下の方にある「Save Changes and Next」をクリック。同じようにEdit your Object Typeで「Save Changes and Next」をクリック(実験したときはスキップされました)。TechCrunchの記事では任意の項目を書き換えるように指示されています。

Open Graph設定画面

「Create an Aggregation」の下の方にある「Save and Finish」をクリック。

Open Graph設定画面

設定が完了するとこのような画面になります。

Open Graph設定完了画面

少し待ってから自分のウォールに移動すると次のような画面が表示されるので、「今すぐ利用」をクリック。

ウォール

これで自分のプロフィールページに移動すると、タイムラインが表示されると思います。公開したい場合はページ上部に表示されている「今すぐ公開」をクリック。

ウォール

Comments [0] | Trackbacks [0]
2011年9月19日

Facebookフィード購読機能の徹底解説

September 19,2011 2:55 AM
Tag:[, ]
Permalink

Facebookでフィード購読機能が公開されました。すでにあちこちで紹介されていますが、フィード購読機能を使って友達以外のユーザーの投稿を読む方法や、自分の投稿をフィードを使って公開する方法などを詳しく紹介します。

1.登場人物

動作確認はいつもの通り、テストユーザーを使っています。

説明で登場する人物は以下です。

  • Daveさん:フィードを公開する人
  • Helenさん:フィードを購読する人
  • Elizabethさん:HelenさんとDaveさんのFacebook上の友達

テストユーザー同士は、赤の他人ではフィードが購読できないようなので(間違ってたらすいません)、Elizabethさんを介してHelenさんがDaveさんの公開するフィードを購読するという図式にしています。

登場人物の関係図

Elizabethさんは単なるつなぎなので、以降の説明には登場しません。

2.友達以外のユーザーに自分の記事をフィードで公開する

まずDaveさんが自分の記事をフィードで公開する手順を解説します。

DaveさんがFacebookにログインして「プロフィール」をクリック。

Facebook

左メニューの「フィード購読」をクリック。

左メニュー

「フィード購読を許可します」をクリック。このリンクが表示されていない場合は、「フィード購読」ページの右にある緑色の「フィード購読を許可します」をクリック。

フィード購読

購読者設定の編集ダイアログが開きます。

購読者設定の編集ダイアログ

上のプルダウンメニューでコメント許可のオン・オフを設定します。

購読者設定の編集ダイアログ

下のプルダウンメニューで新しい購読者があったときのお知らせを受ける対象を設定します。

購読者設定の編集ダイアログ

これで設定完了です。Daveさんのプロフィールページの左メニューに「フィード購読者」というメニューが追加されます。

購読者設定の編集ダイアログ

「フィード購読者」をクリックすると、Daveさんのフィード購読者はまだ一人もいないので、次のように表示されます。

フィード購読者

3.友達以外のユーザーの投稿をフィードで読む

次にHelenさん主役で、Elizabethさんの友達(つまり友達の友達)であるDaveさんのフィードを購読する手順を解説します。

Facebookにログインして「プロフィール」をクリック。

Facebook

フィードを読みたい人(Daveさん)のページに進んで、右上にある「フィード購読する」をクリック。

プロフィール

クリックすると、Daveさんのページの「フィード購読する」の表示が「フィード購読済み」に切り替わります。これでDaveさんのフィード購読の設定ができました。

フィード購読

Helenさんのプロフィールページ左メニューの「フィード購読」にDaceさんの購読分の「1」が加算されます。

左メニュー

「フィード購読(1)」のリンクをクリックすれば、Helenさんが購読しているユーザーの一覧(ここではDaveさんのみ)が表示されます。

購読しているユーザーの一覧

Daveさんのプロフィールページには「フィード購読者」の右にHelenさん分の「1」が表示され、「フィード購読者(1)」をクリックすれば、Daveさんのフィードを購読しているユーザーの一覧(ここではHelenさんのみ)が表示されます。

購読者の一覧

肝心のDaveさんのフィードはどこに表示されるかというと、友達の投稿と同じように、Helenさんのニュースフィードに表示されます。「外部のフィードリーダーで読める」という訳ではないようです。

ニュースフィード

Daveさんが友達向けに投稿した記事は、Helenさんのニュースフィードには表示されません。

投稿画面

4.フィードの購読をやめる

HelenさんがDaveさんのフィードの購読をやめる場合は、フィード購読中のユーザー一覧の右側にある「フィード購読済み」のボタンをクリックし、メニューから「フィード購読をやめる」を選択します。

フィード購読中のユーザー一覧

あるいはDaveさんのページに進み、「フィード購読済み」ボタンをクリックしても同じメニューが表示されます。

Daveさんのページ

5.フィードの公開をやめる

Daveさんがフィードの公開をやめるには、「フィード購読者」のページの右上にある「設定を編集」をクリック。

フィード購読者

購読者設定の編集ダイアログが開くので、一番上の「購読者数」を「オフ」にします。

購読者設定の編集ダイアログ

6.フィードの購読範囲などを決める

HelenさんがDaveさんのフィードの購読範囲などを決めるには、フィード購読中のユーザー一覧の右側にある「フィード購読済み」のボタンをクリックし、メニューからカスタマイズします。

フィード購読中のユーザー一覧

7.フィード機能についてもっと知りたい場合

Facebookヘルプセンターの「よく使うページ » 購読」のページに解説があります。

Facebookヘルプセンター

8.友達のフィードは?

友達のフィードは「フィード購読済み」の状態になっています。つまり友達になった瞬間にフィード購読するという扱いになるようです。ただしフィード購読者にはカウントされません。

Comments [0] | Trackbacks [0]
2011年9月11日

Facebookがテストユーザー作成・編集画面をリリース

September 11,2011 1:33 AM
Tag:[, ]
Permalink

Facebookがテストユーザーの作成・編集画面をリリースしました。

テストユーザー作成・編集画面

これまでのテストユーザーに関する操作はAPIのみの公開でした。そのため、簡単に作成が行える「Facebookテストユーザー作成ツール」を公開しましたが、今後はFacebookの画面からテストユーザーの作成・編集が行えます。

テストユーザーはFacebookアプリを作り、アプリ管理画面から作成・編集するようになっています。Facebookアプリ作成方法については、「FacebookページにMovable TypeやWordPressの最近のブログ記事を表示する」の2項・3項や「Facebookページプロフェッショナルガイド」の96~102ページを参考にしてください。Facebookアプリを登録するのはそれほど難しい作業ではありません。テストユーザーだけを使ってみたい場合は、空のアプリ(=登録のみ)で大丈夫だと思います。

テストユーザーを使えば、自分のアカウントで「いいね!」やコメント投稿などを行ってすぐに削除するようなことをする必要がなくなります。ちなみに「Facebookのウォール投稿方法が変更」などのスクリーンショットもすべてテストユーザーを使っています。

1.テストユーザーの追加

自アカウントのアプリ一覧画面に移動。

アプリ一覧画面

「Roles」の右側にある「Edit Roles」をクリック。

アプリ一覧画面

テストユーザーを登録していない場合、「Test Users」の項目は次のようになっています。

Roles

「Test Users」の右側にある「追加」をクリック。ツールチップが表示されますが無視してください。

Roles

ダイアログが表示されるので「追加」をクリック。オプションの「Number to Add」はユーザー数(1回につき最大10ユーザー)、「Authorize this App」はアプリケーションの認証を登録時に行う・行わないの選択です。チェックしない場合は後で認証の画面を体験できます(多分)。

テストユーザーの追加ダイアログ

少し待てば「Succesfully added n(設定した数) test user!」が表示されるので、「閉じる」をクリック。

テストユーザーの追加ダイアログ

テストユーザーが追加されました。この画面で外部に一切知られずにFacebookの動作を確認することができます。具体的な動作については「Facebookテストユーザー作成ツール」の記事にまとめてますので、そちらを参照してください。

テストユーザーの追加完了

2.テストユーザーでのログイン

「切り替える」をクリック。ツールチップが表示されますが無視してください。

Roles

テストユーザーでログインできました。

テストユーザー画面

3.テストユーザーの編集

「Test Users」の右側にある「Modify」をクリック。この操作はテストユーザーでログインしていない状態で行ってください。

Roles

テストユーザーの一覧が表示されます(スクリーンショットは2ユーザー登録した状態)。

ユーザー編集画面

名前の部分をクリックすれば名前を変更できます。

名前の変更

「Show Token」をクリックすれば、アクセストークンを表示します(アプリの認証を終えている必要があります)。「Login」の「切り替える」をクリックすれば、テストユーザーのログインを切り替えられます。「Make Friends」はチェックしたユーザー同士を友達にします。「削除」または×印でユーザーを削除できます。

ユーザー編集画面

ユーザーをチェックした状態で「Add to Other Apps」をクリックすれば、テストユーザーに他のアプリを追加することができます。

アプリの追加

4.その他

テストユーザーでログインした状態で自アカウントのアプリ画面などに戻るには、一旦テストユーザーをログアウトし、自アカウントで再ログインする必要があるみたいです。

Comments [0] | Trackbacks [0]
2011年9月 4日

Facebookのウォール投稿方法が変更

September 4,2011 1:55 AM
Tag:[]
Permalink

Facebookのウォール投稿方法が変更されました。ということで変更点についてまとめてみました。この記事は2011年9月4日現在の内容です。

1.投稿フォーム

変更前は次のようなフォーム画面だったと思います。

変更前のウォール投稿フォーム

変更後は次のようなフォーム画面になり、「リンク」「動画」のアイコンがなくなりました。

変更後のウォール投稿フォーム

2.追加機能

変更直後に投稿しようとすると、次のような画面が表示されます。それにしたがって追加機能をざっくり説明します。

一緒にいる人のタグ付けが行えます。

一緒にいる人のタグ付け

アイコンをクリックすると「誰と一緒にいる?」という欄が表示されるので、一緒にいる人の名前を入力します。もう一度クリックすると非表示になります。

一緒にいる人のタグ付け

位置情報の追加が行えます。

位置情報の追加

アイコンをクリックすると「今どこにいる?」という欄が表示されるので、場所を入力します。もう一度クリックすると非表示になります。

位置情報の追加

投稿時・投稿後のプライバシー設定が行えます。説明によると、「公開」がこれまでの「すべてのユーザー」に該当するようです。

投稿時・投稿後のプライバシー設定

アイコンをクリックすると、次のように公開範囲を選択できます。「公開」の丸いアイコンは地球のようです。

公開範囲を選択

3項以降は上記以外の変更点についてまとめました。

3.改行挿入でShiftが不要

これまでは改行するために「Shift+リターン」を行っていましたが、Shiftなしのリターンでも改行できるようです(Shiftありでも改行します)。

以前からそのようになっていたら単なる勘違いです。すいません。

4.リンクの挿入方法

「リンク」のアイコンがなくなりましたが、テキストエリアにURLを入力すればこれまでと同じ動作になるようです。

手入力の場合、URL入力までは何も反応しません(カーソルの位置に注目してください)。

手入力時の動作

改行するとリンクが表示されます。

リンク表示

URLをペーストした場合、改行なしでリンクが表示されます(カーソルの位置に注目してください)。

ペースト時の動作

「http://~/」でも同じです。

http入力時の動作

リンクが表示されたら、入力したURLは不要なので削除します。

表示後の操作

こんな感じで投稿されます。

投稿イメージ

URLは途中で入力しても反応してくれます。

途中入力

5.投稿の削除

2011/09/07追記:以下の記載内容はTest Userを使って確認した動作です。通常のユーザーにはこれまで通り×印が表示されています。

投稿の削除は、変更前は×印をクリックしていましたが、変更後は×印がなくなりました。その代わり、同じ位置に表示されるアイコンをクリックし、メニューから「投稿を削除」をクリックすることで削除できます。

投稿の削除

6.動画のアップロード

動画のアップロードはできなくなったようですが、Facebookページでは可能なようです。「写真を追加」のリンクから行えます。

Comments [2] | 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