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

村上 著者:村上

【PHP】文字列の置換を行うstr_replace()、preg_replace()の違い

今回はPHPで文字列を置換する方法について。
が、文字列の置換でも、関数は2種類あるので、その違いについて。
どちらかというと、自分のためのまとめですね。

置換を扱う関数は、str_replace()preg_replace() があります。
PHPマニュアルは下記からご確認ください。

str_replace():http://php.net/manual/ja/function.str-replace.php
preg_replace():http://php.net/manual/ja/function.preg-replace.php

 

使い方は下記のとおりです。

$text = "ABCDEF";  // 置換前の文字

$result1 = str_replace("A", "Z", $text);
$result2 = preg_replace("/^A/", "Z", $text);

結果はどちらも「ZBCDEF」になります。

例を見てわかる通り、str_replace() は A を B に置き換えるなど、単なる文字列の置換に向いています。
マニュアルにも、「正規表現のような技巧的な置換を必要としない場合、preg_replace() の代わりにこの関数を常用するべき」とありました。
対して、preg_replace() は正規表現を利用する、少し複雑な検索と置換を扱うときに使用します。

なお、今回は書きませんでしたが、どちらの関数でも置換した回数を取得することができます。
str_replace()の時は、第4引数に、preg_replace()の時は、第5引数に、$count などの変数を指定しておくと、指定した変数の中に、置換回数が格納されます。

 

以上、PHPで文字列を置換する方法でした。
単純な置換の場合は str_replace()を、正規表現を使った置換の場合は preg_replace()を使うように心がけましょう。

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

【PHP】指定した幅で文字列を丸める関数「mb_strimwidth()」

本日は、他の人が書いたソースコードを読んでいて発見したPHPの関数「mb_strimwidth()」について。
「この関数見たことないな?何だろう?」と調べたところ、指定した幅で文字列を丸めてくれるとのことで…とっても便利そうな関数でした。
もう少し早くに出会いたかった…!

PHPマニュアルの mb_strimwidth()関数についてのページはこちらから。

PHP: mb_strimwidth-Manual
http://php.net/manual/ja/function.mb-strimwidth.php

 

さて、具体的な使い方は、下記のとおりです。

$text = mb_strimwidth("丸めたいテキストを指定", 0, 20, "....", "UTF-8");

上のコードを実行すると、「丸めたいテキスト….」という結果になります。
どうやら第3引数の丸めた後のテキスト幅は、第4引数の文字数を丸めた後に追加する文字列まで含めた数で、かつ半角でカウントした場合のようです。
なお、第5引数の文字コードは指定しておくと、文字化けしなくなるとのことなので、出来る限り指定したほうがよさそうです。
こちらについては、下記のサイトが分かりやすかったです。

指定した文字数で文字列をまるめるPHPの関数 mb_strimwidth で、第4引数に「文字列をまるめた後に付加する文字列を指定」する際、色々気を付けないと文字化けるよ、というお話。|ITキヲスク
http://smkn.xsrv.jp/blog/2013/03/mb_strimwidth-function-tips/

 

以上、mb_strimwidth() で文字列を丸める方法でした。
以前の記事で、JavaScriptで文字列を丸める方法についても紹介しましたが、こちらの方が便利そうですね。
今後はこちらを積極的に使うようにしたいと思います。

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

javascriptの論理演算子

 javascriptは暗黙的な型変換を行うことによってboolean(真偽値)でない値が格納されている変数をboolean同然に記述することを許しています。javascriptの論理演算子はこの仕組みを利用することで便利な拡張がなされています。javascriptの論理演算子&&、||についての記述の引用が次です。

Note

The value produced by a && or || operator is not necessarily of type Boolean. The value produced will always be the value of one of the two operand expressions.

引用:ECMAScript 2017 Language Specification 12.13 Binary Logical Operators
意訳すると、”&&や||によって返される値が真偽値である必要はありません。返り値は常に2つの被演算子のうちの片方の値になります。”、となります。
具体的に&&や||はMDNの論理演算子のページにある次の表の通りに動作します。

