Headers frameworkが読み込めない

問題

xcodeでframeworkを読み込んだところ、Headersが参照できていませんでした。

Headersの中身はこれだけ書いてありました。

Versions/Current/Headers

解決

frameworkが圧縮されていたzipをwindows環境下で解凍してしまっていたことで、
シンボリックリンクが切れてしまっていたのが問題だった様です。

参考：
https://stackoverflow.com/questions/13781371/how-can-i-get-xcode-to-find-the-everyplay-everyplay-h-header

1からmacで作業すれば問題ありませんでした。

無事読み込めました。

[Javascript][CSS] グレースケールの表示

こんにちは！パーク社員のゆんぼうです。

Webアプリ開発のクロスブラウザ対応したときに注意したいことを紹介します。

今回は、画像のグレースケールについてです。

動作確認した環境

OS: Windows 10 Pro

ブラウザ名	バージョン
Google Chrome	62.0.3202.94
Mozilla Firefox	57.0
Microsoft Edge	41.16299.15.0
Microsoft Internet Explorer (IE11)	11.64.16229.0

グレースケールとは

グレースケールとは、画像を白色から黒色までの明暗で表現したものです。ここでは、通常の画像を用意して、Webアプリ上で画像をグレースケール化する手法を紹介します。

以下のデモページを表示してみてください。

【デモページはこちら】

【ソースファイルはこちら】

「method」カラムにグレースケールの手法、「source」カラムに元の画像、「result」カラムにグレースケール化の画像を表示しています。以下に、3つの手法について紹介します。

グレースケール: CSS filter

1つ目は、CSSのfilterプロパティを使用する方法です。3つの内、最もスマートに実装できます。しかし、IE11では動作しません。

img#test1 {
    filter: grayscale(100%);
}

グレースケール: SVG

2つ目は、SVGのfilterを使用する方法です。HTMLに直接SVGを組み込むか、CSSのfilterプロパティに指定することができます。実装コードが多くなります。

img#test2 {
    filter: url("data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><defs><filter id="grayscale"><fecolormatrix type="matrix" values="0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0"></fecolormatrix></filter></defs></svg>#grayscale");
}

グレースケール: HTML canvas

最後は、HTML canvasを使用する方法です。

grayscale($("#test3"))

function grayscale(selector) {
    var canvas = document.createElement('canvas');
    var canvasContext = canvas.getContext('2d');
    var img = new Image();
    img.src = selector.attr("src");
    img.onload = function () {
        var imgW = img.width;
        var imgH = img.height;
        canvas.width = imgW;
        canvas.height = imgH;

        canvasContext.drawImage(img, 0, 0);
        var imgPixels = canvasContext.getImageData(0, 0, imgW, imgH);

        for (var y = 0; y < imgPixels.height; y++) {
            for (var x = 0; x < imgPixels.width; x++) {
                var i = (y * 4) * imgPixels.width + x * 4;
                var avg = (imgPixels.data[i] + imgPixels.data[i + 1] + imgPixels.data[i + 2]) / 3;
                imgPixels.data[i] = avg;
                imgPixels.data[i + 1] = avg;
                imgPixels.data[i + 2] = avg;
            }
        }

        canvasContext.putImageData(imgPixels, 0, 0, 0, 0, imgPixels.width, imgPixels.height);
        selector.attr("src", canvas.toDataURL());
    };
}

ブラウザ毎のグレースケール化の挙動

クロスブラウザ対応で注意したいこととして、グレースケール化の手法はブラウザ毎に挙動が異なります。全てのブラウザで動作する手法は、「HTML canvas」になります。

ブラウザ名	CSS filter	SVG	HTML canvas
Google Chrome	○	×	○
Mozilla Firefox	○	○	○
Microsoft Edge	○	×	○
Microsoft Internet Explorer (IE11)	×	×	○

以上です。

[Javascript] Chromeではsortの挙動が異なる

こんにちは！パーク社員のゆんぼうです。

