[Research Artisan Lite]時間別の明細データを見やすく整形しなおす

時間別の明細データが見づらいので、レイアウトを改善します。
この画面、インストール直後は以下のような表示がされます。



多数の情報が表示されおり便利なのですが、一明細あたりの表示エリア(高さ)が大きく、多量のデータを見る時はスクロールが必要になります。そこで今回は、表示する内容はそのままにした上で、改行位置やフォントサイズを見直し、コンパクトに情報を閲覧できるようにします。
変更のベースにするソースはver1.17です。


ちなみに、時間別の明細データ画面は、ログイン後に出てくるページにある、グラフの時刻をクリックすると表示できます。




変更内容:
今回変更を行う対象は以下の2ファイルです。
ra_core\application\views\research\time_detail.html
ra_core\application\helpers\resultTimeDetailTag.php


time_detail.html

一覧表のヘッダを、以下のように変更します。

 <thead>
 <tr>
  <th class="thdetailleft" rowspan="4">アクセス時間</th>
  <th class="thdetailright">ID&nbsp;/&nbsp;訪問者名</th>
 </tr>
 <tr>
  <th class="thdetailright">IPアドレス / リモートホスト / ドメイン/ドメイン名 (都道府県)</th>
 </tr>
 <tr>
  <th class="thdetailright"><span class="property">画面解像度</span><span class="property">画面色数</span><span class="property">Javascript/Cookie</span><br />USER_AGENT</th>
 </tr>
 <tr>
  <th class="thdetailright">リンク元ページ &rarr; 閲覧ページ</th>
 </tr>
 </thead>
 <tbody>
 <?php $helper->resultTimeDetailTag(); ?>
 </tbody>






resultTimeDetailTag.php


一覧表の明細部を出力する関数、resultTimeDetailTag()のforeach内にある$html書き出し処理を変更します。Research Artisanでは、明細データの出力は、phpの関数内でタグ組み立てを行っています。

処理が長いので、一見すると複雑そうに見えますが、タグ組みを変更しただけです。

  public function resultTimeDetailTag() {
    <中略>
    foreach ($summaryData as $key => $value) {
        <さらに中略>
 
        $html .= '<tr>';
        $html .= '<td rowspan="4" class="tddetailleft'. $this->getEvenClass($i). '">'. $newTag. $accessTime. '</td>';
        $html .= '<td class="tddetailright'. $this->getEvenClass($i). '">';
        $html .= '<span class="favi"><img src="./images/'. $dispOsImg. '" alt="'. $dispOs. '" title="'. $dispOs. '" /></span>';
        $html .= '<span class="favi"><img src="./images/'. $dispBrowImg. '" alt="'. $dispBrow. '" title="'. $dispBrow. '" /></span>';
        $html .= '<a href="'. $this->getIndexUrl('research', 'uid_detail', '&amp;select='. $this->urlEncode($value['uid'])). '" title="'. $value['uid']. '">'. $this->getAlias($value['uid']). '</a>';
        $html .= '<span class="alias"><a href="'. $this->getIndexUrl('admin', 'aliasedit', '&amp;select='. $this->urlEncode($value['uid'])). '">訪問者名設定</a></span>';
        $html .= '</td>';
        $html .= '</tr>';
        $html .= '<tr>';
 
        $html .= '<td class="tddetailright'. $this->getEvenClass($i). '" style="font-size:80%;">';
        $html .= '<a href="'. $this->getIndexUrl('research', 'ip_user', '&amp;select='. $this->urlEncode($value['remote_addr'])). '" title="'. $value['remote_addr']. '">'. $value['remote_addr']. '</a> ';
        $html .= ' / <a href="'. $this->getIndexUrl('research', 'remotehost_user', '&amp;select='. $this->urlEncode($value['remote_host'])). '" title="'. $value['remote_host']. '">'. $value['remote_host']. '</a>';
        $html .= ' / <a href="'. $this->getIndexUrl('research', 'domain_user', '&amp;select='. $this->urlEncode($value['domain'])). '" title="'. $value['domain']. '">'. $this->getDomain($value['domain']). '</a>';
        $html .= ' (';
        if (!is_null($dispPrefImg)) $html .= '<span class="favi" ><img src="./images/'. $dispPrefImg. '" alt="'. $value['pref']. '" title="'. $value['pref']. '" /></span>';
        $html .= '<a href="'. $this->getIndexUrl('research', 'pref_user', '&amp;select='. $this->urlEncode($value['pref'])). '" title="'. $value['pref']. '">'. $value['pref']. '</a>)';
        $html .=  $this->getDomainEdit($value['domain']);
 
        $html .= '</td>';
        $html .= '</tr>';
        $html .= '<tr>';
        $html .= '<td class="tddetailright'. $this->getEvenClass($i). '" style="font-size:70%;color:#999;">';
        $html .= '<span class="property"><a href="'. $this->getIndexUrl('research', 'screenwh_user', '&amp;select='. $this->urlEncode($value['screenwh'])). '" title="'. $value['screenwh']. '">'. $value['screenwh']. '</a></span>';
        $html .= '<span class="property"><a href="'. $this->getIndexUrl('research', 'screencol_user', '&amp;select='. $this->urlEncode($value['screencol'])). '" title="'. $value['screencol']. '">'. $value['screencol']. '</a></span>';
        $html .= '<span class="property"><a href="'. $this->getIndexUrl('research', 'jsck_user', '&amp;select='. $this->urlEncode($value['jsck'])). '" title="'. $value['jsck']. '">'. $value['jsck']. '</a></span>';
        $html .= '<br />';
        $html .=  '<span>' . $this->escapeHtml($value['http_user_agent']) . '</span>';
 
        $html .= '</td>';
        $html .= '</tr>';
        $html .= '<tr>';
        $html .= '<td class="tddetailright'. $this->getEvenClass($i). '" style="font-size:90%;"><div class="detail">'. $dispReferer. '</div><div class="detail">'. $arrowTag. '<span class="requesturi">'. $dispRequest. '</span></div></td>';
        $html .= '</tr>';
 
        ...




上記変更を行うと、以下のように明細行の高さが半分以下になりました。
今まで1明細を表示させるエリア内に、2明細分の情報を詰め込みました。
変更前:


変更後:


今回の改造は実質的にタグの修正だけなので、phpが良く分からなくてもhtmlさえ知っていれば、好みのレイアウトに変更する事が出来ます。

関連記事

コメントを残す

メールアドレスが公開されることはありません。