ブラウザで動くテキストエディタ、iPhone だと入力が大変問題
わざわざローカルで編集をしなくても、ブラウザ上で編集できて実行できるオンライン環境サービスってありますよね。
手軽で私だいすきなのですが、基本 PC からの入力を想定しており、iPhone で編集しようとすると「グギギギ」ってなるほど大変なんです。
下手すると日本語が入力できなかったり、テキスト選択ができずコピペすらも難しいときがあります。
あ。どうも、（自称）iPhone でのコーディング時間世界一を名乗らせてもらってもらっている者です。どうぞよろしくお願いします。
Pythonista3 のカレンダー | Advent Calendar 2022 - Qiita として、ひとりで 25 日分の記事を書いているので、iPhone でのコーディング時間世界 2 位の方と差が広がる一方です（2 位とは？）。
iPhone（スマートフォン）でも、コードが書きたい
ニッチな困りごとかもしれませんが、iPhone でも手軽にブラウザ上のテキストエディタを使いたいのです。普段 Pythonista3 や、iVim、CodeSandbox 等 iPhone 上でコードを書いているので、ブラウザ上でも PC ブラウザのようにさも当たり前のように、入力ができてほしいのです。
terrychou/iVim: A vim port to iOS.
CodeSandbox for iOS Beta - The first Cloud IDE for iOS.
Js 製のテキストエディタライブラリは、モバイル未対応を高らかに宣言をしていることもおおく、環境依存での難しさがあるのだろうなと勝手に察しております。特に（モバイル）Safari となると、CSS の対応ですらちょっと全体とずれていたりが散見されるので、iPhone でコーディングしたいマンは、細々と生きていくしかないのです。。。
CodeMirror ベースで無理矢理作ってみました（iPhone で）
背景
（わからない方は、わからないで問題ないです）GLSL でシェーダーを書くのを私は趣味としています。そんな GLSL の世界に、つぶやき GLSL という文化がありまして。完全に人間ではない神々たちの戯れ。で、畏れ多いのですが、そんな神々の戯れを陰ながら拝見させていただいていたのです。
そんな、神々の戯れに twigl という Web サービスがありまして。。。
が、エディタのベースが Ace でして、入力が満足にできない。。。
Ace - The High Performance Code Editor for the Web
そもそも、コードを写経して結果を眺めるレベルのよちよち感の私なので、PC で鍛錬をすればいいのですが、手軽に GLSL が書ける手軽さ、そしてサウンドシェーダーも対応している素晴らしさで、iPhone で気軽に GLSL を書きたくなってしまったのです。実際 GLSL を手軽に実行できる環境は、PC を含めてもなかなかありません。そんな中で、ブラウザ上で動くってめちゃくちゃ魅力的だったのです。
世の中の人はみんな、悪くないのですが、Ace ですと iPhone で編集が大変なのです。これは、個人的に悩む問題なので自分で解決するしかないのです。本当に、みなさまは悪くないのです。。。
こんなのを作っています
pome-ta/shaderCodeMirror6WebGL
iPhone でいいかんじに（どうにかストレスなく）コーディングできるよう、ちまちまと作っているリポジトリです。まだまだ全体的に公開します！なレベルではないのですが、モチベーション継続のために共有をします。
エディタのベースは、CodeMirror です。名前は知らなくとも、人生で一度はこのテキストエディタライブラリにお世話になっていると思うレベルで有名なやつですね。
Version6 になってから、モバイル対応が最高に良くなっています。何の問題もなくテキスト選択ができます。（日本語）文字入力ができます。レイアウトが崩れません。フォーカスされた時無駄な拡大はありません。
大真面目に書いてます。そんなレベルでモバイルへの対応はまだまだな状態なのです。
モバイル用として、機能を追加
キーボードの上にバーを用意して、「普段よく使いそうな」おかつ「PC では簡単だけど iPhone では面倒」なサポートをつけてみました。
左から
- コメントアウト
- 1 行選択
- 左移動
- 上行移動
- 下行移動
- 右移動
- 全選択
- redo
- undo
また、バー上をスライドさせると、キャレットが移動をします。
ちなみに、PC からのアクセスですと補助バーは出ないようになっています。
いつでも、気軽にエディタを触れるよろこび
コードを書きたいときと、PC の前にいるタイミングがばっちり合うときってなかなか無くて、PC 開くと他のことをやり始めてしまいますし、開発の継続って難しいですよね。
このエディタは、Pythonista3 をメインに実装をしているので、手元に iPhone があれば、その場で開発が始めることができますし、iPhone 対応の Web アプリを作成しているので、iPhone で確認することがすごく楽です。
エディタが未完成状態であっても、エディタでエディタを開発しているので、自作エディタに機能を乗せれば、自作エディタ上でも開発は可能です。
- いつも手元にある
- すぐ触る iPhone
- 気になったらすぐ実装できる
- デバックも iPhone
シームレスに困りごとを楽しく解決できるループが自走できるようになるのです。
こんな人間がいるということだけでも、知って帰ってくださいませ
マッチポンプな自己解決方法だったかもしれませんが、ニッチなニーズは自ら開拓していくしかないのかもしれませんね！そんなときは、楽しく解決できる方法を探していきたいものです。
ブラウザエディタのモバイル対応、まだまだ浸透するには時間がかかるように感じています。Ver5 から Ver6 でいきなり難しくなった CodeMirror を勉強していきながら、自分が理想とする iPhone で使えるテキストエディタを目指していきたいと思います。
一番の困りごとは、「iPhone でコード書いているっす ☺️」 って言った相手の
「😅」 こんな顔が辛いことですかね。。。
ここまで、読んでいただきありがとうございました。