20190818-thumb

関連記事

デフォルト画像
2019.12.12
体調が戻ってきた

タイチョウ!オカラダノホウハ… 食欲がほぼほぼ回復した。1日1食的な地獄のような生活ともおさらばよ。 先週の日曜から鬼のような絶不調ぶりを見せつけたぼくなわけだけども、本気で死ぬかと思った。1年に1,2回死ぬほど高熱が出て死にそうになるのはなんなの本当に。医者行っても風邪とか疲労とかストレスとかみんな言うこと違うし。 お薬を出されて飲んでたわけだけど、多分腹の調子が終始悪かったのはそれが原因な気がする。だって一昨日薬が切れたら治ったし。お前整腸剤って言われたよね?自分の役目わかってる? 昼飯をある程度、それなりのものを食べて夜はほとんど食わないという生活とはもうおさらば!昨日もほぼ回復してたから実はラーメン食ってたし、今日も買い込んでたカップラーメンをおペロリいたした。 安心して外食ができるゾイ。環境(腸内)破壊は気持ちが良いゾイ! インフルじゃないのが本当に謎。ぼくの体どうなってんねん。

デフォルト画像
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.05.08
ネットメディア風デザインに作り直す計画

そろそろデザイン作り直す時期が来た 今のデザインに飽きてきたので、そろそろまたデザインを一新しようかなーと思ったりしてね? やはり、何かを作るならどこかをパクる、もとい参考にして作る必要があります。今回その対象とするのは「WEBメディア」です。 今の時代、必要な情報はネットで探す時代です。専門分野別に色々なメディアがネットに広がっているので、自分の好きな情報を自由に集めることができます。嘘を嘘と見抜けたい人は云々?知らん知らーん。 サイボウズ式 https://cybozushiki.cybozu.co.jp/ サイボウズのメディアサイト。細かい所のアニメーションが整ってて全体的にポップなデザイン。 デザインが全体的に凝ってて、メディアサイトとしてはデザイン寄りな印象があります。サイボウズのメディアサイトということなので、人を呼ぶ意味もあって力を入れてるんでしょうけど、非常に見やすいです。 画像の遅延読み込みだとかでページ自体も軽くてすげーしっかりした作り。多分だけど、サイボウズレベルの会社になると当然専用の管理画面とか作ってんだろうなって思います。WordPressがどうこうとかいうレベルじゃないのは当然。 自社がIT系とかシステム系だからといってそれができる人間が必ずしもいるわけではないでしょうけど、ここならいてもおかしくねえよなって…。 デザイン的に参考にしたい。 ferret https://ferret-plus.com/ マーケティング系の情報調べてると出てくるサイト。WEB業界人的には、SEO調べるとここに行き着く。情報としては最新のものがちゃんと並ぶので安心感がある。 見た目は正統派かつ機能的、までいって更にデザインもしっかりしてる印象?ちょっと前まではもう少し変なバグっぽい挙動がありましたが、ここ最近でリニューアルしたのかより小綺麗で変なバグもなくなりました。 余白がかなりなくてギチっとした印象を受けるサイトですけど、ブログ的な雰囲気があって結構参考にしやすいです。やっぱり最近のリニューアルで大分見やすくなったよな…? ここも参考にしたい。 以上みたいなのを目指す とりあえずですけど、今参考にしたい的な感じで挙げたサイトみたいなのが作りてえなって。デザイナーってわけじゃないので部分部分のパーツを完コピしながら作ることになると思いますけど、白ベースでそれっぽいのを作りますよ多分。色を使ったサイトって、ちゃんとデザインができる人じゃないと使いこなせなくてダサくなるんですよね。今のこのブログみたいな…いやまあそこそこ気に入ってますけど? ひとまずのデザイン目標的な部分としては、 ・白ベースで作る・動きのあるサイトを作る(マウスホバーの動きとか)・最後までやる 以上!そのうち作る!解散!