がとらぼ

Vivaldiメールを触ってみた

普段のメールはPCでThunderbirdを使って読み書きしている。GmailもPCではThunderbirdで読み書きしている。スマホのメールはGmailだけGoogle謹製Gmailアプリで読み書きしている。ここ数年はGmail以外のメールはスマホでは見ない。

Thunderbirdは多くの人が望む機能が実装されていて拡張機能もあるので更に痒いところに手が届く。永らく愛用しているのだけれどここ数年プチフリが多発して何かにつけ待たされるのが腹立たしい。それにテーマを変更できるとはいえ何か見た目が古臭くて野暮ったいし。そこで乗り換え先のMUAをずっと探してる感じ。
で、見つけたのがVivaldiメール。まぁ見つけたといってもニュースサイトのGigazineで見て存在を知ったんだけど。

Vivaldiメールを触ってみた 1
https://vivaldi.com/ja/features/mail/ からVivaldiメールをダウンロードする。

Vivaldiメールを触ってみた 2
基本的にはブラウザが動いているOSに適したファイルが選択された状態なのでそのままダウンロードするだけ。OSが適切に認識されていないようであればプルダウンメニューから適切なOSのファイルをダウンロードする。WindowsやmacOSだけでなくLinux用も用意されているのでLinuxユーザーにとっては嬉しい。Debian/UbuntuならDEBの64bit版(今どきは32bitということはほぼない筈)を選択。

$ sudo dpkg -i vivaldi-stable_5.3.2679.55-1_amd64.deb
(データベースを読み込んでいます ... 現在 219216 個のファイルとディレクトリがインストールされています。)
vivaldi-stable_5.3.2679.55-1_amd64.deb を展開する準備をしています ...
vivaldi-stable (5.3.2679.55-1) を展開しています...
vivaldi-stable (5.3.2679.55-1) を設定しています ...
update-alternatives: /usr/bin/x-www-browser (x-www-browser) を提供するために自動モードで /usr/bin/vivaldi-stable を使います
update-alternatives: /usr/bin/gnome-www-browser (gnome-www-browser) を提供するために自動モードで /usr/bin/vivaldi-stable を使います
update-alternatives: /usr/bin/vivaldi (vivaldi) を提供するために自動モードで /usr/bin/vivaldi-stable を使います
desktop-file-utils (0.24-1ubuntu3) のトリガを処理しています ...
mime-support (3.64ubuntu1) のトリガを処理しています ...
$

debian/ubuntuであれば dpkg -i downloaded.deb でインストールするだけ。

Vivaldiメール 3
インストールすれば今どきのLinuxデスクトップ環境ならランチャー(Windowsのスタートメニュー)にも登録されている筈。
Vivaldiアイコンをクリックして起動させる。

Vivaldiメール 4
Vivaldiを初起動時させたときにはセットアップウィザードが表示される。(セットアップウィザードで設定した内容は後から変更できる。)
「どのVivaldiにしますか？」で有効にするVivaldiの機能を選択できる。今回はメール目的なのでとりあえずメール機能が含まれる「アトバンス」を選択する。この時点でメールアカウント追加の項目が表示される。
今回は、続けるをクリック。

Vivaldiメール 5
既にFirefoxブラウザまたはVivaldiブラウザを使用しているPCであればその設定をインポートできるみたい。取り込むならそのブラウザを選択。使っていないなら選択しないで「続ける」をクリック。
メールだけしかつかわないのであればセットアップウィザードを無視して「メールアカウントを追加」に進んで良いかもしれないが今回はセットアップウィザードを進めることにする。

Vivaldiメール 6
トラッカーと広告ブロックの選択。これは初期値が「ブロック無し」。特に変更の必要はないかも。
「続ける」をクリック。

Vivaldiメール 7
テーマを選ぶ画面。Vivaldiの初期テーマはVivaldiという名前の赤が眩しいもの。セットアップウィザードが動いているこの画面がそのテーマ。ハデよね。好みの配色のテーマを選択して「続ける」をクリック。

Vivaldiメール 8
Vivaldiはタブ対応。タブの表示位置を選択する。好みのタブ表示位置を選択して「続ける」をクリック。

Vivaldiメール 9
便利機能というものが3つ紹介される。見る必要はないので「完了」をクリック。セットアップウィザードはこれだけ。メール固有の設定は無かった。

