インデントを!!!HTMLに!!!付けてください!!!

メロスには政治がわからぬ。

メロスは、会社勤めのコーダーである。
キーボードを叩き、客と遊んで暮して来た。
けれどもインデントの位置に対しては、人一倍に敏感であった。

インデント付けてよ!って話

大っぴらには人のことを言えないので、Twitterには書けない内容的な…。
Qiitaとかに書いたら「お前はどうなんだよ!」とか言われそう、と保険を掛けておきます。

一言で表すと、インデントとかに関してです。
決してHTMLの構造だとかセクションだとかアウトラインだとかって話ではないです。

コーダーやってると、他人のソースを見たり弄ったりするときが結構な割合であります。
そういうとき、ソースが見やすい場合と見にくい場合があるわけですよ。
そんな中その判断を下す基準としては、ブロックごとに分かれてるかとか色々ありますが、ぼく的には「最低限のインデントが付いてる」か否かが一番低いハードルとしてあります。
ちなみにぼくのインデントは半角スペース2つです。

いやこれ、別にインデントの数を2つにしろとか4つにしろとかそういう強要をしているわけではないんですよ。
極端な話かもしれませんけど、最近インデントがほとんど存在しないソースコードを弄らされまして。
このブロックどこ?書いてある場所どこ?っていうことになりました。

しかもそれだけではなく、インデントの量が場所によってマチマチ。
これの何が悪いかって、ネストの関係が全くわからないんですよ!!!
こことここ、同じ深さで<section>だけどなんでソース上は深さ違うの?って。

時間がなくて慌ててるのはわかるんですが、HTMLは入れ子関係がわからん状態だと、ソースの解析から始めないといかんのですよ!!!!
(多分他のプログラムも大体そう)

しかもなんか所々に変な半角スペースが入ってたりなかったり。
ソースコード上の距離がブロックごとで微妙に違ったり。
そもそもブロック同士のネスト関係がわからないし…。
しまいにゃ<” “>と<””>が混じってるし?

なんじゃこら。

フロントが合ってればオッケー!?

これまた極論、コーダーが出す成果物はフロントで見たとき問題なけりゃ誰も文句は言わないです。
コーダー以外。

でも何か月か経ったりしてそのソースを改めて見たとき、それが自分か他人かは知りませんが、間違いなく彼or彼女はキレます。
これを作ったのはどいつだ!と叫びます。
(実際には叫ばず黙ってソースを修正しはじめます)
(これすごいコードだね、と多少の嫌味は入ります)

とはいえ、デザイナーも熟達者になるとソースを見始めます。
なぜかといえば、自分の思う通りにデザインを書き起こしてほしいからですよ。
中にはコーディングも行うことのできる段違いのパーフェクトヒューマンもいますが、その辺になると自分で全部やり始めるのであまり関係はないです。

そんなことがあったりなかったりするので、コーダー志望ならちゃんとインデントを付けてソース管理しようねって話。
久々にどこに何が書いてあるのかさっぱりわからんソースを見たので愚痴ってほどでもないですが、書きました。

ちなみに(おまけ)

すごく適当に書きましたけど、大体こういう感じのソースでした。
なんていうか、整理の苦手な人なのかな?って感想。
別に中身まで詳しく検分してどうのしたってわけではないのでどうでもいいんですけど、すげぇなって。
正直PHP云々でWordPress覚えさすより先に、文法の基本ってわけじゃないけど綺麗にソース書けるようになってくれないかな。
これソースとして渡されたらまず整形で半日かけるわ。

ということがあったので、

・インデントつける(ぼくの場合は半角スペース2個分)
・タグを見やすく書いてくれ
・軽くで良いからHTML5の文法について調べてくれ

ぐらいはやってほしいですよねほんと。
ぶっちゃけイラレとかで機械的に出すソースコードとなんも変わんねえじゃんね。
これを人間が出すんなら人間いらんわ、機械でいい。

そろそろ人間が書くレベルで、後々人間が保守できるぐらいのソース書けるツールとか出ないの?
まあ出たらぼく失職すると思うけど。

関連記事

デフォルト画像
2019.06.27
戻ってきたぜ “””””WordPress””””

