カテゴリ

    Category Order could not understand your category HTML. Please do the following:

    • Disable all plugins except for category order to see if some other plugin is causing the problem. If the problem goes away, re-enable each plugin until you find the incompatible one.
    • Try switching to a different theme, like the WordPress default theme.

    Once you have tried the above steps, email david@coppit.org with the results of these debugging steps. Also include the following information:

    Original HTML:
    <li class="cat-item cat-item-5"><a href="https://www.itpk.jp/?cat=5" title="ITPKからのお知らせ記事です。">お知らせ</a> (3)
    </li>
    <li class="cat-item cat-item-28"><a href="https://www.itpk.jp/?cat=28" title="ITPK のメンバーが、どんなことを考えて仕事をしているのか、を知ってもらえれば幸いです。
    ">こんなこと考えてます</a> (3)
    </li>
    <li class="cat-item cat-item-29"><a href="https://www.itpk.jp/?cat=29" >フリー画像</a> (5)
    </li>
    <li class="cat-item cat-item-6"><a href="https://www.itpk.jp/?cat=6" title="社内向けの研修資料を、業務に支障の内程度に公開します。">研修資料</a> (47)
    <ul class='children'>
    <li class="cat-item cat-item-19"><a href="https://www.itpk.jp/?cat=19" >Tips</a> (26)
    </li>
    <li class="cat-item cat-item-7"><a href="https://www.itpk.jp/?cat=7" title="社内向けのWordPress研修資料を公開します。">WordPress研修</a> (12)
    </li>
    <li class="cat-item cat-item-25"><a href="https://www.itpk.jp/?cat=25" >技術解説</a> (9)
    </li>
    </ul>
    </li>
    <li class="cat-item cat-item-3"><a href="https://www.itpk.jp/?cat=3" title="ITPKで提供している製品とご支援させていただいた一部のお客様の紹介記事です。。">製品紹介と製作実績</a> (33)
    <ul class='children'>
    <li class="cat-item cat-item-33"><a href="https://www.itpk.jp/?cat=33" title="携帯電話を使ったスタンプラリーツールです">スタンプラリーツール(いちご)</a> (1)
    </li>
    <li class="cat-item cat-item-12"><a href="https://www.itpk.jp/?cat=12" >バックアップツール(MoodyBlues)</a> (5)
    </li>
    <li class="cat-item cat-item-8"><a href="https://www.itpk.jp/?cat=8" >作業効率化ツール(Redmine)</a> (6)
    </li>
    <li class="cat-item cat-item-35"><a href="https://www.itpk.jp/?cat=35" >印刷物・イベントグッズ</a> (2)
    </li>
    <li class="cat-item cat-item-4"><a href="https://www.itpk.jp/?cat=4" title="ご支援させていただいた一部のお客様の紹介記事です。">製作実績</a> (15)
    </li>
    <li class="cat-item cat-item-34"><a href="https://www.itpk.jp/?cat=34" title="メールを活用した集客支援ツールです">集客支援ツール(KitCom)</a> (3)
    </li>
    </ul>
    </li>
    <li class="cat-item cat-item-24"><a href="https://www.itpk.jp/?cat=24" >雑記</a> (45)
    </li>

    Processed HTML:
    <li class="cat-item cat-item-5"><a href="https://www.itpk.jp/?cat=5" title="ITPKからのお知らせ記事です。">お知らせ</a> (3)
    </li>
    <li class="cat-item cat-item-28"><a href="https://www.itpk.jp/?cat=28" title="ITPK のメンバーが、どんなことを考えて仕事をしているのか、を知ってもらえれば幸いです。
    ">こんなこと考えてます</a> (3)
    </li>
    <li class="cat-item cat-item-29"><a href="https://www.itpk.jp/?cat=29" >フリー画像</a> (5)
    </li>
    <li class="cat-item cat-item-6"><a href="https://www.itpk.jp/?cat=6" title="社内向けの研修資料を、業務に支障の内程度に公開します。">研修資料</a> (47)

    <li class="cat-item cat-item-19"><a href="https://www.itpk.jp/?cat=19" >Tips</a> (26)
    </li>
    <li class="cat-item cat-item-7"><a href="https://www.itpk.jp/?cat=7" title="社内向けのWordPress研修資料を公開します。">WordPress研修</a> (12)
    </li>
    <li class="cat-item cat-item-25"><a href="https://www.itpk.jp/?cat=25" >技術解説</a> (9)
    </li>

    <li class="cat-item cat-item-3"><a href="https://www.itpk.jp/?cat=3" title="ITPKで提供している製品とご支援させていただいた一部のお客様の紹介記事です。。">製品紹介と製作実績</a> (33)

    <li class="cat-item cat-item-33"><a href="https://www.itpk.jp/?cat=33" title="携帯電話を使ったスタンプラリーツールです">スタンプラリーツール(いちご)</a> (1)
    </li>
    <li class="cat-item cat-item-12"><a href="https://www.itpk.jp/?cat=12" >バックアップツール(MoodyBlues)</a> (5)
    </li>
    <li class="cat-item cat-item-8"><a href="https://www.itpk.jp/?cat=8" >作業効率化ツール(Redmine)</a> (6)
    </li>
    <li class="cat-item cat-item-35"><a href="https://www.itpk.jp/?cat=35" >印刷物・イベントグッズ</a> (2)
    </li>
    <li class="cat-item cat-item-4"><a href="https://www.itpk.jp/?cat=4" title="ご支援させていただいた一部のお客様の紹介記事です。">製作実績</a> (15)
    </li>
    <li class="cat-item cat-item-34"><a href="https://www.itpk.jp/?cat=34" title="メールを活用した集客支援ツールです">集客支援ツール(KitCom)</a> (3)
    </li>

    <li class="cat-item cat-item-24"><a href="https://www.itpk.jp/?cat=24" >雑記</a> (45)
    </li>

    Category pattern:
    /http\:\/\/www\.itpk\.jp\/\?cat\=(\d+)/

    Items:
    Array
    (
        [0] => <li class="cat-item cat-item-5"><a href="https://www.itpk.jp/?cat=5" title="ITPKからのお知らせ記事です。">お知らせ</a> (3) </li>
        [1] => <li class="cat-item cat-item-28"><a href="https://www.itpk.jp/?cat=28" title="ITPK のメンバーが、どんなことを考えて仕事をしているのか、を知ってもらえれば幸いです。 ">こんなこと考えてます</a> (3) </li>
        [2] => <li class="cat-item cat-item-29"><a href="https://www.itpk.jp/?cat=29" >フリー画像</a> (5) </li>
        [3] => <li class="cat-item cat-item-6"><a href="https://www.itpk.jp/?cat=6" title="社内向けの研修資料を、業務に支障の内程度に公開します。">研修資料</a> (47)</li>
        [4] => <li class="cat-item cat-item-19"><a href="https://www.itpk.jp/?cat=19" >Tips</a> (26) </li>
        [5] => <li class="cat-item cat-item-7"><a href="https://www.itpk.jp/?cat=7" title="社内向けのWordPress研修資料を公開します。">WordPress研修</a> (12) </li>
        [6] => <li class="cat-item cat-item-25"><a href="https://www.itpk.jp/?cat=25" >技術解説</a> (9) </li>
        [7] => <li class="cat-item cat-item-3"><a href="https://www.itpk.jp/?cat=3" title="ITPKで提供している製品とご支援させていただいた一部のお客様の紹介記事です。。">製品紹介と製作実績</a> (33)</li>
        [8] => <li class="cat-item cat-item-33"><a href="https://www.itpk.jp/?cat=33" title="携帯電話を使ったスタンプラリーツールです">スタンプラリーツール(いちご)</a> (1) </li>
        [9] => <li class="cat-item cat-item-12"><a href="https://www.itpk.jp/?cat=12" >バックアップツール(MoodyBlues)</a> (5) </li>
        [10] => <li class="cat-item cat-item-8"><a href="https://www.itpk.jp/?cat=8" >作業効率化ツール(Redmine)</a> (6) </li>
        [11] => <li class="cat-item cat-item-35"><a href="https://www.itpk.jp/?cat=35" >印刷物・イベントグッズ</a> (2) </li>
        [12] => <li class="cat-item cat-item-4"><a href="https://www.itpk.jp/?cat=4" title="ご支援させていただいた一部のお客様の紹介記事です。">製作実績</a> (15) </li>
        [13] => <li class="cat-item cat-item-34"><a href="https://www.itpk.jp/?cat=34" title="メールを活用した集客支援ツールです">集客支援ツール(KitCom)</a> (3) </li>
        [14] => <li class="cat-item cat-item-24"><a href="https://www.itpk.jp/?cat=24" >雑記</a> (45) </li>
    )

  • お知らせ (3)
  • こんなこと考えてます (3)
  • フリー画像 (5)
  • 研修資料 (47)
  • 製品紹介と製作実績 (33)
  • 雑記 (45)
