JavaScriptおよびユーザースクリプトでの複数行データの表示

javascriptでの複数行データのクロスブラウザー表現の問題について説明します。 Firefoxが他のブラウザと同じように機能を操作する方法を知っていれば、これは問題ではなかったかもしれません。 2日間の努力にもかかわらず、単一のクロスブラウザー表示方法は見つかりませんでした。 もしそうなら、彼はおそらくuserscripts.orgで既に使用され始めていたでしょう。 これまでのところ、別の表示方法があります。Firefoxユーザースクリプト用と、他のすべてのユーザー用です。 また、Scriptishの場合、メタデータ形式（ディレクティブ）を読み取ることができます。これは、任意の形式をカバーしませんが、ユーザースクリプトで最もよく見られる問題を解決します。 データとスクリプトを1つのリクエストで1つのファイルで受信し、このファイルは「text / javascript」タイプであるため、外部HTML、XML、およびデータ複製へのアクセスを含む、サーバーへの2つのリクエストを伴うソリューションは考慮しません。

Firefoxを除くすべてのブラウザーでの複数行データ表示

すべてのスクリプト、ユーザーおよびレギュラー用のソリューションですが、Firefox用ではありません。

s = function(){/*   ,    */}.toString()
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

さらに、機能ブラケットのテキストを正規表現でクリアすると、純粋な複数行データが得られます。 コメント '* /'の最後の文字がデータに含まれてはならないという事実を無視します。 これを念頭に置いて、入力テキストには最小限の検証と安全な文字列での置換が必要です。その後、文字列sを受け取った後にトランスコードする必要があります。



しかし、何らかの理由でこのメソッドはFirefoxで受け入れられません-関数を文字列表現（.toString（）、. toSource（））に転送すると、あらゆる種類のコメントが噛み付きます。 コメント以外の構文的に正しいテキストは有効なままであり、これはもちろんデータの自由を厳しく制限します。 特に、テキストは文字列または改行（行末）の前のエスケープ（「\」）を含む非標準の複数行文字列にラップでき、意味のないが構文的に正しい表現のままにします。 非標準のバックスラッシュ方式にもかかわらず、このような複数行の文字列はすべてのブラウザでサポートされています。



適切な関数がないため、ユーザースクリプトにGreaseMonkey作成者の代わりを作成する必要がありました。これには、コメント行（メタデータディレクティブ）が含まれているためです。 メタデータ構文（「@キー値」）では、行の終わりに引用符またはバックスラッシュを使用できません。 メタデータには、スクリプトバージョン、説明、追加のディレクティブのデータなど、多くの有用な情報が含まれています。 しかし、一般的に、任意の複数行データの場合、それらの表示は非常に便利です。 結局のところ、各行を特別な形式に変換するよりも、スクリプト化されていない情報を複数行含めることでスクリプトを収集する方がはるかに便利です。



Firefox専用の.toStringWithComments（）関数がある場合、両方のメソッドをプログラムで組み合わせることで解決できます。 しかし、これは（判断できる限り）そうではありません。 この問題を解決するために、GreaseMonkeyは特別なデータ型と構文を作成しました：XML形式の複数行データ。 式の代わりに、「<」で始まるリテラルがスクリプトコードに記述されます。 単純なJavascriptの場合、予想どおり、この構文は他のブラウザーと同じエラーを引き起こします。 この記事で説明されている問題を引き起こすのは構文の非互換性です-両方の構文を組み合わせる方法は見つかりません（eval（）がありますが、すでに引用符が存在する単一行のデータのみ）。

アドオンレベルで可能なソリューションパス

ところで、GreaseMonkeyアドオンレベルでの.toStringWithComments（）関数の作成は、他の特別な関数の作成と同じくらい簡単なタスクです。 GM / Scriptishの著者はすでにこれを提案しているかもしれません。 XMLなどの既存の式エンジンで達成できる最も大きなことは、違いを1文字または2文字に減らすことですが、これは元の非互換性と同じくらいほとんど使用されません。 ブラウザに応じて構文を選択する外部コードジェネレーター（PHPスクリプト、nodeJS、またはユーザーの手と頭）が必要です。

 s = <![CDATA[   ,   CDATA ]]>.toString();
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

-Firefox + GreaseMonkey（Fx + GM）またはScriptishの場合-または他のブラウザの上記のコード。 ここでの原則は、GreaseMonkeyでは、スクリプトコード内で複数行の任意のテキスト（コメントを含む）を許可し、他のすべてのブラウザーでは許可されていないことです。 両方を組み合わせることは不可能です。



Fx + GMの場合、次の構文も有効です。

 s = <>   ,    </>.toString();
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

または

 s = <anyName>   ,    </anyName>.toString();
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

内部のテキストにはCDATAが含まれる場合があります。 このXML形式（（typeof s）を見ると、 'xml'を取得します）も解決に役立ちません。



