👨🏼‍🤝‍👨🏻 🖊️ 👩🏿‍🤝‍👨🏻 Cloud IDEの新しいタブエンジン ⛹🏿 🏳️‍🌈 📵

内容

はじめに

ミスターについて ゲフェスト

ミスター Gefestは、Web開発者向けのクラウドベースのIDEであり、すべてが1つになっています（複数のプログラムの機能を組み合わせています）。その目標は、サイトを作成する際の毎日の作業時間を2〜4時間短縮することです。これを行うために、確立された信念に焦点を当てることなく、mr。最も便利で効果的なGefest'a。各リリースでは、プロジェクトの目標を達成するためにますます近づいています（サイトを作成する際の毎日の作業時間を2〜4時間短縮する）。

現代の世界では、機能のない「美しいもの」の方向に発展するインターフェイス、または機能のない機能を備えたインターフェイスを毎日処理する必要があります。

開発の初期段階で Gefest、私はそれにいくつかのルールを敷きました。そのうちの1人は、「機能的で、便利で、美的なインターフェース要素のみを作成します。」

このルールに従うのは簡単ではありません。テスト段階（Mr. Gefestでサイトを作成するとき）では、Web開発者の作業をそれほど単純化できなかったため、数週間を費やしたインターフェイスの一部の要素を完全に変更する必要がある場合があります。

タブメカニズムは、開発環境で一般的に使用されるUI要素の1つです。この技術のすべての実装には多くの欠点があるという事実にもかかわらず、誰も根本的にそれらを変更していません。このため、その概念を再考し、最も効果的なタブメカニズムを作成することにしました。

この記事では、Cloud9、PHPstorm、Sublime Text3、およびBracketの既存のタブメカニズム、それらの短所と利点、およびmrで実装されたソリューションについて説明します。ゲフェスト。

パート1.既存のIDEのタブメカニズム。

Cloud9

Cloud9には、テキストエディターの上とファイルマネージャーの上に2つの場所にタブがあります。多数のファイルを開くと、ファイルの名前を読むことができず、ファイルの完全なパスを見つけることができません。テキストエディタの上にあるパネルに、ファイルのリストを開くためのボタンがあります。現在のタブ（右下隅のテキスト）を除くすべてのタブでは、使用されている構文を認識できません。

そのタブメカニズムは3つのパネルにあり、インターフェイスが過度に乱雑であることを示しています。

利点：

通常の実装があります。
タブを操作するには2つの方法があります。
各タブに「閉じる」ボタンがあります。
テキストエディターの上のパネルに[ファイルの作成]ボタンがあります。

短所：

有益ではありません。
多くのスペースを占有します。
タブとファイルマネージャを同時に使用するのは不便です。
多数のタブを開いたり、テキストエディターのパネルで作業しているときは、フルネームを読むことはできません。
タブメカニズムにより、ファイルマネージャーのサイズが小さくなります。
ファイルのプレビューなし。
[ファイルの作成]ボタンは、[タブ]パネルの追加スペースを占有します。
すべてのタブからファイルへの短縮パスを一度に見つけることは不可能です。
同じファイル名を持つ複数の場所から特定のタブを選択するのは困難です。場所が不明であるためです。

ブラケット

ブラケットでは、問題のメカニズムはファイルリストとして左ペインにあり、特定の高さを占めます。そのため、垂直実装を備えた他のIDEよりもファイルマネージャとタブを同時に使用する方が便利です。タブの表示方法をよく見ると、名前と拡張子の色が異なっていることに気づくでしょう。現在のタブを除くすべてのタブについて、使用されている完全なパスと構文を判別することはできません。

利点：

タブ名は完全に表示されます。
垂直リストに沿って移動が容易です。
名前と拡張子の色が異なります（開いているファイルの場合）。
タブにカーソルを合わせると、閉じるボタンが表示されます。

短所：

このメカニズムの実装は有益ではありません。
タブとファイルマネージャーを同時に使用するのはあまり便利ではありません。
完全なファイル名が合わない場合があります。
実装に不慣れ。
タブメカニズムにより、ファイルマネージャーのサイズが小さくなります。
ファイルのプレビューなし。
すべてのタブに構文を使用していません。
すべてのタブからファイルへの短縮パスを一度に見つけることは不可能です。
同じファイル名を持つ複数の場所から特定のタブを選択するのは困難です。場所が不明であるためです。

Phpstorm

