些細な日常

TwitterとInstagramとYouTubeには他のサイトにコンテンツを埋め込んで表示する機能があってとても便利だけれども他のサイトからすると外部ファイルやサイトを読み込まなくてはならないから表示するのに普通よりも時間がかかってしまう。 通常ではさほど気にならないかも知れないにせよ、サイトによってファイルの読み込みやコンテンツの表示の仕方からで非常に遅れることもないわけではない。 サイトで外部ファイルを優先的に読み込む方法として HTMLのリソースヒントの一つとしてpreload（先読み）のソースコードがある ので、TwitterとInstagramとYouTubeの埋め込みを少しでも表示したい場合に使える。 目次 Twitterの埋め込みコードを先読みする Twitterの埋め込みコードの外部ファイル Twitter用の二種類の先読みのソースコード Inst…

YouTube 動画の埋め込みコードにはHTMLのiframeタグが使われていてデバイスの画面毎にレスポンシブ対応でデザインを揃えるのが難しい。特にモバイルのスマホやタブレットで画面の横幅一杯に表示する場合に埋め込み動画の縦幅を一定の割合で維持できず、画像比が崩れる。写真などに使われるimgタグのようにコンテンツの画像比がiframeタグでは固定されないんだ。 デザインのCSS のコーディングで解決できて僕としては CSS関数のcalc()を使って iframeタグの画像比を計算して表示するのがスムーズだとブログの些細な日常でも取り入れている。 追記：CSSで iframeの縦横比を一発でレスポンシブに指定できるaspect-ratio が多くのブラウザで対応して来てたので、calc()のコーディングに置き換えて新しく使うようになった。 Bloggerブログでどうや…

Googleのクローラー（検索ロボット）がサイトのコンテンツのファイル／リソース（JavaScript、css、画像など）をクロールできないと Search Console のブロックされたリソースに表示される。 サイトの robot.txt ファイルでこれらのリソースのクローラーが許可されていない場合、Google によるページのレンダリングとインデックスへの登録が十分に行われず、Google 検索におけるページのランキングに影響する可能性があります。 ブロックされたリソースのレポート｜ Search Console ヘルプ ｜Google 恐ろしいのはサイトがGoogle検索にインデックスされなければ検索結果に掲載されずにアクセスが途絶えてしまう。ブロックされたリソースのコンテンツがサイト全体のサイト評価に悪影響を及ぼすかどうかは定かではないにせよ、少なくと…

ブログの記事に Instagram の写真や動画を埋め込みコードを使って載せようとするとそれ自体が長くてびっくりするけれどもJavaScriptも付いていて読み込み時間が延びるのが懸念される。 マークアップの <script> と </script> の囲みで、コンピューターのプログラムだからブラウザにとっては通常の場合よりも余計に計算しなくては内容がサイトに反映しない。 しかしバージョンアップで8（埋め込みコードの冒頭付近に「data-instgrm-version="8"」と載っている）に変わってからInstagramの埋め込みコードのJavaScriptが非常に軽量化されたようだ。 外部ファイルなので、手元に取り込んで調べてみるとたったの8.23KBしかなくなっている。日本語で換算すると四千文字くらいに相当するけれど…

Bloggerブログで記事にYouTube動画を載せるにはウェブの投稿の「動画」から取り込むのが便利だと思う。 YouTubeの自分のチャンネルは直ぐに探せるし、他人のチャンネルは検索からキーワードやURLで埋め込みコードを簡単に取得できる。 サイズが「320×266」で固定されているから タブレットやパソコンでは大きく表示したくなる けど、しかしスマホでもバランスが悪くて変えたくなって来たんだ。 BloggerのデフォルトだとYouTube動画の様々な画面比にきっちり対応できるけれども昨今は16:9の画面比が大半を占めているから完全に合わせてしまった方が良いと思う。 毎回、上下の余りの黒い部分が太過ぎるし、モバイルの記事では最初にサムネイル画像が上下の黒い余りなしに表示されていて実際の動画よりも、可成、大きく膨らんでいる。 デザインとして画面比を16:9の「3…