Blogger で jQuery を使う

jQuery は機能が豊富な JavaScript ライブラリで，多くの人が使っています．これを使うことにより，JavaScript を使った WEB サイトが簡単に作成できます．ちょっと設定すれば，Blogger でも使うことができます．設定の詳細は ライブラリー: jQuery に記載しました．

ここでは，簡単に設定方法を示します．jQuery を使うためには，テーマの HTML の先頭付近の <head> と </head> の間に以下を記載します．

<script src='httpssurutop:su//ajax.googleapis.com/ajax/libs/
jquery/3.6.0/jquery.min.js'/>

すると，Blogger でも jQuery が使えるようになります．jQuery の動作の確認は，Blogger の HTML ビュー (左上の鉛筆マークから選択) で，以下のコードを 記載します．

<div id="jQ_show"></div>

<script type="text/javascript">
  $("div#jQ_show").html("Hello world.</br>jQuery "+ $.fn.jquery)
</script>

すると，jQuery　が動作していると以下のように表示されます．

「Hello world」と「jQuery 3.6.0」と表示されると，jQuery が使えるようになったことになります．

インターネットは匿名，実名はダメか?

インターネットには匿名が溢れています．「インターネットでは本名などの個人情報を公開するな」とも言われています．本当にそれで良いのだろうか?

私の経験と実感

米国の研究者やエンジニアーは自由だ

以前読んだ本で「米国のインターネットは実名主義だ」と書かれていました．また，米国駐在が長かった会社の元上司も「日本のインターネットは匿名だからいかがわしいんだよな」とか言っていた．これらの話は一般化できるかどうかはわかりませんが，実感としては米国は実名が多いような気がします．

私が仕事で使う科学技術計算のソフトウェアーに関して疑問があるとき，英語で検索します．検索結果で表示されるサイトは米国が多く，似たような質問に多くの人が答えてます．議論に参加している人は実名どころか，顔写真を載せている場合もあります．なんでだろうと思っていたところ，米国で少しばかりエンジニアーの経験のある同僚から，

あれは自分の売り込みも兼ねている．業界で自分の名前を知らしめる事により，転職が有利になるんだ．

と教えてもらった． なるほどそうだったのか，と目からウロコが落ちる思いでした．だから，その内容は正確で丁寧です．米国中 (世界中かも) のエンジニアーや研究者が自由に自分の技術 (テクニック，ノウハウ)  を公開しています．これは，双方にとってとてもメリットがあります．議論 (質問と回答) が世界中で公開されることにより，誰もが幸せになれる良い仕組みですね．

私は実名主義だ

そういうこともあり，私が運用している WEB サイトやブログは，実名を公開しています．いたるところに匿名が氾濫しており，その反発もあります．今のところ，実名を公開するメリットは多く，困ったことはありません．例えば，お客さんと会ったときや研究会のパーティで，しばしば「見てますよ」と言われます．論文を書いているので手伝って欲しいと言われることもあります．公開内容に関して，お礼のメールをもらうこともあり，嬉しいですね．書籍の執筆を依頼されたこともあります．小学校の低学年のときの友人から突然の連絡もあり，45年ぶりに再開したこともありました．WEB サイトの間違いの指摘も，しばしばあります．ありがたいことです．反対に，デメリットは全く有りません．ストーカーにあったこともないし，誹謗中傷の類もありません．

正々堂々と意見を

実名を公開することにより，発言内容に関して自ずから責任を持つことになります．いい加減な発言はできないはずです．ネット上の誹謗中傷は匿名だからできると考えています．ちょっと前のネット上の小室圭さんへの誹謗中傷 (コメント) などひどいものです．誹謗中傷をした人のうち何人が本名で自分の責任を持った意見として，正々堂々と言えるのでしょうか．このような誹謗中傷をする人はごく僅かですが，ネット上ではそのごく僅かな極端な意見が目立ってしまいます．このごく僅かな極端な意見が一般の意見と勘違いが生じます．いついかなる時も，正々堂々と自分の意見を言うようにしたいものです．

明らかに，ネット上の誹謗中傷は匿名だからできることですね．僕は，卑怯な人間がやりたい放題のように見えます．

実名をさらすことのデメリットに関して

ネット上に実名をさらすことの反対意見として言われるのが「ネットの個人情報を利用したストーカー行為の防止」です．ストーカーを受ける可能性のある人は僅かです．そして，ストーカーをする人はさらに少なく，本当にごく僅かです．気をつけることに越したことはありませんが，極端になりすぎるのも問題と考えます．明らかに，ストーカーに結びつかない場合は実名を選択しても良いと思います．そして，正々堂々と意見を言えばよいのです．

