HabrAjaxは古いデザインを満たします

ユーザースタイルをサポートするように設計されたHabrAjaxスクリプトは、インターフェースの要望に一致する機能を実装し、公開後数日間でリリースに近づいています。 組版の異なるページのすべての基本機能は適切に機能し、適切に機能します。これが複雑さの大部分を占めています。 QAと古いページは機能します(お気に入り、自社、会社のブログ、検索)-記事やコメントのアップロードは、お知らせフィードをリロードすることなくどこでも機能します。



スクリプトのもう1つの重要な部分が追加されました-古い(既存の)ページデザインで特別なZenCommentスタイルを使用せずに正常に機能する機能(この不思議なモードについては以下の注を参照)。 これは、古いデザインの通常のアウトラインとサイズではなく、新しいデザインに切り替える準備ができていなかったユーザーの90%がまさに欠落していたものです。



彼らは今準備ができていないかもしれませんが、新しいデザインのいくつかの機能の大きな利便性は彼らの仕事をするでしょう、そして来る人は禅を理解するでしょう。



互換性のために、古いデザイン用のスクリプトの革新をカスタマイズする移行スタイルの小さなグループを追加する必要がありました。それらはすべて元々新しいデザイン用に調整されていたためです。 一部の場所では、非常にエレガントではありませんでした-たとえば、ハーフハイトフレームの水平スクロールバーが、古いページビューを使用することにした場合はどうなりますか-完全に新しいものに変更しないでください。 しかし、Sylishのスタイルを(Firefoxで)有効にすることで、ZenCommentスタイルに基づいた新しいデザインに移行することがわかりました。 (他のブラウザーでも同じですが、スタイルの切り替えによる操作の数がわずかに多くなります。)



禅とは?



スタイルZenComment-完全にアトミックなもので、その意味はほとんど理解されていません。これは驚くことではありません。 「禅」のスタイルで作業する-実際、画像と動作は通常のページとは大きく異なります。 したがって、すぐにZenを理解することはお勧めしませんが、2段階の開発に合格します。



1. HabrAjaxスクリプトを使用した古いデザイン。 彼は存在のプリズムを通して見ることの正しさについて疑念をsoきます。



2.「コンパクト」スタイルの新しいデザイン-ZenCommentスタイルにも埋め込まれ、スタイルに1文字を編集するか、HabrAjaxでモードを切り替えることにより、2つの方法でそれらに含まれます。 そしてその後、コンパクトをマスターして自信を持って作業した後、禅を理解することをお勧めします。 また、私はコンパクトがより好きです-明らかに、私は禅の前でさえ成熟していません。



3.禅とは? すべての同様のall話と同様に、この場合のZenは、画面に余分なものがなく、灰色のフィールドとテキストのみがある場合にコメントを表示する状態です。 そして、構造を説明する行。



これは、Zenの全体的な哲学の中で最も秘密の様式です。 Zenスタイルでは、さまざまな程度のステルスの4つのモードが収集されます。これらのモードは、単にマウスの動きによって引き起こされます。 ウィンドウのほぼそのような側でそれらを見るためにマウスを配置する必要があるため、我々はそれらを基本ポイントを通して条件付きで呼び出します。



「北」は最も秘密のモードです。 表示されるメッセージテキストとそれらの間の灰色のギャップ。 名前、日付、評価はありません。 マウスは、コメント列の左側にある約6ピクセルの細いストリップに移動する必要があります。 幅。 (またはコメントのタイトル。)





「東」-白いフィールド。 著者の名前はコメントに追加され、それ以上は追加されません。 コメントツリーの構造と同じ補助線を除きます。 マウスを右に向けるか、ウィンドウから完全に削除する必要があります。





「南」は最も好まれる情報です。メッセージヘッダーにカーソルを合わせると、メッセージのすべてとブランチの前のメッセージが表示されます。 評価、ボタン、日付、署名-すべてがそこにあります。 「北」に関しては、隣接する枝は灰色の暗闇、テキストのみで覆われています。





「West」-左側の細いストリップではなく、少し右、最大20ピクセルを指すと、作成者と日付の最初のレベルのみが表示され、残りの名前は非表示になりますが、ブランチのすべての評価が表示されます。 はい、これは「South」と同じですが、ブランチのルート用です。





わかりやすくするために、異なるZenモードの領域は異なる色で表示されます。 「東」は周囲のすべてをカバーし、「北」は1つではなく2つの長方形の領域を占めるため、マウスをスクロールすると「北」モード(および「西」)になりやすいことに注意してください。





このような哲学は、灰色のフィールドのこのちらつきで非常に珍しいものです。 最終的には、禅の白い背景に焦点を当てるでしょう。 北が東のように白くなるようにいくつかのフィールドの色を書き換えることを妨げるものは何もありませんが、著者の名前は消えます。



特に禅のために、私はアバターを隠す設定を書きました-彼らは、大騒ぎを純粋なスキームに適合させませんでした。 アバターは、それらの上にカーソルを合わせると表示されます。 サイトの古いレイアウトの一部の場所では、アバターが常に表示されますが、これは(会社のブログの)古いレイアウトでは正常です。 あなたは克服できますが、彼らは天気をしません。



会社のブログの古いレイアウトにはZenレジームが含まれていないことに気付くかもしれません。 そうです、新しいレイアウトが作成され、それに基づいて2011年10月に作成されたからです。 質問と回答の新しいレイアウトにも含まれていません。 これは必要ないかもしれません。



