chocotakaの日記

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

メタ 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

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

AMPに挑戦してみる

はじめに

自サービスがのちにAMP対応しようとしていたのと、AMPに合っているサービスということもあり AMPとはどうゆうものなのかという所から、AMPを実際に実装していく所までやっていきました。 AMPの目的がモバイルでの高速表示なので、様々な制限の中ページを作っていきます。 自サービスのAMP化したいページが、実際に再現可能なのかどうかという所が最初不安でいました。

実際に実装してみて

制限の中どれだけのことが可能なのか気になっていましたが、結論予想以上に出来ることが多かったです。 もちろんサービスによって表現に可能・不可能はありますが、自サービスでやりたいことはほぼ可能でした。 TwitterwidgetだったりInstagramだったり、Youtubeだったり簡単に再現可能でした。 ボタンを押したらある要素の表示を変えたり、スクロール量によって何かをするということも可能でした。

ampコンポーネント

たくさんの表現を可能にしているのが、豊富なコンポーネントです。 Youtubeだったらamp-youtubeを使ったりTwitterだったらamp-twitterを使ったりと、すでに用意されているコンポーネントを使えば すぐに表現することが可能です。

サンプルがあるのでこちらを活用するとわかりやすいです。

ampbyexample.com

最後に

AMPで表現できることがこれからも増えていくとの事なので期待です。 自サービスも今期中にはAMP化していきたいと思っています。