連載第90回
2014年7月27日
WordPress 3.9 のPlaylist(プレイリスト)が表示されない

 前回の対処で必要なプラグインをWordPressから直接インストールないしアップデート可能になりました。ただ、個人的にはプラグインをアレもコレも無闇矢鱈とインストールしてしまうような事はせず、必要最小限のところで抑えたいと思っています。
 というわけで、これまで当サイトの「音楽とか」では、作成途中の音源を「Audio Player」というFlashを使ったWordPressプラグインで再生するようにしてきましたが(←)、flfl.meで使用しているWordPress 3.9.1では標準で音声ファイルや動画ファイルのプレイリスト再生機能が追加されているようなので(参考記事によると、3.6から音声ファイルの埋め込みに対応したみたい)、是非それを使ってみたいと思った次第。今回はまず、ローカルのMAMP上で実験することにしました。

外部サイト参考記事
[WordPress] 音声ファイルの再生(プログラミング生放送)

プレイリストの作成手順

 まずテスト用の投稿記事を新規作成し、「メディアを追加」ボタンをクリックして、用意しておいたサンプルのmp3音声ファイルをアップロードしました。下図に見える「Night-Head-1996-Original.mp3」がそのサンプル音源で、左横に見える画像は、iTunesでアートワーク画像に設定していたものが分離され、同時にアップロードされたものになります(アップロード時点では表示されないけれど、保存確定などした後に表示されるようになるみたい)。
 アップロードした時点で「投稿に挿入」ボタンは押さず(これはおそらく、上の参考記事にある単体プレーヤーの埋め込みになるのでは?と予想)、左メニューにある「音声プレイリストを作成」をクリック。複数の音源があるのなら、それらを全て選択しておいてからクリックします(↓)。

 選択した音声ファイルについて、ウィンドウ右側で必要に応じ、表示情報詳細を記入します。タイトルとかキャプションとか。決定したら「プレイリストを新規作成」をクリック(↓)。

 投稿画面に戻ると、IDに紐付いたプレイリストのショートコードが挿入されています。

しかし、プレイリストが表示されない

 さて、どのようにブラウザで表示されるのか、またiOS機器への対応はどうなのか、確認したいことはまだ山ほどあります。早速投稿記事のプレビューをクリックしてみたところ…全くの白紙のページが表示されました。
 いや、記事タイトルやプレイリスト以外の仮テキストなどはいつも通り普通に表示されるのだけれど、肝心のプレイリストだけがスッポリ抜け落ちているのです。ソースを覗いて見ると、関連するコードは埋め込まれているのですが、表示されないのであるよ。

 どうしてこうも不具合が連発するのか。最近すんなりうまく事が進んだことがない。今回の引っ越しでも、この音声ファイルの埋め込みが出来無ければ、全くモチベーションが維持出来ないではないか。一体どういうことだ。

 しばらく考えて、普段いつも「テキスト(HTML)」でブログ投稿記事を編集しているところを、試しに「ビジュアル」編集タブに切り替えてみたら…。

 いよいよワケが分からなくなった。一体この引っ越しメモシリーズで、何度このフレーズを書いた事か。プレビューやローカル内での公開では白紙なのに、ビジュアル編集中画面では意図通りに表示されている。しかもちゃんと音声ファイルが再生出来るし、音量のコントロールも問題ないのです。

