Magic UIUI library for Design Engineers20+ free and open-source animated components built with React, Typescript, Tailwind CSS, and Framer Motion. 100% open-source, and customizable.
Zodスキーマでプロンプト生成を行い構造化データを自由自在に扱えて、LLMプロダクト開発が圧倒的に効率化した話 - Algomatic Tech Blog
最近はAIエンジニアを名乗ってるerukitiです。フロントエンドもバックエンドも、LLMを触るあれこれもやってるので、「AIエンジニア」くらいを名乗るとちょうどよさそうだなと思ってます。いずれLLM自体の開発なんかもやってるかもしれません。 LLMプロダクトを開発していると、構造化データを作りたいのに、Anthropic ClaudeのAPIにはJSONモードが無いことや、なんならJSONモードやfunction callingを使っても、データが正しい形式に従ってることは保証しがたい、みたいな自体に遭遇することがあります。 JSONが出力できたとしても、構造化データをうまく吐き出させるのは難しいものです。文字列を出力させたいけど、複数あるときは、配列なのか、それともカンマ区切りなのか？項目がオプショナルの場合はどうするか？項目が存在しない、空文字や 0 や undefined や nu
SendGridをCloud Functionsで使ってみた
SendGridとCloud Functions for Firebaseでメールの自動送信を作ってみました。 はじめにバックエンドの藤岡です。 今回はSendGridという簡単にメールを送れるサービスを使ってみたので、基本的な使い方をまとめてみようと思います。SendGrid自体は様々な言語や使用形態があるそうですが、今回はCloud Functions for Firebase上でNode.jsとして使っていきます。 前提知識Cloud Functionsの基礎知識Firestoreの基礎知識TypeScriptの基礎知識前提条件Firestore、Cloud Functionsが環境構築してあるSendGridのアカウントを作成して、API Keyを作成してある全体の流れ今回は「送信完了メール」を想定して、ユーザーがFirestoreにドキュメントを追加したことを感知して、そのユーザ
FirebaseのAuthenticationのメールアドレス確認の文章を変更する方法
できるようになること メールアドレス確認のテンプレートを使用せず、文章を変更できるようになります 環境 Amazon Simple Email Service(Sendgridでも可) FirebaseCloudFunctions 大まかな流れ createUserWithEmailAndPassword して、auth.user を firebase に作成する cloud functions で auth.user が作成された時に、メールアドレス確認リンクを作成する メール文章にリンクを載せて、メール配信サービスを使って送信する コード 1. createUserWithEmailAndPassword して、auth.user を firebase に作成する firebase.auth().createUserWithEmailAndPassword(email, passwor
株式会社リクルート エンジニアコース新人研修の内容を公開します！（2023年度版） | Recruit Tech Blog
こんにちは！ 2023年度エンジニア新卒の、吉田です。 株式会社リクルート 新卒エンジニアコースでは、部署への配属前に、BootCampと呼ばれる新人研修を行っています。 本日は2023年度の研修の内容を、実際に受講した新卒の立場から紹介させていただきます。 研修の内容については毎年反響をいただいていますが、今年度も一段と進化し、より充実した研修でした。 ページ下部に研修資料を公開していますので、ぜひ研修の雰囲気を感じ取っていただけると嬉しいです。 研修の概要 エンジニアコースの新人研修は、配属後にスピード感を持って成長できるようになることを見据え、 「さまざまな技術領域の講座を受け、興味関心を広げて、知らなかった好奇心に出会う」 「現場で求められる『仕事への取り組みスタンス』をつかむ」 「気軽に相談できる仲間（同期）をつくる」 の３点が目的とされています。 今年度は、入社前に行われたスキ
AI半導体の未来、NPU - 株式会社アドテック
世界的に1日に新たに生産されるデータ量は2020年で約40ZB（ゼータバイト）を達成し2025年にはその4倍の約160ZBのデータが発生するといわれております。 これは64GBモデルのiPhoneが約6200億台分を合わせた容量で、既存のコンピューター技術では短時間内に処理できないほど明らかに大量です。 このような大量のデータの中から有効な情報を抽出するために開発されたのが‘ディープラーニング’技術です。 (出典)総務省 従来のマシンラーニングでは、開発者が学習しようとするデータのさまざまな特徴を直接分析し、機械に入力していました。 しかし、ディープラーニングでは人間の脳のように複数のニューラルネットワークから機械が自動的に特徴を抽出して学習します。 各ニューロンは、前の層からの入力値とフィルタに重みを掛けて、合算した出力値を次の層に移します。 つまり、ディープラーニング の実行には畳み込
Deep Paint -Blender 3D Paint tool Set
Deep Paint v1.0.3Deep Paint Addon is the user friendly Blender tool set allows you to model and paint in 3D, using Grease Pencil to create stylized 3D illustrations. Requirement: Blender 3.6 + GPL licenseディープペイント はBlenderのアドオンです。グリースペンシルを使ってモデリングやペイントをし、３Dイラスト、立体絵画を簡単に制作するワークフローが可能なツールセットです。 Documentation https://gakutada.com/dp-en/ 日本語解説書 https://gakutada.com/DP/ Initial setup for lighting 初期設定 E
Deep Paint v1.0 - GAKU氏によるGrease Pencilを活用した3Dイラスト・立体絵画制作支援ツールセットBlenderアドオンが遂にリリース！
Blender アドオン プラグイン＆アドオン-Plugin&Addon ICity 1.0 Beta - 区画設計から道路生成！プロシージャルビル生成！... 2024-05-21 テクニカルアーティストのHothifa Smair氏によるBlender用の都市生成アドオン『ICity 1.0』のベータ版がリリースされました！ 続きを読む Blender アドオン プラグイン＆アドオン-Plugin&Addon NijiGPen v0.9 - Grease Pencilでのグラフィックデザイ... 2024-05-20 Chaosinism氏によるGrease Pencilでのグラフィックデザインやイラスト制作を支援する機能拡張が可能な無料＆オープンソースのBlenderアドオン『NijiGPen v0.9』がリリースされました！ 続きを読む
令和のHTML / CSS / JavaScriptの書き方50選
Web制作の技術は日々進化しており、会社やプロジェクトによっては昨今の環境に適さない書き方をしているケースも時折見受けられます。 そこで今回は「2024年のWeb制作ではこのようにコードを書いてほしい！」という内容をまとめました。 質より量で、まずは「こんな書き方があるんだ」をこの記事で伝えたかったので、コードの詳細はあまり解説していません。なので、具体的な仕様などを確認したい方は参考記事を読んだりご自身で調べていただけると幸いです。 1. HTML 画像周りはサイトパフォーマンスに直結するので、まずはそこだけでも取り入れていただきたいです。また、コアウェブバイタルやアクセシビリティも併せて理解しておきたい内容です。 Lazy loading <img>にloading="lazy"属性を付けると画像が遅延読み込みになり、サイトの読み込み時間が早くなります。
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でデザインされてるようです。 サンプルとはいえ、実装方法で参考になった箇所が結構あったのでそこも気に入ってるポイ
ハードウェアを動かすTypeScriptの世界
TypeScriptはIoTの領域でも使われており、様々なハードウェアと連動させて動かすことができます。 Webブラウザ経由でBluetoothを制御したり、スマートフォンの加速度センサで動きをセンシングしたりなど、ディスプレイの外側の現実世界と連動させることもやりやすい時代になりました。 選択肢が増えた分、「やりたいこと」に対して「どれを使うのが適切なのか」「将来的な拡張性があるのはどれか」などの選定が難しくなってきています。 本発表では、みんな大好きラズベリーパイから、Microsoftが出したDeviceScriptや、組み込みマイコンをどうやってTypeScriptで制御する際の選択肢など、IoT/ハードウェアにおけるTypeScriptの選択肢とそれぞれの違い、および実際に使う際に気をつけないといけない点などについてお話いたします。
LLM時代のX情報収集術｜べいえりあ
AI for Everyoneについては日本語版もあるのと、どちらのコースも日本語字幕付きで見られる（多分機械翻訳での英語字幕からの翻訳だが、翻訳の質は悪くない）ので、英語分からなくてある程度何とかなるんじゃないかと思います。 あと、余力のある人、最新のNLP研究を理解したい人はこちらの本を読むことをオススメします。アルゴリズムの詳細は必ずしも理解しなくても良いですが、どんなタスクがあるのかは理解しておいた方が良いかと思います。 NLPの知識がLLMを応用する上で実際にどう役に立つかですが、例えばで言うとNLP的には対話の中には「タスク指向型対話（task-oriented dialogue）」と「雑談（chit-chat dialogue）」があります。それぞれ対話の中で重要視されるものから評価の仕方まで全然違うのですが、NLPをやらずにLLMをやっている人と話しているとこれらをごっちゃ
Stripe決済開発で必要なアカウント申請内容と必要書類 - Qiita
はじめに StripeCheckout を使用した決済機能開発時に、テスト用トークン発行まではすぐできるものの、本番用トークンを使用できるようにするまでに追加の申請が多々必要になります。 各種アカウント情報の申請には数日間の審査が必要になるので、本番環境への反映時に申請に手こずり、開発スケジュールに影響が出ないよう申請内容/必要書類を把握しておく必要があります。 今回の実装で必要になった申請内容を以下にまとめる。 StripeCheckout とは以下のようなStripeサービス側のUIを使用して決済する決済方式のことである。 注意 この記事の内容は、2024/4/20段階の情報です。 Stripeの仕様変更によって申請内容が変わる可能性がありますのでご注意ください。 アカウント申請に必要な内容一覧 ビジネスの確認 ビジネスの所在地 「日本」を選択 事業形態 「個人事業主」を選択 個人情報
Tokens Studio(Figma Tokens) で小さくはじめるデザインシステム
📝 はじめに こんにちは犬です。 デザインシステムをはじめる上で、 Figma の神プラグインを見つけたので共有します！ わたしが携わっているプロジェクトでは、エンジニアとデザイナーの双方向のコミュニケーションツールとして Figma Tokens を採用しています。 📝 Figma本体 だけでは実現が難しい色の管理手法 Figma と フロントエンド実装時の色の管理については以下のように取り決めました。 # 色の定義と利用方法 1. Primitive colors を定義 ここで定義した色をサイト全体で使用する。 ※ 定義はするものの、全ての色をサイト全体で利用するとは限らない。 基本色（赤、黄、青、、、など）からアルファ値や彩度、明度を機械的に算出して全カラーパレットを作成。機械的に出した色に微妙なものがあった場合は微調整する Primitive colors の例 red.10
大嫌いだったユーティリティーファーストCSS（TailwindCSS）と向き合った話 - Qiita
最近、業務にTailwindCSSとAstroを取り入れ始めました。 ここではそれまでの苦悩、導入までの軌跡や工夫についてご紹介します。 育った環境 私が社会人になるころにちょうどWeb標準という言葉が浸透し、「世の中はXHTMLでマークアップはセマンティックであるべし！」という価値観で育ちました。 CSSは名前の通り、カスケードするから良いものだと思っていましたし、クラス名はデザインの都合ではなく、機能や意味からつけることが幸福につながると信じていました。 当時は大量コーディングをより効率よく行うためにコマンドラインのプログラムをつくってXPathで抽出・変換し少しでも作業を軽減できないか試行錯誤したり、複数人でのコーディングをどのように効率よくまわせるか考えたり、HTMLをXMLとして捉えて、当時のXHTMLの思想に則って業務を進めていました。 XHTMLは廃れ、それほど厳格性を求めら
Firebase & Astro
Firebase is an app development platform that provides a NoSQL database, authentication, realtime subscriptions, functions, and storage. See our separate guide for deploying to Firebase hosting. A Firebase project with a web app configured. An Astro project with server-side rendering (SSR) enabled. Firebase credentials: You will need two sets of credentials to connect Astro to Firebase: Web app cre
ウェブメディアの開発に最高かもしれない WACK Stack の紹介
WACK Stack というウェブメディア向けの開発スタックを考えてみました。まだ本番運用はできていませんが、PoC としてプロトタイプを作ってみたところ「いやこれ、マジでかなりいけるんじゃないか？」という感触を得たので紹介したいと思います。 WACK Stack とは、 WordPress Astro CDN Kysely のそれぞれの頭文字をとったもので、これらから構成されるスタックに名前を付けたものです。WordPress を CMS として使いながら、パフォーマンスとスケーラビリティに優れ、モダンなスタイルで高速に開発とリリースがしやすいウェブメディアのための構成として考えました。 前置き 弊社 KODANSHAtech の主な業務の1つにウェブメディアの開発があるのですが、そのときにWordPress を使うことが多いです。 WordPress を採用しておけば、すぐにほぼ完全に
WordPressのREST APIで全記事を取得したい - Qiita
ポートフォリオを引き続きアップデートしており 今はWordPressのREST APIを使用してブログ機能を追加しています。 TL;DR WordPressのREST APIだと最大でも100件までしか記事が取得できなかったから functions.phpに全記事を書き出すJSONを追加してみた。 WordPressのREST APIの取得について まずドキュメントへのリンクを。 WordPressの公開URL末尾に「/wp-json/wp/v2/」することで取得可能で ここにパラメーターなどを渡して、カテゴリー一覧などを取得します。 公式サイトのURLだとこんなイメージ https://wordpress.org/wp-json/wp/v2/ デフォルトで最大件数で取得する場合のパラメーターでよくあるのはこれみたいです（検索調べ） /wp-json/wp/v2/posts?per_pag
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Share state between Islands
Tailwind CSS で作られた UI Library あれこれ
