はじめに フロントエンドもバックエンドもTypescriptで書きたい！ということで、T3 Stack（T3スタック）について調べてみました。 T3 Stackを利用したプロジェクトを作成するためのCLIツールcreate-t3-appが用意されており、簡単に雛形プロジェクトが作れるため、実際に使ってみました。 この記事は以下の内容をメインに紹介します。 create-t3-appの環境構築手順 雛形プロジェクトの解説（特にtRPCを用いたAPIの呼び出し方法について） T3 Stackとは T3 Stackとはsimplicity（簡潔さ）、modularity（モジュール性）、full-stack type safety（フルスタックの型安全）を追求した思想に焦点を当てています。 そしてそれらを実現するために以下6つの技術スタックが採用されています。 ✅ Next.js ✅ tRPC

個人的に「Webサービスの公開前チェックリスト」を作っていたのですが、けっこう育ってきたので公開します。このリストは、過去に自分がミスしたときや、情報収集する中で「明日は我が身…」と思ったときなどに個人的にメモしてきたものをまとめた内容になります。 セキュリティ 認証に関わるCookieの属性 HttpOnly属性が設定されていること XSSの緩和策 SameSite属性がLaxもしくはStrictになっていること 主にCSRF対策のため。Laxの場合、GETリクエストで更新処理を行っているエンドポイントがないか合わせて確認 Secure属性が設定されていること HTTPS通信でのみCookieが送られるように Domain属性が適切に設定されていること サブドメインにもCookieが送られる設定の場合、他のサブドメインのサイトに脆弱性があるとそこからインシデントに繋がるリスクを理解してお

Intro CSRF という古の攻撃がある。この攻撃を「古(いにしえ)」のものにすることができたプラットフォームの進化の背景を、「Cookie が SameSite Lax by Default になったからだ」という解説を見ることがある。 確かに、現実的にそれによって攻撃の成立は難しくなり、救われているサービスもある。しかし、それはプラットフォームが用意した対策の本質から言うと、解釈が少しずれていると言えるだろう。 今回は、「CSRF がどうして成立していたのか」を振り返ることで、本当にプラットフォームに足りていなかったものと、それを補っていった経緯、本当にすべき対策は何であるかを解説していく。 結果として見えてくるのは、今サービスを実装する上での「ベース」(not ベスト)となるプラクティスだと筆者は考えている。 CSRF 成立の条件 例えば、攻撃者が用意した attack.examp

はじめに この記事は、同人誌サークル「めもおきば」から不定期刊行している技術解説本「めもおきばTecReport」に書いたものを公開用に再編集したものです。 ⇒ めもおきばTecReport 2023.12 この記事のほかにも「私もSecHack365に参加したい！」や、「2023年振り返りと2024年技術予想」としてこんなキーワードを取り上げているので、気になったらぽちっとしてください！ メガクラウドと特化型クラウド／ハイパーバイザーのSoC化／ライセンスとクラウドベンダー／イベント駆動型API／LLM時代のAIペアプロ力／生活必需品としてのGPU・NPU／Passkey／ウェブアクセシビリティ／リアルイベントの再開 サーバーレスの次はなんなんだ サーバーレスと呼ばれる技術ムーブメントが盛り上がり始めて8年近くが経ちました。各クラウドベンダーのFaaS（Function-as-a-Ser

PHPerKaigi 2024 • Day 1での登壇資料です。 https://phperkaigi.jp/2024/ https://fortee.jp/phperkaigi-2024/proposal/0d0f8507-0a53-46f6-bca6-23386d78f17f ※ Authorizationヘッダーを利用したBearerトークン等の活用については言及していません。

はじめに以下のオープンなプロジェクトの一環で､大規模言語モデルをフルスクラッチで作る練習をします｡24年3月現在､協力者も募集中です｡ リポジトリ当該プロジェクトの標準コードが公開※されたので､それを走らせてみます｡ ※24/3/5時点で､まだレポジトリ内に､工事中の箇所が多々､あります｡ このリポ上では､事前学習ー事後学習ー評価まで､一気通貫(?)したパイプラインが提供されています※｡ 0. 環境構築プロジェクトの本番環境はクラウドですが､今回は手持ちのubuntuを使います｡ Dockerはお手軽な一方で､スパコン上で使うと､どうやら速度が落ちるらしいとの噂を聞いたので､condaで作ります(とはいえ､pipしか使わないので､pyenvでもいけると思います)｡ 必要なマシン適当なlinux: 例えばUbuntu 22.04.3 LTS GPU: 20 GBくらいは欲しいかも? ディスク

はじめに まず↓の記事を見てない方はぜひ見てください！ 自分にとってはこの記事には「えっ、ナニコレ！」なテクニックが多く、特に解説もなかったのでいろいろ調べてたら休日が消えてました... なのでその時間の供養もかねて、自分が知らなかった部分を中心に、僭越ながら元記事の解説を書いてみたいと思います。 ちなみに、以下が元記事のコードそのままを実装したものです。たしかに掲載コードだけで要素がグリグリ動きますね。 See the Pen js-drag-move-original by www-tacos (@www-tacos) on CodePen. 初耳1: $img まずコードのここ <img id="$img" src="https://js.cx/clipart/ball.svg" width="40" height="40"> <script> $img.onpointermove

