月別アーカイブ: 2014年12月

さよなら2014年

2014年も今日で終わり。
本当に2014年は忙しく、(毎年言ってる)こんな自分に仕事をまわしてくれる人々に感謝しかない。

2014年はtwitterを個人としてはじめてみたり、ブログを30記事ぐらいだけど投稿してみたり、githubを始めてみたりして、そこから交流することが出来て非常に楽しいという感じでした。

いろんな技術に触れた

  • chef
  • angularJS
  • node-webkit
  • atom-shell
  • react

多分angular以外はお世話になりそうな気がする。
node-webkitとatom-shellはnode.jsさえわかれば楽にアプリが作れるので素直にすごいと思った。

反省

PC周りを最強にできなかった。

僕の作業環境は、地べたに座ってやるという感じで本当に体に負担がすごい。
2014年は机と椅子を買おうと思っていたんだけど、様々な出費が重なり、ドメイン失効で3万円吹っ飛んだりして椅子すら買うことができず、作業環境が整うことはなかった。2015年はまずはじめに机と椅子を揃えてPC周りを最強にしたい。

PCが壊れまくった

いつも使っているMacBook Air 2011が限界を突破しつつ有り、壊れたと思ったら復活するなどしたので買い換えたい。
Windowsの方はSSDにしたい。Windowsの方で最近は作業することもあったのだけれども、黒い画面やMacのいろんな作業環境になれるとやはりWindowsだとしんどかったりする。効率が5分の1ぐらいだった。

からだを大事にしたい

飲んだくれの毎日だったり、ダラダラ仕事を夜中にやったりしていて体をいたわってなかった。
最近若くなくなってきたのをひしひしと感じてきており、体力をつけるためにランニングとかいきたい。

ポートフォリオ作りたい

作る作る詐欺なのではやめに作っておきたい

来年の抱負

友人が結婚しまくってるけど関係なしにがんばりたい。
WEB以外でもいろいろできたらいいなーと思ってる所存です。

IEにも対応したレスポンシブSVGの作り方

これはSVG Advent Calendar 2014の参加記事です。
昨日(12/5)に引き続き僕が担当します。
明日(12/7)も空きがありますので、ぜひご参加下さい。

レスポンシブなSVGを作る

SVGは、Retinaであっても綺麗に表示されるため、僕はテキストや図など、Retinaのために2倍サイズを書き出すのが面倒くさい箇所をSVGで書き出しています。

通常のimg要素であれば、

的な感じで、ウィンドウ幅が狭まっても横100%で画像が表示されるはずです。svgでも同じような感じにしてあげると、モダンブラウザではうまく表示されるはずです。

IEで表示がバグる

ところがどっこい、IEだけはうまくいきませんでした。
(ここでのIEはIE9、10、11を指します。)

ChromeとIEの比較。Firefox、SafariもChromeと同じ表示でしたが、IEだけは表示がおかしい。

サンプルscss

サンプル

インラインSVGでは高さが計算されていない、呼び出しではアスペクト比がうまく計算されていないような表示の仕方をしています。

解決策

インラインSVGの場合

サンプルscss

レスポンシブiframeと同じような仕組みです。

呼び出しの場合

imgに横幅をセットしてあげるだけです。横幅100%だったら100%をセットします。

IEではどうやらimgに横幅をセットしてあげないと高さを計算してくれないようです。

IEでもうまく表示することが出来ました。

サンプル

おわりに

SVGを通常の画像として用いると結構ハマりどころがたくさんあります。(特にIE)
レスポンシブはデファクトスタンダードになりつつあるので、SVGを使おうと思ってこれでハマっていた人たち、これからハマる人たちの助けになれば幸いです。

7日のSVG Advent Calendar 2014にまだ空きがありますのでぜひぜひご参加下さい。

SVGスプライト(symbol)でposition:absoluteを使うとIEでずれる

これはSVG Advent Calendar 2014の参加記事です。
昨日(12/4)はshino212さんの「はじめてSVGでアニメーションを作った時の話」でした。おじさんのアニメーションが可愛い。

6日に投稿しようと思ったのですが、空きがあるので5日も投稿することにしました。まだ空きがあるのでぜひご参加下さい。

SVGスプライトとは

body直下などにインラインSVGを貼り付け、gタグの代わりにsymbolタグを用いて使いまわす手法です。リクエスト数を減らす効果があり、ページを書き換えるタイプのpjaxやSPAと一緒に用いるといい感じがします。

SVGスプライトでハマる

上記のように、ロゴを多用している箇所をSVGスプライト(symbol)を用いて対処しようとしてハマりました。
メインビジュアル部分の所をposition:relativeをかけ、SVGにabsoluteをかけ対処したところ、IEと他のブラウザで見え方が異なってしまいました。


右はWindows8.1のIE11。Windows7のIE9、10でも同じでした。

なお、position:absoluteをかけなければ同じ表示になります。

まあ、普通の画像であれば、

で右下固定で表示されると思ったのですが。。。

ずれて表示されてしまいました。

解決策

高さを指定してあげることで解決出来ました。

スタイルか、svgに高さをふってあげることでIEでもposition:absoluteで絶対配置することが出来ました。

サンプルはこちら

おわりに

IEのSVG表示はきれいなのですが、いろいろハマりどころがあるのが難点。

明日(というか今日)のSVG Advent Calendar 2014も僕が投稿します。内容はまだ考え中です。