もうひとつの実名反対の主張は，政治的な発言に対するテロおよびそれに類する行為の危惧です．オピニオンリーダーは実名で話さないと説得力にかけるので，これらの危険を覚悟しているので問題はないです．匿名主義のオピニオンリーダーなんてありえないでしょう．その一方で，市井の人が政治的な意見を言う場合，匿名と実名は本人が選択すれば良いと思います．本当に危険だと思えば，説得力が落ちることを覚悟で匿名で発言をすればよいです．この場合，危険と説得力はトレードオフの関係にあります．あくまで，個人の責任ということです．

結論

私の意見は，ネット上でも状況に応じて実名で意見を言ってもよいのではなかと思います．日本人は臆病になりすぎて，不必要に匿名が多いと感じます．匿名だから，無責任な意見もや誹謗中傷も氾濫します．実名を出すことで，責任を自覚し正々堂々と意見を言いたいですね

ただし，場合によっては危険がありますので，それは自己責任です．匿名と実名を上手に使い分けることです．

ブログの記事や WEB サイトのページを増やす３つの方法

私は３つのブログ（シニアーエンジニアーの独り言，東京案内，山本研究室ブログ)と１つの WEB サイト (山本研究室) を運営しています．運営と言っても，ただポチポチと書いているだけですが、野望は大きく，1万円/日の Google AdSense の広告収入が目標です．ブログの記事の数はそれほど多くはありません。WEBサイトのページ数は 3,590 ページとかなりの分量です．ここでは，私が実践しているブログの記事や WEB サイトのページを増やための３つの方法:

1. ネタの記録　書くべきと思ったことをメモあるいは写真に．
2. 時間の確保　時間のあるときにまとめて書く．
3. 公開を急ぐ　中途半端でも公開．

を示します．

ネタの記録　　普段から記事やサイトのページになると思ったことを記録します．ちょっとした思いついたことを何でもかんでも記録に残します．ブログの記事の場合は，思いついた瞬間にタイトルを書きます．スマホでもタイトルが書けるので重宝します．写真に撮ることもあります．科学・技術に関する内容は，Evernote に残します．インターネットで調べ物をしているとき，メモとともに有用なサイトのタイトルや内容，URL を Evernote に貼り付けます．面倒な計算などは，手書きのメモですね．このようにして，記事やページのネタ作りをします．一週間でかなりの数のネタが集まります．

時間の確保　　私の場合，週末にブログや WEB サイトを書くことが多いです．ブログの場合，タイトルが出来上がっていたり写真があるので「何を書こーかなーって」と悩むことがありません．一気に書くだけです．また，通勤電車で書くことも多いです．WEB サイトは，Evernote の内容をページにします．そのページが出来上がると，Evernote のノートを削除します．一気に週末に書くと，効率は良いです．

公開を急ぐ　　ブログにしても WEB サイトにしても公開を急ぐことが大事だと思っています．私の場合は，中途半端でも不十分な出来でも公開します．気に入らない部分は，後で直します．私のモットーは「100点を目指すよりも60点での早い公開の方が良い」です．

このような感じで，私はインターネット上での発信を続けています．かなり楽しいです．これまで示した３つの方法だけでは，継続な発信はなかなか難しいです．モチベーションの維持が大事です．いまから 18 年ほど前に，初めて WEB サイトを公開したとき，訪問者のカウンターがモチベーションの維持に役立ちました．毎日，カウンターが増えるのが楽しみでした．しばらくすると，それが Google アナリティックスになりました．ページビューの変化や読者の動向を見ていました．そして，今は Google AdSense の収益が楽しみです．この広告収入が 1 万円/日になったら，セミリタイアしようなー😁．

Tiny Basic で円周率の計算 (z80 手作りコンピューター)

 かつて一斉を風靡した Z80 (Zilog 社製, 8 ビット) を使い，Tiny Basic を動かし，円周率を計算したいと思っている． コンピューターのハードウェアーとソフトウェアーの勉強になるとでしょう．なによりも，面白そうです．

Zilog Z80 CPU

今どきの CPU はとても精緻で，はんだ付けしてコンピューターを作ることはほとんど不可能です．ハードウェアーのみならず，ソフトウェアーもなかなか手強いです．ハードウェアーからソフトウェアーまで手作りとは行かないですね．その点，Z80 のような 8 ビット CPU だと，私のような者でも CPU 動作や機械語を理解することは可能です．

最初はコンピューターの製作です．CPU とメモリー，外部入出力を取り付けて，コンピューターのハードウェアーを制作します．ユニバーサル基板にラッピングワイヤーかプリント基板で作ります．今どきはプリント基板も安いので，プリント基板かなー．

次に，Tiny Basic を構築します．これはマシン語で書きます．すると，自分で言語を作っている気になります．

