ねごとめも背景

    ねごとめも



    作成したプログラムは、こちらでも公開しています。
    よかったら覗いてみてください。_(┐「ε:)_
    → javascript,SVG で作成したプログラム置き場
    → プログラム一覧 - (2)

    テキストエディタ作成の続き ( contenteditable 属性の利用 )


    作ってるの、エディタとか言ってますけど、
    テキストエリアに色付き文字を出力するだけのものです。(*‘ω‘ *)

    前回作成したテキストエディタ?
    → { contenteditable 属性を利用したテキストエディタの作成 }
    今回の
    → { javascript で動作するテキストエディタの作成( 2 ) }
    あと、こちらのサイト→( jsdo.it )にプログラムを公開してみました。

    ブログのページによっては、 css の ID がか重なったり、
    javaScript の関数が重なったりして、
    レイアウトが崩れたり、スクリプトが正しく動かなかったりしたので、
    ホームページ を作ったのだけど、
    こういう便利なサイトもあるのね。。しらなかった。_(:3」∠)_
    ホームページは、更新のリンク付けが非常にめんどくさい。


    今回のは、正規表現の機能を追加してみました。
    動作確認やって、 jsdo.it に公開したのだけど、正規表現を [^xyz] の値で処理させると
    ブラウザがクラッシュしてしまう事が分かりました。
    ええええ、と思って、一回目の処理の回数を取ったら 8000回 、
    それをもって、二回目、三回目・・・の処理へと。。。
    原因は、正規表現を使った処理のやり方でした。
    一回目の処理で、一回目にマッチした文字を、書き出す html タグを付けて出力。
    二回目は、一回目に書き出したダグ付の文字列に対して、処理をやっていたから、
    付け足したタグの文字列の中に、マッチした文字が含まれていると、
    無限ループに近い状態になり、ブラウザがクラッシュしていたようです。
    このことに、気づかずに公開してました。
    出来る範囲で、一応、修正はしました。

    正規表現には、無限ループってのがあるらしいです。
    ココは、使うひとの判断に任せます。ヽ(´ー`)ノ




    2017/03/26 [13:22]

    contenteditable 属性を利用したテキストエディタの作成


    使用ブラウザ:chrome
    HTML5から導入された属性に contenteditable というのがあるらしい。
    これは、前回の { テキストエリアに色付き文字を表示出力する } を作成する過程でみつけたもの。
    この属性は、html タグの div タグなどを編集可能なテキストエリアにしてしまうもの。
    使いみちは、いまいち分からないけど、面白い機能だと思った。

    前回のは、テキストエリア要素に、JavaScript で色付きの文字を表示させましたが、
    これは、見た目そう見えるだけで、テキストエリアは透明にして見えないように設定しています。
    テキストエリア要素の中にタグを設置しても反映されないので、文字に色を付ける事はできません。
    なので、その下に、pre タグを重ね合わせ、文字が入力されると、
    pre タグに対して処理を行うものでした。

    しかし、この contenteditable 属性は、色などを指定したタグを
    直接設置することが出来るとの記事を見つけたので、
    さっそく、試してみました。
    最初は、 div 要素を使ってテキストエディタ風の色文字の出力に挑戦したのですが、
    改行をうまく処理する JavaScript を書くことが出来ません。_(:3」∠)_

    contenteditable 属性を利用した簡易テキストエディタ

    プログラムはこちらのサイトで公開しています
    → contenteditable 属性を利用したテキストエディタの作成
    { contenteditable 属性を設定した html タグで作成したテキストエディタ }


    なので、改行のエスケープシーケンスが使用できる pre タグで試してみると、同じく動作。
    改行もエスケープシーケンスが使用出来たので、処理が楽になり、
    目標の色付き文字を出力する所までは作成する事が出来ました。


    作成に使用したブラウザは chrome 
    この要素の処理を行う JavaScript には互換性がないので、chrome 以外では動作しません。
    なので、ブラウザのバージョンが上がると動かなくなる可能性もあると思います。


    2017/03/22 [09:20]

    カウンター

    プロフィール

    negotoy

    Author:negotoy
    好きな選手権 :chara選手権
    好きなコーナー :リスナーが凸して
    椎名林檎の丸の内を歌うコーナー

    PC ゲーム歴 :
    モバゲーのタイピングゲームで
    タイピングの練習(サービス終了)
    ニックネーム : クッキー
    以降ゲーム歴なし

    [ YouTube ]

    chara : あいのうた
    椎名林檎 : ありあまる富
    かせきさいだぁ : じゃっ 夏なんで
    阿部真央 : 貴方の恋人になりたいのです

    最新記事

    カテゴリ

    カレンダー

    02 | 2017/03 | 04
    - - - 1 2 3 4
    5 6 7 8 9 10 11
    12 13 14 15 16 17 18
    19 20 21 22 23 24 25
    26 27 28 29 30 31 -


    PAGE TOP
    広告: