ブラウザキャッシュの仕組みについてまとめた
Web開発において、ページの読み込み速度は非常に重要になります。 そのためにもブラウザのキャッシュは効率的なWebサイト運営に不可欠な機能です。 ブラウザのキャッシュには次のHTTPヘッダを設定することができます。 Expiresヘッダ Cache-Controlヘッダ Last-Modifiedヘッダ ETagヘッダ これらのキャッシュには強いキャッシュと弱いキャッシュで分類が可能です。 「Expires」「Cache-Control」は強いキャッシュであり、「Last-Modified」「ETag」は弱いキャッシュに分類できます。 強いキャッシュと弱いキャッシュ 強いキャッシュは設定された期間内は完全にローカルキャッシュを利用して、サーバーへのリクエストを行いません。 一方で弱いキャッシュはキャッシュされたリソースの検証が必要であり、ETagやLast-Modifiedヘッダを利用して
スイカゲームの作り方
はじめに Go言語用のEbitengineというゲームエンジンに興味があったので、試しにスイカゲームもどきを作りってみました。Ebitengineを使うと意外と簡単にスイカゲームもどきを作る事ができたので、なるべく分かりやすく作り方を紹介してみようと思います。 まずは先に完成品をお見せします。ちなみにフルーツの回転は面倒くさいので実装しないことにしました。 ちなみにEbitengineはwasmでも普通に動きます。ビルドしたものをこちらに置いたのでブラウザから実際に動かす事ができます。 それではスイカゲームもどきを作って行きましょう。 描画する まず一番初めにフルーツの画像を作るところから始めます。これはリンゴ、オレンジ、ブドウ、パイナップル、メロン、スイカのつもりです。 続いてフルーツを定義します
【Automatic1111】Mac(M1/M2)のローカルでStableDiffusionのGUIツールを使う方法(2023.2版)
はじめに WindowsやColab環境のStableDiffuisonユーザに人気のAutomatic1111がMacでも使用できるようになりました。 公式の説明が英語で分かりづらく一部の手順が省略されてしまっているため、おすすめの方法を解説します。 導入前の前提条件 homebrewは先行してインストールしておいてください。 導入手順がわからない場合は、以下の記事のhomebrewをインストール部分と同様の手順を実施してください。 事前準備 インストールフォルダの用意 ターミナルでファイル一式をインストールしたいフォルダを作成し、ターミナルでそのディレクトリまで移動してください。 ターミナルの移動方法がわからない場合はFinderでインストール先のフォルダを作って右クリック⇒フォルダに新規ターミナルでもOKです。 ckptファイルの用意 huggingFace等で使用したいモデルのck
AWSのアーキテクチャ図を描くときに意識していること
最初に 公式のガイドライン AWSが配布しているツールキットの中に基本的なガイドラインが記載されています。 描き方に正解はない こちらの記事のあるようにアーキテクチャ図に正解はなく、伝えたいことが適切に伝わるということが大切だと思います。 伝えたい内容や伝える相手によって重点や粒度を変えることを心がけています。 描画ツール diagrams.net（Draw.io）を使ってます。 意識していること アイコンは最新バージョンを使用する AWSのアイコンは定期にアップデートされるので最新のアイコンを使うようにします。 ちなみにdiagrams.netでEC2と調べると古いアイコンが先頭に出てきたので意識していないとこちらを使いがちかもです。 アイコンのバージョンを混ぜない アイコンは最新バージョンを使用すると同じような内容ですが、複数バージョンのアイコンが混在しないようにします。以下の図ではE
NestJSでJWTを使った認証を実装する
$ npm i --save @nestjs/passport passport passport-local @nestjs/jwt passport-jwt $ npm i --save-dev @types/passport-local @types/passport-jwt passportは、nodejs でよく使われている認証ライブラリ。 passport-localは、ユーザー名とパスワードでログインできる機能を実装できるライブラリ。 passport-jwtは、JWTの検証などをするためのライブラリ。 ※ passport は、passport-local や passport-jwt などのライブラリを戦略( strategy )と言うので、覚えておいた方が良いかもしれません。 Passport recognizes that each application has u
会社規模と部署別で考える、適切なBIツールの選び方
みなさんこんにちは。株式会社INVOXの佐藤です。 本記事では、会社規模や部署に応じて適切なBIツールを選ぶ方法について解説します。BIツール導入を検討している企業の経営陣や部署リーダー、導入担当者などの方に参考にしていただけると嬉しいです。 BIツールの基本概念 ビジネスインテリジェンス（BI）ツールとは、企業内外のデータを収集・分析・可視化するソフトウェアです。BIツールの主な機能には、データ収集・統合、分析、レポーティング、ダッシュボード作成などがあります。 多くのBIツールはクラウドベースで提供されており、容易に導入・運用が可能です。適切なBIツールを選ぶことで、迅速かつ正確な意思決定を行うことができ、事業成長に結びつけることができます。 会社規模別のBIツール選び 会社の規模によって、求められるBIツールの機能や予算が異なります。以下では、小規模企業、中規模企業、大規模企業のそれ
1Password の CLI で環境変数を管理する
はじめに 現代のアプリケーションは外部サービスのAPIキーなど様々なクレデンシャルを持つことが多いです。 これらを開発者間で安全に共有するには sops、 doppler、 git-crypt などのツールが使えます。 また、開発時はこれらのクレデンシャルを direnv などを使って環境変数に設定することも多いのではないでしょうか。 しかし、これらはどれも追加のツールをインストールする必要があります。 もし1Passwordを使っているチームに属しているなら1Passwordでクレデンシャルを管理して、それを環境変数にセットできると新たなツールを導入する必要がなくて楽です。 この記事ではそれを実現する手順を紹介します。 CLIの設定 まず1PasswordのCLIをインストールします。これで op コマンドが使えるようになります。
しずかなインターネットの技術構成
こんなWebサービスをリリースしたので、技術的な話をまとめておこうと思います。 元々このサービスは、趣味の延長線のような感じで開発を始めました。競合にあたるnoteやはてなブログなどのサービスが確固たる地位を築いているということもあり、「お金にはならないだろうけど、自分の趣味を詰め込んだものにしよう」というゆるい気持ちで開発を続けています（楽しい）。 選定の方針 趣味と言っても文章投稿サービスなので、ユーザーが少数であったとしても長期間運営しなければなりません。そのため、ユーザー数が少なければランニングコストが数千円/月以下、ユーザー数が増えたときは段階的にコストが上がるように選定を行いました。 アプリケーション フルスタックNext.jsアプリケーションをCloud Runにデプロイしています。各APIエンドポイントはNext.jsのAPI Routesで生やしています。 Next.js
go-ethereumの暗号ライブラリ活用戦略
ブロックチェーンで活用される暗号技術や、Ethereumのアーキテクチャについて学び、理解を深めることを目的に、Ethereumの最初の実装の1つであり最も使われテストされているクライアント go-ethereum から得られた知見をこの記事にしました。 本記事では、暗号ライブラリは何がどのように使われているのか、という切り口からコードリーディングを行い、解説しています。 記事の内容に不備等あれば是非フィードバックいただきたいです。 概要 go-ethereumにおけるパッケージの活用方法は2通り。直接importして利用するか、ラップしたライブラリを go-ehtereum/crypto に実装して使うか。 プリコンパイルドコントラクトの機能など、一部独自に実装されているものもあるが、ほとんどの暗号技術はGoの標準や準標準の暗号ライブラリを基盤として機能しており、実績のあるライブラリを再
トラストレス・トラストから理解するblockchainの基礎
この記事はSun* Advent Calendar 2022 1日目の記事です。 Sun* Advent Calendar 2022について Sun*では、自由と挑戦をカルチャーの一部として重要視しており、今回のAdvent Calendar2022は「自由と挑戦の過程で獲得したナレッジを世に共有し、社会にContributionすること」を目標として、エンジニアリングだけでなく、UI/UXデザインやプロジェクトマネジメントの観点からナレッジをシェアしていきたいと考えております。 本記事はSun* Advent Calendarの初日記事となりますので、blockchainのナレッジを読者の方へ届けることはもちろんのこと、次に続く記事をご覧いただいてSun*の多様な課題に挑戦していく姿勢を少しでも感じ取っていただくきっかけとなれば、と思っています！ 自己紹介 長浦和輝(ナガウラカズキ)です
GitHub Actionsでカバレッジを可視化する
モチベーション 今携わっているプロダクトは、DDD+Clean Architectureなマイクロサービスとして構築しています。 自身の担当業務としてはレセプト関係になります。業務の特性上、複雑なビジネスルールをきっちりかっちり作らないといけないのでテストはかなり重点的に書いています。 ビジネスルール、ユースケースといったレイヤー化されたクラスにそれぞれテストを書いていくわけですが、ユースケースが依存しているビジネスルールが一つの場合など、いちいちユースケース単体でテストを書くのか？ということもあり、ケースによりますがテスト粒度を上げるという判断もしてたりします。 テストコーディング時に依存性を排除する為にモックを大量に使いますが、上記のような判断があったり、なかったりするとテストのカバー範囲の認識齟齬というものが出てきて最終的にカバレッジが漏れる事案が発生します。 またPRレビュー時にテ
TypeORM のコネクション調査
MysqlDriver.connect() が実行されると mysql2 を経由してコネクションプールの作成が行われる。 今回はレプリケーションの設定をしているので createPoolCluster() が実行される。 TypeORM がクエリを実行する際、 Active Record・Repository に限らず MysqlQueryRunner.query() が実行される。 MysqlQueryRunner.query() 内で MysqlQueryRunner.connect() が参照されていて、connect 内でコネクションの取得が行われる。 コネクション取得の詳細は MysqlDriver.obtainSlaveConnection()、MysqlDriver.obtainMasterConnection() のいずれか。（permalink は obtainSlave
OAuth の代表的フロー Authorization Code Flow と PKCE についてまとめてみる
「OAuth と OpenID Connect について分かりやすくまとめてみる」で紹介した通り、OAuth のフローを経ると最終的にアクセストークンが発行されます。 前回はごく簡単な流れだけを紹介しましたが、アクセストークンを発行するまでのフローには、いくつか種類が存在します。例えば以下などです。 Client Credentials Flow Resource Owner Password Flow Implicit Flow with Form Post Authorization Code Flow 今回は、中でも特に重要な Authorization Code Flow について説明したいと思います。 Authorization Code Flow はセキュリティの観点で優れており、一般的な Web アプリケーション、SPA、ネイティブアプリなど多くのユースケースでその利用が推奨
フロントエンド開発におけるLitという選択肢
フロントエンド開発におけるLitという選択肢 フロントエンドを構築するためのフレームワークはReact/Vueなどが多く採用されており、次点でSvelte/Angular/Solidなどが有名でしょうか。 そんな中でもLitというフレームワークに触れる機会があり、なかなかおもしろかったので備忘録もかねてLitについての簡単な解説を記載します。 Litとは 一言で表すならば、WebComponentsを簡単に活用するためのライブラリです。 WebComponentsを利用することで、モダンブラウザに最適化した開発であればReactやVueなどのフレームワークを使用しなくてもコンポーネントベースの開発が行えます。 しかしながら標準のWebComponentsは記述量が多く仕様も少し複雑なため、Litを活用することでスムーズにWebComponentsでの開発を始められます。 特徴 Litの最大
【色変記事】AtCoder入緑したので振り返ってみた
こんにちは、TaniiGoです。 先日のABC290で緑コーダーになりました！ せっかくなので振り返り記事を書こうと思います。 レーティンググラフ AtCoder Problems情報 経歴 23年3月に大学を卒業します。 学部はchokudaiさんと同じSFCです(暖色になってあの名曲を歌いたい)。 3年までは文系科目ばかり履修していました。甲斐あってインドネシア語がある程度話せるようになりましたが 21年9月に独学や42Tokyo(後述)で情報やプログラミングの勉強を開始しました。 数学は高校以降ほぼやっていませんが、競プロ等で適宜必要になったら調べたりしてキャッチアップしています。 競技プログラミング(AtCoder)との出会い バズっているmayocornさんの記事（面識はありませんが..）にも出てきた42Tokyoが、自分も競技プログラミングと出会ったきっかけです。 42Toky
Next.js×TypeScript×microCMS×MantineUI×Netlifyでブログを作成したのでまとめと感想
Next.js×TypeScript×microCMS×MantineUI×Netlifyでブログを作成したのでまとめと感想 はじめに この記事は、タイトルに記載の通りの技術スタックで趣味の芝生管理用のブログを作成したので、簡単にまとめと感想を書いておこうと思います。 実際のブログはこちら GitHubリポジトリはこちら（参考になった方は🌟をポチッと🙏） ブログ作成の動機 普段業務でNextjs(React)を触っているがSSRする必要がないアプリケーションということもあり、ファイルルーティングの機能くらいしか触っていなかったため、SSGやSSRの機能をちょっと触っておきたかったのと、最近流行りのJAMStack構成をmicroCMSを用いて経験しておきたかったという2点が主な動機です。 あと、勤めている会社でホームページを作り直す話があがっていたので、JAMStack構成を提案するた
CSS-in-JSのパラダイムシフト
2023年現在、Reactでは多種多様なスタイリング手法が用意されています。 代表どころで言うとCSS ModulesやTailwind、CSS-in-JSなどが有名です。筆者の個人的な好みでは、これらの選択肢の中でもCSS-in-JSを用いたスタイルが特に好きですが、CSS-in-JSライブラリ群の中にはランタイムでスタイリング処理がなされる為にパフォーマンス上の問題を抱えているとの指摘を受けているものもあり、最近は人気が下火になっているように感じています。 そこで本記事では、CSS-in-JSが生まれた背景から遡り、各ライブラリの内部実装を確認しながらそれぞれのライブラリの仕組み・メリット・問題点を明らかにし、CSS-in-JSのパラダイムシフトを追ってみたいと思います。 CSS-in-JSの登場 CSS-in-JSという言葉が最初に公の場で登場したのは、2014年にFacebookの
ReactUIコンポーネント Mantineはいいぞ
Mantineとは ReactUIコンポーネントライブラリと聞くとChakra UI、MUIあたりが有名でしょうか。Tailwind使ってる人も多いと思います。 ここでは最近人気のMantineを紹介したいと思います。 Mantineはrtivital氏がメインとなって開発しているReactコンポーネントライブラリで、Githubのスターは約15,000あります。 スペックとしては TypeScriptベース(逆にいうとtsxじゃないと動かない) 豊富なコンポーネントとhook ダークモード対応 Next.jsに公式対応 メリット コンポーネントとhookが豊富 TOPページにもありますが、すでに100 120種類以上のコンポーネントが実装されており、なおかつアップデートで増えつつあります。（記事書いた翌日に公式が更新してました！ 他のReactコンポーネントライブラリと比較すると後発です
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
JWTなどのシークレットキーをサクッと生成
node.js導入（M2 mac）