Tiny Basic で円周率を計算するプログラムを書きます．小数点以下 1000 桁くらいは，計算したいです．計算時間は，どれくらいだろうか．

WEB サーバーの apache2 に巨大な error.log の削除

私の html のソースコードに問題があるらしく，時々，WEB サーバーの apache2 のログが巨大になります．この場合，以下のコマンドにより，ログファイルを削除する必要があります．

$ sudo truncate -s 0 /var/log/apache2/error.log
$ sudo rm -f /var/log/apache2/error.log.*

最初のコマンドは，error.log の中身を削除 (size: 0バイト)にします．二つ目はファイルの削除です． 削除後は，

$ sudo service apache2 restart

で，リスタートします．

Blogger で画像を並べる

 Blogger  の「画像の挿入」では，画像は横に並べることができません．そこで，横に並べるテクニックを示します．

画像を横に並べる方法

Blogger で，以下のように画像を並べる方法を示します．

Blogger では，上のように画像を横に並べる手順は，以下のようにします．

1. Blogger のエディターの「HTML ビュー」で以下を記述します．例えば，二枚の画像を横に並べる場合は，

   <div style="display:grid; gap:5px; grid-template-columns:1fr 1fr;">
       
   <!--- ここに画像を挿入する -->
   
   </div>

   とします．「grid-template-columns:1fr 1fr;」で，サイズ 1:1 の二つの画像が並びます．fr は fraction の略です．「grid-template-columns:1fr 1fr 3fr;」とすると，サイズ 1:1:3 になります．「grid-template-columns:200px 300px;」とすることもできますし，px と fr  を組み合わせることもできます．
2. この状態 (HTMLビュー) で，画像を入れる場所にカーソルを移動させます．そして，画像を挿入します．複数の画像を一気に挿入します．
3. 画像を挿入した後は，画像の幅 (width) の調整を行います．調整する部分は，<img alt=… width="xxx" />の部分です．この img タグはかなり長く，その最後の部分です．
4. 必要に応じて，キャプションを追加します．キャプションの追加はエディターの「作成ビュー」で行います．

画像を結合する方法

画像の表示枠を結合することもできます．以下の例は，二行目を結合し，横長にしています．

紅葉のはじまり

並木道

昭和記念公園

このように画像を結合するには，gird-row と grid-column を使います．使い方は，下図の通りです．キャプションがない場合は，<div> に書きます．キャプションを入れると<table>に記載します．

さらに，CSS に「grid-area: 左上行/左上列/右下行/右下列;」を書きます．上の写真では「grid-area: 2/1/3/3」で下の写真では「grid-area: 3/3/4/7」です．

grid-row と grid-column を使ったセルの結合．この例は3行7列のセルがあり，その3行目の3列目から6列目までを結合しまます．

Blogger にアップロードした画像ファイルサイズの変化

Blogger を始めて，二月ほど経過しました．結構気に入っており，当分の間の雑文は  Blogger で書きます．文字だけだとつまらないので，できるだけ画像を載せます．画像，特に写真を掲載するとき，そのファイルサイズが気になります．ファイルサイズの大きな写真は，そのままのファイルサイズでアップロードされるのだろうか? それとも，適当なサイズに圧縮 (画像の分解能低下) されて，アップロードされるのか? が気になります．もし，適当なサイズに圧縮されるならば，ファイルサイズを気にしないで，写真を撮ることができます．圧縮されないらないならば，ファイルサイズを気にする必要があるかもしれません．そこで，アップロードした写真のファイルサイズの変化を調べます．

ファイルサイズの異なる5枚 (図1から図5) の写真 (jpeg) を Blogger にアップロードしました．表1にアップロードの前の元ファイルのサイズとアップロード後のファイルサイズを示します．アップロード後のファイルサイズは，図1から図5をクリックして表示されたファイルをダウンロードし，そのサイズを調べました．アップロード後のファイルは 30 kB から 50 kB くらいファイルサイズが小さくなっています．とはいえ，ファイルサイズの変化は少ないと言えます．ほとんど，元のファイルのままアップロードされます．ただし，表示されている図1から図5のファイルサイズは，26 kB から 28 kB です．表示されているファイルサイズは小さいですが，アップロードされているファイルサイズは大きいです．

ファイルサイズはほとんど変化しないでアップロードされるため，そのサイズに気を付ける必要があります．大きすぎるファイルをアップロードしない方が良いですね．

表1 ファイルサイズの変化

図番号	アップロード前 [MB]	アップロード後 [MB]
図1	0.085	0.048
図2	0.197	0.159
図3	0.555	0.509
図4	1.184	1.150
図5	6.811	6.785

図1 ファイルサイズ: 0.084 MB

