VS CodeがiPadでも使えるようになりました!!
「iPadをPCと遜色なく使えるか」には期待している反面、手持ちのiPad Proはスケジュール管理、手書きメモの範ちゅうから抜け出せていません。
Mac Book Pro1台あれば、特に困ることはないからです。 とはいえ、新しいものが登場すると試さずにはいられません。
米国時間2021年10月20日、VS CodeのWeb版「VS Code for the Web」のプレビュー版の配布が開始されたニュースをキャッチし、早速試してみました。
「VS Code for the Web」はインストール不要、ブラウザ上で操作できるため、いつでもどこでもだれでも気軽に扱えるツールへの発展が期待できますね。
現地のBlog記事によると、以下の特長が気になりました。
●EdgeおよびChromeであれば、ローカルマシンのファイルにアクセス可能。
ファイルを開き、編集、保存が可能。上記以外のブラウザでも、ファイルのアップロード、ダウンロードでファイルの操作が可能。
●iPadでも、ファイルのアップロード、ダウンロードやGitHubのリモートリポジトリ機能を使用してファイルの操作が可能。
ここではiPad Pro（11インチ・第3世代）を使って「VS Code for the Web」を試してみることにしました。
Web版はブラウザ上ですべてを実行しているため、デスクトップアプリと比較した場合利用できない機能があるため、特にメリットを感じません（PCでの検証は次回に見送ることに）。
さっそくiPad ProのChromeで「https://vscode.dev/」にアクセス。
iCloud上のhtmlファイルを開いてみた。
iPad Proを使って、iCloudのデスクトップ上にあるファイルを開いてみることに。
まず、VS Code for the WebをChromeで起動します。
起動すると以下の画面が表示されます。
デフォルトは英語版の画面になります。左上のトグルボタンから「File」→「Open File」をタップします。
「ローカルファイルへのアクセスはサポート対象外」のアラートが表示されます。
画面内に3つ並ぶ真ん中のボタン「Upload…」をクリックします。
右下にあるポップアップ画面から「ファイルを選択」をタップします。
ここではicloud上に保存しているhtmlファイルを開きます。
上記ファイルを編集後にcommand＋Sキーで保存をかけたところ、以下のアラートが表示され、ファイルを保存できませんでした（原因については後ほど報告いたします）。
拡張機能は、適用されるものと適用外のものが…。
デスクトップアプリ同様に、ウインドの拡張ボタンをクリックし、デスクトップアプリで使用している拡張機能を選んでみました。
適用される拡張機能は、下記Pritierのようにinstallボタンが表示され、インストールできました。
しかし、FORMAT HTML in PHPのようにWeb版に対応していない拡張機能もあります。Japanese Language Packが適用外というのも英語が苦手な私にとっては痛いところです。
ふだん私が使用している拡張機能も調べてみました。
利用できた拡張機能
Beautify Prettier
indent-rainbow
Material Icon Theme
利用できなかった拡張機能
Japanese Language Pack
Bracket Pair Colorizer
Path Intellisense
現時点でWeb版に未対応なのか、そもそも適用できないものなのかは追って調べていきたいと思います。
Chromeは不具合が発生! Safariでの使用をおすすめします!
前述のとおり、iCloud上に保存しているhtmlファイルをアップロードで開き、編集をかけ、ダウンロードで保存という一連の動作を試してみました。
Chromeでこの動作を行うと、ファイルを開くところまでは問題なく行なえますが、保存をかけた際にアラートが表示され、保存ができません。
エラーの原因を見ると、保存をかけた際にローカルファイルへアクセスを行おうとしていて、エラーが出ている模様です。
VS Code for the Webは「Microsoft Edge」と「Google Chrome」などの「File System Access API」をサポートしているブラウザーでは、ローカルファイルへのアクセスに対応しているため、ショートカットキーからでもメニューバーからでも保存をかけた場合、自動的にローカルファイルでアクセスしようとしてエラーが出るようです。
このエラーはSafariを使用することで回避できました。
Safariで開いた上記ファイルを同様にcommand＋Sキーで保存をかけると、下記の通り「xxxx.htmlをダウンロードしますか」と表示されます。
「ダウンロード」をタップすると、問題なくダウンロードできました。
iPad OSでの使用にあまりメリットを感じない…
iPad ProでVS Codeが使用できるようになったことはとてもうれしいのですが、同時に懸念される事があることにも気づきました。
画面内のボタンやメニューの操作には、トラックパッド付きの外部キーボードが必須
スクリーンへのタッチを前提とした iPad OS専用の設計ではないため、タッチのスペースが狭い箇所では誤作動も生じやすいです。
快適に操作するには、Magic KeyboardやロジクールのCombo Folioなど、トラックパッドの性能に申し分のない外部キーボードが必須です。
アップロード、ダウンロードでのファイル管理は手間がかかる
iPad Proからローカルファイルへのアクセスができないため、ファイルを開いて、編集、保存するたびにアップロードとダウンロードを繰り返すことになります。
ブラウザ上では自動保存が設定できますが、ファイルをダウンロードしない限り、完全な保存状態になっていません。
今回はひとつのファイルで試してみましたが、複数ファイルを同時に開いて編集、保存をかけた場合を考えると面倒な作業が増えてしまいます…。
編集中のファイルは、プレビュー不可能…
通常はhtmlエディタで編集→保存を繰り返しながら、ブラウザに表示させたhtmlファイルを確認しながら作業を勧めます。
しかし、iPad OSでVS Codeを使用した場合、ファイルの管理をアップロード、ダウンロードで行っているため、編集途中のファイルがプレビュー不可能です。
GitHubのリモートリポジトリ機能を使えば可能なのですが…、こちらも面倒かもしれません。
（ここに関しては後日レポートいたします）
まとめ
現状では、iPad ProでもVS Codeを使ってコーディング可能な環境を整えようか正直迷っています。
Magic KeyboardやCombo Folioを用意するには出費を覚悟する必要があります。これらのキーボードを装着すると軽量がメリットのiPad Proがいきなり重たいデバイスになってしまします。
手持ちのMac Book Pro並みの重量であれば、わざわざこの組み合わせで持ち歩くメリットもなさそう…というのが正直な感想です。
コメント