質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

89.99%

【HTML/CSS/Electron】テキスト入力部分においての、一部文字列強調

受付中

回答 3

投稿 編集

  • 評価
  • クリップ 2
  • VIEW 1,781

nnahito

score 1836

 質問概要

Electron.jsを使って、ちょっとしたテキストエディタを作ろうと奮闘しております。
しかし、AtomやVisual Studio Codeのように、テキスト入力部分で、予約語のような一部の文字の色の変更や強調の方法がわかりません。

 質問詳細

Electron.jsを使って、ちょっとしたテキストエディタを作ろうと奮闘しております。
しかし、AtomやVisual Studio Codeのように、テキスト入力部分で、予約語のような一部の文字の色の変更や強調の方法がわかりません。

いろいろ調べてみたところ、有力な情報はDIV要素に
contenteditable="true"を与えることかなと思ったのですが、
いざ実行してみると挙動が結構重いです。

HTMLのtextareaには、Windowsなどで言うリッチエディットが無いようなので、
Atomなどはどのようにテキスト入力部で分の色の変更を行っているのでしょうか?

やはり、contenteditable="true"を指定し、JavaScriptなどで、予約後が入力に出てきたら、
<span style="color: red;"></span>等を追加したりしているのでしょうか?

ご存じの方いらっしゃいましたら、ご教示頂けますと幸いです。
お知恵をお貸しください。
よろしくお願いいたします。

 蛇足

記念すべき、100回目の質問!

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 3

+2

AtomやVisual Studio Code(以下Code)でのエディタ表示部分は、textareaなどのHTMLに元からあるテキスト編集用要素でつくられているのではなく、全て自前でdivやspanなどを組み合わせて作り上げています。AtomもCodeも開発者ツールが表示できますので、実際にどのようなDOM構成になっているか見てみると良いでしょう。また、どちらもオープンソースとしてソースコードが公開されていますので、それぞれのライセンスにさえ従っていればそのままパクっても問題ありません。(Light Tableも同じくElectronを使ってますので、参考になるかも知れません)

なお、IMEの処理をするには<input type="text"><textarea>などが必須なのですが、別途入力用のinput要素などを用意している形で補っています(AtomとCodeで用意の仕方が異なる)。背面に隠したテキスト入力要素から入力中の文字を取得して同様にレンダリングしたり(Atom)、そのテキスト入力要素をカーソル部分においたり(Coed)して、あたかも直接編集しているように見せています。最終的には入力終了後にDOMを再レンダリングする形で作成されていくようになっています。

※ Atomの仕組みはラップやシンタックスカラーが反映されますが、文節選択がどの部分を指しているかというAPIがDOMに存在しないため、どの文節が選択されているかがわからないという欠点があります(未決定状態はわかる)。逆に、Codeの仕組みはChromiumでの表示そのものなので文節選択等がうまく現れますが、ラップやシンタックスカラーなどは入力完了まで反映されません。また、初期のバージョンでは上にオーバーラップされる形で表示されるなど不具合がありました(現在は文字入力の度にずらす処理を入れており、修正済み)。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/12/11 13:39

    ご回答ありがとうございます。

    なるほど、そもそもに表示されているのはtexareaなどではなく、生粋なるHTMLだったのですね。
    勉強になります。

    しかし、私の実力が完全に足りなく、先程AtomのGitHubを見てきたのですが、
    何処にどのソースコードがあるのかすら分かりませんでした……

    開発しているエディタは、プログラミングのコードを作るためのエディタではないため、
    そんなに多くの予約語などは今のところ必要としておりません。
    もう少し簡単に扱えるライブラリなどはございますでしょうか?

    まだ、読んでいる途中ですが、
    http://qiita.com/yuku_t/items/fb92e173120d7b2e49ed
    などは未完のまま記事が終わってしまっておりますし……

    ご存知でしたら、合わせてご教示頂けますと幸いです。

    キャンセル

+1

以下は正攻法ではないのですが、開発目的によっては有効なので、
もし私ならどう考えるか、参考までにお話しておきます。


そもそも、エディタを自作するのは大変です。
同じElectronを使っていても、MSやGitHubの開発規模を考えれば、
個人レベルでそれと同水準のエディタを開発するのは難しいでしょう。

そこで、私でしたら、エディタを自作するかわりに、
VSCodeやAtomなど既存のエディタの拡張を作ります。

さらに、テキストエディタによっては(Notepad++とか)、
予約語の独自リストを定義できるものがあるので、
そういうものを利用するとより楽に作れます。

たとえば、自作言語を普及させるために、
ユーザがエディタで書きやすいようにしたいといった目的なら、
違うのは言語の文法や予約語だけで、エディタ部分は車輪の再発明ですから、
全体を自作するより部分的に拡張する方がはるかに効率的です。


ただまあ、学習目的でエディタを作ること自体が目的、
といった場合には的外れな回答になってしまいますが、
多くの場合で開発の労力が百分の一とかになるので、
選択肢のひとつとして回答しておきたかったのです。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/12/12 21:03

    ご回答ありがとうございます。

    一言で「エディタ」と書いてしまいましたが、
    プログラミングのエディタが作りたいわけではないんです。
    テキストエディタで、特定のワードのみ強調できるといった内容のもので、
    そのワードの強調部分で詰まってしまいました……

    何か、良いフレームワークなどご存知ではないでしょうか?

    キャンセル

  • 2016/12/13 03:12

    >テキストエディタで、特定のワードのみ強調できるといった内容

    回答本文の繰り返しになってしまいますが、いったんゼロベースで、
    「どーしてもエディタを自作する必要があるかどうか?」を考えたいです。

    強調させるだけなら、コードエディタではなくテキストエディタでも、
    シンタックスハイライトを同じように利用することはできます。

    たとえば、「住所」「氏名」とか、「価格」「売上」とか、
    特定のキーワードを「if」や「for」の代わりに強調するわけです。

    コードエディタをテキストエディタとして使っても別にいいわけです。
    というかむしろ、「Notepad++」や「秀丸」は
    「コードエディタとしても使えるテキストエディタ」に分類できそうです。

    もし「どーしても既存のエディタでは難しい」という機能が必要な場合でも、
    エディタの形態で処理しないとダメなのか、バッチ処理とかではダメなのかも考えます。

    その際、処理の工程を分解して、難しい部分だけ別に処理する方法もあります。
    たとえば、表組をかんたんに作りたいとか、かんたんに色指定したいとか。

    そういうときは、そこだけツールにすると、エディタ全体を作るより楽です。
    上の例で言えば、Wiki記法からHTMLのテーブルに変換するツールや
    カラーピッカーを作って、ほかの部分は普通のエディタで書くわけです。

    ようするに、既存のソフトに対して差分の機能だけ作ります。
    自分の作るものに合うフレームワークやライブラリがない場合、
    すでにあるソフトに対して拡張やプラグインを書く発想です。

    キャンセル

  • 2016/12/15 22:42

    ご返信ありがとうございます。

    >回答本文の繰り返しになってしまいますが、いったんゼロベースで、
    >「どーしてもエディタを自作する必要があるかどうか?」を考えたいです。

    エディタを作る必要は一切ありません。
    ひたすらただ、趣味でこういうのって造ってみたい!
    と思っただけですので……

    キャンセル

0

window.getSelection() あたりを使えばできそうですけど、
条件分岐はかなり面倒になりそうですね。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/12/15 22:44

    ご回答ありがとうございます。
    こちら、選択範囲を返して〜という感じのようですね。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 89.99%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる