ビルコム、イー・ガーディアン、jAction　3社共同セミナー
「スマートフォン×ソーシャルメディア」で変わるコミュニケーション戦略とは？

■ 講演プログラム
1）14:05～14:40
『スマートフォン×ソーシャルメディア時代に企業がすべき5つのこと』
ビルコム株式会社　鳥潟幸志

2005年 ビルコム取締役に就任。
以来、株式会社ユニクロ、協和発酵キリン株式会社、クラシエフーズ株式会社、「Agency Div.」を統括し、デジタル、ソーシャル、スマートデバイス領域における戦略プランニングなどに携わる。

2）14:45～15:20
『Facebookページの積極運営とその事例について』
イーガーディアン株式会社 取締役　小田志門

イーガーディアンのコア事業である投稿監視のノウハウをもとに今年4月に「ソーシャルシフトエージェンシー」を立ち上げ。現在はクライアントに対するリスクの啓蒙から運営サポートまで各種コンサルティング業務を実施。

3）15:25～16:05
『企業サイトは簡単にソーシャル化できる。Facebookテクノロジーの最先端』
jAction 萩原伸悟

ウェブマーケティングの企画/開発を専門とする株式会社tadashikuのエンジニア。
メーカーでシステムエンジニア、ゲーム制作会社でアプリエンジニアを経験後、2011年8月に株式会社tadashikuを設立。PRを目的としたウェブアプリの企画・開発を行なう。 HTML5によるウェブアプリ開発を効率化するJavaScriptライブラリー「jAction」を運営。ASCII.jpなどでコラム執筆。

4）16:05～16:15
名刺交換、質疑応答

■ 対象
事業会社のマーケティングご担当者様
以下のようなニーズをお持ちの方におすすめです。
スマートフォン×ソーシャルメディア領域の最新動向、事例を知りたい
スマートフォンを活用したマーケティング施策を検討している
スマートフォン対応のSNS運用について知りたい

■ セミナー概要: 日時
2012年10月2日（火）
13:40受付　14:00開始　16:30終了（予定）

■ 会場
ビジョンセンター日本橋
〒103-0022 東京都中央区日本橋室町1-5-3　福島ビル5F

■ 参加費
無料

■お申し込みはこちらから

jAction1.14にバグがあり報告を受け修正いたしました。
アニメファイルを使う為のMovieImageClassに問題がありました。

ダウンロードコーナーのも修正して差し替えてあります。
ご迷惑をおかけしました。

Lineクラスやら回転やら機能も増えてるんですが（近々新チュートリアルを書きます）、今回はｊAction本体も色々いじってます。

protoTypeも大分慣れてきたので、継承みたいな手法も取り入れてソースコードのシェイプアップもしています。　メモリ効率とかも理屈上は良くなってるはずです。
パフォーマンスも改善されたかもしれませんが、実測してないので判りません（笑

現状も新機能を色々開発中です。
Verアップも繰り返して、よりよりライブラリを目指してまいります。

以前、【解説】リアルタイムに拡散させるOpen Graphのやり方という記事でOpenGraphについて触れました。その後、OpenGraphを使っていくうちに詳細な部分もわかってきたので追記して解説していきます。

まず、Open Graphとは？以下のリンクが詳しく書かれていますのでご参照ください。

今話題の「Facebook Open Graphアプリ」とは何か

簡単に言うと、リアルタイムでアプリ内の行動が共有される機能です。

この記事では、通常のfacbookモバイルアプリの設定は完了している前提で解説していきます。

facebookモバイルアプリの設定は以下の記事を参照ください。

Facebookの開発者登録とモバイルアプリの作成準備

行うことは以下の7つです。

1.認証ダイアログを設定する

2.Actionを設定する

3.Objectを設定する

4.Aggregationsを設定する

5.Actionをテストする

6.Actionの認証を申請する

7.Actionを実装する

それぞれ見ていきます。

1.認証ダイアログを設定する

アプリの設定から認証ダイアログを選択します。

