AWSの仮想MFAを失くしそうになって焦った話(携帯を変える際は要注意、Google Authenticator)

先日ひさしぶりにプライベートで利用している個人のAWSにログインしようとした。
ちょいと用事がありでルートでログインしようとしたのだが、そのときにMFAの番号を求められた。

私はこのアカウントのMFAをGoogle Authenticatorで管理していたので、普段どおり番号をチェックしようとしたのだが、あれ、番号がない、、、、、、、！？

というわけで、軽くパニックになりかけたが、ふと気づいた。。
そう言えばこのアカウント、機種変更前のiPhoneのGoogle Authenticatorで設定したのだったと、、、

というわけで、古いiPhoneを引っ張り出してきて、そちらから番号を設定して無事にログインができた。

ちなみに、仮想MFAを別のデバイスに変える場合は、一度仮想MFAの設定を削除した後、新しいデバイスで紐付け直す必要がある。
そのため、古いiPhone側のものを削除し、現在使っているもので新たに設定し直した。

仮想 Multi-Factor Authentication (MFA) デバイスの有効化 (コンソール) - AWS Identity and Access Management

もし古いiPhoneを初期化していたりして相当面倒な自体になっていたはずだ。

セキュリティ周りは日々便利になっていくが、同時にミスを犯すと大変なことになるな、というのを改めて痛感した次第。

機種変更時のGoogle Authenticatorのデータ引き継ぎについて

ちなみにGoogle Authenticatorのデータ引き継ぎはできないようだ。
そのためデータの移行作業する際は、今回のように古いのから新しいものへの移行作業が必要になってくると思われる。
すぐに初期化などはせず、Google Authenticator内の設定をしっかり新しいデバイスに引き継ぐのを忘れないように気をつけたいところである。

2段階認証アプリ（Authenticator）のスマホ機種変更に伴う引継ぎについて - Google アカウント コミュニティ

Logic Pro X 10.5 でLogic Pro Xが大幅に進化していた

私も普段利用しているLogic Pro X。あまりソフト自体のアップデートには無関心で今まで生きてきていたが、今回のアップデートは結構大きな変更だったらしい。

www.apple.com

確かにEXS24がSamplerになって、なんか色々変わったなーとか考えていたけど、だいぶ変わり具合が大きそうなので、ちょっとLogic Pro X 10.5 の新機能を使ってみようかと思い出した。

ちなみに新機能にフォーカスしたチュートリアルも用意されているので、これを触ってみてもいいかもしれない。
(自分もLive Loopsのチュートリアルだけやってみたが、なんかあまりしっくり来なくてすぐに辞めてしまった...笑。あとでちゃんとやり方を調べて実際の曲作りで使ってみようと思う)

チュートリアルではないのだが、Logic Pro X 10.5 で追加されたステップシーケンサーも試してみた。
こちらは感覚的に使えるので、サラッと遊んでいるうちにトラックができてしまう感じで良い。作曲でも、ただの遊びでも使える感じで、ステップシーケンサーは魅力的なツールだなと思った。

実際に試してみたところをYouTubeに上げたので、動画を貼っておく。

www.youtube.com

『夢はボトルの中に 世界一正直な紅茶のスタートアップ』を読んだ感想

下書きフォルダに置いたままになってしまっていた書きかけの文章をあげます。 過ごし前のことになります。

---

最近教えてもらってこのポッドキャストを聞いている

‎Off Topic // オフトピック：Apple Podcast内の#25 年末年始で読みたい本5冊

そして上に貼った回の中で紹介されている 『夢はボトルの中に 世界一正直な紅茶のスタートアップ』 という本が面白そうなので、さっそく買ってみた。
(ちなみにこちらの本はkindle版がなかったので、紙の本で購入)

夢はボトルの中に――「世界一正直な紅茶」のスタートアップ物語

子どもから大人、大統領まで虜にする奇跡のような紅茶ブランド
「オネストティー」の10年史を描いたノンフィクション・ビジネス漫画!
製品トラブル、資金難、仲間の裏切り、投資家の誘惑、家族と仕事の両立…
とにかく失敗続きのイェール大学教授&教え子コンビの「七転八倒」ストーリー。
「これまでにないもの」をつくるのは、こんなに大変で…こんなに素晴らしい!

Amazon

Podcastの中でも話されていたけど、スタートアップのリアルな成功体験が、読みやすい漫画というフォーマットで書かれていて、とても良い本だった。

個人的に漫画の絵柄はクセがない感じで、自然と入り込みやすいし、話のテンポも非常に良いので、漫画としてどんどん読み進めていける。

ただ内容的には起業していく上で、リアルな側面が次から次へと出てきたりして、なかなかフィクションさながらにハラハラさせられる。

私は現在スタートアップでソフトウェアエンジニアをしているが、この本を読んでいくと仕事のことがふっとよぎる瞬間があったりして、色々と考えさせられたりした。

そして勿論この本には成功体験も書かれているので、例えば起業を考えている人には良い着火剤となるような本だと思う。

