HTML5が制定されてもう数年たち、世間では5が主流となってきていますが、皆さんは5になってからブロックレベル/インライン要素が廃止されたことに気づいているでしょうか?

※ブロックレベル/インライン要素のルールはざっくり言うと、「インライン要素の中にブロックレベル要素を入れてはいけない」というものです。

その代わりにコンテンツ・モデルという概念が作成されました。

ちなみに自分はブロックレベル/インライン要素が廃止されたのは知っていましたが、このコンテンツ・モデルという単語は知りませんでした(内容はなぜか把握していたけど)

これは「あるコンテンツの中にはこのコンテンツしか配置できない」「あるコンテンツの中にはこのコンテンツは配置してはいけない」というルールです。

この「コンテンツ」とは、ざっくりカテゴリーとしてタグが分類されています。

カテゴリー一覧

コンテンツ名 意味 タグの一部
メタデータコンテンツ 主にhead内に記述するサイトの情報を示すタグ meta, link, script, title
セクショニングコンテンツ 文章の塊を示すタグ section, article, aside, nav
ヘッディングコンテンツ 見出しのタグ h1,  h2
フレージングコンテンツ 段落などに含まれるタグ(従来のインライン要素がほぼ含まれる) a, span, button, small
エンベッディッドコンテンツ 主に外部コンテンツを指すタグ img, audio, video, canvas
インタラクティブコンテンツ 主にアクションを発生させられるタグ a, input, button

※ちなみにフローコンテンツというものもありますが、これにはほとんどのタグが含まれます。

見た感じHTMLの基本概念である「文章構造」にタグを振り分けたって感じですね。

実際の書き方は?

そして以下がNGパターンとOKパターンです。

NG
<span>
  <div>
      <p>吾輩は猫である</p>
  </div>
</span>


まぁ普通に気持ち悪いですね。昔のブロックレベル/インライン要素の概念でもspanの中にdivが合ってだめですし、コンテンツモデルとしても文章の一部(span)の中に塊(div)や段落(p)があって構造がおかしいです。

OK
<div>
  <p>吾輩は<span>猫</span>である</p>
</div>

まず塊(div)は外へ、中には段落(p)を配置し、一部の文字を囲む(span)。

コンテンツモデルとしての文章構造もしっくりきますし、昔のブロックレベル/インライン要素としてもおかしくはないですね。

結論

厳密にはブロックレベル/インライン要素の時代と考え方は違いますが、基本的には「文章としておかしい構造を書かない」ということを徹底すればいいと思います。

てかこれ、ブロックレベル/インライン要素時代でも普通意識して書いてると思うので、ちゃんともとから文章構造を意識して作っていれば特にコンテンツモデルができたからって修正する箇所は少ないんじゃないかな……

余談

ちなみにこのブログはそんなこと知らない時期に改修したままなので、html構造はやばいです。

いきなりh4とかで始まってたりするからね。

今nuxt.jsでフルリニューアル作業をしているので、今月中には切り替わると思います(記事のURL構成変わるからリニューアル前には記事増やしたくなかったけど仕方ない)

近々このブログをリニューアルしますが、それまでの間最近作ったツールなどを掲載しておく場所がなかったので、いったんこちらの記事内に一式あげておくのです。

※ちなみに新ブログはこのサイトのサブドメインにnewをつければ一応見れたりする

Webサービス・ツール

ONE SNED MESSAGE

https://toolbox.shigurezuki.jp/osm/

時間・回数を指定して、上限に達したらデータを削除するテキスト及びファイルの共有サービスです。

LEET CONVERTER

https://toolbox.shigurezuki.jp/leet_converter/

leet変換するツールです。

Chrome 拡張機能

base64 coder

https://chrome.google.com/webstore/detail/mipjflgoedagjnjgjeikpkfaebbbhccc/publish-accepted?authuser=0&hl=ja

base64と画像とテキストを相互変換する拡張機能

OGP Previewer

https://chrome.google.com/webstore/detail/dbokgfimfjagoijkjhjegicgcholleon/publish-accepted?authuser=0&hl=ja

表示しているタブのOGP情報を確認する拡張機能

node modules

markdown-it-custom-short-codes

https://github.com/furutsubaki/markdown-it-custom-short-codes

markdown-itのプラグイン。markdownに記述された `[[shortcode id=value]]` 形式のショートコードを任意のhtmlに変換するサポートプラグイン

Windowsツール

VOICEROIDからYMMにファイルを渡すだけのツール

https://shigurezuki.jp/view/voiceroid_to_ymm_tool

