今日は、Cordovaアプリでトーストを表示するプラグインについてご紹介。
使用したのは「Toast-PhoneGap-Plugin」というプラグインで、コードも単純で分かりやすかったです。
GitHubのページは下記からご確認頂けます。
EddyVerbruggen/Toast-PhoneGap-Plugin: A Toast popup plugin for your fancy Cordova app
https://github.com/EddyVerbruggen/Toast-PhoneGap-Plugin
プラグインのインストールは下記のコマンドで行います。
1 | cordova plugin add cordova-plugin-x-toast |
トーストを表示するためのコードは下記のとおりです。
1 2 3 4 5 6 7 | window.plugins.toast.showWithOptions( { message: "[メッセージ内容]", duration: "short", // 表示する時間 position: "bottom", // 表示位置 }); |
表示位置は、’top’, ‘center’, ‘bottom’ のいずれかを選択します。
表示時間は、’short’, ‘long’ もしくは ミリ秒単位で数値を指定することもできます。
また、表示に成功・失敗した時の処理を追加することもでき、その場合は下記のように記述します。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | window.plugins.toast.showWithOptions( { message: "[メッセージ内容]", duration: "short", // 表示する時間 position: "bottom", // 表示位置 }, //Success callback function(args) { // 成功した時の処理 console.log(args.event); }, function(error) { // 表示に失敗した時の処理 console.error('toast error: ', error); }); |
また、トーストエリアの背景色を変更したり、文字色を変更したり、更には背景の透明度や四隅の丸みを指定することもできるようです。
指定の方法例は下記のとおりです。
1 2 3 4 5 6 7 8 9 10 11 12 | window.plugins.toast.showWithOptions({ message: "[メッセージ内容]", duration: "short", // 表示する時間 position: "bottom", // 表示位置 styling: { opacity: 0.75, // エリアの透明度 backgroundColor: '#FF0000', // 背景色 textColor: '#FFFF00', // 文字色 textSize: 20.5, // 文字サイズ cornerRadius: 16, // 四隅の丸み }}); |
こう見ると、かなり自由度が高いですね。
アプリの配色に合わせてカスタマイズしてもいいかもしれません。
最後に、トーストは時間経過で自動的に消えますが、もし手動で消したい場合はこちらを実行します。
1 | window.plugins.toast.hide(); |
こちらはあまり使用する機会はないかも？
以上、Cordovaアプリでトーストを表示する方法でした。
分かりやすいし、カスタマイズもかなり自由に行えるのでお勧めです。
是非、ご活用ください。