今回は、最新の Google Gemma モデルを Apple Silicon に最適化されたライブラリ MLX を使ってローカルで実行したり、ファインチューニングしてみましたのでその手順を紹介します。 MLX 関連の情報はドキュメンテーションが分かりづらいものも多かったので色々試した経緯も共有しながら少しでも何かの参考になれば幸いです。 実際に使った Jupyter Notebook を Gist にアップロードしていますので、そちらも参考にしてください。 →Google Gemma モデルを MLX を使ってローカルでファインチューニング 事前準備必要なライブラリをインストールします。 また Apple Silicon 搭載の Mac が必要です。今回は M3 Max 128GB 搭載の MacBook Pro で実行しました。 !pip install -U mlx mlx_lm t

要素をドラッグして移動することは、JavaScriptにおいて頻出パターンです。 しかし、それを簡単に実現するコードは意外と知られていません。 <img id="$img" src="https://js.cx/clipart/ball.svg" width="40" height="40"> <script> $img.onpointermove = function(event){ if(event.buttons){ this.style.left = this.offsetLeft + event.movementX + 'px' this.style.top = this.offsetTop + event.movementY + 'px' this.style.position = 'absolute' this.draggable = false this.setPointe

こんにちは。わいけいです。 今回の記事では、生成AI界隈ではかなり浸透している RAG について改めて解説していきます。 「低予算で言語モデルを使ったアプリを開発したい」というときに真っ先に選択肢に上がるRAGですが、私自身もRAGを使ったアプリケーションの実装を業務の中で何度も行ってきました。 今回はその知見をシェア出来れば幸いです。 RAG（Retrieval-Augmented Generation)とは まず、 そもそもRAGとは何ぞや？ というところから見ていきましょう。 RAG（Retrieval-Augmented Generation) は自然言語処理（NLP）と特に言語モデルの開発において使用される技術です。 この技術は、大規模な言語モデルが生成するテキストの品質と関連性を向上させるために、外部の情報源からの情報を取得（retrieval）して利用します。 要は、Chat

こんにちは！株式会社 ABEJA で ABEJA Platform 開発を行っている坂井（GitHub : @Yagami360）です。 LangChain を使用すれば、RAG [Retrieval Augment Generation] を使用した LLM アプリケーションを簡単に作成できるので便利ですよね。 今回 LangChain での RAG を使用して、LLM が学習に使用していない特定ドメインでの用語を応答する Slack ボットをさくっと作ってみたので共有します。 本コード一式は、以下の GitHub レポジトリに保管しています。 github.com 使い方 コード解説 アーキテクチャ RAG の仕組み ヒューマンインザループによる継続的品質改善 まとめ We Are Hiring! 使い方 事前準備として｛用語集スプレッドシートの作成・Slack アプリの初期設定・各種

はじめに 新規事業部 生成AIチーム 山本です。 ChatGPT（OpenAI API）をはじめとしたAIの言語モデル（Large Language Model：以下、LLM）を使用して、チャットボットを構築するケースが増えています。通常、LLMが学習したときのデータに含まれている内容以外に関する質問には回答ができません。そのため、例えば社内システムに関するチャットボットを作成しようとしても、素のLLMでは質問に対してわからないという回答や異なる知識に基づいた回答が（当然ながら）得られてしまいます。 この問題を解決する方法として、Retrieval Augmented Generation（以下、RAG）という手法がよく使用されます。RAGでは、ユーザからの質問に回答するために必要そうな内容が書かれた文章を検索し、その文章をLLMへの入力（プロンプト）に付け加えて渡すことで、ユーザが欲しい

この記事の内容 WordPressで作成したコンテンツを静的にホスティングする設計まとめ ハンズオンを兼ねた事例報告（+自分の所感）の流れで執筆 背景 そもそもなぜタイトルのような設計を考えたのかというと、先日アサインされたプロジェクトの要件が以下のとおりだったからです。 誰でも簡単にコンテンツを作成できる セキュアな設計 ここで、WordPressには以下の長所があります。 技術に明るくない人であっても簡単にコンテンツを作成できる 裏はPHPで動いているので拡張性が非常に高い 初期導入に必要となるコストが少ないこと ただし、ご存知の通りWordPressの欠点として大きなものが以下です。 脆弱性が多く十分な対策を要求される 上記を鑑みて、WordPressの長所を余すことなく享受し欠点を最大限カバーすることができるようになる「WordPressを静的コンテンツで配信」を目標に構築を行いま

はじめまして、CyberAgent AI Lab　Intaractive Agentチームの技術研究員の大平といいます。 この記事は CyberAgent Developers Advent Calendar 2023 1日目の記事です。 ChatGPTの登場以降、自然なチャット対話はAPI呼び出しだけで簡単に実装できるようになりました。 更に人間のようなインタラクションを実現しようとすれば、音声対話に発展させたいと思う方も多いかと思われます。 しかし実際にLLMを使って音声対話システムを構築してみると、そのレスポンスの遅さに不満を感じることになります。 この記事ではよくあるシンプルなLLMを用いた音声対話に対していくつかの工夫を施し、その応答速度をできるだけ早めてみようという試みになります。 よくある構成として、以下を用います。 音声認識　Google STT LLM　ChatGPT 3

