T-PRO-FILE

Facebookは新しい機能がいつのまにか追加されていることがよくあります。自分がどこにいるのか（またはいたのか）というロケーション情報の共有ができる「チェックイン」は、Status Updateや写真などに追加して投稿できるほか、特にモバイルアプリからお店などに「チェックイン」することで自分の友人たちに通知することができます。2012年5月時点のモバイルアプリでは「付近の情報」というメニューになっています。

 

すでにFacebookページを開設している飲食店は多いのですが、このチェックインの機能はFacebookページ（以前はファンページとも呼ばれていた）よりも後に整備され、モバイルアプリでも使われるようになったこともあり、既存のFacebookページと連携できていないケースがほとんどです。せっかくなので、このチェックイン情報を既存のFacebookページに追加できればよいのですが、現時点でFacebookページをスポットにする方法はみつかりませんでした。

なぜスポットページをFacebookページにしたいのか

オーナーが不在で何も更新されていないスポットはこんな表示になっています。

モバイルユーザによるチェックインが行なわれると、そのユーザのアクティビティとしてフィードに配信され、それがそのユーザの友達のニュースフィードに表示されます。そのチェックイン先が気になった友人たちがアクセスするのがスポットのFacebookページで、どんな場所でどこにあるのかといったことを知ってもらうことができます。

スポットのオーナーであれば、スポットのFacebookページのウォールに最新情報を投稿したり、使えるクレジットカードや営業時間を掲載することができます。

つまり、スポットに関わってくれた方による発信コンテンツとそのトラフィックを集約する場であり、ソーシャルグラフによってアクセスしてくれたFacebookユーザたちにスポットの情報を発信できる場でもあります。

また、スポットはチェックインだけでなく、通常のStatus  Updateや写真の投稿でもタグ付け先として利用できるので、モバイルユーザだけでなくPCユーザにも利用してもらえる可能性があります。

スポットページを既存のFacebookページに統合するには

チェックインで使われるスポットページは、オーナーであることを申請することで、個人のFacebookアカウントに紐付けることができます。

このオーナー申請が通れば、このスポットページを公式Facebookページとして更新すればよいのですが、既に開設しているFacebookページがあり、いいねも多く付いている場合はそちらにスポット情報を追加したいところです。この既存のFacebookページに統合する手順というのが、公式のヘルプなどにドンピシャで説明されていないのですが、手続きを順に踏んでいくことでようやく成功しました。

フローは下記の通りです。

オーナー申請の承認にはすこし時間がかかります。機械的にすぐに、ということではなく、確認作業をしているようです。完了するとFacebookからメールが届きます。

 承認されたら、そのスポットページから新たにFacebookページを作成します。既存のFacebookページを作ったのと同じように作ります。気をつけないといけないのは、ページ名と登録住所を同じものにする必要があります。これはFacebook側が「同じページがある＝統合する必要がある」という認識するように促すためです。

同じことに関するFacebookページを2つ持っているのですが、ページを統合できますか。

新しいFacebookページを作成してしばらくすると、既存のFacebookページの管理ページにある「リソース」セクションに「重複しているページを統合」というメニューが現れます。

ここから統合の申請を行なうと、すぐに統合されて既存Facebookページにスポット情報も見られるようになります。

以上、既存のスポットページを既存のFacebookページに統合する手順でした。スポットページの変わった機能としては、営業時間をちゃんと入力するとFacebookページにアクセスしたときにその店が営業中かどうかが表示されるようになります。下記のスクリーンショットは営業時間前のときのものです。また、右のタブメニューには地図も自動的に追加されます。

 

 

Andoridの開発者と登録はAppleとは異なり最初に一度支払うことで完了し、年間の料金はかかりません。それもあって、気軽に登録してみようと思い、手続きを始めました。AppInventorではあるけれど、作ったAndroidアプリがちゃんと動いたので、それを試しに載せてみよう、というのもあります。

今後のこともあるので、個人としてではなく法人アカウントで登録することにしました。Android Developer登録にはGoogleアカウントが必要なのですが、法人用ドメインのメールをGoogle Appsで運用していることで、それ自体がGoogleアカウントになるので、新規でメールアカウントを作成し、それをDeveloper Program用として使うことにしました。また、実際にアプリを公開するとユーザサポート用のメールアドレスを公開する必要があるので、それも兼ねることにしました。

Android Developer 登録
https://play.google.com/apps/publish/signup

