前提条件

• Labelにテキストは設定している
• フォントは指定していない

症状

• UIToolkitでLabelを配置してもテキストが表示されない
• Labelの高さ・幅が0になってしまう
• UI Builderではちゃんと表示される

結論

TSSを定義・設定していたが、UnityDefaultRuntimeTheme を継承していなかったため。

UnityDefaultRuntimeThemeにはLabel型に対してデフォルトの -unity-font-definition が設定されているので特に何もせずとも表示されますが、独自にTSSを作成するだけだとデフォルトの設定がなくなるためにラベルが表示されなくなるようです。

独自のTSSを作成する場合は、-unity-font-definitionを設定するか、Inherited Themes に（RuntimeでUIToolkitを使う場合は） UnityDefaultRuntimeTheme を設定しましょう！

作ったもの

OSSとしてGitHubで公開してます。

きっかけ

SwiftのLinterは、SwiftLintほぼ一択なのが現状です。SwiftLintに独自のルールを追加したい場合、Swift Custom RulesとRegex Custom Rulesの2種類の方法があります。

Swift Custom Rules

Swift Syntaxを用いてルールを作れます。Swiftで表現できるため複雑なルールを実現できますが、Bazelでビルドする必要があります。

Regex Custom Rules

正規表現を用いてルールを作れます。 .swiftlint.yml に書き加えるだけで手軽にルールを追加できますが、任意の正規表現にマッチした箇所に警告を出す、という仕組みなので複雑なルールを実現するのは難しいです。

ある程度複雑なルールを実現するにはSwift Custom Rules一択ですが、Bazelでビルドする必要がある都合上、環境構築がやや面倒です。個人用や社内独自のコーディングルール用にカスタマイズすることを考えると、ルールはサクッと追加できるのが望ましいため、いっそのこと拡張しやすいようなLinter自体を自作することにしました。

Linterを作る

Linterと呼べるようなものを作るには、ざっくり以下のような機能が必要です。

• CLIの引数として外部から値を設定できる
• ソースコードの構文解析
• エディタ上で任意の行に警告を表示する

これらを実現するためにはどうすれば良いかをざっくり解説します。

CLIの引数として外部から値を設定

ArgumentParserを用いることで簡単に引数を受け取るCLIを作ることができます。

ArgumentParserはプロパティラッパーを使って機能を実現しています。引数にしたいプロパティに対して@Argument, @Flag, @Optionといったプロパティラッパーを付与することでコマンドとしてビルドした際に引数として受け取れる値になります。

import ArgumentParser

@main
struct FooCommand: ParsableCommand {
    @Flag(help: "Include a counter with each repetition.")
    var includeCounter = false

    @Option(name: .shortAndLong, help: "The number of times to repeat 'phrase'.")
    var count: Int? = nil

    @Argument(help: "The phrase to repeat.")
    var phrase: String
}

ソースコードの構文解析

Linterとして動作するためには、コマンド実行時にLint対象のソースファイルを構文解析する必要があります。

これはSwiftSyntaxを用いることで簡単に実現できます。本記事ではかなり簡単に解説するので、SwiftSyntaxについての詳しい解説を聞きたい人は以下の資料・動画などを見ると良いかなと思います。

https://fortee.jp/iosdc-japan-2023/proposal/da53c5df-a243-46b1-a3e2-c35dd9fdda11

SwiftSyntaxで何ができるかを簡単にまとめると、以下の2つです。

1. ソースコードのオブジェクト化
2. ASTの探索

ソースコードのオブジェクト化

ソースコードはAST（抽象構文木）というものに変換できます。Swift Syntaxは、ソースコードを元にして、ASTを表現したオブジェクトを生成できます。HTMLを元にDOMを生成するのと同じです。どのような構造のオブジェクトが生成されるのかはSwift AST Explorerを使うと分かりやすいと思います。

ASTの探索

SyntaxVisitorの visit() を用いることで、ASTの各ノードを順番に探索することができます。引数の node の型で任意の種類のノードのみ探索できます。

final class MySyntaxVisitor: SyntaxVisitor {
    override func visit(_ node: 探索対象のノード型) -> SyntaxVisitorContinueKind {
        // 引数のnode型のノードに到達した場合にしたい処理を書く

        // 子ノードの探索をする場合
        return .visitChildren

        // 子ノードの探索をしない場合
        // return .skipChildren
    }
}

// 探索開始
MySyntaxVisitor(viewMode: .all).walk(探索対象のSourceFileSyntax)

SyntaxVisitor の代わりにSyntaxRewriterを使うことで、探索しているASTの書き換えを行うことができます。