Vivaldiメール 10
いよいよ左の「メールアカウントを追加」をクリック。

Vivaldiメール 11
Vivaldiメールで使用するメールアカウント(1つめ)を登録する。
先ずはメールアカウント(1つめ)のメールアドレスを入力。その右側でIMAP/POP3を選択。イマドキはIMAPが普通。
「続ける」をクリック。

Vivaldiメール 12
メールアカウント(1つめ)のパスワードを入力。関係ないけど、メールサービスを利用するためのパスワードはイマドキは登録できる上限の文字数で登録してね。
ここで「サインイン」ではなく「サーバーを編集」をクリックする。メールサーバの情報とログインに必要な情報は自動セットアップされることになっているがシステムによってはログイン失敗になることがある。「サインイン」を選択してログインに失敗すると次のログインまでが暫く(〜24時間ほど)拒否される可能性があるので注意。数回の試行が許されるシステムもあれば即Banされるシステムもある。

Vivaldiメール 13
受信サーバと送信サーバそれぞれサーバのホスト名とポートを入力する。特にユーザー名はメールアドレスとは関係ない独自のもの、「@」の左だけ、メールアドレスと同じなどメールシステムによって異なる上に間違いの多い項目なので注意。Thunderbirdと同じくメールサーバの情報のデータベースからある程度自動的に入力された状態で表示され、システムによっては変更の必要がない場合もある。Thunderbirdはこの情報の使い方がヘタで間違った情報が自動入力されて面倒な場合があるが、今回Vivaldiでは全ての項目が正しく入力されていたのでそのまま「アカウントを追加」をクリックするだけで済んだ。あくまで「INTAA.NET」のメールサーバの情報は正しかったというだけ。

Vivaldiメール 14
サーバの情報とユーザー名とパスワードが正しければ「サインインの施行中」の表示の後に次の画面が表示されることになるが、ログイン失敗だとこの画面の何処かの項目が間違っている筈。
今回は正しくログインできたということで次へ。

Vivaldiメール 15
「差出人の名前」はメールを送る際に追加される送信者の名前(メールアドレスではない)。普通は自分の名前を入力する。
「署名」には送信するメール本文の下に付ける会社名と部署や名前,電話番号,住所、何か固定のメッセージなどを入力する。送信するメールに自動的に署名を付けたくないという人は「空から」にしたいかもしれないが、空にすると灰色文字で表示されている「Vivaldiメールから送信されました。Vivaldiはvivaldi.comから無料ダウンロードできます。」が署名として付いてしまう。(この仕様はちょっと迷惑)
「署名を追加しない」という選択肢が無いので自動署名無しにしたいなら半角の空白1つでも入力しておくのが良いのかしら？
「続ける」をクリック。

Vivaldiメール 16
メールアカウント(1つめ)の登録が完了。2つめ以降のメールアカウントを登録するなら「アカウントを追加する」をクリック。
追加するメールアカウントが無いのであれば「Vivaldiメールを開く」をクリック。

Vivaldiメール 17
Vivaldiメールの初期レイアウトは3列型。左からフォルダツリー、フォルダ内のメールリスト、選択したメール、が表示される。
横長画面であれば3列で良いかと思われるが縦長画面またはVivaldiを縦長窓で表示するのであればレイアウトを変更するのが良さそう。右上にレイアウト変更アイコンがあるのでクリックする。クリックする度にレイアウトが変わるので好みの表示にする。
画像では右列にHTMLメールが表示されている。このHTMLメールでは外部のサイトから画像を読み取るようになっているが初期値では勝手に外部の画像を表示するようにはなっていない。これはセキュリティー的には正しい挙動。メールの送信者が信頼できるなら「外部コンテンツの読み込み」をクリックすると画像が表示されることになる。

Vivaldiメール 18
左列がフォルダツリーで右上がフォルダ内のメールリスト、右下が選択したメールの表示という2列モードにした。
個人的には2列が好み。常用しているThunderbirdでも同じレイアウトを使っている。

Vivaldiメール 19
日本語メールを受信して表示してみた。文字化けせずに正しく表示できているように見える。「がとらぼ」の中の人はメールには標準状態でS/MIME署名を付けているが、VivaldiではS/MIMEは扱えないようでS/MIME署名が普通の添付ファイルとして表示されている。S/MIMEを知らない人にとっては怪しい添付ファイルが追加されたメールが送られてきたということになるのでよろしくない。

