PythonとAngularの組み合わせが最強な理由

/0 コメント/カテゴリ: /作成者:

1

クロスプラットフォームは生産性が高い

　なにかをサービスインしようとしたとき、Androidだけ、iOSだけ、あるいはWebだけというのは片手落ちです。だからといってAndroid用にKotlinで開発し、iOS用にSwiftで開発し、そしてWeb用にも別個に開発など現実的ではありません。

　すでに大成功しているソフトならもちろんありですが、現実はうまくいくか保証のないまま開発し、なるべく多くのユーザーに使ってもらいながら成功につなげていきたいと考えると思います。だからこそ、クロスプラットフォームであることは特に個人や小規模の開発チームにとって必須のツールとなると考えています。

ここでは、フロントエンドとしてAngular,バックエンドとしてPythonという組み合わせがメリットの大きな組み合わせであることを解説します。

どこのプラットフォームを抑えるか

すぐに思いつくプラットフォームとしては、デスクトップ、スマホアプリ、Webです。

  • デスクトップアプリ
    Linuxは置いておいてもMacとWindowsがあります
  • スマホアプリ
    AndroidとiOSがあります
  • Web
    これはユーザーに非常に簡単にアクセスできるプラットフォームとして外すことはできないです

ユーザーは各プラットフォームに分散していますが、個人的にはWebとスマホアプリを抑えればほとんどカバーできると考えており、デスクトップアプリの優先度は低いと思っています。したがって、クロスプラットフォームの環境はUnity,Xamarin,Cordova,Ionic,React,Capacitorなどがあると思いますが、Ionic,React,CordovaなどのWeb系の技術が選択肢として残ります。

さらにそのなかでどのフレームワークが強いかをこちらの記事で考えたのですが、私の意見ではAngularが断然オススメです。

https://top.np-sys.com/general/%e5%80%8b%e4%ba%ba%e3%83%bb%e5%b0%91%e4%ba%ba%e6%95%b0%e3%81%ae%e3%82%b7%e3%82%b9%e3%83%86%e3%83%a0%e9%96%8b%e7%99%ba%e3%81%ab%e3%81%afangular%e3%81%8c%e3%82%aa%e3%82%b9%e3%82%b9%e3%83%a1/

バックエンドはどうするか

Angularでフロントエンドを書くとするとバックエンドはどうすればいいでしょうか。TypeScriptが使えるのでnode.jsで書くのはもちろんいいと思います。PHPエンジニアもいると思います。

　ただ、わたしはバックエンドはPythonが好きです。もともとPythonがもっとも馴染みのある言語ということがありますが、バックエンドというのはデータ処理が少なからずあると思うのです。例えばAIを搭載したアプリケーションを開発する場合を考えた時、AIはほぼPython一択です。そうでなくても多くのデータ処理を実行する可能性は多いにあるため、node.jsでもなくPHPでもなく、バックエンドはPythonが汎用性が高いと考えます。Pythonで書いておけばカバー範囲が広いと思っており、バックエンドはPythonで作成したAPIで担当させておいて、AngularからそのAPIを叩いてデータ処理を行うというイメージです。

組み合わせるとどうなるか

　AngularをIonicで使用すると、見た目は完全にNativeになります。Nativeに比べると挙動が遅いということですが（https://developer.medley.jp/entry/2017/11/24/120000）、現在のスマートフォンの性能なら描写の多いゲームなどを除いてまったく問題ならないと思います。したがって、Ionicで開発しておけば、ひとつのプロジェクトをつくるだけでAndroid,Web,iOSのプラットフォームに高いクオリティでビルドできます。そしてバックエンドはPythonで受ける。これによって高い生産性と拡張性を備えたシステムが開発ができると考えているため、これが個人の開発や小規模でも開発を実施する場合私の考える最強の組みわせです。

榊原昌彦さんのコメント

