BETA

Webページカスタマイズの嘆き

投稿日:2019-03-05
最終更新:2019-03-05

はじめに

  • 「あーこの部分のHTMLがうまく記述されてないなー」
  • 「いいサービスなんだけどデザインがなぁ」

そんなときはユーザースタイルシートやユーザースクリプト!
でもそんなに楽ではないのです。

ユーザースタイルシート

Stylusなどの拡張機能では、Webページに自らのCSSを適用させることが可能です。
が、そんなに楽ではないのです。

カオスCSSとの戦い

ただ単純に、「これを消したい」とか「これの色を変えたい」とかなら簡単です。
が、「ダークモードにしたい」とか「場所を移動させたい」とかいうようなスケールの大きいことをしようとすると大変です。

ましてや他人のWebページです。
「なにこのCSS、全くわからん」や「なにこのCSS、わかるけど周りくどっ」や「あっちで設定してそっちで上書きしてこっちで!importantしてる…」や「JavaScriptでCSSいじるんじゃねーよぉぉぉ!!!」などなど、とてもめんどくさいです。

「あーもういい! 全部俺がやる! てめぇは出てくんじゃねぇ!」

* {  
    all: initial;  
}

生き残るstyle属性。

* {  
    all: initial !important;  
}

自ら設定したCSSすら消え去る。

ほげぇぇぇ!!!

俺…センスないな

頑張ってカスタマイズできたとします。
しかし、(私の場合)そこに待ち受けるのは他の何でもない、自らのデザインセンスのなさ

「紛れもない、これは俺の、俺自身の問題だ…」

特に配色には悩みます。せっかくのダークモードでも文字色をどうすればいいか…。whiteは白すぎ、greyは暗すぎ…。

ユーザースクリプト

HTMLの書き換えやユーザーによるイベントの処理などのもっと複雑なことをするとします。
その場合、Tampermonkeyなどの拡張機能を用いることで、Webページ読み込み時に自らのJavaScriptを実行させることが可能です。
が、これもそんなに楽ではないのです。

WebページのCSSとの戦い

ユーザースクリプトでHTMLを用いたリッチなポップアップを表示させるとします。

<output>  
    <p>プログラム結果: <span>ほげふがぴよ</span></p>  
</output>

しかし、Webページにbody { color: white !important; }のようなCSSがあったらどうでしょうか。
流石にこの例はありえないとは思いますが、文字色を変える・フォントサイズを変える・フォントを変えるなどなど、予想外のCSSがあることなんていくらでもありえます。

この戦いに勝つのは大変です。

const $div = document.createElement('div');  
document.body.appendChild($div);  

const shadowRoot = $div.attachShadow({ mode: 'closed' });  

const $p = document.createElement('p');  
$p.style.all = 'initial';  
$p.textContent = 'HOGEHGUAPIYO';  
shadowRoot.appendChild($p);

Shadow DOMを用いました。
Shadoe DOMの内部へは外部からスタイルを定義することはできなくなり、逆に内部で定義したスタイルは外部へは漏れ出ません。
しかしスタイルの『継承』は依然として有効で、すべての要素にall: initial;をする必要があります。
面倒ですが、これが最善だと思います。

Ajax滅べ。(過激)

AjaxなどでWebページが動的に書き換えられるタイプのページでは、Tampermonkeyなどの拡張機能ではイベントが発火せずユーザースクリプトが実行されない場合があります。

拡張機能を自作することでどうにかすることもできなくはないですが…。

おわりに

なぜこんな記事を書いたのか。

ここで挙げた『楽ではない』は、Webページを作る人が、丁寧に作れば起きないことなのです。
「カスタマイズ性を持たせろ」というわけではありません。
「仮に他人があとからカスタマイズするとしても問題が起こらないような設計でどうかお願い致します」という意味です。

嘆くことなくカスタマイズできるWebページはどんなものでしょうか。

HTMLでは、

  • 同じidを使い回さない
    • CSSいじるときにつらい思いをするはめに
  • id、classは意味のある文字列にする
    • コメントがなくとも意味ある名が付けられていたらわかります
  • 正しい優しいマークアップを心がける
    • そもそもHTMLをカスタマイズしなければならないような状況は相当アレです
    • 見出しはh1h6タグで
      • お願いします
      • いつだか一切使われていないページを見かけて唖然としました
    • a[href="javascript:void(0);"]をなるべく使わない
      • input[type="button"]使いましょうよ
      • buttonタグなら中にHTMLを書けます
      • aタグにクリックイベントがあるとか予想してないから
    • inputなどの説明文にはlabelを貼る
      • そうすることで、その説明文をクリックすると対応したinputにフォーカスが移ります
      • 優しい。普通にお願いしたいです

CSSでは、

  • 変数を用いて同じ値を極力まとめる
    • これによりダークモードを作ることが容易になります
    • また、Webページの仕様変更への追従ができるようになります
    • というかプログラミングでは「同じものは2度書くな」というのになぜCSSではいわないのですか
  • スコープを極力小さくする
    • バッティングを抑えられ!importantを用いる必要もなくなり、見通しがよくなります
    • というかJavaScriptでは「var使うなブロックスコープ使え」というのになぜCSSではいわないのですか
  • floatを用いない
    • 単純にカスタマイズする上で扱いにくいです
    • clear: both;用のdivとかユーザースタイルシートからは作れないので
    • display: flex;display: grid;使うの楽しいですよ

JavaScriptでは、

  • クリックイベントを発火するクリックイベント
    • やめて(切実)
    • どうなっているのか追えないから!
  • CSSをいじるのは控える
    • ほんとにJavaScriptじゃなきゃだめ?
  • 必要な場合のみpreventDefault()する
    • YouTubeでShift矢印を用いたテキストの範囲選択ができなくて発狂しそう

いろいろ挙げました。
どれも、Webページを『作る』ときにも大事になってくる要素かと思われます。
自分たちが作りやすく管理しやすい形式が、他の人にとってカスタマイズしやすい形式なのです。


情報化が進んだ現代、すべてのデータを機械にも読めるようなページを作ってみたくはありませんか?(宗教的勧誘)
私は作ってみたいです。

日時はtimeタグ使いたいですし、tableにはcaptionつけたいですし、本文から参照されるすべてのものにはfigureつけたいですし、見出しはsectionでセクショニングした上でh1で書きたいですし、連絡先はaddressに書きたいです。
ありとあらゆる情報に可読性の高いデータを紐づけたいです。

…でも、いつもキリがなくて書いているうちに破綻するんですよね。
私のポートフォリオ作成までの道のりは長い…。

技術ブログをはじめよう Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
駆け出しエンジニアからエキスパートまで全ての方々のアウトプットを歓迎しております!
or 外部アカウントで 登録 / ログイン する
クランチについてもっと詳しく

この記事が掲載されているブログ

@okayuの大して技術的ではないブログ

よく一緒に読まれる記事

0件のコメント

ブログ開設 or ログイン してコメントを送ってみよう
目次をみる
技術ブログをはじめよう Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
or 外部アカウントではじめる
10秒で技術ブログが作れます!