「 Mildom（以下、ミルダム）は、コメント欄を非表示にできないの？」ライブ動画配信サービス「ミルダム」の視聴に際して、不便を覚えることがある。 ディスプレイサイズを贅沢に専有できる環境ならば思いつくこともないだろうが、ブラウザサイズをタイトにすることで動画が小さくなって視聴しにくい。 そもそもミルダムのサイトは、リキッドレイアウトよろしくメインカラムが可変してレイアウトを維持する。ところが固定幅のコメント欄に押しやられた動画はアスペクト比を保ってリサイズするから小さくなってしまうわけだ。 このような観にくい状態は、レスポンシブデザインの弱点のひとつで、ちょうど調整しにくい時空の狭間のようなもので、ミルダムにおいてもビューポート900px以下でコメント欄を非表示するように施している。 一方で、ヘッダー画像が配されているイベントページのようなレイアウトの場合に限り、コメント欄非表示タブが用意されている。これを通常レイアウトにも設置してもらいたいところだが、いまのところ実装の様子がみられない。 なんとしてもコメント欄が煩わしい場合は、Chrome デベロッパーツールでコメント欄カラムを非表示にしている次第だ。 それもいい加減めんどうくさい。そんなわけで Chrome 拡張機能をつくってみたい。 Chrome 拡張機能とは？ Googleが開発したウェブブラウザ「Google Chrome」に追加するソフトウェアプログラムで、標準では備わっていない便利な機能を体験できる。 Chrome 拡張機能の入手は、Chrome ウェブストアに公開されているものをインストールする手段と、Chrome 拡張機能ポリシーに従って配布されたものをインストールする２パターンが考えられる。なお規約違反した外部拡張機能に関しては望ましくないソフトウェアとしてフラグが立てられるとのことだから留意しておきたい。 インストールしたものは、Chrome 拡張機能の管理画面（chrome://extensions/）から確認できる。アンインストールしたり機能効力を切り替えたり、開発時におけるデベロッパーモードやパッケージ化されていない拡張機能を読み込む機能も備わっている。 開発環境を準備しよう Chrome 拡張機能の開発にあたり「chrome-extension-webpack-boilerplate」を活用して効率化を図りたい。 当該パッケージは、Chrome 拡張機能を作るのに必要なソースコードを備えた雛形環境で、開発の着手が容易になっている。 Node.js のバージョンが6以上であることを確認する 以下コマンドで Node.js のバージョンを確認のうえ、6以上ではない場合は適宜アップデートする。 GitHub リポジトリからクローンする 作業するディレクトリで以下コマンドを実行する。なお git がインストールされていなければ 圧縮ファイルをダウンロードすればよい。 https://github.com/lxieyang/chrome-extension-boilerplate-react パッケージをインストールする パッケージマネージャのインストールコマンドを実行する。 開発サーバーを起動する フロントエンド開発で馴染みの webpack-dev-server を起動する。 http://localhost:3000 にアクセスできれば無事 webpack サーバーが立ち上がっているものと考えられる。 それと同時に「build」フォルダが生成されていることを確認できる。 Chrome に読み込ませる 前節で触れた「build」フォルダを Chrome に読み込ませることで、開発中の拡張機能を適用できる。その手順を確認していきたい。 開発環境の準備は以上で完了だ。…

