BT

最新技術を追い求めるデベロッパのための情報コミュニティ

寄稿

Topics

地域を選ぶ

InfoQ ホームページ アーティクル 開発者向けの強力なブラウザであるPolypaneの作成者へのインタビュー

開発者向けの強力なブラウザであるPolypaneの作成者へのインタビュー

ブックマーク

キーポイント

  • Polypane provides a many paned experience for developers
  • Beyond responsive design, Polypane provides many features for easier development and debugging
  • Polypane provides a social media display of metadata for easier previewing of links on platforms like Twitter and Facebook
  • Polypane leverages Electron including Chromium and Node.js for the application, and React for its user interface elements

原文(投稿日:2020/04/24)へのリンク

Polypaneは、WebアプリケーションおよびWebサイトの開発を支援する多くの機能を備えた強力な開発Webブラウザです。箱から出してすぐに、いくつかの異なる面からWebサイトを表示し、Webサイトの応答性を確認することで即座に価値を示します。これは、PolypaneがWebを開発するワークフローを改善するために提供する機能のほんの一部にすぎません。

最近、Polypaneの作者であるKilian Valkhof氏と話をして、Polypaneとは何か、その背景にある動機、使用されているテクノロジー、製品を作る中での課題、将来の方向性などについて学ぶ機会がありました。

InfoQ: 私は開発ワークフローの一部としてPolypaneを少し使用してきました、ありがとうございます。Polypaneは非常に興味深い製品であり、レスポンシブ開発を支援するために多くの異なるブラウザサイズを同時に表示し、メタデータに基づいてサイトのソーシャルメディア表示をプレビューするなどの便利な機能を提供することにより、最新のWeb開発者ワークフローの一部を簡素にするブラウザです。Polypaneの作者として、この製品を作る必要があると最初にどのように判断したのでしょうか?

Kilian Valkhof氏: 2015年に、私はPhotoshopからSketchを使用してWebサイトをデザインするように切り替えました。Sketchが持っていたクールなものの1つは、「アートボード」と呼ばれるものでした。これにより、1つの巨大なキャンバス上にさまざまな画面 (アートボード) をデザインできます。私がそれを使用した方法は、サイトデザインのレスポンシブブレークポイントごとにアートボードを並べて作成することでした。そうすれば、複数の画面サイズでデザインの概要を非常によく把握できます。

しかし、そのデザインの実装を開始したとき、ブラウザは一度に1つのビューポートしか表示できず、ブラウザのサイズを常に変更したり、非常に遅いレスポンシブデザインツールをいじったりしていました。Sketchと比較して、それは大きな制限を感じました。

同じ頃、私はElectronをいじっていました。これは、Webテクノロジを使用してデスクトップアプリケーションを作成できるフレームワークです。そこで、同じサイトを複数の幅で表示する小さなプロトタイプを作成することにしました。私はそれを自分で使い始め、すぐにそれが私をはるかに速くすることに気づきましたが、それができることはもっとたくさんあることにも気づきました。そこで、昨年までフルタイムで本当の製品に発展させることを決意するまで、サイドプロジェクトとして取り組んでいました。

InfoQ: Polypaneの基盤となる技術について教えてください。ElectronとそのChromiumおよびNode.jsベースの基盤を活用しています。Polypaneを作成するために他にどのような興味深いものを活用したのでしょうか?

Kilian Valkhof氏: Polypaneの場合、ElectronとChromium上に構築されていることの優れた利点は、Chromiumがレンダリングエンジンですでに行った驚くべきハードワークをすべて活用できることです。また、Chromeで使用している開発者ツールがPolypaneで「機能する」ことも意味します (ReactやVuejs devtoolsなどのdevtools拡張機能を含む) 。Electronを使用すると、MacOS、Windows、およびLinux用のアプリケーションをコンパイルできるため、開発者は好みのオペレーティングシステムに関係なくアプリケーションを使用できます (私は3つすべてを切り替えています) 。

PolypaneのUIはReactに組み込まれています。PolypaneのほとんどのUI要素には特定のニーズがある傾向があるため、オープンソースパッケージを使用するのではなく、自分で作成することになります。それでも、Reactの動作方法は、アプリケーションの状態管理について私が考える方法と非常によく一致しています。

