2018 年のオフライン WYSIWYG - 死にゆく品種

むかしむかし、ビジュアル HTML エディターが大流行していました。ソース コード、スクリプト、または外観についてもあまり考えずに、ブラウザのようなプログラムを開いてページを入力するだけです。魔法は舞台裏のどこかで起こりました。その後、ゆっくりと、しかし確実に、オンライン CMS が登場し始め、最終的には現代の標準になりました。それでもオフラインで Web コンテンツを作成したい場合はどうすればよいでしょうか?

パラドックスのように聞こえるかもしれません。それでも、オフラインで書くことができることには、メリットと便利さがあります。さらに、CMS を使用していない場合、純粋な HTML を記述するのは面倒です。優れたフロントエンドを持つことで、必ずしもマシンが解釈して表示する必要があるものではなく、人々に読んでもらいたいものに集中することができます。問題は、2018 年にこれを達成するのはどれほど難しいかということです。

あなたのサービスで HTML エディター

むかしむかし、何十もの WYSIWYG エディターがあり、それぞれが独自の驚異、独自の範囲の矛盾、ガベージ コード、および機能を提供していました。私は 2006 年に古い Nvu に出くわし、これが登場したときに Kompozer にアップグレードし、それ以来何らかの形でそれを使い続けました。他のプログラムが提供していないように見える使いやすさの利点。しかし、Kompozer は長い間更新されていないため、更新が必要です。テーブルには何がありますか?

ブルーフィッシュ

このプログラムは長い間存在しています。純粋な WYSIWYG エディターではありません。実際、この意味では他のテキスト エディタと何ら変わりはありません。最善の方法は、外部ブラウザを起動することです。まともなように見えますが、結局のところ、Bluefish は不格好なスラッシュ オタクであり、単純な記述に必要なものではありません。

また、使用中にさまざまな問題に遭遇しました。たとえば、非常に豊富な出力サブメニューがあり、コードを検証したり、HTML を XML に変換したり、HTML を整理したりできますが、プログラムがシステムにインストールされているにもかかわらず、Tidy を起動できませんでした。

かっこ

モダンで洗練された、そしてやや圧倒されるかもしれない、Brackets を説明する最良の方法です。実際、このプログラムについては、2015 年の HTML エディターに関する OCS-Mag の記事である程度詳しく説明しました。これは、従来の書き込みの世界を、新しいメタデータが豊富なコード書き込みの世界に広げようとするユーティリティです。また、初心者ではなく、より熟練したユーザー向けに設計されています。 Brackets にはライブ プレビュー機能がありますが、実際にページを書いたときにどのように見えるかはわかりません。本質的に、それはまさに私たちが探しているものではありません.

ブルーグリフォン（ブルーグリフォン）

これは、古い Nvu エディターの後継です。これも Kompozer にフォークされ、現在は廃止されていますが、少なくとも Windows 形式では完全に使用できます。 Linux では、古いライブラリを使用する必要があり、これは面倒な場合があります。とにかく。

Bluegriffon はその部分に見え、HTML5 を問題なく処理します。全体的にかなりきちんとしたオプションがいくつかありますが、本質的に、これは残っている真の WYSIWYG の 1 つです。ほとんどの場合、本来あるべきことを行い、新しいユーザーはおそらくコード レベルに存在する問題に気付かないでしょうが、さまざまな問題に遭遇したため、オフライン HTML エディターに本当に将来性があるかどうか疑問に思いました.

Bluegriffon にはいくつかの明白なユーザビリティの問題があります。画像を追加したり、他のドキュメントにリンクしたりする場合、それらはデフォルトで相対パスではなく絶対パスとしてマークされます。これにより、どこでも退屈な余分なクリックが発生したり、忘れた場合にページが壊れたりします.何を言おうとしているのか疑問に思われるかもしれませんが、現在書いているファイルと同じディレクトリにある dedoimedo.html という名前のページにリンクしたいとします。相対的に言えば、a href="dedoimedo.html" は完全に有効なリンクであり、2 つのファイルが同じディレクトリにある限り、問題なく機能します。絶対とは、C:\dedoimedo\dedoimedo.html のようなものを意味し、オンラインでは無意味であり、ローカル コンピューター以外のほぼすべての場所で壊れます。

