概要 Angular で初期設定のまま作業してるとよく発生するエラーについての原因と対処法の備忘録 前提 バージョン Angular 17 事象 ng deploy, firebase deploy などのデプロイ時や、 ng build などのビルド時に以下の様な 「exceeded maximum budget」 エラーが発生する（css ファイル起因の例）。 # ワーニング系 ▲ [WARNING] src/**/**.component.css exceeded maximum budget. Budget 2.00 kB was not met by 14.62 kB with a total of 16.62 kB.

Warning: {tsファイル名} depends on '{nodeパッケージ名}'. CommonJS or AMD dependencies can cause optimization bailouts. For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

私は22歳の時に在家から出家して禅僧になりました。禅や仏教に関する諸々を学んだ結果としての出家でしたが、そのなかで『般若心経』についても学びました。 『般若心経』に綴られた文々の意味を知ったときは、正直なところ、私は驚きを隠せませんでした。 わずか262文字のお経に秘められた、小宇宙ともいえる凝縮された教え。神や仏を信仰しろと言っているのではない。ここに書かれている教えを信じろと言っているのでもない。 「存在の真実を見抜きなさい」 『般若心経』が言わんとするものは、その一点でした。 般若心経はもっとも有名なお経の1つ 『般若心経』の構成 わかりやすく現代語訳する 現代語訳『般若心経』 摩訶般若波羅蜜多心経（タイトル） 観自在菩薩　行深般若波羅蜜多時 照見五蘊皆空　度一切苦厄 舎利子 色不異空　空不異色 色即是空　空即是色 受想行識　亦復如是 舎利子　是諸法空相 不生不滅　不垢不浄　不増不減

はじめに 「Dependency Injection: 依存性の注入」 って、とっても分かりづらくないですか？ 色んなところに解説記事があって、Qiitaでも検索すると沢山見つかりますが筆者は文章を読んだだけでは全然分かりませんでした。 「直接呼び出すのではなく、インターフェースを介して実装する？」「制御の反転(inversion of control)？ 中から外ではなく外から中？」「サンプルを真似てみたけど複雑な実装している。これ何が嬉しいの？」そんな疑問ばかりでした。言葉は知っているけど使えないってやつです。 ようやく理解できたのは、実際に「あれ？困ったぞ」となって「ここでDIを使うと便利なのか！」と実感してからでした。 「ここで便利なんだ！」や「こういう時に使うといいんだ！」という使い所が分かると応用が効き、これが本当に理解することなんだなと思いましたので、それを書いてみたいと思い

はじめに iframe表示部分のクリックイベントを取得するという記事で、iframe内のイベントをiframeのcontentWindowに対しaddEventlistenerを登録して親ページで取得する方法を紹介しました。 この記事ではpostMessageを利用してiframeと親ページ間でやり取りする方法を紹介します。 この記事の対象者 ページに埋め込んだiframe要素から情報を取得したい ページに埋め込んだiframe要素と親ページ間で相互間のデータ送受信を行いたい ページにiframe埋め込みをする前提のページを作成して、イベント発生時に親ページに情報を渡したい iframeと親ページ間のデータ送受信 postMessageを利用した送受信の方法 子ページ データを親ページに送信する場合 window.parent.postMessage(message, targetOrig

はじめに 自分がiframeによって読み込まれているときだけ行いたい処理があったので、iframeによって読み込まれているかどうかを判別する方法を調べました。 自分用の備忘録も兼ねてまとめます。 結論 初めに結論です。 で判別できます。 trueならiframeによって読み込まれているということになります。 解説 簡単に解説を書きます。 まず、iframeについてMDNに書かれていることをまとめると次のようになります。 iFrameは閲覧コンテキスト（browsing context)を表現する 閲覧コンテキストは、セッション履歴（History）と文書（Document）をもつ 他の閲覧コンテキストを埋め込んでる閲覧コンテキストは親閲覧コンテキストと呼ばれる 最上位の閲覧コンテキストは、Windowオブジェクトで表される つまり、 iFrameによって読み込まれている時、window.p

CSSでは、マウスオンされたときに文字の色を変えたり、色々な変化をhoverで制御するのが常套手段として使われていますが、activeプロパティを使うことで、クリック中の変化を与えることが出来ます activeを使ってクリック感を出す DEMOで幾つかアクションを加えた時の動作を作ってみましたので試してください 使い方は至って簡単です hoverを使っていたようにactiveを使うだけなのです CSS コード .click:active {変化を与える} 使い方はたったのこれだけです DEMOページの4目の例のコードではこの様になっています CSS コード .click { background: green; width: 100px; height: 100px; line-height: 100px; color: #fff; margin: 30px auto; border-ra

@page "/dashboard" @using BlazorTourOfHeroes.Model @using BlazorTourOfHeroes.Service @inject IHeroService HeroService <h3>Top Heroes</h3> <div class="grid grid-pad"> @foreach (var hero in heroes) { <NavLink href="@("detail/" + hero.Id)" class="col-1-4"> <div class="module hero"> <h4>@hero.Name</h4> </div> </NavLink> } </div> @code { private IEnumerable<Hero> heroes; protected override async Task O

Blazor には JavaScirpt の相互運用機能があります。 .NET から JavaScript の処理を呼び出したり… JavaScript から .NET の処理を呼び出すことが出来ます。 ということは、JavaScript じゃないと出来ないことは JavaScript に書いて C# から呼び出してしまえば何でも出来る！！ということで JavaScript で適当なクラスを定義したとしましょう。このオブジェクトを作るためにはコンストラクタを呼び出さないといけないのですが、残念ながら .NET 7 時点ではできません。これは .NET 8 で実装が予定されているためおとなしく待ちましょう…。実装されるといいな。 詳細は以下の Issue で確認できます。この Issue が .NET 8 の時点でクローズされていれば実装されたということですね！ 回避方法 ということで .N

この記事について Webエンジニアになって早１年半。railsのデバッグをする時にはエディターのデバッガーでスマートにできていたが、javascriptになるといつもconsole.log();ばかりを使って原始的なデバッグをしていた。。。 そんな脳筋な過去の自分に教えてやるための記事です。 console.log({変数名}); 「いきなりconsole.log();の紹介かい！！！」って思われるかもしれませんが、この技を知ったときは「なんで知らんかったんや。。。」って思うくらい便利だったので最初に紹介します。 以下のようなHTMLがある場合 <form> <input type="text" value="名無しの権兵衛" id="name"> <input type="text" value="80歳" id="age"> <input type="text" value="バスケ"

HTML5 においては、<script> タグに、defer や async 属性を付与することで、これらの読込が HTML パースを妨害しないようにすることができます。これにより、サイトのメインコンテンツの読込がある程度高速化されます。 async にせよ defer にせよ、それほど詳細に動作を解説した記事が見つかりませんでしたので、本記事では、これらの動作について解説します。 イベントについて まずは、async と defer の挙動を理解するために重要な、2つのイベントについて理解しましょう。 両者とも、MDN に十分な情報があるため、本記事ではそれほど詳細には解説しません。 DOMContentLoaded HTML のパースが完了した直後に発火します。 MDN load HTML のパースが完了し、CSS や画像などのダウンロードと表示、JavaScript ファイルのダウン

この記事では、フォントを指定するためのCSSプロパティ「font-family」の書き方について一から詳しく解説します。font-familyを設定したことが無い方でも、正しくフォントが指定できるように、プロパティの書き方から、OSごとの設定の違い、おすすめのフォント設定例などもご紹介します。 「font-familyはいつもコピペしている…」なんて方も、正しい知識が有るか無いかは大きな違いです。ぜひこの機会に、font-familyの正しい設定方法をマスターしてください。 ※本記事は、各OSの標準インストールフォントや、ブラウザのアップデート状況などを踏まえて、なるべく最新の情報をお届けできるように、内容を随時更新しています。著者の調査した情報に基づいて執筆しているため、内容に間違いや不備のある可能性もあります。（最終調査日：2023年7月） font-familyの役割とは CSSのf

ヒント基本的な使い方「元となるJSON」に、チェックしたいJSONデータを入力して下さい。準備ができたらチェックボタンをクリックして下さい。入力したJSONの構文が正しいかチェックして、結果を表示します。エラーがある場合は、その箇所を指摘します。改行とインデントを付け、また、ユニコードエスケープを日本語に直すなどして整形したJSONを表示します。構文チェックのツールとして、「JSONlint」を利用しています。仕様当サービスはJavaScriptで処理しているため、下記の仕様となっています。 値に含まれる不要なバックスラッシュは取り除かれます。小数点以下が0の場合(例: 1.0)、整数(例: 1)として認識します。実質同じ値でも型を厳密に区別している場合(例: 1ではなく、1.0でなければダメ)は、ご注意下さい。ビューアーキーをクリックすると、オブジェクトを閉じたり開けたりできます。「To

Blazor初心者(かつ市民ディベロッパー)がいきなり日本語の文字化けで困った話 公式のチュートリアルに従ってBlazorのプロジェクト開始後、「ちょっとタイトル日本語にしてみようか」と思うと、文字化けするかと思います。 コード @page "/fetchdata" @using BlazorApp1.Shared @inject HttpClient Http <h1>This is 天気予報</h1> <p>This component demonstrates fetching data from the server.</p> @if (forecasts == null) { <p><em>Loading...</em></p> } else { <table class="table"> <thead> <tr> <th>Date</th> <th>Temp. (C)</th>

Microsoftアカウントで確認 https://account.microsoft.com/　にアクセス 上部にある「サービスとサブスクリプション」をクリック 「すべてのサブスクリプション」を選択 さらに「プロダクトキーの表示」を選択すると、プロダクトキー25桁が表示されます。 コマンドプロンプトで確認（下5桁のみ） winキー+R → cmd を入力 → Enter Officeのフォルダに移動 32 ビット (x86) Office の場合 cd c:\Program Files (x86)\Microsoft Office\Office16\ 64 ビット (x64) Office の場合 cd c:\Program Files\Microsoft Office\Office16\ 以下を入力しEnter cscript ospp.vbs /dstatus 「last 5 cha

HTML Advent Calendarの最後ということで、閉じタグを考えてみることにしました。 いろんな表記法 XHTMLの流行もあって、空要素の閉じ方にもいろいろ流儀が発生しました。 <br> <br/> <br /> <br></br> さて、どう書けばいいのでしょうか。また、時々「閉じタグにどんなタグを閉じたか書いておく」という人がいますが、これはどうなのでしょうか。 HTML Live Standard かつてはHTMLの規格をW3Cが定めていましたが、ブラウザベンダーたちが「規格化が遅い」とWHATWGを立ち上げました。そして紆余曲折を経て、「WHATWGが先行してLive Standardを作って、それをあとからW3Cがバージョン番号を付けてfixする」というような分業体勢に落ち着いています。 ということで、最新版の仕様書は順次https://html.spec.whatwg

はじめに 今回はゲーム感覚でプログラミングを学べるサービスを紹介します。 ゲームを通して学んだ知識をアウトプットできるサービス集を厳選したので、ぜひ学んだ知識を「使える技術」として自分のものにしていただければと思います。 この記事の主な対象者 プログラミング初心者~中級者 基礎文法は学んだけどアウトプットができていない人 フロントエンジニアを目指してる人 楽しみながらプログラミングを学びたい人 ぷよぷよプログラミング まずはじめに紹介するのは、SNSでも話題になった、ぷよぷよを開発しながらプログラミングを学ぶことができる「ぷよぷよプログラミング」です。 ぷよぷよプログラミングでは、人気ゲームぷよぷよを開発しながらHTMLやCSSやJavaScriptといったプログラミングをしていく中で基礎となる技術を学ぶことができます。 実際にアプリ開発をしながら学べるので、インプットとアウトプットが同時

OSINT（オープンソース・インテリジェンス）という言葉をサイバーセキュリティに携わっていて耳にしたことがある方も多いかと思います。この記事では、セキュリティ対策に活用されるOSINTを中心に、なるべく簡単にご説明します。 ✔️ OSINTはどんな場面で使えるか ✔️ よく使用されるツール ✔️ OSINTのメリット・デメリット についても紹介していきます。 OSINTとは？OSINT（オシント）とは、オープンソース・インテリジェンス（Open Source Intelligence）の略語です。 インテリジェンスとは？「インテリジェンス」という英語は、Artificial Intelligence（AI）の場合のように「知能」と訳されることもありますが、「諜報活動」や「（諜報活動で得られる）情報」とも訳されます。OSINTの「インテリジェンス」は、後者の「諜報」「情報」という意味で使われ

最近（2016年頃）、サイバー攻撃の脅威を調べる方法として、公開情報を活用したOSINT（Open Source INTelligence／オシント）に注目が集まっています。私もトレーニングを受けましたが、かなり奥が深く、使いこなせるには時間と経験が相当必要と実感しているところです。それと同時に、OSINTを活用するためには、基本的なテクニックはオープンで共有するほうが効率的だと感じましたので、ここでは、エッセンスをご紹介したいと思います。 ここでは、ポイントを絞ってまとめていきますので、正しい活用にあたっては、インテリジェンスを専門で取り組んでいる教育機関や企業等の提供するサービスの利用をご検討ください。 前提 ファイアウォールやIPS、WAFなどの遮断機器を導入 サイバー攻撃の予兆をつかんだとしても、止めることができなければOSINTの効果は非常に小さいです。 ログ取得 最良のインテリ