カテゴリーアーカイブ 言語

著者:杉浦

javascriptの真偽値

 javascriptは暗黙的な型変換をよくしてくれる言語です。javascriptで真偽値が入りそうな演算を真偽値でない値で実行した場合、真偽値でない値を真偽値に暗黙的に変換します。javascriptである値を引数として真偽値に変換をする関数は次の表に従って変換を行います。

Table 9: ToBoolean Conversions
Argument Type

Result

Undefined

Return false.

Null

Return false.

Boolean

Return argument.

Number

If argument is +0, -0, or NaN, return false; otherwise return true.

String

If argument is the empty String (its length is zero), return false; otherwise return true.

Symbol

Return true.

Object

Return true.

引用:ECMAScript® 2017 Language Specification 7.1.2 ToBoolean
この表の肝要なところは引数が存在している様な値(なにか適当な実体がある感じ)ならtrue、存在していない様な値(未定義、null、NaNなど)ならfalseを返してくれるところです。このためjavascriptは

if(hoge !== '' && hoge !== null){console.log('hogeはtrue';)}

とのようにしなくとも

if(hoge){console.log('hogeはtrue');}

とするだけで存在の判定を大体やってくれます。ただ、int型等の数値を同じ様に書くのは注意です。0ならばfalseという変換にひっかかります。C言語やら01の世界やらで0(int)は大概、偽とされており、おそらくこの考えを引き継いでいるためjavascriptでは0ならばfalseに変換されます。

  • この記事いいね! (0)
村上 著者:村上

【PHP】画像URLから画像をBase64にエンコードする方法

昨日の記事に引き続き、本日もPHPについて。
今回は、画像URLを Base64 にエンコードする方法です。
…需要があるかは分かりません。

Webページの読み込み時に、画像の表示があまりに遅かったり、そもそも表示できないものがあったので、Base64に変換してしまえば何とかなるのでは?と試してみました。

 

コードはこちらから。

$image_url = [変換したい画像のURL]; 
$entry_image = "";  // Base64に変換後のデータ
if(!empty($image_url) && @file_get_contents($image_url, NULL, NULL, 0, 1)) {
    switch (true) {
        case preg_match('/(\.jpg)$|(\.jpeg)$|(\.JPEG)$|(\.JPG)$/', $image_url):
            $image_type = "image/jpeg";
            break;
        case preg_match('/(\.png)$|(\.PNG)$/', $image_url):
            $image_type = "image/png";
            break;
        case preg_match('/(\.gif)$|(\.GIF)$/', $image_url):
            $image_type = "image/gif";
            break;
        case preg_match('/(\.bmp)$|(\.BMP)$/', $image_url):
            $image_type = "image/bmp";
            break;
        default:
            $image_type = "";
            break;
    }
    if($image_type != ""){
        $img_base64 = base64_encode(file_get_contents($image_url));
        $entry_image = "data:".$image_type.";base64,".$img_base64;
    }
}

3行目で、file_get_contents 関数を使い、画像が実際に存在するかどうかを調べています。
ちなみに、戻り値を全て取得すると時間がかかるので、1文字だけ取得するようにして、高速化を図っています。
そして、Switch文で末尾を確認して、画像の拡張子が何かを判断しています。
22行目では、ファイルデータをBase64にエンコードしています。
エンコードには、PHPの関数の base64_encode を使用しています。
なお、最終的に変換したデータは $entry_image に格納され、もし変換できなかった場合は空文字が格納されます。

 

以上、画像URLから、画像を Base64 にエンコードする方法でした。
これを試したところ、実際画像の表示速度は速くなりましたね。
が、文字数としてはかなり増えたので、若干通信速度が遅くなりました…。
通信速度が画像の表示速度か…どちらを取るかはその時の状況によって対応してください。

  • この記事いいね! (0)
著者:杉浦

マテリアルデザインのさわり

Design – Material Design
マテリアル・デザインって何? Androidデザイン責任者にインタヴュー | ギズモード・ジャパン
 マテリアルデザインの思想が理想とするデザインは脳にスッと入ってくるデザインです。
マテリアルデザインは一貫性のある法則を持つ世界の上でデザインを行うことで、脳にスッと入ってくるデザインを実現しようとします。一貫性のある法則には実世界の一部を再現するような法則が用いられています。ここで一部、とあるのはマテリアルデザインの目的がユーザの理解の促進にあるからです。理解を妨げて、処理を重くするだけの余分な法則を再現する理由はありません。主な法則は、実世界において紙を重ねた時に起きる現象を再現する直感的な法則です。例えば、ページはhogehogeとかかれたカードの集まり(並べてもいいし、重ねてもいい)で構成される。これは実世界の紙を重ねた時の状態を再現する法則です。他には、カード内から画像や文字ははみ出さない、下の要素には上の要素の影が落ちる。これはそれぞれ、紙面からはみ出して宙に浮く画像や文字はない、下の物体には上のカードの影が落ちる、という実世界上の法則の再現です。
 マテリアルデザインの効果の一例が次です。
