先日、個人開発していたzenncastというWebサービスをリリースしました。 Zennでトレンドになっている記事を、毎日AIが10分のラジオにして届けてくれるというサービスです。 ありがたいことに公開後はたくさんの方に試してもらえ、技術的な質問も多数いただきました。 このZennではzenncastの技術構成や仕組みを紹介します（プロンプトつき）。 作ったもの まずはエピソードを一つ選んで1分くらい聴いてみてください！ AIラジオの雰囲気が掴めると思います。 主な機能・特徴 毎朝10分のラジオを生成 Zennでトレンドになっている記事を要約して紹介 お便りを投稿すると、翌日のエピソードでAIパーソナリティが拾ってコメントしてくれる BGMをつけて爽やかな聴き心地 これらのステップは人の手を介さずすべて自動化されています。 Spotifyなどの各種プラットフォームへの配信はSpotify

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

普段何気に使っているPostman。最近まで「手軽にGUIで疎通を試せて、設定を共有できてべんり〜」くらいで使っていました。 けどふと「実はもっと便利な機能があるのでは？」と思って調べてみたところ、色々出てきたのでせっかくなのでシェアしたいと思います。 たまたまですがちょうど10選！ 地味に便利な機能10選 VSCode拡張 PostmanにはVSCode拡張機能があります。 インストールするだけで、VSCodeのサイドバーから利用可能です。 日本語設定 日本人なので日本語で使いたい。 右上の歯車→Settingsから以下の通り選択することで日本語化が可能です。 変数の定義 複数のAPIで同じ値を使いたい場合があるとします。例えばテスト用のユーザーIDなどです。 Postmanではそんな値をAPIファイルに逐一ハードコードする必要はなく、変数に保存することが可能です。 Postman Ec

