Web Toolsは、Ergoの開発者James Finley氏による新しいアプリで、iPad向けにSafari風のWebインスペクターを作成することを目指しています。iOS経由でWebページのソースコードを取得する他のソリューションも試してみましたが、少なくともiPadでは、iPadの大きな画面に合わせて設計・実装されたツールに匹敵するものは見たことがありません。

Web Toolsは非常にシンプルなアプリで、アドレスバーとブラウザウィンドウ以外のインターフェース要素はありません。アドレスバーには、「戻る」「進む」ボタン、「再読み込み」ボタン、「検証」ボタンがあります。アドレスバーにウェブページを読み込み、「検証」ボタンをタップすると、ウェブインスペクターが下からスライドアップして表示されます。

Webツールのデザインは、Mac版SafariのWebインスペクタと非常に似ています。インスペクタを有効にすると、Webページの下半分を覆うようにスライドアップします（ただし、好みに応じてドラッグして隠す量を調整することもできます）。インスペクタには2つのパネルがあり、1つはWebページのHTML DOMツリーを表示します。DOM内を移動したい要素を展開したり折りたたんだりできます。

要素を選択すると、インスペクタの2番目のペインにその詳細が表示されます。ここでは、要素の属性、適用されているスタイルルール、そして要素の計算されたスタイルを確認できます。Web Toolsは（少なくとも現時点では）サイトのCSSのライブ編集をサポートしていません（サイトのすべてのドキュメントを実際にナビゲートすることはできず、現時点ではメインのHTMLページのみ）が、ページ上の要素に属性を追加したり削除したりすることは可能です。自分のウェブサイトを編集している場合、これは様々な要素に対して複数の異なるスタイルの選択肢を比較対照するのに最適な方法です。それでも、スタイルルールセクションが開かれ、選択した要素の実際のCSSをライブ編集できるようになることを期待しています。

Web Tools は拡張機能に対応しているので、Safari で閲覧しているウェブページのコードを確認したい時は、共有メニューを開いて Web Tools 拡張機能をタップするだけです。すると、ページが既に読み込まれ、ソースコードが表示された状態で Web Tools が起動します。これにより、Mac 版 Safari と同じくらい簡単にウェブページのソースコードを表示できます。私は iOS ツールボックスにこの機能があることを大変気に入っています。

Web Toolsの最後の機能は非常に興味深いものです。ブラウザビューの右側にドラッグハンドルがあり、表示されるウェブページの幅を動的に調整できます。この機能は、ウェブサイトのレスポンシブレイアウトをテストするためのものです。前後にドラッグするだけで、ページの幅に応じてウェブサイトのレイアウトが様々な方法で変化します。

Web Tools は iPad を念頭に設計された最新の iOS アプリです。そのため、iPad のマルチタスクをサポートしており、私の iPad Pro で驚くほどスムーズに動作します。私は個人ウェブサイトのデザイン変更に取り組んでいる間 (主に個人的な練習とデザインの遊び場として)、iOS 版 Coda でコードを書き、ライブ プレビュー機能を使用して Safari で変更内容を確認してきました。Coda は Safari で表示できるようにウェブページをローカルホスト サーバーに配置しますが、Coda が開いている限り、このサーバーはどのウェブブラウザーからでも利用できます。そのため、コードで作業しながらサイトのレスポンシブ デザインを表示および編集するための優れた方法として Web Tools を使用することができました。Split View で Coda と Safari を起動し、ライブ プレビューを開始し、Safari 機能拡張を介して Web Tools でローカルホスト アドレスを開くだけです。現在、Web ツールはライブ プレビューを実行しており、Coda で保存するたびに、Web ツールでページが再読み込みされます (自動再読み込みが機能しないこともありますが、Web ツール ページを手動で再読み込みすると正常に戻ります)。

Web Toolsはエキサイティングな新ツールで、iPad Proへのワークフロー移行を目指す開発者にとってまさに必要なアプリです。これはまだバージョン1.0ですが、開発者はWeb Toolsにさらに多くの機能を追加する予定です。Web Toolsのウェブサイトによると、次に予定されているのはJavaScriptコードのデバッグとテストのためのJavaScriptコンソールです。

Web Tools 1.0は優れた基盤を構築してくれたと思います。そのシンプルさにもかかわらず、既に私のワークフローに非常に役立っています。とはいえ、これほど強力な影響力を持つアプリには、将来への期待がまだ残っています。Web Toolsの今後の展開が待ち遠しいですが、いくつか追加してほしい機能があります。いくつかは既に上で触れました。

• ウェブページの幅と高さの両方を操作できる機能。これにより、両方のパラメータに基づいてレイアウトを変更するメディアクエリに対応できます。さらに、一般的なデバイスのサイズのリストがあれば、例えば「iPhone 6サイズ」を選択すると、ウェブサイトがiPhone 6の比率に制限された状態で表示されるので便利です。Codaのライブプレビューと組み合わせれば、iPhone（または他の特定のデバイス）向けにサイトの外観を編集し、作業を進めながら実際の外観を正確に確認できる素晴らしい方法になるでしょう。
• 選択した要素の CSS をライブ編集します。
• アドレス バーで開いているメインの Web ページだけでなく、サイト上のアクセス可能なすべてのファイルを検査します。
• 大きな HTML ファイルを開くと、アプリが少し遅くなることがあります (すぐに追いつきますが、それでも)。そのため、速度と効率性の向上も期待できます。

総じて、Web Toolsと、それがiOSワークフローにもたらす機能強化には非常に期待しています。Web開発者の方、あるいはWebページのソースコードを確認したい理由や好奇心をお持ちの方は、ぜひこのアプリを試してみてください。iOS向けのWeb検査アプリの中で、私が知る限り間違いなく最高のアプリであり、今後さらに素晴らしい機能が期待できます。

Web Tools は iPad 向けにのみ App Store で提供され、導入価格は 5.99 ドルです。