些細な日常
サイトの表示速度を計測する PageSpeed Insights にその他のパフォーマンスを判定する要素が盛り込まれて総合的に使い易さの指標が得られるようになった。 コントラスト比の最低基準は4.5 : 1 PageSpeed Insights｜ Google Developers ブログで気がかりになったものの一つにコントラスト比があって「背景色と前景色には十分なコントラスト比がありません」という指摘と共にユーザー補助の項目も少し減点されてしまった。 調べるとWCAG（Web Content Accessibility Guidlines／ウェブコンテントアクセシビリティガイドライン）が定める最低基準となるレベルAAの4.5を通常の文字サイズで越えなくてはならない。 テキスト及び文字画像の視覚的提示に、少なくとも 4.5:1 のコントラスト比がある。ただし、次の…
ブログを始めとして様々な創作活動に非常に便利だと気付いた最初のブレットの Xperia Z3 Tablet Compact が七年目で電池がニ時間も持たないくらいレンズしたし、性能も相当に遅れているだろうからそろそろ買い換えなくてはならないと感じた。 LenovoのTab M8（FHD）を選んだ理由 前回に続いてAndroidタブレットからLenovoのTab M8を選んで購入した。 画面サイズはXperia Z3 Tablet Compactの8インチに慣れているせいもあるだろうけど、とにかく最も使い易いと思って新しいタブレットの購入の第一条件とした。 値段は余り高過ぎる必要はない。ブログの作成（文章と多少の画像や動画の編集）とインターネットの閲覧ができれば良いので、高性能なものは求めない。第二条件として二万円台の価格を想定した。上手く行けば二万円を下回りた…
クラウドストレージの Dropbox はサイトで自由にコンテンツを表示できる直リンクのURLをあらゆるファイル形式で取得することができる。 Dropboxの共有リンクのURL 直リンクをURLを取得するには共有リンクが有効になってなくてはならない。 Ringtone｜ Dropbox ファイルのメニューの「リンクをコピー」から共有リンクを取得できる。 DropBoxの共有リンクのURLの例 https://www.dropbox.com/s/gmgraajvzjninyg/Ringtone-Original%2014.ogg?dl=0 ドメインの「www.dropbox.com」から共有リンクのコードとファイル名が半角スラッシュ（/）に区切られて続いて最後にパラメーターの「?dl=0」が付く。 アクセスするとDropboxのファイルのプレビューになる。 パラメーターの「d…
サイトの複数の要素にJavaScriptで共通の処理を行うとき、forEach()メソッドがとても便利で、良く使っている。 const atpss = document.querySelectorAll("article.post"); atpss.forEach(atps => { // 全てのarticle.postへの共通の処理 }); forEach()メソッドは反復処理のfor文のように数を気にせず、いつでもそれだけで配列を扱えるから簡単だし、サイトの要素を取り込むquerySelectorAll()メソッドによるノードリスト（配列と似たもの）にも対応しているから使い易い。 しかしasync／await、またはPromiseの非同期処理を組み込むことができない。 いい換えると複数の要素に対する複数の処理を前のものが終わっ…
JavaScriptのイベントのtransitionendとanimationendはそれぞれにCSSのtransitionとanimationの終了を検出する。なので後者を使うときに前者も一緒に使うとサイトで連動する動作を簡単に実現するプログラムが組める。 Metal gears by Bill Oxford / Unsplash 一般的にメニューをスライドしたり、ボタンをフェードしたりするなどの コンテンツのアニメーションを介した表示と非表示の切り替え に役立つ。 transitionendイベントでtransitionを捕捉する 何かをCSSのtransitionで動かしたら当のHTML要素をJavaScriptのaddEventListener()メソッドのtransitionendで補足して連動して別の状態に持って行くのが簡単な使い方だ。 trans…
Bloggerのウェブの編集の「レイアウト」からフィードウィジェットを使うとブログの記事に付けられた全てのコメントを対象にコメントのフィードのURLから読み込んで新しい順で直ぐに表示することができてとても便利なんだ。 フィードの設定｜ Blogger フィードの設定で入力するブログのコメントフィードのURLはBloggerでは二つ用意されている。 Atomのコメントフィード ドメインの末尾に「/feeds/comments/default」を付けたもの RSSのコメントフィード ドメインの末尾に「/feeds/comments/default?alt=rss」を付けたもの Bloggerの無料版のサブドメインのブログならばドメイン名の「blogspot.com」の「.com」、有料版のカスタムドメインのブログならばそれぞれのドメイン名の次の「.com」や「.net…
JavaScriptのプログラミングでサーバーを介したデータの受け渡し：Ajax通信を行う仕組みの一つに Fetch API がある。オブジェクトに最初からウェブの送受信の時間差の難点を克服する Promise を想定して使えるのが特徴で、旧来の XMLHttpRequest API と比べて便利に刷新された機能を有する。 しかし取得するデータが Document インターフェースに属さないのがちょっと使い辛い。 例えばfetch()メソッドでhtmlファイルのデータをtextで受け取ってもそこからHTMLを操作するのはUSVStringだから合わなくて全く不可能なのが厄介みたいな場合が出て来る。 Fetch APIはデータに特化して読み書きに純粋に注力するべく考案されているのか、少なくともhtmlファイルなどを一つのDOMツリーとして種々と操作するには却って旧来のXM…
家にウォーターサーバーが設置されて五年くらい経つ。僕が入れたわけではないので、気にも留めずにいた。貧乏に苛まれるほどに自分で飲みたい 富士山の霊水 などは買えなくなってもはや自宅のウォーターサーバーばかり使うようになっている。 どんな水なのかとチェックすると アクアクララ だった。健康被害は特にないし、家に住んでいる誰も死んでなくて病気にもかかってないから一先ずは普通に良いと思う。 アクアクララは独自のデザインウォーターを提供する 水は健康に重要 だけど、しかし栄養素を取るのが主要な目的ではない。一番、大事なのは健康の維持に必要な水そのもの（H2O）をしっかり取って他の病原菌を始めとした有害成分を減らす。その上で初めてミネラルなどの栄養素が含まれていて健康に有利かどうかを問うべきだと考える。 ウォーターサーバーのアクアクララの水の成分を調べると地域毎の水道水を細かく…
Bloggerブログで記事にYouTube動画を載せるにはウェブの投稿の「動画」から取り込むのが便利だと思う。 YouTubeの自分のチャンネルは直ぐに探せるし、他人のチャンネルは検索からキーワードやURLで埋め込みコードを簡単に取得できる。 サイズが「320×266」で固定されているから タブレットやパソコンでは大きく表示したくなる けど、しかしスマホでもバランスが悪くて変えたくなって来たんだ。 BloggerのデフォルトだとYouTube動画の様々な画面比にきっちり対応できるけれども昨今は16:9の画面比が大半を占めているから完全に合わせてしまった方が良いと思う。 毎回、上下の余りの黒い部分が太過ぎるし、モバイルの記事では最初にサムネイル画像が上下の黒い余りなしに表示されていて実際の動画よりも、可成、大きく膨らんでいる。 デザインとして画面比を16:9の「3…
僕は Twitter をやって Facebook をやらないので、近年の特に日本の若者たちが似通って来ているのが面白いと思った。 「現在利用しているSNSサービスや動画サイト」について質問したところ、「LINE」の利用率が98.2％、「Twitter」の利用率が81.5％と前回調査に続き高い比率を維持しており、定番のサービスとして定着している状況が浮かび上がった。 また、「Instagram」の利用率は対前年5ポイント増の33.2％と拡大傾向が続いているほか、手軽に画像の加工などができる「SNOW」の利用率は28.2%と、新しいサービスながら「Facebook」の16.2％を上回った。 大学生のフェイスブック離れ進む 女子の約6割が「インスタグラム」「SNOW」利用【東京工科大学調査】｜ MarkeZine ｜翔泳社 ソーシャルメディアの利用者はFacebookが全世…
インターネットでジャンプリンク付きの目次を設けたサイトをブログの記事などで良く見かけていた。 僕もブログに長文の記事を載せる際に見出しで細かく区切られているとそれぞれへ向けてジャンプリンク付きの目次を冒頭に設けておくのが素早く移動できて便利だし、訪問者にも好まれそうだとやってみたら気に入ってしまった。 コンテンツが上下に長いほどにジャンプリンク付きの目次がサイトに必要になって来る。 目次 目次のジャンプリンクのHTML 目次の枠線のデザインのCSS 枠線のCSSのサンプルコード 角丸のCSSのサンプルコード 目次の背景色のデザインのCSS 背景色のCSSのサンプルコード 透過のCSSのサンプルコード 目次の中寄せのデザイン ジャンプリンクのHTML 一つのページ内で移動するのも他のページへのリンクと同じで、リンクのaタグを使う。 リンク元のサンプルコード <a href=…
僕は <pre><code>ソースコード</code></pre> のHTML構文をサイトではいつも使っている。使わなくてもソースコードをブラウザに表示することはできるけど、しかしどちらにしてもHTMLの要素タグは「<」（小なり記号）や「>」（大なり記号）がサイトに反映されなくてHTML構文としてブラウザに読み込まれてしまうから 文字実体参照 の「<」や「>」に取り替えなくてはそのままで表示されては来なかった。ソースコードが長いと一つずつ取り替えるのは相当に手間がかかるにせよ、こればかりは仕様がないと思う。気に入ったコンテンツならばただし努力こそ惜しまれないらしい。 リンクタグ（aタグのソースコード）を表示させてみる 送信後 <a href="URL&quo…