以前、テキストエリアのフォームパーツにリッチエディタ機能が導入出来る、CKEditorとCKFinderについて紹介しました。
こんな素敵なエディタ機能を意図も簡単に導入出来るわけですから、
なお、誤解の無いように先に言っておきますと、エディタ機能を携帯に導入するわけではなく、
です。
せっかく導入したCKEditorとCKFinderですが、携帯・スマホ向けに表示させるにはちょっとした工夫が必要になります。
CKFinderも合わせて導入すると、画像をアップロードした後にサーバーブラウザーにアクセスすると サムネイルが生成されます。
PC用で使った画像をそのまま携帯に表示させるのはちょっとね～・・
と、いうことで自動で生成されるサムネイルファイルを携帯端末用に利用してしまおう！
config.phpの97行目付近でメインで生成されるサムネイルの設定を行うことが出来ます。サムネイルサイズの設定はこちらで行えばOKです。
$config['Thumbnails'] = Array( 'url' => $baseUrl . '_thumbs', 'directory' => $baseDir . '_thumbs', 'enabled' => true, 'directAccess' => false, 'maxWidth' => 150, 'maxHeight' => 150, 'bmpSupported' => false, 'quality' => 80);
後は出力部分。この出力時にコツがあり、$hoge[‘Model’][‘text’]の中にCKFinderからの画像も含まれるテキストだとしたら、
$hoge['Model']['text'] = preg_replace('/(\]+)(style\=\"[^\"]+\")([^>]+)(>)/', '${1}${3}${4}', $hoge['Model']['text']);
echo str_replace("/images", "/_thumbs/Images", $hoge['Model']['text']);
こうすることで、PC用に投稿された画像を、サムネイル画像に変換しつつ、重要なのが
これをやらないと PC画像用に引き伸ばされたスタイルが当てられらままになるのです。
絵文字機能がCKEditorには用意されていますね。本物の携帯絵文字に変換してくれるわけではないのですが、PC用には絵文字画像が表示されて、携帯では表示されないのは残念なので、対応させるには、以下のフォルダに
_thumbs/Imagesフォルダを追加します。
ckeditor/plugins/smiley/フォルダに、絵文字画像が全て含まれているので、ディレクトリの中身をコピーし、先ほど追加したこちらのディレクトリに設置すればOK！
GDでちょっと便利だと思ったのでメモ。ようは、テンポラリからもファイルのピクセルサイズが取得できればよいよ、ってなわけ。
前回GDを利用したフォームから画像をアップロードした際に、自動でリサイズされるやり方を紹介したのですが、
です。便利便利。
<input type='file' name='image' class="file_1" id="file_up"/>
$size = GetImageSize($_FILES["image"]['tmp_name']); print_r($size);
Array
(
[0] => 300
[1] => 40
[2] => 2
[3] => width="300" height="40"
[bits] => 8
[channels] => 3
[mime] => image/jpeg
)
これをうまく利用してあげれば、ユーザーからのファイルのアップロードに対して
な～んてことも出来ますね！
と、いうのが今回のミッションです。
こんな風に、希望した比率と合わないものは、余白をつけ、1pxのずれもなく、希望通りの画像サイズになるようにGDを駆使します。
GDとは、画像をいい感じにリサイズしたり、フィルタをかけたり、Photoshopみたくレイヤー重ねたりしちゃうPHPのライブラリのことです。
アップロード用のフォームはこんな感じ。
ファイルアップロードのフォームにはmultipart/form-dataをお忘れなく
(さっきうっかりフォームにmultipart/form-dataを入れ忘れて、アップロードされない！って焦りましたｗ)
<form method="post" name="company" action="./upload.php" enctype="multipart/form-data"> <input type="file" name="image"> <input type="submit" value="決定" /> </form>
では、比率を維持したまま、リサイズしつつ、比率維持したことで足りない部分は白い画像で埋めるやり方です。
$dir = "./upload/"; //アップロード用のディレクトリ
if (is_uploaded_file(@$_FILES["image"]["tmp_name"])) {
// ファイル名の文字コードを変換する
$file1 = $dir.$_FILES["image"]["name"];
// テンポラリファイルを保存ディレクトリにコピー
copy($_FILES["image"]["tmp_name"],$file1);
$rename = "image.jpg";
rename("$file1",$dir.$rename);
}
$file1 = $dir.$rename; // 元画像ファイル
$in = ImageCreateFromJPEG($file1); // 元画像ファイル読み込み
$size = GetImageSize($file1); // 元画像サイズ取得
$width = 300; // リサイズしたい画像サイズ(width)
$height = 400; // リサイズしたい画像サイズ（height）
$ratio_orig = $size[0]/$size[1];//元画像の比率計算
/*画像の比率を計算する*/
if ($width/$height > $ratio_orig) {
$width = $height*$ratio_orig;
} else {
$height = $width/$ratio_orig;
}
/*画像の生成ここから*/
$out = ImageCreateTrueColor($width, $height);
ImageCopyResampled($out, $in, 0, 0, 0, 0, $width, $height, $size[0], $size[1]); // サイズ変更・コピー
//出力先の画像を作成
// 画像ファイル読み込み（ベース画像）
//もしリサイズしたい画像の大きさが300px×400pxなら、その大きさの画像を準備
$img = ImageCreateFromJPEG("./white.jpg");
ImageCopy($img, $out, 0, 0, 0,0, $width, $height); //ベース画像にアップロードしたリサイズ画像を合体させる
ImageJPEG($img, $file1); //最後に合体した画像を保存して終了
//メモリ開放
ImageDestroy($in);
ImageDestroy($out);
ImageDestroy($img);
CakePHPでcomponentsにfunctionを書いて、controllersにその値をreturnしよう、値は複数。
PHPはfunction内に複数の変数を入れて、その全てをreturnすることは無理なようで、どうしても複数値をreturnしたい場合は配列化して、リストで渡すとよいそうです。
function small_numbers()
{
return array (0, 1, 2);
}
list ($zero, $one, $two) = small_numbers();
へ～、そうなんだ。覚えておこう。
私はなるべく管理画面を使わずに、楽にWordPressを更新したいです。
以前TweetでWordPressを更新するプログラムを作ったことがありますが、今回のプログラムはそのFacebookページ版。
しかもFacebookページの場合、Twitterのように短縮URLに変換されることもなく、非常に簡単で２時間ほどでプログラムが作れました。
そんなわけでここにそのプログラムと、設置方法を残しておきますので ご自由に使って下さい。
元はTweetのログを残したり、Tweet画像を残して手軽な写真ブログとしていたのですが文字数の制限や、短縮URLの変換で非常に重たいこともあり、より手軽に出来そうなFacebookページで対応することにしました。
なお、例のごとく私はPEARにありきでDBの処理を行うので(ダメ？)PEAR:MDB2が必要です。
このサイトは元々1Tweetを1ブログとして残していましたが、ぼちぼちアクセスがありました。
TwitterやFacebookはタイムラインですから いつかはデータが古くなり、いつか見えなくなりますが それらをWordPressに残すことで意外なアクセスになったりしますし、自分のブログの紹介記事も書いておけば、ちょっとしたSEO効果も期待できると思います。
このプログラムの設置方法ですが、WordPressがあらかじめインストールされているサーバーの、閲覧可能ディレクトリであれば何でもかまいません。
これが出来ればどこでもいいんです。
例のごとく私 Mysqlの接続はPEARまかせなので。
こちらはFacebookページをRSSで取得して、データベースに登録しやすいようにフォーマットを変えるプログラム
ini_set('user_agent', 'Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.5; en-US; rv:1.9.1.3) Gecko/20090824 Firefox/3.5.3');
//フィードを取得したいRSSのURLを記述
$contents = file_get_contents('https://www.facebook.com/feeds/page.php?format=rss20&id=FacebookページのID');
//XMLをオブジェクトに変換
$xml = simplexml_load_string($contents);
//連想配列作成用に、新規で空の配列を用意する
$rss = array();
for ($i = 0; $i <= 15; $i++) {
@$rss[$i]['title'] = (string)$xml->channel->item->$i->title;
@$rss[$i]['description'] = (string)$xml->channel->item->$i->description;
@$rss[$i]['description'] = (string)$xml->channel->item->$i->description;
preg_match("|<a href=\"(.*?)\".*?>(.*?)</a>|mis",$rss[$i]['description'],$matches);
@$rss[$i]['url'] = $matches[2];
$title = explode("<br />", $rss[$i]['description']);
@$rss[$i]['title'] = $title[0];
$hoge_title = explode(":", $rss[$i]['title']);
$category = urlencode($hoge_title[0]);
@$rss[$i]['category'] = $category;
@$rss[$i]['real_title'] = $hoge_title[1];
@$rss[$i]['description'] = str_replace ('s.jpg', 'n.jpg', $rss[$i]['description']);
@$rss[$i]['pubDate'] = (string)$xml->channel->item->$i->pubDate;
//日付フォーマットを変更
$date = strtotime($rss[$i]['pubDate']);
//UNIXタイムスタンプをフォーマットに変換
$date = date("Y-m-d H:i:s",$date);
$rss[$i]['pubDate'] = date("Y-m-d H:i:s",strtotime("$date +7 hours"));
@$rss[$i]['link'] = (string)$xml->channel->item->$i->link;
}
こちらは取得したFacebookページRSSをDBに登録するプログラム
include_once('rss.php');
require_once 'MDB2.php';//ライブラリのロード
//DSN うまくいかない場合はmysqliでも試して見て下さい
$db = "mysql://ユーザー名:パスワード@localhost/データベースの名称?charset=utf8";
//接続
$mdb2 =& MDB2::factory($db);
//フェッチモード設定
$mdb2->setFetchMode(MDB2_FETCHMODE_ASSOC);
//SQL文発行
$sqlStr = "select * from wp_posts order by post_date desc limit 1";
$res = $mdb2->queryAll($sqlStr);
$update = $res[0]['post_date'];//最終投稿の日付取得
//print_r($update);
foreach($rss as $val => $view){
if($update < $view['pubDate']){
$mdb2->exec("INSERT INTO `wp_posts` (`post_author`, `post_date`, `post_date_gmt`, `post_content`, `post_title`, `post_excerpt`, `post_status`, `comment_status`, `ping_status`, `post_password`, `post_name`, `to_ping`, `pinged`, `post_modified`, `post_modified_gmt`, `post_content_filtered`, `post_parent`, `menu_order`, `post_type`, `post_mime_type`, `comment_count`) VALUES
(1, '{$view['pubDate']}', '{$view['pubDate']}', '{$view['description']}', '{$view['real_title']}', '', 'publish', 'open', 'open', '', 'test', '', '', '{$view['pubDate']}', '{$view['pubDate']}', '', 0, 0, 'post', '', 0)");
$sql2= "select * from wp_terms WHERE slug = '{$view['category']}' LIMIT 1";
$res2 = $mdb2->queryAll($sql2);
$sql3= "select * from wp_posts ORDER BY ID DESC LIMIT 1";
$res3 = $mdb2->queryAll($sql3);
$sql6=<<< EOF
INSERT INTO `wp_term_relationships` (`object_id`, `term_taxonomy_id`) VALUES
("{$res3[0]['id']}", "{$res2[0]['term_id']}")
EOF;
$mdb2->queryAll($sql6);
$sql4=<<< EOF
SELECT COUNT(*) FROM wp_term_relationships WHERE `term_taxonomy_id` = "{$res2[0]['term_id']}";
EOF;
$count = $mdb2->queryAll($sql4);
$sql5=<<< EOF
UPDATE `wp_term_taxonomy` SET `count` = "{$count[0]['count(*)']}" WHERE `wp_term_taxonomy`.`term_taxonomy_id` = "{$res2[0]['term_id']}";
EOF;
$count = $mdb2->queryAll($sql5);
}
}
プログラム自体長いですが、設定するところは
これだけです。
現在目下趣味で制作中のレスポンシブウェブデザインのまとめサイトを作っています。
この手のまとめサイトを作るといつも気になるのがWEBサイトのキャプチャ画像をお手軽に作る方法です。
いえいえ、この手のAPIが存在していることははなから百も承知。問題はキャプチャしたサムネイルの画像URLが外部APIサービスのURLになってしまうこと。
この手のキャプチャサービスは、サーバーに相当な負荷がかかるため、しかも無料で運営されておりいつか使っているサムネイルのキャプチャサービスが無くなる可能性だってありますし、自分のサーバーに画像を保存しておかない限り、自サーバーにキャッシュ化させるのも難しいですね。
前置きが長くなりましたが、ずるい方法でキャプチャ画像を自サーバーに保存する最も簡単で最もずるい方法です。
たった5行。
if (file_exists('./img/hoge.jpg')){
} else{
$imgdata = file_get_contents("http://capture.heartrails.com/400x300?http://www.kaasan.info/" , FILE_BINARY);
file_put_contents("./img/hoge.jpg" , $imgdata);
}
キャプチャファイルの存在をfile_existsでチェックし、存在しなければキャプチャファイルを取得します。
file_get_contents関数でファイルを取得(外部APIサービスで一度作成された画像ファイルのURL)して、自分のサーバーにfile_put_contentsで設置する。
たったのこれだけで自分のサーバーにキャプチャ画像を保存することが出来ました。
簡単ですね！
FacebookのページをRSSで取得してPHPで表示したいと思います。最終的には取得したRSSを利用してWordPressを更新できないかな、と思っています。
このブログは今年の6月に入ってからようやくFacebookページを立ち上げました。
このページのRSSフィードのURLは以下になります。
FacebookのウォールのURL 15桁の数字の部分がIDです
と、思ったのですが、すぐにはうまくいきません。
Open SSLをPHPで扱えるようにするにはphp.iniを変更しなくてはいけません。
以下の記述をコメントアウトを外すか、無ければ;extension=○○ の記述がたくさんあるところに追加し、Apacheを再起動すればOK。
RSSフィードをPHPのfile_get_contentsで呼び出しします。
$contents = file_get_contents('https://www.facebook.com/feeds/page.php?format=rss20&id=255192127915660');
・・・はい？？file_get_contentsでフィードのURLを取得するとこのような表示になります。
この問題は意外と簡単に解決できるようで、ini_setでuser_agentを指定してあげます。
ini_setなので、一番最初に以下コードを書いてあげます。
ini_set('user_agent', 'Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.5; en-US; rv:1.9.1.3) Gecko/20090824 Firefox/3.5.3');
ini_set('user_agent', 'Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.5; en-US; rv:1.9.1.3) Gecko/20090824 Firefox/3.5.3');
//フィードを取得したいRSSのURLを記述
$contents = file_get_contents('https://www.facebook.com/feeds/page.php?format=rss20&id=255192127915660');
//XMLをオブジェクトに変換
//連想配列作成用に、新規で空の配列を用意する;
$xml = simplexml_load_string($contents);
for ($i = 0; $i <= 9; $i++) {
echo (string)$xml->channel->item->$i->title;
echo (string)$xml->channel->item->$i->description;
echo (string)$xml->channel->item->$i->pubDate;
echo (string)$xml->channel->item->$i->link;
}
ここまで出来るようになると、自分のデータベースに取得したRSSを登録するなんて簡単そうですね。
1点素晴らしいとおもったのはOGPもちゃんと取得しているという点。なかなか便利に使えそうです。
この地味な問題なのですが、たまに出くわします。
当たり前かもしれませんが、同じ文字でも大文字か小文字かで２つの文字を比べるとfalseになりますね。
if('orange'=='ORANGE'){
echo 'TRUE';
}else{
echo 'FALSE';//結果はFALSE
}
そこで、大文字と小文字をどちらかに統一してあげれば 大文字か、小文字かを気にせず正しく判定することが出来ます
//両方を小文字に統一
if(strtolower('orange')==strtolower('ORANGE')){
echo 'TRUE';//結果はTRUE
}else{
echo 'FALSE';
}
Open Graph protocolを超簡単にパースするスクリプトを見つけましたのでご紹介します。
割と最近までOGPの存在すら知らなかったのですが、FacebookなんかであるURLをシェアしたり、タイムラインの中にURLを書き込んだりすると
こんな風に写真やちょっとしたテキストが表示されます。
それがOGPですね。
タイムラインなど、URLがシェアされたとき ここぞ、と言うところの画像やテキストを指定します。
ヘッダー内に書くのが基本ですね。
これはある日あるときの私のTweetpicのOGP情報です。
こんな風に、metaタグとして、ヘッダーに書いてあげまず。
<meta property="og:title" content="A photo from @chihiro_kaasan"/> <meta property="og:type" content="twitpicfbapp:photo" /> <meta property="og:url" content="http://twitpic.com/ajyzdp"/> <meta property="og:image" content="http://twitpic.com/show/thumb/ajyzdp"/> <meta property="og:site_name" content="TwitPic"/> <meta property="fb:app_id" content="331538683530736" />
では、OGPを取得するにはどうすればいいでしょうか？
このOpenGraph.phpを使えば、画像はもちろんURLやサイト名などのOGP情報を簡単に取得することが出来ます。
何と、ワンツーステップ！OpenGraph.phpを読み込んで、URLを指定するだけでパース完了！
(なんともおいしそうな豚の角煮のレシピ：クックパドより)
//OGPを簡単パースするOpenGraphを読み込み
require_once('OpenGraph.php');
//URLを指定
$graph = OpenGraph::fetch('http://cookpad.com/recipe/1606942');
するとオブジェクトで結果が返ってきます。
OpenGraph Object
(
[_values:OpenGraph:private] => Array
(
[type] => cookpad:recipe
[title] => やわらか豚の角煮を簡単に by mi0921
[description] => 【話題入り・つくれぽ300件感謝です♡】圧力鍋無しでOK。とろとろ〜★もちろん箸で切れます！煮る時間は約２時間！
[image] => http://d3921.cpcdn.com/recipes/1606942/120x120c/8c530792c847977d1ecdf281ba5ec170.jpg?u=3586013&p=1322668071
[url] => http://cookpad.com/recipe/1606942
)
[_position:OpenGraph:private] => 0
)
オブジェクトですので、HTML中に表示してあげるなら以下のようにします。
<p><?php echo($graph->title);?></p> <img src="<?php echo($graph->image);?>" />
とっても簡単ですね。
これを使いこなせば、Facebookのようなコメント機能やOGPを利用したちょっとしたWEBサービスなど作れそうでいいですね！
OGPが世の中にもっと普及しますように！
phpinfo()からも確認できるようなのですが、PHPのセーフモードかCGIモードか一発で確認できる関数が用意されているようなので、そのメモ。
使い方は簡単で、TRUEかFALSEの真偽値を返すので
if(ini_get('safe_mode')){
debug('セーフモード');
}else{
debug('CGIモード');
}