Titanium Mobileで作る! iPhone/Androidアプリ

第19回Android のカレンダーを操作してみる

Android版でしか利用できない機能として、端末内蔵のカレンダーにアクセスする機能がTitaniumには実装されています。AndroidのカレンダーはGoogleアカウントのカレンダーと連動しており、Androidのカレンダーに変更を加えるとWeb上のGoogleカレンダーも同時に変更されるようになっています。GoogleカレンダーもAPIを持っていますが、Titaniumでは認証部分をAndroidに任せることでカレンダーへの操作を簡単に実装できます。

カレンダーの取得

Googleカレンダーには、一人のアカウントで複数のカレンダーが含まれています。⁠会社用⁠とか⁠プライベート⁠といった分け方もあり得ますし、第三者が作成したカレンダーをインポートしておくことで、⁠日本の祝日・休日⁠というカレンダーを持っている場合もあります。そこで、まずは自分のアカウントに存在するカレンダーを取得し、そこに指定されているイベントの一覧を表示してみます。

var win = Ti.UI.currentWindow;
var table = Ti.UI.createTableView();
var data = [];

var calendars = Ti.Android.Calendar.allCalendars;

for(var i=0;i<calendars.length;i++){
    var calendar = calendars[i];
    var row = Ti.UI.createTableViewRow({
         height: '60dp',
         'font-size': '20dp',
         color: 'black'
    });
    row.title = calendar.name;
    row.calendarObj = calendar; 
    data.push(row);
    
    row.addEventListener(
        'click',
        function(){
            var newWin = Ti.UI.createWindow({
                url: 'event_list.js',
                calendarObj: this.calendarObj
            });
            Ti.UI.currentTab.open(newWin);
        }
    );
}

table.setData(data);
win.add(table);

これだけでAndroid端末と紐づいてるGoogleアカウントのカレンダー名の一覧が表示できます。Ti.Android.Calendar.allCalendarsでカレンダーをすべて取得しているほかは、特に変わったコードはありません。取得できるカレンダーオブジェクトについては、name以外のパラメタも取得できますのでAPIリファレンスを参照してください。そしてカレンダーの中に含まれるイベントをすべて表示する部分が、rowオブジェクトのクリックイベントのイベントリスナに登録されている無名関数です。Windowとして開かれるevent_list.jsは次のようになっています。

var win = Ti.UI.currentWindow;
win.setBackgroundColor('#000');
var table = Ti.UI.createTableView();
var data = [];

var calendar = win.calendarObj;

var YEAR = 2011;

var events = calendar.getEventsInYear(YEAR);
for(var i=0;i<events.length;i++){
    var eventObj = events[i];
    var row = Ti.UI.createTableViewRow({
         height: '60dp',
         'font-size': '20dp',
         backgroundColor: 'white',
         color: 'black'
    });
    row.title = eventObj.title;
    
    row.eventObj = eventObj;
    row.addEventListener(
        'click',
        function(){
            var newWin = Ti.UI.createWindow({
                url: 'event_detail.js',
                eventObj: this.eventObj
            });
            Ti.UI.currentTab.open(newWin);
        }
    );
    data.push(row);
}

table.setData(data);
win.add(table);

こちらのコードもカレンダーの表示と似ていますが、カレンダーの取得にかわってcalendar.getEventsInYearで年内のすべてのイベントを取得するようにしています。このメソッドで取得できるイベントオブジェクトには、イベントの開始時間、終了時間などが含まれており、この情報も新しくWindowを開いて表示するようにしています。

日本の休日,祝日カレンダを表示したところ
日本の休日,祝日カレンダを表示したところ

イベントの詳細を表示する部分は次のようになります。

var win = Ti.UI.currentWindow;
win.setBackgroundColor('#000');
var table = Ti.UI.createTableView();
var data = [];

var e = win.eventObj;

var details = [
    e.title,
    e.description,
    e.begin.toLocaleString(),
    e.end.toLocaleString()
];

for(var i=0;i<details.length;i++){
    var detail = details[i];
    var row = Ti.UI.createTableViewRow({
         height: '60dp',
         'font-size': '20dp',
         backgroundColor: 'white',
         color: 'black'
    });
    row.title = detail;

    data.push(row);
}

table.setData(data);
win.add(table);

アラームの有無などイベントに設定されている値は多岐に渡るのですが、今回はイベントのタイトル、概要、開始時間、終了時間のみを取得しています。取得部分はdetailsという配列を生成している部分になります。

国民の休日の詳細を表示したところ
国民の休日の詳細を表示したところ

イベントの追加

カレンダーを指定して、イベントを追加することもできます。

win.activity.onCreateOptionsMenu = function(e) {
    var menu = e.menu;
    var menuItem = menu.add({ title: "Add Event" });
    menuItem.addEventListener("click", function(e) {
        var now = new Date();
        var end = new Date(now.getTime() + 3600 * 1000);
        calendar.createEvent({
            title: 'test',
            description: 'test event',
            begin: now,
            end: end
        });
    });
};

イベント一覧を表示していたevent_list.jsの末尾にこのようなコードを加えます。これで、menuボタンを押すとAddEventというメニューが現れるので新たにイベントを生成することができます。入力欄の表示を省略していますので、testというイベントが現在時間を起点に作成されます。実機でテストしたあとは、GoogleカレンダーをWeb上で確認するとイベントが追加されていることがわかります。

Reminderの設定

イベントにはReminderを設定することができます。Reminderを設定しておくと指定時間にSMS、E-mail、Alertでイベントが近づいていることをユーザーにお知らせすることができます。

var eventObj = calendar.createEvent({
    title: title,
    description: description,
    begin: begin,
    end: end
});
eventObj.createReminder({
    minutes: 10,
    method: Ti.Android.Calendar.METHOD_EMAIL
});

作成したイベントオブジェクトからさらにcreateRemindeメソッドを呼ぶことでReminderがセットできます。

この例だと、10分前に、メールでイベントが通知されます。通知方法を設定するmethodパラメタに設定する値はTi.Android.Calendarオブジェクトの定数で定義されています。

まとめ

今回はAndroidのカレンダーに対する操作について解説しました。サンプルで扱ったコードはgithubにありますのであわせてご覧ください。Android特有の機能はほぼ解説し終わったので、次回以降はFacebookやYQLなどの外部サービス呼び出しなど、今までの記事で解説しきれなかった便利な機能について解説していきたいと考えています。

おすすめ記事

記事・ニュース一覧