カテゴリーアーカイブ JavaScript

村上 著者:村上

【Cordova】FCMによるプッシュ通知のアイコンが白い四角になるときの対処法

調べていたのは別の症状についてだったのですが、これも有益そうだったので、備忘録としてまとめ。
Cordovaで開発中のアプリに、FCM(Firebase Cloud Messaging)を利用したプッシュ通知機能を追加したのですが、Android端末に送られてきた通知のアイコンに指定した画像が反映されず、単なる四角形になってしまったときの対処法について。

参考にさせていただいたサイトはこちらから。

IonicでFCMによるpush通知を行う – Qiita
https://qiita.com/saihoooooooo/items/34712738d5cc6f03cdf4

また、使用しているプラグインはこちらです。

GitHub – fechanique/cordova-plugin-fcm: Google FCM Push Notifications Cordova Plugin
https://github.com/fechanique/cordova-plugin-fcm

 

で、対処法ですが、そもそも原因はアイコン画像が指定されていないか、指定方法が間違っているのが原因です。
そのため、下記の場所にそれぞれアイコンを保存します。

  • platforms/android/res/mipmap-ldpi
  • platforms/android/res/mipmap-mhdpi
  • platforms/android/res/mipmap-hdpi
  • platforms/android/res/mipmap-xxhdpi
  • platforms/android/res/mipmap-xxhdpi
  • platforms/android/res/mipmap-xxxhdpi

そして、config.xml で、下記のようにアイコンの指定を行います。

<platform name="android">
    <resource-file src="resources/android/fcm_push_icon/drawable-ldpi-icon.png" target="res/mipmap-ldpi/fcm_push_icon.png" />
    <resource-file src="resources/android/fcm_push_icon/drawable-mdpi-icon.png" target="res/mipmap-mdpi/fcm_push_icon.png" />
    <resource-file src="resources/android/fcm_push_icon/drawable-hdpi-icon.png" target="res/mipmap-hdpi/fcm_push_icon.png" />
    <resource-file src="resources/android/fcm_push_icon/drawable-xhdpi-icon.png" target="res/mipmap-xhdpi/fcm_push_icon.png" />
    <resource-file src="resources/android/fcm_push_icon/drawable-xxhdpi-icon.png" target="res/mipmap-xxhdpi/fcm_push_icon.png" />
    <resource-file src="resources/android/fcm_push_icon/drawable-xxxhdpi-icon.png" target="res/mipmap-xxxhdpi/fcm_push_icon.png" />
</platform>

なお、厳密にこのとおりでなくても良いようなので、ファイル名などは適宜変更してください。

あとは、送信時のJSONデータに、アイコンと色を指定すればOKです。

{
  "to": [デバイストークン],
  "priority": "high",
  "notification": {
    "icon"  : [アイコン画像],
    "color" : [色コード],
    "title" : [アプリ名],
    "body"  : [メッセージ],
    "sound" : "default",
  }
}

…が、私の環境ではまだ直っていないので、きっとどこかにミスがあります…。
恐らくですが、アイコン画像の場所とかが怪しいかな。

 

以上、Androidでプッシュ通知にアイコン画像が反映されていない時の対処法でした。
意外とこういう小さな箇所って、だからこそ目についたりするので、気を付けたいですね。

  • この記事いいね! (0)
著者:杉浦

webページ評価ツールLighthouse

 Lighthouse – Chrome ウェブストア
 Lighthouse によるウェブアプリの監査 | Tools for Web Developers
| Google Developers

 Lighthouseはwebページの評価を行ってくれるツールです。お手軽な使い方は上記リンクのウェブストアからChrome拡張機能としてのLighthouseを導入し使用することです。オプションもコマンドも必要なく、ただ起動するだけで監査を行い、結果を出力します。 Lighthouseの評価は下図の様にPerformance,ProgressiveWebApp,Accessibility,Best Practices,SEOに分かれています。

 それぞれ、Performanceはおおよそ速度、データ量関連に問題が無いか、ProgressiveWebAppはネイティブアプリのようにふるまえるか、Accessibilityはわかりやすさ、Best Practicesは良いとされるやり方をしているか、SEOは検索エンジン最適化がされているか、です。画像の更に下の方には細分化された指摘がいくつもあります。
 Lighthauseの特徴は、googleが奨励しているPWAとしての評価がgoogle自身の規定でできる、という点です。またSEOは大概眉唾物ですが検索エンジン大手のgoogleが提供するツールが評価するSEOですから多少は当てになるでしょう。
 これが高得点ならばよいwebページというわけはないです。PWAは特に顕著でアプリである必要のないページは多々あります。基本的にぱっと見の第一印象がどうか、という点から評価がなされます。ただ高得点のページならば低得点のページよりも快適に使用しやすいのではないでしょうか。
 また、Lighthouseの指摘により今まで知らなかったより良いやり方を知ることもできます。

  • この記事いいね! (0)
