見よ、これがHonoのRPCだ
僕が開発しているWebフレームワークHonoは、同じJavaScriptのフレームワーク、Expressと比べられることが多いです。どちらもやれることはほぼ同じですが、HonoのアドバンテージはファーストクラスでTypeScriptをサポートしていることです。特に「RPC」機能は他のフレームワークにはなかった「TypeScriptの型でサーバーとクライアントの仕様を共有する」ことを可能にしています。今回はそのHonoのRPCについて紹介します。 どんなものか まず、どんなものかを箇条書きで共有します。 Web APIの仕様、特にインプット・アウトプットをサーバーとクライアント間で共有するためのもの OpenAPIやgRPCを使ってやりたかったことを叶えるかもしれない サーバーとクライアントをどちらもTypeScriptで書くことが大前提である 同種のものにtRPCがあるが、Honoの場合、
Microsoft Teamsで(Bot frameworkを使わずに)ボットを作るには
Microsoft Teamsの連携はSlackと比べると本当に使いづらい。 過去にQiitaで書いてたように、たとえばユーザメッセージを投稿するだけでも管理者の承認が必要だ。 今回は、Slackだと一瞬でできるボットユーザの作成がMicrosoft Teamsだとどのように達成できるかを書いてみる。 本当に骨が折れる。Microsoft Teams使いたくない。 そもそもボットが必要か？ たとえば GitHub ActionsからMicrosoft Teamsへデプロイ完了通知をしたい 定期リマインダーをMicrosoft Teamsへ表示したい とかそういう用途であれば、ボットではなくIncoming Webhookを使えばいい。（これならSlackのときと手間が大して変わらない） あるいは メンションされたら予め持っている答えを返すだけのbot アプリケーションのデプロイを受け付ける
You Don't Need Next.js | ドクセル
[beta] Next.jsクイズ2 • <p>にはなにが表示されるでしょうか？ /app/page.tsx "use client"; import { useCallback, useEffect, useState } from "react"; export default function Home() { const [date, setDate] = useState(); const fetchDate = useCallback(async () => { const response = await fetch("/api"); const data = await response.json(); setDate(data.date); }, []); useEffect(() => { fetchDate(); }, [fetchDate]); return ( <
[ChatGPT] AIで子どもの漢字ドリルを作ってみた | DevelopersIO
はじめに こんにちは。データアナリティクス事業本部のおざわです。 今回は、ChatGPTで小学生の娘に漢字ドリルを作ってみた話を共有したいと思います。 最近、DevelopersIOでもChatGPT関連の記事がどんどん出てきて盛り上がっています。英語の学習にも使えるという話を聞いて、むか～し娘の算数プリントに出てくる人物の名前を好きなアニメキャラにしたら喜んでやっていたのを思い出しました。 ちょうど漢字の書き取りをやっていたので「AIで漢字ドリルが作れたら面白いかも」と思ってやってみました。 1. 題材 題材に使わせてもらったのは朝霧カフカさん（原作）、春河35さん（作画）の「文豪ストレイドッグス」です。 実は、娘がこのアニメ＆漫画に出てくる福沢諭吉（通称社長）に大ハマリしています。 毎日Netflixで文ストのアニメを観て、寝る前になるとマンガや小説を読みふけり、自分のデスクに置いた諭
![[ChatGPT] AIで子どもの漢字ドリルを作ってみた | DevelopersIO](https://cdn-ak-scissors.b.st-hatena.com/image/square/2b0bf98c901ba636cbebacc15d02492fc4c92abd/height=288;version=1;width=512/https%3A%2F%2Fdevio2023-media.developers.io%2Fwp-content%2Fuploads%2F2023%2F03%2Fchatgpt.png)
個人開発で「Excel専用のWebAPI」を作りました
どういうもの？ このように関数を使ってデータを取り込めます。 背景 元々は「インターネット上のWebAPIのデータをExcelに取り込みたい」と思ったのがきっかけです。 VBAマクロを使えば簡単ではありますが、マクロは使いたくないという方も多いのではないでしょうか。かくいう私も勤務先が属人化を防ぐためにマクロの使用を推奨していません。 そこで、関数を使用する方法を選択しました。 ExcelにはWEBSERVICE 関数という指定したURLの応答データを取り込む関数があります。 しかし、この関数は大変便利な関数ですが、ExcelはHTMLやJSONのパーサーを用意していません。結局取り込んだHTMLやJSONの処理にはVBAマクロが必要になります。 また、欲しいWebAPIが存在しない問題もありました。 そこで、Excelでデータを編集するのではなく、元々のWebAPIをExcel用に作れば
Ubie Design Tokensを公開しました
こんにちは、Ubie株式会社でデザインエンジニアをやっているtakanoripです。 Ubieではデザインのクオリティと生産性向上のためデザイン生産基盤の整備に力を入れています。 今回その一環として開発したデザイントークンをnpmパッケージとして公開しました。（現在はColorのみ。） 開発経緯 Ubie Design Tokens開発以前からデザイントークンのようなものは存在しており、CSS Variablesとして実装されていました。しかしユースケースを想定せず作った変数があったり定義が細かすぎたりしたことで「どの変数をどういう場面で使用すれは良いかわからない」という問題が発生していました。 そこで変数の定義を見直し、より実際のデザインに即したデザイントークンを策定するとともに、プロダクトごとの実装差異をなくすためのライブラリの開発に着手しました。 Colorの定義 Ubie Desi
Nintendo Switch™ ネイティブバイナリへの Go コンパイルを成功させた話
本記事は「Go Advent Calender」25 日目の投稿です。 Happy Holidays! EDIT (2022-01-03): There is an English version of this article. tl;dr いままでは Go プログラムを Nintendo Switch 上で動かすために WebAssembly に一度変換し、それを C++ に変換してコンパイルするということを行ってきました。今回、 Go の Nintendo Switch 向けネイティブコンパイルに成功し、実際に手元でゲームを動かすことができました。手法として、システムコール呼び出しを C の関数呼び出しに置き換えるように -overlay オプションを指定してビルドしました。また、 -overlay オプションに指定する JSON を生成するパッケージ Hitsumabushi を開
GoogleのWebAPI設計とWebAPI設計のベストプラクティスを比較してみる
RESTful な URL にしよう 元記事 GET /tickets - チケットのリストを取得する GET /tickets/12 - 指定したチケットの情報を取得する POST /tickets - 新しいチケットを作成する PUT /tickets/12 - チケット #12 を更新する PATCH /tickets/12 - チケット #12 を部分的に更新する DELETE /tickets/12 - チケット #12 を削除する Google GET /events - 予定のリストを取得する GET /events/12 - 指定した予定の情報を取得する POST /events - 新しい予定を作成する PUT /events/12 - 予定 #12 を更新する PATCH /events/12 - 予定 #12 を部分的に更新する DELETE /events/12 -
翻訳: WebAPI 設計のベストプラクティス - Qiita
これは Enchant の開発者である Vinay Sahni さんが書いた記事「Best Practices for Designing a Pragmatic RESTful API」1を、ご本人の許可を得て翻訳したものです。 RESTful な WebAPI を設計しようとすると、細かなところで長考したり議論したりすると思います。また、他の API に倣ってやってはみたものの、本当にそれでいいのか、どうしてそうしているのか分からない、何てことも少なくはないと思います。 この記事では、そのようなハマリどころについて Vinay さんなりの答えを提示し、簡潔かつ明快に解説してくれています。 今後 WebAPI を設計される方は、是非参考にしてみてください。 なお、誤訳がありましたら編集リクエストを頂けると幸いです。 まえがき アプリケーションの開発が進むにつれて、その WebAPI を公
Twitterのフリート機能に対する権限昇格
はじめにTwitterはBug Bountyプログラム(脆弱性報奨金制度とも呼ばれる)を実施しており、脆弱性の診断行為を行うことが認められています。 本記事は、そのプログラムを通して報告された脆弱性についてを解説したものであり、Twitterが認知していない未修正の脆弱性を公開する事を意図したものではありません。 また、Twitter上で脆弱性を発見した場合はTwitterのBug Bountyプログラムより報告してください。 (This article is written in Japanese. If you’d like to read this article in English, please visit HackerOne report.) TL;DRTwitterが公開したフリート機能が使用しているAPIに脆弱性が存在し、READ権限しか持っていないサードパーティアプリケ
Rails JSON APIとサービス高速化 / JSON Serializer 2020
「リードエンジニアから学ぶMedPeerのプロダクト開発」 https://medpeer.connpass.com/event/181835/
国税庁法人番号を使った経産省発、法人種別名の抽出コンポーネントのESモジュール版公開
ブラウザやDenoでサクッと動く、法人番号からの検索するESモジュールができました。 好評な経産省によるオープンソース「IMIコンポーネントツール」の7つ道具、一通りできました！ 「IMIコンポーネントツール」法人種別名の抽出コンポーネント追加(src on GitHub) サンプルとしていれている番号はどんな法人でしょう？ [変換]ボタンを押してみまてください。 使い方は簡単です。下記コードを main.html として保存して、ブラウザで開くだけ！ <script type="module"> import IMIEnrichmentHojin from "https://code4sabae.github.io/imi-enrichment-hojin-es/IMIEnrichmentHojin.mjs"; const main = async () => { const json
Next.js + esa.io + VercelでJAMStackな爆速ブログを構築する - パンダのプログラミングブログ
追記: 本記事がesa.ioの公式Twitterに取り上げられました！ esaに書いた記事をNext.jsで公開する Next.jsのバージョン9.3から、ビルド時に外部ソースからデータを取得するgetStaticPropsというAPIが公開されました。 ブログは静的なコンテンツです。ブログの内容はユーザーに応じて動的に変わるということはありません。そして、getStaticPropsは静的なページを構築するために最適なAPIです。 そこで、esaにmarkdownで書いた記事をNext.jsで表示するサイトを構築しました。 実際にサイトにアクセスして記事を開いてみてください。爆速で遷移するのが体験できます。Lighthouseの成績もバツグンです。（blog-starterをベースに利用したため、コンテンツはそのレポジトリの内容を踏襲しています） デモサイトのコードはGitHubにアップ
ブラウザで何が起こっているのかを知る Reporting API と ReportingObserver | blog.jxck.io
Intro Web サービスにおいては通常、 Web サーバから取得できるアクセスログやエラーログを取得し解析する基盤を保有するだろう。 しかし、 Web サーバから取得できる情報だけでは、ブラウザで何が起こったのかを知るのは限界がある。 今回は、ブラウザ内で起こったことを知るための Reporting API と、その Report の収集について解説する。 Notice 本記事の大半は 1 年以上前に書いたものだが、そのころは仕様も実装もまだまだ落ち着きが無かった。 仕様 report-uri から report-to への移行期 JFV の採用への不安 実装 ディレクティブの実装がバラバラ ReportingObserver では取れるが default group に自動では飛ばない(未実装) ReportingObserver で取った report が JSON Seriali
API Test ライブラリ Tavern のご紹介 - 一休.com Developers Blog
こんにちは。 一休.comの開発基盤を担当しています、akasakasです。 今回は、Tavern という API Test ライブラリ を紹介したいと思います。 一休でAPI Test が必要になった背景 API Test を導入する上で考えたポイント 開発者フレンドリー CI連携 Tavernのご紹介 Tavern のいいところ YAML でテストを記述できる 前のテストの結果を保存できる・次のテストに使える CI連携 Tavern の実運用にまつわる細かい話 まとめ 参考 一休でAPI Test が必要になった背景 前回のブログでも少し触れましたが、APIのテストを無理やりSeleniumを使ってテストを続けた結果、E2Eが破綻しました。 適切なレイヤーで適切なテストをしようということで、APIに関してはちゃんと API Test ライブラリ の導入を決めました。 user-firs
webフロントエンドからwebAPIを呼び出すのをwrapするアレの名前 - 猫型の蓄音機は 1 分間に 45 回にゃあと鳴く
twitterに書いたやつ再掲+加筆。 Webフロントエンド、というかSPAの設計で、単なるwebAPIラッパーに対して「Repository」と名付けるケースが散見されるけど、ぼくはあれあまり好きではないです。というのも、Repositoryという名前がついてると、集約的なもの、それが言い過ぎならいわゆるEntity、それも言い過ぎならひとかたまりのデータを保存、取得するだけの責務のように思えるからです。けど、実際の「Repository」を見てみると、取得されるのは画面の仕様にベッタリなJSONだったり、更新系としてもなんちゃらidとパラメータを渡すようなIFになってることが多いですよね。画面の仕様にベッタリなJSONが返ってくるようになってたり、idとパラメータ渡すだけだったりするのは、多くの場合考えることが少なくて済むし通信量も減る良いプラクティスだと思うので、それ自体は問題ではな
「外部パッケージの型定義もインストールし推論できるTypeScript playgroundを作った」という題で登壇してきました＋スライドの補足
「外部パッケージの型定義もインストールし推論できるTypeScript playgroundを作った」という題で登壇してきました＋スライドの補足 “外部ライブラリもインストール・型解釈できる TypeScript playground を作った”という題で俺得フロントエンド (1) LT 会という勉強会で登壇してきました。スライドはこちらです。 — 外部ライブラリもインストール・型解釈できる TypeScript playground を作った スライドの内容をそのまま書いても意味がないので詳しくはスライドを読んでいただきたいのですが、発表時間の都合・構成力不足で伝えきれなかった部分の補足・補完的なものを書きます。 この playground のより詳細な説明、内部で使ってる技術の説明、この playground に限らず汎用的に活用できそうな技術の話をします。 何を作ったの — Type
Presentation APIを使ってみる - hiroppy's site
GitHub - hiroppy/fusuma: ✍️Fusuma makes slides with Markdown easily. ✍️Fusuma makes slides with Markdown easily. Contribute to hiroppy/fusuma development by creating an ... ステータスは 勧告候補 で、今現在は chrome のみ実装されています。 この API は、Keynote や PowerPoint でプレゼンテーションモードにすると他のディスプレイに出力できるようになる機能をブラウザで実現できます。 ディスプレイの他にも、Chrome Cast や AirPlay 等にも映し出すことも可能です。 とりあえずディスプレイが一枚繋がっているかネットワーク以下に Chrome Cast 等があれば使えます。 いままで
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
インクリメンタルに新しい技術を取り入れる方法。TypeScriptへの移行を例にしたプロセス
ノーコード・コードレスでGoogleスプレッドシートからAPIを作成できる「SSSAPI」β版がリリース
