はじめに

WebサイトにPDFファイルへのリンクを貼ることはよくあります。
複数ページが有るPDFファイルだと、特定のページまでスクロールするのが億劫になりますね。
もし、PDFファイルの指定したページが開けるリンクがあれば…

→ありました。

リンクするURLの末尾に「#page=1」を追加する

※数字の部分は指定のページ番号に変更します。
これだけでPDFファイルの特定のページを開くことができます。

– 記述例

<a href="https://example.com/sample.pdf#page=2">PDFリンク</a>

おわりに

意外とPDFへのリンクを使うケースは多いです。
あまりにもページ数の多いPDFへリンクさせるのは気が引けますが、ページの指定ができれば見る人にとってもだいぶ楽になります。
末尾に追記するだけで設定できる手軽さも良いですね。

参考サイト

https://helpx.adobe.com/jp/acrobat/kb/link-html-pdf-page-acrobat.html

helpx.adobe.com

宣言

テキストを折り返しさせない

.example {
    white-space: nowrap;
}

テキスト1行で表示幅に合わせて…で省略

.example {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 00px;
}

表示幅に合わせて指定します。

左右反転

.example {
    transform: scale(-1, 1);
}

セレクタ

最後以外を指定

li:not(:last-child) {
    Property: Property value
}

不正使用されたパスワードを変更してください

ウェブ上であなたのパスワードの一部が検出されました。そのパスワードを見つけた人は誰でも、あなたのアカウントにアクセスできます。
Google アカウントはまだ安全ですが、この漏洩はウェブ上のどこか別の場所で発生したものです。今すぐパスワード マネージャーを使用して、保存したパスワードを保護してください。

なかなか衝撃的な内容です。
「これはまずい！」と慌てて該当のサイトを確認し、パスワードの変更と「2段階認証」があるサイトについては設定を行いました。
Webの仕事を生業にしている私にとっては実に情けない…

ブラウザでは以下の「不正使用されたパスワードが○○件あります」といった警告が表示されます！

このブラウザでの警告は、他のサイトでアカウント情報を保存したタイミングで表示されました。

なぜこんなメール（警告）が？

このメールが届く方は以下に当てはまる方と思われます。

• 同じID(メールアドレス)/パスワードを使いまわしている（最重要）
• Googleアカウントを持っている
• GoogleアカウントにログインしChromeを使っている
• ログイン情報（ID/パスワード等）をChromeに保存している

上記が該当する方には、メールが届いているか、Chromeを使っている時に警告が表示されていたかと思われます。
1番重要なのは「同じID(メールアドレス)/パスワードを使いまわしている」です。

最近ではログインに「メールアドレス」「パスワード」を使うことが多くなりました。
どのサイトでも同じメールアドレスとパスワードを使っているととても危険です！

メールアドレスは同じでも、パスワードはサイトごとに変えることがとても重要です。

メールが届いたらまず確認すること

最近ではネットバンクを使っている方も多いです。
クレジットカードも持っている人が増えました。
お金に関する情報が漏洩するのは特に危険ですね。

まず確認することは以下になります。

• Chromeブラウザからパスワードのチェック
• 不正使用された恐れのあるアカウントの確認
• インターネットバンキングであれば利用履歴・ログイン履歴等の確認

不正使用された可能性のあるアカウント情報を確認する方法は、Chromeブラウザから可能です。

ブラウザ画面右上の縦になっている「…」から「設定」→「Googleの設定」→「パスワード」と進みます。

ここにChromeに保存されているパスワードが表示されます。

この画面上部の「パスワードを確認」をクリックすると、保存されたパスワードから「不正使用されたパスワード・脆弱なパスワード」がチェックされ、一覧として表示されます。

「不正使用されたパスワード」に表示されたものがあれば、念の為該当のサイトにアクセスし、「ログイン履歴」等が確認可能であれば確認することをおすすめします。

私が確認したサイトについては約10年ほど前にアカウントを作成し、最近は全然ログインしていないサイトでした。
当時の自分のセキュリティに対する意識の低さが分かりますね。。

確認後の対応について

私は「不正使用されたパスワード」に表示されたパスワードを全て新しいものに変更し、
2段階認証機能のあるサイトについては有効にしました。

2段階認証だと、都度SMSやメールの確認をする必要はありますが安全には代えられません。

以下にパスワードを生成出来るおすすめサイトを掲載します。

パスワード生成（パスワード作成）ツール

