祖母が就寝するとDBインサートができなくなる - Qiita
世の中には、一見関係なさそうな物理現象がITシステムに不可思議な影響を及ぼすことがあります 例えば,500マイル以上離れた場所にメールが送れないという話だったり 中国人のAさんがお茶を入れると会社のネットが繋がらなくなる という話があります。 私の場合は、祖母が就寝するとDBインサートが失敗する、という状況でした 実家の見守りシステム 問題が起きているのは、離れた実家にいる一人暮らしの祖母の状態を見守るために作成した自作のシステムです。 気温や湿度、CO2濃度、明るさ、部屋のドアの開閉、冷蔵庫の開閉の状況をモニタリングできるようにしています。 Raspberry Piに各種センサが接続され、定期的にInfluxDBに送信し、Grafanaという可視化ツールでいつでも見られるようにしています。 これらの情報を見ることで、祖母の家の部屋の温度が適切か、活動しているか、部屋にいるかなどが分かりま
【Kaigi on Rails 2023】発表資料まとめ - Qiita
2023/10/27, 28 に行われた Kaigi on Rails の資料まとめです。 資料が公開され次第、内容を更新します。公開済みのURLがあれば教えてください。 10/27 スケーラブルActive Jobs with Sidekiq Enterprise (スポンサーLT) Rails アプリの 5,000 件の N+1 問題と戦っている話 HTTPリクエストを手で書いて学ぶ ファイルアップロードの仕組み 生きた Rails アプリケーションへの delegated types の導入 Async Gem で始める ruby 非同期プログラミング Exceptional Rails やさしいActiveRecordのDB接続のしくみ Update Billion Records 初めてのパフォーマンス改善〜君たちはどう計測す(はか)るか〜 Simplicity on Rails
フリーWi-Fiを使ったら秘密情報を抜かれる経路にはどのようなものがあるか - Qiita
ゴールデンウィークのはじめ（4月29日）に投稿された以下のツイートですが、5月7日20時において、1,938.8万件の表示ということで、非常に注目されていることが分かります。 我が名はアシタカ！スタバのFreeWi-Fiを使いながら会社の機密情報を扱う仕事をしてたら全部抜かれた。どうすればよい！ pic.twitter.com/e26L1Bj32Z — スタバでMacを開くエンジニア (@MacopeninSUTABA) April 29, 2023 これに対して、私は以下のようにツイートしましたが、 これ入社試験の問題にしようかな。『スタバのFreeWi-Fiを使いながら会社の機密情報を扱う仕事をしてたら全部抜かれた』と言う事象に至る現実的にありえる脅威を説明せよ。結構難しいと思いますよ。 https://t.co/LH21zphCTV — 徳丸 浩 (@ockeghem) April
Whisperで文字起こしをした議事録の発話者の名前を自動的に判定する！ - Qiita
こんにちは！逆瀬川 ( @gyakuse ) です！ 今日は最近作った議事録文字起こしアプリに話者分離機能をくっつけたものを作っていきたいと思います。 ChatGPT APIの使い方、Whisper APIの使い方、Hugging Face Spacesへのデプロイ方法等を知りたい場合は以下の記事をぜひ！ できたもの openai_keyにOpenAIのAPIキーを入れる メイン音声ファイルに会話音声 (wav, 25MB以内) を入れる 話者 (1) 参考音声ファイルに話者 (1) の参考音声 (wav) を入れる 話者 (1) の名前を入れる 話者 (2) 参考音声ファイルに話者 (1) の参考音声 (wav) を入れる 話者 (2) の名前を入れる 上記を行って送信ボタンを押すと処理が開始されます。なお、参考音声は10秒程度で大丈夫です。実装全体は以下で確認できます。 話者分離 (S
今更ながら graphql-code-generator の便利さを痛感する - Qiita
はじめに 今日も今日とて、フロントReact + バックRailsのSPA + APIのアプリ開発していたところ TypeScriptのReact側で、react-apolloの型宣言がめんどくさいと思っていました。 バックエンド側はGraphQLを使用しているので、いろんなところに型宣言をしているようにも感じて、微妙。。 そこでgraphql-code-generatorを使っていろいろ気持ち悪い部分を解消していこうという話をします。 今回の構成 フロントエンド GitHub React（SPAで） TypeScript create-react-app React Apollo バックエンド GitHub Ruby Rails（APIで） GraphQL ※上記２つのリポジトリはこちらのリポジトリから連動させる仕組みとしました。（開発環境として） とりあえずApolloの公式通りにやっ
開発生産性について議論する前に知っておきたいこと - Qiita
はじめに 事業としてソフトウェア開発を行う企業にとって、自分たちの開発チームの生産性が十分に高いのか、あるいはそうでないのかについては大きな関心があります。 そのこと自体は、何かを計測し、改善するというのは営利企業としては健全です。一方で、ソフトウェアエンジニアリングの世界で「生産性の高さ」だと主張できる汎用性の高い指標は存在しません。こういった状況の中で、「生産性」を巡る議論は経営やビジネス部門とエンジニアチームとの間で繰り広げられ、場合によっては大きな不和や不信感につながることも珍しいことではありません。 今回は、エンジニアの開発生産性について、さまざまなステークホルダーと議論する上で把握しておきたいさまざまな論点について解説します。それによって、「我々が本当に議論すべきテーマは何か」についての共通認識をつくるための土台を構築することを目的としています。 もしかしたら改善したいことは「
至高のDockerイメージ生成を求めて - Qiita
本稿は良いDockerイメージを良い方法でビルドすることを探求した記録である。 Supership株式会社 Advent Calendar 2016の21日目にあたる。 2019年現在は@inductor氏の改訂版を見たほうが良い。 この記事で論じた望ましいコンテナイメージの姿は2019年でも変わらない。ただし、multi-stage buildのような新しい仕組みが普及したりツールの評価が定まってきたりと、実現に用いるツールの状況が2016年からやや変化している。 良いDockerイメージ 良いDockerイメージとは何だろうか。Dockerの利点は次のようなものだから、それを活かすイメージが良いものであるに違いない。 ビルドしたイメージはどこでも動く 適切にインストールされ、設定されたアプリケーションをそのままどこにでも持っていける。 コンテナ同士が干渉し合うことはないので、任意のイメ
React 18のSuspenseを使ってReact Hook Formの非同期な初期値の扱いを簡単にする - Qiita
はじめに 普段はスタートアップで建設業界向けのSaaSの開発をしているtaroと申します。 今回はReact18で登場したSuspenseを触っていたら、React Hook Formでフォームの初期値に非同期な値を設定するのが簡単になりそうだなーって思ったので、試してみました。 React Hook Formを使ったことがない方でもきっとわかるような内容になっていると思うので、ぜひぜひ読んでみてくださいー！ この記事はこちらのイベントに参加しています。 前提を揃えるためにReact Hook Formを少し復習 本題に入る前に、React Hook Formについて少し復習して前提を揃えていこうと思います。 （「復習はいらないよー！」って方は、React Hook FormでSuspenseを使うまで飛んでください！） またSuspenseについては、公式ドキュメントや別の記事等をご参考
React脳によるUIライブラリ書きやすさランキング - Qiita
前回のおさらい 前回の記事では、Reactに有利なベンチマークでUIライブラリに競ってもらいました。 こういうベンチマークに対しては、「実務では〜」みたいな反応が一定数出てくるのが自然の摂理です。 書きやすさランキング そこで、シリーズのまとめとして、より実務に近い指標として「書きやすさ」で競ってもらおうと思います。ただし、今回は筆者の独断と偏見によるランキングとなります。せっかく6つのライブラリで同じアプリケーションを書いたので、感想を記事にして残しておきたいという意図です。筆者と同じくReact脳の方にとっては参考になるかもしれません。 なお、前の記事を読んだ方はお分かりの通り、今回書いたアプリケーションはコンポーネントが何個かのものであり、React以外の知識は公式ドキュメントを一通り読んだ程度です。したがって、今回のランキングはコンポーネントの書きやすさに着目しています。大規模開発
Reactに有利なベンチマークを作ってみた - Qiita
皆さんこんにちは。現在、フロントエンドでは宣言的UIが大流行しており、そのためのライブラリもReactを筆頭に複数存在しています。 ライブラリが複数存在するところには当然のように比較や論争が起こるものですが、UIライブラリの場合はパフォーマンスがよく焦点となります。 筆者はReactの信者ですが、Reactは古株ということもあってか、最近の議論ではReactは他のライブラリと比較されるかませ犬のような役割を担うのがよく見られます。「仮想DOMは必要ない」といった類のものです。 しかし、筆者の考えではReactは今でも、もっとも真剣にパフォーマンスに取り組んでいるUIライブラリです。特に、Reactはパフォーマンスを高いユーザーエクスペリエンスのための手段として捉えており、ドキュメントにもユーザーエクスペリエンスという言葉が多く出てきます。 そこで、今回はReactが最も有利になるようなベン
2022年Reactを使ってる人には必ず知っていてほしい最強のdata fetchingライブラリであるRTK Queryの優位性とメンテナンスの際に役立つTips - Qiita
import type { ConfigFile } from "@rtk-query/codegen-openapi"; // https://redux-toolkit.js.org/rtk-query/usage/code-generation#simple-usage const config: ConfigFile = { schemaFile: "https://petstore3.swagger.io/api/v3/openapi.json", apiFile: "./store/emptyApi.ts", apiImport: "emptySplitApi", outputFile: "./store/petApi.ts", exportName: "petApi", hooks: true, }; export default config; import { empty
ACM + CloudFrontでLightsailをHTTPS化するまでの備忘録 - Qiita
はじめに 以前、AWSのLightsailでWordPressを導入して、Webサイトを構築しました。 前回、構築したWebサイト用に取得したドメインをRoute53に追加しました。 今回は、AWS Certificate Manager（ACM）とCloudFrontを利用して、HTTPS通信可能にしました。 その時の手順を備忘録としてまとめました。 動作環境 macOS Catalina 10.15.4 1. ACMでの作業 ACMでSSL認証書を作成します。ただしこの証明書は、外部で使用することはできませんが、無料かつ自動更新なので管理が非常に容易です。 AWSコンソールへアクセスし、サインインします。 リージョンをバージニア北部に変更します。 サービスを検索するにCertificate Manager入力します。 Certificate Managerコンソールへアクセスします。
import * as 構文とパフォーマンス最適化 - Qiita
JavaScriptには、import * as という構文があります。これは、インポート先のモジュールの中身全部をオブジェクト（モジュール名前空間オブジェクト）として取得できる構文です。 import * as mod from "./some-module"; console.log(mod.foo, mod.bar); たまに、「この構文を使うとTree Shakingが効かなくなる」といった説明が見られることがありますが、必ずしもそうではありません。そこで、この記事ではimport * as構文とパフォーマンス最適化に関連する正しい知識と、その背景をご紹介します。 webpackで検証してみよう Tree shakingを行うのはモジュールバンドラであることが知られています。そこで、webpackを使って色々と構文を検証してみましょう。今回は次のような設定を用います。これは最適化を
console.log(); しか使えなかった自分へ。。。 - Qiita
この記事について Webエンジニアになって早１年半。railsのデバッグをする時にはエディターのデバッガーでスマートにできていたが、javascriptになるといつもconsole.log();ばかりを使って原始的なデバッグをしていた。。。 そんな脳筋な過去の自分に教えてやるための記事です。 console.log({変数名}); 「いきなりconsole.log();の紹介かい！！！」って思われるかもしれませんが、この技を知ったときは「なんで知らんかったんや。。。」って思うくらい便利だったので最初に紹介します。 以下のようなHTMLがある場合 <form> <input type="text" value="名無しの権兵衛" id="name"> <input type="text" value="80歳" id="age"> <input type="text" value="バスケ"
Next.jsのAPI Routesを使ってmicroCMSの検索APIを作成する - Qiita
みなさん microCMS 使ってますか？ めちゃくちゃ便利ですよね！ 最近個人開発で使っていて記事の検索ページを追加したいな〜と思っていたら、全文検索機能で簡単に実装する事が出来たので、メモがてら実装例を紹介したいと思います。 前述の通り microCMS には全文検索機能があり、qパラメータにキーワードを渡すことで、簡単に検索APIを実装する事が出来ます。 クライアント側で API をリクエストすると、 APIキーが漏れてしまうリスクがある為、サーバーサイドで実行するのが一般的なやり方だと思います。 実際に公式サイトでも vercelのserverless function を利用した実装方法が紹介されています。 そこで今回は Next.js の API Routes を使った全文検索APIの実装例を紹介しようと思います。 microCMSデータの作成 最初に検索対象となるデータを作成
Apollo ClientでSSRする時に知っておくといいかもしれないこと - Qiita
この記事は便宜上next.jsのexampleを例に出しているが、apollo clientでSSRしていればわかる内容になっているはず。 デフォルトのままでは使えない？ next.js公式のtypescript例を参考に実装を進めていると、データの取得とキャッシュ周りで、あまりうれしくない挙動をしていた。 うれしい挙動とは apolloのキャッシュ機能をうまく使えば、サクサク動く、サーバー＆データベースにやさしいスーパーサービスが作れるはず。 しかし、しんどさと複数タブのことを考えると、少なくともブラウザ上で動くサービスに関しては、以下のような挙動がうれしいのではないだろうか？ SSRしたときにデータを取得し、クライアントは送り付けられたデータをそのまま使う。 ページ移動→戻ってくるときにはもう一度データを取りにいく。 exampleの挙動とは with-typescript-graph
Rails API + React + devise_token_authでログイン機能を実装する - Qiita
概要 主に個人開発においてRails（APIモード）+ReactでSPA（シングルページアプリケーション）を作成する事が多いのですが、ログイン（認証）部分の実装で毎度ごちゃごちゃと調べ直す事になるので、ちゃんとドキュメントとして残しておきたいと思います。 手順通りに進めれば最低限のものが作れるようになっているため、同じ様な構成のものを作成したいと考えている方は参考にしてみてください。 完成イメージ 特に何の変哲もない光景ですが、SPAでこれをやろうとするとそれなりに手間がかかったりします。 使用技術 バックエンド Ruby3 Rails6（APIモード） MySQL8 Docker フロントエンド React TypeScript Material-UI 今回は再現性を考慮してバックエンドのみDockerで環境構築していきます。 バックエンド 早速コードを書いていきましょう。まずバックエン
本のバーコードを読み取ってNotionで読書録を作成するアプリを作ってみた - Qiita
はじめに はじめまして。インディーゲームを作っております、nyorokoと申します。 ゲームづくりの他に読書が好きで、「読書録を簡単に作成・管理することはできないか？」という問題意識があり、タイトルの通りのアプリを作ってみました。 2022/5/23 思ったよりも反響があったため、加筆した第二弾を公開しました！ 完成したもの 以前Notion APIを用いて、 本のバーコードを読み取る →ISBNを取得する →ISBNから本の情報を取得する →Notionのデータベースに追加する という一連の動作を行うアプリを開発しました💪🏾(´･_･`💪🏾) pic.twitter.com/GqPBPV7sin — nyoroko (@nyoroko_nyoro) February 21, 2022 Notionとは？ Notion公式サイト Notionとは、タスク管理やメモ等を一元的に行うこ
メタバースの技術限界の解説 - Qiita
これらの試算から、1人あたりのトラッキングによる通信量はおおよそ16.88kbpsから112.50kbpsと考えられます。 スター型ネットワークの場合 ここでメタバースでスター型のネットワークを採用することを考えます。 どのような構成かというと、クライアントがトラッキングデータをサーバーへ送信します。各クライアントへのトラッキングデータの送信はサーバーが行います。 こうした構成を行う場合、全てのクライアントのデータがサーバーを介し、各クライアントへ流れ込みます。そのため、通信速度は下り速度がボトルネックとなります。ここでは人口75%ラインの88Mbpsを上限として考えます。 先ほどの1人当たりのトラッキングに関わる通信量から算出すると、スター型の場合、801～5,340人が通信の限界になります。 フルメッシュ型ネットワークの場合 一方で、サーバーを介しないクライアント同士が直接つながるフル
useRefでステートを管理するのはReact18でアンチパターンになるからやめよう - Qiita
こんにちは。最近、Reactでのステート管理において「useStateの中にステートを置くのではなく、useRefで得たrefオブジェクトの中にステートを置いてuseState（またはuseReducer）をコンポーネントの再レンダリングを発生させるためだけに使う」というやり方を複数の記事で見かけました。このパターンは、今（React 17以前）は動くけどReact 18でアンチパターンに変貌するやり方なので、啓蒙するためにこの記事を用意しました。 ステート（コンポーネントのレンダリングに使用される値）は、useRefではなくuseState（またはuseReducer）をちゃんと使って管理するようにすれば、React 18以降も安泰です。 useRefをステート管理に使うパターンとは こういうやつです。 // 普通のやり方 const Counter1: React.VFC = () =
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
