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

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

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

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

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

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

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

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

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

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

 

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

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

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

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

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

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

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

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

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

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

1.まずテンプレート(widget.js.tmpl)を作る

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

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

 

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

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

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

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

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

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

 

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

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

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

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

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

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

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

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

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

そのコード例は次の通り

もしスクリプトが動かないなどの場合、リンクだけでも表示するようにしてます。

実際にブログパーツが動くか確かめてみた

という訳で今作った占いウィジェットが動くか確認してみました。

適当なページに埋め込みタグを貼り付けて表示してみると・・・

▼ ちゃんと表示された!

実際に埋め込みタグから表示した占いブログパーツの例

▼ 2回目も問題なく表示された

実際に埋め込みタグから表示した占いブログパーツの例

うん、埋め込みタグがちゃんと動いてくれてます。

今作ったのは占いウィジェットですが、もっと複雑で機能性があるのも作成可能

そこはアイデア次第ですね。

ブログパーツの作り方まとめ

箇条書きすると、次の通り

  1. まずテンプレート(widget.js.tmpl)を作る
  2. ウィジェット表示部分(widget.js.php)の作成
  3. ブログパーツの埋め込み用タグを用意する

以上、PHP + JavaScriptでブログパーツを作る手順でした。

Commentsこの記事についたコメント

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください