Netlifyは静的サイトのホスティングサービス。ドラッグアンドドロップでサイトを公開できるし、GitHubと連携してプッシュして変更を反映させることもできる。独自ドメインも使える。便利。

そのNetlifyのフォーム機能を使ってみた。日本語だと Netlify Forms 実装パターンまとめこの記事がまとまってると思う。以下所感。

導入は本当に簡単。form要素に netlifyもしくはdata-netlify="true"と記述するだけ
スパムフィルターもAkismetが標準装備されてる。reCAPTCHA 2やHoneypotも設置できるけど基本的にはそこまでしなくていいんじゃないかな
月100件までの送信なら無料、送信ファイルがある場合も月10MBまでなら無料。その上になると月1000件、月500MBで月$19。小規模サイトなら無料枠内で収まると思う
メールの自動返信機能と送信内容の確認画面はない。サンクスページのカスタマイズはできる
届いた内容はNetlifyの管理画面からも見られるし、メールでの通知もできる。メールには内容がすべて記載されるので、メールだけでの運用でも問題ないんじゃないかと思う
メールの件名はカスタマイズできるけど、変数は使えないので件名に個別の問い合わせの情報を入れることはできない。残念
どうでもいいけど一度設置したフォームはソースから削除しても管理画面から消えない、消せない。なんじゃそりゃ…

Netlify自体無料で利用できるし、小規模なサイトでフォームを実装したいという場合には（いくつか制約があるにしても）いいんじゃないかと思う。何より簡単だし。あとは無料プランでもパスワードをかけられるようになれば文句ないんだけどなあ…Netlifyさんお願いできませんか。

2019-10-02

Node.jsのバージョン管理をnodenvで行う

Node.jsのバージョンを管理し、プロジェクトごとに切り替えられるようにするためにnodenvというバージョンマネージャーを使います。また、nodenvをインストールためにanyenvというまた別のツールを使います。以下参考にした記事。

qiita.com

www.to-r.net

やったことは記事の通りで特に詰まることもなかったので割愛。いくつかあるバージョン管理ツールの中でnodenvを選んだ理由はもくもく寺で少し前に話題になっていたので。そもそもバージョン管理ツールを使おうと思ったきっかけは、別に今は必要はないんだけどグローバルのNode.jsが古くなっていたので。

寺のSlack確認したら、言及されていた記事はまた別の記事でした。

qiita.com

2019-05-31

-webkit-text-fill-colorとcolorの違い

テキストの塗りつぶしの色（the fill color）を指定できる-webkit-text-fill-colorというプロパティがある。

developer.mozilla.org

これがcolorプロパティとどう違うのかと言うと、機能的な違いはたぶんないっぽい。
じゃあ使いどころがないのかというとそんなことはなく、(-webkit-)background-clipと組み合わせるとよい場合がある。

(-webkit-)background-clip: textで背景画像をテキストの形に切り抜くことができるが、テキストを透過させなければ切り抜いた背景が見えない。その場合、colorでtransparentを指定してしまうと(-webkit-)background-clip: textに対応していないブラウザでもテキストが透明になってしまうが、-webkit-text-fill-colorでtransparentにしておけば対応していないブラウザでは透明にならないのでフォールバックになるという寸法。というような回答がStack Overflowにあった。

stackoverflow.com

ちなみにデモはこちら。IEで見るとcolorでの指定はテキストが透明になってしまっているが、-webkit-text-fill-colorでの指定はブラウザが対応していないためテキストが透明になっておらず、読めることがわかると思う

逆に言うと現状ではこの使い方くらいしかないと思うのだけど、今後別の新しい使い方が出てきたりするのかもしれない。

2019-04-30

JavaScript寺子屋に入門して卒業した

@better_than_i_wさんがやってくれている一日一題形式でJavaScriptの課題をこなしていくJavaScript寺子屋の課題を全てこなしました。

課題をこなしたものはこちら。
codesandbox.io

寺子屋設立のきっかけや参加方法などを書いてくれている@murokacoさんのブログはこちら。
murokaco.hatenablog.com

CodeSandboxってめちゃ便利ですね。このサービス知れただけでもよかった。課題をこなすことで自信が持てたし、継続してjsの学習を行っていこうと思います。js自体の勉強としては何冊か読んでいる書籍があり、Reactの勉強としては中西さんのUdemyのコースを購入しました。今年中にReactの案件を手掛けるのが目標すかね。

