サイト上のさまざまなページのパフォーマンスをまとめて測定できるツール「Unlighthouse」
「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 今回は
keywords-extract - Webページからキーワードを抽出 MOONGIFT
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Webページから情報を抽出するニーズは常に存在します。メタタグはそのためにあるのですが、任意に設定できるので利用者側のニーズに合っていない可能性があります。そこで本文を取得したり、タイトルや更新日を取得するスクリプトなどが作られています。 今回紹介するkeywords-extractはWebページからキーワードを抽出してくれるソフトウェアです。 keywords-extractの使い方 keywords-extractを実行したところです。文字数などを閾値に設定できます。 $ keywordsextract --url https://en.wikipedia.org/wiki/Search_engine_optimization --n 3,4 [ 'Search engine'
LIGブログの安全な開発のために 〜WebdriverIOでスクリーンショットを撮る編〜 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、フロントエンドエンジニアのいなばです。 8月より自社開発チームに異動となり、最近はLIGブログの改善に勤しんでいます。 Webサイトも長く運用されるとどうしてもCSSが負債になってしまいがちですね。 負債返却のために安心してコードを綺麗にしていきたいのですが、修正が思わぬ場所で影響を起こしてしまってCSSが壊れていてもなかなか気づきづらいものです。 今回は、目視での確認漏れを少し楽にするべく、WebdriverIOを使ってスクリーンショットを撮るサンプルを作ってみました。(検証してないのでWindowsをお使いの方は動かなかったらごめんなさい。) WebdriverIOの導入 事前にNode.jsのインストールとJava7（jdk7）以上がインストール（確認方法はこちら）されている必要があります。 リポジトリのクローン後、npmの依存モジュールのインストールが済めば、Webdr
Gatsby - Markdown×Reactによる静的サイトジェネレータ MOONGIFT
静的サイトを作る時にはコンテンツを作ってリロードして表示を確認するのが基本です。その時、ライブリロードのような仕組みを使っていても基本は変わりません。SPA（シングルページアプリケーション）であれば一番上まで戻ってしまうでしょう。確認がだんだん面倒になっていくはずです。 そこで使ってみたいのがGatsbyです。Markdown + Reactを使った静的サイトジェネレータです。 Gatsbyの使い方 Gatsbyのインストールはnpmでできます。 npm install -g gatsby インストールしたらまずサイトのベースを生成します。 $ gatsby new my-test-gatsby-site 07 Sep 08:00:44 - log: Cloning git repo "git://github.com/gatsbyjs/gatsby-starter-default.git
Show me the React! - Reactを使っているサイトが一目で分かる！ MOONGIFT
Reactでの開発を学ぶ上で、既存のReactを利用しているサイトを見てその内容を把握するのは良い材料になるでしょう。しかし表面上はDOMを出力しただけなのでReactを使っているのかどうかは分かりづらいです。 そこで使ってみたいのがShow me the React!です。Reactを使っているWebサイトがあればアドレスバーで通知してくれるようになります。 Show me the React!の使い方 Reactで作られているサイトを見ると、アドレスバーにReactのアイコンが出るようになります。 さらにクリックするとReactを使っているDOM部分がハイライト表示されます。 こんな感じでどの部分がReactで生成されているのかが視覚的に分かりやすくなります。 React開発時のヘルパーとして入れておくと便利ではないかと思います。今後、増えていくと思われるReactのシェアを知る上でも
HTML5のWebsocketを使って同時接続数をサーバから送信する
HTML5のWebsocket（Node.js+Socket.IO）を使って、現在の同時接続数をサーバから送信するサンプルを作ってみました。 環境を作ったのは自分のPCのためリアルでお見せできないのが残念ですが、動画をキャプチャしたのでそちらでご確認ください。 １．サンプル動画 2つのブラウザからそれぞれ「http://127.0.0.1:8124」にアクセスして、そのページの同時接続数を各ブラウザに表示します。接続数の増減によって、ページに接続しているコネクションすべてに、サーバから情報を送信します。操作をしていないブラウザにも即時に接続数が反映されます。 非常にシンプルなものですが動いたときはちょっと感動しました。 ２．サンプルコード Node.jsとSocket.IOを使ったサンプルコードを掲載しておきます。 色々ネットを探しましたが（探しきれてないかもしれません）、Node.js+
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
