読者です 読者をやめる 読者になる 読者になる

たそがれノート

日記と本と、時々Web

2016年の振り返り

日記

今年は結構環境の変化が大きかったかなあと思ったので、年越し前に軽く振り返ってみることにします。

仕事について

htmlとCSSへの理解

昨年7月に部署移動をしてディレクターからhtmlコーダーになって約一年と半年弱。毎日ひたすら来る依頼をこなし続けて、理解も深まったと思うし、考え方もいくらか変わったと思います。

というのは、昨年私が部署移動をしたばかりの頃はPCサイトばかりを作っていたのですが、徐々にレスポンシブ案件の割合が増えてきたからです。

それまでは『PC』という単一の環境だけ考えていれば良かったものを、『タブレットスマートフォン』というインターフェースの異なるものにまでワンソースで対応しなければなりません。

これは大きな変化で、PCとスマホ版のカンプを見比べながら複数の場合を想定してコーディングを進めないといけないため、当初はなかなかコツがつかめませんでした。

けれどできればコーディングはワンソースで済ませたいし、別々にコーディングするのは最後の手段……と言い聞かせて色々試した結果、いくつかのやり方があって、その時々に応じて最適と思われる方式はやはり違うなあと。

たとえば表示速度を上げるにはCSSスプライトが良い、とはいうものの運用段階では差し替えに相当の手間がかかるので、差し替えが頻繁そうな部分には使わないとか、『運用』をより加味して考えるようになりました。

他、以前は読んでもいまひとつ理解できなかったCSSコードも「なるほどこういう仕組みか」と納得できるようになったり。

やはり新しいことを勉強して実践できるようになるのは楽しいです。

わからないことを尋ねられる人が増えた

以前はほぼ独学と職業訓練校で教わったことをベースにコツコツやってはいたものの、やはり現場では画一的に適用できなかったり、古いもの(昔流行ったスクリプトなど)やあまり有名ではないプラグインなどはドキュメントも手に入りづらかったりでどうにもわからない、ということが多いです。しかし多少人員配置に変更があってそういったことを尋ねられるようになりました。

これは個人的には相当嬉しいことですが、反面頼りすぎになってはいけないと、尋ねるときは疑問点を整理する、事前に調べられるところまでは調べる、自分なりに考えてから聞きに行く、ということを心掛けていくようにしています。

ディレクター経験は意外と生きているが、ディレクターになりたいとはあまり思わない

コーダー部署に異動になる前はサイト運用のディレクターでしたが、修正や追加が来そうな箇所を把握しているため、指示がきた時点で確認する、あるいは対応できるように準備をしておくというある程度先回りの思考に役立っている気がします。

といって、ディレクターに戻りたいかと言われれば、やはりコーダーの方が向いているし楽しいので答えはノーなのですが。

それから、尋ねられたことに対してベストと思われることを述べる、あるいは可能不可能を答える、提案をするということはできるのですが、それを物柔らかく伝えるのがどうも不得意で(はっきり言い過ぎてしまう)、特に顧客との折衝は苦手……ディレクターを挟んでやり取りする作業者の立場がちょうどいいのかなあと。

個人活動

趣味

趣味の活動を満喫しました。ブログをあまり更新しなくなってしまう程度には。

とりあえず気になることに対してはのめり込みすぎてしまうし、それが長所という面もあるとは思うのですが、バランスをとっていきたいですね。

健康面

太りました。体重計を昨日購入しまして乗ってみたら、驚きの10キロ増。あまり食べていないと思うんだけど……というお決まりのセリフを吐きだしそうになるのをぐっとこらえました。数字が物語っています。

確かに様々なストレスからのドカ食い、と食べ過ぎによる苦しさを繰り返していた自覚はあるのでむべなるかな……悪玉コレステロールはギリギリの数値。

とはいってもなにしろ飽き性で根気が必要なダイエットは続かないので、

  • エスカレーター・エレベーターは極力使わない
  • 朝30分早く出て数駅分歩く
  • 毎日体重をはかる
  • 無理して食べきらない

