カテゴリー別アーカイブ: gadget

opensocialガジェットをAngular.jsで実装する

| コメントをどうぞ

opensocialガジェットをAngular.jsで作ってみました。引っかかった箇所をご紹介です。
※コードはinfoScoopのガジェット用

コツ1: angularアプリを手動で起動する

angular.jsは、自動と手動、2種類の初期化方法を選ぶことができます。
自動の場合は、ng-appをhtml上に指定する必要があります。すると、htmlが読み込まれたタイミングで自動で初期化が行われます。普通は自動の手法でやることがほとんどでしょう。

一方ガジェットの場合は、手動で初期化する必要があります。
ガジェットでscriptを読む準備ができたタイミングで初期化を行わなければならないからです。
下記のように、gadgets.util.registerOnLoadHandlerを利用し、ガジェットの準備ができた段階でangular.bootstrap~を呼び、手動で初期化しましょう。

続きを読む

Google Apps Script でガジェットを作成してみる

| コメントをどうぞ

前回に引き続きGoogle Apps Script活用のお話ですが、今回はGoogle Apps Scriptを使って簡単にガジェットを作成してみたいと思います。

Google Apps Scriptで作成したWebアプリをそのままinfoScoopにガジェットとして表示できたら便利ですが、X-Frame-OptionsというHTTPレスポンスヘッダにより他のサイトに直接表示することができないようになっています。クリックジャッキング対策のためだそうです。

x-frame-options:SAMEORIGIN

そこでJSONP(JSON with padding)の仕組みを使って、Googleカレンダーのイベントをガジェットに表示してみたいと思います。

続きを読む

Google乗換案内をちょっと便利にするRoute Searchガジェットの使い方

| 1件のフィードバック

目的地に移動するときに、どんなサービスやアプリを使って経路や乗換を調べていますか?
今回はGoogle乗換案内をちょっと便利にするガジェットを紹介します。

route_search1

Goolge乗換案内

Google乗換案内
http://www.google.co.jp/intl/ja/landing/transit/

Google乗換案内は、Googleマップに組み込まれています。
https://www.google.co.jp/maps?f=d

乗換案内というと出発・到着の駅名を入力するというイメージがあるかもしれませんが、
Google乗換案内では、出発地・到着地に駅名の他に、住所や地名、建物を入力して経路検索ができます。

例えば、
 出発:新宿区西新宿1-24-1
 到着:品川駅

 出発:東京タワー
 到着:スカイツリー
のような検索ができます。

Route Searchガジェット

Route Searchガジェットは、ガジェット上で出発地・目的地・時刻を入力して検索ボタンをクリックすると、別タブでGoogleマップの画面が表示されるシンプルなガジェットです。
route_search8

また、Google乗換案内を便利にする以下の2つの機能があります。

1. 検索履歴
 1つ目は検索履歴です。
 経路検索を使うときに毎回出発地と目的地を入力していませんか?
 ガジェットから検索すると、出発地と目的地が履歴に保存されます。
route_search2
 次回から、入力フォームにフォーカスすると過去に検索したキーワード(駅名、地名、住所など)がプルダウンで表示されます。キーボードからの入力なしで検索できます。
route_search3

2. ラベル
 2つ目はラベルです。 検索履歴に任意のラベルをつけることができます。
 履歴を使って過去に検索した住所で検索しようとした場合、プルダウンに住所が表示されてもどこの住所なのかすぐにわかりません。
 ここで、この住所にラベルをつけておきます。
route_search4
 右側の入力フォームをクリックすると、ラベル一覧が表示されます。
route_search5
 ラベルをクリックすると出発地・到着地のキーワードが自動で入力されます。
route_search6
 よく行く場所はラベルをつけておくと、入力がとても楽になります。
 

業務での利用シーン

下記の手順で便利にGoogle乗換案内を使うことができます。
1. お客さんの会社の住所で検索する
2. 1の履歴に会社名などのわかりやすいラベルをつける
3. 1と2をよく行く会社・場所の分だけ繰り返す
4. 自分の会社の住所で検索して、履歴にラベルをつける

入力例
 出発:本社(ラベルから)
 到着:ABC社(ラベルから)
route_search7

どこで使える?

infoScoop上で利用可能です。
infoScoop for Google Appsを利用中であれば、管理画面から簡単にガジェットを追加できます。
infoScoop Cloud EnterpriseやinfoScoop OpenSourceで利用する場合はお問い合わせください。

このガジェット以外にも便利なガジェットがinfoScoop Gadget Galleryに掲載されています。
ぜひお試しください。

infoScoop Gadget Gallery
http://www.infoscoop.info/gadget-gallery/