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

著者:杉浦

【PHP】リフレクションでprivateメソッドを単体テストする

 あるメソッドをテストしたい時があります。あるメソッドをprotected, privateなどの閉じたアクセス権にしたい時があります。両方に該当するメソッドが現れたときどうすればよいでしょうか。リフレクションはそういった時に役に立つ仕組みです。
 PHP: リフレクション – Manual

情報工学においてリフレクション (reflection) とは、プログラムの実行過程でプログラム自身の構造を読み取ったり書き換えたりする技術のことを指す。

 要はPHPの実行中にリフレクションをしてprivateメソッドの構造を読み取り、読み取った内容を実行することによって、アクセス権の問題をクリアしてテストします。具体的には次の様にします。

    /**
     * @throws ReflectionException
     * @see UbxFile::createObsOfRover() テスト対象のprivateメソッド
     */
    public function testCreateObsOfRover()
    {
        $ubx = UbxFile::all()->first();// ひとまずリフレクション対象クラスのインスタンスを作成。

        $reflection = new ReflectionClass($ubx);// それを参照してリフレクションクラスを作成
        $method = $reflection->getMethod('createObsOfRover');// リフレクションクラスからメソッドの情報を取得
        $method->setAccessible(true);// メソッドのアクセス権をアクセス可能に上書き

        $res = $method->invoke();// privateメソッドであるUbxFile::createObsOfRover()が実行される
        
        self::assertSame('expected', $res);// 実行結果と期待する値を比較するassert
    }

 このような形でリフレクション機能を用いることで任意のメソッドに好き勝手アクセスできます。この仕組みはテストのみでなくフレームワークのマジックメソッド内部でもしばしば用いられています。

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

【CSS】iOSでテキストフォームの内部の影を消す方法

前回に引き続き、CSS での影の取り扱いについて。

さて、iOS で text タイプの input 要素を表示した場合、要素内部に影が表示されていると思います。
今回は、その影を消す方法についてです。
別に影ありでも良かったのですが、Android で見ると影がないのでデザインを統一したい&input要素に指定した border の色合いが影響して謎の隙間があるように見えるため、削除することにしました。

 

影を削除するにあたり、参考にさせていただいた記事はこちらから。

CSS:iOSのフォームのボックスシャドウはbox-shadowではなかった件|PressStocker
http://pressstocker.com/ios-box-shadow/

で、今回初めて知ったのですが、iOS で input 要素に追加される影って、box-shadow プロパティによるではないんですね。
最初、影を消すために box-shadow の記述を探してしまいました…。

では何で指定しているかというと -webkit-gradient というプロパティが使われているとのこと。
なので、影の濃さなどを調節したい場合は、このプロパティの値を変更しましょう。

なお、私の場合のように、影を削除したい場合は -webkit-appearance プロパティを利用します。
影を消したい input 要素に対して下記の CSS を追加すると、サクッと影を削除できました。

-webkit-appearance: none;

 

以上、iOS で input 要素の影を削除する方法でした。
最初、box-shadow が効かない!どうすれば?となったのですが、無事解消できてよかったです。

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

【HTML】ウェブブラウザのHTML補完におけるブラウザ間の差異

 ウェブブラウザはHTMLコードなどの特定の形式の文書を構文解析して画面に描画します。この構文解析の動作の大部分はW3Cが定義しており、ほぼ全てのウェブブラウザはこれに従っています。

All Standards and Drafts – W3C

 ウェブブラウザは正しいHTMLコードを正しく読み込めます。しかし世の中に公開されているwebページのHTMLコードは正しい構文でないものも多くあります。例えば、tableタグ構造が欠けているのにtdを使う、閉じタグが欠けている、です。ウェブブラウザにはその様なページも一見壊れていない様にHTMLタグを補完する機能がよく備わっています。この記事ではこのHTMLタグ補完機能について述べます。
 昨今のブラウザはJavaScriptから構文解析器を呼び出せます。

DOMParser – Web API | MDN
 これに不完全なHTMLコードを構文解析させることでHTMLタグの補完を見てみます。
 次の一つ目がIE、二つ目がChromeです。これはタグの補完が上手く働いている例です。table->tbody->tr->tdという構造が正しく作られています。
 
 次の前者がIE、後者がChromeです。これはタグの補完が上手く働いている例です。table->tbody->tr->tdという構造が改めて作られています。

<table>
  <td></td>
<!--IE-->
<html>
<head>
  <META content="IE=11.0000" http-equiv="X-UA-Compatible">
