Monaca - api_programming @ ウィキ

下位ページ

• 画面遷移

Content

とりあえずアカウントを使って、ログイン
onsen UIって何？→　jQueryMobileのようなフレームワーク
Hello, world 的なものを表示してみる。
index.htmlをいじるだけでパットできた。
ボタンを配置して、反応するようにしてみた。

<input type="button" value="click" onClick="testfunt()"/>

を配置。
スクリプトに

function testfunc(){
alert("msgbox");
}

を作成。できた。
コンソールに表示させよう。
tesufunc()に

console.log("log");

を追加したが、出ない。どうもブラウザのIDEでは出ない仕様らしい。しかし、Chromeのdevtoolに、結果がでてくる。

ページ読み込み時に実行されるのは、onsen ui では

ons.ready(){}

らしい。jQueryのように $(document).ready() を配置したら、$って何？ のエラーが出た。onsen ui ってjQuert上で動いているんじゃないのね。

プロジェクト作成上の注意

あくまで、最近(2017年9月）に久しぶりに少し触ったときの状況。

• onsen ui を使ったプロジェクトを使うより、空のプロジェクトに onsen ui や jQuery を加えていったほうが変なエラーが出づらい。
  • ons-navigator の id で操作が効かず、document.query... みたいなのを使った。それが、空プロジェクトからコンポーネントを加えたら通った。
• 世間の本では onsen ui の v1 で説明しているものがあるが、メソッドが変わったりしているので注意が必要。

Onsen UI V2 移行ガイド - ギャップロ

カスタムURLスキームへトライ

【Android】はじめてのカスタムURLスキーム

• 設定ファイルの変更
• AndroidManifest.xmlの変更 Cordova 6.2 では AndroidManifest.xml が廃止された。custom config プラグインを使う
  1. ファイル > Cordova プラグインの管理 or 設定 > Cordova プラグインの管理
  2. Android 向けの config-file ブロックの設定方法 を見て、設定例を見よう

Oauthを処理する

遷移先からのコールバックをどう処理するか？

とりあえず InAppBrowser で処理をする。この方法は現在のgoogleでは多分使えない。（InAppBrowserでの処理を許していないみたい）
InAppBrowserを使う際は、InAppBrowserプラグインを忘れない。そうしないとデバッグで動いても、ビルド後に使えない。

 // InAppBrowser で開く
 ver res = window.open(url);
 
 // InAppBrowser に、イベントが起きた際の処理を書いておく
 res.addEventListener( "loadstart", function( event )
 {
   var url = event.url.split( "?" )[ 0 ]; // URLを取り出す
   if ( url.indexOf( "http://myapp" ) != -1 ){

     // パラメータ文字列の処理
     var params = event.url.split( "?" )[ 1 ].split( "&" );
 
     /* ここに処理 */
 
     res.close(); // ウィンドウを閉じる
   }
 });

画面のスクロール

jQueryの animate を使ってスクロールさせようとしたが、

$("html,body").animate(...)

ではスクロールしない。

$("ons-page").animate(...)

を指定したらスクロールした。