認証ダイアログ

Authenticated ReferralsのUser & Friend Permissionsにpublish_actionsを設定します。

Authenticated Referrals

これで認証ダイアログの設定は完了です。

2.Actionを設定する

OpenGraph

Open Graphに必要な要素としてActionとObjectがあります。Open GraphとはUSERが「何」を「どうした(どうする)」かを拡散する機能です。「何」に当たる部分がObjectで「どうした」かの部分がActionです。まず、このActionとObjectを設定します。

Open Graphでは独自のAction、Objectを登録できます。今回はActionにPlay、Objectにgameを登録します。

アプリの設定からオープングラフのGetting Startedを選択します。

ActionとObjectを入力して、「スタート」をクリックします。

アプリの設定>Open Graph>Getting Started

上からパラメータを解説していきます。

■Define Action Type

Define Action Type

Actionの名前とプロパティを設定します。

・名前：Actionの名前です。

・プロパティ：

Action投稿時に指定出来るプロパティが記載されています。新たにプロパティを設定することも出来ます。

■Configure Story Text

Configure Story Text

Actionの時制を設定します。Actionの現在/過去時制を両方使用するかや、Actionの前置詞を設定することができます。

■Configure Story Attachment

Configure Story Attachment

Actionがフィードさせるときのレイアウトなどを設定することができます。

-Attachment Layout：

Actionがフィードされるときのレイアウトを以下から選択します。

・Item:：画像の横にキャプションを表示します

・Number：数字の下にキャプションを表示します

・Map：Actionをマップに表示します

詳細設定をいくつかピックアップして解説します。

-Graph API URL：

Graph APIでActionを呼び出すときのURLを設定します。

-Unique Action

このActionを別のObjectにも所属させるかどうかを設定します。

-Linked Action

Action LinksのActionを設定します。Action Linksとはフィード上で、ユーザーにActionをさせることができる機能です。

アプリに遷移せずにActionをさせることがきるため、非常に敷居が低くなります。

-Action Link Preview

フィード上でどうAction Linksが表示されるか確認出来ます。

-Action Link URL

Action Linksを行うためのエンドポイントを設定します。

登録が出来たら次はActionの申請です。申請については以下のリンクが参考になりますのでご参照ください。

 Auth Dialog Facebook開発者向けドキュメントの日本語訳とTips

Facebookの許可がおりるまで数日かかりました。

7.Actionを実装する

許可がおりたら、いよいよ実装です。

javascript SDKを使うと以下のようにして実装することができます。

FB.api(
        '/me/[YOUR_APP_NAMESPACE]:cook?recipe=http://fbwerks.com:8000/zhen/cookie.html',
        'post',
        function(response) {
           if (!response || response.error) {
              alert('Error occured');
           } else {
              alert('Cook was successful! Action ID: ' + response.id);
           }
        });

ここに出てくる、cookがActionでrecipeがオブジェクトです。

これでリアルタイムでアプリのActionがフィードされ拡散が広がるでしょう。

今後もこのOpen Graphの良い活用方法を研究していくつもりです。

【参考リンク】

以下のリンクを参考にしました。

Define Actions

Define Objects

Using Actions

Using Objects

■主な更新箇所
１）Canvasアプリにするかどうか選べるようにしました
Ver1.02までは、Canvas専用ライブラリの側面がありましたが、Canvasを使わないHTMLでもｊActionを使用する事が出来ます。

canvasを使用しない場合でも、イベントの発生やキャッチ、音再生やFacebookやGoogleMapのAPIを使う事ができます。

またCanvasアプリにする場合には、
ja_CanvasSet();
を実行する必要があります。

※HTMLタグからCanvas要素がなくなっております。 ja_CanvasSet();の実行で生成されます。

２）アンドロイドの音声再生にja_SoundSet();　が必要になりました。

アンドロイド端末では、ブラウザに音声再生がついてない機種が多々あります。
jActionでは、ja_SoundSet();を実行する事により、音再生用のFlashを見えないようにブラウザに貼り付けて再生を担当させています。