</head>
<body>
<table>
  <tbody>
    <tr>
      <td></td>
    </tr>
  </tbody>
</table>
</body>
</html>

<table>
  <td></td>
<!--Chrome-->
<html>
<head></head>
<body>
<table>
  <tbody>
    <tr>
      <td></td>
    </tr>
  </tbody>
</table>
</body>
</html>

 次の前者がIE、後者がChromeです。これはブラウザによって補完結果が異なることを示す例です。pタグ内に閉じ忘れdivタグを置くミスによって、補完結果のDOMが変わっています。IEの壊れ方は恐ろしいです。divタグのミスなのにブラウザ上のHTMLコードではpタグが壊れています。

<div>
  <p>
    <div>
  </p>
</div>
<!--IE-->
<html>
<head>
  <META content="IE=11.0000" http-equiv="X-UA-Compatible">
</head>
<body>
<div>
  <p>
    <div><p></p></div>
</div>
</body>
</html>

<div>
  <p>
    <div>
  </p>
</div>
<!--Chrome-->
<html>
<head></head>
<body>
<div>
  <p></p>
  <div><p></p></div>
</div>
</body>
</html>

 同様のコードをFirefox、Opera、Microsoft Edge、にかけたところ幸いなことに補完結果はChromeと同様でした。しかし一例ながら単純なミスでもブラウザによって補完結果が異なることがあるとわかりました。複雑なHTMLコードの場合、IE以外のブラウザが変わらず一様なHTML補完をするか少々疑問です。HTMLは不正確であっても形はどうあれブラウザ上で止まらずに動き続けます。ブラウザの補完で補いきれなくなって画面が壊れてようやくミスが明るみにでます。これを避けるためにはソースコード時点でlintにかける等の厳密な管理が必要になります。

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

【CSS】box-shadowが効かない時の対処法

久しぶりな気がする CSS ネタ!
今回は、div要素 に追加していた box-shadow プロパティが効いたり効かなかったりしたので、その対処法についてです。

 

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

box-shadowがうまく適用されない|memopad
http://memopad.noor.jp/html-css/post-452/

記事によると、コンテンツに指定していた overflow: hidden; が原因とのことで、私の場合も、box-shadow プロパティを指定していた要素の親要素に overflow: hidden; を指定していました。
なお上記の記事では、コンテンツの中にあるサムネイル画像に float を適用していて、それを overflow と position で解除していたのが原因だったとのことです。

なので、overflow: hidden; を親要素から削除したところ、解決しました!

他の記事では、filter: drop-shadow(); を代わりに使うとか、box-shadow の第4引数?の広がり距離を指定するとか、z-index を定義するとか、position:relative; を定義する…などがありましたが、私の環境ではこれでは解決できませんでした。

 

以上、CSS の box-shadow が効かない時の対処法でした。
これが当てはまらない場合もあるとは思いますが、同じように box-shadow で要素に影がつけられない場合は、とりあえず overflow: hidden; を指定しているかどうかを確認してみることをおすすめします。

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

【php】データをキャッシュしてサーバーからのアクセス時間を軽減する方法

ページ読み込みやレイアウト崩れが目立つ場合はjavaScriptコードの見直しやcssの圧縮など幾つか対策を取る必要がありますが、これ以外

にも速度改善の方法の一つにブラウザキャッシュという方法があります。

通常は画像やテキストを取得すためにサーバーにアクセスする必要があるのですが、キャッシュでpcに保存しておくことでサーバー

にアクセスする時間を削減することができ、ページ読み込みの速度の向上につなげることが出来ます。キャッシュが有効期限の間は、

何度ページを表示してもサーバーまで取りに行きません。

この特性を利用することで、画像やテキストを多く抱える大規模なアプリでも大幅にラグタイムをシェイプアップすることができそうです。

ブラウザキャッシュの方法ですが、.htaccessというファイルに以下のように記述してくだけで、至ってシンプルです。


IfModule mod_headers.c

IfModule mod_expires.c
ExpiresByType text/css "access plus 60 days"

ExpiresByType image/gif "access plus 60 days"

ExpiresByType image/png "access plus 60 days"

ExpiresByType image/jpeg "access plus 60 days"

ExpiresByType image/svg+xml "access plus 60 days"

</IfModule>
</IfModule>

自分はphpを少し触った経験があるので(ほんの少しです)あのファイルかと見当できたのですが、そうでない方はなにこのファイルって

思うかもしれないですが、このファイルはwebサーバーのカスタマイズに必要で規約を書いていくことで自分好みのカスタマイズをした

