ダリの雑記：WEBプログラム版

行間をあけるために、改行タグ（<br />）を連続で行ってしまうことがあります。
これはW3CのHTML文法的には、評価できるものではありません。
通常、段落間の行間を空ける場合は、段落タグ（<p>）でくくり、その段落タグ間をスタイルシートで空けるという方法をよく用います。
例）
<p>段落１の文章です。ここで述べることは～～～</p>
<p>段落２の文章です。～</p>

しかしながらリッチテキストエディタ（ワード感覚でテキストを入力できるフォームのこと）の設定によっては、Enterキーを押したときに、勝手にそれまでの段落を段落タグ（<p>）でくくってくれるものと、改行タグ（<br />）を入れて改行するだけのものがあり、ライブドアブログでは後者となります。
そうなると、わざわざソースモードに切り替えてpタグでくくりなおすという作業は非常に面倒なので、改行を連続で行うことにより、段落間の行間を空けるはめとなります。

さて、一番始めに改行タグの連続は、文法的に正しくないと書きました。
が、実は減点数は１点なので、ブログの場合はもう割り切って放置するのがよいのではないでしょうか。

いや、しかし、と納得の行かない方。
一応ファイヤーフォックスのアドオンと、javascriptを組み合わせて何とかなるようです。
http://www.j1nn.com/archives/51643844.html　（PictorialConnectさん）

ちなみにこちらで紹介されていた、あらかじめpタグを入れておくという方法
http://syoujiki.doorblog.jp/archives/1280725.html　（正直堂のブログ-ANNEX跡地さん）
なんかうまくいかない・・・
バージョンが違うのかな？

あ、ちなみに以下に述べる手法だけは、くれぐれもやめてください。
「要するに、改行が連続していなければ良いんだろ？」と考えてしまい、
例）
段落１です～<br />
　<br />
段落２です～

というように、わざと「スペース」を入れて改行する、ということです。
W3Cのチェッカーだって馬鹿ではありません。
これをすると、減点数が一気に７点にまで膨れ上がります。
ご注意ください。

（あ、だったら透明gifの画像タグを入れるという手も！）
（そんなことするぐらいなら、ソースモードでpタグ入れるわ！）

■突然ですが追記です
以下で長々と述べるコメントとトラックバックのセパレート方法ですが、「Trackping Separatorプラグイン」で何とかなるようです。
参考サイト　（日々是好日さん）

コメント・トラックバックの別々表示方法パート２です。
ただしこの記事に関しては、「プラグイン検索をしてもあまりピンとこないし、時間もないからもう無理やり作ってしまえ！」という考えの元作ったため、利用価値はあまり無いかもしれません。
覚書ということで^^;

で、その無理やりな方法とは、

データベースから$wpdb->get_results使って取得する

です。
困った時のSQL作戦というわけです。

以下やり方

まずはコメント

<?php
    $query = "SELECT * FROM wp_comments 
    WHERE comment_post_ID = '".get_the_ID()."' 
    AND comment_approved = '1' 
    AND comment_type = ''";
    $get_comments = $wpdb->get_results($query, "ARRAY_A");
    if(!empty($get_comments)):
        foreach($get_comments as $comment_value):
?>
<div>
    <p><?php echo $comment_value["comment_author"]; ?> | <a href="<?php echo $comment_value["comment_author_url"]; ?>">URL</a> | <?php echo $comment_value["comment_date"]; ?></p>
    <p><?php echo $comment_value["comment_content"]; ?></p>
</div>
<?php
        endforeach;
    endif;
?>

データベースの構造についてはこちらをご参照ください。　参考サイト

■SQLの条件になっているフィールド名について
・comment_post_ID：記事のID。get_the_ID()で呼び出しましょう。
・comment_approved：「0」承認待ち、「1」承認済み、「spam」スパム
・comment_type：「trackback」トラックバック、「pingback」ピンバック、コメントは値なし（つまり空）

取得したデータは、「wp_comments」テーブルのフィールド名がキーとなって配列に格納されています。あとはforeachでループして、配列からデータを呼び出せば完成です。

