Kaz.A – AGN Web team

PHP版 RSSリーダー（FC2用）

どうもKazです。
とりあえず、BLOGを書きたい。そして連携したいと言うクライアント様には
PC表示時の広告表示が小さい FC2 BLOG をススメておりました。
そして、ホームページと連携する際はfeed2.jsを使ってRSSを表示しておりました。

さて、最近ではFC2 BLOGでもアイキャッチが設定できるという事で、RSSからアイキャッチを表示して見栄えのいい「最新情報」的な物が作れるかなと思ったら
RSSでもAromでも一切吐き出す気配がなく
FC２へ問い合わせたところ
『アイキャッチはRSSに出力されません』
と公式な回答を頂いてしましました…

『FC2ではアイキャッチ表示ができるのに、何で引用すると出ないんだ!?』
と言われる事もあると思うので
アチコチ見て参考にしながら、PHP版ですがFC2用のRSS表示する物を作ってみました。
（PHPは記事の最後にあります）

RSSリーダーのポイント

RSSの取得部分

$url = simplexml_load_file("【RSSのURLを設定】");

1	$url = simplexml_load_file("【RSSのURLを設定】");

クロスブラウザの件を解消する簡単な方法としては、PHPで取得するのが手っ取り早いようです。
JavaScriptに詳しいひとなら、この後をJavaScriptだけで書けるかもしれません。

日付などの整形部分

$timestamp = strtotime( $item->children('http://purl.org/dc/elements/1.1/')->date) ;//更新日の整形
$content = $item->children('http://purl.org/rss/1.0/modules/content/') ;// 記事の取得

1 2	$timestamp = strtotime( $item->children('http://purl.org/dc/elements/1.1/')->date) ;//更新日の整形 $content = $item->children('http://purl.org/rss/1.0/modules/content/') ;// 記事の取得

purl.orgリダイレクトサービスを利用して整形を行います

アイキャッチとして使う画像

記事の一番初めに使われている拡大表示可能なが画像をアイキャッチとして取得します。

