ダリの雑記：WEBプログラム版

「いいね！」ボタンが押されたとき、スクリプトを実行させる方法【Facebook・Javascript】

メモ。

「いいね！」ボタンが押された瞬間、こちらが用意しているスクリプト（javascript）を実行させたい！

という案件があったため、ググっていると下記のサイトを見つけました。

Facebookのいいねボタンを押した時に自分で用意したjsのメソッドを呼び出す - jsdo.it - Share JavaScript, HTML5 and CSS

注意点として、「いいね！」ボタンのコードは「XFBML」で記述する必要があります。（iframeじゃ多分ダメ。）「いいね！」ボタンのコード取得はこちら

また、jQueryも読み込んでおく必要が有ります。jQueryのダウンロードはこちら

「いいね！」ボタンを設置したページに以下のようなスクリプトを埋め込みます。

■スクリプト（javascript）の例


if (window.attachEvent) {
	window.attachEvent("onload", initFunc);
}else{
	window.addEventListener("load", initFunc, false);
}

function initFunc(){
	timerID = setInterval(function () {
		if ($('.fb_edge_comment_widget.fb_iframe_widget:visible').length) {
			～実行させたいプログラムをここに記述～
			clearInterval(timerID);
		};
	}, 200);
}

01～04行：ページが読み込まれたら「initFunc()」関数を実行します。

07～14行：setIntervalでインターバルタイマーを設定し、　$('.fb_edge_comment_widget.fb_iframe_widget')に変化がないか見張ります。
（いいね！ボタンの状態が変化すると、$('.fb_edge_comment_widget.fb_iframe_widget')の状態も変化するみたいです。）
変化があったら「～実行させたいプログラムをここに記述～」部分に記述されているスクリプトが実行されます。
最後に、clearIntervalでインターバルタイマーをクリアします。

■注意点

参考にさせていただいたサイトにも書いてありますが、上記の方法では押した瞬間にスクリプトを実行させることは可能ですが、再度ユーザが訪れたとき、そのユーザがすでに「いいね！」ボタンを押しているかどうかは、判断できません。

これを判断するにはFQLを使うか（動作未確認）、「いいね！」ボタンを押してくれたユーザのFacebookIDを取得し、データベースや外部ファイルに蓄積しておく、という方法が考えられます。

ユーザのFacebookIDを取得する方法はこちらのページをご参照ください。

※ここで言うFacebookIDというのはログイン時に使用するIDではなく、登録時に連番で割り当てられる番号のことを指します。

マップ表示用スクリプトをバージョンアップしました[バージョン1.4b2]

マップ表示用スクリプト（GoogleマップAPI v3で地図とマーカー・バルーンを表示するスクリプト）を少しバージョンアップ（version1.4b2）しました。（ダウンロードはこちら）

version1.4bからの変更点は内部処理のみなので、差し替えるだけで動作します。

■使い方はこちら：マーカー個別版・マーカー複数板

■主な変更箇所

マーカー複数版で使用する際、住所１件ごとに「get_coord.php」にアクセスすると効率悪そうなので、まとめてアクセスする仕様に変更しました。
これにより表示速度が速くなりました。
比較：v1.4b (旧)・v1.4b2 (新) ※ただしすでにキャッシュがとられている場合の比較です。
Firefoxでは「nth-child」が意図通りの挙動にならないため、ブラウザごとに動作を分けました。（「アドレス」と「座標」をミックスしている時にFirefoxで不具合が起きていたため）
住所や座標の記述に半角スペースや改行コード、HTMLタグが入っていると不具合起きそうなので、座標取得時は取り除くようにしました。

半角スペースを取り除くための関数はこちらのサイトのプログラムを使わせていただきました。

浮浪プログラマの始末書さんのサイト

タグ：: API; GoogleMap; GoogleMapAPI

Like Boxを設置する【facebook】

【2013/06/18修正】結構仕様が変わっているので一部修正しました。

メモ

