Next.js Web アプリケーションにおける SSG とSSR の比較： 正しいレンダリングアプローチの選択 | Amazon Web Services
Amazon Web Services ブログ Next.js Web アプリケーションにおける SSG とSSR の比較： 正しいレンダリングアプローチの選択 人気の React フレームワークである Next.js は、開発者がモダンな Web アプリケーションを構築する方法を変えました。Next.js は、Static Site Generation (SSG) や Server Side Rendering (SSR) といった強力な機能を提供し、アプリケーションのパフォーマンスとユーザー体験を最適化します。本記事では、SSG と SSR の主な違い、利点、いつどちらかを選択するか、それぞれのアプローチで AWS Amplify を使ってデプロイする方法を説明します。Amplify は、フロントエンドの Web やモバイル開発者が AWS 上でフルスタックのアプリケーションを簡単に
ウェブの進化とウェブブラウザ開発の最前線
学部 3, 4 年生向けの特別講義で『ウェブの進化とウェブブラウザ開発の最前線』というタイトルで話をしてきました。 ウェブの進化の歴史を知ることで現在のトレンドについて理解し、またウェブブラウザというグローバルで大規模なソフトウェアの開発の一端を垣間見ることで、ウェブやウェブブラウザの開発に少しでも興味を持ってくれたら良いなぁという気持ちで話をしてきました。 なお歴史観については私の事実誤認も含まれると思うので、間違いを見つけたら教えて下さい :-) 追記 (随時) たくさんの反応を頂きありがとうございます！次回同じような資料を作るときの参考にできるよう、ここにメモしていきます。ウェブは無限に話せる話題があって楽しいですね！ ウェブ以前のハイパーテキストの歴史も取り入れるべきでは？ ありがとうございます！おっしゃるとおりで、ウェブの進化史と言いつつウェブが公開されてからの話しかしていないの
モダンなWebフロントエンドの技術とAMP
モダンなWebフロントエンドの技術とAMP モダンなWebフロントエンドのフワームワークやツールとAMPについて紹介します。 リクルートテクノロジーズ兼リクルートライフスタイルのASGチームに所属しているフロントエンドエンジニアの可児です。本記事は、リクルートライフスタイルアドベントカレンダー４日目の記事です。 本記事では、リクルートライフスタイルで取り組んでいる新規Webサービスのモダンなフロントエンド開発に関することとして、Next.jsやAMPについて紹介します。 目次 はじめに モダンなWebフレームワーク React/Next.js TypeScript styled-components AMP AMPとは AMPの開発パターン Next.jsとAMP AMPキャッシュ AMP と 非AMP の共存 検索結果カルーセルとSEO AMPの開発における注意点 まとめ はじめに リク
AMP におけるパフォーマンス改善 | Recruit Tech Blog
はじめまして、ホットペッパービューティーコスメ(以下 HPBC) の Web フロントエンドエンジニアとして学生アルバイトをしている三島です。3 ヶ月間のアルバイト期間で、案件に関わる機能開発や SEO 施策の検討と実装、パフォーマンス改善など様々な業務に取り組ませていただきました。本記事ではその中でも、私が取り組んだ HPBC におけるパフォーマンス改善について紹介します。 目次 1. はじめに 2. 想定読者 3. AMP とは 4. パフォーマンス改善の前提知識 5. 現状計測 6. 問題特定 7. 問題解決 8. 今後 9. まとめ はじめに HPBC の開発プロジェクトでは、Web ページを閲覧してくれるユーザーにとってページが完全に表示されるまでのスピード、つまり「パフォーマンスが大事である」という認識をチーム全体で共有しています。Web サービスのプロダクトは、機能の追加・改
GoogleによるWebサイトパフォーマンス測定ツール「Lighthouse」入門 | さくらのナレッジ
昨今ではWebサイトやWebアプリケーションに対し「適切にページが表示されるか」だけでなく、ロード時間の早さやアクセシビリティといった使い勝手の良さも求められるようになっている。これらは利用者の満足度向上だけでなくGoogle検索の表示結果にも影響するため、できる限り対応しておきたい。そこで今回は、Googleが提供するWebサイト/Webアプリのパフォーマンスやアクセシビリティ診断ツール「Lighthouse」を紹介する。 さまざまな指標による診断を手軽に実行可能できるツール「Lighthouse」 WebサイトやWebアプリケーションを構築する際には、かつてはどんなWebブラウザでも同じように表示され同じように動作することや、検索エンジンによって高く評価されるようなマークアップを行うことが求められていた。これらは現在でももちろん重要ではあるのだが、昨今ではそれに加えて使い勝手の良さも求
Webアプリのセッション管理とデータ保存を学ぶ#2（社内勉強会）
#1 Webアプリのセッション管理の基礎 #2 クライアント側のデータ保存方法（本記事） #3 サーバー側のデータ保存方法 2. Webサービスにおけるデータ保存（クライアントサイド編） クライアント（ブラウザ）側でのデータ保存について、主流であるCookieをもう少し詳しく見てみましょう。 Cookie CookieはHTTP仕様で定められているサーバーとクライアント間でHTTPリクエストを跨いだデータをやり取りできる方法の一つです。機能自体はサーバーがHTTPレスポンスの中で短い文字列データをクライアントブラウザ側に保存させ、クライアントブラウザが同じサーバーに通信する時に都度Cookieに保存された内容をHTTPリクエストに送信するといったシンプルな仕様です。 Cookieはクライアントに複数のHTTPリクエストを跨がって同じ文字列を送信させることができるので、ここにセッションIDを
HTTP キャッシュを使用して不要なネットワーク リクエストを防止する | Articles | web.dev
HTTP キャッシュを使用して不要なネットワーク リクエストを防止する コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。 ネットワーク経由でのリソースの取得には時間とコストがかかります。 サイズの大きいレスポンスの場合、ブラウザとサーバーの間で何度もやり取りする必要があります。 重要なリソースがすべてダウンロードされるまで、ページは読み込まれません。 限られたモバイルデータ プランでサイトにアクセスしている場合、不要なネットワーク リクエストはすべてユーザーのお金の無駄使いです。 不要なネットワーク リクエストを回避するにはどうすればよいでしょうか。ブラウザの HTTP キャッシュは防御の最前線ですこれは必ずしも最も強力で柔軟なアプローチではなく、キャッシュに保存されたレスポンスの存続期間を制御することは限られていますが、効果的であり、すべてのブラウザでサポ
これから始めるエンタープライズ Web API 開発 | オブジェクトの広場
本連載では、Web APIの公開／構築に興味のある方向けに、Web APIの設計や実装の課題とその解決策をご紹介します。 第1回の記事ではWeb APIの設計について、下記の３点を意識するべきという解説をしました。 使いやすさ、わかりやすさ 安全性、堅牢性の高さ 耐障害性の高さ 今回は主に『使いやすさ、わかりやすさ』について、REST APIを題材に解説していきたいと思います。 なお本記事は『REST APIは利用したことはあるが、自身で設計したことが無い』といった開発者を想定しています。 そのため『REST APIとは』のようなREST APIの概要には触れません。 REST APIの基本的な内容を学習したい方は下記書籍などをご参照頂くと良いかと思います。 『RESTful Web サービス』（Leonard Richardson他 著, 山本洋平 監訳, オライリー・ジャパン社, 20
地価公示・地価調査・取引価格情報 | 土地総合情報システム | 国土交通省
本システムのリニューアル（利用者アンケート画面の開設等）に伴い，本システムのＵＲＬが以下の通り変更となります。 そのため，利用者の皆様がお気に入り又はブックマーク機能に登録されているＵＲＬを変更していただくようお願いいたします。 トップページURL 旧URL：http://www.land.mlit.go.jp/webland/ 新URL：https://www.land.mlit.go.jp/webland/ The URL of this page is changed as follows because of the renewal(Setting up of the user surveys homepage) of this system. Please change the URL if you have added it to your Bookmark or Favori
Javaで業務系システムを開発するときの鉄板構成(2015年12月版) - Qiita
はじめに Javaにはたくさんのフレームワークやライブラリがあります。 新規のプロジェクトでは何を採用するか検討する必要がありますが、最近Javaを始めた人や長い間レガシーなシステムをやっていて新しい技術に触れる機会がなかった人にとっては、たくさんの候補の中から選択していくのは大変なのではないでしょうか。 そこで、大部分のプロジェクトで無難に対応できるような鉄板ともいえる構成をまとめてみました。 想定システム 業務系システムと呼ばれるもの。金融系、人事系など、比較的お堅い感じのシステム メンバーが複数人で中規模以上のプロジェクト Webアプリ＋バックエンドのバッチ 対象外 比較的カジュアルなWebサイト(そういうサイトでJavaを採用する事自体少ないですし) メンバーが一人で個人の趣味でプロダクトを自由気ままに選択できるようなプロジェクト Androidアプリ デスクトップアプリ 自分が鉄
イベント生中継！ html5j パフォーマンス部 第一回勉強会の模様をライブでお届けします
イベント生中継！ html5j パフォーマンス部 第一回勉強会の模様をライブでお届けします 仲 裕介（HTML5 Experts.jp副編集長） この記事では、html5j パフォーマンス部 第一回勉強会の模様をライブでお届けします。勉強会に参加したくても参加できなかった方は必見です！ はじめに html5jでは部活動という形で様々な分野の勉強会が活発に行われています。今回の勉強会を主催するパフォーマンス部もその一つで、昨年暮れに構想が持ち上がり、今回第一回目の勉強会開催となりました。今回の会場はDeNAさんの会議室です。 本日の勉強会はWebパフォーマンスの最前線でどのような事が行われているのか、３名のスペシャリストが余すことなくしゃべります！ 開会の挨拶＆5jcupの告知 はじめに、html5j管理人の白石さんから、開会の挨拶と今絶賛開催中の5jcupの告知が行われました。 5jcup
導入事例からIT製品・サービスを探す｜キーマンズネット
基幹系システム ERP 会計システム 電子帳票システム ワークフロー 勤怠管理システム もっと見る 情報共有システム・コミュニケーションツール グループウェア Web会議 テレビ会議/ビデオ会議 ファイル共有 文書管理 もっと見る 情報システム SFA CRM コールセンター/CTI BPM PLM もっと見る メール 電子メール メールセキュリティ メールアーカイブ その他メール関連 もっと見る エンドポイントセキュリティ アンチウイルス 暗号化 認証 ID管理 メールセキュリティ もっと見る ネットワークセキュリティ ファイアウォール WAF IPS UTM セキュリティ診断 もっと見る 運用管理 統合運用管理 IT資産管理 サーバー管理 ネットワーク管理 統合ログ管理 もっと見る バックアップ バックアップツール バックアップサービス テープバックアップ その他バックアップ関連 もっ
YUVフォーマット及び YUVとRGBの変換
はじめに YUV，YUVとよく耳にするが，いったいどれだけフォーマットがあんねん！ YUVとRGBの変換式をよく目にするが，いったいどれだけ定義があんねん！ どうもwebで調べていると，デジタルもアナログも，YUV，YCbCr，YIQの変換式も すべて混沌としていて，どれが正しいのか見当がつかない．筋が通っ ていると思われるものを書きつくってみる． YUVとは 「人間の目は明るさの変化には敏感だが, 色の変化に は鈍感である」 というわけで，色度を抑え、輝度により広い帯域やビット数を 割くことにより、少ない損失で効率の良い伝送や圧縮を実現するフォーマット． デジタル画像の圧縮CODECにおけるフォーマット という観点でまとめる． Y
TheC10kProblem - 「C10K問題」（クライアント1万台問題）とは、ハードウェアの性能上は問題がなくても、あまりにもクライアントの数が多くなるとサーバがパンクする問題のこと
TheC10kProblem - 「C10K問題」（クライアント1万台問題）とは、ハードウェアの性能上は問題がなくても、あまりにもクライアントの数が多くなるとサーバがパンクする問題のこと 目次 この文書について C10K 問題 関連サイト まず読むべき本 I/O フレームワーク I/O 戦略 1. 各スレッドが複数のクライアントを受け付ける. そしてノンブロッキング I/O と レベル・トリガ型の完了通知を利用する. 伝統的な select() 伝統的な poll() /dev/poll kqueue() 2. 各スレッドが複数のクライアントを受け付ける. そしてノンブロッキング I/O と 変更型の完了通知(readiness change notification)を利用する. kqueue() epoll リアルタイム・シグナル fd 単位のシグナル (Signal-per-fd)
Lingr and Comet - 技術解説編:Kenn's Clairvoyance
さて、お待たせしました。いよいよCometとLingrについての技術解説です。 ■Comet解説 さて、まずはCometとは何で、どういう背景によって生まれたのか、についての解説から始めます。 まず前提として、Webアプリケーションにおいては、通信開始のトリガーは常にクライアント側が握っています。つまりURLを入力したりボタンをクリックしたときなどに通信が発生することになるわけですが、このようなアーキテクチャは、サーバ側で発生した変化をリアルタイムにクライアント側に通知することが原理的にできないことを意味します。 チャット・アプリケーションでは、複数のユーザから不定期にメッセージが送信され、それが他の参加者に一斉に配信されなければなりません。しかし、メッセージを受け取ったサーバ側では、それをクライアントに即座にプッシュで通知する方法がないのです。 そのため、一定期間ごとにブラウザがサーバに
日本ラッド、無料の大容量オンラインストレージサービスを提供開始 | マイコミジャーナル
日本ラッドは10月7日、同社のSaaS、レンタルサーバ事業のブランド「SaaSesサービス」の1つとして、5.1GBまでの容量を無料で使えるクラウド型オンラインストレージサービス「ソラ箱」(無料版)の提供を10月12日より開始すると発表した。 同サービスは、法人・個人を問わず、ユーザー登録を行うだけで無料で利用可能で、5.1GBまでの容量制限や商業利用が不可である点を除き、有料版と同じサービスが保証されるという。 同社はクラウド型の分散ストレージシステムを独自に開発。同社の「排熱型データセンター」で運用されるこのシステムが同サービスの基盤となる。 同サービスには、一般企業のユーザー向けに「エクスプローラ感覚で利用可能な専用ツール」が用意されるほか、システムインテグレーター(開発者)などのビジネスユーザーも想定し、Linuxコマンドラインによる利用も可能となっている。 同サービスの対応Web
そして「ウェブ」と「メール」が融合する 「現実世界での関係」でコミュニケーションの汎用性は高まる：日経ビジネスオンライン
2010年9月10日、ミクシィが開催した「mixi meetup 2010」には、3000名もの技術者や経営者たちが押し寄せた。目当てはミクシィが当日発表すると予告していた新プラットフォーム。発表した内容は会員2000万人を超えるSNS（ソーシャル・ネットワーキング・サービス）「mixi」内で形成されている人間関係を他社へ開放するというものだった。 SNSで形成される人間関係が外に飛び出すとどういう世界が拓けるのか。従来のサービスや製品はどう作り替えられていくのか。 ミクシィの笠原健治社長が狙いを語る。 （聞き手は原 隆＝日経ビジネス記者） 笠原 例えば、mixiのソーシャルグラフと連携すれば、携帯電話の電話帳が「ソーシャル電話帳」に変わります。携帯電話の利用者自身が編集した電話帳とmixi内の友人情報がマージされる（1つになる）わけです。mixiのプロフィル情報を取り込むことで、常に最新
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
大規模レガシーサービスにおけるパフォーマンス改善の道のり一覧
IPA セキュア・プログラミング講座
ケータイ＆オンラインストレージ活用術 オンラインストレージでスマートなスマートフォンライフ - ケータイ Watch