2ペインのWebファイルマネージャーCloud Commander

多くのファイルマネージャがありますが、多くの人が学ぶことが面白いと思うものがあります。 結局のところ、それは2パネルで、ブラウザーで動作し、エディター（構文強調表示付き）とコンソールを備え、クライアントとサーバーで構成され、JavaScript / Node.jsで記述されています。











ウェブサイト： cloudcmd.io

デモ： heroku 、 jitsu

まえがき

私が最初に読んだコンピューター本はWindows：Wizard Labです。 彼女は、Windows 9xのさまざまなユーティリティについて語っています。 それらのいくつかはもはや存在しませんが（たとえば、Zip Magic 2000）、他のものは積極的に使用され、最も重要なことは、今日まで開発されています（Total Commander）。 何よりも、ファイルマネージャに関するセクションが気に入りました。 私はまだコンピューターを持っていませんでしたが、それでもExplorerを使用することは深刻ではなく、Two-Panel File Managerを使用する方がはるかに正確で便利であることに気付きました。 私が訪れたすべてのコンピューターで、本にあるすべてを試しました。 もちろん何よりも、私はTotal Commanderが好きでした。 彼は彼のビジネスで最高です、それは議論の余地のないです。



数年後、コンピューターを手に入れました。 しばらくして、Windowsの次にLinuxをインストールし、便利なファイル管理に適したものを探していました。 私は本当に成功しませんでした。 はい、* nixのMidnight Commanderが最高です、それは本当です。 しかし、Totalの使用に慣れていた関数の多くは、Totalには含まれていませんでした。 彼らはグラフィックマネージャーにはいませんでした。 これらの機能の1つは、名前を入力しながら現在のファイルのポインターを移動することです（多くのフォルダーがあり、音楽がたくさんある場合-リストをめくるのは最も楽しい仕事ではありません）。



結局、私は音楽を聴いたり、ビデオを見たり、裸のコンソールでファイルを管理したりするのがもっと楽しかった。 しばらく止めました。

理由

数年後、小さな会社に就職したとき、自分のコンピューターにアクセスする可能性ははるかに低いことに気付きました。 そして実際、私は他の人のコンピューターで仕事をしていることが多いのです。 そして、新しいものに慣れることは私にとって非常に簡単ではないため、ブラウザで動作し、インストール、構成、または他の長い時間を必要としない言語と開発ツールを使用するようになりました。 Cloud9 、 Koding 、そしてもちろんGitHubを使い始めました。



クラウドサービスのアイデアに興奮しました。これらのプロジェクトのオープン性と機能がとても気に入ったので、自分で作成し始めました。 これは、Cloud Commanderのファイルマネージャーです。

アナログ

ほとんどのアナログはphpで書かれていますが、これは私にはあまり似ていません。 私がJavaScriptで書くコードの大部分は、したがって、それに応じて、最高ではないが最も一般的な言語で書かれたアプリケーションをもっと見たいと思っています。

Webファイルマネージャー

Web用のファイルマネージャーはたくさんあります。 しかし、実際には、それぞれにいくつかの基本的な問題があります。

• Windowsエクスプローラーインターフェースを模倣します（マネージャーよりもエクスプローラーの方が便利ではありません）
• ファイル操作は主に異なるページで発生し、まったく対話的ではありません（ただし、マネージャーは主にサーバー言語で記述されているという事実によって説明できます）。
• サーバー言語で記述されているため、ローカルストレージやその他のHTML5機能を使用して作業を高速化することはできません。また、JavaScriptはajaxなどの基本的なものにのみ使用されます。コード）;

優秀なマネージャーのうち、たとえば次のようなものを引用できます。

• ElFinder （問題1と3が含まれています（同様に2、ファイルをダウンロードしてみてください。自分自身を閉じる必要があるポップアップが表示されます））。
• Pydio （非常に有望に見えますが、使い慣れたインターフェイスをWebにもたらす代わりに、新しいパラダイムを作成します（それは悪いことではありませんが、それでも）。