純粋なFirefoxにはまだ解決策がないことに注意してください。 そしてこれはかなり奇妙です-あなたのサイトで最も強力な開発者サポートである長年の開発ですが、.toStringWithComments（）のような機能です-いいえ。 おそらくソリューションはMDN（Mozilla Development Network）の腸に隠されており、誰かがそれを知っているのでしょうか？

各行の文字の破損（変換）を伴う決定

データを特別に準備できる場合-引用符で囲むか、バックスラッシュを最後に配置し、同時にJS構文の意味でテキスト全体を保護する（引用符とバックスラッシュの前にバックスラッシュを置く）場合、複数行（フォーマット済み）データを表す問題もありません。 しかし、そのような解決策は常に受け入れられるとは限りません。 ディレクティブが文字の歪みを許可しないユーザースクリプトの場合、これは適切ではありません。

2文字の違いがあるソリューション（ユーザースクリプトのみ）

通常のスクリプト（Fxバージョンでは結果が生成されないため、異なる方法でデータを生成する必要があります）またはユーザースクリプトの2つのバージョンの手動/サーバー編集で、外部スクリプトが互換性のために最小限の介入を必要とする場合に役立ちます。 これは、すべてのブラウザの正しい構文に類似するように、文字の「邪悪な」微調整に基づいています。



調整が簡単であればあるほど、余分な文字を噛まなければならないので、より良いです。

 //    s  Fx+GM; var isFxGM = typeof GM_getResourceText !='undefined'; //  "="   ,      Fx+GM var f = function(CDATA, s){s //var f = function(CDATA, s){s= //    Fx+GM  Scriptish <![CDATA[0]]/*   ,     CDATA *///]]> return s}; var currMeta = isFxGM ? f([]).toString() : f.toString(); var win = (typeof unsafeWindow !='undefined')? unsafeWindow: window; win.console.log(currMeta); //   ,   win.console.log('--------------'); win.console.log(currMeta.replace(/(^[\s\S]*?\/\*\r?\n?|\*\/[\s\S]*$)/gm,'')); //      
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ここでの秘Theは、事前データ式が単純な重要でない式s <！[CDATA [0]]であり、CDATAが配列変数の場合は設定する必要がないことです。 したがって、他のブラウザーではデザインは無視され、Fx + GMの場合、式s = <！[CDATA [0]] ...]]>; 複数行のXMLドキュメントです。



このソリューションは相互に排他的です。 1つのコードはFx + GMでのみ動作し、他のコードではエラーが発生します。他のコードでは動作し、Fx + GMでエラーが発生します。 これは、userscripts.orgでスクリプトを公開するのには不適切です。userscripts.orgでは、メモを読んでいない人にとって、どこでも機能するスクリプトが望ましいのです。 読めないノートについては、2番目のスクリプトオプションが適切です。2つのコメント文字を削除して、スクリプトがFx + GMで完全に機能するようにする必要があります。 このコードは次のとおりです。

 var win = (typeof unsafeWindow !='undefined')? unsafeWindow: window; var isFxGM = typeof GM_getResourceText !='undefined'; //  "/*"  "<!",      Fx+GM var f = function(s){return(s= /*<![CDATA[*//*   ,     CDATA */s//]]> )}; var currMeta = isFxGM ? f(' "/*"  "<!"   ').toString() : f.toString(); win.console.log(currMeta); //   ,   win.console.log('--------------'); win.console.log(currMeta.replace(/(^[\s\S]*?\/\/\*\r?\n?|\*\/s[\s\S]*$)/gm,'')); //      
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

この特別な行は、Firefoxで正しく動作するように、スクリプトを使用する必要がある方法でユーザーに思い出させます。 アプリケーションによっては、「<！」の前に「delete "/ *"」という行があります スクリプトコードの内容は異なる場合があります。スクリプトのタスクは、スクリプトが適切に動作していないことを判断し、ユーザーに修正方法を伝えることです（必要な機能に到達したとき）。



Fx + GMで動作するスクリプトを作成し、他のブラウザにメッセージを送信するという反対のタスクは、残念ながら解決されていません。JS式の代わりにXML形式を使用すると、通常のJavascriptが正しく動作する解決不可能なタスクが作成されるためです。 eval（）を使用して解決できますが、任意の単一行のテキストのみです（たとえば、JS文字列にデータを入力するなど、他のソリューションメソッドではまったく問題ありません）。 新しい機能（GM_toStringWithComments（））を追加してGreaseMonkeyとScriptishのアドオンプラグインを作成してみることができます。これについては記事の最後で詳しく説明します。 ただし、ここでは内部からGMを知る必要があるため、問題は開発者（GreaseMonkeyまたはScriptish）をリダイレクトしようとすることです。 これにより、スクリプトの完全な互換性の問題も解決されます。

開発例