い!という時に使われると思っていてください。

特徴が無いベーシックなサイトを作る時はそこまで使わない・・・かもしれないです。

 

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

【JavaScript】正規表現で文字列からHTMLのaタグを抜き出す方法

今後も絶対に使う機会があると思うので、備忘録としてまとめます。
HTMLの aタグ を正規表現で抜き出す方法についてです。
と言っても、JavaScript は match() もしくは replace() を使えばOKなので、aタグ かどうかを判断するための正規表現そのものを記載しておきます。
今後使うかもしれないものでも、こうしてメモしておかないと忘れるので…。

 

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

正規表現でHTMLタグを<a.*?</a>でマッチさせるのは間違っている|iwb.jp
https://iwb.jp/javasctipt-html-regexp-match/

タイトルにもある通り、aタグを <a.*?</a> という正規表現で判断するのは間違っているとのこと。
上記の正規表現でも aタグを抜き出すことはできますが、仮に addressタグがあった場合、こちらにも一致してしまうため、正しい結果にならないことがあるとのことでした。
幸い、私が開発しているプロジェクトでは、addressタグを使うことはないと思いますが、念には念を入れ、この記述方法は却下しました。

で、正しい記述がこちら。

const result = [aタグを抜き出したい文字列].match(/<a(?: .+?)?>.*?<\/a>/g);

上記を実行すれば、変数 result に文字列から抜き出した aタグが格納されます。
なお、正規表現最後の g は繰り返しマッチングを行うかどうかを指定するものです。
これがないと、もし文字列に複数の aタグがあった場合、最初の aタグだけしか抜き出さないので、もし文字列に複数の aタグが含まれ、かつそれらをすべて抜き出したい場合は、g を指定しておく必要があります。

 

以上、JavaScript の正規表現で HTML の aタグを抜き出す方法でした。
なお、今回のサンプルコードでは match() を使い、aタグを抜き出しましたが、置換を行いたい場合は replace() を用いてください。

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

【Laravel】Laravel開発者ツール拡張Clockworkの紹介

Clockwork
itsgoingd/clockwork: Clockwork – php dev tools integrated to your browser – server-side component
 ClockworkはLaravel内で実行された様々なデータを表示する開発者ツールの拡張です。
 とりあえずの使い方は次の様にcomposerでプロジェクトにインストールして

composer require itsgoingd/clockwork

 次のリンクから拡張をブラウザに追加するのみです。(Larvel5.5以前はconfig/app.phpにProvider追加が必要です。)
Clockwork – Chrome ウェブストア
Clockwork – Get this Extension for 🦊 Firefox (en-US)
 これだけで基本機能は使えます。詳細な機能は製作者のドキュメントとソースコード参照です。
 基本機能だけでも強力です。何ができるかというと次の5つです。
 一つ目はリクエストの中身を見ることです。ルートとコントローラとの対応を見ることができますが、これ自体はChrome標準のNetworkタブの機能と大差ありません。タブ切り替えがいらない利便性が主目的でしょう。

 二つ目は実行時間です。Laravel内部の実行内容で時間を区切れる点が特長です。図はいささか単純ですが、複雑化してくるとボトルネックを探すことが容易になり便利です。

 三つ目はコード内で発行しているログの内容の取得です。図に使ったコードではデータベースを待ち受けてログファイルに吐き出す機能がついており、このようになっています。わざわざサーバにログファイルを取りにいかなくて済む、GUIで整理されて見やすい、といった点が特長です。

 四つ目は発行されたSQL文、その発行場所と実行時間の一覧です。これは特に便利です。SQLの観点から何を改善すれば高速化できるのかがとても分かりやすいです。長時間かかるクエリ、異様に多く発行されるクエリあたりが見つかったら赤信号で、これはそれらを見つけやすくしてくれます。

 五つ目はセッション情報です。普段サーバに隠れている部分であり、いちいちdumpする必要がなくなります。

 基本的な機能は前述の5つですが、xdebugによるコードのステップ実行や、Clockwork備え付けのメソッドを使って特別なログを出力することも可能です。

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

【React】テキスト読み上げ機能を実装するためのパッケージ「speak-tts」

昨日の記事、【React】テキストを読み上げるためのコンポーネント「react-speech」 でも書いていた通り、react-speech というコンポーネントを触っていましたが、どうにも無理そうだと悟り、違うパッケージにも手を出してみました。
それが、「speak-tts」というパッケージです。

インストール手順及び実装方法については、こちらのページをご確認ください。

speak-tts – npm
https://www.npmjs.com/package/speak-tts

 

