【HTML・CSS】画面ロード時に画像表示がちらつく問題!
とても初歩的なミスの話です・・。
Webサイトのページを開くときに、画像ファイルのサイズが定まらず、一瞬だけパッとでっかく表示されてしまう。
これはなぜかというと、cssの記述の仕方が悪かったから・・。
下記のようにcss記述を body 下部に書いていると、cssの反映のタイミングが遅れて、画像サイズのちらつきが起きてしまう。
<head> ・・・ </head> <body> ・・・ <style> <!-- ここにcssを書いていた!--> </style> </body>
下記のようにcss記述を head の内に書くと、最初から画像サイズは正しく反映されます。
<head> ・・・ <style> <!-- ここにcssを書けよな!--> </style> </head> <body> ・・・ </body>
当たり前の話ですよねこれは、アホらし・・。
【PHP】Simple HTML DOM Parserでツイッターカードのimageを読み込む!
Simple HTML DOM Parserでお目当てのサイトの「Twitterカード情報」を読み取って、アイキャッチ画像を抜き取るよ!
コードは以下の通り!
require_once('./simple_html_dom.php'); //お目当てのサイトのHTMLを取得 $html = file_get_html("http://hogege.com/page/1"); //メタタグの「twitter:image」を読み取る $twitter_img = $html->find('meta[name="twitter:image"]', 0); //取得できたかどうかチェック! if ($twitter_img ){ $img_url = $twitter_img->content; echo "imageが見つかりました! ".$img_url ; }else{ echo "imageが見つかりませんでした!"; }
メタタグの「twitter:image」はセットされていないサイトもけっこうあるので、上記のように取得可能かどうかチェックする必要があるね!
以上!
【PHP】TwitterOauthでレスポンスコードを見てエラーを検出!
PHPでTwitterAPIを利用するための便利なライブラリ「TwitterOauth」
API接続時のエラーを検出するには、以下のように「getLastHttpCode()」の値を確認すると良いです。
レスポンスコード200番は成功の証なので、これをチェックします。
require_once("./twitteroauth-master/autoload.php"); use Abraham\TwitterOAuth\TwitterOAuth; $consumer_key = "hogege"; $consumer_secret = "hogegege"; $access_token = "fugaga"; $access_secret = "fugagaga"; //アカウントの有効性を確認 $tw = new TwitterOAuth($consumer_key, $consumer_secret, $access_token, $access_secret); $user = $tw->get('account/verify_credentials'); if ($tw->getLastHttpCode() !== 200){ echo "アカウントに接続できません!"; }else{ echo "アカウント接続成功しました!"; }
「TwitterOauth」のインストールの方法は以下を参考
twitteroauthの使い方(2015年3月時点) - やったこと
ツイッターのレスポンスコードの一覧表は以下を参考
Response Codes — Twitter Developers
以上
【Wordpress】wp_remote_get()で取得したコンテンツが画像かどうか判定!
ワードプレスのwp_remote_get()関数で取得したHTTPリクエストの中の「content-type」をチェックして、コンテンツが画像ファイルかどうかを判定します。
wp_remote_get()の戻り値の中には、こんな感じヘッダ情報が含まれています。
↓
[data:protected] => Array ( [date] => Tue, 30 Aug 9999 00:00:00 GMT [content-type] => image/jpeg [content-length] => 123456 [server] => nginx [cache-control] => max-age=2592000 [s-maxage] => 2678400 [accept-ranges] => bytes [age] => 25668 [last-modified] => Tue, 30 Aug 9999 00:00:00 GMT [expires] => Tue, 30 Aug 9999 00:00:00 GMT [access-control-allow-origin] => * )
この中の「content-type」を読み込んで「image」という文字列がないかどうか、チェックします。
$img_url = "http://hogege.net/hoge.jpg"; $response = wp_remote_get($img_url, array( 'timeout' => 3 )); if( is_wp_error( $response ) ) { echo "応答がありません!"; return false; } if (!isset($response['body'])){ echo "コンテンツがありません!"; return false; } if (strpos($response['headers']['content-type'], 'image') !== false){ echo "画像ファイルです!"; }else{ echo "画像ファイルじゃありません!"; }
すごく適当な方法かもしれないけど、今はこれで良しとします・・。
以上!
【WordPress】データベース操作クラス「$wpdb」のエラー判定の方法!
ワードプレスでDBを操作するときに「$wpdb」って使いますよね?
「$wpdb->insert()」とか「$wpdb->update()」とか「$wpdb->delete()」みたいなあの処理です。
この実行結果のエラー判定をするときは「$wpdb->last_error」の中を見ると良いです。
コードは下記のような感じ。
$insert = $wpdb->insert($table_name, array('title' => $title, 'url' => $url, 'category' => $category)); if ($wpdb->last_error){ echo '情報追加に失敗しました'; }else{ echo = '情報が追加されました'; }
以上!
【javascript】モバイル画面で慣性スクロール中に画面をピタッと止める方法!
モバイルで、画面を縦にスクロールすると、慣性がついてスルーッと移動しますよね。
あれを、移動中にピタッと止める方法です。下記のサイトでかなり無茶な方法で実装しています。
https://jsfiddle.net/prud/umr0qegs/
基本的なコードは以下のような感じ(jQueryで書いてます)
$('body').css('overflow','hidden') setTimeout(function() { $('body').css('overflow','visible') }, 10);
画面に「'overflow','hidden'」を設定して、次の瞬間「'overflow','visible」を設定しなおす。
これをやると慣性移動がキャンセルされて、ピタッと止まるというのです。
なんだかあやしいやり方ですね、何か不具合とかを起こさないか心配です・・。
※P.S.
この処理ですが、わたしの持っているiPhone8のサファリでは、画面が止まりませんね・・。
PCのブラウザのデバッグモードではうまくいくんですが、実機ではダメみたいです・・。
これじゃ、意味ないやん・・。誰かいい方法を知ってる人いたら、教えてくだしあ・・。
以上。
【PHP】Safariアクセス時にURLをゲットすると日本語エンコード部分が大文字になっている!
先ほどちょっといやな現象に悩まされてしまいました・・。
iPhoneの「Safari」でPHPサーバにアクセスをして、サーバ側で「$_SERVER」を参照して、ページのURLを取得したんです。
コードは以下のような感じ。
$current_url = (is_ssl() ? 'https' : 'http') . '://' . $_SERVER["HTTP_HOST"] . $_SERVER["REQUEST_URI"];
このURLですが、URLに日本語が含まれている場合、エンコード部分のアルファベットが「大文字」になっていることがあるみたいです。
(例えば「%e3%81%82」が「%E3%81%82」みたいになっているんです)
PCのChromeでアクセスしたときは「小文字」だったんですが、safariだとこういう動作をしてしまうんですね。
文字列比較によってURLを判定しようとしたんですが、比較に失敗してちょっと困ってしまいました。
日本語が含まれたURLを比較する場合は、大文字・小文字の違いを無視してくれる「strcasecmp」という関数を使うといいですね…。
//↓これはダメ! // if ($url == $current_url){ //↓こっちがイイ! if (!strcasecmp($url, $current_url)){
以上です・・。