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

著者:杉浦

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

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要素以外でクリック・タップをすることはないかもしれませんが…知っていれば便利です。
是非参考にしてください。

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

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)
村上 著者:村上

【CSS】複数行の長い文章の文末を省略する方法

以前紹介した、長い文章の文末を省略して末尾に「…」を表示させる方法の複数行対応バージョンです。
前回のやり方では、一行のみの表示しかできないので、複数行で文末を表示させたいときはこちらの方法をお試しください。
ただし、ChromeSafari 限定ですので、その点はご注意ください。

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

【複数行にも対応】長過ぎる文字列を省略して末尾を三点リーダー(…)にする方法いろいろ – PSYENCE:MEDIA
https://tech.recruit-mp.co.jp/front-end/tips-ellipsis/

ちなみに、以前投稿したCSSで文末を省略する方法はこちら。

【CSS】長い文章の文末を省略して末尾に「…」を表示させる方法
https://cpoint-lab.co.jp/article/201805/【css】長い文章の文末を省略して末尾に「」を

 

コードはこちら。

<p>春はあけぼの。やうやう白くなりゆく山際、少し明かりて、紫だちたる雲の細くたなびきたる。</p>
#text{
    width: 300px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

overflow: hidden; を使うところは、前回と同じです。
-webkit-line-clamp を使うことで、指定した行に三点リーダー(クランプ)を追加することができます。
こちらのプロパティの値は、三点リーダを追加したい行数を指定します。
display: -webkit-box; は、-webkit-line-clamp と併用することにより、-webkit-line-clamp で指定した行数までを表示するようにしてくれます。

 

以上、複数行の行末尾を省略する方法でした。
上で紹介したサイトでは、ChromeSafari 以外のブラウザでも同じことを行う方法もありますので、IEでもこの表示にしたいときは参考にしてみてはいかがでしょうか。
ちなみに、少しトリッキーな方法とのことです。

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

【jQuery】FastClickライブラリを特定の要素のみ無効にする方法【iOS】

Cordova開発をしているとお世話になるライブラリが、この「FastClick」だと思います。
これを使うことで、モバイルでアプリを実行したときのクリックの反応速度がかなり改善されます。
が、ものによっては、この FastClick ライブラリと競合を起こすライブラリもあるようで、今日、まさにその現象に遭遇しました。

 

競合を起こしたライブラリは、OpenstreetMap を使用した地図を表示できる「MapBox」です。
地図の表示の全てに影響するわけではなく、地図に表示したマップピンをクリックして、吹き出しを表示するロジックに影響が出ており、iOS でのみ吹き出しが表示できない状態でした。
クリックの動作をする箇所でのエラーだったので、最初は Click イベントを取得できていないことを疑いましたが、エラーログを見たところ、FastClick との競合が原因でした。

 

解決方法ですが、こちらのサイトを参考にしました。

JS/jQueryでFastClick.jsを使ってスマホのclickイベントの300ms遅延をなくす|ITハット
http://ithat.me/2016/11/06/js-jquery-smartphone-click-event-300ms-delay-fastclick

サンプルに書くほどでもないのですが…対策方法は、FastClick を無効化したい aタグなどの要素に、needsclick というクラスを追加するだけです。

<a class="needsclick">FastClickを無効にしたい要素</a>

特定の要素のみに FastClick を適用する方法もありますが、現在開発中のシステムでは、無効化したい要素がここのみだったので、この方法を採用しました。
ちなみに、特定の要素のみに適用する方法は下記の通りです。

<div>
    <div class="fastclick">
        <!-- FastClickを適用する要素 -->
    </div>
    <div>
        <!-- FastClickを適用しない要素 -->
    </div>
</div>
$(function(){
    FastClick.attach($('.fastclick')[0]);
});

全てに FastClick を適用するときには、下記のように記述します。

$(function(){
    FastClick.attach(document.body);
});

対策としては以上です。

 

ということで、FastClick を一部無効化する方法でした。
ライブラリの競合はやはり厄介ですね。
最悪、FastClick を無効化しなければいけないのでは…と思ったので、解決策があって良かったです。

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