Facebookページ（旧ファンページ）を作成すると、Like Box（いいねボックス）なるウィジェットを自分（自社）のブログやサイトに設置できるようになります。

こんなの↓

１．まず、下記のURLにアクセスします。

http://developers.facebook.com/docs/reference/plugins/like-box/

２．Boxを調整し、コードを取得します。

Facebook Page URL：FacebookページのURL
Width：Boxの幅
Height：Boxの高さ
Show Faces：いいねを押してくれているユーザの写真を下のブロックに表示するかどうか（なぜかShow Facesを外すと、Streamまで表示されなくなるので注意）
Color Scheme：色（明るいor暗い）
Stream：ウォールを表示するかどうか
~~Border Color：外枠の色（例：#FF0000）無くなりました~~
Show Border：外枠を表示するかどうか
Header：ヘッド部分の「Find us on Facebook」というブロックを表示するかどうか

上記を調整後、「Get Code」ボタンを押してください。

「Like Boxのプラグインコード:」ウィンドウが開きます。

コードは「HTML5」「XFBML」「IFRAME」「URL」の４パターンありますので、お好きなパターンのコードをサイトに張り付けてください。

なおBOXの最小幅は292pxとなっているので注意してください。くわしくはこちらの記事

さくらインターネットでPDFをJPEGに変換【PHP】

さくらインターネットのレンタルサーバ上でPDFをJPEGに変換する方法です。

変換にはImageMagickを用います。

さくらインターネットにはImageMagickがインストールされているのですが、PHPには組み込まれておらず、phpinfoを見ても見当たりません。

しかしインストールされているのは確実なので、system関数を用い、ImageMagickのコマンドを実行すれば使用できます。

なお、ImageMagickのパスは「/usr/local/bin/」です。

<?php
system("/usr/local/bin/convert sample.pdf sample.jpg");
?>

system("/usr/local/bin/convert PDFファイルのパス出力するJPEGのパス");

もし、PDFファイル（ここでは「sample.pdf」）が複数ページある場合は、

sample-0.jpg
sample-1.jpg
sample-2.jpg
・・・

というふうに、自動的に連番がついたファイル名で出力されます。

nandani | 2011年06月20日 | コメント(0) | トラックバック(0) | PHP関連

PIE version 1.0 beta4

トラバをくださった方のブログで気づいたんですが、PIEのバージョンが４月にアップしたみたいです。

前バージョンのbeta3で発生していた、印刷プレビューでスクリプトエラーのウィンドウが立ち上がる問題が解決していました。（.htcで実行させたとき）

印刷でCSS3が実行されないという点は変わらずですが、とりあえず支障なく使えるようになりました。

他は何か変わったのかなぁ・・・

PIEダウンロードサイトへ

【追記】

beta5使ってたら、スクリプトエラーが復活しとる・・・。

とりあえず解決方法はありますので、こちらのサイトをご参照ください。

PIE.htc 使用時のIEでの印刷プレビュー【(x)html】

タグ：: CSS3

nandani | 2011年06月01日 | コメント(0) | トラックバック(1) | CSS関連

MTOS 5.1リリース！

MT5.1ベータ版公開！の記事を書いて以来、実はまったく触ってなかったのですが^^;、仕事で使用するためMTOSをダウンロードしに行ったら、MTOSのバージョンも5.1になっていました。

MTOSダウンロードページ

今日一日触ってみた感想として、なんか早く（軽く）なってる？

以前までのMT（MTOS）といえば、管理画面のページ間を移動するだけでも時間がかかってイライラしていたものですが（しょぼサーバだと特に）、なんか体感的に1.5倍くらい早くなってる気がします。

カテゴリ管理について

「カテゴリの管理」は一番進化しましたね。

パッと見はなんか地味になったな～って感じでしたが（↓こんな感じ）

その軽さたるや！すばらしい！

これまでは、カテゴリをひとつ追加するたびに、データベースに保存される仕組みでしたが、今回からはとりあえず追加を先にしておき（この段階ではまだ保存されない）、すべての追加を終えたのち一括して変更を保存する仕組みになってます。