Vivaldiメール 20
メールのソースを表示したい場合はそのメールの上で右クリックして「オリジナルのメッセージを表示」をクリック。

Vivaldiメール 21
メール作成画面。作成画面はぱっと見は普通。しかし、Vivaldiメールの送信メールの初期値はHTML形式ではなくプレーンテキストなのだがなぜか装飾用のアイコンが並んで表示されている。当然だがプレーンテキストのメールでは文字装飾は無効。常識的にはプレーンテキスト形式のモードではこれらの装飾用のアイコンは非表示にするべき。

Vivaldiメール 22
Vivaldiメールから送信したメールをVivaldiメールで受信してみた。日本語メール送信も問題ないよう。

Vivaldiメール 23
Vivaldiメールで送信したメールをThunderbirdで受信してソースを表示してコンテンツタイプとエンコードを確認した。UTF-8のプレーンテキストで、エンコードはquoted-printableになっている。送信者の名前と一番下の本文パートの部分はなるほどquoted-printableになっている。quoted-printableは7bitなのでメールの本来の仕様には合っていてその点では筋が良いのだが個人的には嫌い。そしてVivaldiメールでは送信メールのエンコードは変更できない。Thunderbirdは以前はISO-2022-JPが選択できたが2,3年前くらいからは同じくエンコードを変更できなくなっていて日本語は8bit UTF-8になる。SMTPメールの原理的には8bit文字はNGなので筋悪なのだが最近のMTAで8ビットが通らないということはほぼないということで個人的にはこの方が良いと思う。

Vivaldiメール 24
Vivaldiメールではメールを開いても「既読」にはならずメールリストでメールを右クリックして「メッセージを既読にする」必要がある。はっきりいってメッチャ面倒。これはないわ。

Vivaldiメール 25
PCのメールアプリではメールをドラッグして振り分けることが多いと思われる。大抵はメールリストから左列のフォルダーツリーの目的にフォルダにポイポイ放り込む感じ。ところがVivaldiメールではメールをドラッグして移動できない。メールリストから移動したいメールを選択して「メール移動」アイコンをクリックして目的のフォルダに移動させる必要がある。メッチャ面倒。これはないわ。
さらに、他のメールアカウントのフォルダに移動させることもできない。これは使い勝手が悪い。

画像はないが、Vivaldiメールでは他のメールアプリ同様にメールの検索機能がある。フォルダを選択した状態で検索したいワードを検索テキストボックスに入力するとヒットしたメールがリストに表示される。これは正常に機能するのが当たり前だと思うかもしれないがメールによってエンコードがまちまちなのをデータベース化する部分に問題があるのか日本語の検索は上手く機能しないこと多々。例えば「千代田区」を含むメールを検索して本来は10個のメールがヒットするところが3つしかヒットしない、のような。あと、日本語では2文字で検索したいことがある。「港区」のような。これがVivaldiメールでは検索できない。はっきりいって検索は使い物にならないレベルで残念すぎる。

Vivaldiメールは古臭いThunderbirdとは違いなにしろ最新MUAだし、少し使った感じではThunderbirdのようにもたつく(プチフリ)にもならず使いやすいのかもと期待しかけた部分もあるのだが、「既読」と「メール移動」と「検索」の3点が致命的にダメ。あと、送信メールのエンコードがquoted-printableだとメール本文が肥大するだけでなくMUAによっては日本語表示部分が少しヘンになる。
残念ながらVivaldiメールは仕事用としてはとても採用はできないしプライベートでもまだ使えるものではないかな？
もしかすると現在のVivaldiメールはプレビュー的なもので今後の改善状況次第ではThunderbirdを上回ることもあるかもという期待は勝手にしている。

最先端なAVIF画像メインなウェブサイトを作る with Nginx

絵を発表
©いらすとや.

この記事は、この記事に書かれている設定で動いているNginxが使われています。この記事はAVIF(AV1 Image File Format)画像対応ブラウザではAVIF画像が表示され、そうでないブラウザではおそらくWebP画像が表示されます。

WebP画像は従来のJpeg画像よりファイルサイズが大幅に小さくでき、透明色を使用可能で可逆/非可逆対応で使いやすい画像形式でしたが、AVIFは似たような特徴でWebP形式よりさらに画像サイズを小さくできることが期待されます。次世代画像形式の中では有望視されているようです。使わない手はないかなということで。