著者:杉浦

letとvar

 let – JavaScript | MDN
 letはECMAScript2015で標準化された記法のひとつです。上のリンク先には下の様に記述されています。

let 文はブロックスコープの局所変数を宣言します。任意で値を代入して初期化できます

 具体的にどういうことかというと下図の様な感じです。varはブロックスコープ内部でvarを付けて再宣言しても別の変数として扱ってくれません。一方でletは再宣言をすれば別の変数と扱ってくれます。

 もちろん、宣言なしなら同じ変数として扱ってくれます。

 特に役に立つのは次の様な実行タイミング毎の処理です。
参考:varよりすごいletとconst。(現代的JavaScriptおれおれアドベントカレンダー2017 – 02日目) | Ginpen.com
 

 javascriptのsetTimeout()は、コールバックの実行を待機して、タイミングが合ったらコールバックを実行、それ以外の部分は待機関係なしに続行、という処理を行います。setTimeoutの待機後のコールバックで使用される変数の値が待機中に変更されたら、待機を始めた時の値ではなく、その変更された値を参照して実行を行います。varの場合、スコープがループ全体にかかっているため、変数iはすべて同じ変数です。そのため、ループ終了後の値である5のみが表示されました。一方でletはループ毎に異なる変数として扱われます。そのため0,1,2,3,4と順々に表示されました。i++は次のループのlet iに渡す値の決定に関わるのみで、今のループのiを変更していない感じ

  • この記事いいね! (0)
著者:杉浦

javascriptのコンパイラであるbabelの紹介

Babel · The compiler for next generation JavaScript
 javascriptはES6という便利な記法があります。これから先も少しずつ記法が増え、javascriptプログラムをより楽に正確に書くための言語も増えていくでしょう。しかしながら、ブラウザにこれら全てを生のまま対応しろというのは酷な話です。javascriptのみでも未対応の関数、記法は少なからずあります。babelは近年の多様な言語を多くのブラウザで読めるようにコンパイルしてくれるプログラムです。
 具体的に何ができるかというと

a => b
let d = `d`;
const e = `e`;
`abc${d}
${e}
`
class Point {
    constructor(x, y) {
        this.x = x;
        this.y = y;
    }
    distance() {
        return Math.sqrt(this.x * this.x + this.y * this.y);
    }
}
new Point(1, 2)

こんなのが

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

(function (a) {
    return b;
});
var d = "d";
var e = "e";
"abc" + d + "\n" + e + "\n";

var Point = function () {
    function Point(x, y) {
        _classCallCheck(this, Point);

        this.x = x;
        this.y = y;
    }

    _createClass(Point, [{
        key: "distance",
        value: function distance() {
            return Math.sqrt(this.x * this.x + this.y * this.y);
        }
    }]);

    return Point;
}();
new Point(1, 2);

 こんなのになります。後者の文量は前者の5倍以上です。classは元々のjavascriptになかっただけあってとても巨大になっています。この記述の変換によって、便利な記法で書いたjavascript用プログラムがIEでも難なく動きます。Try it outのでブラウザ上のままお試しが出来ます。
 babelはnpmで導入できます。installはプロジェクトのルートをcdにして次のコマンドを実行。

npm init
npm install --save-dev @babel/core
npm install --save-dev @babel/preset-env
npm install --save-dev babel-cli
npm install --save-dev babel-core
npm install --save-dev babel-preset-minify

 同じくプロジェクトのルートに.babelrcを置いて、以下の記述を書き込んで簡単な初期設定が完了。

{
"presets": [
  ["env",{
    "targets": {
      "browsers": ["last 2 versions", "ie 11"]
    },
    "modules": false,
    "useBuiltIns": true
  }],
  ["minify",{
    "keepFnName": false,
    "keepClassName": false
  }]
]}

 minifyの設定があるように圧縮もできます。他にも設定可能な項目は多々あります。
使いかたは次の通り、次のコマンドでsrc以下がdist以下にコンパイルされます。

