Webシステムにおいて「画像や帳票等のファイルはDBへ格納すべきなの？」を調べてみた（ファントムファイル）oracleWeb この記事は、 JPOUG Advent Calendar 2023 24日目の記事です。 23日目は multilayer さんの記事『OCIのLanding Zoneについて調べてみた！』でした。 想定読者 ファントムファイルについてよく知らない、帳票の扱い方をあまり考えたことがない人 イントロダクション 皆さん、世の中のWebシステムで利用される画像や帳票ファイルがどこに保存されているかご存知でしょうか？ 帳票や大きな画像ファイルなどを扱う際、大きく分けて２つの設計方針があります。 ・DBに直接保存する ・DB外部に保存し、パスなどをDBに保存する オライリーのSQLアンチパターンの、”ファントムファイル”という章にはこのあたりのことが書いています。 [Amaz

はじめに こんにちは〜！皆様いかがお過ごしでしょうか？　no plan inc. CTOの @serinuntius です。 これはno plan inc.の Advent Calendar 2023の22日目の記事です。 最近気に入っているOSSとかを作者様に感謝しながら、スターを送りながら、こんなのを使用してるぜって紹介する記事です。 「OSSは使っていることを公言するだけでも貢献になる」とsongmuさんが言っていたので、私も貢献したいと思います。 紹介する順番に特に意味はありません。 rtx 個人的お気に入り度: ★★★★★ スター数: 3700 Rustで作られている💯 LICENSE: MIT 初っ端は、rtxです。あらゆるプログラミング言語環境(Runtime)のマネージャーです。 公式のデモ画像を見ていただくのが一番早いと思います。 私はこれを使う前はanyenvというも

おそらく 2023 年に Zenn で出す最後の記事になるかと思います。 タイトルの通り、2023 年に読んだ本の中で、特に素晴らしかったものをご紹介します。 とはいえあまり今年は技術書を読んだ印象がなく… というのも、特定の xx(例えば Next.js、Ktor)といった部類に関しては公式のドキュメントを読むことがほとんどになり、書籍に求めるのは公式ドキュメントに書かれていない何かや誰かの経験・ノウハウになったからだと思います。 この記事を書くにあたって今年読んだ本を振り返ってみても、やはり十数冊程度(それでも月に 1 冊は読んでた)のでインプット：アウトプットの割合的には良いバランスではないかと思っています。 ただ、先に述べた通り公式ドキュメントに書かれていないなにかを売っている本というのはどれも本当の意味で価値があるものであり、皆さんにも本当に意味のある情報にお金を使っていただける

pnpmについて 私は普段、パッケージマネージャーにnpmではなくpnpmを使っています。npmよりパッケージインストールが高速であったり、ちょっと良い機能が付いていたりします。1 この記事の内容のほとんどはnpmとpnpmのどちらでも問題ないように書いているつもりですが、念のため前提として紹介させていただきます。 create-next-appの実行(オプション追加) create-next-appにはいくつかオプションがあります。私はいつも以下のようにしています。 # pnpmの場合 pnpm dlx create-next-app ./some-directory --ts --no-tailwind \ --eslint --app --src-dir --import-alias '@/*' # npmの場合 npx create-next-app ./some-director

本稿は Next.js で今試せる React canary の機能「useFormState」に関する記事です。Server Action を使用すると、API Client を使用せずにブラウザから直接サーバーサイドの関数を実行できます。Server Action のメリットは以下のものが挙がります。 API Client が不要になる ハイドレーションを待たずに反応できる Progressive Enhancement を維持できる useFormState の話の前に、Server Action について少し触れていきます。 Server Action だけではない「Client Action」とは？ 「Server Action」というワードを知っている方は多いと思いますが「Client Action」はまだ馴染みのないワードかもしれません。React、Next.js いずれも公

タイトル通り、JavaScriptツール群「UnJS」にどんなライブラリが存在するのかをひたすら見てみよう！　という記事です。 本当は全て紹介しようと思ったのですが、全75個あり、1つの記事に入れるとあまりにも多すぎるので、この記事では2023年11月4日時点のStar数の順に沿って上位30個を紹介していきます。 UnJS とは UnJSは、Nuxt 開発チームが中心となって開発・メンテナンスされている、あらゆるJavaScriptフレームワーク上で統一的に動作するユーティリティーツール・ライブラリ群です。 UnJSというプロジェクトが何であるかについては、2022年11月に公開された講演映像「UnJS: Nuxt 3 behind the scenes by Pooya Parsa」を観て頂くのが最もわかりやすいと思います。Nuxt 3 正式リリース直後ということもあって、かなり詳細な背

YouTubeは広告ブロッカーをブロックするためのアンチ広告ブロッカーの展開を本格化しており、Adblock PlusやuBlock Originといった人気広告ブロッカーがYouTubeで機能しなくなっています。そんな中でもYouTubeで問題なく使えることをアピールしている広告ブロッカーが「FadBlock」です。 GitHub - 0x48piraj/fadblock: Friendly Adblock for YouTube: A fast, lightweight, and undetectable YouTube Ads Blocker for Chrome, Opera and Firefox. https://github.com/0x48piraj/fadblock 開発者のPiyush Raj氏によると、FadBlockは広告を検知・削除できるように設計された広告ブロッ

Bleeping Computerは10月30日(米国時間)、「Google Chrome now auto-upgrades to secure connections for all users」において、GoogleがすべてのChromeユーザーに対し、HTTPリクエストを自動的にHTTPSリクエストに変更する「HTTPSアップグレード」を開始したと報じた。Googleはこれまでにも同機能を限定的に展開していたが、2023年10月16日に安定版のすべてのユーザーが対象になったという。 Google Chrome now auto-upgrades to secure connections for all users 歴史的に、ブラウザはHTTPSをサポートするサイトにおいて安全ではないHTTPリクエストを行うことがある。Google Chromeでは、次のような条件でHTTPリソー

WebサイトやスマホアプリのさまざまなUIデザインにぴったりな、シンプルなソリッド・ベタ塗りからおしゃれなカラーまで揃ったSVGアイコンが完全無料で利用できるblendiconsを紹介します。 アイコンはなんと、200,000個以上！ ベーシックなUIをはじめ、ショッピングサイト、タッチジャスチャー、日用品や家具、飲食物、スポーツ、ミュージックなど、多種多様なアイコンが揃っています。 blendicons Blendiconsはデザイナーやデベロッパーが容易に必要なアイコンを手に入れられるように、200,000個以上の高品質なアイコンを作成し、ダウンロードできるようにしたサイトです。 アイコンの利用にあたっては個人でも商用でも無料で、Webサイトやスマホアプリをはじめ、プレゼンや印刷物などあらゆる用途に利用できます。アイコンをカスタマイズして利用することもOKです。ただし、アイコン素材をそ

Windows Subsystem for Linux（WSL）に新機能。使用メモリや仮想ディスクの自動縮退、LAN経由でWSLへ直接アクセス可能など マイクロソフトは、Windows上でLinuxの機能を利用できるWindows Subsystem for Linux（WSL）の2023年9月版となる新バージョン「WSL 2.0.0」で、使用メモリをWindowsに返却して自動的に縮退する「autoMemoryReclaim」や仮想ハードディスクを自動的に縮退する「Sparse VHD」、従来のNATに代わる新しいネットワークモード「Mirrored」によるLANからWSLへの直接アクセスなどの新機能を搭載したことを明らかにしました。 下記は今回の新機能を説明するブログの作者であるCraig Loewen氏のツイートです。 WSL has a new update with some b

HTMLはdivたった一つ、あとはCSSをコピペするだけで約580種類のローダーを実装できるCSS Loadersを紹介します。 ローダーは、バーやドットのシンプルなアニメーションから他ではあまり見ない面白いものまであり、ローダーを探すときはここをチェックすることをお勧めします。ローダーが不要な人でもCSSアニメーションを楽しめると思います。

はじめに もう文字列の置換で sed コマンド使うの禁止して良いんじゃないですかね？ 言いすぎだとわかってあえて言っていますが。 悪い書き方（外部コマンドに頼る方法） # 変数 line に入ってる文字列を echo コマンドで出力して sed コマンドに渡し、 # sed の s コマンドで "from" を "to" に置換して出力したものを ret 変数で受け取る ret=$(echo "$line" | sed "s/from/to/")

🤷‍♂️ 結合度とは みなさん、おはようございます！ さて、いきなりですが、みなさん プログラミングにおける、結合度とはご存知でしょうか？ 「知っとるわい！！」との声が聞こえてきそうですが、 かく言う私は、言葉は知っていても、細かい部分まで理解することができていませんでした と言うわけで、結合度に関してReactのコードを混ぜながら解説しましたのでご覧ください〜！ もし間違いあればコメントいただけると嬉しいです 凝集度編もあるよ！ 🤔 結合度って？ 結合度とは、関数、モジュール、コンポーネントなどが、どれだけ他のコンポーネントに依存しているかを示す指標 🤔 結合度が低い状態とは？ 結合度が低い状態とは、各コンポーネントが互いに独立している状態 もしくは非常に少ない依存性しか持っていない状態 独立性 各コンポーネントが、できるだけ自己完結している 他のコンポーネントに依存することなく動

「NAT（ナット）※1」はオンラインゲームを支える重要な技術のひとつです。 「NAT越え※2」に失敗するとマルチプレイができなくなりますし、「NATタイプ※3」の違いはマルチプレイのしやすさに影響します。 ところが、NAT は仕組みが難しく、初心者向けの記事も少ないため、イカスミカフェには NAT についての質問がよく寄せられます。 そこで今回は、Nintendo Switch（ニンテンドースイッチ）を例にして、世界一わかりやすく NAT を解説してみたいと思います。

筆者が知らない間に、Windows 10とWindows11の入力環境は生まれ変わっていました。 少々大げさな書き出しですが、「アプリを導入して、キーの割り当てを変更する」なんてことが面倒くさいという人にこそ試してみて欲しいカスタマイズ設定が、実は2020年5月のOSアップデートから導入されていたようなんです。 設定を適用すれば日本語入力の切り替え時にストレスを感じなくなるTIPSなので、ぜひ試してみて欲しいところ。以下に解説します。 【今日のワークハックはこんな人におすすめ！】 日本語と英語など、複数の言語を使用する人Windows10/11で、日本語入力の切り替えにストレスを感じている人 今日のワークハック：キーの割り当てを変更して日本語入力のストレスを減らすキーの割り当てを変更するPhoto: 田中宏和ところでスペースバーの左右にある「無変換」キーと「変換」キー、使っていますか？ 結

Google Apps Scriptの環境構築をVSCode上で行う方法について詳しく解説していきます。clasp,asideを使って構築するので、爆速で構築できます。 ことのはじまり 私は最近Google Apps Script(GAS)の学習を始めました。 GASの学習を始めると、まずはAppsScript公式のIDEでスクリプトを書いていくことになると思います。 しかし、普段VSCodeを使い慣れている身からすると、VSCodeの便利機能が使いたくて仕方なくなります。 それじゃあ、使い慣れたVSCodeを使おうじゃないか！！ AppsScript公式のIDEだとGitに差分を残していくこともできないぞ！！（できます） というわけで、GASをVSCodeを使って開発する為の環境構築の手順を書いていきたいと思います。 前提条件 VSCodeがインストールされている Node.jsがインス

あらすじ 公衆WiFiに繋いだ状態でいつものように docker container run -p 8080:80 nginx のような感じでDockerコンテナを動かしていたら、外部からリクエストを受信した。 ファイアウォールを設定し、外部からのアクセスを拒否しているはずなのになぜアクセスできたんだ... 環境 Docker desktop for mac with apple silicon 4.21.0 何が起きた? Dockerはデフォルトの設定では-p 8080:80のようにポートマッピングするとファイアウォールの設定を書き換え、外部からそのポートへのアクセスを許可するようになっている。 その結果LAN内の他のPCから対象ポートにアクセス出来てしまう。 ちなみにこれはDocker公式からも注意が出ている。 Publishing container ports is insecur

はじめにlink あまりモノレポの構成について語られている記事が多くないなと感じたので、現時点で自分が考えている設計をまとめてみる。 以前にTwitterでディレクトリ構成と内容については言及したが、実際に利用する技術についてはあまり触れなかったので改めて検証してみた。 https://twitter.com/koh110/status/1617510034266808322 クライアントサイドとサーバーサイドのコード共有については下記の記事がよくまとまっていた。 https://capelski.medium.com/effective-code-sharing-in-typescript-monorepos-475f9600f6b4 上記の記事の構成も参考にしつつ、自分の考えも加えて検証していく。 相対パスを利用する方法 npmのローカルパス指定（file:xx）を利用する方法 シンボ

アクセシビリティとはアクセシビリティは、サービスや情報をどんな利用者も円滑に利用できるかの度合いです。 アクセシビリティが高いほど、より多くのユーザーが円滑に利用でき、アクセシビリティが低いほど、より多くのユーザーが利用できないということです。 アクセシビリティ向上は、障害当事者だけでなく、さまざまな環境や状況にいる人、高齢者、日本語以外を得意な言語とする人など、すべての人のためのものです。人だけでなく、サービスや情報にアクセスする機械(ロボット)もアクセシビリティの影響を受けます。 SmartHRの開発方針SmartHRは「well-working 労働にまつわる社会課題をなくし、誰もがその人らしく働ける社会を作る。」というミッションを掲げ、働くすべての人を後押しするプラットフォームをつくっています。 誰もがその人らしく働ける社会を実現するため、SmartHRはアクセシビリティの向上に取