という縛りを課してみます。明日から。朝駅まで歩く、については雨とか天気の悪い日はお休みで……というゆるい縛りですが、実行できた日は会社近くのカフェで朝お茶をしてもいいという特典をつけたら続かないかなあ……。

カロリー的には大した消費にならないと思いますけど、パソコン仕事なので体力をつけるにはこんなところでもよいかなあと。

無理して食べきらない、というのは残すことに非常に罪悪感があって、お腹いっぱいでも少々無理して食べきってしまうのですが、これははっきり言ってよくない習慣ですよね。

できたら10キロと言わず15キロくらい落とせばベスト体重になるので、これはゆっくり取り組んでいこうと思います。

2017年に向けて

もっと技術を磨きたいのと、コーディングに加えてサーバの方のお手伝いの業務も加わったので、せっかくだから少しそちらも勉強したいところです。

とりあえずルーチン作業をもう少し手早くできるようになったら、やってみたいことを打診してみようと思っています。

あとはダイエット。趣味活動もそこそこ。

年々人生に楽しみが増えていくような気がするのですが、来年もなにか新しいことができますように。

久しぶりの日記

日記

何と半年以上もブログを更新していなかったことに自分でも驚いているのですが、本当に時間が無かったという訳ではなく(一時的に土日出勤に残業が重なる状況もあったのですが)、簡潔に述べるのであればブログより日々の楽しみを優先したかった、ということです。記事を更新するだけで大体1~2時間∞は必要ですから、これを別の活動に振り分けるだけでもかなりの時間が捻出できます。

ブログを書かなくても日々は過ぎていく訳で、これまでブログに使っていた時間を余暇に注ぎ込んだ結果なかなかに楽しかった。私にとってブログを書くというのは極めて内省的な行動な訳でして、そのために使っていた時間を楽しみに振り分けた結果、色々と知らなかったことを知ったり体験することもできました。

一度何かにはまり込むと凝るタイプなので、そのタイミングでぱったりブログ更新が途絶えるあたり我ながら酷くわかりやすいです。

そしてこうやってブログを再び書き始めたということは、何というかちょっとやっぱり内省的になりたくなってきたのです。外に広がる時期と中に籠る時期というのか、とりあえず私はそういうのが交互に来るようで、わーっとはまり込んだと思ったらぱっとやめてしまうとか。

htmlコーディングも業務として使うものについてはある程度型が決まってきたということもあり、もうちょっと原理を知りたいとか現状不便を感じるところを改修したいとか、そういう方向に目が向き始めています。

現状仕事としているhtmlコーディングというものは将来的にどうなっていくんだろうか、とかもよく考えます。見た目を再現するだけのコーディングであるなら海外の技術者に取って変わられるだろうし、もっと言えばいずれは機械に取って変わられそうです。

となれば人間にできることとして構造の綺麗さとかゼロとイチの間みたいなコンテンツをうまくWEBで再現するとか、その辺りを詰めていく方がいいのかなあとか。そもそも、これは自分が還暦になるまで存在する業種なのかとか。

年齢的にも要するにアラサーでまあ何かするならそろそろラストチャンスなのかなあとか、色々考えることもあるのですが、とりあえずそんな感じなのでした。

あとささやかな目標をひとつ挙げると、今年中にkindle本一冊くらいは何か出版してみたい。体験としてやってみたい。

【お題】実録:片付けられない家族の分析をしてみた

シンプルライフ 雑記

今週のお題「わたしの部屋」

写真向左:家族のスペース/右:私のスペース

現在六畳一間にて兄弟と同居しておりますが、シンプルライフ派の私に対し、どちらかと言えば片付けられないタイプの家族では衝突が起こらないはずがありません。というか、つい最近も激突して、「ひとり暮らしがしたい!!!!!」と爆発した私です。

写真の通り、ざっくりテーブルを半分ずつお互いの領土にしております。机の下も同様ですが、領土侵犯が激しいので毎日のように押し返しが必要です。

写真左:家族のスペース/右:私のスペース

