サイトの表示高速化のためにPage Speed Insightsを利用しましたとさ。

はいどうもマッスルハンターです。

とにかくサイトの表示は速い方が良い。そう信じて疑わないけど、何をすればいいのかわからない。

そんなあなたは是非こちらを利用しましょう。

Page Speed Insights

こちらに高速化したいサイトのURLを送信すれば分析してアドバイスをくれます。

1回やれば言われるまでもなく次からできる事もありますのでまずは見てみると良いでしょう。

私の場合はただ作っただけで全く気にしてなかったゴミのようなページがあったんでそれで試して下記を改善しました。

1.レンダリングを妨げるリソースの除外

この「画面の最初の描画のために必要な情報に絞る」というのがとても重要なようです。

javascriptやCSSの読み込みを非同期で行ったり、最初の描画に必要なCSSをインラインで設定したりしろとのこと。

私の場合はhead内で読み込んでたcssがこれに該当してたので「rel="preload" as="style"  onload="this.onload=null;this.rel='stylesheet'"」を追加したところ改善しました。

javascriptの場合はasyncやdefer属性で解決できます。

参考

https://developers.google.com/web/fundamentals/performance/critical-rendering-path/render-blocking-css

https://web.dev/defer-non-critical-css/

2.適切なサイズの画像

これはフリー素材を拾ってきたままあげてて、無駄にでかい解像度だったので下記のフォーマットと合わせて修正しました。

3.効率的な画像フォーマット

最近はjpegにも種類があるようでして、JPEG2000やJPEGXRなんていう次世代フォーマットがあるようです。jpegではありませんが、同じくgoogleさんの提唱する？webpも助言に含まれていたので、既にインストール済みだったGIMPでWEBPに変換しました。

ただ、この画像フォーマットについてはブラウザの対応状況の問題もあるかのような雰囲気も無きにしも非ずです。

その中で下記を見るとwebpはおおむね大丈夫そうなのかと思いました。

対象とするユーザーによって考える必要がありそうです。

https://caniuse.com/?search=WebP

あまり中身のないページだったため以上を改善しただけでモバイル90、PC95までスコアがあがりました。

めでたしめでたし。

Googleアナリティクスでイベントを送信する。

アナリティクス数年見てなかったけど、だいぶ進化しているようですね。

進化して色々機能が増えてて、逆に見方がまだよくわからないですが・・・ｗ

なんか独自のイベントを送信して測定できるようなので試しにやってみました。

イベントを送信ってのは、サイト内の特定のページをみたり、フォームを送信したり、リンクをクリックしたとかを検知することができるということですね。

やり方としては、この辺書いてある通りなんですが

新バージョンのアナリティクス（GA4）で管理→データストリームから詳細を開いて

タグの設定手順の「グローバル サイトタグ（gtag.js）」ってところにコードがあるのでこれをまずheadタグ内に貼り付けます。

そしたらイベントを設定したいところに仕込めばいいです。

リンクをクリックとかだったらリンクにonclick="gtag('event','xyz');"とかやればひとまずそれっぽくなりますが、こちらのドキュメントにあるようにイベントコールバック関数の実装とかした方がいいです。

このドキュメントほぼコピペでいけるんじゃねえかな（適当）

私は今のところ使い道がないので試しに触っただけなのでやってないですが一応検知はできてました。

（逃してるのもあるかもしれないけど逃したら逃したことすらわからないぜ）

要望がどっかから聞こえてきたらもっと詳しく解説するかもしれない（気分）

ネトゲ廃人になりたいので投資について勉強しなおしています。

楽しく仲間と遊んで暮らしたいのでそれには一体いくら必要なのだろうかと色々考えていました。

まず自分だけが生活するにしても年間1000万を下回ると耐えられないと思うので、1000万円の不労所得を得るには？

なんと年率10％で運用できても1億円必要じゃありませんか。

毎月〇万円積み立てて、〇％で運用したとして、〇十年でいくらになるか計算してみました。

毎月20万円ずつ積み立てて、年率5％で運用できたとして、20年でやっと8000万円です。

なんということでしょう。20年たったらもうアラウンドシックスティじゃあーりませんか。

（ちなみにFV関数を使用して計算しました）

毎月10万で5％だと30年かかるじゃあーりませんか。

なんという恐ろしい数字でしょう。あと20年や30年も働くんですか？？

えええええええええ！！！絶対そんなの無理ですぅぅぅぅ既に働きたくないのにいいいいいいいいい

というわけで、知っていたのにやらなかったがために投資だけでネトゲ廃人になるには遅すぎました。どげんかせんといかん。

節約は続かないから程々にしかできないので、稼ぎを増やす必要があります。

投資はさっさと始めて時間を味方につけるのが正解ですね。

税金対策になったりもするしね。

このサイト明るすぎて目が痛い！って時に使うディスプレイの設定を変えずに画面を暗くするブックマークレット。

たぶん需要はほとんどない、いやむしろ全くないと思う無駄スクリプトのご紹介です。

本スクリプトご紹介する前にブックマークレットというものについて軽く説明しておきます。