InfoQ: Polypaneの主な機能と利点は何でしょうか?

Kilian Valkhof氏: Polypaneのすべての機能は、開発者の生産性を高めるか、より優れたWebサイトやアプリを構築するのを支援することに重点を置いています。もちろん、主なことは、サイトを複数のビューポートで表示することです。多くの人が最初はそれを「複数のウィンドウを開く」と比較しますが、実際にはそうではありません。1つは、ビューポートのサイズを変更していないことです。PolypaneはCSSから自動的に生成するか、組み込みのデバイスプリセットを使用できます。したがって、管理ははるかに少なくなります。

InfoQ: メディアクエリのディメンションを読み取るなど、CSSから自動的に生成されるのでしょうか?

Kilian Valkhof氏: そのとおりです! Polypaneは、ページに適用されているすべてのCSSを読み取り、分析します。これを使用して、サイトで使用されているブレークポイントを特定するだけでなく、すべてのビューポートに hover 効果も適用します。

次に、1つのビューポートで行うすべてのことは、スクロール、マウス hover 効果、クリック、さらにはキーボード入力など、他のすべてのビューポートに複製されます。つまり、これは本当にまとまりのあるエクスペリエンスです。たまたま複数のビューポートに同時に表示されてはいるが、単一のWebサイトを操作しているのです。

それ以外にも、開発者を支援する機能はたくさんあります。

サーバでホットリロードサポートを使用していない場合でも、ページを更新せずにCSSと画像を更新できるライブリロードが組み込まれています。実際、サーバを実行する必要はありません。プレーンな「.html」ファイルでも機能します。

ChromeやFirefoxのスクリーンショット機能よりもうまく機能するフルページのスクリーンショットがあり (比較についてはこちらを参照) 、顧客やデザイナに送信するのに最適です。または、ウェブサイトの上に画像をオーバーレイして、それらの違いを強調することができる、私たちが持っている画像参照機能で使用することもできます。以前のバージョンのスクリーンショット、またはデザインリファレンスに対してテストするのに理想的です。

InfoQ: わぉ、簡単な視覚的回帰の比較やテストを効果的に実行する簡単な方法でしょうか?

Kilian Valkhof氏:  はい! 違いを強調表示すると、同じページのすべての部分が非表示になり、違いが強調表示されるため、ページの一部を誤って移動したかどうかをすばやく確認できます。デザインに対してテストする場合、正確に1対1になるわけではないため、Polypaneはそれらを並べて表示することもサポートしています。

ペインに機能を追加する20以上の異なる「オーバーレイ」があります。たとえば、テキストの色と背景色の間の十分なコントラストについてページ全体をテストする色コントラストチェッカーがあります。すべての要素の周りにボックスを描画するものがあるため、すべてが期待どおりの場所にあるかどうかを明確に確認できます。色覚異常やその他の視覚障害のためのさまざまなシミュレーターもあります。緑内障や遠視のようなものだけでなく、明るい日光も。いくつかの視覚障害はあなたの目とは何の関係もありませんが、状況に応じて起こる可能性があります。

Polypaneに最近追加されたのはサイドパネルです。その中には、ページに関する詳細情報を表示したり、新しい方法でページを編集したりできるツールがあります。ライブCSSエディターを使用すると、すべてのペインに適用されるCSSまたはSCSSを作成できます。Googleフォントを使用すると、インテリジェントに挿入できるため、デザインを試すのに最適な方法です。その中の要素インスペクターを使用して、要素を選択できます。Polypaneはその要素に適用されるCSSから実際のCSSセレクターを取得するため、その特定のセレクターのCSSを記述し、後でそれを独自のCSSファイルにコピーできます。

メタ情報パネルには、ページの <HEAD> のコンテンツに関するあらゆる種類の情報が表示されますが、視覚的ではないため、通常は見落とされます。favicon、タイトル、説明などが表示されますが、TwitterやFacebookで共有された場合のページの外観、またはGoogleの検索結果での表示方法のピクセル単位のプレビューも表示されます。TwitterとFacebookには独自のプレビューテスタがありますが、ページがオンラインである必要があり、直近のデザインでさえ最新ではないため、これを適切にテストするのは非常に時間がかかりました。

