ブログパーツの JavaScrip・PHP による作り方まとめ【サンプル付き】

小さなWebサービスを今開発してます。

そんなとき少しでもサービスを広めたくて、ブログパーツを作ってみました。

「ブログパーツとか難しそうだな～」と思ってたんですが、
意外と作るのは難しくなかったし、作ってみると意外と楽しいです。

ということで、PHP+JavaScriptによるブログパーツの作り方を紹介！

このページの目次

まず大まかな作り方のロードマップについて
具体的なブログパーツの作り方（占いウィジェット）
実際にブログパーツが動くか確かめてみた
ブログパーツの作り方まとめ

まず大まかな作り方のロードマップについて

今回作るブログパーツ、こういう使い方を想定してます。

埋め込みできる感じのウィジェット
なるべく表示速度に負荷をかけない
コードコピペで表示するイメージ

身近なところでいうなら、Twitterのツイートウィジェットとか、埋め込みYoutube動画とか、ハテナのブログカードみたいなイメージ

手軽に埋め込みできて、使いやすいパーツが理想です。

その表示に必要なスクリプト・ファイルが次の３つ

ウィジェット用テンプレート作成
⇒　ここでは widget.js.tmpl という名前で作成する。ここにウィジェットの肝になるHTMLとかCSS・JSとかのコードを書く
ウィジェット表示スクリプト作成
⇒　ここでは widget.js.php という名前で作成。ここで widgte.js.tmp の内容を読みだし、iframeとしてウィジェットを表示する
埋め込みコードを用意する
⇒ あとは上２つを読み込んで、ウィジェット表示できる埋め込みコードを用意するだけ。サービスユーザーにはこの埋め込みコードを使ってもらう

まあ別にこの名前じゃなくていいけど・・・

ここでは例として、こういう構成でブログパーツを作ってみたいと思います。

具体的なブログパーツの作り方（占いウィジェット）

ここで作成するのは、
ランダムに大吉・中吉・小吉・凶の４つの運勢を表示するウィジェット

ただし、ここでは次の構成でウィジェット開発してるものとします。

ドメイン直下
- widget
  - widget.js.php
  - widget.js.tmpl

あとドメイン名は example.com を使っているということで

もし example.com とか出てきたら、各自のモノに置き換えてください。

１.まずテンプレート（widget.js.tmpl）を作る

最初にウィジェット本体のHTML・JS・CSSを書いたテンプレートを作ります。

名前は widget.js.tmpl というファイル名

ここでは占いウィジェットを作るので、次の内容で作成しました。

<div class="container border p-2">
  <div class="row text-center">
    <div class="col-12">
      ・・・今日の運勢は・・・ <br>
      <span id="unsei" style="font-size: xx-large;">
        <!-- 大吉？中吉？小吉？それとも... -->
      </span> 
    </div>
  </div>
</div>

<script type="text/javascript">
/// 1～4までの乱数を作る
var rand = Math.floor(Math.random() * (4 - 1  + 1)) + 1;
var unseiText = '';
switch(rand){
  case 1: 
    unseiText = '大吉'; break;
  case 2: unseiText = '中吉'; break;
  case 3: unseiText = '小吉'; break;
  case 4: unseiText = '凶'; break;
}
/// 運勢を表示する
const widget = document.getElementById('unsei');
widget.innerHTML = unseiText;
</script>

<!-- Bootstrap読み込み -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" />

・・・今日の運勢は・・・ <br>

</span>

</div>

/// 1～4までの乱数を作る

var rand = Math.floor(Math.random() * (4 - 1 + 1)) + 1;

var unseiText = '';

switch(rand){

case 1:

unseiText = '大吉'; break;

case 2: unseiText = '中吉'; break;

case 3: unseiText = '小吉'; break;

case 4: unseiText = '凶'; break;

}

/// 運勢を表示する

const widget = document.getElementById('unsei');

widget.innerHTML = unseiText;

</script>

プログラム入門でよくある感じの、乱数で表示内容を変えるやつです。

２．ウィジェット表示部分(widget.js.php)の作成

次は今作ったテンプレートを、他サイトに埋め込みんで表示する部分の作成

ここでは widget.js.php という名前で作成します。

内容はJSコードだけなんですが、拡張性も考えて PHP で作成。
もし PHP とか一切使わないなら、 widget.js という名前でもOKです。

その widget.js.php の内容は次の通り

<?php

/** テストウィジェットを表示する */

?>

var xhr = new XMLHttpRequest();
xhr.open("GET","https://example.com/widget/widget.js.tmpl");
xhr.onload = function(){
  widget = xhr.responseText;
  
  /// aタグのdata属性取得＆隠す
  var link = document.getElementById('uranai');
  var w = link.getAttribute('data-w');
  var h = link.getAttribute('data-h');
  link.style.display = 'none';
  
  /// iframeを生成
  var iframe = document.createElement('iframe');
  iframe.scrolling = 'no';
  iframe.frameBorder = 0;
  iframe.marginWidth = 0; iframe.marginHeight = 0;
  iframe.width = w+'px'; iframe.height = h+'px';
  
  /// iframeにウィジェットを表示
  link.parentNode.insertBefore(iframe, link);
  iframe.contentWindow.document.write(widget);
}
xhr.send();

<?php

/** テストウィジェットを表示する */

var xhr = new XMLHttpRequest();

xhr.open("GET","https://example.com/widget/widget.js.tmpl");

xhr.onload = function(){

widget = xhr.responseText;

/// aタグのdata属性取得＆隠す

var link = document.getElementById('uranai');

var w = link.getAttribute('data-w');

var h = link.getAttribute('data-h');

link.style.display = 'none';

/// iframeを生成

var iframe = document.createElement('iframe');

iframe.scrolling = 'no';

iframe.frameBorder = 0;

iframe.marginWidth = 0; iframe.marginHeight = 0;

iframe.width = w+'px'; iframe.height = h+'px';

/// iframeにウィジェットを表示

link.parentNode.insertBefore(iframe, link);

iframe.contentWindow.document.write(widget);

}

xhr.send();

もしPHPを使わないなら、 <?php ～ ?> は書かなくてもOK

何をしてるかはコメントにも書いてあるけど、箇条書きするとこういう感じ

aタグからデータ属性取得
ここでは data-w と data-h からウィジェット幅と高さを取得してる。必要なら他にもオプションが追加可能。あとデータ取得した後はリンクを消している
iframe要素を作成
ウィジェットを埋め込む iframe を枠なしで生成する
iframe要素にウィジェット埋め込み
元々あるリンク要素の後に iframe を追加し、ウィジェット本体を埋め込み

まあ埋め込みタグを紹介してないので、何をしてるかはイメージしずらいと思います。

でも iframe を生成して埋め込むっていうのは、どのウィジェットでも同じです。

３．ブログパーツの埋め込み用タグを用意する

これなかったら、ブログパーツが埋め込めないので超大事

最後にブログパーツを埋め込むためのタグを用意します。

そのコード例は次の通り

<!-- テストウィジェットを表示 -->
<a href="http://example.com/uranai" id="uranai" data-w="250" data-h="150" target="_blank">占いウィジェット</a>
<script src="https://example.com/widget/widget.js.php"></script>