図2 ファイルサイズ: 0.197 MB

図3 ファイルサイズ: 0.555 MB

図4 ファイルサイズ: 1.184 MB

図5 ファイルサイズ: 6.811 MB

一ヶ月 Google Blogger を使った感想

 Google Bloggerを使い始めて一ヶ月が過ぎ，20個の記事を書きました．Blogger は使い勝手もよく，大変気に入っています．世の中でこれを使ってる人が少ない理由がわからないですね．コンピューターに疎い人にとっては，とても良いブログツールです．誰でもが簡単に，ブログを書くことができます．

私は，この Blogger の他に，二つのブログを持っています．ひとつは自宅サーバーにインストールした WordPresss，もうひとつはロリポップ上の WordPress です．WordPress は様々な設定ができる反面，その設定とメンテナンスがとても面倒です．私は半分，コンピューターオタクの要素があるので，面倒なことはなんとかこなしています．

コンピューターに疎い人にとっては，WordPress の敷居は高いと言わざるを得ません．事実，私はコンピューターに疎い人のために WordPress の設定を行い，執筆環境を整えたことがあります．環境を整えると数回の記事は書きますが，続きません．いろいろなことをやろうとすると，手間がかかり，そこで諦めてしまいます．アップデートのメッセージが出ようものなら，そこでパニックになる人もいるでしょう．

ほぼ環境の整ったフリー (無料) のブログシステムもあります．裏では WordPress などが動作しています．この場合，自分でブログシステムの設定やメンテナンスをすることがないため，運用は簡単です．問題は勝手に広告がつくことです．これはシステムを提供している会社の収益源がこの広告だから，仕方ないことです．このシステムを使う人の大多数は，WordPress の高機能な部分は使っていないはずです．わざわざ WordPress を使う必要はないです．

その一方で，Google Blogger には面倒な設定は殆どありません．デフォルトでもそれなりのブログを書くことができます．WordPress  のような高機能ではありませんが，90%の人はこれで事足りるでしょう．しかも無料で，広告も付きません．自分で広告を付けて，収益を得ることも可能です．

Google Blogger を始めるのは，とても簡単です．方法は私の WEBサイト「Blogger 設定基本」に書きました．色々なサイトで Blogger の始め方が書いてあります．これらを参考にすると，コンピューターに疎い使徒でも始めることができます．

Google Canvas (描画キャンバス) の印象

 年末からのブログのお絵描きに Google Canvas (描画キャンバス)  を使っている．これがなかなか良いので，印象 (first impression) を報告します．

居間でポチポチとブログを書くときは，タッチパネルのついた Chrome book  を使っています．のんびりと記事を書いています．ぶらぶら散歩中に書くときも Chrome book です．これらの状況で記事を書くときに，簡単なドロー系のお絵描きソフトウェアーが欲しくなることがしばしばあります．いくつか調べたところ，Google Canvas (描画キャンバス)  にたどり着きました．左側の写真を下絵にして，右の絵を書きました．絵心の無い私でも，簡単に描くことができました．ちょっとした挿絵をブログに載せるにはうってつけです．

以下の例は，左の写真 (明治丸) を下絵にし，Google Canvas でイラストに仕上げました．朝食を食べながら，仕上げるまで 1 時間 30 分ほどかかりました．下手ですが，雰囲気はわかりますよね．

下絵 (帆船 : 明治丸)

明治丸のイラスト

Google Canvas で使ったブログの挿絵の作成には，私はタッチパネル付きの Chrome book とタッチペンを使っています．これらは，Amazon から購入可能です．タッチペンは必須ですね．

任意の画像をアイキャッチに

アイキャッチとは，ブログの記事のシンボル (画像) です．Bloggerの場合，下の図のようにアイキャッチが表示されます．記事の内容を視覚的に示することにより，読者に興味を与えます．良いアイキャッチがあると，それだけでも記事を読みたくなります．

記事の左の画像がアイキャッチ

Blogger では，記事の最初の画像がアイキャッチになります．記事に画像がない場合は，記事のタイトルの最初の一文字がアイキャッチになります．

任意の画像をアイキャッチにする場合，少しばかりテクニックが必要です．記事の先頭に画像を配置し，それを表示をしないようにします．画像を表示させないためには，CSSの「display:none;」を使います．具体的な手順は，以下のとおりです．

1. カーソルをページの先頭に移動させます．
2. 1行の空行を作成します．これは無くてもよいが，空行がある方が後での編集が容易になります．
3. 空行の先頭にアイキャッチにしたい画像を挿入します．
4. 左上の鉛筆マークをクリックし「HTML ビュー」を選択します．すると，HTML のソースコードが表示されます．
5. 先頭付近は，図の挿入に伴い作成された HTML ソースです，それを編集し「<img style="display:none;" src="画像のパス” />」と修正します．この修正により，先頭に配置された画像は表示されません．
6. 再度，左上の鉛筆マークをクリックし「作成ビュー」を選択ます．すると，HTML ビューが終わります．

