履歴書を支える技術

ギークなエンジニアであれば，履歴書を技術を駆使して作成する経験は一度はあると思います．転職を意識して履歴書をこの記事ではこれまでの履歴書を支えてきた技術を紹介しつつ，新たに作成した履歴書を支える技術を紹介していきます．

＊最新のビルド済みの最新版の履歴書はこちらです．

背景：履歴書自作の変遷

v0. MarkdownをMacDownでビルド

Markdownで必要な項目を記述し，それをmacOSで動作するMarkdownエディタであるMacDownでPDF ファイルへビルドしていました．この方法の利点は慣れ親しんだMarkdown形式で履歴書を記述できることです．慣れ親しんだフォーマットであるMarkdownは書きやすく便利でした．

Markdown形式にともなう課題は，レイアウトの表現性が乏しいことです．組版システムではないためA4の1ページに収まるようにレイアウトするには，表現力が足りずCSSやTableを使う必要があります．そのため，新たに後述のv1に置き換えました．

v1. AsciiDocをビルド

asciidocで書いた履歴書をGitLabのCIで自動ビルド – koyama’s blog

Markdown形式でレイアウトの表現力にあった課題を解決するため，v1ではAsciiDocを記述形式に採用しました．AsciiDocはMarkdownより書き方は冗長であるものの，Markdownでは不足していたレイアウトの柔軟性が向上しました．AsciiDocはCLIツールでビルドできるため，GitLab CI上にビルドパイプラインを構築しました．スマホからでも履歴書を編集してビルドできるようになりました．

Asciidocで記述した履歴書にも課題がありました．履歴書は頻繁に更新する資料ではないため，履歴書を編集するたびにAsciiDocの文法を調べて記述していました．Markdownで記述していた際には気軽に更新できていた履歴書が，Asciidocに変更してから気軽に更新しにくい状況でした．また，細かな微修正をしたい場合の調整ができないことも課題でした．例えば，1行だけ次のページにはみ出てしまう際に，余白や行間を微修正するのが上手くいかず苦労しました．

v2. 手書きのHTMLをHeadless Chromeでビルド

AsciiDocの表現力の問題を解決するには，細かく指定できるフォーマットや技術が必要だと考えました．LaTeXの採用も検討したものの，LaTeXの処理系が出すエラーへのトライアンドエラーは嫌いなため採用を見送りました．

HTMLは書式を細かく指定でライブラリもあるため表現力が豊富です．これまでHTMLやCSSを使った経験があり編集する際にも記法で困ることがなく適していると考えました．そこで下記のCSSライブラリやアイコンセットを使いHTMLで履歴書を作成しました．

HTMLファイルからPDFファイルをビルドする際にはHeadless Chromeを使いました．たまにFont Aresomeの読み込みに失敗するため，virtual-time-budgetを長めにセットしています．

chrome --headless --disable-gpu --run-all-compositor-stages-before-draw --virtual-time-budget=8000 --print-to-pdf resume.html

GitHub Actions上にCI/CDのパイプラインを構築したため，ビルドからデプロイまでが自動化されています．デプロイ先はGCP上の仮想マシンです．以下はGitHub Actionsの構成ファイルの例です．

name: Build and Deploy
on:
  workflow_dispatch:
  push:
    tags:
      - 20*
jobs:
  build-and-deploy:
    runs-on: ubuntu-20.04
    steps:
      - name: Checkout Code
        uses: actions/checkout@v2
      - name: Setup Chrome
        uses: browser-actions/setup-chrome@latest
      - name: Build pdf with Chrome
        run: |
          chrome --headless --disable-gpu --run-all-compositor-stages-before-draw --virtual-time-budget=8000 --print-to-pdf output.html
          mv output.pdf resume.pdf
      - name: Upload artifacts
        uses: actions/upload-artifact@v2
        with:
          name: Upload CV
          path: resume.pdf
      - name: Install SSH key
        uses: shimataro/ssh-key-action@v2
        with:
          key: ${{ secrets.DEPLOY_SSH_KEY }}
          name: id_ed25519
          known_hosts: ${{ secrets.DEPLOY_SSH_KNOWN_HOSTS }}
          if_key_exists: fail
      - name: rsync over SSH
        run: rsync -avrz -e 'ssh -i ~/.ssh/id_ed25519 -p 2222' resume.pdf user@example.com:/path/to/www

v2ではCSSを使い細かなページのレイアウトや行間を調整できv1の課題が解消しました．一方で，v2で新たな課題が生じました．その課題とは，複数のHTMLタグの修正を手動で個々に行うことです．例えば，職歴リストのデザインの変更に伴いHTMLを変更する必要がある場合を考えます．このとき職歴の要素（職歴）が5件ある場合，5つすべての要素を手動で修正する必要があります．以下のコードは実際のHTMLコードの抜粋です．このように個々の要素の構造がシンプルなHTMLであれば問題ないものの，複雑なタグが入れ子になっている場合，修正に手間がかかりました．

  <div>
    <header class="space-between">
      <strong>ジョブタイトル1</strong>
      <span>2023年1月 - 2023年6月</span>
    </header>
    <span class="org">社名1</span>
    <p>概要</p>
  </div>
  <div>
    <header class="space-between">
      <strong>ジョブタイトル2</strong>
      <span>2023年7月 - 2023年9月</span>
    </header>
    <span class="org">社名2</span>
    <p>概要</p>
  </div>

v3. テンプレートエンジンで生成したHTMLをHeadless Chromeでビルド

v2の課題を解決するためにテンプレートエンジンを導入し，ViewとDataを分離しました．データ自体は設定ファイルに切り出し，テンプレートエンジンから設定ファイルを呼び出す実装としました．これにより，類似したHTMLタグを繰り返し修正する作業が不要になりました．

Go言語の練習する一環でGo言語を使って実装しました．テンプレートエンジンには標準ライブラリに含まれる text/template を使用しています．テンプレートへ割り当てる入力値はYAML形式のファイルから読み込むように実装しました．YAML形式のデータを扱うために gopkg.in/yaml.v3 を使いました．

以下はYAML形式の設定ファイルの例です．必要に応じてYAMLファイルにデータを追加すると，履歴書が更新できます．

name_en: "Tomoyuki KOYAMA"
name_ja: "小山 智之"
github: "tomoyk"
email: "tomoyuki@koyama.me"
website: "www.koyama.me"
education:
  - school_name: "Graduate School of Computer Science, Tokyo University of Technology"
    title: "Master of Computer Science"
    date_begin: "Apr. 2021"
    date_end: "Mar. 2023"
    description: |-
      He belonged to <a href="https://www.tak-cslab.org/">Cloud and Distributed Systems
      Laboratory</a> (Supervisor: Prof. Takayuki Kushida). <br>His study proposes fast
      log search method for distributed tracing.

以下の構造体 ConfigSchemeはYAMLのスキーマをあらわしています．

type Education struct {
        SchoolName  string `yaml:"school_name"`
        Title       string `yaml:"title"`
        DateBegin   string `yaml:"date_begin"`
        DateEnd     string `yaml:"date_end"`
        Description string `yaml:"description"`
}

type ConfigScheme struct {
	NameEn                      string        `yaml:"name_en"`
	NameJa                      string        `yaml:"name_ja"`
	Github                      string        `yaml:"github"`
	Email                       string        `yaml:"email"`
	Website                     string        `yaml:"website"`
	EducationItems              []Education   `yaml:"education"`
	WorkItems                   []Work        `yaml:"work"`
	PublicationRefereedItems    []Publication `yaml:"publication_refereed"`
	PublicationNonRefereedItems []Publication `yaml:"publication_non_refereed"`
}

以下のようにテンプレートファイルで変数を展開するよう記述しました．テンプレートファイルはv2のHTMLファイルを再利用しました．

<section>
  <h2>Education</h2>
  {{ range .EducationItems }}
  <div>
    <header class="space-between">
      <strong>{{ .Title }}</strong>
      <span>{{ .DateBegin }} - {{ .DateEnd }}</span>
    </header>
    <span class="org"><i class="fas fa-university"></i> {{ .SchoolName }}</span>
    <p>{{ .Description }}</p>
  </div>
  {{ end }}
</section>

koyama's blog