些細な日常

ボタンで複数の画像を切り替える方法をやってみたら二枚目以降の画像の読み込みが遅くて参った。何とかならないかと調べてみたらhtmlの「rel="preload"」を使うと助かると分かった。ファイル毎のブラウザの先読みを可能にするからJavaScriptで後から必要な画像などが直ぐに表示できるようになるんだ。二枚目へ進む 二枚目の画像にpreloadを指定していて非表示でもサイトの閲覧と同時にブラウザに読み込まれるためにJavaScriptの切り替えボタンから待ち時間なしに表示される。 preloadに対応する十二のファイルaudio：音楽video：動画track：字幕script：JavaScriptstylesheet：cssfont：フォントimage：画像fetch crossorigin：XHR／fetchworker：Worker／SharedWorkerem…

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

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…

htmlのリソースヒント（日本語訳）に載っているlinkタグの「rel="preconnect"」がサイトの表示速度を上げるのに役立つと知ってブログに取り入れたんだ。速くなるのは確かながらほんの僅かで、体感上、殆ど変わらないようだけど、しかしブラウザの外部ファイルの読み込みを効率化できるので、訪問者が以前よりも安定して閲覧できるかも知れないから外すには至らない。Luminescence of cars running on a dark road by Mateusz Dach [CC0], via Pexels目次リソースヒントのpreconnectの仕組みlinkタグの「rel="preconnect"」の記述法サイトの表示速度を上げ易くする条件WebPagetestで事前接続を調べる方法WebPagetestの通常の入力画面の日本語訳事前接続…

Bloggerの2017年の公式テーマのContempoとSohoとEmporioとNotableのソースコードの冒頭付近にnormalize.cssが付いている。normalize.cssはcssの標準化を意味していてブラウザ毎のサイトのhtmlのデフォルトのデザインの互換性を保つためのcssの独自のソースコードなんだ。normalize.cssはデフォルトのHTML要素のスタイルにクロスブラウザを一貫して良く供給する小さなCSSファイルです。それは従来型のCSSリセットへの現代的でHTML5に対応した代替です。normalize.cssについて via ニコラス・ギャラガー（訳出）開発者の一人がニコラス・ギャラガーという。昨年からモバイルで使い易くなったウェブアプリのTwitter Liteの制作にも参加したらしい。世界有数のソーシャルメディアのTwitterに関与するとは相当な経歴…

無料ブログのBloggerは独自ドメインを設定してレンタルサーバーとして無料で使うことができる。独自ドメインで有料ブログを運営する際にはレンタルサーバーの料金もかかるのが一般的だから安くても年間数千円が差し引かれるのは非常に嬉しい。機能も殆ど変わらない。個人的にGoogleフォトの高画質の写真が載せられるのとBloggerの強制の広告が出ないのが良いと思うBloggerの無料ブログの特徴が独自ドメインで引き継がれるのが嬉しい。ただし一部で新しい機能が追加されるのが遅れる場合があるかも知れないから留意しておきたい。現時点ではSSL暗号化通信（https）が二年くらい無理だったけれども今年の始めから可能になってBloggerの無料ブログと独自ドメインの機能の大きな差はなくなって来た。性能上、明らかに違うのは国別URL（ccTLD）が独自ドメインで発動しなくなる。Bloggerの無料ブログは訪…

サイトでファビコンやウェブクリップアイコンを設定すると訪問者の利便性が上がるから良いと思う。前者はブラウザのタブでサイト名の先頭に付けられる。後者はスマホ／タブレット向けのショートカットアイコンで、ブラウザのブックマークでサイト名の先頭に付けられたり、ホーム画面に追加するとデバイスに貼り付けられたりする。ファビコンとウェブクリップアイコンの何れの画像もサイトの顔みたいに訪問者へどんなサイトなのかを直感的に示すのに役立つ。ファビコンの汎用的な設定についてサーバーに専用の画像をアップロードサイトのhead内にlinkタグで画像URLを記載ファビコンのサイズ縦横16～64px程度で、綺麗に表示される画像を専用に作成して使用すると良いと思う。大きな画像を使用してもブラウザが自動的に縮小して表示するから大丈夫だ。ファイル形式はpngが小さめの画像の画質には崩れ難くて適しているけれどもWindows…

