bass-inu's blog

非IT企業Web担当者だった無職の雑記

オープンソースFAQシステム「phpMyFAQ」のカスタマイズ

オープンソースのFAQシステム「phpMyFAQ」
日本語化もされているけど、どうも情報が少ない…
カスタマイズはほとんどの場合テンプレートを編集すれば出来る。
公式:phpMyFAQ homepage - open source FAQ software | welcome
日本語サイト:phpMyFAQ.JP 日本語サイト - FAQシステム構築 by phpMyFAQ


テンプレート編集だけでは出来ない部分のカスタマイズメモ
バージョンは phpMyFAQ 2.7.2

タイムゾーン修正

/config/constants.php
39行目を以下に修正

define('PMF_DATETIME_TIMEZONE_DEFAULT', 'Asia/Tokyo');

検索ページのFAQ閲覧回数の非表示

/inc/Faq.php
444行目

$listItem = sprintf('<li>%s<span id="viewsPerRecord"><br /><span class="little">(%s)</span>%s</span></li>',

611行目

$listItem = sprintf('<li>%s<br /><span class="little">('.$this->plr->GetMsg('plmsgViews',$visits).')</span></li>',

以上2箇所のspanタグを削除する。

$listItem = sprintf('<li>%s</li>',

左サイドにタグクラウドを表示させる

/index.php
443行目あたりから始まる
$main_template_vars = array(
の中に以下を追加

'writeTagCloudHeader' => $PMF_LANG['msg_tags'],
'writeTags'           => $oTag->printHTMLTagsCloud(),

テンプレートファイル index.tpl

<div id="leftContent"></div>

の中に以下を追加

<section>
<header>
<h3>{writeTagCloudHeader}</h3>
</header>
<div id="tagcloud-content">
{writeTags}
</div>
</section>

全ページに検索フォームをつける

どのページからも検索できるようにします。カテゴリーも選べるように。
もっとスマートな方法があるかもしれません…
記事ページはカテゴリー選択がうまくいきませんorz


/index.php
443行目あたりから始まる
$main_template_vars = array(
より上に以下を追加

$faqCategoryHelper = PMF_Helper_Category::getInstance();
$faqCategoryHelper->setCategory($category);
$category->buildTree();

$main_template_vars = array(
の中に以下を追加

'selectCategories'         => $PMF_LANG['msgSelectCategories'],
'allCategories'            => $PMF_LANG['msgAllCategories'],
'printCategoryOptions'     => $faqCategoryHelper->renderCategoryOptions($inputCategory),
'writeSendAdress' => '?'.$sids.'action=search',
'searchBox'       => $PMF_LANG['msgSearch'],
'categoryId'      => ($cat === 0) ? '%' : (int)$cat,
'msgSearch'       => sprintf(
  '<a class="help" href="%sindex.php?action=search">%s</a>',
  $systemUri,
  $PMF_LANG["msgAdvancedSearch"])

テンプレートファイル index.tpl
ヘッダーやフッターやナビゲーション、お好きなところに以下の感じで追加
適宜CSSを編集して下さい。

<div>
<form id="search" action="{writeSendAdress}" method="get">
<input type="hidden" name="action" value="search" />
<input type="search" name="search" id="searchfield" size="30" placeholder="{searchBox} ..." />
<select name="searchcategory" size="1">
<option value="%" selected="selected">{allCategories}</option>
{printCategoryOptions}
</select>
<input type="submit" name="submit" value="{searchBox}" />
</form>
</div>

検索ページでカテゴリー選択ボックスの中身が二重になってしまうので、
/search.php
117行目を削除

$category->buildTree();

拡張子.htmlで携帯XHTML対応&PHP動作させる (ロリポップ用)

ロリポップは自由にphp.iniを設定できないので、以下の方法では無理だった。
Google Analytics携帯電話向けコード(PHP)をXHTMLに埋め込むメモ - bass-inuのひとりごとメモ


■やりたいこと

  • 携帯3キャリア対応のXHTMLページで拡張子は.html
  • PHPを動作させる


まず.htaccess
.htmlでphpを動かせるように設定する。
ロリポップの場合)

AddHandler php5.2-script .html

(その他)

AddType x-httpd-php .html


各HTMLの最初に以下を記述。

<?php header("Content-type: application/xhtml+xml");?>
<?php echo '<?xml version="1.0" encoding="Shift_JIS" ?>'."\n";?>


あとはいつも通りに携帯ページを作成。

<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=Shift_JIS" />
<title>タイトル</title>
</head>
<body>
内容
</body>
</html>

これでOKです。

Google Analytics携帯電話向けコード(PHP)をXHTMLに埋め込むメモ

アクセス解析Google Analyticsが携帯に対応したので、さっそく全サイトにコードを埋め込んだ。

その中で、XHTMLで構築しているページに使用するときにつまづいたのでメモ。


■携帯サイトの環境

  • 3キャリア対応のXHTMLページ
  • 拡張子は.html (.htaccecss使用)

■サーバーの環境

  • php.iniを編集することができる

■やりたいこと


まずは、php.iniの設定をする。

私の場合は既存のphp.iniをコピーし、以下の2箇所を修正。
モバイルサイトのディレクトリに修正したphp.iniを適用するよう設定した。

short_open_tag = Off

default_mimetype = "application/xhtml+xml"

short_open_tag をOffにすることでPHPの省略形を使えなくする。
XHTML内で記述しているxml宣言

<?xml version="1.0" encoding="Shift_JIS"?>

がphpタグとみなされないようにするため。


次は.htaccessの編集。

.htmlでphpを動かせるように設定する。

AddType x-httpd-php .html

以下は削除する。

AddType application/xhtml+xml .html


これでほぼ完了。
次はGoogle Analyticsからアクセス解析のトラッキングコードを取得する。
説明に従って、ga.phpをダウンロードしてサーバーにアップ。


あとは各ページにトラッキングコードを貼付けるだけ。

ですが、先程php.iniをいじったので、トラッキングコードを少し修正する必要がある。

修正するのはタグの直前に貼り付ける以下のコード

<?php
  $googleAnalyticsImageUrl = googleAnalyticsGetImageUrl();
?>
<img src="<?= $googleAnalyticsImageUrl ?>" />

これを、

<?php
  $googleAnalyticsImageUrl = googleAnalyticsGetImageUrl();
?>
<img src="<?php echo $googleAnalyticsImageUrl ?>" />

に。

以上で完了!


動かない場合、トラッキングコードの以下の部分

  $GA_PIXEL = "ga.php";

「ga.php」の場所がちゃんと指定されているかチェック。

「mobile」ディレクトリに置いたならこうしとくとラク。

  $GA_PIXEL = "/mobile/ga.php";


携帯用ページのアクセス解析は初めて導入したのですが、思っていた以上に携帯からのアクセスがあったことがわかってビックリでした。

Google AJAX Feed API キャッシュ騙し 〜1時間ごとver.〜

Google AJAX Feed APIでRSS複数表示 - bass-inuのひとりごとメモの追記。


Google AJAX Feed APIRSSを表示させていたけど、ブログを更新しても反映されていない…

どうやらGoogle側でのキャッシュが関係しているらしい。


こちらに解決法が書いてありました。URLのあとにクエリを追加して強制的にキャッシュをリフレッシュする、と。
404 Not Found


ただ上記サイトの方法だと、
ミリ秒単位でクエリが変わる=読み込むたびにキャッシュをリフレッシュする。
となる。


できれば1時間ごとにキャッシュをリフレッシュできたらいいなぁ。
と思ってやってみた。


1時間ごとに変わるクエリ用の数字を作る。

var mynow = new Date();
var q = mynow.getMonth(); //月を取得
var q2 = mynow.getDate(); //日にちを取得
var q3 = mynow.getHours(); //時間を取得
var query = q+"0"+q2+"0"+q3; //月日時間を合体。なんとなく間に0を追加。


RSSのURLのあとにクエリを追加する。

var feedurl = new Array("RSS1"+"&"+query,"RSS2"+"&"+query);


これでできましたー。

Google AJAX Feed APIでRSS複数表示

JavaScriptだけでフィードを取得&表示できる。Google AJAX Feed API
複数のフィードを表示をするには、FeedControlクラスを使えば簡単ですが、表示内容を細かくいじることができない。。
見た目はCSSでカスタマイズ可能。公式参照。


■やりたいこと

  • 複数のフィードを表示
  • 日付は「年.月.日」で表示
  • 1週間以内の記事には日付の横に「NEWマーク」を表示
  • 記事の概要表示

APIキーを取得したら準備完了。

表示サンプル画像


head内

<script type="text/javascript"
 src="http://www.google.com/jsapi?key=(APIキー)"></script>
<script type="text/javascript" src="feed.js"></script>


feed.js

var limit = 7 * 24 * 60 * 60 * 1000; //7日
google.load("feeds", "1");
function initialize() {
var now = (new Date()).getTime();
var container = document.getElementById("feed");
container.innerHTML = '';
var feedurl = new Array("RSS1","RSS2","RSS3"); //RSSのURL
  for (n = 0; n < feedurl.length;n++ ) {
    var feed = new google.feeds.Feed(feedurl[n]);
    feed.setNumEntries(3); //記事を3件表示
    feed.load(function(result) {
      if (!result.error) {
           html ="<h4>"+result.feed.title+"<\/h4><dl>"; //タイトル
           for (i = 0; i < result.feed.entries.length; i++) {
  var entry = result.feed.entries[i];
  var entdate = new Date(entry.publishedDate).getTime();
  var newmark = '';

if (now >= entdate && now <= (entdate + limit)) {
	newmark = '<span style="color:red;">new!<\/span>';
//「NEWマーク」のタグ
}
 html += "<dt><a href='"+entry.link+"' target='_blank'>"+entry.title+"<\/a> ["+changeDate(entry.publishedDate)+"] "+newmark+"<\/dt>";
//記事タイトル [日付] 7日以内の記事ならNEWマーク
 html += "<dd>"+entry.contentSnippet+"<\/dd>"; //概要
             }
 html += "<\/dl>";
container.innerHTML += html;
      }
    });
  }
}
//日付表示変更
function changeDate(str){
  var myDate=new Date(str);
  var YY=myDate.getFullYear();
  var MM=myDate.getMonth()+1;
  if(MM<10){MM="0"+MM;}
  var DD=myDate.getDate();
  if(DD<10){DD="0"+DD;}
  var date=YY+"."+MM+"."+DD;
  return date;
 }  
google.setOnLoadCallback(initialize);


body内の表示させたい箇所に

<div id="feed">Loading</div>


JavaScriptは詳しくないので、もしかしたら間違ってたり、無駄なコードがあるかもしれません(^▽^;)
今のところ問題なく表示されていますが念のため…。


■参考にさせていただいたサイト
Google AJAX Feed API入門
Movable Type 備忘録 - Google AJAX Feed API
RSS取得(Google AJAX Feed API使用) - 麦日記 麦とすず