週刊Webテク通信

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

この記事を読むのに必要な時間:およそ 2 分

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

1. The Big CSS Media Query Mistakehttps://speckyboy.com/big-css-media-query-mistake/

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

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

  1. 直感的ではない
  2. できることが限定されている
  3. 拡張できない
  4. 改造に適していない(昔のサイトを後からレスポンシブにするケースなど)
  5. コードが効率的ではない
  6. ワークフローの複雑さを増やす
  7. ファイルサイズが増えパフォーマンスを悪くする

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

図1 CSSメディアクエリの問題点と解決策

図1 CSSメディアクエリの問題点と解決策

2. The 5 Most Popular Frontend Frameworks of 2017 Compared — SitePointhttps://www.sitepoint.com/5-most-popular-frontend-frameworks-compared/

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

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

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

  • 人気があるか
  • 開発が継続中か
  • 成熟しているか
  • 良いドキュメントを提供しているか
  • 特異性が高くないか

図2 フロントエンドフレームワークの比較

図2 フロントエンドフレームワークの比較

3. 15 Useful Code Snippet Tools That Will Help You Store And Manage Your Code Libraryhttps://onextrapixel.com/15-useful-code-snippet-tools-that-will-help-you-store-and-manage-your-code-library/

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

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

図3 コードスニペット用ツールいろいろ

図3 コードスニペット用ツールいろいろ

4. CSS & JS Sliders From CodePen - Freebie Supplyhttps://freebiesupply.com/blog/css-js-sliders-from-codepen/

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

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

図4 スライダーをCodePenから多数紹介

図4 スライダーをCodePenから多数紹介

5. Folder Preview Ideas | Codropshttps://tympanus.net/codrops/2017/05/17/folder-preview-ideas/

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

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

図5 フォルダーをプレビューするアニメーションのアイデア

図5 フォルダーをプレビューするアニメーションのアイデア

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

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

Stroly|ストローリーhttps://stroly.com/

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

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

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

図6 ユーザー投稿の地図サイト

図6 ユーザー投稿の地図サイト

今週の気になるWebネタ

GoogleのInstant Appsを全ての開発者が利用可能になった | TechCrunch Japanhttp://jp.techcrunch.com/2017/05/18/20170517googles-instant-apps-are-now-generally-available-to-all-android-developers/

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

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

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

著者プロフィール

芦之由(あしのよし)

Webデザインやサイト制作に役立つブログ記事やニュースをほぼデイリーでお届けするメルマガ「デイリーWebテク」発行人。フリーのWebデザイナー兼イラストレーター&ライター。シャープMZ-80Bからのパソコンユーザーで,Macintosh IIciからのMacユーザー。嫌いな言葉は「IEで見ると表示が崩れてるよ」。

デイリーWebテクの購読やバックナンバーについては,以下の紹介サイトをご覧ください。

デイリーWebテク - Webテク関連の話題を毎日配信 -
URLhttp://www.rgs680.com/dwt/

コメント

コメントの記入