月別アーカイブ
検索

とあるお客様からの相談で、「(Webサイトの)画像をクリックしたら、声が流れるようにしたいけど、できるものですかね?」という案件をいただいていました。

その当時は、私たちとは別の業者さんがサイト管理をされていたので、あまり深入りせずに「できますよ。今は私がサイトを触るわけにはいかないので、声の録音方法と、業者さんに送る方法を教えますね」程度の対応に留めておきました。

確かに要求事項はクリアしているけど・・・

数日後、件のお客様から「お陰さまでできました」と連絡があり、そのページを見せてもらいました。

殺風景なプレイヤー

画像をクリックすると、別ページに遷移して殺風景なプレイヤーが表示されて声が流れ始めました。ファイルのダウンロード速度もやや気になる。

参考のためにコードを見てみると、お客さんが送ったwavファイルに a タグでリンクを張っているだけでした。HTML5対応のブラウザならば内蔵プレイヤーで、そうでなければプラグインのプレイヤーで再生されるわけです。

うーん、確かに「画像をクリックしたら声が流れる」という要求はクリアしているし、お客さんも文句はないみたいだけど・・・。本当にこれでいいのか?

今回の要求の意図しているところって、「見ている人が画像(サイト主の顔のイラスト)をクリックしてみたら、声が出てきてびっくり」みたいな遊び心&いたずら心なんじゃないかと思うのですよ。少なくとも、私はそう受け取りました。

それが、ページは遷移しちゃう(声の主のイラストが見えなくなる)わ戻るボタンを押さなきゃいけないわでは、仕掛けの魅力が半減ですよ。

私ならこう作る

というわけで、私ならばページ遷移せずに声を流すようにします。

JavaScript で Audio オブジェクトが使えればそれを、使えなければそれなりのHTMLタグを使えばできるはず。あと、wavファイルのままでは大きすぎるので、MP3にでも変換しておこう。

と、考えて作ってみたら一つ問題が。

FireFox がMP3形式 に対応していない。調べてみると ogg 形式とやらに対応しているとのこと。この ogg ファイル、今回はじめて知りました。

音声ファイルを mp3 と ogg の二種類用意する必要はありますが、とりあえずはできましたよ。

実装例

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script src="http://www.google.com/jsapi"></script>
<script>
  google.load("jquery", "1.6.2");
</script>

<script language="javascript" type="text/javascript">
 
$(function(){
  // クリック
  $('a#click1').click(function(){
    audioObj1.play();
  });
  $('a#click2').click(function(){
    audioObj2.play();
  });
});


var MyAudio = function (src){
  try {
    this.audio = new Audio(src);
  }
  catch(e) {
    this.audio = null;
    this.src = src;
  }

  this.play = function() {
    if(this.audio){
      this.audio.play();
    } else {
      if(jQuery.browser.msie ){
        $('bgsound').remove();
        $('body').append('<bgsound src="' + this.src + '" />');
      } else {
        $('embed').remove();
        $('body').append('<embed src="' + this.src + '"  type="application/x-mplayer2" autostart="true" width="0" height="0" nojava="true" />');
      }
    }
  };
};



var mediaExt;
if(jQuery.browser.mozilla) {
  mediaExt = ".ogg";
} else {
  mediaExt = ".mp3";
}


var audioObj1 = new MyAudio("./01" + mediaExt );
var audioObj2 = new MyAudio("./02" + mediaExt );



</script>
</head>
<body>

<p><a href="javascript:void(0);" id="click1">クリック1</a></p>
<p><a href="javascript:void(0);" id="click2">クリック2</a></p>

</body>
</html>

この例では画像ではないけど。

関係ありそうな記事

コメント