とても共感したので、こちらの著者である榊原昌彦さんの冒頭の挨拶を引用させていただきます。

大きく変わったWebの価値Web技術で作ることができるプロダクトの選択肢は大きく増えました。Web Native開発フレームワークの「Ionic Framework」を使えば、Mobile Native,と同じようなUIとUXをユーザに提供することができます。クロスプラットフォームライブラリ「Capacitor」を利用すれば、Webアプリを「App Store」(iPhone/iPad) や「Google Play」(Android)で配信することができます。Google Chromeをはじめとしたインターネットブラウザも大きく進化しました。モバイルアプリ同等のUX(ユーザ体験)を提供することを目指して、今までモバイルアプリでしか実現できなかったプッシュ通知やオフラインでの表示、高精度GPSといった機能をWebで提供できます。また、「Electron」というWebアプリをデスクトップアプリにすることができるフレームワークが利用されるシーンも増えています。今では、WebアプリのプラットフォームはWebだけではなくなり、1つのプロダクトをiOS、Android、デスクトップへと、ハイブリッドに展開できるようになっています。Webとモバイルの境目がなくなりつつある多くのWebサイト、Webアプリではモバイルデバイスからのアクセス数が増え続けており、モバイルファースト(モバイルデバイスを利用するユーザを優先した設計)が当たり前になりつつあります。ユーザが、「ホーム画面に追加」という機能を使えば、Webをモバイルアプリのように利用できます。Webアプリとモバイルアプリの違いは、アプリストアからインストールするか、ブラウザからアクセスするかの違いになりつつあります。その中で、ハイブリッドに展開する大きなメリットは「そこにユーザがいるから」です。皆さんが作ろうとしているアプリのユーザは、Webブラウザをよく使いますか? Androidユーザが多いですか? もしかすると、App Storeでアプリを探すような人かもしれません。Webとモバイルの境目がなくなりつつある今だからこそ、プラットフォームに依存しない形であなたのアイデアを実現できることは大きな武器になります。

個人的にはこれにPythonを加えると最強だと考えています。

最後に

写真から文字情報を抽出して爆速でレポートや記事を作成するアプリを作成しています。無料なのでよかったらどうぞ。フロントエンドはIonicでCapacitorを使って開発し、バックエンドはGCPのApp EngineをPythonで書いてます。

iOS => https://apps.apple.com/app/id1497498494
Android => https://play.google.com/store/apps/details?id=com.rainbowsv2.ocr

Angularにおけるモジュール解説

/0 コメント/カテゴリ: /作成者:

1

モジュールとは

Anularは、コードをモジュールという単位で機能ごとに分割することで管理します。電気自動車が部品を組み立てることで比較的簡単に組み立てられるように、機能ごとにモジュールへ分割することでプログラムを作成しやすくなります。代表的なものとして、ルーティングや HTTP 通信などの機能を持つものなどがあります。

CommonModule

CommonModuleはNgIf や NgFor などの基本的なディレクティブやパイプを提供します。両者ともAngularを代表する機能ですが、Ngifは変数の条件によって（例えばログインしているかしていないかで）表示を変えるときに使用しますし、NgForはリスト構造になっているものに対してイテレートすることで劇的にソースコードを書く手間を低減できます。Angularを代表する機能であるモジュールのため直接読み込む必要はなく、BrowserModule やWorkerAppModule などの各プラットフォームごとのモジュールがエクスポートしているので、これらのモジュールを読み込んでいれば同時に利用可能になります。

Forms Module

Forms Moduleは、Template Driven なフォームを実装するのに必要となるディレクティブやプロバイダを提供します。Template Driven はフォームにユーザーが入力した情報によって変数側のデータを書き換える方法で、これによりJavaScriptからクラスやIDを指定してgetElementbyID()などの手間を省くことができます。Forms Module は、@angular/forms からインポートすることで利用できます。

src/app/app.module.ts

import { NgModule }      from '@angular/core';import { BrowserModule } from '@angular/platform-browser';import { FormsModule }   from '@angular/forms';import { AppComponent }  from './app.component'; @NgModule({imports: [BrowserModule,FormsModule],declarations: [AppComponent,],providers: [],bootstrap: [ AppComponent ]})export class AppModule { }

Reactive FormsModule

ReactiveForms Module は、アプリケーションに Reactive Form を実装するために必要なディレクティブやプロバイダを提供します。Forms Moduleがユーザー側の入力でバックエンド側の変数を書き換える方法なのに対して、このモジュールはバックエンド側からフロントエンドを書き換える方法です。ReactiveForms Module は Forms Module と同様に、@angular/forms からインポートして利用します。

HttpClientModule

HttpClientModule は、HTTP リクエストや、レスポンスの処理を実装するのに必要なプロバイダを提供します。Pythonなどとは異なり非同期通信だるJavaScript(そしてSupersetであるTypeScript)では、Ajax通信をよく使いますが、Ajax通信をAngularで実装する際はこのモジュールを使用します。AjaxHttpClientModule は @angular/common/http からインポートすることで利用可能になります。

JsonpModule

JsonpModule は、JSONP を用いた HTTP 通信を実装するのに必要なプロバイダを提供します。JsonpModule は HttpClientModule と同様、@angular/http からインポートすることで、利用可能になります。個人的にはあまり使用したことはありません。

Router Module

AngularはSPAですので、実態は一枚のHTMLのDOMを書き換えてページ遷移を実現します。その際のURL変更に関する機能を担当するモジュールです。RouterModule は @angular/router からインポートすることで利用します。

BrowserModule 

BrowserModule は、DOM イベント（たとえばheaderの読み込みが完了したかなど（https://phpjavascriptroom.com/?t=js&p=event））やキーボードイベント・タッチイベントなど、主にブラウザアプリケーションの作成に必要な機能を提供します。これもWebからきている人には理解しやすい概念だと思います。なお、BrowserModule のなかでCommonModule もエクスポートしているため、BrowserModule をインポートするだけでCommonModule も読み込まれます。@angular/platform-browser からインポートして利用しますが、個人的には何も考えずにインポートするモジュールです。

ServerModule

ServerModule は、主にサーバーサイドレンダリングを行うアプリケーションを作成するために必要な機能を提供します。公式を見ると解説が省略されすぎているのですが。。

https://angular.io/api/platform-server/ServerModule

前述の BrowserModule もエクスポートしているので、BrowserModule で使える機能も利用できます。@angular/platform-server からインポートします。サーバ側はPythonで書くことが多いので、あまり個人的に使用したことはありません。

WorkerAppModule

これも個人的にはほとんど使ったことがないモジュールで、公式によると、Angular10から廃止されることが決まっておりますので使用しないほうがいいでしょう。

https://angular.jp/api/platform-webworker/WorkerAppModule

まとめと結論

Anularは、モジュールという単位で特定の機能を担うコードを分割し、使用する場合はImportしてすぐに使用できるようにしています。個人的には、

  • 存在をしっていればいいもの
    BrowserModule
  • 使う中でわかってくるもの
    Forms Module、Reactive FormsModule
  • 勉強して使えるようにならないといけないもの
    HttpClientModule

というイメージです。

写真から文字情報を抽出して爆速でレポートや記事を作成するアプリを作成しています。無料なのでよかったらどうぞ。

iOS => https://apps.apple.com/app/id1497498494
Android =>  https://play.google.com/store/apps/details?id=com.rainbowsv2.ocr

HuaweiのApp galleryでアプリで提出してみた

/0 コメント/カテゴリ: /作成者:

1

背景

いま、スマホアプリって作っても全然インストールしてもらえないんですよね。もう市場飽和してて、10年前ならインストールされたのになんて思いなが開発していました。そんな矢先、Google Play storeからHuaweiが締め出されたという話があり、あっという間に5社で連合で新しいアプリストアが立ち上げられました。App Galleryです。これはチャンスでございます。なので手元のAndroidアプリをApp galleryでリリースしたのでその所感をお伝えします。

野良アプリストアでしょうか

まぁどうでしょうか。当面はそうでしょうね

今後はどうでしょうか

Huaweiの技術力、わたしはGoogleやAppleに劣らずすごいと思います。共産党はトップダウンでものごと進めるし、動画などがもっとも普及しているのが中国であることを鑑みると、今後のITを引っ張るのは中国だと思います。App galleryって「危険そう」「野良アプリ」ってイメージありますよね？でも今後、GoogleとAppleのストアに並ぶ市場になると思います。

所感


・全体的な印象は、中身はGoogle　Play、見た目はApp Store Connect
・デベロッパー登録は無料。デベロッパー登録に1日、審査に4日程度。なので1週間程度あればアプリ出せる
・デベロッパー登録にパスポートと銀行のキャッシュカードが必要
・日本語はなくて英語か中国語。でも手順はGoogleとAppleより簡単
・Googleの.apkならそのまま出せる
・.apkならいいので、cordovaやunity,ionicなども問題なく出せる

デベロッパー登録にパスポートと銀行のキャッシュカードが必要

え？まじか。。この時点でかなり気分が冷める。。いろいろ心配になる。。しかし無視して強行突破。

日本語はなくて英語か中国語。でも手順はGoogleとAppleより簡単

これもかなりのハードル。英語重いなぁと思ったけど、中国語だと本当にわからないので英語のほうがありがたいと思う不思議。。まぁ、わかりやすいレイアウトなので、Google翻訳しておいて画面にしたがっていけば問題ないかと。最初どこからてをつければいいかわからなかったから苦労した。

方法

ここから作業していく。

https://developer.huawei.com/consumer/en/appgallery

開くとこんな感じ。

でupload your appかregisterで下記画面にいく。するとこう

国に日本を選択して、必要な事項を登録。携帯に認証コードが送られてくる。俺の場合、文字化けしていて焦ったが、resendすると文字コードが違うのか文字化けの解消されたメールが届くのでそれで認証すればおｋ。

で、パスポートとキャッシュカードを登録して審査が降りるのをまつ。審査は二十二時ごろにやって明け方には承認された。場合によっては、審査が通る前にとりあえず作業は進められますよ、という画面がでるので当日に進められる人はすすめばよい。その後Consoleへいくとこうなる

左上のMy appsを押す。こうなる。

右上のNewをおすとこうなる。

であとは画面通りに進めば良い。Googleで出したことあったら、それより入力項目少ないから、ここまでたどり着けばいけると思う。

注意したこと

・なにかあったときにGoogleのアプリに影響出したくなかったので、com.XXX.XXXの名前を別に作ってまったく別アプリとした

・なのでAdmobのアプリIDも変えた

・審査はちゃんとやってる。審査完了後こんなメールがきた。

Test Environment]: Wi-Fi networking, Android 9.0/EMUI 9.1（nova 5）,Android 9.0/EMUI 9.1（p30）, Multilingual settings.でテストしたとのこと

・apkをアップロードするのにエラーがなんども起きた。同じファイルなのにうまくいったり行かなかったり、時間も五分から十分かかった。かなりここで挙動を調べているように感じた。

App galleryに乗せたもののURLわからなかったからGoogleとAppleのをのせとくけどこれをアップした。写真から文字抽出して高速でブログ書くためのアプリ。使って欲しい。

https://apps.apple.com/app/id1497498494

https://play.google.com/store/apps/details?id=com.rainbowsv2.ocr

後日談

