class.exe

電動昇降デスクを組み立てました。フレームと天板を別々に注文しています。

フレームはFlexiSpot E3です。

https://www.amazon.co.jp/dp/B074897V3X/

天板はマルトクショップのメルクシパイン集成材です。25mm x 700mm x 1700mmのサイズにしたので広々です。

https://shop.woodworks-marutoku.com/

BudouX¹をつかって見出しに<wbr>を挿入してみました。

見出しを分解するコンポーネントを用意しました。

import Link from 'next/link'

import {loadDefaultJapaneseParser} from 'budoux'

const parser = loadDefaultJapaneseParser()

function Breakdown(title: string) {
    return parser.parse(title).map( text => {
                return <>{text}<wbr/></>
            })
}

export function Heading({props}: {props: any}) {
    return (
        <h2>{Breakdown(props.data.title)}</h2>
    )
}

Footnotes

1. https://github.com/google/budoux ↩

BudouX¹をつかって文章中に<wbr>を挿入してみました。このブログの記事はMarkdownで書いていて、remark-rehype²で変換しているので拡張するためのhandlerを用意します。

このhandlerはBudouXをつかってParagraphのtextノードに<wbr>を挿入します。

import {all} from 'mdast-util-to-hast'
import {u} from 'unist-builder'
import {loadDefaultJapaneseParser} from 'budoux'

const parser = loadDefaultJapaneseParser()

export function rehypeBudouxHandler(h, node) {
  const children = []
  all(h, node).forEach(child => {
    if (child.type == 'text') {
      parser.parse(child.value).forEach(text => {
        children.push([h.augment(node, u('text', text)))
        children.push(h(node, 'wbr'))
      })
    }
    else {
      children.push(child)
    }
  })
  return h(node, 'p', children)
}

このhandlerをremark-rehypeのオプションに指定します。

const processor = unified()
  .use(remarkParse)
  .use(remarkRehype, {
    handlers: { paragraph: rehypeBudouxHandler }
  })
  ...

たとえばこの文は下記のように変換されました。³

root[1] (1:1-1:23, 0-22)
└─0 element<p>[10] (1:1-1:23, 0-22)
    │ properties: {}
    ├─0 text "たとえば" (1:1-1:23, 0-22)
    ├─1 element<wbr>[0] (1:1-1:23, 0-22)
    │     properties: {}
    ├─2 text "この" (1:1-1:23, 0-22)
    ├─3 element<wbr>[0] (1:1-1:23, 0-22)
    │     properties: {}
    ├─4 text "文は" (1:1-1:23, 0-22)
    ├─5 element<wbr>[0] (1:1-1:23, 0-22)
    │     properties: {}
    ├─6 text "下記のように" (1:1-1:23, 0-22)
    ├─7 element<wbr>[0] (1:1-1:23, 0-22)
    │     properties: {}
    ├─8 text "変換されました。" (1:1-1:23, 0-22)
    └─9 element<wbr>[0] (1:1-1:23, 0-22)
          properties: {}

以上です。こちらの記事がhandlerを作るための参考になりました。

Remark で広げる Markdown の世界

mdast-uttil-to-hastパッケージにある各handlerの例も参考になりました。

mdast-util-to-hast/lib/handlers at main · syntax-tree/mdast-util-to-hast

Footnotes

1. https://github.com/google/budoux ↩

2. https://github.com/remarkjs/remark-rehype ↩

3. 変換後のHastを表示するためにunist-util-inspectというパッケージを使っています。 ↩

VRoid Studio ベータ版で作ったVRMアバター¹をUnityで歩かせてみました。

こちらのYouTubeのビデオが参考になりました。

Footnotes

1. 服はBlenderでちょっと加工してます。 ↩

このブログをNext.jsで作り直しました。また、これまでのサーバーだとなぜかProduction Buildがこけるので、VPSやOSも含めて環境を一新しました。

サーバー: さくらのVPS -> さくらのVPS
さくらのVPS バージョン: v3 -> v5
リージョン: 石狩第1ゾーン -> 石狩第1ゾーン
CPU: 仮想3Core -> 仮想2Core
メモリ: 2GB -> 1GB
ストレージ: HDD 200GB -> SSD 50GB
OS: CentOS Linux release 7.9.2009 (Core) -> Ubuntu 20.04.3 LTS (Focal Fossa)

Ubuntu 20.04はISOインストールしました。インストール直後のVNCコンソールはファイルシステムのチェックが表示されています。

/dev/vda5: recovering journal
/dev/vda5: clean, 66234/3244032 files, 1234222/12975360 blocks

ログイン画面ではなかったので、Ctrl+Alt+F1で仮想コンソールを出してログインできました。