パスワード生成（パスワード作成）するweb・ウェブ制作に役立つ便利ツール。お好みのパスワードを生成（自動作成）することができるツールです。利用は完全無料です。

www.luft.co.jp

このサイトであれば、記号・大文字、小文字と使う文字の指定ができますので大体のパスワードの指定に対応できます。

「不正使用された」と表示されたサイトのパスワード変更が完了すると、Chromeに保存されたパスワードを更新したタイミングで以下のメッセージが表示されました。

まとめと今後

「不正使用」という言葉はかなり恐ろしいものです。
パスワードの設定方法については以下の項目を厳守していこうと思います。

• 同じパスワードを使い回さない
• ランダムな文字列を使う
• 2段階認証等の機能があれば有効にする
• Chromeのパスワードチェック機能を時々確認する

これに気を付けていればある程度セキュリティの強度は上げられますね。

また、パスワードの保管をブラウザに頼らないという事も考えると良いですね。
特にサブスクリプションのような継続してお金を払うものは、紙に書いて保管しておくと何かあったとき役に立ちます。
おすすめは「パスワード帳」！
物理的なセキュリティには気を付ける必要がありますが、これを家族と共有しておけば後から家族の人がサブスクリプションを解除してもらうことも可能。
個人のパソコンですと起動時にパスワードが必要だったりしますから。。

私もサブスクリプションのアカウント情報は、家族に共有しておいていざという時に解除してもらうよう伝えています。

全角が入っているとキーワードを区切れず、1つのキーワードとして認識されるようです。

プラグインで解決できるかも

そんな時は「WP Multibyte Patch」というプラグインで解決できるかもしれません。

WP Multibyte Patch

WordPress 日本語版パッケージのためのマルチバイト機能の拡張。

ja.wordpress.org

このプラグインを有効化すると全角のスペースが半角に自動で置き換えられ、複数キーワードでの検索が行えるようになります。

全角のスペースで入力して検索しても、
上のスクリーンショットでは真ん中のスペースが半角になっています。

WP Multibyte Patchについて

「WP Multibyte Patch」というプラグインですが、サーバーの自動インストールでは入っていないこともあります。
サイトからWordPressをダウンロードしても入っていないですね。

実際に運用されているWordPressのサイトでも入れていないこともあるのではないでしょうか？

プラグインの機能としては、上記検索での全角スペース問題の解消や、
投稿の抜粋で補助機能が追加されたり文字列のカウント方式の設定などWordPressを日本語で運用していく中での様々な不具合を解消してくれます。

是非サイト運用の初期段階から入れておきたいプラグインですね。

使い慣れるとやっぱりGmailが使いやすい！
他のサービスとも連携できるのは強みですね。

WebサイトもGoogle Workspace内で作成できるのですが、サイトは他社サーバで運用したい。
簡単にFTP接続したりゴニョゴニョしたかったのです。

Google Domainsで取得したドメインのDNSの変更方法がちょっぴり分かりづらかったのでメモです。

環境については以下になります。

サーバ: ConoHa WING
ドメイン: Google Domains

その1 まずはサーバのIPをチェック

今回はConoHa WINGに向くように設定しますので、ConoHa WINGの管理画面からIPアドレスを確認します。

「WING」側の管理画面より、「サーバ管理」→「契約情報」と進み、
「サーバ情報」のアコーディオンを開くと「スペック」欄に「IPアドレス」が表示されています。
このIPアドレスを控えておきます。

その2 Google DomainsのDNSを編集

サーバのIPアドレスが分かったら、次にGoogle Domainsの管理画面からDNSの編集を行います。
ここがちょっぴり分かりづらかったのです。。

Google Domainsの管理画面にログインし、「DNS」に進みます。

※複数ドメインを取得されている場合は、ドメイン一覧（マイドメイン）より編集したいドメインの「管理」から進んでいきます。

DNS設定ページの最下部にある「カスタム リソース レコード」にレコードを追加していきます。

まずはAレコードを追加し、wwwでもアクセスしたい場合はCNAMEも追加します。

Aレコード

名前: 入力しません（@）
タイプセレクト: A
TTL: デフォルト(1H)
データ(IPv4アドレス): その1で確認したサーバIPアドレス

CNAME

名前: www
タイプセレクト: CNAME
TTL: デフォルト(1H)
データ(IPv4アドレス): ドメイン名（例: example.com）

追加すると以下のメッセージが表示されます。

