スキップしてメイン コンテンツに移動

投稿

ラベル(プログラム)が付いた投稿を表示しています

サイトに画像の遅延読み込みをGoogle推奨のIntersection Observerで実装しよう

イメージ
ブログの表示速度をPageSpeed Insightsで調査すると改善できる項目として「オフスクリーン画像の遅延読み込み」が出て来て取り入れると0.1秒くらい短縮できると分かる。 オフスクリーンの非表示の画像は、クリティカルなリソースをすべて読み込んだ後に遅れて読み込むようにして、インタラクティブになるまでの時間を短縮することをご検討ください。改善できる項目 via PageSpeed Insights 真っ先に心配なのはSEO(検索エンジン最適化)対策で、専らGoogle検索でのサイト評価が下がるとしたら辛い。必要な画像が的確に表示されないとサイトを巡回するクローラーに読み込まれず、コンテンツの品質が低いと判断されて検索結果で不利になってしまうのではないか。個人的に検索エンジンからのアクセスダウンは何としても避けなくてはならないと感じる。 サイトの表示速度もGoogle検索でのサイト…

JavaScriptの繰り返しボタン:押した回数を数えて実行結果を元に戻すプログラム

イメージ
サイトのボタンはhtmlのinputやbuttonとJavaScriptのonclickを組み合わせて実装できる。後者のプログラムが前者を押して発動するようになる。JavaScriptのonclickはイベントハンドラと呼ばれてhtmlのinputやbuttonの開始タグに他の属性と同じように記載すれば機能する。 onclick自体はhtmlの様々な要素に使えるから例えば画像のimgに組み込んだり、inputやbutton以外のデザインのボタンもspanなどにcssを付けて作成できるだろう。 htmlとJavaScriptでボタンを作成する 押すと画像が二枚目に切り替わる。 サンプルのソースコード html<img id="change-images" src="一枚目の画像URL" data-second-image="二枚目の…

JavaScriptでhtmlを書き換えるinnerHTML

イメージ
htmlのマークアップをJavaScriptのプログラミングで書き換える、またはサイトのソースコードを置き換えるにはinnerHTMLが良く使われる。 Element.innerHTML プロパティは、要素の子孫を記述する HTML 構文を設定または取得します。 element.innerHTML via MDN innerHTMLはElementインターフェースのDOMString(文字列)型のプロパティで、サイト上の要素内容のマークアップを表す。 JavaScriptでは他にも似たようなプロパティのinnerTextやtextContentがあって――どちらもNodeインターフェースのDOMString型に含まれる――プレーンテキスト(htmlタグなどのマークアップ言語を含まない)を設定取得できる。双方にはcssで非表示のコンテンツを知覚するかしないなどの細かい違いがあるけれども機…

JavaScriptで日付や時刻を取得して曜日を数値から文字列へと変換する方法

イメージ
Dateクラスのコンストラクタ関数を使うとDateインスタンスを素早く生成できる。An Owl on a tree branch by Lepale [CC0], via Pixabay 四つの構文と使用可能なオブジェクト DateオブジェクトはUTC/協定世界時の1970年1月1日0時0分0秒(UNIXエポック)から始まるミリ秒までの時刻値を基準として持っている。new Date() 無名コンストラクタ:現在のシステム内の日付と時刻new Date(value) value:UNIX時刻(UNIXエポックからの経過秒)new Date("dateString") dateString:IETF準拠のRFC2822の日時指定とISO8601の拡張形式
ブラウザや書式によって誤差が生じ得るnew Date(year, monthIndex, day, hours, mi…

Bloggerブログでフッターやサイドバーなどの文章が太字や斜体に変わる原因を突き止めた

イメージ
ブログのテンプレートをBloggerの公式テーマのContempoに変更してからトップページのデザインが偶に崩れてフッターやサイドバーの文章が予定外に太字や斜体に変わるのを苦しんでいた。幾つも記事の抜粋が並んでいて途中から起きていて気付いたのは記事の本文に太字や斜体のhtmlタグが使われている場合なので、外すと元に戻るから仕様がないと使うのを止めたりしていた。しかし久々に又起きてやはりどうにかならないかと昨夜は寝る間も惜しんで追求し続けてしまった。公開済みの新しくてまだトップページに抜粋が掲載されている記事を修正したら駄目になったので、もしや修正した部分が予定外のデザインに影響しているんだと原因が初めて突き止められそうな感じがしていたせいも大きかった。全然、無理で、不健康な睡眠負債を避けるべく、午後十一時過ぎには眠るしかなかったけど、しかし目を閉じてちょっと考えるとマインドフルネス(瞑想…