InfoQ: Polypaneは、Web開発者向けのブラウザでの最初の試みではありません。たとえば、BliskやSizzyが思い浮かびます。あなたのアプローチと、Web開発者に焦点を当てた他のブラウザで見られるアプローチとの主な違いは何でしょうか?

Kilian Valkhof氏: Polypaneを他のWeb開発者向けブラウザと比較して非常に便利で拡張性のあるものにしている理由のひとつは、過去14年間、私がWeb開発者であったことだと思います。私はインターネットエージェンシーを運営し、自分で設計と開発を行い、管理された開発者とデザイナも行いました。また、クライアントの開発者やデザイナとも頻繁に交流しました。そのため、私はWebデザイナや開発者が何をする必要があるのか、何をしたいのか、そして何が見過ごされているのかについて、非常に広い視野を持っています。

Polypaneの機能はすべて、幅広い開発者にとって重要であると私が知っていることです。単一のモバイルビューと大きなデスクトップビューを並べて表示したい場合は、それができます。ただし、その間、デスクトップビューをズームアウトして、1:1スケールのiPhone画面と一緒に13インチのラップトップ画面に4kを超ワイドに収めることもできます。

Polypaneを使用することで、所有するデバイス用に開発することだけに縛られることはなくなります。これは両方の方法で機能します。小さなラップトップしか持っていない場合は、その4K画面でサイトの見栄えを良くすることもできます。しかし、あなたが開発者であり、たまたま持っている豪華なiPhone 11XS+でのみテストする場合、Polypaneを使用すると、iPhoneSE「だけ」を持っている人にも良い体験ができることを確認できます。それはあなたがそれが望むのと同じくらい広大なデバイスラボへのアクセスを提供します。

Polypaneでは、ビューポートもデバイスにロックされていません。ビューポートは任意のサイズにすることができ、他のブラウザとはかなり大きな違いがあります。特にデバイス向けの設計は間違った最適化だと思います。数年前に構築されたウェブサイトでは、320px幅の画面に完全に収まりますが、現在の375以上のモバイルデバイスでは見栄えが悪いことがわかります。そして、375px幅で構築されたサイトは、他の何かが新しいデフォルトになると、数年後には見栄えが悪くなるでしょう。コンテンツに基づいてブレークポイントを選択すると、Webサイトの見栄えが長くなります。そうすれば、画面の幅に関係なく見栄えが良くなります。

それを超えて、私が知っている他のブラウザは、アクセシビリティオーバーレイやソーシャルメディアプレビューのようなことをしていません。これらは、開発者としてあなたがすでに知っていて気にかけていて、追加のツールを使用していること、またはそれが起こらないことです。それらを最前線に置くことによって、より多くの開発者がそれらに直面し、それで彼らがより良いウェブサイトを作るのを助けることを願っています。

物事をうまくやりやすくしたいし、開発者が自分のワークフローを簡単に改善できるようにしたい。例: ReactまたはVueを使用しているSPA開発者の場合、非常に堅実なホットリロード開発サーバを使用している可能性がありますが、従来のRailsまたはDjangoアプリで作業している場合 (これはテクノロジーの選択としても同様に有効です) は、それで、あなたが本当に堅実なライブリロードをすることが許されないという意味ではありません。Polypaneは、実際にページについてよく知っているブラウザにそれを組み込むことで、開発者が1行の構成を記述しなくても、CSSのインプレース更新などを行うことができます。

InfoQ: PolypaneのWebサイトでは、開発、デバッグ、およびテストを2倍の速度で実行できると主張していますね? 実際、レスポンシブな問題の場合、2倍以上の速さであると主張しています! 何が2倍速いという主張につながったのでしょうか?

Kilian Valkhof氏: はは、ええ、それについていくつかの統計があります。開発者にとってすぐにスピードアップするので、最初の実装がどれだけ速くなるかによって、時間は約60%短縮されます。しかし、それを超えて、すでに非常に多くの画面サイズでサイトを開発してテストしているので、プロジェクトがQAを通過するとき、またはプロジェクトが公開された後、バグや問題がはるかに少なくなります。