VOICEROID EXで調整した声をワンキーでゆっくりムービーメーカーに取り込ませるボイロ実況動画作成支援ツール

YMM用ファイルから立ち絵を作成

https://shigurezuki.jp/view/ymm_1file_convert

ゆっくりムービーメーカー用に作られている立ち絵素材を任意の組み合わせで合成して1枚の画像ファイルに出力するツール

Freo非公式プラグイン(公式プラグインの改造版)

メディア登録(タグ機能追加版)

https://shigurezuki.jp/view/207

メディア登録プラグインにタグ機能を付与したもの

新着ページ表示プラグイン改良版

https://shigurezuki.jp/view/page_recently_kai

新着ページ表示プラグインで、取得対象を選択できるようにしたもの

検索プラグイン改良版

https://shigurezuki.jp/view/search_kai

検索プラグインにワード・ラジオ検索の選択肢を追加、検索対象項目の追加をできるようにしたもの

先日chromeの拡張機能を作ろうとしてたらWebpackのbuildに失敗したので備忘録を兼ねて……

エラーと原因

エラーは以下の通りでした。

ERROR in ./src/App.vue
Module Error (from ./node_modules/vue-loader/lib/index.js):
vue-loader was used without the corresponding plugin. Make sure to include VueLoaderPlugin in your webpack config.

どうやらvue-loaderを使用する場合はプラグインとして呼び出せってことらしいです。

ちなみにこのへんにちゃんと書いてありました(´・ω・`)

解決

公式のとおりに以下のように設定して解決です

// webpack.config.js
const VueLoaderPlugin = require('vue-loader/lib/plugin');

module.exports = {
plugins: [
  new VueLoaderPlugin()
]
}

おまけ

自分は新規でなにか作るときって、たいてい過去に作ったものをベースにいらないものを削除して、モジュール等を最新に更新して作り始めるので、こういうバージョンアップの影響でエラーに出くわすことが多いのです(´・ω・`)

まぁ手っ取り早く作れるので、今後もこの方法で新しいのは作っていくと思いますけどね。

ubuntu 20.04 LTS Serverが2020年4月24日にリリースされました。

現在ブログ等で使用しているvpsのubuntuが19.04なので、今回はそれをアップグレードした備忘録を残しておこうかと思います。

なお、SSH接続でのアップグレードは不備が発生する可能性があるので、コンソール接続でのアップグレードをおすすめします。

アップデートマネージャーを導入

ubuntuのアップデートを行うためにアップデートマネージャーをインストールします。

過去にアップグレードをしている場合はすでに導入されていると思います。

$ sudo apt install update-manager-core

19.04を19.10にする

まずは`20.04LTS`へアップデートできるのは`18.04 LTS`もしくは`19.10`となっていますので、現行バージョンを19.10の最新状態にし、不要なパッケージ等は削除しておきす。

$ sudo apt update
$ sudo apt -y dist-upgrade
$ sudo apt -y autoremove

アップデートマネージャーの設定を確認します。

設定ファイルは`/etc/update-manager/release-upgrades`です。

まずはLTSではなく19.10へアップデートするため、設定値は`normal`にします。

- Prompt=lts
+ Prompt=normal

次に更新があるか確認を行い、19.10が見つかった場合更新します。

$ sudo do-release-upgrade -c
$ sudo do-release-upgrade

必要に応じて`y`や`Enter`を使用して進めてください。

アップグレードが完了したら再起動をしてバージョンが19.10になっているのを確認してください。

19.10を20.04 LTSにアップグレード

最後に20.04 LTSにアップグレードを行います。

アップデートマネージャーの設定を`normal`から`lts`に変更します。

- Prompt=normal
+ Prompt=lts

その後、同様に更新を確認して20.04 LTSが見つかったら実行します。

$ sudo do-release-upgrade -c
$ sudo do-release-upgrade

完了後、再起動して20.04 LTSになっていることを確認してください。

ちなみに自分の環境では各アップグレードに30分ほど要しましたので、比較的アクセス数の少ない時間にやるのをおすすめします。

余談

まさかブログの最終投稿が1年以上前だったのに驚愕している……

現在ブログをfreoのオリジナルテンプレートからNuxt.js + directus(ヘッドレスCMS)にリニューアル作業を行っているので、夏前にはたぶん切り替わっていると思います。

ここ数年使ってたオフィスチェアが色々死に始めたので、格安のゲーミングチェアを購入しました。

買ったのはこちら

IODOOS F-01CAA

格安とは言ってもゲーミングチェアとしての話で、普通に1.5kしますからね。

archive


×

ログイン