babel src -d dist

 一度準備さえすればそこからは楽の積み重ねができます。

  • この記事いいね! (0)
村上 著者:村上

【Cordova】QRコードリーダーを実装するプラグイン「phonegap-plugin-barcodescanner」

今回はCordovaで開発しているアプリに、QRコードリーダーの機能を実装する方法について。
コードがかなり分かりやすかったのでおすすめのプラグインです。
使用したプラグインは「phonegap-plugin-barcodescanner」。
phonegap という名前が付いていますが、Cordovaでも問題なく使えます。

GitHubはこちらから。

GitHub – phonegap/phonegap-plugin-barcodescanner: cross-platform BarcodeScanner for Cordova / PhoneGap
https://github.com/phonegap/phonegap-plugin-barcodescanner

 

早速実装方法ですが、まず下記のコマンドでプラグインを追加します。

cordova plugin add phonegap-plugin-barcodescanner

プラグインの追加が終ったら、config.xml を確認します。
もし、下記の1行が追加されていなかったら追加してください。

<preference name="android-build-tool" value="gradle" />

また、iOSの場合は、info.plist に 「Privacy – Camera Usage Description」の項目を追加しないと、アプリからカメラが起動できないので、こちらも追加します。
設定はこのくらいです。

あとは、下記のコードを記述するだけです。

cordova.plugins.barcodeScanner.scan(
    function (result) {
        // QRコードの読み込み成功
        // 成功時の処理
        // Result: result.text
        // Format: result.format
        // Cancelled: result.cancelled
    }, 
    function (error) {
        // 読み込み失敗
        // 失敗時の処理
    }
);

上記のコードが実行されると、自動的にカメラを使用するかを尋ねるダイアログが表示され、許可を選択すると、画面内に四角形が表示されているQRコードリーダーが起動します。
で、カメラを適当に作成したQRコードにかざしたところ、無事コード内の情報を取得できました。

ちなみに、試しに作ったQRコードは、本記事のアイキャッチ画像でも使用しています。
なお、取得できるのはこのブログのURL https://cpoint-lab.co.jp/です。
このURLは、上記のコードでは、result.text で取得できます。
適当なコードが見つからない場合は、是非ご利用ください。

 

以上、CordovaアプリでQRコードリーダー機能を実装する方法でした。
最初はカメラを扱うということで、難しいのでは…と思っていましたが、実装が楽なプラグインのおかげでかなり簡単でした!
もし似たようなことを行いたいとお考えでしたら、是非ご参考にしてください。

  • この記事いいね! (0)
村上 著者:村上

【Cordova】iBeaconを扱うための「cordova-plugin-ibeacon」が動作しない時の対処法

先日投稿した、「【Cordova】アプリでiBeaconを扱うための「cordova-plugin-ibeacon」が動作しない【未解決】」という記事の、解決策が見つかりました…!
解決策というより、原因はコードに一部抜けがあったせいなんですけどね!

 

早速ですが、正常に動作したコードはこちら!

    // 位置情報を取得
    cordova.plugins.locationManager.requestWhenInUseAuthorization();
    cordova.plugins.notification.local.registerPermission(function (granted) {
        // console.log('Permission has been granted: ' + granted);
    });

    // delegateの作成と設定
    var delegate = new cordova.plugins.locationManager.Delegate();
    delegate.didDetermineStateForRegion = function(pluginResult) {
        console.log('didDetermineStateForRegion', pluginResult);
    }
    delegate.didStartMonitoringForRegion = function(pluginResult) {
        console.log('didDetermineStateForRegion', pluginResult);
    }
    
    // ビーコンを検知している間呼ばれる
    delegate.didRangeBeaconsInRegion = function(pluginResult) {
        document.getElementById("rangeDiv").value = JSON.stringify(pluginResult);
    }
    
    // ビーコンをキャッチ
    delegate.didEnterRegion = function(pluginResult) {
    }

    // ビーコンの範囲外に移動
    delegate.didExitRegion = function(pluginResult) {
    }

    // delegate の設定
    cordova.plugins.locationManager.setDelegate(delegate);

    // 監視するビーコンの設定
    var uuid = '00000000-1d4e-1001-b000-001c4dbec041';
    var identifier = 'ibeacon';
    var major = 1;
    var minor = 3;
    var beaconRegion = new cordova.plugins.locationManager.BeaconRegion(identifier, uuid, major, minor);
    beaconRegion.notifyEntryStateOnDisplay = true;

    // 監視の開始
    cordova.plugins.locationManager.startRangingBeaconsInRegion(beaconRegion)
        .fail(function(e) { console.log(e); })
        .done();
    cordova.plugins.locationManager.startMonitoringForRegion(beaconRegion)
        .fail(function(e) { console.log(e); })
        .done();

変更点は、49行目の下記の記述を追加した点です。

cordova.plugins.locationManager.startRangingBeaconsInRegion(beaconRegion)
    .fail(function(e) { console.log(e); })
    .done();

様々なサンプルコードを見比べたところ、ここの記述が不足していました。
で、コードを追加したところ、問題なくビーコンの信号を取得できました!
というわけで、ただの私のポカミスだったわけです。
…凡ミスで恥ずかしい限りです。
今後は気を付けなければいけませんね。

 

ということで、以上、iBeaconを扱うための「cordova-plugin-ibeacon」が動作しない時の対処法でした。
可能であれば、きちんと動作するサンプルコードを改変してアプリ開発を行った方が安全かもしれません。

  • この記事いいね! (0)
村上 著者:村上

【Cordova】JavaScript上のConsole.log()をXcodeのデバッグエリアに表示する方法

以前からCorodvaアプリを開発していましたが、最近になって便利なプラグインを発見したのでご紹介。
というか、何故これを開発初期に入れていなかったのか…ちょっと後悔しています。

 

おすすめしたいプラグインは「cordova-plugin-console」です。
タイトルにもあるように、こちらのプラグインを導入すると、JavaScript上で記述した console.log() などの結果を、Xcodeのデバッグエリアに表示させることができます。
なお、参考にさせていただいたサイトはこちらから。

Cordova アプリの console.log() を XCode に出力する cordova-plugin-console – Corredor
http://neos21.hatenablog.com/entry/2017/07/10/080000

そして、GitHubのリンクはこちらから。

GitHub – apache/cordova-plugin-console: Apache Cordova Plugin console
https://github.com/apache/cordova-plugin-console

導入方法は、下記のコマンドを実行するだけ。

cordova plugin add cordova-plugin-console

あとは、devicereadyイベントの後に console.log() を記述すれば、それがデバッグエリアに表示されます!
また、試してはいませんが、Android Studio でも同様に使えるそうです。

 

以上、Console.log() をXcodeのデバッグエリアに表示する方法でした。
プラグインの導入だけなので、かなり簡単に行えます!

今まで alert() をメインで使ってきて、そこまで不便は感じていなかったのですが…やはりできるとかなり楽ですね。
Cordovaアプリの開発者はぜひインストールをご検討ください。

  • この記事いいね! (0)
村上 著者:村上

【Cordova】アプリでiBeaconを扱うための「cordova-plugin-ibeacon」が動作しない【未解決】

今回は、「cordova-plugin-ibeacon」という、CordovaアプリでiBeaconを取り扱うためのプラグインについてです。
Android端末では思い通りに動作したのですが、何故かiOSでは、ビーコンの信号をキャッチできず…。
色々サイトを見て、設定等を変更しているのですが、残念ながら、まだ未解決です。

 

使用したプラグインはこちらから確認できます。

GitHub – petermetz/cordova-plugin-ibeacon: An iBeacon plugin for Phonegap / Cordova 3.x and upwards. Supports both iOS and Android (contributions are welcome)
https://github.com/petermetz/cordova-plugin-ibeacon

で、実際に記述したコードはこちら。

var uuid = '[使用するビーコンのUUIDを指定]';
var identifier = 'ibeacon';
var major = 0;
var minor = 0;
var beaconRegion = null;
// 監視するビーコンの設定
beaconRegion = new cordova.plugins.locationManager.BeaconRegion(identifier, uuid, major, minor);
    
// delegateの作成と設定
var delegate = new cordova.plugins.locationManager.Delegate();
delegate.didStartMonitoringForRegion = function(pluginResult) {
    // ビーコンの観測の開始に成功
};

delegate.didDetermineStateForRegion = function(pluginResult) {
    // 領域への入退場のステータス変化を検知
};

delegate.didEnterRegion = function(pluginResult) {
    // ビーコンをキャッチした時に呼ばれる
    cordova.plugins.notification.local.schedule({
        title: "iBeacon",
        text: "didEnterRegion",
        foreground: true
    });
};

delegate.didRangeBeaconsInRegion = function(pluginResult) {
    // ビーコンを検知している間呼ばれる
};

// delegate の設定
cordova.plugins.locationManager.setDelegate(delegate);

// パーミッションチェック
cordova.plugins.locationManager.requestAlwaysAuthorization();
cordova.plugins.notification.local.requestPermission();
cordova.plugins.backgroundMode.enable();

// 監視の開始
cordova.plugins.locationManager.startMonitoringForRegion(beaconRegion)
    .fail(function(e) { })
    .done();
}

19行目で、ビーコンが発信している信号をキャッチしたら、通知を飛ばす、という処理を行いたかったのですが、これが動作せず…。
もしや、通知の設定が間違っているのか?と思い、別の箇所で動作確認をしたところ、問題なく動作したので、通知の問題ではなさそう。

また、11行目や15行目の関数内でも、試しに通知の処理を記述して見ましたが、こちらでも問題なく通知がされたので、プラグインにも問題はないようです。
ただ、15行目のビーコンの通知領域への入退場ステータス変化を検知した時に実行される関数では、引数 pluginResult.state が「CLRegionStateOutside(通知範囲から退場)」しか取れていないようだったのが気にかかっています。
どうやら範囲内に入った検知が行えていないようで…でも、その対処法がわからず、悩み続けております。

 

GitHubに、おそらく同じことでお悩みの方の投稿があったので見てはいるのですが、それでも解決できず。
ちなみに投稿はこちら。

IOS Plugin not working…・Issue #167・petermetz/cordova-plugin-ibeacon・Github
https://github.com/petermetz/cordova-plugin-ibeacon/issues/167

こちらの投稿では、locationManager のパーミッションのリクエストをしているかや、XCodeでの設定についての確認があり、それらに対応したのですが、それでも動かず…。
…根が深そうな気がしますね。
一度、プラットフォームの削除と再インストールを試してみようかな?

 

なお、サンプルコードはきちんと動作したので、私のコードもしくは設定が間違っているのは間違いなさそう。
原因がわかったら、また改めてご紹介したいと思います!
それまでしばしお待ちを!

  • この記事いいね! (0)
村上 著者:村上

【JavaScript】GoogleMapのルート検索機能で経由地追加する方法

タイトル通り、GoogleMapのナビゲーション機能で、経由地を追加する方法です。
HTMLに直接マップを埋め込み、検索する方法と、Maps URLを利用する方法がありますが、今回は前者についてまとめます。

 

まず、GoogleMapを使用する事前準備として、APIキーを取得します。
下記のページから取得できますが、クレジットカード情報を入力する必要がありますので、ご用意ください。

Google Maps Platform
https://cloud.google.com/maps-platform/?hl=ja

また、無料トライアル期間がありますが、それを過ぎると有料になりますので、その点もご承知おきください。

なお、操作をしないと有料サービスには移行しませんので、ご安心ください。

無事APIキーが取得出来たら、あとは下記コードをコピー&ペーストするだけ。
参考にさせていただいたサイトがあったのですが、どのサイトなのかメモをし忘れてしまいました…。

まず、headタグ内で、下記を指定します

<script src="http://maps.google.com/maps?file=api&v=2&key=[APIキー]&sensor=false" type="text/javascript" charset="utf-8"></script>

body は下記のように記述しました

<body onload="initialize()" onunload="GUnload()">
    <form>
        <input type="text" size="20" id="from" value="出発地点" />
        --><input type="text" size="20" id="step1" value="経由地1" />
        --><input type="text" size="20" id="step2" value="経由地2" />
        --><input type="text" size="20" id="to" value="到着地点" />
        <input type="button" id="btn1" value="ルート案内" onclick="dispRoute()" />
    </form>
    <div id="map_canvas" style="width: 100%; height: 350px"></div>
    <div id="route" style="width: 100%; height: 200px;overflow: scroll"></div>
</body>

JavaScrip は以下のとおりです。

var map;
var directions;

function initialize() {
    if (GBrowserIsCompatible()) {
        map = new GMap2(document.getElementById("map_canvas"));
        map.setCenter(new GLatLng(35.681379,139.765577), 13);
        directions = new GDirections(map, document.getElementById('route'));
    }
}
function dispRoute() {
    var from = document.getElementById("from").value; // 出発先
    var step1 = document.getElementById("step1").value; // 経由地1
    var step2 = document.getElementById("step2").value; // 経由地2
    var to = document.getElementById("to").value;     // 目的地

    directions.clear();

    var pointArray = [from, step1, step2, to];
    directions.loadFromWaypoints(pointArray, {locale: 'ja_JP'});
}