このIDEには、テキストエディターの上に水平パネルの形式で実装されたオープンファイルメカニズムがあります。そして彼は彼自身のひねりを持っています。パネルが完全にタブでいっぱいになり、新しいファイルを開くと、最も古いタブが閉じます。一方で-それは便利です、他方では-いいえ。また、このパネルから削除されたタブを開く必要がある場合はどうなりますか？

別のインターフェイススペースにある現在のファイルの場合、フルパスが表示されます。つまり、タブメカニズムは2つのUIパネルを占有します。

すべてのタブには十分な情報がなく、拡張機能を示す複雑なアイコンしかありません。

利点：

通常の実装があります。
各タブには、その拡張子を示す画像があります。
異常な方法を使用して、多数のタブを操作します。
開いているすべてのファイルには「閉じる」ボタンがあります。

短所：

十分な情報ではありません。
2つのパネルを占有します。
古いタブは、ファイルマネージャーから再度開く必要があります（タブバーから自動的に削除されるため）。
同じファイル名を持つ複数の特定のタブを選択するのは困難です。それらの場所は不明であるためです。
タブの数は画面の解像度に依存します。
ファイルのプレビューなし。
すべてのタブからファイルへの短縮パスを一度に見つけることは不可能です。

崇高なテキスト3

ST3開発者は、タブメカニズムを改善しようとしています。これは、ST2にはなかったST3の革新によって証明されています。

インターフェースでは、2つのパネルを占有します。左のパネルはタブからファイルマネージャーにジャンプする必要があり、右のパネルはテキストエディターの上にあります。

両方のパネルのタブはあまり有益ではありません。現在のファイルの構文は、テキストエディターの下にある小さなパネルにアイコンのないテキストとして表示されます。残りのタブでは、使用されている構文を識別できません。問題のメカニズムの要素の上にマウスポインタを長く保持すると、それらへの完全なパスを見つけることができます。

上部パネルには3つのボタンがあります。非表示のタブをナビゲートできる2つのスイッチと、開いているファイルの完全なリストを表示するボタンです。

利点：

タブの場所にはさまざまなオプションがあります。
開いているファイルのフルネームが表示されます。
各タブに「閉じる」ボタンがあります。
非表示のタブを切り替えるためのラジオボタン。

短所：

十分な情報タブがありません。
オープンファイルのメカニズムは、インターフェースの多くのスペースを占有します。
ファイルのプレビューなし。
1つのパネルでFMとタブを操作するのは不便です。
ファイルへのパスが常に表示されるとは限りません。
同じファイル名を持つ複数の場所から特定のタブを選択するのは困難です。場所が不明であるためです。
すべてのタブからファイルへの短縮パスを一度に見つけることは不可能です。

パート2.研究の結果。

調査の結果を比較表に表示します。

IDE	利点	欠点
Cloud9	通常の実装があります。タブを操作するには2つの方法があります。各タブに「閉じる」ボタンがあります。テキストエディターの上のパネルに[ファイルの作成]ボタンがあります。	有益ではありません。多くのスペースを占有します。タブとファイルマネージャを同時に使用するのは不便です。多数のタブを開いたり、テキストエディターのパネルで作業しているときは、フルネームを読むことはできません。タブメカニズムにより、ファイルマネージャーのサイズが小さくなります。ファイルのプレビューなし。 [ファイルの作成]ボタンは、[タブ]パネルの追加スペースを占有します。すべてのタブからファイルへの短縮パスを一度に見つけることは不可能です。同じファイル名を持つ複数の場所から特定のタブを選択するのは困難です。場所が不明であるためです。
ブラケット	タブ名は完全に表示されます。垂直リストに沿って移動が容易です。名前と拡張子の色が異なります（開いているファイルの場合）。タブにカーソルを合わせると、閉じるボタンが表示されます。	このメカニズムの実装は有益ではありません。タブとファイルマネージャーを同時に操作するにはあまり便利ではありません。完全なファイル名が合わない場合があります。実装に不慣れ。タブメカニズムにより、ファイルマネージャーのサイズが小さくなります。ファイルのプレビューなし。すべてのタブに構文を使用していません。すべてのタブからファイルへの短縮パスを一度に見つけることは不可能です。同じファイル名を持つ複数の場所から特定のタブを選択するのは困難です。場所が不明であるためです。
Phpstorm	通常の実装があります。各タブには、その拡張子を示す画像があります。異常な方法を使用して、多数のタブを操作します。開いているすべてのファイルには「閉じる」ボタンがあります。	十分な情報ではありません。 2つのパネルを占有します。古いタブは、ファイルマネージャーから再度開く必要があります（タブバーから自動的に削除されるため）。同じファイル名を持つ複数の場所から特定のタブを選択するのは困難です。場所が不明であるためです。タブの数は画面の解像度に依存します。ファイルのプレビューなし。すべてのタブからファイルへの短縮パスを一度に見つけることは不可能です。
崇高なテキスト3	タブの場所にはさまざまなオプションがあります。開いているファイルのフルネームが表示されます。各タブに「閉じる」ボタンがあります。非表示のタブを切り替えるためのラジオボタン。	十分な情報タブがありません。オープンファイルのメカニズムは、インターフェースの多くのスペースを占有します。ファイルのプレビューなし。 1つのパネルでFMとタブを操作するのは不便です。ファイルへのパスが常に表示されるとは限りません。同じファイル名を持つ複数の場所から特定のタブを選択するのは困難です。場所が不明であるためです。すべてのタブからファイルへの短縮パスを一度に見つけることは不可能です。