以上により，表示はされないが先頭に挿入された画像がアイキャッチになります．結構便利です．

Google マップ を Blogger に掲載する方法

地図をつかい場所を示すには，Googe マップが便利です．ここでは，Blogger に Google マップを Blogger に掲載する方法を示します．

そのまま Blogger に載せる (未加工)

素の Google マップを Blogger に掲載する方法を示します．順序は HTML のソースを作成し，それを Blogger に挿入です．

HTML のソースコードの作成

google マップで表示されている地図を，そのまま掲載するのは簡単です．表示のための HTML のソースコードの作成手順は，以下の通りです．

1. Google マップを開きます．
2. Blogger に掲載したい場所を表示させます．
3. 左上のメニューをクリックし，「地図を共有または埋め込む」を選択します．
4. 共有のダイアログが表示されますので，[地図を埋め込む] のタブをクリックします．
• HTML ソースが表示されます．
• ソースは「<iframe src="https://www.google.com/maps/ ......」となっています．インラインフレームを使っていることがわかります．
5. 地図のサイズを (小, 中, 大, カスタムサイズ) から選択します．
6. 「HTMLをコピー」をクリックします．

以上で，Google マップの HTML のソースコードの作成が完了しました．そのソースコードはクリップボードに保管されています．次節の操作で，このソースコードを Blogger に挿入します．

Blogger に挿入

クリップボードに保管されている HTML のソースコードを Blogger に貼り付ける(ペースト, ctrl+v) 手順は以下のとおりです．

1. 表示させる Blogger を開きます．
2. 左上の鉛筆マークをクリックし， HTML ビューにします．
3. 地図を表示したい場所に，先ほどコピーした HTML を貼り付け (ペースト, ctrl +v) します．
4. 左上の鉛筆マークを作成 ビューにします．

以上で完了です．以下のような Google マップが，Blogger のページに表示されるはずです．

編集した地図を Blogger に載せる

Google マップの地図に編集 (マーカー，ライン，ルート) を加えて Blogger に掲載する方法を示します．順序は HTML のソースを作成し，それを Blogger に挿入です．私の別の WEB サイト「領域指定/ルート指定地図をWEBサイト/ブログに掲載」にに記載があります．

HTML のソースコードの作成

先の例とは異なり，地図を編集します．編集とはいえ，できることは限られています．ポリゴンとラインの作成などです．編集を加えた Google マップの HTML のソースコードの作成手順は，以下のとおりです．

1. Google にログインします．通常は Google のサイトを開けば，ログインできているはずです．
2. 右上のメインメニューをクリックし，マイプレイスをクリックします．
3. マイマップを選択し，下の方にある「地図を作成」をクリックします．
4. [+新しい地図を作成] をクリックします．理由は不明ですが，[+新しい地図を作成] が表示されないで，次の画面になることがあります．
5. 「無題の地図」をクリックし，地図に名前を付けます．そして「無題のレイヤ」もクリックして，レイヤに名前を付けます．
6. 編集する地図を表示させます．そして，マーカーとライン，ルートを使い地図を編集します．
7. 「共有」をクリックすると，「地図の共有」が現れます．適当な項目を ON にします．設定が終われば，閉じる をクリックします．
8. 地図の名前の横の三点メニューをクリックし，「自分のサイトに埋め込む」を選択します．
9. すると，HTML のソースコードが表示されます．このコードが選択されていますので，[OK] をクリックします．

以上で，Google マップの HTML のソースコードの作成が完了しました．そのソースコードはクリップボードに保管されています．次節の操作で，このソースコードを Blogger に挿入します．

Blogger に挿入

クリップボードに保管されている HTML のソースコードを Blogger に貼り付ける(ペースト, ctrl+v) 手順は以下のとおりです．

1. 表示させる Blogger を開きます．
2. 左上の鉛筆マークをクリックし， HTML ビューにします．
3. 地図を表示したい場所に，先ほどコピーした HTML を貼り付け (ペースト, ctrl +v) します．HTML の width と height を変更すると，表示サイズを変えることができます．
4. 左上の鉛筆マークを作成 ビューにします．

以上で完了です．以下のような Google マップが，Blogger のページに表示されるはずです