症状検索エンジン「ユビー」 では、ローンチ当初から Firebase Auth (GCP Identity Platform) を使っていましたが、OIDCに準拠した内製の認証認可基盤に移行しました。 認証認可基盤そのものは m_mizutani と nerocrux と toshi0607(退職済) が作ってくれたため、僕は移行のみを担当しました。 結果として、強制ログアウトなし・無停止でビジネス影響を出さずに、年間1000万円以上のコスト削減に成功しました[1]。その移行プロセスについて紹介します。認証認可基盤そのものの紹介はあまりしません。 移行した理由 大量の匿名アカウント ユビーでは、アクセスした全ユーザーに対して自動的に匿名アカウントを発行しています。これにより、ユーザーがアカウント登録しているかどうかに関わらず、同じID体系で透過的に履歴情報等を扱うことができます。アカウント

ゴールデンウィークのはじめ（4月29日）に投稿された以下のツイートですが、5月7日20時において、1,938.8万件の表示ということで、非常に注目されていることが分かります。 我が名はアシタカ！スタバのFreeWi-Fiを使いながら会社の機密情報を扱う仕事をしてたら全部抜かれた。どうすればよい！ pic.twitter.com/e26L1Bj32Z — スタバでMacを開くエンジニア (@MacopeninSUTABA) April 29, 2023 これに対して、私は以下のようにツイートしましたが、 これ入社試験の問題にしようかな。『スタバのFreeWi-Fiを使いながら会社の機密情報を扱う仕事をしてたら全部抜かれた』と言う事象に至る現実的にありえる脅威を説明せよ。結構難しいと思いますよ。 https://t.co/LH21zphCTV — 徳丸 浩 (@ockeghem) April

こちらはエムスリー Advent Calendar 2023の22日目の記事です。 こんにちは、エムスリーエンジニアリンググループ、デジスマ診療チームの山本 (id:shunyy) です。 医療機関向けSaaSであるデジスマ診療は、開発開始からちょうど3年が経ち、現在では予約・問診等、多様な機能を提供していますがリリース当初は決済機能のみを提供していました。そんなデジスマのコア機能である決済機能はStripe Connectを利用しており、今回は3年間運用した学びを共有したいと思います。 デジスマ診療のプロダクトの内容は以下のスライドを御覧ください。 speakerdeck.com そもそもStripe Connectとは何なのか Stripe Connectのアカウントタイプ・支払いタイプについて デジスマ診療の全体構成 追加開発事例 Amazon AppFlowを利用したBigQuer

今までJavaScriptを使用しないと実装できなったことが、CSSだけで実装できるようになったものが増えてきました。たとえば、表示・非表示をdisplayプロパティでアニメーションできるようになったり、スクロールをトリガーにしたアニメーションなど、新機能が登場しました。 今回紹介するのは、height: 0;からheight: auto;へのトランジションです。高さが固定値であれば簡単にアニメーションできますが、コンテンツ量が不明で成り行きの場合はJavaScriptで高さを取得する必要がありました。 height: 0;からheight: auto;へのトランジションをCSSで実装する方法を紹介します。元記事を読んで、CSS Gridをここで使用するのか！ と驚きました。 🧙‍♂️ CSS trick: transition from height 0 to auto! by Fra

株式会社ログラスの生成AI/LLMチームの松岡(@little_hand_s)です。 GPTs、話題ですね！！使ってますか？(GPTsとは、ChatGPTの機能をカスタマイズして、目的に合わせたツールを自由に作成できる機能です) そして、もうすぐアドベントカレンダーの時期ですね、ブログを書く予定はありますか？ ブログを書くのって、結構気合がいりますよね。 あれって、文字列を書くこと自体とよりも、 何を書くか どういう切り口の記事にするか どういう構成にするか といったことにに脳のエネルギーを使うんですよね。 逆にいうと、これらのステップをクリアすれば、ブログ執筆のハードルはぐっと下がります。 そこで今回、GPTが執筆者にインタビューをしてくれて、それに応じるだけでブログの構成がどんどん決まっていくような執筆アシスタントGPTを作ってみたのです。 そしてもちろん、この記事も執筆アシスタントG

Amazon Bedrock を利用して生成 AI でなにができるのか？を体験できる AWS のワークショップをやってみた re:Invent 2023 で開催予定の Game Day の 1 つに「Amazon Bedrock: Building with Generative AI」があります。私はこちらのイベント参加予定なのですが Amazon Bedrock を触ったことがありません。現地で焦る前に最低限のことを把握するべくAWS が提供している「生成系 AI 体験ワークショップ」をやってみました。 生成系 AI 体験ワークショップ 以下の環境を構築し、文章を校正してもらったり画像生成したりしました。 画像引用: 生成系 AI 体験ワークショップ ワークショップで学べること Amazon Bedrock を利用して ChatGPT の様なチャット機能や、画像生成を Web UI を