部屋には他に、家族のパソコンが置いてあるテーブルがもうひとつあるのですが、こちらの机の下には教科書とか他細々したものがみっしりと詰まっており、写真と同様足を入れることもできない状態になっています。

他の場所についても、大体似たような状態です。

……という訳で、冒頭の通り激突したのですが、一向にあらためる気配がないので、この怒りを分析に向けてみることにしました。

続きを読む

運動靴とリュックサックで通勤をはじめた

日記

先週あたりから、通勤の際に運動靴とリュックサックに変更しました。高尾山登山が思いのほか楽しかったので、もっと楽に登山したいという気持ちから、3年ぶりくらいに運動靴を購入したのでした。で、レジャーにしか使わないのはもったいないよね、と思ったので、通勤にも使ってみることに。

そしてリュック。こちら15年か、下手したらもっとくらい使っていませんでした。そもそもリュックの使い勝手はどうだったっけ……と首を傾げる程です。

でも無料券をいただいたので気まぐれに行ってみた人生初整体で「ちょっと歪んでますね。重たいものをこちらばかりにかけてませんか?」といわれたんです。自覚は、ありました。私は右側ばかりに鞄をかけてしまうのです。

今はまあ「少し歪んでる」程度ですけど、このままいくとたぶんあまり良くはないだろうなあ、とは思っていたので、片側ばかりに負担をかけるのはやめよう、と思いました。

という訳で、こちらは家族のリュックを借りて、運動靴&リュックの通勤がスタートしたのでした。

感想

運動靴を久々に履いてみて思ったのが、「クッションがぜんぜん違う!」ということでした。パンプスは着地したときの衝撃がダイレクトに伝わるのです。確かに足が疲れやすいのも頷ける。一方運動靴は「ポヨンポヨン」というか、反発する感じがあって足への負担も段違いでした。すごいよ運動靴。

10分歩くくらいで「足が疲れた……」と思っていたのがまるで嘘のよう。

リュックも重量が左右に均等に分散されますし、楽。赤ん坊から重たい荷物まで、身体に密着させて「背負う」のは実に合理的な選択だったんだなあと思いました。

通勤方法の選択肢も増えた

ちょっと早く起きられたとき限定になりますが、天気が悪くなければ乗り換え先の駅まで歩くようになりました。

パンプスのときは片道30分を歩く気にはとてもなれませんでしたが、運動靴とリュックであればまあちょっとした散歩がてらというくらいです。

それに歩いた日はなんだか気分が上向きなのに気がつきました。体力は使ってるはずなのに不思議ですね。

たぶん、ぎゅうづめの満員電車に乗るということが私にはものすごいストレスになんだろうなと思います(ストレス耐性があまりない割に、自分がストレスを感じていることに気づいていなかったりするので、これはひとつの発見でした)。

デメリット:スーツに合わないのとリュックはものを取り出しにくい

出勤用の服を考えるのが面倒、という理由でできたらスーツ通勤がいいんだけどなあ……と思う訳ですが、リュックと運動靴ってスーツには合わないんですよね。

リュックは、スーツに合いそうなものとなると革で肩紐が細かったり、小さすぎたり。あと構造的に仕方がないですが、物を出すときに背中から下ろさないといけないのが手間です。

いつまでも家族のものを借りている訳にもいかないので(今は特に使ってないからいいよとは言ってくれていますけど)、しばらくはリュック探しをしようと思います。

雪が降ったので試しに乗り換え駅から歩いてみたら案外面白かった

日記

東京は積雪で電車のダイヤが大変なことになっていました。普段降らないから備えもないのだろうし、都会の交通機関は天候不良に弱い……ということをひしひしと感じました。

そんな時はせめて乗り換え先の駅まで歩いた方がよっぽど確実だし、精神衛生上も良さそうです。

しかし、これまで乗り換え先の駅から家まで歩いたことがなく、道もわかりません。

今後帰宅困難者になっても困るし、今日は足元が不安なのでヒールもはいていない。

よし! 乗り換え駅から家まで歩いてみよう!