追加はページ移動もないし、データベースアクセスも存在しないため、驚くほどサクサク登録できます。（ちなみに「名前」変更だけなら、同じくページ移動＆DBアクセスが存在しないため、快適に編集が行えます。）

最終的な保存もそれほど時間はかかりません。

そして「カテゴリの管理」といえばもう一つ、大きな変更点があります。

それは並び替え機能！

ようやく標準でついたかって感じですが、この並び替え機能はドラッグ＆ドロップで並び替え＆レベル（階層）の移動ができるため、かなり使い勝手がよくなってます。

ちなみに並び替えも同じく最終的に一括保存する仕様です。

これまではカテゴリ並び替えプラグイン「SortCatFld」が手放せない存在となっていましたが、とうとう使用しなくても大丈夫になりましたね。そう考えると少しさみしい気もします・・・

とかいいつつ、なぜかいまだにMT4で構築する案件とかもあるので、これからもお世話になると思いますが^^

フォルダ管理

フォルダ管理もカテゴリ管理と同じ仕様になってます。

並び替えも同じくドラッグ＆ドロップで可能。

テンプレート管理について

さて、続いてテンプレート管理。

ついにハイライトオフ機能が復活しました！

なぜこれが必要かというと、ハイライトオンの状態だと、タブスペースを勝手に取り除いてしまうのです。

インデントをタブで行っている人種としてはこれは致命的。

しかしハイライトオフの状態だと、タブをそのまま放置してくれます。

表示速度も若干があるし、あからじめDreamWeaverで作成したテンプレートをコピペで張り付ける自分にとっては願ったりかなったり。

早速オフの状態にして（お、ちゃんとタブインデント生きてる^^）保存！

↓

保存が完了し、画面切り替わる

↓

タブインデント全滅・・・（ﾟдﾟ）ﾎﾟｶｰﾝ

(つд⊂)ｺﾞｼｺﾞｼ

見間違いか？もう一度ハイライトオフの状態でテンプレートを張り付けてリトライ！

・・・

やっぱりタブインデント全滅・・・

なんじゃそりゃ！

どうやら保存時にタブが取り除かれている様子・・・orz

バグですね、こりゃ。

しかもテンプレートを開くとき、ハイライトオフだとオンの時より表示が遅いような（一回オンになってからオフに切り替えてるみたいなんだよね・・・表示速度すら失ったか。）

いずれ直していただくことを期待しつつ、ちまちまとタブインデントを半角スペースインデントに直すのでありました・・・。

タグ：: MT

nandani | 2011年05月26日 | コメント(0) | トラックバック(0) | CMS関連

Syntax Highlighter for WordPressがうまく表示されない場合

記事内のソースをきれいに表示したいなぁと思い、「Syntax Highlighter for WordPress」を入れてみました。

ダウンロードサイト

しかし全然うまく表示されない！

いろいろと調べた結果。

<?php wp_head(); ?>

<?php wp_footer(); ?>

の２つが不可欠とのこと。

それぞれをテンプレートのヘッド部分とフット部分に埋め込んだところ正常に表示されるようになりました。

自分でテンプレートをカスタマイズしている方は気を付けましょう。

なお、使い方については

WordPress Plugins/JSeries » Syntax Highlighter for WordPress (ソース整形表示)

Syntax Highlighter for WordPress を導入 | 暇人じゃない

を参考にさせていただきました。

nandani | 2011年05月21日 | コメント(0) | トラックバック(1) | PHP関連

phpThumb()でサムネイル生成

imgタグ単位でサムネイルを自動生成してくれる便利なプログラム「php Thumb()」（ダウンロードサイトはこちら）。

このプログラムを使用する上でつまったことがあるのでメモっておきます。

まずどのように使用するかというと、