テーブルを分析して、2種類のタブを推測しました。

テキストエディターの上の水平タブリスト。
左ペインの開いているファイルの垂直リスト。

これらには、次の利点と欠点があります。

タブ機構	利点	欠点
テキストエディターの上の水平タブリスト	通常の実装があります。タブには閉じるボタンがあります。まれに、各タブにその構文またはファイル形式を示す画像があります。	多数のファイルがある場合、フルネームを読み取ることはできません。ほとんどの場合、開いているすべてのファイルに対してすぐに構文は指定されません。フルネームが表示されるタブの容量は、画面の解像度に依存します。開いているすべてのファイルの追加リストは有益ではありません。インターフェイスで1-2パネルを使用します。各タブのファイルへのパスを一度に見つけることはできません。ファイルをプレビューする方法はありません。同じファイル名を持つ複数の場所から特定のタブを選択するのは困難です。場所が不明であるためです。
左ペインの開いているファイルの垂直リスト	ほとんどの場合、タブ名は完全に表示されます。垂直リスト上の移動の単純さ。まれに、名前とファイル形式の色が異なります。各タブには「閉じる」ボタンがあります。	タブは有益ではありません。完全なファイル名が合わない場合があります。タブとファイルマネージャを同時に使用するのは不便です。パネル全体を占める。ファイルマネージャーのサイズを縮小ファイルのプレビューなし。各タブのファイルへのパスをすぐに見つけることはできません。すべてのタブで選択した構文を同時に識別することは不可能です。同じファイル名を持つ複数の場所から特定のタブを選択するのは困難です。場所が不明であるためです。

パート3.新しいタブエンジン。

この状況に我慢するのをやめて、新しいソリューションを作成することにしました。

新しいメカニズムは珍しいだけでなく、便利で美しく、効果的です。これは、数か月にわたって開発されてきたインターフェイス要素の1つです。サイトを開発する際の生産性が向上しているため、削除されたことはありません。

このタブメカニズムは、メインメニューがあるはずの領域にうまく入り（これはありませんが、それは別の話です）、追加のスペースを占有しません。これにより、テキストエディタのスペースを増やすことができます。これは、追加のブラウザパネルの場合に非常に有益です。この表示方法はインターフェースを混乱させることはありませんが、同時に必要なものすべて、つまり現在開いているファイルとその構文を見ることができます。

インターフェイスでmr Gefestでは、3つの機能部分（タブ、ファイルの操作、構文の選択）を1つの論理ユニットに結合しました。サイトを開発するときにそれらの機能がしばしば交差するためです。

「矢印付きドキュメント」アイコンにカーソルを合わせると、「ファイルの操作」メニューが表示されます。これを使用して、新しいファイルを作成、保存、または更新できます（サーバーから再度ダウンロードします）。ご覧のように、機能は色で分けられており、トーンの目的と意味を明確に区別しており、ファイルマネージャーのコンテキストメニューのトーンと一致しています（これもまた別の話です）。

インターフェイスの操作がわかりにくい直感的なレベルになるように、各インターフェイス要素に対して単一の情報フィールドを実現し、色（色、テキストなど）を交差させます。

開いているファイルに適切な構文を選択するのが非常に簡単になりました。紛らわしいメインメニューの長いリストやテキストエディタパネルで検索する必要はありません。

構文と色の関連付けが含まれているため、名前を読まずに直感的にプログラミング言語を変更できます。この形式では、何も探す必要はなく、すべてが迅速かつ明確です。

新しいメカニズムにカーソルを合わせると、タブのリストが開き、タブで検索され、頻繁に使用される開いているファイルのブロックが表示されます。

スタイリッシュでミニマルで未来的です。必要な情報をすべて表示します。