ここで開発者名（私の場合は法人名）やメールアドレス（登録用に作成したGoogle Apps上のGmailアドレス）などを登録し、次へ次へと進み、プログラム登録料の支払いページになったところで、少し怪しい雲行きになっていきました。

登録料の支払いはGoogle Checkoutというオンライン決済の仕組みを使います。このサービスではGoogleアカウントごとにCheckoutサービスのアカウントを作成します。（Google AnalyticsやAdwordsのアカウント登録と同じです。）その登録画面で、「Google Appsアカウントだけど大丈夫？」という警告メッセージが表示されました。

Google Appsアカウントだと、アカウント自体の管理をApps管理者が行なうため、登録したクレジットカード情報へアクセスできたり、アカウントを消される可能性もある、という警告で、確かに大規模な法人での管理だとマズそうです。

案内には「個人用Googleアカウントに切り替えて決済もできる」とあり、そういえばすでにAndorid端末で有料アプリを購入するのにCheckoutを使ったGoogleアカウントだとカード登録も必要なくすぐに手続きが終わると考え、そのようにしました。

右上の「ログアウト」で一度抜けた後、ログイン認証画面でAndroid端末用に使っているGoogleアカウントの情報を入力し、無事ログイン。購入手続き画面には、購入アイテムとして「Developer Registration Fee for」で登録したいGoogleアカウント名も表示されているのを確認して、支払い手続きを完了しました。Android端末用アカウントには、決済が無事完了したメール通知が届き、そこにもDeveloper登録の手続きをしていたアカウント名が表示されており、「登録手続きを続けて」のとおりDeveloper登録ページへログインすると、支払い画面に戻されてしまいました。

半日ほど待ってみたのですが変わらずで、どうやら異なるGoogleアカウントで支払いを行なったことで、支払い済み情報がDeveloper登録アカウントとうまく紐づいておらず、未払いのままになってしまっているようでした。

仕方なくサポートにメールで問い合わせを送信しました。送信元はDeveloper登録を行なったアカウントからで、しばらくするとデフォルトの返信メールがチケット番号とともに戻ってきました。

さらに返信メールで状況を説明し、 注文番号を記載のうえ決済内容がわかるスクリーンショットを添付して送信。およそ４５時間後に「確認して、登録されたDeveloperアカウントを有効にしました」というメールが届きました。

決済がクレジットカード一本というところが、法人登録する上で結構ややこしいのだと思います。それなりの規模の企業だと、法人カードによるクレジット決済を担当者ができず、個人のカードを使って事後に精算するという流れになりますが、カードの有効性チェック（与信）にCheckoutの登録情報を使っているという話もあったので、Developer用のCheckoutアカウントはカード情報と連携する、つまり法人ではなく担当者個人のものにする必要がありそうです。

スマートフォンがとても便利だといっても、細かいアクションを繰り返し、毎回行なうには専用のアプリがあったほうがとても効率的です。プライベートでのロックバンドの活動でリハーサルの様子などをTwitterで配信することがあるのですが、バンド用のハッシュタグを加えるのが面倒だったり、タイムラインを追いかけるのにリストや検索を使うのも、他の設定に混じってしまっているのでもっと簡単にすぐに使えないか、と思っていました。

プログラマであれば、専門でなくても少しドキュメントやチュートリアルを通過すると専用アプリを作ることができそうですが、そのレベルに達するにはかなり時間がかかります。

そこで、もう数年前にはリリースされていたAndroidアプリケーションをブラウザで組み上げるツール「App Inventor」のことを思い出しました。もしかしたら、私レベルでも単機能ならこれで作れるかもしれない。

さっそく調べてみると、Google本家での開発／メンテナンスが終了し、MITのラボに移管されていることが分かりました。

MIT App Inventor : http://www.appinventor.mit.edu/

Googleアカウントでログインし、所定のアプリケーションをローカル環境に設定しておくと使えるとのこと。

• Java：ブラウザ上でDesignerと呼ばれるアプリの画面を作成するツールを稼働させるプラットフォーム
• AppInventorアプリ：Blocks Editorと呼ばれるアプリの動作や処理を設計し、画面とつなぐツール

をパソコン（私はMac環境）にインストールし、Googleアカウントでログインをするとプロジェクトを作成することができます。

私が作ろうとしたアプリの機能は次の通り。

1. 自分のTwitterアカウントでログインできる。
2. Tweetをポストするときに、バンド用のハッシュタグを自動で追加する。
3. バンド用のハッシュタグで絞り込んだタイムラインを表示する。

