はじめに 最近、PGLite（ブラウザで動くPostgreSQL互換DB）をつかって、サーバー側にデータをもたないプライベート重視のChatGPTライクなサービスを作ってます！ このサービスではデータをブラウザのIndexedDBに保存しています。 特に最近、Aidyでは、「書きたい人」をサポートするAIライティングに力を入れていて、 構成の提案から文章の下書き、図の挿入まで、執筆をサポートしています。 Mermaid図、マインドマップ、インフラ構成図の生成や、マークダウンエディタとの連携で、記事作成がよりリッチになります！ この動画を作った時はAll in One AI アプリという立ち位置でBetter ChatGPTのようなサービスを目指していたのですが、ManusやGensparkのような競合が増えてきたので方向性を変えて技術記事やこだわりのあるライターに向けたライティング特化のサ

はじめに 以前、こちらの記事を書いた時は昔だったのでPages Routerが前提でまだ自前でi18n対応するのは簡単でした 最近はNext.jsのApp RouterでWebアプリを作るので、作ったサイトを国際化対応したのですが、ライブラリの選定に悩みました。 昔みたいにクライアントコンポーネントだけが前提ではなく、サーバーコンポーネントとクライアントコンポーネントがApp Routerでは混在しているので、単純にhooksを使うだけでは解決できないからです！ そのため、最初はnext-intlやnext-i18n-routerといった定番ライブラリを検討していたのですが、 設定ファイルの量が意外とあったり、各ページで工夫が必要だったり...みたいな感じで、 結局めんどくさそうだなと感じて諦めました。 このNext.jsの公式サイトで紹介されているミニマムな方法も、サーバーコンポーネント

生成 AI を検索体験に組み込みたい──そう考えたとき、RAGをゼロから実装するのは意外と骨が折れます。 埋め込みモデルの選定や大量ドキュメントのベクトル化バッチ、スケーリングするベクトル DB の運用、生成モデルへ渡すコンテキストの最適化など、工程が多岐にわたり運用負荷も高くなるためです。 Google Cloud が提供する Vertex AI Search を使えば、データの取り込みからインデックス生成、質問応答までをフルマネージドで任せられるため、開発者はフロントエンド設計やドメイン知識の整理に集中できます。 この記事では実際に触ってみて感じた便利さを軸に Vertex AI Search について語っていきます。 Vertex AI Search とは？ Vertex AI Search は、Google Cloud が提供する構造化／非構造化データを横断して検索・要約・質問応答

最近、React Nativeを使ったアプリ開発に挑戦しているのですが、なるべく費用を抑えるために試行錯誤しています！ React Nativeでアプリを開発するときにほとんどのケースでExpoを利用すると思います。ExpoはReact Nativeの開発をサポートするためのフレームワークで、開発体験がとてもいいです。 しかし、Expoで作成したアプリをテスト用などに配布する場合、Expoの公式サービスであるEASを利用することができますが、無料プランだとアプリのビルド数に制限があり、1ヶ月に30ビルドまでとなっています。 iOSのビルドとAndroidのビルドでそれぞれカウントされるため、実際には15ビルドまでとなりとても厳しいです。 30ビルドは、CI/CDを導入しているとすぐに使い切ってしまうことがあるため、無料でアプリを配布する方法を探していました。そこで、FirebaseのApp

