Author Archives: PHP-Archive

[JS]画像ファイルアップロード前にプレビューを表示する

Facebook にシェア
Delicious にシェア
LINEで送る
Pocket

HTML 5 で追加された FileReader を利用すると JavaScript からローカルファイルの一部にアクセスすることができるようになります。一般的にはアップロードするファイルを事前にプレビューするなどの用途でよく使われます。
下記サンプルはファイル選択時に画像プレビューを表示するプログラムです。
古いブラウザでは FileReader が利用できないためその場合は何もしない点に注意して下さい。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Preview Demo</title>
    <script>
    document.addEventListener('DOMContentLoaded', function(){
        // アップロードボタン
        var fileSelector = '.image-upload';
        
        // プレビュー画像のクラス名
        var previewSelector = '.preview';

        // プレビューするファイルタイプ
        var fileTypes = [
            'image/jpeg', 'image/jpg', 'image/png',
            'image/gif', 'image/bmp'
        ];

        if( typeof FileReader == 'undefined' ){
            return;
        }

        var reader = new FileReader();

        reader.addEventListener('load', function(event) {
            preview.setAttribute('src', event.target.result);
        });

        var fileInputs = document.querySelectorAll(fileSelector);

        for(var i = 0; i < fileInputs.length; i++){
            var fileInput = fileInputs[i];
            var input = fileInput.querySelector('input');
            var preview = fileInput.querySelector(previewSelector);

            if(!preview) return;
            preview.setAttribute('data-fallback-src', preview.getAttribute('src'));

            input.addEventListener('change', function(){
                if(input.files && input.files[0] && fileTypes.indexOf(input.files[0].type) >= 0) {
                    reader.readAsDataURL(input.files[0]);
                } else {
                    preview.setAttribute('src', preview.getAttribute('data-fallback-src'));
                }
            });
        }
    });
    </script>
    <style>
    .image-upload .preview {
        display: block;
        width: 100%;
        max-width: 100px;
        height: auto;
    }
    </style>
</head>
<body>
    <div class="image-upload">
        <img class="preview" src="noimage.jpg" alt="Preview">
        <input name="image" type="file">
    </div>
</body>
</html>

Posted in JavaScript | Tagged | Leave a comment

[PHP]Luhnアルゴリズムによる番号のチェック

Facebook にシェア
Delicious にシェア
LINEで送る
Pocket

Luhn アルゴリズムは様々な識別番号に使われているチェックサム方式の1つで、MOD-10アルゴリズムとも呼ばれています。
このアルゴリズムを使って生成された番号であれば入力時にタイプミスをした場合でも、誤りを検出することができます。

ルールは比較的にシンプルで、検査したい数字を右から順に奇数桁、偶数桁に分け、奇数桁の合計と偶数桁の各桁の数字を倍にした数の合計を合わせて 10 の倍数になっていれば正しいとされます。
ただし、偶数桁の倍にした数が2桁になる場合はひとけたずつに分解して足します。
7 * 2 = 14 のとき、14 を 1 + 4 とし、5 が結果となります。これは倍にした数から 9 引いた数と等しくなるのでそのほうが簡単です。

<?php
$number = '4111111111111111';
echo luhnCheck($number);

function luhnCheck($number) {
    $number = preg_replace('/[^0-9]/', '', $number);
    $length = strlen($number);
    $sum = 0;

    for($i = 0; $i < $length; $i++) {
        $digit = (int)substr($number, $length -1 - $i, 1);
        if( ($i + 1) % 2 == 0 ){
            $sum += ($digit >= 5) ? $digit * 2 - 9 : $digit * 2;
        } else {
            $sum += $digit;
        }
    }

    return ($sum % 10 == 0);
}

参考: Wikipedia https://en.wikipedia.org/wiki/Luhn_algorithm

Posted in PHP | Leave a comment

Affinity Designer, Affinity Photo で実務レベルのウェブ制作は可能?

Facebook にシェア
Delicious にシェア
LINEで送る
Pocket

ウェブ業界の現状

通常ウェブデザインの業界では Adobe の Photoshop と Illustrator が一般的に使われていますが、イギリスの Serif が開発した Affinity Photo, Affinity Designer などのライバル製品が登場してからは脱Adobe の道が本格的に模索されるようになってきました。

