Gmail活用のすゝめ

皆様、Gmail使っていますか?

使っていますよね。使いましょう。

Gmailは今の時代なくてはならないほど便利なメールサービスです。

今回はGmailのちょっとした便利機能についてご紹介いたします。

現代においては、何をするにしてもメールアドレスを要求されることが多いです。

そんな時、1つのメールアドレスを使い回すのが一般的かと思います。

ただ、1つのメールアドレスを使い回すことでメールの整理がしにくかったり、個人情報が流出した場合にどこから漏れたのが把握できないといった事があります。

じゃあ複数のGmailを登録するの?

それはそれで有効だと思いますが、管理が複雑になったり手間がかかるので今回は別の方法をとります。

ピリオドの利用

Gmailアドレスには、メールアドレスにピリオドが含まれていたとしても同じメールアドレスに届くという機能があります。

Gmailヘルプには以下のように記載されています。

Gmail アドレスでのピリオドの扱い

他のユーザーがあなたにメールを送信する際に、誤ってメールアドレスにピリオドを追加した場合でも、メールはあなたの受信トレイに届きます。たとえば、メールアドレスが「johnsmith@gmail.com」の場合、次のようにピリオドが含まれたメールアドレスもあなたが所有していることになります。

  • john.smith@gmail.com
  • jo.hn.sm.ith@gmail.com
  • j.o.h.n.s.m.i.t.h@gmail.com

引用元:Gmail アドレスでのピリオドの扱い

これをメールアドレスを要求された際に利用することで、この位置にピリオドがあるメールはどこで使っているメールアドレスだ、ということでフィルタリングし、整理に使うことができます。

また、迷惑メールが届いた場合には、あそこで使っているメールアドレスだからあそこから情報が流出したのか、という見当をつけることができます。

エイリアスの利用

Gmailにはメールアドレスの@の前に+○○としても、同じメールアドレスに届く機能があります。

たとえば先程の「johnsmith@gmail.com」の場合、次のアドレスも所有していることになります。

  • johnsmith+hogehoge@gmail.com
  • johnsmith+foobar@gmail.com
  • johnsmith+servicename@gmail.com

※こちらはGmailの公式ヘルプページを見つけることができませんでした。

こちらの機能についてもフィルタリングに利用することができ、サービス名を入れることでよりわかりやすいものとなります。

ただ、こちらは場合によってはメールアドレスに+(プラス)が許可されておらず、利用できない場合があります。

最後に

どちらの機能も、とてもポピュラーで便利な機能となります。

今回は受信のみの説明で、Gmail側では何も設定が必要のないものとなりますが、Gmail側の設定を行うことで送信にも利用できるようになります。

需要があるようであれば、そちらも記事にしたいと思います。

プレイステーションからSteamへ

子供の頃からハードが変わり新しいソフトが出るたび購入してゲームで遊んでいますがPS5は購入せずSteamへ移行することにしました。

ゲームを遊んでいる

今まで購入してきたハードは下記で振り返ると歴史を感じています。
任天堂:FC→GB→SFC→64→GBA→GC→DS→wii→3DS→Switch
ソニー:PS→PS2→PS3→PS4

本当は新作のソフトに合わせてPS5も購入する予定だったのですが抽選で当たらず一旦購入を見送っていたのですが、遊びたいソフトが大体PS4と併用で出るので要らなくなったからです。
最初のタイミングで購入していれば今もPS5のソフトを購入していたと思いますが実際に遊ぶユーザーへハードが普及しない(部品不足や転売)のでソフトが開発されずの悪いサイクルになっており、それに加えて昨今は待てば大体Steamで発売されることが多くなりましたのでPS5自体にあまり魅力を感じなくなりました。
PCであればMODを使うことができますし早期アクセスで面白いものもあり動作に難があればPC自体の性能を上げれば解決できる点もあって今は先に発売してかつすぐ遊びたいものは購入してそれ以外はSteamでいいと考えてPS5や以降のハードを購入する選択肢は無くなりました。(任天堂は別)