Webアプリ開発のクロスブラウザ対応したときに注意したいことを紹介します。

今回は、Javascriptの「sort」関数についてです。

動作確認した環境

OS: Windows 10 Pro

ブラウザ名	バージョン
Google Chrome	62.0.3202.94
Mozilla Firefox	57.0
Microsoft Edge	41.16299.15.0
Microsoft Internet Explorer (IE11)	11.64.16229.0

sortとは

sortとは、配列を並び替える関数です。

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/sort

sortを実装したソースコードは以下の通りです。

list.sort(function (a, b) {
    if (a.value === b.value) {
        return 0;
    }
    if (a.value < b.value) {
        return -1;
    } else {
        return 1;
    }
});

sortの引数（function(a, b {...}の部分)）は、compareFunction (比較関数)と呼ばれるものです。3種類の戻り値により、ソートが実行されます。

「0」の場合は、a と b は並び変えない

「0より小さい」の場合は、a は b の前に並び替える

「0より大きい」の場合は、b は a の前に並び替える

この「0」の場合の戻り値について、Chromeでは正常に動作しません。

以下のデモページを表示してみてください。

【デモページはこちら】

【ソースファイルはこちら】

「source」カラムがソート前、「result」がソート後の結果です。この同じ値を持つ11個の配列をソートすると、比較関数の戻り値は0になるため、並び替えは発生しないはずです。しかし、Chromeでは並び替えが発生しています。

ECMAScript 5では仕様通りとなっています。(※コメントでご指摘いただきました。)

http://www.ecma-international.org/publications/files/ECMA-ST/Ecma-262.pdf

22.1.3.25 Array.prototype.sort ( comparefn )
The elements of this array are sorted. The sort is not necessarily stable (that is, elements that compare
equal do not necessarily remain in their original order).

日本語訳:
この配列の要素が、並べ替えられます(ソートされます)。 sortは、安定している必要はありません。(つまり、それは、等価性を比較する要素が、元の順番のままである必要はないということです。)

ブラウザ毎のsortの挙動

クロスブラウザ対応で注意したいこととして、Chromeでは、同じ値をソートしたときに結果が異なります。

ブラウザ名	同じ値のソート
Google Chrome	安定していない
Mozilla Firefox	安定している
Microsoft Edge	安定している
Microsoft Internet Explorer (IE11)	安定している

以上です。

[Javascript] 最新ブラウザではwindow.focusが動かない

こんにちは！パーク社員のゆんぼうです。

Webアプリ開発のクロスブラウザ対応したときに注意したいことを紹介します。

今回は、Javascriptの「window.focus」関数についてです。

動作確認した環境

OS: Windows 10 Pro

ブラウザ名	バージョン
Google Chrome	62.0.3202.94
Mozilla Firefox	57.0
Microsoft Edge	41.16299.15.0
Microsoft Internet Explorer (IE11)	11.64.16229.0

window.focusとは

window.focusとは、ウィンドウにフォーカスを合わせる関数です。

https://developer.mozilla.org/ja/docs/Web/API/Window/focus

下記のデモページでwindow.focusを実行することができます。

【デモはこちら】

【ソースファイルはこちら】

「window.open」ボタンを押下してみてください。サブウィンドウが生成されます。サブウィンドウをメインウィンドウの背面に隠してみてください。その状態で「subwindow focus」ボタンを押下すると、サブウィンドウに対してwindow.focusが実行されて、サブウィンドウが最前面に表示されます。ソースコードは以下の通りです。

$('#openWindButton').on('click', function () {
    var option ='left=100,top=100,width=500,height=200,menubar=no,toolbar=no,location=no,status=no,resizable=no,scrollbars=no';
    log('window.open option: ' + option);
    winObj = window.open('sub_window.html', 'windowName1', option);
});

$('#focusButton').on('click', function () {
    winObj.focus();
});

