OutSystemsモバイル(4)　カレンダー登録

ForgeにあるOutSystemsのスマートフォンアプリ対応機能OutSystems Nowを利用して、スマートフォンのネイティブ機能を試してみます。

今回は、カレンダー登録です。スマートフォンユーザのローカルの(つまりスマートフォンの)カレンダーにイベントを登録します。登録できるだけで閲覧や検索のような機能はないようです。

Nowについてはきちんとした仕様が見つからないので、試してみた結果のみで書いている点に注意してください。

シリーズ一覧：

機能

OutSystems Now内で、AddCalendarEventというWeb Blockとして実装されています。

OutSystems Now App(スマートフォンアプリ。使っているスマートフォンのアプリストアから無料でダウンロードできます)で開いているときのみ、以下の動作をします。

パラメータで指定したボタンがクリックされたとき、スマートフォンのカレンダーに、別のパラメータで指定したイベントを登録する
なお、パラメータとして渡すイベントの情報は画面表示時に決まってしまう(入力部品等で変更しても反映されない)

指定できるイベント情報は以下の通り。これは画面部品のIdでなくて生の値を渡す仕様です。

開始日時(DateTime型)
終了日時(DateTime型)
タイトル(Text型)
位置(Text型)
追加情報(Text型)

位置以外は必須です。

利用手順

OutSystems Nowを開発環境にインストールしていなければ、インストール。

開発するモジュールを開いて参照を追加します。Manage Dependenciesアイコンをクリック。

OutSystems NowのScreen Flows/DeviceFeatures/AddCalendarEventにチェックを入れてOKをクリック。

これで開発するモジュールにカレンダー登録機能を組み込めるようになります。

テスト用にWeb Screenを1つ作ります。

カレンダーのイベントとして渡す情報を入力してもらうため、

開始日時(DateTime型)：StartDateTime
終了日時(DateTime型)：EndDateTime
タイトル(Text型)：Title
位置(Text型)：Location
追加情報(Text型)：Notes

というLocal VariableをScreenに追加し、5つのInputに紐づけました。

Buttonには名前を付けて、MethodをAjax Submit、Destinationを中身空のScreen Actionに紐づけ(JavaScriptで動くカレンダー登録だけできればいいからです)。

AddCalendarEventプロパティ

ただし、カレンダーに登録されるのは画面表示時点の値なのでユーザの入力は捨てられてしまいます。

なのでScreenのPreparationで値を設定しておきましょう。

StartDateTimeは実行日時、EndDateTimeはその1日後です。時間を+9しているのはタイムゾーンの補正ですね。Personal Environmentなので。

動作確認

スマートフォンでOutSystems Nowを開いて、テストアプリケーションにつなぎましょう。

ボタンを押して登録が成功したところ。

許可がいりますと言われたら設定画面で許可しましょう。

カレンダーのところです。

今回初めて開いたiOSのカレンダー。

一応ちゃんと登録できています。

気になるところ

まずは、登録しかできないところが気になりますね。

それからみんながOSネイティブなカレンダー使っているとは限らない。

処理的には、初期表示時点の値で登録してしまうところがもっともに気になります。

初期表示時点で下記関数が呼ばれ、ボタンクリックのリスナーとして関数を登録します。

この関数がクロージャを使って最初に表示したときの変数でイベント登録に行くためこうなるみたいです。

function OutSystemsNative_PrepareCalendar(buttonId, startDate, endDate, title, location, notes){
    var osNowCalendarEventButton = $('#' + buttonId );
    osNowCalendarEventButton.off('click.OSNowNativeAddCalendarEvent');
    osNowCalendarEventButton.on('click.OSNowNativeAddCalendarEvent', function() {
      // create an event silently (on Android &amp;amp;lt; 4 an interactive dialog is shown)
     OutSystemsNative_AddCalendarEvent(title,location,notes,startDate,endDate); 
     });
}

これも部品としては使いにくい……。Cloneして若干JavaScript書き換えればもう少し使いやすくなりますが。

Cordovaのページを見ると削除やリストの操作もあるのでついでにその機能も追加してもいいかもしれません。

今のままだと業務アプリで登録されたイベントを自分のスマートフォンにも登録しておこう、といった用途にしか使えない。