Google、Apple、Huaweiの３プラットフォームにアプリを公開してから半年が経ちました。Google Play、Apple のApp Store、App Galleryの売り上げですが、驚くことにApp Galleryが最も多いです。次がApp Storeです。App Galleryがまだブルーオーシャンなことがわかります。ただ、最も残念なのは個人開発者だと広告を打てないことです。広告売ったら結構凄そうかも。米国からの部品調達禁止もなんとか乗り切ってほしいです。

gcpで２つ目のアカウントで無料枠を適用しない方法

/0 コメント/カテゴリ: /作成者:

1

問題の所在

無料トライアルアカウントを2つ作ってしまって規約違反

経緯

AWSとAzureに押されておりますが、GoogleCloudPlatform が好きです。とても好きなので、最初になんとなく登録したメールアドレスではなく、ちゃんとしたアドレスで使いたくなりました。そこでふたつめのGCPアカウントを先日作成しました。
で、これについてきた1年の無料枠が問題に。

Googleからのメール

Googleからのメールです

「無料トライアルアカウントを2つ作成した件について、お知らせいただきありがとうございます。こちらのドキュメント 1　にもご確認いただけるように、無料トライアルクレジットの適用は一度に限ります。無料割り当ての制限を回避するために複数の無料トライアルアカウントを作成することは利用規約違反であり、違反が判明した場合はプロジェクトまたはアカウントがシステムにて停止される可能性がございますので、ご留意願います。詳細に関しては文末リンク 2 内の「無料トライアル期間中の割り当て制限の回避」部分にてご確認頂けますようお願いいたします。(今後ご利用される予定であるプロジェクトを元請求先アカウントに変更して頂き 3、新規無料トライアルアカウントを閉鎖 (文末リンク 4 参照) して頂ければ、既存のリソースの停止を防げます。)

1 https://cloud.google.com/free/docs/gcp-free-tier#free-trial
2 https://support.google.com/cloud/answer/7002354?hl=ja
3 https://cloud.google.com/billing/docs/how-to/modify-project#change_the_billing_account_for_a_project
4 https://cloud.google.com/billing/docs/how-to/manage-billing-account#close_a_billing_account
」

でいろいろメールのやりとりがあったのですが、2週間くらいで解決しました（なが！！）。答えはこれです。

答え→無料枠はアカウントではなく、支払いアカウントに紐付けされている。デフォルトの支払いアカウントを閉鎖せよ

最初、無料枠はアカウントに紐付けられていると思って右往左往していたのですが、無料枠は支払いアカウントにひもづけされているのです。なので最初の支払いアカウントをを閉鎖して、新しい支払いアカウントを作成すればいいです。二つ目に登録したアドレスに無料枠がついていると勘違いしていて長くかかってしまいました。
具体的には、下記の手順です（メールの転載）。
1. Sign in to the Google Cloud Console
2. In the Billing navigation menu, click Account Management.
3. At the top of the page, click cancel CLOSE BILLING ACCOUNT .

おまけ

先日、ようやくGCPを使ったアプリが公開されたのですが、使えなくなったら悲しすぎるのですこしあせりました。同じ思いをする方いないように投稿します。
iOS
Apple
スクリーンショット 2020-02-14 23.11.51.png

Android版
Google
スクリーンショット 2020-02-14 23.13.10.png

写真からテキストを抽出するOCRソフトです。ブログの投稿で書籍の内容を引用するときに使ってください。

Cloud functionsからFirestoreのStorageにアクセスして、VisionAIをつかう

/0 コメント/カテゴリ: /作成者:

1

Cloud functionsからFirestoreのStorageにアクセスして、VisionAIをつかうにあたってかなり苦労したので、ポイントをまとめておく。

1。Cloud functionにサードパーティのPythonのライブラリを使う場合、requrements.txtを書く必要がある。

2。Firebaseのデータにアクセスする場合、firebaseのプロジェクトの歯車マークから、Python用の設定ファイル（json）をダウンロードし、Cloud FUnctionsにソースコードで登録する必要がある。

