chocotakaの日記

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

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化していきたいと思っています。

AMPの基本的な書き方

html宣言

<html ⚡ lang="ja">

のように記述する。

style指定

<style amp-custom>
 body {
  width: auto;
  margin: 0;
  padding: 0;
 }
</style>

cssは極力処理を早くするために外部ファイルを読み込むではなくstyle amp-customで囲う。

img指定

<amp-img src="sample.jpg" layout="responsive" width="266" height="150"></amp-img>

width/heightレンダリングを少しでもスムーズにするために指定します。 layout="responsive"を指定すると画像はレスポンシブに表示してくれるようになります。

<br>?<br />?

htmlを書くときに改行タグを、<br>または<br />と書かれてあったりします。 なぜ2種類の書き方があるのか気になったので調べて見ました。

XHTMLの文法

<br />XHTMLの文法のようで<br><img>タグなど、1対で囲まないタイプのタグについては、<br / ><img />と書くようにと決められました。 XHTMLの文書はこう書かれていない場合、文法チェックでエラーと判断されてしまうようです。

HTML5ではどちらでもいい

HTML5になってからは<br>でも<br />でもどちらでもよいみたいですが、基本的につけなくていいということになりました。

最後に

最近のHTML5で書かれているwebサイトは基本<br>で問題ないみたいです。

AMP

AMPとはなんぞや

Accelerated Mobile Pagesの略です。 読み込みに「3 秒以上かかると 40% の人がサイトの閲覧を諦める」という調査結果が出たりしています。 このような事を改善するために、モバイル端末でウェブページを高速表示する事が目的です。

AMPの作り

ウェブページのHTMLをGoogleまたはTwitterでキャッシュすることで、読み込む分の時間を大幅に高速化する事が出来る仕組みとなっています。

主要な4要素

HTML5(AMP HTML)
CSS 3(Custom Styling)
JavaScript (AMP JS)
グローバル プロキシ キャッシュ (AMP Cache)

AMPの課題

AMP HTMLの制約から、ニュース記事等が中心として使われています。 高速化の代償として、使用できる要素に制限が大きくされてしまっています。 よって表現できる事も制限されてしまいます。