デモとして、このブログに Pagefind を導入してみました。ヘッダーの検索アイコンをクリックすると検索フォームが表示されるので、キーワードを入力して検索してみてください。 使い方 Pagefind は構築済みの UI ライブラリと、CLI コマンドとしてインデックスを作成するためのツールから構成されています。まずは UI ライブラリの部分から見てみましょう。 UI ライブラリ Pagefind の UI ライブラリは、検索フォームと検索結果を表示するためのコンポーネントから構成されています。この UI は以下のコードを追加するだけで簡単に利用できます。 <link href="/pagefind/pagefind-ui.css" rel="stylesheet" /> <script src="/pagefind/pagefind-ui.js"></script> <div id="s

サポート詐欺とネット広告 サポート詐欺の被害拡大が大きな問題になっています。 サポート詐欺は様々な手法でパソコンの不調を警告する画面をPC上に表示させ電話をかけるように煽り、サポート費用としてGoogle PlayギフトカードやiTunesギフトカードを買わせて支払わせたりPCの遠隔操作で振込をさせて、お金を奪う詐欺です。 この詐欺自体は昔からあるものですが、増加したようで2023年9月末には消費者庁も注意喚起を行っています。 www.caa.go.jp また、夏以後に日本各地の警察も注意喚起を始めた他、様々な報道機関やネット媒体がその問題を報じ続けています。 (2/14)詐欺：“サポート詐欺”に注意！ | NHK (5/15)パソコン「サポート詐欺」電話かけてみた 72分間の通話の全容 | NHK | デジタルでだまされない (7/2)【動画解説】パソコン「サポート詐欺」警告が出た時の対

盲信的にquerySelectorAllを使用するのを卒業する。~getElementsBy~と比べてみた~JavaScript この記事はun-T factory! XA Advent Calendar 2021の16日目の記事です。 この記事で伝えたいこと querySelectorAllとgetElementsBy~系の取得できるオブジェクトの違い、またその振る舞い 処理の早さ(重さ)の比較 querySelectorAllとgetElementsBy~ 2年のエンジニア生活で数えきれないほど使用したquerySelector(All)。 便利だからーというより、初めて見たjsのコードがこれで、以降盲信的に使い続けてきました。 反面、 2年のエンジニア生活でquerySelector(All)以外を使用したことがあったようななかったような...というレベルで、それ以外を知らなすぎる。

この記事で伝えたいこと（忙しい人向け） 新人ほど「保守していく」ことの感覚が腹落ちしにくいのではないか説 我々は保守しやすいコードを書くべきであり、保守しやすいコードを達成するための手段として原理原則やデザインパターンが存在している 保守ってなんで必要なんだっけ？という体系的な理解を持ったうえで、具体的なテクニックを学んでいくことが大事 // 追記（2023/12/9） なんとミノ駆動 さんにコメントいただけました。 もちろん良いコード/悪いコードで学ぶ設計入門 ―保守しやすい 成長し続けるコードの書き方は読んで影響を受けてます。 とってもうれしい。 想定読者 新卒 ~ ２年目くらいまでのプログラミング初心者 Webアプリの保守開発をしているエンジニア 3ヶ月前くらいの自分（未経験からエンジニアになって１年くらい） こんなことないでしょうか 先輩などから原理原則の観点を共有してもらったり、

以下、私のやり方であって「正解」ではないかもしれないのでご承知おきを。 11/30 Amazonより以下のメールが届いた。 お知らせ欄で告知しております通り、2023年11月30日（木）をもってアソシエイトツールバーの「画像リンク」及び「テキストと画像」リンクを廃止させていただきます。 画像リンク作成機能を使用して作成されたリンクは、2023年12月31日（日）以降表示されなくなりますので、画像リンクを掲載されている場合は、お早めに別のリンクへの差し替えのご対応をお願いいたします。 強調表示の内容は、Amazonアソシエイトの「お知らせ」には載っていない。そのため、twitter で騒ぎになっていないので、このメールが「ガセ」という可能性もある。 だが、もし本当なら、私にとって、わりとヤバい話になる。というのも、ブログに書影を表示させるため、この機能を使っているから。 そして、画像を表示さ

はじめにこちらはmhidakaが建立したAdvent Calendar Day.3となります。 こんにちは、はじめまして、のなと申します。mhidakaさんのTweetを見つけて、初めてAdvent Calendarなるものを書いています。なにかお作法間違っていたら大目に見てください、よろしくお願いします。 軽く自己紹介をさせていただくと、普段はGoogleでAndroidのTextまわりの開発を行っており、DroidKaigiやShibuya APKで発表させていただいたりしています。最近はほぼ絵文字の話しかしてないので、絵文字おじさんと思われてそうですが、普段の仕事は絵文字に限らず、Androidの文字表示の部分は大抵面倒をみています。 今回この機会をいただいたので、どんな内容を書こうか迷ったのですが、やはり皆が読んで面白い内容というと、絵文字になるのかなぁ、ということで性懲りもなく絵

