00.ionic4:10.ionic4とcapacitorでgps取得
差分
このページの2つのバージョン間の差分を表示します。
両方とも前のリビジョン前のリビジョン次のリビジョン | 前のリビジョン | ||
00.ionic4:10.ionic4とcapacitorでgps取得 [2019/08/28] – [サイトのPWAにtryするもうまくいかず] adash333 | 00.ionic4:10.ionic4とcapacitorでgps取得 [2019/09/01] (現在) – [tab1.page.tsの編集] adash333 | ||
---|---|---|---|
行 1: | 行 1: | ||
====== 10.ionic4とcapacitorでgps取得 ====== | ====== 10.ionic4とcapacitorでgps取得 ====== | ||
| | ||
+ | |||
+ | Vue.jsとOpenstreetMapを用いた方法を記載させて頂きました。 | ||
+ | →[[https:// | ||
以下のサイトを写経してみたいと思います。 | 以下のサイトを写経してみたいと思います。 | ||
行 12: | 行 15: | ||
DEMOサイト | DEMOサイト | ||
- | https://happy-goldberg-809fba.netlify.com/ | + | https://suspicious-pare-d3ae32.netlify.com/ |
===== 開発環境 ===== | ===== 開発環境 ===== | ||
行 61: | 行 64: | ||
src/ | src/ | ||
+ | |||
+ | <code html> | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | </ | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | </ | ||
+ | </ | ||
+ | |||
+ | </ | ||
(変更前) | (変更前) | ||
行 71: | 行 87: | ||
src/ | src/ | ||
+ | |||
+ | <code javascript> | ||
+ | import { Geolocation} from ' | ||
+ | |||
+ | // | ||
+ | |||
+ | export class Tab1Page { | ||
+ | latitude: number; | ||
+ | longitude: number; | ||
+ | |||
+ | constructor() { | ||
+ | this.getLocation(); | ||
+ | } | ||
+ | |||
+ | async getLocation() { | ||
+ | const position = await Geolocation.getCurrentPosition(); | ||
+ | this.latitude = position.coords.latitude; | ||
+ | this.longitude = position.coords.longitude; | ||
+ | } | ||
+ | } | ||
+ | </ | ||
(変更前) | (変更前) | ||
行 155: | 行 192: | ||
許可 をクリックすると、ちゃんと緯度と経度が表示されました。これはすごく簡単! | 許可 をクリックすると、ちゃんと緯度と経度が表示されました。これはすごく簡単! | ||
- | ===== サイトのPWAにtryするもうまくいかず | + | ===== サイトのPWAにtry(新しくNetlifyのサイトを作成する必要あり) |
せっかくなので、オフラインでも動作してほしいと思うので、PWA化したいと思います。 | せっかくなので、オフラインでも動作してほしいと思うので、PWA化したいと思います。 | ||
行 231: | 行 268: | ||
{{: | {{: | ||
+ | ということで、この www/ フォルダをZIPファイルにしてNetlifyにZIPファイルを投げ込んだら、PWAアプリになりました。なぜGitHubからのデプロイでうまくいかないのか、原因は分かりません。。。 | ||
+ | {{: | ||
+ | PWA化したDEMOサイト | ||
+ | https:// | ||
+ | {{: | ||
+ | 新しくNetlifyのサイトを作成したら、PWA化されていました。 | ||
+ | https:// | ||
+ | ===== (オプション)Add to HomeScreenボタンの追加 ===== | ||
+ | |||
+ | http:// | ||
+ | |||
+ | [[https:// | ||
+ | < | ||
+ | // 一部省略 | ||
+ | < | ||
+ | Install | ||
+ | </ | ||
+ | </ | ||
+ | {{: | ||
+ | |||
+ | [[https:// | ||
+ | < | ||
+ | // 一部省略 | ||
+ | export class Tab1Page { | ||
+ | showBtn: boolean = false; | ||
+ | deferredPrompt; | ||
+ | |||
+ | constructor() { | ||
+ | } | ||
+ | |||
+ | ngOnInit(){ | ||
+ | window.addEventListener(' | ||
+ | // Prevent Chrome 67 and earlier from automatically showing the prompt | ||
+ | e.preventDefault(); | ||
+ | // Stash the event so it can be triggered later on the button event. | ||
+ | this.deferredPrompt = e; | ||
+ | |||
+ | // Update UI by showing a button to notify the user they can add to home screen | ||
+ | this.showBtn = true; | ||
+ | }); | ||
+ | |||
+ | //button click event to show the promt | ||
+ | |||
+ | window.addEventListener(' | ||
+ | | ||
+ | }); | ||
+ | |||
+ | |||
+ | if (window.matchMedia(' | ||
+ | alert(' | ||
+ | } | ||
+ | } | ||
+ | |||
+ | add_to_home(){ | ||
+ | debugger | ||
+ | // hide our user interface that shows our button | ||
+ | // Show the prompt | ||
+ | this.deferredPrompt.prompt(); | ||
+ | // Wait for the user to respond to the prompt | ||
+ | this.deferredPrompt.userChoice | ||
+ | .then((choiceResult) => { | ||
+ | if (choiceResult.outcome === ' | ||
+ | alert(' | ||
+ | } else { | ||
+ | alert(' | ||
+ | } | ||
+ | this.deferredPrompt = null; | ||
+ | }); | ||
+ | }; | ||
+ | } | ||
+ | </ | ||
+ | {{: | ||
+ | {{: | ||
+ | |||
+ | インストールボタンができました。 | ||
+ | |||
+ | {{: | ||
行 244: | 行 358: | ||
DEMOサイト | DEMOサイト | ||
- | https://happy-goldberg-809fba.netlify.com/ | + | https://suspicious-pare-d3ae32.netlify.com/ |
行 276: | 行 389: | ||
===== リンク ===== | ===== リンク ===== | ||
+ | 前:[[00.ionic4: | ||
+ | |||
+ | 次:[[00.ionic4: | ||
+ | |||
[[00.ionic4: | [[00.ionic4: | ||
00.ionic4/10.ionic4とcapacitorでgps取得.1566997735.txt.gz · 最終更新: 2019/08/28 by adash333