ブックマークレットというのはブックマークの機能を利用してURLのとこにjavascriptなどの？コードを入力しておくことでブックマークを利用するかのように、スクリプトを手軽に実行できる裏技的なものです。

例えばどんなことができるのかというと

• 通常はリピート再生できないYouTube動画をリピート再生する
• YouTubeの動画ページで起動すると、通常はない｢ダウンロード｣ボタンが出現します。

とかできるようですね。

もっと詳しい説明と上記のようなブックマークレットのご紹介はこちらのサイトにありました。

このようにブックマークレットも誰かが配布してくれてたりするので、こんなのできないかな～？って思ったら探してみてもいいかもしれません。

もちろん自分で作っても良いでしょう。

さてそれでは今回のスクリプトはこちらです。

下記をドラッグアンドドロップでブックマークバーに追加すれば使えるはず！

暗転

スクリプトの中身としては下記になります。

javascript:
if (document.getElementById('ranaRuta')) {
  document.getElementById('ranaRuta').remove();
} else {
  let d = document.createElement('div');
  d.id = 'ranaRuta';
  d.style.cssText = 'top:0; left:0; width:100%; position: fixed; height:100%; background-color:black; opacity:0.5; z-index:10000; ';
  let b = document.getElementsByTagName('body')[0];
  b.insertBefore(d, b.firstChild);
}

（あ、なんかすげえ見づらいけど、ま、いいか）

真っ黒だけど半透明なdivで画面全部覆ってだけです。

divで覆ってしまうので画面内のボタンとか押せなくなります。

もう一度使うと元に戻りますので戻してから操作してください。

下記のcssの部分をいじれば色をかえたり、明るさを調節できますね。

top:0; left:0; width:100%; position: fixed; height:100%; background-color:black; opacity:0.5; z-index:10000;

一体なんのためにつくったのか、それは画面が明るすぎると目が痛いけど、ディスプレイの設定をいちいち変えるのが面倒だからです。

Lets's Encryptで無料のサーバー証明書でhttps化する！

 はいどうもマッスルハンターです。

久々のまともな投稿です。

最近httpだとブラウザに怪しげな文言が表示されますよね。

こういうやつ↓

やはりちゃんとしたサイトを運営しようとするとこれはよろしくないので

長年放置していたhttps化をやってやりました。

手順としてはCertbotというツールが公開されているのでこれをインストールするだけって感じでとても簡単でした。

Let's Encryptっていうのがアメリカの無料の認証局だそうなんです。

企業の寄付で認証局運用のコストをなんとかしているそうです。

（詳しく知りたい人は別途調べてください）

参考:無料証明書と有料証明書の違い|さくらのSSL

なのでひとまずこちらを利用しようということで開いてみましたら

Let's Encrypt お優しい事に日本語でした。

こちらの証明書は90日毎に更新しなきゃないそうなんですが

certBotっていうのを使えば自動化できるとのことだったので

certBotさんをお訪ねして下記キャプチャ部分のsoftwareとsystemを選択すると設定方法の書いてあるページに飛びますのでその通りに設定するだけでございます。

私の場合はsoftwareはnginx

systemはCentOS7だったのでCentOS/RHEL 7を選択しました。

記載の手順通りですが

1. SSH into the server

   サーバーにSSHでログインします。

2. Enable EPEL repo

   EPELレポジトリが有効でなければ有効にします。
   CentOS7ならこんな感じっぽい
   yum install https://dl.fedoraproject.org/pub/epel/epel-release-latest-7.noarch.rpm
   その他はこちらからどうぞ
   https://fedoraproject.org/wiki/EPEL#Quickstart
   
   

3. Install Certbot

   Certbotさんをインストールします。

   sudo yum install certbot python2-certbot-nginx

4. Choose how you'd like to run Certbot
   • Either get and install your certificates...

     certbotさんにnginxさんをごにょごにょして頂きます。

     sudo certbot --nginx

   • メアドとか聞かれます。たぶん期限切れが近くなると通知とかくんのかなぁくらいに捕らえました。本当のところは英語を解読してください。
   • 最初nginx側でドメインを設定していなかったのでなんたらかんたら言われました。
   • ngnx.confにserver_name を設定してからやり直したらよさげでした。
   • 上記コマンド実行後にnginx.confを確認すると
   •  # managed by Certbotというコメントがついた行が追加されてました。
   • 証明書のパスとかも書き込んどいてくれてるみたいなので特にいじる必要はなかったです。
   • ここでいったんhttpsでアクセスし、無事に閲覧可能な事を確認しました。
   • 
     

5. Set up automatic renewal
   これはたぶん証明書が90日で切れるので更新を自動かする処理をcronに登録しておけってことだと思われます。
   いつの間にか切れてると面倒なので登録しておきましょう。
   

   
   echo "0 0,12 * * * root python -c 'import random; import time; time.sleep(random.random() * 3600)' && certbot renew -q" | sudo tee -a /etc/crontab > /dev/null

というわけで無事に鍵付きになりました。めでたしめでたし。