月別アーカイブ 5月 2019

asaba 著者:asaba

【jquery】jquery3のアップグレードガイドを見て感じたこと

今更な記事ですがご容赦ください。

フロントエンジニアさんにとってよくお目にかかれるjquery。サーバーへかける負担もあってかほとんどの方がCDNでscriptに記述しています。

手軽にajaxを使ってデータを出し入れできるので、新しいライブラリが出てくる中でもまだまだ第一線で活躍しています。個人的な考え

になりますが、ライブラリをいちいち参照しているなら自前でライブラリを持っているfetchと交代したほうがいいのかなと思い、試しに

fetchやaxiosの三つ巴で速度を軽く計測していたら三つともそこまで変わらなかったです。意外・・・。

むしろレイアウトができるまでならfetchの方が遅かったくらいなのでしばらく参りましたしか言えませんでした。という訳でフロント開

発時にはまだまだお世話になることになりそうです。

 

コードのリファクタリングも進んできたのでそろそろjqueryのバージョンを現行バージョンに合わせようかと思いjquery3とjquery2の違い

を色々ググってみました。すると気になるトピックがありました。どうやら、jquery3に移行した場合は今まで使っていた

success/error/cpmpleteが使えなくなり、代替えとしてdone/fail/alwayまたはpromiseを含んだthen/catchメソッドを使わないといけなくなるみたいです。

 

</pre>
<strong>perhaps deprecated</strong>

success: function(xml, textStatus, xhr) {
},
error: function(xhr, textStatus, error) {
}
<pre>

 

</pre>
<strong>from now on</strong>
<pre><span class="p">.</span><span class="nx">done</span><span class="p">((</span><span class="nx">data</span><span class="p">,</span> <span class="nx">textStatus</span><span class="p">,</span> <span class="nx">jqXHR</span><span class="p">)</span> <span class="o">=></span> <span class="p">{</span>
   
  <span class="p">})</span>
  <span class="p">.</span><span class="nx">fail</span><span class="p">((</span><span class="nx">jqXHR</span><span class="p">,</span> <span class="nx">textStatus</span><span class="p">,</span> <span class="nx">errorThrown</span><span class="p">)</span> <span class="o">=></span> <span class="p">{</span>
    
  <span class="p">})</span>
  <span class="p">.</span><span class="nx">always</span><span class="p">(()</span> <span class="o">=></span> <span class="p">{</span>
    
  <span class="p">});</span></pre>
<pre>

linkBreaking change: Special-case Deferred methods removed from jQuery.ajax

The jqXHR object returned from jQuery.ajax() is a jQuery Deferred and has historically had three extra methods with names matching the arguments object of successerror, and complete. This often confused people who did not realize that the returned object should be treated like a Deferred. As of jQuery 3.0 these methods have been removed. As replacements, use the Deferred standard methods of donefail, and always, or use the new then and catch methods for Promises/A+ compliance.

Note that this does not have any impact at all on the ajax callbacks of the same name passed through the options object, which continue to exist and are not deprecated. This only affects the jqXHR methods.

 

success/errorももう5年前くらいの書式なのでそろそろみなさんこの書き方にしましょうねという無言の圧力に感じますがどうなんでしょ

うか。こっちの書き方のほうがシンプルで視覚的に分かりやすいので廃止になってほしくないのですが・・・。

これだけ推したにも関わらず速度やサーバーにかける負荷がそこまで大きくないなら現行のバージョン2でもいいのではと思ってしまいました。

いずれにしろ「ajax」をこれからも使おうとする場合は細かいアップデートに順応していく必要があると感じました。

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

【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)
著者:杉浦

awesomeのまとめのsindresorhus/awesomeの紹介

 awrsomeとは畏敬を表す言葉です。

主な意味 畏怖(いふ)の念を起こさせる、荘厳な、畏敬の念に満ちた、うやうやしい、印象的な、すばらしい
awesome とは 意味・読み方・表現 | Weblio英和辞書

 Gitのリポジトリを見ているとawesome-hogehogeと名付けられたリポジトリに人気者が多いと気づきます。awesome-hogehogeというリポジトリはhogehogeに関連する素晴らしいモノをまとめたリンク集なのです。自分はvuejs/awesome-vuechiraggude/awesome-laravelなどによくお世話になっています。
 単にgitの検索でawesomeとググるのもいいですが自分では想像もつかない名前(大体知らない俗語)を用いた名前のリポジトリになっていることもあります。そういったことを避けるためにawesomeのawesomeを参照します。

 sindresorhus/awesome: 😎 Awesome lists about all kinds of interesting topics

 分類分けがされていてわかりやすいです。

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

docker を vmware player で動かす

Docker for Windows が Hyper-V で、Docker toolbox の方は VirtualBOX を要求してきますが、私は VMware が好きなので VMware Player (VMware Workstation Player) で動かして楽しんでいます。

VMware Worksation Pro (VMware Workstation) で動かす事例はみつかったけど、VMware Player ではサクッと動かなかったので、ところどころメモしておきます。

もちろん VMware Player なので非商用でお遊び用でね。