このリストを開くと、現在のタブが検索フィールドに表示されますが、クリックするとすぐにテキストが消え、開いているファイルの名前を入力できます。これにより、必要なタブがたくさんあるときに、すぐに目的のタブを見つけることができます！指定したフィールドに何も入力していない場合、現在のタブの名前が返されます。

サイトを開発しているときに、開いているファイルの数が多くなる場合がありますが、同時にいくつかのファイルだけを操作します。この場合、特別なブロックが発明されました。特別なアルゴリズムによると、特定の期間に最も頻繁に使用するタブがそれに該当します。とても便利です！

さらに、開いている各ファイルには、特別な「ピン/ピン解除」ボタンがあります。これにより、特定のタブをFrequently Usedブロックに添付できます。したがって、人気のあるファイルは常に手元にあります！

各タブにはすべての重要な情報があります。

ファイル名;
ファイルの前の最後の2つのフォルダー。
構文
ファイルへのフルパス。

構文アイコンは、複雑な画像の形ではなく、色とテキストで作成されます。開発環境で1〜3時間作業した後のこのトリックにより、色を特定の構文に関連付けることができます。このアプローチにより、名前だけでなく構文によってもタブを選択できます。タブで使用されるプログラミング言語の色調は、構文選択ブロックの色調と完全に同じです。

各タブの最後の2つのフォルダーを指定すると、同じ名前の開いているファイルの違いを確認できます。

構文名の代わりにマウスで特定の入力にカーソルを合わせると、「閉じる」ボタン、ファイルへのフルパス、「目」アイコンが表示され始めます。

フルパスの最後のフォルダーは太字で表示され、その中のファイル名は黒で表示されます。

タブの「目」アイコンの上にマウスを置くと、テキストエディターを開かずにその内容を見ることができます。そのため、各ファイルをすばやく表示できます。

このタブメカニズムには、1つの顕著な欠点があります-不慣れであり、 mrで 1時間の作業で消えます。ゲフェスト。

しかし、メリットははるかに大きくなります。

任意のタブでファイルへのフルパスを確認できます。
インターフェイスで多くのスペースを占有しません。
各タブには、そのフルネーム、構文、およびその前の最後の2つのフォルダーが表示されます。
ファイルを直接開くことなく（特別なボタンを使用して）ファイルの内容を表示できます。
ファイルに関する重要な情報はすべて、50以上のタブを開いていても簡単に見ることができます。
名前によるタブ検索があります。
構文を選択する最も簡単で直感的な方法
頻繁に使用されるタブのブロックを使用すると、多数のファイルを開いたり、一部のファイルのみを使用したりするときに、長い検索を開かずにタブを切り替えることができます。
色とファイルの構文には関連性があります。
各タブに「閉じる」ボタンがあります。
構文の選択、ファイルの操作、およびタブは1つの論理ブロックに結合されます。
最後の2つのフォルダーでは、同じ名前のタブを区別できます。

次に、3つのタブメカニズムの比較表を見てください。

タブ機構	利点	欠点
テキストエディターの上の水平タブリスト	通常の実装があります。タブには閉じるボタンがあります。まれに、各タブにその構文またはファイル形式を示す画像があります。	多数のファイルがある場合、フルネームを読み取ることはできません。ほとんどの場合、開いているすべてのファイルに対してすぐに構文は指定されません。フルネームが表示されるタブの容量は、画面の解像度に依存します。開いているすべてのファイルの追加リストは有益ではありません。インターフェイスで1-2パネルを使用します。各タブのファイルへのパスを一度に見つけることはできません。ファイルをプレビューする方法はありません。同じファイル名を持つ複数の場所から特定のタブを選択するのは困難です。場所が不明であるためです。
左ペインの開いているファイルの垂直リスト	ほとんどの場合、タブ名は完全に表示されます。垂直リスト上の移動の単純さ。まれに、名前とファイル形式の色が異なります。各タブには「閉じる」ボタンがあります。	タブは有益ではありません。完全なファイル名が合わない場合があります。タブとファイルマネージャを同時に使用するのは不便です。パネル全体を占める。ファイルマネージャーのサイズを縮小ファイルのプレビューなし。各タブのファイルへのパスをすぐに見つけることはできません。すべてのタブで選択した構文を同時に識別することは不可能です。同じファイル名を持つ複数の場所から特定のタブを選択するのは困難です。場所が不明であるためです。
mrのタブゲフェスト	任意のタブでファイルへのフルパスを確認できます。インターフェイスで多くのスペースを占有しません。各タブには、そのフルネーム、構文、およびその前の最後の2つのフォルダーが表示されます。ファイルを直接開くことなく（特別なボタンを使用して）ファイルの内容を表示できます。ファイルに関する重要な情報はすべて、50以上のタブを開いていても簡単に見ることができます。名前によるタブ検索があります。構文を選択する最も簡単で直感的な方法頻繁に使用されるタブのブロックを使用すると、多数のファイルを開いたり、一部のファイルのみを使用したりするときに、長い検索を開かずにタブを切り替えることができます。色とファイルの構文には関連性があります。各タブに「閉じる」ボタンがあります。構文の選択、ファイルの操作、およびタブは1つの論理ブロックに結合されます。最後の2つのフォルダーでは、同じ名前のタブを区別できます。	習慣ではない

