Shoeisha Technology Media

CodeZine(コードジン)

記事種別から探す

カレンダーの予定を管理するプラグインを使う

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

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

 今回はスマートフォン内のカレンダーにアクセスするためのプラグインを紹介します。カレンダーやイベントをスマホに登録すると、アラームなどで通知をしたり、クラウドを通じて共有したりすることができます。例えば、予約システムを作る場合、店舗側に予定を通知すると共に、予約者自身の予定も作成することができます。

目次

対象読者

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

カレンダーにアクセスするためのプラグイン

 スマホのカレンダーはiOSであればiCloudを通じてiPhoneやiPad、Macなどと簡単に共有することができ、また、Androidの場合(iOSでも)はGoogleアカウントを通じて共有できます。今回紹介するカレンダープラグインはこのスマホのカレンダー機能を使うためのプラグインです。スマホ側で設定をすればアプリ側で特別な設定を行わずにこれらのカレンダーにアクセスすることができるので、とても簡単に利用が可能です。

インストール

 インストールするプラグインは、「cordova-plugin-calendar」です。インストールはリスト1のように行います。

リスト1 プラグインのインストール
$cordova plugin add cordova-plugin-calendar
$cordova plugin add cordova-plugin-calendar --variable CALENDAR_USAGE_DESCRIPTION="カレンダーを利用します"

 プラグインをインストールするとリスト2のオブジェクトが作成されます。カレンダープラグインのAPIはすべてこのオブジェクトを通じてアクセスします。

リスト2 作成されるオブジェクト
window.plugins.calendar

 なお、今回のプラグインもAndroidとiOSで多少の違いがあるため、双方のプラットフォームに対応するアプリを作成するのであれば、第4回でも解説したcordova-plugin-deviceプラグインも導入することをおすすめします。

プラグインの概要

 このプラグインでは以下の機能があります。

  • カレンダーアプリを起動する
  • カレンダーを作成/削除する
  • カレンダーにイベントを追加/変更(iOSのみ)/削除する

カレンダーアプリを起動する

 スマホにあらかじめインストールされているカレンダーアプリを起動する方法です。

 Androidの場合には、端末によってインストールされているカレンダーアプリが違うので、起動するアプリも異なり、複数インストールされている場合は利用者が選択することが可能です。図1はサンプルアプリから実際にカレンダーアプリをiOSとAndroidで起動したときの実行例です。

図1 サンプルアプリからのカレンダー起動
図1 サンプルアプリからのカレンダー起動

 iOSの場合は、インストール時に指定したCALENDAR_USAGE_DESCRIPTION変数でカレンダーへのアクセス許可ダイアログの文言を指定でき、図2のように表示されます。

図2 利用許諾ダイアログのキャプチャ
図2 利用許諾ダイアログ

 カレンダーアプリを起動するには、リスト3に示すopenCalendarメソッドを利用します。表1で示す引数が指定できます。

リスト3 openCalendarメソッド
openCalendar(date,successCallback,errorCallback)
表1 openCalendarメソッドの引数
変数名 説明
date Date 日付を指定する。指定しない場合には、現在時間が設定される (省略可)
successCallback Function カレンダーアプリが呼ばれた時のコールバック関数(省略可)
errorCallback Function エラーが発生したときのコールバック関数(省略可)

 リスト4はサンプルアプリでカレンダーアプリを呼び出す場合のサンプルコードです。

リスト4 カレンダーアプリの起動コード(js/controllers/CalendarUIController.jsの抜粋)
// $scope.date = new Date();
window.plugins.calendar.openCalendar($scope.date,
    function(msg){
        console.log("OK:" + msg);
    },function(msg){
        console.log("NG:" + msg);
    }
);

 ただしiOSの場合、成功しても、失敗してもコールバック関数は呼ばれないようです。


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

著者プロフィール

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

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

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

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

バックナンバー

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

もっと読む

おすすめ記事

All contents copyright © 2006-2017 Shoeisha Co., Ltd. All rights reserved. ver.1.5