月別アーカイブ 5月 2018

takahashi 著者:takahashi

Google Chromeがv67からPWAに対応。Twitterなどの対応サイトで利用可能に。

最近、Windows10 AprilUpdateでMicrosoft EdgeベースのPWAに対応したニュースがありましたが、Google Chromeも、Chrome67からPWAに対応したようです。

Google Chrome 67安定版リリース、「サイト分離」機能やセンサー用API「Generic Sensor API」を搭載 – Gigazine

Twitter LiteなどのPWA対応サイトをChromeブラウザ経由でも、アプリとしてインストールしておくことが可能となりました。

ただ、現在はまだデフォルトで無効になっているようですので、
chrome://flags
から有効にする必要があります。
chrome://flagsにアクセスしたら、検索バーに”PWA”と入れます。

Desktop PWAs をDefautからEnableに変更します。

再起動を求められるので、Chromeを再起動を行えば、PWAが有効になります。

Twitterの公式アプリが自分の環境で動かない、アプリがない、という方は是非試してみてはいががでしょうか。

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

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

【アプリ】生活音やメロディーを聞きながら眠れる「Relax Melodies」

今日は技術ネタではなく、最近よく使っている「Relax Melodies」というアプリについて。
こちらのアプリは、雨の音や滝の音、もしくはオルゴールの曲などを再生できるアプリです。

アプリのジャンルとしては、睡眠・ヨガにあたるみたいです。

アプリのインストールはこちらから。

Android:https://play.google.com/store/apps/details?id=ipnossoft.rma.free&hl=ja
iOS:https://itunes.apple.com/jp/app/relax-melodies-sleep-sounds/id314498713?mt=8

 

一部有料のものもありますが、50以上のサウンドが用意されており、それを好きな組み合わせ&お好みの音量でミックスして再生することができます。

また、気に入った組み合わせについては下の画像のように保存することもできます。

最近は、オルゴール調の「ブラームスの子守歌」が気に入っています。
単調なメロディーなので、聞いているとウトウトと眠くなってきます。

さらにタイマー機能も付いているので、設定しておけば、朝までずっと音楽が流れてしまうこともありません。

私の場合はいつも30分で設定しています。
よっぽどのことがない限りは、聞き終わる前に眠れます。

 

ということで、快適な入眠にぴったりなアプリ「Relax Melodies」の紹介でした。
静か過ぎると眠れない!という方や、リラックスできる音楽を聴きながら眠りたいという方は、ぜひ試してみてください。
しかし、不眠が続く場合は、アプリではなく、早急にお医者様へかかってください。

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

Googleアシスタントがついにタブレットにも対応!

先日ふと自分のタブレットの画面を見たら、Googleアシスタントが利用可能になったという通知が届いていました。
驚いて調べたところ、最初はスマホのみに対応していたGoogleアシスタントの対応範囲がタブレットまでに広がったという情報がでていました。

「Googleアシスタント」、Androidタブレットでも提供へ – CNET Japan

記事によると、タブレット対応に加え、今までAndroid 6.0以上が必要条件だったのが今回Android 5.0にも対応したとのこと。
これはかなり朗報ではないでしょうか。

GogleアシスタントはGoogle検索アプリの音声操作よりも多くのことを声で操作できます。
詳しくは以前書いた記事をご覧ください。

Siriの強力なライバル!? Googleアシスタントがかなりスゴイ!

Android5.0まで対応範囲が広がったとのことなので、機種変などで現役を引退したAndroid 5.0以上の端末をGoogle HomeみたいにGoogleアシスタント専用端末にしてしまうという使い方もありかもしれませんね。

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