ReplyやReTweetなどの機能までは望まず、こういう単一目的のアプリを手軽に自分専用に作る、というのがApp Inventorの手軽さとマッチしていると思っています。

大まかな作成手順は下記のようになります。

1. App Inventorにログインし、プロジェクトを作成する。
2. 動作に必要なコンポーネントを追加する。（Twitter機能や通知ウィンドウ機能など）
3. ボタンやラベルなど、画面表示されるパーツを作る。
4. ボタンタップ時の動作内容を設定する。
5. エミュレータやAndroid端末でテストする。
6. アプリケーションファイルとして保存する。
7. Android端末にインストールする。

 2、3、4以外は、画面操作をしていると自ずと理解できるところなので、このエントリーではその部分を実際どうやったのかをご紹介します。

 2. コンポーネントの追加／3. パーツの追加

ブラウザでApp Inventorにログインし、プロジェクトを作るとまっさらな画面が表示されますので、アプリとして表示したい文字、画像、ボタン、入力フィールドを配置します。マウスドラッグ＆ドロップやキーボードでの文字入力だけで簡単に操作できます。

 レイアウトの基本は、上から行単位でパーツを置いていきます。基本は１行に１パーツですが、「Tweet!」と「Check Tweets」のボタンのように２つ並べるには左メニュー「Screen Arrangement」にある横レイアウトパーツを使います。設定をいろいろ変えて試してみると、App Inventorレイアウトの挙動がわかります。壊れたりしないので、あちこち覗いて触ってみるとよいと思います。

黄色いボタンはTwitter認証の呼び出し、次の白い大きな箱はTweet本文入力ボックス、次の「Select Tag…」はリスト選択です。それぞれのパーツに名前を付けたり、表示文や選択肢を画面右側のプロパティでそれぞれ設定します。

画面レイアウトの下にある「Non-visible components」は、画面レイアウトには出て来ないけれどアプリに追加できる機能です。Twitterの認証や投稿機能は、左メニュー「Social」の中にあるTwitterをレイアウト画面にドラッグ＆ドロップすると、このように追加されます。

4. ボタン動作の設定

画面上にあるボタンなどをタップしたりスワイプしたときの動作はBlocks Editorというアプリケーションを呼び出して設定します。App Inventorのもっとも画期的な部分かもしれません。

呼び出しは、ブラウザのDesigner画面右上にある「Open the Blocks Editor」ボタンでできます。Blocks Editorでは、画面パーツに紐づいた機能やデータをどのように利用し、処理するのかをグラフィカルに設定することができます。

たとえば、アプリを立ち上げたときの処理はScreen.Initializeというブロックで設定できます。

左側のブロックはアプリの中で使いたいTweetStrという変数を定義しています。このアプリでは、投稿ボックスの値と選択しておいたハッシュタグをつないだものを次のようにして変数TweetStrに代入します。

Twitterへの投稿は「TweetBtn」というボタンをタップしたときに動き出します。IF文による条件分岐で本文が未入力のときに誤って投稿されないように制御したり、文字数が多すぎるときにエラーを返したり、といった処理も可能です。肝心のTweetの投稿は、SetStatusというメソッドを呼び出すだけで実装できます。

エミュレータやUSB接続してあるAndroid端末でテストする前に、実際にどういうデータが流れているかなどを確認するデバッグ用の機能もあります。

私が一番ハマったのは、ハッシュタグ検索結果データを分解し、タイムラインとして表示するところでした。

取得したテキストデータを「foreach」で１レコードずつ取り出し、さらに最初のスペースで２つのデータに分け、改行でつなぎ直して最後にハイフンで作った区切り線を加えることで、取得データのアカウント名と本文を見やすく表示させています。

 エミュレータやUSBケーブルでつないだAndroid端末上でテストができない動作の一つは別ウィンドウの表示でした。理由はわからないのですが、別ウィンドウ表示を設定したボタンをタップすると「テストできないからアプリインストールしてから確認してね」という主旨のメッセージが出ます。

別ウィンドウ設定は下記のようにして正しく動作しました。

もう一つの制約は、画面サイズが固定されており、最近のAndroid端末の解像度だと余ってしまうところです。ダウンロードしたアプリパッケージファイルの中の定義を直接編集すればフレキシブルにできるようですが、自分用のアプリとしては余白があってもいいか、と思っています。

作ってみた感想

