マイポートフォリオ エディタ & プレビューア

クイックスタート

実際に動作しているアプリケーションには、ここからアクセスできます。

効果的なマイポートフォリオを作成するためのヒントや詳細については、マイポートフォリオ作成ガイド を参照してください。

概要

「マイポートフォリオクリエイター」プロジェクトは、技術者のキャリアサマリーを作成し、視覚的に表現するためのWebベースのツールです。ユーザーは、自身の職務経歴、技術スキル、強み、将来の注力分野などを入力し、視覚的に魅力的なドキュメントを生成できます。生成されたドキュメントはプレビュー表示し、PDFとして保存することが可能です。

このプロジェクトは、主に以下の2つの部分で構成されています。

1. マイポートフォリオ エディタ (editor.html): マイポートフォリオのデータを作成・編集するためのインタラクティブなWebアプリケーションです。
2. マイポートフォリオ プレビューア (preview.html): 生成されたマイポートフォリオドキュメントを表示し、PDFとして保存するためのWebアプリケーションです。

機能

マイポートフォリオ エディタ (editor.html)

• データ入力:
  • タイトルスライド: 氏名、氏名（ふりがな）、会社名を入力できます。
  • 職務経歴: 職務経歴のエントリーを動的に追加・管理できます。
  • 技術経歴: プロジェクトの詳細を動的に追加・管理できます。
  • 技術スキル:
    • スキルレベルのラベル（例：初心者、中級者、上級者）を定義できます。
    • スキルカテゴリと個々のスキルを動的に追加・管理できます。
  • 強みと展望:
    • 技術的な強みとソフトスキルを追加・管理できます。
    • 将来の注力分野を追加・管理できます。
    • 資格を追加・管理できます。
• データ管理:
  • JSON読み込み: JSONファイルからデータをインポートできます。
  • JSON貼り付け: JSONデータを直接エディタに貼り付けることができます。
  • データ保存: 現在のデータをJSONファイルとして保存できます。
  • JSONプレビュー: 生のJSONデータを表示できます。
• ユーザーインターフェース:
  • タブインターフェースにより、各セクション間を簡単に移動できます。
  • 職務経歴、プロジェクト、スキル、強みなどのフォームフィールドを動的に追加できます。
  • 明確なラベルと入力フィールドを備えています。
  • 成功したアクション（例：「保存しました！」）に対する通知メッセージが表示されます。
• プレビュー:
  • 生成されたマイポートフォリオドキュメントを新しいタブでプレビューできます。

マイポートフォリオ プレビューア (preview.html)

• データ読み込み:
  • JSON読み込み: JSONファイルからデータをインポートできます。
  • JSON貼り付け: JSONデータを直接プレビューアに貼り付けることができます。
• ビジュアライゼーション:
  • マイポートフォリオデータを視覚的に魅力的な形式で表示します。
  • CSSを使用してスタイルを設定します（タイトル、職務経歴、スキル、強み、技術経歴などのセクションごとに個別のCSSファイルを使用）。
• PDFエクスポート:
  • 表示されているマイポートフォリオドキュメントをPDFとして保存できます。
• 印刷スタイル:
  • 印刷に最適化された専用のスタイルシートが用意されています。

はじめ方

このプロジェクトをローカル環境で利用するには、以下のいずれかの方法でファイルを取得してください。

リポジトリをクローンする (Gitを使用する場合)

1. リポジトリのURLを確認: リポジトリのウェブページ（GitHubなど）で、リポジトリのURLを確認します。通常、「Code」ボタンからコピーできます。

2. ターミナルまたはコマンドプロンプトを開く: お使いのOSのターミナルまたはコマンドプロンプトを開きます。

3. クローンコマンドを実行: 以下のコマンドを実行します。<リポジトリのURL> の部分は、手順1で確認したURLに置き換えてください。

   git clone <リポジトリのURL>

   例：

   git clone https://github.com/vavavavavavavavava/マイポートフォリオ.git

4. クローン完了: 指定した場所にリポジトリのファイルがダウンロードされます。

ZIPファイルをダウンロードする (Gitを使用しない場合)

1. リポジトリのウェブページを開く: リポジトリのウェブページ（GitHubなど）を開きます。
2. 「Code」ボタンをクリック: 通常、緑色の「Code」ボタンがあります。
3. 「Download ZIP」を選択: ドロップダウンメニューから「Download ZIP」を選択します。
4. ZIPファイルを保存: ZIPファイルがダウンロードされますので、任意の場所に保存します。
5. ZIPファイルを展開: ダウンロードしたZIPファイルを展開（解凍）します。展開すると、リポジトリのファイルが格納されたフォルダが作成されます。

アプリケーションの起動

ファイルを取得したら、以下の手順でアプリケーションを起動します。

1. Webブラウザで editor.html を開く: マイポートフォリオエディタが起動します。
2. Webブラウザで preview.html を開く: マイポートフォリオプレビューアが起動します。
3. エディタを使用してマイポートフォリオデータを作成します。
4. データをJSONファイルとして保存します。
5. JSONファイルをプレビューアに読み込みます。
6. プレビューをPDFとして保存します。

デバッグモードの切り替え

まずリポジトリ直下にある *.env.example を .env にコピーします。 .env で DEBUG_MODE の値を変更すると、コンソール出力の有無を切り替えられます。 値を true にするとログが有効になり、false で無効になります。 ファイル変更後はページを再読み込みしてください。

ライセンス

このプロジェクトは MIT License の下で公開されています。