Skip to content

Latest commit

 

History

History
262 lines (161 loc) · 7.56 KB

MEMO.md

File metadata and controls

262 lines (161 loc) · 7.56 KB

jxck.io

blog.jxck.io

HTML

CSS

  • 基本は single colmun layout
  • dark mode 対応していたが、あまり気に入らなかったので一旦取り下げ

JS

  • 基本使わない
  • reporting のみ
  • 将来的には消したい

Image

  • 基本は SVG を使う
    • 基本は手書き
    • 複雑なのは Cacoo で
  • ラスタは WebP に
    • フォールバックとして jpeg/png/gif(anime)
  • picture タグで出しわけ
  • avif 対応検討中

Video

QuickTime でとった screen record なら mov を吐くので、 mp4/webm に変換

# メタデータを消し、 frame rate を 24 にし、Audio を消す
$ ffmpeg -i video.mov -map_metadata -1 -r 24 -an video.webm
$ ffmpeg -i video.mov -map_metadata -1 -r 24 -an video.mp4

image の記法で video に展開される。

WebFont

  • 鉄下駄として日本語 WebFont を導入
    • Noto Sans CJK JP と Noto Sans Mono CJK JP
    • emoji は入れてない
    • diet
      • entries 以下のファイルを全部みて、使われている文字を列挙
      • それを元に subset 化した woff2 を生成
    • font-display: swap で表示
  • していたが、もはややることは大体やって「日本語 Web フォントフルセット」は諦めたほうが良いと判断。対応もやめた。

iframe

  • 鉄下駄として Youtube の iframe を embed
  • Feature Policy などを調整

Analytics

  • 鉄下駄としてアナリティクスを導入
  • これを入れても早い状態を維持したい
  • CSP なども調整

basic flow

  • 原稿を md で記述
  • entries 以下に日付フォルダを作りそこに置く
  • make build で全体の変換や圧縮のなどを一式行う
    • これで build 結果をコミットしたら終わり
  • make preview
    • markdown 変換だけを行う。テスト用。

md

以下のフォーマットで始める。そうでなければビルドが通らない。

# [tag][tag2] タイトル

## Intro

簡単なイントロ
  • tag: タグ単位で記事をまとめたリンクを生成するために必要。だいたい 1~4 程度
  • Intro: 必ず最初にくる、これが index ページの見出し、 description 要素、 RSS の概要などに使われる
  • 本文: 以降は普通の markdown で記述

文章には以下のルールを適用、別途自分のコマンドが用意してあるが dotfiles に入ってるのでここには含めない。

  • 全角記号は半角にする: singler
  • 全角と半角の間はスペース: spacer (ただし除外するファイルもある)
  • 改行とか細かいルール: format.rb (ただし除外するファイルもある)
  • いずれも Makefile に入ってる

ただし markdown は以下に注意

  • 画像の URL は最後に #120x120 のように width/height を入れる(AMP 用)
  • サンプルコードは外部ファイルを読み込める(独自)

その他細かい挙動は最初のエントリをテストエントリにしているのでそこで確認。

https://blog.jxck.io/entries/2016-01-27/new-blog-start.html#test-section

パーサは独自実装

画像

画像は以下のように埋め込む。

alt, title, 画像のサイズがないといけない。

![alt](image.png#120x120 "title")

また、この md は <picture> に展開され、可能であれば WebP で配信する。

なので、 imgage.webp を作って置いておく必要がある。

これは make webp でできる。

だいたい q=40 でやっている。

$ cwebp -q 40 image.png -o image.webp

さらに gulp から gulp-image を叩いて最適化も行っている。

これは $ gulp で叩けるが make build に入ってる。

圧縮

html/css/js/png/jpeg/svg ファイルは全て圧縮する。

ただし webp/rb/md/woff2 などは圧縮しない。

また、圧縮方式は gz/br であるが、モダンなブラウザはほとんどが br に対応しているため、以下のような方針をとる。

  • .br は brotli コマンドで事前に作る
  • .gz は h2o のオンデマンドで作る

これは make comp でできるが、 make build に入ってるため、もろもろ準備できたら最後の build で実行。

podcast

https://github.com/Jxck/jxck.io/tree/master/mozaic.fm

基本は blog と同じように作っている。

basic flow

  • 編集した mp3 を生成
  • 原稿を md で記述
  • episodes 以下にエピソード番号のディレクトリを作りそこに置く
  • make podcast で html が生成される
  • make podcastfeed で RSS が更新される
  • make build で全体の変換や圧縮のなどを一式行う

md

以下のフォーマットで始める。

---
type: podcast
tags: ["tag"]
audio: https://files.mozaic.fm/mozaic-epXX.mp3
published_at: 2022-02-22
guest: [@gest](url)
guest: [@gest2](url)
---

# epXX XXXX

## Theme

簡単なテーマ


## Show Note
  • tag: タグのページ、ただし今はタグページを作ってない
  • Theme: これが index ページの見出し、 description 要素、 RSS の概要などに使われる

AMP は吐かない。

mp3 のプレイヤーは mozaic-player を作っている。

mp3

  • 48kbps (mono) 96kbps(stereo)
  • 44.1kHz (joint stereo)
  • mp3

で編集したものを吐く。

ID3 Tag

mp3 には ID3 というメタデータを付与できる。

ID3 には複数のバージョンがありおおよそ以下のようになっているらしい。

変遷は wikipedia にまとまっているものが参考になる。

これを元に、元も普及しているらしく、画像を付与できる v2.3 を採用。

ツールは、 GUI ではなく、ビルド時にメタデータを付与できるように CLI を探し、 Mac/Linux 両対応で使いやすい eyeD3 を採用した。

HTML/RSS をビルドするときに収集するメタデータを用いて、各ファイルに対するコマンドファイルの shell を精製し、それを必要に応じて(通常は公開時)に実行する。

eyeD3 --remove-all ../files.mozaic.fm/mozaic-ep0.mp3

eyeD3 --title "ep0 introduction of mozaic.fm" \
      --track 1 \
      --artist 'Jxck' \
      --album 'mozaic.fm' \
      --genre 'Podcast' \
      --add-image ./www.jxck.io/assets/img/mozaic.jpeg:FRONT_COVER \
      --to-v2.3 \
      ../files.mozaic.fm/mozaic-ep0.mp3

一度全部消して、最小限のメタデータを付与。 track は sideshow の分ずれるので、エピソード番号と同じではなく、 1 オリジンで最初からのファイル数。