はてなブックマーク

GPUを使いたいこと、あると思います。 ただしご家庭に強いGPUはないこともあるでしょうし、かといってGPU搭載したインスタンスを立て続けているととてつもないお金がかかります。 そんなあなたにサーバレスGPU、使った秒数分だけ課金が発生するので、いきなりすごい金額がかかることにはならず手軽にGPUを使ったプログラミングが始められます。 私は今の所ModalとRunPodを試したのですが、ModalのDXが良すぎるため今回イントロ記事を書く筆を取りました。 始めにざっくりいいところを述べると 一つのファイルで完結する。 RunPodとの比較だと「RunPodではDockerのイメージを自前でビルドしてどこかしらのregistryにpush、都度タグを付け替えてRunPodの方にも反映」みたいなのが必要だったがModalでは全部要らない ローカルパッケージをちょろっとした関数で送れたり、テキス

この記事は "What We’ve Learned From A Year of Building with LLMs" という記事を著者の一人である Eugene Yan さんから許可を得て翻訳したものです。 https://applied-llms.org/ Thank you for giving me a permission to translate this wonderful article! 著者の方々 Eugene Yan Bryan Bischof Charles Frye Hamel Husain Jason Liu Shreya Shankar 原文の公開日 2024/６/8 今は大規模言語モデル（LLM）を使った開発がとってもエキサイティングな時期です。この1年間で、LLMは実世界のアプリケーションに対して「十分に良い」ものになりました。そして、年々良くなり、安く

ローカルでLLMを動かそうとなったら transformers ライブラリ、llama.cpp、text generation webuiなどいくつかの選択肢があると思いますが、どれもめちゃくちゃハードルが高いというほどではないですが、動かすまでの手続が若干いかつい印象があります。 そんな中で Ollama というツールを試してみたところインターフェイスがシンプル、ついでにキャラクターのラマが可愛いのでご紹介していこうと思います。 ちなみにですが、日本語での言及はあまり見かけなかったですが、LangChain が出してるレポートでは OSS モデルを動かすのに使われているものとしては3番目に多く使われており、 出典: LangChain State of AI 2023 GitHub のスター数も現在約33700とかなり人気を集めていそうです。 Ollama で CLI から推論 では早速

基本こちらのものを TS で書き直した感じです。 ▼ langchain.js のドキュメント ▼ サンプルコードがあるレポジトリ Vectorstore の準備 まず事前準備として Vectorstore なる AI のためのデータベースを用意します。 いくつかオプションがあるのですが、私は違いがよく分かっていないのでこちらの pinecone というものを使ってみました。 正直私は具体的に Vector とはなんなのか分かっておらず雰囲気で使っています。pinecone が解説記事を書いているのでこちらを読んでみると良いかもしれません。 こちらに SignUp した後、Indexes を選択し、 Create Your First Index！ をクリックします。 Index Name に適当な名前をつけ、Dimensions には 1536 と入力します。なんか1536次元のベクトル

こちらに触発されて「そういや俺も手が痺れて色々やってたしな、共有したろ！」と思い筆を取りました。 過去形っぽく書いていますが今でも油断して悪い姿勢で作業し続けると痺れが再現します。 ひどい時は無理せず休みましょう。 手の痺れの原因 手の痺れと一口に言っても原因は実に様々ですが、痺れている部位でどの神経が痛めつけられているかわかるので、それである程度特定することができます。 私の場合は主に手の外側、小指と薬指が痺れる範囲でした。 この範囲の場合、圧迫されているのは尺骨神経という神経のため、考えられる疾患としては肘部管症候群、胸郭出口症候群、頚椎ヘルニアのあたりでした。 引用: 尺骨神経とは？解剖・支配筋・感覚枝 https://www.doctor-1.com/archives/2110 色々MRIやらCT取っても確定診断は出なかったのですが、後述する分離型キーボードを導入してかなり楽になっ

