INNOBASE技術ブログ

技術的なことエンジニア的なこと制作的なこと全般

cordovaで携帯の電話機能とメーラーを呼び出す

まずは、必要となるプラグインを追加します。

cordova plugin add org.apache.cordova.inappbrowser

cordovaのプラグインを追加した後、対応プラットフォームを追加し直さないと、
プラグインが効かないので、気をつけてください。

cordova platform remove ios
cordova platform add ios

そして、電話機能とメーラーの呼び出しをAngular Wayで書くと

・ディレクティブ

angular.module('starter.directives.common', [])

    // 電話発信
    .directive('tel', ['callService', function(callService) {
        return {
            scope: {
                number: '=tel'
            },
            link: function(scope, element, attrs) {
                element.on('click', function(event) {
                    event.preventDefault();
                    callService.dial(scope.number);
                });
            }
        };
    }])

    // メール送信
    .directive('mailto', ['mailService', function(mailService) {
        return {
            scope: {
                mail: '=mailto'
            },
            link: function(scope, element, attrs) {
                element.on('click', function(event) {
                    event.preventDefault();
                    mailService.send(scope.mail);
                });
            }
        };
    }]);

・サービス

angular.module('starter.services.common', [])

    // 電話発信
    .factory('mailService', ['$window', function($window) {

            function send(mail) {
                $window.location.href = "mailto:" + mail;
            }

            return {
                send: send
            };
        }])

    // メール送信
    .factory('callService', ['$window', function($window) {
            function dial(number) {
                $window.open('tel:' + number, '_system');
            }

            return {
                dial: dial
            };
        }])

・画面上

<input type="button" value="call" tel="01234567890">
<input type="button" value="send mail" mailto="abc@gmail.com">

以上、プラグインのおかげで、割と簡単に実現できました。