タグ: iframe

【Monaca】アフィリエイト広告で収入を得る方法

「ギャンブル収支管理」で採用している方法で、アプリでアフィリエイト広告で収入を得る方法を紹介します。
※iframe使用のため、iOS版はリジェクトされる可能性があります。

play.google.com

https://play.google.com/store/apps/details?id=jp.wpblog.hatopp.gambleprofitma...

https://play.google.com/store/apps/details?id=jp.wpblog.hatopp.gambleprofitmanager&hl=ja

【Monaca】Onsen UIの画面内に外部Webページを表示するその2

「【Monaca】Onsen UIの画面内に外部Webページを表示する」の記事において、iOS版のスクロールがうまくいかないと問い合わせが多く、また某サイトでも何度か話題となっており、再度チャレンジしてみました。

otak-lab

2018.05.06

【Monaca】Onsen UIの画面内に外部Webページを表示する

https://otak-lab.com/archives/1297

2019/10/18現在、iOS上で正常に動作しません。急遽、新しい記事を書きましたので、そちらをご覧ください。既存のWebアプリをネイティブアプリに切り替えたい。しかし、時間も費用も厳しい。その場合、iframeを使用することで、Webアプリをネイティブアプリ風に見せることができる。Monacaで新規プロジェクト「Onsen UI V2 Angular 1 Tabbar」を作成し、Monacaデバッガーで動作確認済み。今回、iframeのサイズ設定にDirectiveを使用したが、クラスpage__contentのサイズが画面の有効サイズ（toolbarとtabbarを引いた値）となるため、ス...

Cordova iframe iOS Monaca Onsen UI Web アプリスクロール

【Monaca】Onsen UIでGoogleマップを切り替える

前回の【Monaca】Onsen UIでGoogleマップを表示するその２のコードを流用して、Googleマップを切り替える方法を紹介します。

otak-lab

2019.07.02

【Monaca】Onsen UIでGoogleマップを表示するその２

https://otak-lab.com/archives/2182

ちょうど１年ほど前に【Monaca】Onsen UIでGoogleマップを表示するという記事を書き、たくさんのアクセスをいただきました。Maps JavaScript APIを使った方法のため、APIキーの取得や有料化の問題など面倒な部分が多かったと思います。今回はiframeを使用して無料でGoogleマップを表示する方法を紹介します。まずはMonacaデバッガーの表示結果です。iOSの場合、画面操作中にiframeの領域が固定されず、多少操作に難があります。AndroidiOSOnsen UIの準備ができたら、iframeのwidthとheightをOnsen UIのコンテンツ領域(.page__content)...

Cordova Google Map iframe Monaca Onsen UI

【Monaca】Onsen UIでGoogleマップを表示するその２

ちょうど１年ほど前に【Monaca】Onsen UIでGoogleマップを表示するという記事を書き、たくさんのアクセスをいただきました。

otak-lab

2018.06.28

【Monaca】Onsen UIでGoogleマップを表示する

https://otak-lab.com/archives/1452

iframeによる方法はこちらです。Monacaで新規プロジェクト「Onsen UI V2 JS Minimum」を作成し、サンプルコードを貼り付けて実行したら、あっさり表示された。Monacaデバッガーで動作確認済み。※事前にMaps JavaScript APIのキーを取得すること。※37行目のYOUR_API_KEYを取得したAPIキーに書き換えること。 <!DOCTYPE HTML><html><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"...

Maps JavaScript APIを使った方法のため、APIキーの取得や有料化の問題など面倒な部分が多かったと思います。
今回はiframeを使用して無料でGoogleマップを表示する方法を紹介します。
Continue reading

Cordova Google Map iframe Monaca Onsen UI

【Monaca】Onsen UIの画面内に外部Webページを表示する

2019/10/18現在、iOS上で正常に動作しません。
急遽、新しい記事を書きましたので、そちらをご覧ください。

otak-lab

2019.10.22

【Monaca】Onsen UIの画面内に外部Webページを表示するその2

https://otak-lab.com/archives/2621

「【Monaca】Onsen UIの画面内に外部Webページを表示する」の記事において、iOS版のスクロールがうまくいかないと問い合わせが多く、また某サイトでも何度か話題となっており、再度チャレンジしてみました。今回、Android版・iOS版に関係なく、iframeのscrollingをyesにしました。iOS版で表示すると、縦スクロールはできますが、下記のように画面の横幅をはみ出してしまいます。そこで、iframe内に表示されたhtmlのbodyのmax-widthを画面の横幅に設定し直します。一瞬ちらつく場合がありますが、横幅に収まって表示されます。ただし、M...

既存のWebアプリをネイティブアプリに切り替えたい。しかし、時間も費用も厳しい。
その場合、iframeを使用することで、Webアプリをネイティブアプリ風に見せることができる。
Monacaで新規プロジェクト「Onsen UI V2 Angular 1 Tabbar」を作成し、Monacaデバッガーで動作確認済み。
今回、iframeのサイズ設定にDirectiveを使用したが、クラスpage__contentのサイズが画面の有効サイズ（toolbarとtabbarを引いた値）となるため、スクロール範囲の設定にも流用できる。
また、Webアプリに限らず、ホームページやブログなども表示できる。
~~※iOSの場合、横スクロールが発生してしまうので要注意。短時間では解決できず・・・~~
※Onsen UI V2の場合、アプリ起動時にtabbarで設定したページの処理が同時に実行されるため、動作が遅くなる場合がある。