nkjmkzk.net

powered by Kazuki Nakajima

Archive for the ‘Facebook’ tag

イベレジさんのSalesforce連携アプリにみる、ソーシャルがビジネスアプリに与えるインパクト

去る10月5日のAppExchangeカンファレンスにおいて「Facebookがビジネスアプリに与えるインパクト」というテーマでキーノートセッションをおこないました。

その中で、特に具体的にそのインパクトをご説明したのがイベレジさんとSalesforceの連携アプリ企画の事例でした。

今回のキーノートセッションの肝といえるこのパートを切り出して7分間のショートビデオにまとめました。ソーシャルがビジネスに与えるインパクトは何なのか、AppExchangeアプリケーションの魅力とは何なのか?そのヒントをこのビデオの中に見つけていただければ幸いです。

*EventRegistとSalesforceの連携アプリは企画中のイメージです。本アプリは現在開発中であり、仕様・画面は変更になる可能性があります。

without comments

Written by 中嶋 一樹

10月 15th, 2012 at 6:27 pm

Facebookのソーシャル・チャネルを利用した広告アプリをForce.comで構築

私はFacebookが持つ機能の中で、企業活動につなげることができるパワーを次の3つに分類しています。

  • Social Profile(ソーシャル・プロファイル)
  • Social Channel(ソーシャル・チャネル)
  • Engagement

この中のソーシャル・チャネルに注目した広告アプリをForce.com上に構築し、それをひとつのデモにまとめました。ソーシャル・チャネルとは、Facebookの友達間をLikeやComment、Shareといった機能によって情報がねずみ講式に広がっていく伝播を意図しています。

このデモのユースケースは、下記の通りです。

  • 店舗マネージャはあらかじめ商品情報を広告アプリの管理画面から登録しておく。
  • とある小売店に訪れた消費者が商品を購入する際、店員が「もしFacebookでこの商品を購入したことを共有していただいたら10% 割引しますよ」とオファーする。
  • 消費者は自身のスマートフォンを用いて広告アプリのMobile Webサイトにアクセスする。
  • 消費者は自身が購入する商品をタップし、それだけでFacebookへの共有(広告)が完了する。

そのデモがこちらです。

このデモで技術的にキーとなる箇所は下記の2点です。

  • 登録した商品情報から、消費者がスマートフォンでアクセスするMobile WebサイトのHTMLを生成する
  • Mobile WebサイトからFacebookのAPIを呼び出してワンタッチで消費者のFacebook Wallに「この商品を買いました」というエントリーを投稿する

HTMLを生成する部分は、実際にはHeroku上で稼働するPHPアプリケーションがForce.comのREST APIにアクセスし、必要な商品情報を取得、jQuery Mobileでデザインされたレイアウトにその商品情報を並べるという仕組みで実装しています。

Facebookへの連携部分は、Mobile WebサイトでFacebookのJavascript用SDKをインポートし、Facebook Wallへ投稿をおこなうダイアログの表示ファンクションをfbPublishStoryとして下記のように定義しておきます。

<!-- Load facebook sdk -->
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
    FB.init({
        appId      : 'あなたのApp ID', // App ID
        status     : true, // check login status
        cookie     : true, // enable cookies to allow the server to access the session
        xfbml      : true  // parse XFBML
    });
};

// Load the SDK Asynchronously
(function(d){
    var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
    if (d.getElementById(id)) {return;}
        js = d.createElement('script'); js.id = id; js.async = true;
        js.src = "//connect.facebook.net/ja_JP/all.js";
        ref.parentNode.insertBefore(js, ref);
    }(document)
);

function fbPublishStory(product_name, photo_url, shop_url) {
    discountCode = code;
    FB.ui({
        method: 'feed',
        name: product_name + 'を買いました。',
        link: shop_url,
        picture: photo_url
    }
    return false;
}
</script>

そしてあらかじめ取得しておいた商品情報からリストを作成し、そのリストのonclickイベントに前述のFacebookのダイアログ表示のファンクションを紐付けます。

<div data-role="page" id="page_product_list" data-theme="d">
    <div data-role="header" data-backbtn="false" data-theme="d">
        <h1><?php echo LABEL_PRODUCT_LIST; ?></h1>
    </div>
    <div data-role="content">
        <ul data-role="listview" data-inset="false" data-filter="true" data-split-icon="gear" id="list_product">
        <?php
        if (is_array($sugoid_product_list['records'])){
            foreach ($sugoid_product_list['records'] as $k => $v){
                ?>
                <li>
                    <a onclick="fbPublishStory(
                                    '<?php echo addslashes($v['Name']); ?>',
                                    '<?php echo addslashes($v['sugoidiscount__discount_rate__c']); ?>',
                                    '<?php echo addslashes($v['sugoidiscount__code__c']); ?>',
                                    '<?php echo addslashes($v['sugoidiscount__description__c']); ?>',
                                    '<?php echo addslashes($v['sugoidiscount__photo_url__c']); ?>',
                                    '<?php echo addslashes($v['sugoidiscount__url_to_buy__c']); ?>'
                                );" class="product_button" id="<?php echo $v['Id']; ?>" href="#">
                        <img src=" <?php echo $v['sugoidiscount__photo_url__c']; ?>" />
                        <h3><?php echo htmlspecialchars($v['Name']); ?></h3>
                        <p>通常価格<?php echo $v['sugoidiscount__price__c']; ?>円から<?php echo $v['sugoidiscount__discount_rate__c']; ?>% OFF</p>
                    </a>
                </li>
                <?php
            }
        }
        ?>
        </ul>
    </div>
