jsoncv
1.0.0
JSONでCVを構築し、スタイリッシュなHTML/PDFファイルを作成するためのツールキット。
JSONCVでは、次のコンポーネントで構成されています。
詳細な説明と使用ガイドラインについては、以下のドキュメントを参照してください。
JSONCVはJSONスキーマを使用して、CVSのJSONベースの標準を作成します。
JSONCVで使用されるスキーマは、JSON Resumeスキーマのフォークであり、次の違いがあります。
JSONスキーマバージョン
JSON Resumeは時代遅れのドラフト-04バージョンを利用し、JSONCVは現在のドラフト-07を使用しています。ドラフト-07との互換性を確保するために、 additionalItemsのすべてのインスタンスが削除されました。
追加のsideProjectsセクション
JSONCVには、サイドプロジェクトとキャリアプロジェクトの区別を可能にするsideProjectsと呼ばれる追加セクションが含まれています
metaセクションの追加nameプロパティ
JSONCVには、 metaセクションにnameプロパティが含まれています。これにより、ユーザーはエクスポートされたHTML/PDFファイルの目的の名前を指定できます。
これらの違いは、JSONCVとJSON履歴書の互換性に影響しません。これは、JSONCVデータがJSON Resume Schemaの検証に合格するため、JSON履歴書データをJSONCVに簡単にインポートできることを意味します。
JSON履歴書スキーマとJSONCVスキーマの間の完全な違いは、ここで見ることができます
JSONCVには、JSONCVデータを作成および編集するためのグラフィカルユーザーインターフェイスを提供するオンラインエディターが付属しています。 https://jsoncv.reorx.com/editor/にアクセスしてください。
編集者は、左から右への3つのペインで構成されています。
サイドバー
スキーマフォームのさまざまなセクションへのナビゲーションが許可され、「HTMLのダウンロード」や「アップロードデータ」などの操作を提供します。
スキーマフォーム
CVデータのプロパティを編集できます。表示または非表示にするプロパティを選択することもできます。
プレビュー
スキーマ形式で変更が行われるため、レンダリングされたCV HTMLを表示します。
JSONCVのコア製品はCV HTMLであり、JSONCVデータのHTML表現です。これは、PDFに変換したり、オンラインでホストして静的CV Webサイトを作成したりできるコンパクトな単一ファイルHTMLドキュメントです。
CV HTMLは、A4シートの紙にCVを表示するための特定のレイアウトで設計されています。 CSSは、印刷を最適化するように調整されており、紙に印刷されているか、PDFとして保存されているかにかかわらず、最高のタイポグラフィを確保しています。したがって、CV HTMLは、創造的またはインタラクティブなポートフォリオWebサイトではなく、専門的または学術的なCVS/履歴書の作成に最適です。
CV HTMLは、 src/themesディレクトリにあるテーマをサポートしています。
CV HTMLを取得するには、CVデータとHTMLのエクスポートを参照し、HTMLをローカルに構築してください
コンバーターは、ユーザーがJSONCVデータを他のソースに変換するのに役立つスクリプトです。
現在、利用可能なコンバーターは1つだけです。Rxresume rxresume-to-jsoncv.jsは、rxresumeからjsoncv形式にエクスポートされるデータを変換します。
追加の要件がある場合は、お気軽に問題を提出してください。プルリクエストも大歓迎です。
オンラインエディターを使用して履歴書を作成することをお勧めします。ただし、JSONに満足している場合は、ローカルマシンのテキストエディターを使用してデータファイルを維持できます。
エディターを初めて開くと、サンプルデータがロードされます。編集するか、[新しいデータ]ボタンをクリックして、空のフォームで開始できます。 CVデータは、変更を行うたびにブラウザに保存されるため、仕事を失うことを心配する必要はありません。
既にCVデータのローカルコピーがある場合は、[データのアップロード]ボタンをクリックしてエディターにロードできます。
編集が完了したら、 JSONボタンをダウンロードしてJSON形式でCVデータをエクスポートすることができます。
レンダリングされたHTMLをプレビューペインにエクスポートする場合は、 HTMLのダウンロードボタンをクリックするだけです。
meta.nameプロパティを追加して、エクスポートされたファイルに名前を付けることができることに注意してください。指定されていない場合、ファイル名はbasics.nameとmeta.versionの組み合わせを使用して構築されます。
物事をシンプルに保つために、JSONCVは外部ツールを含めたり、PDFを生成したりしません。代わりに、生成されたHTMLファイルを使用してPDFドキュメントに変換する必要があります。唯一の要件は最新のブラウザです。以下の手順では、Google Chromeを例として使用します。
Chromeで生成されたHTMLファイルを開きます。
pを押します（またはWindowsの⌃ P ）、印刷ダイアログが開きます。
ダイアログで、「宛先」を「PDFとして保存」として選択し、「オプション」のすべてのアイテムがチェックされていないことを確認します。
[保存]をクリックして、ファイルシステムにPDFファイルを保存します。
ChromeからエクスポートされたPDFには、テキストのコピーにいくつかの問題がある場合があることに注意してください。詳細については、FAQセクションを参照してください。
JSONCVは、Viteを静的サイトビルディングツールとして使用します。プロジェクトのルートにあるindex.htmlファイルは、単一ファイルのCV HTMLをブイリングするためのエントリポイントです。
ここに、独自のデータを使用してCV HTMLを構築する手順があります。
Nodejsバージョン18以降を使用していることを確認してください。
実行して依存関係をインストールしてください： npm run install
DATA_FILENAMEおよびOUT_DIR環境変数を指定して、CV HTMLを構築します。
DATA_FILENAME="$HOME/Downloads/mycv/cv.json" OUT_DIR="$HOME/Downloads/mycv" npm run build
これにより$HOME/Downloads/mycv/cv.jsonにあるデータファイルを使用してCV HTMLを構築し、生成されたHTMLは$HOME/Downloads/mycvディレクトリに配置されます。
ビルドプロセスでは、次の環境変数がサポートされています。
DATA_FILENAME ：使用するCVデータは、相対的または絶対的なパスにすることができます。OUT_DIR ：生成されたHTMLファイルの出力ディレクトリ。THEME ：使用するテーマは、 src/themes/のディレクトリ名の1つでなければなりません。テーマの主要な色をカスタマイズするには、index.scssの-primary-color CSS変数を変更します。この変更を行うと、GITの舞台が変更されることに注意してください。自分でHTMLを構築したい場合は、JSONCVでソースコードを編集する代わりに、新しいプロジェクトを作成することをお勧めします。これを行う方法については、静的CVサイトのビルドセクションを参照してください。
生成されたindex.htmlファイルは、どこでも、ホスティングプラットフォームで使用できます。単にWebサーバーにアップロードすると、独自のオンラインCVサイトがあります。組み込みのテーマ「Reorx」には、モバイルデバイスのレスポンシブサポートも含まれています。
ただし、PDFファイルと著者のホームページへのリンクを備えたフッターを備えたhttps://cv.reorx.com/のCVサイトのような追加のカスタマイズが必要な場合は、次の手順に従うことができます。
空のリポジトリを作成します
jsoncvをサブモジュールとして追加します
git submodule add https://github.com/reorx/jsoncv.git
プロジェクトにcv.jsonたとえば、CVデータファイルを配置します。
npm initを実行してpackage.jsonを初期化します。
npm i ./jsoncvを実行することにより、JSONCVを依存関係としてインストールします。
./jsoncv/package.jsonからscriptsとdevDependenciesをpackage.jsonにコピーし、 npm iを実行してインストールします。
copy ./jsoncv/vite.json.jsからvite.json.jsに、次の変更を行います。
./srcのすべてのインスタンスを./jsoncv/srcに変更します。dataFilenameの値をcv.jsonなどのCVデータファイルに変更します。renderData.theme使用したいテーマに変更します。 ./jsoncv/index.html index.htmlに./src to ./jsoncv/srcのすべてのインスタンスを変更します。次に./jsoncv/index.scss index.scssをindex.scssにコピーします。
npm run buildを実行して、すべてが機能するかどうかをテストします。
これらの手順を完了した後、CV Webサイトをさらにカスタマイズするために、 index.htmlおよびindex.scssに独自の要素とスタイルを追加できるようになりました。 HTML、CSS、およびJavaScriptを使用して、独自のブランド、レイアウト、および機能をサイトに追加できます。
JSONCVには、エディターで直接使用できる、または静的CVサイトを構築するときに使用できるいくつかの組み込みテーマが含まれています。独自のカスタムテーマを作成したい場合は、次の方法があります。
テーマのファイルシステム階層は次のとおりです。
src/themes
└── reorx
├── index.ejs
└── index.scss
index.ejsおよびindex.scssファイルを使用して、 src/themesの下に新しいフォルダーを作成することにより、独自のテーマを追加できます。
index.ejs 、CVコンテンツの構築に使用されるEJSテンプレートです。テンプレートに渡されるデータは、次のように構成されています。
cv ：JSONCVスキーマに準拠するJSONCVデータ全体fn ：ユーティリティ関数のセットgetCVTitle ： cvデータからCVタイトルを取得しますreformatDate ：日付文字列を指定された形式に変換しますgetIconSVG ：アイコン名からICONIFY SVG文字列またはDOM要素を取得しますnoSchemaURL ：URLのスキーマ（ https:// ）のプレフィックスを削除します詳細については、src/themes/data.jsの完全な定義を参照してください。
新しいテーマを作成したら（例としてyourtheme使用しましょう）、次のコードを実行して、開発とプレビューを開始できます。
THEME=yourtheme npm run dev-site
新しいテーマを追加するためのリクエストを引き出すことは常に歓迎されます。
あなたは自分の名前にちなんでテーマに名前を付けることができます。これは私がテーマ「Reorx」でやったことです。なぜなら、そのテーマは開発者の美学と個人的な好みに厳しく縛られており、一般的な言葉はテーマを正確に表していないかもしれないからです。
はい、これはChromeの「Save as PDF」機能に関する既知の問題です。結果のPDFは、preview.appにコピーされたときに逆方向のテキストを持つことができます。
この問題は複数のユーザーによって報告されており、JSONCVに固有のものではありません。見られるように、「PDFとして保存」は、後方テキストのドキュメントを作成します。 -Google Chromeコミュニティ
解決策：FirefoxまたはSafariを使用してPDFを取得します
JavaScript保証オブジェクトプロパティ注文を参照してください。 - オーバーフローをスタックします
summaryおよびdescriptionプロパティのマークダウンをサポートしますJSONCVは、これらの素晴らしいプロジェクトなしではできませんでした。
このプロジェクトが使用するのが楽しいか、時間を節約できると思うなら、私に一杯のコーヒーを与えることを検討してください:)