Bloggerで Google Code Prettify (GCP) を使う

 Blogger でソースコードを書くとき，私は Bloggerで Google Code Prettify (GCP) を使います．GCP はシンタックスハイライター (Syntax Highlighter: 構文ハイライター)と呼ばれるもので，これを使うとプログラムソースコードをわかり易く表示できます．GCP の使い方に関しては，私の別のサイト「ソースリスト: Google Code Prettify」や「WEB ページ作成基準 google code prettify」に詳しい説明があります． ここでは，Google Blogger に特化して，GCP の使い方を説明します．だだし，これはかなり特殊な使い方なので，誰でもができる方法ではありませんので注意が必要です．

GCP を使うと，Blogger でも以下のような表示が可能です．これは Python プログラムのソースコードを表示した例です．

import numpy as np
import matplotlib.pyplot as plt
 
fig = plt.figure()
axis = fig.add_subplot(1,1,1)
 
x, y = np.mgrid[-2: 2: 4001j, -2: 2: 4001j]
 
axis.set_title('Ellipse')
axis.set_xlabel(r'$x$', fontsize=20, fontname='serif')
axis.set_ylabel(r'$y$', fontsize=20, fontname='serif')
axis.tick_params(axis='both', length=10, which='major')
axis.tick_params(axis='both', length=5,  which='minor')
axis.minorticks_on()
axis.set_aspect('equal', 'box')
axis.set(xlim=(-2, 2), ylim=(-2, 2))
 
axis.contour(x, y, x**2 - 2*x*y + 2*y**2, [1])
 
plt.show()
fig.savefig('plot.svg', transparent=False)

ソースコードがわかりやすいでしょう．これって，記載が大変そうですが，実はとても簡単です．具体的な手順は，以下のとろりです．

1. GCP を使った表示 (HTMLソース) をブログではない別の WEB サイトで作成します．
2. 表示されたソースコードをコピーします．
3. Blogger のエディターを「作成ビュー」にします．
4. コピーしたソースコードをペーストします．
5. エディターを「HTML ビュー」にして，margin や width, height を調整します．

たったこれだけです．不思議なことに，GCP が反映された表示が可能になります．とっても便利です．

このテクニックを使うためには，ブログではない別サイトが必要です．別サイトで GCP を使っている人は，試してください．

Blogger で MathJax を使う

MathJax は，WEB で数式を美しく表示させるための，JavaScript ライブラリーです．これを使うと WEB サイトで美しい数式を表示することができます．構文は LaTeX と同一で，LaTeX を使っている人は使い方を調べる必要もないくらいです．Blogger でも MathJax を使うことができます．その設定の詳細は ライブラリー: MathJax に記載があります．ここでは簡単に設定方法と使い方を紹介します．

設定

MathJax を使うためには，テーマの HTML の先頭付近の <head> と </head> の間に以下を記載します．

<script src="https://polyfill.io/v3/polyfill.min.js?
    features=es6"></script>
<script id="MathJax-script" async src="https://cdn.jsdelivr.
    net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>

たったこれだけで，LaTeX 構文が使えるようになります．すると，以下のような数式が記述できます．

\begin{align} f(a)=\frac{1}{2\pi i}\oint\frac{f(z)}{z-a}dz \end{align} \begin{align} \int_D(\nabla\cdot A)dV=\int_{\partial D}A\cdot n dS \end{align}

LaTeX の構文は，Bloggerの HTML ビューで記述します．HML ビューは，Blogger のエディターの左上の鉛筆マークをクリックすると選択できます．この二つの数式は，

\begin{align}
f(a)=\frac{1}{2\pi i}\oint\frac{f(z)}{z-a}dz
\end{align}

\begin{align}
\int_D(\nabla\cdot A)dV=\int_{\partial D}A\cdot n dS
\end{align}

と Blogger で記述しました．

モバイル設定

デフォルトだとスマートフォンで表示は，整形された数式ではなく LaTeX のコマンドが表示されます．モバイル用の HTML に先の設定を書き込む必要があります．Blogger の場合，モバイル表示の場合の HTML の編集方法がわかりません．そこで，私はスマートフォンでもウェブバージョン表示に変更しました．方法は，次のとおりです．

1. メニューボタン > テーマ > カスタマイズ▼の▼を順番にクリックし，「モバイルの設定」を選択します．
2. モバイルテーマを選択で「デスクトップ」を選択します．
3. 「保存」をクリックします．

以上で，スマートフォンでもウェブバージョンで表示されます．

Google ニュース

 昨日の帰宅途中の地下鉄の駅で，Google ニュースの宣伝の看板を見た．まずは，センスの良さに惹かれた．３つの看板が並んでいて，最後の看板は日本の新聞社の一覧が出ていた．

