chocotakaの日記

日々技術的な事で学んだ小さな事をを自分なりに書いていきます

低速度回線での検証

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

普段から安定した回線で開発をしたりしていると、つい低速度の回線環境での表示がどのようになっているか見落としがちになってしまいます。 そこでChromeディベロッパーツールのNetworkタブで簡単に回線の調節をする事ができます。

設定変更

さっそくディベロッパーツールを開いて、Networkタブを選択してみましょう。 f:id:chocotaka:20180109231315p:plain

右上にOnlineとなってるセレクターがあるのでそこをクリックすると

f:id:chocotaka:20180109231325p:plain

のように回線の種類が表示されます。 Slow 3Gとあるので試しに選択して、ページをリロードしてみると今までサクサク動いていたページもモッサリになります。

カスタマイズ

さらに一番下にあるAddを選択すると図のように自分で好きなようにカスタマイズが可能なので、検証してみたい速度に設定することが可能です。

f:id:chocotaka:20180109231825p:plain

メタ theme-color

theme-color

GoogleiOS アプリやAndroidChromeでWebサイトにtheme-colorを設定すると、アドレスバーの色を設定することができます。

実装方法

<meta name="theme-color" content="#ffffff">

head内にmetaタグを設定するだけです。contentに設定されたカラーコードの色に変化します。

実用性

これを設定したことによって何かに大きく影響があるというわけではありませんが、少しは他のサイト差別化したりサイトの特色を出したりすることができるのではないでしょうか。

他にlighthouseのスコアには設定していないと突っ込まれたりしているようなので、スコアを気にしている人は設定するのもいいかもしれません。

f:id:chocotaka:20171213221526p:plain

developers.google.com

font-display

webフォントの読み込み

ローカルフォントがあれば読み込みに時間はあまりかかりませんが、webフォントの場合はローカルフォントと比べると読み込みに時間がかかってしまいます。 この影響でページのロードをしてからテキストが表示されるまでの間にユーザを待たせてしまう事があります。 font-displayというCSSプロパティで、webフォントを読み終えるまではローカルフォントを代替的にロードし、テキストの表示をする事ができます。

使用例

@font-face {
  font-family: "sample";
  font-weight: 400;
  font-style: normal;
  src: url("font.ttf") format("ttf");
  font-display: swap;
}
p {
  font-family: "sample", sans-serif;
}

これによってpタグによって表示されるテキストは設定されたwebフォントが読み込まれるまでは一時的に、sans-serifでテキストの表示をされるようになります。

Can I use... Support tables for HTML5, CSS3, etc

chrome ディベロッパーツール 「Coverage」

chromeディベロッパーツールでCoverage機能を知っているでしょうか?? chrome 59 から使えるようになった機能ですので、使いたい場合はバージョンUPをしましょう。

js and css coverage

どのような機能かというと、使用・不使用のcssjsのコードを表示してくれる便利な機能になります。

使い方

f:id:chocotaka:20171128215539p:plain chromeディベロッパーツールを開いて、Coverageタブを開きます。

f:id:chocotaka:20171128220140p:plain レコードボタンを押してトレースを開始します。

f:id:chocotaka:20171128221156p:plain そうすると表示されているページで使用されているコードは、不使用のコードはで色が付いて表示されるようになります。

最後に

不要なコードを見つけることができるのでとても便利です。コードの改善にぜひご活用ください。

picture要素

picture要素とは

HTML5.1で新しく加わった要素の一つで、モバイル/タブレット/パソコンと画面解像度に最適化された画像を設定するのに javascriptcssでごにょごにょする必要があったのを解決する、とても便利な要素です。

使ってみよう

<picture>
  <source media="(min-width: 700px)" srcset="sample1.jpg">
  <source media="(min-width: 300px)" srcset="sample2.jpg">
  <img src="default.jpg">
</picture>

このように、pictureで囲って使用します。

sourcemedia属性にcssのメディアクエリのような書き方で、ディスプレイのサイズの指定が可能です。 img要素はデフォルトの画像を指定します。

ここで気をつけて欲しいのはimg要素は必ず最後に指定することです。

img要素をsource要素より先に指定してしまうと、image要素の後のsourceは無視されてしまいます。

画像解像度を設定できるsrcsetタグ

maclatinaディスプレイのように高解像度の場合、画像サイズが2倍の画像を使うなんてことはよくあることだと思います。 そこでもう一つ便利なのがsrcsetタグです。

<picture>
  <source
    media="(min-width: 768px)"
    srcset="sample.jpg, sample_1.5x.jpg 1.5x, sample_2x.jpg 2x"
  />
</picture>

このように、srcsetタグの画像を指定した後に1.5x 2xと指定する事で、1.5倍のサイズ、2倍のサイズと簡単に対応することができます。

レスポンシブとの相性がとても良いですし、画像の最適化のために活躍する要素です。

circleci build skip

circleciでgithubと連携させてビルドを走らせる事ができます。

自サービスではあるブランチ名でpushすると、ciが走りビルドが完了すると開発環境を更新されるような設定になっています。

ただciを走らせたくないタイミングが一時的にありました。

ci上からrunning中のをcancelして止めることも可能です。

が、circleciではskipの機能がありました。

ビルドを走らせたくないブランチのコミットメッセージに

[ci skip]

または

[skip ci]

と記述してpushをするとビルドがスキップされます。

f:id:chocotaka:20171113234738j:plain

circleci.com

他にもいくつか便利な機能がありそうなので調べて活用できそうなのがあれば使ってみたいと思います。