コンテンツ・デリバリ・ネットワークの略で、ウェブコンテンツの配信を最適化するネットワークの仕組み。複数のウェブサーバーを分散配置し、目的のウェブサイトを場合により一時保存、利用する各ユーザーを適切に振り分けることで、利用者にとってはコンテンツの高速化および安定化、運営者にとってはサーバーの負荷の分散をもたらす。
動画などのメディア配信、また非常に多数の訪問者を抱えているなど、大規模、大容量のアクセスがあるサイトで採用される。
3行まとめ Next.js 13からMiddlewareを使用しているとgetStaticProps以外を使っていてもprefetchを行うようになった。 Add middleware prefetching configでgetServerSidePropsのprefetchを行った際のレスポンスボディが{}となった。 CDNでキャッシュしている場合、{}がキャッシュされてしまうことでページ遷移したときにデータが空になることがある。 前提 Next.js 13 あたりでAdd middleware prefetching configというPRがマージされました。 github.com この…
JavaScript でプログラムを開発して意気揚々とGitHubで公開し、せっかくだから はてなブログの記事に実装してしまおう! となったところで、さて、記事にコードを埋め込むのはメンテナンス性を損なってしまいます。 GitHub は Raw コードを参照できるページを提供していますが、 CORS の問題があって他サイトでは利用できません。何かいい方法はないでしょうか。 そこで jsDeliver です。 GitHub のページの URL をペーストしたら CDN の URL にして返してくれるツールがあります。このブログの中で動作を確認しています。 はてなブログなら記事に埋め込むこともでき…
経緯 CDNとは 自分が見ている映像はどこからきているのか?verAkamai 自分が見ている映像はどこからきているのか?verCloud Front 合わせ技 トラフィックがいかに異常だったか おまけ:H.264コーデック 参考ツイート 経緯 2022年Wカップは日本がジャイアントキリングを達成して決勝トーナメントに進出。その1回戦は非常に注目されていたが、その中でも特に「本田の解説がおもしろい!」とAbemaTVでのインターネット中継放送が人気であった。 当日は約2000万人(延べ)がAbemaTVの放送を視聴していたようだ。 同時にこれだけの人数に映像を配信する仕組み(バックエンドとフロ…
こんにちは LOVOT の OS を作っているチームのひとり id:atotto です。 LOVOT の OS について、簡単ですがお話させていただきます。 LOVOTとNest(LOVOT ANATOMY より一部抜粋) 早速ですが、かわいらしい LOVOT には、x86系のCPU(メインコンピュータ)、そして、ARM系のCPU(サブコンピュータ)の2つが搭載されています。これだけでも OS の管理が難しいのですが、LOVOT の製品には Nest (巣: 充電ステーション)の x86系のCPU(エッジコンピュータ)もあり、合計 3つの独立した OS が存在しています。(詳しいspecはこち…
少しハマったので、忘れないように解決策を書いておく。 結論から言うと、cdnに使用しているリンクの中に、createApp関数が入っていないため、定義されていないというエラーが生じてしまっている。 そのため、 stackoverflow.com こちらに示してあるように、以下のリンクを読み込む必要がある。 要らないものまで読み込んでしまうので、全て読み込む必要はないが、 をvueのcdnの下に書き加えるとエラーが解消された。
React.jsプロジェクトのセットアップは初心者にとって非常に時間がかかる手順であり、特にReactエコシステムの初心者の場合はより困難となります。 しかし、一般的にはcreate-react-app(CRA)を使用してReact.jsアプリケーションを作成することが推奨されています。 CRAは、正確なnpmバージョンやReact関連ライブラリなどの心配をする必要がなく、npx create-react-appのようなコマンドを使用するだけでReactプロジェクトを構築することができます。 CRAはReactプロジェクトの構築に非常に便利なツールであり、事前に学習しなくても簡単に始めることが…
こんにちは! アソビュー開発チームの山内です! 先日、自転車でしまなみ海道を渡ってきました。 途中、ゲリラ豪雨に遭いながらもなんとか75km完走しました。ゴール後の温泉は最高ですね。 次は、晴れた日に渡って温泉に入ろうと思います。 はじめに アソビュー!では、2022年のゴールデンウィークの4/29 ~ 5/8の間に約2,300万のPVがありましたが、システムダウンすることなく、多くのゲストにワクワクを届けることができました。 今回は、私達がゴールデンウィークに向けて準備した背景と、アプリケーションでの負荷対策を紹介します。 背景 アソビュー!は、全国の遊びやレジャーチケットを予約・購入して体…
はじめに パフォーマンスや負荷対策としてキャッシュを用いるという手法はよくあり、AWS CloudFrontもそれを提供するサービスの一つです。 しかしながら利用する上でいくつか注意点があるため、今回は3点ほど書いていこうと思います。 1-1. 静的コンテンツ用のエイリアスをCloudFrontで発行する 動的コンテンツをキャッシュしてしまうとマズイために動的コンテンツはCloudFrontを通さないようにする場合は静的コンテンツのみそれ用のエイリアスをCloudFrontで発行します。 サイトのFQDNはexample.co.jpだけど、画像などの静的コンテンツについてはsubexample…
LaTexで数式を表示させるのに30分くらい引っかかってしまったが、 デザイン設定でMathJaxのCDNのリンクURLを読み込む 編集をMarkdownモードに切り替える 数式を書く の順番でやっていけば良いことがわかった。 デザイン設定でMathJaxのCDNのリンクURLを読み込む方法 MathJaxのCDNリンクは <script> MathJax = { tex: {inlineMath: [['$', '$'], ['\\(', '\\)']]} }; </script> <script id="MathJax-script" async src="https://cdn.jsde…
CDNって何ですか? CDN とは 有名なCDN CDNを使うとどんな良いことがある? CDNの仕組み 1.クライアント 2.エッジサーバ 3.オリジンサーバ 通常のウェブアクセスの場合 CDNを利用したアクセスの場合、 CDNを利用するときのDNSの話 CDNの料金 CDNのメリットを活かすために 1. キャッシュヒット率を上げる 2. キャッシュクリアは少なめに 3. コンテンツの容量は控えめに CDNのデメリット まとめ CDNって何ですか? こんにちは、ラクスのインフラを担当している akiponx です。 今回はCDNについて書いてみようと思います。 みなさん、CDNって知ってますか…
jQuery(ジェイクエリー)とは、ウェブブラウザー用のJavaScriptコードをより容易に記述できるようにするために設計された軽量なJavaScriptライブラリである。ジョン・レシグが、2006年1月にリリースした。様々な場面で活用されており、JavaScriptライブラリのスタンダードと呼ぶ者もいる https://jquery.com/ ライブラリとは ライブラリとは、プログラムにおいてよく利用される機能を切り出して、再利用しやすいようにまとめたものです。ライブラリの利用により、よく利用する機能を1から作る必要がなくなり、効率的に開発を行うことができます。 ライブラリはプログラム作成…
ランキング参加中インターネット フィッシング詐欺毎日大量に配信されているフィッシング詐欺メールを観測し、その正体をお知らせします。このメールは開かないようにし、間違って開いてもURLのリンクをクリックしないようにしてください。メールの見た目差出人: 日本放送協会(NHK)件名: 【NHKサポートセンター】NHKより重要なお知らせ 通知書番号:数字2文字本文(冒頭部分。URL等は削除):NHKのサービスをご利用いただきありがとうございます、NHKがNHKプラスにアップグレードされましたNHKアップグレードの内容を以下に説明させていただきますパソコンやスマートフォン、タブレットで、総合テレビやEテ…
こんにちは、株式会社アルファドライブ @takano-hi です。AlphaDrive で Web フロントエンドを中心に設計・実装などを担当しています。 今回は、弊社のローカル開発環境で localhost:xxxx といったポート番号が増え続ける問題を解決した話をまとめてみました。 背景 弊社では Next.js を利用したフロントエンドアプリケーションを複数開発しており、今後も増える見込みがあります。 通常 Next.js アプリケーションは、ローカル開発環境の起動時に localhost:3000 にホストされます。 これが複数になると、2つ目以降はそのままではポート 3000 番が占…
概要 友達の設計事務所のHP作成をすることになりました。 コンテンツは非エンジニアでも更新できるようにCMSで作成しました。 NewtというヘッドレスCMSを初めて使ったのですが、Vercelでデプロイするまで、簡単に作れたので内容をまとめます CMSの選定 WordPressは使いたくない 無料で使える 簡単に導入できる ヘッドレスCMS(API部分とコンテンツの管理だけが提供される) Next.jsを使いたい 以上から、Newtを選択することにしました! 設計 / Next.jsでフロント部分を実装する HPでは、Home, About, Works, Contact, Newsのコンテン…
1. 始めに こんにちは、morioka12 です。 本稿では、バグバウンティの入門として、主に Web アプリケーションを対象にした脆弱性の発見・報告・報酬金の取得について紹介します。 1. 始めに 免責事項 想定読者 筆者のバックグラウンド Start Bug Bonty 2. バグバウンティとは バグバウンティプラットフォーム Program Type Private Programs VDP (Vulnerability Disclosure Program) Asset Type 3. プログラムの選び方 Scope OoS (Out of Scope) 4. 脆弱性の探し方 (初期…
2023年9月18日~2023年9月24日に読んだ中で気になったニュースとメモ書き(TLSらじお*1第124回の原稿)です。全文を公開している投銭スタイルです。 [BalancerのBGPハイジャック?] [その他のニュース] ▼Secondary Certificate (HTTP/3) ▼Let's Encrypt以前/以後 ▼スノーデン文書の新リーク ▼PQXDH: Post-Quantum Extended Diffie-Hellman ▼GoogleのATLS ▼Chrome DTLS ClientHello拡張ランダム化 ▼Areion on QUIC ▼Internet Week…
自身のアウトプットも兼ねてつれづれと書き続けるブログ。 HTML解体新書ー仕様から紐解く本格入門 [ 太田 良典 ] 前回からの続きです。 URLの応用-絶対URLと相対URL[03] スキームから始まる形式のURLを絶対URL(absolute URL)といい、スキーマから始まらない形式のURLを相対URL(relative URL)といいます。 ・絶対URL <a href="https://program-html.hatenablog.com/entry/2023/09/21/235208"> ・相対URL <a href="../2023/09/21/235208"> 相対URLには…
美瑛の穴場おすすめペンション『Alp Lodge(アルプロッジ)』へ泊まってみた! 観光地『青い池』で有名な北海道美瑛町。丘の町とも呼ばれ、季節ごとに変化する自然の風景に癒されながらドライブを楽しむことができます。この記事では、美瑛観光の宿泊でぜひお勧めしたいペンション『Alp Lodge(アルプロッジ)』について実際に宿泊した感想と合わせてご紹介致します。 \この記事はこんな方におすすめです/ 美瑛への旅行を計画されている方 富良野、美瑛周辺でペンションを探している方 ペンションに泊まるのが初めての方 美瑛町と『Alp Lodge(アルプロッジ)』までのアクセス 実際に行ってきたレビュー(写…
OBS Studioに関する情報メモを書いてる記事。 ※「OBS Studioに関する個人的メモ」を移転しました。(現在は閲覧不可) 記事投稿日 2021年10月6日、最終投稿更新日 2023年09月24日 16時05分頃 かなり文字数が多いのでブラウザの検索機能をお使いください。 将来的に記事を分けて投稿したいと思っています。(現在作業中) 記事が見にくくて申し訳ありません。 ブラウザ検索ショートカット Windows : Ctrl + F macOS : Command + F この記事は下記環境でテストしています。 Linuxは使っていないのでメモしてません。 特定のデバイスがないと表示…
2023/9/24 作成 メキシコサッカーリーグ(リーガMX)年俸ランキング2023!トップ選手たちの驚くべき給与と競争力の高いクラブ間取引について、本記事で詳しく掘り下げていきましょう。メキシコサッカーリーグは中南米で最も興隆しているリーグの一つとして知られ、その人気と競争力はますます高まっています。高額な年俸契約は、リーグ内で最も輝かしい選手たちにとっての魅力的な要因の一つであり、ファンにとっても熱い話題となっています。さあ、一体どの選手がトップの座に君臨し、どのクラブ所属しているのでしょうか?最新の情報と興味深いトピックを一緒に探求していきましょう。 ※参照:Who is the hig…
Hello there, ('ω')ノ バグバウンティプログラムは、世界中を探せはいくらでも探すことはできて。 今回は、メジャーなもの以外についても一部を列挙してみることに。 まずは、バグバウンティプログラムを提供するプラットフォームを。 1. HackerOne - おそらく最も有名なバグバウンティプラットフォームの一つ。多くの大手企業がこのプラットフォームを利用しています。 2. Bugcrowd - HackerOneと並ぶ大手のバグバウンティプラットフォーム。さまざまな企業や組織が参加しています。 3. Synack - このプラットフォームは、特にハイレベルなセキュリティリサーチャー…
===============北海道新聞@doshinweb·18h 処理水放出は廃炉の一歩か? デブリ取り出しで足踏み https://x.com/doshinweb/status/1705455178361536777?s=20============================== NMF2011@NMFUKUSHIMA2011·46m 関西電力社長 原発すべて再稼働も 電気料金値下げに慎重姿勢 https://x.com/NMFUKUSHIMA2011/status/1705733960461062238?s=20===============北海道新聞@doshinweb·13h…
CM名 宿篇、うらやましい1篇、うらやましい2篇、うらやましい3篇、翌朝ちょっと楽しみ1篇、翌朝ちょっと楽しみ2篇 CM曲 すぎやまこういち指揮、東京交響楽団 交響組曲「ドラゴンクエストⅠ」より 交響組曲「ドラゴンクエストI」より「宿屋」 CM曲収録アルバム iTunes で購入 " title="宿屋" class="itunes-embed-image"/>宿屋すぎやまこういち指揮東京都交響楽団サウンドトラック¥255provided courtesy of iTunes AmazonでCDを購入 交響組曲「ドラゴンクエストI」アーティスト:すぎやまこういち,東京都交響楽団SugiAmaz…
2023/9/23 作成 アルゼンチンサッカーリーグ(プリメーラ・ディビシオン)の年俸ランキングについての情報は常に注目されています。アルゼンチンは世界的に有名なサッカーの強国であり、そのトップ選手たちは驚異的な年俸を受け取っています。本記事では、アルゼンチンサッカー界の最高年俸選手たちに焦点を当て、その驚くべき給与について詳しく掘り下げていきます。彼らの高額な契約について詳しく見てみましょう。 また最後にはブラジルリーグとの比較をしていますので、最後までお楽しみください。 ※Reference:Who is the highest paid footballer in the Brasile…
Google Siteの埋め込み機能を用いてp5jsを表示したが スクロールバーは以下のように表示され、デザインとしてイケてなかった ソースコードは以下のようであった。 <head> <script src="https://cdn.jsdelivr.net/npm/p5@1.5.0/lib/p5.js"></script> <script> let circle = []; let circle_num =30; let speed = 0.6; function setup() { createCanvas(windowWidth, windowHeight); } 以下、p5jsのソース…