※iPhoneでは関係ありません。ja_SoundSet()；を実行しなくても音再生命令が使えます。　
アンドロイドで音声再生がない場合は、ver1.10以降はja_SoundSet();　を実行しない場合は「sound.swf」「sound_swf.js」の2ファイルも削除しても影響ありません。

３）マウスイベントのアルゴリズムの見直し
Ver1.02までは、マウスイベント時にマウス座標にある画像オブジェクト全てが反応しておりましたが、マウスイベント時に、マウスの座標にある最前面の画像オブジェクトのみ反応するように変更しました。

また最前面にあったとしても

画像オブジェクト.mouseEnabled = false;　でマウスイベントを無効にしたり

画像オブジェクトに張り付いている子供画像オブジェクト全てを、
画像オブジェクト.mouseChildren( false);で無効にしたり、
画像オブジェクト.mouseChildren( true);で有効にする事が出来ます。
バージョンアップにともなう、主な更新箇所は以上です。
引き続きライブラリの改良に努めてまいります。

今後ともよろしくお願いします。

センサークラスは端末の傾きや端末を動かしたときの加速度などを取得するクラスです。

具体的に取得できるデータはこちらになります。

①端末の向きが変わったときのデータ

②端末を動かしたときの加速度、傾き、回転加速度（現在iPhoneのみ対応）

●チュートリアルサンプルはこちら。ダウンロードして、こちらのチュートリアルをはじめてください。

その中にはいっているmain.jsにコードを追加していきます。

※②の端末を動かしたときの加速度、傾き、回転加速度については、iPhoneのみ対応なのでiPhoneでご確認ください。

①端末の向きが変わったときのデータ

これは、端末が横向きが縦向きかを判定するためのものです。
まず、端末の向きが変わったときのイベントを設置します。

上記のイベントが発生したときのメソッドを追加します。

これにより、イベントから渡されたorientationオブジェクトを取り出すことができ、そのプロパティーportraitで、端末が横か縦かを判定します。
e.portraitがtrueだったら縦向きで、e.portraitがfalseだったら横向きということがわかります。

{
　　　if(orientation.portrait == true)
　　　{
　　　　　　//縦向きになったときの処理
　　　}
　　　else
　　　{
　　　　　　//横向きにになったときの処理
　　　}

②端末を動かしたときの加速度、傾き、回転加速度（現在iPhoneのみ対応）

これにより、端末を傾けたりして、アクションを起こすなどのゲームアプリなどをつくることが可能です。

まず、端末を動かしたときのイベントを設置します。

このイベントが発生したときのメソッドを追加します。

イベントからsensorオブジェクトが渡されます。これ傾きや加速度の情報が入っています。

{
　　//端末の傾き X座標はsensor.gravity.x Y座標はsensor.gravity.y、
     Z座標はsensor.gravity.z

　　//加速度　X座標はsensor.accele.x Y座標はsensor.accele.y、
     Z座標はsensor.accele.z

     //回転加速度　X座標はsensor.rotation.beta
     Y座標はsensor.rotation.gamma、Z座標はsensor.rotation.alpha
}

●それぞれデータの取得方法

端末の傾きについては、プロパティーgravityにデータがはいっていて、

それぞれ、X座標はsensor.gravity.x 、　Y座標はsensor.gravity.y、Z座標はsensor.gravity.zで取得。

加速度については、プロパティーacceleにデータははいっていて、

それぞれ、X座標に対してはsensor.accele.x 、　Y座標に対してはsensor.accele.y、　Z座標に対してはsensor.accele.zで取得。

回転加速度については、プロパティーrotationにデータははいっていて、

それぞれ、X座標に対してはsensor.rotation.beta 　Y座標に対してはsensor.otation.gamma、　Z座標に対してはsensor.rotation.alphaで取得。

※X座標、Y座標、Z座標については下記画像を参照ください。

jActionでは、ライブラリ開発にご協力いただける方を募集しています。

■担当していただくプロジェクト
・ライブラリ本体の拡張
・プラグインの開発・拡張
・jActionを活用したアプリの企画・開発

■求めるスキル
プログラミング初心者の方からプログラミングのプロまで、受け付けております。
特に、HTML / CSSを使用したことがある方、Illustrator / Photoshopでグラフィックデザインを経験された方、大歓迎です。

■活動概要
平日、週末に各々が集まれるときに下北沢にある事務所で開発を行なっております。プロジェクトベースで活動しているので出席義務等はございません。またfacebookグループ / Skypeによる遠隔での参加も可能です。

■ご提供できるもの
・PR / ゲーム業界で開発に携わるメンバーによるプログラミングのノウハウを共有します。
・企業様からの受託開発案件に携わっていただいた際には、対価をお支払いします。

■お問い合わせ
質問や参加申し込みをご希望の方は、こちらからご連絡ください。

主な拡張 / 追加箇所を、開発背景と合わせてご紹介いたします。

■”Facebook Class”の拡張について
▽拡張後のプラグイン紹介ページ
http://jaction.info/?p=1220

▽開発背景
今年2月に公開した “Facebook Class” ですが、
Facebookの普及とアプリの重要性向上にともない、
よりバリエーション豊かなアプリ開発を可能にすべく、
プラグインの拡張を実施いたしました。

▽拡張箇所
1) FQLから取得できる情報の拡張
FQL(Facebook Query Language)とは、
Facebookのソーシャルグラフ上から情報を取得するためのSQLのこと。