Hexoから逃げてきた そろそろ更新の仕方が煩雑で面倒になってきたので、WordPressに戻しました。メリットも大きかったけど、デメリットのほうが大きいよねって。 ■世の中に出回ってる情報が少なすぎるそもそもHexo使いが日本のネットであまり見られないので、解決策が出てこないんですよね。要は自分でテンプレートとかを構築するのも、学習する必要があるわけで。その上、日本語リファレンスなんてあるわけもないので英語ページを見ることになるのです。中学英語ができればなんとかなる?なるわけねえだろ。 ■やりたいことができないHexoって、タスクランナー使って構築したHTMLファイルをアップロードするんですよ。なので、サーバーを頼りにした機能とかはできないです。例えば上位ランキングとかそういうのは、偉い人が作ったプラグインを実装することになります。ただ、そういう機能の信頼性は間違いなくPHPとかのほうが上です。WordPressならその辺はどうとでもなるのが強い。プラグインもあるし、その気になれば自力実装も可能。Hexoでもできるって?じゃあキミやりなよ。 ■軽くて速いのと安全ってぐらいしかメリットがない結局のところ、表示の速さがウリだと思って使い始めましたが、そのウリも微妙な感じになってきまして。このメリットが活躍する人ってのは、もっと色々なことをやる大きめのブロガー向けなんですよね。ぼくのここみたいなちっちゃいブログだと、高速化したところで元とあまり変わりません。正直な話、メリットが別にメリットではなかった…的な。 といった理由からHexoをやめました。あと最大の問題点は、更新がちょっと面倒になってきたことだったりします。カテゴリとかタグとか、そういうのをまとめるUIは当然ない(メモ帳)ので、カテゴリ名とかは自分で覚えておく必要があります。まあ偉い人はそのへんなんかシステム組んでパパっとやっちゃうんでしょうが、そこまでの学習コストは払いたくないのでスルー。 WordPressで感動するのは、やっぱりGUIですねー。それを考えると、同じ静的ブログが作れるMTのほうがいいかもしれないです。あっちはあっちで色々と学習コストはお高めですが、趣味の範囲でなら無料でできてGUIもあって便利。 今んとこ、PageSpeedのスコアはモバイル・PC共に90点以上出てるので十分だと思います。Amazon越えてっぞAmazon!アレは前にスコアを見てその異常な高得点さに戦慄を覚えた記憶があります。 面白いことがない限りは、また暫くはWordPressで書いていきます。ちょっと重くなる程度で、後はすべてがメリットです。 それでは今日はここらでサヨウナラー

デフォルト画像
2018.11.30
複数行の文末3点リーダー省略「line-clamp」で省略がされないバグ

line-clamp 仕事で憤慨したので珍しく技術エントリです。 世の中のニュースサイトとかブログサイトでは、度々「文末省略」が用いられます。 ググればいくらでも出てくる、text-overflowとかのことです。 これを使えば文末に3点リーダーを持ってきて、文章を省略することができます。 1行ならな! 2行以上になると、また別のプロパティを用いる必要が出てきます。 それが「line-clamp」。 -webkit-line-clamp: 3; ってのとそれ専用のプロパティを指定してあげると、line-clampの数の行で3点リーダー省略してくれます。 超有能。 しかしやはり制約はつきもので、webkit系ということもあってかIEやFirefox(?)などでは使えません (火狐は違ったかも) それに正直使用は推奨しないのがこれのビッグ・問題点です。 なぜならおそらくは今後制定されることのないプロパティだからー! ほぼ仕様版的な感じで、なおかつもう開発されることはないと思ったほうがいいです。 なので人間ならおとなしくPHPとかJSで区切るようにしましょう。 どっちもある程度の制約もありますが、ちゃんとプログラムでやったほうがいいよ。 【本題】line-clampで区切れない場合がある まずはこちらをご覧ください。 See the Pen line-clampで区切れない場合があることの説明 by 【LIGHT WINGER】 saiko (@saikofall-the-typescripter) on CodePen. このコードを簡単に説明すると ・メニューの切り替えタブと、中身のタブがある ・タブ1/2/3をクリックすると、対応した中身タブの表示が切り替わる っていうだけのものです。 使い道としては、ちゃんとデザインすればタブ切り替えメニューになったりします。 最近だとサイドバーに表示するミニランキングとかそういうの? さてここで本題、見りゃわかるんですが、タブ2をクリックして表示させますと、なぜかline-clampが効いてない状態でタブが表示されます。 もちろん、3つのタブすべてに同じcssを適用しており、理想の表示としてはタブ1のようになるものとします。 で、これを調べてたのですが、どうもwebkit系特有のバグ?だそうですね。 というわけで下記の2ページを参照。 マルチラインのラインクランプ(省略記号)は、私は、H3タグにこのクラスを適用 -webkit-line-clamp is not respected when visibility is hidden どちらも英語ページですが(上のは無理くり日本語翻訳されたもの)、言ってることはひとつです。 どうやら、line-clampは再描画?が上手くされないらしいです。 今回上のメニュー切り替えでは、隠れているものには「visibility:hidden」が設定されています。 それを切り替えタブクリックでvisibleにしているわけですね。 ですのでレンダリング時点でvisibleがhiddenしてるってのが原因だそうです。 これはwebkitのバグとして認められているのでどうしようもありません。 諦めろん。 ただし、解決策がないわけではなく、その要素を「hide().show()」とかで再描画すると直ります。 だから開発者ツールでline-clampを付けたり消したりするとなぜか直るっていう現象が起こったりするわけですが。 やってはないんですが、もしかしたらvisibilityじゃなくてdisplay:noneとかなら影響が出ないかもしれませんね。 アレも多分再描画だし。 でも色々とcssの動きが面倒になるのでやっぱりhideとshowとかで再描画させてあげたほうが楽かも? クソ雑魚js使いなので正直正しいかもわからんっす。 ぐち ぼく思うんですけど、そもそも3点リーダーの省略やめようぜって。 だってアレ面倒なだけじゃないですか。 css → できないのとできるのが多すぎ、そもそも制約デカすぎ php → 文字数制限があって日本語だと微妙、バイト制限でやっても結局多少のズレは発生する js  → 重すぎ、一番綺麗にできるけど負荷が半端ないので現実的じゃない っていう問題児なので、もし省略を誰かに頼むときは 「なんかこう、下のほうがグラデーションで消えてく感じで省略してほしい」 って頼みましょう。 下白のグラデ掛けるだけでなんとかなるので作るほうとしては非常に楽です。 あとこれは個人的な意見ですが、見栄えが「...」よりもグラデでスッと消えたほうがいいと思います。 それでは今日はここらでサヨウナラー