bodyが読み込まれたタイミングで initialize() を実行してマップを表示し、ルート検索ボタンをクリックすると、dispRoute()が実行されます。
なお、今回はテストとして、経由地を2か所指定してあります。
で、上記を実行したところ、当然ではありますが、2点の経由地を通るルート検索を無事に行うことができました。

 

以上、JavaScriptを使ってGoogleMapで経由地ありのルート検索を行う方法でした。
機能としては、やはりGoogleMapはとても優秀ですね。
デザインを凝るならMapboxがおすすめですが、ナビゲーション機能とか、あとは日本語対応している点では、GoogleMapが優れていると思います。
ナビゲーション機能重視なら、GoogleMapをおすすめします。
開発したい機能に応じて使い分けてください。

  • この記事いいね! (0)
村上 著者:村上

【JavaScript】Mapboxの「There is already a source with this ID」エラーの対処法

先日投稿したMapboxのエラーについて、対処法が分かったのでご紹介!
というか、まさにほぼ同じことにお悩みの方がいらっしゃり、そこで対処法が紹介されていたので、それをコピー&ペーストしたら、動きました。
検索が下手だったようです…反省。

なお、以前の記事はこちらから。

【JavaScript】Mapboxで「There is already a source with this ID」エラーが発生【未解決】
https://cpoint-lab.co.jp/article/201808/【javascript】mapboxで「there-is-already-a-source-with-this-id」エラーが発生【未解決】

ざっくりと状況を説明すると、Mapboxで追加できるナビゲーション機能を追加してから一旦削除し、もう一度追加しようとすると、「There is already a source with this ID」という IDの重複エラーが発生し、ナビゲーション機能を追加できない状態でした。

 

さて解決策ですが、ナビ機能を削除する、removeControl() を実行したタイミングで下記の項目も削除するだけでした。

map.removeLayer('directions-route-line');
map.removeLayer('directions-route-line-alt');
map.removeLayer('directions-hover-point-casing');
map.removeLayer('directions-hover-point');
map.removeLayer('directions-waypoint-point-casing');
map.removeLayer('directions-waypoint-point');
map.removeLayer('directions-origin-point');
map.removeLayer('directions-origin-label');
map.removeLayer('directions-destination-point');
map.removeLayer('directions-destination-label');
if (map.getSource('directions')) map.removeSource('directions');

なお、この解決策が紹介されていた投稿はこちらから。

Error when adding controls dynamically #5089・mapbox/mapbox-gl-js・GitHub
https://github.com/mapbox/mapbox-gl-js/issues/5089

実際に、ソースコードに追加するとこのような感じ。

var directions;
function navi() {
    if(['条件:ナビ機能が追加済みだったら']) {
        map.removeControl(directions);

        /* ここから */
        map.removeLayer('directions-route-line');
        map.removeLayer('directions-route-line-alt');
        map.removeLayer('directions-hover-point-casing');
        map.removeLayer('directions-hover-point');
        map.removeLayer('directions-waypoint-point-casing');
        map.removeLayer('directions-waypoint-point');
        map.removeLayer('directions-origin-point');
        map.removeLayer('directions-origin-label');
        map.removeLayer('directions-destination-point');
        map.removeLayer('directions-destination-label');
        if (map.getSource('directions')) map.removeSource('directions');
        /* ここまで */

        directions = null;
    } else {
        directions = new MapboxDirections({
                        accessToken: mapboxgl.accessToken
                    });
        map.addControl(directions, 'top-left');
    }
}

どれか一つがなくてもダメなようで、試しに2行ほど削除してみたのですが、当然ながらその行でエラーが発生し、実行できませんでした。

作業は以上で完了です。
画面をリロードして動作確認をしたところ、問題なく動作しました!

 

以上、Mapboxのエラーの対処法でした。
前回の記事でも書いたのですが、Mapboxのナビ機能ってそこそこサイズが大きいので、特にスマートフォンでは表示/非表示を行いたかったんですよね。
最初はCSSを操作して、ナビゲーションウィンドウを消すことも考えたのですが、ウィンドウが見えないだけでナビ機能は有効だったので、どうしても機能自体のON/OFFを切り替えたかったんです。

あとは…ラベルとか、ナビの道順のところを日本語化できないかな…と考えています。
こちらもとっかかりが見つかったら、改めてご紹介したいと思います。

  • この記事いいね! (0)