はてなブックマーク

MacでのテキストエディタといえばSublime Textを利用なさっている方も多いのでは無いでしょうか？ Sublime Textはバージョン２が主流ですが、最近になってバージョン3がパブリックベータとしてリリースされ、その動作の軽さに惹かれて早速インストールをしました。 Sublime Text – Download Sublime Textは非常に軽くて使い安い便利なテキストエディタですが、唯一の欠点としてShitf JISやEUCなどの日本語のエンコーディングに対応していません。 昨今のWeb開発では滅多にお目にかかりませんが、CSVファイルや古いHTMLデータを開く場合などにはどうしても必要になります。 Sublime TextではConvertToUTF8というプラグインがリリースされており、こちらを利用することでShiftJISなどのエンコードが利用できるようになります。 s

WordPressでカスタム投稿やカスタム分類を使って、新しく分類や投稿を作成することは簡単に情報が見つかります。 しかし逆に、デフォルトの「投稿」機能から「カテゴリー」や「タグ」といった、 デフォルトで設定されている分類機能を取り外したいといった場合の情報はあまり見つかりません。 そんな時は下記のコードをfunctions.phpに記述して利用します。 function my_unregister_taxonomies() { global $wp_taxonomies; /* * 投稿機能から「カテゴリー」を削除 */ if (!empty($wp_taxonomies['category']->object_type)) { foreach ($wp_taxonomies['category']->object_type as $i => $object_type) { if ($o

INSPIRE TECH > その他 > DISQUSをスマートフォンで利用する場合にも、FacebookやTwitterでのログインを可能にする方法 WordPress等を利用している場合に、コメントシステムとして大変人気のあるDISQUSというコメントシステムがあります。 詳しくは下記のサイトなどをご覧頂くとして、このDISQUSはPC向けだけでは無く、スマートフォンなどでも表示できるモバイルテーマが標準で附属しています。 しかしこのモバイルテーマ、なぜかPC向けと違い、FacebookやTwitterでログインする機能が省略されてしまっています。 かといってPC版のインターフェースをスマートフォンで利用しようとすると、コメント部分は普通に利用できるものの、ログインウィンドウが画面からはみ出してしまい、相当解像度の高いスマートフォンではないとログインに支障がでてしまいます。 投稿の編集

Facebookで利用され初めてから、最近ではmixiやgreeなど日本の大手ソーシャルメディアも対応し、利用者の増え続けているOGPですが、その属性の1つであるog:imageには、複数の画像が利用できることはご存知でしょうか？ OGPっていったい何？という方や、Facebookやmixiのいいね！ボタンは設置してみたけどOGPなんて知らないという方は、下記の記事をご覧ください。 Facebookのいいね！ボタンを設置しても、OGPの設定がされていなければ意味が無い « INSPIRE TECH OGP属性のog:imageは、Webページのサムネイルを示すもので、正しく指定しておくと、例えばFacebookのいいね！ボタンが押された時などに、リンクやその他情報と共に、そのサムネイルがボタンを押した方のウォールに投稿されます。 実はこのog:imageですが、他のOGPタグと違って、以下

WordPress上にてGoogleMapsAPIを利用する必要があったので、比較的使いやすそうなWP-GoogleMapsというプラグインを利用してみたところ、日本語が文字化けしてしまって使い物にならないというバグに遭遇して解決したので、プラグインの紹介とその解決方法を掲載します。 WP Google Maps WP-GoogleMapsプラグインの概要 WP-GoogleMapsは1ブログ1マップという感じで実装するプラグインで、1つのマップの中にいくつでもマーカーを落とし込むことができます。 今のところ1つしかマップが登録できないのですが、ショートコードにidという記載があるため、もしかしたら今後複数のマップの管理などもできるようになるかもしれません。 有償のアドオンが存在する 有償のアドオンが存在し、アドオンを導入することで、 ・デフォルトのマーカーアイコンの変更 ・マーカー毎のア

宮﨑 Commented on 2011.12.26 21:13 家富様 度々ブログ拝見しております。(いつも有用な情報ありがとうございます！) 一つご質問があります。 wordpressにて”カスタムメニューに画像を使うためのコード”の投稿に関してなのですが、マウスオーバーした際の画像も表示するためには、どのようにすればよろしいのでしょうか？ 知識不足な者ですが、どうぞご教授の程よろしくお願い致します。 家富 正幸 Commented on 2011.12.27 13:01 宮崎様、コメントありがとうございます！ マウスオーバーをした際に画像が切り替わるようにするためには、大きく分けて2種類の方法があるかと思います。 1つは、CSSの:hover疑似クラスを利用して背景画像を切り替える方法、そしてもう1つは、JavaScriptを利用して画像を切り替える方法です。 本記事のように直接画像

links for 2011-07-06 » HTML5 - Pingbacked on 2011.07.07 04:01 [...] Facebookのいいね！ボタンに管理用ページを表示できるのは、og:typeがarticle以外の時だけ « INSPIRE TECH (tags: facebook 2011 july) [...] conseguir backlinks Pingbacked on 2014.06.13 14:46 conseguir backlinks Facebookのいいね！ボタンに管理用ページを表示できるのは、og:typeがarticle以外の時だけ sillas en linea Pingbacked on 2014.06.16 18:46 sillas en linea Facebookのいいね！ボタンに管理用ページを表示できるのは、og:typeがar

Facebookのコメントプラグインは設置も簡単で、さらにフィードバックも得られやすい素晴らしいソーシャルプラグインだと思いますが、ちょっとした設定を加えるだけで「コメントの管理画面」を表示できるので、その方法を簡単にまとめてみました。 以下は何も設定していないFacebookのコメントプラグインです。 コメントができる以外に、特に機能はありません。 ここで、ちょっとした設定を加えるだけで下記のような、コメントのモデレーションやコメントプラグインの挙動を設定できる、管理画面を表示することができます。 fb:adminsを指定する まずは自身がWebサイトの管理者であることをコメントプラグインに知らせるために、OGPの属性であるfb:adminsを指定します。 OGPってなんぞ？という方は、下記の記事を参照ください。 Facebookのいいね！ボタンを設置しても、OGPの設定がされていなけれ

CakePHPではデバッグレベルが2の場合、レンダリングした画面の下部に発行したSQLのログを表示してくれます。 この機能は非常に便利ですが、本番環境などでデバッグレベルを0にしていると、発行したSQLを確認する手段がありません。 本番環境で何かしらデータベースエラーが発生した場合に、発行されているSQLを確認したいと思っても、そのままでは方法が無いのが現状です。 そこで、利用しているデータベースのドライバクラスを改良して、CakePHPのデバッグレベルに関わらず、発行したSQLをログファイルに保存できるように改造してみます。 ロギング用のデータベースドライバを作成 CakePHPのコアファイルに手を入れるのは避けたいので、データベースのドライバクラスを継承したログファイル保存用のドライバクラスを作成します。 ここではMySQLを利用する場合を想定します。 他のデータベースを利用している場

以前に作成した、特定のURLへのTwitterの投稿を一覧で取得できるjQueryプラグインを、さらに改造してみました。 前回のプラグインではツイートが多くなっても、100件までは全て取得して表示するような仕組みになっていたため、そのまま表示してしまうとページが縦に異常に長くなる現象が発生していました。 そこで、今回の改造で1ページに表示する件数を指定可能にし、さらにページネーションの仕組みを取り付けてみました。 ソースコード 利用方法 ツイートの一覧を表示したいDOMオブジェクトを用意し、下記のように利用します。 $('#tweets').twitterTrackback(); オプション 下記のように、twitterTrackbackメソッドにオブジェクトを渡すことで、動作オプションを指定できます。 $('#tweets').twitterTrackback({ exclude: [

デベロッパー登録 Facebookのいいね！ボタンを利用する場合、スパム対策ということで利用するFacebookアカウントでのデベロッパー登録が必要になります。 デベロッパー登録に関しては下記サイトに詳細がありますので参照のこと。 Facebookのいいね！ボタンやコメント欄の設置 – 徹夜族 いいね！ボタンを配置するスクリプトを取得 下記のURLにアクセスして、Get Like Button Codeと記載されているフォームに必要な事項を入力します。 Like Button – Facebook開発者 各入力フォームの詳細は下記の通り。 URL to Like? いいね！ボタンを設置するURLです。 SendButton (XFBML Only) 特定の人にだけ「いいね！」を通知したい場合に利用する「送信」ボタンを追加します。 Layout Style いいね！ボタンの表示スタイル（いい

INSPIRE TECH > その他 > WordPressで簡単にOGPタグを実装できるWP-OGPプラグインを設定画面付きに改造してみた。 WordPressで非常に簡単にOGPが実装できることで有名な、WP-OGPプラグインというものがあります。 WordPress › WP-OGP « WordPress Plugins 自分もFacebookのいいね！ボタンを導入したときに試してみたんですが、ブログ名やブログの記事タイトルはもちろん、ブログ記事にアイキャッチ画像を指定すれば、そのアイキャッチ画像をブログ記事のサムネイルとしてOGPタグを生成してくれたりと、非常に便利です。 ただ、アイキャッチ画像が存在しない場合に利用される、デフォルトのサムネイル画像が変更できなかったり（変更するにはプラグインに含まれるファイルを差し替える必要がある）、Facebook用のOGPタグであるfb:a

IEを含めた最近のブラウザでは珍しくなくなったinline-block。 このinline-blockを利用する場合に発生する「隙間」を改善する方法です。 原因は改行コード 下記のようなHTMLを用意しました。 リストタグを使ったインラインブロックを実現しようとしています。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>inline-block

Facebook Url Linter – ForoGeek Pingbacked on 2012.03.07 16:45 [...] Facebook Url Linter na web: How can I verify and debug the OG tags I— Facebook is a social utility that connects people with friends and others who work, study and live around them. People use Facebook to keep up with friends, upload an unlimited … https://developers.facebook.com/tools/debug – ver OGPã��設å®ããã��ã-ã¾ãFacebookã®UR

Facebookのいいね！ボタンがとても流行していますが、いいね！ボタンの真の力を発揮させるためには、Open Graph Protocol（OGP）の設定が不可欠なのはご存じでしょうか？ 今回はOGPとは何なのか、どのように設定すれば良いのかを調べてみました。 OGPとは？ OGPとは一言で言うと、そのWebサイトのタイトルやWebサイトの説明、制作者の情報やWebサイトの種別などを、ソーシャルメディア側から正しく認識できるように決まった形で記述しておく仕組みを作ろう、というものです。 OGPについての説明は下記サイトが非常にわかりやすく詳細に載っていますので、OGPを知らない方は是非目を通して下さい。 フェイスブック、ミクシィ、グリーで使われている OGP (Open Graph Protocol) とは何か – IT戦記 Facebookのいいね！ボタンはOGPが必須 タイトルにも記