HTMLの真価は「論理と見た目の分離」。みちょぱに違法建築をさせてはいけない【マークアップ言語2】#38
Вставка
- Опубліковано 4 лип 2024
- 「ミズノの知らないマークアップ言語の世界」の第2回です。
「HTMLのスゴいところは論理と見た目の分離」「WEBの世界ではみちょぱが建築している」「ブログで強調のために太文字を使うな」など、マークアップ言語の利点についてたとえ話を交えながら話しました。
【目次】
00:00 Webの世界ではみちょぱが建築する
02:15 HTMLのスゴさ「論理が明確」
10:34 強調のために見出しを使うな
17:29 新ミーム「みちょぱに建築させるな」
20:52 お馴染みのアレも実はマークアップ言語
25:41 次回のキーワードは「入れ子構造」
【参考文献】
○『ENIACからXMLへ: 元XMLユーザーグループ会長が語るマークアップ言語とメタ言語の歴史』
amzn.to/3Ljogtq
→マークアップ言語の歴史について書かれた本。出版社から出た本ではないので散逸的なブログっぽい内容。
○『作りながら学ぶ HTML/CSSデザインの教科書』
amzn.to/3LecDDZ
→定番のHTML/CSS入門書。初めてちゃんとHTML/CSSを学ぶ人にオススメ。堀元も昔やりました。
○『イラスト図解式 この一冊で全部わかるWeb技術の基本』
amzn.to/3d3nQul
→ブラウザの基本的な仕組みについて知りたい人はこちらをどうぞ。
【サポーターコミュニティ加入はこちらから】
yurugengo.com/support
【親チャンネル：ゆる言語学ラジオ】
/ @yurugengo
【フランチャイズプロジェクト：ゆる学徒ハウス】
/ @yurugakuto
【おたよりフォーム】
forms.gle/BLEZpLcdEPmoZTH4A
※皆様からの楽しいおたよりをお待ちしています！
【お仕事依頼はこちら！】
yurugengo@gmail.com
【堀元見プロフィール】
慶應義塾大学理工学部卒。専門は情報工学。WEBにコンテンツを作り散らかすことで生計を立てている。現在の主な収入源は「アカデミックに人の悪口を書くnote有料マガジン」。
Twitter→ / kenhori2
noteマガジン→note.com/kenhori2/m/m125fc452...
個人UA-cam→ / @kenhorimoto
【水野太貴プロフィール】
名古屋大学文学部卒。専門は言語学。
某大手出版社で編集者として勤務。言語学の知識が本業に活きてるかと思いきや、そうでもない。
#マークアップ言語 #ゆるコンピュータ科学ラジオ
【参考文献】
○『ENIACからXMLへ: 元XMLユーザーグループ会長が語るマークアップ言語とメタ言語の歴史』
amzn.to/3Ljogtq
→マークアップ言語の歴史について書かれた本。出版社から出た本ではないので散逸的なブログっぽい内容。
○『作りながら学ぶ HTML/CSSデザインの教科書』
amzn.to/3LecDDZ
→定番のHTML/CSS入門書。初めてちゃんとHTML/CSSを学ぶ人にオススメ。堀元も昔やりました。
○『イラスト図解式 この一冊で全部わかるWeb技術の基本』
amzn.to/3d3nQul
→ブラウザの基本的な仕組みについて知りたい人はこちらをどうぞ。
【サポーターコミュニティ加入はこちらから】
yurugengo.com/support
【おたよりフォーム】
forms.gle/BLEZpLcdEPmoZTH4A
※皆様からの楽しいおたよりをお待ちしています！
ブロガー「強調したいな、見出しを使えばいっか」
堀本氏「喩えたいな、みちょぱを使えばいっか」
というメタ的な構造で説明しているのですね。芸術的で感激しました。
「みちょぱに建築をさせるな」
new「堀元に例えをさせるな」
前者もnewだろ
プリンの両端にだけキャラメルが載っていて、そこに天パが帯電した大泉洋をみちょぱが持ってきている様子を想像してください
違法なみちょぱが大きなプリンを建築しているのをたくさんの大泉洋がウェッブ望遠鏡で観測している話じゃなかったんですか？
円卓は出てくる？
@@chimkio 水平思考ゲームしてる
最近だと右脳を取り替える必要が出てきたからな。いやーコンピュータ科学は難しい。
みちょぱが持っているのは「建築への熱意」ではなく
「内装をかわいくしたい」という気持ちがあって
「これ置くのにスペース足りないからこの柱引っ込めるか」って言ってカンナかけ始めるのが建築の安全性を損ねそうだよねと言う話だと思いつつ
鍵括弧の使い方が違法建築な私。
「みちょぱが美観のために柱一本生やしてしまった...」というくらいが見出しを強調に使用してしまったことの例えとしては丁度いい
見た目だけの柱ってのはあるから、狭いからって大黒柱吹っ飛ばしたとかのがいいのかも
@@NT-zf8dx
ちゃうちゃう、見た目だけの柱を入れればいいだけなのに、構造的に貫通してるガチ柱入れてくださいって注文付けた状態よ。 けっかあってるんだわ、喩えは
3:50
CSS(Content Scramble System)暗号はDVDのコンテンツ保護に使われていますね
目次に「ドコーン ...3」とか書いてあるの想像して笑った
水野さんがHTMLとCSSの違いを全くわかっていないにも関わらず、望遠鏡の例えが完璧だったのに心底驚いた。
言われてみれば、ある波長のカラーリングの定義を変えれば、全ての画像で対応してくれそうですね。
自分もHTMLとCSSをなんとなく訳も分からずに今まで書いていましたが、その根っこの意味がいまやっとわかってとても感動しました。
こういう非専門家でもわかるような説明はとてもうれしいし、これからも期待しています。
素直に目次を自動生成させたときに「ドゴーン・・・p.43」みたいのが作られてしまうって言えばいいのに15π ラジアンぐらい撚るから迷子になりがちな堀元氏
目次の自動生成とかの、データの再利用にやり易さは論理と見た目を分ける利点の一つですよね。
H1は大見出しになるので、書籍にしたら、改ページの後にでっかく「第13章 ドゴーン」って感じになりますね。
「ドゴーン・・・p.43」が想像すると笑えるし、論理と見た目を切り分けることの大切さを伝える説明としても的確なんだけど、論理と見た目の分離が分かっていない人はWordの目次自動作成機能も知らないだろうからその説明がピンと来なそうなのが難しいところ。
たとえの出発点が「もしみちょぱさんが自分の店を出すときに、見た目しか気にせず論理を無視してボロボロのお店とか建築しちゃったら面白いなー」という脳内世界から始まっているせいで、人に喋ったときに全然ピンと来てくれていないのがおもしろすぎる
5:11
水野さんの話、全然違う分野から同じ関係性のものを引っ張り出してきて、それがパッと出てくるの本当にすごい。
自分的には、ゆるコンで一番好きな例え。
逆に言えばこれができないとゆる学徒ハウスもうまくいかないかも
みちょぱより遥かにいい例えだった
水野さんがWordについて言われていますが、Wordも本当は、ちゃんと論理構造を指定して書くといいんですよね。そうすれば、テーマを変えても崩れないし、目次の自動生成も思った通りに動く。
アウトライン機能の存在はもっと広く知られて欲しいですねぇ
……TeXでよくね？
今更TeXか？それを言うならHTMLでよくねでしょ？
多分、みちょぱさんに建築をさせた時に、
「壁をレンガ調にしたいから実際にレンガを積んで作った」とか「青色のプラスチックにしたいからプラスチックで壁を作った」みたいに、
『本来なら内装でどうにでもなるからコンクリートで作れるものを、見た目に引っ張られて建材から変えた結果、耐久が悪くなったり劣化が早くなったり、そのコストが嵩んだりしてしまう』という非効率さを、
汲み取ったのですが違うのでしょうか？
違ったらどうしよう
大泉洋が干渉してきたせいで最後一文が「違ったらどうでしょう(スットボケ顔)」に見えてしまった。
多分それは堀元さんの意図するところとは違います。
「noteで強調したいところを太字ではなく見出しで書くような行為は、部屋の内装を良くしたいだけなのに建物ごとリフォームしてしまうぐらいおかしい」
というのが本旨だと思います。で、「その説明にみちょぱを持ってくるの変じゃね？」というのが水野さんの最終的な( 14:38~15:45 あたりの)反応かなと思ってます(そこまではっきり明言してないけど、多分そう)。
失敗たとえの森の植林活動に熱心に取り組まれていますね
視覚障害を持つ方でも見やすいようにブラウザの設定で見出しや本文のフォントサイズやコントラストを変えられるのも
論理とデザインが分離されているおかげ
「文字の見た目を変えるために見出しにする」の例えとして「（みちょぱが）店の内装の見た目を変えるために建築する」がしっくりこない理由の一つは、
前者は論理構造部分を変えていることに気づかないで、知らない内に変えてしまっていることなのに対し、
後者は建築物の構造を変えるということを意図して行っている、という違いがあるためな気がする
まさにそれを言いたかった、というのを言語化してもらえてスッキリしました
初手で「絶対たとえ失敗してるやん」って思ってたら案の定指摘されてて草
文字の強調にh1を使う…
CSSを使わずにtableでデザインする…
サイトリニューアルの時は全てのページを描き直す…
うっ、頭が…20年前の黒歴史が…
何故だ！？何故tableタグを見ただけで俺はページのレイアウトを想像することができるんだ！？
webの世界ではみちょぱが建築する！のソヴィエト構文感
ソビエトロシアではチャンネルがあなたを登録する！
@@takumi443 当局がユーザーを登録してそう
堀元さん説明はスッと入ってくるから例えない方がむしろわかりやすいまである
変な例えより今回みたいに実例をつらつら上げてくれたら十分伝わる
プリンがどうとか大泉洋がどうとかいう話ですね。
今後みちょぱがプリンの食レポやったら笑いが止まらない体になっちゃった。
堀本見 著「失敗例えの森」出せますね
みちょぱに建築の件において堀元さんのお話を自分なりに理解し、イカのように考えました。
みちょぱ建築は「論理構造にアクセスするアプリケーションにおいて、より深い権限を求めたユーザーがアプリケーションの機能要件を超えた操作を行ってしまい、論理構造を深い階層から作り直してしまった」と一般化できるかと思います。
一方、noteで強調のために見出しを用いることは「論理構造にアクセスできるアプリケーションにおいて、ユーザーがアプリケーション機能を想定外の方法で用いた結果、第三者が閲覧した際に歪んで見える構造が完成してしまった」という一例だと思います。（ここまでの認識が異なっておりましたら申し訳ございません）
よって、「noteの見出し機能を強調のために用いてしまう」などの事例に対応する例えとしては
「内装を任されたみちょぱが壁紙をカーペットに使ってしまった」などが適しているのではないでしょうか。
長文コメント失礼しました。
丁寧なイカだ
ある機能を想定された以外の使い方をしているというのはそうなんですが、壁紙もカーペットもあくまで内装のもの、noteで言えば太字とアンダーバーの違いみたいなものだなという印象です
堀元さんは見た目を可愛くしたいあまり、もっと適したやり方が浅い所にあるのに、深い階層(=建築)にまで素人が手を突っ込んだ上に誤ったやり方をしてしまう事を批判しているのだろうなと思います
長文申し訳ないです
@@user-ur1oj6pp4c スプラトゥーンの弊害です申し訳ない
@@user-tn4tw7qr4d 確かに、壁紙とカーペットでは対応が取れてないかもしれません。
「カーペットが欲しかったみちょぱが、ドアを引っ剥がして床に敷いている」とかでしょうか。
水野さんの望遠鏡の話はすぐにピンときました。
WordにはスタイルというCSSみたいな機能があって書式をまとめて管理する事ができます。
そのスタイルのセットをデザインとして登録できるのでデザインを切り替えると書式をガラッと変更できます。
文書の構造はアウトラインで管理できるのでHTML+CSSとほぼ同じことができます。
ウェッブ望遠鏡の例えめっちゃいいですね
3:51 水野さんが指摘したのはDVDのコピーガードに用いられる暗号化技術のCSS (Content Scramble System) のことでは？ さすが博識ですね
分かります。みちょぱに木材担がせて、なんで柱が真っ直ぐにならないんだろうと言っているの、時々見かけます。
書式設定されたところにプレーンテキストをあてることを「流し込む」っていう言い方好きです
DTPの人の言い方の気がする
1.〇〇とは何か
2.〇〇の使い方
3.注意点
4.ドコーン！！！
「論理と見た目の分離が大事」、言いたいことはよくわかるのだけど、これって論理？
「構造と見た目」の方が合ってる気がする
実はWordにも、文書構造と見た目を分離できる機能が付いているのですが、
右上に3種類しか並んでないためか影が薄く、編集のUIも使いにいためか、たぶん誰も使っていないです。
待ってました。「みちょぱの違法建築」一番好きなコンテンツです。
ゆるコンピュータ科学ラジオの中でもベストです。
水野さんがどんどんコンピュータに詳しくなっているのもたまらんです。
HTML+CSSでできているのがワールドワイドウェッブ望遠鏡ということか(納得)
「みちょぱ」って名前だけ暗記したけど実は何者か知らないので、フワちゃんで想像してる
建築というより、「みちょぱに、大きなハンマーを持たせてはいけない」
みちょぱ「可愛くしたいから、この柱を大きなハンマーで、ドカーンッ！！」
構造と見た目の分離は、聞きなじみありましたが、わかりやすいように言い換えてて素敵でした。ゆるWebラジオ面白いです。
25年くらい前から趣味でいろいろなホームページを作っているのですが、最初はCSSなんて存在していませんでした。それが「HTMLで直接フォントサイズを指定しない方がいい」みたいなことが言われ始めて、よくよく調べてみたら「CSSを使え」ということでした。個人的には結構な革命でした。その次はJavascriptですかね。いまだに評価が定まっていないような気がしますが、少なくともかなり便利になったことは事実なので、賢い人が改良を続けてくれればうれしいです。これらによってHTMLで書くもの自体はものすごくシンプルになったので構造そのものは見やすくなったと思います。企業が最初は全部自分でやっていたのに、ちょっとずつ外注を始めたら組織としてかなりすっきりしたという感じで解釈しています。蛇足ですが「Javascriptはプログラム言語なのか問題」もありますよね。
ゆる言語学ラジオの珍ことわざ回見たあとだと味わい深い
実践編楽しみ〜！
既に出てますが、グラフで例えるのはわかりやすいですね！数値が同じでも目盛りを変えたり、棒グラフを円グラフにしたりできますね
何故みちょぱをチョイスしたのか教えてくれ…
UXもやってるソフト開発者の身からすると、「太字にしたい」という欲求に性格に応えられてないサービスに問題があるのであってそれを「使い方間違えてるよ」って指摘するのはクリエイターの欺瞞だなぁと思いました。
ユーザーはなんとか自分のやりたいことを達成しているわけで、それを使い方が悪いと揶揄するのは押し付けっぽく感じます。
あと、HTMLとCSSの喩えって建築に喩えるのはよくわかります。
というのもCSS自体も空間的な論理構造もってるしHTMLも描画順という構造を持っているのでガワ(建築で言うと間取りとかの大まかな建物しての構造)とレイアウト(内装とか)っていうのがなるほどなって思いました。
冒頭に「沢マン」が出てきただけで嬉しい。 ゆる言語学ラジオでは堀元さんが言語に詳しくなってる気がするが、こっちでは水野さんのダメっぷりがどんどん明らかにされていってる気がする。
HTML が表現するのは論理（Logic）ではなく文書構造（Structure）なのでそこでとっ散らかっている感じしますね。むしろ論理の部分は JavaScript が担当していて、 Web ページは文書構造と装飾と論理を担当するそれぞれの仕組みが組み合わさってできているという説明のほうが混乱がない気がします。（JavaScript の話は今後の回で出てくるのかもですが）
そうですね。
＋動画内で建築に喩えてもいるので、より構造という表現の方が良かったと思います。
「この店をかわいくしたい！ と思った結果、柱を全て切り捨ててしまったので、ビルが崩壊した」といった違法改造の方が例えとして分かりやすかったかも...
Word も「スタイル」と「スタイルセット」や「テーマ」で見た目と構造を分離できますね。
Word のスタイルには「標準」「表題」「副題」「見出し1」「見出し2」「引用文」などがあり、直接文章にデザインは指定せずにスタイルだけを指定するようにします。
そこにスタイルセットやテーマで全体のデザインを決め、最終的に各スタイルのデザインを細かく指定することで見た目が出来上がります。
特にスタイルセットで一気に全体の見た目が変化するのは見た目にも楽しいですね。
みちょぱ見た目に反して割と気が回るタイプなイメージだったから、そこもあんまりハマってない感じがする(n=1)
キャラ的にフワちゃんとかがいい気がしました
新ミーム「堀元にたとえをさせるな」を流行らせましょう
みちょぱさんはああいうキャラですがただのアホではないと思うので、「可愛いお店を建築したい」と彼女が本気で思ったら、普通に建築について真面目に勉強した上で完成した図面を実務経験のある建築士の方にちゃんと監修してもらうと思います。
みちょぱに建築を頼む → 堀元に例えてもらう
15:50 『どうやら俺の~(略)~低いらしい』について
みちょぱの違法建築も大泉洋の産地偽装も、
ユーモアありつつ分かりやすくて良かったです！
（プリンはプリンを脳内で大量生産しただけだったけど！）
この動画で
「堀元見がある事柄・物を別の物事にたとえる」にも
たとえられますよっていう高度な自虐ネタ
wordもexcelもデータの内部構造はxmlになってる
ゆるコンピュータ科学ラジオでの堀元さんの例え、全部失敗してる気がするw
大量の大泉洋がみちょぱのプリンを食ったと覚えておこう。
ウェッブ望遠鏡は伝わりづらいけど例えとしてはあってますよね。
圧倒的みちょぱへの風評被害
WordでもスタイルがあってCSSと同じようなことができるので、使ってくださいね
TeX/LaTeX が取り上げられなかったのは残念
水野さんお馴染みのアレ……あ〜論文ね！
って思ってたら出なかったので、ちょっとびっくりしちゃいました。
LaTexがなければ卒論も修論も書けていなかったので、大変お世話になりました…
HTML + CSS書かないまでも、WordやGoogleドキュメントでも構造と見た目は分離できる機能は当然あるんだよな。
会社の文書のほとんどがこれが使われてないから、見た目も分かりにくいし、そもそもどうやってメンテナンスする気なんだろうと思ってしまう。
みちょぱさんのインスタグラムから飛んできました。
電子版OED に使われた言語SGMLのページを見てみると、
プレーンテキストでありながら、構造化されたデータを記録できるため
特定のソフトウェアのバージョン更新などに振り回せずに扱えるという利点があり
多用される様になったらしいですね。
ゆるコンピュータ科学ラジオへの罵倒
「プリン」「みちょぱに建築をさせるな」
以前2chのスレであったんですが、Excelの資料のグラフを図形の挿入でチマチマ作ってるっていう。しかも同じ事したことあるっぽいレスがいくつもついて。そんな話を思い出しました。
HTMLは原作者
CSSは編集者
って例え使えそうだなぁ、と思いました。
パワポのスライドマスター機能を理解できてればHTMLとCSSの関係も理解しやすそうですね。ちょっとズレてる気がしなくもないですが。
建築士 効率利便安全性重視
設計士 合法な範囲で見た目優先
こんなイメージがあるのでプロの建築家もそこまで厳密にはやってないですよ
お洒落さとその他の建物としての完成度はトレードオフになるので常に悩みの種です
11:50
プログラマーとして「副作用」って言葉は日常語に混ぜて使ってほしくない気持ちがある。
googleドキュメントで、先に文章の見出しに「見出し1」を設定しておいて、あとから文章中のすべての「見出し1」のフォントサイズを一括で変更できる、みたいな例も卑近で分かりやすいかなと思った
このシリーズ楽しいなあ
みちょぱの例えわかりやすかったです。もうすでにそんなことわざがありそう。
論理と見た目でいうと、ワードにはスタイル機能ありますが、あれを使ってくれと何度も思いますね。
一つ一つフォントサイズ変えて、太字にしてとか、作業したんだろうな、
前のページに戻ってフォントサイズとフォントを確認したりしたんだろうな、とか
見た目は後からでいいのにな、など思ったりしています。
これはワードの中だけでの話ですが、どの世界でもありそうな気がしますね。
ゆる学徒ハウスも視聴していて、堀元さんの声をたくさん聴いているからか、
この回、めっちゃ楽しそうだし、喉が大変そう。
プリンに棒をかざすぐらいよー分からんかったｗ
ゆるコンピュータ科学ラジオでは、プリンにマッチョな漢がやってきて棒で擦ってくるし、みちょぱは違法建築する。
大泉洋は許された
ゆるコンピュータ科学ラジオからの出典だけで失敗例えの森が出来る日も近い。
「強調のつもりで見出しを使うな」の件、wikiの編集でもめちゃめちゃあります。
wikiは意欲がある人全員に対して編集権限が開放されているケースが大半なので、他人が編集した箇所に対してあれこれするのが非常に面倒くさい。
例えがピンとこないと思ったら、アフリカのみちょぱで例えてたんですね。ずっと日本のみちょぱだと思ってました。そりゃあピンとこないはずですね。
ここにドアがあったら可愛いからただの壁に飾りでドア付けまーす
みたいな話だと思うんだけど、みちょぱがノイズ過ぎる
みちょぱ、神業のドリフト駐車とか出来るし、建築資格を持ってたりしてもおかしくない
ギャルっぽい若い女性がテクノロジーと縁遠いと思うのは最近だとかなり当てはまらない
「みちょぱが柱を折る」に例えられるなって思って聞いてたら、コメントに既にあった
堀元さんは水野さんの難解な説明を喩えで分解するのは悪くないのに、自分で説明しやすいことを喩えるとポンコツっぽくなるのは、対象が自分のよく知ってることなのが逆に働いてるのかなー
部屋の仕切りを作りたい
「ここからここまで内壁ね、厚さは５０ミリ」
「柱を隙間なく並べて。太さは５０ミリ」
をで代用してる人も似た話かな？
つい先日堀田さんの英語史動画でGrobal textという物を知りました。タイムリーな話題で次回作も楽しみにしてます
自分の思いつく例えは、トリックアートのアーティストに原寸大のゴジラを作らせるかな～？
データベースとの親和性は次回かな？
辞書DBからマークアップ出力
マークアップから辞書DB
構造化されている利点。
建築士とみちょぱの喩えだと「Noteの文章を書いた人と別人が見た目を整えるために見出しを使う」に対応してしまうのでしっくり来ないのは感じますね。
内装に凝りすぎて、柱を取っちゃった、みたいな話ですよね。
CSSからウェッブ望遠鏡の配色を連想するのは、発想が柔軟だ。
3:52
CSSと聞いて暗号を連想するってことは、まさか水野さんはDVDのアクセスコントロールとか違法素数とかを知っているのか?
マークアップ言語の世界ではテセウスの船は否定されそう。見た目一緒でも本質が別物になっちゃうことがあるから……
マークアップ言語は、辞書はもちろん「電子書籍そのもの」も記述するのに用いられていますね（リフロー型）。
背景色と文字色、フォントや文字の大きさを変えてそれぞれの人が読みやすくする、まさに「構造は同じで、各人が後で見た目を変更する」という仕組み。
そもそも電子書籍（EPUB）の規格を定めているのはW3CというHTMLなどのマークアップ言語に勧告を出している標準化団体。
このチャンネルリスナーの何パーセントがみちょぱさんを認知しているのか知りたい所です
さすがにそこまで俗世から離れている人は多くないのでは…？
監修者の先生でも多分認知されてると思いますし
HTMLのすごいところ（論理）と、みちょぱの例え（見た目）が分離されていることを願う・・・
お二方は頭のいいすごい人の前にいい芸人さんだよ……。
みちょぱの例え凄いなるほどになりました。いいと思うけどなぁ
現在はHTML、CSS、JSを統合する流れもありますね〜(賛否はありますが)
いわゆるフロントエンドにおけるコンポーネントは、これを小さくまとめた要素をたくさん作る感じですかね
文書ではなくアプリケーションを作る上では、こっちの方が色々と都合が良いんですよね
水野さんが言ってた、望遠鏡の画像の色の話や、宇宙の画像にはデザイナーがいるという話が「NHKサイエンスアイ 宇宙デジタル図鑑」に載ってて驚いた覚えがある。
星の輝きを表す十字の輝線?みたいなのも、星がキラめいてるから写ってるって訳じゃないという話もびっくりした。
ExcelやWordも保存されたファイルはマークアップ言語（XML）
名詞を強調するために「」や ”” で囲うのも、やってること一緒ですね
デザイン重視の事故物件ってたまにあるよね
ゆる言語学ラジオでシリーズとして扱った……『た』か！？
OEDの項目のタグの意味を言うのかしら？
AtoZにも出来るし、年代順にも並び変えられると