サブウィンドウを最前面に表示することは、どのブラウザでも動作します。しかし、メインウィンドウを最前面にするとブラウザ毎に挙動が異なります。

メインウィンドウのwindow.focus

メインウィンドウにwindow.focusしてみましょう。

以下のデモページを表示してみてください。

【デモはこちら】

【ソースファイルはこちら】

「window.open」ボタンを押してみてください。サブウィンドウが表示されます。サブウィンドウを最前面表示している状態で、5秒間待つと、メインウィンドウに対してwindow.focusが実行されて、メインウィンドウが最前面に表示されます。ソースコードは以下の通りです。

$('#openWindButton').on('click', function () {
    var option ='left=100,top=100,width=500,height=200,menubar=no,toolbar=no,location=no,status=no,resizable=no,scrollbars=no';
    log('window.open option: ' + option);
    window.open('sub_window.html', 'windowName1', option);
});

var updateTimer = function() {
    updateTask = setTimeout(function () {
        window.focus();
        log("window.focus");
        updateTimer();	
    }, 5000);
}

updateTimer();

しかし、ChromeとFirefoxではメインウィンドウが最前面に表示されません。

ブラウザ毎のwindow.focusの挙動

クロスブラウザ対応で注意したいこととして、ChromeとFirefoxのwindow.focusの挙動が異なります。

ブラウザ名	サブウィンドウにwindow.focus	メインウィンドウにwindow.focus
Google Chrome	○: フォーカスされる	×: フォーカスされない
Mozilla Firefox	○: フォーカスされる	×: フォーカスされない
Microsoft Edge	○: フォーカスされる	○: フォーカスされる
Microsoft Internet Explorer (IE11)	○: フォーカスされる	○: フォーカスされる

以上です。

[Javascript] 最新ブラウザではwindow.openのオプションは動かない

こんにちは！パーク社員のゆんぼうです。

Webアプリ開発のクロスブラウザ対応したときに注意したいことを紹介します。

今回は、Javascriptの「window.open」関数の第3引数のオプションについてです。

動作確認した環境

OS: Windows 10 Pro

ブラウザ名	バージョン
Google Chrome	62.0.3202.94
Mozilla Firefox	57.0
Microsoft Edge	41.16299.15.0
Microsoft Internet Explorer (IE11)	11.64.16229.0

window.openとは

window.openとは、サブウィンドウを生成して、第１引数に指定されたリソースを参照する関数です。第２引数はウィンドウ名、第３引数はウィンドウの高さや幅などのオプションを指定します。

https://developer.mozilla.org/ja/docs/Web/API/window.open

下記のデモページでwindow.openを実行することができます。

【デモはこちら】

【ソースファイルはこちら】

テキストボックスとプルダウンを選択して、「window.open」ボタンを実行すると、サブウィンドウが生成されます。ソースコードは以下の通りです。

$('#openWindButton').on('click', function () {
    var option =
        'top=' + $('#topInput').val() +
        ',left=' + $('#leftInput').val() +
        ',width=' + $('#widthInput').val() +
        ',height=' + $('#heightInput').val() +
        ',menubar=' + $('#menubarSelect').val() +
        ',toolbar=' + $('#toolbarSelect').val() +
        ',location=' + $('#locationSelect').val() +
        ',status=' + $('#statusSelect').val() +
        ',resizable=' + $('#resizableSelect').val() +
        ',scrollbars=' + $('#scrollbarsSelect').val();
    log('window.open option: ' + option);
    window.open('sub_window.html', 'windowName1', option);
});

第３引数のオプションは、ブラウザ毎に挙動が異なりますので注意が必要です。オプションについて、ブラウザ毎の動作結果を以下に記載します。

オプション: menubar

menubarは、「yes」を指定するとサブウィンドウにメニューバーが表示されます。(Altキーを押下するとメニューが表示されます。)「no」で非表示となります。ChromeとEdgeは、常に非表示となり、この機能が動作していません。

