hiromasa.zone : o)

2005/11/17 Thursday 投稿時の月齢:15.7  月名:満月  潮汐:大潮 Moon:15.7[満月]今日の心技体 : 好調期低調期好調期

wp-hatena にみるプラグインの作成方 – 後編 – このエントリをはてなブックマークに追加このエントリをdel.icio.usに追加

日記 - ひろまさ @ 18:38

wp-hatena にみるプラグインの作成方 – 後編 – です。

前回はこちら。

wp-hatena にみるプラグインの作成方 – 前編 –

おっとここで、kohaku さんchameleon さんから入電。 同じソーシャルブックマークの del.icio.us への対応要望をいただきました。(←ということにしてください(笑)

次回は、このプラグインを del.icio.us 対応に改造してみます。 そしていよいよ Masayan さんも登場しますのでおたのしみに…

今回は WP というより PHP 寄りの話題になりそうです。プログラムを書くときの “共通項のまとめ方” のイメージだけつかんで頂ければ・・・、、と思って書いてみました。 この辺の言語の仕組みが分かると、既存のプラグインの流れも追いやすくなるとおもいます。 良ければ読んでみてください。

ということで、wp-hatena の del.icio.us 対応をいよいよやってみます。(遅くなってごめんなさい..)

まずは、del.icio.us の仕様を調べてみます。

  • 「http://del.icio.us/post?url=[ブックマーク登録URL]」という形式でリンクすればブックマーク登録画面になる

となっているようです。 はてなが「http://b.hatena.ne.jp/append?[ブックマーク登録URL]」とすれば良いのと同じイメージですね。はてな用のコード(関数)を転用すればすぐできそうです。あと違うのは画像ファイルの URL くらいです。

では、既にある、はてなをうけもつ addHatena() 関数のコードをみてみましょう。

  1.  function addHatena() {
  2.   
  3.    $title  = '<a';
  4.    $title .= ' href="' . $this->haneta_url . get_permalink() . '"';
  5.    $title .= ' target="_blank"';
  6.    $title .= '">';
  7.    $title .= '<img ';
  8.    $title .= ' src="' . $this->plugin_path . $this->hatena_gifname . '"';
  9.    $title .= ' alt="このエントリをはてなブックマークに追加"';
  10.    $title .= ' title="このエントリをはてなブックマークに追加"';
  11.    $title .= ' width="16" height="12"';
  12.    $title .= ' style="border: 0;margin: 0;padding: 0;vertical-align: baseline;"';
  13.    //$title .= ' onmouseover="wpHatenaPopup()"';
  14.    $title .= '>';
  15.    $title .= '</a>';
  16.   
  17.    echo $title;
  18.   
  19.  }

こんな感じになっています。これを元に同じような adddelicious 関数を追加しちゃえば良さそうです。 コード中 “$this->haneta_url” と “$this->hatena_gifname”の部分が del.icio.us 用になりますので、変数の新設や初期化コードも追加します。とりあえず初期化コードはここでは省略して、adddelicious 関数だけつくってみましょう。

  1.  function adddelicious() {
  2.   
  3.    $title  = '<a';
  4.    $title .= ' href="' . $this->delicious_url . get_permalink() . '"';
  5.    $title .= ' target="_blank"';
  6.    $title .= '">';
  7.    $title .= '<img ';
  8.    $title .= ' src="' . $this->plugin_path . $this->delicious_gifname . '"';
  9.    $title .= ' alt="このエントリをdel.icio.usに追加"';
  10.    $title .= ' title="このエントリをdel.icio.usに追加"';
  11.    $title .= ' width="16" height="12"';
  12.    $title .= ' style="border: 0;margin: 0;padding: 0;vertical-align: baseline;"';
  13.    //$title .= ' onmouseover="wpHatenaPopup()"';
  14.    $title .= '>';
  15.    $title .= '</a>';
  16.   
  17.    echo $title;
  18.   
  19.  }

このような adddelicious() 関数を addHatena() 関数の下に”追加”してみました。addHatena() のほぼデットコピーで、URL の変数とリンクタグの alt/title 属性の日本語だけ書き換えたものです。簡単にできちゃいました。

あとはこの関数を使う方のテーマ内から「<?php $wph->adddelicious(); ?>」と呼び出してもらえば del.icio.us 用のリンクが追加できるようになりました。やぁめでたい。

この調子でどんどん同じような関数を増やしていけばいろいろなソーシャルブックマークに対応できます。しかし、なにか釈然としない部分がありますね。ちょっとしか違わない同じようなコードが大量にある・・・。

プログラムの神様はこういったところを見逃さず天罰を与えてきます。 😛

ここで Masayan さんより不具合の報告を頂きます。

wp-hatena.phpの87行目
$title .= ‘”>’;→”がダブり、target=”_blank””のようになる。

wp-hatena.phpの95行目
$title .= ‘>’; → $title .= ‘ />’; /で閉じないと怒られる。

はうぁ。。(大汗

  1.  $title .= ' target="_blank"';
  2.    $title .= '">';
  1.  $title .= '>';

た、たしかに・・・。どうもありがとうございます。

直さなきゃ!、と思ったときに修正する部分が大きく2ヶ所あることに気がつきます。addHatena() 関数と adddelicious() 関数 です。この2つはデットコピーで作ってしまったために不具合も増殖させてしまったわけです。もし、2つではなくもっとたくさんのソーシャルブックマークに対応していたら・・・と思うとガクガクブルブルです。

プログラムを書くときには いろいろなところに存在する”共通項”の部分をなるべく”まとめて”書くようにすると、このような時に修正するのが簡単になり、また不都合も減らすことが出来ます。

今回は”まとめる” ための手法として”関数”を使って、共通項をくくってみます。

はてなも del.icio.us も、そしておそらく他のソーシャルブックマークも同じようなタグを作成するので、ここの部分をまとめるために makeBookmarkURL という関数を新設します。各ブックマークでタグが変る部分、

  • alt/title の名称 – $sitename
  • URL – $url
  • 画像アイコンファイル名 – $iconfile
  • 画像の大きさ。- $width、$height

を、関数の”引数” として渡すようにします。引数というのはワードプロセッサなんかの差し込み印字に近いイメージです。では、makeBookmarkURL 関数のコードをみてみます。

  1.  function makeBookmarkURL($sitename, $url, $iconfile, $width, $height) {
  2.   
  3.    $tag  = '<a';
  4.    $tag .= ' href="' . $url . get_permalink() . '"';
  5.    $tag .= ' target="_blank"';
  6.    $tag .= '">';
  7.    $tag .= '<img';
  8.    $tag .= ' src="' . $this->plugin_path . $iconfile . '"';
  9.    $tag .= ' alt="このエントリを' . $sitename . 'に追加"';
  10.    $tag .= ' title="このエントリを' . $sitename . 'に追加"';
  11.    $tag .= ' width="' . $width . '" height="' . $height . '"';
  12.    $tag .= ' style="border: 0;margin: 0;padding: 0;margin-right: 8px;vertical-align: baseline;" ';
  13.    //$tag .= ' onmouseover="wpHatenaPopup()"';
  14.    $tag .= '>';
  15.    $tag .= '</a>';
  16.   
  17.    return $tag;
  18.   
  19.  }

最初の “makeBookmarkURL($sitename, $url, $iconfile, $width, $height)” 部分が “引数” を受け取る部分です。

最後の “return $tag;” というのはこの関数が呼ばれたら $tag の内容を呼び元に返しなさいという表記です。この場合、$sitename や $url 等々が差し込まれたブックマーク用の画像タグが戻ります。

では呼び元である addHatena()、adddelicious() 関数を心機一転、makeBookmarkURL() 関数を呼び出す形に変更します。 呼び出すときは、$sitename や $url 等々の情報を埋め込んだ書き方にします。

  1.  function addHatena() {
  2.   
  3.    echo
  4.        $this->makeBookmarkURL(
  5.            'はてなブックマーク',
  6.            'http://b.hatena.ne.jp/append?',
  7.            'hatena.gif',
  8.            16, 12
  9.        );
  10.   
  11.  }
  1.  function adddelicious() {
  2.   
  3.    echo
  4.        $this->makeBookmarkURL(
  5.            'del.icio.us',
  6.            'http://del.icio.us/post?url=',
  7.            'delicious.12px.gif',
  8.            12, 12
  9.        );
  10.   
  11.  }

ずいぶんすっきりしました。 呼び出し元と呼び出し先を見比べると “差し込み印字” のイメージが分かると思います。

では、Masayan さんからいただいたタグのミスを修正します。 makeBookmarkURL関数”だけ” 直せば はてなも del.icio.us も直るわけです。

  1.  function makeBookmarkURL($sitename, $url, $iconfile, $width, $height) {
  2.   
  3.    $tag  = '<a';
  4.    $tag .= ' href="' . $url . get_permalink() . '"';
  5.    $tag .= ' target="_blank"';
  6.    $tag .= '>';
  7.    $tag .= '<img';
  8.    $tag .= ' src="' . $this->plugin_path . $iconfile . '"';
  9.    $tag .= ' alt="このエントリを' . $sitename . 'に追加"';
  10.    $tag .= ' title="このエントリを' . $sitename . 'に追加"';
  11.    $tag .= ' width="' . $width . '" height="' . $height . '"';
  12.    $tag .= ' style="border: 0;margin: 0;padding: 0;margin-right: 8px;vertical-align: baseline;" ';
  13.    //$tag .= ' onmouseover="wpHatenaPopup()" ';
  14.    $tag .= '/>';
  15.    $tag .= '</a>';
  16.   
  17.    return $tag;
  18.   
  19.  }

また、たとえばタグが気に入らなかった場合もこの関数だけ修正すればすべてに反映できますね。

wp-hatena に限らず “関数” についてはほぼ全てのプログラムで使われる手法です。 このように共通部分をくくりだすことができる他、コードを処理単位に分けて書くことが出来るようになります。

プログラムはあっちこっちの関数を呼び出して動くことになるので、慣れないうちは流れを追うのが大変かもしれませんが、逆になれてしまえば必要のない関数は読む必要がない(何をする関数なのか予測がつく)ので非常に楽になると思います。 是非活用してみてください。

以上で長きにわたりましたプラグインノウハウシリーズは終了です。 今回サンプルにしていました wp-hatena をもう少し修正したものを下記で配布していますのでよければ参考にソースをどうぞ。

実は今回のエントリの del.icio.us 対応ソースだと、ブックマーク時に del.icio.us にタイトルが渡りません。この辺の対応もあわせてしています。

WordPress エントリをはてなブックマークに登録 – wp-hatena プラグイン正式版 – リリース

最後に。 とりとめのない文章を終わりまで読んで頂きましてありがとうございました。

2 Comments

Comment

  1. From: Castaway。 - 2005/11/17 Thursday Nighttime (Comment)

    プラグインのリリース&ドキュメントの作成お疲れさまでした:smile:

    ドキュメント、すごくわかりやすいです:razz:
    今後の参考にさせていただきますね。

    大体ここはこんな事やってるんだろうなぁ、というのはわかるんですけれど、やっぱり基本がわかってないとダメですね。
    キチンとオブジェクト指向とかPHPとか勉強しようっと。
    #こんなのがプラグイン作ったり、サポートしてるのを知ったら怒られちゃうかも:sad:

  2. From: ひろまさ - 2005/11/18 Friday Nighttime (Comment)

    Castaway。さん、どうもありがとうございます!。

    WP のプラグインはせっかくライトな PHP で作れますので、スタイル気にせずポコポコつくってみんなに使ってもらったほうが幸せかな、、と思っています。

    正直に書きますと今回のは、WP プラグイン始めてからの今までの試行錯誤の結果を書いてみた次第です。(なので文章が紆余曲折だったのです。。申し訳ない。。)もし、同じような悩みを持ったときにでも思い出して頂けたら嬉しいです。

    >#こんなのがプラグイン作ったり、サポートしてるのを知ったら怒られちゃうかも 🙁

    いやいやそんなことないです。:grin: あ!、ぼくは Web の”お約束”にうといので・・・そのうちきっと暴動が起きます。。(笑


このサイトはコンテンツをフリーズしました。トラックバック・コメントは閉じられています。

新しいサイトは、

hiromasa.another :o)

です。 :-)

このサイトについて

このブログは引っ越しを行いコンテンツはフリーズしています。hiromasa.anotherへどうぞ。

Powerd By WordPress

We (Heart) WordPress

WordPressME Logo
WordPress Plugins

ブログ内検索

Todays Popular

WordPress Ring

はてなリング - WordPress -

情報

32 queries. 0.444 seconds.

このページの先頭へ