2017年5月第4週号 1位は、CSSメディアクエリの問題点と解決策、気になるネタは、GoogleのInstant Appsを全ての開発者が利用可能になった

ネットで見かけたWebテク（Webテクニック・Webテクノロジー）記事から、Webデザイナーの目で厳選したネタを週刊で紹介するこのコーナー。今回は、2017年5月15日～月21日の間に見つけた記事のベスト5です。

CSSメディアクエリの問題点を指摘し、その解決策を提案した記事です。

メディアクエリの7つの大きな問題は以下。

これらを解決するために、rKitというJavaScriptを利用したCSSツールキットを作っているとのことで、そのrKitの簡単な解説も載っています。

フロントエンドフレームワークを比較するための情報をまとめています。

各フレームワークのリリース年、現在のバージョン、GitHubでの星の数、CSSプリプロセッサ、対応ブラウザ、アイコンセット、ドキュメントの評価などが掲載されていました。

また、良いフレームワークを選ぶためのアドバイスも紹介しています。

コードスニペット（コードの断片）を再利用するために保存、管理するツールをまとめています。

単にコードスニペットを管理するだけではなく、オンラインでコードの実行ができるコード共有サービスやコーディングツールのエクステンションなども紹介されていました。

CSSとJavaScriptを使ったスライダーを、コード共有サイトのCodePenから多数紹介しています。

ただの写真スライドではなく、画像と文字を組み合わせて複雑な動きをするものが多いようです。

フォルダーアイコンにカーソルを合わせた場合に、中身をプレビューしているようなアニメーション効果を与えるデモとコードです。

実用性はともかく、どの効果も良くできていて動きが気持ちいいです。

そのほか、最近の記事の中から、気になるニュース記事を3つ紹介します。

先週の気になるWebサービス

Stroly（ストローリー）は、様々な地図を位置情報と連携して見ることができるサービスです。イラストマップのような実際の縮尺とは違う不正確な地図でも、GPSと連動できるところがポイントです。

イラストマップなどの画像をアップロードして、イラストマップと地図の同じ位置を見比べながら設定していきます。ランドマークを設定して、クリックするとテキストや画像が開くようにもできます。

作った地図は、公開／限定公開（URLを知っている人のみアクセスできる⁠）⁠／非公開が選べます。現在は実験版となっていますが、今後に期待できそうな日本発のサービスです。

Instant Appsが一般公開され、全ての開発者が利用できるようになったそうです。Instant Appsを使用すると、Android端末でインストールしなくてもアプリを実行できるようになります。

最近、TwitterやInstagramなどが、ブラウザ上でアプリのような動作ができるようになりましたが、それはPWA（Progressive Web Apps）という技術です。こちらはWebアプリをネイティブアプリのように使えるというアプローチですね。

Web制作者なら最近よく目にするであろうAMP（Accelerated Mobile Pages）も含め、モバイル端末で快適にコンテンツを見たりサービスを利用するためのアプローチでは、Googleの動きに注目する必要がありそうです。