早速ですが皆さんはウェブ開発で下のようなカラーパレットを定義しておくとき皆さんはどのように定義していますか？ 例えば下のようなコードを一つ一つカラーコードで定義している方も多いかと思います。 :root { --color-green-50: #E8F5F3; --color-green-100: #D1EBE7; --color-green-200: #A3D7D0; --color-green-300: #75C3B9; --color-green-400: #47AF9F; --color-green-500: #6AC1B7; --color-green-600: #4D8A7F; --color-green-700: #3A6A63; --color-green-800: #264A47; --color-green-900: #132B2B; } Figmaなどのデザインツール

Cohereが開発したLLMであるCommand R+が現在話題になっています。 Command R+はCohere社が提供するLLMの1つで、日本語も含め10カ国語の言語に対応しています。 さらに、Command R+はChatGPTと比較しても精度で引けを取らない高い性能を誇っています。 また金額面ではChatGPTと比べて圧倒的に安価です！ ここからはCursorでCommand R+を利用する方法をご紹介します。 AIエディタCursorの導入方法や特徴についてはこちらの記事で紹介しています！ Command R+をCursorで使う方法 1. OpenRouterにサインアップ(サインイン) Command R+を利用するために、OpenRouterというサービスに登録します。 OpenRouterは一つのサービス上でさまざまな言語モデルを利用できるサービスです。 このサービスを

2024 年 4 月 4 日に発表された「Command R+」が GPT-4 とほぼ同じ回答精度で、レスポンスがめちゃくちゃ速く、かつ API の利用が商用利用じゃなければ無料だったので、絶対に LibreChat に組み込みたいと思った。 LibreChat はいわゆる ChatGPT クローンと呼ばれる OSS で、UI は ChatGPT とほぼ同じで、回答に利用する API を GPT4 や Gemini、Claude3 など、自分の好きなものを指定できる。ローカル上で動くのはもちろん、デプロイするのも簡単で、数ある GPT クローンの中では一番使い勝手が良いと思う。UI を忠実に ChatGPT に寄せているのが良い。 LibreChat の UI。ChatGPT とほぼ同じ 今回はこの LibreChat で、Cohere が発表した「Command R+」を動かせるようにす

とてもニッチな用途で使えるコンポーネントですがその場のiframeのデバックができるReactコンポーネントを作ってみました！ まずはこちらのポストをご覧ください！ このポストではChromeのデベロッパーツールを開いているわけではなく、ブラウザー内に直接デベロッパーツールが埋め込まれています！ 今回はこのようなReactコンポーネントを作ってみたので、どのように作ったかをご紹介したいと思います。 デモページ こちらのページで実際にデモを試すことができます。 https://react-embed-devtools.vercel.app/ なぜ作ったか Reactをオンラインで学習できるサービスmosya Reactを先日リリースしました。 このサイトではオンライン上でコードを書いてその場で書いたコードがプレビューできるようになっています。 詳しい開発記事はこちらをご覧ください！ ただ、プ

この記事では私がmosya Reactというオンライン上でReactを学習できるサービスをリリースした背景を語らせていただこうと思います。 まずはmosya Reactがどんなものなのかイメージが湧きやすいように動画を用意したのでぜひ見てください👇 動画をみていただくとわかるように環境構築不要でその場でReactのコードを書いてプレビュー結果を確認できます！ 問題を解いた後は「提出」ボタンを押すことで実際に書いたコードがあってるかの確認プログラムが動いて採点してくれます！ なぜ mosya Reactを作ったか mosya Reactを作った背景には 完全未経験の方に仕事を手伝ってもらうためにReactを教える機会があったこと が関係しています。 その方は保育園の業務でパソコンを使う程度でプログラミング言語には触れたことはありませんでした。 そこでmosyaという別サービスでまずはHTM

2024年3月15日の一粒万倍日に、mosya ReactというReactを学習できるサービスをリリースしました。 こちら1年間の開発期間を経て、ようやくリリースできました！ mosyaの開発期間と合わせると約2年間の開発期間を経てのリリースとなります。 いやー、長かった！ 良かったら下のリンクから試してみてください！ どんなサービスか mosya ReactはReactをオンライン上で学習できるサービスです。 エディターに書いたコードがリアルタイムにプレビューできるようになっていて環境構築なしでReactを学習できます！ 採点機能が搭載されているのでReactを自学習したい方におすすめです！ このサービスの開発で特に頑張ったのが以下の特徴です！ 最新の技術にキャッチアップしている ライブラリの型がエディター上で確認できる Biomeを動かしていてリントエラーがエディター上で確認できる 最

早速ですがマークダウンの中でJSXを使えるようにするmarkdown-itのプラグインを作りました。 下の画像のようにマークダウンの中でJSXを使えるようになります。 そうすると、下の画像のように記事の中に下のようにインタラクティブに動くコンポーネントを埋め込むことができます。 この実行結果は mosya.dev という私が開発したプログラミング学習サービスのブログで確認することができます👇 JSXを書けるこの仕組みは個人の技術ブログ用途にはぴったりなのではないかと思います！ なぜ作ったか 海外のこの記事を見て、技術記事は文字と画像だけでなくインタラクティブ性が必要だと実感しました。 触っててとても楽しいし、記事の続きが読みたくなったのです。 私はこんな読んで楽しい、触って楽しい記事を書かないといけない！！ そこでマークダウンの中でReactを埋め込めないかと考えました。 最初は表示され

自分の事業部では、毎朝チームで朝会を実施してます。 自分が所属していたチームでは毎日1問、 脳の準備体操を兼ねてTypeScriptの型問題に取り組むことになりました。 mosya<TC>というType Challenge用のWEBアプリがあったので、チームで解いてみることに。 mosya<TC>初級編 Googleアカウントがあれば登録できるようなので、早速ログイン。 初級編だし、朝の頭の体操にちょうどいいよね〜。 と思っていましたが大間違いでした。 初級編とは名ばかりで初見殺しです 結構な裏切りを何回も喰らいました。 （しかも前回の問題でやった内容とかなので余計悔しいです） 難易度としては以下のような感じです。 // JavaScriptのArray.include関数を型システムに実装します。 // この型は、2 つの引数を受け取り、trueやfalseを出力しなければなりません。

コードを画像に変換 | 便利ツール集 by mosya

アクセシビリティとは Webサイトにおけるアクセシビリティとは、障害を持つ人や高齢者などに関わらず、すべての人が、より簡単に、より快適に、より安全にサイト内で情報を得ることができるようにすることです。 例えば、視覚に障害のある人にとっては、画像の代わりにテキストをデバイスに読み上げてもらうことが必要です。 また、聴覚に障害のある人にとっては、音声の代わりに文字で情報を得ることが必要です。例えば動画の再生などでは、適切に字幕を表示するなどの配慮をしましょう。 また、視覚に頼ったマウス操作も視覚に障害のある人にとっては難しいので、キーボード操作だけでサイトを快適に閲覧できる様にすると良いでしょう。 考慮したい3つのこと アクセシビリティを考慮したサイトを作成する際には特に以下の3つのことを重点的に考えると良いでしょう。 スクリーンリーダーでの読み上げ キーボードでの操作性 配色 スクリーンリー

コレクレー探しも必見！スペイン村の特別イベント「ポケモン課外授業」に行ってきました！2024年8月3日

皆さんはサービスの管理者が使うための認証をどのように実装していますか？ FirebaseやAuth0などのサービスを使ってログイン機能を実装している方も多いと思いますが、 今回はGCPのIAPとIdentity Platformを使って管理画面のログイン機能を実装することのメリットと具体的な実装方法について紹介します。 IAP（Identity-Aware Proxy）とは IAPとはIdentity-Aware Proxyの略で、GCPのサービスの一つです。 IAPを使うことで、サービスに対するリクエストの前段に認証を挟むことができます。 例えば、GAEやCloud Runなどのサービスに対してIAPを設定すると、Cloud Runにリクエストが到達する時にはすでに認証が完了している状態となりリクエストヘッダーにはIAPが発行したJWTが含まれています。 アプリケーション側でこのJWTか

WebContainersとは みなさん、WebContainersをご存知でしょうか？ WebContainersはStackBlitzが開発している、ブラウザー上で開発環境を構築するためのツールです。 なんとブラウザーだけでNode.jsやNext.jsなどのアプリケーションが動かせてしまいます。 すでにこのツールを使ってSvelteのPlaygroundが用意されていたりします。 現在WebContainersを使って作っているもの 現在、以下の動画のようなブラウザーだけでNext.jsやReactを使った開発ができるツールを作っています。 ここに開発中のエディターのリンクを貼っておきます。 すでにこのエディターで以下のようなことが可能です。 ファイルの作成、削除、リネーム ターミナルの操作（jsh） ファイルの編集（VSCodeのようなエディター） ブラウザーでの実行結果のプレビュ

この機能は2023年8月現在、ChromeやEdgeなどのChromiumベースのブラウザーではサポートされていますが、他のブラウザーではサポートされていません。 使用する場合はブラウザーのサポート状況を確認してから使用することをお勧めします。 皆さんはスクロール連動型アニメーションをご存知でしょうか？ スクロール連動型アニメーションとは、スクロール量に応じてアニメーションを発生させることができるCSSの機能です。 この機能を活用することでJavaScript不要でユーザーのマウススクロールに応じたアニメーションを実装することができます。 従来のanimationのCSSに加えて、animation-timelineというプロパティを指定することでアニメーションの進行度をスクロール量に応じて変化させることができます。 スクロール連動型アニメーションの使用例 使用例1.（パララックス） パラ

😀😃😄😁😆😅🤣😂🙂🙃🫠😉😊😇🥰😍🤩😘😗☺️😚😙🥲😋😛😜🤪😝🤑🤗🤭🫢🫣🤫🤔🫡🤐🤨😐😑😶🫥😶‍🌫️😏😒🙄😬😮‍💨🤥😌😔😪🤤😴😷🤒🤕🤢🤮🤧🥵🥶🥴😵😵‍💫🤯🤠🥳🥸😎🤓🧐😕🫤😟🙁☹️😮😯😲😳🥺🥹😦😧😨😰😥😢😭😱😖😣😞😓😩😫🥱😤😡😠🤬😈👿💀☠️💩🤡👹👺👻👽👾🤖😺😸😹😻😼😽🙀😿😾🙈🙉🙊💋💌💘💝💖💗💓💞💕💟❣️💔❤️‍🔥❤️‍🩹❤️🧡💛💚💙💜🤎🖤🤍💯💢💥💫💦💨🕳️💣💬👁️‍🗨️🗨️🗯️💭💤👋🤚🖐️✋🖖🫱🫲🫳🫴👌🤌🤏✌️🤞🫰🤟🤘🤙👈👉👆🖕👇☝️🫵

displayの2値構文とは displayの2値構文とは、displayプロパティに指定する値が2つあることを指します。 今まで通りの1値構文も使えますが、今後、2値構文の書き方がされるサイトも増えてくると思うのでここでしっかりと理解しておきましょう。 例えば、display: inline flexのように、displayプロパティにinlineとflexの2つの値を指定している場合、2値構文と呼ばれます。 これは、diaplay: inline-flexと同じ意味になります。 早速サンプルのコードを見てみましょう。