一度 Worksation Pro をインストールして以下 3 ファイルを保存しておきます。その他ファイルも必要となるかもしれないので、まるごと保管しておきます。

  • vix.dll
  • vmrun.exe
  • vmware-vdiskmanager.exe

VMware Workstation をインストールすると VMware Player が消えているので、Workstaion を消して Player に入れ直しし、上記 3 ファイルを VMware Player のインストールディレクトリへコピーします。

ちなみに、設定後まだ 30 日経過していないので継続利用できるかは、今の所まだわかりません。

環境変数の値をレジストリからとってくるため追加します

Windows Registry Editor Version 5.00
[HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows\CurrentVersion\App Paths\vmware.exe]
“Path”=”C:\Program Files (x86)\VMware\VMware Player”

あとは以下を参考に、サクッと完了します。

Docker ToolboxをVMware Workstationで使う

https://qiita.com/NaokiTsuchiya/items/b3680e97cd7378f9049d

もちろん使うのは DockerToolbox.exe で “/COMPONENTS=”Docker,DockerMachine,DockerCompose” オプションをつけてインストールする形で VirtualBOX などを省いています。
start.sh の書き換えは VMware Player ディレクトリを指定すること。
vmware workstation 用のドライバーを使う点も同じ。

C:\> docker-machine.exe create –driver=vmwareworkstation –help

C:\> docker-machine.exe create –driver=vmwareworkstation –vmwareworkstation-disk-size “20000” –vmwareworkstation-memory-size “4096” default

C:\> docker-machine.exe env default

最後に環境変数をセットして実行。
複数の docker-machine を用意してい場合は、ホストにあわせて FOR から始まるコマンドを実行すれば環境変数がセットされます。”@” マーク部分はコマンドの ECHO 無し命令なので表示されず環境変数にセットされます。まあ 表示された SET 文をすべて実行しても同じです。

当然 docker-machine で起動するのは vmware の VMX マシンになります。Windows サービス化ではないけどデスクトップのバックグラウンドで起動する形、必要に応じて docker-machine コマンドで起動や停止ができるので扱い安いかも。

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

GoogleがPixel3aをついに発表!無印の半額で入手できる端末の性能が気になる。

先日開かれたGoogleのイベントで、以前から”Pixel3 Lite”として噂されていたPixel3シリーズの廉価版スマートフォン、Pixel 3a/3aXLが発表されました!!!

Google Pixel 3a – Google Store

無印のPixel 3/3XL は高精細かつ夜にも強いカメラ搭載、SoCもハイエンドのSnapdragon 845が搭載され、さらにOSには改造なしの純正のAndroid 9 pie が利用できるというものでした。

一方今回発表されたPixel 3a/3aXLは、カメラの性能はほぼそのままで、廉価版のSoC(Snapdragon 670)への変更や耐水性を落とす(その代わりにイヤホンジャックが追加)などの変更をする代わりに無印の約半額という価格で販売されるようです。

ただし、Pixel Visual Core™は非搭載になっているようなので、この差がどのように響いてくるのかがちょっと気になるポイントです。

Pixelシリーズのスペック比較ページ – Google Store

僕は前回発表された無印のPixel3が出たら必ず買おうと思っていたのですが、想像以上に高額で手が出ませんでした。
今回の3aシリーズの方は元値が5万円を切っているので、予算的にも十分購入可能な、現実的なお値段です。

そんなこともあり、今回はかなり購入を悩んでいます。

とりあえず、実機が出てきてから、触って動作をチェックしてから決めたいと思います。

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

SourceTreeからGitHubへの接続ができないときに確認したいこと

久々にSourceTreeからGitHubに接続しようとしたところ…

GitHubのダイアログが出てきたので”うん?”と思いながらもログイン情報を入力してみるのですが、何度試してもダイアログが表示されます。
最初はIDかパスワードが間違っているのだと思ったのですが、確認して正しい情報を入れてもログインすることができません。

これは何かおかしい…と思ってよく見たら、SourceTreeのログにエラーメッセージが出ていました。

調べたところこんな記事が

“Fatal: AggregateException encountered” when prompting for username – GitHub

どうやら、GitHubで古いバージョンのTLSが無効となったようなのですが、Git for Windowsの旧バージョンではその変更に対応しておらず、それが原因でログインできない状況になっていたようです。

現行の最新版で既に対策済みとのことだったので、Git for Windowsの最新版をインストールしました。

git update-git-for-windows

ところがこれを実行して最新版になったところまでは確認したものの、エラーが解消されず。

しかし、SorceTree以外のツールやコマンドラインで実行すると最初と同様のダイヤログは表示されるものの、正常にログインできました。

まてよと思い、SourceTreeのGitの部分を確認したところ…

ビルトイン版の古いGitが使われていました/(^o^)\
そりゃあどれだけ更新してもダメなわけですね…

ということで、System側のGitに切り替えて再度ログインしてみたところ、無事アクセスできました。

ということでSourceTreeからGitHubが使えなくなった…という方は一度確認してみてください。

  • この記事いいね! (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)