試行錯誤がまた、始まる…(もう勘弁)

 1つトラブルを解決したと思ったら、また新たな不具合が行く手を塞ぐ。しかも今回は、制作日記の主旨に直球の悪影響を与える、最も致命傷的な音声ファイル再生に関連する不具合。そして今回もまた、あれこれググってみても同じ症状に悩まされている人が全く見つからないという八方塞がりな状況、再び試行錯誤の長期戦が始まりそうです。

 これから全くアテ無しの試行錯誤を始めるにしても、無駄な工数は減らしたいので、まずは何より現状整理が重要です。同時に、疑われる点も挙げてみました。

  ググっても同じ症状で困っている人が見当たらない。
  サーバーでの不具合ではなく、それ以前のローカルで起きている。
  必要なファイル(phpやcss等)が欠損しているのではないか?
  他のメディア・プレーヤーで代替してはどうか?

 いつものように素人考えで原因を推測してみるに、当初、以前のSVG画像フォーマットの時のような「そもそもmp3ファイル・フォーマットに対応していないんじゃないか疑惑」が思い浮かんだのですが、それはすぐ的外れであることが分かりました。サーバーでの不具合ではなく、ローカルで症状が発生しているからです。しかも、ビジュアル編集画面であれば、ちゃんとプレイリストが表示されているのです。

 次に、ググっても同志が見当たらない件では、先日の「HTTP Error」の時と同様、自分が手を加えた事による不具合の発生である可能性が高い気配がします。「HTTP Error」では自分でカスタマイズしたiptables設定に自ら引っ掛かっていたワケだけれど、今回もそれに相当するような大きなカスタマイズは、しかし一体、何処かでやってたっけ…?

 そこでまず、リスト3番目のファイル欠損疑惑の検証のため、それを手っ取り早く確認するのなら「テーマを切り替えてみるのが早いのではないか」と考えました。上述の「独自にテーマをカスタマイズしていることが原因ではないか」という疑惑も同時に検証できそうです。

 ダッシュボードからテーマをこれまでのオリジナル「FLFLテーマ」→「Twenty Fourteen」に切り替えてみました。すると…普通に表示しやがりました。

 つまり、原因は独自に作成した「FLFLテーマ」そのものにありそうです。しかしFLFLテーマは出来るだけシンプルな構造を心がけたので、何処が悪さをしているのか思い浮かびません。悪さをしているというより、何か足りないのではないかと考えました。

 そこで次は、問題の無かった「Twenty Fourteen」のテーマフォルダから、FLFLテーマに無いphpファイル等を順にコピーしていきました。jsフォルダやcssファイル関連など、関連しそうなファイルの内部のパスの記述を調べたり、最後はfunctions.phpの中身も移植したりしてみましたが、残念ながら構造が複雑過ぎて理解及ばず結果は解決せず。しかしアレですね、機能性はさておくとして、パッと見だけの掴みなら、FLFLテーマの方が断然良いですな。FLFLテーマ、カッコイイです自画自賛。

プレイリストの代替案

 なかなか原因を特定できないまま無駄に時間が過ぎてゆくので、少し飛躍してプレイリストの代替案でいくのはどうかと考えました。数年前は単純なオーディオ再生専用プラグインでも、MacOSXとiOSとで相互に動作するものが少なくて苦労したのですが、今回久々にその方面でググってみたら、結構良さげなものが幾つか見つかりました。HTML5で動作し、カスタマイズ性や見た目の安定感、iOSからでもそのまま再生可能なところから、このプラグインがイイナと思いました。

WordPress HTML5 Audio Player

 早速ダウンロードしてローカルMAMP上にアップロード、有効化してプレイリストを作成し(手順はWordPressの時と同じようなものです)、サンプルの投稿記事をプレビューしてみたところ…全く同じ症状が出た。プレビューだと白紙状態、でもビジュアル編集画面だとプレイリストが表示されるというのは、WordPress純正プレイリストと全く同じ。どうも、基本的にAudioを扱うプラグインで共通に生じている不具合なのか?