import firebase_admin
from firebase_admin import credentials
from firebase_admin import storage
cred = credentials.Certificate(“ダウンロードしたファイル”)
firebase_admin.initialize_app(cred, {
‘storageBucket’: ‘ストレージなら、そのばけえと’
})

2.5　Storageからデータを取得して、一度PILの形式にする

source_blob_name = “ふあいるに名前”
blob = bucket.get_blob(source_blob_name)
img_file = io.BytesIO()
blob.download_to_file(img_file)
img = Image.open(img_file)

3。Vision AIに渡すデータは、base64の必要がある。
output = io.BytesIO()
img.save(output, format=’PNG’)
image3 = output.getvalue()

image_g = types.Image(content=image3)

response = vision_client.document_text_detection(image=image_g)
labels = response.full_text_annotation

4。VisionAIを使うためには、VisionAIのAPIを有効にしておく必要がある。ローカルで動かす場合は、それをダウンロードしてパスに設定する必要がある。

https://cloud.google.com/vision/docs?_ga=2.249257607.-1213108839.1578707642

5。cloud functionsをデプロイするのはgcloudを使った方がやりやすかった。なので、gcloudもインストールする必要がある。

使ったgcloudのコメント

https://qiita.com/masaaania/items/7a83c5e44e351b4a3a2c

gcloud functions deploy myfunc2 –trigger-http –runtime=python37
gcloud config configurations list
gcloud projects list
gcloud config set project projectname

GoogleCloudFunctionsのデプロイ方法

Console

Consoleのインラインエディタから直接書き込む方法、ローカルのzipファイルをConsoleからアップロードする方法、ローカルのファイルをgcloudコマンドでアップロードする方法の3つがある。最初はお試しでバージョン管理もできないの。2番目は理由不明で失敗する。なので3番目が一番いい。

手順としては、gcloudコマンドを使う際、現在のプロジェクトが正しいことを確認

https://qiita.com/masaaania/items/7a83c5e44e351b4a3a2c

次に、アップロードしたいファイルがある場所へ移動し、そこでterminalを開く

gcloud functions deploy myfunc2 –trigger-http –runtime=python37

以前はこれでいけたが、いまはこっちらのほうがいい

gcloud functions deploy Gcloudのファンクシィン –entry-point Pythonプログラムの関数の名前 –runtime python37 –trigger-http –allow-unauthenticated

https://cloud.google.com/functions/docs/deploying/filesystem?hl=ja

wiredxdisplayを入れたらadbコマンドが使えなくなった

/0 コメント/カテゴリ: /作成者:

1

結論を知れば当然なのだろうけどかなりはまった。

スマホをセカンドディスプレイにできるソフトがあるときいてインストールした。wiredxdisplayというもの。かなり便利だった。
https://www.splashtop.com/wiredxdisplay
 

しかし、それを使って気分よく開発したプロジェクトをadbコマンドでインストールしようとするとエラーがでる。当初は、wiredxdisplayをいれたことの影響など考えていなかったから全く原因がわからず苦労した。

パス周りを確認すると、どうもadbの実行ファイルが2つあるということしか考えられず、adbの実行ファイルがどこにあるかしらみつぶしに調べるために

find . -name ‘adb’ 2> /dev/null

で調べてみると、

./Users/hoge/Library/Android/sdk/ndk/20.0.5594570/python-packages/adb

. 

./Applications/Splashtop XDisplay.app/Contents/MacOS/adb

と出てきた。あぁ、そうか、スマホをセカンドディスプレイとして使用するのにadb使ってるわな、と納得し、一件落着。。バージョンおなじなら両立するのにな。。

と思ってこの記事を書いた後、試してみたら両立した！

wiredxdisplayのadbファイルのある

/Applications/Splashtop XDisplay.app/Contents/MacOS

にいって、

cp /Users/hoge/Library/Android/sdk/platform-tools/adb ./adb