PS5が購入できないまま同じようなことを考えている人も増えているのでPS5の供給が増えると言っても挽回は少し厳しそうな気はします。

SteamのソフトではSatisfactoryが200時間を大きく超えて遊んでいたので個人的におすすめです。
他にもTimberborn,ThePlanetCrafter,Raft辺りも面白かったです。

AIにオーストラリアのことを聞いてみた

こんにちは。開発担当のマットです。
私はオーストラリア生まれ育ちで、18歳の時に日本に移住しました。

もう少ししたら、人生の半分ぐらいは日本になりますので、日本とオーストラリアの似ているところ、異なっているところについて詳しいのかなと思います。
ところで、僕に聞かなくても、AIに聞ける時代になってきましたので、やってみました。

文化の違いを画像生成AIに聞いてみて、合っているかどうかを評価して見たいと思います。

食文化

まずは、食べ物の違いについて聞いてみました。
AI に「Japanese Food」を訪ねたら、何が出力されるでしょう?

Japanese Food

本当にビックリしました。
日本の料理店で出される料理そっくりです。AIの力に驚きますね。
次はオーストラリアの料理を見てみたいです。

Australian Food

この結果も素晴らしい。オーストラリアのカフェで出されそうな画像ばっかりです。

評価: 10/10

リビング

日常生活で一番重要のは、リビングの部屋かもしれませんね。
家族が集まって、一緒にご飯を食べて、テレビを見て、話し合うところです。

日本では、木材の床または畳で、こたつや食卓が主役のイメージですかな…
オーストラリアでは、絨毯で、ソーファーが主役のかな…

Japanese Living Room

思ったより「和」ですね。

Australian Living Room

いろいろとオッシャレなリビングですね。
実際にオーストラリアに絶対ありそうです。

評価: 10/10

スポーツ

スポーツはどうでしょう?
日本なら、野球や相撲のかな?

Japanese Sport

なるほどですね。
「日本のスポーツ」といえば、確かに室内スポーツが多いですね。
空手やバレーボールなど、体育館や武道館で行えるスポーツですね。

オーストラリアなら野外スポーツの方が人気のイメージありますね。
ラグビーやクリケットのかな?

Australian Sport

なんじゃこれ!w

完全にお化けになっていますね。
3脚でサッカーをするイメージは流石にない…
でも、日本のスポーツはイメージ通りですね。

評価: 6/10

自然

最後に、日本とオーストラリアの自然を試してみましょう。

日本なら、山と小川が多く、緑のイメージがあります。

Japanese Nature

まさに、イメージ通りです。
しかも、キャンピング行きたくなるぐらいのリアルさ。

オーストラリアは日本より乾燥して、広くて赤色の平地にユーカリの森または砂漠のイメージです。

Australian Nature

これも、まさにイメージ通りです。
AIは本当に素晴らしいものになってきましたね。

もう少し、砂漠っぽい画像も交じるかと思いましたけど、もしかしたら、オーストラリアの砂漠に住んでいる人が少ないので、ネットに写真データも少なくて、AIが写真が多いところ(比較的に人口が多い、森林がある地方)の写真データに影響されているのでしょう?

でも、どれも本当にオーストラリアにありそうな画像ですね。

評価: 10/10

まとめ

最近、AIは遥かに進化してきています。

文章を与えるだけで、こんなに素晴らしいものを生成できるなんって驚きますね。

今回、私は DALL·E 2 という画像生成AIを使っていました。
ご興味がある方は是非、アカウントを登録してみてください。

パスキーによる認証を体験

はじめに

2022年12月に Chrome でパスキーが利用できるようになりました。
そのことを伝えるネット記事をいくつか読んだときには、パスキーを使った認証の全体像というか仕組みというかそういうものがいまいちピンと来なかったので、もう少し詳しいことを調べつつデモサイトでその動作を体験してみました。

WebAuthn とパスキー

WebAuthn (Web Authentication)

WebAuthn は認証に関するウェブ標準の1つで、いわゆる「パスワード不要の認証」を実現する FIDO2 認証をウェブブラウザ上で実現するためのものです。