Reactアプリの多重クリック防止について考えてみたから、共有かたがた備忘のために記しておきたい。 多重クリックとは、ボタン等のユーザーアクションから発せられたイベントが重複処理されることを指す。お問い合わせフォームの送信が想像しやすいだろうか。入力した内容が重複して送信される問題で、まったくもって無駄なリクエストである。 そんなことからアプリケーション全般に多重クリックや二重送信を防止する施策が求められ、それぞれの要件にあった手法で実装されている。無論、Reactアプリも、その例に漏れない。 多重クリックを防止する方法 Webアプリの多重クリック防止のデザインパターンに、非活性化させる手段を思い出す。フラグ判定で処理中は非活性化させるというものだ。これを以下に再現してみた。 コンポーネント冒頭の const [processing, setProcessing] = useState(false); で、state定義している。これをフラグに見立て if (processing) return; で判定するといった具合のものだ。 多重クリック防止のアプローチについては納得いくものだけれど、state を活用したフラグ判定は不適当じゃないか、というのが肝心なところ。 問題 state を更新することで、コンポーネントの再レンダリングが強制される。つまり上記ソースコードならば、コンポーネントをマウントしたときと非同期処理が走ったときレンダリングをスケジュールしている。画面上の更新を求めていないにも関わらず、不要にレンダリングをすることはパフォーマンスに影響を与えかねない。 代替案 state によるフラグ判定の代替案として、以下に改修してみた。 useState は useRef に変わり state の更新を排除したことに気づくと思う。refオブジェクトは一般にDOM参照に活用されている印象があるが、公式で次のように述べている。 はい！ useRef() フックは DOM への参照を保持するためだけにあるのではありません。“ref” オブジェクトは汎用のコンテナであり、その current プロパティの値は書き換え可能かつどのような値でも保持することができますので、クラスのインスタンス変数と同様に利用できます。 https://ja.reactjs.org/docs/hooks-faq.html#is-there-something-like-instance-variables またコンポーネントが存在しているあいだ書き換え可能なオブジェクトとして保ち続けて、その値を変更しても再レンダリングが発生しない。 したがって Refs の活用は、簡易な多重クリック防止のデザインパターンに相性がよい。再レンダリングによるパフォーマンス悪化や思いも寄らない副作用の回避に一助することだろう。 とはいえ Refs 活用一辺倒でよいというものでもない。たとえばボタンクリックと同時にdisabled属性を付与したりボタンテキストを変えたりする場合、再レンダリングが必要で、適宜コンテンツに最適な対応が求められそうだ。 まとめ Reactアプリの多重クリックを防止する最適解についての共有だった。 わたし自身、Refs の真価に気づかず、Stateを活用しているケースが見受けられた。一方でフォームヘルパーを使うケースもあるしフェッチライブラリならば処理状態を返却してくれる。一概に当該ソリューションが最適解というわけではないけれど、ユースケースとして覚えていて損はないと思う。 このエントリーが、あなたのクリエイティビティを刺激するものであると期待したい。 React Hooksに対応した複数のonChangeハンドラを処理する書き方

レスポンシブデザインのコーディングに際して、横にはみ出させざるを得ないコンテンツがある。そのもっともたるものが表レイアウトで、モバイルスクリーンでは、だいたいの場合は横幅超過してしまう。 無思慮な状態だとページ全体が押し広げられ、想定しないところに横スクロールが発生する。このことを考慮して、対象エリアにのみ横スクロールするようなスタイルを当てるのが一般的であろう。 それ自体は周知のことで、取り立ててお伝えすることではない。ただしスマホで閲覧した場合のスクロールバーは非表示になる仕様上、table要素はただただ見切れているように認識され兼ねないわけだ。伝えたいことが見逃されるのは大変不利益になる。 そんな事案に最適なライブラリがある。 このエントリーでは、バナー通知で横スクロールできることを促すJavaScriptライブラリ「scroll-hint」を紹介したい。 ScrollHint について ScrollHintは、ポインターアイコンのバナーを表示して、スクロールできることを通知してくれるJavaScriptライブラリだ。 https://appleple.github.io/scroll-hint/ 特徴 ライブラリに依存しない Vanilla JSで極めて軽量 導入 まず入手方法は、次の3つから都合のよいものを選んでほしい。 npm or yarn CDN Download npm or yarn CDN Download https://appleple.github.io/scroll-hint/ 設置・実行 以下例はバンドラー環境下を想定している。CDNにて読み込んだ場合は、import文は不要だ。 設定 Name Default hint suggestClass is-active スクロールされたとき追加されるクラス scrollableClass is-scrollable スクロール可能なとき追加されるクラス scrollableRightClass is-right-scrollable 右へスクロール可能なとき追加されるクラス scrollableLeftClass is-left-scrollable 左へスクロール可能なとき追加されるクラス scrollHintClass scroll-hint ターゲット要素に付与されるクラス scrollHintIconClass scroll-hint-icon 通知要素に付与されるクラス scrollHintIconAppendClass scroll-hint-icon-white 通知要素に付与されるクラス scrollHintIconWrapClass scroll-hint-icon-wrap…