上にも書いたが、残念ながらKindleでは出ていない。が、紙で一冊本棚に置いておいて、気が向いた時にサラッと読み返せる類の本にもなっているので、自宅に一冊あっても良いかもしれない、そんな本です。

あと、読むと紅茶が飲みたくなります。

ディレクトリ、またはプロジェクトごとに利用しているNode.jsのバージョンを自動的に切り替える方法(nvm使用)

ディレクトリ・プロジェクト内で設定されているNode.jsのバージョンを自動的に切り替える

前提条件

ここでは nvm を利用して、この設定を行うので、まずは nvm がインストールされていることが条件。

nvmrcをプロジェクトルートに置くことで、自動的に切り替えるようにする

nvm を利用して、プロジェクトごとに異なるNode.jsのバージョンを利用して開発を行うケースがある。

このような場合、こっちのプロジェクトではNodeのv12系、こちらではNodeのv10系に切り替える、などといちいちNode.jsのバージョンの切り替えを行うのが大変手間である。

nvm ではプロジェクトで利用しているNode.jsのバージョンを記載した .nvmrc ファイルをプロジェクトのルートに置いておくことで、ディレクトリを移動した際に勝手にNode.jsのバージョンを読み取って、使用しているNode.jsのversionに自動的に切り替えるやり方がある。

設定の方法はnvmのREADMEに記載されていた。
私はzshを使っているので、下記を参考にした。

https://github.com/nvm-sh/nvm#calling-nvm-use-automatically-in-a-directory-with-a-nvmrc-file

上にも書いてあるが、自身の ~/.zshrc 内に下記を追記すればOKだった。
(これをそのままコピペするだけで動く)

# place this after nvm initialization!
autoload -U add-zsh-hook
load-nvmrc() {
  local node_version="$(nvm version)"
  local nvmrc_path="$(nvm_find_nvmrc)"

  if [ -n "$nvmrc_path" ]; then
    local nvmrc_node_version=$(nvm version "$(cat "${nvmrc_path}")")

    if [ "$nvmrc_node_version" = "N/A" ]; then
      nvm install
    elif [ "$nvmrc_node_version" != "$node_version" ]; then
      nvm use
    fi
  elif [ "$node_version" != "$(nvm version default)" ]; then
    echo "Reverting to nvm default version"
    nvm use default
  fi
}
add-zsh-hook chpwd load-nvmrc
load-nvmrc

.nvmrcが用意されているプロジェクトに移動したタイミングで、.nvmrcに記述されたnodeのversionを読み取って、nvm useしてくれる。
(そのバージョンがないローカルにない場合、 nvm install してくれるようだ)

この設定を行ってから、Node.jsの開発がだいぶ楽になったので、備忘録として残しておく。

そう言えば過去にnvm関連の投稿をしていたので、そちらも載せておく。
(最近 nvm を更新していなかったことに今気づいたので、これ見て nvm のversionあげたところ。ちなみにアップデート前の最新のコミットログが2018年だった..)

nvmのインストールとアップデート(nvm自体のversionを挙げるとき)のメモ - at backyard

AMP対応ページでYouTubeの動画を貼る方法

自分への備忘録。

AMP対応ページでYouTube動画を貼るのは、思ったよりもだいぶ簡単だった。

下記のページを参照すればOK。
具体的には amp-youtube というタグを使うことになる

https://amp.dev/ja/documentation/components/amp-youtube/

AMP対応ページにYouTubeを貼る手順

headタグ内で下記のscriptを読み込ませる。

<script async custom-element="amp-youtube" src="https://cdn.ampproject.org/v0/amp-youtube-0.1.js"></script>

後はYouTube動画を貼りたい箇所に下記のタグを貼り付ければOK

<amp-youtube
  data-videoid="6ooMw2FOlN0"
  layout="responsive"
  width="480" height="270"></amp-youtube>

上にあるdata-videoid というのは YouTube URLの下記の部分のこと https://www.youtube.com/watch?v={data-videoid}

例えば先日自分が貼った下記の動画なら 6ooMw2FOlN0 の部分のことになる。

https://www.youtube.com/watch?v=6ooMw2FOlN0

autoplay などの属性も扱っているので、ドキュメントをひと通り見て色々と試してみると面白いかも。

HTML5 UPのテンプレート(Identity)をAMP対応してみたときのYoutube動画

HTML5 UP(Identity)をAMPに対応させてみるYoutube動画

試しに作業ログとして撮っていたのでYouTubeにあげた。

youtu.be

HTML5 UPのテンプレート(Identity)をAMP対応してみた (Qiita)

またQiitaにもAMP対応した際のことを書いた。

qiita.com

既存のWebページ(静的HTMLのペラサイト)をAMP対応してみた

自身の音楽ポートフォリオサイト(静的HTMLのペラサイト)をAMP対応してみた

以前、自身が作ってきた音楽をまとめた音楽ポートフォリオを、HTML5 UPのテンプレートを用いて、１枚だけのペラサイトとして作成した。

shinshin86.com

その時の詳細は下記に書いたので、もしよければ読んでみてください。

shinshin86.hateblo.jp