ダウンロードしてきた「phpThumb_xxx.zip」を解凍します。
「phpThumb_xxx」というフォルダが出来るので、「phpThumb」と名前を変更し、そのフォルダを丸ごとサーバにアップロードします。
サムネイルを表示したいimgタグを以下のように記述します。（「phpThumb」フォルダはウェブルートにアップロードしたと想定しています。）

<img src="http://ドメイン/phpThumb/phpThumb.php?src=サムネイルにしたい元画像のパス&w=100&h=100&zc=1&q=100" />

これで、この記述がされているページへブラウザからアクセスすると、自動的にサムネイルが生成され、以降はその生成されたサムネイルを表示するようになります。（一番最初にアクセスされたときはサムネイルを生成するため少し画像の表示に時間がかかります。）

ちなみに引数については以下の通りです。

src：サムネイルにしたい元画像のパス
w：幅
h：高さ
zc：トリミングのオン・オフ
q：クオリティ（0～100）

で、どこでつまったのかというと、「サムネイルにしたい元画像のパス」

ここをhttpから始まるURLにしているとエラーが帰ってきて動作しません。

なんでこんな仕様なんだろう？と思ったんですが、他の色々なサイト（たとえばこちら）を見て「そりゃそうか」と納得しました。つまり外部のサイトであっても画像を引っ張ってきてサムネイル化してしまうことが可能となってしまうわけです。

別にimgタグに埋め込まなくても

http://ドメイン/phpThumb/phpThumb.php?src=サムネイルにしたい元画像のパス&w=100&h=100&zc=1&q=100

とアドレスバーに打ち込めばサムネイル画像がキャッシュとして生成されてしまうわけですから、いたずらで外部サイトからとんでも画像を引っ張ってこられた日には・・・ｶﾞｸｶﾞｸ(((( ；ﾟДﾟ))))ﾌﾞﾙﾌﾞﾙ

というわけで、「サムネイルにしたい元画像のパス」に記述する場合は相対パス、もしくは「/images/hoge.jpg」という風にスラッシュからはじめるパスにしましょう。

そもそも、phpThumb.phpへダイレクトにアクセスでき、それによるサムネイル生成が可能なことに問題があるので、htaccessを使用してダイレクトアクセスならびに外部からのリンクをつなげなくしたほうが良いでしょう。

.htaccessの記述方法はこんな感じ。

<Files ~ "phpThumb.php">
SetEnvIf Referer "^http://ドメイン/" ref_ok
order deny,allow
deny from all
allow from env=ref_ok
</Files>

これをphpThumbフォルダにアップすれば、phpThumb.phpにダイレクトアクセスおよび外部からのリンクができなくなります。

さて、話を「サムネイルにしたい元画像のパス」に戻しまして、問題になるのがCMSとの連携（まあ、そもそもphpThumbは記述方法がちょっとめんどくさいので、CMSと連携させないとあんまり利用しないと思うんですが）。

MTはデフォルトでサムネイルを生成できるタグ（<$MTAssetThumbnailLink$>または<$MTAssetThumbnailURL$>）があるのでこれを使用する必要は無いと思います。

でもたとえばWordPressの場合、（Custom Field GUI Utilityで設定した）画像用のカスタムフィールドに画像を投稿したとして、保存される画像へのパスはhttpから始まるURLとなってしまいます。

これをそのままphpThumbのsrcに放り込むと当然エラーが帰ってくるわけで、正常に表示させるにはひと手間必要となります。
※以下の記述は「Custom Field GUI Utility ver3.1」を使用したカスタムフィールドに、画像を投稿した場合と想定しています。（「hoge」はそのフィールド名）

<?php
$imagefield = get_imagefield('hoge');
$image_src_array = parse_url($imagefield['url']);
$image_src = $image_src_array["path"];
?>

<img src="http://ドメイン/phpThumb/phpThumb.php?src=<?php echo $image_src; ?>&w=100&h=100&zc=1&q=100" />

parse_urlはURLの構築要素を分解して配列に格納してくれる関数です。くわしくはこちら

これでウェブルートからのパスをsrcに放り込むことが出来ます。