ブラウザ名	menubar
Google Chrome	×: 常に非表示
Mozilla Firefox	○
Microsoft Edge	×: 常に非表示
Microsoft Internet Explorer (IE11)	○

オプション: toolbar

toolbarは、「yes」を指定するとサブウィンドウにツールバーが表示されます。「no」で非表示となります。ChromeとEdgeは、常に非表示となり、この機能が動作していません。

ブラウザ名	toolbar
Google Chrome	×: 常に非表示
Mozilla Firefox	○
Microsoft Edge	×: 常に非表示
Microsoft Internet Explorer (IE11)	○

オプション: location

locationは、「yes」を指定するとサブウィンドウにアドレスバーが表示されます。「no」で非表示となります。ChromeとFirefox、Edgeは、常に表示となり、この機能が動作していません。IEは、インターネットオプションの「Webサイトがアドレスバーやステータスバーのないウィンドウを開くのを許可する」の設定を有効にすると、非表示にすることができます。

ブラウザ名	location
Google Chrome	×: 常に表示
Mozilla Firefox	×: 常に表示
Microsoft Edge	×: 常に表示
Microsoft Internet Explorer (IE11)	〇: ブラウザの設定で非表示可能。

オプション: status

statusは、「yes」を指定するとサブウィンドウにステータスバーが表示されます。「no」で非表示となります。ChromeとFirefox、Edgeは、常に非表示となり、この機能が動作していません。

ブラウザ名	status
Google Chrome	×: 常に非表示
Mozilla Firefox	×: 常に非表示
Microsoft Edge	×: 常に非表示
Microsoft Internet Explorer (IE11)	○

オプション: resizable

resizableは、「yes」を指定するとサブウィンドウのサイズが変更できます。「no」で変更できません。ChromeとFirefox、Edgeは、常にサイズの変更が可能で、この機能が動作していません。

ブラウザ名	resizable
Google Chrome	×: 常にリサイズ可能
Mozilla Firefox	×: 常にリサイズ可能
Microsoft Edge	×: 常にリサイズ可能
Microsoft Internet Explorer (IE11)	○

オプション: scrollbars

scrollbarsは、「yes」を指定するとスクロールバーが表示されます。「no」で表示されません。ChromeとEdgeは、常に表示され、この機能が動作していません。

ブラウザ名	scrollbars
Google Chrome	× 常に表示
Mozilla Firefox	○
Microsoft Edge	× 常に表示
Microsoft Internet Explorer (IE11)	○

まとめ。インターネットでwindow.openのことを調べてみると、10年以上前の記事が散見されます。10年前と今では、同じブラウザでも挙動が異なることがあります。実際の動作を確認せずに、古い記事を鵜呑みにしないようにしてほしいと思いました。

以上です。

<< 前ページ次ページ >>

パークのソフトウエア開発者ブログ｜ICT技術（Java・Android・iPhone・C・Ruby）なら株式会社パークにお任せください

開発の解決方法や新しい手法の情報を、パークのエンジニアが提供します。パークのエンジニアが必要な場合は、ぜひお気軽にお問い合わせ下さい。株式会社パーク：http://www.pa-rk.co.jp/

[xcode]Versions/Current/Headers frameworkが読み込めない

問題

解決

[Javascript][CSS] グレースケールの表示

動作確認した環境

グレースケールとは

グレースケール: CSS filter

グレースケール: SVG

グレースケール: HTML canvas

ブラウザ毎のグレースケール化の挙動

[Javascript] Chromeではsortの挙動が異なる

動作確認した環境

sortとは

ブラウザ毎のsortの挙動

[Javascript] 最新ブラウザではwindow.focusが動かない

動作確認した環境

window.focusとは

メインウィンドウのwindow.focus

ブラウザ毎のwindow.focusの挙動

[Javascript] 最新ブラウザではwindow.openのオプションは動かない

動作確認した環境

window.openとは

オプション: menubar

オプション: toolbar

オプション: location

オプション: status

オプション: resizable

オプション: scrollbars