Angular(Ionic)でHTTPリクエスト

AngularでバックエンドAPIへアクセスしてデータを取得する際、認証情報やクエリパラメータを付与したい時がある。

Post通信

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({ selector: 'app', templateUrl: 'app.component.html' })
export class AppComponent implements OnInit {
    postId;

    constructor(private http: HttpClient) { }

    ngOnInit() {      
    const headers = { 'Authorization': 'Bearer my-token', 'My-Custom-Header': 'foobar' };
    const body = { title: 'Ionic POST Request Example' };
    this.http.post('https://example.com', body, { headers }).subscribe(data => {
        console.log(data);
    });
    }
}

Get通信

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({ selector: 'app', templateUrl: 'app.component.html' })
export class AppComponent implements OnInit {
    postId;

    constructor(private http: HttpClient) { }

    ngOnInit() {      
    const headers = { 'Authorization': 'Bearer my-token', 'My-Custom-Header': 'foobar' };
    const parameters = { title: 'Ionic POST Request Example' };
    this.http.post('https://example.com',  { headers, parameters }).subscribe(data => {
        console.log(data);
    });
    }
}

3月15日AngularでAdsense

もう3月を中旬ですね。もう春ですね!Yoasobiに最高にハマっています。

昨日ようやくAngular(Ionic)でAdsenseを表示できるようになりました。

http://ocr-app.np-sys.com/

https://adsense-demo.np-sys.com/

https://github.com/NP-Systems/Ionic-adsense-demo

にまとめました。結構苦労したけど、大きな進展があって良かったです。

宣伝兼ねて

https://stackoverflow.com/questions/65736507/is-there-a-way-to-add-google-adsense-or-admob-to-an-ionic-angular-pwa

にも回答しておきました。Analyticsの方で表示広告数がわかるので楽しみです。

次に実施したいこと

次はOCRアプリの方の刷新をしようかと思っています。

Integrate adsense in Ionic Angular.

Note:please keep in mind that I am not native English speaker.

In this article, I would like to summarize how to insert ads into Ionic (Angular) project using adsense.

Admob is more popular than adsense for Ionic, but Admob does not support web platforms. If you want to deploy your project as a web app, you need to use Adsense instead of Admob.

However, there is little information on how to use Adsense with Angular, let alone Ionic. Therefore, I would like to introduce the steps here in this article.

Summary

Basically, I recommend you to use ng2-adsense plugin, but it doesn’t work even if you implement it according to the instructions on the official page. You need to add some other code. In addition, it is important to have a ad with fixed size(not responsive). If you set your ad style with responsive, it will not work. Lastly, I recommend you to place your ad on the top area for your page. It may sounds nonsense, but it was important to me.

GitHub page

https://github.com/NP-Systems/Ionic-adsense-demo

Demo site

https://adsense-demo.np-sys.com

Environment

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

the version of ng2-adsense was 9.1.0.

Steps

Create your project

ionic start adsense-demo blank --type=angular
cd  adsense-demo

Install plugin from here . https://github.com/scttcper/ng2-adsense

npm install ng2-adsense

Please note that you need to install the one that matches your version of Angular. You can specify plugin version as followings.

npm install ng2-adsense@9.1.0

Next, add the following snippet in Index.html(above </head>).

<script async src=//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js></script>

It should look like the picture below.

Next, add following codes to the module where you want to place your ad. Officially, it says to add to app.module.ts, but please add it into the module you want to use. For example, add code into home.module.ts as shown below.

The codes you need to add are followings.

import { AdsenseModule } from 'ng2-adsense';
@NgModule({
    imports: [
    <Other modules>,
      AdsenseModule.forRoot({
        adClient: 'ca-pub-XXXXXXXXXXXXXX',
        adSlot: XXXXXXXXXXX,
      }),

You don’t have to add anything to home.page.ts.

Then add snippet below into home.page.html.

  </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>

Please note the followings.

  • Create ad styles in fixed size, not responsive mode (I recommend you to create ad with inline-block; width: 728px; height: 90px).
  • Add the snippet on top of the ion-content tag.

If you set ad style to responsive, it will not work. If you do not add it to the top of the ion-content tag, it will not work neither. I know it sounds strange, but I think Adsense doesn’t recognize content in Angular page. So I recommend you to do that.

Furthermore, it sounds strange to add the snippet starting with “<script” tag. However, this was also necessary for me to work.

You can check adClient and adSlot and snippet in your adsense page.

To see your snippet, click the <> button at the bottom right of the screen below.

Also, to change the style of your ad from responsive to fixed size, press the pencil mark to fix it from responsive.

It it my pleasure to visit following demo site.

https://adsense-demo.np-sys.com

Thank you.

HTMLで要素の位置を調整する

要素を真ん中におく

このように真ん中におきたい時

    <div class="ion-text-center my-class-parent">
        <ol class="my-class-child">
          <li>hi</li>
          <li>hi2</li>
        </ol>
    </div>
.my-class-parent {
  height: 100%;
  position: relative;
}

.my-class-child {
  position: absolute;
  left: 50%;
  top:30%;
  padding-left: 0;
}

my-class-parentでBody要素に対する長さを100%に指定しており、それに対してmy-class-childで場所を指定している、

2つの要素を横に並べたい時

並べたい要素をまとめて囲ったTagにdisplay:flexをつけてやる.あとはboxの幅を100%で指定しているので,Imgで幅を指定したらそれを埋めてくれるようになる

                      <div class="flex">
                      <img src="assets/img/syabani.jpg" alt="" >
                      <div class="box">{{welcomeMessage}}</div>
                      </div>

  .flex{
    display: flex;
    /*justify-content: center;*/
  }

  .flex img{
    max-width: 100%;
    width: 30%;
    height: auto;
  }

  div.box{
    width: 100%;
    background-color:#CCCCFF;
}

(Google Cloud Platform)CloudFunctionsとAppEngineどちらにするか

外貨預金としてFXを使用していますが、自動売買のようなものをやってみたくなりました。でもFXは外貨預金として始めたものだし、FXのギャンブル性に危険が怖くもあるので、外貨預金用の口座と自動売買用の口座を別に持つことにしました。

外貨預金用はSBIを使っています(アフィリエイトはやってませんが)

https://www.sbifxt.co.jp/

で、お小遣いを入れるのはOanda。こちらは3年前の口座を復活させました。

https://www.oanda.jp/

余談ですが、SBIFXは大変使いやすいです。外貨預金用としては非常にいいです。ただ、APIを提供していないです。というか、APIを提供しているのはOandaだけなんですよね。。カスタマーサポートは悪いし、スワップポイント低いしで以前愛想つかしたのですが、まぁAPIを提供しているのはここだけなのでしょうがないですね。

SBIFXは預金用です。売買は基本しません。超長期保有です。Oandaはお小遣い、遊びという位置付けです。自由にやります。昨日、名古屋の丸善でこんな本を買いました。おもしろかったです。これを実現するようなソフトを作成することにしました。

どうやってソフトを作ろうかという話で、最初はRasberryPi4にしようとおもったんですよね。メモリも4Gbあるので、これをローカルで動かして、為替データを取得して、グラフ化するというのはどうかというわけです。これは2018年に仮想通貨で使った手法なので簡単にできるのですが、なんか以前と同じ方法というのはつまらないと思いました。

そこで、今回はGoogleCloudPlatformとWebを使って同じことができないかと考えました。

GoogleCloudPlatformで行うことは2つです。

1。為替APIを使って定常的にデータベースへ保存する

2。保存したデータを取得するAPIをさらに自作する

そのうえで、

3。自作APIでデータを扱えるWebアプリを作成します。

で、GoogleCloudPlatformで上記を実現するのにGoogleAppEngineとGoogleCloudFunctionsのどちらがいいか迷いました。先日作成したアプリではGoogleCloudFunctionsを使っているのですが、GoogleAppEngineのほうがメジャーですし、別にGoogleCloudFunctionsで不満はないのですが使いやすいのかなと。。でちょっと調べてみたんですけど、そもそも値段が違うんですよね。GoogleCloudFunctionsは一つの関数しか割り当てられない代わりにものすごくやすい。200万回の呼び出しは無料で、次の200万回で1ドル程度の料金です。驚きの安さである一方、GoogleAppEngineは驚きの高さなんですよね。。一番安いプランでも月に7ドルかかってしまいます。一つの関数しか割り当てられないGoogleCloudFunctionsと比べて使い勝手はよさそうだけど、あまり使いこなせるのかと。。

https://cloud.google.com/appengine/pricing?hl=ja

AppEngineは時間に対して料金がかかります。アイオワのサーバでインスタンスを作成した場合、1時間あたり0.01ドルなので、月に7ドル程度はかかってしまいます。

CloudFunctionsの場合

https://cloud.google.com/functions/pricing

こちらの場合は、回数に対して費用が発生します。最初の200万回が無料ということなので、よっぽどアクセスを集められる以外はCloudFunctionsのほうがよさそうです。

ただ、CloudFunctionsの場合は一つの関数しかアップできないのであまり使い勝手はよくないかもしれません。まぁ、CloudFunctionsで初めてみてからの移行にしようかな。。

Angular(Ionic)で相方向バインディングを行う最低限のテンプレート

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のコレクションからデータ一覧を取得する

概要

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とはなにか

HMSとはなにか

HMSとは、Huawei Mobile Serviceの略です。Google Mobile Service(GMS)のHuaweiバージョンです。

GMSとは何かがわかればHMSがどういうものかすぐにわかると思いますが、これは素のAndroidにGmail,YoutubeなどGoogle独自のアプリや機能を付与したものになります。

2019年からの貿易戦争により、アメリカは中国に対して禁輸措置をとりました。その結果、HuaweiはGMSに代わりサービスを独自で提供する必要に迫られました。具体的には、先ほど挙げたメールサービスやマップ、ユーザー認証などになります。詳細を見ていきましょう。

HMSの2つの構成

HMSには、利用者用のコンポーネント(AppGallery、その他のファーストパーティのHuaweiアプリとサービス)と、HMS Coreと呼ばれる開発者向けコンポーネントがあります。HMS Coreは、開発者がアプリの作成と改善に使用できるさまざまなAPI、SDK、およびサービスで構成されています。

ユーザー向けHMS

Huawei ID

GoogleアカウントやAppleIDに相当します。ユーザーのデータをこれに紐づけて管理します。

Huawei Mobile Cloud

HuaweiIDごとに用意されたクラウドのストレージです。最大5GBまで写真や音楽などが保存できます。

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アプリケーションとしてデプロイする

概要

Angular,IonicをWebアプリとしてデプロイする方法について記述する。

firebaseを使ってホスティングする方法と、Xserverでapacheでホスティングする方法を試した。firebaseでホスティングするのは(慣れてしまえば)至れり尽くせりであるが、先のことを考えると値段が気になるためXserverのほうが望ましいように感じた。

Xserverで既にドメインを持っていれば、そのサブドメインにデプロイすることで追加負担0でサイトをデプロイすることができる。速度も速いし、こちらのほうがいい。

Firebaseでのホスティング

https://qiita.com/M_Faust/items/a514b8a79d2fd13cb72b

https://qiita.com/daikiojm/items/89f46bd83c9a2285bbc6

が参考になった。

まず、ライブラリのインストールをする

npm install -g firebase-tools

ログインする

firebase login

なお、.firebasercというファイルが生成されているので2度目以降はこれを消す。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を作成し、編集した

https://mi12cp.hatenablog.com/entry/2018/08/25/224149
<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を導入する

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-adsense

Angularとバージョンを合わせる必要がありますので、公式の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のホームページから確認可能です。

スクリプトの確認のためには下記画面の右下の<>のボタンをクリックしてください。

また、広告のスタイルを固定するためには、鉛筆のマークを押してレスポンシブから固定にします。

まじで苦労してけど表示されるようになった。

https://ocr-app.np-sys.com/

AngularでSEOを考えたときに考慮すること

背景

AngularでSEOに配慮する場合、何に気をつければいいかGoogle Developers Codelabsで勉強したのでその内容を記載します!

https://codelabs.developers.google.com/codelabs/making-a-single-page-app-search-friendly

Google Developers CodelabはハンズオンでGoogleのサービスが学べるもの

https://codelabs.developers.google.com/

1.まずはモバイルフレンドリーかチェックせよ

モバイルファーストと言われて久しいですが、まずはモバイルフレンドリーかチェックをするように記載されていました。

便利なサイトが紹介されていて、このサイトでリンク貼り付ければ調べられます

https://search.google.com/test/mobile-friendly

2.ページ毎にタイトルとメタデータを設定せよ

2番目に紹介されていたのは、基本的なことだが、ページにタイトルを付与し、メタデータディスクリプションを設定することだった。確かにAngularで作成する際、設定したことがなかった。勉強になった。AngularのConponentに直接タイトルとメタデータディスクリプションは設定できないとのことなので、BrowserModuleを使って設定するとよさそう。

https://www.atmarkit.co.jp/ait/articles/1802/05/news142.html

https://www.atmarkit.co.jp/ait/articles/1803/30/news135.html

3.Googlebotが見つけられるようにリンクを記載する

google botがURLを見つけられるようにリンクをちゃんと記載する。

Codelabにはこう記載があった。

A few tips on links

As a rule of thumb, to make sure Googlebot finds all views, make sure that:

  • All links are implemented as <a href="">
  • All links have a valid URL as their href attribute (no javascript: URLs)
  • All views have a URL that doesn’t use the fragment identifier to load different content (no URLs like “/#example” or “/#!example“, sometimes called a hash URL)

要するにハッシュタグを使わないこと、aタグを使うようにとのこと、JavaScriptでレンダリングしないようにするとのことだった。

例として出されていたのは下記

<button class="mdc-button mdc-button--outlined">
  <span class="mdc-button__label">Learn more</span>
</button>

はこう書く

<a class="mdc-button mdc-button--outlined">Learn more</a>

対応するJavaScriptはこレから

item.querySelector('button').addEventListener('click', function () {
  location.href = story.link;
});

これに変える

item.querySelector('a').setAttribute('href', story.link);

このサイトでパフォーマンスを調べると良いとのこと。

https://developers.google.com/web/tools/lighthouse/

エラー時における処理

ページが見つからない場合、リダイレクトするようにする

https://codelabs.developers.google.com/codelabs/making-a-single-page-app-search-friendly/#6

所感

大変勉強になった。AngularだからSEOが不利というわけでもなさそうです。

新しいMac Book Proが届いた!

ついに新しいMacが届きました。2019年の秋に購入したのですが、128GBのストレージがいっぱいになってしまったので新しく購入しました!(2021年追記。この記事を書いたのは2020年の夏くらい)

テンションあがります!!

スペック

開封から立ち上げ

普通のダンボールで届きました。

代引きにしたので玄関口で20万8030円を支払い、無事に受け取り。

箱から恐る恐る出して机に起きました。ドキドキしますね。

開けるとこんな感じです。

PCを取り出すとこんな感じ。

さて、早速開きます。

名前の入力、言語の設定、データの扱いに関する設定のあと、タイムゾーンを設定すると5分ほどで無事に立ち上がりました。うれしいです。

Catalinaの新しいデスクトップですね。

基本設定

日本語と英語の切り替え

まず、さっそく日本語入力と英語入力の設定を行います。

Appleのマークからシステム環境設定を選びます。

そのあと、キーボードを選択します。

4番目のTabの入力ソースから設定します

下側の画面からはずれたところに3つのチェックボックスがあり、このなかのCapsLockでエイジ入力と切り替えるでOKです。

スクロールの方向を変更

システム環境設定からトラックパッドを選んで、2番目のTabでスクロールの方向:ナチュラルの選択を解除すればいいです。

ドック(下のアイコンが並んだもの)のカスタマイズ

システム環境設定からDockを選びます。

わたしは小さめにして、左にして、普段は隠すようにしました

右クリックの設定

システム環境設定からトラックパッドを選んで、副ボタンの設定を行います。今回から同時に日本の指で押して右クリックするようにするので設計しません、

バッテリの残量の数字表示

バッテリーアイコンの上でクリックして設定するだけです。

隠しファイルのデフォルトでの表示

どこかのフォルダでcommand shift . を押します

その他

Macにはbashrcとbash_profileが最初からないので、ユーザーのルートで.bash_profile と.bashrcを作成します。.bash_profileがログイン時に実行され、.bashrcはターミナル起動時の実行となります。

.bashrcに下記を記入しておきます

alias o=’open ./’
alias p=’pwd’
alias l=’ls’
alias n=’cd ~/Desktop;open ~/Desktop’

→と思ったのですがうまく反映されず。

catalonaからはbashではなくてzshに変わったようです。ホームディレクトリに.zshrcと.zshprofileを作成します。立ち上げた時に実行されるのが.zshprofileでターミナルを普通に立ち上げた時に実行されるのが.zshrcです。

https://qiita.com/ktr_type23/items/3eb782f98c7a5f4c60b0

ソフトウェアのインストール

ソフトウェアをインストールします。

項目
Chrome普通にインストールします。dmgファイルをインストールしてから、ダブルクリックで起動して画面の操作にしたがってアイコンを移動するだけです。インストールあと、dmgファイルはゴミ箱に移動です、
node.jshttps://nodejs.org/ja/からインストールしました。pathの設定が勝手にされたのでそこがよく分からずですが、使えるようになったのでよしとします
Anacondahttps://www.anaconda.com/products/individualからインストールします.普通にインストール完了。
AndroidStudiohttps://developer.android.com/studioからインストールします。
Ionichttps://ionicframework.com/docs/intro/cliを参考にして、sudo npm install -g @ionic/cliでOK.ionic -vで情報表示されたらOK

Filezillahttps://filezilla-project.org/download.php?platform=osxからインストール。HPが古い感じだったので警戒したがURLでここと判断.FileZilla_3.48.1_macosx-x86.app.tar.bz2というtar.bz2なので、それをダブルクリックするtどう改装に保存される。アプリケーションフォルダに移動する
GImphttps://www.gimp.org/
VScodehttps://azure.microsoft.com/ja-jp/products/visual-studio-code/からダウンロード
Atomhttps://atom.io/からダウンロード
Capacitorhttps://capacitor.ionicframework.com/docs/getting-started/を参考にして、npm install –save @capacitor/core @capacitor/cliでインストール
Xcodehttps://apps.apple.com/jp/app/xcode/id497799835?mt=12からインストール

Coccoapodnpx cap add iosをした時に必要と言われたので、、https://cocoapods.org/に基づいてsudo gem install cocoapodsでインストール
Vivaldihttps://vivaldi.com/ja/からインストール
FIrefoxhttps://www.mozilla.org/en-US/firefox/download/thanks/からインストール

その他

・Githubように .sshをホームディレクトリに配置。

Xcodeの設定引継ぎ

めちゃくちゃ苦労した。全て記録に残せたわけではないが、少なくとも以前のMacは必要なかった。

AppleDeveloperサイトに行って、ログインする。Certificates, Identifiers & ProfilesからPlatformのカラムがALLのもののうち、DevelopmentとDeistributionを選んで、ダウンロードしてキーチェーンに登録する。これを新しい方でダブルクリックして登録する

それと、app developer idでパソコンでログインして、新しいMacを登録する。そうするとチームが選べるようになる。

基本的には以上の二つでOK.ってこんだけのことだったっけ?

Angular(Ionic)をWebアプリケーションとしてapache(Xserver)でデプロイする

XserverでAngular(Ionic)をホスティングする方法です。

流れとしては

  • サブドメインを設定
  • そのサブドメインにionic build –prodで生成したファイルをアップロードする
  • そのサブドメインのルートに.htaccessを設置する
  • 常時SSL化する
<IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteRule ^index\.html$ - [L]
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule . index.html [L]
</IfModule>

https://awesome-rainbow-colors.com/2020/07/25/ionic%E3%81%AEandroid%E3%82%A2%E3%83%97%E3%83%AA%E3%82%92web%E3%82%A2%E3%83%97%E3%83%AA%E3%82%B1%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E3%81%A8%E3%81%97%E3%81%A6%E3%83%87%E3%83%97%E3%83%AD%E3%82%A4/

常時SSL化する

常時SSL化するためには、2つのことを行います

https://www.xserver.ne.jp/manual/man_server_fullssl.php

まず、無料独自SSLを導入します。これでHTTPSで接続するとSSL通信できるようになります。

さらに、HTTPで接続した時に自動でリダイレクトするように.htaccessに下記を追加します。

RewriteEngine On
RewriteCond %{HTTPS} !on
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]

なので最終的には、下記の.htaccessを作成して、サブドメインのプロジェクトのルートフォルダに設置すればいいです。

RewriteEngine On
RewriteCond %{HTTPS} !on
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]

<IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteRule ^index\.html$ - [L]
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule . index.html [L]
</IfModule>

【転職】ロイヤルエージェント株式会社を利用してみた

ロイヤルエージェント株式会社を利用して転職活動を行いました。結局縁がなかったのですが、転職エージェント選びは転職をする上で大事な選択です。そこで、転職を検討している方のためにロイヤルエージェント株式会社2ヶ月程度利用をする中で感じたことを記載します。

まとめると下記の3点です

  • 特記するほど悪い点はないが、手厚いフォローはない。方針が決まった30代向けのエージェント
  • 求人は少なく偏っていると感じたが、良い求人はある
  • 他の大手エージェントと合わせて利用すると良い

特記するほど悪い点はないが、手厚いフォローはない

ROYAL AGENT株式会社は2018年に設立された会社です。元リクルートで求人業務をしていた長岡裕己さんという方が創立されています。AIやデータサイエンス領域に特化した人材紹介事業、データ活用コンサルティングをされています。

メールのレスポンスも早く高いビジネススキルを感じましたので、その点は良かったです。ただ、個人的には応募者を右から左にただ流しているような印象も受けました。あまり経歴書のアドバイスなどもなかったですし、もう少し言ったことだけではなく突っ込んで相談に乗ってほしかったかな。方針が決まった30代向けのエージェントなのかもしれません。個人的には5点満点だと2点をつけたいと思いますが一般的には3点かな。人によっては4点5点かも。

求人は少なく偏っていると感じたが、良い求人が中には結構ある

紹介いただいたものは年収レンジも高かったです。リクルートやDENSO系、分析会社の求人がありました。ただ、個人的にはSES企業はあまり興味はなかったのでリクルートを受けました。条件厳しくしたのでその中で紹介いただいたのはとてもよかったです。一方、結構玉石金剛というか、個人的な繋がりで紹介している求人が多いと感じました。リクルート然り、知り合いが立ち上げた会社とか。結構偏っていると感じたのでちょっとこれは微妙だったかな。

他の大手エージェントと合わせて利用すると良い

以上から、他の大手エージェントと合わせて利用すると良いと思います。

一部いい求人を紹介してくれるので良かったですが、あまり手厚いフォローもないし、ビビッと来るものを紹介されたら利用してみる。でもメインのエージェントは別にもった方がいいと思いました。相談する相手という感じではないし、向こうもポンポンしたペースを望んでいると感じました。どちらかというと30代向けのエージェントです。

OANDAでGOLD会員になってAPIを使用するための費用をスプレッドから算出すると4000円程度

絹田
絹田

OandaのAPIの実質負担金額について説明するよ

2021年3月までFXでAPIといえばOandaというくらい有名だったOanda APIですが,とあるベンチャー企業のAPI不正利用とみられるトラブルにより2021年3月から無料で利用できなくなりました.2021年5月においてOandaAPIを利用するに当たっての条件と費用についてまとめます.

概要

従来は20万円の入金によりOanda APIを無料で使うことができましたが,現在は月に50万ドル以上の取引を毎月行ってゴールド会員になる必要があります.海外の業者だと月当たり1000アクセスまでは無料で配信する会社があるのですが(※末尾にリンクあります)Oandaのようにオーダーブックは提供していませんので,PythonなどでFXの自動売買を検討する場合,Oandaを利用できれば大きな強みになります.

Oanda APIを利用する条件

2021年現在,Oanda APIを利用するには月に50万ドル以上の取引を行いゴールド会員になる必要があります.会員ステータスはRegular,Silver, Goldの3区分で

  • Regular会員:口座を保有しているデフォルトの状態
  • Silver会員:前月1万USD の取引実績
  • GOLD会員:前月50万USDの取引を実績

取引量の算出は往復で算出すると言うことですので,例えばUSD/JPYでUSD25万を新規で買いUSD25万を決済する(売る)とUSD50万として計算されGOLD会員となります。1ドル100円とすると5000万円ですのである程度大きな額を売買する必要があります

実際の利用料はいくらなのか

では,50万USDの取引は実際どの程度のコストなのでしょうか.スプレッドから算出すると現実的な数字が出てきます。

OANDAのプロコースのスプレッドは0.8pipです。ベーシックならこの半分ですが、APIを使うならプロコースが前提となるため,GOLD会員になるための費用(=APIの利用費用)は下記のようになります

(0.8)*50*10000/100 = 4000円

月に4000円でOanda APIが使えるという計算になりました.50万ドルの取引と言われるよりハードルは下がりますが,以前は無料だったことを考えるとかなり高いという印象です.

その他のAPIを提供している会社

The Currency Exchange Rates 

月に250回までなら無料です.

https://exchangeratesapi.io/pricing/

Open Exchange Rates 

個人的には一番信頼感があります.月に1000回までなら無料ですし,12ドル払えば1時間ごとのデータが得られます.

Xe

有料ですがまぁ信頼感はあります.

https://www.xe.com/xecurrencydata/

その他のサイトについて

https://medium.com/@yasunaka.cho.rakuten/top-10-currency-and-forex-apis-oanda-xe-and-currencylayer-9914c830d4b2

また,OandaがAPIの無料提供をやめた理由については下記に書きました,QUOREA FXはほんと迷惑です。

絹田
絹田

読んでくれてありがとう.これからもよろしくね

QUOREA FXが迷惑な件について

QUOREA FXがOANDAのAPIを無断で使用していることもあり、OANDA APIを使用したFXの自動売買ができなくなってしまいました。明確な原因はOANDA内部の人間ではないのでわかりませんが、長年提供してきたOANDA APIが突然使えなくなり、同時にQUOREA FXを運営している株式会社efitを名指しで非難するメールが公式メールとしてきていることから判断すると、QUOREA FXのせいだと考えても妥当だと思います。QUOREA FXを運営している株式会社efitは非常に迷惑だと思います。

QUOREA FXは、AIによる高度な投資戦略が使える自動売買プラットフォームと謳っています。きれいなランディングページを作っていますが、実態はOANDAのデータを元に作成したWebシステムのようです。最近はPythonやDataRobotを使えば簡単にAI分析はできますから、浅薄なサービスとだと思います。

https://quorea.jp/login.php

OANDAから名指して非難するメールはこちら。

【重要】QUOREA FXを利用されるために口座開設されたお客様へ

平素はOANDA JapanのFXサービスをご利用いただき、誠にありがとうございます。 近頃、QUOREA FXおよび弊社の提供するAPI関連についてのお問い合わせが多く寄せられております。しかしながら、QUOREA FXを運営する株式会社efitは、弊社の配信レートおよびシステムを無断で使用し、営業しており、同社と弊社の間には何の契約もございません。 従いまして、株式会社efitのサービスについてサポートすることは致しかねます。 また、株式会社efitのウェブサイト等で、弊社があたかも「取引所取引」を提供しているような表現がございますが、弊社の外国為替証拠金取引は、お客様と弊社との間での「相対取引」でございます。どうぞ誤解のないようお願い申し上げます。 なお、弊社がお客様へ発行するAPIトークンを第三者と共有等をすることは、弊社での口座開設時に同意された利用規約に反する行為でございます。口座を閉鎖する場合もございますので、十分ご注意ください。 弊社口座に建玉がある場合には、弊社取引システムをご利用頂き、ご自身の判断で決済くださるようお願いいたします。建玉のお取引に関し、ご不明な点等ございましたら、弊社カスタマーサービス(0120-923-213)へお問い合わせください。 QUOREA FXのサービスについては、株式会社efitに直接お問い合わせください。またQUOREA FXのサービスに何らかの問題等がある場合には「金融庁 金融サービス利用者相談室(0570-016811)」あるいは「特定非営利活動法人証券・金融商品あっせん相談センター(0120-64-5005)」までお問い合わせください。 今後ともOANDA Japanをご愛顧賜りますよう、何卒よろしくお願い申し上げます。

今後ともOANDA Japanをご愛顧賜りますように、と書いてありますが、今回のAPIの提供制限はあまりにも改悪ですからね。。個々の事例の中で判断すれば良かったのではないかと思います。

もし影響が株式会社efitのせいだとすれば、非常に迷惑な話です。

ついでに言うと、株式会社efitの代表がMENSA会員であることを公言しているのが顧客には心底どーでもいい話で、逆立ちしても好きになれません。

現在、Oandaでどれくらいの費用でAPIを利用できるのかスプレッドから計算してみたら4000円くらいでした。