日本新聞協会の新聞の発行部数と世帯数の推移を見ると，この二十年間で一般紙の発行部数はは 31 % 減少で，スポーツ紙にいたっては 58 % の減少です．昔は，電車内で新聞を読む人が多かったですが，今は皆無です．かくいう私も，転職して仕事が忙しくなってからはほとんど新聞を読まなくなりました．中学生のころから，今の会社に転職する前 (45歳) までは本当に新聞をよく読んでいましたが，今は週に30分くらいです．

新聞に変わる情報源として，台頭したのがインターネットです．多くの人がインターネット経由で情報を得ています．今後も，この動向は変わらず，ますますインターネットがマスメディアの重要位置を占めるでしょう．

このような状況の中，新聞社の経営状態は厳しい局面にあることは容易に推測できます．そんな中，昨日の看板を見て，いよいよ新聞社もインターネットの巨人である Google と提携するんだと，少し喜びました．しかし，この推測は誤りであることが，今朝，わかりました．ずーっと以前から，Google と新聞社は提携関係にあることを知りました．Google のサービスである「Google ニュース」を開くと，新聞が読めました．こんなことを知らなかった自分も恥じましたが，多くの人も知らないでしょう．わざわざ Google が広告を出すくらいですから．

しばらく，Google ニュースをウオッチしようと思います．

Blogger のラベルの階層化

Google Bloggerのラベルを階層化しました．私のこのブログ「シニアエンジニアの独り言」のラベルが階層化されていることがわかるでしょう．私が考える Blogger の最も使い難い点は，ラベルが階層化されていないことです．ブログの内容をざっと見る興味のある項目を探す手段はラベルしかありません．それが階層化されていないとなると，かなり読者には辛いです．

そこで，ラベルを階層化することにしました．階層化する方法の詳細は私の WEB  サイトのラベルの階層化を参照下さい．ラベルの階層化をする概要は，以下のとおりです．

• Blogger のレイアウトにあるガジェット「HTML/JavaScript」を使います．
• このガジェット内に HTML を記述します．
• リスト (<ul>〜</ul> あるいは <ol> 〜 </ol>) で階層化します．入れ子も可能です．
• ラベルは「https://あなたのサイト.blogspot.com/search/search/?=ラベル」を使い，リンクを張ります．
• 検索条件の論理積演算には「+」，論理和には「|」を使います．括弧も使えます．

この方法を使うと Blooger のラベルの階層化はとても簡単にできます．読者にも優しいと思います．

私のガジェットの中身 (HTML) は，以下のとおりです．

<ul style="list-style-type:square;">

<li><a href="https://yamamo10.blogspot.com/search/?q=label:コンピューター">コンピューター</a>
  <ul style="list-style-type:none">
    <li><a href="https://yamamo10.blogspot.com/search/?q=label:コンピューター+label:インターネット">インターネット</a></li>
    <li><a href="https://yamamo10.blogspot.com/search/?q=label:コンピューター+label:レトロ">レトロ</a></li>
    <li><a href="https://yamamo10.blogspot.com/search/?q=label:コンピューター+label:Blogger">Blogger</a></li>
  </ul>
</li>


<li><a href="https://yamamo10.blogspot.com/search/?q=label:科学|label:工学">科学・工学</a>
  <ul style="list-style-type:none">
    <li><a href="https://yamamo10.blogspot.com/search/?q=(label:科学|label:工学)+label:物理">物理</a></li>
    <li><a href="https://yamamo10.blogspot.com/search/?q=(label:科学|label:工学)+label:数学">数学</a></li>
    <li><a href="https://yamamo10.blogspot.com/search/?q=(label:科学|label:工学)+label:その他">その他</a></li>
  </ul>
</li>

<li><a href="https://yamamo10.blogspot.com/search/?q=label:将来の夢">将来の夢</a>
  <ul style="list-style-type:none">
    <li><a href="https://yamamo10.blogspot.com/search/?q=label:将来の夢+label:物理">物理</a></li>
    <li><a href="https://yamamo10.blogspot.com/search/?q=label:将来の夢+label:コンピューター">コンピューター</a></li>
    <li><a href="https://yamamo10.blogspot.com/search/?q=label:将来の夢+label:旅">旅</a></li>
  </ul>
</li>


<li><a href="https://yamamo10.blogspot.com/search/?q=label:オピニオン">オピニオン</a>
  <ul style="list-style-type:none">
    <li><a href="https://yamamo10.blogspot.com/search/?q=label:オピニオン+label:ビジネス">ビジネス</a></li>
    <li><a href="https://yamamo10.blogspot.com/search/?q=label:オピニオン+label:技術">技術</a></li>
    <li><a href="https://yamamo10.blogspot.com/search/?q=label:オピニオン+(label:環境|label:エネルギー)">環境・エネルギー</a></li>
    <li><a href="https://yamamo10.blogspot.com/search/?q=label:オピニオン+label:公共関係">公共関係</a></li>
    <li><a href="https://yamamo10.blogspot.com/search/?q=label:オピニオン+label:芸術">芸術</a></li>
  </ul>
