04

関連記事

2019.09.05
そろそろ作ってくれって言われたから…

名 刺 例の件(?)で、名刺がほしいとか言い出したのでぼくで作ることにしました。Photoshopもほしいなと考えてたのでついでってことで。 デザイナーでもなければ絵が描けるわけでもないので、とりあえずなんか適当に世の中に溢れてる名刺を見て考えました。 世の中のデザイナーはどうやって名刺を考えてるのかわからんけど、とりあえずこんな感じで作ってもらうことに。名刺ってPSDファイルを印刷屋に渡せば作ってくれるよね? 裏面も一応作りましたが、どうなんでしょうね。値段変わったりするんかな。 着々と事業計画的なものが出来上がってきていますが、果たしてお仕事は貰えるのかどうかという疑問。ぼく的には、WEB知識0の状態で営業行ってもお仕事貰えないような気がするんですけどね。せめて教本とか読んだほうがいいんだろうなー。 かといってぼくが矢面に立ちたいとは思わないです。とはいえ、流石に打ち合わせとかになったら行く必要が出てくるかもしれません。その辺は本業である程度やってるから多分大丈夫だとは思うんですけど。デスノートのLみたいに顔出しNGでSkypeとかSlackだけで完結できませんか?できませんかそうですか。 なんかもう来る所まで来てしまったような気がするので、あとは流れに身を任せ静観するつもりです。多分なんとかなるでしょ。 それでは今日はここらでサヨウナラー

デフォルト画像
2017.06.28
WebFont LoaderくんがwebフォントのFOUT問題を解決してくれた話

WebFont Loader 昨日のちらつき、読み込み速度問題が本日解決いたしました。 その立役者となってくれたのでWebFont Loaderくんです。 ネットをひたすら調べてたら結構出てきた単語だったので調べてみました。 どうやら話によれば、Webフォントの読み込みイベントを実装してくれるらしい。 つまり、 ①ローディングしてるとき ②ローディングが終わったとき ③ローディングに失敗したとき とかを判定してくれるらしい。 これを使ってFOUTとかいうクソ問題を解決している人が多いらしい。 ほんとかよとか思いながら使ってみました。 font-familyで源ノ明朝を読み込んで、後はJSで制御するだけ。 よく見ると、JS以外は全部普通にWebフォント使う手順なんですよね。 使い方とかを書く気はないので気になる人は調べてね。 効果 これで解決できる問題は、再描画によるフォントのちらつき。 ブラウザによってはWebフォントを読み込むまで代替フォントを出すんですよ。 そんで読み込み終わったらそのフォントをWebフォントに差し替えると。 ぼくが差し掛かってた問題はこの辺が大きくて、基本的にブラウザは HTML→JS→CSS→画像・フォント (詳しい人からすれば違うかもしれないけど) (所謂DOMツリーとかそういう?レンダリングする順番みたいな?よくわかんねえ) って順番で読み込んでいるみたいだったので、その上フォントが重すぎて時間がかかっていたと。 上の順番のHTMLからCSSまでで既に1秒ぐらい掛かってたわけで。 そこにフォントがWait+コンテンツロードで5秒とか追加されてたんですね。 そうなるとレンダリングが完了するまでに6,7秒掛かると。 ブラウザによってデバイスフォント表示の時間とか規約が違うのでそこも困りごとでした。 IEなんて常に代替フォント表示し続けやがるし。 そういうのを今回のプラグインが解決しました。 フォントのロードイベントを判定できるので、ロード完了までVisibility: hidden掛けるだけ。 しかも優秀なのは、その判定がCSSでできてるってことですよ。 なのでこっちはCSSで自動付与される.wfなんちゃらにhiddenかければ解決。 終わったらvisibleに切り替えると。 ただ、別にページが見えるまでの速度をなんとかしてくれるわけじゃないんですよね。 なのでWebfontloader側でsettimeoutの時間を伸ばさないでいたら代替フォントが出てきました。 初期値は3000みたいなので、思い切って10000くらいまで伸ばして解決。 めっちゃ問題起きそうだけど、オッケー貰ったからオッケー。 源ノ明朝滅べ 嫌いじゃないんですけど、今回みたいな問題が起きるのが辛いです。 単純にフォント容量が大きいだけなんですけども。 しかもまだ出たばかりで、CDNとかも用意されてないんですよね。 いやCDNにした所でどれくらい変わるのか知りませんけど。 ちなみに、ちらつきの方は解決したんですが、容量はどうにもなりませんでした。 最終的に第一水準漢字と第二水準漢字を含めたサブセット化をして終了。 今回フォントを使うサイトではかなりこぼれた漢字があったのでその辺は手作業で対応。 今後のことを考えなければすべて円満に解決しました。 まあ2週間後とかに追加コンテンツが出てくるんですけどね、その辺はしーらない。 というわけでして、なんとか今日中に終わらせることができましたよ。 なんだかんだ来週までとか無理だろとか思ってましたけど、良かったです。 次font-familyとか使うときは、対象のフォントのサブセット化を許可してほしい。 軽くさせろ。 それでは今日はここらでサヨウナラー

2020.01.29
身内に同人音楽オタがいるのは前世で相当な徳を積んだ証拠

M3まであと32日です なんてことのない日記です。 気づけば1月ももう終わりに近く、2月に入ろうとしています。2月になりますと、とうとうM3のカタログが販売されるようになります。ぼくがとらのあなに駆け込むシーズンでもあります。(ちなみに販売は2月1日から) さて、例のM3サークルチェッカーですが、まるで作業が進んでいません。これがないとぼくもサークルチェックする気にならないので、頑張って進めよう進めようと…ね。そんな最中にSteamが旧正月セールとかわけのわからんもんを始めたばかりに、余計作業が進みません。俺を解放してくれ!!! ちなみに、実際の作業進捗としては大体30%ぐらいです。心の中ではずっと「もう90%終わったな」とかほざいてます。ほんとです。 実のところ、必要な機能のガワ部分は70%ほどできてまして、チェック機能をどう実装しようかと迷っている状況だったりします。結構大幅にUIを変えてしまうので、どうするのかが悩みどころなんですよね~。 こういう色で選択するタイプのUIは、通販サイトとかファッション系のサイトであったりしますが、ほどよいものがないんですよね。ですので、ここは大手である「Comike Web Catalog」をパクってくることにしました。 ここはこんな感じで、サークルカット横に3列ぐらいでガッと表示してます。ただ、当然ですがサークルカットを持ってくるなんて荒業ができるわけもないので、その辺は多少レイアウトの構成を考える必要があります…。そういうの苦手だからパクろうとしてんのにね。 というような状況ですが、予定としてはぼくがサークルチェックをはじめる前までには実装したいなーと思ってます。大体2月の中旬から下旬ぐらいですかね。流石にそれまでには開発完了してると思います。多分。 余裕があれば今チェック付けてるやつのリストとかも一斉表示できるようにとかできるはず…。できたい…。がんばる…。