"LayerX、スタディサプリ、SHEと考える　GraphQLが向いている現場とは？運用実践LT" で登壇した資料です。 引用した資料 [Rails アプリに RESTful API のレールを敷いて生産性が大きく上がった話 | Wantedly Engineer Blog](https://www.wantedly.com/companies/wantedly/post_articles/85098) [React Server Components と GraphQL のアナロジー | by Yosuke Kurami | Dec, 2023 | Medium](https://quramy.medium.com/89b3f5f41a01) [実質無料で GraphQL Gateway を手に入れる / low-cost GraphQL Gateway - Speaker Deck](

「3時間でNode.jsでREST APIを作る」ためのチュートリアルブックです。気軽に手にとってもらうために分量を少なめにしました。初心者から上級者まで学びのある内容になっています。チートシートとしても活用できます。

OpenAI の DevDay で発表された、GPTs は、特定のタスクに特化したカスタムモデルを作成できる ChatGPT Plus で利用できる新しい機能です。作った GPTs は、自分だけで使うのはもちろん、友達にシェアしたり。ウェブ上で公開することもできます。 この GPTs の機能である Actions を使うと、OpenAPI Schema を元に、外部 API を ChatGPT エージェントが実行するようになります。 この機能を使って Notion などの様々なサービスと GPTs を繋げてみたので、そのデモと GPTs のつくりかたを解説します。 デモ Notion は、API と呼ばれる開発者が Notion のデータを操作し、外部アプリケーションやサービスと連携するための機能が公開されています。そこで、Notion API の OpenAPI スキーマを書いて検索、デ

今回は、何らかのパラメータを扱うAPIを設計する際に、どこにパラメータを含めるべきかという問題について。 選択肢は3つあります。 1. クエリストリングに含める 2. リクエストボディに含める 3. パスに含める それぞれどんなユースケースに適しているのか例を挙げます。 1. クエリストリングに含める 何らかのリソースのフィルタリング、ソート、ページングを実現したいときに用います。 クエリ と名前がついているくらいですからね。 一覧や検索が主ですね。ゆえに GET 以外で見ることはほぼありません。 ただし、認証のような例外もあります。これは後述します。 検索

はじめに はじめまして、バックエンドセクションの yukimochi です。 現在、N予備校ではバックエンドのアプリケーションの移行計画が進んでいます。 その一環で、一部のマイクロサービス間通信についても REST API + OpenAPI の現状から gRPC へと移行することになりました。 私の参画しているプロジェクトである教材入稿ツールでは TypeScript + NestJS を採用しており、結合している他マイクロサービスとの通信でgRPCを利用する際の gRPC クライアントと、そのスキーマ定義を担う proto の運用戦略、実現方法について記します。 proto ファイルと型定義パッケージの取り回しについて考える スキーマ定義である proto をどこに保存するか スキーマ定義である proto をどこに保存しておくかは、 proto のバージョン管理の観点で重要です。今回

はじめに 今回はフロントエンド(Next.js×TypeScript)におけるAPI通信手法について、基本的なAPI通信の手法に加えて、「Repository層, Model層, Factory, API-Client」を用いた手法を具体的なコード例とともに解説します。 この記事の対象者 フロントエンジニア初級者から中級者 API結合におけるディレクトリ設計が明確に定まっていない人 API通信をする上での「Repository層」「Model層」「Factory」 「API-Client」それぞれの責務について理解したい人 全体の概要図 後の章でこの部分は詳しく解説します。 基本的なAPI通信手法 今回紹介するAPI通信手法 基本的なAPI通信手法 カスタムフックを使わない場合 カスタムフックを使わない基本的なAPI通信手法としては下記が例の1つとして挙げられるかと思います。 src/ap

さぼです、沖縄でWebと設計について考えてます。2023/09/23 に沖縄で行われたTechBaseOkinawa2023 にて上記のタイトルで登壇しました。 今回の内容は GraphQLを設計の観点から考えてみる GraphQLの目的や用途を整理する GraphQLを使う時、または使わない時のヒントを持ち帰ってもらう 最近、GraphQLじゃなくてRESTで良くないと思うケースがなんとなくわかってきたのでそれを共有する という感じで話しました。話した内容を文字に起こし少し改修してZennでも共有することとします。 まえおき 最近はクライアントAppとサーバーAppを分けて実装する事が増えてきた クライアントの環境はますます複雑になっている クライアントとサーバーはWebAPIで通信を行う クライアントが複雑になるのと同時にWebAPIの要求が更に増して来ている APIの要求・応答を効率

はじめに 今回の記事では、設計やソフトウェアアーキテクチャを学べるGitHubリポジトリを16個紹介する。 対象とする読者 設計やソフトウェアアーキテクチャに興味関心があるエンジニア GitHubをエンジニアリングの情報収集に活用したいエンジニア タイトルで気になった人 Architectural Patterns システムの基本的な構成を理解するためのパターンやテンプレートを提供している。これらのパターンを学ぶことで、システムの構造やコンポーネントの関連性、相互作用を理解できる。これが開発者にシステムをより効率的かつ効果的に設計・実装する能力をもたらす。 Design Patterns for Humans 設計パターンを人間が理解しやすい形で説明している。デザインパターンは特定の問題に対して再利用可能なソリューションを提供する。これによって、開発者はより効率的にコードを記述でき、メンテ

@saboyutaka 合同会社春秋 Tech Base Okinawa 2023

::: message info これは[フィヨルドブートキャンプ Advent Calendar 2022 Part.1](https://adventar.org/calendars/7760)の25日目の記事です。 昨日の記事は:@shujiwatanabe:shujiwatanabeさんの[質問しながら出来るようにしていく](https://shu91327.hatenablog.com/entry/2022/12/24/091025)と:@saeyama:saeyamaさんの[Rails/Vue 編集時に画像をD&Dで入れ替えした時のActive Storageの保存方法](https://saeyama.hatenablog.com/entry/2022/12/24/000123)でした。 ::: ↓こういうのを職人が丹精込めて一つ一つ手作りする時代は終わりました。 ```sh

Postmanでは、将来全てのものがAPIで繋がると考えています。 “APIファーストの世界“コミックを読むことで、何故、またはどのようなAPIファーストの世界が実現するのかが理解できます。

はじめに こんにちは、都内でソフトウェアエンジニアをしているYSasagoです。 私はフロントエンドの開発時に、Chromeのブラウザを使うことが多いです。 Chrome には開発を便利にするchrome 拡張機能がたくさんあります。 普段、フロントエンド開発時に私が使っている拡張機能を紹介したいと思います。 UI Build Assistant アイコンは IT 大学と面白いですが、こちらの拡張機能を使えば、ワンクリックで背景と線に色付けをしてくれて、レイアウトが見やすくなります。こちらの拡張機能を使うとマージンの調整等が簡単にできるようになりとても便利です。 また、作成者のしまぶーさんの Youtube 動画は、フロントエンド学習にとても有益なのでよく拝見させていただいてます。 OFF ON Responsive Viewer 次に紹介するのは、Responsive Viewer です

注意：今回の記事で載せているコードは読者に具体的なコードのイメージを持たせる目的で書いている。それ故に、実際にブラウザ上で実行しても動作しない点には注意してほしい。より専門的ににGraphQLとRESTの違いを学びたいならLogRocketの記事とApolloの記事を参考に。 はじめに 今回の記事では、Web APIの開発に重宝されるRESTとGraphQLの違いを解説する。 対象とする読者 これからREST、またはGraphQLを実務で積極的に活用したいひと 両者の違いがわからないひと 個人開発等でWeb APIをつくるひと タイトルを見てなんとなく気になったひと APIとは RESTとGraphQLの議論に入る前に、まずはAPIについて説明する必要がある。 Wikipediaによると、API(Application Programming Interface)は以下のように定義されてい

先日だれでもAIメーカーというWebサービスをリリースしました。このサービスは例によってOpenAI APIを使っており、トークンの使用量がランニングコストに大きく影響します。 また、気軽に使ってもらえるよう未ログインでも使用できる仕様にしているため、気をつけないと悪意のある人に大量にトークンを使用されてしまう可能性があります。 ノーガードだとどうなるか 例えば、POST /api/askという「リクエストbodyのpromptの値を取り出し、OpenAI APIのChat Completionsに投げる」という単純なエンドポイントを作ったとします。 「未ログインでも使ってもらいたいから」と認証を一切しなかった場合どうなるでしょうか？ 悪意のある攻撃者に見つかれば、promptを上限ギリギリの長さの文章に設定したうえで、/api/askに対してDoS攻撃するかもしれません。 トークンを大量

結論 社内システム上の多数のアプリケーションがChatGPT APIを活用しているというシチュエーションを想定し、AI共通基盤が持つべき機能とアーキテクチャを検討しました。 ポイントは以下の３つです。 社内システム上のあらゆるアプリケーションにChatGPT APIが組み込まれる未来が想定される アプリケーションごとに必要な実装は重複するため共通化が可能 Proxyサーバを社内に配置しそこで共通的な処理を行い、各アプリケーションはAPI呼び出しのみを行う 背景 -ChatGPT APIの2024年を予想する- 2023年5月現在のChatGPT APIの活用状況 2023年3月1日にChatGPT APIであるGPT3.5-turboがリリースされ、あらゆるプレイヤーによってこぞって活用方法が模索されています。 現在の活用状況について知見を深めたかったため、TwitterにてChatGPT

GraphQLはリクエストクエリを書くことで、必要な分のデータを柔軟に取得することが可能なAPI形式です。 RESTとは違うその仕組みはクライアント目線ではとても便利なものですが、サーバーサイドに立ってみると無限の組み合わせがあるリクエストクエリに一体どう対処しているのか不思議に思う人もいるでしょう。 この本では、Goのgqlgenというライブラリを用いてGraphQLサーバーを作る過程を通して、サーバーサイドGraphQLを理解・開発するのに必要な知識を解説していきたいと思います。