WEBサービスを作る時にユーザー視点を重要視する事ができる、下駄です。
最近とあるwebサービスを作る時に、プログラミングコードを入力するという場面があったので、textareaにプログラムを入力している感覚がどうしても、プログラムをする感覚になれなくて、色々とあーだこーだやってみたところ、どうしても必要だと感じて作ったライブラリを公開したいと思います。
プログラミングエディタの触り心地とは
通常、プログラミングは、テキストが入力できればいいと考えてしまうのは浅はかで、プログラマーが使用するテキストエディタは、その人独自にカスタマイズされていることが多いはずです。
各有、自分も今一番人気の、VisualStudioCodeを使って入力をしているんですが、単にtextareaタグにプログラミングを入力していく感覚がまるで持てない。
そこで、プログラミングをする感触が持てる条件というのを洗い出してみた。
・改行コードがあって、見た目でプログラムボリュームが分かりやすい。
・タブキーでタブが入力される。
・syntax機能があって、間違ったプログラム言語を判別してくれる。
・変数、定数、関数名を入力途中でプルダウン選択することができる。
・キーワード検索のしやすさ。
・実行確認（プレビュー）ができる。
もっともっと出てきそうですが、とりあえずこんな感じで勘弁してあげましょう。
改行コードは重要！
上記すべての対応をすることは、簡単にはできないので、改行コードとタブキーを最小限の対応として行うことにした。
そして、こうした場面は今後何度もあることを想定して、ライブラリ化しておくことにする。
今後はこのライブラリを更新していけば、ブラウザでコーディングをする事がどんどん楽になって行くという見込みである。
とりあえず、ライブラリ置き場は以下のリンクを載せておくので、使いたい人は使いたい放題のMITなので、使ってやってくだされ。
https://github.com/yugeta/lines-number
ん？似たようなライブラリがあるぞ・・・
ネットで検索してみたら、textareaに改行コードを入れてくれるライブラリがすでにあるとのこと。
「
jquery-linedtextarea」という、同じくgithubにアップされているものだが、
これはjqueryを使って、同じようにtextareaに改行コードを付けてくれるのだが、そもそもこれだけの簡単な事をするのに、jqueryなどいらんだろ。
あと、tabキー対応もできていないので、コードエディタとしてはやはり辛い。
そして、そもそも、このライブラリを使うと、textareaをwrapするelementを作られてしまい、DOM構造が変わってしまうというデメリットがあるようだ。
もちろん、その後のページ操作によって崩れが発生しにくいというメリットもあるが、ちょっと厳しい気がするので、やはり自作したモノの方が良さそう・・・
あと、以前ブログに書いたtextareaをノート風にして、見た目も良くしているので、その点も評価できるんじゃないかな？（自画自賛）
使い方
githubからcloneしたら、中にはいっているsampleフォルダ内のindex.htmlをブラウザで開くと、そこにはtextareaに改行コードが付いた状態で表示されているはず。
そのシンプルなソースコードをみても分かる通り、srcフォルダ内のjsをscriptタグでheadタグ内（別にどこでもいいが・・・）に貼り付けて、textareaのclass名に、「lines-number」と登録する。
これだけでは、初期設定ができただけなので、行番号を表示したい場合は、同じtextareaタグに、data-lines="number"という属性を追加し、
さらに、ノート風の見栄えにしたい場合は、data-type="note"を追加すればいい。
とりあえず、これだけで、textareaタグが見違えるほどエディタ仕様になるはず。
お試しあれ！
注意）多少の画面崩れがある場合は、cssで調整してくだされ！
0 件のコメント:
コメントを投稿