WordPressサイトでYoutube動画を大量に張り付けた重たいページを早く表示したい時に使った方法

Youtubeの動画リンクってiframe 使ってたりするんですがそういう物を沢山ページに張り付けると凄く時間がかかります。

ではどうするか?

という事でネットで検索すると沢山出てきますね。

大抵はimg.youtube.comから取得した画像をページに張りその画像をクリックしたらJavaScriptでiframe のリンクに書きかえって感じで。

という訳で私もそれで対応していたのですが色々問題がありまして。

先ず、
クリック時に呼び出されるJavaScriptの中で画像種別を判定していないのでクリックされると画像だとなんでもかんでもiframeに差し替えちゃうコードになっている。

記述するコードが助長でありメンテナンスがダルい。

以上の理由で突貫ですが独自に作ってみました。

方法&手順

※使用される場合はあくまでも自己責任でお願いいたします。

仕組みは3段階です。

先ず、動画のリンクを差し込みたい場所に以下のコードを記述します。

T1L_tRj5xBgの部分はyoutubeの動画IDです。

これだけ。

そして

下記に示したコードをプラグインとして導入。

プラグインディレクトリの中に任意の名前でこのプラグイン用のディレクトリを作りそこにこのコードを任意の名前で起きます。

私は、makelightyoutubelinkというディレクトリを作りその中にmkll.phpという名前で置きました。

その後プラグインページからプラグインを有効にします。

そして今度はこのプラグインで[mryl]タグで変換されたリンクをクリックされた時に呼び出されるjavascriptの登録です。Widgetページからtextでどこかのお尻にでも追加してくださいな。

これで後は好きな動画のIDをひたすら[mryl]タグで囲んで記述すればOKになります。

仕組み解説

先ずはプラグインがページソース内に記述された[mryl]タグで囲まれたIDを検出するとそのIDを元に動画を表示する為にjavascriptが使用するキーワードを追加したコードに変換されます。

このコードはプラグインによって以下の様に書き換えられます。

上記の画像をクリックすると今度はこれはjavascriptによって動的に

と書き換えられて動画が再生できるようになります。

ロジック解説

プラグインに関して

ソースに処理の流れがわかるようにコメント書いてますが大体の解説を行いますと。

1.動画画像をキャッシュしておくディレクトリを作る。今のソースではコンテンツディレクトリの下にimgyoutubeを作成。さらにこの下に記事ID毎のサブディレクトリを作成しそこに動画画像を保存。

2.記事内に存在する[mryl]タグで囲まれたIDを全て検出一時保存。

3.タグが有った場合(toutubeのリンクが有った場合)は以下の処理を実施。

3.1.キャッシュした動画の画像が存在するかをチェックし存在していない場合のみ3.2.、3.3.実施。
3.2.キャッシュした動画画像が存在しない場合はimg.youtube.com から動画画像を取得。
3.3.取得した動画画像に白の右向き三角印を描画し1.で作成しているディレクトリに保存
3.3.再び3.1.へ。

4.[mryl]タグで囲まれた文字列を動画を表示する為にjavascriptが使用するキーワードを追加したコードに一括置換。

JavaScriptに関して

クリックされると呼び出されますが呼び出された要素内にwww.youtube.comが存在すれば処理対象としiframeに要素を変換。

課題

ソースを見ればわかりますがエラー処理が全く入っていません(^-^;

実際に自分で使っているものは大体のパターンは入れていますがそれを入れたバージョンで解説すると目障りなので省いた骨格だけを記述しています。

ですので使用される場合はディレクトリをいじったりしているのでそのあたりはちゃんとブロックするなりの処理を追加してくださいね。

またソース内で直値(マジックナンバー)も多用していますがそれもクラスの定数にするなりどこかでまとめるなりして使用してください。

独習PHP 第3版
php1

シェアする

  • このエントリーをはてなブックマークに追加

フォローする