ブラウザがWebページをどのようにレンダリングしているか、図を用いてやさしく解説した記事を紹介します。 レンダリングの仕組みを理解することで、HTMLやCSSやJavaScriptなど実装時にも気をつける点があります。 How the browser renders a web page by James Starkie 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 1. HTMLの解析（パース）を開始する 2. 外部リソースを取得する 3. CSSを解析し、CSSOMを構築する 4. JavaScriptを実行する 5. DOMとCSSOMをマージしてレンダリングツリーを構築する 6. レイアウトとペイントを計算する はじめに 私の考えとしては、高速で信頼性の高いWebサイトを構築するには、実装中に各ステップを最適
こんにちは。エンジニアの谷井です。 フォルシアでは、Spookと呼んでいる技術基盤を用いて、主に旅行業界やMRO業界に対して、膨大で複雑なデータを高速検索できるアプリケーションを提供しています。 今回はその高速検索のノウハウのうち、特にDBの扱いに関連する部分について、ベテランエンジニアへのインタビューを通してそのエッセンスをまとめてみました。 一般的なベストプラクティスだけでなく、検索性能を高めることに特化しためずらしいアプローチもあるので、ぜひご覧ください。 フォルシアにおける検索DBについて まず前提としてフォルシアで扱うデータについて軽く説明します。 扱うデータの複雑さ たとえば、旅行会社向けのアプリケーションであれば、宿泊素材の情報としては ホテルの情報「〇〇ホテル」（~約2万件） プランの情報「朝食付き・ロングステイ△△プラン」（0~1500件/施設） 客室の情報（~100件/
ブラウザで動くサービスを作るときの技術選定
はじめに 私の仕事は、新規サービスをまるっといい感じに開発するのを委託されることがほとんどです。最近はネイティブアプリを作ることよりもブラウザで動くWebサービスを開発することが多いのですが、案件の規模感や要求によって技術選定を少し変えるようにしています。「こういうときはこう」みたいに一概には言えないのですが、普段使う構成を紹介します。誰かの参考になれば幸いです。 2022/02/10 現在での内容です。 前提 開発を委託される場合の運用費をどうするの問題があります。クライアントにクレカ登録をしてもらうか、こちらで支払って毎月請求するかになります。僕は毎月やるのがめんどくさいのでできるだけ前者に倒している関係上、あまりいろいろなSaaSを組み合わせて作ることをなるべく避けています。 規模感によらず使っているもの 私の場合、以下が使えるとめちゃくちゃ効率よく開発できます。 GCP 好きだから
ウェブサイトの表示スピードはサイトの健全性における重要な観点の一つです。Googleが提唱するCore Web Vitalsコア・ウェブ・バイタルズと呼ばれる指標の中にもサイト表示スピードに関する項目があり、表示されるまでの時間が単なるユーザー体験だけでなく、SEOでも無視できない存在です。表示スピード低下の要因はネットワークやサーバーサイド、そしてフロントエンドまで広範囲におよびます。本記事ではその中でも画像の読み込みについて改善できるテクニックを改善前と改善後を比べながら紹介します。 改善前サンプルを別ウインドウで開く 改善後サンプルを別ウインドウで開く 画像読み込みBefore / Afeter 上図はLighthouseによるチェックの結果です。Lighthouseはウェブサイト検査ツールで、ウェブページのパフォーマンス、アクセシビリティ、SEOなどの状態を計測できます。Googl
Bulk insertでも20時間以上かかっていたMySQLへのインサート処理を1時間以内にする - エムスリーテックブログ
この記事はエムスリー Advent Calendar 2022の30日目の記事です。 前日は id:kijuky による チームメンバーのGoogleカレンダーの休暇予定一覧をスプレッドシート+GASで作った でした。 AI・機械学習チームの北川(@kitagry)です。 今回はMySQLへのインサートを20倍以上高速化した話について書きます。 仕事をちゃんとしてるか見張る猫 TL; DR はじめに 今回のテーブル バイナリログを無効化する 追試 LOAD DATA INFILE 追試 テーブルの正規化 インデックスを一時的に剥がす まとめ We are hiring!! TL; DR バイナリログをオフにする LOAD DATA INFILEを使う インデックスを一時的に消す はじめに AI・機械学習チームではサイトトップからアプリに至るまで多くの推薦システムがあります。 そこでは推薦ロ
Webページのパフォーマンスを向上させることは、CSSでも可能です。去年の暮れからChromeで利用できるようになったCSSの新しいプロパティで、2021年現在Edge, Operaにもサポートされています。 読み込みパフォーマンスを向上させるために最も効果があるCSSの新しいプロパティcontent-visibilityについて紹介します。 content-visibility: the new CSS property that boosts your rendering performance by Una Kravets, Vladimir Levin 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに content-visibilityのサポート状況 CSS Containmentとは content-visi
CSSを最適化してページの読み込み時間を高速化する方法
CSSを最適化して、ページの読み込み時間を高速化する方法を紹介します。 シンプルなCSSのファイルをはじめ、大規模プロジェクトで使用されるCSSまで、すべてのCSSに効果があるテクニックです。 Optimizing CSS for faster page loads by Tomas Pustelnik 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 読み込みに時間がかかるのはなぜか？ スタイルシートのファイルサイズを制限する クリティカルCSSを使用する 遅延読み込みのスタイルシート スタイルシートにコード分割を使用する まとめ はじめに 先日、私は自分のWebサイトの読み込み時間を改善することにしました。すでにかなり高速にロードされていましたが、まだ改善の余地があり、CSSの読み込みがその原因の1つであることが分か
画像やiframeの遅延読み込みに使用するloading属性と非サポートブラウザ用にJavaScriptを併用した現代的なアプローチで、最大限のパフォーマンスを発揮させる実装方法を紹介します。 Best way to lazy load images for maximum performance by Adrian Bece 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 遅延読み込みのloading属性とは 遅延読み込みの現代的なアプローチ パフォーマンスとLighthouseスコアの向上 最大のパフォーマンスを得るための画像最適化テクニック はじめに 画像の遅延読み込みは比較的簡単に実装でき、パフォーマンスを大幅に向上させることができるため、Webサイトを最適化するために使用される選択肢の1つです。遅延読み込みで
環境変数を設定するだけでRuby on Railsサーバが10%高速化する(かもしれない)話 - Akatsuki Hackers Lab | 株式会社アカツキ（Akatsuki Inc.)
この記事は Akatsuki Advent Calendar 2019 1日目の記事です。 はじめに アカツキでは Ruby on Rails を使ったゲームサーバを開発・運用しています。ゲームの体験を向上するために、レスポンスタイムは一つの重要な要素となるため、種々のパフォーマンスチューニングを行なっています。今回はその一例として、環境変数を1つ設定するだけで、あるAPIのレスポンスタイムが10%も改善した例をご紹介します。 TL;DR 多数の時刻を含むレコードを扱う Ruby on Rails サーバでは、 TZ 環境変数を設定することで、デフォルトタイムゾーン設定ファイル /etc/localtime へのアクセスが減り、高速化が図れるかもしれません。 効果は Time オブジェクト1個あたり数μsの短縮といったオーダーですが、チリも積もれば山となり、数千個のレコードを処理するAPI
ここ数年、PWA（プログレッシブウェブアプリ）が非常に注目されています。通常のWebページとスマホアプリそれぞれの利点を兼ね備えており、導入したサイトではコンバージョンやユーザーエクスペリエンスの改善が大きく見込めます。 WebサイトをPWAにする手順とその必要性を紹介します。 Turn Your Website into a PWA by Luca Spezzano 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 PWA（プログレッシブウェブアプリ）とは なぜPWAを構築する必要があるのですか？ すでにPWAを採用しているのはどこですか？ PWAを作成する時に必要なもの Web App Manifest Service Worker PWAを5分で構築しよう 静的キャッシュ 動的キャッシュ 静的と動的のどちらを使用すべきですか
こんにちは！ エンジニアリンググループ マルチデバイスチーム 新卒1年目の小林です。 エムスリーでは、2週間に1度、Tech Talkという社内LT会（現在はリモートで）が開催されています。これは、とある回の発表テーマリストです。 Tech Talkのとある回の発表テーマリスト このように、最近エムスリーでは文字列が流行っている（？）ようなので、その勢いに乗って私も文字列照合アルゴリズムについて書きたいと思います！（業務とは全然関係ない話です） Knuth-Morris-PrattやBoyer-Mooreアルゴリズムは解説記事がたくさん出ていると思うので、この記事ではシンプルかつ高速なQuick-SearchとQuite-Naiveアルゴリズムについて説明し、速度比較を行った結果についてご紹介します。 文字列照合アルゴリズムとは テキストとパターンという文字列が与えられたときに、中に出現す
恒星間航行をはじめて行う生物はクマムシになりそうです。 NASAが資金提供するカリフォルニア大学の宇宙計画「スターライトプロジェクト」によれば、手のひらサイズの薄い帆を持つ宇宙船を「光速の30%」まで加速させ、恒星間航行を行う計画があるとのこと。 また、宇宙船の搭乗員かつ被検体には、過酷な環境に耐えるクマムシが有力候補として挙がっているようです。 もし計画が実現すれば、恒星間航行（片道切符）を最初に行った生物としてクマムシが歴史に刻まれるでしょう。 研究の詳細は、今年1月付で科学雑誌『Acta Astronautica』にて公開されています。
つれづれぱんだ @trzr_panda 「絶対ETC付いてるはずなのに一般レーンに入ってく高級車はほぼ不倫」というツイートを見て以来、一般レーンに並ぶ高級車の中を確認してしまう癖をやめたいです。 (今のところほぼ100%男女カップルですねw) 2021-02-13 10:10:10
ニッチな話題ですが、業務におけるCI/CDの現場では避けることのできない大規模リポジトリと戦うためのgit cloneのテクニックを紹介します。 この記事はDeNA Advent Calendar 2020の10日目の記事です。 CI/CDマニアの@Kesin11です。SWETではCI/CDチームの一員として、CI/CDの啓蒙活動やJenkinsを必要とするチームのサポートなどの業務を行っています。 はじめに おそらくどこの会社でも1つぐらいは巨大なリポジトリが存在しているかと思いますが、歴史あるリポジトリはgit cloneするだけで数分を要し、checkout後のリポジトリサイズがGB単位になることも珍しくないでしょう。業務で古くから存在するプロジェクトのリポジトリを触ったことがある方はきっと経験があるかと思います。 git cloneを実行するのは最初のセットアップ時だけなのであまり
「Lighthouse」はGoogleが作成したページの読み込み速度やアクセシビリティなどをまとめてチェック・採点してくれるツールですが、そのLighthouseをサイト上のさまざまなページで動作させることでサイト全体のスコアを一発で算出してくれるツールが「Unlighthouse」です。 Unlighthouse - Site-wide Google Lighthouse · Unlighthouse https://unlighthouse.dev/ Unlighthouseを利用するためにはNode.jsのインストールが必要です。下記のURLから、手元の環境に合ったインストール方法を選択してください。 パッケージマネージャを利用した Node.js のインストール | Node.js https://nodejs.org/ja/download/package-manager 今回は
2023年6月8日 Webサイト制作, 便利ツール おしゃれなフォントが気軽に実装できるGoogleフォント。みなさん使っていますかね？登録やダウンロード不要なので便利ですが、日本語フォントはなかなか容量が大きくてページの読み込み速度に影響が出てしまいます。そこで必要なフォントのみを指定できるサブセット化をしてみましょう！ ↑私が10年以上利用している会計ソフト！ Googleフォントの設定 まずは通常通りGoogleフォントを設定しましょう。GoogleフォントのWebサイトから、今回は例として「Kosugi Maru」というフォントを設定したいので検索。一覧から「Kosugi Maru」をクリックします。 続いて見本の右側にある「Select this style」をクリック。 HTML 画面右側に選択したフォントが表示されます。「Embed」タブをクリックしてコードを取得しましょう。
サイトのロード時間とパフォーマンスを改善するために再構築した結果、ロード時間が1.6秒に短縮され、Lighthouseのスコアで100を獲得した際に、実施した手順を紹介します。 HTMLとCSSベースの改善が主で、ロード時の数ミリ秒間の表示、スマホ用CSSファイルの分割など、いろいろなサイトやブログの改善にも役立つと思います。 当ブログにも改善すべき点があるのが分かったので、対応したいですね。 I rebuilt my portfolio🌻 Now it loads in 1.6s 🎉 Here's how I did by Saurabh Daware 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 要約 改善方法 1: リソースのプリロード 改善方法 2: CSSファイルの分割 改善方法 3: 画像の最適化 ボ
爆速コーディングを実現！Emmetの使い方とVSCodeのおすすめ設定まとめ | Web Design Trends
Emmetを使うと、HTMLやCSSを省略記法でコーディングできるようになり、作業効率が大幅に向上します。 VSCodeであれば、デフォルトの状態でEmmetが有効になっていて、特別な設定無しに利用することができるので、Emmetだと気付かずに使っている方も多いのではないでしょうか。 今回は、Emmetの基本的な使い方と、VSCodeでEmmetを利用する時のおすすめ設定をご紹介したいと思います。 Web制作者必見！VSCodeのおすすめ拡張機能15個まとめ VSCodeを使ってHTML/CSS/JavaScriptなどを使ったWeb制作、Webコーディングを行っている人も多いのではないでしょうか。 VSCodeは様々な拡張機能が公開されていて、それらを活... Web Design Trends Emmetとは Emmetとは、HTMLやCSSを省略記法で入力することができるプラグイン、
GitHub ActionsのイメージビルドをDockerレイヤキャッシュで高速化（翻訳）｜TechRacho by BPS株式会社
概要 原著者の許諾を得て翻訳・公開いたします。 英語記事: Build images on GitHub Actions with Docker layer caching — Martian Chronicles, Evil Martians’ team blog 原文公開日: 2021-03-11 著者: progapandist (And[re]y Bar[a]nov)、dragonsmith (Kirill Kuznetsov) サイト: Martian Chronicles, Evil Martians’ team blog -- ニューヨークやロシアを中心に拠点を構えるRuby on Rails開発会社です。良質のブログ記事を多数公開し、多くのgemのスポンサーでもあります。 はじめに: 適切なDockerレイヤキャッシングでGitHub Actionsでイメージを構築する方法
head内に記述する要素の順番はページのパフォーマンスに影響を与える可能性があります。記述の順番が間違っている要素を特定し、プライオリティが高い順にしてくれるツールを紹介します。 指定したページのhead内の各要素とその重みをリスト化し、プライオリティが高い順に並び替えたものもリスト化してくれます。 2023年最新版: HTMLのheadの書き方、head内に記述する要素の総まとめ capo.jsの使い方 capo.jsを実際に使ってみた capo.jsの使い方 capo.jsを使用するには、2通りの方法があります。 デベロッパーツールのスニペットで実行する ブックマークレットで実行する 手順は簡単です。 capo.jsのJavaScriptをコピーします。 コピーしたJavaScriptをデベロッパーツールのスニペットで実行するか、ブックマークレットを作成します。 ※ブックマークレットは
一部で工事が難航していた中部横断自動車道の山梨と静岡を結ぶ区間が、当初の予定より4年遅れて29日、全線で開通しました。 中部横断自動車道は、静岡から山梨を経由して長野までを結ぶ高速道路で、このうち山梨と静岡を結ぶ74.3キロの区間は平成29年度中に全線が開通する予定でしたが、一部の区間で工事が難航していました。 最後の区間だった山梨県身延町の下部温泉早川インターチェンジと山梨県南部町の南部インターチェンジの間のおよそ13.2キロの工事が終了したことから、当初の予定より4年遅れて29日、全線開通となりました。 身延町の身延山インターチェンジでは関係者およそ130人が出席して式典が開かれ、この中で山梨県の長崎知事は「中部横断自動車道は物流の新たな大動脈となる極めて重要な道路です。経済や観光の活性化など、山々に囲まれた山梨県に計り知れない効果が期待され、山梨、静岡の連携をより一層深めると確信して
中部横断道の静岡～山梨区間が全通。難工事を経てできた新たな道路は、両地域を近くするだけでなく、長野県も「災害に強く」してくれそうです。 トンネル連続、でもそれが大きな意味？ 2021年8月29日（日）、中部横断道の下部温泉早川IC～南部IC間が開通し、「静岡～山梨」区間が全通しました。東名・新東名と中央道が高速道路で直結され、SNSなどでは開通を祝う投稿や、早速「走ってみた」動画が多数アップされています。 中部横断道の南部IC（画像：国土交通省）。 静岡・山梨県境部の山深い地域を通り、「トンネルが多い」といった感想も多く見られます。実際、開通した下部温泉早川IC～南部IC間の約13.2kmだけでも、トンネルの数は10本に上り、そのほかの区間でも連続します。ただこの「トンネルの連続」、実は大きな意味を持っています。 というのも、中部横断道のトンネルは長くても5000m未満。このため、石油製品
Day.jsはMoment.jsライクに使える2KBほどの軽量な日付操作ライブラリです。Moment.jsとほぼ同じ使い方で同じように操作する事が出来ます。 他ライブラリにも依存せず、Moment.jsを使っている方なら学習コストもほぼ不要でファイルサイズもかなり軽量になっています。 Moment.jsにあるような痒いところに手が届く機能を削いだ分、軽量化されている、みたいな感じでしょうか。国際化も進んでおり、翻訳者も募集されています。 ざっくり使い方です。今回は用意されているCDNを使います。unpkgの他、cdnjsやjsDelivrにも用意されているみたいです。 <script src="https://unpkg.com/dayjs@1.8.21/dayjs.min.js"></script>まずスクリプトを読み込みます。 <script>dayjs().format()</scr
信号のない環状の交差点「ラウンドアバウト」を、高速道路IC付近に設けるケースが増えています。円形構造の道路を設けることで様々なメリットがありますが、一部「ラウンドアバウトっぽい」道路も存在します。 なかには「ダブル」も 高速道路IC付近のラウンドアバウト ヨーロッパを発祥とする信号のない円形の交差点「ラウンドアバウト」。2014（平成26）年9月の道路交通法改正によって「環状交差点」の名でその通行ルールが定められて以降、2020年春には全国100か所以上まで導入されましたが、これを高速道路ICの近くに設けるケースも増えています。 最初に設けられたのは、東海環状道の鞍ヶ池スマートIC（愛知県豊田市）です。こちらは、内回り側と外回り側のPAに付属した料金所から、それぞれランプウェーがラウンドアバウトへ伸び、ラウンドアバウトから県道までは1本のアクセス道路が通じているという構造です。 地元の豊田
デロイトとGoogleの調査(PDF)によって、ウェブサイトへのアクセス数や滞在時間はページの読み込み速度に大きな影響を受けることが判明しています。できるだけ読み込み時間を短く抑えたいものですが、長年ウェブサイトを運営しているとさまざまなしがらみによってアナリティクスなどのサードパーティスクリプトが増加し、どんどん読み込み速度が遅くなってしまうことも。そうしたサードパーティースクリプトの処理をサービスワーカーに任せることで読み込み速度を爆速にしてくれるのが「Partytown」です。 Welcome To Partytown https://partytown.builder.io/ ウェブの世界では基本的にJavaScriptでしかプログラミングを行えませんが、このJavaScriptはシングルスレッドで実行されており、つまり同時に一つの処理しか行えないようになっています。多数のスクリプ
GitHub - leeoniya/uPlot: 📈 A small, fast chart for time series, lines, areas, ohlc & bars
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session.
高速道路も消費税率引き上げで値上げへ | NHKニュース
10月に消費税率が引き上げられるのに伴い、高速道路各社は引き上げ分を通行料金に上乗せすることを決めました。 このため、ＥＴＣを搭載した普通車の場合、通行料金はこれまで距離に応じて300円から1300円でしたが、10月１日以降は最大料金が20円上がって1320円になります。 一方、東日本高速道路、西日本高速道路、中日本高速道路の３社も今の料金に消費税率の引き上げ分を上乗せしたうえで、原則10円未満の端数を四捨五入しますが、料金が１万円を超えた場合は、100円未満の端数を切り捨てます。 このほか、本州四国連絡高速道路も今の料金に消費税率の引き上げ分を上乗せしたうえで、10円未満の端数を四捨五入することにしています。
こんにちは！ うどん県出身のメディアコンサルタント、太田ジョーです。オウンドメディア運用について様々な施策を模索し、効果最大化に向けたお手伝いをさせていただいています。 オウンドメディアを運用するときに意識したいのがSEO対策です。特に「検索順位が上がらない……」という状況が続くと、記事の効果検証も難しく、何より運用のモチベーションが下がってしまいますね。 そこでこの記事では「記事を更新しているのに検索順位が上がらない」「いつまでたっても広告頼りになってしまう」といった担当者のみなさまへ向けて、私が運用支援を担当させていただく際に確認するポイントを6つご紹介します。 「オウンドメディアを運用しても成果がなかなかでない」「施策の立て方が難しい」などとお困りではありませんか？ ・SEO対策で自然流入が14倍。うち10位以内は0％→7％に ・認知拡大を目的とするオウンドメディアで、コンテンツ企画
アマゾンが1兆円注ぐ「衛星インターネット」の危険な未来 | Forbes JAPAN 公式サイト（フォーブス ジャパン）
米連邦通信委員会（FCC）が、アマゾンによる3000基を超える通信衛星の打ち上げ計画を承認したことが明らかになった。大量の衛星から成る「メガコンステレーション」に関しては、様々な問題が指摘されている。 FCCは7月30日、アマゾンの「プロジェクト・カイパー（Project Kuiper）」を承認した。この計画は、3236基の衛星で構成されるメガコンステレーションを地球周回軌道上に配備し、地上に向けてインターネット接続サービス提供するものだ。 今後、ジェフ・ベゾス率いるアマゾンは、2026年までに衛星の半分を、2029年までに残りを打ち上げることになる。同社は宇宙インターネット市場に参入し、スペースXの「スターリンク（Starlink）」や、英国に本拠を置く「ワンウェブ（OneWeb）」などと競合することになる。 アマゾンが目指すのは、地球低軌道に衛星を隈なく配備し、地上の人々がどんな僻地に
チャートライブラリに求められるニーズはたくさんあります。使えるグラフの種類が多いこと、カスタマイズが容易なこと、リアルタイムデータにも使えることなどなどです。すべてをまかなえるライブラリは多くないので、目的に合わせてライブラリを使い分けるのが良いでしょう。 今回紹介するuPlotはとにかく大量のデータを即座に表示したいというニーズにマッチしています。 uPlotの使い方 デモです。16.6万ものポイントをプロットしています。 最初の表示時のみ、データをオンラインで取得してきますが、二回目以降のアクセスではキャッシュが有効になるようです。データさえ取得されれば、実際の表示は瞬時に行われます。表示はもちろん、その後のスクロールもスムーズです。 uPlotはJavaScript製のオープンソース・ソフトウェア（MIT License）です。 leeoniya/uPlot: An exceptio
1. まずは基本から！React.jsとは？ React.jsはFacebookが開発したフロントエンドのライブラリ。コンポーネントという小さな部品を組み合わせて、動的なユーザーインターフェースを構築するのが得意。SPA (Single Page Application) での開発が主流で、ボタンやフォームなどのUI部品を効率よく作れるんだ。 あれ....? じゃあReactでもう良くない...? 結論 ページ数が少ない小規模な開発ならReact!大規模ならNext.jsか他のやつ！ ページ数が多い大規模の開発ならReactだと読み込み遅くなっちゃう！ 2. じゃあ、Next.jsって何？ Next.jsはReactの上に乗っかってるフレームワーク。このNext.jsの一番の魅力は、サーバーサイドレンダリング(SSR) と スタティックサイト生成(SSG)。これにより、クライアントサイドの
こんにちは、Webディレクターのともぞうです。 今回はPCを素早くセットアップをする方法を紹介します。 最近、使っていたPCの調子が悪くなったので新しいPCに交換しました。いままで使っていたPCから新PCへ移行するにあたって、やはりセッティングにはそれなりの時間がかかります。 アプリのインストールや、各種設定……そんな面倒なセットアップをできるだけ短時間でおこなえる方法を紹介します。 また、本稿でアプリという言葉が意味するものは、Google ChromeやVisual Studio Codeなどです。 アプリのインストールを効率的におこなう方法 今回アプリのインストールをおこなうにあたってHomebrew-caskというものが必要になります。Homebrew-caskはHomebrewの拡張機能で、これを用いてアプリをインストールできます。 HomebrewはmacOS用のパッケージ管理
nodeにおけるバージョン管理はndenvを使う人が多いのではないでしょうか。また、ライブラリはnpmやyarnを使うことが多いです。そして、それらのライブラリはnodeで書かれているものになります。 今回紹介するVoltaは一風変わっており、Rustで書かれています。 Voltaの使い方 nodeをインストールする操作です。バージョン番号を細かく指定することも、省くこともできます。省くと指定バージョンの最新版が選択されます。これは意外と便利です。 $ volta install node@12 success: installed and set node@12.6.0 as default $ node -v v12.6.0 $ which node /Users/nakatsugawa/.volta/bin/node ライブラリのインストール。package.jsonを使うのでnpm
Anime4K - 高速に画像を拡大
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました ぼやけた映像をくっきりとさせたり、拡大できるのがwaifu2xです。イラストや写真に特化し、世界中から高い評価を受けています。処理時間が若干長いですが、それだけハイクオリティな成果が得られます。 そんなwaifu2xに対抗するのがAnime4Kです。リアルタイムでも処理できる、とする高速さが売りです。 Anime4Kの使い方 実行例です。右側が元画像、左が拡大版です。精度は十分ではないでしょうか。 Anime4Kはwaifu2xの300倍以上高速としています（1080pから2160pへの拡大時）。Java版の他、HLSLやGLSLといったシェーディング言語を使った版も用意されています。昔のぼやけた動画もAnime4Kを使えば鮮明にできるかも知れません。 Anime4KはJava製の
【女性向け車の教養サイト】とことんとことん車のことをわかりやすく！元自動車販売会社社員が教える車の最低限教養教室 くるわか
NumbaのJITでPythonを高速化したら40倍も速くなった | WATLAB -Python, 信号処理, 画像処理, AI, 工学, Web-
Pythonは人気のある言語ですが処理速度は速くありません。しかし、NumbaのJITコンパイルを使う事で簡単に高速化が可能です。ここではNumbaのインストールからベンチマークテストを行い、最大40倍の高速化に成功した事例を紹介します。 Pythonが遅い理由 Pythonを高速化する前に、なぜPythonはこんなにも遅いのかを調べてみました。そういえばPython関係のブログを始めて1年ほど経ちますが、処理速度については全く意識していませんでした。 Pythonは特にfor文といったループ系の文が遅い遅いと世間で言われています。 でもなんで遅いのでしょう？ 正直僕はそんなに情報工学に詳しくないので、中々イメージできていませんでしたが、以下に理解の参考となったブログがありましたのでいくつかメモしておきます。 “GIL（グローバルインタプリタロック）であるため” “インタプリタ言語で、コン
The simdjson library
Parsing gigabytes of JSON per second JSON is everywhere on the Internet. Servers spend a lot of time parsing it. The simdjson library uses commonly available SIMD instructions and microparallel algorithms to break speed records. Browse the API The simdjson library on GitHub Highlights Fast: Over 4x faster than RapidJSON and 25x faster than JSON for Modern C++. Easy: First-class, easy to use and ca
YouTubeの動画埋め込み表示機能は便利で使っている人も多いかと思います。しかし、あの埋め込み表示は動作が重たく、あまり大量に埋め込むとWebブラウザの負荷が高くなります。 そこで使いたいのがlite-youtubeです。標準のツールに比べて圧倒的に軽快に動作します。 lite-youtubeの使い方 lite-youtubeで動作を表示した例。 デフォルトのiframeの場合。 lite-youtubeを使う場合のタグです。 <!-- 簡易版 --> <lite -youtube data-videoid="ogfYd705cRs"></lite> <!-- 詳細版 --> <lite -youtube data-videoid="ogfYd705cRs" style="background-image: url('https://i.ytimg.com/vi/ogfYd705cRs/
cdコマンドはLinuxやmacOSで最もよく使うコマンドの一つではないでしょうか。 $_ や - を覚えておくとディレクトリ移動が捗るようになりますが、それでも頻繁なディレクトリ移動は面倒なものです。 よくいくディレクトリがある場合はzoxideを使ってみるといいでしょう。ディレクトリをブックマーク的に登録できるソフトウェアです。 zoxideの使い方 まずディレクトリを登録します。 $ cd ~/Documents/ $ za DevRel そして別なディレクトリで z コマンドを使います。 $ z DevRel $ pwd ~/Documents/DevRel コマンド名が短いのもいいです。zコマンドとディレクトリの名前で、どこからでも素早く移動できます。zaで登録、zrで削除できます。ziでインタラクティブに移動先を絞り込めます。頻繁なディレクトリ移動がある人ほど便利なソフトウェア
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Webページ高速化に必須の知識！ブラウザがWebページをどのようにレンダリングしているか、図を用いて解説
検索が爆速になるデータベース設計を公開します
1ミリ秒でも早く届けたい! HTMLで画像読込を高速化するために取り組んでいること - ICS MEDIA
CSSの新しいプロパティ「content-visibility」レンダリングのパフォーマンスが向上する
画像の遅延読み込みにloading属性とJavaScriptを併用した最大限のパフォーマンスを発揮させる実装方法
WebサイトをPWA（プログレッシブウェブアプリ）にする手順とその必要性
シンプルかつ高速な文字列照合アルゴリズムを紹介します - エムスリーテックブログ
NASAがクマムシを「光速の30%」まで加速させる宇宙飛行計画を発表 - ナゾロジー
「絶対ETC付いてるはずなのに一般レーンに入ってく高級車はほぼ不倫」と聞いてから車の中を確認するようになってしまった話
大規模リポジトリで高速にgit cloneするテクニック - DeNA Testing Blog
サイト上のさまざまなページのパフォーマンスをまとめて測定できるツール「Unlighthouse」
Googleフォントをサブセット化してページの読み込みをスムーズに
サイトを高速化したらロード時間は1.6秒に、Lighthouseは100を獲得、その際に実施した手順を解説
head内の各要素とその重みをリスト化し、プライオリティが高い順に並べ替えてくれるツール -capo.js
中部横断自動車道 山梨ー静岡間が開通 当初の予定より4年遅れ | NHKニュース
「危険物車が通れる」中部横断道 静岡～山梨全通もうひとつの意義 トンネルは最長4999m | 乗りものニュース
Moment.jsライクに使える2KBほどの軽量な日付操作ライブラリ・「Day.js」
相性バツグン？ 高速道路ICにラウンドアバウト増加のワケ 一部「それっぽいもの」も | 乗りものニュース
重たい処理を裏に回してサイトの読み込みを爆速にするライブラリ「Partytown」使ってみたレビュー
検索順位が上がらないときの6つの確認ポイント【SEO担当者へ】 | 株式会社LIG
uPlot - 大量のデータを高速に描画するグラフライブラリ MOONGIFT
Next.jsってそもそもなんで必要なんだっけ - Qiita
Homebrew-caskで爆速PCセットアップ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
Volta - Rust製のnodeバージョン/ライブラリ管理 MOONGIFT
高速の出口を間違えた！どうすれば？料金無駄になる？いいえ。説明すれば無料で戻れます
Canvas 2Dベースの高速で軽量、さまざまなタイプのチャートに対応できるオープンソースのチャートライブラリ・「μPlot」
lite-youtube - YouTube動画の軽量埋め込み表示
zoxide - これまでにない高速なディレクトリ移動コマンド MOONGIFT
hgot07.hatenablog.com
opensquare.jp
applech2.com
saga4mono6.com
www.hokkaido-np.co.jp
www.rehabilimemo.com