Markdownで書いた職務経歴書を良い感じのWebサイトとPDFに自動変換するツールを作ってみた

こんにちは、つくぼし(tsukuboshi0755)です！

みなさん、職務経歴書は書いていますか？

私は社会人になってから職務経歴書を日々管理しておく事が大切だと感じており、万が一転職する場面に遭遇した時を考えて定期的に更新するようにしています。

その際に以下の記事が非常に分かりやすく、最近までこちらを参考に自身の職務経歴書を作成し公開していました。

https://zenn.dev/ryo_kawamata/articles/resume-on-github

今回たまたま私自身が職務経歴書を再整理する機会があり、せっかくなのでデザイン性を高めつつ、アプリケーション開発にそこまで詳しくない方でも職務経歴書を楽に管理できたら良いなと考え、Markdownで職務経歴書から良い感じにWebサイトとPDFに変換するツールを開発したので紹介します！

本ツールの概要

今回開発したツールはこちらになります。

https://github.com/tsukuboshi/honox-resume-template

このツールを使う事で、GitHubアカウントさえ持っていれば以下のような職務経歴書用のWebサイトを誰でも無料で作れるようになっています！

このツールを使って私の職務経歴書を以下の通り公開しています。なかなかいい感じのWebサイトになっているのではないでしょうか。

https://tsukuboshi.github.io/honox-resume/

さらに今回このツールを使う事で、以下のようなメリットがあります。

• GitHubの無料枠で利用できる機能(GitHub Actions/GitHub Pages)のみを使用しているため、GitHubアカウントさえあれば無料で職務経歴書のWebサイトとして公開可能
• 本ツールで職務経歴書を展開する際の手順が全てGitHubのWebサイト上で完結するため、ローカルで開発環境を構築する必要がなく、アプリケーション開発に詳しくない方でも利用可能

個人的にかなり自信のある形に仕上がったと思っているので、試しに使って頂いて「良いね！」と思って頂けたら、tsukuboshi/honox-resume-templateにスターを付けて頂けると励みになります。

以下の赤枠をクリックする事でスターを付ける事ができるので、ぜひよろしくお願いします！

本ツールの機能

Webサイトへの自動公開

GitHubの無料ホスティング機能であるGitHub Pagesを使って、Webサイトとして自動公開できるようにしています。

ツールで展開した後に公開されるGitHub PagesのURLhttps://<GitHubユーザー名>.github.io/<GitHubリポジトリ名>/を共有するだけで、他の人も職務経歴書を確認できるようになっています。

Markdown/PDFファイルのダウンロード

Webサイト上部のMarkdownをダウンロード/PDFをダウンロードボタンを押す事で、別途職務経歴書のMarkdownファイル及びPDFファイルをダウンロードできます。

それぞれ以下の通りになっており、こちらはWebサイトとは逆にシンプルなデザインになっています。

• Markdownファイル

• PDFファイル

Webサイトからそのままダウンロードできるので、MarkdownファイルやPDFファイルを求める企業に対しても、手間なく職務経歴書を提出できるようになっています！

本ツールの使い方

本ツールを使って、Webサイトを公開する手順は以下の通りです。

全てWebサイト上で完結するので、PCさえ触れれば誰でも簡単に公開できます！

GitHubアカウントの作成

まだGitHubアカウントを持っていない方は、以下のURLからアカウントを作成してください。

https://github.com/

アカウントの作成方法については、以下の記事が参考になります。

https://zenn.dev/protoout/articles/50-howto-github-setup

リポジトリの作成と初期化

GitHubアカウントを作成したら、以下のURLをクリックしてください。

https://github.com/tsukuboshi/honox-resume-template

以下のようなテンプレートリポジトリ画面が表示されるので、Use this TemplateのCreate a new repositoryをクリックし新しいリポジトリを作成します。

以下の新規リポジトリ作成画面に移ったら、次の3項目を設定した上でCreate repositoryをクリックします。

• Include all branchesにチェックを入れる(入れないとWebサイトの自動生成が開始されません)
• Repository nameに任意のリポジトリ名を入力する(後のWebサイトのURLパスに反映されるので、分かりやすい名前を付けておくと良いです)
• Publicを選択する(PrivateにするとWebサイトが公開されないので注意！)

クリックすると新規のリポジトリの作成が開始され、完了すると新規リポジトリのCode画面に切り替わります。

この時点でリポジトリの初期化が始まり、既にサンプルの職務経歴書を元にしたWebサイトの自動生成が開始されているはずです。

Webサイトの自動生成の状況を確認するため、以下のリポジトリ画面上部のActionsのタブをクリックして確認します。

Actions画面のInitial commitの上にあるpages build and deploymentの先頭に緑のチェックマークが付いていれば、Webサイトの生成が正常に完了しています。

そのまま以下の画面でpages build and deploymentをクリックしてください。

以下の画面のdeployの下にある青いURLをクリックすると、サンプルのWebサイトが表示されます。

以下のようなWebサイトが表示されていれば、正常にリポジトリが初期化されています！

職務経歴書の更新

リポジトリの初期化が完了したら、各個人に合わせて職務経歴書を更新していきます。

GitHubの新規リポジトリで画面上部のCodeタブをクリックし以下のCode画面に戻った後、今度はpublicというディレクトリをクリックします。

すると以下の画面の通り、職務経歴書の元データであるREADME.mdファイルが下部に表示されます。

このREADME.mdを編集する事で更新がかかるため、鉛筆マークをクリックして編集していきます。

以下のようにEditタブの状態で職務経歴書の中身をいじる事ができるので、内容を更新していきます。

なおこちらのREADME.mdの内容の書き方については、後述の「本ツールでの職務経歴書の書き方」の項目を参考にしてください！

Previewタブに切り替えるとプレビュー画面を確認できるので、更新した内容でMarkdownが崩れていないか事前にチェックしてください。

問題なければ右上のCommit Changes...をクリックします。

その後以下の画面でコミット内容について聞かれるので、Commit directly to the main branchを選択しCommit Changesをクリックしてください。

コミットが完了するとまたWebサイトの自動生成が始まるので、Actionsタブをクリックして確認します。

今度はUpdate README.mdの上にあるpages build and deploymentの先頭に緑のチェックマークが付いていれば、Webサイトの更新が正常に完了しています。

前と同じくpages build and deploymentをクリックしてください。

こちらも同じようにdeployの下にある青いURLをクリックします。

すると今度は以下のように、先ほど更新されたREADME.mdファイルの内容を元にWebサイトがアップデートされるはずです。

また職務経歴書の内容を更新したくなった場合は、「職務経歴書の更新」の項目の手順を繰り返せばOKです！

本ツールでの職務経歴書の書き方

今回職務経歴書の元データとなっているpublic/README.mdファイルでは、Markdown記法をベースとしつつ、よりデザイン性の高いWebサイトに変換するため一部独自記法を取り入れています。

なおサンプルの職務経歴書tsukuboshi.github.io/honox-resume-template/の書き方はMarkdownをダウンロードボタンよりファイル確認が可能なので、サンプルで利用されている記法を参考にしながら職務経歴書を更新してみてください！

一般的なMarkdown記法

本ツールでWebサイト変換に対応しているMarkdown記法は以下の通りです。

• 見出し：# を使った <h1> から <h3> までの見出し
• 段落：通常の文章
• リンク：[表示テキスト](URL)
• リスト:
  • 順序なしリスト (-, *, +)
  • 順序付きリスト (1., 2.)
• テーブル：| ヘッダー1 | ヘッダー2 | の形式
• コード:
  • インラインコード (`code`)
  • コードブロック ( )
• 引用：> から始まるブロック
• 文字の装飾:
  • 太字 (**bold**)
  • イタリック (*italic*)
• 水平線：--- や ***

逆に以下のMarkdown記法については、職務経歴書では使用する可能性が低いと考え、現時点では未対応となっているためご注意ください。

• 見出し：# を使った <h5> から <h6> までの見出し
• タスクリスト：- [ ] や - [x]
• 打ち消し線：~~text~~
• 脚注：
  • [^1] のような脚注
  • [^1]：脚注の内容 のような脚注の定義

本ツール独自の記法

今回Webサイト変換時のデザイン性を高めるために、以下の独自記法を追加しています。

これらの記法を活用する事でMarkdown/PDFファイルはシンプルな形を保ち、逆にWebサイトではデザイン性の高い職務経歴書に変換されます。

• トグルセクション生成：#### セクション名 を記載すると、Webサイト変換時に先頭に対してトグルセッションが作成され、次の段落までの内容が折りたたみ可能になります。
• トグルを「全て開く」「全て閉じる」ボタン表示：### セクション名と#### セクション名の両方を記載すると、Webサイト変換時に### セクション名の右に「全て開く」「全て閉じる」ボタンが表示され、トグル可能なセクションを一括で開閉できます。
• バッジ埋め込み：以下の形式で記載すると、Webサイト変換時にURLがフィルタリングされ、shields.ioによるアイコンとして埋め込まれます。対応サイトはQiita/Zenn/DevelopersIO/GitHub/SpeakerDeck/Docswell/Xの7種類です。
  • Zenn：[バッジ名](https://zenn.dev/<ユーザー名>)
  • Qiita[バッジ名](https://qiita.com/<ユーザー名>)
  • GitHub：[バッジ名](https://github.com/<ユーザー名>)
  • DevelopersIO：[バッジ名](https://dev.classmethod.jp/<ユーザー名>)
  • SpeakerDeck：[バッジ名](https://speakerdeck.com/<ユーザー名>)
  • Docswell：[バッジ名](https://www.docswell.com/user/<ユーザー名>)
  • X：[バッジ名](https://x.com/<ユーザー名>)
• ブログ埋め込み：以下の形式で記載すると、Webサイト変換時にURLがフィルタリングされ、該当記事がはてなブログカードとして埋め込まれます。対応サイトはQiita/Zenn/DevelopersIOの3種類です。
  • Qiita：[記事名](https://qiita.com/<ユーザー名>/items/<記事ID>)
  • Zenn：[記事名](https://zenn.dev/<ユーザー名>/articles/<記事ID>)
  • DevelopersIO：[記事名](https://dev.classmethod.jp/articles/<記事ID>)
• スライド埋め込み：以下の形式で記載すると、Webサイト変換時にURLがフィルタリングされ、該当スライドが埋め込まれます。対応サイトはSpeakerDeckとDocswellの2種類です。なお通常リンクではなく埋め込みリンク(Embed)である必要があるためご注意ください！
  • SpeakerDeck：[スライド名](https://speakerdeck.com/player/<スライドID>)
  • Docswell：[スライド名](https://www.docswell.com/slide/<スライドID>/embed)
• 動画埋め込み：以下の形式で記載すると、Webサイト変換時にURLがフィルタリングされ、該当動画が埋め込まれます。対応サイトはYouTubeのみです。こちらも通常リンクではなく埋め込みリンク(Embed)である必要があるためご注意ください！
  • YouTube：[動画名](https://www.youtube.com/embed/<動画ID>)

まとめ

今回はMarkdownで職務経歴書から良い感じにWebサイトとPDFに変換するツールを開発したので紹介しました。

ちなみに本記事ではアプリケーション開発にそこまで詳しくない方向けに使い方中心で解説しましたが、次の記事では逆にアプリケーションエンジニアの方向けに本ツールを実現するために採用したHonoXやGitHub Actions等の技術詳細について解説する予定です。

ぜひ次回の記事もご覧頂けますと幸いです！

以上、つくぼし(tsukuboshi0755)でした！