NginxでAVIF画像の対応 1
https://caniuse.com/?search=webpメジャーなブラウザでWebP画像への対応。
2019年に「最先端なWebPメインなウェブサイトを作る with Nginx」を書いた頃はAppleのSafariブラウザがWebPに対応していなくてウェブサイトでWebP画像を使うために苦労させられたが、2022年現在はメジャーなモダンブラウザは全て対応済み。(IEはもう亡き者という扱いで)

NginxでAVIF画像の対応 2
https://caniuse.com/?search=avifメジャーなブラウザでWebP画像への対応。
3年前のWebPのときと同じくまたしてもAppleのSafariがAVIF非対応。ほんとクソ。何故かChromiumベースのEdgeが非対応なのは気になるが。

状況としてはデジャブかよというくらい2019年にウェブサイトでWebP画像を主に表示しようとしていた当時とそっくり。
「最先端なWebPメインなウェブサイトを作る with Nginx」の方法は汎用性が高いのでほぼそのまま別の新しい画像形式にも対応できる。無い知恵絞ってがんばって作ったかいがあったというもの。
なお、「がとらぼ」の中の人はpictureタグとsourceタグで複数のファイルを書き連ねるのが好きではないので苦労しているが、pictureタグを使うのに抵抗がなければこの記事のような苦労はしなくて済む。

/usr/local/etc/nginx/mime.types (6行目: 1行追加)
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
types {

    中略
    image/gif                        gif;
    image/jpeg                       jpeg jpg;
    image/avif                       avif;
    image/png                        png;
    image/tiff                       tif tiff;
    image/webp                       webp;
    中略
}

設定ファイルのPathやファイルの構成は違うかもしれない。(上はFreeBSDのPKG/PortsでNginxをインストールした場合を想定)

Nginxの仮想ホスト用設定ファイル等に追加 (7〜10行目, 25〜34行目) 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
#WebP用
map $http_accept $webp {
        default   "";
        "~*webp"  $uri;
}
#AVIF用
map $http_accept $avif {
    default   "";
    "~*avif"  $uri;
}
server {
    listen 192.168.0.1:443 ssl http2;
    server_name             hoge.example.com;

    中略
    #WebP用
    location ~ (.+)\.webp$ {
        set $wo_ext $1;
        set $jpg "${wo_ext}.jpg";
        set $png "${wo_ext}.png";
        more_set_headers 'Vary: Accept-Encoding';
        try_files $webp $jpg $png $uri =404;
        expires max;
    }
    #AVIF用
    location ~ (.+)\.avif$ {
        set $wo_ext $1;
        set $webp "${wo_ext}.webp";
        set $jpg  "${wo_ext}.jpg";
        set $png  "${wo_ext}.png";
        more_set_headers 'Vary: Accept-Encoding';
        try_files $avif $webp $jpg $png $uri =404;
        expires max;
    }
    中略
}

WebP用設定を書いているのであればほぼコピペで増殖させるだけ。WebP画像を使わないのであればWebP用の設定は無しで可。というか、WebP対応ブラウザが殆どの現状ではWebP用の設定はむしろ外した方が良いと思う。

これでウェブページに <img src="/hoge/hoge.avif" width="nnn" height="nnn" alt="hoge" /> と書いて、hoge.avif, hoge.webp, hoge.jpg を置く。(拡張子の前は同じ文字列で 重要)
これで、AVIF対応ブラウザでhoge.avif画像にアクセスが来ればhoge.avifが渡されてhoge.avifというAVIFが表示される。
AVIF非対応でWebP対応のブラウザがhoge.avif画像にアクセスが来ればhoge.webpがhoge.avifという名前で渡されるが正常にWebP画像が表示される。
このときにhoge.webpファイルが無い場合はその次の候補のhoge.jpgがhoge.avifというファイル名で渡されるが正常にJpegファイルが表示される。hoge.jpgファイルも存在しない場合はhoge.pngファイルがhoge.avifというファイル名で渡されるが正常にPNGファイルが表示される。
この例ではAVIFファイルの代替として第一候補がWebP画像になっているが、もしもWebP画像非対応のブラウザからのアクセスを重要視するのであれば28行目は外した方が無難。28行目を外した場合はAVIF非対応ブラウザがアクセスした場合には第一候補としてhoge.jpgがhoge.avifというファイル名で渡されるがJpegファイルが正常に表示される。hoge.jpgが用意されていない場合はhoge.pngがhoge.avifというファイル名で渡されるが正常にPNGファイルが表示される。

