みかづきブログ その3

本ブログは更新を終了しました。通算140万ユーザーの方に観覧頂くことができました。長い間、ありがとうございました。

👆

引越し先はこちらです！

iPhoneでページを開いているブラウザがSafariかどうか判定したいという想い。 😎

iOS

Safari以外のブラウザ（アプリのWebViewとか）で開かれた際に、Safariで開き直して欲しいという要望をよく受けるので、愚直にUserAgentで判定を試みました。
まずは、各ブラウザのUAをまとめます。

Safari
mozilla/5.0 (iphone; cpu iphone os 10_2_1 like mac os x) applewebkit/602.4.6 (khtml, like gecko) version/10.0 mobile/14d27 safari/602.1
Facebook
mozilla/5.0 (iphone; cpu iphone os 10_2_1 like mac os x) applewebkit/602.4.6 (khtml, like gecko) mobile/14d27 [fban/fbios;fbav/83.0.0.38.70;fbbv/51754296;fbdv/iphone8,4;fbmd/iphone;fbsn/ios;fbsv/10.2.1;fbss/2;fbcr/uqmobile;fbid/phone;fblc/ja_jp;fbop/5;fbrv/0]
Twitter
mozilla/5.0 (iphone; cpu iphone os 10_2_1 like mac os x) applewebkit/602.3.12 (khtml, like gecko) mobile/14d27 twitter for iphone
LINE
mozilla/5.0 (iphone; cpu iphone os 10_2_1 like mac os x) applewebkit/602.4.6 (khtml, like gecko) mobile/14d27 safari line/7.1.2
Chrome
mozilla/5.0 (iphone; cpu iphone os 10_2_1 like mac os x) applewebkit/602.1.50 (khtml, like gecko) crios/56.0.2924.79 mobile/14d27 safari/602.1


はじめは、UAに「safari」という文字列があるか否かで判定を試みたのですが、LINE、Chromeに「safari」という文字列が入っているために断念。
なので、泣く泣くFacebookでもTwitterでもLINEでもChromeでもなければSafariという判定にしました。
他に非対応ブラウザが増えた場合は、そのブラウザのUAを調べなければなりません。


JavaScript
var ua = navigator.userAgent.toLowerCase(),
    isIOS = /iphone|ipod|ipad/.test(ua),
    isLine = /line/.test(ua),
    isFb = /fb/.test(ua),
    isTw = /twitter/.test(ua),
    isSafari = /safari/.test(ua),
    isChrome = /crios/.test(ua),
    msg = "Safariで";


if (isIOS) {
    if (isLine || isFb || isTw || isChrome) {
        msg += "はありません。";
    } else if (isSafari) {
        msg += "す。";
    } else {
        msg += "はありません。";
    }
} else {
    msg = "iPhoneではありません。";
}

msg += "<br />" + ua;

document.write(msg);
続きを読む

Macにrmagickをインストールしたときにでるエラーを解決する 😎

Mac

エラー内容

checking for clang... yes
checking for Magick-config... no
checking for pkg-config... yes
checking for outdated ImageMagick version (<= 6.4.9)... no
checking for presence of MagickWand API (ImageMagick version >= 6.9.0)... no
checking for Ruby version >= 1.8.5... yes
checking for stdint.h... yes
checking for sys/types.h... yes
checking for wand/MagickWand.h... no

Can't install RMagick 2.16.0. Can't find MagickWand.h.
*** extconf.rb failed ***
Could not create Makefile due to some reason, probably lack of necessary
libraries and/or headers.  Check the mkmf.log file for more details.  You may
need configuration options.

Provided configuration options:
	--with-opt-dir
	--without-opt-dir
	--with-opt-include
	--without-opt-include=${opt-dir}/include
	--with-opt-lib
	--without-opt-lib=${opt-dir}/lib
	--with-make-prog
	--without-make-prog
	--srcdir=.
	--curdir
	--ruby=/Users/.rbenv/versions/2.4.0/bin/$(RUBY_BASE_NAME)

原因

imagemagickのバージョン（imagemagick-7.0.5-0）？


解決方法

バージョン7を削除し、バージョン6をいれる。

brew unlink imagemagick
brew uninstall imagemagick
brew install imagemagick@6
brew link imagemagick@6 --force
sudo gem install rmagick

jQueryのノードリストみたいなやつをつくりたいときはadd()をつかうと良いかも 😎

JavaScript

例えば配列をもとにDOMをたくさんつくりたいとき、


なにも考えないバージョン
let $body = $(document.body),
    arr = [
      {index: "66", name : "岡田"},
      {index: "00", name : "高濱"},
      {index: "1", name : "清田"},
      {index: "54", name : "デスパイネ"},
      {index: "61", name : "角中"},
      {index: "44", name : "井上"},
      {index: "7", name : "鈴木"},
      {index: "24", name : "吉田"},
      {index: "23", name : "中村"}
    ];

for (let i = 0, length = arr.length; i < length; ++i) {
  $body.append($(`<div data-index="${arr[i]["index"]}">${arr[i]["name"]}</div>`)); // 毎回レンダリングはしる
}

こんな感じで毎回appendすると、毎回レンダリングされてしまうので、まとめたいと思いますよね。


まとめたバージョン
let $body = $(document.body),
    arr = [
      {index: "66", name : "岡田"},
      {index: "00", name : "高濱"},
      {index: "1", name : "清田"},
      {index: "54", name : "デスパイネ"},
      {index: "61", name : "角中"},
      {index: "44", name : "井上"},
      {index: "7", name : "鈴木"},
      {index: "24", name : "吉田"},
      {index: "23", name : "中村"}
    ],
    $df = $(document.createDocumentFragment()),
    $players;

for (let i = 0, length = arr.length; i < length; ++i) {
  $df.append($(`<div data-index="${arr[i]["index"]}">${arr[i]["name"]}</div>`));
}
          
$body.append($df);

$players = $body.find("[data-index]"); // ここがもったいない

で、僕はいままでdocumentFragmentをつかってまとめてたわけですが、
for文のなかで生成したjQueryオブジェクトの参照を持ちたいと思った時、find()で探し直すのがもったいないですよね。


まとめつつ参照も保持バージョン
let $body = $(document.body),
    arr = [
      {index: "66", name : "岡田"},
      {index: "00", name : "高濱"},
      {index: "1", name : "清田"},
      {index: "54", name : "デスパイネ"},
      {index: "61", name : "角中"},
      {index: "44", name : "井上"},
      {index: "7", name : "鈴木"},
      {index: "24", name : "吉田"},
      {index: "23", name : "中村"}
    ],
    $players = $();

for (let i = 0, length = arr.length; i < length; ++i) {
  $players = $players.add($(`<div data-index="${arr[i]["index"]}">${arr[i]["name"]}</div>`)); // appendと違って毎回再代入が必要
}
          
$body.append($players);

そこで、add()の出番です。先日教えてもらいました。これで万事OKですね。



https://twitter.com/ki_230/status/651331561338441729

ツイッターやってます！