これらのリリース後のバグは発生しないか、発生する頻度がはるかに少ないため、数か月前に終了したプロジェクトを新たにセットアップする必要がなくなり、すべてがどのように機能するかを理解し、最新のデータベースとこれらすべてのものを取得する必要がなくなります。バグ修正がどこかのコードの1行あるだけで、そのようなものをセットアップするのに丸1日かかることがある場所に私たちは皆いました。

QAの場合、Polypaneですべてのサイズのテストを行ってから、いくつかの異なるレンダリングエンジンとオペレーティングシステムでテストすると、オーケストレーションを行っても、デバイスを1つずつ調べる (そしてすべてを維持しながらそれらを最新のものにする) 本当に遅いプロセスで費やす必要のある時間を文字通り間引くことになります。

そうそう、それは2倍以上の速さです。しかし、開発者はそのような主張に当然懐疑的です。なぜなら、そのようなフレームワークを使用すると、非常に高速になり、バグを二度と書くことができなくなるとよく言われるからですが、もちろんそれはほとんど真実ではありません。それで、私はよりもっともらしい主張の「2倍の速さ」に行き着きました。

Polypaneは、非常に優れたIDEまたはインテリセンスを備えたコードエディタに切り替えるようなものだと思います。あなたがそれに出くわすとき、あなたは「私はすでに本当に速くタイプします、これはどのように役立つでしょうか?」と思うかもしれません。しかしもちろん、スピードアップはあなたがする必要のないタイピングにあります。Polypaneを使用すると、プロジェクトのサイズ変更、再読み込み、再起動のすべてを高速化できます。

InfoQ: PolypaneでElectronアプリをテストする方法はありますか?

Kilian Valkhof氏: Polypaneは、通常Electronで直接実行するものを含め、任意のHTMLファイルを表示できますが、もちろんHTMLファイルはすべてのElectronライブラリにアクセスできるわけではないため、実際にはElectronアプリの「Webサイト」部分のみにアクセスできます。

同様に、これを使用して、たとえば、通常はネイティブWebview要素で実行されるIonicアプリケーションをテストできます。Polypaneでできる優れた機能の1つは、iOSデバイスとAndroidデバイスの両方を並べてエミュレートすることです。Ionicは、同期されたインタラクションを維持しながら、各ビューポートで適切なスタイルを自動的にレンダリングします。これは、マシンでiosおよびandroidエミュレーターを実行するよりもはるかにパフォーマンスが高くなります。

InfoQ: Polypaneを構築する際に克服しなければならなかった興味深い障害は何でしょうか?

Kilian Valkhof氏: 最大の障害は、既存のブラウザツールが、複数のビューポートで同時にサイトを表示することをサポートするように構築されていないことです。ブラウザモデルは常に1つのレンダラ = 1つのサイトです。多くの内部ブラウザAPIはそれを想定しており、devtoolsもそうです。Polypaneでは、1つのサイトに1から100のレンダラを使用できます (ただし、一度に100のビューポートでサイトを開きたい場合は十分なRAMが必要です) 。そのため、「ページが読み込まれるのはいつですか?」などの新しい質問が作成されます。さまざまなサイズで要求される可能性のあるさまざまなリソース、または単なるネットワークの変動により、さまざまなビューポートが他のビューポートよりも高速に読み込まれます。ページが読み込まれたのは、最初のビューポートが完了したとき、あるいはすべて完了したときですすか? 1つしかない場合、答えるのがはるかに簡単です。

Polypaneでは、それを考慮して、毎回ゼロから物を作る必要があります。大変な作業ですが、ブラウザで行う作業に完全に合わせた機能を記述できるという利点があります。たとえば、Polypaneでビューポートのサイズを変更する方が、Chromeのレスポンシブ開発ツールでペインのサイズを変更するよりもはるかに高速です。

また、Polypaneが実際に他のブラウザよりも進んでいる状況も発生します。Polypaneは少なくとも2017年からSVG faviconを表示できましたが、Chromeは最近その機能を取得しました。

InfoQ: 現在選択しているWeb開発ツールチェーンとワークフローは何でしょうか。現在、どのフレームワーク、ライブラリ、および方法論を好みますか?

