信頼はずっと、挑戦はもっと。

お問い合わせ
TEL:03-3496-3888

BLOG コアテックの社員ブログ (毎週月曜~金曜更新中)

LIST OF ARTICLES

記事一覧

  • テクログ

    【E2Eテスト】codeceptjsをテスト環境に導入してから数ヶ月経過

    こんにちは。E2Eテストを導入して数ヶ月経過しました。画面が生きているかの確認や一定のアクションを実行できるかの確認程度のテストを常に実施しています。忘れた頃にテスト失敗通知がChatWorkに届きます。実施していなかった頃に比べると「検知」のスピードは格段に上がっていると感じます。このままテストと仲良くなりたいです。
  • テクログ

    【E2Eテスト】codeceptjsでシナリオが失敗したときのURLを取得する

    前提として1つのシナリオ内で1画面のテストをしている状況です。const event = require('codeceptjs').event; module.exports = function (options) {     event.dispatcher.on(event.test.failed, async function (test, error) {         let url = await test['steps'][0]['helper'].grabCurrentUrl();     }); } 変数urlに取得したいURLが入ります。これでテストが失敗したときに外部API経由でチャットツールに流して、エラーページのURLがすぐに確認する状況を作れます。参考記事https://codecept.io/hooks/#api
  • 画像:ブログサムネイル

    テクログ

    Webサイトのパフォーマンスを改善するならクリティカルレンダリングパスを知っておこう

    ご無沙汰してますじゅんすです!最近やっと涼しくなってきましたね。それはさておき皆さんクリティカルレンダリングパス(Critical Rendering Path)ってご存じですか?僕はつい最近知ったばかりなのでちょっと紹介しようかと思います。Webサイトを開発している時になんか重いなぁと思う時が必ずありますよね。重いWebサイトのパフォーマンスを改善する際に、このクリティカルレンダリングパスはかなり重要なものになってきます。クリティカルレンダリングパスというのはブラウザがページを表示する際、サーバーからHTMLのレスポンスを受け取って要素を描画するまでのステップのことです。このステップは以下の通りです。・DOMツリーの構築・CSSOMツリーの構築・レンダリング ツリーの作成・レイアウトの生成・ペインティング(描画)順を追って説明していきますね。DOMツリーの構築Q. DOMツリーって何ですか?A. DOM(Document Object Model)ツリーはパース(文法を元に解析)されたHTMLのドキュメントをツリー構造として表現したものです(下図)。■critical.html<html>     <head>         <link rel="stylesheet" href="style.css">         <title>クリティカルレンダリングパスとは</title>     </head>     <body>         <header>             <h1>クリティカルレンダリングパスとは</h1>         </header>         <main>             <h2>概要</h2>             <p>概要テキスト</p>         </main>         <footer>             <small>Copyright 2019</small>         </footer>     </body> </html> ■DOMツリールート要素の<html>から始ってページ上のあらゆる要素やテキストごとにノード(結び目)が作成されます。他の要素にネスト(入れ子)された要素は子ノードとして表現され、各ノードにはその要素の属性すべてが含まれます。例えば、<a>要素はそのノードに関連づけられたhref属性を持ちます。HTMLは部分的に実行することができ、ページのコンテンツが表示される際もドキュメントを完全に読み込む必要はありません。ですがCSSがページのレンダリングをブロックする可能性があるのです。CSSOMツリーの構築Q. CSSOMツリーも知らないのですが...。A. CSSOM(CSS Object Model)ツリーはDOMに関連付けられたスタイルのオブジェクトを表現したものです(下図)。DOMと似た感じで各ノードのスタイルが関連づけられて表現されます。■style.cssbody { font-size: 18px; } header { color: #ff9bba; } h1 { font-size: 28px; } main { color: #ff7974; } h2 { font-size: 20px; } footer { display: none; } ■CSSOMツリーそういえばさっき「CSSがページのレンダリングをブロックする可能性がある」と言いましたがどういうことかというと、CSSは「レンダーブロッキングリソース(render blocking resource)」とみなされています。というのもHTMLと違って上流で定義されたものが下流へ引き継がれて文書に適用されるため、CSSを部分的に使用することはできません。途中で定義されたものを使ってしまうと間違ったCSSが適用されることがあるため、次の段階(レンダリングツリーの作成)に進む前に完全に読み込む必要があるのです。しかし常にレンダーブロッキングと見なされるわけではなく、現在のデバイスに適用される場合だけみなされます。例として<link>タグを挙げますね。<link>タグはmedia属性を指定することができ、適用されるスタイルのメディアクエリを指定することができます。例えば以下のようにmedia属性に「min-width:480px」を指定した場合、画面サイズが480pxより大きくなったら読み込むため、それ以下の場合はレンダーブロッキングとみなされません。■link要素として指定する場合<link href="URL" rel="リンクタイプ" media="screen and(min-width:480px)" > ■スタイルシートに指定する場合@media screen and (min-width:480px) {   p { color: #ededed; } } レンダリングツリーの作成Q. レンダリングツリー?A. DOMとCSSOMの両方を組み合わせたもので、ページに最終的に表示される内容を表現するツリーのことです(下図)。ただし目に見えるコンテンツのみを取得するため、「display: none;」を使用してCSSで非表示にした要素は含まれません。■レンダリングツリーこれで画面に表示する要素を整理することができました。しかしまだ端末のビューポート内における要素の正確な位置やサイズは決まっていません。それを決めるためには次のステップが必要になります。レイアウトの生成レイアウトはビューポートのサイズを決定するもので、パーセンテージやビューポートの単位に依存するCSSスタイルのコンテキストを提供します。ビューポートのサイズはhead内の<meta name = "viewport">タグによって決まり、タグが指定されていない場合は、デフォルトの980pxが適用されます。一般的な<meta name = "viewport">の値は、デバイスの幅に対応するようにビューポートサイズを設定することです。ペインティング(描画)クリティカルパスの最後の段階で、ページの目に見えるコンテンツをピクセルに変換して画面に表示します。ペインティングにかかる時間はDOMのサイズや適用されるスタイルによって異なりますので時間がかかっている場合はDOMやCSSを見てみるといいかもしれません。改めてコンテンツが表示されるまでのステップを表すとこのようになります。一見シンプルなページでも様々な処理が必要だということがわかりますね。最近サイトが重いなぁと思ったらちょっと考えてみるのもいいかもしれません。クリティカルレンダリングパスを改善するためのツールもちらほらありますので試してみてはいかがでしょうか。下にちょっとだけ貼っておきます。■Critical Path CSS Generatorhttps://www.sitelocity.com/critical-path-css-generatorhttps://jonassebastianohlsson.com/criticalpathcssgenerator/ではではっ!
  • 画像:ブログサムネイル

    テクログ

    関数型プログラミングに触れるためにJavaScriptのreduceに触れてみる

     秘密裏に関数型を調べたりしているのですが、その一環でJavaScriptのreduce関数に触れてみました。 この関数はArray オブジェクトを1つにまとめます。以下のコードでは配列内にある数値を全て加算します。コード1const points = [50,5,200]; const reducer = (accumulator, current) => accumulator + current;   console.log(points.reduce(reducer)); 結果1 2つの変数 accumulator, current に入る値に最初は困惑しました。リファレンスを参照すると、累積値は、ひとつ前の戻り値、もしくは initialValue です引用元: https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/reduceとあります。「初期値が設定されていない状態で、ひとつ前の戻り値って・・・?」という感じでした。そこで少し書き直してログ出力すると以下のようになります。コード2const points = [50,5,200]; const reducer = function(accumulator, current){    console.log(accumulator, current);    return accumulator + current; }   points.reduce(reducer); 結果2 挙動を見ると、1回目のループでaccumulatorに最初の要素が入っていますね。「だとしたら、currentという変数名はおかしいのでは・・?」と思い、再びリファレンスを参照すると以下の注釈がありました。注: initialValue が指定されなかった場合は、reduce() は最初のインデックスを飛ばしてインデックス 1 から実行されます。initialValue が指定されていたらインデックス 0 から開始します。引用元: https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce 初期値がない場合は0番目ではなく、1番目の要素から始まるようです。  reduce関数には4つの引数を取ることができますが、強そうなので仲良くなりたいものです。【参考記事】https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce
  • 画像:ブログサムネイル

    テクログ

    高機能スライダー「Swiper」の魅力的なオプションについて

    こんにちは、ささです。今回は高機能スライダーの大定番「Swiper」の魅力的なオプションを使った実装サンプルを一部ご紹介します!色々なスライダープラグイン試してみましたが、個人的にこれが一番使いやすいプラグインではないかと思っています。◆Swiperとはhttps://codepen.io/HOanhhOanhh/pen/eorEVR/レスポンシブ対応やスワイプ操作が可能なため、スマホサイトへの実装がしやすく、前・次ボタン、ページネーション、スクロールバー、スライド速度、エフェクトなど様々なオプションを備えた高機能プラグインです。※実装方法や設定の詳細は、下記URLをご参照ください。http://idangero.us/swiper/get-started/基本的な設定をするだけで、シンプルなスライダーの実装が可能ですが、Swiperの魅力は豊富なオプションだと思います。様々なオプションを駆使すれば、以下のような面白い動きをさせることが可能です。◆実装サンプル・Swiper Cover Flow Sliderhttps://codepen.io/michiel-huiskens/pen/jMjozYメイン画像を中央に表示し3Dでスライドが切り替わる、カバーフロー効果を使用したスライダー・3D Cube Slider with Swiper.jshttps://codepen.io/digistate/pen/OzOZgY四角い箱がくるくる回転する、キューブ効果を使用した3D回転スライダー・Slider transitionshttps://codepen.io/fluxus/pen/rweVgp縦スクロールとパララックス効果を使用したスライダーこれらはほんの一部のオプションで作られたもので、Swiperにはまだまだ多くのオプションが存在します。※ご興味ある方は、下記URLをご参照ください。http://idangero.us/swiper/api/#parametersSwiperを使いこなして、より魅力的なスライダーを実装してみてはいかがでしょうか!