会津ラボ

レスポンシブデザインのコーディングに際して、横にはみ出させざるを得ないコンテンツがある。そのもっともたるものが表レイアウトで、モバイルスクリーンでは、だいたいの場合は横幅超過してしまう。 無思慮な状態だとページ全体が押し広げられ、想定しないところに横スクロールが発生する。このことを考慮して、対象エリアにのみ横スクロールするようなスタイルを当てるのが一般的であろう。 それ自体は周知のことで、取り立ててお伝えすることではない。ただしスマホで閲覧した場合のスクロールバーは非表示になる仕様上、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が無いことが挙げられる。 とはいえ、時短を阻害するほどのデメリットではなく、ざっと指定してから整えればよい。使えそうならば導入してみてはいかがだろうか。 このエントリーが、あなたのクリエイティビティを刺激するものであると期待したい。