export const FirstVideoConfig: VideoConfig = { sections: [ { title: 'イントロダクション', bgmSrc: '/audio/bgm/honobono-wartz.wav', backgroundVideo: '/video/cyber-bg.mp4', afterMovie: '/video/yukkuri-opening.mp4', talks: [ { text: 'ねえねえ魔理沙', speaker: 'reimu', id: '59f8c2cd81334be5ab5cdc7899fad286', audioDurationFrames: 25, }, { text: 'なんだ霊夢', speaker: 'marisa', id: '0ba332a465c3404a870de15cad021407', audioD

色々探したがこちらの heic2any しかなさそうだった。 heic-convert というものもあったが、こちらは Node.js でないと動かない。 まずはインストールして import heic2any from 'heic2any'; export const readImage = async (reader: FileReader, imageFile: Blob) => { if (imageFile.type === 'image/heif' || imageFile.type === 'image/heic') { const outputBlob = await heic2any({ blob: imageFile, toType: 'image/jpeg', }); if (!Array.isArray(outputBlob)) { reader.readAsDat

【2025年2月追記】 この度「ノンデザイナーのためのFigma入門」を出版しました🎉 開発者向けのFigmaの見方や、FigJamやFigmaによるスライド資料作成など幅広いFigmaの利用法をご紹介しています。よろしければお手に取りください！ こちらは Figma 開発アドベントカレンダー1日目の記事です。 現場で活躍する Figma API、プラグイン、ウィジェット Figma は UI デザインツールとデファクトスタンダードの地位を確立してきました。 そんな　 Figma にはコードを使って Figma 上の情報を取得してゴニョゴニョできる手段が３つ用意されています。 API、プラグイン、ウィジェットの３つです。 これらの手段を知っていると Figma 上の要素をコードで使うものに変換したり、または日々のデザイン作業自体の効率化にもとても役立ちます。公開されているプラグインでは要

こんにちは。 スキーマから何かを生成するのが大好きな seya と申します。 追記 今後は基本お手製スクリプトは書かないで ChatGPT にお願いした方がいいと思います。 ------------- 追記 終わり ------------ 今の会社では REST API のスキーマを OpenAPI で記述しているのですが、それを活用して何かしらを生成するスクリプトをよく書いています。 そんなネタがそれなりに溜まってきたので一挙大放出しようというのがこの記事です。 具体的には次のようなものを作りました。 TypeScript の型と API の生成 by aspida テストのための Factory 関数の生成 msw handlers の生成 API スキーマから生成のデメリット まず初めに、"生成"というのはとても生産的に感じますが、デメリットも存在するので触れておきます。 一番大き

昨今では API のスキーマから型を生成することはフロントエンド界での基本的エンジニア権とされていますが、これはバックエンドとフロントエンドでレポジトリが分かれている場合にややワークフローが煩雑になります。 これを楽にするための GitHub Actions の設定を書いてみたのでご紹介します。 何もない時のワークフロー OpenAPI スキーマを生成する 中身をコピって別レポジトリにはっつける npm run generate:all を実行して諸々を生成する PR 作ってマージ というのをアップデートする度にやる必要があり地味に面倒です。 ので GitHub Actions で 2〜4 を自動化しちゃいましょう。 スキーマから生成して PR を作る Actions を作成 まずはフロント側のレポジトリで実行する Action を作ります。 やっていることは npm run genera

globalThis.Notification = { requestPermission: jest.fn(), permission: 'granted', } as unknown as jest.Mocked<typeof Notification>; // テストで権限のステータス変えたい時はこんな感じでご利用ください。 // Notification.permission // jest // .spyOn(window.Notification, "permission", "get") // .mockReturnValue("denied"); // // Notification.requestPermission (which is a Promise) // jest // .spyOn(window.Notification, "requestPermission

Stitches という多分マイナー目な CSS ライブラリがあって最近使ってみたのですが、結構好みだったので紹介したいと思います。 あまりガッツリした技術選定というよりは自分が気持ち良かったところを語る感じなので TECH でなく IDEA 枠での投稿です。 基本情報 すごいざっくりと特徴をまとめると TypeScript で型安全に書ける near zero runtime で速い な CSS-in-JS です。強化版 styled-components といった趣です。 むしろ型がよく効いて嬉しいので CSS-in-TS と呼んだ方がいいのかもしれません。 基本的な書き方はこんな感じです。 書き味的には styled-components が TS っぽくなったという感覚です。 const Button = styled("button", { padding: "12px 20px

私個人の Flutter 歴も早数ヶ月程になってきたのですが、ちょくちょく雰囲気で使っているなーと感じるものが出てきたり(BuildContext や WidgetsBinding など)、描画のタイミングでバグが出た時にフワッとネットで見た記事通りに書いて解決したりなどの場面が出てきました。 それでもとりあえず動くアプリケーション開発はできなくないのですが、ちゃんと自信を持って開発したい & もう一段 Flutter 力を上げたいので本腰入れて Flutter がどう描画しているのかを調べてみたので、その結果をまとめてみました。 同じような課題感を抱いている方の足がかりとなれば幸いです。 はじめに: この記事のスコープ 最初にこの記事で話す「描画の仕組み」とは具体的に何を指すのかを述べます。 前提として、Flutter は大きく次の3つの層から成り立っています。 Flutter arch

【2025年2月追記】 この度「ノンデザイナーのためのFigma入門」を出版しました🎉 本記事のような開発者向けの内容も含みつつ、FigJamやFigmaによるスライド資料作成など幅広いFigmaの利用法をご紹介しています。よろしければお手に取りください！ エンジニアにデザインツールの知識・習熟は必要か？ しなくても仕事はできると思うのですが、あるとよりクオリティの高い仕事ができることは間違いありません。 という訳でエンジニアがエンジニアとしての仕事をしていく上で「Figma のこういうことを知っておくと良さそう」という知識をまとめてみました。 ユースケースを考える まず始めにデザインは作らないはずのエンジニアが Figma を使う時にどんなユースケースがありそうかを考えてみます。 デザインを元に実装する時 デザインから何かを生成したい時(コードとか画像とか) 自分でちょこっとデザイン修

以前こんな記事を書きまして、こちらではいわゆる Rails とかである Factory Bot みたいな感覚で使えるものが欲しいなと思い作りました。 ただ、実際にこれを使ってテストを書き始めてみたものの、すぐにまだ足りないものを見つけました。 それは relation を持つもののデータを作るのがめんどくさい default のデータを書くのがめんどくさい の2点です。これらが解ければユニットテストのデータ準備周りで困ることはなさそうだと思い、ソリューションを考えてきたのでご紹介します！ relation を持つもののデータを作るのがめんどくさい まずこちらですが、relation の持ち方については次の二つがあるのでそれぞれ個別に考えます。 foreign key を持っているパターン 中間テーブルで紐づけているパターン foreign key を持っているパターン こちらに関しては P

というのを使っていて思ったのでレポを書いていきます。 mabl とは - 基本的な機能 ざっくり言うと E2E テストをお手軽にメンテできるツールです。 こんな感じでポチポチ画面を操作していくと、それで実行したアクション(ボタンやリンクをクリックするなど)を自動で記録してくれて、E2E のテストを作成することが出来ます。 コードを書かずに　E2E　テストをサクッと作れちゃうのが魅力な訳ですが、それだけではありません。そんなすごいところを紹介していこうと思います。 mabl のここがすごい Auto Healing 何やら回復魔法みたいな感じでかっこいいですが、何かというと E2E テストがコケるようになった時に自動で修復してくれる機能です。 例えばボタンの位置が変わってしまっても、同じ文脈であろうボタンを自動で探して修復したりしてくれます。 E2E での辛さといえば、やはりテストのメンテナ

styled-components の as みたいなものどうやってやるんだろうと思い調べてみたので共有です。 結論から書くと次のようにすればいけました。 type Props = { as?: React.ElementType; text: string; }; const ReactMozidume: React.VFC<Props> = ({ as: CustomTag = "p", text }) => { return ( <CustomTag> {text} </CustomTag> ); }; as keyof JSX.IntrinsicElements のキャストがないと valid な　HTML タグかを TS が分からないので Type '{ children: string; }' has no properties in common with type 'Int

LaunchDarkly とは？ 特定のユーザにだけこっそり機能をリリースすることを簡単にできるようにするためのサービスです。 Feature Flag というものを作って、こんな感じで Default では true/false を返すか、どんな条件に合致するユーザに true/false を配信するかを設定することができます。 このツールを React のプロジェクトで使ってみたので、設定した内容をメモしていきます。 基本的な設定 基本的にはこのドキュメント通りにすすめればOKです。 まずはライブラリをインストールします。 import { asyncWithLDProvider } from 'launchdarkly-react-client-sdk'; (async () => { const LDProvider = await asyncWithLDProvider({ cl

フロントエンドの開発が初めての人が意外と抜けがちな観点をまとめてみました。 初めにざっくりと概要を話すと「デザイナーが作るデザインでは表現しづらいもの」をまとめたものになります。 デザイナーが作るデザインは静的なものなので(たまにがっつりプロトタイプを作ったりもありますが)、いわゆる"状態"を表現するのが難しかったり抜けたりしがちです。 具体的に言うとローディング、Empty、エラーなどです。これらをよしなに補完できるフロントエンドエンジニアはデザイナーからもきっと「頼りになるぅ！」と思われること間違いないでしょう。 と言うわけでそんな例を紹介していきます。 今後も思いついたら追加する可能性が無きにしも非ず。 ローディングを出そう こう言うクルクルするやつとか こんな感じでシュインシュインするやつがあります。 基本的にユーザがアクションを起こした時に待たせる場合は必ず表示させましょう。 ロ

モックサーバー便利ですよね。 バックエンドとフロントエンドを実装する人が分かれている時は特に。 ですが一々エンドポイントごとの定義とか値を設定するのめんどくさい…！ という訳で OpenAPI の定義を元にいい感じのデータ返してくれるものないかなーと探していたところ以下の Prism というものを発見したので紹介します。 インストール

最近 Angular を触り始めた React エンジニアです。 ただ、周りでは Angular な人が React を触ることになりそうなので、自分の Angular の勉強も兼ねて Angular -> React の言い換え表を作ってみようと思います。 Props @Input/@Output React では input/output の区別は特になく、親から子のコンポーネントに渡すものは全て Props というオブジェクトとして定義されます。 ＠Output は Angular では子が発するイベントを親が購読している関係になっていると思いますが、React では親から関数を渡して、それを子側でコールバックとして実行するという感じです。 type Props = { text: string doSomething: () => void } const Comp: React.

はじめに ルーティングとは経路制御の事を指します。前回、負荷分散装置の勉強をしている際にAWSのDNSラウンドロビンが俗にいうDNSラウンドロビンと比較してヘルスチェックを始めとして様々な機能があって凄すぎたので今回深堀りすることにしてみました。 DNSラウンドロビンの説明についてはこちらの記事になります　→ https://zenn.dev/seyama/articles/532abc66d5d72d Route53のルーティングポリシーの種類 公式を調べてると下記のように多彩なものが用意されています。 公式ドキュメント ポリシーの種類 公式ドキュメントの説明 調査した結果の個人的感想

何かを好きになるのに、理由なんているかい？ ~セ・ヤ (B.C.2525)~ 出会い あれはおよそ4年前のことでした。 2016年の冬、寒さに震えていた私はフロント未経験の身でありながらフロントの技術選定をしなければならなかったのです。 その頃のフロント界は混迷を極め、 React もまだ枯れておらず、Angular は2系が1系と大きく違うことから叩かれ、Vue が名乗りを上げようとしていました。「フロント界隈は動きが速い」というフレーズも流行語大賞になりそうな勢いでした。 そんな中選択肢・考えることの多さに絶望していた私は React を試しに触ってみました。 そして「思ったより覚えることないし、独自文法とかも少ないからミスってもリカバリー効きそうだな」と直感的に思いました。 はっきり言ってしまえば雰囲気で選んだのですが、今ならこの時の直感は間違っていなかったと自信を持って言えます。

何のライブラリもフレームワークも使わないで JS を書くことを Vanilla JS と呼びます。 Vanilla JS is a fast, lightweight, cross-platform framework for building incredible, powerful JavaScript applications. と謳うジョークサイトもあるほどに定着しています。 しかし、一体なぜ "Vanilla" と呼ぶのか気になったことはありませんか？ 私は気になりました、ので調べてみました！ Vanilla とは バニラとは、コンピュータソフトウェア、まれにコンピュータのハードウェアまたはアルゴリズムなどで、改変・改修・カスタマイズなどが一切行われていない、提供された状態のまま（原型を留めたままの状態）を指す[1]。 バニラという表現は、業界でもデ・ファクト・スタンダードとして

SQLのチューニング方法 昔Qiitaで書いたものをzennにうつして、若干の修正、追加をしてみました。 ORACLEでの経験を元に書いていますがコストベースのリレーショナルデータべースなら大体共通の考え方だと思うので他にも使えると思います。 SQLのチューニングといえば比較的容易に済むインデックスをとりあえず作成する。といった対応を取られがちですが、数万レコード程度でのデータ量ではあまり効き目がなく（自分の経験則）、どちらかといえば、結合順が大幅に狂ってたりすることが原因のことが多かったりします。よって本当にインデックスがないことが原因なのか？を熟考する必要があります。（例えばID以外のフラグとかコードに単項目indexを貼ってるのもみたことがあります。怖いけど実話） また、インデックスを作りすぎるとオプティマイザが狂いやすくなって他のSQLにも悪影響を及ぼしたりするので結構熟慮して追加

自分ではあまり使ったことがないのですが、最近他所のデザインシステムの実装なんかを眺めていて <Stack.Item> のようにあるコンポーネントのプロパティとして他のコンポーネントを定義するパターンを何度か見かけて、どんな時に有効なのかを考えてみたくなった次第です。 具体例 Shopify のデザインシステムの中にある Stack と Stack.Item が当てはまります。 これらのコンポーネントは次のようにセットで使われます。 <Stack> <Stack.Item fill> <Heading>Order #1136</Heading> </Stack.Item> <Stack.Item> <Badge>Paid</Badge> </Stack.Item> <Stack.Item> <Badge>Fulfilled</Badge> </Stack.Item> </Stack> //

こんにちは。Figma プラグインを愛し、Figma プラグインに愛された男、そう、我こそは seya と申します。 先日 Figma から React のコードを生成するプラグインを公開しました。 そして、これのソースコードをこちらのレポジトリにて公開しています。 面白いと思ったらぜひ Star お願いします！⭐️ 上記レポジトリは React を生成するためのものですが、React 以外にも色々な形で View を書いているところがあるでしょう。なのでこの記事では、上記レポジトリのコードを拡張・編集して「自分だけの Figma コード生成機」を作れるための解説を書きます。 ちなみにですが、 Fork して作っていただいたものでもご自由に Figma Community に publish などいただいて大丈夫です。何か文句を言うことは一切ありません。ただ「作ったよー」とご報告いただける