FacebookのOGP画像の推奨サイズ

OGPって単語はなんとなく耳には入っていました。Facebook用の何かだよね。
Facebookやってる人多いからなんかそーゆー設定したほうがいいのかなぁとは思いつつ、結局どーでもいーーーとスルーしてたんですが。

ただサムネイル画像に関しては、設定していなかったらランダムに選ばれてしまうので、せっかく自分のサイトが「いいね！」されたのに変な画像がピックアップされてタイムライン(フィード？)に流れてしまう可能性が！
それはなんだかもったいない！
なので、きっちり設定しておこうと相成りました。

OGP画像について調べてみると、仕様がコロコロ変わっている模様。
今年の春には「1500×1500以上の正方形で！」と書いてるサイトがあったけど、
公式のドキュメントを見たら今は「1.91:1の横長」ですね。1200×630以上がいいね！だそうです。

やはりこういうのは随時公式を見ないとダメですね…。
ココに書いてました。「og:image」ってところに書かれています。
https://developers.facebook.com/docs/opengraph/creating-object-types/

で、head内にタグを記述して完了。

<meta property="og:image" content="http://画像のURL">

ちゃんと設定されているかはこちらでチェック。
公式のデバッカー
https://developers.facebook.com/tools/debug/

これでいい感じに画像が反映されます。
う～ん、とてもいいですね…もっと早くやっときゃ良かった。

コメントスパム対策！日本語を使用していない投稿を拒否

オープンソースのCMSである「baserCMS」でサイト構築したんですが、
設置したブログからさっそくコメントスパムが…

最近のスパムってやつは、意味のない英語文字列だけ打ってきたりするんですよね。
何の意味があるのか…。
それだけなら半角英数のみの投稿を弾けばいいんだけども、巧妙に全角スペース1文字入れてきたりする。
キィーッ(#･∀･)

ということで、正規表現を用いて
全角文字(日本語)を連続2文字以上入れないと投稿できない！
としてみます。
国内向けサイトなので、普通にコメントすれば自然と2文字以上は入力するでしょう。
当然ですが日本語のスパムは防げません…。

今回はbaserCMSの例でやりますが、あらゆるフォームで応用出来ると思います。
やり方はわからないけど(笑)

下記ファイルを編集

/baser/plugins/blog/models/blog_comment.php

'message' => array(
array(	'rule'	=> array('notEmpty'),
'message'	=> "コメントを入力してください。")
)

この部分を、

'message' => array(
array(	'rule'	=> array('custom','/[ぁ-んァ-ヶー一-龠、。！？]{2,}/u'),
'message'	=> "コメントを入力してください。")
)

と変更します。

説明

ぁ-んァ-ヶー一-龠、。！？

この部分が許可する文字の範囲。
ひらがな、カタカナ、漢字、句読点、ー！？

数字も許可範囲に入れたいって場合は、0-9や０-９を追記する。

二字熟語が入っていれば許すって場合は、一-龠のみにする。ひらがな、カタカナのみの投稿はお断り。大人向け(？)

{2,}

上記範囲内の文字を2回以上繰り返せばOKという意味。
50文字未満のコメントなどコメントではないという場合は、{50,}とすれば完璧です。ハードルの高いサイト向け。

動作確認

こちらを使わせていただきました。
preg_match()正規表現チェッカー
正規表現の欄に「/[ぁ-んァ-ヶー一-龠、。！？]{2,}/u」と入れて色々な文字列でチェック！

baserCMSについて

シンプルで使いやすいCMSです。
ファイル構成がわかりやすく、私のようにあまりプログラムがわからない人にも優しめ(^O^)

baser CMS - 国産オープンソース！フリー（無料）で『コーポレートサイトにちょうどいいCMS』

htaccessで正規表現を使ったリダイレクト -フォルダ分け-

※Qiitaにも書いた
htaccessで正規表現を使ったリダイレクト - Qiita

サイトの移転や構成を変えた時に使用するリダイレクト。
今回はディレクトリを丸ごと移動した時用のhtaccessメモ。

今まで「西暦+月」でディレクトリを作っていた

/201001/
/201002/
:
:
/201201/
/201202/
:
:

当たり前ですがだんだんフォルダ数が多くなってきて面倒くさい感じに。

こうしたい

/2010/01/
     /02/
:
:
/2012/01/
     /02/
:
:     

これで管理がラクに…！
ということでサイト内お引越し開始。
フォルダを移動させ終わって、あとは古いURLにアクセスがあった際に新しいURLへ転送されるようにする。

.htaccessにこの1行。

RedirectMatch permanent ^/(2010|2011|2012)([0-9]{2})/(.*)$ /$1/$2/$3

これで完了。
この例だと2010～2012年分のフォルダにのみ適用される。

2000年～20XX年までリダイレクトしたいとき

RedirectMatch permanent ^/(20[0-9]{2})([0-9]{2})/(.*)$ /$1/$2/$3

2000年以前のディレクトリもあるとき

RedirectMatch permanent ^/([0-9]{4})([0-9]{2})/(.*)$ /$1/$2/$3

サイトのURLも変わった時

RedirectMatch permanent ^/([0-9]{4})([0-9]{2})/(.*)$ http://移転先URL/$1/$2/$3

基本の形

RedirectMatch permanent 移転前パス 移転後パス

今回のリダイレクトの中身

移転前→ ^/([0-9]{4})([0-9]{2})/(.*)$
移転後→ /$1/$2/$3

正規表現は 数字4桁,数字2桁,全ての文字列　となっています。
この中身を変えれば色々できますね。

その他htaccessに関する記事

Codecademy始めました

はてダからはてブロに引越しました！
と言ってもクリックしただけ(笑)便利ですね～。

最近はJavaScriptをちゃんと勉強しようと思い、ウェブ上で勉強できるCodecademyを始めてみました。
コードの書き方を学ぼう | Codecademy

日本語化されてるはずなんですが…なぜか英語でしか表示されない…

問題が出されてそれに回答していくのですが、全部英語なので大変です。
まだまだ先は長そうですが、ぼちぼちやろうと思います。

twitterの新しいウィジェットをカスタマイズしたメモ

新しくなったという事で。
Twitterブログ: サイト向けに「埋め込みタイムライン」ができました
ウィジェット上から直接リツイートやお気に入り、フォローなどが出来るようになってます。

作成方法

こちらから簡単に設定＆作成ができる。

この設定…「高さ」はあるのに「横幅」の項目がない…。
公式ドキュメントを見ると、
Embedded Timelines | Twitter Developers
作成されたコードのaタグ内に設定を追記すると指定できるとのこと。
さっそく、width="700"と打ち込んだらことごとく無視されましたよ。。

よく見たら横幅は220px〜520pxと書いてあった。
高さは350px以上しか設定できません。

700pxじゃなきゃやだー！！と思ったので
ウィジェット設置後のHTMLを確認(firefoxアドオンのfirebugで)

<iframe id="twitter-widget-1" scrolling="no" frameborder="0" classname="twitter-timeline twitter-timeline-rendered" style="border: medium none;" width="520" height="350">

こう出力されていますね。この中の

id="twitter-widget-1"

これを利用すればいけるんじゃ…？！

cssを書きます。

<style type="text/css">
#twitter-widget-1 {width:700px;}
</style>

これで無事700pxで表示されました！
無理矢理な感じがありますが…。

そのうち自由に設定できるようになるんでしょうか…？

あとさぁ…

日付表示がちょっとおかしいです。
9月月5日　(ﾟДﾟ；
これはそのうち直るよね、きっと…

追記：直りました！