スマホでChatGPTにHTMLやJavaScriptを書いてもらい、それをGitHubやブログ、メモアプリなどに貼り付けて使うことが増えてきました。
ただ、スマホで長いコードを扱うと、意外と大変です。
たとえば、
- 入力欄の全文をコピーしたい
- 入力欄の全文を削除したい
- GitHubの編集欄で長いコードを入れ替えたい
- ChatGPTで作ったHTMLをスマホだけで公開したい
- プラグイン用のJavaScriptをスマホで少し修正したい
こういう作業は、PCならそれほど難しくありません。
しかしスマホだと、全選択・コピー・削除の操作だけでもかなり面倒です。
そこで、スマホでHTMLやプラグインをよく触る人には、個人的に Via というブラウザをおすすめしたいです。
Viaブラウザの良いところ
Viaは、かなり軽量で、操作感もかなり良いブラウザです。
普段使いのブラウザとしても便利ですが、個人的に特に優秀だと思っているのが スクリプト機能 です。
このスクリプト機能を使うと、サイト側に少しだけ自分用のJavaScriptを追加できます。
つまり、普段よく使うサイトの操作を、自分向けに少し便利にできます。
※悲しい事に音声読み上げ機能はありませんでした。小説サイトを開くと自動で読み上げるスクリプトを作りましたが、Viaでは動作しませんでした。(導入するのが怖いですが、Firefox Android ＋ Violentmonkeyならば動作する可能性あり)
スマホの「全選択」は意外と大変
スマホにも、基本的には「全選択」機能は用意されています。
ただし、PCの Ctrl+A のように、どこでも一発で安定して使える感覚とは少し違います。
入力欄を長押ししてメニューを出し、「全選択」や「すべて選択」を選ぶ流れになることが多いですが、サイトや入力欄、スマホの機種、OSのバージョンによって操作感が変わります。
特に、ChatGPTで作った長いHTMLやJavaScriptをGitHubなどに貼り付ける場合、全選択をしようとしてカーソル移動になったり、範囲選択のつまみをうまく操作できなかったりして、かなりストレスになることがあります。
そのため、入力欄の近くに「コピー」「削除」などのボタンを出せるだけでも、スマホでの作業はかなり楽になります。
スマホでコードを扱う時に便利なスクリプト
たとえば、GitHubでHTMLやJavaScriptを公開する時、スマホだと入力欄の操作が大変です。
長いコードを全選択してコピーしたり、全部消して新しいコードに入れ替えたりするだけでも、地味に時間がかかります。
そこで、入力欄にフォーカスした時だけ、入力欄の近くに補助ボタンを表示するスクリプトを作りました。
現在公開しているものでは、入力欄の下に以下のようなボタンを出せます。
- コピー
- 削除
- 前を削除
- 後ろを削除
これだけでも、スマホでのコード編集がかなり楽になります。
特に、ChatGPTで作ったHTMLをGitHubに貼り付ける時や、既存のコードを一度削除して入れ替える時に便利です。
公開しているスクリプト
入力欄の操作を楽にするスクリプトはこちらです。
https://raw.githubusercontent.com/uni928/Uni928PublicHTMLs/main/Plugin/plugin3.js
Viaのスクリプト機能には、URLから導入する機能があります。
その機能で上記URLを指定すると、スマホでも入力欄の操作を補助できるようになります。
使用する場合は、網羅性はありませんが、ChatGPTなどのAIに添付して、安全か聞いてから使う事を推奨します。プログラマーやSEの方は、可能ならば目視チェック願います。
いろいろなサイトで使えるのが便利
この手のスクリプトは、特定のサイトだけでなく、多くのサイトで役に立ちます。
たとえば、
- GitHub
- Qiita
- ブログ投稿画面
- メモ系Webアプリ
- ChatGPTで作ったHTMLを貼る画面
- 長文を入力するフォーム
- 一部通販サイト
などで、コピーや削除の操作が楽になります。
スマホで「長い入力欄」を触る機会が多い人ほど、恩恵を感じやすいと思います。
おまけ：見た目も好き勝手に変えられる
Viaのスクリプト機能を使えば、操作補助だけでなく、サイトの見た目もある程度変更できます。
たとえば、下記のスクリプトでは、サイト全体をクリーム色背景と黒文字寄りにするような調整をしています。
https://raw.githubusercontent.com/uni928/Uni928PublicHTMLs/main/Plugin/plugin2.js
こういうものを作れば、
- 目に優しい配色にする
- 白背景をクリーム色にする
- 文字を黒寄りにする
- 入力欄やボタンの見た目を変える
といったこともできます。
もちろん、サイトによっては表示が崩れる場合もあります。
そのため、万能ではありません。
ただ、自分がよく使うサイトを少しだけ使いやすくする目的なら、かなり便利だと思います。
注意点
スクリプトは便利ですが、何でも入れてよいわけではありません。
スクリプトはページ上で動くJavaScriptなので、内容を理解できないものを不用意に入れるのは避けた方がよいです。
特に、
- パスワード
- 個人情報
- 決済情報
- 重要なアカウント情報
を扱うサイトでは、知らないスクリプトを動かさない方が安全です。
自作スクリプトや、内容を確認できるスクリプトを使うのが無難です。
まとめ
スマホでChatGPT製のHTMLやJavaScript、プラグインを扱う人には、Viaブラウザのスクリプト機能がかなり便利だと思います。
特に、入力欄の下に「コピー」「削除」などのボタンを出すだけでも、スマホでの作業効率がかなり変わります。
PCなら簡単な操作でも、スマホだと面倒なことは多いです。
そういう小さな不便を、自分用のスクリプトで少しずつ減らせるのがViaの良いところだと思います。
スマホでHTMLやプラグインを作る人は、ぜひ一度試してみてください。