お問い合わせフォームを設置するとき、PHPなどのサーバサイドに類するいずれかの言語とHTMLの知識が必要になる。サーバサイドの処理があってこそお問い合わせフォームが機能することは、きっと既知のことだと思う。 しかし「HTMLはできるけど、PHPは…。」っていう事例は少なくない。やはりスクリプト言語が関わってくるとややこしくてちんぷんかんぷんだ、という感想は非常に共感できる。わたしもHTML,CSSの知識しかなかった頃、お問い合わせフォームの実装に際してPHPに接触したわけだけれど、「なんて難解なんだ」と思ったものだ。簡単に実装できる手段がないものかと。 そんなニーズにマッチしたサービスがある。 このエントリーでは、PHPの知識不要でお問い合わせフォームが実装できるWebサービス「StaticFroms」を紹介したい。 お問い合わせフォームとは お問い合わせフォームは、ユーザーがサイト運営者に連絡する手段のひとつで、サービスについての質問やクレーム、会社の雇用に関する問い合わせ窓口としてWebサイトに設置するケースが考えられる。 そのメリットとしては、必要最低限の情報を要求できる点が挙げられる。これによりフォーマットされた情報が得られるため見落としや誤解を極力回避できることだろう。またサイト運営者としては、メールアドレスを不用意に晒す必要がなく迷惑メールを減らすことにも寄与するはずだ。 ユーザーからすれば、お問い合わせ毎にメールクライアントを立ち上げて入力するより遥かに気軽でよい。電話に抵抗があるユーザーにとってもお問い合わせフォームによる窓口は便利なコンテンツといえる。 StaticFroms について StaticFromsは、お問い合わせフォームのメール送信をサポートするサービスだ。サービスの利用に際して、規約に遵守する限り無料（2020年2月現在）としている。もし不正利用が発覚した場合には、アカウントをブロックする処置が講じられる。 お問い合わせメールの送信先は、まずStaticFromsのAPIに向いており、その後、対象メールアドレスに転送される。件のメールデータは保存せず誰とも共有しないとし、安全を謳っている。 https://www.staticforms.xyz/ 特徴 無料（2020年2月現在） PHP（サーバサイド）の知識不要 HTMLのみで実装可 お問い合わせフォームの実装手順 さて実装手順を説明していくが、まだHTMLのみで実装できるのか半信半疑かもしれないから、まず以下HTMLコードを共有しよう。 これだけだ。 正しくは要所を修正するけれど、PHPなど書いていないことは理解してもらえたと思う。それを踏まえて手順を示そう。 1. アクセスキーを取得する https://www.staticforms.xyz/ にアクセスして、アクセスキーを取得しよう。以下キャプチャの具合に、対象メールアドレスを入力してボタンをクリックすると、当該メアド宛にアクセスキーが送信される。 アクセスキーの発行が成功すると以下メールを得られる。本文中の「Access Key: xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx」がアクセスキーだ。太字の部分をコピーしておこう。 2. HTMLを修正する 前述したHTML内に<input type=”hidden” name=”accessKey” value=”aaaaaaaa-bbbb-cccc-dddd-eeee6666kkkk”>を確認できるだろうか。これのvalue属性値に、さきほどコピーしたアクセスキーをペーストしよう。 続いて<input type=”hidden” name=”redirectTo” value=”https://example.com/contact/success”>のvalue属性値に記述しているURLは、お問い合わせフォームの送信後のリダイレクト先になる。送信完了ページに遷移させるのが一般的だろうから、参照パスを記述したい。 このときルートパス（例：/thenks.html）や相対パス（例：./thenks.html）としてはならない。必ずドメインを含めたURL形式（例：http://ドメイン名/thenks.html）にしてほしい。さもないとStaticFromsのAPIサーバを参照してしまい、想定したページを表示させられないはずだ。 さいごに<input type=”hidden” name=”subject” value=”Test from jsfiddle”>のvalue属性値にメールの件名を書き込もう。 ここまで来たら、だいたいお問い合わせフォームの機能を果たしている。 お問い合わせフォームのカスタマイズ 前章でお問い合わせフォームとしての機能は果たしているのだけれど、Webサイトのコンテンツとしては貧弱と言わざるを得ない。 まず見栄えがショボい。前述のソースコードだけでは簡素極まる状態だから見栄えの調整が必要だろう。また入力フィールドの値チェックがないことで誤入力や未入力が発生するため、妥当性チェックがあったほうがよい。 このあたりのことも得意ではないというあなたのために、入力フィールドの見栄えの調整と妥当性チェックのサンプルを示そうと思う。参考にしてもらえると有り難い。 見栄えを調整する 見栄えを整えるためにスタイルシートを用いることは、ご存知かもしれない。しかしフォーム関連のHTML要素はブラウザ毎に独自のユーザーインターフェースをしていて、差異を無くすことに手こずるようなケースがある。このような要望に対応したのがCSSフレームワークのBootstrapだ。 Bootstrapを使ってモダンな入力フィールドに整えようと思う。Bootstrapのスタイルを適用するに際して、CSSファイルを読み込みたい。以下例ではCDNサービスにホストされたファイルを参照している。もし要件に沿わず不都合であるならばダウンロードして利用すればよい。 続いて各種入力フィールドにBootstrap規定のclassを付与していくわけだが、以下ソースコードを眺めてもらうのが早そうだ。 See…