楽天グループがWebサーバーに「security.txt」と呼ぶテキストファイルを置き、脆弱性▼情報の受付窓口としてVDP（Vulnerability Disclosure Program、脆弱性開示プログラム）を開始したことがSNSで話題になった。2023年10月2日のことだ。同社広報はこれを事実だと認めた。 security.txtは、米Apple（アップル）や米Google（グーグル）、米GitHub（ギットハブ）、米IBMなど、海外IT大手は既に導入している。一方、日本では少ない。security.txtとは何か、国内でなぜ普及しないのか、脆弱性情報の受け付けとの関連性は――。順に見ていこう。 セキュリティーが高まる理由 security.txtとは、当該企業が提供する製品やサービスの脆弱性情報を見つけた人が通知する窓口を示すためのファイルだ。その仕様は、インターネット関連技術の標

マウスイベントとは？ 「マウスイベント」とは、「マウスを使った動作」のことを指し、Javascriptではそれらの動作をトリガーとして、ブラウザ側で実行したい内容を定義することができます。 （※ここでの「マウス」とは、物理的な「マウス」のみならず、ノートパソコンなどの「タッチパッド」も指します。） 例えば、「マウスポインタがボタンの上に乗った時にメッセージを表示する」や「マウスボタンが押された時にアニメーションを流し始める」などの動きを実装することができます。 （※「マウスポインタ」とは、マウスを動かすと連動して動いてくれる矢印のことです。） ふと思い返してみれば、似たような動きが実装されているWebサイトが思い出されるのではないでしょうか？ このような動きを実装するために覚えておくべきマウスイベントは主に以下の8種類です。 1. click2. dblclick3. mousedown4

Webにおける表現はどんどん進化しています。Webサイトには当然のように動画が埋め込まれるようになり、CSSやSVG、canvasでのさまざまな表現が頻繁に見られるようになりました。さらにAR、VRといった表現も台頭し筆者も毎日ワクワクしながらインターネットの海を泳いでいます。 その中であまりメジャーではないと感じるのは「音」による表現です。もちろん音を用いた素晴らしいWebサイトはたくさんありますが、環境の制約が視覚表現以上に大きいため多くは見られないのでしょう。 とはいえ、音と視覚表現を組み合わせることによって表現できる世界観、インタラクション、その他諸々は計り知れないと筆者は思っています。今後オーディオなどの技術の進歩によって上記で述べた制約も乗り越えられるようになるかもしれません。時代を先どりしたい読者に向けて、今回の記事ではWebで音を扱う技術Web Audio APIについてお