従来のIDとパスワードによる認証では、パスワード(あるいはパスワードのハッシュ)という秘密情報をサービスのサーバに預ける必要がありました。そのため漏洩のリスクがあり、漏洩してしまうと同じパスワードを使う別のサービスでも使われてしまうという問題を抱えています。

WebAuthn による認証は次のような特徴を持っています。

  • 秘密情報はユーザの手元のデバイスで保持する(漏洩のリスクが非常に低い)
  • 認証に使うクレデンシャルはサービスのドメインと紐付けられているのでフィッシングに強い
  • 従来型のログインで必要だったID・パスワードの入力や、ワンタイムパスワードの入力などが不要で、利便性が高い

WebAuthn によるユーザ登録の大まかな流れは以下の通りです。

  1. ウェブブラウザがサーバにユーザIDを送り、登録を要求する
  2. サーバがチャレンジ(検証に利用するランダムな数値列)を生成してブラウザに返す
  3. ブラウザは認証器にチャレンジを渡す
  4. 認証器は鍵ペアの生成承認を得るために、ユーザに生体認証を求める
  5. 生体認証がOKならば、認証器は秘密鍵と公開鍵のペアを生成する
  6. 認証器は秘密鍵を使ってチャレンジに署名し、署名付チャレンジ・公開鍵・クレデンシャルID(秘密鍵に紐付いたID)をウェブブラウザに返す
  7. ウェブブラウザは署名付チャレンジ・公開鍵・クレデンシャルIDをサーバに送る
  8. サーバは公開鍵を使って署名付チャレンジを検証する
  9. チャレンジの検証結果とその他のチェック(ドメインなど)がOKならユーザの公開鍵・クレデンシャルIDをユーザIDに対応付けて保存する

WebAuthn による認証の大まかな流れは以下の通りです。

  1. ウェブブラウザがサーバにユーザIDを送り、チャレンジを要求する
  2. サーバはユーザIDに紐付いたクレデンシャルIDと共にチャレンジをブラウザに返す
  3. ブラウザは認証器にチャレンジ・クレデンシャルIDを渡す
  4. 認証器は秘密鍵の利用承認を得るために、ユーザに生体認証を求める
  5. 生体認証がOKならば、認証器はクレデンシャルIDに対応した秘密鍵を使ってチャレンジに署名してウェブブラウザに返す
  6. ウェブブラウザは署名付チャレンジ・クレデンシャルIDをサーバに返す
  7. サーバは公開鍵を使って署名付チャレンジを検証する
  8. チャレンジの検証結果とその他のチェック(ドメインなど)がOKならログイン成功

重要なのは以下の点です。

  • 秘密鍵はサーバに送られず、ローカルの認証器に保存される
  • 生体認証の情報はサーバに送られず、ローカルの認証器で秘密鍵を利用するときのユーザ確認として利用される

重要な情報はローカルに有り、サーバ側で保存している情報(公開鍵やクレデンシャルID)が漏れたとしても攻撃には利用できない訳です。

パスキー

WebAuthn では基本的にウェブブラウザと認証器は同じ機器で動いていることが想定されていました(スマートフォン内蔵の指紋認証や PC の USB ポートに接続されたセキュリティキーなど)。スマートフォンで WebAuthn のクレデンシャルを生成し、記録したとします。買い替えや紛失でそのスマートフォンが使えなくなったら登録をやり直さなければなりません。また、異なる端末からログインする場合には同じサービスであってもそれぞれの端末で登録する必要がありました。

パスキーは WebAuthn のそういった課題を解決して使い勝手を向上させるための拡張です。

  • ウェブブラウザと認証器が別々の機器であっても動くようにした
  • 複数の認証器でクレデンシャルを同期できるようにした

パスキーによる認証を体験する

https://webauthn.io/ というデモサイトでパスキーによる認証を体験してみます。

登録

ユーザ名を入力して”Register”を押します。

今回はスマートフォンを利用するので「別のデバイス」を選びます。

