2020-07-27
総務省主催の「WiCON / 高専ワイヤレスIoTコンテスト2020」の二次審査会がありました。 ハードもソフトも強い高専生ならでは。そんな高専生におなじみ電子パーツ専門店「秋月電子通商」のwebサイト。 コピペ時に、伝統の全角英数が気になります。


思いつく解決方法は3つ
1. プロキシーで変換する(HTTPなので変換可能)→ 全通信が通って重い
2. ブラウザ上で変換する(Chrome拡張)→ 特定サイトのみ適応できて軽い
3. コピーする際に変換する(Chrome拡張で可能?)→ 調査に時間かかるかも

ということで、スピード優先、2でいきます。FAXっぽいwebに続く、Chrome拡張第二弾。(src on GitHub)

Chrome拡張の設定ファイル manifest.json を用意します。

{ "name": "zen2han", "version": "1.0.0", "manifest_version": 2, "description": "zenkaku alphabets and numbers to hankaku", "content_scripts": [{ "matches": ["*://akizukidenshi.com/*"], "js": ["content.js"] }] }

matchesで適応するサイトを指定、jsで今から作成するプログラムのファイル名 content.js を指定しておきます。

const toHalf = s => { if (s === null || s === undefined) return s const ZEN = "0123456789()/−!&: abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ" const HAN = "0123456789()/-!&: abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ" let s2 = "" for (const c of s) { const n = ZEN.indexOf(c) if (n >= 0) { s2 += HAN.charAt(n) } else { s2 += c } } return s2 } const toHalfText = parent => { if (parent.children.length === 0) { parent.textContent = toHalf(parent.textContent); } else { for (const c of parent.children) { toHalfText(c); } } } toHalfText(document.body); document.title = toHalf(document.title);

HTMLのドキュメント構造(DOM)を再帰的に辿り、子を持たない textContent の全角英数を半角英数に変更するJavaScriptのプログラムです。 ついでに、タイトルも変換しておきましょう。

あとは chrome://extensions/ を開き、「Load unpacked」で読み込むだけ!
適応したい他のサイトがあれば、matchesをいじり、リロードしましょう。快適電子パーツブラウジングが完成です!

経産省のオープンソース、IMIコンポーネントツール全角半角統一コンポーネントなど外部ライブラリを使った変換もありですが、強力すぎるChrome拡張、セキュリティ確保のために極力依存なしでの実装がオススメです。 (Hana道場では中学生がサイバーセキュリティ入門スタート!


今年から審査委員として参加中。日本中にある高専、その地域性も審査項目の一つ。それぞれ特色あるバラエティー豊かな作品達。 採択されたテーマの仕上がりが楽しみです。残念ながら採択されなかったものも、チャンスはたくさんあります。ぜひ独自に実現する道、探りましょう。応援します!


高専ワイヤレスIoTコンテスト(WiCON) (@Kosen_WiCON) / Twitter
高専ワイヤレスIoTコンテスト、通称WiCONのタイトルロゴも決定!Twitterの運用も始まりました。 きっと来年度も開催されるので、身近な課題5GやIoTなど、ワイヤレスで解決できそうなネタ、普段から意識してみるといいですよ。

イノベーションのタネは様々な日常にあり。
視界広げていきましょう!

Tweet
クリエイティブ・コモンズ・ライセンス
本ブログの記事や写真は「Creative Commons — CC BY 4.0」の下に提供します。記事内で紹介するプログラムや作品は、それぞれに記載されたライセンスを参照ください。
CC BY / @taisukef / アイコン画像 / プロフィール画像 / 「一日一創」画像 / RSS