タグ: Monaca

【Monaca】フォントサイズを変更しても画面デザインが崩れないようにする

MonacaやCordovaを使用したアプリ開発で必ずこの問題にぶち当たる。
フォントサイズを大きくすると、画面デザインが崩れてしまう問題だ。

開発においては、一般的なフォントサイズに合わせて画面デザインを行う。

Continue reading

【Monaca】動的にOnsen UIのCSSを切り替える

今回はOnsen UIのCSSを動的に切り替える方法を紹介する。
Continue reading

CSS JavaScript Monaca Onsen UI

【Monaca】checkbox「パスワードを表示する」を実装する

ユーザー名とパスワードを入力する画面で、「パスワードを表示する」チェックボックスを実装するには、チェックが入ったときにinputタグのtype属性を「password」から「text」に変更することにより実現できる。

今回は、JavaScriptとAngular JSの2パターンについてコードを記載する。

Continue reading

AngularJS checkbox Cordova Monaca password チェックボックスパスワード

【Monaca】リバースエンジニアリング対策「cordova-plugin-crypt-file」注意点

MonacaやCordovaで開発したアプリの最大のデメリットは、apkファイルを抽出してZIPで解凍すると、HTMLやCSS、JavaScriptなどのコード、ファイル構成が丸見えとなってしまう点である。
つまり、時間をかけて必死に開発を行っても、ZIPで解凍すれば簡単にコピーされてしまうし、コードに記載したクライアントキーやAPIキーなどの情報も知られてしまう。
Continue reading

Cordova cordova-plugin-crypt-file Monaca リバースエンジニアリング暗号化

【Monaca】WebSQLを利用したアプリは注意が必要！！

先日、「AndroidシステムのWebView」のアップデートを行ったところ、Chromeデベロッパーツールでアプリのデバッグできなくなり、「AndroidシステムのWebView」のアンインストールを行った。
その後、デバッグできるようになったので作業を進めたが、途中でおかしいことに気がついた。
「AndroidシステムのWebView」をアンインストールすると、WebSQLを利用したアプリのデータがすべて削除されるようだ。

ユーザーのデータを守るためには、バックアップの仕組みを充実させるか、WebSQLから「Cordova-sqlite-storage」プラグインを利用した仕組みに変更するしか方法がない。

なお、Monacaの場合、Cordovaプラグインの使用は有料Proプラン(21,600 円/年)以降となるので、無料Freeプランの方は注意が必要。

AndroidシステムのWebView Cordova Monaca WebSQL

【Monaca】Onsen UI V2 + Angular JS V1 最新バージョンのプロジェクト作成方法

Monacaの「Onsen UI and Angular 1」のテンプレートは、Onsen UI V2のバージョンが古いため、Onsen UIの不具合と気がつかずに開発・検証を進め、必要以上の時間がかかる場合がある。
今回は、テンプレートを使用せずに、Onsen UI V2 + Angular JS V1 最新バージョンのプロジェクト作成方法を紹介する。
Continue reading

AngularJS Monaca Onsen UI

【Monaca】LINE・Twitterにメッセージを送信する

※Onsen UI V2.8.3 + Angular JS V1.6.6
[onsenui]・[js]フォルダにそれぞれ必要ファイルを配置すること。
事前にLINE・Twitterのアプリをインストールすること。

otak-lab

~~https://otak-lab.com/archives/1142~~

I am developing an app.

AngularJS LINE Monaca Onsen UI SNS Twitter

【Monaca】ons-splitterのスワイプを制御する(Onsen UI v2)

※Onsen UI v2
ons-splitter-sideに設定したidを取得し、swipeableを取ったり付けたりして制御する。

var elem = document.getElementById("menu");
if (isSwipe) {
  elem.setAttribute("swipeable", "");
} else {
  elem.removeAttribute("swipeable");
}

var elem = document.getElementById("menu");

if (isSwipe) {

elem.setAttribute("swipeable", "");

} else {

elem.removeAttribute("swipeable");

}

Monaca ons-splitter Onsen UI swipe スワイプ

【Monaca】InAppBrowserで表示したサイト上にFAB風の［閉じる］ボタンを設置する

以前、私がStackOverFlowで投稿した回答を修正して、FAB(Floating Action Button)風の［閉じる］ボタンを設置してみた。
動作の詳しい内容は、webページからローカルに戻る方法を参照。

