Translate

Post Date:2012年11月11日 

Passbookのサンプルを1分で作成

iOS6になって新しい機能としてPassbookが追加されました。Passbookの利用法については、"アップルのiOS6の新機能" に利用方法が説明されていますが、下記としての使い方ができます。

Passbookの用途
  • 搭乗券
  • チケット
  • ストアカード
  • クーポン

Passbookで管理するPass(パス)には、QRコードPDF417のような二次元バーコードが付与されています。日本では、おサイフケータイが先行していたので、二次元バーコードでのサービスはあまり馴染みがありませんが、搭乗券やスカイツリーの入場券などに利用されています。二次元バーコードであれば利用者側のデバイスに大きな制限はありませんし、店舗等でも専用の読み取り装置がなくても、スマートフォンなどを読み取り機として代用することができます。日本でも既にANAやぐるなび、TSUTAYA、グルーポンなどでPassbookサービスを開始しています。

カードや印刷物を持ち歩くより、Passbookにまとめて保有できるのであればiPhoneユーザにとっての利便性は向上しますし、Passbookは単にカードや印刷物の代替としてだけではなく、時間や場所、内容の更新をプッシュ通知で知らせてくれます。


時間、場所によるプッシュ通知

Passを生成時に時間と場所でプッシュ通知ができるように仕込むことができます。チケットや搭乗券であれば開始時刻や搭乗時刻のリマインドになります。またクーポンであれば有効期限の通知として利用できそうです。時間によるプッシュ通知の指定には、開始時刻と終了時刻があり、この指定された時間内にロック画面にプッシュ通知が表示されます。但し、時間内であれば何度でも表示されてしまうので、あまり長い時間表示されるのも困りものです。

位置情報によるプッシュ通知であれば、店舗などの近くに来るとプッシュ通知が表示されます。どのくらいの距離で通知されるのかはわかりませんが、実際に利用してみると、かなり離れた地点でもプッシュ通知が表示されます。しかし、そもそもGPSの誤差もあるので、リマインドのためのメッセージだと考えれば、ある程度離れた地点でプッシュ通知を行い、Passの裏面に地図のリンクが用意されていれば便利に使えそうです。

プッシュ通知を行う地点は10箇所まで登録することができるので、複数の店舗がある場合でも、クーポンなどを共通して利用することができます。しかし、店舗数が多いコンビニやチェーン店で位置情報によるプッシュ通知を利用するのであれば、店舗毎のPass発行となってしまうのではないかと思います。

下記は、ストアパスのサービスを利用して発行されたペッパーランチのPassを利用した公式ストアカードによる位置情報のプッシュ通知の例です。

ロック画面に表示されったプッシュ通知のアイコンを右にスワイプすると当該パスを表示することがことができます。

右下の『i』アイコンをクリックするとPassの裏面を表示することができます。

住所から地図アプリのリンクやGoogleマップのリンクがパスの裏面に記載されていれば、地図アプリやSafariを起動することができます。


変更によるプッシュ通知

もうひとつのプッシュ通知機能として、搭乗時刻、イベント開始時間、保有ポイントなどPassの内容に変更があった場合に、変更内容を通知することができます。下記は、アメリカン航空の搭乗券でのプッシュ通知の例です。出発時刻が変更となった場合にロック画面に変更となった内容が通知されます。下記はiPhoneの画面を上から下にスワイプして表示される通知センターの表示画面です。

メッセージをタップするとPassbookが起動され当該Passが表示されます。またPassに変更箇所がマーキングされているので、何が変更となったかが、とても分かりやすいです。

と、いうことで百聞は一見にしかずということで、実際に自分でPassを生成することで、理解は深まると思いますのでサンプルパスを作成してみましょう。サンプルPass作成可能なサイトも幾つかありますが、PassSourceは登録も不要で、実際にあるPassもサンプルとして作成することができます。Pass Kitは画像など更に細かく設定できますし、日本語のUIも提供されています。


PassSourceによるサンプルPassの作成

PassSourceによるサンプルパスの作成方法を下記に示します。iPhone(iOS6の端末)でサンプルを作成すれば、そのままPassbookに登録できます。内容を変更せずに登録するのであれば30秒でサンプルパスを作成することができます。

let's get startedの下にあるCreateボタンをタップしてサンプルパスの作成開始です。

幾つかのサンプルが用意されていますが、ルフトハンザの搭乗券(Lufthansa Boarding Pass)を選択します。

Relevant Dateは、Passがあることを通知するための機能を設定する項目です。

設定時刻になるとアメリカン航空の例で示したプッシュ通知が表示されます。メッセージの表示時間の設定は開始時刻と終了時刻です。

ストアカードやクーポンのサンプルPassでは位置情報(緯度経度)をセットすることができます。

