26
15

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

[失敗]HTML5とCSS3で履歴書を作ろうとした話

Last updated at Posted at 2016-04-18

「とりあえず物を見せろ」

はい。
manzyun/personal_history_made_by_html5: Making personal history made by HTML5 and CSS3

「なんでやろうと思った?」

  • 自分の勉強のため(主にCSS周り)
  • HTML5で履歴書を提出したらかっこよさそうだから
  • HTML5でちゃんと(?)組んだ履歴書なら、分散バージョン管理も容易そうだから
  • 〃、コンピューターでスクレイピングさせたりしてやれば人事の人が楽になることがもしかしたらありそうだから

自分の勉強のため(主にCSS周り)

しばらくHTMLとCSSを触っていなかったのと、もしかしたら今後HTMLとCSSを教える場面が来そうなので予習(復習?)したかった。

HTML5で履歴書を提出したらかっこよさそうだから

パソコンで打った履歴書を、フォーマットが一致しないからという理由で結局PDFにして提出している昨今がなんだかなあと思ったのと。個人的にワープロソフトで罫線をあれこれするのは非常に嫌なので(テンプレート使っても、行ごとに罫線を引いていて快適に履歴書が書けないものもあったりして)、
「それならHTMLでやればいいじゃん。最近のCSSなら印刷時の制御もできるんだし」
と思った次第。
あと市販の履歴書と比べて、項目を減らしたり増やしたりするのが容易だと思った。

HTML5でちゃんと(?)組んだ履歴書なら、分散バージョン管理も容易そうだから

特にGitでバージョン管理しようとしたら便利そうに思ったし、そして会社ごとに名前を付けて保存でもいいけど、ブランチを切って編集したらなんかかっこよさそうだったから。

〃、コンピューターでスクレイピングさせたりしてやれば人事の人が楽になることがもしかしたらありそうだから

これはHTMLの履歴書のフォーマットが比較的統一されたらの話なのだろうけど、
せっかくのHTMLなどのマークアップ言語の利点である「文章を構造化させる」という点がやっぱりいいので、これを利用して履歴書をスクレイピングして社員情報をDBに登録する。
そして登録した社員情報を元に(またはスクレイピングで)プロジェクト立ち上げ時に最適な社員を検索すると云うこともできるのではないかなと思った次第。

というより、section要素とかarticle要素をもっと積極的に使ってみたかった

本音はコレ。せっかくHTML5になって導入されたタグで、なかなかとっつきにくいということなので、とりあえず履歴書で、間違っててもいいからsection要素とarticle要素を使った例として履歴書を作ってみた。

「既にHTMLで履歴書作るサービス、あるじゃん」

ごもっとも。
DuckDuckGoではそれっぽいのはヒットしなかったが、Googleだとヒットした。

履歴書作成メニュー(HTML)

ただし先のサイトではこんな文がある。

このHTML版履歴書メーカーは旧サービスです。新しいPDF版の履歴書メーカーをご利用ください。

ということなので、
「とりあえず、自分がHTML5の利点を活かした履歴書を作れば、誰か幸せになるんじゃない?」
と勝手に思った。

「お前の意思は伝わった。そしてソースもみた。汚い。なってない」

プルリク、イシュー、お待ちしております。
manzyun/personal_history_made_by_html5: Making personal history made by HTML5 and CSS3

P.S.

別アプローチの紹介

別のアプローチだが、似たことを思った人が既にQiitaにいらっしゃったようです。
【Photoshop】アルバイトの面接に使える履歴書作成用PSDファイル作った - Qiita

現状

CSSが分からなすぎて辛い。Stylus使ってるから余計わからないのかもしれない。
とりあえず縦に罫線で囲まれた項目は作れたので、後は横フォーマットだろうか。
日本の罫線文化というのか表文化、こういう時困るというのが本音。

ということでプルリク、イシュー、カモン

manzyun/personal_history_made_by_html5: Making personal history made by HTML5 and CSS3

後日談

諸先輩方から
「いや、既にフォームがあるものなのに、マークアップ言語で組むのって、頭悪いんじゃね?(個人的偏見による要約)」
という指摘があったので、心折れかけてたけど、潔く諦めれた。

履歴書はそもそもフォームである

よく考えてみれば、履歴書の内容が動的に変わることは殆ど無いのである。
ましてやA4用紙2枚になるべく収めることが必要な書類なのである。

特別な例を上げると、資格や希望が現存の履歴書に収まりきらないのであれば、別紙に似た表を作ってそれを添付すればいい。

ただ、なんて言えばいいのか、直接マークアップ言語を叩くのはクールじゃなかったと思う。

HTMLとCSSが印刷に向かないわけではない

誤解しないで頂きたいのが、
「なぁーんだ。じゃあHTMLとCSSはやっぱりパソコンのためのものなんだね。だめじゃん」
ということではない。

僕の勉強不足とセンスの無さで、こういったフォーム的な文章をマークアップ言語とかで作ってしまったというだけの話。

だからもっとしっかり構造化されている一般的な文書にはHTMLとCSSは非常にぴったりだと思っている。
普段WordやExcelでいちいちマウスを動かして作っているモノクロの単調な文章が、案外HTMLとCSSに置き換えられるものだと個人的には思っている。

とりあえず

  • 僕の勉強とセンスが不足していた

    • もっと頑張る
    • 視野を広く持つ
  • 手段が目的にならないように気をつける

    • 今回まさにそれ。
    • 手段が目的にならないようにするためにはどうしたら良いのか?
      • 定期的な自分自身のチェック
      • どこかで「不向き」と感じたら諦める勇気

俺の屍を越えて行きたい人がいたら越えてください越えてください。

26
15
2

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
26
15

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?