演算子 使用法 説明
論理 AND(&&) expr1 && expr2 expr1 を false と見ることができる場合は、expr1 を返します。そうでない場合は、expr2 を返します。したがって、真偽値と共に使われた場合、 演算対象の両方が true ならば、&& は、true を返し、そうでなければ、false を返します。
論理 OR (||) expr1 || expr2 expr1 を true と見ることができる場合は、expr1 を返します。そうでない場合は、expr2 を返します。したがって、真偽値と共に使われた場合、 演算対象のどちらかが true ならば、|| は、true を返し、両方とも false の場合は、false を返します。
論理 NOT (!) !expr 単一の演算対象が true と見ることができる場合は、false を返します。そうでない場合は、true を返します。

引用:論理演算子 – JavaScript | MDN
論理値の真偽が確定した時点の被演算子が返されるわけですね。この論理演算子を用いて真偽値以外の値を得ようとする際に注意するべきなのが論理 NOT (!)です。この論理演算子は被演算子を真偽値として見たときの値(true or false)を返すため、論理式に!が含まれていた場合、被演算子のいずれかが返ってくる保障が薄くなります。
論理演算子を真偽値以外の目的で使用している例:

<script>window.jQuery || document.write('<script src="js/libs/jquery-1.7.2.min.js"><\/script>')</script>

このコードは、window.jQueryが実行可能ならばwindow.jQueryを、window.jQueryが実行できないならばdocument.write(‘<script src=”js/libs/jquery-1.7.2.min.js”><\/script>’)を実行する、というコードになります。

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

コンパイルできるRubyライクな爆速言語 Crystal

Rubyライク(Rubyと高い構文互換性をもっている)な言語として、”Crystal”と呼ばれる言語が、最近少しずつ人気を集めているようです。

Ruby開発者がCrystalを使うべき5つの理由 – SOFTANTENNA BLOG

Rubyの構文と非常によく似た構文を採用しており、Ruby開発者にとっては非常に少ない学習コストで、爆速のWebアプリを作成することができます。

Rubyっぽいコードが爆速で動く!?CrystalとRubyを比較してみた – paiza開発日誌

上記の記事にありますが、レスポンスに1.5秒ちょいかかるRubyで書かれたWebアプリをCrystalに移植すると、約0.3~0.4秒ぐらいまで高速化できるようです。凄いですね。
Crystalはまだα版で、現時点で動作するプラットフォームは限定されていますが、今後対応する環境が増えていけばRubyにとって代わる言語になるかもしれませんね。

Crystal公式サイト

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

【CSS】CSSで計算式を扱うためのcalc()関数が使えない時の対処法

以前に紹介した、CSSで計算式を使うための関数「calc」について、指定したはずなのに何故かブラウザに反映されない!という現象に遭遇したので、それの回避方法についてです。

なお、前回のcalc()についてまとめた記事はこちらから。

【CSS】スタイルシート内で計算式が使えるcalc()が便利
https://cpoint-lab.co.jp/article/201801/【css】スタイルシート内で計算式が使えるcalcが便利

 

で、本題ですが、その時指定したCSSがこちら。

div {
    width: calc(50vw-20px);
}

ちなみに、値には特に意味はありません。
一見、何の問題もないように思えますが、このCSSを指定しても横幅は変化しませんでした。

問題は、なんと半角スペース
なんでも、計算式で使われている + などの符号の前後に、半角でスペースを空けないと構文エラーになるとのことでした。

なお、今回参考にしたサイトはこちら。

css3-CSS calc() not working-Stack Overflow
https://stackoverflow.com/questions/14967421/css-calc-not-working

同じように、calc()が動かない、という質問に対しての解決策がまとめられています。
やはり、同じように間違ってしまう人がいるようですね。

と、いうことで、先程のCSSを下記のように修正すれば、万事解決です。

div {
    width: calc(50vw - 20px);
}

 

以上、calc()が使えない時の対処法でした。
まさかスペースが関係しているとは思わず…少し悩んでしまいました。
皆様も、CSS で calc() を使うときはお気を付けください。

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

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)