Passの登録情報に設定する位置情報は世界測地系(WGS84)ですが、Geocodingで簡単に調べることができます。Geocodingでは住所やランドマーク名から経度、緯度を検索することができます。

Passの内容を好きなように変更したら、画面下にあるCreateボタンをタップしてPassbookに登録しましょう。

右上にある「追加」をタップすれば、Passbookに登録されます。

登録したパスを削除するには右下の「i」マークをタップします。パスの裏面となり、左上のゴミ箱をタップすれば削除されます。パスが削除されるときのシュレッドアニメーションを是非確認してみてください。


Passbookに追加したパスを更新してみよう

PassSourceでは、更新通知の確認もすることができます。作成したPassの裏面に記載されているupdate this passのURLをタップします。

SafariでPassSourceの更新画面が開かれますので、搭乗時刻(Boarding Time)を変更します。

画面下のUpdateボタンをタップします。

Passの更新画面になりますので、右上の『アップデート』ボタンをタップします。

アップデートと同時にプッシュ通知が配信されてしまいますので、ロック画面ではなく、現在の使用していたSafariの上部に「Boarding time changed to 20:00」とメッセージが表示されます。アメリカン航空の例のように後でプッシュ通知を確認することもできます。

プッシュ通知をタップすると当該Passが起動され、変更となった搭乗時刻がわかりやすく、丸で囲まれています。(ルフトハンザの搭乗券は背景がオレンジなので分かりづらいですが...)


まとめ

PassbookはiOSの標準アプリであり、プッシュ通知もアップルの仕組みを利用しています。各種ASPサービスも提供され始めているので、サービス提供者側にとっても始めやすいサービスではないでしょうか。また利用者側からしてもプッシュ通知もあり、Passbookにまとめられていればとても便利に使えます。

Passbookはウォレット(お財布)というよりもパスケースです。iPhoneが例えNFCに対応したとしても普及してしまったSuicaやPasmoがNFCに対応するとは考えづらいので、iPhoneユーザとしては、おサイフケータイとしての使い方はあきらめて、会員証、クーポン、チケットなどがiPhoneで管理できることを願うのみです。

但し、日本でのスマートフォンにおける4割というiPhoneのシェアを考えるとサービス提供書側としては、6割のAndroid端末のことも考えなければならないので、iPhoneに特化したサービスがどこまで普及するかについては、航空会社だけではなく、コンビニや量販店大手でのPassbook利用がすすまなければキャズムを超えることはできないのではないかと思います。ヤマダ電機のバーコードが二次元バーコードであれば、読み取り機の改修も要らず、容易にサービス開始できたのではないかと思うと残念です。少なくとも前述したスカイツリーの入場券はPassbookに対応してもらいと願う次第です。時間指定の入場券であればプッシュ通知をすることも可能なのですから...。


今日の一曲


気怠い休日の朝にぴったりなアルバムです。Richard Tompsonは、フォークロックギターリストの第一人者で、日本人に響くギターサウンドを奏でます。このアルバムは、かつての妻Lindaと制作されたアルバムですが、4曲目に収録されているJust the Motion - Shoot Out the Lightsは、RichardのギターとLindaのボーカルが絶妙に絡み合っていて、とても心地よく聴ける一曲です。

Post Date:2012年9月16日 

AddThisボタンをカスタマイズ

AddThisとは

AddThisとは、様々なソーシャルネットワークやブックマークボタンをサイトやブログに簡単に設置できるサービスです。現時点では336ものサービスに対応しています。海外のサービスなのでmixi Yahoo!Japan Livedoor など日本のサービスには対応していませんが、「はてなブックマーク」はあります。日本でよく使われているサービス(Facebook, Twitter, Tumblr, Instapaper, Pocket, Evernote)は対応されていますし、印刷ボタンやメール送信ボタンも追加できるので、十分使えるサービスだと思います。

AddThisボタンをブログやサイトに追加する

AddThisサイトからGet The Code For Your Site!をクリックします。

AddThis Site

登録を促されますが登録しなくてもボタンの設置はできますので、右上部の×でRegisterの画面を閉じます。

登録は不要!

BloggerにAddThisボタンを追加する

登録は簡単です。WordPress、Bloggerなど幾つかのサービスは、専用のコードを生成してくれます。Bloggerの場合は、専用のウィジェットを作成してくれます。ボタンの表示スタイルは4種類ありますが、32×32px、16×16pxのアイコンを選択した場合は、デフォルトでは閲覧者側のAddThisの設定によって表示されるアイコンが変わってきます。

AddThisボタンの種類

Bloggerを選択して、32×32pxのアイコン表示を選んで『Install Blogger Widget』をクリックします。

Bloggerに追加
取り敢えず、ここではデフォルト設定のままで『ウィジェットを追加』をクリックします。

Bloggerのレイアウト画面

