Domino VoltにぐるなびAPIを組み込んでみた

皆さん、こんにちは。
今日もDomino Voltのアプリについての解説をしていきます。

テクてくLotus技術者夜会で紹介した「ぐるなびAPI」を使ったアプリの解説です。
ぐるなびAPIは
でアカウントを登録することで利用可能になります。
無料で登録できるので、学習用にはもってこいでしょう。


1.ぐるなびWeb Serviceの確認

まずは、ぐるなび Web Serviceについて見ていきましょう。
ぐるなび Web Serviceは多くのAPIが用意されていますが、今回利用するのは「レストラン検索API」です。
レストラン検索APIは、その名の通り、ぐるなびに登録されているレストラン(飲食店)の情報を取得してくれるものです。
データは、JSON形式で返ってくるので、Domino Voltの「サービスの呼び出し」にも対応していることが分かります。

レストラン検索APIの実行方法は、決められたURLにパラメータを付与して、Getリクエストを発行します。
すると、結果がJSONで返ってきます。
パラメータには、店舗名や電話番号、住所などが設定できます。
API テストツールにて試すことが出来るので、Domino Voltに組み込む前にテストをしておきましょう。


2.Domino Voltに組み込む

(1)パラメータの決定

では、Domino Voltに組み込んでみましょう。
APIで利用するパラメータは
key
address
freeword
としました。
このうち、「key」はAPIを実行するのに必要なものです。ぐるなび Web Serviceに登録するとアクセスキーが発行されますので、それを指定します。
「address」は住所です。APIの仕様によると、「(都道府県+市町村+番地)の文字列をUTF-8でURLエンコードすること」となっていますが、Domino Voltの場合は気にする必要はありません(すごいよね)。
freewordは検索用のキーワードです。

(2)入力用フィールドの配置

まず、Domino Voltでアプリケーションを新規に作成します。
そうしたら、「単一行エントリー」を2つ配置します。
住所とジャンルを配置
住所とジャンルを配置

フリーワードは「ジャンル」という名前にしておきました。

(3)戻り値用の表の配置

次に、返ってきた値を表示させる必要があります。
表示させる値は、今回は「店名」「住所」「電話番号」「店のURL」とします。
複数の結果が返ってくることが予想されるので、結果は表に埋め込むようにしましょう。

表は「特殊パレット」から選択・配置できます。
表の配置
表の配置

表は、パレットを配置しただけでは意味がありません。インフォメーションに書いてある「ここ」をクリックします。
すると、ページの下に「表」という子ページのようなものが作成されます。
そこに、表の要素を1行分として配置していきます。
表のレイアウト作成
表のレイアウト作成
すべて、「単一行エントリー」です。それぞれ「店名」「住所」「電話番号」「URL」としています。
表を作成して、「ページ1」に戻ってみます。
すると、作成した表が表示されています。
表が作成された
表が作成された
表のプロパティを変更すると、表のうち、どの項目を表示するのかや各項目の表示の長さを変更することが出来ます。

(4)レストラン検索APIの実装

さて、いよいよぐるなびAPIの実装です。
APIを実行するタイミングはボタンをクリックしたときとしたいので、ボタンを特殊パレットから配置します。
ボタンの名称は「ぐるなびAPIお店検索」としました。
ボタンのプロパティで「イベント」タブを開き、そこの「onClick」をクリックします。
onClickイベントのプロパティ
onClickイベントのプロパティ
「サービスの呼び出し」にチェックをつけると、「サービス構成の追加/編集」というリンクが表示されるので、そこをクリックします。
1.サービス
1.サービス
サービスを設定する画面が表示されるので、「URLを入力」にチェックをつけて、「URL」の欄にぐるなびAPIのURLをパラメータ付きで入力します。
※「サービスを選択」の方はDomino Voltアプリケーションに元々実装されているRESTサービスを使います。

入力したら、横にある歯車アイコンをクリックします。
すると、サービスの詳細画面が開きます。
サービスの詳細
サービスの詳細

ここでは、URLパラメータのうち、入力画面から取得してくるようにしたり、固定値として設定しておくようにするのと、APIを実行したときに実際に返ってくる値の確認ができます。

上の図で説明すると、画面の左側がURLパラメータの静的利用と動的利用の切り替えを行う場所です。「割り当て可能」にチェックをつけると、値は画面入力から取得できるようになります。
ぐるなびAPIの場合、「keyid」は自分だけのものなので、チェックは外して固定値としておきます。
「address」「freeword」は画面から入力した値を利用したいので、チェックをつけておきます。
画面の右側にはどのようなJSONが返ってくるのかが表示されます。
JSONは項目名と値が":"で区切られて構成されていますので、必要な情報はどの項目に入ってくるのかを確認しておきます。
それぞれ
店名: rest > name
住所: rest > address
電話番号: rest > tel
URL: rest > url
になるはずです。

確認できたら、[OK]ボタンをクリックします。
そして、[次へ]ボタンをクリックして、サービス構成の2.入力画面にします。
ここでは、URLパラメータを画面のどの項目から取得してくるのかを設定します。
2.入力
2.入力

画面の左側に作成したフォームの項目が表示されるので、画面の右側のURLパラメータをそれぞれ選択して、真ん中のボタンをクリックして割り当てます。

割り当てたら、[次へ]をクリックして、サービス構成の3.出力画面にします。
3.出力
3.出力

ここでは、返ってきたJSONを画面上のどの項目にセットするのかを決めます。
複数値が返ってくるので、表の中の値やドロップダウンのように複数値を持ちうる項目にしかセットできないので注意しましょう。

上で確認した項目を表の中の項目に割り当てたら、[OK]をクリックします。
そうすると、「onClick」のプロパティ画面になるので、[OK]をクリックします。
さらに「ボタンのプロパティ」画面になるので、[OK]をクリックします。

これで完成です。
念のため、画面上部にある[保存]ボタンをクリックして、画面を保存してから、[プレビュー]をクリックします。

プレビュー画面
プレビュー画面

正常に実装できていれば、上のような画面になるはずです(下部のアイコンは別途表示させています)。
これで「住所」と「ジャンル」に適当な文字を入力して、ボタンをクリックすると、結果が表示されるはずです。

検索結果
検索結果


ちゃんと結果が表示されていますね。
後は、自分なりの装飾をして、「デプロイ」すれば完成です。
どうでしょう?JSONのことが分からなくても、REST APIの実装ができましたよね。

他にもWebサービスはたくさん提供されていますし、自社の中にもそういったサービスがあるかもしれません。
そういったものを組み込んで新しいアプリケーションを作成してみてください。






それでは今日はこの辺で・・・





Notes/Dominoで困ったことがあれば、弊社にお問い合わせください。
HCL Ambassadorの私が承ります!
お問い合わせはこちらから→Lotus Notes/Domino カスタマイズとセキュリティ強化 - 株式会社エフ

コメント