2019/05/19(日)Visual Studio 2019からCordovaが消える

やっと自宅のPCを買い替え、Visual Studio 2019をインストール。
Visual Studio 2019 = .NET Core 3.0と思っていたら、プルダウンに出てこず調べたら未だPreview段階。
ここでインストールしてもまた入れ直す必要出てくるので、それまでの間Cordovaで遊ぼうと思ったらVisual Studio 2019から Apache Cordovaは消えたようです。Visual Studio CodeもしくはVisual Studio 2017を使えと。ずいぶんと思い切ったことをしてくれますね…。

Visual Studio Codeを入れるかどうか迷ってます。

2019/03/24(日)Blazorに未来はあるのか?

特殊分野の専用電卓を作るよう依頼されたことからBlazorの開発環境を入れました。
肝心のプログラムは計算方法調べていたら公式のアプリが無料で提供されていることが分かり締め切りもなくなったのですが、せっかくなので少し遊び始めましたが色々思っていたのと違う。
  • View修正後F5で確認しようとしたらLoading...から始まるくせにViewに修正が反映されていない。
  • RazorといえばASP.NET MVC、ASP.NET MVCと言えばModelにDataAnnotations(個人の感想です)なのに知らんといわれる。
  • C#でASP.NET MVCというよりTypeScriptでRIOTのコンポーネント作るのに似ている気がする
BlazorでDataAnnotations使う方法を検索していて、情報をまとめたプロジェクト見つけましたがすごいことになってます
Blazor + AngularとかXamarinと組み合わせるとかややこし過ぎませんか(^^;)。
BlazorもXamarinもMono上で動くのでBlazorから端末の機能を使おうとした場合にXamarin経由で使えるようですが。

Monacaの環境があるのにBlazorを入れたのは久しぶりにMonacaのクラウドIDEにログインしたらデザイン一新されていたのとテンプレートが色々あって選びきれなかったため。

更にモバイルアプリ用の選択肢が増えた感じ…。
新しいもの好きですがボチボチ振り落とされそうです。

JavaScriptのイベント

モバイルアプリ(Cordova+Onsen UI)開発時に使えるイベント中心。
たまにMonacaで遊ぼうとすると一からになってイラつくので。

工事中…
DOMload読み込が完了時。onloadプロパティを使うことの方が多いかも
DOMclickタップあるいはクリック後
DOMtouchstartタップ開始時。指で文字を描いたりする際に使える
DOMtouchendタップ後。クリック時は呼ばれない
DOMchange入力欄の値が変わった時。キーボードを閉じて画面に制御が戻った時に走る。
ons-pagepageinitページが初期化された
ons-navigatorprepushpushPage()実行時のページ移動直前に走る。移動キャンセルに。
postpushpushPage()実行時のページ移動直後に走る。
prepoppopPage()実行時のページ移動直前に走る。移動キャンセルに。
postpoppopPage()実行時のページ移動直後に走る。
ons-tabbarprechangeタブでページが切り替わる直前
postchangeタブでページが切り替わった直後

シェイクでシャッフル

Ionic1.3系でシェイクのイベントを取れるのか試してみました。
こちらのページからほぼそのままコピペで動きました。
cordova-plugin-device-motionのインストールはMonacaの管理画面から有効にするだけでOK。
ngCordovaは上記ページにあるリンク先からダウンロードしてアップロード。
シェイクテスト

意外に簡単に動きました。

アプリの多言語対応

仕事で作るWebアプリでは国際化が求められることは全くありませんが、スマホアプリを各ストア経由で配布するとなるとせめて英語を加えたい!ということで試してみました。

方法は幾つかあるんでしょうが、一番簡単そうなここ
CordovaプラグインのGlobalizationとangular-translateを使い、JSONファイルは使わずconfigに書き込む方法です。

angular-translateをインストール

「設定」の「JS/CSSコンポーネントの追加と削除」で検索しても出てこなかったのでここからソースをダウンロードし、angular-translate.min.jsファイルをjsフォルダの中にアップロード。
index.htmlのヘッダに参照を追加。

CordovaプラグインのGlobalizationのインストール

こちらは「設定」の「Cordovaプラグインの管理」から有効にするだけでOK。
Cordova Globalization

app.jsの変更

// Ionic Starter App

// angular.module is a global place for creating, registering and retrieving Angular modules
// 'starter' is the name of this angular module example (also set in a <body> attribute in index.html)
// the 2nd parameter is an array of 'requires'
angular.module('starter', ['ionic','pascalprecht.translate'])
.config(function($translateProvider){
            $translateProvider.translations('en', {
            hello_message: "Howdy",
            goodbye_message: "Goodbye"
        });
        $translateProvider.translations('es', {
            hello_message: "Hola",
            goodbye_message: "Adios"
        });
        $translateProvider.translations('ja', {
            hello_message: "こんにちは",
            goodbye_message: "さようなら"
        });
        //$translateProvider.preferredLanguage("en"); 
        $translateProvider.fallbackLanguage("en");
        $translateProvider.useSanitizeValueStrategy('escape','sanitizeParameters')
    })
.run(function($ionicPlatform, $translate) {
  $ionicPlatform.ready(function() {
    if(typeof navigator.globalization !== "undefined") {
        navigator.globalization.getPreferredLanguage(function(language) {
            $translate.use((language.value).split("-")[0]).then(function(data) {
                console.log("SUCCESS -> " + data);
            }, function(error) {
                console.log("ERROR -> " + error);
            });
        }, null);
    }
      
    if(window.cordova && window.cordova.plugins && window.cordova.plugins.Keyboard) {
      // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
      // for form inputs)
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);

      // Don't remove this line unless you know what you are doing. It stops the viewport
      // from snapping when text inputs are focused. Ionic handles this internally for
      // a much nicer keyboard experience.
      cordova.plugins.Keyboard.disableScroll(true);
    }
    if(window.StatusBar) {
      StatusBar.styleDefault();
    }
  });
})

日本語を追加したのと、Monacaのテンプレートを利用したのと、セキュリティ云々の警告が出るので下記の行を足したくらいでほとんどお手本そのまま(^^;)。
$translateProvider.useSanitizeValueStrategy('escape','sanitizeParameters')
※お手本のコメント欄では$translateProvider.useSanitizeValueStrategy('sanitize')になっていますが、日本語使う場合は('escape','sanitizeParameters')にする必要があるようです。('sanitize')のままだと文字化けします。詳しくはこちら

$translateProvider.preferredLanguage("en"); があると英語になってしまうのでコメントアウトしています。
自動判別させずに最初は英語で、設定で変更させるようにする場合はpreferredLanguageを使って、fallbackLanguageはコメントアウト。

使用する

    <ion-content>
        <h1>{{"hello_message" | translate}}</h1>
        <h2>{{"goodbye_message" | translate}}</h2>
    </ion-content>

実機で確認する

自動判別にCordovaプラグインを使っているので、実機でないと確認できません。
Monacaのおかげでこのあたりは非常に楽です。変更を保存した瞬間に、アプリ側が切り替わります。
plugin020.PNG

OK キャンセル 確認 その他