■呼び出している配列のキーについて
・comment_author_url：コメント投稿者のURL
・comment_author：コメント投稿者名
・comment_date：コメント投稿日時
・comment_content：コメントの内容

これで

ダリ | URL | 2010-07-15 19:02:14
この記事については、ちょっと無理やりな方法でコメント取り出してます。使えなくても勘弁ね。

という風なコメント記事が一覧を表示できます。

つづいてトラックバック

<?php
    $query = "SELECT * FROM wp_comments 
    WHERE comment_post_ID = '".get_the_ID()."' 
    AND comment_approved = '1' 
    AND comment_type = 'trackback'";
    $get_comments = $wpdb->get_results($query, "ARRAY_A");
    if(!empty($get_comments)):
        foreach($get_comments as $comment_value):
?>

<div>
    <p><a href="<?php echo $comment_value["comment_author_url"]; ?>"><?php echo $comment_value["comment_author"]; ?></a> | <?php echo $comment_value["comment_date"]; ?></p>
    <p><?php echo $comment_value["comment_content"]; ?></p>
</div>

<?php
        endforeach;
    endif;
?>

コメントのときとほぼ同じです。

これで

ダリの雑記 | 2010-07-15 19:02:14
コメントとトラックバック...この記事については、ちょっと無理やりな方法でトラックバックを取り出してます。使えなくても勘弁ね。

という風なトラックバック記事が一覧表示がされます。

とりあえずはこちらで何とか機能しますが、たぶん調べてみればもっと便利なプラグインが存在するでしょうから、そちらをご利用になることをお勧めします。

WordPressはPHPで好きに改造できるので気に入ってるんですが、標準の設定が「なぜこんな設定なんだ？」と不思議になることがよくあります。
その代表的なものに

コメント・トラックバックが一緒くたになっている。

便利なこともあるんでしょうが、自分はこれまでデフォルトで使用したことがありません。

今回とある案件でブログを設置していたのですが、記事の内容の下に

Comment(3) | Trackback(2)

という記述をしなければならなくなりました。まあブログではよく目にする記述ですね。要するにその記事に何件コメント・トラックバックがあるかというものです。
さて、コメントの数を取得する関数はwordpressでもデフォルトでありますが、その関数

comments_number()　参考サイト

では、先にも記述したように「コメント」と「トラックバック」が一緒くたになっているため、この関数で取得する数値は「コメント数＋トラックバック数+ピンバック数」になってしまいます。

なんでこんな仕様やねん！

引数で別々に取得できるのかな～と思って調べるも、そんなものは無く、どうすっかな～と思い調べてみると、やはり大量に出てきました。

Trackping Separatorプラグイン

今回は「MAKIZOU.COM」さんのサイトを参考に設置いたしました。
「Trackping Separatorプラグイン」のダウンロードサイトはこちら

プラグインをダウンロード後、解凍してフォルダごと「wp-content/plugins/」へアップロード。
wordpressの「プラグイン」設定で「有効化」すれば、このプラグインを使用できるようになります。

テンプレートの記述方法は

Comment(<?php comments_popup_link('0', '1', '%'); ?>) |
Trackback(<?php echo trackpings('count','trackback'); ?>)

※上記の記述ではリンクが考慮されていなかったので修正しました。

<?php comments_popup_link('Comment(0)', 'Comment(1)', 'Comment(%)'); ?> |
<a href="<?php the_permalink() ?>#trackbacks" >Trackback(<?php echo trackpings('count'); ?>)</a>

でＯＫ！
簡単ですね。

■追記
今日気づいたんですが、「comments_popup_link()」はプラグインの関数ではなくデフォルトで存在する関数のようです。（参考サイト）
上記の記述どおり、コメント数つきのリンクを生成できます。
しかし、トラックバックについての関数はやはりデフォルトでは存在しないので、このプラグインを使用する必要があります。

wordpressのウィジェットは簡単に要素を追加・削除できるので便利なんですが、スタイルシートによってはウィジェットでは対応できない場合があります（要素間にタグを入れたいなど）
そこでよく使用するウィジェットをwordpressのテンプレートタグで代用して使用する方法を記述します。

１．最近の投稿