html5のサイトはdetailsタグで開閉メニュー／アコーディオンを簡単に作れると分かった。バージョン5.1から新たに加わった要素らしくて発表されないまま、かつてjQueryを使って難儀に臨むしかなかった気持ちが嘘みたいに晴れ上がっている。本当にhtmlのマークアップだけで済んでしまうからサイトの表示速度が遅くなる影響も最大限に抑えられる。details要素は、ユーザが追加情報やコントロールを得ることができるディスクロージャーウィジェットを表すdetails要素 via HTML Standard 日本語訳detailsタグのデフォルトの記載と表示<details><summary>概略</summary>細目<br>細目<br>細目</details>概略細目
細目
細目最初から開いておく<details …

サイト作成でコンテンツのマークアップを行ったhtmlにデザインを付けるのがcss（cascading style sheets／カスケーディングスタイルシート）だ。記述がhtmlのようにタグで囲むだけではないからちょっと難しい。僕は基礎を覚えるのに十年くらいかかった。デザインはテンプレートに任せておいて構わないと見向きもしなかったせいだけど、しかしcssはレベル3から色んな表現が可能だと気付いてから新しく学び出した。サイト作成が創作活動としてさらに面白くなる。今再び初心へ帰りながらcssは実際にどう使えば良いのかを入門として簡単に纏めておきたい。目次デザインの設置についてCSSの三つの指定先CSSの二つの記述法cssの内容の記述についてstyleタグでデザインする例インラインstyleでデザインする例styleタグならではのデザインstyleタグのcssの複数の指定先複数の指定先を細かく…

タブレットのChromeブラウザで検索エンジンが使えなくなった。初めてではなくて偶に起きる。エラーが出るのはなぜなのかが分からなくて混乱するし、ブラウザのChromeのせいだと真っ先に思う。Googleを使っていて「このサイトにアクセスできまん／ウェブページは一時的に停止しているか、新しいウェブアドレスに移動した可能性があります」と「ERR_FAILED」が表示されてしまう。公式のヘルプのエラーページが表示される問題や、ページの読み込みに関するその他のエラーを解決するにパソコンとスマホ／タブレット（Android、iPhone、iPad）が載っている。Androidのタブレットなので、履歴のキャッシュやクッキーを削除したり、他のタブやアプリを閉じたりしたけど、虚しくも駄目で、サイトの閲覧は可能なのに検索エンジンだけが使えないままになっている。いつも数日後か、何もしなくてもChromeがア…

Bloggerはウェブの編集のテーマのカスタマイズの上級者向けの項目からブログに使用するフォントを素早く変更できる。ページのテキストブログタイトルタブのテキスト投稿投稿タイトルのフォント投稿タイトルのストリームのフォント投稿のテキストのフォント引用のフォント検索通常フォントとWebフォントから種類も豊富に選べるのは嬉しいけど、ただし欧文ばかりで和文などの他のタイプが一つも用意されてないのが難点だ。日本語向けにデザインを考えるとBloggerでは欧文フォントがデフォルトで指定されてもいるので、何もしないと優先されて英数字だけが反映するのが悩ましい。和文フォントに欧文フォントを混ぜるデザインも良いにせよ、その場合でも訪問者によって英数字が同じで日本語が異なったらデザインを保てないから何とかしたくなる。目次Bloggerで和文フォントを多くの訪問者に統一するにはWebフォントを使うしかないBl…

ホームページでGoogle FontsのEarly accessから日本語フォントのNoto Sans Japaneseを無料で使っている。とても気に入っていてAndroidのスマホでマシュマロから搭載されているのも嬉しいかぎりだ。しかしWebフォントとしてホームページにcssへlinkのstylesheetや@importで取り込んで表示するのは非常に厳しくて表示速度を著しく低下させる。日本語は漢字が多くて英語などと比べるとデータサイズを大幅に増やしてしまうせいだ。3MBくらいだからちょっとした画像を300KBとして換算しても、百枚、載せているのと変わらない。追記：Google Fonts launches Japanese support（Googleフォントは日本語のサポートを開始）によるとフォントスライシングシステムによって、八割程、日本語のファイルサイズを削減できたようだ。世の…

Appleのパソコンやタブレットやスマホが動作している大元のシステムアプリのiOSのデフォルトのブラウザはSafariという。インターネットのサイトを閲覧・操作できる。Safariには幾つかの検索エンジンを使い分ける機能が付いているけれども何もしないとGoogle検索をデフォルトで使用するように指定されている。近年は検索エンジンの利用者はスマホが多くてAppleだとiPhoneだけれどもデフォルトのブラウザのSafariでデフォルトの検索エンジンを使うという最も簡単な方法へ入り込むためにGoogleは多額の契約金を支払っていたと分かって驚いた。Androidを開発するGoogleはiOSを開発するAppleのライバルですが、iOSのデフォルトの検索エンジンになるためにGoogleは、なんと30億円ドル(約3300億円)という破格の契約金を支払ってると報じられています。GoogleがApp…