上記のアプリケーションは非常にうまく機能します。 しかし、たとえば、通常のファイルマネージャーからは、別のファイルマネージャーを期待しています。 また、ブラウザで作業する必要がある場合-このタイプのプログラムを一般ユーザーだけでなく、古典的な2パネルファイルマネージャーでほとんどの時間を費やしているより高度なユーザーにとっても使いやすいものにしましょう。

2ペインのファイルマネージャー

2年前にブラウザで作業できる健全な2パネルのファイルマネージャーを見つけることができませんでした。実装を書き始めたとき、今は見つかりません。 私は定期的にこの問題を監視していますが。



最初は、誰かの仕事を続ける、いわばプロジェクトに接続するというアイデアがありました。 SourceForgeの類似の（残念ながらリンクはもう覚えていません）トータルコマンダーを見つけました。Webインターフェースを備えた、PHPで書かれており、当時遊んでいたものです。 彼のコードはすべて1つのファイルにまとめられたので、私はこれに対処したくありませんでした。 さらに、当時、私はNode.jsに積極的に興味を持ち始め、新しいプロジェクトで試してみたかったのです。



それ以来登場した興味深いもののうち、私はそのメトロ司令官しか区別できません。 確かに、win8でのみ動作し、ブラウザではなくネイティブで動作するため、それを感じる機会はありません。 しかし、スクリーンショットは印象的です。 そうでなければ、少なくとも私が見ている場所では、この方向に特別な動きはありません。

特徴

それで、Cloud Commanderのどこが注目に値するほど興味深いのでしょうか？ これらのポイントは非常に重要なので、これらのポイントをさらに詳しく調べてみましょう。



最も興味深い機能の中で、以下を強調する価値があります。

• ブラウザで作業します。 これは重要な機能であり、すべてが依存する一連の長所と短所を伴います。 おそらく主なことは、ブラウザーを使用しない場合（そのような人々は本当に存在するのか？）、このプログラムは間違いなくあなたのためではありません（他の問題では、次の段落に示されているものを変更することはそれほど難しくありません）。
• クライアントサーバーアーキテクチャ。 これは最初の段落から続きます。ブラウザで実行したいすべてのことを完全に行うには機能しません。 しかし、これは大きなプラスを意味します：責任の分離（アプリケーションのさまざまな部分は、サーバーコードを変更せずに任意のOSのネイティブクライアントを書くことができるロジックとグラフィックスに関与します）。クライアント/サーバー通信プロトコルにガイドされた言語（これについては以下で詳しく説明します）。
• コードはすべてJavaScriptで記述されているため、クライアントとサーバーの両方でコードの一部が完全に再利用されるため、記述内容をより真剣に受け止めることができます。 ブラウザであろうとnode.jsであろうと、実行される環境に依存しないようにコードを設計してください。
• ブラウザで無効化されたJavaScriptを操作する機能。 ほとんどの操作は使用できませんが、ファイルツリーを調べて必要なものをダウンロードすることは問題なく可能です。
• モジュラー構造。 最初からすべてが明確でした。すべてをゼロから書くと、最終的には何もできなくなります。 したがって、主要部分（コア）のみがゼロから書き込まれます。 ビュー、エディター、コンソールなどの機能。 これらは他の人によって書かれたモジュールです。 それらのいずれかを置き換えることができ（サポートされなくなった場合、または深刻なアナログが表示された場合）、一部（エディターとコンソール）は既に置き換えられていますが、それについては後で詳しく説明します。
• レスポンシブインターフェイス。 ファイルマネージャーは、携帯電話とタブレットのブラウザーで動作します。 画面が2番目のパネルに収まらない場合は、1つだけが表示されます。 また、クリックではなく手押し車に反応します。
• クラウドサービス（DropBox、GDriveなど）と対話する機能
• Drag'n'Dropを使用してファイルをダウンロードおよびアップロードする機能。
• Drag'n'Dropを使用して、ファイル（デスクトップ上の）からエディターにデータをロードする機能。
• .jshintrcファイルを編集してjshintルールを変更する機能。これは、エディターにロードされたすべてのjsファイルに影響します。
• ロード/アンロードを高速化するためのさまざまな最適化（クライアントでのlocalStorage、Diff、zip圧縮）。 ほとんどの作業はクライアントとサーバー間のデータ交換であるため、トラフィック量を最小限に抑え、それに応じて情報交換（チェーン内で最も狭いリンク）の速度を上げるためにさまざまな対策が講じられています。