NginxでAVIF画像の対応 5
AVIF非対応のEdgeブラウザでこの記事を表示してみた。AVIF画像対応のブラウザならそのままAVIF画像が表示されるがEdgeブラウザでは本来はAVIF画像は表示されない筈。しかし、AVIFの代替でWebP画像が行われるようになっているので画像が表示されている。ファイル名の拡張子はavifだがWebPが表示されている状態。なお、DevToolsで画像の形式の種類の表示はできなかった、残念。

AVIF画像の作成

PhotoshopやGIMPの新しいバージョンはAVIFに対応しているので特に困ることはないかと。
ちょっとした画像を作るためだけに高価なPhotoshopを買うのは馬鹿らしいと思う方は無料で使えるGIMPをどうぞ

NginxでAVIF画像の対応 3
GIMPは2.10.18以降のバージョンでAVIF画像に対応している。WindowsならGIMPの最新版を使えばAVIFに対応すると思われる。Linuxでは標準のリポジトリでは安定版のGIMPが入るのでAVIF非対応のGIMPかもしれない。最新版のGIMPをインストールするためにGIMPのリポジトリを追加すかるFlatpakで最新のGIMPのパッケージをインストールする。上の画像のGIMP 2.10.30は余裕でAVIF画像に対応している。

NginxでAVIF画像の対応 4
画像の「エクスポート」で保存する画像ファイルのファイル名の拡張子を.avifにするか画像の種類をAVIFにすることでAVIF画像を保存できる。画像の品質などを指定できる。ほぼロスレスで保存する場合はNearly losslessにチェックしてエクスポートする。

文字コードポイントシフトはGoogle検索さんと相性が悪いの？

疑問
©いらすとや.

先日、文字コードシフト式広告ブロックでGoogleさんのインデックスが文字化けする問題で追加のテスト記事を掲載した。この記事ではアンチ広告ブロックの仕組みは外して文字コードシフトだけが機能するようになっている。
そして、Googleさんにその記事がインデックス登録されたようなので確認した。

コードシフトとGoogleインデックス 1
まず、Search ConsoleのURL検査ツールで「ライブテスト」を確認。そのスクリーンショットを確認すると記事本文は正常にレンダリングされている。つまり、文字コードシフトの仕組みが機能していても意図したとおりに表示されている。

コードシフトとGoogleインデックス 2
Googleさんのインデックスにこの記事が登録されたことが示されている。

コードシフトとGoogleインデックス 3
Googleさんでこのページを検索してみた。たしかに登録されていた。
しかし、本文の抜粋部分は文字化けしている。

コードシフトとGoogleインデックス 4
このGoogleさんのインデックスのキャッシュ状態を確認してみた。キャッシュの「フルバージョン」では記事の本文部分は文字化けしていない。つまり、文字コードシフトの仕組みが正しく機能して意図したとおりに表示されている。

コードシフトとGoogleインデックス 5
同じくGoogleさんのインデックスのキャッシュだが、「テキストのみのバージョン」
こちらは記事の本文部分が文字化けしている。つまりコードシフトの戻しができていない。これがインデックスに登録されているのかしら？

Googleさんがインデックスを作成するとき、インデックス用に内部的に持つ何かしらのデータでは文字シフトを正常に行っている場合を考える。つまり、検索結果に文字化けした本文を表示しても、内部的には文字化けしていない本文を持っている可能性を仮定した。

コードシフトとGoogleインデックス 6
テスト用の記事の中でキーワードになりそうな文字列をGoogleさんで検索してみた。今回は「ページ表示後の嫌がらせ」を使ってみた。他所のサイトがヒットすると邪魔なので「がとらぼ」というキーワードも組み合わせてみた。
「ページ表示後の嫌がらせ」というキーワードそのものを含むページはヒットしなかった。

コードシフトとGoogleインデックス 7
「ページ表示後の嫌がらせ」を文字コードポイントシフトした「ベ・シ衧礹律ね嫋かよず」を検索してみた。
こちらは見事にヒットした。

Googleさんはページをレンダリングした状態で表示されるコンテンツからインデックスしているのではなく、HTMLソースからインデックスしているというのが正しいみたい。
つまり、文字コードポイントをシフトしたコンテンツはGoogleさんと相性が悪いといえそう。

Up