ブラウザ上で新卒者向けの履歴書を作るツール。
サーバは使ってないので、外部にデータは送られず安心。
JSONでのエクスポート・インポートにも対応してるよ。
なんでこんなの作ったのか
この間生まれて初めて履歴書が必要になる機会があり、せっかくだから手書きしたらすごく大変で、これは人間がやる仕事ではないなと思い知り、印刷で済ませる必要性を感じた。
ちょうど同じぐらいのタイミングで、どこかの企業の履歴書作るサービスがバズってて、こんなので個人情報吸い出されるのも馬鹿らしいなと思って、自分で作ることにした。
印刷することを前提としている以上、本来ならTeXとかを使うのがふさわしいとは思うのだが、ブラウザさえあればどこでも動く手軽さとわかりやすさを重視してHTML5で作成した。
使ってるライブラリなど
- Vue.js: 単品。コンパイルとかもしてない
- Pure CSS: Normalize ＋α的な感じ
- Font Awesome: 右下のアイコンに
- LESS: 必要最小限簡単なもので十分だと思った
苦労した点
枠線問題
写真を貼るところをよけるように凹んだ枠線をCSSで描こうとするとすごく大変。
なので、今回は大抵ひとつにまとめられる名前と住所をふたつの箱に分けてしまって解決した。
ふりがな問題
履歴書では名前や住所にはふりがなを振る。大体記入欄の上部が点線で区切られていて、上にふりがな・下に漢字を書く。HTMLで愚直にこれを実装すると、ふりがなと漢字がそれぞれ左詰めになってしまって美しくない。ちゃんと対応する漢字の上にふりがなが乗るようにしようとすると、ちょっとひねる必要がある。加えて、住所の欄だとふりがなと漢字の間に郵便番号が挟まったりして、混迷を極める。
そこで今回はrubyタグで簡単に済ませることにした。点線で区切られているのは、あくまで記入の際のガイドラインなのだから、印刷で済ませる今回は必要ないだろうという判断である。
ただ、rubyタグはCSSで制御できる部分が少なく、細かい調整が難しい。
また、縦方向のセンタリングはルビが降られている文字を基準に行われるので、ルビと合わせて見ると中心からずれているように感じられてちょっと気持ちが悪い。
枠からのはみだし
編集で内容が変更されるので、文字数によっては枠からはみ出てしまうことがある。うっかり気付かないまま印刷してしまわないように、はみ出たら赤くなって注意を引くようになっている。
これは高さを固定したうえで、要素のscroll[Width|Height]とclient[Width|Height]を比較することによって検知している。
ただ、前述のruby（正確にはその中のrt）がよくわからない挙動をして1pxぐらいずれることがあるので、比較にはちょっと余裕を持たせている。
もう少しいじりたいところ
- フォームのバリデーションをきちんとやりたい。日付なんかは月に関係なく31日まで受け付けるようになっちゃってる
- 学歴・職歴・資格の編集フォームがいくらなんでも雑すぎる
- 文字の大きさ・文字間の幅などを柔軟に変更できるようにしたい
- 誕生日を入れたら中学・高校の入学・卒業年月ぐらいは自動で埋まるようにしたい
よくわかんないところ
- なぜかA4の高さぴったりの297mmにすると印刷の時に2ページになってしまうので、現状高さは296.9mmになっている
- 印刷することを考えると、幅はパーセントで指定するよりmmできっちり指定したほうがいいのか？
最後に
作ってみたけど、最初の機会以降ESばっかりで全然履歴書を要求されないのであった。
そしてほんとはフロントエンドの仕事はあまりしたくないのであった。