やったこと

webサービスを作るときに考えたことを垂れ流します

【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」を設定しなおす。
これをやると慣性移動がキャンセルされて、ピタッと止まるというのです。

なんだかあやしいやり方ですね、何か不具合とかを起こさないか心配です・・。

※Ｐ.Ｓ.
この処理ですが、わたしの持っているiPhone8のサファリでは、画面が止まりませんね・・。
ＰＣのブラウザのデバッグモードではうまくいくんですが、実機ではダメみたいです・・。

これじゃ、意味ないやん・・。誰かいい方法を知ってる人いたら、教えてくだしあ・・。

以上。

【PHP】Safariアクセス時にＵＲＬをゲットすると日本語エンコード部分が大文字になっている！

先ほどちょっといやな現象に悩まされてしまいました・・。

iPhoneの「Safari」でPHPサーバにアクセスをして、サーバ側で「$_SERVER」を参照して、ページのURLを取得したんです。

コードは以下のような感じ。

$current_url = (is_ssl() ? 'https' : 'http') . '://' . $_SERVER["HTTP_HOST"] . $_SERVER["REQUEST_URI"];

このＵＲＬですが、ＵＲＬに日本語が含まれている場合、エンコード部分のアルファベットが「大文字」になっていることがあるみたいです。
（例えば「%e3%81%82」が「%E3%81%82」みたいになっているんです）

ＰＣのChromeでアクセスしたときは「小文字」だったんですが、safariだとこういう動作をしてしまうんですね。

文字列比較によってＵＲＬを判定しようとしたんですが、比較に失敗してちょっと困ってしまいました。

日本語が含まれたURLを比較する場合は、大文字・小文字の違いを無視してくれる「strcasecmp」という関数を使うといいですね…。

 //↓これはダメ！
 // if ($url == $current_url){ 

//↓こっちがイイ！
 if (!strcasecmp($url, $current_url)){

以上です・・。

Safariで上部固定のメニューバーがうまく表示されない！

画面スクロールに追随して、上部に固定表示されるメニューバーってありますよね？

あれを作成してみたんですが、「ウィンドウズ用Safari」のブラウザでうまく表示されなくて、困ってしまいました。

メニューのフレーム自体はちゃんと上部に固定表示されるんですが、その中身がのっぺらぼうになってしまい、描画されていない様子。

ChromeでもFirefoxでもちゃんと表示されるのに「Safari」でだけ起きてしまうこの現象。

解決方法は、stack overflowのこのページに書いてある方法でいけました。
css - iOS 9 Safari: changing an element to fixed position while scrolling won't paint until scroll stops - Stack Overflow

メニューを固定表示にするタイミングで付与するcssに「-webkit-transform: translateZ(0)」なるものを付け加えました。

.menu-fixed {
  -webkit-transform: translateZ(0);
}

これを付けるとSafariのブラウザで、メニューの切り替わり時に内部のコンテンツを再描画してくれるようになるのだそうです。

なんじゃそりゃ、へんなの・・。

Barba.jsで指定したページをプリロードする！

Pjaxを使ってゴリゴリと画面遷移するページが作れる便利なライブラリ「Barba.js」

このBarba.jsで、指定したURLのページをプリロードしてキャッシュさせる方法です！

下記のようなコードでできます！

//読み込むページのURL
var url = "http://hogege.com/page/1";

//Barba.js起動
Barba.Pjax.init();

//すでに読み込み済みか確認
xhr = Barba.Pjax.Cache.get(url );

if (!xhr) {
  //もし読み込んでなかったら読み込み開始
  xhr = Barba.Utils.xhr(url );
  Barba.Pjax.Cache.set(url , xhr);
}

以上です！

【ＰＨＰ】Simple HTML DOM Parserでゲットした要素が目当てのclassを保持しているか確認！

HTMLの要素を操作できる便利なDOMパーサ「PHP Simple HTML DOM Parser」

これを使ってゲットしたDOM要素が、お目当てのclassを保持しているかどうかを確認する方法です。

//ライブラリ読み込み！
require_once ('/simple_html_dom.php');

//テスト用のHTMLを与える！
$html = str_get_html($test_html);

//hogeというidを持つ要素をゲット！
$element = $html->find('#hoge')[0];

//activeというclassが付いてるか確認！
if(strpos($element->class, 'active') !== false){
  echo 'activeが付いてる！';
}
$html->clear();

こんな風にclassのプロパティの中身を文字列検索する方法しか思いつきませんでした・・。
本当はもっと便利な方法があるのかもしれませんが、いったんはこの方法で良しとしておきます・・。

以上！

ツイッターAPIの仕様変更、急にログインができなくなったゾ！

先日、我がサイトのTwitterログイン機能が急に使用不能になってしまってあせりました・・。

Twitter APIが下記のようなエラーを返して認証を受け付けてくれなくなってしまいました・・。

"code":415,"message":"Callback URL not approved for this client application. Approved callback URLs can be adjusted in your application settings"


どうも、2018年6月13日ごろくらいからTwitter APIの仕様変更があったらしく、ツイッターアプリの「Callback URL設定」をしっかりしないと、ログインエラーを返されてしまうようになってしまったみたいです・・。


でもおかしいな、ちゃんとコールバックURLの設定をしていたはずなんだけどな・・。

ツイッターアプリの設定画面見てもコールバックはちゃんと設定されている・・。
「http://xxxx.com/auth/callback」

もしやと思って下記のようにＵＲＬを変更してみました・・。
「http://xxxx.com/auth/callback/」

そうしたらちゃんとログインできるようになった！
そうですか・・。スラッシュ「/」が足りなかったというわけなんですか・・。

厳しすぎんよツイッターAPI・・。

以上です