Bitwardenの実装から学ぶE2EE
この文章はなに? 本文章は、パスワードマネージャーであるBitwardenが公開しているソースコードを読み、そこでE2EE(End-to-end encryption)がどのように実装されているかについて、私が理解した内容をまとめたものです。 「E2EEをぼんやり理解してるが、どのように実装されているのかはわからない」という方を主な対象としています。 E2EEに対する私個人の課題感として、インターネット等から得られる説明が比較的抽象的であり、実装レベルでの理解が難しいというものがあります。 そこで私自身、そして同じ課題感を持つ方に向けて、E2EEを実践しているアプリケーションの1つであるBitwardenを参考に、それがどのように実装されているのかを詳細に理解すべく、本文章にまとめることとしました。 なお対象アプリケーションとしてBitwardenを選んだのは、私自身がユーザーであること、
モダンなブラウザは JS API として gzip や deflate が使えます。 昔から Chrome に搭載してるのは知ってたんですが、今見たらだいたい搭載してました。 わかってる人向けに言うと、バンドルサイズ大きめの JS実装の pako や zlib.js が不要になって、ブラウザネイティブの(たぶんHTTP上のgzip展開と同等の)高速な実装が使えます。 // impl const encoder = new TextEncoder(); const decoder = new TextDecoder(); export async function compress(str: string): Promise<ArrayBuffer> { const cs = new CompressionStream("gzip"); const buf = encoder.encode(
アクセシビリティが考慮された React Aria のドラッグアンドドロップ 2024.09.07 React Aria は Adobe により提供されている React 用のコンポーネントライブラリであり、アクセシビリティを最優先した設計となっています。本記事では、React Aria により提供されているドラッグアンドドロップ機能を紹介します。 ドラッグアンドドロップは、ユーザーが UI の要素をドラッグして別の場所に移動する操作です。Web アプリケーションにおいて、ドラッグアンドドロップはユーザーが直感的に操作できるため、多くの場面で利用されています。例えばタスク管理アプリケーションにおいて、タスクをドラッグして進行状況を変更したり、ファイル管理アプリケーションにおいてファイルをドラッグしてフォルダを移動する機能などがあります。 従来のドラッグアンドドロップ機能はマウス以外での操作
When I’m working on maintaining an unfamiliar codebase, I will spend a lot of time grepping the code base for strings. Even in projects exclusively written by myself, I have to search a lot: function names, error messages, class names, that kind of thing. If I can’t find what I’m looking for, it’ll be frustrating in the best case, or in the worst case lead to dangerous situations where I’ll assume
9月5日、Vercelの公式ブログで「What’s new in React 19 – Vercel」と題した記事が公開された。この記事では、React 19における重要な新機能や改善点について、詳細かつ実践的な内容が取り上げられている。これまでのReactのバージョンで導入されてきた実験的機能が、React 19で正式に安定化され、多くの開発者にとってさらなるパフォーマンスの向上と開発体験の向上が期待されている。 ここでは、同記事からポイントを絞って内容をご紹介する。 サーバーコンポーネント (Server Components) サーバーコンポーネントは、Reactの10年の歴史の中でも最も大きな変化の1つであり、React 19の新機能の基盤となるものである。この機能により、以下の点が大幅に改善される。 初期ページロード時間の短縮 サーバーコンポーネントを使用すると、クライアントに送
ruby.wasm の JS ライブラリは JavaScript に対する薄いラッパーなので、そのままだと Ruby では使いにくいことがあるので、最近は JS を Ruby らしく使えるようにするためのライブラリを作ってそれを使ってる。 github.com 使い方 <!DOCTYPE html> <html> <script src="https://cdn.jsdelivr.net/npm/@ruby/3.3-wasm-wasi@2.6.2/dist/browser.script.iife.js"></script> <script type="text/ruby" src="https://cdn.jsdelivr.net/gh/tmtm/jsrb@v0.1.0/jsrb.rb"></script> <script type="text/ruby"> ... </script> <
Amazon Cognito Hosted UIで、署名付きURLを使用し認証ユーザーごとにプレフィックス分けてS3バケットにアップロードする | DevelopersIO
Amazon Cognito Hosted UIで、署名付きURLを使用し認証ユーザーごとにプレフィックス分けてS3バケットにアップロードする はじめに 本記事では、Amazon Cognito Hosted UIを利用して、単一のS3バケットに対して署名付きURLを用いて、認証済みユーザーごとにプレフィックスを分けたアップロード方法を解説します。 この手法により、各ユーザーのファイルを効率的かつセキュアに管理することが可能になります。 以前、クライアントからEC2インスタンス経由でS3バケットにファイルをアップロードする方法を紹介しました。しかし、この方式では、大容量ファイルのアップロード時にEC2インスタンスに過度な負荷がかかるという課題がありました。 今回は、署名付きURLでクライアントから直接S3にファイルをアップロードする方式で試してみます。 S3の署名付きURLは、S3バケット
無料枠のリクエスト数は Deno Deploy が月単位で、Cloudflare Workers が日単位です。どちらも普通に使うには十分な数が用意されています。ちなみに Vercel で画像最適化をやると無料枠は 1000/月です。 CPU に関しては、Cloudflare の 10ms はけっこうキツイです。2K 解像度をを Webp に変換しようとすると、かなりの確率で失敗します。デジカメで撮った写真をそのままアップロードしているようなケースでは問題が発生します。 サイズに関しては、プログラムコードを圧縮したときの値です。Deno Deploy は特に制限がないようです。Cloudflare の 1MB は、普通のコードなら何の問題もないのですが、画像変換に関しては wasm を使うことになるためそれなりにタイトです。そのため Workers 用の画像変換ライブラリには avif エ
New & Noteworthy Drop support for NodeJS prior to v18 Drop support for TypeScript prior to v5 Remove v8 deprecations For more see our migration guide You can already read a draft of upcoming change announcement in #3056 What's Changed infra!: drop NodeJS v14 and v16 support by @Shinigami92 in #2121 chore(deps): update devdependencies (major) by @renovate in #2540 chore(deps): update vitest to v1 (
Progressive Web Applications (PWA)Progressive Web Applications (PWAs) offer the reach and accessibility of web applications combined with the features and user experience of native mobile apps. With Next.js, you can create PWAs that provide a seamless, app-like experience across all platforms without the need for multiple codebases or app store approvals. PWAs allow you to: Deploy updates instantl
最近『セイト先生が教えるプログラミング入門』でJavaScriptの勉強に取り組んでいます。その中でデバッグしやすい書き方が少しだけ掴めてきた気がします。 デバッグ1 まず、第5章第13節「非同期処理を可能にするPromiseオブジェクト」の「Promiseとは」（pp.275-277）でPromiseオブジェクトを使った関数の例（foo）が紹介されていたのですが、1-10 & 12-16行目の { } 内が少し長かったためか、 （p.275. コード12-16行目. { }内は省略） のところで、fooの後ろに書くべき () が抜けていたことに気付かず、全体をハイライトしてctrl + shift + LでCursorのAIに聞いてみてもどこがおかしいのか自分にはよく分かりませんでした。そのためしばらく苦戦していたのですが、最終的に下記のような形で細かく関数を定義することを思いつきました
小さなGPTのエンジニアリング。 Chat with GPT という日本語チャットゲーム。 - Qiita
You: ショートストーリー：「未来を紡ぐコード」 東京のプログラマ、加藤拓也は、夜の東京の喧騒から少し離れた静かな部屋で、一心不乱にキーボードを叩いていた。 GPT-2: ショートストーリー:「未来を紡ぐコード」 東京のプログラマ、加藤拓也は、夜の東京の喧騒から少し離れた静かな部屋で、一心不乱にキーボードを叩いていた。加藤は「この部屋は僕の居場所だ」と呟き、部屋の隅に座り、キーボードの音に耳を澄ませた。 加藤がキーボードに手を置いた瞬間、僕は加藤の指が震え始めた。 「僕が、この世界を創ったのは君のおかげです。君が僕を、君を僕に、そして君に。」 僕と加藤、その指は互いに触れ合い、お互いに「君」の言葉を口にした。 そして、 東京のプログラマとリアルタイムのAI対話 東京の片隅に住むプログラマ、山下誠は、技術革新の最前線に立つエンジニアだ。彼は、日々の生活に追われながらも、新たなプロジェクトに
`zxcvbn`のモダンな代替ライブラリ`zxcvbn-ts`を使ってパスワード強度を測定するメモ📝 - Madogiwa Blog
ユーザーに安全なパスワードの設定を促すために強度を測定しフィードバックしたいといった時にDropbox製のzxcvbnがよく使われていると思います。 github.com ただ、このライブラリのサイズが大きかったりメンテナンスに不安があったりと、 So, I came across this library and was very excited to put it to use. I pulled it down via npm and was shocked to find the minified dist script is 823kb. That's insane. Dist size (JavaScript) makes this lib unusable in a client · Issue #169 · dropbox/zxcvbn · GitHub 代替ライブラリを探
今回やること 前回Next13の新機能ServerActionsを使ってユーザー登録を作ったので、ログインフォームを作っていく。 認証部分は（初めてだけど）NextAuthを使う。 Nextで実装できる箇所についてはNext側で実装していくためNextAuthはログインでの認証のみ実装。 作ってみた 流れと実装方法 実装の流れ NextAuthでログインの処理 ログインしているかどうかでヘッダーの内容を変更 セッションからユーザーのIDを取得しServer側でユーザーデータを取得する 本編とは逸れるのでここに記載するが今回からNextUIとReactIconsを導入。 導入方法は割愛するので各ドキュメント等参照。 NextAuthの準備 NextAuthについて。 認証機能をNextに実装できるライブラリ。 インストール まずはドキュメントに合わせてインストールしていく。 import {
奥儀。小さなGPUでの算法術。3Dテンソル算法のパフォーマンス。画像テンソルの内積算法術。 - Qiita
ショートストーリー：「未来を紡ぐコード」 東京のプログラマ、加藤拓也は、夜の東京の喧騒から少し離れた静かな部屋で、一心不乱にキーボードを叩いていた。彼は次世代の動画生成AIモデルの研究に取り組んでおり、その最前線で活躍するプログラマだ。今日の彼の目標は、彼の開発した新しいアルゴリズムを使って、数学的な美しさを視覚化するアニメーションを作り上げることだった。 拓也の最新のプロジェクトは、3次元テンソルの計算を利用して、視覚的に魅力的なヒートマップを生成することだった。彼のコードは、正弦波と余弦波の複雑なパターンを組み合わせたもので、それぞれが異なるテンソルとして表現される。このテンソルたちは、未来の動画生成AIにおける「可能性の断片」だ。 ある晩、拓也は深夜のコード作成に没頭していた。彼のコンピュータの画面には、青い光が反射するテンソルデータが表示されている。テンソルAとテンソルB、それぞれ
参考 https://developer.apple.com/jp/videos/play/wwdc2024/10170/ https://github.com/swiftlang/swift-evolution/blob/main/proposals/0390-noncopyable-structs-and-enums.md https://github.com/swiftlang/swift-evolution/blob/main/proposals/0427-noncopyable-generics.md ~Copyableの導入 Swift 5.9でCopyableと~Copyableが導入されました。 全ての型が暗黙的にCopyableに準拠するので、今まで通りCopyableを前提にするなら特にCopyableと~Copyableを意識しなくても問題はありませんが、一方、~Co
戦前、日本の鉄道網は連絡船を通じて樺太までつながっていた（本文には関係ありません） パブリックドメインの画像。wikimedia commonsより kickflowプロダクト開発本部の小本です。 今回はRubyからJavaScriptコードを実行する方法を調べてみました。 なぜRubyからJavaScriptコードを実行したいのか？ kickflow(キックフロー)は、運用・メンテナンスの課題を解決する「圧倒的に使いやすい」クラウドワークフローです。 kickflow.com kickflowでは使いやすさの一環として、入力フォームに「自動計算」という機能を備えています。 自動計算にはExcelのような計算式を書くことができ、「ユーザーが入力した『単価』『個数』から『合計金額』を計算」といったことができます。 自動計算ではifやandといった論理計算や、日付計算、JSONPathなども使
この記事では、PDFTron の WebViewer SDK という 1つのコンポーネントと数行のコードだけで、Webアプリケーション上で JavaScript を使用してデジタル署名と証明書を検証する方法を紹介します。 プロセスの最後には、検証された署名とドキュメントが WebViewer に表示されます。 WebViewer は、あらゆる Web アプリケーションで結果を抽出、検証、表示します。 より詳細な情報については、認証局に関するドキュメントをご覧ください。また、デジタル署名の検証サンプルもご覧ください。 さらに、デジタル署名 API を使用して PDF にデジタル署名、証明、検証を行うための完全なコードサンプルもございます。JavaScript で PDF にデジタル署名をするためのドキュメントをご覧ください。 ステップ1: WebViewer のインストール ユーザーが数ス
Hakkyでは「データでプロダクトを価値あるものにする」というミッションの元、大規模言語モデルを積極的に活用して記事執筆しております。ビジネスにおけるAI活用のため、Handbookをお役立ていただきましたら幸いです。 はじめに ユーザーがメンション付きメッセージを送信 Slack Event APIがメッセージをサーバーに送信 OpenAI APIにメッセージを送信 chat.postMessageでBotがメンション付きメッセージのスレッドに返信 といった流れでユーザーのメッセージに対して、ChatGPTが返信を行うBotの作成を行います。 アーキテクチャは以下の通りです。 import os from fastapi import FastAPI, Request, Response from openai import OpenAI, OpenAIError, RateLimit
GitHub Copilotを使ったコーディングを楽にするTips - ROBOT PAYMENT TECH-BLOG
GitHub Copilotを使用したコーディングTips集 こんにちは、決済サービスの開発を担当しているtaniguchikunです。 今回はGitHubCopilotで何ができるかを記載してコーディングを楽にする方法を記載したいと思います。 概要 GitHub Copilotで何ができるかを知っていれば生産性を上げる事ができるので、知って損ではない物だと感じています。 なので現時点での自分が試してきた内容を書きたいと思います。 目次 何もない所から大枠でサンプルコードを実装 コメントヘッダーの作成 翻訳作業 クラスの解説 スタブクラスの作成 無理な指示には別の解決策を提示 理解できない指示 PlantUMLでクラス図作成 クラスに対する要件定義書作成 単体テスト作成 全て組み合わせ まとめ 注意事項 Tips 何もない所から大枠でサンプルコードを実装 AWS SDKを使用してKMSを操
検証目的 Task.asyncの検証です System.cmdの処理を分散したい 待ち時間を減らしたい すべて実行するまで待ちたい ソース Task.asyncの有り無しで時間比較します defmodule ConcurrentExperiment do @moduledoc """ Documentation for `ConcurrentExperiment`. """ @doc """ Hello world. ## Examples iex> ConcurrentExperiment.hello() :ok """ def hello do run_ping = :timer.tc(fn -> run_ping() end) run_ping_async = :timer.tc(fn -> run_ping_async() end) run_ping |> IO.inspect()
TensorFlow.js ブラウザで画像ファイルからのオブジェクト検出するゲーム。 - Qiita
画像ファイルをローカルPCから選択してオブジェクト検出を行うコードです。TensorFlow.jsのCOCO-SSDモデルを使用して、ファイル選択後に画像内のオブジェクトを検出します。 ブラウザページ再読み込みで別画像でオブジェクト検出できます。 (ページ下部にボタンあります。) <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Object Detection with TensorFlow.js (Image File)</title> <style> canvas { border: 1px solid black; margin-top: 20px; }
Introduction ここにあるように、Anthropic社がClaude APIに対してCORSサポートを追加しました。 これによってブラウザから直接Anthropicのモデルを呼び出すことができるようになってます。 ちょっと前にPGliteというWASM版PostgreSQLもリリースされました。 これはpgvector(Postgres用のvector類似性検索)などの拡張機能も使えます。 今回はこれらを使用してクライアントサイドのみでVector検索とClaude apiを使って RAGをやってみます。 Claude API with CORS Claude APIがCORSサポートされたことで、 クライアントサイドから直接Claude APIが呼び出せるようになります。 いままではサーバを立ててそこを経由してAPIを呼び出す必要がありましたが、それも必要ありません。 しかし、
こんばんは、リテールアプリ共創部のmorimorikochanです。 Promise.all()を扱ったコードを書いていて、注意しないといけない点を改めて思い出したので、せっかくなのでブログにしたいと思います。 エラーログが一部しか出力されない...? みなさんがよくJavascriptやTypeScriptで並行処理を行いたい場合、Promise.all()を利用する場面があると思います。 例えばバッチ処理を実行する際に、以下のように各種ファイルをチェックするようなケースです。 const [hoge, fuga, piyo] = await Promise.all([ validateHoge(), validateFuga(), validatePiyo(), ]) const validateHoge = () => { // この中でチェックに失敗したら`console.erro
Server Actionで状態遷移するベストプラクティスが知りたい フォーム入力 データベース更新 画面更新 というよくある黄金シナリオを考えます。 NextJSはSSR Frameworkなので可能な限りServer Componentを利用することを推奨しています。しかしServer ComponentではHooksが使えません。 これまでのようにAPIを叩く→State更新→画面再レンダリングという黄金のパターンは使えなくなります[1]。そこでhooksに頼らずにデータの更新と再レンダリングを行う新しいNextJSのメンタルモデルに適応する必要があります。 公式ドキュメントでおすすめされる１つの方法はServer Actionを使うことです。今日はこのあたりのベストプラクティスについて備忘録としてまとめます。 Server Action Server Actionとはサーバーサイド
はじめに React学習の集大成として、AIから返信がもらえる感謝日記アプリを個人開発しました。 0から1を生み出す過程は挑戦の連続でしたが、同時に多くの気づきと学びをもたらしてくれました。今回の開発経験で得た苦労や喜び、そして学びを共有したいと思います。 どうしてこのアプリを作成しようと思ったかの理由はこちらの記事で詳しく説明をしています。 よかったら見てみてください！ 完成したアプリ デモ 概要 その日に感謝できることを3つ入力するとAIから返信をもらえて、続けていくうちに幸福度を上げていくアプリ 使用している技術スタック - 環境 vite: 5.3.4 firebase: 10.12.5 - 言語 typescript: 5.2.2 - ライブラリ react: 18.3.1 react-hook-form: 7.52.2 react-router-dom: 6.26.0 axio
MapKitのルート検索APIを全部見る
APIを全部見るモチベーション 「iOSでルート検索」といったらまずは標準であるMapKitの MKDirections が思い浮かぶ。ざっくりこんな感じで使う： let request = MKDirections.Request() request.source = MKMapItem(placemark: source) request.destination = MKMapItem(placemark: destination) let directions = MKDirections(request: request) let response = try await directions.calculate() 始点（source）と終点（destination）を決めてルート検索、基本的にこの使い方になる。経由地の指定もできない。 で、MapKit のルート検索（MKDir
チームにテストコードを書く文化を定着させる - Qiita
この記事は？ 皆さんお久しぶりです。@cosmeの開発エンジニアをしております、村田です。@cosmeを運営する株式会社アイスタイルではPHP -> TypeScriptへの技術移行を進めており、フレームワークとしてはexpress, oclif, そして本記事で紹介するJavaScript製のテスティングフレームワークであるjestなどの各種ツールを使って開発を進めています。 この記事で紹介する内容は、チームでテストコードを書く文化を定着していく話です。というのも、既存プロダクトにて元々テストコードが十分に書かれていない部分があったため、リプレース後のサービスではしっかりとテストを書いていこう、ということでチームで一致団結しました。今まではテスト記述に対する基準は開発者によって任されていたところ、私の担当しているバックエンドのプロジェクトでは、テスト記述の優先度を高くしてリリース基準とし
GPT-2: ショートストーリー: 「数値からaiへ」数値のaiは、aiが人間に与える影響を数値で表し、数値がaiに与えている影響の量と、人間のaiの数値との差をaiによって表します。 数値はaiが行う数値計算のアルゴリズムによって、人間が計算した数値を、人間が行う計算方法によって計算しますが、この数値を計算するアルゴリズムは「数値」と「ai」の2種類があります。 「aiによる数値処理」は、「数値による計算」に比べて、精度が格段に向上しています。 例えば、ある数値にaiが行った数値の結果を「計算結果」として表示しますと、「計算結果は、計算式によって数値として表されます。」というように GPT-4: ショートストーリー: 「数値からAIへ」 東京の夜が深まるころ、都会の喧騒から少し離れた小さなアパートメントの一室で、田中健一はパソコンの前に集中していた。彼は熱心なプログラマーで、物理シミュレ
FastAPIを利用したことはあるものの、fastapi-usersを使ったことがなかったため、トークン認証と多要素認証（MFA）の実装してみました。fastapi-usersを利用すると、ユーザー認証や管理が簡単に実装できるようなので、どのように動作するのかも含め検証してみました。 前提（Docker環境） Python: 3.9.2 pip3: 24.2 fastapi: 0.112.0 fastapi-users: 13.0.0 SQLAlchemy: 2.0.32 1. React/FastAPIコード 今回はGithubにアップ済みのコードを使って進めたいと思います。 sample code 2. ディレクトリ構成 GitHubに登録されているSourceコードは以下の通りです。 . └── SecureAuthSite/ ├── api/ │ ├── main.py # Fas
Next.js Server Only機能
サーバーサイドのみの実行 Next.js 14 では、サーバー上でのみ実行すべきコードに import 'server-only'; とマークすることができます。これにより、クライアントコンポーネントがこのモジュールをインポートしようとすると、ビルドエラーが発生します。 この機能は、機密コードや内部ビジネスロジックをクライアントに誤って漏洩させないようにするのに役立ちます。 使用例: 機密APIキーや顧客データの処理ロジックをサーバーサイドのみで実行したい場合など。 // server.js import 'server-only'; import secretKey from './secrets'; export function fetchData() { // secretKeyを使ってデータを取得 } データのクライアントへの渡し方 データをクライアントに渡す主な方法は、Prop
以前 React Hook Form を無理やり Server Action に落とし込む という記事を書いたのですが。 最近 Conform というパッケージが Server Action へ対応しており、こっちを使おうみたいな記事がちらほら見受けられます。 とはいえ React Hook Form の書きっぷりと比べると結構イマイチな書きっぷりが多く、移行するのやだなーと思っていまして。 改めて React Hook Form で Server Action に繋げる方法はないかと探したところ、公式 に思いっきり記載がありました。 現在ベータ版とのことですが、結構開発も進んでいるっぽく、それならばと思い本サイトのコンタクトフォームで組んでみたところ、あっさり動いてくれました。 React Hook Form は公式ドキュメントがかなり丁寧に書かれているので、今更ここに書くようなこともな
はじめに 皆さんは日々の業務でAIを利活用しておりますでしょうか。 生成AIの進化は凄まじく、プログラミングの経験が浅い人でも、簡単なアプリケーションくらいなら作れてしまうほどです。すごい時代ですよね。 私自身、要件定義は自身で行い、コーディングはAIに任せるような場面も多いです。 しかし、生成AIを扱う上で常に意識すべきことは、「AIは常に完璧ではない」ということです。 AIの精度は日々進化を続けていますが、それでもハルシネーションが完全に改善できているわけではありません。 ハルシネーションとは？ ハルシネーション（Hallucination）とはもともと「幻覚、幻影」という意味です。 生成AIがユーザーの質問に対して、事実とは異なる情報を利用して回答を生成することを指し、「もっともらしいうそ」といった意味合いで、こう呼ばれるようになりました。 そのため、AIが生成したコードをそのまま使
iOSアプリのSWIFT_STRICT_CONCURRENCYをcompleteにした - Gunosy Tech Blog
こんにちは。iOSアプリを開発している吉岡(rikusouda)です。 この記事は Gunosy Advent Calendar 2023 の 15 日目の記事です。昨日の記事はfujishiroさんの「tfaction を導入したら便利だった話」でした。 業務で開発している「auサービスToday」のiOSアプリでSwift Concurrencyを全面的に導入し、SWIFT_STRICT_CONCURRENCYをcompleteにすることができたのでその内容について紹介します。 概要 いわゆるUseCaseやRepositoryをactor化 DispatchQueue.asyncによる非同期処理を廃止 単発処理で完了待ちが必要なケース asyncAfterで遅延実行するケース 複数の処理を同じスレッドで処理させたいとき nonisolated が要求されるDelegateメソッドの対
DiceCTF 2024 Finals参加記 & writeup (Web編) - ラック・セキュリティごった煮ブログ
こんにちは、デジタルペンテスト部(DP部)のst98です。 2024年6月29日(土)から2024年6月30日(日)にかけて、アメリカ・ニューヨークで開催されたCTF大会であるDiceCTF 2024 Finalsに、チームBunkyoWesternsのメンバーとして同じくDP部の今井と参加してきました。全世界から1,000チーム以上が参加した予選大会を勝ち抜いて、12チームが決勝大会に参加しましたが、この中でBunkyoWesternsは世界4位という成績を収めました。 www.lac.co.jp 本記事では、DiceCTF 2024 Finalsがどのような大会であったかをお伝えした後に、メンバーが実際に挑戦していた問題について詳細に解説していきます。なお、今回はst98が担当していた、主にWebがテーマの問題について紹介します。今井が担当した問題の解説記事も、後日公開予定です。 競技
ここ最近ずっとRAGやLangChainと格闘しています。DevRelとしての仕事で、仕事に関係するOSSやサンプルなどのコードを読んだり参照したりすることが少なく無い頻度であるのですが、RAGで効率化できないかというところが、そこに力を入れている理由の一つです。 プログラムコードを参照したRAGアプリ LangChainのドキュメントにいつからか「RAG over code」が追加されています。ざっと読んだ感じでは、「プログラムコードをEmbeddingすることで、コードに関する質問などに対応できるRAGを作れる」ものという理解をしています。 どこまでの質問に答えれるのか。例えばIssueが投稿されたときに、そこから自動で回答またはPull Requestを出せるレベルなのかや、作ったOSSを紹介するサイトを自動生成できるのか、みたいな部分を評価するため、触ってみました。 GitHubリ
小さなGPUでの算法術。忘れ物をしたマリオをルイージが追いかける。スプラインの類似度計算をTensorFlow.jsを用いてGPUで高速にマリオの軌道予測並列計算。 - Qiita
小さなGPUでの算法術。忘れ物をしたマリオをルイージが追いかける。スプラインの類似度計算をTensorFlow.jsを用いてGPUで高速にマリオの軌道予測並列計算。PythonJavaScript初心者ポエムChatGPT 衝突の理 東京の小さなオフィスビルの一角、青白い蛍光灯の下でキーボードのクリック音が響く。夜遅くまで働くのが日常のプログラマー、山田達也は、深夜のカフェインに頼りながらコードと向き合っていた。彼は、かつて子供時代に夢中になったゲーム「スーパーマリオブラザーズ」の新しいプログラムに取り組んでいた。 プロジェクトのテーマは「忘れ物をしたマリオをルイージが追いかける」というシンプルなものだが、その背後には高度な計算と物理法則が隠されていた。山田は、マリオがジャンプし、走り、そしてピーチ姫を救うために次々と冒険を繰り広げる中で、彼の軌道を正確に予測するアルゴリズムを考案していた
script - Qiita
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>動的タイトル設定</title> </head> <body> <h1>動的タイトル設定のテスト</h1> <p id="output">URLパラメータを確認中...</p> <script> // ハッシュフラグメントからパラメータを取得する関数 function getHashParameter(name) { const hash = window.location.hash; // ハッシュ部分を取得 const params = new URLSearchParams(hash.substring(h
想定読者 Flutterを使ってBluetooth接続(BLE接続のみ)できるアプリを作りたい方 Bluetooth接続の古い接続規格Bluetooth classicには対応していません。 同じくBluetooth接続できるアプリを作ったけど、再接続の際のループ処理でバッテリー消費が激しくて困っている方 結論 最初に結論を話ししておくと、次の通りです。 バッテリー消費 →1時間あたり48%→7~8%に抑えた。これが限界... iOSでアプリがバックグラウンド状態の時に定期的に処理を実行したい →未解決。できたら記事を更新予定。 概要 自動接続方法 バッテリー消費を抑えた方法 バックグラウンドでも定期的に処理を実行する方法（※実装中） 使用したツールやパッケージ flutter_ble_plus Flutter 3.19.5, Dart 3.3.3 実装 コード全体 // 同じペリフェラル
8/22 に Cloud Functions の Cloud Run functions へのリブランディングが発表されましたね！都合よく、Cloud Functinos の第一世代を使った簡単な定期実行ジョブがあったので Cloud Run functions に移行してみようと思います。 また、最速でこちらの記事が詳細を説明してくださっています。非常にありがたいです。 移行自体簡単にできるかと思っていましたが、「ただリブランディングされて Cloud Run の特徴を追加で利用できるようになった」 と認識していた私は恥ずかしながらドツボにハマりました。前半はコンソールでの Cloud Run functions のデプロイ、後半はデプロイ後にハマりまくったポイントについてまとめています。 結論を先にお伝えしておくと、「Cloud Run functions は Cloud Run Se
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CompressionStream でブラウザで gzip 圧縮する
アクセシビリティが考慮された React Aria のドラッグアンドドロップ
Greppability is an underrated code metric
React 19の新機能まとめ — サーバーコンポーネントは全フロントエンドエンジニア必見
JSrb - ruby.wasm の JS を Ruby ぽく使えるようにする - tmtms のメモ
Deno Deploy で無料画像最適化(avif対応)
Release v9.0.0 · faker-js/faker
Configuring: Progressive Web Applications (PWA) | Next.js
デバッグしやすい書き方が掴めてきた気がする - Qiita
Next13でNextAuthを使いつつログインフォームを作ってみた
Swift ~Copyableの導入 - every Tech Blog
RubyからJavaScriptコードを実行する方法 - kickflow Tech Blog
JavaScript を使用して PDF のデジタル署名を検証する方法
SlackへのChatGPTのBotの導入について | Hakky Handbook
非同期でSystem.cmdを使ってping砲 - Qiita
PGliteとClaude APIをつかってクライアントだけでRAGする | DevelopersIO
`Prmose.all()`だと全てのプロミスが完了するのを待つことはできない件 | DevelopersIO
Loading.tsxはServer Action中に待機画面を表示しない【NextJS】
【未経験2週間】感謝で幸福度を上げる日記アプリをリリースしました【個人開発】 - Qiita
小さなGPUでのエンジニアリング。数値シミュレーションからAIへ。 - Qiita
fastapi-usersでJWT認証 + MFAを使ったログイン実装 - Qiita
Conformを使う？React Hook Formでいけるかもよ - kk-web
生成AIを信用しすぎてハルシネーションに引っかかった話 - Qiita
LangChainを利用して、GitHubリポジトリの情報からRAGを作る | WP-kyoto
FlutterでBluetooth接続できるアプリを作ってみた - Qiita
Cloud Functions から Cloud Run functions に移行してみたら学びが深かった話