例１）wp_get_archives関数による方法。
wp_get_archives('type=postbypost&limit=10&format=html');　参考サイト

・typeは「最近の投稿」の場合は、「postbypost」にしてください。
・limitの数字で件数を指定できます。
・formatの設定によってリスト表示やプルダウン表示になります。

例２）get_posts関数にてデータベースから引っ張ってくる方法。
少し長くなりますが、細かくHTMLタグを設定できます。

<?php $myposts = get_posts('numberposts=10&orderby=post_date');
foreach($myposts as $post) : ?>

<p><?php echo date("Y年m月d日", strtotime($post->post_date)); ?> : 
<a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></p>

<?php endforeach; ?>

・get_posts()：データベースからデータを取得する関数。
　numberpostsで件数を取得、orderbyで並び順を指定できます。
・$post->post_date：投稿日時を取得
・the_permalink()：記事へのリンクを取得
・the_title()：記事タイトルを取得

get_postsに関数する参考サイト

２．カレンダー

get_calendar();　参考サイト

３．カテゴリー

wp_list_categories();　参考サイト

※デフォルトでは、「カテゴリー」という余計なタイトルが表示されるので注意しましょう。解決方法

こういう方法もあります→wordpressでカテゴリー一覧を表示する方法２

４．月別アーカイブ

limitで表示件数を指定できます。
wp_get_archives('type=monthly&limit=12&format=html');　参考サイト

・typeは「月別アーカイブ」の場合は、「monthly」にしてください。
・limitの数字で件数を指定できます。
・formatの設定によってリスト表示やプルダウン表示になります。

※wp_get_archivesは「type」によって、最新の投稿や月別アーカイブに切り替えられます。
各関数のさらに細かい引数設定については、それぞれの「参考サイト」を参照してください。

ウィジェットを使用せずに、カテゴリ一覧を表示させたい場合は

wp_list_categories()

を使用します。

例）

<ul>
      <?php wp_list_categories(); ?>
</ul>

しかしデフォルトで使用すると、

・カテゴリー
　　・アニメ
　　・プログラム
　　・HTML

という風に、なぜか「カテゴリー」という文字が先頭に来てしまいます。
（「アニメ」「プログラム」「HTML」はそれぞれトップレベルカテゴリです。）
この「カテゴリー」という文字、非常に邪魔！

これを消すには、引数に「title_li=」を渡します。

例）

<ul>
      <?php wp_list_categories('title_li='); ?>
</ul>

これで
・アニメ
・プログラム
・HTML

という風に表示されます。
要はカテゴリのタイトルを「何も設定しない」ようにするわけですね。

wordpressでカテゴリー一覧を表示する方法２へ

■追記

その２ができました。

Bingのトップページのギミックが面白いなぁと思い、なんとかできないかと模索中。
たぶんsetTimeoutかsetInterval使ってるんだと思うけど、割り込み処理のやり方がいまいちわからない。
とりあえずテストバージョン

■コード

<script>
window.onload = function(){
//初期化
browser_type = browser();
if(browser_type == "MSIE"){
document.getElementById("fade01").style.filter = "alpha(opacity=0)";
document.getElementById("fade02").style.filter = "alpha(opacity=0)";
document.getElementById("fade03").style.filter = "alpha(opacity=0)";
document.getElementById("fade04").style.filter = "alpha(opacity=0)";
}else if(browser_type == "Firefox"){
document.getElementById("fade01").style.MozOpacity = 0;
document.getElementById("fade02").style.MozOpacity = 0;
document.getElementById("fade03").style.MozOpacity = 0;
document.getElementById("fade04").style.MozOpacity = 0;
}else{
document.getElementById("fade01").style.opacity = 0;
document.getElementById("fade02").style.opacity = 0;
document.getElementById("fade03").style.opacity = 0;
document.getElementById("fade04").style.opacity = 0;
}

//オートフェード
setTimeout("fadeIn('fade01')",1000);
setTimeout("fadeOut('fade01')",2000);
setTimeout("fadeIn('fade02')",1000);
setTimeout("fadeOut('fade02')",2100);
setTimeout("fadeIn('fade03')",1000);
setTimeout("fadeOut('fade03')",2200);
setTimeout("fadeIn('fade04')",1000);
setTimeout("fadeOut('fade04')",2300);
}