これまでは、ユーザーのプロフィール画像のみを取得する仕様でしたが、
今回に拡張により、ユーザーが公開を許可する
すべての情報を取得することができるようになりました。

検索可能な情報についてはFacebookDevelopersのウェブページをご確認ください。
https://developers.facebook.com/docs/reference/fql/user/

2) FQLから取得した情報の絞り込み機能の実装
さらに、FQLから取得した情報のうち、
指定する条件に合致する情報のみに絞り込んで取得する機能を実装しました。

例えば、
これまでは、ユーザーのプロフィール画像を取得すると、
全ユーザーの画像をランダムに取得する仕様になっていました。
拡張後は、ユーザーの中から女性のみを引っ張ってくる、
のようにパラメータを指定することができるようになりました。

■”Google Map Class”の追加について
▽新規プラグイン紹介ページ
http://jaction.info/?p=1753

▽開発背景
HTML5を活用したスマホファーストなウェブアプリを広告主企業に
ご提案する過程で位置情報と連動したアプリに対する需要の高さを感じました。
これには、PCにはないスマホならではの特徴である “携帯性” を活かし、
店舗やイベントへの誘因を図りたいという企業のマーケティング的な意図があります。
そこでまずは限られた機能に絞り、ウェブアプリとGoogleMapとの連携を図るための
拡張プラグインを追加しました。

▽プラグインの特徴
1) Google Mapの表示
緯度 / 経度、ズームを設定し、
ウェブアプリ内にGoogle Mapを表示させることができます。
オプションとして、表示サイズの指定も可能です。

2) 現在位置の取得
HTML5特有の機能であるGeolocation APIを利用して、
現在地を取得し、Google Mapをカスタマイズすることができます。

以上が、主な拡張 / 追加箇所のご紹介です。
引き続きライブラリの改良に努めてまいります。

今後ともよろしくお願いします。

GoogleMapクラスは、GoogleMapの貼り付けたり、現在情報の取得、マーカーの表示などを可能にするクラスです。
2部に分けて説明します。

1部では、GoogleMapの表示、現在地の取得の方法の説明

2部では、マーカーや吹き出しなどの細かいオプションを説明する予定です。

下記のようにGoogleMapをスマホ向けに表示することが可能になります。

デモはこちら

●チュートリアルサンプルはこちらをダウンロードして、こちらのチュートリアルをはじめてください。