でAndroidstudioのadbをコピーしたら、両立して使えるように。いや、たいへんだった。

CordovaがiOSで使えなくなる！？AppleがUIWebView をなくすことについて

/0 コメント/カテゴリ: /作成者:

1

2019年8月ごろから、cordovaで作成したアプリをアップロード すると不吉なメールが届きます.

ITMS-90809：廃止されたAPIの使用-AppleはUIWebView APIを使用するアプリの提出を受け付けなくなります。詳細については、https：//developer.apple.com/documentation/uikit/uiwebviewを参照してください。

ITMS-90809: Deprecated API Usage – Apple will stop accepting submissions of apps that use UIWebView APIs . See https://developer.apple.com/documentation/uikit/uiwebview for more information.

先日（2020年2月）にこのアプリをiOSに出したときもこのメッセージを受け取ってしまいました。
2020年3月の情報によるとUIwebviewを使ったアプリの受付は、


新規アプリ受付→2020年4月まで
既存のアプリ更新→2020年12月まで

とのことです。

詳しく公式のサイトを見ると、「class UIWebView : UIView」という宣言がだめなようです。なので今後はWKWebViewをつかうことになります。WKWebViewはUIWebViewの問題を解決するためにAppleが作ったWebViewです。UIWebViewよりクラッシュ率が低く、高速で、加えてセキュリティも高くなっているのでセキュリティを重視するAppleとしては他社に先駆けてWKWebViewへ移行するわけです。おそらく近いうちにGoogleも追随するのではないかと考えます。

Cordovaのコミュニティが対策を進めてくれているようですので、簡単にまとめます。

こちらはCordovaを管理してくれているMatt Netkowさんのページ。こちらに最新の情報が記載されています。さて、あらためてこの件についてなんといっているかについて。

Update 01/15/2020: On December 23rd, 2019, Apple clarified plans for UIWebView: “The App Store will no longer accept new apps using UIWebView as of April 2020 and app updates using UIWebView as of December 2020.” Please follow the instructions below to either update to a newer version of Cordova or migrate to Capacitor.

更新01/15/2020：2019年12月23日、AppleはUIWebViewの計画を明確にしました：「App Storeは、2020年4月の時点でUIWebViewを使用する新しいアプリおよび2020年12月の時点でUIWebViewを使用するアプリの更新を受け付けなくなります。」以下の指示に従って、Cordovaの新しいバージョンに更新するか、Capacitorに移行してください。
Understanding ITMS-90809: UIWebView API Deprecation

だいぶ前に周知してくれていたようです。結論としては、Capacitorに移行するか、新しいCordovaにアップデートすればよいようです。CordovaがコンパイルのときにUIWebviewを使わないようにCordova5.1.0から行うようです。

以前はIonicなどのはなしも記載されていたようで下記のような表をまとめたりしたのですが、

Cordova草分けであり、もっともメジャーなプロジェクト
IonicCordovaにangularを組み込むことで、UIの作業性を改善したものです。Cordovaという大きな円を書くと、Ionicはそのなかにあるイメージ。
CapaciterIonicのコンセプトをより推し進めた次世代のプロジェクト。将来的にはCordovaの次世代を担うとされていて、Ionicのメンバーもそう言っている。とはいえまだ出たばかりで洗練されてないところがある。でも使える。

最新のCapacitorを選ぶもよし、一方でCordova5.1.0にすればいいということで安心しました。Capacitorを使う方法は別に調べる人は調べると思うので、今回は最後にCordovaでなんとかしたい人向けに上記Webページの該当部分を訳して置いておきます。

WKWebViewプラグインがインストールされていることを確認してください：公式のApacheまたはIonicのいずれか。すべてのIonicスターターアプリには、cordova-plugin-ionic-webviewが自動的に含まれます。
<preference name = "WKWebViewOnly" value = "true" />をconfig.xmlファイルに追加します。
各Cordovaプラグインを最新バージョンに更新します（これらも警告をトリガーできます）。いっそのこと-不要になったら削除してください！
cordova prepare iosを実行して、変更を適用します。

わたしが作ったアプリはこちらです。写真からテキストを抽出するOCRソフトです。よかったらインストールしてみてください。

https://play.google.com/store/apps/details?id=com.rainbowsv2.ocr

無料の動画の上下切り抜き方法

/0 コメント/カテゴリ: /作成者:

1

こんな簡単なことなのに手間取った。

Avidemuxでできた。言葉は、クロップ、クロッピングというらしい

cordova-plugin-crypt-fileでcordovaをアップデートしたらビルドできない

/0 コメント/カテゴリ: /作成者:

1

cordova-plugin-crypt-fileを入れて難読化しているのだが、cordova9.0.0へバージョンアップしたらビルドできなくなった。

エラーメッセージは下記

Using "requireCordovaModule" to load non-cordova module "path" is not supported. Instead, add this module to your dependencies and use regular "require" to load it.

バグではなく、セキュリティを高めるための仕様の変更らしい。プラグインが対応すべき問題とのことで、プラグインを最新版にすることが基本の対策とのこと。しかし、今回原因となったcordova-plugin-crypt-file 1.3.3がまだ対応していなかった。

対象のプラグイン

アプリのソースコードを暗号化するcordova-plugin-crypt-file

対処方法

これを参考に/plugins/cordova-plugin-crypt-file/hooks/after_prepare.jsをいじることで解決した。

https://github.com/PeterHdd/cordova-plugin-crypto-file/issues/8

変更前

module.exports = function(context)
{
var path = context.requireCordovaModule('path'),
fs = context.requireCordovaModule('fs'),
crypto = context.requireCordovaModule('crypto'),
Q = context.requireCordovaModule('q'),
cordova_util = context.requireCordovaModule('cordova-lib/src/cordova/util'),
platforms = context.requireCordovaModule('cordova-lib/src/platforms/platforms'),
Parser = context.requireCordovaModule('cordova-lib/src/cordova/metadata/parser'),
ParserHelper = context.requireCordovaModule('cordova-lib/src/cordova/metadata/parserhelper/ParserHelper'),
ConfigParser = context.requireCordovaModule('cordova-common').ConfigParser;

変更後

module.exports = function(context) {

    var path              = require('path'),
        fs                = require('fs'),
        crypto            = require('crypto'),
        Q                 = require('q'),
        cordova_util      = context.requireCordovaModule('cordova-lib/src/cordova/util'),
        platforms         = context.requireCordovaModule('cordova-lib/src/platforms/platforms'),
        ConfigParser      = context.requireCordovaModule('cordova-common').ConfigParser;

This is a post with post format of type Link

/0 コメント/カテゴリ: /作成者:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus.

This is a standard post format with preview Picture

/0 コメント/カテゴリ: , /作成者:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi.

さらに読む

Post Formats is a theme feature introduced with Version 3.1. Post Formats can be used by a theme to customize its presentation of a post.
/0 コメント/カテゴリ: /作成者:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus – more on WordPress.org: Post Formats

Postformat Gallery: Multiple images with different sizes

/0 コメント/カテゴリ: /作成者:

Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lor

Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.

さらに読む

Indented Quotes and Images – beautiful

/0 コメント/カテゴリ: /作成者:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum […]

さらに読む

Another title for our pretty cool blog

/0 コメント/カテゴリ: /作成者:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.

さらに読む

This is a test

/0 コメント/カテゴリ: , /作成者:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.

さらに読む

Custom Lightbox!

/0 コメント/カテゴリ: , , /作成者:

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

さらに読む

A Post without Image

/0 コメント/カテゴリ: /作成者:

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

さらに読む

HTML Styles

/0 コメント/カテゴリ: , /作成者:

Image aligned left & right

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.rum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

さらに読む