違い

主な違いは、通常のキーボードショートカットを備えた2パネルインターフェイスです。 しかし、それだけではありません。 他のブラウザベースのファイルマネージャーとは対照的に、Cloud Commanderにはコンソールとエディターがあります。



このエディターは、110以上の言語で構文の強調表示をサポートしています。 ファイル形式は拡張子によって決まります。 Cloud Commanderのソースコードは、それ自体で修正されています（この記事もその中に書かれています）。



コンソールを使用すると、サーバー上でコマンドを実行できます。Linux、Mac OS、Windowsのいずれでもかまいません。 Cloud Commanderが実行されているサーバーは、ブラウザーのコンソールから直接制御されます。



重要な違いは、File Managerが実行されるプラットフォームとしてのNode.jsでもあります。 これ以上のPHP + Apacheはありません。

欠点

利点の存在はまた、これがまったくない場合の欠点の存在を意味します。 最も重要なもの：

• node.jsがなければ、何も機能しません。
• ブラウザーがない場合、HTTP要求を介してのみサーバーと通信できます。
• JavaScriptを無効にすると、ほとんどの機能が動作しなくなります。

これらは根本的な欠陥です。 差し迫った問題について話すと、そのようなことがあります。 エディターで：

• 4つのスペース、つまりタブが使用されていない場合、タブに問題があります。
• Opera Miniでは、すべてが非常に恐ろしく見え、一般的に古いIEは捨てられます。
• Drag'n'Dropを使用してフォルダーをアップロード/ダウンロードすることはできません（または複数のファイルを一度にダウンロードすることもできません）。
• サーバーレベルでのクラウドサービスとの統合はありません（将来的には変更される可能性があります）。
• ファイルをコピー/移動/削除するとき、進行状況バーはありません。
• 標準のダイアログボックス（アラート、確認、プロンプト）が使用されます。

構成

前述のように、Cloud Commanderはクライアントとサーバーで構成されています。 クライアントについてはすでに少し述べられているので、おそらくサーバーから始めます。

サーバーモジュール

サーバーは、依存関係がインストールされていなくても動作できますが、制限付きの動作モードになります。 このモードでは、コンソールは機能せず、js / css / html最適化は実行されず、フォルダーのコピー、移動、削除は機能しません。 package.jsonで規定されているモジュールをインストールした後、次のものが使用されます。

• 組み込みよりもはるかに高速に動作する高速 Webサーバー。
• js / css / htmlを縮小するminifyモジュール。
• フォルダーをコピー、移動、削除するためのモジュール。

共通モジュール

いくつかのモジュールは、クライアントとサーバーの両方で動作します。たとえば、 diff-match-patchは長い間開発されていますが、非常に安定して動作します。

顧客モジュール

クライアントでは、使用されるモジュールのリストがはるかに広くなっています。 これは：

• エディター
• 視聴者
• コンソール
• メニュー
• アーカイバ

内部デバイス

アーカイバ

ほとんどの質問は、おそらくクライアントのアーカイバが原因です。 これは、エディターによってサーバーに送信されるデータのサイズを削減するために使用されます。 このモードは、設定でオン（およびオフ）にできます。 実際、私が言ったように、クライアント/サーバーアプリケーションのボトルネックはデータ転送です。 同様に、パッキング（およびサーバーでのアンパッキング）は非常に高速です。

差分

ただし、テキストを常に完全に送信する必要はありません。 変更されたデータ、つまりパッチのみをサーバーに送信すると便利です。 そのため、編集中にサーバー上のファイルが変更されなかった場合-パッチが送信され、サーバーに適用されます（ファイルがあまり重くない場合、各操作はファイル全体をRAMにロードするため）、変更された場合、圧縮データが送信されます。 これにより、データ処理速度はデスクトップアプリケーションに非常に近くなります。

ローカルストレージ