Kilian Valkhof氏: 私は自分でPolypaneを開発しているので、多くのプロセスを必要としないので、計画とプロジェクト管理はTrelloで行われます。クライアントからのサインオフが不要なという利点があるため、デザインツールでデザインするのではなく、通常はHTMLとCSSで直接デザインします。私が選んだコードエディタは、入力と同じくらい速くテキストを編集できるようにするためのカスタムキーボードショートカットがたくさんあるAtomです。先に述べたように、PolypaneはReactに組み込まれていますが、ほとんどのものを自分で作成することになるため、Reactエコシステムの他の部分はほとんど使用しません。

変更を加えたときに開発モードで自動的にリロードするようにPolypaneを設定しました。Polypaneの2つの部分 (Electron部分とReact部分) は独自のプロセスで実行され、独立して更新されます。

InfoQ: (次のようなもの: PolypaneはElectronやReactなどのオープンソーステクノロジーに基づいて構築されていますが、これらのプロジェクトやそのコミュニティに貢献していますか?)

Kilian Valkhof氏: 私はオープンソースソフトウェアから多くの恩恵を受けてきました。それはオープンウェブの重要な部分だと思うので、可能な限りPRを通じて貢献したり、オープンソースとしてリリースしたりしようとしています。私はElectron Governanceチームのメンバーであり、ドキュメント、エコシステム、およびWebサイトを支援しています。たとえば、ElectronにWebコンテンツを埋め込むときに使用できるさまざまなオプションについて、ドキュメント全体を作成しました。これは、Polypaneの構築を通じて得た経験から直接得られたものです。

私は、Electronアプリケーションを開発する場合に興味深いいくつかのオープンソースプロジェクトを維持しています。Browserslist (BabelとpostCSSが使用して、トランスパイルされたJSとCSSを可能な限り最小にします) にElectronサポートを追加する electron-to-chromium があり、1週間に1500万回以上ダウンロードされますが、おそらく知らないうちに使用しています。メニュー付きのクロスプラットフォームのelectronアプリを作成している場合、electron-create-menu を使用すると、マルチプラットフォームで使用するための便利な機能と翻訳が組み込まれたメニューを作成できるため、プラットフォームや言語ごとに個別のメニューを作成する必要はありません。

可能な限り、他のライブラリを使用するときに行った改善に貢献するようにしています。たとえば、私は現在VisBugと協力して、UIの一部を表示する方法にいくつかの改善を提供しています。他のオープンソースの仕事に関しては、私はいたるところにいます。自動的に保存するメモ取りアプリケーション画像圧縮GUIなど、さまざまなデスクトップアプリを作成しました。また、オランダ語でCSSを作成できるPostCSSプラグインや、AdobeXD用のReactレンダラを作成しました。

オープンソースの仕事を超えて、私は開発者とデザイナーに無料のリソースを提供します。Superposition.designを作成して、ライブWebサイトからデザイントークンを抽出し、コードにエクスポートしたり、デザインツールで直接使用したりできるようにします。また、Polypaneを使用して、レスポンシブデザインの用語集を作成し、CSSセレクターを説明するCSSセレクター固有のツールを作成しました。そして、必要に応じてより良い色を提案するカラーコントラストチェッカです。

InfoQ: Chrome DevTools拡張機能を作成する以外に、Polypaneで堅牢な開発者エクスペリエンスを提供しようとしているフレームワーク作成者にとって、提供できる、または提供すべき追加の機能はありますか?

Kilian Valkhof氏: 私が最も気づいたことの1つは、(ライブラリ) 開発者はコードが実行される場所について推測する傾向があるということです。最も明白なものは、ユーザエージェントを使用することです。Polypaneにはカスタムユーザエージェントがあり、機能の点ではChromeと同じですが、Polypaneにフラグを立てるサイトはたくさんあります。そこでは、機能検出を使用する方が適切なオプションです。