2つを追加すると「カスタム リソース レコード」は以下のようになります。

※環境にもよりますが、DNS変更後1時間ほど待つとサーバー側での設定がスムーズに行われます。
※すぐに変更しても大丈夫ですが、SSLの認証に失敗（反映に時間がかかる印象）したり設定したサーバを参照しない場合があります。
表示の通り、48時間は設定の反映に時間がかかる事を想定しておくと安心です。

その3 サーバにドメインを追加

Google Domainsの設定が終わったら、再度ConoHa WINGの管理画面に戻ります。

「WING」側の管理画面より、「サーバ管理」→「ドメイン」と進みます。

右上の「＋ドメイン」のボタンをクリックし、それぞれの項目を選択・入力していきます。

ドメイン追加: 新規ドメインを追加
追加したいドメインを入力
無料独自SSL: 利用する

無料独自SSLについては有料のものを使わない場合は「利用する」を選択しましょう。

追加すると一覧にドメイン名が表示されます。

※SSLについては即時反映はされず、数分～1時間ほどで適用されました。
適用されると「利用中」というステータスになります。
また、DNSが浸透していないうちはSSLのエラーが発生します。

以上で設定完了です。

まとめ

今回はConoHa WINGでの設定でしたが、他のサーバでもほぼ同じ設定となるかと思います。
Google Domains側でDNSを変更して私の環境では1時間ほどでSSLでのアクセスができるようになりましたが、長くても48時間は掛かる前提で設定しましょう。

設定したドメインでGmailの送受信をされている場合は、DNS変更後念の為メールの送受信ができるかの確認をすることもおすすめします。

そんな時にサクッと確認できる拡張機能が「Wappalyzer」です。

まずは「Wappalyzer」のインストール

この拡張機能はChromeとFirefoxで使うことができます。
お使いのブラウザに合わせて以下のリンクよりダウンロードします。

Chrome

Firefox

「追加」ボタンをクリックすると、権限の許可を確認するウインドウが表示されるのでまたまた「追加」をクリック

ダウンロードが始まり、しばらくすると拡張機能としてインストールされるかと思います。

Chromeで「Wappalyzer」を使ってみる

拡張機能のアイコンから「Wappalyzer」がインストールされているかを確認します。

初期状態ではアドレスバーの横にアイコンが表示されていないと思いますので、
頻繁に使う場合は「ピン」のアイコンをクリックしてアドレスバーの隣にピン留めします。

※頻繁に使う拡張機能はピン留めするのがおすすめ！

使い方は簡単で、追加した「Wappalyzer」のアイコンをクリックするだけ！

試しに私のブログで使ってみるとCMSの情報やプログラミング言語等が表示されます。

インストール直前に開いていたサイトの場合は、「Wappalyzer」を使っても検出できないため再読み込みを行い再度「Wappalyzer」をクリックします。

※検出できない場合は「技術は検出されませんでした。」と表示されます。

CMSやプログラミング言語の他、JavaScriptフレームワークまで確認できるのはすごいです！

まとめ

Webサイトのプログラミング言語やCMSの確認をするときに、こういった拡張機能が無いと都度ソースを見たり、先方さんに確認する必要がありました。
「Wappalyzer」を使うとワンクリックでサイトの情報が見られるのでかなり便利です！
WordPressのバージョンまで分かるのはサイトのリニューアルやサーバー移管の際にとても役に立ちます。
気になったサイトの内部技術を確認するのも良い勉強です。

入力するとなると何度かキーを打つ必要があってなかなか手間ですね。
「まるいち」と入力して変換すると数字を変換するよりは早く入力できます。

コピペ用に文字コードと併せてメモメモです。
丸数字は50まであります。

環境依存文字なのでエンコード方式によっては文字化けの可能性もあり！
（UTF-8であれば数字の直接コピペでも表示されると思います。）

流石に作業するパソコンでアニメを観てしまうと能率が落ちることは否めません。
見入ってしまうとアウトです。ポモドーロの休憩時間も一瞬で過ぎ去ってしまうほど。。

Audibleをスマホで聴く場合は、専用アプリがあり手軽なのですが、充電の事情や通知があったときに若干煩わしく思いパソコンから聴くことはできないか調べてみました。

この記事が役に立ちそうな方

・Audibleをパソコンで聴きたいと思っている方
・Audibleの専用ページを知りたい！
・スマホ以外でAudibleを聴きたい方

Audibleを聴く方法

