2023年9月20日水曜日

MoneyForwardの口座の更新ボタンが遅いから改善要望を出したらとんでもないことになった

はい、どうもご無沙汰しておりまっする。
マッスルハンターです。

もうブログの存在は完全に忘れてyoutubeとかTwitchとかやってました。

自分は昔からお金の管理にMoneyForwardを使ってて(何年経ったんだろう)
確定申告もMoneyForwardつかってやってるんですが
最近口座の一括更新ボタン押すと中々更新されなくてずっと更新中のぐるぐる回ったままで画面に向かって「遅すぎるわ!」と叫ぶほどでした。


そこでお問い合わせから「こんなに時間かかるわけないだろ改善しろぼけえ!」という勢いのままの改善要望を送ったところ
数日たったら見事に改善されていて爆速になっていました。

驚きました。


できないわけはないけどやろうとしてるとこだったのかなんなのか。
対応早すぎてびつくりした。
 いやほんとまじで爆速なったからすごく嬉しい。

ありがとうございまっする。

 ただの偶然かもしれないけど、ユーザーの声をきちんと聞いて紳士に対応してくれる運営さんは応援したくなりますね。 
というわけで広告を貼っておく。

 今後ともよろしくお願いしまっする!

2020年11月17日火曜日

サイトの表示高速化のために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属性で解決できます。

参考

2.適切なサイズの画像

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

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

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

ただ、この画像フォーマットについてはブラウザの対応状況の問題もあるかのような雰囲気も無きにしも非ずです。
その中で下記を見るとwebpはおおむね大丈夫そうなのかと思いました。
対象とするユーザーによって考える必要がありそうです。


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

めでたしめでたし。

2020年11月16日月曜日

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

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

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


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

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

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


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

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


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

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

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

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

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

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

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

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

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

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


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

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

なんということでしょう。20年たったらもうアラウンドシックスティじゃあーりませんか。
(ちなみにFV関数を使用して計算しました)

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

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

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

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

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

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

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

2020年10月31日土曜日

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

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

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

ブックマークレットというのはブックマークの機能を利用して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;

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