final class MySyntaxRewriter: SyntaxRewriter {
    override func visit(_ node: 書き換え対象のノード型) -> 書き換え対象のノード型 {
        // ~nodeを加工する~

        return super.visit(加工後のnode)
    }
}

// 書き換え
let rewrittenAST = MySyntaxRewriter().visit(packageSwift)

エディタ上で任意の行に警告を表示する

Linterというツールの性質上、エディタ上にルールに違反している箇所を表示できると便利です。Xcode上で特定の行に警告を表示するのは意外と簡単で、以下のフォーマットでprintするようにするだけです。

// 警告
print("{/path/to/your/file}:{line}:{column}: warning: foo warning message")

// エラー
print("{/path/to/your/file}:{line}:{column}: error: foo warning message")

ファイルパス:行:文字: warning: 出力したいメッセージ で警告を出せる感じですね。 warningを error に変えると赤いエラー表示として出力されます。

まとめ

かなりざっくりとした説明になってしまいましたが、Linterの基盤となる機能の解説でした。今後、余裕ができればconfigファイルの読み込みや、ルールの抽象化、 disable:next などによる部分的な無効化・有効化などについても解説できればと思います。

それでは、よきSwiftライフを。

本ブログはhighlight.jsでコードブロックにハイライトをつけていますが、highlight.jsにはdiffとプログラミング言語の両方のシンタックスハイライトを重ねがけすることができません。この重ねがけの機能はZennやQiitaには実装されていますが、highlight.jsにはデフォルトでその機能がついていないようだったので自力で実装してみました。

参考

highlight.jsを使った実装の仕組みにおいてhighlightjs-code-diffを参考にさせていただきました。最初からこのライブラリ使えばいいんじゃない？と思いましたが実際使ってみると使っているテーマ的に差分がある部分の文字色が変わるだけだったため、+/-の記号だけdiffのハイライトになり、ほとんど言語のハイライトと同じになってしまったので独自実装する形にしました。

diffのハイライト

前提としてdiffのハイライトって何？という人用に軽く説明しときますと、Gitの差分のアレです。

変更前の行に-をつけて、変更後の行に+をつけます。

- git difff
+ git diff

highlight.jsを拡張する

highlight.jsのHLJSApiオブジェクトのラッパーを作る形でdiffと言語のハイライトができるように拡張します。 仕様としては変更前の行は+, 変更後の行は-, 変更のない行は空白が付いているものとし、この3種類をdiffMarkerと呼ぶこととします。また、重ねがけをする際には言語名をdiff-言語名とします。例えばdiff+typescriptなコードブロックをシンタックスハイライトする場合はdiff-typescriptを言語名としてHLJSApiオブジェクトに渡します。

処理の流れは大まかには2つのステップからなります。

1. diffMarkerを削除したコード文字列に対して任意のプログラミング言語のハイライトを行う
2. ハイライト済みのHTML文字列の各行を<span>で囲い、classにはdiffMarkerに応じたものを付ける

diffの要素を除外して言語のハイライトを行い、後付けでdiffのハイライトをする感じですね。テーマによらず行ごとハイライトするために、diffのハイライトを行うcssは自分で用意します。

diffMarkerを削除したコード文字列に対して任意のプログラミング言語のハイライトを行う

コードブロックで表示される文字列（コード文字列）が変数codeに入っているとします。

const code = `
-const add = (a, b) => a - b
+const add = (a, b) => a + b
 console.log(add(1, 2))
`

codeからdiffMarkerを取り除き、highlight.jsのhljs.highlight()を用いてシンタックスハイライトします。typescriptとしてハイライトして、それ以外の設定は変数optionsに入っているものとします。

// const options = ハイライト時の設定

// diffMarkerを取り除く
const diffLines = code.split('\n');
const codeWithoutDiffMarkers = diffLines.map((line) => line.slice(1)).join('\n'); 

// シンタックスハイライト
const result = hljs.highlight(codeWithoutDiffMarkers, { ...options, language });

result.valueにはハイライトされるよう処理が施されたHTML文字列が入っています。

<span class="hljs-keyword">const</span> <span class="hljs-title function_">add</span> = (<span class="hljs-params">a, b</span>) =&gt; a - b
<span class="hljs-keyword">const</span> <span class="hljs-title function_">add</span> = (<span class="hljs-params">a, b</span>) =&gt; a + b
<span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-title function_">add</span>(<span class="hljs-number">1</span>, <span class="hljs-number">2</span>))

ハイライト済みのHTML文字列の各行を<span>で囲い、classにはdiffMarkerに応じたものを付ける

result.valueをdiffのハイライトがされるように以下の加工をします。

• 取り除いたdiffMarkerを元に戻す
• diffMarkerが+の行をaddition-line-highlightclassの<span>で囲む
  • -の場合はdeletion-line-highlight
• diffMarker自体をaddition-markerclassの<span>で囲む
  • -の場合はdeletion-marker

const highlightedLines = result.value.split('\n');
const highlightedLinesWithDiffMarkers = highlightedLines.map((line, i) => {
  const diffMarker = diffLines[i].slice(0, 1);

  switch (diffMarker) {
    case '+':
      return `<span class="addition-line-highlight"><span class="addition-marker">${diffMarker}</span>${line}</span>`;
    case '-':
      return `<span class="deletion-line-highlight"><span class="deletion-marker">${diffMarker}</span>${line}</span>`;
    default:
      return `${diffMarker}${line}`;
  }
});

これでdiff用のハイライトが付くようになります。

HLJSApiオブジェクトのラッパーとして実装する

HLJSApiを拡張する形で実装します。ついでにちょっとしたバリデーションや、言語がdiff-から始まらない時は通常通りにハイライトするようにしたりします。

import { HighlightResult, HighlightOptions, HLJSApi } from 'highlight.js';
import './highlight-diff.css';

export function hljsDiffPlus(hljs: HLJSApi): HLJSApi {
  function isValidDiffCode(codeLines: string[]): boolean {
    const isValidDiffCode = codeLines
      .filter((line) => line.length >= 1)
      .every((line) => {
        const headChar = line[0];
        return headChar == ' ' || headChar == '+' || headChar == '-';
      });

    return isValidDiffCode;
  }

  function highlight(code: string, options: HighlightOptions): HighlightResult {
    const diffLangPrefix = 'diff-';

    if (!options.language.startsWith(diffLangPrefix)) {
      return hljs.highlight(code, options);
    }

    const language = options.language.slice(diffLangPrefix.length);
    const diffLines = code.split('\n');

    if (!isValidDiffCode(diffLines)) {
      console.warn('改行以外の文字を含む行は空白/+/-のいずれかで始まる必要があります。');
    }

    const codeWithoutDiffMarkers = diffLines.map((line) => line.slice(1)).join('\n');

    const result = hljs.highlight(codeWithoutDiffMarkers, { ...options, language });
    const highlightedLines = result.value.split('\n');

    if (highlightedLines.length !== diffLines.length) {
      console.warn(
        `正常にhighlightできませんでした。diffのみのhighlightを行います。input_lang: ${options.language}`,
      );
      return hljs.highlight(code, { ...options, language: 'diff' });
    }

    const highlightedLinesWithDiffMarkers = highlightedLines.map((line, i) => {
      const diffMarker = diffLines[i].slice(0, 1);

      switch (diffMarker) {
        case '+':
          return `<span class="addition-line-highlight"><span class="addition-marker">${diffMarker}</span>${line}</span>`;
        case '-':
          return `<span class="deletion-line-highlight"><span class="deletion-marker">${diffMarker}</span>${line}</span>`;
        default:
          return `${diffMarker}${line}`;
      }
    });

    result.code = code;
    result.value = highlightedLinesWithDiffMarkers.join('\n');
    result.language = options.language;

    return result;
  }

  return {
    ...hljs,
    highlight(
      codeOrLanguageName: string,
      optionsOrCode: string | HighlightOptions,
      ignoreIllegals?: boolean,
    ): HighlightResult {
      return typeof optionsOrCode === 'string'
        ? highlight(optionsOrCode, { language: codeOrLanguageName, ignoreIllegals })
        : highlight(codeOrLanguageName, optionsOrCode);
    },
  };
}

diff用のCSSを作成する

diff部分が行ごとハイライトされるようなCSSを作成します。色はテーマやコードブロックの背景色に合わせて適宜調整します。このCSSはhighlightDiffPlus.tsで読み込んでいます。

.addition-line-highlight {
  background-color: #2c4334;
  display: inline-block;
}
.addition-marker {
  color: #afa;
}

.deletion-line-highlight {
  background-color: #553335;
  display: inline-block;
}
.deletion-marker {
  color: #faa;
}

既存のHLJSApiオブジェクトと置き換えて使う

通常のhighlight.jsは以下のようにして使います。

import hljs from 'highlight.js';

hljs.highlight(コード文字列, { language: '言語名');

自作したhljsDiffPlus()を使って置き換えます。

import plainHljs from 'highlight.js';
import { hljsDiffPlus } from './highlightDiffPlus';

const hljs = hljsDiffPlus(plainHljs);
hljs.highlight(コード文字列, { language: '言語名');

これでdiffと言語の両方のシンタックスハイライトが効くようになりました！
実際に使ってみるとこんな感じです。

-import hljs from 'highlight.js';
+import plainHljs from 'highlight.js';
+import { hljsDiffPlus } from './highlightDiffPlus';

+const hljs = hljsDiffPlus(plainHljs);
 hljs.highlight(コード文字列, { language: '言語名');

そろそろ何某かの記事を書いて公開したい！自分だけのブログが欲しい！でもデザインは自由に変更したい！でもブログを書くときの快適性は欲しい！という要望を叶えるために色々調べていたところ、ヘッドレスCMSに辿り着きました。

MicroCMSのテンプレートを使うとかなり簡単に実装できそうだったので作ってみました。

ヘッドレスCMSとは

MicroCMSの記事がわかりやすかったので置いておきます。

ものすごく簡単に言うと、ブログで言えば

1. ブログの記事を作成する機能
2. 作成した記事を保存する機能
3. 保存している記事をページ上に表示する機能

という機能がありますが、1と2をヘッドレスCMSに任せ、3は自力で作る、みたいな感じです。このブログで言うと1,2をMicroCMS, 3をNext.jsによって実現しています。

MicroCMSとは

MicroCMSは日本製のヘッドレスCMSで、ちょっとしたブログで使う分には無料で使えます。

MicroCMSテンプレート

MicroCMSにはテンプレートが用意されており、それを用いることでヘッドレスCMSが担当しない「3. 保存している記事をページ上に表示する機能」の実装が簡単になります。

テンプレートをgithubからcloneしてくるだけでほとんど実装が完了します。後の手順はリポジトリのREADMEを読んで進めればOK。

本ブログはシンプルなブログテンプレートを使っていますが、シンプルとは言うものの検索機能だったりタグ機能は持っているのでかなり工数の削減ができます。

テンプレートをカスタマイズする

テンプレートのままだとサンプルの画像がロゴに使われていたりするので、独自のロゴで置き換えたりトップページのタイトルを変更したりします。

画像の置き換え

単純に画像を置き換えたものは以下です。

• public/logo.svg
• public/no-image.png
• public/ogp.png

Faviconの置き換え

faviconにsvgが使えるっぽいです。元々あったapp/favicon.icoを削除して代わりにapp/icon.svgを配置します。このままだとfavicon.icoがないよ！と怒られるのでmetadataにiconのパスを書き加えます。

export const metadata = {
  // ※最初から書かれていたものは省略

  icons: { // 追加
    icon: 'icon.svg',
  },
};

メタデータの変更

サイトのtitleやdescriptionを変更します。

 export const metadata = {
   metadataBase: new URL(process.env.BASE_URL || 'http://localhost:3000'),
-  title: 'Simple Blog',
-  description: 'A simple blog presented by microCMS',
+  title: 'Re:heat',
+  description: "torobi's blog.",
   openGraph: {
-    title: 'Simple Blog',
-    description: 'A simple blog presented by microCMS',
+    title: 'Re:heat',
+    description: "torobi's blog.",
     images: '/ogp.png',
   },
   alternates: {
     canonical: '/',
   },
   icons: {
     icon: 'icon.svg',
   },
 };

ヘッダーの画像のaltを変更

 export default function Header() {
   return (
     <header className={styles.header}>
       <Link href="/">
         <Image
           src="/logo.svg"
-          alt="SIMPLE"
+          alt="Reheat"
           className={styles.logo}
           width={348}
           height={133}
           priority
         />
       </Link>
     </header>
   );
 }

フッターの変更

名前を変更し、さらに名前をクリックするとポートフォリオサイトに飛ぶように変更します。ついでに© 制作年 著作名になるように順番を変更します。

 import styles from './index.module.css';

 export default function Footer() {
   return (
     <footer className={styles.footer}>
-      <p className={styles.cr}>© SIMPLE. All Rights Reserved 2023</p>
+      <p className={styles.cr}>
+        © 202４{' '}
+        <a href="https://140degrees.com/About/profile" target="_blank" rel="noopener noreferrer">
+          torobi
+        </a>
+        . All Rights Reserved.
+      </p>
     </footer>
   );
 }

まとめ

MicroCMS + Next.jsで自作ブログを構築してみました。MicroCMSの記事作成画面は使いやすく、編集中でもWYSIWYG的に表示されるのがいいですね！（正確にはFrontend側の表示がそのまま見れるわけではないのでWYSIWYGではないですが）表だったりリンクの埋め込みプレビューなどは編集画面上でも綺麗に表示されるので見やすいです。表もMarkdown記法だとしんどいですが、MicroCMSだと編集画面でも表として描画されて操作できるのでかなり楽です。この辺りの操作感はNotionと近いかと思います。

公開に際し最低限の変更はここで行いましたが、空き時間にデザイン変更や機能追加なんかもゆっくりやっていきます。