表からわかるように、mrのタブメカニズム。ゲフェストは、同業他社の利益を上回っています。

一見するとこのイノベーションに積極的になることを理解していますが、これを行う前に、実際にこれらすべてを使用できる場所へのアクセスを待ってから、その有効性がテストされているため、最終的な結論を策定することを願っています私たちとクラウドIDEのユーザーによるサイトの実際の開発とともに。ゲフェスト。

各要素でmr ゲフェスト、私たちは魂とエネルギーを投資し、新しい効果的なテクノロジーを作ろうと試み、多数のプログラム（現代および古くからあるプログラム）を分析し、さまざまな種類のシミュレーションを実施しています。あなたが私たちのエネルギーを感じ、それを充電することを願っています。

みなさんの生産的で興味深い仕事をお祈りします！

重要な情報！ 現在、当社製品の信頼できるパートナー、特にロシアのホスティングプロバイダーを探しています。メールアドレス：support@gefest-ide.com

IDE	利点	欠点
Cloud9	通常の実装があります。タブを操作するには2つの方法があります。各タブに「閉じる」ボタンがあります。テキストエディターの上のパネルに[ファイルの作成]ボタンがあります。	有益ではありません。多くのスペースを占有します。タブとファイルマネージャを同時に使用するのは不便です。多数のタブを開いたり、テキストエディターのパネルで作業しているときは、フルネームを読むことはできません。タブメカニズムにより、ファイルマネージャーのサイズが小さくなります。ファイルのプレビューなし。 [ファイルの作成]ボタンは、[タブ]パネルの追加スペースを占有します。すべてのタブからファイルへの短縮パスを一度に見つけることは不可能です。同じファイル名を持つ複数の場所から特定のタブを選択するのは困難です。場所が不明であるためです。
ブラケット	タブ名は完全に表示されます。垂直リストに沿って移動が容易です。名前と拡張子の色が異なります（開いているファイルの場合）。タブにカーソルを合わせると、閉じるボタンが表示されます。	このメカニズムの実装は有益ではありません。タブとファイルマネージャーを同時に操作するにはあまり便利ではありません。完全なファイル名が合わない場合があります。実装に不慣れ。タブメカニズムにより、ファイルマネージャーのサイズが小さくなります。ファイルのプレビューなし。すべてのタブに構文を使用していません。すべてのタブからファイルへの短縮パスを一度に見つけることは不可能です。同じファイル名を持つ複数の場所から特定のタブを選択するのは困難です。場所が不明であるためです。
Phpstorm	通常の実装があります。各タブには、その拡張子を示す画像があります。異常な方法を使用して、多数のタブを操作します。開いているすべてのファイルには「閉じる」ボタンがあります。	十分な情報ではありません。 2つのパネルを占有します。古いタブは、ファイルマネージャーから再度開く必要があります（タブバーから自動的に削除されるため）。同じファイル名を持つ複数の場所から特定のタブを選択するのは困難です。場所が不明であるためです。タブの数は画面の解像度に依存します。ファイルのプレビューなし。すべてのタブからファイルへの短縮パスを一度に見つけることは不可能です。
崇高なテキスト3	タブの場所にはさまざまなオプションがあります。開いているファイルのフルネームが表示されます。各タブに「閉じる」ボタンがあります。非表示のタブを切り替えるためのラジオボタン。	十分な情報タブがありません。オープンファイルのメカニズムは、インターフェースの多くのスペースを占有します。ファイルのプレビューなし。 1つのパネルでFMとタブを操作するのは不便です。ファイルへのパスが常に表示されるとは限りません。同じファイル名を持つ複数の場所から特定のタブを選択するのは困難です。場所が不明であるためです。すべてのタブからファイルへの短縮パスを一度に見つけることは不可能です。

Cloud IDEの新しいタブエンジン

内容