と突発で徒歩帰宅してみましたが、案外楽しめました。

思いついてから帰宅までの道のり

まずはルートを調べる

基本ですよね。調べてみたところ、大きな通りをひたすらずーっといけば良さそう、というのも決行の決め手でした。裏路地のようなところはちょっと歩きたくないですし……。

用心はしておいて悪いことはありません。

距離から所要時間を大雑把に計算しておく

調べてみたところ、大体2.5~3キロくらいの距離。

中高時代の競歩や部活の経験からして、私の歩く速度は1時間に4~6キロ程度。ということを踏まえて、3キロ程度なら30分くらいで帰れそうと予想しました。

30分、舗装された平坦な道を運動靴で歩く、というのはまあ大丈夫そうです。

大まかに時間を計算しておくのは、行き過ぎ防止だったりもします。15分くらいのはずなのに、30分近く歩いている……というのは道を間違えたことに気づくきっかけにもなります。

ちなみに一般的には分速80メートルで計算されるようです。

腹ごしらえと水の準備をしておく

お腹が減ると不安になります。知らない道を歩くのですから、余計です。そういう訳で、帰りがけに外食をして、水を鞄の中に入れておきました。

脳内マップと照らし合わせたりポイントを覚えながら、ひたすら歩く

歩いていると、あ、この道知ってる、とかここを入ったらあそこらへんに出るんじゃないかな? というのに出くわすので、その度に当初のルートから少し逸れて予想を確認していました。確認したら予定ルートに戻る、の繰り返しです。

別に寄り道はしなくてもいいんですが、現在位置の大まかな確認と、迂回ルートを覚えておくと脳内マップが広がりやすくなります。

他、トイレや物資補給や休憩ポイントとしてコンビニ、飲食店なども意識しつつ。

時間は、寄り道でロスした分はゼロとして計測。

大体このくらいあれば歩ける、というのを知っておくとこれもまた心の余裕になります。

帰宅後、もう一度地図を眺めてみる

本日のおさらいとして、もう一度マップを見ながら歩いてきたルートをざっくり復習しておしまいです。

歩くのは面白いし快適だった

電車で移動をしていると、道や位置関係などが各駅を中心にぽつん、ぽつん、としか覚えられません。

今日歩いて移動したことで、それがきちんと線で繋がった感があります。

知らなかった店もぽつぽつ発見したし、なにより人が密集した電車に乗らなくて済むのが快適です。

どうも電車に対しては自分でも思っていた以上のストレスを感じていた模様。

朝も、時間は電車の3倍以上かかりますけど、気分次第では歩いて行ってもいいかも知れない、とまで思いました。

今日は徒歩の日、とか作ってみても良さそうです。

2016年の過ごし方

日記

明けましておめでとうございます。

のんびり綴ってきたこのブログもいつのまにやら5年半程になりました。相変わらず零細なブログですが、見てくれている人もいるようで、ありがたい限りです。

今年もそんな感じで続けていきますので、よろしくお願いいたします。

さて、年明けということで、今年はどんな過ごし方をしたいかどうか書いてみます。

仕事

昨年後半から異動をしてHTMLコーダーになりました。
去年は来る仕事を納期内に仕上げることで精一杯でしたが、今年はスピードアップと、できればマークアップエンジニア、あるいはフロントエンドエンジニアを目指すために技術の習得をメインにしたいです。

具体的にはhtmlやCSSの仕様を知ること、phpJavaScriptの勉強に力を入れることになるでしょう。

得意なことを伸ばそう

コーディング方面に偏った理由は、デザインに関しては興味があまり持てず、仕様や効率的な組み方を考える方が1000倍楽しい……ということを再確認したからです。

多少のデザインはそれでも必要ですが、好き嫌い以前に興味自体が持てない能力を底上げするより、面白いと思えることを伸ばした方が効率がいいのでは、と考えました。

いい大人なので、小さい子供のように苦手なことまで全方位伸ばす時間もなければ、必要もないのです。それでいいじゃないかと。

個人活動

海外旅行に行ってみたいなあと相変わらず思っています。

