ユニバーサル社会で役立つデザインや技術の研究
ガソリンスタンドで軽自動車に軽油を入れる間違いは起こります。そのため、軽油のノズルだけ違う場所にして、「軽自動車への給油は行わないでください」と注意書きがあると、とても親切です。
家の車の不調で、代車の軽自動車を借りています。
妻にとっては初めての軽自動車で、危うく軽自動車に軽油を入れそうになりました。
たしかに、紛らわしいですね。
間違って軽自動車に軽油を入れるとエンジンが停止して走らなくなります。
あるガソリンスタンドに寄ったとき、妻が「分かりやすい！」と絶賛しました。
そこのガソリンスタンドは、軽油ノズルが離れた場所にあり、「＜注意＞軽油はディーゼル車専用燃料です 軽自動車への給油は行わないでください」と書かれていました。
たしかに言われてみれば、普段使うガソリンスタンドは、軽油ノズルも他のノズルも等間隔で置かれていた気がします。
間違いやすい軽油を離して注意を促すのは、軽自動車に乗り慣れない人にやさしい気遣いです。
ユニバーサルデザインだと感じました。
防犯カメラ「Litmor Battery Cam 2」をベランダから吊るしています。転落の心配があるのでもう一本、転落防止のひもを付けられるようにします。
Amazonで購入できる「Litmor Battery Cam 2」。
丸い防犯カメラで、ひもで吊るすことができます。
念のため、ひもが切れても大丈夫なように、もう一本命綱をつけることにしました。
「Litmor Battery Cam 2」には、カメラ用の1/4ネジを差し込むこともできます。
1/4ネジ付きストラップを購入しても良いですが、今回は手元に1/4ネジと100円ショップのネックストラップがあるので、これらを使います。
1/4ネジとストラップを接続するジョイントをモデリングします。
断面はこんな感じです。
フィラメントはTPUで3Dプリントします。
3Dプリントしたジョイントにネジをはめます。一度はめるとネジのかさが引っ掛かって、もう指では外れません。
ジョイントに100円ショップで購入したストラップを付けます。
カメラの充電を考えると、脱着が簡単なタイプが良いと思います。
防犯カメラの1/4ネジに、作ったジョイントを差し込みます。
しっかりカメラをぶら下げられます。
ひもで吊るした防犯カメラに、命綱が装着されました。
これで転落の心配が、大きく減りました。
Webサイトをキーボード操作するユーザーのために、ページの先頭には「メインコンテンツにスキップ」のリンクを設けたほうが良いでしょう。
Webコンテンツアクセシビリティガイドライン（WCAG2.1）の達成基準 2.4.1に、「ブロックスキップを理解する」という項目があります。
ページ先頭にメイン記事へスキップするリンクがないと、利用者にとって深刻な肉体的苦痛を引き起こすことがある・・・というようなことが書いてあります。
どういうことか？
報道機関のホームページが実例に挙げられています。実際に海外の報道機関のホームページを見てみましょう。
世界的に有名なイギリスの公共放送「BBC」のホームページで、キーボード操作をしてみます。
早速「Skip to content」というスキップするリンクが出現しました。
さすが世界のBBC。
続いてアメリカの公共放送「PBS」。こちらもキーボード操作で「Skip to Main Content」の文字が出現。
アクセシビリティが作り込まれています。
福祉大国のイメージが強い北欧スウェーデン。公共放送「SVT」を見てみます。
文字は読めませんが、やはりスキップするリンクが仕込まれていました。
いくつか報道機関のサイトを回ってみると、アクセシビリティを大事している機関が多いことが分かります。
続いて誰もが生活に欠かせなくなっているインフラサイトのブロックスキップを見てみます。
Google先生。キーボード操作で「メインコンテンツにスキップ」が表示されます。
Amazon。こちらもキーボード操作で「メインコンテンツにスキップ」が表示されます。
インフラサイトは見えないアクセシビリティ機能も、しっかり作り込んでいます。
実装コードの一例です。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<body> <header> <div id="skipNav"><a href="#main">メインコンテンツにスキップ</a></div> <h1>ブロックスキップテスト</h1> <nav> <ul> <li><a href="#">メニュー</a></li> <li><a href="#">メニュー</a></li> <li><a href="#">メニュー</a></li> <li><a href="#">メニュー</a></li> <li><a href="#">メニュー</a></li> <li><a href="#">メニュー</a></li> <li><a href="#">メニュー</a></li> <li><a href="#">メニュー</a></li> </ul> </nav> </header> <main id="main"> <h2>メインコンテンツ</h2> <p>本文・・・</p> </main> </body> |
ヘッダーに「メインコンテンツにスキップ」のページ内リンクを設置します。
普段は見えない状態にして、キーボードのフォーカスが当たった時だけ出現するようにCSSで指定します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
#skipNav a { position: absolute; width: 1px; height: 1px; clip: rect(1px, 1px, 1px, 1px); } #skipNav a:focus, #skipNav a:active { display: block; width: 15em; height: auto; top: 5px; left: 5px; clip: auto; z-index: 1000; font-size: 1.8rem; padding: 5px; background-color: #FFF; border: #CCC solid 1px; text-align: center; } |
サンプルページもアップしました。
参考まで。
HTMLのコーディングで、aタグの中にaタグを書くことはできません。どうしてもaタグの中にリンクを書く場合、spanタグで書き、onClickとonKeydownとtabindexを指定します。
aタグはHTML5の仕様上、aタグなどの対話型コンテンツを内包できません。
例えば図１のカードのようなUIで、カード自体がリンクになっているのに、さらにリンクを内包させる場合、問題になります。
実際にaタグの中に、aを書いてみましょう。
|
1 2 3 4 |
<a href="https://example.com/"> <h3>タイトル</h3> <p>概要文・・・<a href="https://example.net/">リンク</a></p> </a> |
結果は図２のように、表示崩れを起こします。
aタグの中にaタグが使えないなら、spanタグに変えてしまい、その上でJavaScriptのonClickイベントを指定してみます。
|
1 2 3 4 |
<a href="https://example.com/"> <h3>タイトル</h3> <p>概要文・・・<span class="link" onclick='location.href="https://example.net/"; return false;'>リンク</span></p> </a> |
HTMLの構造的には問題ないため、図３のように望む形で表示されます。
しかし、この組み方だとアクセシビリティで問題があります。
キーボード操作でaタグの中のリンクにフォーカスを当てることができません。
キーボードしか操作できないユーザーが、リンク先にアクセスできなくなってしまいます。
アクセシビリティ確保のため、onKeydownとtabindexを記述します。
コード量が増えてしまいました。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<a href="https://example.com/"> <h3>タイトル</h3> <p>概要文・・・<span class="link" id="js-link" tabindex="0">リンク</span> <script> var linkElement = document.getElementById("js-link"), linkUrl = "https://example.net/"; linkElement.onclick = function(){ location.href = linkUrl; return false; }; linkElement.onkeydown = function(e){ if (e.keyCode === 13) { location.href = linkUrl; } }; </script> </p> </a> |
まず、「tabindex=”0″」で、キーボードのTab操作時に、フォーカスされるようにします。
tabindexは値が”0″の時、表示順でフォーカスされるようになります。
上記のコードの場合、一番上のaタグにフォーカスされた後、3行目のspanタグがフォーカスされます。
さらに、onkeydownで「Enter（kyeCode=13）」キーが押しこまれたとき、指定のリンクに飛ぶようにしました。
HTML自体はほぼ変わっていないため、表示は図４のように正常です。
スクリーンリーダー（NVDA）で読み上げたとき、正常に使えるかも試しました。
すると一点だけ、惜しいところがありました。
リンクフォーカスや、ページ遷移に問題はないのですが、既読リンクかどうかを正しく判定できません。
aタグの中のspanタグがフォーカスされている時、spanタグのリンク（JavaScriptで指定）の訪問履歴ではなく、aタグの訪問履歴を参照して、既読リンクかどうかを読み上げます。
やはり、根本的にはaタグの中に別のリンクを指定しないことが理想です。
システム都合やクライアント都合など、避けられないこともあると思うので、対処法として参考になればと思います。
腐食したUSBケーブルを切断し、新しいものに交換しました。久しぶりの晴天で、絶好のテスト日和。無事、ソーラーパネルから充電できることを確認しました。
せっかくの晴天ですが、スマホはフル充電状態です。テストする端末が手元にありません。
探してみると、バッテリー残量０のトランシーバーがありました。
これで充電確認をします。
電圧・連流チェッカーで充電状況を確認します。
正常に5Vくらいの電圧がかかっているのは確認できました。
肝心の電流が計測できず・・・チェッカーのUSB端子の接触が問題のような気がします。
チェッカーを挟まず直接充電すると、電流は流れているようです。
トランシーバーを4時間放置していたら、充電はいっぱいになっていました。
このトランシーバー、仕様書を見てもバッテリー容量が不明。
いったい何ワットで充電しているか、結局よく分かりません。
しかし、USBケーブルを修理して、問題なくソーラーパネルが使えるようになったとは、言えそうです。
野外に置いていたソーラーパネルのUSB端子が腐食しました。新しいUSBケーブルに付け替え、今度は同じ過ちを繰り返さぬよう、3Dプリンターでキャップを作りました。
同じマイクロUSB端子でも、付け根の部分はケーブルごとに形が違います。
自分のケーブルの形状に合わせて、キャップをモデリングしました。
オリジナルの形状が必要な時、3Dプリンターが活躍します。
キャップはゴムのようなTPU素材でプリントします。
絶対にキャップを無くしそうなので、紛失防止ベルトを付けました。
キャップをかぶせた状態です。
これで、野外に置いても腐食を防げるでしょう。
切断したUSBケーブルを修理します。ただしこれは最後の手段。自己責任でお願いします。できるならケーブルごと交換が良いと思います。
コードの被覆をむき、導線の金属を出します。
カーターや、ニッパーで器用にできる人もいますが、私は下手なので専用の電光ペンチを使っています。
導線を確実につなげるには、はんだで溶接するのが間違いありません。
これで通電し、そう簡単に取れません。
はんだで溶接したところを、絶縁テープで巻きます。
プラスの赤導線と、マイナスの黒導線の金属部分が接触してしまうと、使えません。
それぞれの導線を覆うように巻いていきます。
最後に切断したコードをつなぐように、絶縁テープで巻きます。
修理完了。
念のため可燃物のないところで、このコードは使います。
ソーラーパネルから直接USBコードを挿してスマホを充電したら、激しくバッテリーを消費することがあります。晴れたり曇ったりの時は、待機時よりソーラーにつないだ方がバッテリーを消費してしまうようです。
USB付きソーラーパネルから直接スマホを充電する人は、ほぼいないと思いますが・・・おすすめできません。
晴れている時は順調に充電します。しかし雲が出てくると、充電されたり、解除されたりで、Wi-Fi、スリープ、画面点灯のオンオフが多発します。
結果、充電しない待機時よりもバッテリーを消費します。
天気が不安定な時は、ソーラーパネルにつながない方が良いです。
間にモバイルバッテリーを挟みましょう。
なお、今回充電したのは、「TORQUE G01」という2014年発売の古いスマホです。
機種によって結果に違いがあるかもしれません。
ベランダにあったUSB付きソーラーパネルが使えなくなりました。外に放置したことにより、USB端子が腐食してしまったことが原因です。USB端子を取り換えることで、使えるようになります。
外に使っていないソーラーパネルを長期間放置してしまいました。
久しぶりに使おうとすると、まったく充電できません。
USB端子をのぞき込むと、腐食しています。
どうせ使えないので、ためらわずUSBコードを切ってみます。
すると、中に赤と黒のコードが見えました。
赤がプラス。黒がマイナス。
さらに、この２つのコードを導線が出るまではがします。
この導線に、新しいUSBコードをつなげればOKです。
USB充電コードは余るほどあります。
特にmicro USB が余り気味。
バッサリと切断します。
こちらも赤と黒の導線が出てきました。
ソーラーパネルのUSBと、新しいUSBをワニ口で仮に接続します。
交換した新しいUSB端子にモバイルバッテリーを挿してみると、充電マークがつくことを確認しました。
電力供給ができています。
今度はソーラーパネルをベランダに出し、充電のテストをします。
あいにく雲が多く、晴れたり曇ったりの天気です。
スマホにUSBを接続すると、充電中のマークに変わりました。
充電スピードを見ようと思いましたが・・・
この後曇ってしまい、充電できなくなってしまいました。
※2020年11月2日 追記
おおむね晴れた状況で、1時間で10％の充電を確認しました。
計算すると310mAくらい充電できたかと思います。
この後は、USBコードの接続部分を絶縁テープで巻いて、しっかり処理したいと思います。