右側上部のHTML/JavaScriptがAddThisのコードになります。この位置に追加されても実体は別な場所に表示されるので問題ありません。逆にサイドガジェットにないと正しく動作しません。

ブログの表示

下記が32×32pxのAddThisボタンで、デフォルトではフッター位置に表示されます。左からBlogger, Twitter, Facebook, ブックマーク, AddThisのツールボックスとなっていますが、これは表示する環境等によって異なるようです。

AddThis 32x32 デフォルト表示

AddThisのカスタマイズ

AddThisのカスタマイズ方法について調べてみました。Bloggerの場合は、レイアウトから追加されたガジェットの右下にある「編集」をクリックしてコードを編集します。

AddThisウィジェットの変更

AddThisツールボックスのカウントを消す

AddThisのツールボックス右側にバブル表示でAddThisの利用回数(カウンター)が表示されています。折角シンプルなアイコン表示を選択したので、このカウンターを表示しないようにします。

下記のコードを探して削除します。
<a class='addthis_counter addthis_bubble_style'></a>
※Bloggerの場合は”(ダブルクォート)ではなく’(シングルクォート)で囲みます。

これでAddThisのカウンター表示がなくなりました。

カウンター表示を削除したAddThisボタン

AddThisのアイコン(サービス)を変更

AddThisボタンに表示される共有サービスを変更するには、下記のaddthis_button_xxxのxxx部をサービス名にします。
<a class='addthis_button_preferred_1'></a>
<a class='addthis_button_preferred_2'></a>
<a class='addthis_button_preferred_3'></a>
<a class='addthis_button_preferred_4'></a>
※Bloggerの場合は”(ダブルクォート)ではなく’(シングルクォート)で囲みます。

Twitterボタンを利用する場合は、addthis_button_twitterとなります。下記は代表的サービスのサンプルになります。またサービスアイコンの表示数は初期値は4個に設定されていますが、個数に制限はなく1つでも10個でも設定可能です。AddThisのツールボックスを削除することも可能です。

Service Code
name code
Twitter twitter
Facebook facebook
Google+ google_plusone_share
はてぶ hatena
印刷 print
メール email

Google+1はgoogle_plusoneを使用するとカウンター付きとなってしまうので google_plusone_share を使います。利用可能なサービスとサービスコードの詳細については、Service Codesに記載されているので参照してください。

ボタンの間にセパレータ入れる

下記のコードを使って各ボタンの間にセパレータをいれることができます。
<span class='addthis_separator'>|</span>
※Bloggerの場合は”(ダブルクォート)ではなく’(シングルクォート)で囲みます。

Pocket (Formerly Read It Later)と印刷ボタンの間にセパレータを入れるには下記のように記述します。”|”を区切り文字としていますが、区切り文字がなくても構いません。
<a class='addthis_button_readitlater'></a>
<span class='addthis_separator'>|</span>
<a class='addthis_button_print'></a>
※Bloggerの場合は”(ダブルクォート)ではなく’(シングルクォート)で囲みます。

できあがったカスタマイズしたAddThisボタンの例は下記になります。

カスタマイズしたAddThisボタン

AddThisのトラックIDを削除

AddThisボタンで共有するとURLの後ろにクリック・トラッキング用のパラメータが付与されます。下記はTweetした例ですが、http://walking-elephant.blogspot.jp/2011/11/blog-post.htmlの#以降(#.UFCxpFQAm6Q.twitter)がクリック・トラッキング用のパラメータとなります。

Click Tracking のパラメータが付与されているURL



詳細はClick Trackingに記載されています。AddThisの利用状況をトラッキングする パラメータでSEOにも影響がないとありますが、自分のURLの後ろにパラメータが付いているのも気持ち悪いのでクリック・トラッキング用のパラメータが表示されないようにします。下記のコードを追加すれば、URLの後ろにパラメータが付かずにクリック・トラッキングされないとあります。
<script type="text/javascript"> 
var addthis_config = {
     data_track_clickback: false 
} 
</script>

