ナノのスマホ向け自動出力CSSの消去

2020-04-07 2020-04-07

ナノ側の仕様変更に対応
ナノ側の仕様変更に対応
IEサポート終了して一年経つので非対応に変更(字数削減,指定要素が存在しない場合のエラー回避)、それに伴い再配布についての問題点の文言を変更
IE対応に記述変更、再配布についてを追記
記事再編
記事公開

一々リセットCSS書くのも面倒なのでjavascriptを使って150字以内で済ませましょうというかなり雑な記述。

code

JavaScript


        
	<smartphone>
	<script>
	document.querySelectorAll('link[href^="/static/"]').forEach($tgt=>$tgt?.remove());
	</script>
	</smartphone>

HEAD内に上記を追加
ナノHEAD内自動出力であげた、スマホ用CSS読み込み用の要素自体を消去するだけの単純な処理です。
これだけで済むので「他所からテンプレ借りてるけどなんか見本違うな」とか思ったらとりあえず試してみていいと思います。

再配布について

利用規約の通り、配布物に組み込んでの利用も全く問題ありません。　是非ご活用ください。

ただ、ナノ以外で利用する可能性のある配布物の場合、コード側に問題があるので記しておきます。

端的に言えば、ナノ以外では記述しない方が良いので配布物のソースコードにそのまま組み込むのはおすすめしません。

解決策

利用者に判断を委ねる

「ナノでの利用時はこれを追加」的に補足として添える
「ナノ以外での利用時は該当箇所を削除」するようアナウンスする

等、利用者さんに呼びかけて適宜編集してもらうのがベストだと思います。

問題ない記述に編集する

JavaScript


        
	<script>
	if(/^(?:.+\.)*nanos\.jp$/.test(location.hostname)) document.querySelectorAll('link[href^="/static/"]').forEach($tgt=>$tgt?.remove());
	</script>

後述問題点２項を回避した記述です。

結局ナノ以外だと冗長でしかない上、ナノでも無駄な部分が生じるので推奨はしませんが、どうしても予め組み込んでおきたい場合はこちらを採用してください。

問題点

未定義のHTML要素が出力される

<smartphone></smartphone>は「スマートフォンからアクセスした場合のみ要素間の記述を出力する」というナノのサーバー側処理用の記述(所謂独自タグ)です。

<smartphone>要素はHTMLとして定義されていません。

ナノだとこのタグ記述自体出力されないので問題ありませんが、そのままHTML要素の記述として出力されてしまう環境での記述は避けた方が無難です。

※未定義のHTML要素の使用に関してですが、一応HTML5上だと現時点では問題ありません。　しかし今後意味を持った要素として定義され現段階での使用意図から大きく外れる可能性があったりそもそもの問題ないという仕様自体変わる可能性もあります。　それらを回避する方法もありますが正直そこまでするより「使わない」を徹底することをおすすめします。

意図しない要素の削除になる可能性

JavaScriptで「指定要素(ナノ自動出力のcss読み込みlink要素)を削除」という処理をしています。

ここで指定したセレクタに合致する要素自体、スマホ閲覧の時ナノ以外では多分存在していないと思います。

万が一ナノ以外の利用でセレクタに合致する要素があった場合、削除されてしまうので問題になるのではないでしょうか。