インストールは下記のコマンドを実行します。

npm install speak-tts

実行後は、下記でプロジェクトにインポートします。

import SpeechTts from 'speak-tts'

まずは、使用している環境が、音声合成をサポートしているかをチェックします。
チェック方法は下記を実行。

const speech = new SpeechTts();
if (speech.hasBrowserSupport()) {
    // サポートされている
}

で、サポートされていたら、下記で初期化を行います。

const speech = new Speech();
speech.init(
    'voice':'Google UK English Male',
    'lang': 'en-GB'
).then((data) => {
    // 初期化成功
}).catch(e => {
    // 初期化失敗
});

なお、init() 内で、上記のようにオプションを設定することも可能です。

あとは、任意のタイミングで下記コードを実行し、テキストを読み上げます。

speech.speak({
    text: '[読み上げさせたいテキスト]',
}).then(() => {
    // テキスト読み上げ成功
}).catch(e => {
    // テキスト読み上げ失敗
})

なお、上で紹介した初期化を実行しないで speak() メソッドを実行すると、警告が出るので注意してください。

 

こちらも簡単で使いやすいと思ったのですが…Cordova アプリには実装できませんでした…。
Android で実行したところ、サポートされていないとのこと。
PC の Google Chrome で動作したので、Android でも使えるかも!と期待したのですが、残念でした。

なお、昨日の react-speech コンポーネントもPC のブラウザで実行したところ、正常に動作しました…。
うーん、そういう落ちか…。

 

以上、テキスト読み上げを実装するためのパッケージ「speak-tts」のご紹介でした。
触った感じとしては、react-speech よりも speak-tts の方が使いやすそうな印象を受けましたね。
オプションや機能はほぼ同一なので、お好きな方を導入ください。

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

【javaScript】setTimeoutを使ってレイアウト回数を制限する方法

今回はスクロール時の負荷を軽減させる方法について紹介します。

javascriptにおけるスクロール動作はonScrollで監視することができるのですが、スクロール自体はマウスホイールを動かしている時は

処理を制限することはできません。そのためマウスホイールを一回転させただけでスコープ内の処理全般を一から始めてしまい

これが重なることによってwebページに負荷がかかりスクロール中に突然落ちたり固まってしまうことがあります。

特にリサイズや位置情報など計算を多用するアプリにとってはこれが結構痛く、内処理で途轍もない負担をかけてしまいます。

目では見取れないですがスクロール数を考えると相当負担かけてしまっているのが分かりますね・・・。

どうにかしてスクロール時のレイアウト回数を減らしたいと思い探し続けた結果、setTimeoutで○○秒後までは処理を行わないメソッド

を使い制御をする手段に行きつきました。

シンプルですが、処理が膨大でない限りはこの手順で約束された勝利の動作をしてくれるはずです。


var interval = 500;
var timer;</pre>
clearTimeout(timer);
timer = setTimeout(function(){
//ここに処理を書く
}

}, interval);
<pre>

 

 

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

【React】テキストを読み上げるためのコンポーネント「react-speech」

まだ動作させられてはいませんが、良さそうな React のコンポーネントを見つけたのでご紹介。
テキストを合成音声で読み上げられるコンポーネント「react-speech」です。

GitHub のページはこちらから。

GitHub – AndrewKeig/react-speech: React component for the web speech api
https://github.com/AndrewKeig/react-speech

 

インストールには下記コマンドを実行します。

npm install react-speech --save

インストールが完了したら、まずプロジェクトで下記をインポートします。

import Speech from './speech';

が、私の環境ではエラーになったので、下記に変更しました。

import Speech from 'react-speech';

あとは、音声を読み上げたいタイミングで下記を実行すればOKです。

<Speech text="Welcome to react speech" />

 

で、このコンポーネントを採用した理由が、voice プロパティでしゃべる音声を変えられること!
デフォルト値は Daniel(ダニエル)で、おそらく男性の声なのですが、ブラウザでサポートされているものであれば、自由に音声を変えることができます。
当初、プロジェクトで使用していたプラグインでは女性の声で再生されていたのですが、男性の声が良いとのご要望があったので、こちらを試しています。

…が、まだ音声は再生できず…。
恐らく、またどこかで単純ミスをしているのではないかと思うので、ミスを探している最中です。
もしかして、エラーが発生するからと修正したインポート文が原因だったり…?

 

以上、テキストの音声読み上げ機能を実装するための React コンポーネント「react-speech」のご紹介でした。
正常に動作したら、また方法についてまとめたいと思います!

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