Chromaブラウザで新しいタブを開くとGoogle検索が出て来て検索窓の上はロゴだけれども画像が付いている場合もある。Google Doodleのイラストで記念日を紹介している。
6月1日 via Google
今日は色鮮やかな蝋燭が幾つも並んでいて何だろうという感じだった。Google Doodleの記念日だったらそうした所縁のイラストなので、見ていて蝋燭だけでは想像力も働らなくて不可解だった。
Google検索の検索窓の上の画像を押すと何のためかと検索結果で分かるようになっているけれども今回は六月一日という只単に日付で本当に訳が分からなかった。
Wikipediaの六月一日が出ていて見に行ったらグレゴリオ暦で年始から百五十二日目とあるだけだから何の記念日でもなさそうだった。
誕生花がマトリカリアとクレマチスが自分の花だとか自分と同じ誕生日に柔道家の山下泰裕（かつてブログにも出て来た）がいるな…

スマホの電池持ちを考えるとGoogle検索はブラウザでできるし、アプリは要らない。しかしAndroidだと必ず付いて来る。Googleが出しているシステムソフトウェアだからGoogle検索も外すわけには行かないんだろう。自分で設定のアプリからGoogle検索のアプリを無効にするしかない。しかしMoto G5 Plusにスマホを買い替えたらホーム画面のウィジェットのGoogle検索バーが出放しになっていた。オリジナルのデフォルトのランチャーとセットになっていてホーム画面のデザインから動かせない。Google検索のアプリを無効にすると反応しない検索バーだけ残ってしまって気分が落ち込む……。Google検索バー via Google アプリ調べるとデフォルトのランチャーに組み込まれているスマホはホームアプリ／ランチャーを変えるしかGoogle検索バーは外せないらしい。スマホの電池持ちを考えると…

スマホやタブレットでサイトを閲覧する場合、cssで文章にフォントを指定しておいても殆ど反映しない。フォントをサーバーからブラウザに読み込ませなくては無理なわけなんだ。
Webフォントを使ってサーバーに使いたいフォントのファイルをアップロードするか、またはcssに外部サイトから取り込んで使うこともできる。
前者よりも後者が手軽なので、やってみたいと思ってGoogle Fontsが質量共に充実しているけれども無料で提供されていて日本語フォントのNoto Sans Japaneseが何よりも素晴らしくて気に入ってしまった。
Noto Sans JapaneseはGoogle FontsのEarly access!から手軽に取り込むことができる。
サイトでの使い方としてはhtml編集のhead内にlinkタグで置くか、styleタグのところに@importで置くかしながら表示したいところにcssのfon…

天使のモノクロームで写真素材のページは縮小版のサムネイルを並べて原寸大にリンクさせるようにしている。しかしサムネイルではなくて縮小版を大きく並べて一気に見られるのも写真素材を選び易いと思った。別のページを作っても良いけれども補足的な機能として同じページでできてしまえば別のページをブラウザで読み込まずに済ませられて動作も早いから嬉しい。
Plain 1 via 天使のモノクローム
jQueryを使った開閉メニューのソースコードをスマホのメニューなどに使えるjQueryを使って要素をクリックした時に開閉させる方法で見付けたので、使うことにした。
<script> $(function(){ $(".menu").css("display","none"); $(".button-toggle").on(&q…

僕は<pre><code>ソースコード</code></pre>のhtml構文をサイトではいつも使っている。使わなくてもソースコードをブラウザに表示することはできるけど、しかしどちらにしてもhtmlの要素タグは「<」（小なり記号）や「>」（大なり記号）がサイトに反映されなくてhtml構文としてブラウザに読み込まれてしまうから文字実体参照の「&lt;」や「&gt;」に取り替えなくてはそのままで表示されては来なかった。ソースコードが長いと一つずつ取り替えるのは相当に手間がかかるにせよ、こればかりは仕様がないと思う。気に入ったコンテンツならばただし努力こそ惜しまれないらしい。
リンクタグ（aタグのソースコード）を表示させてみる。
送信後　<a href="URL">リンク名</a>…