AngularでSEOを考えたときに考慮すること
背景
AngularでSEOに配慮する場合、何に気をつければいいかGoogle Developers Codelabsで勉強したのでその内容を記載します！
https://codelabs.developers.google.com/codelabs/making-a-single-page-app-search-friendly
Google Developers CodelabはハンズオンでGoogleのサービスが学べるもの
1.まずはモバイルフレンドリーかチェックせよ
モバイルファーストと言われて久しいですが、まずはモバイルフレンドリーかチェックをするように記載されていました。
便利なサイトが紹介されていて、このサイトでリンク貼り付ければ調べられます
https://search.google.com/test/mobile-friendly
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
３.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
hrefattribute (nojavascript: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が届いた!
1
ついに新しい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.js | https://nodejs.org/ja/からインストールしました。pathの設定が勝手にされたのでそこがよく分からずですが、使えるようになったのでよしとします | |
| Anaconda | https://www.anaconda.com/products/individualからインストールします.普通にインストール完了。 | |
| AndroidStudio | https://developer.android.com/studioからインストールします。 | |
| Ionic | https://ionicframework.com/docs/intro/cliを参考にして、sudo npm install -g @ionic/cliでOK.ionic -vで情報表示されたらOK | |
| Filezilla | https://filezilla-project.org/download.php?platform=osxからインストール。HPが古い感じだったので警戒したがURLでここと判断.FileZilla_3.48.1_macosx-x86.app.tar.bz2というtar.bz2なので、それをダブルクリックするtどう改装に保存される。アプリケーションフォルダに移動する | |
| GImp | https://www.gimp.org/ | |
| VScode | https://azure.microsoft.com/ja-jp/products/visual-studio-code/からダウンロード | |
| Atom | https://atom.io/からダウンロード | |
| Capacitor | https://capacitor.ionicframework.com/docs/getting-started/を参考にして、npm install –save @capacitor/core @capacitor/cliでインストール | |
| Xcode | https://apps.apple.com/jp/app/xcode/id497799835?mt=12からインストール |
| Coccoapod | npx cap add iosをした時に必要と言われたので、、https://cocoapods.org/に基づいてsudo gem install cocoapodsでインストール |
| Vivaldi | https://vivaldi.com/ja/からインストール |
| FIrefox | https://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)でデプロイする
1
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>
常時SSL化する
常時SSL化するためには、２つのことを行います
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>
【転職】ロイヤルエージェント株式会社を利用してみた
1
ロイヤルエージェント株式会社を利用して転職活動を行いました。結局縁がなかったのですが、転職エージェント選びは転職をする上で大事な選択です。そこで、転職を検討している方のためにロイヤルエージェント株式会社２ヶ月程度利用をする中で感じたことを記載します。
まとめると下記の３点です
- 特記するほど悪い点はないが、手厚いフォローはない。方針が決まった３０代向けのエージェント
- 求人は少なく偏っていると感じたが、良い求人はある
- 他の大手エージェントと合わせて利用すると良い
特記するほど悪い点はないが、手厚いフォローはない
ROYAL AGENT株式会社は201８年に設立された会社です。元リクルートで求人業務をしていた長岡裕己さんという方が創立されています。AIやデータサイエンス領域に特化した人材紹介事業、データ活用コンサルティングをされています。
メールのレスポンスも早く高いビジネススキルを感じましたので、その点は良かったです。ただ、個人的には応募者を右から左にただ流しているような印象も受けました。あまり経歴書のアドバイスなどもなかったですし、もう少し言ったことだけではなく突っ込んで相談に乗ってほしかったかな。方針が決まった３０代向けのエージェントなのかもしれません。個人的には５点満点だと２点をつけたいと思いますが一般的には３点かな。人によっては４点５点かも。
求人は少なく偏っていると感じたが、良い求人が中には結構ある
紹介いただいたものは年収レンジも高かったです。リクルートやDENSO系、分析会社の求人がありました。ただ、個人的にはSES企業はあまり興味はなかったのでリクルートを受けました。条件厳しくしたのでその中で紹介いただいたのはとてもよかったです。一方、結構玉石金剛というか、個人的な繋がりで紹介している求人が多いと感じました。リクルート然り、知り合いが立ち上げた会社とか。結構偏っていると感じたのでちょっとこれは微妙だったかな。
他の大手エージェントと合わせて利用すると良い
以上から、他の大手エージェントと合わせて利用すると良いと思います。
一部いい求人を紹介してくれるので良かったですが、あまり手厚いフォローもないし、ビビッと来るものを紹介されたら利用してみる。でもメインのエージェントは別にもった方がいいと思いました。相談する相手という感じではないし、向こうもポンポンしたペースを望んでいると感じました。どちらかというと３０代向けのエージェントです。
OANDAでGOLD会員になってAPIを使用するための費用をスプレッドから算出すると4000円程度
1
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ドル払えば１時間ごとのデータが得られます．
Xe
有料ですがまぁ信頼感はあります．
https://www.xe.com/xecurrencydata/
その他のサイトについて
また，OandaがAPIの無料提供をやめた理由については下記に書きました，QUOREA FXはほんと迷惑です。
読んでくれてありがとう．これからもよろしくね
QUOREA FXが迷惑な件について
1
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分析はできますから、浅薄なサービスとだと思います。
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円くらいでした。