デザインから見た日本の Progressive Web Apps における問題点
問題点
いろいろあるが一番の問題はオフライン時のフォント。
そもそも標準の Android の Chrome の場合はフォントが Noto Sans のみであり明朝体が選べない。
本のような見た目のアプリなど明朝体を使用したい可能性もあり、使う場合はどこかでダウンロードする必要がある。
Google Fonts に和文のフォントはないのでフリーのものを使うしかない。
また、和文のフォントは WOFF 2.0 でも、そこそこのファイスサイズがあり、サイトごとにダウンロードするのは無駄である。
商用版 Web フォントなどライセンスの関係上、確実にフォントをキャッシュすることができない。
となると、オンライン時とオフライン時で見た目で異なるアプリとなってしまう。
Chromebook など Chrome OS の場合、直にフォントを入れることができない。
そもそも、ライセンス契約に書かれているインストールできる端末は Windows か Mac だろうし。
まとめ
- Android のシステムフォントが少ない。
- Web フォントのファイルサイズが大きい。
- 商用フォントはライセンス上端末に保存する為、難しいかも？
希望というか要望
- Google さんで和文フォントを増やしてほしい
- Chrome 内でダウンロードしたフォントを共有できる仕組みがほしい
- Chrome 内部でフォントフォルダを持つか、パーミッションか何かで OS のフォントフォルダにフォントをインストールできるシステムがほしい。
ちなみに商用の和文の Web Font
FONTPLUS
TypeSquare（モリサワ）
DynaFont Online
Microsoft Edge の変更ログ - Windows 10 / Windows 10 Mobile Insider Preview Build 14367
バグ修正と Mobile で機能改善がされています。
いつもの参照元
追加機能・改善
Windows 10 Mobile
- バックグラウンド時、バッテリー使用量を低減させる改良がおこなわれました
Web プラットフォーム機能
Cache API が検討中になっています。
プライオリティが High になっているため、ServiceWorker 実装後、早い段階で使用できそうな気がします。
User Agent / Edge のバージョンは互いに Edge の Build ナンバーが1増えました。
TCP Fast Open、TLS False Start、TLS 1.3 による高速かつ、より安全な Web の構築
いつも通り Microsoft Edge Dev Blog の記事をざっくり訳。
ネットワークは詳しくないので訳が間違っていたらすみません。
パフォーマンスとセキュリティはインターネットを使用する皆が抱える問題です。
ページ読み込みのパフォーマンスの向上することで、ユーザーエクスペリエンスが向上し、Web ページを閲覧する際の選択に影響を与え、
それと同時にユーザーは安全なブラウジング体験とプライベート性を期待しています。
TCP Fast Open、TLS False Start、TLS 1.3 使用することでパフォーマンスとセキュリティの両方を向上することができます。
これらの機能は Windows Insider Preview build 14361 の Microsoft Edge （EdgeHTML 14.14361） から使用できます。
続きを読むSafari 10.0 の新機能
こちらの要約
開発中なので今後変更があるかもしれません。
また、訳が間違っていたらすみません。
Web API
IndexedDB
W3C の仕様を完全にサポート。
オフライン作業、クライアントでデータキャッシュを大量に必要とする場合などの
Web アプリケーションでデータを格納するために使うことができます。
プログラミングによるコピー、カット
JavaScript でテキストをクリップボードにコピーやカットなどできるようになりました。
- document.execCommand('cut')
- document.execCommand('copy')
CSP 2.0
コンテンツセキュリティポリシー（CSP） 2.0 をサポート。
Shadow DOM
Shadow DOM standard の Version 1 をサポート。
ES 6
所謂 ECMAScript 2015 を OS X （macOS） と iOS で完全サポート
ES Internationalization
ECMAScript 国際化における API、ECMA-402 を完全にサポート http://www.ecma-international.org/publications/standards/Ecma-402.htm
DOM 互換性の改善
World Wide Web Corsortium (W3C) テストに通り、他のブラウザとの互換性が改善されました。
3D Touch イベント
iOS の 3D Touch は、力が変更された時のみ touchforcechange イベントが呼ばれます。
このイベントは、OS X の WebKit の webkitmouseforcechanged のタッチに相当し、
値の範囲は 0.0 から 1.0 になります。
WebGL
アンチエイリアス コンテキスト クリエイト パラメータがサポート。デフォルトで true。
アルファ コンテキスト クリエイト パラメータがサポート。デフォルトで false。
ページ上のアクティブな WebGL コンテキストの合計数は 16。 上限に達すると一番古いコンテキストから破棄される。
メディア
iOS のインラインと自動ビデオ再生
webkit-playsinline プロパティを指定すると
iPhone の Safari は、インラインで動画を再生することができます。
プロパティを持たない動画は従来通りフルスクリーンで再生を開始しますが
ピンチをすることで動画をインライン再生に戻すことができます。
iOS では、オーディオトラック無いまたはオーディオトラックが無効になっているビデオは Web ページが読み込まれると自動的に再生されます。
OS X での ピクチャー ・ イン ・ ピクチャー
OS X の Safari 10 は、iPad のように動画のピクチャー ・ イン ・ ピクチャーを使用することが可能で、 HTML5 のビデオコントロールには、ピクチャー ・ イン ・ ピクチャーのコントロールが含まれています。
カスタムのビデオコントロールを使用する場合は、JavaScript の presentation mode API を使用することで ピクチャー ・ イン ・ ピクチャー機能を動作させることができます。
テキスト
WOFF 2.0
WOFF 2.0 がサポートされました。OpenType などと比べるとファイルサイズ大幅に減ります。
フォントの読み込み
CSS Font Loading Module Level 3 の仕様を使用し、スクリプトからフォントフェイスをロードし、フォントの読み込み状態の追跡できます。
https://drafts.csswg.org/css-font-loading/
Web フォントは、レンダリングされたテキストの文字がフォントの Unicode の範囲内にある場合にのみダウンロードされます。
レイアウトとレンダリング
object-position の CSS サポート
SVGのパスのクリッピング
ベジエパスセグメント、evenodd 塗りつぶしルールを含むより高度な図形にクリップをサポート
#RGBA と #RRGGBBA のサポート
ボーダーイメージの新しい値
ラウンドとスペースの値でボーダー画像のCSSプロパティがサポート。
画像レンダリングの新しい値
image-rendering プロパティで crisp-edges と pixelated の値をサポート。 ほぼドット絵用。
Right-to-Left 言語サポート
スクロールバーの位置やフォームコントロールなど右から左に流れる言語で外観を変更できます。
広色域を支えるメディアクエリ
CSS メディアクエリを使い P3 色空間などの広色域を持つデバイスで異なる表示スタイルを提供します。
@media (color-gamut: p3) { … }
CSS Break プロパティがサポート
- break-after
- break-before
- break-inside
-webkit- プレフィックスなしで動作するようになったもの
- filter
- cross-fade
- image-rendering
Web Inspector
WebDriver
他のブラウザのように WebDriver サポート
メモリデバッグ
インスペクタで Web アプリケーションのメモリ使用量を可視化ができるようになりました。
高速サンプリングプロファイラ
新しい JavaScript プロファイラは、デバッグツールを無効にしながら、 入れぞりゅーしょんで動作するコードをサンプリングすることによって高速なパフォーマンスを提供します。
新しい JavaScript プロファイラーは、サンプリングの高解像度でコードを実行するデバッグツールを無効にする場合より高速なパフォーマンスを提供します。 正確なタイムライン記録をフル JIT (ジャスト イン タイム コンパイル) アクセラレータで速度に実行します。
ネイティブ API
Web 版の Apple Pay
キーノートのデモのように決済時ポップアップが出て取引をし、 WebPaymens API ではなく、独自ライブラリを使用します ApplePay JS Framework Reference を参照
WKWebView プレビューアクション
カスタムの View Controller を表示するリンクプレビューをサポート
WKWebView allowsLinkPreview のプロパティはデフォルトで YES
Safari View Controller
iOS 10 の Safari View Controller は、現在のバーの背景の色の着色をサポートしています。
Safari App Extensions
iOS の App Extensions に Safari の拡張機能を作成することができます。
以下を参照
Microsoft Edge の WebGL GLSL トランスパイラーがオープンソースになりました
Microsoft Edge Dev Blog の記事を要約。
いつもの参照元
MicrosoftEdge WebGL GitHub のリポジトリ
GLSL::HLSL transpiler とは？
Web ページで使用している WebGL の 3D コンテンツのレンダリングは GPU を使用しており、
現在のリアルタイム 3DCG は物体の質感や画面の描画を GPU で動作するプログラム（シェーダー）を書いて動かします。
WebGL や OpenGL では GLSL というシェーディング言語していますが、Windows では DirectX 3D の HLSL を使用するためそのままでは動作しません。
そのため、Edge は実行時に GLSL を HLSL にトランスパイル（変換）しています。
（IE 11 も WebGL が使用できるため同じような処理をしています）