2019-03-13

CA11Y #1 〜アクセシビリティはじめて物語〜に参加した

アクセシビリティ

ca11y.connpass.com

・サイバーエージェント（CA）のアクセシビリティ（a11y）のイベントなのでCA11Y
・前日に補欠10番台なので無理かなと思っていたら、開始時刻の4分前に繰り上がりのメールが来てしまった。嬉しいがちょっと困った
・なので途中からの参加。配信の録画があるので、後で見返したい
・技術的な知見としては、デザイン上自明な場合でも文書構造の観点からは見出しをマークアップしたほうがよい。その場合は、visuallyHiddenという手法を使って視覚的に消せばよい
・これはかなりすっきりする知見だった。最後にツイートをいくつか引用するけど、同じことを思った。すぐにでもできる実装方法だし、今後この手法で対応しようと思った
・イベントの内容は非常によかったけど、イベントの進行に関しては少し残念に思った。司会役が酒を飲むのは、個人的には別に面白くないと思う
・LTに大幅な時間超過があり、それを許容するような空気感だったのが残念だった。スケジュールはあらかじめ発表してあるんだから、時間を守るくらいのことはちゃんとやってもらいたい
・運営側もそれほど真面目に時間を守らせる気がなかったようなので、カジュアルなイベントを演出しようとしてたとしても締めるところは締めてもらいたかったというのが正直な感想
・繰り返すけどイベント自体は意義のある素晴らしいものだったと思います。それだけになあなあな進行が残念でした。

header / footer / main、sectionの階層を意識しながら考える。たとえばメインビジュアル、見た目として明示的であってもHTML上には見出しが存在しない場合、暗黙的なセクションとして見出しをマークアップ＋CSSで非表示にしたりする #ca11y
— Sayaka Kawashima (@river_is_land) 2019年3月8日

なるほどだな〜〜後からのデザイン変更で見出し省略になった時とか、若干もにょりつつsectionをdivに変えたりしてたんだけど、HTMLアウトラインとしては残して視覚的には非表示にする方法もあったんだな #ca11y
— Sayaka Kawashima (@river_is_land) 2019年3月8日

これはよくある疑問なのですが、アクセシビリティ的な必然性のある不可視要素はペナルティにならないと明言されています。Google自身も不可視の見出しは使っています。https://t.co/RuGtRLZuIz
— 水無月ばけら (@bakera) 2019年3月8日

2019-02-28

個人情報保護法を読んだ

Webサイトの制作にあたってプライバシーポリシーや個人情報の保護に関する文章を作成することがあると思うんですが、自信がない部分があったので個人情報保護法を読んでみました（ざっと目を通しただけで、さすがに細かく読んではないです）。

第十五条　個人情報取扱事業者は、個人情報を取り扱うに当たっては、その利用の目的（以下「利用目的」という。）をできる限り特定しなければならない。

第十八条　個人情報取扱事業者は、個人情報を取得した場合は、あらかじめその利用目的を公表している場合を除き、速やかに、その利用目的を、本人に通知し、又は公表しなければならない

第十九条　個人情報取扱事業者は、利用目的の達成に必要な範囲内において、個人データを正確かつ最新の内容に保つとともに、利用する必要がなくなったときは、当該個人データを遅滞なく消去するよう努めなければならない。

このあたりが大事なのかなと思ったんですが、まず個人情報を利用する目的は公表しておかなければいけない（目的さえ決めておけば取得するごとに知らせてもいいけど、普通は公表しておくほうを選ぶと思う）。個人情報を使わなくなった場合は速やかに破棄しなければならない。問い合わせフォームから個人情報を取得するとして、「問い合わせにご回答するためにのみ使用します」と書いてしまうと回答が終了した段階で情報を破棄する必要が出てくるから、企業側としては「サービス向上のために使われることがあります」とか書いておくのが無難なのかなと思います。

あとはこのあたりの記事を読みました。

改正個人情報保護法、5月30日全面施行。中小のWeb担当者が知っておくべきことまとめ | 初代編集長ブログ―安田英久 | Web担当者Forum

もうグレーゾーンはない！知らなきゃ恥をかく改正個人情報保護法 | 『リードビジネス“打ち手”大全』（全11回） | Web担当者Forum

時間があれば

個人情報保護委員会 > 個人情報保護法について > 法令･ガイドライン等

このあたりも読んでみようと思います。