ユーザースクリプトは、スクリプトの前にコメントの形式でディレクティブコマンドを使用します。 それらの前に必要なスクリプトを書くと、それらは（すべてのブラウザーで）操作可能なままです。 これは通常、GreaseMonkeyに埋め込まれた特別な構文を使用して、Fx + GMでXMLタグのコメントをラップするために使用されます。 全体の問題は、スクリプトが他のブラウザーとの互換性を失うことです。 シェル上のシェルのみ-ChromeのTamperMonkeyアドオンがこれを処理できます。 そして今では対処しますが、スクリプトの作業を複雑にし、ユーザーの観点からスクリプトを別の独自のリストに転送します。 また、これはクロスブラウザソリューションではありません。



たとえば、新しいバージョンのHabrAjaxスクリプトでは、画像（ロゴ）がファイルヘッダーに挿入されます。これは、Firefoxシェルで受け入れられ、about：アドオンページの拡張子の前にロゴが表示され、他のブラウザーでは無視されます。 500バイトを超えるコードを2回書き込まないために、上記の方法でディレクティブを使用してヘッダーを読み取り、そこからデータを取得します。 これは、プライベートタスクだけでなく、より優れたスクリプト自動更新サービスにも必要です。 ヘッダーから、スクリプトバージョン、説明、変更の履歴（特別な自家製ディレクティブ「@update」で記述されている場合）を読み取り、 * .meta.jsを介してサーバー上の変更と比較し 、便利な形式で更新することをお勧めします。 表示権のマイナーバージョンの更新を制限できます。 Firefoxのバージョン4および0.9.13（2011年11月3日、Firefoxのバージョン8）以降のScriptishでサポートされるブラウザースクリプトの自動更新をはるかに超える利便性を作成します。

ユーザースクリプトのソリューションパスの例

GM / ScriptishがGM_toStringWithComments関数を作成するとします。 次に、ユーザースクリプトで複数行のデータを受信するクロスブラウザーは、不必要な問題なしになります。

 var f = function(){/*   ,    */}; if(typeof GM_toStringWithComments =='undefined') GM_toStringWithComments = function(f){return f.toString();}; var s = GM_toStringWithComments(f).replace(/(^function(){\/\*|\*\/$)/gm,'');
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

これでこのコードも機能しますが、Fx + GM（およびFxのみ）では空の文字列が返されます。

ここで、特にユーザースクリプトについては、Scriptishには良いニュースがあります...

最近、このアドオンにはメタデータを読み取ることができる機能があります-toStringWithComments（）のまさにその目的が計画されていましたが、より限定的なアプリケーションでした。 GreaseMonkeyにはないので、指示を読まないユーザーのために、この関数を劣化で定義する必要があります-Fx + GMに同じ符号を付けて、ユーザーに次に何をすべきかを知らせます。



ディレクティブは、キーと値のペアの形式で正しく実行された説明を収集するため、低レベルの目的関数toStringWithComments（）を置き換えないことに注意してください。



API関数Scriptish GM_getMetadata（）に会います！



それはメタデータを生成します-コメントとして設計されたディレクティブは、ユーザースクリプトがScriptishに渡すデータを読み取ります。 作業に必要なデータ（スコープ）に加えて、ユーザーはスクリプトの名前、バージョン、ライセンス、およびスクリプトに役立つデータを作成できる他のすべてのディレクティブに関する情報にアクセスできます。たとえば、スクリプトの変更の同じ説明以前のバージョンとサーバー上のスクリプト番号を使用します。



Firefox + Scriptish用の待望のクロスブラウザユーザースクリプトを作成します（GreaseMonkeyを使用すると、手動調整の必要性をユーザーに通知します）。 実際の動作例は、 HabrAjaxスクリプトバージョン0.81+で見ることができます。 スクリプトファイルの先頭には、メタデータのラッパーがあります。 Fx + GMの場合、メタデータの抽出を必要とする機能が関係している場合にのみ、不便さを思い出させます。 ユーザーは、スクリプトの2バイトを変更するように求められます（更新のたびにこれを行う必要があります！）または、アドオンをScriptishに変更するだけです。

結果

ご覧のとおり、一般的なクロスブラウザソリューションは見つかりませんでした。 おそらく存在しないかもしれませんが、不便さの合計により、どこかで解決する必要があったか、少なくとも問題が指摘されました。 通常のスクリプトの場合、Firefoxにはまったく解決策がありません。 userskiptovには、Fx + GMの式のXML構文の形式の非クロスブラウザソリューションと、他のブラウザ用の特別にラップされたコメントがあります。 Firefox + Scriptishおよびその他のブラウザ向けのクロスブラウザソリューションは、メタデータの受信専用です。



Greasemonkey、Scriptish、またはJavascriptのtoStringWithComments（）のような特別な機能を経験から誰かが知っている場合は、お知らせください。 誰かがGMやScriptishの開発者向けに問題を定式化できるか、既に説明されている場所を知っている場合は、それについても知らせてください。



ここで、ユーザースクリプトのディレクティブ （これ以上）を読みたい場合は、Firefox + GMの個別のバージョンを維持するか、ユーザーにリマインダーを維持する必要があります（ただし、Scriptishには注意が必要です）。 タスクの範囲を超えた解決策として、任意のデータを別のファイルに保存し、AJAXで読み取ることに問題はありません。