2018-07-13

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のブラウザで、メニューの切り替わり時に内部のコンテンツを再描画してくれるようになるのだそうです。

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

2018-07-09

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);
}

以上です！

2018-07-06

【ＰＨＰ】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のプロパティの中身を文字列検索する方法しか思いつきませんでした・・。
本当はもっと便利な方法があるのかもしれませんが、いったんはこの方法で良しとしておきます・・。

以上！

2018-06-17

ツイッター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設定」をしっかりしないと、ログインエラーを返されてしまうようになってしまったみたいです・・。

As announced last month, today marks the beginning of callback URL whitelisting enforcement. Apps using Sign in with Twitter who have not whitelisted their URLs will experience disruption. To whitelist your URLs, follow the guidance in our May forum post. https://t.co/uWBvhX30E6
— Twitter API (@TwitterAPI) 2018年6月12日

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

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

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

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

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

以上です

2018-05-29

【PHP】ライブドアブログに「AtomPub API 」使って記事投稿・画像投稿！

PHPを使ってライブドアブログに記事を投稿する方法です！

「AtomPub API 」というのを使ってリモートのサーバーから投稿します！
投稿処理には「HTTP_Request2」が必要なので、あらかじめサーバーにインストールしておいてください！
↓
HTTP_Request2のインストールの仕方：
PEARをインストールしないでHTTP_Request2を使う方法 - やったこと

①画像投稿の仕方
画像投稿のコードは以下のとおりです、ライブドアのブログに「hogege.jpg」という画像をアップロードしています！$userや$rootEndPointや$passには、自分のブログに設定されている情報をセットしてね！

  require_once(dirname(__FILE__)."/lib/HTTP/Request2.php");

  $user = "hogegege";
  $rootEndPoint = "https://livedoor.blogcms.jp/atompub/hogegege";
  $pass = "ABCDEFG";

  $time = gmdate("Y-m-d\TH:i:s\Z");
  $nonce = pack('H*', sha1(md5(time())));
  $digest = base64_encode(pack('H*', sha1($nonce.$time.$pass)));

  $img_dir = dirname(__FILE__)."/";
  $imgfile  = $img_dir.'hogege.jpg';
  $imgdata = file_get_contents('./hogege.jpg', true);
  $content_type = image_type_to_mime_type(exif_imagetype($imgfile));
  $url = 'http://livedoor.blogcms.jp/atom/blog/'.$user.'/image';

  $wsse =
    'UsernameToken Username="'.$user.'", '.
    'PasswordDigest="'.$digest.'", '.
    'Nonce="'.base64_encode($nonce).'", '.
    'Created="'.$time.'"';

  $headers = array(
    'X-WSSE: ' . $wsse,
    'Content-Type: ' . $content_type,
    'Expect:'
  );

  try{
    $req = new HTTP_Request2();
    $req->setUrl($url);
    $req->setMethod(HTTP_Request2::METHOD_POST);
    $req->setHeader($headers);
    $req->setBody($imgdata);
    $response = $req->send();
    $xml = simplexml_load_string($response->getBody());
    $src = $xml->content['src'];
    $thumbnail = $xml->content['thumbnail'];
  } catch (HTTP_Request2_Exception $e) {
    die($e->getMessage());
  } catch (Exception $e) {
    die($e->getMessage());
  }

②記事投稿の仕方
お次は記事の投稿です！上記とだいたい同じ感じで投稿できます！

  require_once(dirname(__FILE__)."/lib/HTTP/Request2.php");

   $user = 'hogege';
  $rootEndPoint = 'https://livedoor.blogcms.jp/atompub/hogege';
  $pass = 'ABCEDFG';

  $time = gmdate("Y-m-d\TH:i:s\Z");
  $nonce = pack('H*', sha1(md5(time())));
  $digest = base64_encode(pack('H*', sha1($nonce.$time.$pass)));

  $url = 'http://livedoor.blogcms.jp/atom/blog/'.$user.'/article';

  $title = 'ここにタイトル';
  $description = 'ここに本文';
  $description2 = 'ここに追記';
  $category = 'ここにカテゴリー';
  $created = date('Y-m-d\TH:i:s\Z');

  $wsse =
    'UsernameToken Username="'.$user.'", '.
    'PasswordDigest="'.$digest.'", '.
    'Nonce="'.$nonce.'", '.
    'Created="'.$time.'"';
  $rawdata =
    '<?xml version="1.0" encoding="utf-8"?>'.
    '<entry xmlns="http://www.w3.org/2005/Atom" xmlns:app="http://www.w3.org/2007/app" xmlns:blogcms="http://blogcms.jp/-/spec/atompub/1.0/">'.
    '<title>'.$title.'</title>'.
    '<category term="'.$category.'" />'.
    '<blogcms:source>'.
    '<blogcms:body><![CDATA['.$description.']]></blogcms:body>'.
    '<blogcms:more><![CDATA['.$description2.']]></blogcms:more>'.
    '</blogcms:source>'.
    '</entry>';

  $headers = array('X-WSSE: '.$wsse, 'Expect:');

  try{
    $req = new HTTP_Request2();
    $req->setUrl($url);
    $req->setMethod(HTTP_Request2::METHOD_POST);
    $req->setHeader($headers);
    $req->setBody($rawdata);
    $response = $req->send();
  } catch (HTTP_Request2_Exception $e) {
      die($e->getMessage());
  } catch (Exception $e) {
      die($e->getMessage());
  }

コードは下記のブログを参考にさせていただきました！ありがと～！

参考ブログ：
http://pixieslalala.blog.jp/archives/1038269324.html
http://webpaprika.com/498.html

2018-05-29

skypeでいきなり「チャットはご利用いただけません」と表示されチャットできなくなった！

先日Skypeでチャットをしていたら、いきなり入力欄に「チャットはご利用いただけません」と表示されて、チャットが不能になってしまいました・・（Windows版のスカイプです）

つい昨日までは当たり前のように使えていたのに、今日ＰＣを起動したらこのような状態になってしまった・・。

マイクロソフトの質問欄にも、似たような相談があるようですが、あまり明確な答えが出ていない様子です・・。
相手がオンラインの状態で、通話もチャットの受信もできるのにチャットの送信だけができない。 - マイクロソフトコミュニティ

しょうがないので、スカイプの公式ページに直接アクセスしてチャットをすることにしました。
こちらの方から一回チャットを送信したところ、アプリ版のSkypeでもチャットが可能になりました。
Skype

いったいなんなんでしょうかね、何かの不具合なのでしょうか・・。発生の仕方の意味不明だし直り方も意味不明ですね・・。

■結論
Skypeのアプリで「チャットはご利用いただけません」と表示されたら、公式ページで一回チャットを行うと直るかも。

以上！

2018-05-23

JavascriptでＵＲＬエンコードした文字列がPHPでデコードできない！

タイトルそのままの不具合です・・。

javascript側でURLエンコードした文字列がPHP側でデコードできない・・。

javascript側では「escape()」という関数でエンコードしました。
そして、PHP側では「urldecode()」という関数でデコードしました。
でも、これではちゃんとデコードできない！

どうもjavascript側にはいろいろなエンコードの形式があって「escape()」という関数はPHPとあまり相性がよろしくないみたい・・。なので、代わりに「encodeURIComponent()」という関数を使うことにしました。

この形式でエンコードすれば、ちゃんとＰＨＰの「urldecode()」でデコードができます！

下記ページに、双方の対応関係がとても詳しくのっていますね…。
Javascript と PHP の URLエンコードについて | Lonely Mobiler

以上！