スタック・オーバーフロー

webページからローカルに戻る方法

https://ja.stackoverflow.com/questions/29794/webページからローカルに戻る方法/

ドキュメントを見ても分からなかったので質問させて頂きます。Monacaアプリ内ででwebページを表示した場合、アプリ内でwebページ&#x30...

※最小限のテンプレート + InAppBrowserプラグインが必要。

初期画面。

［show browser］ボタンを押下すると、Yahoo!JAPANが表示され、右下に［close］ボタンが設置される。

スクロールしても［close］ボタンの位置は変わらない。

［close］ボタンを押下すると、アプリに戻り、メッセージが表示される。

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta http-equiv="Content-Security-Policy" content="default-src * data:; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
    <script src="components/loader.js"></script>
    <link rel="stylesheet" href="components/loader.css">
    <link rel="stylesheet" href="css/style.css">
    <script>
"use strict";
var btn_close = {
    code:   "var btn=document.createElement('button');" +
            "btn.style.cssText='position:fixed;color:#fff;background-color:rgba(43,97,143,0.5);font-size:12px;font-weight:800;width:48px;height:48px;bottom:16px;right:16px;border:none;border-radius:50%;box-shadow:2px 2px 1px rgba(48,48,48,0.5);z-index:999;';" +
            "var t=document.createTextNode('close');" +
            "btn.appendChild(t);" +
            "btn.addEventListener('click', function(e) {" +
            "window.open('about:blank');" +
            "}, false);" +
            "document.body.appendChild(btn);"
};
window.addEventListener("load", function(e) {
console.log("load");
    var elem = document.getElementById("button_show");
    elem.addEventListener("click", function(e) {
console.log("click button");
        var ref = window.open("http://www.yahoo.co.jp/", "_blank", "location=no");
        ref.addEventListener("loadstop", function(e) {
console.log("loadstop " + e.url);
            if (e.url.search(/about:blank/) > -1) {
                ref.close();
            } else {
                ref.executeScript(btn_close);
            }
        }, false);
        ref.addEventListener("exit", function(e) {
console.log("exit");
            alert("close browser");
        });
    }, false);
}, false);
    </script>
    <style>
    </style>
</head>
<body>
	<br>
    <button id="button_show">show browser</button>
</body>
</html>

<!DOCTYPE HTML>

<html>

<head>

"use strict";

var btn_close = {

code: "var btn=document.createElement('button');" +

"btn.style.cssText='position:fixed;color:#fff;background-color:rgba(43,97,143,0.5);font-size:12px;font-weight:800;width:48px;height:48px;bottom:16px;right:16px;border:none;border-radius:50%;box-shadow:2px 2px 1px rgba(48,48,48,0.5);z-index:999;';" +

"var t=document.createTextNode('close');" +

"btn.appendChild(t);" +

"btn.addEventListener('click', function(e) {" +

"window.open('about:blank');" +

"}, false);" +

"document.body.appendChild(btn);"

};

window.addEventListener("load", function(e) {

console.log("load");

var elem = document.getElementById("button_show");

elem.addEventListener("click", function(e) {

console.log("click button");

var ref = window.open("http://www.yahoo.co.jp/", "_blank", "location=no");

ref.addEventListener("loadstop", function(e) {

console.log("loadstop " + e.url);

if (e.url.search(/about:blank/) > -1) {

ref.close();

} else {

ref.executeScript(btn_close);

}

}, false);

ref.addEventListener("exit", function(e) {

console.log("exit");

alert("close browser");

});

}, false);

</script>

<style>

</style>

</head>

<body>

<br>

<button id="button_show">show browser</button>

</body>

</html>

FAB Floating Action Button InAppBrowser Monaca

【Monaca】Basicプランでは解決できず！InAppBrowser Google OAuth2認証の問題

「【Monaca】アプリリリース後の問題について」で記載したInAppBrowserを使用したGoogle OAuth2認証の問題だが、海外のサイトなどいろいろと調査した結果、cordova-plugin-googleplusを導入すれば解決できることがわかった。
しかし、無料のMonaca Basicプランではプラグインが使用できず、結果的に解決できない事態となった。

Cordovaの開発環境を構築し、MonacaからCordovaへ環境を移行するしか方法がないようだ。

Cordova Google InAppBrowser Monaca OAuth2

月	火	水	木	金	土	日
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30