些細な日常

新しく買った中古のタブレットの性能が低くて――4コアCPUの2GBメモリという十年前のスペック―― メモリ不足 のせいか今まで経験したことのない不調に悩まされる毎日なんだ。それでもなるべく軽めのアプリを使うようにしたらおよそタブを切り替えて他のアプリから戻ったブラウザの再読み込みが多いくらいで耐えられるようにはなった。 買った当初は使い慣れたアプリを普通に入れて使っていて少し辛いくらいだったのが日に日に固まることが増えて行った。使うほどにデータが増えて処理が重くなったせいか。さらにロック画面に戻ってしまう不具合が多発して最悪の状態に見舞われてしまった。 どうしようもないので、メモリ消費を減らそうと考えて 神アプリとも呼んで愛用していたGoogleキープ を止めたり――ウェブ版が重いけれども何とか使える――ファイルマネージャーとギャラリーも愛用するものではなくてGoogleのAndroid純正みたいな…

inputタグのtype-textとtype-buttonを横並びにして表示しようとしたら高さが揃わなくて参った。ブラウザかデバイスが変われば大丈夫そうに見えたり、一般的に纏めるのは難しいのかも知れない。調べると入力フォントで高さが変わるという珍しいことが起きている。そこまでしっかり合わせるにはどうすれば良いか。CSSの二つの方法を見付けて望み通りのデザインを付けられるようになったので、紹介する。 目次 inputタグのtype-textは入力フォントで高さがコロコロ変わる inputタグのtype-textとtype-buttonの英語と日本語の高さの比較 フォームとボタンの高さを揃えるCSSの二つのマークアップ vertical-align:middleをフォームとボタンの両方にかけると良い display:flexをフォームとボタンの親ボックスにかけると良い inputタグのtype-textは…

addEventListener()メソッドを設定して後から外したい、すなわち無駄なものを残しておくのは良くないから解除したい場合、一回だけ使うならば第三引数のoptionに {once:true} を追加すると自動的にやれるから簡単だ。 それ以外はremoveEventListener()メソッドを使わなくてはならないけど、ただし条件があってどんなaddEventListener()メソッドに対しても機能するわけではないから注意を要する。 removeEventListenerが機能するための三つの条件 以前に addEventListener() を呼び出して追加したイベントリスナーがある場合、最終的にそれを取り外す必要がある場合があります。当然ながら、同じ type と listener 引数を removeEventListener() には指定する必要があります。しかし、 options…

サイトのボタンの設置などで良く使う非常に便利なJavaScriptのaddEventListener()メソッドは普通に第二引数のコールバック関数に値を入れても引数として正しく渡すことができない。 addEventListnerでコールバック関数に引数を渡せない理由 イベントリスナーには、コールバック関数または handleEvent()メソッドを持つオブジェクトの何れかをコールバック関数として指定することができます。 コールバック関数自体は、 handleEvent()メソッドと同じ引数と返値を持ちます。つまり、コールバック関数は発生したイベントを説明する Event に基づくオブジェクトを唯一の引数として受け付け、何も返しません。 EventTarget: addEventListener()メソッド｜ MDN Web Docs ｜Mozilla addEventListenerのコールバック関数…

HTMLのpopover属性を使うとサイトにポップアップをボタンで出すことができる。当該のコンテンツはポップオーバー要素と呼ばれるけれどもサイトの他の全てのコンテンツに重ねて優先的に表示されることになる。 ポップオーバー要素は、呼び出し／制御要素（すなわち <button> または <input type="button"> に popovertarget 属性が付いたもの）、または HTMLElement.showPopover() の呼び出しによって開かれるまで、display: none で非表示になっています。 開かれると、ポップオーバー要素は、最上位レイヤー内の他のすべての要素の上に現れ、親要素の position や overflow のスタイル付けの影響を受けません。 popover｜ MDN Web Docs ｜Mozilla ボタンとコン…

ブログの知識と教養と雑学の記事（ 前半 ・ 後半 ）で使用したクイズ形式の選択ボタンのJavaScriptによるプログラムを提供する。HTML編集が可能で、scriptタグが反映するサイトならば同じような選択ボタンのコンテンツを作成して使用できる。 選択ボタンの基本的なプログラム サンプルのソースコード 日本の首都はどこか。 北海道 東京都 福岡県 リセット ※どれかを押すと正解が緑に、誤解が赤に変わって表示される。 HTML <p>日本の首都はどこか。</p> <ol class="selection"> <li>北海道</li> <li class="correct">東京都</li> <li>福岡県</li> </ol> JavaScript /* Co…

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で実行するプログラムを考えてみる。 開いたメニューの外側を暗くする プログラムのアイデアとしてHTMLの領域のdiv要素を新たに作成してCSSで暗い背景色を付けて開いたメニューと元のコンテンツの間に挿入する方法が挙げられる。 サンプルのソースコード （開閉ボタン） アイテム① アイテム② アイテム③ ※押すとメニューが外側の明暗を変えながら開閉する。 HTML <span class="svg-button"> <svg class="hamburger-menu-1" width="142&qu…

サイトのハンバーガーメニュー（≡）などのコンテンツを出し入れできる開閉ボタンをJavaScriptで作成するプログラムには二つの大きな部分がある。 要素のクリックを判定する コンテンツに表示変更を行う JavaScriptのプログラムではクリックを判定するHTMLの要素を取得した上で、イベントハンドラのonclickからさらに表示変更を行うコンテンツにCSSのdisplayのnone（非表示）のようなデザインのclassをclassListプロパティのtoggle()（交互）メソッド、またはadd()とremove()（追加と削除）の二つのメソッドで付け替えて開閉ボタンを作成することができる。 目次 開閉ボタンのJavaScriptの基本的なソースコード ハンバーガーメニューのサンプル HTMLのonclick属性を使う場合 JavaScriptのaddEventListener()メソッドを使う場合 c…

今までブログに 目次のジャンプリンク や フローティングの戻るボタン を設置して来た。HTMLのリンクタグのaを使ってページ内のidを持たせた場所へ移動するように作成しているけど、ところが何もしないままのデザインだと一瞬で、目的地に着いてしまって周りが文字だらけならばそれこそ雰囲気が殆ど変わらないために自分はどこにいるのか、リンクを使ってページ内を本当に移動したのかどうかが分かり兼ねる。 少しでも混乱しないために、または折角と設置したはずの目次のジャンプリンクやフローティングの戻るボタンを気持ち良く使うというサイトのUX（User Experience／利用者の体験）を向上させるべく、ページ内を移動するスクロールイベントにゆっくり遅らせるアニメーションを付けるようにデザインを相応しく変えると良いと思う。 CSS の scroll-behavior のsmoothの使い方 サイトのスクロールイベントの経過時間…