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

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

ただいまの
回答率

88.03%

mergelyを利用した作成物が正しく動作しません

受付中

回答 0

投稿

  • 評価
  • クリップ 0
  • VIEW 1,206

score 7

以前mergelyで指定行のハイライトを行う方法について質問したものです。リンク内容
以前の質問への回答を元に、以下の様なものを作成しました。

入力として、以下の様な内容のテキストファイルを与えます。
ソースコード名1,ハイライトする行
ソースコード名2,ハイライトする行
・ ・
・ ・

htmlのbodyは以下のようになっています
<input id="file" name="file" type="file" />
<div id = "br"></div>

<div id="mergely-resizer">
    <div id="compare">
    </div>
</div>

<div id="view_area" class="filelist">ファイルリストがここに表示されます。</div>

scriptは以下のようになっています。
$(document).ready(function () {
    $('#compare').mergely({
        //mergylyの設定(初期省略)
    });
    
    document.querySelector("#file").addEventListener('change', function(e) { 
        if (window.File) {
            var input = document.querySelector('#file').files[0];
            var reader = new FileReader();
            reader.addEventListener('load', function(e) {
                //ファイルリストが書かれたファイルを読み込み、
                //読み込んだ結果をグローバル変数lines[]へ格納する(省略)
                var fls = "";
                for(i=0;i<lines.length-1;i++){
                    fls += "<input type=\"button\" value=\"";
                    var leftfile = lines[i].split(",");
                    var rightfile = lines[i+1].split(",");
                    fls += leftfile[0] + "~" + rightfile[0] + "\" ";
                    fls += "onclick=\"OnClick(" + i + ")\"";
                    fls += "\" ><br>";
                }
                document.getElementById('view_area').innerHTML = fls;
        
            }, true); 
            reader.readAsText(input, 'UTF-8');
        }
    }, true); 
});

function OnClick(lineno){
    var left_path = "files\\" + lines[lineno].split(",")[0];
    $.ajax({
        type: 'GET', async: true, dataType: 'text',
        url: left_path,
        success: function (response) {
            $('#compare').mergely('lhs', response);
        },
        error: function(xhr, status, err) {
            $('#compare').mergely('lhs', "");
        }
    });
    
    var right_path = "files\\" + lines[lineno + 1].split(",")[0];
    $.ajax({
        type: 'GET', async: true, dataType: 'text',
        url: right_path,
        success: function (response) {
            $('#compare').mergely('rhs', response);
        }
    });
    
    leftredline = lines[lineno].split(",")[1];
    rightredline = lines[lineno + 1].split(",")[1];

    endcounter = 0;
    intervalID = setInterval("highlight()",1000); //指定行番号をハイライト
}

function highlight(){
    endcounter += 1;
    if(endcounter == 2){
        var lines_of_left_codes = $('.CodeMirror pre','#compare-editor-lhs');
        var lines_of_right_codes = $('.CodeMirror pre','#compare-editor-rhs');
        lines_of_left_codes.eq(leftredline).css({background: '#C00'});
        lines_of_right_codes.eq(rightredline).css({background: '#C00'});
        clearInterval(intervalID);
        lines_of_left_codes = null;
        lines_of_right_codes = null;
    }
}

このような形で作成し、動作させたところ、表示するソースコードの行数が少ない場合には指定した行のハイライトを正しく行うことが出来ました。しかし、表示するソースコードが100行以上のような少し行数が多いものになると、ハイライトが行えませんでした。
行数が少ない場合には正しくハイライトできていることから、取得しようとする要素が大きすぎると正しく取得できないのではないかと考えていますが、確信が持てません。
取得する要素が大きいと正しく要素を取得できないような事はあるのでしょうか。また、そういったことがある場合にはどのように対処するのが良いのでしょうか。もしくは、その他に今回作成したものが正しく動かない原因となっている可能性が有りましたら教えていただきたいです。

どなたか、お力添えをお願いいたします。
  • 気になる質問をクリップする

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

まだ回答がついていません

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

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

関連した質問

同じタグがついた質問を見る