まだ遭遇していませんが、Polypaneのすべてのペインがセッションを共有しています。つまり、どこにでもログインするには1回だけログインする必要があります (つまり、どこにでも同時にログインします) が、localStorageとsessionStorageがすべてのペイン間で同期されることも意味します。あなたがライブラリであり、データをメモリではなくsessionStorageに保存している場合 (たとえば、ライブラリの他の部分に簡単にアクセスできるようにするため) 、これはよく考えるべきことかもしれません。

Dojoの開発者は、フレームワークの作成者としてブラウザに何をさせたいかについて興味深い視点を持っているに違いありません。ブラウザに何をしてもらいたいのでしょうか?

InfoQ: 多くのJavaScript開発者が嘆くのを聞くと思いますが、最新のCSSレイアウトを使用するのは難しい場合があります。CSSを操作する方法はたくさんありますが、それでもレイアウトで実際に何が起こっているのかを可視化するのは難しいことがよくあります。また、非同期コードをデバッグするときに何が起こっているのかをよりよく可視化するためにできることはまだたくさんあると思います。また、DojoやJSXベースのコンポーネントを活用するReactなどの他のフレームワークを使用する場合、かなりの量のイントロスペクションオーバーヘッドがあり、新しいユーザがアプリケーションで何が起こっているのかを実際に理解するのは難しいと思います。

Kilian Valkhof氏: 一般的なWeb開発は間違いなくより複雑になっています。Web用の検査およびデバッグツールはこれまでで最高のものですが、ブラウザが何が起こっているのかについてさらに多くの洞察を提供するのに役立つ方法はたくさんあると思います。

InfoQ: 現在、Chromeを活用しているブラウザが大多数であり、FirefoxとSafariが今日の主な代替手段となっています。ブラウザレンダリングエンジンの状態についてどう思いますか

Kilian Valkhof氏: 現在、レンダリングエンジンはオペレーティングシステムと同じくらい複雑で、多くの点でオペレーティングシステムです。開発者にとって、これほど簡単なことはありませんでした。あなたのことはわかりませんが、既存のレンダリングエンジン間でのブラウザ間の不整合について考える必要はほとんどありません (あるとすれば、Safariです) 。それでも、IE8の振る舞いの作成方法についてはほぼ百科事典的な知識があります。

InfoQ: 残念ながら、document.layersとdocument.allのNetscape 4とIE 4の不整合で、まだ脳内のスペースを浪費しています。

Kilian Valkhof氏: Trivial Pursuitの初期のWeb版がある場合、私はあなたと対戦したくありません! 危険なのは、Chromiumの単一栽培がイノベーションを阻害することです。いくつかの点で、イノベーションがレベルアップしたことがわかります。競合するレンダリングエンジンではなく、競合するブラウザ実装 (Polypaneがその1つです) で発生しています。

現実には、Web用の完全なレンダリングエンジンを構築し、それを含むすべて (htmlレンダリング、下位互換性、webgl、wasm、デバイス機能など) を構築することは、今では大企業にしか届かないと思います。将来的には、より特徴的なレンダリングエンジンが登場する可能性があります。たとえば、wasmに対して非常に高速なものや、レガシー機能をサポートせずに最新のSPAのみをはるかに高速にレンダリングするものなどです。

InfoQ: FirefoxやSafari用のElectronのようなものは実際にはないので、これらのブラウザ用のPolypaneの形式はせいぜいありそうもないと思います。Firefoxは引き続き繁栄できると思いますか? (そうだといいのですが、私はコンテンツを表示するための主要なブラウザとしてFirefoxを使用しています!)

Kilian Valkhof氏: Firefoxには、実際には「Geckoview」と呼ばれるものがあります。これは、Android用のFirefoxレンダリングエンジンです。Geckoviewを使用できるようにしたいのですが、デスクトップでは使用できません。Geckoviewをデスクトップに導入することについて彼らに話しましたが、それは計画されていないと理解しました。

Safari/Webkitの場合、Linuxはもちろん、Windows用のWebkitのバージョンを (再び) リリースする可能性はほとんどありません。そしてこの時点で、QtWebkitのような他のオープンソースバージョンのWebkitは、Safariがレンダリングするものからこれまでのところ削除されているため、努力する価値がありません。

個人的には、私もFirefoxをブラウジングブラウザとして使用しており、Phoenixと呼ばれて以来ずっとそうしています。時間が経つにつれてブラウザの構成やパワフルさを低下させ、拡張機能で実行できることを制限し、実行できるUIのカスタマイズの量を制限することを目的としているように見えますが、ブラウジングブラウザとしては非常に優れています。将来的にそれらを妨げる可能性があるのではないかと思います。

InfoQ: また、今日のWeb標準をサポートすることは非常に複雑であるため、別のブラウザエンジンを実際に構築できるかどうかも知りたいです! 詳細に光を当てながらの最近の Flow の発表は有望なようです。SafariのWebKit自体がChromeの最初の出発点であり、それ自体がKHTMLのフォークであったことを考えると、Chromiumを活用するための独自のエンジンは別としてOperaやEdgeのようなブラウザがより大きなトレンドとなっている、真に新しいブラウザレンダリングエンジンが登場してからかなりの時間が経ちました。少しの間、水晶玉の帽子をかぶって、ブラウザのレンダリングエンジンの風景は5年後にどのようになると思いますか?

Kilian Valkhof氏: 大きな懸念は、Microsoftがブラウザ戦争に勝利し、ブラウザをさらに改善するインセンティブがなかったInternet Explorer 6の時代と同じように、レンダリングエンジンの開発が完全に停止することです。しかし、そうなるとは思いません。

私が潜在的な危険と見なしているのは、実行され、標準として適応されるレンダリングエンジン開発のタイプが、MicrosoftとGoogle (および程度は低いがSamsung、SamsungもChromiumを使用しています) にとって良いことを強く支持することです。つまり、HTMLやCSSを改善するのではなく、AMPのようなものや、オープンWebを維持するのではなく、よりデバイス固有の実装 (Apple payやGoogle payで使用されるデバイスベースのセキュリティ実装など) です。MicrosoftとGoogleはどちらもこれに関してさまざまな歴史を持っており、どちらもオープンWebの非常に強力な支持者であり、強力な批判者でもあります。しかし今のところ、両社の人々はオープンWebのために多くの本当に良い仕事をしています。

InfoQ: Polypaneですでに行われた開発者ワークフローの改善以外に、開発者だけでなく一般のユーザにとって、ブラウザはどの分野で進化し続ける必要があると思いますか?

Kilian Valkhof氏: 過去数年間で、私にとってWebを本当に変えた2つのことは、LetsencryptのおかげでHTTPSが台頭したことと、HTTP2が広く採用されたことです。

これらを組み合わせることで、Webがより高速で安全になります。ブラウザが、HTTP3/QUICを使用して、またすべてのブラウザが開始したインテリジェントなブロッキングによって、それを継続するように取り組んでいるのが好きです。平均的なWebページは、過去10年間で着実に成長していますが、米国とヨーロッパ以外を見ると、データの価格は依然として法外に高いです。

リソースの圧縮を改善し、ダウンロードする量を減らすだけで、西側のエクスペリエンスがより良く、より安全になりますが、世界の他の地域では、例えばOpera miniのように人々を厳しく制限することなく、そもそもエクスペリエンスを可能にするだけです。

InfoQ: ギアをPolypaneに戻します。これは、Polypaneの使用を開始するためのすぐに使用できるエクスペリエンスです。そして、サービスの価格設定モデルは何でしょうか?

Kilian Valkhof氏: PolypaneはMac、Windows、Linuxで利用できるため、好みのOSに関係なく機能します。試用版にサインアップすると、請求される前に14日間使用でき、すぐにダウンロードできます。

初めてPolypaneを開いてアプリケーションを認証するときは、ドメイン名を入力すると (または、スタートページを使用して)、すぐに複数のビューポートでそれを確認できます。これは、ほとんどの人が見落とした最初のUIバグを見つけたときです。

この時点で、PolypaneはすでにCSSを通過し、すべてのレスポンシブブレークポイントを検出しています。これらをチェックして、互いに非常に近いものがいくつかあるかどうかを確認するのは興味深いことです。それらを組み合わせることで、実装を簡素化できます。メタ情報パネルを見て、サイトの情報が期待どおりであるかどうかを確認してください。この時点で、レースに出かけます。

