Awesome Mobile Web Development
Mobile Web Developmentを扱う資料や関連プロジェクトをまとめたAwesomeリストです。
目次
記事とドキュメント
- 300ms Tap Delay, Gone Away - タップ時に300msの遅延を防ぐ方法
- 60 FPS on Mobile Web - 非常に高速なモバイルウェブサイトを作る方法（Flipboardによる）
- Adaptive loading: improving web performance on slow devices - 特定のハードウェアおよびネットワーク制約に最適化する方法
- Animating the Mobile Web - モバイルウェブ上の高速アニメーションを実現するケーススタディ（Yelpによる）
- Autofill: What web devs should know, but don’t - フォームの自動入力についてのすべての知識
- Back/forward cache - 履歴を介したナビゲーションを最適化する方法
- Benchmarking the global 5G experience - 5Gネットワークの普及に関するケーススタディ
- Cache-Control for Civilians - Cache-Controlを設定して最良の応答時間を達成する方法
- CSS fix for 100vh in mobile WebKit - モバイルWebKitにおける100vhの問題を解決する方法
- Current Web on Galaxy Fold - Galaxy Fold向けのウェブ開発のアドバイス
- Designing a Dark Theme for OLED iPhones - OLEDディスプレイにおけるダークテーマの問題とその対処法
- Designing Websites for iPhone X - iPhone Xの「ノッチ」に対処する方法
- Developing Mobile Web Applications: When, Why, and How - モバイルウェブ開発の概要をまとめる良い解説
- Enhance SMS-delivered code security with domain-bound codes - 2FAにおける追加セキュリティ対策
- Everyone has JavaScript, right? - JavaScriptが利用できなくなる場合を示すフローチャート
- Faster Web App Delivery with PRPL - パフォーマンスの高いウェブアプリケーションに必要なパターン
- Get Started with Remote Debugging Android Devices - AndroidでChrome DevToolsを使ってウェブアプリをデバッグする
- Guidelines For Mobile Web Development - モバイルウェブ開発に関する優れた記事集
- Hiding Videos on the Mobile Web - 動画を非表示にし、モバイルトラフィックに影響を与えない方法
- How To Poison The Mobile User - モバイルサイトにおけるネガティブな実践についての概要
- How Web Content Can Affect Power Usage - ウェブアプリを使ってバッテリー消費を改善できる方法
- HTML attributes to improve your users’ two factor authentication experience - 2FAに関するautocompletion属性について
- Interaction Media Features and Their Potential (for Incorrect Assumptions - さまざまな入力デバイスの検出について
- Learn AMP by Example - Accelerated Mobile Pagesについての実践的な導入：コードとライブサンプルに焦点を当てる
- Loading web pages fast on a $20 feature phone - フィーチャーフォン向けウェブページ構築のベストプラクティス
- Measuring Network Performance in Mobile Safari - Mobile Safariを使ってネットワークパフォーマンスを測定するためのアドバイス
- Microbrowsers are Everywhere - メッセンジャー向けサイトの最適化について
- Mobile Performance Inequality Gap - 安価なスマートフォンでのパフォーマンスを気にする必要性
- Mobile Search UX 8 Obstacles - モバイル検索UXに関する記事シリーズ
- Mobile Web Best Practices - 少し古いが、まだ有用なW3Cによるモバイルウェブサイトのベストプラクティスリスト
- Mobile Web Application Best Practices - W3Cが提供するモバイルウェブアプリケーションのベストプラクティス一覧
- Mobile Web Development - Mozillaが提供するモバイルウェブサイト設計に関するガイド（必須読み）
- Mobile Web Performance Checklist - モバイルウェブアプリの最適化に関するベストプラクティス
- Observing Intersection Observers - 交差観察者（Intersection Observer）の概要
- Offline First (Awesome List) - Progressive Web App、Service Workerなど、オフラインファーストに関する優れたリソース集
- Prevent Mobile Browser From Sleeping - スマートフォンの画面がスリープするのを防ぐ方法
- Responsive Web Design – What It Is And How To Use It - レスポンシブデザインの技術の概要
- Rules for Mobile Performance Optimization - ページ読み込みを速くするための技術の概要
- Self-Host Your Static Assets - 静的資産を自前でホストする必要性について
- The Impact of Web Performance - パフォーマンスがビジネスにおいて重要な理由
- The joy and challenge of developing for KaiOS - KaiOS向け開発を始める方法
- Timing Out - 不良ネットワーク接続（lie-fi）に対処するためのサービスワーカー戦略
- Tips for making interactive elements accessible on mobile devices - アクセシブルなモバイルUIを作成するためのアドバイス一覧
- Touch Devices Should Not Be Judged By Their Size - インタラクションメディア機能の概要
- Web Content Accessibility Guidelines (WCAG) - ウェブコンテンツのアクセシビリティを高めるための幅広い提言
- Web Fundamentals - Googleが良いモバイルウェブ体験を実現するためのガイドライン
- What Does A Foldable Web Actually Mean? - 折りたたみスマホがウェブに与える影響についての考察
- Who Killed My Battery - ウェブサイトの消費電力に関する興味深い論文
書籍
- Brain Food Mobile Performance - Awwardsから無料で入手可能な小型電子書籍（モバイルパフォーマンス）
- Going Offline - サービスワーカーを用いたオフライン体験の構築ガイド
- High-Performance Mobile Web: Best Practices for Optimizing Mobile Web Apps - モバイルデバイスにおけるウェブパフォーマンスに関する書籍
- Mobile Design Pattern Gallery: UI Patterns for Smartphone Apps - モバイルウェブアプリに役立つUIパターン
- Mobile First - モバイルデバイス向けサイト設計の方法（無料オンライン版）
- Responsive Web Design - レスポンシブウェブデザインに関する書籍
モバイルウェブ体験を高めるW3C仕様
- Battery API - バッテリーに関する情報のアクセスについて
- Connection API - 接続に関する情報のアクセスについて
- Generic Sensor API - センサーデータを公開する仕様
- Geolocation API - 地理位置情報のアクセスについて
- HTML Media Capture - ユーザーがカメラまたはマイクにアクセスできるようにする方法
- Payment Request API - 最小限の統合で支払い方法を提供する方法
- Presentation API - プレゼンテーションディスプレイへのアクセスについて。
- Remote Playback API - ウェブページからメディアのリモート再生を制御する際のアクセスについて。
- Vibration API - ホストデバイスの振動機構へのアクセスについて。
- Visual Viewport API - スクリーンの視覚部分（オンスクリーンキーボードやピンチズーム領域外など）へのアクセスについて。
- Wake Lock Api - ウェイクロックリクエスト（デバイスの電力節約状態から一部を防ぐ）へのアクセスについて。
- Web Bluetooth - Bluetooth 4を介してデバイスを発見・通信するAPIへのアクセスについて。
- Web NFC API - デバイスの近場通信（NFC）機能へのアクセスについて。
- Web Notifications - ユーザーへの通知を実行するAPIへのアクセスについて。
講演
- Adaptive Loading - Improving web performance on slow devices - Addy OsmaniとNate Schlossによる、ハードウェアおよびネットワーク制約に応じたサイトの適応に関する実践の概要。
- Fundamentals of Mobile Web Development - Matt Gauntによる、モバイルウェブ開発におけるベストプラクティスの概要。
- Future App Model: Advanced Service Worker - Jake Archibaldによる、ストリームやサービスワーカーなどの新しいAPIを活用してウェブアプリケーションとサイトを最適化する方法の概要。
- Instant Loading: Building offline-first Progressive Web Apps - Jake Archibaldによる、サービスワーカーの導入について。
- Mobile Web Performance - Estelle Weylによる、サイト上で最も良いモバイル体験を実現するための対応策について。
- Mobile Web Performance Auditing - Paul Lewisによる、サイトのパフォーマンス問題を調査する方法について。
監査ツール
- Lighthouse - ウェブアプリケーションおよびウェブページの分析ツール。
- Mobile-Friendly Test - サイトがモバイルフレンドリーかどうかをテストするツール
- PageSpeed Insights - ページを分析し、ダウンロード速度の向上を推奨するツール
- PageSpeed - 自動的にあなたのサイトを最適化するウェブサーバーのモジュール
- Site Speed Checker - あなたのモバイルサイトのスピードを他のサイトと比較するツール
- Test Your Mobile Speed - Googleが提供するモバイルサイトの総合的な速度検査ツール
- Webpagetest - 実際のブラウザと実際の消費者接続速度で複数の場所から実行されるウェブサイトのスピードテスト
プラットフォーム監視
- Can I Use - ブラウザにおけるさまざまなウェブ機能のサポート状況
- Mobile Browser Market Share - さまざまなプラットフォームと国別の市場シェア
- Standards for Web Applications on Mobile - モバイル関連のW3C仕様の現在の状態
- What Web Can Do Today - あなたのブラウザが実行可能なもの
その他の便利なツールとライブラリ
- Browsersync - 時間短縮型の同期ブラウザテスト
- Eruda - モバイルウェブブラウザ向けのコンソール
- Interact.js - モダンブラウザーでドラッグ＆ドロップ、サイズ変更、慣性、スナップを備えたマルチタッチジェスチャーを実現
- Fastclick - 古いブラウザにおける300ms遅延の削除
- Lozad.js - IntersectionObserver APIを用いた、高性能で軽量かつカスタマイズ可能な遅延読み込み
- React Dates - ウェブ向けの、簡単に国際化可能でモバイル対応の日付選択ライブラリ
- Screen Sizes - すべてのポピュラーなスマートフォンの画面サイズの一覧
- Shiny - モバイルサイト向けの光沢反射エフェクト
- Slideout - モバイルウェブアプリ向けの独立した軽量ナビゲーションメニュー
- Swiper - 最も現代的なモバイルタッチスライダー（ハードウェア加速されたトランジション付き）
- Web Inspector Remote (Weinre) - 非主流ブラウザでのサイトデバッグ用のウェブインスペクタ
- Web Starter Kit - マルチデバイス対応サイトのワークフロー
- Workbox - ウェブアプリにオフラインサポートを追加するためのJavaScriptライブラリ
- WorkerDOM - Web Workers内部にDOMの完全な表現を提供するためのライブラリ
ライセンス
法律で認められる範囲で、@myshovは本作品に関するすべての著作権および関連する権利を放棄しています。