フロントエンドの「想定外」に対応する考え方とTipsいくつか

とても個人的な話ですが、ここ最近で自分自身のプライバシー意識の高まりを感じて、ブラウザの設定を見直す機会がありました。見直したのはCookieの設定で、許可したドメインにしかCookieを記憶しないようにしました。設定変更によるある程度の不便は覚悟していました。とはいえ、ま〜せいぜい、初回アクセスの時のモーダルが何度も出るようになるとか、ログインできなくなるとか、そのくらいかなと思っていました。

しかし実際は、悪い意味で期待を裏切られることになりました。

Cookieが無効なだけで、“全く”動かなくなってしまうウェブサイトやウェブアプリが、本当にたくさんあることに気づいたのです。

全く動かなくなってしまう原因は単純(後述)だったのですが、ちょっとした対処で簡単に直せることなのに、サイト全体が一切使い物にならなくなってて、もったいない!! と思いました。

もっと読む

受託ウェブ制作のおもしろさについて(会社紹介も兼ねて)

某所で会社紹介の発表をする機会を賜ったので、弊社ネコメシの特色である「受託制作大好きっ子がいっぱいいる」ことを魅力的に話せないかなー、と思って作成したスライドを公開しました。

スライド

内容

要点だけ、内容も書いていきます。受託の面白さを述べているのはスライド19枚目からです。

スライド内容の代替テキストがないのは今のところゴメンなさい!

スライド 1

もっと読む

「端っこ」におけるスクロールの挙動を制御する overscroll-behavior プロパティ

※この記事の内容は、まだブラウザに実装されていない内容を含みます。また、勧告前の仕様について言及しているため、最新の仕様では変更になっている場合があります。

要約

overscroll-behavior プロパティを使うと、スクロール境界(端っこ)におけるブラウザデフォルトの挙動を上書きすることができます。例えば、ブラウザが持っている「下方向に引っ張ってリロード」する機能や、スクロールが親要素に伝わる「スクロールチェーン」の挙動を無効化することができます。

はじめに

主にタッチデバイスにおいて、無効化したいのにできない、スワイプ操作やスクロールにまつわる困った挙動が3種類ありました。

  1. 「もうこれ以上スクロールができない」ことを表すインタラクション
  2. スクロールが親に伝播してしまう「スクロールチェーン」
  3. 左右へのスワイプで行う履歴の前後ナビゲーション

もっと読む

細かすぎるけど伝わってほしい私的BEMプラクティス30(ぐらい)

BEMのいいところは、それが何者なのかが明白ということに尽きる。とある要素を見たときに、そのスタイルがどこに書かれているのか、何を表しているのかがクラス名を見ればわかる。手を入れる際も、どこに追記すればよいのか、どれくらいの影響を及ぼすのかの大部分が推測できる。

レスポンシブ・デザインと相性がいいとか、流行りのコンポーネント指向と相性がいいなど、BEMの良さは他にもいくつか挙げられるけど、決定的なのは明瞭さであると思う。

BEMを使いはじめてかれこれ3,4年くらい経った。その間に色々な命名規則や設計思想が登場してきたけれども、今のところは浮気する程の魅力を他に感じることもなくBEM一筋でやってきている。ただし実践するにつけて、より明瞭で破綻しづらい設計を実現するために、様々な制約やガイドを設けてやってきたので、「もともとのBEM」からは多少なり離れているかもしれない。

ただし、それはBEM的にはオッケーなのである。もともと「正しいBEMの書き方」というものはなく、みんなの中にそれぞれのBEMがある、という捉え方でオッケーなのだということだ(みたいなことが実は公式にも書いてある)。

少し長くなるけれど、私がいつも使っているプラクティスを紹介する。

もっと読む

絵文字😇を含むテキストを表示する @font-face 設定(Unicode 10.0対応版)

CSSで絵文字を表示するための @font-face 設定を紹介します。この方法はモダンな閲覧環境ではほぼ問題なく表示できます。またJavaScriptを使用して絵文字を画像に置換するタイプ(EmojiOneTwemoji)と比較して、表示速度や利便性などの面で大きく有利です。

絵文字を含むテキストを表示する @font-face 設定(Unicode 10.0対応版)

デモページもご覧ください。

以下のCSSを指定すると絵文字がきれいに表示されます。
もっと読む

「モーダル」と読んでもいい、という話

UI用語で、「モーダルウィンドウ」や「モーダルダイアログ」という言葉があります。これらのことをまとめて「モーダル」と読んでも差し支え無い時代になりました、ということを書きます。

もっと読む

マークアップのいらない未来を考える

みなさん、マークアップ好きですか? 私はまあまあ好きです。デザインされたパーツをHTMLでどう組むかを考えたり、他の開発者と意見を戦わせたりするのは楽しいですよね!

ただ、自分はマークアップ行為そのものについて、「ここにそんな拘る意味あるのかな?」と疑ってしまうことがあります。<dl> を使うか使わないか、とか、パンくずナビはどうマークアップするか、とか、少しでも良いマークアップをするために切磋琢磨するのはきっと楽しいことなのでしょうが、エンジニアとしての自己満足に陥ってはいないだろうか? と我に返る時があるのですよね。その時の感情を掘り下げてみようと思ったことが、この記事を書くきっかけとなりました。

この記事で私が最終的に述べたいことは、近い将来の標準的なWebプロジェクトにおいて、緻密なマークアップ作業の重要性は極めて低下するだろうということです。なぜ私がそう思うか、妄想を交えつつまとめてみようとおもいます!

なお、筆者は一人のWebエンジニアに過ぎません。これから少し触れる人工知能や機械学習の専門家でなければ、アクセシビリティの専門家というわけでもありません。いーかげんなことを述べているかもしれない点はご承知おきください。

もっと読む

デザインPSDからコーディングHTMLを自動生成してくれるサービスAUTOCODINGを使ってみた

株式会社プレートさんが、AUTOCODINGというサービスを開始されました。デザインファイルからコーディングを自動生成してくれるというサービスですが、さわりだけ聞くといかにも眉唾な感じです。ほんまにちゃんと作ってくれるんかいな? ということで試してみました。

もっと読む

WebStorm/PhpStormが備える差分抽出(Diff)機能まとめ

WebStorm/PhpStorm(というかJetBrains製のIDE全般)には多彩なバリエーションの差分抽出(Diff)機能が搭載されているのだけど、あまりにも多彩なのでいったんまとめてみることにした。

まとめてみた結果、これはもう外部の差分抽出・マージ専用ツールは不要だなと思えるほど充実していた。

もくじ

  1. 特定の2つのファイルを比較する
  2. 現在開いているファイルと、特定のファイルを比較する
  3. クリップボードの内容と、ファイルを比較する
  4. クリップボードの内容と、ファイル内の特定領域のテキストを比較する
  5. 特定の2つのディレクトリを比較する
  6. リモートファイル(サーバー上にあるファイル)と比較する
  7. リモートファイル(サーバー上にあるファイル)と複数ファイル同時に比較する
  8. ローカル履歴と現在のファイルを比較する
  9. Gitのブランチどうしを比較する
  10. 現在開いているファイルと、Gitの別ブランチにある当該ファイルを比較する
  11. 現在開いているファイルと、Gitの同一バージョンのファイルを比較する
  12. 現在開いているファイルと、リポジトリの最新バージョンのファイルを比較する
  13. 現在開いているファイルと、リポジトリの特定バージョンのファイルを比較する
  14. 特定の2つのコミットを比較する
  15. おまけ

もっと読む