インターネットプログラムの改善

ネイティブプログラムの時代では、ユーザーは開発者が許可した構成設定のフレームワーク内でのみ使用できました。 今日、インターネットアプリケーションの時代に、ユーザーは自分の裁量でプログラムの外部表現だけでなくその動作も簡単に変更できます。



この記事では、Webアプリケーションをより便利で美しく、機能を拡張し、自分でカスタマイズする方法を説明します。



各ユーザーにはお気に入りのプログラムがあります。 以前は、原則としてプログラムがほとんどなく、リクエストは少なかった。 現在、市場は充実しており、自分に都合の良いものを選択することがはるかに困難になっています。



たとえば、タスク/ To-Doマネージャーを取り上げます。 パーソナルITプロジェクトを実施し、買い物リストを維持し、必要な情報を階層構造で保存し、すべてのシステムで機能し、軽量、高速、便利で非常に優れているように、受信通知付きのリマインダーで同期できるように、マネージャーが必要です美しい。 もちろん、そのようなことはありません。実際、問題は古くから有名です。

決定するのはとても難しいし、話すのも簡単だし、どれだけ難しいのか！ ニカノール・イワノビッチの唇をイヴァン・クズミッチの鼻に当てて、バルタザール・バルタザリッチのようなsw歩をして、おそらくこれにイヴァン・パブロヴィッチの逆境を加えるなら、私はすぐに決定するでしょう。 今考えてみてください！

必要な機能を購入する準備ができている場合でも、通常、完全に満足できる既製のプログラムを見つけることは不可能です。 しかし、現代のWebプログラマーの場合、状況はAgafia Tikhonovnaの状況よりも簡単です。唇と鼻に関する完全なモジュール性とカスタマイズ性です。 これを行うには、javascriptファイルとcssファイルを挿入できるブラウザー拡張機能を使用できます（これが好きです）か、同じ目標を持つ独自の単純なファイルを選択して選択できます。 その後、プログラマーは「年」レベルで少し近づきます。



ほとんど誰もがそれについて知っていますが、それを使用する人はほとんどいません。 カスタム注入の明確な利点の簡単な例を示します。

to-do.microsoft.com

素敵な小さなマネージャーですが、大きなモニターで彼を見ることはあまり快適ではありません。 タスクにもっと大きな名前が必要で、その下にあるノートの明るさを減らし、右の列を拡張し、シンプルなcssで処理できるいくつかの改善を行います。









左の列。 ここで、Microsoftは一次元のタスクリストに完全にシフトダウンしています。 木が必要です。 原則として実装することもできますが、ここでは、簡単にするために、非折りたたみツリーを視覚的に構築します。





擬似ツリーは次のとおりです。







すでに何か。 JQeuryを接続する必要があり、場合によってはスクリプトの本文にコピーする必要があります。コピーしないと問題が発生します。 初期化遅延と同じこと。



次に、このプログラムファミリの知的により高度な代表者を見てみましょう。

trello.com

拡張されたリストカードは次のとおりです。







開発者がこのアプリケーションに投資した目的でTrelloカードを使用している人もいるかもしれませんが、このカードでは視覚的に有用な情報の10％未満しか見えませんが、他のすべては適切なものに集中するのを妨げる明るいカラフルなものです。



Cssとjsはすべてまともな外観につながります。 TrelloにはすでにjQueryがあり、次のようなスクリプトがあります。

 $('.mod-card-detail-icons-smaller .window-module-title h3').bind('click', function(){ $('.mod-comment-type').hide(); });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

たとえば、「アクティビティ」をクリックすると、すべてのコメントが非表示になります。 もう一度表示するには、右側の[詳細の非表示/表示]リンクをクリックします。



そして最後に、もっと面白いことを。



Trelloカードのリマインダーが必要です。 画面上のポップアップウィンドウではなく、いつでもどこでも私を連れて行くことを思い出させてくれます。 つまり、電話の音声通知です。 庭を囲わず、IFTTTとZapierを接続しないように、Googleカレンダーのイベントを作成するだけで、Androideで必要なすべてを実行できます。



Trelloデータモデルを拡張しないように、カードの期日に接続します（これもオプションです）。







日付を保存するときは、カレンダーにイベントを作成するリクエストをGoogle Calendar APIに送信する必要があります。 コード自体は非常に簡単です。





ただし、その前に、Google API Consoleでアプリケーションを作成し、client_idとapi_keyを取得して、OAuth認証を接続するためのいくつかの簡単な標準手順を作成する必要があります。 グーグルのマニュアル。



カレンダーイベントを変更する必要がある場合、およびTrelloカードの期限を変更する必要がある場合は、さらに作業する必要がありますが、これも実行可能です。



最後に、WebサイトおよびWebアプリケーションに対する本当に便利な改善点はすべて、拡張機能として設計し、ブラウザストアに配置できることに注意してください。



免責事項：上記の例はすべて、jsおよびcssの可能性を使用する例としてのみ提供されており、それ自体には価値がありません。

Habrの追加

大型モニターでは、Habréの記事のテキストは読むのに便利ですが、写真（特にテキスト付きのスクリーンショット）はかなり見分けがつきません。 このスクリプト：

 window.onload = function() { $(function() { $('.post img').each(function() { $(this).wrap('<a target="_blank" href="' + $(this).attr('src') + '"></a>'); }); }); };
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

画像をクリックすると、新しいウィンドウでフルサイズで開くことができます。