にしし ふぁくとりー:西村文宏 個人サイト

Presented by Nishishi via Movable Type. Last Updated: 2022/06/27. 11:49:45.

Sakura Scope (2022年05月)

ちょっと倒錯気味な、ただの日記です。(^^;)
これはやばいと思われた場合は、お早めに閲覧を中止されることをお勧め致します。

シンタックスハイライターPrism.jsの使い方と、必要なときにだけ動的に読み込む方法

シンタックスハイライターとして Prism.js が良さげ

Web上にソースコードを見やすく掲載するシンタックスハイライター(Syntax Highlighter)として以前から利用していたスクリプトがもはや更新されておらず、色分けの仕様が古すぎて最近の書き方に対応できないので、何か新しいスクリプトを使う方が良いだろうな……と思っていました。いろいろ調べたところ、最近は Prism.js というスクリプトが軽量かつ見やすくて良さそうなので、これを使ってみることにしました。

Prism.jsはセットアップも使用も簡単なのですが、CDNサーバでは提供されておらず「加えたいオプションを選択した上でカスタマイズされたファイルをダウンロードして設置する」というやや特殊な方法が採用されています。いや、「特殊」と言うと大げさですが。その分、便利なのですけどもね。備忘録として「Prism.jsのセットアップ方法」と「シンタックスハイライトの方法」を以下に記録しておきます。

Prism.jsのコアはJavaScriptとCSSを合わせても2ファイルで20KB程度しかない軽いスクリプトです。なので、使うかどうかにかかわらず常時読み込んでいても良いかもしれないのですが、無駄な通信は極力省いた方が良いので「シンタックスハイライターが必要な場面でだけ、Prism.jsを動的に読み込む」ために私が採用した方法も、ついでに最後に紹介しておきます。

Prism.jsのセットアップ(設置)STEP:

Prism.js は、JavaScriptファイル1つ「prism.js」と、CSSファイル1つ「prism.css」の計2ファイルだけで動作します。見栄えを決めるテーマ(8種類)や、ハイライト対象の言語(約300種類)や、機能を追加するプラグイン(約30種類)がありますが、それらは個別のファイルとしては提供されていません

ではどうやってそれらを読み込むかというと、Prism.js公式サイト上で

  1. テーマ(シンタックスハイライトの配色)を選択し、
  2. ハイライト言語(PHPとかPythonとか)を選択し、
  3. 使いたいプラグインを選択

……すると、上記の1~3を含んだJavaScript+CSSファイルが動的に生成される仕組みになっています。

なので、どんなテーマを選んでも、どんな言語を選択しても、どれだけプラグインを加えても、ダウンロードするファイルは「prism.js」と「prism.css」の2つだけになります。この仕様のために、CDNでは提供されていないのでしょうね。(選択によってファイルの中身が変わるため。)

▼Prism.jsセットアップ(設置)の手順

Prism.jsのセットアップ(設置)に必要な手順は、以下の4つです。最初の「オプション選択」部分だけが独特で、後は特に迷う点はないと思います。

  1. Prism.jsの公式ウェブで、使いたいオプションを選択する
  2. 生成されたJavaScriptとCSSファイルをダウンロードする(計2ファイルのみ)
  3. 自分用のPrism.jsを自サイトに設置する
  4. シンタックスハイライトしたいページで一式を読み込む

(1) Prism.jsの公式ウェブで、使いたいオプションを選択する

まずは、Prism.jsの公式ウェブサイトにアクセスしましょう。右上にでっかい「DOWNLOAD」ボタンがありますので押します。すると、「Customize your download」というページに移動します。私が試したときには https://prismjs.com/download.html というURLでした。

ここで、「①スクリプトの圧縮状態」と、「②テーマ」と、「③ハイライト対象言語」と、「④プラグイン」を選択します。④は任意ですが、①~③は必須です。

シンタックスハイライター「Prism.js」のダウンロード内容選択ページ

●上図の黄色矢印部分「①スクリプトの圧縮状態」は、「Minified version」を選択しておけば良いです。(ソースを読みたいなら「Development version」にしてダウンロードすれば良いですが、実際に使う場合は余計な空白や改行はない方が良いので「Minified version」一択です。)

●上図の緑色矢印部分「②テーマ」は、使いたいテーマを1つ選択します。テーマ名はリンクになっていて、クリックすると『そのテーマが選択された状態の Prism.jsトップページ』が表示されます。トップページには(Prism.jsを説明するための)サンプルソースが複数掲載されているのですが、それらが指定したテーマで表示されるようになっています。好きな物を1つ選びましょう。トップページ以外の各ページでもテーマを動的に切り替えて見栄えの違いを確認できます。なお、複数のテーマをDLして切り替えて使うような仕様にはなっていないので、どれか1つだけを選択する必要があります。

●上図の水色矢印部分「③ハイライト対象言語」は、色分け表示したい言語を選択します。「Markup + HTML + XML + SVG + MathML + SSML + Atom + RSS」と、「CSS」と、「C-like」と、「JavaScript」は最初から選択されていると思います。そのほか、C++とか、Goとか、PerlとかPHPとかPythonとかRubyとか300種類くらいの選択肢がありますので、必要な言語だけを選択すると良いでしょう。「その言語を加えると何KBの容量が増えるか」も明記されているので親切ですね。

●上図には見えていませんが、最後に「④プラグイン」の追加ができます。私は、行番号を加える「Line Numbers」というプラグインだけを追加しました。長いソースを掲載するときには行番号が表示される方が説明しやすくて便利ですから。そのほかにも、クリップボードにコピーするボタンを表示するプラグインとか、指定行だけをハイライトするプラグインとか30種類くらいが提供されています。どれも軽いですが、さすがに全部を選択するとそこそこのファイルサイズになりますから、必要なものだけを選択すると良いでしょう。

(2) 生成されたJavaScriptとCSSファイルをダウンロードする(計2ファイルのみ)

ダウンロードページを下端までスクロールすると、下図の(紫色矢印の先部分の)ように「動的に生成されたJavaScriptソースとCSSソース」が見えます。また、それらがどれくらいのサイズになっているのかも「Total filesize」として表示されています(水色矢印部分)。

シンタックスハイライター「Prism.js」のダウンロードボタン

ここに掲載されているソースをそのままコピーしても良いですが、その下にある「DOWNLOAD JS」ボタンと「DOWNLOAD CSS」ボタンを押せば、それぞれの生成ソースが「prism.js」と「prism.css」のファイル名でダウンロードできます。
この2ファイルをローカルにダウンロードしましょう。これが、あなたが選択した内容にカスタマイズされた Prism.js 本体ファイルになります。

▼最後にブラウザのアドレス欄をコピーしておくと便利

このページでの各項目の選択状態は、その都度URLに反映されます。
なので、下図のように(すべて選択し終わった後で)ブラウザのアドレス欄に見えているURLをコピーしておけば、『今の選択内容』を後から再現できて便利です。

Prism.jsのオプション選択状態はURLに反映される

後日になってから、別のオプションを加えたくなったり切り替えたくなったりした際には、コピーしておいたURLにアクセスした上で必要な箇所を変更すれば、1からすべてを選択しなおすよりも楽に済むでしょう。

(3) 自分用のPrism.jsを自サイトに設置する

ダウンロードした「prism.js」と「prism.css」の2ファイルは、自サイト内の適当な場所にアップロードします。
これで設置は完了です。

まあ、特に説明することもありませんよね。(^_^;)

(4) シンタックスハイライトしたいページで一式を読み込む

ソースコードを色分け表示したいページで、「prism.js」と「prism.css」の2ファイルを読み込みます。
これも特に説明することはありませんね。link要素とscript要素で読み込めば良いだけです。

HTMLのhead要素内で、以下のようにlink要素を使って「prism.css」を読み込んで、

<link href="prism.css" rel="stylesheet">

body要素の最後で、以下のようにscript要素を使って「prism.js」を読み込めば良いだけです。

<script src="prism.js"></script>

Prism.js自体はとても軽量なスクリプトで、よほど多数の言語やプラグインを選択しない限りはCSS+JavaScriptソース全部でも20~30KB程度にしかなりません。とはいえ、どれだけファイルサイズが小さかろうとも「ソースコードを掲載しないページ」でも読み込むのは無駄ですから、私のサイトでは『Prism.jsを必要とするページ』でだけ動的に読み込まれるようにしてみました。その方法は後述します。