Polypaneは、月額または年額のサブスクリプションであり、個々の開発者は月額12ドル、10人分のビジネスライセンスは月額47ドルです。年間サブスクリプションを取得すると、ライセンスは20%安くなります。この価格設定で、Polypaneを使用することで月に5分以上節約できれば、Polypaneを使用することでお金を稼ぐことができます。

InfoQ: Polypaneの次のロードマップの何でしょうか? もしかして私の心を読んで完璧なCSSを自動生成するのでしょうか?

Kilian Valkhof氏: Polypaneに追加したい機能が約5年分書かれていますが、ニューラリンク機能がまだそこにあるかどうかはわかりません! 多くの点で、私はまだ始まったばかりのように感じます。Polypaneを使用すると、Webページで何が起こっているかについてより多くの洞察を得ることができると思います。メタ情報とソーシャルメディアのプレビューはそのステップの1つであり、今後のリリースでは警告や提案を行うことでそれを改善する予定です。

最も要望の多かった機能の1つは、devtoolsがビューポート間で同期することを望んでいることです。Chromium devtoolsは、それを少しもサポートするようには設計されていないので (信じてください、私はチェックしました)、Polypaneの要素パネルを作成しています。その最初のバージョンは、Polypaneの次のリリースに含まれる予定です。選択した要素の概要がわかります。ボックスモデル、フォント情報、テキストの色が読みやすいかどうかを表示するのと同じです。すべてのビューポートに同時に適用されることを除いて、Chromium devtoolsで慣れているようにセレクターごとにCSSを編集できます。さらに、要素のコンテンツ、属性、データセットを編集するのも非常に簡単で、すべてのペイン間ですべてが同期されます。

通常の (「フロー」) レイアウト、配置、フレックスボックス、グリッドの間で、レイアウトが現状のままである理由を理解するのが難しくなる可能性があります。Polypaneには、要素のレイアウトを一目で簡単に理解できるツールが用意されています。

もう少し先に、開発者が自分のサイトが最適に構成されているかどうかを非常に簡単に見つけられるようにしたいと思います。ブラウザが最後にすべての内部リンクにスラッシュがなく、301リダイレクトが発生していると最後に通知したのはいつでしょうか? これは、誰かがリンクをクリックするたびに数ミリ秒の速度低下です! それを示して強調表示することは、Polypaneに追加するのに最適だと思います。また、gzipやbrotliなどのhttp圧縮がないリソースや、最適ではないキャッシュ設定があるリソースを示すこともできます。

Polypaneの主な推進力は、開発者やデザイナが、高速でアクセスしやすく、応答性の高いWebサイトまたはWebアプリを作成するという点で正しいことを簡単に行えるようにすることです。Web開発は時が経つにつれてますます複雑になるでしょう、そして私はPolypaneがその複雑さをナビゲートするのを手伝って欲しいです。

InfoQ: Polypaneの構築の経験をInfoQと読者と共有するために時間を割いてくれたKilian Valkhof氏に感謝します!

Kilian Valkhof氏: Dylan Schiemann氏、そして時間を割いてこの記事を読んでくれたすべての人に感謝します。不明な点があれば、コメントで質問するか、Polypaneにアクセスして直接問い合わせてください。

インタビュイーについて

Kilian Valkhof氏 は、Web開発者であり、Webの構築に20年以上の経験を持つユーザエクスペリエンス開発者です。インターネットエージェンシーを14年間運営した後、Web開発者とデザイナの生産性を高め、ワークフローを改善するツールの構築に移りました。それ以外にも、Kilian Valkhof氏は、設計から機械学習まで、さまざまなトピックについて彼の個人的なWebサイト kilianvalkhof.com に書き込み、オープンソースソフトウェアに頻繁に貢献をしています。

この記事に星をつける

おすすめ度
スタイル

こんにちは

コメントするには InfoQアカウントの登録 または が必要です。InfoQ に登録するとさまざまなことができます。

アカウント登録をしてInfoQをお楽しみください。

HTML: a,b,br,blockquote,i,li,pre,u,ul,p

コミュニティコメント

HTML: a,b,br,blockquote,i,li,pre,u,ul,p

HTML: a,b,br,blockquote,i,li,pre,u,ul,p

BT