ヘッダに影がない

ヘッダに影がある

 影がついた場合ヘッダが下の記事欄から独立していることがわかるため、スクロールをしてもヘッダが固定されると連想しやすくなります。

  • この記事いいね! (1)
村上 著者:村上

【PHP】Switch文の条件に正規表現を使う方法

今回は、Switch文の応用的な使い方についてです。
コード内で、Aの正規表現の条件に一致したら Aの処理、Bの正規表現の条件に一致したら Bの処理…というようなSwitch文を書きたかったので、今回の方法を試してみました。

参考にさせていただいた記事はこちら。

PHP switch文の応用的な使い方 – Qiita
https://qiita.com/tkykmw/items/ee0ab7bf502361f413d8

 

で、早速書き方はこちらから。

$image_url = [画像のURL];
switch (true) {
    case preg_match('/(\.jpg)$|(\.jpeg)$|(\.JPEG)$|(\.JPG)$/', $image_url):
        // jpeg画像の時の処理
        break;
    case preg_match('/(\.png)$|(\.PNG)$/', $image_url):
        // png画像の時の処理
        break;
    case preg_match('/(\.gif)$|(\.GIF)$/', $image_url):
        // gif画像の時の処理
        break;
    case preg_match('/(\.bmp)$|(\.BMP)$/', $image_url):
        // bmp画像の時の処理
        break;
}

今回のコードは、画像URLの末尾の拡張子を調べて、その拡張子ごとに処理を分けています。

ちなみに、この書き方は JavaScriptでも使えます。
なお、その場合は、case の後の条件で test() メソッドを使います。
正規表現自体はPHPとほぼ同じです。

 

以上、switch文の条件に正規表現を使用する方法でした。
switch文の引数に true を指定するやり方を知らなかったので、こんな書き方があるのかと少し驚きでした。
とても興味深かったです。
これで少し複雑な条件分岐が大分楽になりそうです。
同じことにお困りの方がいらっしゃいましたら、是非参考にしていただければと思います。

  • この記事いいね! (1)
著者:杉浦

セレクタによる複数選択から個々の要素を操作する

 ここで扱うセレクタは複数の要素を選択できるjQueryの$()とjavascript備え付けのquerySelectorAllの二つです。$([“属性名=’value'”]),querySelectorAll([“属性名^=’value'”])で条件式に合った要素が返ってきます。このvalueの中で正規表現が使えます。比較演算子は次の表です。

|= valueか、-valueが属性名な要素を選択
*= 部分一致。valueを含む文字列が属性名な要素を選択
~= スペースで区切られた複数の属性名を持つ要素が主な対象。valueな属性名を含む要素を選択。
$= 後方一致。末尾にvalueを含む文字列が属性名な要素を選択
= 完全一致。valueが属性名な要素を選択
!= 否定。valueでない文字列が属性名な要素を選択。属性名がない要素も選択。
^= 前方一致。先頭にvalueを含む文字列が属性名な要素を選択

querySelectorAllの返り値はNodelist型のため配列に変換しないと煩雑です。変換には次のコードが使えます。

Array.prototype.slice.call(document.querySelectorAll("属性名=value"))

次のようなArray.from()ならさらに楽です。

Array.from(document.querySelectorAll("属性名=value"))

Array.from()はこれを書いている時点でブラウザによる対応が怪しいです。対応表は次になります。Can I useも次の対応表へ案内してくれます。
ECMAScript 6 compatibility table
well-known symbolsの行が完全対応なら大丈夫なはずです。Array.fromが使えないなら上のArray.prototype.slice.callです。
 配列を

arr.forEach(funcion(a){/*処理*/});