しかし、それは後で。 今、私たちは禅を理解する最初の段階にいます。 古いデザインを取り入れています。 より正確には、含める必要はありません。含める必要はなく、新しいスタイルは何も追加しません。 HabrAjaxバージョン0.73 以降をインストールする必要があります。 新しいZenCommentスタイルがインストールされている場合は、スタイリッシュなメニューバー「すべてのスタイルをオフにする」でそれらを無効にします。 ページをリロードする必要はありません。新しいものはすべて消えます。 HabrAjaxスクリプトのみが残ります。



古いデザインのタオ



古いデザインでの変更はそれほど目立たず便利ではありませんが、多くのスクリプト関数はほぼすべて動作し、それらを任意の組み合わせでオフにできます。 その結果、スクリプトとスタイルは、ページタイプを表示するブラウザの選択により、設定と状況の膨大な組み合わせに耐えることができます。 自分で設定を選択し、さらに便利にするツールがあります。 それらのリストは複数のページをカバーしており、前の記事で簡単に説明され、一部はスクリプトページで説明されていました。 それらをまったく説明することはできません-一部を推測することさえできません(新しいウィンドウでサイトの検索結果を開く方法、Twitterボタンを削除する方法、Google +を追加する方法など)。 そして、スクリプトが作成されるサイト上にない場合は、どこに説明するか。 ここにイラストの別の部分があります。



スクリプトスタイルとサポートプランについて少し説明します。 サイトのページにある可能性のあるモードの強力な組み合わせの組み合わせ(異なるレイアウト、異なるブラウザー、さらに異なるページの組版の組み合わせ-サイトの構築方法を見た人は知っている)のため、スクリプトスタイルは非常に紛らわしいです。 経験によれば、サイトのレイアウトが次に壊れると、機能が長期にわたって復元されます。 現在のサイトへの依存度を低くするために、その構築には別のアプローチが必要です。 しかし、現在の依存関係を持つスクリプトは既に存在し、機能し、異なるデザインのより理想的な高度な実装が現れるまでサポートされます。



現在の実装でも、機能の一部の開発が想定されています。 このスクリプトは、メインスクリプトの基本機能を使用するプラグインスクリプトの基礎として機能します。 既存の関数セットでさえ、5〜6個のプラグインに分解するとよいでしょう。そのため、サイト構造を壊しても、作業能力に長い障害が生じることはありません。 次に、プラグインが順番に復元され、各プラグインはプログラム全体よりも単純になります。 プラグインを介して新しい機能を追加することも簡単になり、サイトに必要な調整が必要な場合にのみ古い機能に触れることができます。



HabrAjaxプリズム設計-クラシック



古いデザインを保存しようとしましたが、変更がそれほど悪くないように修正する必要があった場所もありました。 最も顕著な変化は、著者とその数によるコメントの色付けです。 このプロパティは、その多彩さのために多くのコメントを収集することができました。 このプロパティを残したい(無効にしない)場合、回答の構造と外観が混同されないように、色付きの「返信」ボタンを何らかの方法で管理する必要があります。 新しいものは何も発明されていませんが、Zenのコメントと同じ解決策です。ボタンを左と縦に配置します。 それらは、外観上、メッセージに「壁」を作り、レベルシフトを明確に区別します。 新しいものが発明されていなければ、多様性に耐えることができます。



以前の写真はFirefoxのものでしたが、変更のためにChromeに移りましょう。 コメントページは次のようになります。









ご覧のとおり、スクリプトの結果は表示されていますが、ブロックの配置はより馴染みがあります。 異なるスタイルが混在し、サイズが不正確であるため、ずさんな感じがします。 一般的に、最も基本的なスクリプト操作モードではないため、これは許容範囲です。 これは、よりコンパクトに見たい移行期間には十分です。



次のステップに進むための強さを感じたら、まず「ZenComment組み込みスタイル」設定を有効にする(または代わりに外部スタイルを接続する)必要があります。複雑な「Zen」モードにならないようにするには、「コンパクトコメントモード 」もオンにする必要があります 。 (これまでのところ、ベータ版のため、変数コードを0または1に設定して、スクリプトコードで直接行う必要があります。)すべてのマウス位置に常に白い背景があります。 回答ボタンの外観のみがマウスの動きに依存します。 これは、 コンパクトモードの外観です。





すべての写真は、フィードページをリロードせずに記事がアップロードされた後に撮影されました。 そのため、お気に入りの評価と星印の矢印はなく、「最小化」ボタンがあります。 単一の記事を表示する場合、評価ボタンは数字の反対側に表示されます。 メッセージはZenよりも少し高度ですが、クラシックよりも圧縮されています。



だから、徐々に、馴染みのあるものから新しいものまで、禅を理解する道をたどることが提案されています。 存在するZenの数が多いほど、スクリプトユーザーのコミュニティと高度なインターフェイスの愛好家はより豊かになります。 より大きなユーザーベース—すばらしいことを達成する開発者が増えます。 より多くの開発者-ユーザーフレンドリーなインターフェースを備えたより多くのサイト。



UPD 6.01、12.00:HabrAjaxのバージョン0.74および2.04 ZenCommentが利用可能です。

計画された改善に加えて、主なものはスクリプトによるQAカバレッジの完了と設定の保存であり 、Reformalのコメンテーターとバグレポートによって提案されたいくつかのバグ修正があります 。 そのため、Operaで気づいたバグが作成され、Chromeの小さなバグが修正され、ユーザースタイルとレイアウトの存在が自動的に検出されました。



以下は、質問と回答が読み込まれたQAテープのビューです(「N Answers」ボタンをクリックした後)。




All Articles