マークアップエンジニアならば、「表示が崩れている！」と報告を受けた経験があることと思う。そのようなとき、決り文句のごとく、 「ブラウザは？」「OSは？」「ブラウザのサイズは？」 を質問するのだけれど、報告主がクライアントで、さらに用語が伝わらない場合において、そのやり取りだけで時間を浪費してしまう。ましてやブラウザのサイズなど感覚でしか分からないケースのほうが多いことだろう。 そのような場合に最適なWebツールがある。 このエントリーでは、閲覧環境の情報共有ができるWebツール「mybrowser.fyi」を紹介したい。 使い方 使い方は至って簡単だ。下記URLを対象者に観てもらって、URLを返戻してもらえばよい。 https://mybrowser.fyi/ 以下キャプチャは、わたしが閲覧したときのものだ。 ご覧のとおり、ブラウザがChromeで、OSがmacで、ブラウザサイズが1582×1242で、スクリーンサイズが2560×1440で、JavaScriptが有効で、Cookieが有効であることが一目瞭然だ。 「COPY LINK TO THIS REPORT」ボタンをクリックするとURLをコピーできる。それをメールなりにペーストしてもらえばよい。やり取りもスムーズになって報告者をイラつかせずに済むかもしれない。 機会があれば積極的に活用してみてはいかがだろう。 このエントリーが、あなたのクリエイティビティを刺激するものであると期待したい。

CSSを記述するにあたって、Emmetやスニペットで時短を試みるケースは一般的で、あなたも導入していることだろう。これら機能によって開発は、相当に高速化していることは疑いようもない。無論わたしもVSCodeの拡張機能に追加していて、事あるごとにEmmetショートコードを書いたりスニペットを表示させたりして時短を試みている。 さて前述のものが、かなり優秀だからこれ以上はなさそうなのだけれど、GUI操作でCSSプロパティを挿入してくれるVSCode拡張機能がある。 このエントリーでは、VSCode拡張機能「Fabulous」を紹介したい。 Fabulous について Fabulousは、Visual Studio CodeでCSS記述をサポートする。アクティブにするとサイドバーが現れてGUIを操作できる。 fabulous 特徴 CSS-in-JSライブラリ（styled-components、emotion、linaria）をサポート .css、.scss、.js、.jsx、.tsx、component.ts、.vue、.svelteに対応 VS Code にインストール Extensionsメニューで「fabulous」を検索して、インストールしよう。 Fabulous をつかう CSSファイルを開き、Fabulousアイコンをクリックすることでサイドバーが開閉する。 CSSファイルにCSSセレクタを記述後、カーソルを合わせると、FabulousサイドバーにGUIが現れる。 あとは適宜CSSを指定するとよい。きっと悩むことなく直感的に操作できるはずだ。 まとめ VSCode拡張機能「Fabulous」の紹介だった。 Fabulousを常用する場合において、つねに上から指定していくなどルールを定めておくことで一貫性のあるCSS記述ができると思われる。そもそも直感的な操作が可能ではあるが、慣れてしまえばスニペットで記述するより遥かに速くコーディングできるかもしれない。 よくない点としては、最後に指定したプロパティの末尾にセミコロンが無いこと、display:grid;が無いこと、positionの上下左右が無いこと、font-weightにboldが無いことが挙げられる。 とはいえ、時短を阻害するほどのデメリットではなく、ざっと指定してから整えればよい。使えそうならば導入してみてはいかがだろうか。 このエントリーが、あなたのクリエイティビティを刺激するものであると期待したい。