Bloggerのウィジェットに追加する場合は、document.doAT=function(cl)の直前に追加します。
<script type='text/javascript'>
var addthis_config={data_track_clickback:false};
document.doAT = function(cl)
{

これで、下記のようにクリック・トラッキング用のパラメータがURLに付加されなくなります。

Click Tracking 用のパラメータが削除された

AddThisボタンを右寄せ表示に変更

AddThisボタンの表示はデフォルトでは左寄せですが、右寄せにすることもできます。AddThisのオプションというよりは、CSSやhtmlコーディングと同じです。まず下記のコードを見つけてください。
var at = <div class='addthis_toolbox  addthis_default_style addthis_32x32_style' addthis:title='"+title+"' addthis:url='"+encodeURI(url)+"'>

右寄せ表示を追加します。
var at = <div style='float: right;'><div class='addthis_toolbox  addthis_default_style addthis_32x32_style' addthis:title='"+title+"' addthis:url='"+encodeURI(url)+"'>

DIVステートメントを閉じるのを忘れないようにしてください。div class='addthis_toolbox'のDIVステートメントが閉じられている後ろに追加します。
</div></div>";

AddThisボタンの表示位置を変更(Blogger)

Blogger用のウィジェットでAddThisを追加した場合、AddThisボタンはブログのフッターに追加されます。フッターに表示されるのは下記のコードがあるためです。赤字の部分を変更することによって表示する場所を変更することができます。
var myPostContent = new RegExp('post-footer');

1.post-header
2.post-body
3.post-footer

その他変更

Customizing AddThis にその他色々とカスタマイズ方法について記載されていますので、色々と試してみてください。

今日の一曲

Add This について説明したので、今日の一曲はその名もずばりGus GusのAdd This Songです。色々なミックスバージョンを集めたAdd This Songというアルバムというのがあります。ネットラジオで Add This Song (Gluteus Maximus Mix)が流れていて、久しぶりに所謂UKエレクトリックミュージックを聴き、iTunesで購入してしまいました。

個人的にはAdd This Song (Klovn Mix) - Add This Songが一番好きです。夜のドライブには最適なアルバムです。

Post Date:2012年9月6日 

HuluがApple TVに対応!

huluは、月額980円でスマホ、タブレット、PC、ゲーム機(PS3, Xbox 360Wii)、テレビ(SONY BRAVIA 46V型 など)とマルチデバイスで視聴できるオンライン動画配信サービスです。

米国でApple TVに対応というニュースをみて、早く日本でも対応しないものかと心待ちしていましたが、ついに日本でも2012年9月4日からApple TVのホームメニューにHuluが追加されました。

Apple TVのホームメニューにhuluが
huluのiPhone/iPadアプリは、AirPlayに対応していたもののミラーリングが必要でした。また視聴中に途中で切断されてしまったり、上部にタイトルが表示される完全なフル画面ではなっかたりと、AirPlayでの利用については、いまひとつ快適ではありませんでした。しかし、今回のApple TV対応で完全フル画面で視聴できるようになりましたし、iPhoneやiPadというデバイスが占有されなくなったので、TVを視聴しながらの作業が可能となりました。何よりもテレビの入力を切り替えれば自動で電源が入るApple TVの手軽さはリビングでの貢献度は高いです。

初期起動時にのみアカウント設定の画面
初期はアカウントの登録が必要です。iTunesアカウントでも購入できるようになっていて、通常は2週間の無料トライアルですが、iTunesでアカウントで購入すると1ヶ月の無料トライアルとなるキャンペーンを行っています。

Apple ハイビジョン対応 Apple TV MD199J/A
アップル (2012-03-16)
売り上げランキング: 15

Huluでウルトラセブンを見よう!

もともとHuluは、米国のサービスなので米国のドラマ、映画が中心のサービスでしたが、BBCとの提携したドラマやドキュメンタリーが追加されたり、更には日本の各企業との提携で日本のコンテンツも増えてきています。今回、ギャガ、円谷プロダクションとの提携も併せて発表され、円谷プロダクションとの提携により「ウルトラマン」「ウルトラセブン」「帰ってきたウルトラマン」などのウルトラシリーズ8作品も視聴可能となっています。是非ともウルトラQも追加してもらいたいものです。

ウルトラトラセブンといえば、どうしても気になってしまうのが第12話です。Huluでも、第12話は欠番となっていました。ウルトラセブンはリアルタイム世代ではないので、12話が封印されているという事実を知ったのは1987年にTBSで放映された『泉麻人のウルトラ倶楽部』でした。

封印されているウルトラセブン12話
当時は詳細について知るよしもなっかたのですが、現在では、ネットで容易に調べることができるようになりました。第12話のタイトルは「遊星より愛を込めて」で、登場する怪獣は「スペル星人」です。かなり劣悪な映像ですが、Youtubeにも動画がアップされているので、どんな内容かを確認することができます。著作権の問題は別として、1970年から放映されていない映像がネットにアップされているということには驚きを覚えます。

スペル星人のコンセプトはいかがなものかと思いますが、

「あたし忘れない、決して、地球人も他の星の人も、同じように信じ合える日がくるまで」

という台詞は印象的でした。

なぜ自主規制になったのかということについては、Wikiにも記載されていますが、封印作品の謎―ウルトラセブンからブラック・ジャックまで (だいわ文庫)にその経緯が載っていますので興味がある方は閲読してみてください。

封印作品の謎―ウルトラセブンからブラック・ジャックまで (だいわ文庫)
安藤 健二
大和書房
売り上げランキング: 132642

象と散歩:人気の投稿(過去7日間)