手動でボックスにチェックを入れる必要があります。毎回。また、Bluegriffon は Kompozer ほどショートカットを使用しません。リンク、画像を挿入したり、スペルチェッカーを呼び出したりするためのショートカットはありません。 Kompozer では、最新のブラウザーが実際に行う必要があるように、タブ (ドキュメント) を開いたり閉じたりしますが、中クリックは何も役に立ちません。テキストの一部をマークして特定の方法でスタイルを設定したい場合は、最初にスパンとして定義してからクラス/スタイルを適用する必要がありますが、Kompozer はこれを自動的に行うため、クリックとマウス操作を節約できます。最後に、Bluegriffon もコードを変更しますが、それについては後で詳しく説明します。

SeaMonkey (作曲家)

Bluegriffon が唯一の真の WYSIWYG であると言ったとき、まあ、私は少し誇張していました.現在活発に開発およびサポートされているものと、私がテストしたものの中には、たまたま 2 つありますが、これらは非常に密接に関連しています。 Jack-o'-All-Trades SeaMonkey スイートには Composer も付属しており (これは Kompozer と区別されます)、見た目が Bluegriffon とわずかに異なりますが、同様の機能を提供します。

HTML5 のサポートや画像の問題など、本質的に同じ利点と落とし穴があります。ここでは、問題が別の形で現れます。一部のページでは、新しい画像がリンクされません。それ以外の場合は、常に絶対パス (file:/// で始まる) で始まり、相対 URL チェックボックスがグレー表示されます。実際にすべてを機能させるには、URL を手動で編集し、非相対部分を削除する必要があります。これは遅くて面倒です。また、SeaMonkey には元のソース形式を保持するというボタンがありますが、実際にはそうではありません。コードの変更については後で詳しく説明します。

一般に、かなり驚くほど不格好なオプションがいくつかありましたが、かなり前に Kompozer で解決されていたため、かなり奇妙に感じました。 Linux でのセットアップには、いくつかの 32 ビット ライブラリも必要です。そうしないと、次のエラーが発生する可能性があります:

ファイル /home/roger/Downloads/seamonkey/libmozgtk.so の XPCOMGlueLoad エラー:
libgtk-3.so.0:共有オブジェクト ファイルを開けません:そのようなファイルまたはディレクトリはありません
XPCOM をロードできませんでした。

私にとって、必要なライブラリの完全なセット (依存関係を自動解決するもの) には、次のものが含まれていました。これは、openSUSE KDE、Kubuntu、および Ubuntu の 64 ビット バージョンで、さまざまな形式と形式でテストされています。

libgtk-3-0-32bit libgthread-2_0-0-32bit libXt6-32bit

コンポザー (KompoZer)

古くから信頼されている主力製品。 Kompozer は HTML5 と CSS3 をサポートしていないため、最新のコードを読み込もうとすると、見た目がおかしくなります。一方、ショートカット、相対リンク、および他のすべてのプログラムが見逃している他のいくつかの迅速な機能を備えた、はるかに合理化されたワークフローを備えています.最新のリリースは 2007 年にさかのぼりますが、2010 年のベータ版があります。Golly.

HTML 整頓

たまたま、私はこのトピックについて、2009 年、ほぼ 10 年前に書きました。 HTML Tidy の素晴らしさを紹介しましたが、当時は Firefox 拡張機能 (古き良き時代) や Notepad++ プラグインなど、さまざまな形や形式で利用できました。 GUI と、CSS をきれいにする別のツールがありました。選択肢はたくさんありました。

2018年は少し事情が異なります。元の Tidy は死にましたが、最近復活し、HTML5 に準拠することに重点が置かれました。これは現在、スタンドアロン プログラム、ローダブル ライブラリ (DLL) として存在し、Tidy2 という名前で Notepad++ プラグインとしてインストールすることもできます。

セットアップの問題

しかし、Cape Good Code までは順風満帆というわけではありません。この新しい Tidy がどれだけうまく機能するかを知りたかったのです。 Linux では、古い Tidy が既にインストールされていたため、新しい Tidy をインストールする前に、Tidy とそれに関連するライブラリを強制的にアンインストールする必要がありました。少なくともすべてはリポジトリから取得されるため、汗をかく必要はありません。

Windows では、スタンドアロンと DLL は問題なく動作します。 Notepad++ では、32 ビット バージョンのプログラムでのみプラグインを使用できます。古い HTML Tidy は完全に壊れており、実行しようとすると Notepad++ によって無効になります。新しいものを入手するには、まずテキスト エディターを最新バージョンに更新してから、そのプラグイン マネージャーを使用して、tidy-html5 に基づく Tidy2 をインストールする必要があります。

Kompozer を介してオンデマンドでスタンドアロン バージョンを使用することもできます。奇妙に聞こえるかもしれませんが、Kompozer には独自の拡張機能があり、その 1 つに HandCoder があり、必要に応じて Tidy 実行可能ファイルを呼び出すことができます。技術的には、最新のビルド (私のテストでは 2017 年 11 月) を含め、どのバージョンの Tidy にもパスを設定でき、古い HTML ページと最新の HTML ページに対して問題なく実行されます。実際、2007 Kompozer とその古くからある HandCoder 拡張機能は、2005 年から 2017 年までずっと Tidy バージョンを呼び出すことができます。いいですね。

新しい Tidy の使用

全体として、プログラムはうまく機能しているようです。 Tidy2 には特に感銘を受けました。Tidy2 は、はるかに幅広いフラグとオプションを提供しているようです。オンライン リファレンスはかなりの時間稼ぎであり、すべてがどのように機能するかを理解するのにかなりの時間を費やすことができます.

そうは言っても、新しい Tidy/Tidy2 とそれがコードを操作する方法にも多くの問題がありました。これを開発した人々 (真面目で賢いオタク) が、いくつかのかなり明白な選択肢について考えなかったのはかなり奇妙だと思います。小さなプログラムが整理されたマークアップをどのように出力するか。

主に Tidy2 に焦点を当てると、まず、タブではなくスペースを使用してコードをインデントします。これは、最終的に文字数が増え、最終的にはファイルが大きくなるため、大きなドキュメントでは無駄です。 1K タブは 4K スペースになります。第 2 に、スクリプトやスクリプト属性を含むコードを破壊します。 Javascript のスニペットや、たとえば Google (Adsense や Analytics) などのパブリッシャーのスニペットを使用している場合、これは大きな問題になる可能性があります。また、引用符やアンパサンドなど、スクリプトやその URL を壊す可能性のある特殊文字も置き換えます。

この時点で、利用可能なリファレンス ページを参照することにしました。これらは、Notepad++ インターフェースを介してオフライン ページとして表示されるか、オンラインで読むことができますが、そのリストは 2008 年にさかのぼるようです。3 つの構成があり、微調整できます。

とにかく、構成は次のようになります:

indent:auto
indent-spaces:2
wrap:120
markup:yes
output-xml:yes
input-xml:no
quote-マーク:いいえ
quote-nbsp:いいえ
quote-ampersand:いいえ
...

何時間にもわたる試行錯誤の結果、見た目と機能の両方でコードをできるだけ元の状態に保ちたい場合は、次の変数を設定する必要があることを学びました:

引用符:いいえ
quote-nbsp:いいえ
quote-ampersand:いいえ
preserve-entities:はい
literal-attributes:はい

少なくとも、次の 5 行により、URL とスクリプト変数が変更されないことが保証されます。しかし、Tidy2 (そしてもちろん Tidy 自体) は、フォームや ins ブロックなどを編集したり変更したりします。ユーザーが要求しなくても、サードパーティのコード スニペットと一緒に使用することは事実上不可能です。たとえば、これは機能しません:

style="display:block"
data-ad-format="autorelaxed"
data-ad-client="ca-pub-xxxxxxxxxx"
/>data-ad-slot="yyyyyyyyyy">

これにより、いくつかの重要なポイントにたどり着きます。なぜ Tidy はコードの特定の部分をスキップできないのでしょうか。そして、何の操作もせずにコードを適切にマークアップできないのはなぜですか。コードを検証しないでください。少なくとも、これはオプションである必要があります。きれいな外観になると、LDD プログラムの再帰的実装である、再帰的 LDD と呼ばれる自分の小さなプログラムに似たようなものを実装しました。画面にコードを出力するたびに、区切り文字 (タブ) x 再帰関数へのエントリ数に基づいて、印刷されたテキストをインデントするために必要なタブの数を計算します。 HTML を XML などに変更しなくても、ここで同じことができます。

ここで、別の問題に遭遇します。 markup=no を選択すると、Tidy はドキュメントを消去します。 output=html を選択すると、何も実行されません。何もインデントされず、空白行が削除されません。

その他の矛盾

さらに悪いことに、出力がどのように見えるべきかについての標準がないようです。過去 12 年から 13 年の間 Tidy と一緒に仕事をしてきた私は、Tidy がコードを操作する方法を少なくとも 3 つか 4 つ見てきました。たとえば、2005 年版では次のように段落がフォーマットされています。

ここにテキスト

ただし、新しい Tidy は次のように機能します。

ここにテキスト

Old Tidy では、次の行のドロップを使用してから、すべての要素をインデントしていました。新しい Tidy は特定の要素 (div など) に対してのみこれを行いますが、段落やリストに対しては行いません。次に、コードのカプセル化の問題があります。 2005 年の Tidy では、スクリプトはまったく変更されていませんが、それでもフォームとインが壊れています。 2009 年の Tidy では、実際にはコードが ブロックでラップされていました。最新の Tidy は 2005 バージョンと同じように動作するように見えますが、ほぼランダムな数のインデント スペースが追加され、スクリプトがコード ブロックの奥深くに押し込まれ、「整頓された」階層出力とはまったく関係ありません。ご想像のとおり、これは大きな問題を引き起こします。特に、大量のファイルがあり、変更を行うはずのプログラムの出力を手動で検証する必要がない場合はなおさらです。

コード出力とその他の HTML エディターの問題

残念ながら、HTML コードに望ましくない変更を加えているのは Tidy だけではありません。 Bluegriffon は独自の機能も備えています。開いた段落ブラケット、新しい行、テキスト、新しい行、閉じた段落ブラケットの古い構文に遭遇した場合、次のようにコードをインライン化します:

ここにテキスト

実際には、ブロックの先頭と末尾に 2 つのスペースが追加されます。何よりも悪いことに、これらは画面に表示されないので、舞台裏で何が起こっているのか、なぜこの奇妙な規則なのか疑問に思っています.また、画像や終了 div などの他の要素の間にこれらのスペースを追加します。気が狂う。

Bluegriffon にも独自のマークアップ機能があり、試してみましたが、コードの一部が変更されましたが、毎回異なる行数が表示されました。編集すると、マークアップされたページはひどく壊れていました。一部の div は完全に台無しになりました。最後になりましたが、Bluegriffon はフォームと ins ブロックも破壊します。

SeaMonkey (Composer) にも同様の問題がありました。また、段落行も変更しましたが、それを行うために独自のスタイルを使用しただけで、余分なタブとパディング スペースが追加されました。そして、正しいボックスがチェックされていても、依然としてソースを編集し、ins ブロックを壊しています。

結論

はい、知っています。スタンドアロン コードを記述することは、おそらく "現代的な" 方法ではありません。次に、有効なコードを使用して単純な HTML/CSS ジョブを実行したい場合、深刻な問題に直面します。なぜなら、テキスト エディターと、コードをむさぼり食うビジュアル エディターのどちらかを選択する必要があるためです。行う。さらに、コードの整頓に関して言えば、これはワイルド ワイルド ウェストです。スクリプトやフォームが実際に壊れる可能性があるため、注意してください。最悪の場合、コードをどのように壊すべきかについての規則がないようです。最後に、WordPress のグーテンベルクのオーバーホールなど、CMS の世界に変化が迫っているため、クリーンなコードの将来がどうなるか、あるいはそのような未来が存在するかどうかを本当に心配しています.

皮肉なことに、固有の制限があり、最新の標準をサポートしていないにもかかわらず、ここで全体的に最高の仕事をするのは Kompozer と呼ばれる 2007 年のツールです。しかし、それは束の中で最も邪魔にならず、最も生産的でもあります. Bluegriffon と Seamonkey は問題なく動作しますが、これらの古い問題を現代的な外観と融合させているため、何の役にも立ちません。 Kompozer は 2000 年代初期の UI バグを解決しました。これは、将来の反復のベースラインになるはずでした。最終的に、次善の選択肢が残されます。

どちらの方法を使用する場合でも、使いやすさ、視覚的な利便性、コードの混乱、および単純な効率性の間で妥協する必要があります。 2018 年は、オフラインで仕事をしたり、整頓されたコードに準拠したコードを使用したりしたい人にはほとんど同情していないようです。 On the bright side, you can go wild with Notepad++ or Brackets. So there's that at least. In essence, we have come full circle, and haven't really gained anything. On the far side of the spectrum, the online CMS world is like the cloud journey. People have these lovely API to run their stuff and fancy-ish UI, but they don't really have any access to the stuff behind the scenes, and it's a horrible, complicated mess. What You See is What Once Was. Welcome to Abstraction. Dedoimedo out.

乾杯。