Angular(Ionic)で相方向バインディングを行う最低限のテンプレート
1
Formの場合はこちら
https://ionicframework.com/docs/v3/developer-resources/forms/
Note: If you use ngModel within a Form tag, you have to provide a name property. If you do not, you must set standalone to true in ngModelOptions
概要
Angularでは、相方向バインディングを行うための二つの方法があります。一つはテンプレート駆動型、もう一つはリアクティブフォールによるものです。
こちらの公式
https://angular.jp/guide/forms-overview
によると、
- リアクティブフォーム はより堅牢です。よりスケーラブルで、再利用しやすく、そしてテストがしやすいです。フォームがアプリケーションの重要なパーツである場合、またはアプリケーションの構築にリアクティブパターンをすでに使用している場合は、リアクティブフォームを使用してください。
- テンプレート駆動フォーム は、メーリングリストの申し込みフォームなどの単純なフォームをアプリに追加するのに役立ちます。アプリに追加するのは簡単ですが、リアクティブフォームほどスケーラビリティはありません。テンプレートでのみ管理できるとても基本的なフォーム要件とロジックをもつような場合は、テンプレート駆動フォームを使用してください。
ということです。
最低限のリアクティブフォーム
使いたいページのmodule、tsファイル、HTMLの3つに変更を加えます。
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { IonicModule } from '@ionic/angular';
import { Tab1p5PageRoutingModule } from './tab1p5-routing.module';
import { Tab1p5Page } from './tab1p5.page';
@NgModule({
imports: [
CommonModule,
FormsModule,
IonicModule,
Tab1p5PageRoutingModule,
ReactiveFormsModule
],
declarations: [Tab1p5Page]
})
export class Tab1p5PageModule {}
import { Component, OnInit } from '@angular/core';
import { FormControl } from '@angular/forms';
@Component({
selector: 'app-tab1p5',
templateUrl: './tab1p5.page.html',
styleUrls: ['./tab1p5.page.scss'],
})
export class Tab1p5Page implements OnInit {
favoriteColorControl:formControl;
constructor() { }
ngOnInit() {
this.favoriteColorControl = new FormControl('');
}
}
<ion-header>
<ion-toolbar>
<ion-title>tab1p5</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
Favorite Color: <input type="text" [formControl]="favoriteColorControl">
{{favoriteColorControl.value}}
</ion-content>
Angularでfirestoreのコレクションからデータ一覧を取得する
1
概要
Angular2以降でfirestoreのコレクションからデータ一覧を取得する方法。
読み込む
コレクションに対して、valueChanges()をsubscribeする。valueChanges()ってなんだ。。
import { Component, ViewChild } from '@angular/core';
import { AuthService } from '../auth/auth.service';
import { AngularFirestore } from '@angular/fire/firestore';
@Component({
selector: 'app-tab2',
templateUrl: 'tab2.page.html',
styleUrls: ['tab2.page.scss']
})
export class Tab2Page {
authUid:string;
constructor(
public auth: AuthService,
private firestore:AngularFirestore,
) {
this.initialize();
}
initialize(){
this.auth.getAuthUid().subscribe(uid =>{
console.log(uid,'e');
this.authUid = uid;
})
}
test(){
this.firestore.collection('users')
.doc('data').collection(this.authUid)
.valueChanges().subscribe(value =>{
console.log(value);
},
error =>{
console.log('error');
})
};
}
オブジェクトの配列で帰ってくる。
書き込み
こちらの方がシンプル
this.firestore.collection('users')
.doc('data')
.collection(this.authUid)
.doc(String(new Date().getTime()))
//.doc('test')
.set({
'title':this.originalImgName,
'content':data,
'filename':this.originalImgName,
'lastUpade':String(new Date().getTime()),
});HuaweiのHMSとはなにか
1
HMSとはなにか
HMSとは、Huawei Mobile Serviceの略です。Google Mobile Service(GMS)のHuaweiバージョンです。
GMSとは何かがわかればHMSがどういうものかすぐにわかると思いますが、これは素のAndroidにGmail,YoutubeなどGoogle独自のアプリや機能を付与したものになります。
2019年からの貿易戦争により、アメリカは中国に対して禁輸措置をとりました。その結果、HuaweiはGMSに代わりサービスを独自で提供する必要に迫られました。具体的には、先ほど挙げたメールサービスやマップ、ユーザー認証などになります。詳細を見ていきましょう。
HMSの２つの構成
HMSには、利用者用のコンポーネント（AppGallery、その他のファーストパーティのHuaweiアプリとサービス）と、HMS Coreと呼ばれる開発者向けコンポーネントがあります。HMS Coreは、開発者がアプリの作成と改善に使用できるさまざまなAPI、SDK、およびサービスで構成されています。
ユーザー向けHMS
Huawei ID
GoogleアカウントやAppleIDに相当します。ユーザーのデータをこれに紐づけて管理します。
Huawei Mobile Cloud
HuaweiIDごとに用意されたクラウドのストレージです。最大５GBまで写真や音楽などが保存できます。
Huawei Assistant
これはまぁSiriのようなものなのかと。
Huawei Themes
スマホのテーマを設定できます。
Huawei Music
音楽を管理します。
Huawei Video
動画を管理します。
Huawei Browser
専用のブラウザです。
Huawei AppGallery
Google Playに相当するものですね。
HMSコア
HMSコアには下記が含まれます。結構いろいろあります。
詳細は公式でどうぞ
https://developer.huawei.com/consumer/en/hms
IonicのAndroidアプリをWebアプリケーションとしてデプロイする
1
概要
Angular,IonicをWebアプリとしてデプロイする方法について記述する。
firebaseを使ってホスティングする方法と、Xserverでapacheでホスティングする方法を試した。firebaseでホスティングするのは（慣れてしまえば）至れり尽くせりであるが、先のことを考えると値段が気になるためXserverのほうが望ましいように感じた。
Xserverで既にドメインを持っていれば、そのサブドメインにデプロイすることで追加負担０でサイトをデプロイすることができる。速度も速いし、こちらのほうがいい。
Firebaseでのホスティング
https://qiita.com/M_Faust/items/a514b8a79d2fd13cb72b
https://qiita.com/daikiojm/items/89f46bd83c9a2285bbc6
が参考になった。
まず、ライブラリのインストールをする
npm install -g firebase-toolsログインする
firebase loginなお、.firebasercというファイルが生成されているので２度目以降はこれを消す。macならcommand + shift + . で隠しファイルを表示できる
初期設定を行う
firebase initなにをしたいか聞かれるのでHosting: Configure and deploy Firebase Hosting sitesをスペースで選択する。
What do you want to use as your public directory?
と聞かれたら、アップロードしたいファイル一式があるフォルダを指定する。私の場合はIonicだったのでwwwだった。
Configure as a single-page app (rewrite all urls to /index.html)? Yes
と言う質問については、Ionicなのでyest
File www/index.html already exists. Overwrite? (y/N)
これは、先のフォルダで指定した場所のindex.htmlをこの場でテスト用のものに上書きしますかと言うことなので、Noをしておく
その後、
firebase deployとすればいい。
Xserverの場合
流れは、xserverのファイルマネージャで確認できる場所へファイルをFTPソフトを使って自分でアップロードし、apacheの設定を.httpaccessとhtconfで行う
https://www.xserver.ne.jp/login_file.php
私はfirezillaを使った。
ionic build --prodで生成されるファイル郡をfilezillaでアップロードする。私の場合は、サブドメインだったので、サブドメイン用のフォルダ（pwaと言うもの）にアップロードした
その後、pwaの中に.httpaccessファイルを生成し、さらにルートフォルダ（public_html）にhttpd.confを作成し、編集した
<Directory "/pwa">
# Options Indexes FollowSymLinks
Options FollowSymLinks
# AllowOverride None
AllowOverride All
Require all granted
</Directory>
.htaccessは下記
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . index.html [L]
</IfModule>Angular（Ionic）でStripeでクレカ決済を導入する
目的
Angular（Ionic）でStripeでクレカ決済を導入するにあたり、ソフト側の設定方法をまとめる。AndroidのPlay Storeでの設定方法は下記参照。
概要、考え方
・クライアント側とサーバ側で処理が必要になる。
Stripeのダッシュボードにいくと、公開キーと秘密キーが得られる。
支払いを完了するさい、まずはサーバ側で支払い情報を作っておく。curlでとりあえずはいける。
curl https://api.stripe.com/v1/payment_intents \
-u sk_test_秘密キー \
-d amount=100 \
-d currency=jpy
そうすると、返り値に下記が得られる。
ここにあるClient＿Secretと言うものがあるのでこれを使って、ConfirmPaymentメソッドで支払いをクライアントを行う。
https://stripe.com/docs/js/payment_intents/confirm_card_payment
Angular(Ionic)でAdsenseを導入する
1
AngularでAdsenseで広告を出す方法です。
AndroidやiOSアプリで広告を出すためにはAdmobが利用可能ですが、AdmobはWebプラットフフォームをサポートしておりませんのでWebでは使えません。Webの場合はAdsenseを使う必要があります。
ところがAngularでAdsenseを利用する方法はほとんど情報がなく、ましてやIonicとなると皆無でした。非常に苦労しましたが、なんとかわかってきたのでまとめます。
まとめ
ng2-adsenseを使います。しかし公式の通りにやっても動作しませんので、追加でHTMLページにコードを追加する必要があります。また、広告をレスポンシブにしない、ページの上部に設置するといった一見ナンセンスなことに注意する必要があります。
環境
Angular11でIonic6です。
Ionic:
Ionic CLI : 6.13.1 (/usr/local/lib/node_modules/@ionic/cli)
Ionic Framework : @ionic/angular 5.6.0
@angular-devkit/build-angular : 0.1102.4
@angular-devkit/schematics : 9.1.6
@angular/cli : 11.2.4
@ionic/angular-toolkit : 2.2.0
Capacitor:
Capacitor CLI : 2.1.2
@capacitor/core : 2.1.2
Utility:
cordova-res : not installed
native-run (update available: 1.3.0) : 1.0.0
System:
NodeJS : v12.18.0 (/usr/local/bin/node)
npm : 6.14.6
OS : macOS Big Sur
ng2-adsenseのバージョンは9.01でした。
手順
https://github.com/scttcper/ng2-adsenseからプラグインをInstallします
npm install ng2-adsenseAngularとバージョンを合わせる必要がありますので、公式のGitHubから自分が利用するAngularにあったバージョンをインストールしてください。バージョンを指定する場合は@の後にバージョンを指定します。
npm install ng2-adsense@9.1.0次に、Index.htmlの<head></head>に下記のスニペットを追加します。
<script async src=//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js></script>こんな感じになります。Angular、Ionicでscriptタグを利用することはほとんどありませんが、index.htmlなら貼り付けても動作しますので下記のようにしてください。
次に、広告を導入したいモジュールにコードを追加していきます。公式ではapp.module.tsに追加と書いてありますが、使いたいモジュールで追加してください。例えば下記のようなhome.module.tsを編集します。
import { AdsenseModule } from 'ng2-adsense';@NgModule({
imports: [
<Other modules>,
AdsenseModule.forRoot({
adClient: 'ca-pub-XXXXXXXXXXXXXX',
adSlot: XXXXXXXXXXX,
}),AdClientなどはAdsenseのサイトから確認していただけると思います。
home.page.tsには何も追加しなくていいです。home.page.htmlを次に編集します。home.page.htmlのion-contentタグの一番上に”<script”から始まる部分を追加します。
</ion-header>
<ion-content>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- ocr-app -->
<ins class="adsbygoogle"
style="display:inline-block;width:728px;height:90px"
data-ad-client="ca-pub-XXXXXXXXXXXXXX"
data-ad-slot="XXXXXXXXX"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<ng-adsense></ng-adsense>注意点は下記です。
- 広告のStyleはレスポンシブにせず、固定（inline-block;width:728px;height:90pxで動作確認）にする
- ng-adsenseタグだけではなく、スクリプトタグなど部分も追加する
- ion-contentタグの一番上に追加すること
です。これを見つけ出すのに非常に苦労しました。
広告のStyleはレスポンシブにすると表示されなくなります。ion-contentタグの一番上に追加することも似たように少しおかしな内容ですが、おそらくAdsense側でAngularのページは認識していないのだと思います。したがってページの途中に「最適な」形で読み込ませようとしてもそれが叶わないので表示されないのだと思います。それがレスポンシブにしたりページ途中に入れるとダメになることではないかと。
一方、ng-adsenseタグだけではなく、”<script”から始まる部分も追加するというのは意味がわかりません。AngularでHTMLにスクリプトを埋め込んでそれが機能するので意味がわかりませんが、動作させるためには必要でした。なんでサニタイズしなくてもいいのかは全くわかりませんが、動作はしました。
なお、adClientとadSlot、追加用のスクリプトなどはadsenseのホームページから確認可能です。
スクリプトの確認のためには下記画面の右下の＜＞のボタンをクリックしてください。
また、広告のスタイルを固定するためには、鉛筆のマークを押してレスポンシブから固定にします。
まじで苦労してけど表示されるようになった。