</div>

このデモのポイントは、下記の通りです。

  • ソーシャル・チャネルで関心度の高い広告を伝播していくことができる(一般的な広告より、知り合いが購入したアイテムというのは関心度が高いと考えられる)
  • コードを書くのはMobile Webサイトだけ。アプリケーションへのサインアップ、ライセンス管理、商品登録、APIといった部分はForce.comが提供するフレームワークをそのまま利用して開発をスキップできる
  • さらに、Mobile WebサイトはHerokuを使うことで無料でスタートできる

最小限の労力でソーシャルパワーを装填したアプリを開発する。そんなデモでした。

without comments

Written by 中嶋 一樹

10月 11th, 2012 at 5:37 pm

Herokuを使って1分でスタートできるFacebookアプリ

FacebookアプリとはFacebookの機能を取り込んだアプリケーションであり、下記の3つのタイプがあります。

on Facebookは下図のような外観で、FacebookのWebインターフェース中のキャンバスと呼ばれるエリアにiframeでアプリケーションを表示させ、Facebookサイトと一体化した形でユーザーに提供されます。このキャンバスに読み込むアプリは別途外部Webサーバーで稼働させておく必要があります。

このタイプのFacebookアプリでは、ユーザーとのEngagement(ユーザーが繰り返しアプリを使う可能性)を高めることができるのが特徴です。

一般的にFacebookユーザーはあなたのアプリを使うという意図がなくても定期的にFacebookサイトを訪問します。その際に、Notification, Counter, BookmarkといったFacebookならではの通知機能でユーザーの目をひきつけ、ユーザーがすぐアクセスできる状態でアプリへのアクセスを促すことができ、スムースにユーザーを誘導できます。

他にもFacebookのSDKを組み込んでAPIにアクセスすることで、様々なFacebookの情報を活用することができます。

そのようなon Facebookのアプリは、実は1分で作成することができます。

まずは自身のFacebookアカウントでログインし、https://developers.facebook.com/appsにアクセスします。

*まだDeveloper登録していない場合はこの後に登録プロセスがあります

右上のCreate New Appボタンをクリックします。

App Nameにアプリの名前、App NamespaceにURLの一部に使われる名前空間を入力します。そして重要なのが、Web Hostingのチェックボックスです。このチェックボックスにチェックを入れることで、アプリのホスティング環境としてHeroku上のアプリが連動して作成されます。もしすでにHerokuのアカウントを持っており、登録EmailアドレスがFacebookとHerokuで同じであれば、既存のアカウントにアプリが追加されます。もしまだHeroku のアカウントがない場合は自動的に作成されます。

captchaで認証をおこなった後に、プログラミング環境としてどのプラットフォームを選択するかが表示されます。2012年10月時点での選択肢はPHP, Ruby, Python, node.jsです。

数秒するとプロビジョニングが完了し、Go to Appボタンをクリックすることで作成されたばかりのFacebookアプリを表示させることができます。Facebookアプリはサンプルコードとともに作成されています。Log Inボタンをクリックすることで自身のアカウントでこのアプリを認可し、サイトがどのようにパーソナライズ出来得るのかという例を見ることができます。

ただしこのときはHeroku上のアプリに直接アクセスするため、on Facebookのような外観ではありません。Facebookのアプリの設定画面にもどり、Canvas PageのURLを確認し、このURLにアクセスすれば、Facebookのフレーム内にHeroku上で稼働するアプリが埋め込まれて表示されます。

作成されたアプリはHerokuのダッシュボードですぐに確認することができます。

Heroku上で稼働するアプリはHerokuのDynoベースのアーキテクチャーの恩恵を受け、インジケーターひとつで簡単にスケールアウト・インすることができます。デフォルトの1Dynoだとホスティング料は無料です。

あとはHeroku上のアプリにgitでアクセスし、コードをコミットすることでアプリを自在に更新することができます。

without comments

Written by 中嶋 一樹

10月 10th, 2012 at 4:02 pm