何かを開発する過程で、Web開発者は多くの日常的なタスクに直面します。 今日の投稿では、2つの問題を解決する2つのマイクロツールを共有したいと思います。プロジェクトの集中ロギングと、Fontelloが個人的に作成したアイコンフォントの表示です。 だから、すべての人の健康と猫へようこそ。
集中プロジェクトロギング
私のサイトに投稿されたプロジェクトの数は数十です。 プロジェクトは、小規模から大規模までさまざまです。 そして、ほとんどの場合、定期的に変更、デバッグなどを行います。もちろん、みんなの仕事ですが、個人的には、プロジェクト自体のページでのデバッグエラーの出力は不運だと思います。 さらに、htaccessファイルでエラー出力を別のファイルにリダイレクトするように定義することもできます。 もちろん、プロジェクトログを独自のフォルダーに保存することは必ずしも便利ではありません。一般に、1つのプラットフォームからすべてのログを同じ場所に収集することは論理的です。 しかし、それらを集めるだけでは十分ではありません。 また、ブラウザからログを管理するための便利なツールも必要です。これは便利だからです。
実際、スクリプト自体は非常にシンプルで、外部ファイルなしで必要なものがすべて含まれています。
<?php define("PTPL_DATE",'/^\[(\d+)-(\w+)-(\d+)(\s+)(\d+):(\d+):(\d+)\]/si'); define("PRPL_DATE",'<b class="badge">\1-\2-\3 \5:\6:\7</b>'); $_ = <<<DATA <!DOCTYPE html> <html><head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <title>LOG viewer</title> <link rel="stylesheet" type="text/css" href="http://netdna.bootstrapcdn.com/bootstrap/2.3.2/css/bootstrap.min.css" /> <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Cuprum&subset=latin" /> <link rel="stylesheet" type="text/css" href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" /> <link rel="stylesheet" type="text/css" href="index.php?sect=css" /> <link rel="icon" type="image/png" href="index.php?sect=icon" /> <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script> <script type="text/javascript" src="index.php?sect=js"></script> </head><body><div class="container-fluid"> <div class="row-fluid"> <div class="toolbox span3"> <a id="el-menu" class="btn btn-info fa fa-refresh" href="index.php?sect=menu" data-target="side">Refresh</a> </div> <div class="toolbox span9"> <a id="el-content" class="btn btn-info fa fa-refresh" href="index.php?sect=log" data-target="content">Refresh</a> <a class="btn btn-danger fa fa-times-circle" href="index.php?sect=log&act=clear" data-target="content">Clear</a> </div> </div> <div class="row-fluid" id="el-root"> <div class="side span3"><div></div></div> <div class="content span9"><div></div></div> </div> </div></body></html> DATA; define("APP_PAGE",$_); define("APP_EMPTY",'<div class="logitem info"><span class="fa fa-info-circle"></span> Log is empty!'."</div>\n\n"); $_ = <<<JS (function(\$){ \$.fn.HTTPError = function(E){ var I = parseInt(E.status); \$(this).html('').append(\$('<div>').addClass('logitem error').append( \$('<span>').addClass('fa fa-'+((I == 401 || I == 403)?'lock':'times-circle')) ).append( \$('<span>').text(' '+E.statusText) )); } \$.fn.logClick = function(T,E,F){ E = E || false; if (E) E.removeClass('active error').addClass('loading').siblings().removeClass('active error loading'); \$.get(\$(this).attr('href')).success(function(D){ \$('#el-root > div.'+T+':first > div:first').html(D); if (E) E.removeClass('loading').addClass('active'); if (typeof F == 'function') F(); }).error(function(R){ \$('#el-root > div.'+T+':first > div:first').HTTPError(R); if (E) E.removeClass('loading').addClass('error'); }); return false; } })(jQuery); \$(function(){ \$('#el-root > div.side:first').on('click','li > a.item',function(){ return \$(this).logClick('content',\$(this).parent()); }); \$('div.toolbox').on('click','a.btn',function(){ return \$(this).logClick(\$(this).attr('data-target')); }); \$('#el-root > div.side:first').on('click','li > a.fa-times',function(){ return \$(this).logClick('content',\$(this).parent(),function(){ \$('#el-menu').click(); \$('#el-content').click(); }); }); \$('#el-menu').click(); \$('#el-content').click(); }); JS; define("APP_JS",$_); $_ = <<<CSS html,body,div.container-fluid { height: 100%; }
ログフォルダーでindex.phpスクリプトを作成し、そこに上記のコードをコピーし、基本的なHTTP認証（htpasswdを使用）でフォルダーを保護します。
ログに記録されたプロジェクトの.htaccessで、次の行を追加します。
php_value log_errors "on" php_value log_errors_max_len "1024" php_value error_log "/path/to/your/log/file"
そして、実際には、それだけです。 プロジェクトをデバッグするときは、ログが保存されているフォルダーに移動してログインし、目的のログを選択します。 ログは、対応するボタンを使用してクリアするか、完全に削除できます。 スクリプトインターフェイスに必要なすべてのライブラリ（ブートストラップ、jQuery）は、公式のCDNからロードされます。 インターフェイスは英語ですが、これはほとんど問題ありません。
Fontelloアイコンビューアー
私のフレームワークを開発する過程で、人気のあるFontAwesomeはいくつかの基準を満たしていないため、独自のアイコンフォントを作成する必要に直面しました。 フォントはコンパイルされましたが、コンパイルされたフォントで常にタブをブラウザに保持するか、すべてのコードとエイリアスを記憶するか、CSSファイルを常に覗き込む必要がありました。 3つのオプションはすべて非常に不快でした。 したがって、生成されたCSSファイルに基づいてフォントプレビューを作成する簡単なスクリプトを作成しました。
コードは非常にシンプルで自給自足です：
<?php define('fontPrefix','');
Cuprumはフォントの1つとして使用されます。 これは、圧縮されたテクスチャを使用するために、よりコンパクトにする必要があるためです。 このスクリプトには、プレフィックスとファイルへのパスの2つの設定しかありません。 私のスクリプトはフォントフォルダーにあり、スタイルシートはindex.cssと呼ばれていました。 実際、スクリプトが機能するために必要なのはこれだけです。
それだけです、私のバイクに注意してくれてありがとう。