【備忘録】iPadのTextasticでコンソール出力する2つの方法

f:id:zaloha8:20220104100509j:plain

こんにちは。alohaです。

iPadがキーボードとマウスに対応したことにより、iPadでプログラミングを行う事もできるようになりました。

私の場合、自宅でプログラミングする場合はMacBookを使用し、外出先でプログラミングする場合はiPadを使用しています。

最近では、iPadにプログラミングの開発環境を構築するのも簡単にできるようになっており、

Pythonの開発環境として『Pythonista』を、HTML, CSS, JavaScriptの開発環境として『Textastic』をiPadに入れています。どちらのアプリもiCloudドライブを経由してファイルを共有できる点も良いですね。

さて、先日『Textastic』を使ってJavaScriptの勉強をしていて、iPadのSafariでプレビューするとコンソール出力の結果が見れない事に気がつきました。

JavaScriptでコードを書いていると、どうしてもコンソールに値を出力して処理の結果を確認したい場面が出てくるので、コンソール出力の結果が見れないと不便です。

いろいろ調べて、コンソール出力する方法を2つ試した結果を書き残しておきます。

方法としては、2つあります。

① Textasticのプレビュー画面で確認する方法

② Safariの拡張機能として、Web Inspectorを追加する方法

****.htmlには、以下のJavaScriptのコードを記載しておきます。

<script>
	console.log("test printing on console");
	console.log(Math.PI);
	console.log("日本語も出力できます");
</script>

以下のページによると、Textasticの6.3からコンソールが追加されたとの事。

探してみると、以下の通りconsole.log()で出力した内容が見れました。

・画面右上のプレビューボタン（メガネのマーク）をクリックします。

f:id:zaloha8:20220104090838j:plain

・画面左上のボタンをクリックするとconsole.log()で出力した内容が見れます。

f:id:zaloha8:20220104091350j:plain

iPad OS 15より、Safariの機能拡張としてWeb Inspectorを追加すると、コンソール出力した内容を見れる様になっています。

・『設定』→『Safari』→『機能拡張』→『機能拡張を追加』の順にクリックします。

f:id:zaloha8:20220104092001j:plain

・App Storeに接続されるので、Web Inspectorアプリを入れます。

f:id:zaloha8:20220104092411j:plain

・『設定』→『Safari』→『機能拡張』の画面に『Web Inspector』が追加されているので、クリックしてONにします。

f:id:zaloha8:20220104092858j:plain f:id:zaloha8:20220104093456j:plain

・Textasticから『Preview in Safari』をクリックします。

f:id:zaloha8:20220104094152j:plain

・Safariのアドレスバーの右側に追加されたアイコンをクリックし、『Web Inspector』をクリックします。

f:id:zaloha8:20220104094616j:plain

開発者用画面が表示されるので、『Console』タブをクリックすると、console.log()で出力した内容が表示されています。

f:id:zaloha8:20220104094913j:plain

iPadのTextasticでコンソールに出力する方法を2つ試しました。

どちらの方法でもconsole.log()で出力した内容を見ることができるので、好きな方を使うのが良いと思います。

これでiPadを使ったプログラミングが効率よく進められますね。

それでは、また。

物づくりの小部屋