magic web

マジックウェブ

Magic Webは、ブラウザができる驚くべきことをすべて発見するのに役立つWebアプリです。現在と未来の両方で、異なる標準Web APIを紹介する一連の小さなデモを備えています。アイデアは、人々、特に開発者は、これらのWeb APIの束を1つの場所で試して、何が可能かを感じることができ、このリポジトリのコードを見て、それらがどのように使用できるかを確認できるということです。

テクノロジー

WebアプリはReactでビルドされています。スタイルはプレーンCSSで記述され、自動的にオートプレフィキサーが付いています。 Babelは、モジュールバンドルのためのトランスピーリングとWebpackに使用されます。 Create Reactアプリを使用して、このすべてのツールを処理しました。すべてのルーティングは、Offine Support用のReactルーターとサービスワーカーコードを使用してクライアント側に処理されます。SWプレカッシュで自動的に生成されます。このサイトはGitHubページでホストされ、単純なNPMスクリプトを介してGH-Pagesのコマンドラインユーティリティで展開されます。

多くのWeb APIが紹介されているため、地理的なデバイス、メディアデバイス、通知、Webスピーチ、Web Bluetooth、支払いリクエストなどの最先端のものから最先端のものまで、アプリ内で使用されています。アプリ内のすべてのデモには、タイトルの下に関係するすべてのWeb APIがリストされています。 Web APIに直接関連するすべてのコードは、 helpersフォルダー内のさまざまなモジュールで分離されているため、それを調べるには、Plain JavaScript以外に知る必要があります。

モチベーション

このプロジェクトは、Front Fest 2017に講演の提案を提出した結果として始まりました。最近、Chrome Dev Summit 2015のWeb Bluetoothでこの講演を見て、それによって吹き飛ばされました。また、最近、支払いリクエストAPIについて読んでいたので、Webプラットフォームのこれらの新しい、あまり知られていない機能のいくつかを紹介することは良い考えだと思いました。私の提案は受け入れられました、そして、それは私が私の話を後で自分で熟読できるWebアプリの形で私の話をライブデモに変えることがはるかに興味深く、インパクトがあると思ったときでした。

謝辞

Webアプリの設計は、マテリアルデザインガイドラインに従うことを試みます。アプリ全体で使用されるアイコンは、実際にはマテリアルアイコンセットの一部であり、Robotoは唯一の書体として使用されます。 Webアプリの名前とプライマリカラーは、このGIFに触発されています。これは、最新のWeb APIのいくつかについて最初に学んだときに思い浮かんだ画像です。

Create React PWAリポジトリは、Create Reactアプリで構築されたReactアプリをプログレッシブWebアプリに変えるのに非常に役立ちました。また、GitHubページ用のシングルページアプリも大いに役立ちました。これは、GitHubページでReactルーターが動作するクライアント側のルーティングを行うためです。

ライセンスと問題

Webアプリのソースコードは、MITライセンスの下でリリースされます。ライセンスの全文は、ライセンスファイルで入手できます。このプロジェクトのエラーが見つかったり、提案がある場合は、問題を開いてください。私は最善を尽くします。