できたらある程度(数ヶ月くらい)住んでみたいという気持ちもあるのですが、それは経済的にも語学能力的にも厳しいので、とりあえず旅行だけでも。

他は本をたくさん読みたいです。大体において、本をたっぷり読んで美味しいご飯を食べていれば比較的幸せなタイプの人間なので、個人活動は何年経っても大して変化がないです*1

引き続き高尾山

昨年末、高尾山に行きたい、と言っていましたが、実は日記の翌日に登頂済みです。

それでブログを書いてしまっても良かったのですが……念願のなめこ汁は残念ながら営業時間外で食べられなかったので、リベンジの機会を狙っていたのです。

しかし忘年会、土曜出勤などで叶いませんでした。

という訳で、可能であれば雪が降る前に高尾山に行って(春は花粉、夏は虫で死ぬので……!)なめこ汁を飲む! という方向に修正いたします。

リベンジできるかな……?

Kindle本を出してみたい

書くテーマもなんにも決まっていないですけれど。電子書籍出版というものをしてみたいというだけで、一冊出したら満足してしまう可能性が大です。

総括:今年もマイペースです

ざっと書き出してみましたが、引き続きマイペースにやっていこうと思います。

 

*1:ただし、本を読んで唐突に『×××××したい!』と言い出すことはよくある

Adobe Blank(Webフォント)を使った画像置換 New Kellum method

Web html・CSS

初めてレスポンシブ案件のコーディングをすることになりました。

メディアクエリで背景画像を入れ替えたりする都合上、避けて通れないのが画像置換。なにかいいやり方がないかなと、調べていたらおそらく日本語ではまだ紹介されていないNew Kellum methodという方法を発見したのでご紹介します。

画像置換とは

サンプル

画像ですよ!

このように、タグの中に入っているテキストを隠しつつ、背景画像を表示させる方法です。

コードはこんな風になっています。

■html
<p>画像ですよ!</p>

CSS
p {
width: 113px;
height: 38px;
background: url('置き換えたい画像のURL') no-repeat;
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
}

Scott Kellum Methodという方法で、-9999などで画面の外にテキストを飛ばしてしまうより軽いとのことです*1

今のところこれがメジャーなのかな、と思いきや、New Kellum methodというものがありました。

New Kellum method

サンプル

画像ですよ!

■html
<p>画像ですよ!</p>

 

CSS
@font-face {
font-family: "AdobeBlank";
font-weight: 100;
font-style: normal;
src: local('AdobeBlank.otf'),
url("AdobeBlank.eot") format('eot'),
url("AdobeBlank.ttf.woff") format('woff');
}

p {
background: url('置き換えたい画像のURL') no-repeat;
font-family: AdobeBlank;
}

※サンプルはgoogleドライブにfontファイルを入れてWebフォントとしています。

乏しい英語力を総動員した結果わかったのですが、Adobeオープンソースで出している目に見えず、空白にもならないフォントを利用して画像置換を行う方法のようです。

米Adobe、見えないフォント「Adobe Blank」をオープンソースで公開 | OSDN Magazine

本来の想定としては、重たいWebフォントを読み込むまでの間、標準のフォントが表示されないようにしたりするものだそうです。サンプル通り日本語でも使える様子。特に高さや幅を指定しなくてもぺちゃんこになって置換している背景画像が見えなくなるということはないのかも。サンプルは画像が小さいだけかも知れないですが……。

ざっと調べてみましたが、この方法、日本語で紹介しているところは見当たりませんでした。日本語のWebフォントは重たくて難しいですから、発案当初(2013年くらい?)はみんなピンとこなかったのかも知れないですね。

こんな方法があるんだ、と感心しました。

Webフォントとしてはアイコンフォントなどはかなり使われるようになってきたし、画像置換の方法としてはそろそろ実用を考えてもいいものなのかも知れません。

参照:The new Kellum method

 

*1:ただ、現在では通信速度や端末性能の向上により、それ程差はない場合も。また、改行するテキストには使えなかった。2行目のテキストが消えない。