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

メモ。

「いいね！」ボタンが押された瞬間、こちらが用意しているスクリプト（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ではなく、登録時に連番で割り当てられる番号のことを指します。

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

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

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

■主な変更箇所

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

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

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

【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に変換する方法です。

変換には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
  ・・・

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

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

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

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

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

PIEダウンロードサイトへ

【追記】

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

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

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

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

MTOSダウンロードページ

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

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

カテゴリ管理について

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

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

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

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

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

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

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

それは並び替え機能！

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

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

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

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

フォルダ管理

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

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

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

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

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

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

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

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

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

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

↓

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

↓

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

(つд⊂)ｺﾞｼｺﾞｼ

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

・・・

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

なんじゃそりゃ！

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

バグですね、こりゃ。

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

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

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

ダウンロードサイト

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

いろいろと調べた結果。

<?php wp_head(); ?>

<?php wp_footer(); ?>

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

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

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

なお、使い方については

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

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

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

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

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

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

1. ダウンロードしてきた「phpThumb_xxx.zip」を解凍します。
2. 「phpThumb_xxx」というフォルダが出来るので、「phpThumb」と名前を変更し、そのフォルダを丸ごとサーバにアップロードします。
3. サムネイルを表示したい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に放り込むことが出来ます。

参考サイト

• WordPress ポストのサムネイルは phpThumb() で - tanigami.jp
• WordPressのArthemiaテーマのサムネイル自動作成とXreaサーバとtimthumb.phpとphpThumb.phpに関する厄介な問題 | メシウマ状態　飯の旨いおかずがてんこ盛り
• Custom Field GUI Utility 3 - WordPress プラグイン - かたつむりくんのWWW
• PHP: parse_url - Manual

ちょっとつまったのでメモ。

WordPressには簡単にメールフォームを作れる「Contact Form7」なる便利なプラグインがあるんですが、エラーメッセージや送信完了メッセージの表示位置がおかしい。

どこに表示されるかというと、デフォルトでは送信ボタンの直下に表示されます。

できればフォームの一番上に表示したい！

ということで、どうにかする方法を探していたら、こんな記事を見つけました。

Contact form7　送信後に現れるメッセージを最下部以外に表示させる

Contact Form7の編集画面にて、[response]を任意の場所に記述すると、そこにメッセージが表示されるようになります。

例）

2012.06.30　バージョンアップしました。（version1.4b4）

2011.11.11　バージョンアップしました。（version1.4b3）

2011.08.13　バージョンアップしました。（version1.4b2）

複数版同様、個別版でも、住所から取得した座標はサーバーにキャッシュ（CSV形式）として残す仕様となりました。

スクリプトをダウンロードする

サンプルを見る

注意点

今回のバージョンではPHPも使用しております。もしPHP5.2以上が利用できないサーバをご利用の場合は、申し訳ございませんが、このバージョンは使用しないでください。

またサーバのPHPの設定（php.ini）で「allow_url_fopen」が有効になっていないと利用できませんので、こちらもご注意ください。

なお、PHPを使用するといっても、AJAXリクエストで実行させているだけなので、実際にマップを表示するページをPHP化させる必要はありません。

※作った直後でまだ十分な実験を行えていないので、このバージョンを使用する際は、よく動作をご確認の上、ご利用ください。

※現在ではv3でもAPIキーが必要となっています。
https://developers.google.com/maps?hl=ja

(さらに…)