今回AMPにちゃんと触れてみようと思い、思い切って自身のポートフォリオサイトをAMP対応してみることにした。
サイト自体は静的なHTMLで構成されている非常にシンプルな構成なので、AMP対応方法の勉強にもうちょうどよいかと考えた次第である。

AMP対応手順

実際にAMP対応のために行った作業だが、まず前提として、今回対応した静的なHTMLのみで構成されたペラサイトとなる。

また、通常のHTMLとAMP対応のHTMLを出し分けるやり方もあるが、今回自分は既存のHTMLをAMP対応版にそのまま差し替え という手法をとった。単純に２つのHTMLを管理するのが面倒だったというのもあるし(というかこれが大きい...)、そもそもそれほど制限されたAMP対応版のHTMLでページの内容的には問題なかったからだ。
またAMP対応自体はWebのベストプラクティスを強制される、という認識なのでAMP対応すれば必然的にサイトパフォーマンス的には良い結果となるのではないかと考えている。
(ここらへんのことを考えると、Next.jsのAMP対応などは管理しやすそうだ)

実際に試したことを箇条書きで書いていくと、ざっくり下記のような作業となった。
(これはまあ、全体的になかなか泥臭い作業だったので、とりあえず求められたのは忍耐、という感じであった。)

• こちらのページを参考にAMP対応に必要なマークアップ修正を行う
  • AMP HTML ページの作成 - amp.dev
• 外部から読み込んでいるCSSをインラインに展開させる
  • <style amp-custom></style amp-custom> の中に利用しているCSSを泥臭く展開していく作業
• AMPでは利用できるJavaScriptに限りがあるので、対応していないJavaScript処理は思い切って削除
• Chrom拡張機能のAmp Validatorを見ながら、ひたすらエラーを潰していく
  • img タグを amp-img タグに置き換えたりとかそういう作業がほぼほぼだった
• Google Analyticsの対応
  • こちら( AMP 用に Google アナリティクス セッション統合の初期設定を行う - アナリティクス ヘルプ ) を参考にして設定した。
  • Google Analytics用のIDは新たに作成しなおして、既存のGoogle Search Consoleに新たに紐付け直す形で対応した(下に補足を追加した)。
• ちなみにGoogle Search Consoleの所有権の確認などは、AMPだからといって特別なことはしなくて大丈夫だった。
  • 指定された google-site-verification のmetaタグを head タグの一番うしろに配置してGoogle Search Console側で確認させればOK

AMP対応時に実際に設定したGoogle Analyticsに関する内容

参考になるかわからないが、自分の場合は実際に下記のようなHTMLタグでGoogle Analytics対応をしている。

<amp-analytics type="gtag" data-credentials="include">
  <script type="application/json">
   {
     "vars": {
       "gtag_id": "Google Analytics用のID",
         "config": {
           "Google Analytics用のID": {
             "groups": "default"
           }
         }
     }
   }
  </script>
</amp-analytics>

AMP対応前後でのサイト計測の差異

ちなみにAMP対応することで、これらの値がどれぐらい向上できるも検証してみようと思い、実際にAMP対応前後でのサイトパフォーマンスを計測してみた結果が下記となる。

AMP対応前

AMP対応後

performanceがやや落ちているが、Accessibilityは100になった。
(AMP自体はAMPのキャッシュに載ってから、初めて効力を発揮すると思うので、現時点ではAMPによる影響はまだない？ただ上にも書いたが、AMP対応はイコールWebでのベストプラクティスを強制されるという認識なので、よって Accessibility が100になったのはそういうところに影響があるのかもしれない)

performanceについてはAMP云々より、自身のサイトの問題のような気もする。。

Google Search ConsoleでAMP対応されているかを確認する

Google Search Console上でURL検査をすることでサイトがAMPに対応しているかどうかを確認することができる

AMPテストを使ってAMP対応されているかを確認する

他にも下記のようなツールがあり、こちらに対象サイトのURLを入力することでAMPに対応しているかを確認することが可能。

AMP テスト - Google Search Console

結果が有効と出ていれば、対応はできている。
ちなみにプレビューなども確認が可能となっている。

上はプレビュー表示したときのキャプチャだが、ちゃんとAMPの雷マークが付いているのが確認できる。

追記: AMP対応してからだいたい１日ほどでGoogleにキャッシュされる

AMP対応して次の日ぐらいにモバイルで検索すると、AMP対応を意味する雷マークがついていた。
AMP対応当日はまだ検索結果を見ると雷なしだったが翌日にはキャッシュが保存されているようだった。
(キャプチャ自体はChromeのモバイル表示で撮っているが、iPhone上でも確認)

ためしにサイトのパフォーマンスを図ってみたが、数値自体はなんだか微妙。。こういうものなんだろうか？

AMPキャッシュ時のパフォーマンス

AMPキャッシュされていない方( https://shinshin86.com/ )側のパフォーマンス

ただしパフォーマンス計測値とは異なり、AMP対応されているほうが表示は爆速だった！！！！
iPhoneから実際にアクセスしてみたが、これはもう明らかに体験が異なっていたので、AMP対応することは意味あるなと思った次第。