ブラウザ対応状況参照サイトCan I useの紹介

 Can I use… Support tables for HTML5, CSS3, etc
 このサイトはIE、Chrome、Firefox等の各ブラウザがCSS、HTML5、JavaScript等の各技術をサポートしているかどうかを容易に調べることのできるサイトです。
 使い方はCan I use ____?とある検索ボックスに調べたい要素を打ち込むだけ。画面に出てきたブラウザとバージョンが示された箱の色が緑なら対応、赤なら非対応を示します。Settingでは表示されるブラウザの最小シェアや地域におけるシェア、特定のブラウザ、技術のカテゴリ、などの表示非表示などを設定することができます。

 一度に一文字列しか検索できない、大きな検索結果を一つずつ表示する、といった形のためあるページ中に使用されている技術を網羅する、の様な使い方には手間がかかるのが玉に瑕ですが、それを除いても便利です。また、検索結果の各技術にはresourcesの名で仕様、リファレンスなどのリンクがあり詳しく調べたい際に有用です。

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

Interop, Apps, Location Business

6月に近づいてきたので Interop のページを見てみました。

しばらく見に行っていないのですが、今年はどんな感じですかね。

そして、同時開催イベントも。

IoT 社会のアプリを考える3日間。

「高精度位置情報」が広げるロケーションビジネスのチャンス。

このあたりを中心に見に行ってビジネスチャンスを鷲掴みしなくては。

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

デザインツールAdobeXDの一部機能が無料化! デザインを作るだけならだれでも利用可能に

正式版となって以来、Adobe CC の一部として有料となっていたAdobe XD(Experience Design) CC ですが、先日のアナウンスで基本機能が無料化されたことがわかりました。

Adobe XD 5月アップデートリリース!無料プランが新たに登場! – Adobe Creative Station

最初のころはAdobe XDのベータテスト版として、フル機能が無料公開されていましたが、2017年10月に正式版が公開され、有料化となりました。
Adobe XDの単体プランは 1,180円/月 という形になっており、そこそこのお値段でした。

ただ、そのほかのツールもいろいろ探したのですが、操作性がイマイチであったり、機能が少なかったり、日本語版がなかったりなど、かなり扱いづらい印象でした。
操作性や機能面で完成度が高い上に動作も軽く、日本語に対応している数少ないプロトタイピングツールだったので、基本機能が無料で利用できるのはかなりありがたいですね。

有料版との違いは、一度に共有できるプロトタイプが1つに限定されるとのことなので、一度に複数のプロトタイプを共有する場合は、有料プランへの加入が必要になります。

スタータープランでは、作成できるXDドキュメントの数に制限はありません。公開のためのアセットのエクスポートやエクスペリエンスの動作を共有するための動画作成も可能です。共有機能については、一度に共有可能なプロトタイプおよびデザインスペックは1つに限定されています。この制限は、プランをアップグレードすることで解除できます。XD単体プランまたはCreative Cloudコンプリートプランのメンバーには、この制限はありません。

何かサービスやアプリを作る上で、UIの設計は避けては通れない工程です。
逆に、開発前にUIの設計をしっかりやっておくと、後々開発がしやすくなることも多いと思います。

Webやアプリの開発を行っている方は、是非こういったUIプロトタイピングツールを使ってみてはいかがでしょうか?

Adobe XD – Adobe

  • この記事いいね! (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)
著者:杉浦

モンティホール問題

 モンティホール問題は直感と実際の確率が違うと感じやすい問題として知られている問題です。wikipediaから問題文引用

「プレーヤーの前に閉まった3つのドアがあって、1つのドアの後ろには景品の新車が、2つのドアの後ろには、はずれを意味するヤギがいる。プレーヤーは新車のドアを当てると新車がもらえる。プレーヤーが1つのドアを選択した後、司会のモンティが残りのドアのうちヤギがいるドアを開けてヤギを見せる。
ここでプレーヤーは、最初に選んだドアを、残っている開けられていないドアに変更してもよいと言われる。プレーヤーはドアを変更すべきだろうか?」

 正答は「変更した方がよい」です。しかし、私含め多くの人は直感的に変更してもしなくても変わらないと思います。
 この問題を納得しやすく説明する方法は、起きうるパターンを全て書きだしたり、はずれの数とはずれを開ける数を極端に増やして考えてみる、といったものをはじめとしていくつもあります。私は、「ヤギがいるドアを開けてヤギを見せる。」というくだりを「あなたが決めたドアでも正解の宝箱でもないドアを開けて~」と言い換える説明がしっくりきました。

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