ファイルを開くたびにサーバーからデータをダウンロードする必要もありません。 したがって、（ファイル）を開くと、localStorageのsha-1ハッシュのある場所に配置されます。 また、ハッシュが変更された場合（知らないうちに）、ファイルが再度ダウンロードされます。そうでない場合、ファイルが保存されるたびにハッシュが更新されます。 ディレクトリについても同じです。 オプションが有効になっている場合、ディレクトリの内容が一度読み込まれ、更新するには、Ctrl + Rを押します（または、新しいファイル/フォルダーを削除/作成します）。

高度なモジュールの読み込み

膨大な数のモジュールを持つこのような大規模なアプリケーションでは、ページがロードされたときにすべてのファイルがすぐにロードされたかどうかを判断するのは非常に困難です。 いくつかのプログラムは時々更新され、他のプログラムは時代遅れになり、置換が必要になるため、このようなアプリケーションは維持が困難です。 したがって、アプリケーションは、クライアントとサーバーのモジュールに分割されます。



クライアントモジュールは必要に応じてロードされます。 ユーザーがメニューを必要とする場合、ロードします。コンソールがセッション全体で役に立たなかった場合、ファイルはロードされず実行も開始されませんでした。

参加する

スレッドnode.jsは、他のスクリプト言語が持っているものと根本的に異なる非常に強力なツールです。 node.jsに没頭する過程で、ファイルをストリームに結合して、あたかも1つのファイルが存在するかのようにそれを与えることができるという考えは、私から離れませんでした。 私は速度の遅れがあると思ったが、そうではない。 すべてが時計のように機能し、特定の速度低下はありません。代わりに、ファイルを1つにマージせず、順次ロードするのではなく、1つのファイルとしてロードすることが可能になります 。



このアイデアは、最近jsDelivrで宣伝され始めました。 そして、私にはこれが正しい方向だと思われます。



要するに、jquery.jsおよびjquery.fancybox.jsファイルをダウンロードする必要がある場合、次の方法で実行できます。



cloudcmd.jit.su/join/lib/jquery.js:lib/fancybox.js





「：」記号を使用すると、ファイル名が互いに分離されるため、絶対に何でも組み合わせることができます。ファイルは順番に読み込まれますが、読み込み直後にクライアントに渡されるため、サーバーの速度には特に影響しません。



ファイルを読み取れない場合は、代わりにエラーメッセージが送信され、その後、ストリームが閉じられます。

開発

アプリケーション自体については十分に述べられていますが、開発についていくつか述べたいことがあります。 既に述べたように、Cloud Commanderはそれ自体で記述されています。



プロジェクトはgithubでホストされています。 devとmasterの 2つのブランチがあります。



最初のものには開発中のオプションがあり、すべての変更がそこで行われ、理想的にはすべてが常に機能するはずですが、時には異なるインシデントが発生することもあります。



2番目のブランチには、最新の安定バージョンがあります。 リポジトリからいつでも取得できますが、すべて問題ありません。

継続的な統合とテスト

各プッシュの後、コードはtravis.ciシステムに送信され、そこで所定のテストが実行され、コードがNodeJitsuおよびHerokuにデプロイされます。



また、何かが正常に機能しない場合は、すぐに電子メールが届き、リポジトリ内のアイコンの色が赤に変わります。



一部のサービスでCloud Commanderが応答しない場合、サイトの最上部にある緑色の円ではなく、リンクの近くに赤色の円が表示されます。 答えが長い場合-黄色。

タスクランナー

プロジェクトはGulpを使用します。Gulpは 、js、cssのチェック、テストの実行など、すべてのルーチンアクションを自動化します。

コミット

ある日、Angularで採用されているコミットの命名スタイルに関する記事に出会いました。 これは実際には非常に重要なプロセスです。 変更、修正、リファクタリングなどには独自のプレフィックスがあり、リリース中に、 feature



とfix



プレフィックスのコミットは履歴から消去され、 ChangeLog



特定の形式で表示されます。これらはすべて、1つのコマンドgulp changelog



行われます。

あとがき

読者がここまで来てくれたことに感謝します（たとえ彼が単に浪費したとしても）。 この記事が有益で興味深いものになったことを願っています。 おそらく、継続があり、待って見てください。



タイプミス、提案、コメントがある場合、これはハブに関する私の最初の記事です-PMまたはリポジトリの隠しブランチでお願いします 。 私は自分自身を修正しようとします。