Prism.jsを使ってシンタックスハイライトする方法

Prism.jsを使ってソースコードが色分け表示されるようにするには、pre要素をcode要素を使ってソースコードを記述して、それらの要素に必要なclass名を書くだけです。

使い方は、Prism.js公式サイトのHOMEにあるBasic Usage部分にざっと書かれていますので詳しくはそこを見て頂ければ良いのですけども、基本はとても簡単で、以下の2パターンだけ覚えておけば充分だと思います。

▼パターン1:ソースコードが複数行の場合

pre要素のclass名に使用プラグイン名を列挙して、code要素のclass名にlanguage-xxxの形式で言語を記載します。
例えば、言語がHTMLなら、以下のようになります。

<pre><code class="language-html">
~掲載するソースコード~
</code></pre>

例えば、行番号を付加するプラグイン(line-numbers)を使う場合で、言語がHTMLなら、以下のようになります。

<pre class="line-numbers"><code class="language-html">
~掲載するソースコード~
</code></pre>

どのようなclass名が必要なのかは、各プラグインのページに記載がありますので、そこを見て下さい。複数のプラグインを適用する場合は、半角空白で区切って列挙すれば良いです。(適用プラグインを示すclass名は、pre要素に付加せずに、body要素等の親要素に一括指定しても構いません。Prism.jsの公式サイトでは「body要素のclass属性」に指定されています。全ソースで同じプラグインを使いたい場合は、その方法が楽で良いでしょうね。私の場合は、「行番号を付加したい場面」と「行番号を付加したくない場面」とが混在しますので、毎回pre要素に使用プラグイン名を指定する書き方を採用しました。

さらに、Prism.jsで装飾される範囲に独自の装飾を加えたいなどの都合がある場合は、pre要素に(例えば)「prism」などの任意のclass名を加えておけば良いでしょう。

<pre class="prism line-numbers"><code class="language-html">
~掲載するソースコード~
</code></pre>

上記のように、(Prism.js側では要求されていない)任意のclass名を加えても、特に問題なく動作してくれます。

▼パターン2:ソースコード1行をインラインに掲載する場合

文章中に(インラインで)掲載するソースコードを色分け表示したい場合は、pre要素を使わずにcode要素だけで記述します。そのcode要素のclass名にlanguage-xxxの形式で言語を記載します。

<code class="language-css">p { color: red }</code>

簡単ですね。

  • 複数行ソースなら pre+code要素
  • インライン掲載なら code要素だけ

……という書き方です。
まあ、あえて説明しなくても「普通そう書くだろう」とは思いますが。要するに、Prism.js用の特殊なマークアップ方法は(class名以外には)必要なく、わりと普通の書き方をするだけで色分け表示してくれる、ということです。

▼HTML中にCSSやJavaScriptが登場するソースを色分けさせたい場合の言語指定

code要素にはclass名で「何の言語だと解釈して色分け表示するのか」を指定する必要がありますが、言語って1種類に限定できるとは限りませんよね。例えば、HTMLソースを掲載する場合、そのHTMLソースの中にCSSソースやJavaScriptソースが含まれることはよくあります。

その場合は、class="language-html"のように、HTMLを言語として指定しておくだけでOKです。
言語はHTMLに設定していても、そのソース中に登場するstyle要素の中身はCSS用に色分けされ、script要素の中身はJavaScript用に色分けされます。便利!

下記は、HTMLソースの中にCSSソースとJavaScriptソースも含む例で、言語指定はHTMLだけ(<pre class="line-numbers"><code class="language-html">~</code></pre>)で表示した例です。

<!DOCTYPE html>
<html>
<head lang="ja">
   <meta charset="utf-8">
   <title>色分けの言語指定をHTMLにしていても</title>
   <style>
      div.sample::before {
         content: 'style要素内はCSSとして色分けされ';
         display: inline-block;
         color: darkgreen;
      }
   </style>
</head>
<body>
   <div class="sample">……</div>
   <script>
      let msg = 'script要素内はJavaScriptとして色分けされます。';
      function first() {
         alert(msg);
      }
      first();
   </script>
   <p class="end">こんな感じで。</p>
</body>
</html>

私は淡い色が好きなので、これまではソースコードもそんな感じで掲載してきたのですけども、ソース部分はむしろ明確に本文と分離して見えるように、暗色スタイルで掲載する方が分かりやすい(見やすい)気が最近はしています。ので、Prism.js公式で提供されている「Tomorrow Night」というダークテーマを採用してみました。上記のサンプルHTMLソースもそれを使って表示されています。使い続けるかどうかは分かりませんけども、しばらくはこれを使ってみます。 ……と思ったのですが、ソースだけが暗色だと「見出し」よりも目立ってしまう問題があってページ構造を把握しにくそうなので、明色にしました。^^; 今は「Coy」というテーマを採用しています。後述しますが、Prism.jsではテーマを切り替える際にHTML側の修正は不要で、単にPrism.jsファイルの構成を変更するだけで良いので、テーマの変更はファイルを置き換えるだけで済むので簡単そうです。

以上、Prism.jsを使ってソースコードを色分け表示する方法でした。

シンタックスハイライターが必要な場面でだけ、Prism.jsを動的に読み込む方法

さて、Prism.js自体はとても軽量なスクリプトですが、どれだけファイルサイズが小さかろうとも「ソースコードを掲載しないページ」でも読み込むのは無駄です。そこで、私のサイトでは『Prism.jsを必要とするページ』でだけ動的に読み込まれるようにしてみました。

方法は簡単で、以下の2ステップだけです。

▼1. 事前にpre要素にprismクラスを付与しておく

「ここのソースコードはPrism.jsでシンタックスハイライトする」という何らかの目印がないと判断できないので、『Prism.jsを使ってシンタックスハイライトしたいpre要素にはprismクラスを付加する』という前提を用意しておきます。
つまり、Prism.jsを適用したいソースは、以下のようにHTMLを書くことにします。

<pre class="prism プラグイン名"><code class="言語名">
~掲載するソースコード~
</code></pre>

このようにすると、

  • 【前提条件】prismクラスがWebページ内に含まれている場合にだけ、
  • 【動作】「prism.js」と「prism.css」を読み込む

……というようにスクリプトを書いておくことで、Prism.jsを必要とする場面でだけ動的に読み込めるようにできます。

▼2. prismクラスが存在する場合だけ「prism.js」と「prism.css」を動的に読み込むJavaScriptを書く

全ページで読み込まれるJavaScriptファイルに、以下のスクリプトを書いておくだけです。
下記ソース内の /設置場所/prism.css(6行目) や /設置場所/prism.js(10行目) は、実際にファイルを置いた場所に合わせて書き換えて下さい。

// Webページ内に「class="prism"」の指定されたpre要素が存在すれば
if( document.querySelector('pre.prism') ) {
   // ▼CSSファイルを動的に読み込む
   var pmcss = document.createElement('link');
   pmcss.rel = 'stylesheet';
   pmcss.href = '/設置場所/prism.css';
   document.head.appendChild(pmcss);
   // ▼ファイルJavaScriptファイルを動的に読み込む
   var pmjs = document.createElement("script");
   pmjs.src = "/設置場所/prism.js";
   document.body.appendChild(pmjs);
}

※このスクリプトは、HTMLが読み込み終わってから実行されるような位置に記述しておく必要があるので注意して下さい。

軽量スクリプトで見やすく表示できるPrism.js

うちのサーバにあるファイルのタイムスタンプから考えて、前回にシンタックスハイライターを選択したのは2010年だったようです。12年前……! 当初からそんなにアップデートされていなかった気がしますが、今では配布サイト自体が消滅してしまっています。古いスクリプトのままだと、新しい文法仕様とか新しいプロパティとかが正しく色分けされないので、ちょっと見た目に問題があるのですよね。さすがに何か新しいスクリプトに置き換えないといけないよな……というようなことは数年前から思っていたのですが。(^_^;)

一時期、Googleがシンタックスハイライトサービスを提供していたこともあって、それを呼び出して使えば良いかな……となんとなく検討していた時期もあったのですが、今ではそのサービスも終わってしまったようです。やはり、外部サーバから呼び出して使うサービスは「終了リスク」があるので望ましくないですね。

Prism.jsは、軽量なスクリプトを自サイト内に設置して使えるので望ましい形態でしょう。見栄えもなかなか良さそう(分かりやすそう)なので、しばらくはPrism.jsを使ってみるつもりです。
ただ、既存の(古いシンタックスハイライターを呼び出している)ページを一括して書き換えるのが少々面倒なのでまだ作業できていないのですけども。(^_^;;;

というわけで、Prism.jsを使うための備忘録でした。

SNSシェアボタン等を自前スクリプトで作る方法

各SNS公式のボタンだと読み込みが重たい問題がある

うちのサイト内では所々に下図のようなSNSシェア用ボタンを配置しています。SNSではないサービスも含まれていますけども。フリーソフトやフリーCGI等の配布ページなら上部に、Tips記事やブログなら本文の下に掲載しています。

SNSシェアボタン群の表示例

長年、これらのボタンは各サービスの公式サイトで提供されている「ボタン表示用HTMLソース」をそのまま書いて表示していたのですけども、それらを使うのをすべてやめて自前のスクリプト(HTML+CSS+JavaScript)で作る方法に変えてみました。

各サービス公式サイトが提供している公式ボタンだと(将来的に内部仕様が変わっても自動で追随されるだろうという安心感はあるものの)各々で用意されたスクリプトが読み込まれるので、ボタン1つ1つに対して専用スクリプトなど複数ファイルの読み込みが発生してしまって、無駄な通信が増える問題があるのですよね。サイズ(通信量)自体はそんなに大きくはないのですけども、ボタンが多ければそれだけ多数のリクエストを方々のサーバへ送ることになりますから(ウェブページの表示の)遅延要因にもなるでしょうし。

そこで、一念発起して全部のボタンを自前のスクリプトで作る方法に変えてみました。どのサービスも「指定のURLに(URLエンコードされた)URLを送れば良いだけ」なので、わざわざ公式スクリプトを読み込んで使う必要はあまりありません。
無駄に公式スクリプトを読みにいかなくなったので、通信量も減り、ページ全体の読み込み待ち時間も削減されて、なかなか望ましい形になった気がします。(もっと早くそうしておけば良かった……。orz)

この手の独自SNSシェアボタンを作る方法はネット上に多々ありますから、今更ここで紹介する意味があるかどうかよく分かりませんけども、まあ、せっかくなので、うちのサイトで採用した作成方法(HTML+CSS+JavaScriptソース)をご紹介しておきます。

具体的には、以下のボタンの作り方です。

  • 「Twitterでツイートする」ボタン
  • 「Facebookでシェアする」ボタン
  • 「LINEで送る」ボタン
  • 「はてなブックマークに登録する」ボタン
  • 「Pocketに保存する」ボタン
  • 「URLとタイトルをクリップボードにコピーする」ボタン

ついでに、「現在見ているページ」のタイトルとURLをクリップボードにコピーするだけのボタンも用意しました。機能的には一番シンプルですが、もしかしたらこれが一番便利かも知れませんけども。^^;

装飾はCSSで作っていますから、見た目のカスタマイズはCSSソースを適当に編集して下さい。
なお、各SNSのアイコンを用意するのは面倒でしたので、テキストラベルだけで作っています。アイコンも欲しい方は別途何らかの方法でご準備下さい。(^_^;;;

実働するボタンを触ってみたい場合は、このブログ記事(=今お読みのページ)にも、本文の最後あたりに掲載されているはずですので本文の末尾あたりをご覧下さい。

SNSシェアボタン等を作る自前のHTML+CSS+JavaScriptソース

まず、HTML、CSS、JavaScriptの各ソースをそれぞれ順に全部掲載します。
とにかく動けば良いという場合は、そのまますべてのソースをコピーしてお使い頂ければ良いでしょう。修正の必要があるのは、Twitter IDを記述しているHTMLソース1箇所だけです。そのほかは、すべてコピー&ペーストで問題ありません。

▼HTMLソース

ボタンを表示するためのHTMLソースです。必要な行だけコピーしてお使い下さい。同一ページ内に同じボタンをいくつでも掲載できます(その場合でも、後述のJavaScriptソースの記述は1回だけで大丈夫です)。

<!-- Twitter  --><a href="https://twitter.com/intent/tweet?url={{URL}}&text={{TITLE}}&via=★★★" target="_blank" rel="nofollow noopener" class="snssharebtn snsbtn-twitter">ツイート</a>
<!-- Facebook --><a href="https://www.facebook.com/sharer.php?u={{URL}}" target="_blank" rel="nofollow noopener" class="snssharebtn snsbtn-facebook">facebookシェア</a>
<!-- LINE     --><a href="https://social-plugins.line.me/lineit/share?url={{URL}}" target="_blank" rel="nofollow noopener" class="snssharebtn snsbtn-line">LINEで送る</a>
<!-- はてブ   --><a href="https://b.hatena.ne.jp/entry/{{URL}}" target="_blank" rel="nofollow noopener" class="snssharebtn snsbtn-hatenabookmark">はてなブックマーク</a>
<!-- Pocket   --><a href="https://getpocket.com/edit?url={{URL}}" target="_blank" rel="nofollow noopener" class="snssharebtn snsbtn-pocket">Pocket</a>
<!-- コピー   --><a href="#" class="snssharebtn snsbtn-copy" onclick="copyPageInfoToClipboard(); return false;">URLとタイトルをコピー</a>

ソース中に見える {{URL}}{{TITLE}} の部分は、JavaScriptで置き換えられる部分ですので、HTMLソース中ではそのまま記述しておけば良いです。書き換える必要はありません。

▼Twitter IDの書き換え

Twitter用ソース(1行目)にある via=★★★ の「★★★」部分は、あなたのTwitter IDに置き換えて下さい。例えば、Twitter IDが「nishishi」なら via=nishishi にします。「@」記号は要りません。Twitter IDを持っていない場合や、持っていてもツイートに含めたくない場合は、&via=★★★ の部分は削除して下さい。
それ以外の行はすべて、そのままコピーすれば問題ありません。

※上記の各ボタンはa要素を使って作っているので、何も装飾しなかったら、ただのテキストリンクに見えます。(その状態でも動作に問題はありません。)
※各ボタンにはclass名が2つずつ付加してあります。これらは、CSSでの装飾に使うだけでなく、JavaScriptでの制御対象を認識する役割もあります。そのため、もしclass名を変更する場合は、後述のCSSやJavaScriptソース内も同じように書き換える必要があります。

▼CSSソース

ボタンを装飾するためのCSSソースです。ボタンの装飾を1から自分で作る場合は特に以下のソースは要りませんけども、まあ、参考までに掲載しておきます。

<style>
/* ▼各ボタン共通の装飾 */
.snssharebtn {
   display: inline-block;   /* インラインブロック化 */
   background-color: #ccc;  /* 背景色 */
   color: white;            /* 文字色 */
   border-radius: 3px;      /* 角丸 */
   line-height: 20px;       /* 行高 */
   font-size: 12px;         /* 文字サイズ */
   font-weight: bold;       /* 太字 */
   padding: 0 0.75em;       /* 内側余白(上下→左右) */
   text-decoration: none;   /* リンクの下線を消す */
   vertical-align: bottom;  /* 下端を揃える */
}
/* ▼各ボタンの配色 */
.snsbtn-twitter { background-color: #1d9bf0; }
.snsbtn-facebook { background-color: #1877f2; }
.snsbtn-line { background-color: #00c300; }
.snsbtn-hatenabookmark { background-color: #00a4de; }
.snsbtn-pocket { background-color: #ef4256; }
.snsbtn-copy { background-color: green; }
</style>

背景色以外のすべての装飾は共通なので、16行目以降で背景色だけを個別に指定(上書き)しています。
共通装飾部分(3~14行目)の意味は、横にコメントで書いたとおりです。個別の配色を指定せずに使われる場合に備えて、デフォルトの背景色を書いてあります(5行目)。

▼JavaScriptソース

最後にJavaScriptソースです。
先のHTMLソース中に記述されている {{URL}}{{TITLE}} の部分は、それぞれ「そのとき表示されているページのURL・タイトル」に置き換えないと意味がありません。その処理を以下のJavaScriptで実行します。下記のソースは、全部コピー&ペーストするだけで動きます。(カスタマイズの余地はありますので、その点については後述します。)

<script>
// ページの情報を得る
let pageurl = window.location.href;
let pagetitle = document.title;
// ページ内のSNSシェアボタン用a要素を対象に処理
let snsShareBtns = document.querySelectorAll(".snssharebtn");
snsShareBtns.forEach(function(ssb) {
	// href属性内のキーワードをURLエンコードした文字列に置換
	let target = ssb.getAttribute('href');
	target = target.replace('{{URL}}', encodeURIComponent(pageurl));
	target = target.replace('{{TITLE}}', encodeURIComponent(pagetitle));
	ssb.setAttribute('href', target);
});
function copyPageInfoToClipboard() {
	navigator.clipboard.writeText(pagetitle + " " + pageurl);
	alert('コピーしました!');
}
</script>

※掲載ボタンがいくつある場合でも、上記のJavaScriptソースの記述は1回だけで充分です。
※もし「URLとタイトルをクリップボードにコピーする」ボタンが要らない場合は、14行目~17行目は不要です。

▽ページの情報を得る部分(3~4行目)

3行目は、「いま表示しているページのURL」を取得しています。window.location.hrefは、ブラウザのアドレス欄にあるURLそのものです。私は、自分のサイトではこの記述ではなく let pageurl = 'https://www.nishishi.com' + window.location.pathname; のように書きました。window.location.href だと、URLに「?」を使ったパラメータや「#」を使った検索文字列が含まれている場合にそれらの文字列もそのまま含まれてしまいますので、それを除外しようかな、と思いまして。現在URLを構成部分別に得る方法については、ページを移動させたり、現在URLを構成部分別に得る方法に書いていますのでご参照下さい。「wwwあり/なし」とか「http/https」とかの揺れを吸収するには、プロトコル名やホスト名部分は https://www.nishishi.com/ のように固定的に記述してしまって、それ以外の部分をJavaScriptで組み立てて「共有用URL」を作る方法の方が無難そうな気はします。

4行目は、「いま表示しているページのタイトル」を取得しています。ページタイトル(=HTMLのtitle要素の中身)にサイト名も含まれている場合、それらを除外するような仕組みも用意しようかな……と思わなくもなかったのですが、タイトルの送信が必要なのがTwitterしかなかったので、まあいいか……と思って、title要素の中身をそのまま全部使っています。^^; ページタイトルについて何か事前に処理したい場合は、この行を書き換えれば良いと思います。

※3行目も4行目も、上記ソースのままなら、あえて変数に格納する必要はありませんけども、URLやタイトルの中身をカスタマイズする際にはこう書いてある方が便利かな、と思ってそうしてあります。

▽{{URL}} とか {{TITLE}} の部分を置き換える処理(5~13行目)

6行目では、処理対象の要素(=各ボタンを作っている要素)を一括して取得しています。ここでは、document.querySelectorAll(".snssharebtn") と書いていますから、HTMLで class="snssharebtn" の属性が付加された要素すべてを対象にして処理します。対象の判定方法を別の条件にしたい場合は、このquerySelectorAllの引数の中身を書き換えれば良いでしょう。HTMLソースでclass名を変更した場合は、ここも同様に書き換える必要があります。

7~13行目は、処理対象の要素の数だけforEachでループして、以下の処理を実行しています。

  • 9行目でhref属性値を取得して、変数に格納し、
  • 10行目で、3行目で取得したURLをURLエンコードしてから、(href属性値に含まれる){{URL}} の記述部分に差し替えています。
  • 11行目で、4行目で取得したタイトルをURLエンコードしてから、(href属性値に含まれる){{TITLE}} の記述部分に差し替えています。
  • その差し替えた結果を、12行目でhref属性に上書きしています。
▽タイトルとURLをクリップボードに入れる処理(14~17行目)

14~17行目で作っているcopyPageInfoToClipboard関数は、「URLとタイトルをコピー」ボタンが押されたときに実行されます。このボタンを掲載しないなら、14~17行目は不要です。
15行目のように、navigator.clipboard.writeText(クリップボードに入れたい文字列)のように書くと、引数の文字列をクリップボードに入れられます。IEでは対応していませんが、IEはもういいでしょう……。^^; 一部のブラウザでは、ユーザのアクションに応じて呼び出されるイベントでしか動作しない(セキュリティ面での)制約があるようです。ここでは、onclick(ユーザがクリックしたときのイベント)内で実行しているので問題ないと思います。

ここでは、writeTextの引数に pagetitle + " " + pageurl と指定しているので、「ページタイトル」→「半角空白記号」→「ページURL」の順番でクリップボードに入ります。クリップボードに入れる文字列を変更したい場合は、このカッコ内を編集して下さい。

クリップボードに格納した後、何らかの表示がないと「本当にコピーできたのかどうか」が不安になりますので、16行目でシンプルに「コピーしました!」とアラートボックスで表示させています。アラートボックスはウザいと思われる可能性もあるかな……と思わなくもなかったのですが、使用頻度が高いボタンではないので、まあ別にアラートボックスで良いよな、と思ってそうしました。^^; 何もリアクションが不要ならこの16行目は削除すれば良いです。他の動作にしたい場合は16行目を書き換えて下さい。

SNSシェアボタン等で使っている、情報の送り先URLとか

各ボタンを作るHTMLソースは先に示したとおりです。
すべてほぼコピー&ペーストして使って頂ければ良いのですが、一応その中身の解説をしておきます。
ここでご紹介したのは2022年5月時点で使用可能なソースですが、今後にサービス側の都合で変化する可能性がありますから。

▼Twitter

Twitterにツイートする文字列を送信するには、https://twitter.com/intent/tweet? に続いて、

  • url=(ページのURL)
  • text=(ページのタイトルなど)
  • via=(ツイッターのID)

の3パラメータを & 記号で連結して指定すれば良いようです。

①や②で指定する文字列は、URLエンコードしておく必要があります。
②には、ページのタイトルだけでなく何でも自由な文字列を含められます。
③に自分のTwitter IDを指定しておけば、ツイート本文の最後に「○○さんから」のような感じで表示されます。それが不要なら、&via=(ツイッターのID) の部分は省略しても問題ありません。

※問答無用でいきなりツイートされるわけではなく、ツイート本文の編集画面が出ます。

▼Facebook・LINE・Pocket

Facebookにシェアする文字列を送信するには、https://www.facebook.com/sharer.php? に続いて、u=(ページのURL) のようにパラメータを指定すれば良いようです。
LINEに送る文字列を送信するには、https://social-plugins.line.me/lineit/share? に続いて、url=(ページのURL)< のようにパラメータを指定すれば良いようです。
PocketにURLを送るには、https://getpocket.com/edit? に続いて、url=(ページのURL) のようにパラメータを指定すれば良いようです。

どれもシンプルですね。URLはどれもURLエンコードしておく必要があります。
タイトル文字列を送る仕様はありません。

▼はてなブックマーク

はてなブックマークに登録する(ブックマークする)には、https://b.hatena.ne.jp/entry/ の後に直接続けて、URLエンコードされたURLを指定するだけで良いようです。パラメータを区切る「?」記号は要りません。

それ以外にも、例えば https://www.example.com/hogehoge/ を登録したいときに、
https://b.hatena.ne.jp/entry/s/www.example.com/hogehoge/ へアクセスさせる方法もあるようですが。

まあ、「URLエンコードされたURL」を直接連結すれば済むならその方が(スクリプトは)楽なので、その方法を使えば良いと思います。

▼他のSNSなど

ここでご紹介した以外のSNS等サービス用のボタンを用意したい場合、公式で配布されているHTMLソース等から「送り先URL」とパラメータ名などが分かれば、上記のHTMLソースと同様の方法で {{URL}}{{TITLE}} の記述を使えば作れると思います。JavaScriptソースの編集は必要ありません。

SNSシェアボタン等は自前で作る方が読み込みが速くてデザインを自由にできる

というわけで、SNSシェアボタン等を自前スクリプトで作る方法でした。

公式サイト側で提供されているHTMLソースなら、サービス側の仕様変更があった際にも自動で追随される可能性が高そうな気がするのでその面では安心ですが、デザインの自由度が低くて、スクリプトの読み込みが1つ1つのボタンに対してあるので無駄な通信量が増えるデメリットがあります。各ボタンを自前で用意する方法は、上記でご紹介した通り大した分量ではないので、自前で作る方が「読み込みが速い」&「ボタンのデザインを自由にできる」という2点でメリットが高そうな気がします。
ぜひ、独自のボタンを用意してみて下さい。

この記事を「記事単独ページ」で見ているなら、実働ボタンは下記に表示されています(もし広告が見える場合は広告の下にあります)。Pocket以外は、ボタンを押しても(各サービスサイト側の)確認画面が表示されるだけなので、気軽に試してみて下さい。Pocketは押すと(ログインされていれば)すぐに登録されますが、登録したと報告される画面でキャンセル(削除)操作が可能です。

低音の耳鳴り(低音型難聴)症状が治った後の再発症記録

低音耳鳴り症状(低音型難聴)は治っても何度も発症する?

低音の耳鳴り(低音型難聴)を最初に発症したときは、17日間で一応は治まりました。

しかし、その1ヶ月後に再度発症しまして、そのとき(2回目発症時)の症状が一番酷くて数ヶ月間も低音耳鳴り症状が継続しました。耳鼻科で点滴を受けても回復せず、大病院への紹介状をもらって脳のMRI造影検査を受けたりもしました。

発症期間は長かったものの、幸いなことに治った(=低音耳鳴り症状は消え、低音域の難聴もなくなり普通に聞こえる状態に回復した)のですが……、その後、数ヶ月~数年のブランクを経て、ちょくちょく低音の耳鳴りが再度発症します。

その低音耳鳴り再発症の回数と頻度を把握するために、症状と治療の記録などをまとめてみました。ほとんど自分用の記録なのですけども、まあ、どなたかの参考になるかも知れませんから公開しておきます。^^;

最初の低音耳鳴り発症時から、最も症状が酷かったときの記録は

まず、最初の発症時から、最も酷くて点滴やMRIを受けたときの記録は詳しくブログ記事3本にしてありますので、以下にリンクしておきます。

▼1.《初回発症時》低音の耳鳴りを発症(17日目でようやく治まってきた治療記録)

左耳だけですごく低い音の耳鳴りがし出しました。ゴーという小さく低い音がずっと聞こえていて、なんとなく耳の奥が詰まっているような感覚もします。「低音型難聴(低音障害型感音難聴)」という症状が近いようでした。2つの耳鼻科を受診して4回の処方を経て、ようやくほぼ治ってきました。その治療の経過記録です。 《投稿日時:2016年07月07日 12:59》

▼2.《2回目~3回目発症時》低音の耳鳴り(低音型難聴)再発症と処方薬の記録

一応完治したハズの低音型難聴(低音の耳鳴り)症状ですが、1ヶ月後にあえなく再発症。左耳だけで低音の耳鳴りがしたり、耳の奥が詰まっているような閉塞感が続いて、低音域が聞き取りにくくなります。耳鳴りの音はハッキリした低音もあれば、風っぽい音であることもあります。症状の経過と処方薬の記録をまとめました。 《投稿日時:2016年10月31日 16:31》

▼3.《3回目発症中のMRI》低音の耳鳴り(低音型難聴)再々発症でMRI造影検査をした記録

6月に初めて発症した低音耳鳴り(低音型難聴)症状は2度の完治を経ても再々発症してしまいました。3度目の発症では1ヶ月を超えても治らず長引いたので大病院への紹介状をもらって、小脳橋角部のMRI造影検査を受けてきました。結果的には脳には特に問題がなく、これまで通りの投薬で完治を目指すことになったのですが。その経緯を記録しました。 《投稿日時:2016年12月20日 16:00》

耳鼻科の診療明細での記録によると2017年3月初旬に一応の完治になったようでした。
低音の耳鳴り症状は治まり、耳鼻科での聴力検査でも「聞こえ方に問題がない(=左右で同じ聞こえ方)」という判定でしたので。

上記の記録から、

  • 1回目の発症は17日くらいで一旦完治。
  • 1ヶ月後に2回目の発症があって、26日くらいで一旦完治。
  • その2週間後に3回目の発症があって、それが(2016年9月中旬から2017年3月初旬まで)6ヶ月弱くらい続きました。これが一番長い発症期間でした。

というわけで最終的には耳鳴り症状は治まったわけですが……...

その後、時々再発症する低音耳鳴り症状の記録

……が、時々再発症するんですよね。幸いなことに上記ほど長く耳鳴り症状が継続することはないのですけども。
ブランクは、数ヶ月間のこともあれば数年のこともあります。

その辺は細かい話ですし、(幸いなことに)酷い症状にはならなかったので、いちいちブログ記事にはしませんでした。

ただ、振り返ってみるとちょくちょく細かな症状が出ていますので、「再発症の回数と頻度」を把握しておきたいな……と思いまして、それらの記録などをまとめてみました。ブログには書かなかったものの、耳鼻科の受診記録は残してありますし、その時々の症状は記録していましたので。

以下は、それ以後にいつ再発症して、どれくらいで治ったのか等の記録です。

ただ、耳鳴りがあったものの受診しなかった(そこまで酷い症状は出ずに消えた)場合もあって、そういう細かすぎるものは記録していないことが多いので抜けているのですが。下記の「n回目」という表記は、あくまでも「記録している範囲での回数」です。

▼4回目:耳鳴り症状 1週間くらい(前回から約5ヶ月)

最も長く継続した症状から回復して約5ヶ月後の2017年7月末~8月初旬くらいに、再度低音耳鳴り症状がありました。このときは、ちょっと耳の中を指で掻きすぎたのか「外耳炎みたいになっている」という診断もありまして、いつもの耳鳴り用の薬のほかに、傷を治す系の薬も一緒に処方されました。

  • プロルナー錠20μg(ベラプロストナトリウム錠) :血管を拡げて血液の流れを良くする薬
  • 力リジノケナーゼ錠50単位 :血液の流れを改善する薬
  • ATP腸溶錠20mg(アデノシン三リン酸ニナトリウム水和物腸溶) :消化管運動を活発にする薬
  • メチコバール錠500μg(メコバラミン錠) :ビタミンB12。神経に働き、末梢神経障害の症状を改善する薬
  • ルフレン配合穎粒(アズレンスルホン酸ナトリウム水和物) :消化管粘膜を保護し、組織の修復をする薬
  • メニレット70%ゼリー30g(イソソルビドゼリー) :尿を出しやすくする薬

上記がいつもの耳鳴り症状用の薬で、以下は耳の中の傷用の薬です。

  • エトドラク錠200mg :痛みをやわらげたり、炎症をおさえる薬
  • レポフロキサシン錠250mg :細菌を殺し感染を治療する薬

で、ここからしばらくは低音耳鳴り症状が出ることはほとんどなく、ずいぶん良い調子でした。

▼5回目:耳鳴り症状 18日間くらい(前回から2年2ヶ月)

前回の症状から2年2ヶ月経った、2019年10月下旬に5回目の症状がありました。微かな低音耳鳴りのような症状はもうちょっと前にもあったので、本当に2年2ヶ月も開いたわけではないのですが、耳鼻科に行かねばならないほどの症状としては2年2ヶ月ぶりでした。

以下は、各日の症状メモです。

  • 2019/10/20 (日)
    低音耳鳴り症状が完全に復活してしまった。 数日前から備蓄処方薬を飲んでいて、一時は回復しそうになったと思ったんだけども、昨夜から大幅に悪化してしまった。 左耳だけ、水中に居るような圧力が強い。 備蓄薬が今日で尽きるので明日は耳鼻科へ行かねばならんか……。
  • 2019/10/21 (月)
    耳鼻科で聴力検査をしたところ、やはり左耳で低音が落ちていた。 いつもの処方薬として、プロサイリン錠、カルナクリン錠、トリノシン腸溶錠、マーズレンS配合顆粒、メニレット70%ゼリーに加えて、リンデロン錠も処方。4日分。 金曜日までに耳鳴り消滅するだろうか。検査があったので耳鼻科での診療費が2,410円、薬代が1,340円。
  • 2019/10/26 (土)
    うーむ。耳鳴り、悪化しているよな……。 日中のそこそこざわついている場所でも風のような音と若干の圧力を左耳だけで感じ続けている。 場所は、左耳というか、左耳の後ろあたり(左側の後頭部)から……みたいな感覚だけども。
  • 2019/10/27 (日)
    なんか微妙に頭痛を感じてきた。比喩ではなくて。ちょっと放置するとマズそうな感じの頭痛(の前兆)っぽい気がする。 いま服用している低音耳鳴り治療薬の中には利尿薬も含まれていて、昨夜は特に効いたのかトイレ回数が多かったので睡眠が不足気味。免疫も低下していそうだからなあ。 ただ、その分(かどうかはともかく)耳鳴り症状は今朝には少し緩和されていたので良かったんだけども。 耳鳴りの低音自体が治まったわけではないけど、左耳に感じていた圧力は消えた。
  • 2019/10/29 (火)
    耳鼻科での聴力検査の結果、左耳の聴力は前回よりは回復していた。 たしかに昨日あたりから、左耳に感じていた圧力は消滅していて、時々静かな環境では低音の耳鳴りが聞こえることもあるかな、という程度の症状にまで緩和していたので納得の結果ではある。 あと3日分、量を減らした薬を処方されたので、それで全回復になることを期待。
  • 2019/10/31 (木)
    18日前くらいから続いていた(再発していた)低音耳鳴り症状は、昨日の朝くらいにようやく治まった気がする。 昨日の朝と昼には念のために処方薬を飲んでいたけど、昨夜は試しに薬を止めてみた。 それでも今朝、何の問題も感じない(耳が詰まる圧力を感じることもなく、低音の耳鳴りもしない)ので、やはりこれはようやく治ったと解釈して良いのかなと思っているところ。 念のために明日は予定通り耳鼻科で聴力検査を受けてくるけども、たぶん大丈夫だろう。
  • 2019/11/01 (金)
    朝、耳鼻科で聴力検査を受けてきた。2日前の朝から既に低音耳鳴り症状は消えていたので、たぶんもう治ったんだろうと解釈していたけども、まあ念のために検査。 その検査結果でも左右の耳で聞こえ方に差はなくなっていて、「治っていますね」との診断だった。

低音耳鳴り症状が消えるまでに18日間くらいかかりまして、その間、耳鼻科へは4回行きました。

▼6回目:耳鳴り症状 5~6日間くらい(前回から2ヶ月)

前回から2ヶ月後の2020年1月中旬に再度発症しました。ただ、今回は1週間もしないうちに治ったので、前回に処方されていた備蓄分で済んだので、耳鼻科へは行っていません。

  • 2020/01/10 (金)
    なんとなく左耳の調子がよろしくないような気がしないでもないのだが、気のせいかも知れない。 なんとなく低音耳鳴り症状があるような気もしないでもないのだが、気のせいかも知れない。 耳鳴りって、最初は「気のせいかな?」という程度なので、本当に気のせいなのか、気のせいではないのか、判断ができない。 耳鼻科の先生には、そういう細かなことを気にしていると余計に悪化するので、気にしないように、と何度も言われたのだけども。(^_^;)
  • 2020/01/12 (日)
    昨日から左耳の調子が本格的によろしくない。 風のような音と圧力を感じていて、静かな環境では低音の耳鳴りがするように感じる。 聞こえる低音はハッキリとではないけども、圧力はハッキリと感じる。 今、低気圧が日本周辺にたくさん存在するっぽいからそれがトリガーになった可能性もありそうな気がする。 なんとか寝て解消したいと思って昨日は結構寝たのだけども、特に解消はしていない。
  • 2020/01/13 (月)
    再発症していた低音耳鳴り症状は、やや解消傾向にあるような気がする。 今日は仕事しなかったのが良かったのかもしれない。 ただ、まだ「傾向」であって、完全に治ったわけではないのだけど。
  • 2020/01/15 (水)
    左耳の低音耳鳴り症状は、ようやくかなり緩和されつつある気がする。 常時聞こえるのではなく、断続的に聞こえるような「悪化する寸前」のときのような状態に戻っている気がする。 これが悪くなる方向への変化途中ではなく、良くなる方向への変化途中だと良いのだが。 日中に、そこそこ雑音のする場所に居ると低音耳鳴りはほぼ分からないので、1日を通して良くなっているのか悪くなっているのかはイマイチ分からない。

予備の薬を自宅に確保しておけると、「とりあえずそれを飲んで様子を見よう」という選択肢が出るので安心できて望ましいです。

▼7回目:耳鳴り症状 2週間くらい(前回から1ヶ月)

前回の発症時には備蓄薬だけで済ませたので耳鼻科へは行かなかったわけですが、そこから1ヶ月後の2020年2月10日頃に再度低音耳鳴り症状が出まして、今度は備蓄薬を使い切ってしまったので耳鼻科へ行ってきました。

ただ、耳鼻科へ行ったのが発症から1週間後くらいだったためか(既に備蓄薬をある程度は飲んでいたためか)、耳鼻科での検査では「薬が必要なレベルではない」という診断だったのですけども。

治るまでに2週間くらいかかっているのですが、ずっと耳鳴りが酷かったわけではなく、波があったので「薬を飲んでおくべきかどうか」・「耳鼻科へ行くべきかどうか」みたいな判断に悩む感じだった気がします。

  • 2020/02/10 (月)
    左耳の調子がまたよろしくない。 まだ低音耳鳴りとまではいかない(と思う)けども。たぶん。 静かなところで確認しないと明確には分からないが。
  • 2020/02/15 (土)
    左耳の調子がよろしくない。 しかし、耳鳴りはしていなくて、ずっと耳の奥が詰まったような(気圧の変化で耳奥が詰まることがあるが、あのような)感覚だけがずっと続いている。 耳鳴りにまでは達していないので耳鼻科には行っていないのだが。この感覚もしばらく続いてしまうようなら耳鼻科へ行った方が良いのだろうなあ……。 今夜あたりに、どかーんと低気圧が来るっぽいので、そういう影響もありそうだと思うのだが、ハッキリとは分からない。
  • 2020/02/16 (日)
    [悲報]低音耳鳴り症状、完全復活。orz 低音耳鳴り症状が現れると、常に耳元で低音が鳴り続けているという問題もあるのだが、音楽の重低音が感じられなくなるという巨大な問題がある。 ヘッドホンを使って左右の耳で聞き比べてみると、右耳ではハッキリ聞こえる重低音が、左耳ではほとんど聞こえず、古い時代の激安ラジカセっぽい軽ーい音になってしまう。 とりあえず備蓄処方薬を飲んだ。たぶん2日分くらいは備蓄があるハズだ。 月曜日にも治っていなかったら火曜日に耳鼻科へ行くべきか……。orz
  • 2020/02/20 (木)
    ダメだ。回復したかなと思ったけども、やはり低音耳鳴り症状が出てきた。 本格的に再度薬を処方してもらわないとダメっぽい。明日、耳鼻科へ行くか……。orz
  • 2020/02/21 (金)
    朝に耳鼻科で聴力検査を受けてきたところ「薬が必要なレベルではない」という診断を受けてしまった。 耳奥が詰まる感覚があって、昨夜は低音耳鳴りも聞こえていたのだが、確かに今朝はそこまで酷くもなかった。 症状には波があるのだろう。 酷いときに検査を受けていればまた異なったかも知れないが。
    「薬は必要ないけどどうします?」と問われたので、あると安心だから念のためにくれと言ってみたところ4日分だけ処方された。ステロイド薬だけは除外して、その他はこれまでと同じ構成。 今、そこそこ耳が詰まっていて水中に居るような音の響きがあるのだけども、聴力が低下するほどではないということなのだろうか。まあ、数日ほど様子を見てみることにする。
  • 2020/02/23 (日)
    低音耳鳴り症状、『首を勢いよく左右に振ると、振っている瞬間だけは音が止む』という、約4年前に最初に発症したときと同じ現象が出てきた。

なんか悪化したような記録があるのですが、このケースの記録はここで終わっているので、数日内くらいには治ったのでしょう。
聴力検査って、その瞬間の聴力が分かるだけなので、「症状に波がある」レベルの症状のときには、なかなか悩ましいですね。

ここからしばらく、耳鳴り症状は出てこなくなりました。

▼8回目(軽い発症): 2~3日間くらい(前回から1年9ヶ月)

前回から1年9ヶ月経った2021年12月上旬に、2~3日間くらいだけ軽い低音耳鳴り症状が出ました。前回から結構なブランクです。

  • 2021/12/04 (土)
    耳鳴りというわけではなく、耳鳴りの前兆というほどでもなく、耳鳴りの前兆の前兆みたいな感じの微かな違和感がここ2日くらい続いている。 飛行機とかでの気圧の変化で耳が詰まった感じがするのに似た感覚が(そこまで明確に詰まった感じがするわけではないが)左耳にだけある。 ここ1年9ヶ月くらいは問題なかったのか。

症状が軽かったことと、備蓄処方薬を飲んで対処したためか、すぐに治まりました。

耳鼻科へ通うと、最後には「治りましたね」という段階に到達するわけですけども、そのときに「薬があると安心するので、念のために数日分ほど処方してもらえないか」と常に頼んでおくと良さそうな気がします。「備蓄のために」と言ったら処方してくれない(処方できない)だろうと思いますので。(^_^;)
耳鳴り治療用の薬は(たぶんほとんど)市販薬では対処できないので、処方薬を少し備蓄しておけると便利ですし、精神的にも安心できて楽です。

▼9回目:耳鳴り症状 1週間くらい(前回から5ヶ月)

前回から5ヶ月経った2022年4月末に1週間くらい低音耳鳴り症状が出ました。7回目の発症時にもらっていた備蓄薬(処方薬の残り)があったのでそれで対処しまして、耳鼻科を受診する必要はありませんでした。ただ、備蓄薬はすべて飲みきってしまいましたけども。薬の期限が2022年8月とかだったので、まあ今飲み切れて良かったのかもしれませんけども。いや、症状が出ないのが一番なんですが。(^_^;;;

  • 2022/04/29 (金)
    【悲報】低音耳鳴り症状、2年ぶりに復活。(ノД`) ……と朝に思ったのだが、夕方になって多少は緩和されてきたような気がする。 もしかして日中に通過していった爆弾低気圧の影響だろうか。だとすれば一過性のもので夜には消滅してくれるかなと期待したいのだが。 ゴールデンウィークに突入したばかりの(耳鼻科が長期休業な)時期に症状復活は特に困る……。
  • 2022/04/30 (土)
    2年ぶりに発症した低音耳鳴り症状は、爆弾低気圧のせいというわけではなく(トリガーだったかも知れないが)、今も継続している……。orz ただ、iPod touchにヘッドホンを繋いで聴力検査アプリを使ってみたところ、2年前の発症時ほどの症状ではなく、一応は正常の範囲内に収まっていた。 左右の聞こえ方に大きな差はないので、これだと「気のせいではないか」という解釈もありそうな結果だ(1枚目の画像:左側が今日の結果/右側が2年前の/中央は難聴レベルの解説)。 Androidタブレットの聴力検査アプリで試すと、左耳の低音(125Hz)でだけ明確に聞こえ方が悪いので(2枚目の画像)、症状が出ていること自体は間違いないのだろうけども、程度は「そこまで酷くない」みたいな感じだ。悪化せずに解消方向に行ってくれれば良いのだが。

    たしかに、今の低音耳鳴りはよほど静かな環境でない限りは「もしかして鳴っているか……?」くらいの感じで、耳が詰まる感じも極々稀にあるだけで常時感じるほどではない。 現状で耳鼻科に行っても「現時点では問題ない」みたいな判定になりそうな気はする。 本当に酷いときは、日中の雑音の中でも明確に低音耳鳴りが聞こえ続けるので。 備蓄処方薬があるので、今日はそれを飲んでみた。明日どうするかは明日の朝の耳の状況で考える。
  • 2022/05/01 (日)
    聴力検査アプリで調べたところ、昨夜よりも悪化(低音域の聴力が低下)しているのが分かる。ただ、2年前ほどではない。 2年前の症状では「耳が詰まっていて水中に居るような音の響きがある」と書いていたが、今の時点ではまだそこまで酷くはない。 左耳が若干詰まるような圧力は感じるが、感じないときもあって波がある。 低音耳鳴りは、低音というよりは風の音みたいな感じに留まっている気もする。これもその時々で波があるように思うが。 家の外に出ると(静かではない環境に出ると)ほとんど気にならない。
  • 2022/05/02 (月)
    低音耳鳴り症状はまだ継続してはいるのだが、明確な低音が聞こえ続けているわけではなく、耳が詰まるような圧力を感じて、風っぽい耳鳴りが聞こえたり聞こえなかったり……みたいな感じだ。 いや、たぶん風っぽい耳鳴りは常時続いているのだろうけども、風っぽいので場所やそのときの集中力によっては「気にならなくなる」というのが正しい表現だと思うのだが。 耳に感じる圧力は、感じるときと(意識しても)感じないときがある。その辺が症状の「波」なのだと思っている。 聴力検査アプリで調べてみると、昨日よりはマシな感じになっていた。とはいえ、まだ低音域の聴力に問題はあるままだけども。 このまま回復に向かってくれると良いのだが。何にしても2年前ほどではないし、悪化もしていなさそうなので、ちょっと安心ではある。
  • 2022/05/03 (火)
    聴力検査アプリで確認すると、一応は「正常」の範疇に収まる値が出ていた。 ただ、聴力検査アプリの結果はiPod touchに接続したヘッドホンの出力次第で変わるので、絶対的な値で判断するのではなく「左右の耳の聞こえ方の差」を見るに留めておく方が良いとは思うのだが。 まだ左耳に圧力は感じるので(感じたり感じなかったり断続的だけども)、完治というわけではなく、聴力を検査するタイミング次第なのだとは思う(結果を見ても左耳の方が低音が聞こえにくいことに違いはないし。もっとも高音は右耳の方が良く聞こえているわけだが。一連の症状は「低音耳鳴り症状」なので低音の聞こえ度合いが問題なのだ)。 しかし、昨日よりは良くなっているようなので(少なくとも悪化はしていない)、多少は安心だ。 この調子で回復してくれれば良いのだが。備蓄の処方薬は今日で切れた。 今のレベルでは耳鼻科で検査しても「薬は要らない」と判断されそうな気はする。どちらにしても今はGW中なので耳鼻科は開いていないが。

この数日後くらいには完全に症状は消えて、治りました。
治ったのは良かったのですけども、備蓄処方薬をすべて使い切ってしまいましたから、次がちょっと心配ではあります。次がないのが一番良いのですけどもね。^^;

ほとんど自分用の記録なんですけども(^_^;)

……というわけで、「これまでにいつ再発して、どれくらいの頻度で症状が起きているのかな」と気になったので、自分用にまとめてみました。

自分用にまとめただけですけども、過去に書いた3本の記事は結構な閲覧数がありまして、やはり「治るまでの経過がどんな感じなのか」、「どんな治療内容だったのか」、「どれくらいの頻度で再発するのか」みたいな情報が求められているようでしたから、まあ、(私個人の記録なので汎用性はないとはいえ)記録を公開しておくことにも意味はあるかな、と思って公開しておきます。^^;

特別な対策というのは特になく、

  • 耳鼻科を受診した場合は、いつもと同じ薬を処方されて、それを飲むことで治り、
  • 受診しなかった場合は、できるだけストレスを排除するようにして、身体を休めて、耳に意識を集中しないようにすることで治す

……というような感じで何とかなってきました。^^;

耳鳴りは「耳の中から音がする」ので、四六時中ずっと音に付きまとわれるので、症状が長く続くと「もしかしてこの音と一生付き合っていかねばならないのではないか」みたいな恐怖感が結構あるのですよね。そういうのを気にしないようにするのが一番の対策なわけですけども。耳鳴りの音を気にすると、脳が余計にその音に注意を向けてしまって、なおさら音が聞こえるようになってしまいますから。

とにかく、いつ再発症するか分からないのであまり気をつけようがないのですけども、とにかくストレス要因は排除するようにして生活する方が良いですね……。

Webに掲載する画像のファイルサイズは小さければ小さいほど望ましい

WebのユーザビリティとかWeb製作とか(ましてやSEOとか)をあまり知らない場合、例えば「UP可能な画像ファイルの上限が5MB」みたいな制約条件を見たときに、「なら、制限サイズをちょっと下回るサイズくらいで投稿するのがいいのかな?」というような考え方をしてしまうという話を(教育現場で)聞いたので、ちょっと解説しておきたいなと思いました。

結論から述べますが、自分のWebサイトだろうとTwitterに投稿する画像だろうと何だろうと、Web上に掲載するのなら、画像のファイルサイズは小さければ小さいほど正義です。
なぜなら、ファイルサイズが小さければ小さいほど、読み込み速度が速くなるからです。

もはや言うまでもない当たり前のことだという認識だったので、わざわざ語ろうと思ったことが最近はなかったのですけども。(昔々、まだ回線速度がすごく低速だった頃には、言われるまでもなく皆が気にしていて、いろんな工夫がされていたとは思うのですが。)

以下は、その話です。

画像のファイルサイズは極限まで小さくするのが鉄則

例えば、Twitterって、投稿可能な画像のファイルサイズの上限が1枚につき5MBに設定されているそうです。
で、イラストや漫画を描く方々のオリジナル画像データサイズは(たぶん)5MBなど軽く超えていますよね。掲載時(投稿時)にはそれをJPEGなりPNGなりの汎用画像形式に変換する必要があるわけですが、どれくらいのファイルサイズにまで減らせば良いかと考えたときに、「5MBが上限なら、5MBをちょっと下回るくらいにすればいいか」的な考え方をするの人も居るのだそうな。
まさかそんな考え方をされているとは……、と意外で驚きました。

どんな場所に掲載する場合でも、画像のファイルサイズは極限まで小さくするのが鉄則です。
先にも言いましたが、
その理由は、ファイルサイズが小さい方が表示が速いからです!

せっかく描いた(作った)画像なのですから、読み込み速度は遅いよりも速い方が良いですよね!?
なので、ファイルサイズを小さくしない理由がありません。
画像のファイルサイズは可能な限り(できる限界まで)小さくしましょう。

もちろん、画像の品質を犠牲にしてまで小さくせよと言っているわけでは全然ありません。
画像を見せることが目的なのですから、自分が納得するレベルの品質は必要です。その「自分が納得できるレベル」の範囲内で、ファイルサイズが最も小さくなるよう調整(出力)しましょう、という話です。

※注: 画像の面積(ピクセル数)を減らせと言っているわけでもありません。ピクセル数は望みのサイズのままで良いので、ファイルサイズを減らせるだけ減らしましょう。とはいえ、オリジナルのピクセル数が凄まじく大きすぎる場合には面積も削減した方が良いと思いますが。その話はここでの本題と少しズレるので詳しくは書きませんが、例えばiPad Pro 12.9だと解像度は2048×2732で、PC用ディスプレイで比較的大きなサイズ(WQHD)でも2560×1440ですから、それより大きい面積で用意しても表示できる環境がほとんどありません。(2022年時点では、AppleのRetinaディスプレイの最大解像度は6016×3384らしいですけども。60万円くらいするらしいです。^^;)

画像をWebに掲載する際に気にしたい2点

Webに掲載する用途なら、とにかく

  • 素早く表示される」という点と、
  • 閲覧者の通信量(料)を無駄にしない」という点

の2点に気をつける必要があります。
なぜなら、

  • なかなか表示されない画像をじっと待ってくれるほど人々は辛抱強くないし、
  • 通信量に上限がある回線のユーザは、無駄なパケット(通信量)を消費したくない

からです。

皆が皆、容量無制限で高速な光回線でアクセスしてくるわけではない点に注意しましょう。
特に、スマートフォン等のモバイル端末は、『月間通信容量に上限のある契約』(従量制回線)で使われている場合もよくあり、月末等で通信容量の残量が厳しいユーザは、巨大な画像の読み込みを避けたいと思っている可能性もあります。そういう場合、ちょっと重たそうな画像だなと思ったら、見るのをやめてしまうでしょう。(もちろん、よほど興味がある画像なら話は別ですが。)

閲覧者は『せっかち』だと思っておく

ウェブサイトを閲覧する人々は、そんなに何秒も待ってはくれません。

例えば、「読み込みに3秒以上かかるとアクセス者の53%が閲覧を止めてしまう」というデータもあります。
この手の「閲覧者は何秒待たされると閲覧をやめて去ってしまうか」という話は昔から今までたくさんの実験とデータが様々な場所で取られていますから、ググればいろいろ見つかります。参考までに下記に3つ紹介しておきますが、探せば本当に多数あります。(探せばもっと新しい(最近の)データもあるとは思いますが、今回の本題はそこではないので、軽くググって見つけた記事だけを紹介しておきます。)

もちろん、最初からあなたの画像(イラストや漫画など)を求めて見に来てくれた人々は、多少時間が掛かっても待ってくれるでしょう。あなたの絵を見るのが目的だからです。でも、TwitterのTLのように「偶然流れてきただけ」の場合や、Webページのリンクを踏んで「たまたまアクセスしただけ」の場合のように、そこまで深い興味があるわけでもない状態の人々は、読み込みに時間のかかるコンテンツをじーっと待ってはくれません。

特に、あなたの作る画像がECサイトで扱う目的等の「商品画像」ならなおさらです。なかなか画像が表示されないとUX(ユーザ体験)が悪くなってしまい、その販売店に対して良いイメージを持ちにくくなってしまいます。良いイメージのしない販売店(Webサイト)で何かを買おうと思う人は少ないでしょう。

できるだけたくさんの人に見て欲しいならサクッと一瞬で表示されるのが理想

で、例えば「5MBの画像が読み込み完了するまでに何秒かかるか」は、閲覧者が使っている回線の速度次第です(光回線ならほとんどどんな画像でも一瞬でしょうけども)。
なので、画像のファイルサイズだけから「表示に何秒かかる」とは判断できません。
だから、「可能な限り(限界まで)小さくしておく」という対策しかありません。

Twitterの場合もそうですが、最初に小さく加工されたサムネイルが表示されるなら、サムネイルは(おそらく)素早く表示されるでしょう。なので、そのサムネイルだけで興味を引けたり魅力が伝わったりするなら、読み込みに多少時間が掛かってもその1枚は見てもらえるかもしれません。
でも、漫画のように何ページ(=複数の画像)も続く場合、1枚目の画像が重たければ重たいほど、次の画像を見てもらえない可能性が増加してしまうでしょう。
しかし、クリック(タップ)した瞬間に表示されるくらい軽ければ、待ち時間なくサクサク閲覧できますし、通信量(料)の心配もなさそうに感じられますから、終わりまで見てもらえる可能性を高められるでしょう。

人は、よほど興味がない限り「重たくてなかなか表示されない」ようなコンテンツの表示完了を待ちません。
なので、『できるだけたくさんの人に読まれたい(見られたい)』と思うのなら、画像は極限まで軽くして、多くの環境でサクッと一瞬で表示されるレベルにしておく方が望ましいでしょう。

例えば「月間通信容量を使い切って、1Mbpsとか200kbpsとかに速度制限されている環境」で読み込まれたときに、コンテンツが全部表示されるまでに何秒かかるだろうか? ……のような点を考えられると良いですね。

どこまで減らせば良い? →「これ以上は無理!」と思う手前まで

画像の縦横ピクセル数を弄らない場合、
PNG形式やGIF形式では、色数を減らす以外に小さくする余地がないのであまり迷うことはなさそうですが、JPEG形式では品質を犠牲にすることで圧縮率をいくらでも変えられるので、どこまで下げれば良いのかに迷うという話を聞きました。
それはもう、「これ以上は下げられない」と自分で感じる限界の直前までです。

何度も言いますが、ファイルサイズは読み込み速度に直結するのですから、Webでは『容量が小さければ小さいほど望ましい』が正義です。
なので、Webに掲載する画像も(あくまでも「製作者が納得する範囲内で」ではありますが)「限界までファイルサイズを小さくする」のが基本です。

とにかく「ファイルサイズを小さくできる余地があるなら、その余地がなくなる限界まで下げる」のが鉄則だと考えましょう。

圧縮率(品質)を自分で調整できるJPEG形式の場合は、「これ以上は品質を下げられない!」と思える直前のレベルまで下げましょう。
「この品質なら充分見せられる」と思える範囲内での下限にするということです。

そうすれば、可能な限り速く表示され、通信量の無駄もなくなるので、閲覧者側にとってもメリットがありますし、その結果「より見てもらいやすくなる」のなら製作者(公開者)側にもメリットがあるでしょう。Win-Winになります。

というわけで、画像は極限までファイルサイズを小さくするのが正義、という話でした。

2022年05月
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        

他の月

--- 当サイト内を検索 ---