準備として、index.htmlに①GoogleMapを埋め込むためのタグと、②GoogleMapに接続のためのアクセスダグ、③GgoogleMapクラスへのアクセスタグを追加します。

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8"/>
 <meta name="viewport" content="width=320px, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=0"/>
<meta name="apple-mobile-web-app-capable" content="yes" />
<title>テストサンプル</title>
<script src="jaction.js"></script>
<script src="Main.js"></script>
<script src="googlemap.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
</head>
<body bgcolor="#ffffff" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
	<div style="position:relative;">
		<div id="map_div" style="position:absolute;z-index:1;"></div> 
	</div>
</body>
</html>

それでは実際にコードを書いていきます。

コードは、main.js に書き込んでいきます。

まず、最初に、基本的なMapの表示の仕方です。

GoogleMapクラスがあるので、そのオブジェクトをつくります。ちなみに、変数名はgooglemapとしていますが、任意の変数名でも結構です。

次に経度と緯度を設定します。ここでは、経度35.711744、緯度139.70445にします。

次に、ズームを設定します。1~15までの整数のみ設定可能になっております。ここでは、10にします。

最後に、次のコードを入力すると、GoogleMapが表示されます。

GoogleMapクラスでは次のようなオプションを用意してます。

次にHTML5特有の機能、GeolocationAPIを利用して、現在地を取得して、それ中心とするGoogleMapを表示させてみたい思います。

最初に、現在地を取得するgetCurrentPositionクラスのオブジェクトを生成します。

次に、現在地を取得するイベントをつくります。

現在地が取得できたら、起こすメソッドをつくります。

ここで、先程設置したイベントをremoveEventlistenerで消す処理も加えます。

this.getCurrentPosition=function()
{
     geo.removeEventListener("getCurrentPosition",this);
}

次に、googlemapオブジェクトの経度と緯度に取得した、現在地の経度と緯度をいれ、実際に表示してみます。

現在地の経度と緯度はそれぞれ、geo.xとgeo.yで取得できます。

this.getCurrentPosition=function()
{
　　　geo.removeEventListener("getCurrentPosition",this);
　　　//現在地の経度geo.xをいれる。
      googlemap.lat=geo.x;
      //現在地の緯度geo.yをいれる。
      googlemap.lon=geo.y;
     //mapを表示する。
    　googlemap.Display();
}

これで、現在地を中心とするマップを表示させることができました。

■主な更新箇所
１）入れ子構造の採用
これまではレイヤーの異なるオブジェクトを制御する際、オブジェクトを個別にコーディングする必要がありました。今回のバージョンアップで入れ子構造を採用することにより、あるレイヤーのオブジェクトをコーディングすれば、そのレイヤーにひもづいている他のレイヤーにあるオブジェクトも制御することができるようになりました。これにより、複数のレイヤーにまたがる動的なウェブアプリの開発が大幅に効率化されることが期待されます。

２）変数名の見直し
jActionにあらかじめ用意されている命令と、新たに作る命令が、名前衝突を起きにくくするように変数名を変更しました。
以下が変更した一例です。
（前）boxObj →（後）ja.BoxClass
（前）root →（後）ja.Stage
（前）imageObj →（後）ja.imageUnitObj
（前）AudioClass →（後）ja.AudioClass
（前）TextClass →（後）ja.TextClass
これにより、変数の検索や習得の効率化が期待されます。

３）ja.TweenClassの統合
プロパティ値を指定したフレーム間をイージング処理して値を変えるためのクラスである、ja,TweenClassをプラグインから、jAction本体に統合しました。ウェブアプリ開発において使用頻度が高いことが背景にあります。

４）FacebookClassの無償化
ウェブアプリとFacebook Graph APIを連携させるためのクラスである、FacebookClassを無償化しました。現在、FacebookClassを活用したウェブアプリ受託事業については、インタラクティブエージェンシーである、スパイスボックスと共同で企画開発を行なっております。

バージョンアップにともなう、主な更新箇所は以上です。
引き続きライブラリの改良に努めてまいります。

今後ともよろしくお願いします。