Audibleをパソコンから聴く方法は、調べた限りですとWindowsでは2種類、Macだとブラウザからの1種類となります。

・Windows: ブラウザ・Windowsアプリ
・Mac : ブラウザ

Macのアプリストアを確認しましたが、現在（2021年2月）見つけることはできませんでした。

ブラウザから聴く（Win / Mac 他）

Audibleのサイトより聴く事ができます。
通常のAmazonのサイトからは聴けないのでご注意を！

以下のURLよりAudibleのページを開き、Audibleを利用しているAmazonアカウントでログインします。

Amazonオーディオブック : Audible (オーディブル)｜Audible.co.jp公式サイト

会員なら20万以上の対象作品が聴き放題。ビジネス書や英語、落語や声優による名作文学の朗読をアプリで聴ける。

www.audible.co.jp

ログイン後は「ライブラリー（購入済みタイトル）」より購入したオーディオブックが一覧で表示されます。

一覧からは「今すぐ聴く」をクリックすると新しいブラウザウィンドウでプレイヤーが表示されます。

こちらのプレイヤー画面から再生速度の変更・目次の確認等ができます。

PCアプリから聴く（Windows10のみ）

Windows10をお使いの方は専用のアプリがあります。
以下のMicrosoftページより「入手」をクリックし、Microsoft Storeからダウンロードできます。

Microsoft Store - Windows PC用のアプリ、ゲームなどをダウンロード

ゲーム、アプリ、映画のMicrosoft Storeを探索します。限定の特典、新しいリリース、お気に入りのコンテンツをすべて 1 か所でお楽しみください。

www.microsoft.com

ダウンロード後、Amazonアカウントにてログインを行うとライブラリー一覧が表示されます。

PCアプリ版だとブラウザ版やスマホアプリ版より細かな並び替え・絞り込みができて目的のオーディオブックを探しやすいです。

オーディオブックを聴く場合にも、ストリーミングとダウンロードどちらでも聴くことが可能。
Windows10をお使いならアプリ版のダウンロードはかなりおすすめできますね。

おわりに

パソコンからAudibleを聴けるのはやはり便利です。
Audibleの本をパソコンの画面から選択したり音量・再生速度を変更できるのは作業の途中でも煩わしくなくかなり良いです。
スピーカーも外付けのものを使っていると音質も良く言葉が聞き取りやすい！
何より、スマホの操作も気にせずできるのは大きいです。

これでますますAudibleライフが捗ります。

さて、Googleのサービスステータスを確認できるページはこちらです。

Google Workspace Status Dashboard

www.google.com

「メールが届かない！」「マップが見られない！」「動画が見られない！」といった現象があったときは積極的に見に行きたいWebページです！

1ヶ月前までは遡ることができるので「あの時は障害だったのか？」と対応状況等を確認したいときにも便利です。

RSSで購読したりメール通知の設定も可能！

Google Workspaceをお使いでしたら、メールでの通知も受け取れます！

Google Workspace サービスの稼働状況を確認する - Google Workspace 管理者 ヘルプ

Google Workspace ステータス ダッシュボードを使用すると、Gemini、Gmail、Google カレンダー、Google Meet といった Google Workspace コアサービスの現在と過去の稼働状況を確認できま...

support.google.com

Workspaceを使っていない場合でもRSSで購読が可能です。

RSSの購読はステータスページの右下「RSS フィード」から登録できます。

さて、この404ページというものはアクセスしたアドレスのページが存在しない（削除された、URLが変わった）場合に表示され、サーバーからブラウザに返してくるHTTPステータスコードが404番なので404ページと呼ばれています。

HTTPステータスコード - Wikipedia

ja.wikipedia.org

そんな404ページですが、「とりあえず作っておくか」と適当に「Not found！」と書き、「お探しのページは見つかりません」のような定型文を書くだけでは非常にもったいないです。

最低限表示させておきたい項目

404ページにもやはりオリジナリティとアピールが欲しいところ。
以下の項目は是非入れておきたいですね。

• ページが存在しないことを示す見出し
• 何故ページが存在しないのかの説明文
• トップページへのリンク
• 代わりに案内したいページの説明やおすすめページへのリンク
• サイトキャラクターがあれば、404ページ用のキャラクターイラスト

このあたりを入れ込んでおくと404ページから次のページへの誘導ができサイトにとってもプラスになります。
ただの404ページですとブラウザを閉じられることもあります。