QR コードが表示されるのでスマートフォンで読み込んで FIDO: で始まる URL にアクセスします。

パスキーの作成について確認されるので「続行」します。

スマートフォン側で生体認証を要求されます。(この画面はスクリーンショットを撮れませんでした)

ここで「このパソコンの情報を保持する」にチェックを入れておくと、認証の際に QR コードの表示(PC側)と読み取り(スマートフォン側)のステップをスキップできます。

これで登録完了です。

認証

登録済のユーザ名を入力して”Authenticate”を押します。

先程登録に使ったスマートフォンを選びます。

スマートフォン側で生体認証を要求されます。(この画面はスクリーンショットを撮れませんでした)

ログイン完了。一旦登録が完了してしまえばログインは非常に簡単です。

ここまでの手順は Linux デスクトップで行いました。
Chrome でパスキーが使えるようになったというリリース情報では Linux 版の Chrome が対応しているのかどうかいまいちハッキリしないところがあったのですが、試してみるとあっさり動きました。

この状態で、たとえば別の Windows PC の Chrome で webauthn.io にアクセスしてスマートフォンを認証器として利用して splout01 で同じ手順でログインできます。

パスキーを利用する際に Bluetooth を使って機器同士の近接をチェックしているので、PC とスマートフォンの両方で Bluetooth が有効になっていないといけません。試しに PC とスマートフォンそれぞれで Bluetooth をオフにしたところ、どちらがオフの場合でも途中で認証失敗となりました。(Bluetooth をオンにするように促される)

おわりに

従来よりも安全でパスワードの煩わしさからも解放されるパスキーには大いに期待しています。
これから対応サービスが増えていくのが楽しみです。

【Google Chrome】検証ツールの小ネタ(レスポンシブ編)

コーディングや開発をする方なら、日頃からGoogleChromeの検証ツールはよく使われていると思います。
今回はレスポンシブデザインを確認する時に、個人的に便利だと思っている検証ツールの小ネタを紹介したいと思います。

レスポンシブモードを有効にする🖥️

右上の「デバイス切り替え」アイコンをクリックします。
ブラウザ表示がレスポンシブ表示に切り替わります。

レスポンシブモードのオプション🛠️

デバイスのフレームを表示

右上の縦の三点リーダーアイコンをクリックして「デバイスのフレームを表示」を選択します。
対応している一部の機種に限りますが、表示しているデバイスのフレームが表示されます。

メディアクエリを表示

右上の縦の三点リーダーアイコンをクリックして「メディアクエリを表示」を選択します。
この機能を有効にすると、サイト上で使用しているメディアクエリを視覚的に表示してくれます。
サイズの指定方法の違いが色ごとにわかりやすく表示されます。

max-width(**px以下)
max-widthとmin-widthを使用(**px以上、**px以下)
オレンジ min-width(**px以上)

スクリーンショットをキャプチャ

表示中のレスポンシブサイズのスクリーンショットを撮影してくれます。
ブラウザ拡張などでスクリーンショットを撮影している方も多いかと思いますが、ブラウザのデフォルト機能だけでスクリーンショットを撮影できるので手軽に使えます。
また「デバイスのフレームを表示」が有効で、フレームが表示されている場合、フレーム込みでスクリーンショットが撮影されるので、撮影後に別アプリなどでモックにはめ込む作業も必要ありません。

表示端末の追加📲

レスポンシブモードでシミュレートできるデバイスの追加も可能です。
ツールバー上部の[サイズ]をクリックしてデバイス一覧を開き、[編集]をクリックします。
好きなデバイスや自分でカスタマイズしたデバイスを追加することもできます。
特殊な環境やサイズのデバイスを追加する際に、非常に便利な機能になっています。

検証ツールは奥が深い…

レスポンシブのデザインやコーディングをする機会は多いと思います。
地味な機能の紹介ばかりですが、少しでも検証ツールの機能を活用して効率よい作業の手助けになればと思います。
そして、検証ツールには他にも数え切れないほどの機能があるので、今後も少しずつ紹介していけたらと思います…🫠