なコードの様に扱うと処理が短く色々書けます。jQueryのイベント付与処理なら$(“#”+a.id).click(function(){/*click時処理*/})の様な具合です。
次のコードな正規表現で各文字列の差分を取る(最初の属性選択時の共通部分以外を抜き出す)ことでさらに使う幅が広がります。

a.属性名.replace(/^value/g,”) 前方一致したvalue部分を空にする
a.属性名.replace(/value$/g,”) 後方一致したvalue部分を空にする
a.属性名.replace(/value/g,”) 部分一致したvalue部分を空にする

属性名の命名規則をかっちりしていれば正規表現で楽にコーディングできます。

  • この記事いいね! (0)
村上 著者:村上

【PHP】PDOでMySQLを使った際のエラー「Uncaught exception ‘PDOException’ with message ‘SQLSTATE[HY093]: Invalid parameter number: no parameters were bound’」

今回は、PDOを使ってMySQLでデータを取り出すときに遭遇したエラーについて。
コード自体は、既に動いているものをコピーして修正したものなので、動かなくて焦りました…。

エラー全文はこちら。

Fatal error: Uncaught exception ‘PDOException’ with message ‘SQLSTATE[HY093]: Invalid parameter number: no parameters were bound’ in [エラーが発生したファイル名]

 

で、調べたところ、SQL文の構文エラーがある場合や、パラメータの数が一致していない時に発生するエラーとのことです。
なお、今回参考にした記事はこちら。

PHP-PDOを使ったSQL文のエラー(HY093)|teratail
https://teratail.com/questions/3209

私の場合は、パラメータの数が一致していなかったために発生していました。
また、下記のサイトによると、「クエリのプレイスホルダとバインドするパラメータはきちんと数を合わせる必要がある」とのことでしたので、こちらが原因ですね。

PDO::bindParamの挙動を知る|Kwappa研究開発室
http://randd.kwappa.net/2008/05/29/25

恐らくコピーした時に、何かが抜けるかしたのかと思われます。

 

ということで、PDOを使用した時に発生したエラーの対処法でした。
今回のエラーについては、とりあえずコードを良く読み返して、パラメータに数を確認することが解決への近道ですね。
エラーに遭遇した時はとにかく焦ってしまうものですが、あわてず騒がず落ち着いて、最初から確認し直すことを心掛けたいです。

  • この記事いいね! (0)
村上 著者:村上

【CSS】要素のタッチやクリックを無効にするpointer-eventsプロパティ

/タイトル通り、今回は要素に対するタッチやクリックを無効化する方法について。
button要素であれば、下記のように disabled を指定すれば、クリックができなくなりますが、それをdiv要素などで行う場合です。

<button type="submit" disabled>無効化されたボタン</button>

 

使うプロパティは「pointer-events」です。
こちらのプロパティは、初期値は auto が指定されています。
この値に、none を指定することで、要素に対するクリック・タップを無効化することができます。

サンプルはこんな感じ。

<div>
    <p>無効化された要素</p>
</div>
div {
    pointer-events: none;
}
$("div").on("click", function(){
    alert("div click!");
});

こちらを実行すると、div要素をクリックしてもアラートが表示されません。
ちなみに、スマートフォンでも動作します。

 

ということで、div要素などのクリック・タップを無効化する方法でした。
なかなか、butto要素以外でクリック・タップをすることはないかもしれませんが…知っていれば便利です。
是非参考にしてください。

  • この記事いいね! (0)
著者:杉浦

chrome開発者ツールのコンソールでDOM操作を行う

 これはjavascriptを用いた開発で特に役に立つと思います。”javascriptのソースコードでやりたいDOM操作のコーディングを行う→目的のページをリロード→チェック→コーディング再開”なんてことがめんどくさい時に使えます。 GoogleChromeなどの多くのブラウザにはショートカットキーF12で開ける開発者ツールが備わっています。この開発者ツールのコンソールからjQuery付javascriptとほぼ同じ言語でDOMの操作ができます。
 要素を対象にとる

$(selecter),$$(selecter)

 document.querySelector(),document.queryAllSelector()と同じです。jQueryのセレクタと同じ記法です。どちらも対象が一つのみでも配列扱いをするので操作に注意がいります。要素の展開から属性なりイベントなりの色々が読み取れます。

*.children,*.firstChild,*.parentNode,...

 ちゃんと説明書を読んだわけでないので断言できませんがjavascriptに入っている要素参照操作が備わっているようです。

*.innerHTML,*.outerHTML

 連鎖して何かを呼び出せませんが一括操作に有用です。
DOMを操作する

*.append(),*.removeChild(),insertBefore(),…

 ちゃんと説明書を読んだわけでないので断言できませんがjavascriptに入っているDOM操作が備わっているようです。
便利

* = *,if,while,for

 変数を持つことも分岐、繰り返しを行うこともできます。ほぼ対話的なjavascriptです。

clear()

 画面をきれいにします。

コンソール上のDOMの階層要素を右クリック→Expand recursivelyを実行

 DOMの要素を再帰的に展開、要は全部展開します。コンソール上の参照されたDOM要素はElementPanelのDOM要素に近い機能を備えています。

コンソール上の適当な隙間で右クリック→Save as...

 コンソール上の操作のログを保存します。直接Command Historyを開く命令がみあたらないのでこれで代用です。正直手間な感じはします。

  • この記事いいね! (0)
村上 著者:村上

【CSS】要素の幅や高さを指定する単位vmin、vmaxとは

今回は、以前 vw、vhを紹介した記事では割愛した vmaxvmin について。
実際に使う機会があったのでまとめました。

ちなみに、以前の記事はこちらから。

【CSS】要素の幅や高さを指定する単位vw、vhとは
https://cpoint-lab.co.jp/article/201804/【css】要素の幅や高さを指定する単位vw、vhとは/

 

さて、具体的に説明すると下記のとおりです。

vmin (viewport minimum) ウィンドウの幅と高さのうち、値が小さい方に対する割合
vmax (viewport max) ウィンドウの幅と高さのうち、値が大きい方に対する割合

具体的には下記のように記述します。

div {
    width: 30vmax;
    height: 30vmax;
}

上記のように指定すると、PCなどの横長のブラウザで見た場合、ウィンドウの縦横の長い方の長さに合わせて、DIV要素のサイズが変化します。
なお、今回は 30vmax なので、ウィンドウサイズの長い方の長さの 30% のサイズで表示されます。

これを使えば、例えばスマートフォンで、正方形の要素を2つ並べたい!というときに使えます。
意外と高さの指定って難しいので、今後重宝しそうです。

 

ということで、要素の幅・高さを指定する単位 vmin、vmax の使い方でした。
是非ご参考にしてください。

  • この記事いいね! (0)
著者:aoki

jQuery+masonry+autopager で躓く。isAnimated が false にならない!?

久々に頭が痛くなるほど躓きました。
とあるサイトで jQuery + masonry + autopager を使い、pinterest風のタイル表示且つページ遷移のしない読み込み+レスポンシブ対応を行っていました。
コードはこんな感じ


$(document).ready(function() {
    var $container = $('#container');
    $container.imagesLoaded(function() {
      $container.masonry({
          isAnimated : false,
          columnWidth: '.thumb',
          itemSelector: '.thumb'
      });
    });

    var maxpage = 10;
    $('#loading').css('display', 'none');
    $.autopager({
        content: '.grid',
        link: '#next a',
        autoLoad: false,
    
        start: function(current, next){
          $('#loading').css('display', 'block');
          $('#next a').css('display', 'none');
        },

        load: function(current, next){
            $container.imagesLoaded(function() {
                $container.masonry('reloadItems');
                $container.masonry('layout');
            
                $('#loading').css('display', 'none');
                $('#next a').css('display', 'block');
                if( current.page >= maxpage ){
                    $('#next a').hide();す
                }
            });
        }
    });
    $('#next a').click(function(){
        $.autopager('load');
        return false;
    });
});

これで動いてはいたのですが、autopagerで読み込んだ時に読み込んだ要素をレイアウトしなおす関係で上からレイアウトが降ってくるような動きになってしまっていました。
何とかこれを直したいと試行錯誤をしたのですがうまくいかず・・・
そもそも isAnimated が false と指定しているのにアニメーションされてしまうのはなぜ?という事で調べたところ重大なことが分かりました。
isAnimated オプションは昔のバージョンのオプションで最新の物では既に廃止されているオプションという事でした。
それは動かないわ。

という事で対応できるオプションを探したところ、transitionDuration を設定することでアニメーションも解除されうまく表示されるようになりました。


$(document).ready(function() {
    var $container = $('#container');
    $container.imagesLoaded(function() {
      $container.masonry({
          transitionDuration: 0,
          columnWidth: '.thumb',
          itemSelector: '.thumb'
      });
    });

    var maxpage = 10;
    $('#loading').css('display', 'none');
    $.autopager({
        content: '.grid',
        link: '#next a',
        autoLoad: false,
    
        start: function(current, next){
          $('#loading').css('display', 'block');
          $('#next a').css('display', 'none');
        },

        load: function(current, next){
            $container.imagesLoaded(function() {
                $container.masonry('reloadItems');
                $container.masonry('layout');
            
                $('#loading').css('display', 'none');
                $('#next a').css('display', 'block');
                if( current.page >= maxpage ){
                    $('#next a').hide();す
                }
            });
        }
    });
    $('#next a').click(function(){
        $.autopager('load');
        return false;
    });
});

そもそも古い masonry のページをずっと見ていたことが一番の原因ですね。

現在のバージョン(v3)のページはこちらです。
https://masonry.desandro.com/

古いバージョン(v2)はこちら
https://masonry.desandro.com/v2/

  • この記事いいね! (0)