if( preg_match_all('/<a([\s\S]+?)>/is', $content, $matches) ){

$img_ct=0; //初期化
$sub_img=array(); //初期化

foreach( $matches[0] as $img ){
    if( preg_match('/href=[\'"](.+?jpe?g)[\'"]/', $img, $m) ){
                $sub_img[$img_ct] = $m[1];
            }
    $img_ct++;
}

if ( is_null($sub_img[0])){}else{$item->thumbnail = $sub_img[0];}

if( preg_match_all('/<a([\s\S]+?)>/is', $content, $matches) ){

$img_ct=0; //初期化

$sub_img=array(); //初期化

foreach( $matches[0] as $img ){

if( preg_match('/href=[\'"](.+?jpe?g)[\'"]/', $img, $m) ){

$sub_img[$img_ct] = $m[1];

}

$img_ct++;

}

if ( is_null($sub_img[0])){}else{$item->thumbnail = $sub_img[0];}

記事中の<a>タグで囲まれている<img>タグをかき集めて、一番初めの物を最終的に取得しています。

この一連の作業を指定回数回して、リストとして出力する事でアイキャッチ付きのRSSを表示できます。

RSSリーダー PHP版(FC2用) DL　fc2rss.php※写真がない場合の画像は、同一ディレクトリ内に「img」フォルダを作ってファイル名を「noimage.jpg」として画像を入れてください。

カスタマイズする事でイロイロと使えると思いますので、試して見てください。

制作事例　塗鈑瓦屋（とばんがや）様

塗鈑瓦と書いて「とばんが」と読む『塗装屋』『鈑金屋』『瓦屋』一緒になった新しい業態の店舗です。
今まで「どこに相談･発注」をすれば良いかお客様で考えてご依頼をしていたと思いますが、塗鈑瓦（とばんが）屋では全て一緒になっていますので悩むことなくご相談いただけます。
お問い合わせフォームに写真を添付できますので、実際の写真を送って詳しく相談することができます。

公開　2017年5月12日
URL　http://tobangaya.com/

●制作内容
•3業態が合わさった事での無駄の少ない金額・施工ができることをアピール。
•写真添付機能付きの問い合わせフォーム採用
•キャラクターにより親近感と興味を持っていただける。
•わかりやすい価格ページ。

男性の顔を女性に変えてみる（2/2）

どうもKazです。
先回までは「美肌」を中心に加工してきましたが
今回は、もっと女子力を上げるために「メイク」まで行っていきます!!では続きをどうぞ!!
続きを読む

男性の顔を女性に変えてみる（1/2）

どうもKazです。
イロイロとバタバタしておりまして、しばらくコチラに記事が書けない状態だったのですが
やっと準備が整いましたので久々に書いていこうと思います。私が記事を書けずにいた頃、Twitterでは「Photoshopを使って男性を女性に加工する」と言ったツイートを多く見かけました。
早速、見に行くと確かに女性っぽくなってはいましたが、ベースの男性の顔が若干女顔に感じられました。
そこで…
「そんな事思うんだったらメッチャおじさまの画像から女性の顔にしてみろ!!」
と約1名…ワタクシから言われましたので加工をしてみました。

少し長くなりそうなので、数回に分かれるかと思いますが
お付き合いください。

続きを読む

WordPressの投稿画面をカスタマイズしよう!!

どうもKazです。
実は、画像加工の記事を準備していましたが
もう少々お待ちいただくとして…

今回は、Wordpressの管理画面にCSSを当てるコツを
自分への備忘録としても書きたいと思います。

一番カスタマイズを必要とするところと言ったらカスタム投稿部分になるかと思います。
そして、だいたいお決まりでAdvanced Custom Fieldsプラグインをインストールしていると思いますので、プラグインを使う前提で説明いたします。

まずは管理画面で専用のCSSを読み込むようにします。

functions.phpへ




		
		
			
			

			
			function my_admin_style(){
wp_enqueue_style( 'my_admin_style', ［管理画面用cssのフルパスURL］);
}
add_action( 'admin_enqueue_scripts', 'my_admin_style' );
			
				
					
				
					1
2
3
4
				
						function my_admin_style(){
wp_enqueue_style( 'my_admin_style', ［管理画面用cssのフルパスURL］);
}
add_action( 'admin_enqueue_scripts', 'my_admin_style' );

※「admin_enqueue_scripts」が管理画面への指定になっていますので、管理画面以外ではこのCSSが読み込まれません。

これで管理画面にCSSファイルを読み込ませることができましたので
マークアップの説明に移ります。

基本的に管理画面全てに読み込まれますので
CSSのリセットから書体の指定まで行うことができます。

カスタム投稿部分のみ指定する場合ですが、
Advanced Custom Fieldsプラグインを使うと、入力ページのbodyタグに
■ bodyタグ「post-type-［ポスト名］」
のタグが付きますので、基本的な設定はこのタグを基本に行うと良いでしょう。

また、各入力項目タイトルと入力項目を1セットとして
■ 入力項目エリア　「field_key-field_［英数字］」
と言うクラスが振られていますので各項目ごとの設定は、このタグを指定してみてください。
一括で指定する場合は「label」にスタイルを設定してもいいです。

入力項目には
■ 入力項目　「acf-field-［フィールド名］」
と言うidが振られますので、CSSを当てやすい感じになります。
もしくは「input」に対して設定をしてもいいです。

背景画像なども使っていくと、初めての方でも入力しやすい登録画面ができますし
レスポンシブなスタイルにも対応できますので
一手間加えて使いやすい画面にしましょう!!

テクニック不要!! レイヤー2枚で写真を仕上げる!!

どもっ。Kazです。
この時期から忘年会や新年会などで人と会う機会がいっそう増えてきますよね。
人が集まるとスマホやデジカメで写真を撮ってデータを渡す機会も多いかと思います。

撮影した写真を後になってチェックしてみると
暗かったり、悪くはないけど今ひとつだったりする写真が多くないですか？

そんな写真を約レイヤー2枚で「いい感じ」に仕上げる方法を紹介します。
この方法なら多くの写真を割と早く仕上げる事も可能です!!

では、いってみましょう!!

【修正前画像】

開いた直後です。ちょっと暗めですよねー
※今回の方法では、RGBのデータで行ってください。

【レイヤー1　スクリーン!!】

背景レイヤーをコピー＆ペーストなどで背景のコピーを作って描画モードを「スクリーン」にします。
だいぶ前に書いた事がありますが、写真を明るくします。
まだ暗いと感じる場合は、明るく感じるまでレイヤーをスクリーンで重ねていきましょう。
ただ、この「スクリーン」で重ねていくと明るくなる反面、色が薄くなっていきます。
暗い写真を明るくした場合も彩度が低い状態になります。
そこで、もう一枚背景レイヤーを使います。

【レイヤー2　オーバーレイ】

先程「もう一枚」追加したレイヤーの描画モードを「オーバーレイ」にします。
すると、黒くなるほど一気に色が濃くなり明るい所は「まっ白」く飛ぶと思います。
なので、不透明度を一旦「０%」にして徐々に上げていきます。
そうすると、薄くなっていた色がシッカリとした色になってきます。
もし、この時点で明るい部分が飛び過ぎている場合は「スクリーン」レイヤを不透明度で薄くするか
複数枚「スクリーン」レイヤーがある場合は削除するか非表示にして加減してください。

この方法で調整を行うと、トーンカーブでの調整やレベルの調整・色相彩度の調整なんかもテクニックや知識不要でできちゃいますので
アクションで各描画モードのレイヤーを作ってしまえば悩むことなく調整ができます。
最近のデジカメは色のバランスは取れていますので、色のバランス調整は必要ないことが多かと思いますが
必要な場合は、今回の調整を行って画像を統合してから「自動カラー補正」を行っても良いかと思います。

早速、手持ちの写真で試してみてください!!

SNSのトップを知る!!

どうも、Kazです。
SNSは何を使っていますか？
そして、そのSNSで最も人気がある『アカウント』は何か…
気になった事はありませんか？

情報の拡散などで使われるSNSですが、トップになるからにはそれなりの理由があるはずです。
その『もっとも人気のあるアカウント』を見て調べることで気づくこともあると思います。

そこで
Facebook、Twitter、Instagramの「いいね!」や「フォローワー数」でのランキングがわかるサイトを紹介いたします！！

続きを読む SNSのトップを知る!!

GoogleMaps：APIキーが必須になってたのね…

どうも、Kazです。
GoogleMaps、使ってますか？

GoogleMapsから共有で作成されたiframeからなるコードを使って埋め込んでいる場合は良いのですが、APIを利用して表示を行おうとしたらこんなエラーが出たりしていませんか？

「エラーが発生しました。このページでは Google マップが正しく読み込まれませんでした。JavaScript コンソールで技術情報をご確認ください。」

ブラウザのコンソールの方では

「Google Maps API error: MissingKeyMapError https://developers.google.com/maps/documentation/javascript/error-messages#missing-key-map-error」

「Google Maps API warning: NoApiKeys https://developers.google.com/maps/documentation/javascript/error-messages#no-api-keys」

のエラーが出ていると思います。

既にご存知の方も多いかと思いますが
GoogleMaps v3へ移行した当初、APIキー不要でイロイロとできたのですが
2016年6月22日から新規サイトでAPIを利用してGoogleMapを表示する際にはAPIキーが必要になりました。

※2016年6月22日前にWeb上にアップされている物に関しては、『今の所』APIキー不要で使用することができるようです。

制作事例　株式会社諏訪建設様

株式会社諏訪建設は大手ハウスメーカーとは違い施工中でもお客さまと密に話し合い、施工後も連絡を頂ければスグに対応し状態を悪化させません。
丁寧な仕事で長くお付き合いされているお客さまもいらっしゃいます。

公開　2016年9月1日
URL　http://www.suwaken.com//

●制作内容
•CMSの導入
•施工実績を読みやすくイメージを感じやすくしています。
•今後の施工基準に対しての取り組みを追加。
•旧サイトよりも写真を大きくイメージしやすくしました。

痒い所に手が届く!?　Chrome機能拡張

どもっ。Kazです。
メインのウェブブラウザは何を使っていますでしょうか？
私の場合は、safariからFierfoxを経てChromeで落ち着いています。
そしてWebの制作をしていくと、アレコレと機能拡張を入れては止め、入れては捨てを繰り返すのですが
その中で、意外と使える機能拡張を紹介していきます。

ユーザーエージェントの切り替えをサクッと行える
『User-Agent Switcher for Chrome』

アクセスするブラウザや端末の違いで表示がどう変わるか、サクッとチェックするにはもってこいの機能拡張です。
初期のプリセットも十分ですが、ユーザーエージェントの追加もできるので入れておくと便利です。

Cookieの管理が簡単
『EditThisCookie』

とにかく「サクっ」とブラウザのクッキーアイコンを押せば現在のCookieの状態を確認する事ができます。
Cookieの値も簡単に変更できるし追加や検索などなど機能も豊富ですので、Cookieを使ったサイト制作には必需品になると思います。

今見ているページを上から下まで画像にしたい!!
『Open Screenshot』

長いランディングページや各Webページの全体を把握したい。修正指示のためにページ全体の画像が欲しいなど
ブラウザのカメラアイコンをクリックすれば「ページ全てをスクリーンショット」するのか「見たままをスクリーンショット」するのかなど選べてサクッと画像にしてくれます。
プリントアウトする時にレイアウトが変わってしまったりする時もサクッと画像にしてプリントすれば崩れる事なく出力できます。

アナリィクスのチェックも簡単。
『Page Analytics (by Google)』

自身でチェック可能なアナリティクスを埋め込んであるサイトにアクセスした時、解析表示がONになっているとページ上部にアナリティクスの数値とグラフをそれぞれに表示してくれます。もちろん項目は変更できるので気になる項目を簡単にチェックできます。
また「今見ているページからドコへのアクセスが多いのか？」色分けやパーセント表示でチェックする事も可能です。
アナリティクスのチェックが多い方には本当に便利な機能拡張です。

よく探してみると、困っている事を解決してくれる機能拡張があったりするので、イロイロと試してみて使いやすいツールに仕上げてみましょう。

オススメがある方は、ぜひコメント欄に!!