Audio Playerプラグインの想い出>パーツテンプレートへの分割

 いよいよ打つ手も尽きたか…というわけで、いつものように珈琲を淹れ、ぼんやり窓の外を眺めていると、ふとある記憶がフラッシュバックしてきました。このような経験を以前したことがあるような…。
 それは上述したFlashベースのAudio Playerプラグイン導入時の事です。「音楽とか」でサンプルファイルを再生したいのに、プレーヤーが表示されない。かなり長時間アチコチ調べ回って、ようやくコチラの「WordPressの基本ページ構成をheader.php、footer.phpのパーツテンプレートに分けている場合の不具合対処」に辿り着き、無事解決に至ったのを思い出しました。

 もしかして今回の不具合で「独自にカスタマイズしているのが原因」と考えられるとしたら、それは僕のページ構成がシンプル過ぎる事に拠るのかも。現状、音楽制作メモの生成は、基本的に「index.php」の1本で全て賄っていて、ヘッダーやフッター等のパーツテンプレートには小分けしていないのです。無駄に複雑にする必要もない…とは思いつつ、今後、固定ページが追加されたり、フッター内へタグクラウドやその他要素を追加していくことも無くはないと予想されるので、今のうち分けておいても損はしないかな、とも思いました。

 では試しに分けてみます。現状、個別に用意しているテンプレートは、index.php、search.php、tag.phpの3つだけ。それぞれのヘッダー部とフッター部を独立させ共有化します。パーツテンプレートへの分割については、個人的に教科書にしている「WordPress レッスンブック 3.x対応」では244ページに解説アリ(メモ)。ちなみに先月、改訂版も刊行されたみたい→「WordPressレッスンブック HTML5&CSS準拠」

 分解時、index.php、search.php、tag.phpそれぞれの先頭・末尾に記述必要なテンプレートタグは次の2つでしょうか。

get_header();

get_footer();

個別ページ分解語の本体先頭・末尾

<?php get_header(); ?>

本体部の記述(略)

<?php get_footer(); ?>

そして、分割の結果!…ダメでした。また白紙状態(↓)。

更なる細分化、single.phpの追加

 むむ。ヘッダーとフッターへの分割で解決するのではないかと淡い期待を抱いたけれど、無残に打ち砕かれました。動作に問題の無い「Twenty Fourteen」とオリジナルの「FLFLテーマ」との差異でこれ以外に思い付くものと言ったら…single.php??

 これまでのflfl.meは、上述したようにindex.phpで記事単体の個別ページも生成していたのですが、index.phpは基本的にトップページ(homeページ)へのアクセス時に使うだけにして、個別ページはsingle.phpで表示させることにしてみます。ほとんどindex.php本体と記述は変わらず、先頭部のコードネーム・エリアでホームとカテゴリーを分岐させていたものを廃止する程度の変更。しかし…。

これも…ダメでした。引き続き白紙状態。

解決はかなり困難な気配濃厚

 それからまたWordPressテーマと頭を切り替えて、改めて要のパーツはどれなのかを探るべく絞り込んでゆくと、どうやら古いテーマである「Twenty Twelve」でも問題なく表示されることからして、3.6以降に採用となった各テーマ共通のテンプレート「content.php」と「functions.php」や「inc」フォルダ内の各phpファイル等が組み合わさっていることがPlaylist表示の必須条件になっている様子(あくまで憶測)。

 上述した、ダッシュボードのビジュアル編集で問題なくプレイリストが表示される件も、基本的にダッシュボードが「Twenty Fourteen」のテーマの基礎部分を流用しているからと思われます(もしくはその逆)。

 ただ、音声プレーヤー導入を優先して、他の既存のテーマへ乗り換えるという考えは今のところありません。僕の作業ペースからして頻繁にデモソングを載せられるとも思えませんし、個人的にはブログの構造がシンプルで、日々の運営やメンテナンスが容易であることの方が大切なので(まあ、負け惜しみです。WordPress標準のプレーヤーはプラグイン不要で管理も容易だからこそ期待していたのですけどね)。つづく。

現時点での結論残念ながらWordPressデフォルト装備の音声プレーヤー・Playlistは、オリジナルに作成した簡素過ぎるFLFLテーマでは利用できないようです。この案件は長期保留とし、その他の代替案があれば随時テストします。つづく。