//フェードイン
function fadeIn(id_name){
fadeAction(id_name, "plus", 0);
}

//フェードアウト
function fadeOut(id_name){
fadeAction(id_name, "minus", 100);
}

//フェード関数
function fadeAction(id_name, vector, set_op){
set_op = parseInt(set_op);
elem = document.getElementById(id_name);
browser_type = browser();
if(browser_type == "MSIE"){
elem.style.filter = "alpha(opacity="+set_op+")";
}else if(browser_type == "Firefox"){
elem.style.MozOpacity = set_op / 100;
}else{
elem.style.opacity = set_op / 100;
}
if(vector == "minus"){
set_op -= 20;
if(set_op < 0) return;
setTimeout("fadeAction('"+id_name+"', 'minus', '"+set_op+"')",20);
}else if(vector == "plus"){
set_op += 20;
if(set_op >= 100) return;
setTimeout("fadeAction('"+id_name+"', 'plus', '"+set_op+"')",20);
}
}

//ブラウザ判別
function browser(){
if(navigator.userAgent.indexOf("Opera") != -1){
type = "Opera";
}else if(navigator.userAgent.indexOf("MSIE") != -1){
type = "MSIE";
}else if(navigator.userAgent.indexOf("Firefox") != -1){
type = "Firefox";
}else if(navigator.userAgent.indexOf("Netscape") != -1){
type = "Netscape";
}else if(navigator.userAgent.indexOf("Safari") != -1){
type = "Safari";
}else{
type = "none";
}
return type;
}
</script>

<p id="fade01" style="width:100px; cursor:default;" onmouseover="fadeIn('fade01');" onmouseout="fadeOut('fade01');">フェード１</p>
<p id="fade02" style="width:100px; cursor:default;" onmouseover="fadeIn('fade02');" onmouseout="fadeOut('fade02');">フェード２</p>
<p id="fade03" style="width:100px; cursor:default;" onmouseover="fadeIn('fade03');" onmouseout="fadeOut('fade03');">フェード３</p>
<p id="fade04" style="width:100px; cursor:default;" onmouseover="fadeIn('fade04');" onmouseout="fadeOut('fade04');">フェード４</p>

注意点として、フェードさせるブロックにはwidthを指定していないと、IEにてopacityが効きません。

サンプルはこちら　[新しいウィンドウで開く]

※以後サンプルはさくらインターネットの自分用サーバにアップします。

先日、クライアントさんから「このシステムってクラウドですか？」と聞かれました。
確かにウェブアプリケーションではあるけど、なんとなく自分のイメージとは違っていたため「いや～、違うんじゃないですかね？」と自分で組んだシステムにもかかわらずあいまいな返事。
あとで先輩に聞いたところ、やっぱり違うらしい。
「どっちかって言うと、ASPとかSaaSかな？」とのお答え。

・・・うん、どう違うのかよく分からん・・・

ウェブ屋がクラウドも知らんというのも問題なのでいろいろと調べてみました。
もちろんGoogleで。

いろいろと調べた結果をざっくりと言うと以下のようになります。

■SaaS：Software as a Service
自分のPCにソフトウェアをインストールして使用するのではなく、ネット経由でソフトウェア機能を利用できるようにしたサービス形態のこと。
「Googleドキュメント」なんかがこれにあたるのかな？
ちなみにASPとは料金形態などの差異はあるものの、あまり本質的に変わらないそうです。

■クラウド
アプリケーションどころか、ハードウェアなどのコンピュータ機能までネット経由で提供するサービス。
極論を言えば、手持ちのPCはキーボードとネットワークに接続できる機能が備わってさえいれば良く、あとのPCとしての機能やアプリケーションはネット上に存在する、という考えで構築されているものらしい。
もちろん、ホントに１台のアプリが入っているパソコンがネットで接続して、それを利用する、というわけではないです。当たり前ですが。

例えば
Ａ社：ハードウェアのサービスを行ってますよ～
Ｂ社：うちは計算機アプリケーションを提供しております。
Ｃ社：ドキュメントアプリもいる？
という会社がそれぞれあるとします。

