chocotakaの日記

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

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化したいページが、実際に再現可能なのかどうかという所が最初不安でいました。

実際に実装してみて

制限の中どれだけのことが可能なのか気になっていましたが、結論予想以上に出来ることが多かったです。 もちろんサービスによって表現に可能・不可能はありますが、自サービスでやりたいことはほぼ可能でした。 Twitterのwidgetだったり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 />と書かれてあったりします。 なぜ２種類の書き方があるのか気になったので調べて見ました。

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でキャッシュすることで、読み込む分の時間を大幅に高速化する事が出来る仕組みとなっています。

主要な４要素

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

AMPの課題

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

aria-live

aria-liveは、要素に変更があったときに変更内容をスクリーンリーダーで読み上げてくれたりするのでアクセシビリティに貢献する事ができます。

ライブリージョン

JavaScriptで動的に更新されたりする要素に対して、スクリーンリーダーなどの支援技術を使っているユーザーは変化に気づく事ができない事があります。 ライブリージョンを使うことで動的に更新される要素に対して、スクリーンリーダーなどの支援技術を使っているユーザーも変化を把握できるようになります。

3つの属性

assertive: 内容が更新されてもユーザーに伝達しない（デフォルト設定）
polite: 現在の読み上げの終了やユーザー入力時など適切なタイミングで、内容が更新されたときにユーザーに伝達する。
assertive: 即座に伝達を行う

使用例

文字を挿入する前

<div aria-live="assertive/polite/assertive"></div>

javascriptで文字を挿入した時

<div aria-live="assertive/polite/assertive">文字が挿入されました</div>

この時にaria-liveに設定によって「文字が挿入されました」がタイミングで読み上げられるようになります。