Shoeisha Technology Media

CodeZine(コードジン)

特集ページ一覧

カレンダーを管理するプラグインを使って、予定の追加と削除を行う

Apache Cordovaで本格スマホアプリに挑戦しよう 第13回

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2017/02/13 14:00

 前回に引き続き今回も、スマートフォン内のカレンダーにアクセスするためのプラグインを紹介します。前回は、カレンダー自体の管理とそのカレンダーから予定を取得する方法を紹介しました。今回はカレンダーに予定を追加もしくは削除する方法を紹介します。

目次

対象読者

  • スマホアプリに挑戦したいと思っているWeb開発者
  • アプリ開発をもっと楽にしたいと思っている方
  • 業務スマホアプリを作る開発者

カレンダー内のイベントを管理する(1)

 前回に引き続き、図1のようなサンプルを通じて、イベントを追加・削除・変更する方法について紹介します。

図1 イベントの管理
図1 イベントの管理

カレンダーへのイベント登録

 カレンダーへイベントを作成する場合には表1のような4つのメソッドがあります。

表1 カレンダーにイベントを作成するメソッド
メソッド名 備考
createEvent(title, location, notes, startDate, endDate, successCallba ck, errorCallback) 非同期メソッドとしてイベントを登録
createEventWithOptions(title, location, notes, startDate, endDate, op tions, successCallback, errorCallback) 非同期メソッドとしてイベントを登録
createEventInteractively(title, location, notes, startDate, endDate, successCallback, errorCallback) 指定された値を元に外部アプリ(標準カレンダーアプリ)を起動
createEventInteractivelyWithOptions(title, location, notes, startDate , endDate, options, successCallback, errorCallback) 指定された値を元に外部アプリ(標準カレンダーアプリ)を起動

 引数は表2の通りで、基本的には、前回紹介したfindEventメソッドと同じです。createEvent/createEventInteractivelyメソッドには、それぞれ「WithOptions」が後ろに付くメソッドがあり、カレンダーの種類を指定したり、より詳細なイベント情報を指定したりできるようになっています。

表2 イベントを作成するメソッドの引数
プロパティ名 説明
title DOMString イベントのタイトルとして含まれる文字列
location DOMString 場所として含まれる文字列
notes DOMString メッセージ(メモ)として含まれる文字列
startDate Date イベントの開始日時
endDate Date イベントの終了日時
options Object カレンダー(calendarName)もしくはイベントのID(id)を指定する場合に 指定する
successCallback Function 取得できたときのコールバック関数
errorCallback Function 失敗したときのコールバック関数

 リスト1はイベントを登録するサンプルコードです。

リスト1 イベントの登録(js/controllers/EventController.jsの抜粋)
// (1) カレンダーを指定する
var opts = window.plugins.calendar.getCalendarOptions();
opts.calendarName = 'Codezine'; // iOSの場合
opts.calendarId   = '11';       // Androidの場合

// (2) イベントを登録
window.plugins.calendar.createEventWithOptions(
    $scope.model.title,  // タイトル
    $scope.model.location,  // 場所
    $scope.model.memo, // メモ
    $scope.model.startDate,  // イベント開始日時
    $scope.model.endDate,  // イベント終了日時
    opts,
    function(message){
        alert("OK :" + message);
    },
    function(message){
        alert("NG :" + message);
    }
);
//  (3) 値を設定した状態でスマホのイベント登録画面を表示する
window.plugins.calendar.createEventInteractivelyWithOptions(
    // : 省略
);

 (1)ではイベントを登録するカレンダーを指定します。AndroidとiOSで指定方法が異なります。Androidの場合、IDにはlistCalendarメソッドで取得した時のidを指定し、iOSではカレンダー名を指定します。従って、実際にはDeviceプラグインなどを使ってOSごとに処理を分ける必要があります。

 (2)のcreateEvent(WithOptions)は、指定された情報でイベントを登録しますが、(3)のようにcreateEventInteractively(WithOptions)を利用すれば、スマホの標準カレンダーアプリのUIを使って登録できます。

 (1)のようなオプションで指定できるプロパティについては、カレンダー以外にも表3の内容があります。これらの詳細な動作を知るにはAPIを調べるよりも、他のカレンダーアプリを使って、どのような設定項目があるのか、ということについて調べるとわかりやすいはずです。WithOptionsがつくメソッドで指定できるオプションのプロパティは以下の通りです。

表3 WithOptionsメソッドで設定できるオプション
プロパティ名 説明
firstReminderMinutes Number 最初のリマインダ(アラーム)の時間設定
secondReminderMinutes Number 2回目のリマインダ(アラーム)の時間設定
recurrence DOMString 繰り返しイベント(daily, weekly, monthly, yearlyのいずれか)
recurrenceEndTime Date 繰り返しを終了する日時
recurrenceInterval Number 繰り返す間隔。recurrence = 'daily'ならば 3を指定すると3日という意味に なる。
calendarName DOMString カレンダー名(iOSの場合)
calendarId DOMString カレンダーID(Androidの場合)
url DOMString URL(iOSの場合)

  • LINEで送る
  • このエントリーをはてなブックマークに追加

著者プロフィール

  • WINGSプロジェクト 小林 昌弘(コバヤシ マサヒロ)

    <WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。個人紹介主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしど...

  • 山田 祥寛(ヤマダ ヨシヒロ)

    静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for ASP/ASP.NET。執筆コミュニティ「WINGSプロジェクト」代表。 主な著書に「入門シリーズ(サーバサイドAjax/XMLD...

バックナンバー

連載:Apache Cordovaで本格スマホアプリに挑戦しよう

もっと読む

All contents copyright © 2005-2018 Shoeisha Co., Ltd. All rights reserved. ver.1.5