</li>


<li><a href="https://yamamo10.blogspot.com/search/?q=label:経験">経験</a>
  <ul style="list-style-type:none">
    <li><a href="https://yamamo10.blogspot.com/search/?q=label:経験+label:授業">授業</a></li>
   </ul>
</li>


<li><a href="https://yamamo10.blogspot.com/search/?q=label:散策">散策</a>
  <ul style="list-style-type:none">
    <li><a href="https://yamamo10.blogspot.com/search/?q=label:散策+label:東京都内">東京都内</a></li>
    <li><a href="https://yamamo10.blogspot.com/search/?q=label:散策+label:道具">道具</a></li>
  </ul>
</li>


<li><a href="https://yamamo10.blogspot.com/search/?q=label:思い出">思い出</a>
  <ul style="list-style-type:none">
    <li><a href="https://yamamo10.blogspot.com/search/?q=label:思い出+label:ブラジル">ブラジル</a></li>
    <li><a href="https://yamamo10.blogspot.com/search/?q=label:思い出+(label:幼稚園|label:小学校|label:中学校|label:高校)">幼稚園/小/中/高校</a></li>
    <li><a href="https://yamamo10.blogspot.com/search/?q=label:思い出+label:大学">大学</a></li>
    <li><a href="https://yamamo10.blogspot.com/search/?q=label:思い出+label:社会人">社会人</a></li>
  </ul>
</li>


<li><a href="https://yamamo10.blogspot.com/search/?q=label:普段の生活">普段の生活</a>
  <ul style="list-style-type:none">
    <li><a href="https://yamamo10.blogspot.com/search/?q=label:普段の生活+label:購入品">購入品</a></li>
    <li><a href="https://yamamo10.blogspot.com/search/?q=label:普段の生活+label:ひとり言">ひとり言</a></li>
    <li><a href="https://yamamo10.blogspot.com/search/?q=label:普段の生活+label:日記">日記</a></li>
  </ul>
</li>

</ul>

Blogger で外部ファイルを読み込む方法

Blogger でも外部ファイルを読み込むことが可能です．Google ドライブに保管されているファイルの読み込みが簡単です．ここでは，Google ドライブにある画像ファイルを Blogger で表示させる方法を示します．こんなことしなくても Blogger に画像を挿入することは可能ですが，勉強です．

最初に必要なことは，画像のファイルを共有の設定をすることです．Google ドライブの画像ファイルを右クリックし「リンクを共有」を選択します．閲覧者で「リンクをコピー」を選択します．すると

https://drive.google.com/file/d/1aF4BdnHRhEfTI9uB_JTpiagwAIc6_NE6
       /view?usp=sharing

というようなリンクが得られます．赤字の部分がファイルIDで，それをメモします．このファイル ID はファイルごとにユニークに決まっています．

このファイル ID を使い，Blogger 中に以下

<div style="text-align: center;">
  <img src="https://drive.google.com/uc?export=view&amp;id=1aF4BdnHRhEfTI9uB_JTpiagwAIc6_NE6" style="width: 300px;" />
</div>

を記載すると，下の画像が表示されます．

「https://drive.google.com/uc?export=view&id=ファイルID」で Goole ドライブのファイルを使うことができます．

Google AdSense が「承認手続きを進めています...」に

 ちょっと前に，Google AdSense が「承認手続きを進めています...」になりました．このままほっとけば，そのうちに合格通知が来るものと思っていました．ネットで調べると，ほったらかしはダメなようです．広告の設定を行わないと「承認手続きを進めています...」の状態が延々続くようです．

そこで，広告を設定しました．設定方法の詳細は「ブログに広告を表示する」に示します．ここでは，「承認手続きを進めています...」が表示された後について，簡単に説明します．この表示が現れたら，以下の順序で，Blogger の広告を設定します．

1. 自分の AdSense のページに移動し，広告 > サマリーをクリックします．そして「コードを取得」をクリックします.
2. 現れたコードをコピーします．[コードをコピー] をクリックするだけです．
3. コピーしたコードを Blogger の <head> と </head> の間に貼り付けます．
4. 次に広告を設定します．AdSense のページに移動し，広告 > サマリーをクリックします．そして，広告を表示させる Blogger の編集をクリックします．
5. 現れた広告設定の「自動広告」を ON にします．そして，[サイトに適用] をクリックします．
6. Blogger のレイアウトを開き，「ガジェットの追加」をクリックし AdSense を追加します．これは不要かも? 私は念のために，追加しました．

以上で，しばらく待ちます．私の Blogger では，まだ結果は出ていません．楽しみです．