どこでも「newマーク」設置:WEB制作【インタフェ】

どこでも「newマーク」設置　

cookieを設定し、訪問者ごとにnewマークを表示するか否かを判断する

記事投稿から一定の期間内は一律に「newマーク」を表示するのではなく、訪問者にとって新しければ「newマーク」を表示します。
例えば、当サイトの「ホーム」新着情報に表示されている「newマーク」横のアンカーをクリックし、「ホーム」に戻ると、該当する新着情報には既に「newマーク」が有りません。

訪問者ごとに「新しい情報」を表示するサイトは、ユーザビリティの高いサイトであると言えます。

Nucleusに「newマーク」設置

NucleusCMSでは標準機能として「newマーク」を設置できます。

［テンプレート編集］で表示したいページのテンプレートを選択し、［アイテム］の［新しいアイテムに付けるマーク］に画像や文字を指定します。
例えば、
<img src="images/new.gif" alt="new">

［アイテムの本体］にて表示したい場所に<%new%>と書きます。
例えば、
<h2><%title%><%new%></h2>

［グローバル設定］で［最終訪問日時 Cookieの保存］にて［はい］を選択し、設定を保存すれば完了です。

newマークの表示期間を制御する

Nucleusでは、上記の標準機能に加えて、newマークの表示期間を制御するモジュールが公開されています。

NP_NewItem

新規に投稿されたアイテムに「New!」マークを表示するプラグイン。クッキーによる未読判定はコアの標準機能で実装できるが、当プラグインでは「過去xx分内の投稿を対象」設定が可能

JavaScriptによってNucleus以外のCMSにも対応する

JavaScriptによるスクリプトは、構造が似ているNucleus以外のCMSにも対応ができます。

トップ（新着情報表示）ページ<head></head>内javascript

newUp()関数を定義しています。
itemの最終更新日を変数y,m,d、itemidを変数itemとして受け取り、以下の場合には「newマーク」画像を表示します。

（（（新着情報の個別itemに対してcookieが存在しない） || （新着情報の個別itemに設定されたcookieの日付がitemが投稿・更新された日付よりも古い）） && （新着情報の個別itemが投稿・更新された日付から14日以内））

<%if(skintype,index)%>
<%if(category)%>
<title><%category(name)%>:<%blogsetting(name)%></title>
<%else%>
<title><%blogsetting(name)%>:<%blogsetting(desc)%></title>
<script type="text/javascript"></script>
<%endif%>
<%endif%>

<body></body>内スクリプト

新着情報を表示するテンプレートを編集します。
「アイテムの本体」にnewUp()を呼び出すスクリプトを記述します。

nucleusテンプレート編集item

日付フォーマットの記述もお忘れなく。

nucleusテンプレート編集dete

itemページ<head></head>内javascript

itemが訪問者によって閲覧されるたびに”aDay+itemid”というcookie名で閲覧日付（UNIXタイムスタンプ）を書き出します。
cookieの保存期間をここでは90日に設定しました。

<%if(skintype,item)%>
<title><%itemtitle(attribute)%>:<%blogsetting(name)%></title>
<script type="text/javascript"></script>

通常のHTMLページに「newマーク」設置

NucleusなどのCMSは実ファイルが存在しない場合が多いですが、HTMLで構成されたサイトは投稿・更新日時をPHPのfilemtime()関数等で読み出すことが可能です。
以下はサンプルスクリプトとなります。 new.phpなどの名前で保存します。

<？php
clearstatcache();
if(isset($_GET['rec'])){
　$coo="aDay".str_replace(".","_",$_GET['rec']);
　if(!isset($_COOKIE[$coo]) || $_COOKIE[$coo]!=filemtime($_GET['rec'])){
　　setcookie($coo,filemtime($_GET['rec']),time()+60*60*24*90);
　}
}
else if(isset($_GET['doc'])){
　$coo="aDay".str_replace(".","_",$_GET['doc']);
　if((!isset($_COOKIE[$coo]) || $_COOKIE[$coo]!=filemtime($_GET['doc'])) && filemtime($_GET['doc'])>=strtotime("-2 week")){
　　$str="<span style='position:absolute;top:0px;left:0px;'><img src='intafe/new.gif' width='30' height='16' alt='New' /></span>";
　}
　echo $str;
}
？>

トップ（新着情報表示）ページHTMLの<body></body>内

iframeでnew.phpを呼び出し、newマークを表示したい対象リンク先をGET送信します。
結果的にnewマークを表示する条件がクリアされなければ、無地のiframeを表示します。

<a href="seo.htm"><strong>成果報酬型の即効性SEO対策</strong></a>　<iframe src="new.php?doc=seo.htm" width="50" height="32" frameborder="0" align="middle" scrolling="no"></iframe>

個別ページHTMLの<body></body>内

なるべくページの上部にcookie書き出し用のiframeを埋め込みます。
1px×1pxのiframeなので、実際にはサイト訪問者に認識されにくいでしょう。

<iframe src="new.php?rec=seo.htm" width="1" height="1" frameborder="0" scrolling="no"></iframe>

上記一連のスクリプトは以下のサイトにおいて実装しています。