SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

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

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

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


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

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

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

対象読者

  • スマホアプリに挑戦したいと思っている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の場合、成功しても、失敗してもコールバック関数は呼ばれないようです。

会員登録無料すると、続きをお読みいただけます

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

次のページ
カレンダーの取得・追加・削除

この記事は参考になりましたか?

  • このエントリーをはてなブックマークに追加
Apache Cordovaで本格スマホアプリに挑戦しよう連載記事一覧

もっと読む

この記事の著者

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

WINGSプロジェクトについて>有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛...

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

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

静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for Visual Studio and Development Technologies。執筆コミュニティ「WINGSプロジェクト」代表。主な著書に「独習シリーズ(Java・C#・Python・PHP・Ruby・JSP&サーブレットなど)」「速習シリーズ(ASP.NET Core・Vue.js・React・TypeScript・ECMAScript、Laravelなど)」「改訂3版JavaScript本格入門」「これからはじめるReact実践入門」「はじめてのAndroidアプリ開発 Kotlin編 」他、著書多数

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/9886 2017/01/24 19:32

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング