（職業訓練校でWebデザインとAIを学習したばかりの）素人が、ゴールデンウィークを利用して、履歴書作成ウェブアプリを作ってみました。🎉
ウェブアプリといっても、HTML、CSS（SCSS）、JavaScriptのみで構成されていて、ソースをダウンロードしてローカル実行も可能です。
できれば、ソースとか見て意見等を頂きたいです。
勝手ですいません💦
Webサイト
下記ページにアクセスすれば利用できます。
ちなみに、提供ページはAmazon S3の静的ウェブサイトホスティングを利用しています。
ターゲット
履歴書作成ウェブアプリです。
「日本独自のお馴染み「履歴書」フォーマットを利用を今時するの？」とも個人的には思うんですが・・
「アルバイトなどの応募に、学生さんが使うことを想定」して作ってみました。
特徴と機能
- 履歴書（JIS規格）見た目のままで編集できます
- A4、A3見開き、B5、B4見開きのそれぞれを選択印刷が可能です。（PDF出力する場合はブラウザの機能を使ってください。）
- HTMLファイル出力が可能です。
- 編集内容は（sessionStorageに）自動保存します。
- 再編集用にJSON形式で保存・読み込みが可能です。
HTML、CSS（SCSS）、JavaScriptのみで構成されていて「フロントエンドのみで終息」します。 なので、個人情報を送信することはありません。
編集データは一旦sessionStorageに自動保存します。
ブラウザを閉じれば個人情報が残ることもありませんので、共用端末での利用でも安心です。
JSONでインポート・エクスポートが可能ですので継続して編集が可能です。
各用紙サイズにて印刷とHTML出力が可能です。
（PDF出力もブラウザ機能で可能だと思います。）
履歴書（JIS規格）見た目のままで編集できます
今時この規格で作ること自体？って感じではありますが、使い慣れたJIS規格系の形式で編集できます。
今のところPCでの編集を想定してます。（現在、スマフォ対応に修正中）
A3見開き、A4、B4見開き、B5のそれぞれを選択が可能
以下の書式で表示切り替えし、印刷出力できます。
- A3（A4形式見開きで出力）
- A4（A4で左右1枚ずつ出力)
- B4（B5形式見開きで出力）
- B5（B5で左右1枚ずつ出力)
PDFとHTMLでの出力可能です。
HTML出力
HTML形式で履歴書を保存できます。
ウェブサイトにアップロードするなりして、リモート面接でも活用できると思います。
印刷
あくまでレイアウトフォーマット切り替えですので、ブラウザの印刷プレビュー等設定で印刷用紙は選択し確認してください。
PDF出力
また、ブラウザからのPDF出力機能（印刷機能でのPDFファイルで出力）を利用すればPDFへの出力も可能です。
編集内容は（sessionStorageに）自動保存
編集中の内容はブラウザのsessionStorageに自動保存します。
ブラウザを閉じなければ、リロードしても編集内容が消えません。
（もちろん、ブラウザを閉じてしまうとデータは消えてしまいます。）
localStorageでも良かったんですが、扱うデータが個人情報なのでブラウザを閉じたら消した方がいいかなぁと。
再編集用にJSON形式で保存・読み込みが可能
編集内容を保存したい場合、必ずブラウザを閉じる前にエクスポートボタンを押して保存してください。
保存形式はJSON形式です。
インポートボタンで保存したJSONファイルを指定してインポートしてください。
出力したJSONファイルはご自身で管理してください。
顔写真
ちゃんと画像を貼り付けられます。
- 顔写真欄をクリックして画像を選択してください。
- 画像を削除するには右クリックで削除メニューが現れます。
- 画像は4MB以内を目安に利用して下さい。
学歴・職歴
学歴、職歴、賞罰などの欄は、左揃え、中央揃え、右揃えに切り替えられます。
- 揃えを変更するには「学歴・職歴」の入力欄をダブルクリックするして切り替えてください。
きっかけ
現在、就職活動中のおっさんです。
履歴書を書くことが多くなったので、どうせならJavaScriptとSCSSの勉強がてら、作品として作ってみようかと思いました。
Qiitaで「履歴書」と検索してみると、いろんな方法で実装している方々がいるようです。
ここなんか、YAMLから生成は楽ですごいなと思います。
ま、被ってもいいから自分なりの方法で作ってみよう。
そして精進するには、できるだけ多くの人に見てもらった方がいいのかな？と。
あと、利用する人には個人情報を入れるものなので、サーバーには保存してほしくなかった。
なので、今回はクライアント側で全て終息できるものにしました（いやスキル的に・・）。
とりあえず、これで履歴書を書けるかな・・おい！そっち先だろ💦。
制作目的
- 以下の部分においての、HTML、CSS（SASS）、JavaScriptの勉強
- contenteditableの活用
- Web Storage APIを利用した永続的なデータの活用
- File APIを利用した永続的なデータの活用
- @media printの活用
- SCSSでの制作
- 標準ライブラリ内で作ってみる
- 自分も使うが、誰かに純粋に使ってもらいたい
制作期間
期間 4/28 ~ 5/17 20日間 total:60時間
| 工程 | 時間 |
|---|---|
| total | 60時間 |
実は、1ヶ月前からこういったアプリを作ってみようという構想はありました。
GitHubでもわかるのですが、その時のメモとCSSで一旦レイアウトしたものがあります。
そこからのスタートなので、構想や仕様設計はほぼ上記の時間に入っていません。
出力まわりを意識したレイアウトなので、SASSの学習をしてからのほうが断然良いと思い、一旦SASSを学習してから挑みました。
🙂これ正解でした。👍
もう、sessionStorageってなんなの💦からの状態からでしたので、Google先生との対話の時間の方が大半を占めていますね。
でも、個人的には「まずはやってみて、そしたら調べることがたくさん発生する」、ということが判っただけで十分成果を得たと思っています。
苦労した点
スマートフォンアプリ開発の講座を受けたことがあるので思ったんですが、OSの機能を利用できない分、「ブラウザ上のアプリを作るって、発想したものを実装するのに凄い苦労する」 といことがわかりました。
PCやスマフォでできることとブラウザでできることを、しっかり背景技術も学んでから区別できていないと、安易な発想では実装できんすね。
例えば、自身をHTMLファイルで出力するってもっと簡単にできるものと思ってましたし、印刷機能は基本ブラウザの機能に触るのでセキュリティ的に不可であることなど、思いつきの発想を実現するにはそれなりの調査と検証が必要だとわかりました。
もちろん、それをカバーするライブラリーなど存在しますが、「まずは自分で解決する」って、ついつい思っちゃいますよね。ここら辺は仕事でするのとは違うのかもしれません。
今後
早速、スマートフォン対応したいと思います。
スマートフォン対応
- スマートフォン用メニュー
- 入力編集方法の変更を検討
ユーザビリティ向上
- TOPへスクロールを追加
- viewを100%,150%,50%,画面に合わせるに選択可能
- ドラックアンドドロップ（JSON, image）
- ショーカットキー割り当て
- 入力値の制限及びチェック
- 写真画像のサイズ制限や、固定サイズへ変換（大きいサイズの場合等考慮して）
機能強化
- エクスポートファイル暗号化/インポートファイル複合化