AudioContextとは AudioContextとはJavaScriptを使用してWebブラウザで高度なオーディオ操作するためのインターフェースです。 このAPIを利用すると、オーディオデータの生成、加工、解析、および再生が可能になります。 mp3などの音声ファイルが不要なので、音を鳴らしたい場合でも軽量なJavaScriptコードのみで実装できます。 例えば深夜のテレビの放送休止音（ピーーー）を作成して、3秒後に停止する処理をJavaScriptで書くと以下のようになります。(1000Hzの周波数を使用) const audioCtx = new (window.AudioContext || window.webkitAudioContext)() const oscillator = audioCtx.createOscillator() oscillator.connect(

コロナ禍中に取得された地方自治体のドメインがオークションで高値売買され、中古ドメインとして悪用されるなど、公的機関のドメイン放棄問題が注目されています。 11月25日のNHKニュース7でドメイン流用の件が報じられました。私も取材を受け少しご協力をしています。 www3.nhk.or.jp 公的機関のドメイン放棄問題の理想の解決は、今後は lg.jp、go.jp などの公的機関しか使えないドメインだけを使うようにすることです。 ただ今回の問題はコロナ禍初期の大混乱時、非常にスピーディにサイト立ち上げが求められていた時の話です。 信頼が求められる lg.jp などのドメインの利用には厳格なルールがあるのも当然です。あの混乱時期にルール改定も難しかったと思います。新規ドメインが選ばれた事は仕方がない事と思っています。 ただ、コロナ禍が落ち着いた今、無責任に放棄されるのは明らかな問題です。 今回の

【簡単】Windowsで簡易Webサーバを立ち上げる方法 ちょっとWebサーバを立てたい！ という時に便利なフリーソフト「簡単WEBサーバー」を紹介します。 いますぐにWebサーバを立ち上げたい時　※1お試しだなんだし、簡単でいいからWebサーバを起動したい時静的Webリソースをサクッと確認したい時ちょっとHTTPリクエストの中身を確認したい時 ※1　Basic認証も使えるので、IDとパスワードでの表示制限もできます 特徴 通常、Webサーバを立てるというと、Apacheやnginxなどをインストールして設定ファイルを編集して起動して・・　といろいろ面倒なのですが、この「簡単WEBサーバ」はインストール不要。適当なフォルダに置いてEXEファイルを起動するだけでWebサーバが完成します。 簡易Webサーバなのできちんとした運用には向きませんが、ちょっと静的なWeb資材を動かして確認したいとい

概要 ゲーミングPC、ゲーミングマウス、ゲーミングキーボード、ゲーミングチェアーなど、色々ありますが、なぜか光っています。 なので、WEB画面も光らせてみようと、gaming-cssというプラグイン作成しnpmに公開しました。 セットアップ方法 下記のコマンドでインストールできます。 詳細な使い方についてはREADMEを確認して頂ければと思います。 CSSを適用 Qiitaのプロフィール画面を装飾しました！ Before After とっても綺麗になりましたね！（Qiita運営さん！ゲーミングテーマはいかがでしょうか？） ちなみに、CSSを適用するのに１時間くらいかかりました。 仕組み 仕組みは、簡単です。下記のように、線・文字・背景・画像などに対してアニメーションのスタイルを用意して適用しているだけです。 /*背景色*/ .gaming-background-color { animat

ウェブ上でJavaScriptを実行してバグが発生した場合、ブラウザに内蔵されている開発者ツールを使ってデバッグすることがよくあります。そうしたブラウザでのデバッグにおいて役立つテクニックをNetflixでフロントエンドの開発に携わっているアラン・ノルバウアーさんがまとめています。 67 Weird Debugging Tricks Your Browser Doesn't Want You to Know | Alan Norbauer https://alan.norbauer.com/articles/browser-debugging-tricks ◆高度な条件付きブレークポイント 開発者ツールの「ソース」タブにはデバッガーが用意されており、JavaScriptの任意の行にブレークポイントを設定することで実行を一時停止して変数やコールスタックの中身を確認できます。ブレークポイントを

先日のJJUG CCC 2023 Fallの懇親会でクソコードを研究しているという学生がいたのだけど、クソコードの研究は難しいという話をした。 人工的にクソコードを再現しても、あの野生のクソコードのクソさには全く足りないわけで。 トルストイが言うように「すべてきれいなコードは互いに似通っているが、クソコードはそれぞれにクソの趣を異にしているものである」なので、なかなか「これがクソコード」のように類型化するのも難しい。 典型的なクソコードを書いてみても、なんだかきれいなクソコードができてしまう。 クソコードはネットに出回らないので、資料の収集もまた難しい。ネットにないということは、ネットの情報に基づいている「AI」もホンモノのクソコードには触れていないことになる。 クソコード収集サイトをつくっても、実際のクソコードは業務固有処理も含まれるので、掲載できる形に整理していくと本来のクソさが薄れて

折れ線グラフを描画するためのフォント「Linefont」、波形・スペクトル・ダイアグラム・ヒストグラムなどの棒データを描画するためのフォント「Wavefont」が、Google Fontsで利用できるようになったので紹介します。 Linefont | Wavefont フォントのライセンスはSIL Open Font Licenseで、個人でも商用プロジェクトでも無料で利用できます。 まずは、Linefont。 Linefontは中小規模の折れ線グラフ（時系列など）を描画するためのフォントです。値は0～100の範囲でさまざまな文字に割り当てられます。範囲、値、ウェイトはWavefontと互換性があり、視覚的な一貫性を維持しながらフォントを交換できます。

令和5年9/12にユニコード15.1が正式公開され、CJK漢字拡張-Iの他に“漢字構成記述文字”に指示記号4種、“CJK筆画”に拡張漢字構成記述文字の指示記号が1種類追加されました。ユニコードに採用されていない字の説明がしやすくなったのが重要です。𝚄+𝟹𝟷𝙴𝙵の一部除去指示記号は文字構成要素の一部が削除されていることを示す記号です。 漢字構成記述文字記号をラテン・ギリシャ・キリル各文字体系に応用した例で、ユニコードに採用されていない左右逆になる字形と逆になる字形を説明しやすくなりそうです。画像はにしき的フォントに含まれるユニコード未登録のラテン・ギリシャ・キリル各種字母を漢字構成記述文字記号で説明した例です。