ブラウザで動くテキストエディタ、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 でコード書いているっす☺️」 って言った相手の
「😅」 こんな顔が辛いことですかね。。。
ここまで、読んでいただきありがとうございました。