些細な日常

所用でマイナンバーカードが必要となり、申し込んで手に入れたけど、偶々、マイナポイントが付与されるので、受け取りに特定のポイントカードなどがさらに必要となった。一つも持ってなかったので、色んな店のポイントに対応していて使い易そうな nanacoカード を新しく作ることにした。 nanacoの三種類のタイプ nanacoカード 電子マネーカードで使用 有料登録／審査なし 店頭かWebで申し込んで受け取る nanacoモバイル おサイフケータイで登録使用 無料登録／審査なし 対応するスマホでアプリをダウンロード セブンカード・プラス クレジットカードで登録使用 無料登録／審査あり 郵送かWebで申し込んで受け取る ※シニアナナコ（六十歳以上）、ENEOS nanaco（ENEOS）やANA QUICPay + nanaco（ANA JCBカード）という特別仕様もある。 ※nanacoギフトとGoogle Payで支払い、nan…

JavaScriptで時間を数えてスタートとストップとリセットの三つのボタンで操作できるストップウォッチのプログラムを組む。 目次 ストップウォッチの計測時間の表示 ストップウォッチのソースコード 時間を数えて表示するプログラムの概要 時間を数えて表示するプログラムの説明 ストップウォッチの計測時間の表示 00:00.00.00 スタート ストップ リセット ストップウォッチのソースコード HTML <figure class="time"> <p class="counter">00:00.00.00</p> <button class="start" type="button">スタート</button> <button class="stop"…

JavaScriptで関数などを遅らせて実行する時間差の処理に使えるsetTimeout()メソッドと間隔を空けて繰り返せるsetInterval()メソッドには共通するパフォーマンスの問題があって避けるためにはどちらもrequestAnimationFrame()メソッドで置き換えることができる。 目次 requestAnimationFrameはジャンクを防ぐ requestAnimationFrameはイベントループに強い アニメーションの始動と時間通りの実行に向く requestAnimationFrameに時間を設定して使う 二秒後に実行して即座に停止するサンプル 一秒間隔で実行して十秒で停止するサンプル requestAnimationFrameはジャンクを防ぐ アニメーションの処理に利点があってサイトの表示を良好に保ち易くするのがrequestAnimationFrame()メソッドの大きな…

CSSのアニメーションで動きを止めるのはanimation-delayで、繰り返して動かすのはanimation-iteration-countだけれどもそれらを組み合わせても幾らか間隔を空けながら繰り返すことはできない。 というのはanimation-delayはアニメーションが始まるまでの時間を取っているだけだからだ。最初の動きが終わって二回目以降の動きが始まる直前には関与しないし、止めることはできないものなんだ。 動きに間隔を空ける@keyframesの使い方 Dangling feet by Greyerbaby / Pixabay 繰り返しの途中で止まって見える、または繰り返さなくてもそのように一回だけ動く間に表現するにはCSSアニメーションの流れを指定する@keyframesを使うのが相応しい。 CSS の @keyframes @-規則は、アニメーションの流れに沿ったキーフレーム (…

以前、 CSSのグリッドレイアウトによる画像の横並びの方法 を載せたけれどもBloggerの管理画面が2020年9月に刷新されて投稿画像の出方も少し変わったので、新しい方法を中心に載せ直したい。 目次 テンプレートによるコーディングの違い 2020年9月以降に投稿された画像の横並び 投稿画像の横並びのソースコードの書き方 二つの投稿画像の横並びのソースコードのサンプル サンプルで指定したグリッドレイアウトの説明 メインカラムに横並びの画像を収めるには 画像をメインカラムに収めるソースコードのサンプル 2020年9月以前に投稿された画像の横並び テンプレートによるコーディングの違い Bloggerの公式テーマを想定して投稿画像の横並びの方法を紹介するけれどもテンプレートのレイアウトヴァージョンによって変わるから注意しなくてはならない。 レイアウトヴァージョン３の公式テーマ Contempo／コンテンポ Soho／ソーホー …

Bloggerの独自タグのVariableのfontのtypeについてどのように使われるかの内容と公式テーマのソースコードでfontの内容の定義と呼び出しに用いられる変数名を取り上げる。 Variableタグの五つの基本項目 name／変数名（半角の英数字とピリオドのみ） description／説明（指定なし） type／種別（決められたもの） default／初期値（type毎に指定あり） value／現在値（type毎に指定あり） fontのtypelではvalue以外が省略できない必須項目となっている。 fontのマークアップ例 <Variable name="body.text.font" description="Font" type="font" default="$(robotoNormal15)" va…

スマホのデータ無制限の契約プランが各社から出ていてたぶん基本料金と併せて最も安く使えるのがmineoかも知れない。音声通話とデータ通信のデュアルタイプの1GBとデータ無制限のパケット放題で、2021年4月時点、1298円と385円の1683円（税込み）で使い始めた。最も安く纏めるならばデータ通信のみのシングルタイプの1GBの880円とパケット放題で、1265円（税込み）まで下げることができる。 追記：2021年6月1日から従来のパケット放題と価格は変わらず、通信速度が三倍の最大1.5Mbpsとなるパケット放題Plusの提供が開始された。通信データが非常に多いInstagramなどの画像中心のサイトでもさほど待たされず、閲覧できるから本当に使い易くなった。 目次 パケット放題の使い心地は決して悪くない mineoのパケット放題の通信速度の目安 体感速度としての使い心地の四段階評価 パケットの放題の便利…