こんばんは。
面白そうな事にどんどん手を出し続けた結果、日々忙しい生活を送っています。
ふと、季報的な物を書きたくなったので書きます。
10/27: monora rebuild
12/7: Adventar::List release
12/11: 某社に見学に行く / バイトを始める
12/14: monora improve
12/16: ネットワークスペシャリスト試験合格
monora rebuild / improve
12月に一番力を入れたのがここ。
新デザインの構想は結構前からあって、ずっと laboの方 にはデザイン案が置いてあった。ファイル名を見るに 2014/5/18 に作ったっぽい。
[caption id="attachment_947" align="alignnone" width="1920"]
2014/5/18 時点でのデザイン構想[/caption]
確か Adobe Creative Cloud の学生プランに入って Illustrator が使い放題になったので、使い方を学ぶべく作ったというところ。
ただ、この時はまだWebでこの見た目を HTML / CSS で再現するのは無理だと割りきっていて、いつかこのデザインが日の目を見ると良いな、という感じだった。
そこから1年半が経過して、ふと思い出したのが SVG 。
HTML 5 もそろそろ普及してきて良い感じに使えるんじゃない? と思いつつ、ものは試しで Illustrator で SVG出力してみた。
**「うん、普通に表示できるね」
**というのがその時の率直な感想。実はこれ、1年前の時点でできたんじゃない? とか思うけれど気にしない。
Illustrator は優秀で、それなりに読める SVG を吐いてくる。これは結構驚きだった。(コードジェネレータがまともなコードを吐いてくるとはあまり思っていない)
ただ、パスの部分は合成操作を多くしたせいか、結構長くてごちゃごちゃとしたパスが出力されていたので、その辺りも含めて一度全部書き直した。
もう1つ面白い発見があって、SVG の見た目の部分を html ファイル内に書くのがダサい!! と思っていたら、なんと CSS で書けることが発覚した。
http://www.w3.org/TR/SVG/styling.html#StylingWithCSS
6.6 Styling with CSS に書いてあって
svg circle {
fill: #3C241A;
fill-opacity: 0.64;
stroke: #3C241A;
stroke-opacity: 0.64;
}
というように SVG の属性 を CSS で書ける。とても便利。
問題はエディタがこういった仕様を知らないことで、手元の Sublime Text 3 では全く色が付かない……
そうして、これが
こうなりました
自分でも感動した。めっちゃ良い。現代って感じがする。
元より v1 の時点でも corner-radius が正式に出る前から使っていたし、丸っこいデザインが好きで、そういうデザインをしたかったというのがあっただけに実際にブラウザに表示された時は感動した。まだまだWebで丸を全面的に使ったサイトというのは中々見ないし、文字の配置なんかもイケてると思う。
ただ、SVG による難点もいくつかある。例えば <foreignObject> を使ってHTMLの要素 (<p> とか) を使わないと幅を固定して複数行表示ができない。けれど、<foreignObject> は現状でサポートされていないブラウザもそれなりにあるので、<text>と<tspan>を併用して地道に座標を当てる対処も必要。
ただ、今回は TypeSquare という、無料で和文のWebフォントが使えるサービス (リュウミンや新ゴのようなすごいフォントがタダで使えるすごいサービス ) を使っているので、どの環境でも同じフォントでほぼほぼ同じに見える……はず……
12/14 には improve と題して無駄な機能を付けた。
[video src="https://monora-monolog-media.1line.dev/ecdce6eba666ffe33ce9ec576a9aed5e.mp4" height="622" width="684"][/video]
カーソルを乗っけると色が変わったりブラーが掛かったりする。モダンな感じに動くし良いんじゃないかなみたいなノリ。
Material っぽく、カーソルを乗っけたところから色が変わると面白いかなと思ったけれど、結構実装がつらそうなので後回し。
今でも正しかったのか悩んでて、そのうち外すかも。
(この記事を書きながら Firefox で検証しようとしたら、この変更のせいでまともに文字が描画されていないことに気が付いたのでブラーは無効化しました……)
背景はデザインを変更して少ししてから変えたもので、上の画像のものは大学に一眼レフをふらっと持っていって撮ったもの。
背景にも地味ながらこだわっていて、もっとバリエーションを増やしていきたいなと思う。そして年も開けたしそろそろ差し替えたい。この辺りの話はまたいつか。
そんなこんなで結構良い感じのデザインをしたと勝手に思っている。コンテンツを増やしていきたいと切実に思う今日このごろ。
この記事が公開されているときには既にアドベントカレンダーは終わっているんですけど……
2014年12月にリリースして、その後しばらく動いていたんですが最近またサーバー環境のあれこれでぶっ壊しまして、ほぼほぼ1から作り直しみたいなことをしました。
ただ、今回はなんやかんやでクローラが上手く動かないし直そうにも忙しいしで困った。
(今確認したら何故か今日の日付が表示されているし困った。後で直します。)
某社へ見学に行った / バイトを始めた
書いてある通りで、何の変哲もないです。
見学に行ったつもりが仕事してました。何か前のバイトでも同じことをした気がする。学習してないですね。
業種としては自社開発のWebサービスの運営企業で、Wantedly にも載ってるような、いわゆるスタートアップというところです。僕は Wantedly 経由じゃないですけれど。
前からインフラに興味があって、たまたま中の人からお話を伺う機会があったというタイミングの良さもあり、インフラ関連の開発をさせて頂くことになった。
これを書いてる時点ではDockerとかAWSとかそのあたりを弄っています。
いい椅子があって、壁で仕切られて無くて明るくて美味しいコーヒーが飲み放題でうんぬんかんぬんという、自分の想像するベンチャー像をまさに具現化したような存在でとても良い開発環境で作業をさせて頂いています。
近況は以下のとおりです。
http://twitter.com/sukukyon/status/683996193932746752
http://twitter.com/whywaita/status/684060812017729536
http://twitter.com/whywaita/status/684061949378727936
思いつきで名前を付けるのは良くないですね。意味のある名前を付けるよう心がけましょう。
ところで、前のバイトを退職したという事実は一切なくて、、むしろ新しく始めたこっちの方が勤務日数としても結果的な給料としても少なくなるはずです。(現状では)
気になるお給料については前の会社と同じ時給という感じにしてもらった。半年後、1年後となった時にどっちの方が高くなっているのかは個人的に興味深いところ。(今の時給は1000円台前半です。まさかこの歳でこんなに貰えるとは……)
前からいた会社の方では、最近はもっぱら iOS 開発を主にやっています。社外秘と書かれた紙を見るだけでワクワクするし、Objective-C という言語は知れば知る程賢い設計だなあと感動する。Swift にもそういうワクワクはあるのかな。
12/16: ネットワークスペシャリスト試験合格
ネスペに合格しました。これで、IPAの情報処理技術者試験は AP/ES/SC/NW を取ったことになります。
テクノロジ系だと、あと DB は取れると思いますが、今ひとつ興味が……
マネジメント / ストラテジ に関しては全く歯が立たないですし、ひとまず IPA に関してはこのあたりで卒業したいかなというところ。
NW は興味がある分野といえど勉強期間が短く詰め込み学習になったのもあって一番つらかった。
https://twitter.com/sukukyon/status/677722585090551808
また3週間後に資格試験が控えている気がしますし、これを取ったらしばらく資格を取るのはやめたい。
ではまた。