Next.jsのApp Routerを学ぶ際、shadcn/uiが参考になったという話 - Qiita
Next.jsのApp Routerを学ぶ際に、UIライブラリを探していたところ、shadcn/uiが参考になったので紹介します。 shadcn/uiは、フレームワークやライブラリではなく、コピペで利用できるReactコンポーネントのサンプル集という立ち位置になっています。Tailwind CSSでデザインされており、React Server Components(RSC)にも対応しています。 サンプルの実装方法が参考になる点も魅力の一つです。 簡単ですがつらつらと紹介していきたいと思います。 shadcn/uiとは デモを見てるとフレームワークやライブラリなのかなと思いきやそうではなく、コピペで利用できるサンプル集という立ち位置になっています。基本的にはTailwind CSSでデザインされてるようです。 サンプルとはいえ、実装方法で参考になった箇所が結構あったのでそこも気に入ってるポイ
要件定義｜3分で読める非機能要件について - Qiita
はじめに エンジニアのみなさま、日々の学習本当にお疲れ様です！ また本記事まで足を運んでいただき本当に感謝です。 約3分程度で読めるので最後まで読んでもらえると幸いです。 要件定義関連の記事の投稿をしました。時間あればぜひ読んでみてください。 今回は「非機能要件」の 可用性 性能・拡張性 運用・保守性 移行性 セキュリティ システム環境・エコロジー の6項目について理解を深めてアウトプットしようと思います。 非機能要件｜6項目について 1. 可用性 システムが継続して利用可能な状態を維持する能力を指します。『稼働率』 で表現されます。システムは定期メンテナンスや予期しない障害により、一時的に利用できなくなることがあります。可用性は、稼働している時間と停止から復旧までの時間の割合で決まります。たとえば、Amazonの「Amazon ECS」サービスは 『99.99%』 の稼働率を保証しており
【ServerlessDays 2024】生成AIアプリ実装におけるトレンド3選 - Qiita
・機能の多様化&複雑化 ・生成AIに仕事の一部を任せる ・ハルシネーションは許されなくなっていく ・出力内容の評価も生成AIが行う ・人間は更なる精度向上を求める ・生成AIを使いこなす技術力と知識が必要 ・AIがAIを使う時代へ このように移り変わっていくフェーズが来ている、と個人的には感じました。 ここからは、前述した3つのトレンドについて、1つずつ掘り下げていきます。 LLMが生成した出力を、LLMで評価する 例えば「オンライン薬局のLLMマルチエージェントを支えるLLM Ops」というセッションでは、患者さんとメッセージをやり取りする薬剤師さんに対して、返信のレコメンド文をLLMに出力させるという取り組みをされていました。 このサービスにおけるミッションは「漢方をお客様に販売すること」なので、虚偽・不正確な情報が入っていては困ります。 LLMが生成したメッセージを薬剤師さんがチェッ
「絶対にdisabled属性を避けて、aria-disabled属性を使わなければならない」わけではありません - Qiita
「絶対にdisabled属性を避けて、aria-disabled属性を使わなければならない」わけではありませんHTMLアクセシビリティWAI-ARIA 最近、「アクセシビリティを向上させたいなら、HTMLの disabled 属性ではなく、aria-disabled 属性を使うべき」という主張を見かけますが、本当にそうなのでしょうか？ disabled属性を使っていても、スクリーンリーダーで要素を知覚できる そのような主張をしている人、それを受け止めた人の中には「 disabled 属性を使った要素はスクリーンリーダで読めなくなる」と誤解している人が少なからず存在するように思われます。しかしこれは正しい理解ではありません。 たしかに、disabled属性を付加している button 要素や input 要素、 select 要素、 textarea 要素は、Tabキーによるフォーカスはでき
こどおじがAndroidアプリ作ってたらGoogleに子供部屋を追い出された話 - Qiita
自己紹介 皆様は個人開発をやっておられますでしょうか。私も億万長者を目指して日々スマホアプリ開発をしております。 代表作は安倍晋三エクスプローラー/聖帝エクスプローラー、最近力を入れているアプリはガチ有能AI助手です。他にもいくつかのアプリを個人で開発し、AppStore/GooglePlayで公開しています。 私はこれらのアプリを実家の自室で開発していました。10年以上実家暮らしをしていた筋金入りの子供部屋おじさんです。 なお、ガチ有能AI助手ではバックエンドで使用しているCloudRun、Firebase、Algolia、Suno、Huggingfaceでそれなりに運営費用が発生しています。そのためIn App Purchaseを使用してアプリ内から寄付ができるようにしています。 IAPを使用した寄付機能(iPhone) IAPを使用した寄付機能(Android) GooglePlay
Web Audio APIを使ったブラウザフィンガープリント手法の紹介 - Qiita
Web Audio APIというAPIがあります。 RFC / 日本語訳 ざっくり言うと、ブラウザで音を作ったり出したりできるAPIです。 RFCの時点でフィンガープリントの懸念が大量に書かれてるという有様ですが、実際に実用レベルでブラウザフィンガープリントしている例が存在しました。 FingerprintJSという、そのまんまな名前のライブラリです。 以下は同ライブラリのブログより、How the Web Audio API is used for browser fingerprintingという記事のざっくり紹介です。 How the Web Audio API is used for browser fingerprinting Cookieを使うこともなく、許可を求めることもなく、Webブラウザを識別できることを知っていますか？ この技術はブラウザフィンガープリントと呼ばれていて
Python理事会が古参開発者を追い出して開発者コミュニティが騒動に - Qiita
どういうわけか日本では一切話題に上がっていないのですが、Pythonの開発者コミュニティでなんか問題が起きているようです。 どうも話が様々なスレッドにとっ散らかっているうえに半分はDiscordや非公開のところで動いているみたいなので、読み取れていないところが色々あるかもしれません。 誰かが補足してくれるはず。 Proposed bylaws changes to improve our membership experience 最初のきっかけはこのスレッドです。 これは規約の一部を変更する提案であり、その中でも3番目の提案であるAdds provision to remove Members by vote of the Board of Directorsという変更が注目を浴びました。 Python財団にはフェローという制度があり、これはPythonエコシステムやコミュニティに優れた
スクリーンリーダーの操作にはTab以外のキーも必要です - Qiita
Webのアクセシビリティの確認としてスクリーンリーダーを使った動作確認もしてもらうと 「リンクとかボタンしか読まれず、見出しや説明文がスキップされてしまいました」 という報告をされることが時々あります。 これは大抵、スクリーンリーダーを起動して、Tabキーだけを繰り返し押してしまっていることによって起こります。スクリーンリーダーの操作方法を伝えると、読み飛ばしたと思っていたところもちゃんと読みあげてくれたということがほとんです。 アクセシビリティをかなり意識したページであっても、Tabキーだけでスクリーンリーダーを操作しているかぎり、ページの隅々まで読めることはほとんどありません。スクリーンリーダーにはTabキーを押す以外にもいろいろな操作が存在して、それを憶える必要があるわけです。私はアクセシビリティチェックのやり方を説明するときには、必ずその操作方法のうち最低限のものを紹介しているつも
「住所は英数字もすべて全角で入力してください」はなぜそうなったのか - Qiita
Webサービスのフォームに住所を入力するとき、丁目や番地などを入れる欄について、数字やハイフンを全角で書かなければいけない「全角縛り」をやっているフォームをよく見ます。半角文字を入力してしまってエラーになったり、咄嗟に変換方法を思い出せなかったり、全角と半角の見分けが付きづらかったり、「全角縛り」であることが明示されていなかったり、「ハイフン」としてどの文字を使うべきかわからなかったり……と、鬱陶しさを感じることが多くあります。 「住所は全角のみ」（数字やハイフンも絶対に半角を受け付けない）という仕様がどういう経緯で生まれて、どう広まっていったのかが気になってる。いま存在しているのは過去の仕様や慣習の踏襲として理解できても、そもそもなぜそれらが生まれたのかが理解できない。 https://t.co/ZLz0Pw9GOK — ymrl (@ymrl) July 29, 2024 これについて
TS 5.6のiterator helpersサポート――BuiltinIteratorsのwhat & whyを知る - Qiita
先日、TypeScript 5.6 Betaが公開され、あわせてリリースノートも出ました。 この記事では、TS 5.6の新機能の中でもIterator helpersに注目します。特に、Iterator helpersのサポートに合わせて型定義に追加されたBuiltinIteratorsやBuiltinAsyncIteratorsについて解説します。 Iterator helpersとは Iterator helpersは、ECMAScriptのプロポーザルのひとつであり、この記事の公開時点ではStage 3という完成目前の状態にあります。TypeScriptではStage 3に到達したプロポーザルが実装されるので今回これが実装されることになりました。 ランタイムの実装としては、この記事公開時点ではGoogle Chrome 122, Node.js 22.0.0, Deno 1.42など
AI系の研究・開発に関する情報収集元を紹介 - Qiita
昨年、株式会社松尾研究所（東京大学松尾研とビジョンを共有）に転職しました。 現在は技術顧問の松尾先生のもと、AI系のビジネス活用に向けた基礎研究寄りの業務に従事しています（リサーチャー職）。 本記事では社内の有志向けに実施した、私が普段実施している情報収集元の紹介です。 私は現在、「企業での基礎研究者」的立場ですが、AI系は基礎研究から開発、ビジネスの距離が近いため、ビジネス関連の情報も幅広く見るように心がけています。 以下、 毎朝チェックしている情報 週単位でチェックしている情報 月単位でチェックしている情報 の順番に紹介いたします。 1. 毎朝チェック 1.1 最新の研究情報 最新のAI系研究論文の調べ方ですが、私は 「labml.ai」 の 「Find latest and trending machine learning papers」 を使用しています。 こちらのサイトでは、T
【Go】公式ツール "eg" を使って効率的にGoのコードをリファクタリングする - Qiita
はじめに こんにちは、ken です。お仕事では Go をよく書きます。 最近、Go の公式パッケージであるgolang.org/x/toolsを眺めていたら、なにやら有用そうなパッケージを見つけたので今回はそれについて書こうと思います。 それはegというリファクタリングツールです。 eg とは eg は、例ベースで Go コードをリファクタリングするためのツールです。このツールを使用することで、特定のコードパターンを別のコードに置き換えることができ、効率的にリファクタリングが行えます。 先ほど貼った公式ドキュメントに詳しい説明があるかと思いきや The eg command performs example-based refactoring. For documentation, run the command, or see Help in golang.org/x/tools/ref
生成AIは日本語の画像をどこまで理解できるのか？ - Qiita
はじめに こんにちは！AI エンジニアのヤマゾーです。 ここ数年生成 AI の進化が目覚ましく、生成テキストの品質だけでなく画像の理解力も各段に向上しつつあります。例えば以下の記事を書いた時の ChatGPT は画像中に書かれた日本語を殆ど読めなかったのですが、現在は難しい漢字もスラスラ読めるようになっています。 その他にも、X ではインフルエンサーの「〇〇を読めた！」「〇〇を扱えた！」という投稿を毎日のように見かけます。中には再現性や新規性が怪しい投稿も含まれるようですが、ここまで活発かつ継続的に多くの進展が報告されるのは異例の事態です。 それでは、現時点における生成 AI は実際どこまで日本語の画像を理解できるのでしょうか？ 本記事ではこの疑問に答えるべく、三大生成 AI である ChatGPT、Gemini、Claude を対象にオリジナルのテストを行い、初学者向けに解説しようと思い
【JavaScript】ネイティブで集合演算できるようになった - Qiita
JavaScriptにはだいぶ前からSetオブジェクトがありましたが、何故か集合演算は全く定義されておらず自力で実装しなければなりませんでした。 その後、まあ不便だねってことでSet Methods for JavaScriptというproposalが提出されました。 実装は珍しくSafariが最も早く、2023/09/18のSafari17から対応しました。 その後2024/02/21にChrome122、そして2024/06/11にFirefox127で実装されたことにより、主要全ブラウザで集合演算が使用可能になりました。 複数環境で実装されたことから、無事ES2025としてStage4、つまり上がりになりました。 ということで使い方を紹介するよ。 Set.prototype.intersection() 要素と引数の、両方に含まれる値を返します。 new Set([1, 2, 3,
ブラウザ開発者ツールのネットワークタブに表示されない情報送信手法 - Qiita
はじめに はじめまして、セキュリティエンジニアのSatoki (@satoki00) です。今回はブラウザの開発者ツールのネットワークタブから隠れて、Webサイト内の情報を送信する手法をまとめます。所謂Exfiltrationというやつです。中にはCSPの制限をBypassするために用いられるテクニックもあります。CTFなどで安全に使ってください。 前提 発端はWeb上でテキストの文字数をカウントできるサイトが閉鎖する際の話です。カウント対象のテキストデータがサイト運営 (やサイトを改竄した攻撃者) に盗み取られていないかという議論が巻き起こっていました。「盗み取られていない」側の主張は、ブラウザの開発者ツールのネットワークタブにリクエストを送信した形跡がないというものでした。ここで ブラウザの開発者ツールのネットワークタブに表示がなければ外部へデータを送信していないのか？ といった疑問が
UIコンポーネントの大きさは外から制御しよう - Qiita
昨今のフロントエンド向けUIライブラリでは、コンポーネントの設計が重要です。この記事では、コンポーネントのスタイリング、その中でもとくにコンポーネントの大きさに関わるコンポーネント設計について考えます。 私の考える結論は、むやみに大きさを指定できるpropを生やさずに、CSSで外から大きさを制御できるようにしたほうがいいです。 コンポーネントの大きさを制御したい UIの一部分を再利用可能なコンポーネントとする場合、同じコンポーネントがさまざまな場面で使えるのが望ましいでしょう。コンポーネントが提供する機能にもよりますが、場面に応じてさまざまな大きさでコンポーネントを使用できたほうがよいこともあります。 具体例として、このようなコンポーネントを考えてみましょう。例はReactで示しますが、この記事の内容はReactとは関係ありません。 const Card: React.FC<React.P
各種Prompt Engineeringの日本語実例集（Zero-CoT、mock、ReAct、ToT、Metacog、Step Back、IEPなど） - Qiita
各種Prompt Engineeringの日本語実例集（Zero-CoT、mock、ReAct、ToT、Metacog、Step Back、IEPなど）Python機械学習入門ChatGPTLLM CoT、Zero-CoT、ToT、mock、ReAct、Step Back、Metacog、IEPなど、各種Prompt Engineering手法の概説と、日本語での実際のプロンプト例をまとめた記事です。 各種Prompt Engineering手法を日本語で実装したい方向けの記事となります。 本記事で取り扱う手法は以下の通りです。 項目数が多いため、記事右下の目次リンクもご活用ください。 本記事の内容 01: 通常のPrompt 02: Few-shot Learning 03: CoT（Chain of Thought） 04: 出力形式の指定方法 05: Zero-shot CoT（≒
DropBoxの同期対象から除外する - Qiita
DropBoxは指定したディレクトリ内のデータをクラウドで保管してくれる便利なサービスですが、保存しなくても良いファイルまで保存されると困る場面があります。 標準機能として「選択型同期」機能がありますが、これで指定した除外対象は、同期されませんが、「同期はしたくないけどローカルには保存したい」ということが出来ません。 そこで、下記の方法で動機対象から除外する方法を試みた。 公式 Dropbox ファイルやフォルダを「無視」に設定する https://help.dropbox.com/ja-jp/files-folders/restore-delete/ignored-files 公式には ［dropbox.com と同期しない］をクリックします。 とありますが、Dropbox Plus （これ） にはこの項目がありませんでした。 なので、「コマンドラインでファイルやフォルダを「無視」に設定
macOS Sonoma 14.xでsudo実行時にTouch IDで認証する機能を有効化する手順 - Qiita
動作確認環境 macOS Sonoma 14.0 M2 MacBook Air sudoでTouch IDを有効化する手順 macOS Sonomaにおいて、sudo実行時にTouch IDが使えるようにするには、 /etc/pam.d/sudo_local ファイルを作成します。 sudo_local.template が用意されているので、それを元に作成すると簡単です。 sudo cp /etc/pam.d/sudo_local.template /etc/pam.d/sudo_local # お好みのエディタで /etc/pam.d/sudo_local を編集 sudo vim /etc/pam.d/sudo_local
エンジニアのための十徳ナイフ「DevToys」がバージョン２になってクロスプラットフォームやCLI対応しさらに便利すぎる - Qiita
はじめに 以前紹介させていただき、2022年Qiitaのいいねランキング18位、ストックランキング20位を記録したこちらの記事の続編です！ DevToysはリリース後しばらく定期的なバージョンアップが続けられていましたが、去年の7月からぱったりとアップデートが止まっている状態でした。 リポジトリや作者のXを見るとバージョン２の開発を行っているようで、今か今かと待ち続けていましたが数日前リリース予告のポストを見つけて、今日ついにプレリリースされました！ ということで早速紹介していきます！ DevToysとは DevToysは「開発者のためのスイスアーミーナイフ」の紹介文の通り、開発時によく使うツールを十徳ナイフのようにまとめたアプリとなっています。 JSONの整形とかエンコードデコードetc... プログラミングや保守運用の調査でやりがちな作業をいちいち変換サイトを探したり、エディター拡張機
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