当然ながらアプリをSaaSで提供している会社（Ｂ社・Ｃ社）は、クライアントへサービスを提供する時点で、そのアプリを処理する能力を持ち合わせていなくてはなりません。（つまり計算などの処理はサーバサイドですべて行われ、クライアントのPCは結果を受け取って表示するだけ。）
しかし、もしB社の計算機アプリへアクセスするユーザが多すぎる！となったら？

・負荷でまともに処理が出来ない！
・サーバ増築しようにも時間が無い！
・そうだＡ社のハードウェア機能をサーバとして使わせてもらおう！
・Ｂ社がＡ社と契約してアプリケーションを機能させるに足るスペックを補う。

というような流れでＡ社とＢ社がネットワーク経由でつながることになります。（C社も同様）

つまり

   ――――――Ｂ社（計算機アプリ提供）――――クライアント
　｜
Ａ社（ハード提供）
　｜
   ―――――Ｃ社（ドキュメントアプリ提供）――――クライアント

てな感じですね。
もちろん、この図は単純なもので、実際はいろいろとサービス提供のネットワークが広がっているものと考えられます。
ただ最終的なクライアントは、Ａ社とＢ社（またはＣ社）の契約など知る必要も無く、それぞれ必要なアプリを提供しているベンダーと契約すれば良いというわけです。

参考サイト
・http://www.asp-edita.jp/doda/one/doda4075_385.html　
　（エンジニアが作る最新ITブログ by DODAさん）
・http://www.itmedia.co.jp/enterprise/articles/0810/27/news008.html　
　（ITmedia エンタープライズさん）
・http://www.atmarkit.co.jp/im/cop/special/fivemin/saas/00.html　
　（@IT情報マネージメントさん）
・http://www.newton-consulting.co.jp/bcmnavi/glossary/cloud.htm　
　（BCM用語集さん）
・Wikipedia etc...

システムを作っている時、機能についての説明を表示したい。でもページに表示するとうっとおしい。
てなことで、「ヘルプ」にマウスオーバーした時にバルーンを表示させる方法を覚書ます。

一番簡単なのはこちら→Balloon tooltip

ただ、これだと画像を入れたり、あまり多くの文字を入れられなさそうな感じがしたので作ってみました。
要はあらかじめ「display:none;」にしてあるブロックをマウスオーバーで表示させればよいわけです。
プラスして今回はカーソルにバルーンが付いてくるようにしました。

<script>

//ブラウザ判定用
function browser(){
    if(navigator.userAgent.indexOf("Opera") != -1){
        type = "Opera";
    }else if(navigator.userAgent.indexOf("MSIE")!=-1 
    && navigator.userAgent.indexOf("Trident/4.0")!=-1){
        type = "MSIE8";
    }else if(navigator.userAgent.indexOf("MSIE") != -1){
        type = "MSIE";
    }else if(navigator.userAgent.indexOf("Firefox") != -1){
        type = "Firefox";
    }else if(navigator.userAgent.indexOf("Netscape") != -1){
        type = "Netscape";
    }else if(navigator.userAgent.indexOf("Safari") != -1){
        type = "Safari";
    }else{
        type = "none"; 
    }
    return type;
}

//バルーンブロック表示用
function balloon_showblock(Target, TopPos, LeftPos){
    if(browser() == "MSIE"){
        document.onmousemove = iMouseIE;
    }else if(browser() == "MSIE8"){
        document.onmousemove = iMouseIE8;
    }else{
        document.onmousemove = iMouseFirefox;
    }

    function iMouseFirefox(evt){
        Xpos = evt.pageX-LeftPos;
        Ypos = evt.pageY-TopPos;
        document.getElementById(Target).style.top = Ypos+"px";
        document.getElementById(Target).style.left = Xpos+"px";
    }

    function iMouseIE(){
        Xpos = event.x+(document.body.scrollLeft || document.documentElement.scrollLeft)-LeftPos;
        Ypos = event.y+(document.body.scrollTop || document.documentElement.scrollTop)-TopPos;
        document.getElementById(Target).style.top = Ypos+"px";
        document.getElementById(Target).style.left = Xpos+"px";
    }

    function iMouseIE8(){
        Xpos = event.x-LeftPos;
        Ypos = event.y-TopPos;
        document.getElementById(Target).style.top = Ypos+"px";
        document.getElementById(Target).style.left = Xpos+"px";
    }

    document.getElementById(Target).style.display = "";
}

//バルーンブロック非表示用
function hide_block(Target){
    document.getElementById(Target).style.display = "none";
}

</script>

<div id="hoge5" style="position:absolute; display:none;">Javascriptでバルーン表示します。</div>

<p><a href="javascript:void(0)" onmouseover="balloon_showblock('hoge5', 30, 30)" onmouseout="hide_block('hoge5')">ヘルプ</a></p>

Javascriptの関数から説明いたしますと
・function browser()
　ブラウザ判定用。
　アクセスしてきたブラウザがIE、FF、Opera、Netscape、Safariのどれか判定します。

・function balloon_showblock(Target, TopPos, LeftPos)
　バルーンを表示に切り替え、カーソルに追随させる。以下引数の説明。
　Target：バルーンとなるブロックのID。
　TopPos：上下の調整（px）。
　LeftPos：左右の調整（px）。

・function hide_block(Target)
 バルーンを非表示に切り換える。
 Target：バルーンとなるブロックのID。

ここでなぜ、わざわざブラウザを判定しなければならないかと言うと、IEとFFでは位置の取得方法が違うからです。今回はカーソルにバルーンが付いてくる設定にしてますのでブラウザによってプログラムを切り替える必要がありました。

バルーンとなるブロックには「Javascriptでバルーン表示します。」という説明を入れ、idを「hoge5」にしました。またあらかじめ非表示にするためstyleに「display:none;」を、さらに他のレイアウトに影響を与えなくするため「position:absolute;」を記述しています。

バルーンの表示スイッチとなる「ヘルプ」のリンクタグには
・onmouseover="balloon_showblock('hoge5', -30, -30)"
・onmouseout="hide_block('hoge5')"
を記述します。

■サンプル　[新しいウィンドウで開く]　※サンプルは上記のソースに少し手を加えています。

PHPにはMD5と呼ばれるハッシュ関数があります。

md5("変数");

という風に簡単に使用できるので何かと便利なのですが、単純な文字列をハッシュ化すると見破られることがあります。
なにも解読するわけではありません。
その見破る方法とは、なんと

Google

です。
たとえば数字の「１」。これをmd5でハッシュ化すると「c4ca4238a0b923820dcc509a6f75849b」となります。
この「c4ca4238a0b923820dcc509a6f75849b」をグーグルで検索すると、なんと40万件以上もヒットし、すぐに元の文字が「1」であることがわかります。

他にも
・admin　（21232f297a57a5a743894a0e4a801fc3）
・staff　（1253208465b1efa876f982d8a9e73eef）
・user　（ee11cbb19052e40b07aac0ca060c23ee）
・writer　（a82feee3cc1af8bcabda979e8775ef0f）
など、単純な単語は引っかかってしまうので、いろいろと文字を付け足すなどして手を加えた後ハッシュ化しましょう。
あと、全角日本語などもヒットしにくくなるようです。

参考サイト
http://d.hatena.ne.jp/shunsuk/20071122/1195704611　（「このブログは証明できない。」さん）

単純ですが、よく使用するプログラムなので。
要するに、javascriptによるstyleの切り替えです。

<script>
function show_block(){
   if(document.getElementById("hoge").style.display == ""){
      document.getElementById("hoge").style.display = "none";
   }else{
      document.getElementById("hoge").style.display = "";
   }
}
</script>

<p><a href="javascript:void(0)" onclick="show_block();">表示切替</a></p>
<div id="hoge" style="display:none;">こっち見んな！</div>

１．id="hoge"は、あらかじめdisplay:none;で、非表示にしておく。
２．show_block関数では、id="hoge"のdisplayが空（表示モード）ならばnone（非表示モード）に、noneならその逆という風にする。

■サンプル　[新しいウィンドウで開く]