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

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

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

LIST OF ARTICLES

記事一覧

  • 健康

    毎日R-1ヨーグルト生活

    こんにちはじゅんすです。2020年が来てしまいましたね。みなさんは今年の抱負を考えているところでしょうか。私は健康な日々を送りたいなと思って毎日R-1ヨーグルトを食べるようにしています。「強さ引き出す乳酸菌」ですからね、最強を目指そうと思います。R-1ヨーグルトの名前にもなっている「乳酸菌1073R-1株」はインフルエンザワクチンの効果を高める可能性があることがヒトを対象とした研究で確認されたみたいですよ(明治さん公式)。なのでこれからR-1生活をしようと考えている人はインフルエンザの予防接種をちゃんと受けましょう(私は次回ちゃんと受けます、別に怖いわけではありません)。
  • 画像:ブログサムネイル

    テクログ

    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/ではではっ!
  • 画像:ブログサムネイル

    レビュー

    世界最初のグミを知っていますか

    実はグミが大好きなじゅんすですこんにちは。皆さんは世界で最初に作られたグミってご存じでしょうか。コンビニやスーパーでよく見かけるあのグミですよ、ほらあれ。一度は見たことがあるかと思います。そう、ハリボー(HARIBO)です!名前や画像を見て「あ~!」と思ったでしょう。今では何十種類もありますよね。片面がマシュマロっぽい生地のタイプや砂糖の粒が塗されているタイプ、「世界一まずい」とよくネタにされているタイヤみたいなタイプ等など。僕の好きなグミの1つでもあるハリボーですが、なぜ「ハリボー(HARIBO)」という名前なのか知ってますか?その昔、ドイツでは歯の病(虫歯や歯周病)が流行っており、その主な原因は咀嚼力の低下でした。噛む力が弱いと咬み合わせが悪くなり、結果として歯の病を患ってしまうのです。それを見かねた「ボン(Bonn)」という町にいた「ハンス・リーゲル(Hans Rigel) 」さんは、「子供のうちから咀嚼力を高めてあげれば解決するだろう」と思い、咀嚼力を高めるキャンディーとしてグミを作ったのです。ここで気づいたと思います。なぜ「ハリボー(HARIBO)」という名前なのか。そう、「Hans Rigel」と「Bonn」の頭の文字から名付けられたのです!ほぇ~~って感じですよね。僕も同じですもん。世の中には作成者の名前から名付けられたものが数多くありますがハリボーもその中の1つなんですよね。とまぁ、ほぇ~っとなるお話でした!因みにハリボー以外で好きなグミは「果汁グミ」「コーラアップ」です。弾力のある固めのグミが好きなのでどれも冷蔵庫で冷やしてから食べてます。(冷やさなくても十分弾力ありますが、さらなる強さを求めているので)
  • レビュー

    今日は注目の日です

    ご無沙汰してますじゅんすです。今日は新元号が発表される日ですね(11時30分頃)。朝からどのニュース番組も新元号について取り上げていましたね。今回も従来通り中国古典から引用されるのかそれとも日本古典から引用されるのかと、どの古典から引用されるのかも話題となっております。聞いた話では従来通り中国古典から引用されるのならばと中国古典の漢字2文字の組み合わせを全てリスト化したという猛者もいるとかいないとか。全ての組み合わせを数えると228万通りもあるとのことです。信じるか信じないかは皆さん次第ですよ。因みに新元号に変わるのは今日ではなく5/1(水)ですのでお間違いのないように(これは本当です)。
  • 画像:ブログサムネイル

    テクログ

    忘れがちなあなたへ【IFTTT】

    こんにちは、じゅんすです!学校、会社で何かの当番を任されたけれど、「あ、そういえば今日は自分が当番だった...。」なんて忘れてしまうことありませんか?意識しているつもりでもつい忘れてしまったことは少なからず1度は経験しているんじゃないでしょうか。そこで僕がちょっと注目している、というか使っているサービスについてご紹介しようと思います!それは「IFTTT」という異なるソーシャルメディアやプラットフォームを連携させるWebサービスです!これで一体何ができるのかというと、例えば、「Gmailに画像が添付されていたら、その画像をDropBoxに保存する」「Twitterで特定のツイートをEverNoteに保存する」「LINE等で特定の人に指定した日時になったら通知を送る」といったことを自動で行ってくれるのです!僕は普段LINEと連携させてこの通知機能を使っています!なので今回は通知機能が使えるまでの手順を簡単に書いていこうと思います。①IFTTTサービスページ(https://ifttt.com/)に行ってアカウントを作成し、ログインする。 ※Google、Facebookのアカウントでもログインすることができます。②画面上部の「My Applets」をクリックする。③画面右上の「New Applet」をクリックする。④大きく表示されている「if +this then that」の「+this」をクリックする。⑤どのサービスを使うのか求められるので、自分が使いたいものを選択する(今回は通知機能についてなので「Date&Time」を選択)。⑥どのタイミングで通知させるのか求められるので、自分の設定したいものを選択する。 ※左上から、以下のようになっています。 「毎日〇〇時〇〇分」 「毎時〇〇分」 「毎週〇曜日の〇〇時〇〇分」 「毎月〇〇日の〇〇時〇〇分」 「毎年〇〇月〇〇日の〇〇時〇〇分」⑦自分で日時を設定し、「Create trigger」をクリックする。⑧すると「if (Date&Time) the +that」という大きな文字が表示されるので、「+that」をクリックする。⑨この通知機能をどのサービスで扱うかを選択する(chatwork、LINE等)。 ※現状、LINEでは「Send message」しかないけれど、画面下の「Suggest a new action」で新たに通知機能の使い道を提案することも可能です。 chatworkでは接続する際にAPIを利用する権限が必要とのことです。 とりあえずLINEで使う体で続けますね!⑩選択したサービス(LINE)で設定した通知機能の詳細を以下のように設定する。 「Recipient」 ⇒ どの部屋で通知を受け取るか 「Message」    ⇒ どういった内容の通知にするか 「Photo URL 」⇒ 通知メッセージに画像を載せる⑪詳細設定が完了したら「Create action」をクリックする。これで完了です!!僕はまだ通知機能しか触っていないので、後々他の機能も試してみようかなと思っています!スケジュール管理のサポートツールとして、皆さんも試してみては如何でしょうか!それではっ!
  • 画像:ブログサムネイル

    テクログ

    男心をくすぐる演算子

    ついこの間、以下のようなコードを見かけたのですが、$sample = $_GET['test'] ?? null;あれ、この書き方ってなんていうやつだったっけと思い聞いたところ、「Null合体演算子」ということがわかりました。そうそうそのなんかカッコいい名前のやつだと思い、公式サイトで見てみることに。(公式サイトより抜粋)なるほど、isset等で書くよりも簡略化できていいかも、!と思っていたところ、ふとページの下の方を見ると...う、宇宙船.....!!!なんですかその男心をくすぐるような名前は、!カッコいいじゃないですか!どれどれどんな働きをしてくれるんだと見てみると、(公式サイトより抜粋)あ、これ知ってました。けど名前までは知りませんでした(笑)この「<=>」って形が宇宙船っぽいからこう命名したんですかね。案外ふわっとしたイメージで名前が付けられているものが他にもあるのかも知れませんね。結構面白いなぁと思ったじゅんすでした!ではまたっ!