単純な機能（Twitter認証、Tweet投稿）だけのアプリ設定は、ゼロからスタートしておよび３０分程度でできるようになりました。それくらい簡単です。さらに便利な動作やエラー処理などの実装は、Microsoft OfficeのVBAがある程度触ることができるレベルであれば、App Inventorの画面を見ながら、ネット上で情報を探しながら作っていくことができると思います。App Inventorのインターフェースは英語のみですが、そこだけ毛嫌いせず、じっくりやれば大丈夫でしょう。

コンポーネントがそろっている機能を使ったアプリであれば、自分しか使わないけれどとっても便利、というツールに向いていると思います。また、アプリ開発のためのモックとして、プログラマ以外の人がさっと用意できるものとして利用できそうです。

 

Facebookページがタイムライン表示に一斉に切り替わります。幅が広くなり、投稿やコメントのやりとりが見やすくなるというデザインの変更だけでなく、機能の変更も行なわれます。そのうちの一つが「メッセージ機能」です。

メッセージが届くと、Facebookページ管理パネルのメッセージセクションに表示されます。未読があればお知らせセクションに件数バッヂも表示されます。

この機能はFacebookユーザからFacebookページに対してダイレクトメッセージを受け取ることができる機能です。Facebookページのヘルプには

Facebookページに直接メッセージを送るにはどうすればよいですか。

Facebookページがファンからのメッセージを受け付ける設定になっている場合、ページの右上にある[メッセージ]ボタンをクリックすることにより、ページに直接メッセージを送ることができます。この方法で送信されたメッセージは、ページの管理人だけがアクセス・応答できます。

 ページの中には、メッセージを受け付けない設定になっているものもありますので、ご注意ください。特定のページにメッセージを送信できない場合、ページ管理人がこの機能をオフに設定していることが考えられます。メッセージ機能がオフになっているFacebookページと交流するには、ウォール(タイムライン)に投稿します。

http://on.fb.me/H8TcmA

とあり、FacebookユーザとFacebookページの間で非公開でのメッセージのやり取りができることになります。これまではFacebookページから「いいね！」ユーザに対してメッセージを一斉送信できましたが、逆方向のコミュニケーションが可能になり、

• 飲食店：予約の受付
• ソフトウェア：ユーザサポート

等の使い方がイメージできます。

使い方によっては便利ではあるのですが、ページオーナーとしては管理する負担が増加するとも言えます。届いたメッセージに気づかず、放置してしまうとブランドに対する信頼を逆に下げてしまうことになります。

このメッセージ機能は、2012年3月末現在では「使用する（メッセージボタンを表示する）」がデフォルトになっており、タイムライン表示に一斉移行するとこのメッセージボタンも表示されます。来訪者はメッセージを送ってよいものを考えるため、Facebookページオーナーとしては突然メッセージが届くように感じてしまうかもしれません。

個別メッセージへの対応が難しいと考えるFacebookページオーナーは、一斉移行前にこの設定をオフにしておいたほうがよいでしょう。

設定のオン／オフは以下のように管理ページの「権限の管理」セクションにあります。

新しい機能、うまく活用したいですね。

2012年初めに登場したXPERIA NXは、Macユーザにとっては少し手のかかる端末です。画像や音楽データを同期するためのアプリケーションが提供されておらず、USB接続しても外部ディスクとして認識してもらうためのモードがありません。

Android SDKを使って画像を取り込む方法を使って、カメラで撮影した画像をMacに取り込むようにしているのですが、Mac上に取り込んだ画像ファイルをiPhotoのライブラリに登録したりiCloudで共有するためにはiPhotoを起動させる必要があります。

画像をコピーした後、取り込みを引き続きしようとiPhotoを立ち上げると、ずっと起動中のままになり、マウスカーソルが例のカラーホイールがくるくる回ったままです。

もしやと思い、XPERIAをUSBケーブルから外すとiPhotoが無事立ち上がりました。どうやら、読み込みできないXPERIA NXへの接続を試みるが失敗する、という無限ループに入ってしまうようです。Mac上にコピーができた時点で、XPERIA NXを接続しておく理由は特にないので、iPhotoでの作業のためすぐに外す、というクセをつけるようにします。

[追記始め]XPERIA NXの設定で、USBでバッグモードをオフにしていると、Mac側からは見えなくなるので起動無限ループは発生しません。そのかわりAndroid SDKのツールからも見えなくなります。[追記終わり]

でもやっぱりiPhotoからダイレクトにXPERIA NXの画像を取り込めるようになるのがいいですよね。Androidの仕様のようなので、対応アプリが出るのを待つことになりそうです。