2021.03.10
【Valheim】素材の宝庫、沼地

臭い、汚い、敵が強い 黒い森を抜けた先で急激に難易度が上昇するバイオーム、「沼地」。長老を倒したと思ったら、クソ地形にクソデバフを撒くことで有名。 敵が毒持ち(ブロブ2種、蛭)、妙に強い人型、夜にのみ生息する霊。 更には地面が水没していたり無駄に暗かったりと、まるで良いことのない沼地ですが、意外にも素材にあふれています。 中盤から後半にかけて料理で使うアザミ、(現状で)最終段階の装備にも使う羽目になる鉄、そこそこ作りやすくて長持ちするソーセージの主成分である内臓など。実に豊富な素材が、バラエティ豊かに生息しているわけです。終いにゃスルトリングの核も落ちてる。 この中でも特に個人的に重要だと思って、今なお回収作業をしているのが、もちろんこれ。 蛭から落ちる血袋ですねー。今日はこれを集めています。 これが実に便利で、現状では2つの使い道が主にあります。 ひとつはポーション。 大釜に何種類かの素材と一緒にかけてあげることで、ポーションの素が作れます。これを樽にぶち込めば、なんと6つもポーションが生成されるんですねー。ポーション酔いが存在するといえど、ボス戦などでは必須になるアイテムだと思います。死にたくないなら1スタック分は持て。 もいっこは料理。 大麦が解放された後なので、ほぼほぼ終盤の話になりますが、「血のプティング」に血袋を使います。血袋2、アザミ2、大麦の粉4で生成可能なこれ、なんと体力を90も向上してくれるんですねー。素晴らしいコストパフォーマンス。 Valheimでは、回復は基本的に料理頼みになります。ポーションはかなりの回復量を誇るのですが、どうしてもリキャストが必要です。3種類まで料理を食すことができるので、基本的には「重い飯+軽い飯+軽い飯」がわりと最適解?です。ハチミツとかは消化が早いわりに回復量が多いので、緊急的にポーションとして使えたりします。 嫌になるほどの暗さと敵の強さがある沼地ですが、後半になって装備も強くなれば頭空っぽにして周回できるので今は素材集めに重宝しています。雪山は必須な素材などが特にないのでスルーしても問題ないのですが、鉄とかの関係もあって沼地は周回しないといかんのですよね…。今後のアップデートで、もっと高級な素材とかが手に入るバイオームが追加されていってくれるとありがたいのですが。