レスポンシブデザインが必須の今、制作の流れとしては Photoshop などのピクセルベースペイントツールはバナーなどの画像素材作成のみに使用し、Illustrator や Sketch App などのベクターベースのレイアウトツールを使って全体のレイアウトを組む場合が多いかと思います。

そこで、Affinity Photo、Affinity Designer を使って実際の仕事でウェブ制作を完結することができるのかについて検証してみます。

Affinity Photo

https://affinity.serif.com/ja-jp/photo/

Affinity Photo は写真加工や RAW 現像など、写真を編集する機能に特化したソフトウェアです。Mac / Windows に対応しており、執筆時点では6,000円程度で購入でき、サブスクリプションなどの継続的な支払いはありません。
Photoshop の PSD 形式ファイルの読み書きが可能で、レイヤースタイルをある程度保ったまま読み込む事ができます。
色調補正や各種ブラシもそれなりに揃っているので通常の補正で困ることはなさそうです。

RGB, CMYK の両方に対応し、HDR合成やパノラマ結合など豊富な機能があり、単体のペイントソフトとして見るなら十分にパワフルで実用的なソフトです。ドロップシャドウや光彩、境界線などのレイヤースタイルも Photoshop と同じ感覚で使えます。ただし PSD ファイルの読み込みは完全とはいえず、信用はできません。日本語テキストの一部が文字化けしたり、サテンなどのレイヤースタイルエフェクトが欠落したりします。現時点ではテキストの縦書きにも非対応なので注意が必要です。
最初からすべて Affinity Photo を使って作ったデータをもとに制作を進めるなら問題なく使えますが、他の人が Photoshop を使って作ったファイルをもとを Affinity Photo で読み込んで使うとなると互換性にやや不安があります。

Affinity Designer

https://affinity.serif.com/ja-jp/designer/

Affinity Designer はベクターベースのドローツールで、こちらも執筆時点では6,000円ほどで購入できるサブスクリプション不要の買い切り型ソフトウェアです。Mac / Windows のどちらでも利用できます。
パスツールを使ったベクターはもちろん、ピクセルペルソナに切り替えることでピクセルベースのペイントも行うことができるようになるので、無機質なシェイプにアナログブラシの質感を与えることもできます。
特筆すべきは「シンボル」で、サイト内で繰り返し使うパーツをシンボルとして定義して配置すると、シンボルの1つを書き換えるだけで他のシンボルも同様に変化します。これを使うとヘッダーやフッターなどの共通パーツの管理が楽にできます。

もう1つの長所は「制約」で、アートボードのサイズ変更に対して位置やサイズをどのように変化させるかを指定できます。常に右上に配置したいものは制約で右上に指定しておくと、アートボードのサイズが変わっても右上の状態が維持されます。レスポンシブ対応のサイトをデザインする上で有用な機能です。

「アセット」もサイト作成には便利です。矢印やメニューアイコンなどのよく使う基本図形をアセットに登録しておくと、一覧から選んで簡単に配置できます。

一応 Illustrator の AI ファイルも読み込めますが互換性に関してはこちらも完璧を期待してはいけません。
書き出しに関しては AI は無く、主要なものとしては PNG, JPEG, GIF, TIFF のほか PSD, PDF, SVG, EPS などがあります。言い換えるならベクターのレイヤー構造を維持したまま他のソフトで読み込むことのできる形式はないということです。
CMYK には対応しますが執筆時点ではテキストの縦書きやトリムマーク(トンボ)作成機能はないのでパンフレット等の印刷物を作るには向かないと思います。

まとめ

Affinity Photo も Affinity Designer も素晴らしいソフトウェアで、Adobe系ソフトとの互換性や縦書きの問題を除けば十分に仕事で使えるように思います。少なくとも低価格ペイントツールの中では Photoshop Elements や Pixelmator よりも Affinity Photo のほうが優れています。Affinity Designer に関してはウェブ用途に限っていえば Illustrator 以上の実力と言って良いと思います。
現時点では Photoshop を完全に手放すのは難しい状況ですが、Creative Cloud のフォトプランにして月々のコストを抑えつつ Illustrator の代わりに Affinity Designer を使うというあたりが現実的な落とし所ではないでしょうか。

Posted in 一般 | Leave a comment