脱webpack : CLI編 - Qiita
はじめに 現在フロントエンド開発環境のうち、一部のwebpack依存処理をnode.jsスクリプトに置き換えています。 前回の記事ではejsの変換処理をnode.jsスクリプトに移行しました。 脱webpack : ejs編 今回は簡単な処理を肩代わりできるCLIモジュールをご紹介します。 皆さまへのお願い 「このモジュールは絶対便利！覚えておけ！損はないから！」 という一押しモジュールがあったらぜひコメント欄からお知らせください。 nodeモジュールのインターフェイス nodeモジュールをユーザーが利用する場合、インターフェイスはAPI経由かCLI経由のどちらかになります。1つのモジュールで両方のインターフェイスを用意しているものもあります。各モジュールがどのインターフェイスを備えているかはREADMEに記述してあります。 API APIはモジュールをjavascriptから呼び出すイン
脱webpack : ejs編 - Qiita
はじめに 現在フロントエンド開発環境のうち、一部のwebpack依存処理をnode.jsスクリプトに置き換えています。 本記事はその結果のうち、ejsをnode.jsスクリプトで変換する方法を共有するためのものです。 ejsとは ejsは、html内にjavascriptの構文を埋め込めるjavascriptテンプレートエンジンです。 htmlの一部分を外部ファイル化してincludeできる 外部変数を読み込んで複数のhtmlを生成できる 配列を利用してDOMの繰り返しを生成できる などの利点があります。構文についてはこちらの記事に詳しく情報が載っています。 テンプレートエンジンEJSで使える便利な構文まとめ なぜejsを選ぶのか 同種のjavascriptテンプレートエンジンとしてhamlやPugなどがあります。これらのテンプレートエンジンはejsよりもさらに踏み込んで、htmlタグ自体
静的サイト向けWorkBoxレシピ - Qiita
はじめに WorkboxはGoogle製のJavaScriptライブラリです。PWAに必要となるService Workerの各種機能を簡単な記述で利用できるようにします。このライブラリを使用して、静的サイトのキャッシュとオフライン表示に対応してみました。 結果 Chromeのシークレットモードを利用し、アドオンの影響を受けない状態で転送量を計測しました。 サンプルは自分のポートフォリオサイトを利用しています。 初回ロード スマホサイズの画面でサイトをネットワーク側から取得した状態です。総転送量は319KBです。 2回目ロード データはすべてService WorkerのCacheから読み込まれるため、総転送量は662Bでした。 また、オフライン状態でもキャッシュされた範囲のデータは表示が可能です。 読み込み速度はかなり低下しますが、Service Worker非対応のIE11でも表示が可
静的サイトに Service Worker を導入しようとして失敗した話 - Qiita
はじめに 実験的に自分のポートフォリオサイトにService Worker Cache APIを導入しようとして結局断念しました。 この記事は、この失敗の経験の分析と共有のためのものです。 想定する読者 この記事は以下の読者を想定しています。 Service Workerに興味がある まだService Workerを使用したことがない ほとんどService Workerの知識のない初学者を想定しています。 私自身も今回はじめてServiceWorkerに触れました。同じような経験と知識の方を想定しています。 前提とする環境 この記事では、以下のような環境を前提として書かれています。 環境の変化によって内容に齟齬が生じますのでご注意ください。 対象とするサイト 小規模な静的サイト 今回は自分のポートフォリオサイトを実験環境に利用しました。 動的な情報取得や処理がない静的ページです。 開発
macOS + node.js + BrowserSync でローカルhttps開発環境 - Qiita
はじめに この記事は、以下の環境で、https通信可能なローカル開発環境を構築する手順を共有するためのものです。 前提とする環境 macOS v10.13.6 node.js v8.11.4 browser-sync v2.24.5 ServiceWorkerに興味があり、実験環境を構築しようとしたところ、httpsが必須とのことでした。 そこで、node.jsの開発環境でhttpsが利用できるように自己証明書を発行し読み込ませます。 2018/09/08追記 ServiceWorkerの実行にはhttps通信が必須ですが、localhostに限りhttp通信でも実行可能です。 Service Worker の紹介 - Web Fundamentals Service Worker以外で、localhostに自己証明書が必要になった場合は本記事の方法を試してみてください。 設定の手順 基本
あなたのサイトのjpeg画像は過剰品質である。多分。 - Qiita
はじめに Webサイト掲載用のjpeg画像の品質設定を絞り込むためのツールを作りました。 imagemin-parameter-report また、ツールの動作イメージを掴むためにデモページを用意しました。とりあえず触ってみてください。 Demoページ この記事は、このツールとその使い方、そしてチェックシートを利用して、WEBサイト構築の初期段階でjpegの品質設定を絞り込む手法を共有するためのものです。 なお、このリポートツールで扱うのはあくまでWebサイトに掲載する一般的な画像です。また、作業の最終目的はサイトの高速化です。 jpegの品質問題 画像ファイルはWebサイトの総転送量と表示時間に非常に大きな影響を与えます。しかし、jpegの品質設定を詰める作業は以下の理由で難しくなります。 人手が足りない jpegの品質設定はプロジェクトのなるべく早いうちに決めるべきです。少なくともプロ
静的サイトをとにかく高速化する話
自分のポートフォリオサイトをサンプルに、どのくらいの容量削減ができるのかを確認してみました。 jsおよびCSSは、サイトの表示に必要な要素を1ファイルにバンドルした状態です。 画像ファイルはjpegの圧縮率などによって最終的なサイズが大幅に変化するので、jsとCSSのサイズ変化のみを取り上げました。 Bootstrap + Font Awesomeのような重量級フレームワークを使用しても、十分に実用的な容量まで削減できました。これならスマホ+3G回線での表示も心配ありません。 手法 適用しやすさを順に手法を並べると、以下のようになります。 遅延する 圧縮する キャッシュする まとめて削る 遅延する サイト上にあるほとんどのリソースは、実際には後から読み込んでも問題なく動作します。 まず最小限の構成でサイトを表示させ、重いファイルは後から読み込みます。 javascriptの遅延読み込み h
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
