はてなブックマーク

Whisperで文字起こしした文章をいい感じにしたい タイトル通りです。 Whisperで文字起こしをしました。 ただ、以下のように句読点がない文章になってしまい、読みづらいです。 樋口 世界の歴史キュレーションプログラム コテンラジオ樋口 世界の歴史キュレーションプログラム コテンラジオパーソナリティーの株式会社ブック代表樋口清則 です深井 そして株式会社コテンの深井 隆之介です樋口 そして株式会社コテンの楊 英史です樋口 このラジオは歴史を愛し歴史 の面白さを知りすぎてしまった深井さんを代表とする株式会社 コテンのお二人と一緒に学校の授業ではなかなか学べない国内外 の歴史の面白さを学んじゃおうという番組ですよろしくお願いします これを修正するのは結構たいへんそうですね。いい感じにやっておいて欲しいです。 ChatGPTでいい感じにする こんなときに頼りなるのがChatGPTですね。プロ

私は Ruby ビギナーなんですが、最近ちょっとしたきっかけがあって、Ruby に興味津々です。 そこで、Ruby(MRI)をちょっとだけ改造して遊んでみました。 Ruby に貢献！みたいな良い話ではなくて、自分の手元の Ruby に対してあんまり意味のない改造を施して、楽しいね！ っていう類の話です。 ちなみに C 言語はほとんど書いたことありません。 どう遊ぶか 私はパーサーがちょっとだけ好きなので、パーサーを触ってみたいと思いました。 パーサーを触るような改造をするなら、新しい構文を追加してみるのがてっとり早そうです。その中でも二項演算子なら簡単なのではないかと考えました。 ということで、(私が日頃から書いている)JavaScript にあって Ruby にはない演算子として、>>> 演算子を実装してみることにしました。 >>> 演算子は、符号なし右シフト演算子というやつで、Java

内容 らくがき記事、RDSでダウンタイムなしの24-365構成ってどうすればと思い書いている記事です。 とりあえずはRDSでメンテナンスやアップデート処理が走る時に、サービスダウンするのか否かを整理した資料となります。 RDS(MySQL)の整理 機能概要 最大 64 TiB のデータベースサイズをサポート 汎用インスタンスクラス、メモリ最適化インスタンスクラス、およびバースト可能パフォーマンスインスタンスクラスをサポート 自動バックアップとポイントインタイムリカバリをサポート。 単一のリージョン内または 5 つのリードレプリカのクロスリージョン内で、インスタンスごとに最大 15 個のリードレプリカをサポート 可用性と耐久性 ３種類のオプションが選択可能 単一DBインスタンス スタンバイインスタンスのない単一の DB インスタンスを作成します。 マルチAZ DBインスタンス 別のアベイラビ

最近の AI 技術の進歩は目覚ましく、OpenAI による ChatGPT などの API の提供は沢山のアプリケーション開発者にとって Python を使った開発を始めるきっかけになったのではないでしょうか。筆者もそのうちの 1 人です。 効率的かつ再現性の高い開発環境は必要不可欠であり、それを実現するためのツールの一つが Docker です。Docker はアプリケーションを容易に再現可能なコンテナ内で動作させることができ、開発から本番環境まで一貫した環境を提供します。これで「僕の環境では動いているんですけどねぇ...」といった問題[1]を避けることができます。 本記事では、AI 時代に立ち向かうべく筆者が Python 初心者なりに取り組んだアプリケーション開発の方法の一つを解説します。 ディレクトリ構成 このような形を目指していきました。 . ├── .devcontainer │

はじめに フロントエンドエンジニアの守備範囲が広がる昨今、みなさん(主にフロントエンドエンジニアの皆々様方)は普段からReactやNext.js等でアプリケーションの開発を行う際に、脳死でVercelデプロイを選択していませんか？ 自分は完全に脳死でVercelデプロイを選択し、${アプリケーション名}.vercel.appのドメインでアプリケーションのホスティングを行っていました。 今回は、普段Vercelがやってくれているホスティングを理解したいフロントエンドエンジニア向けに、「Vercelに頼らず、CloudFront + S3 + Route53を使って独自ドメインでアプリケーションのHTTPSでホスティング・公開する手順」を紹介できたらと思います。 記事を読み進める前に 今回は説明は省略しますが、独自ドメインをお名前.comを使用して取得しております。 本記事では、独自ドメインを

はじめに 煽りから入るパターンで書き始めます。ケニーです。 なんとなくテストの重要性は頭で分かってはいるものの、後回しにしてしまう事ってないですか？ 最近の私は業務でテストに関わる事が多く、学びも非常に多いので、複数回に分けてアウトプットしてみようと思います。 第一回目はテスト駆動開発についてです。 テスト駆動開発とは 【テストケースから書いて、実装していく手法】 で、 Test-Driven Development：TDDと略して記載するケースが多いです。 例）テストを書かずに、実装をした場合 数か月後にコードの修正をしたら、すべて正しく動作している事を保証できますか？ 他にデグレは無いと断言できますか？ 修正や機能追加する度に、すべての動作を手動で確認しないといけませんか？ メリット 後に上記のような課題に直面する前に、手を打っておきましょう。というのが今回の手法。 テストコードがある

これだけみると LibC がよく見えますね。 オープンソースのライブラリ比較や、エンタープライズな SaaS が競合に対する優位を見せたいときに星取表が使われることが多いです。 中立な立場でライブラリを選定する過程として出てくることがあります。 自分はこれに全く意味がなく、むしろ競争的な立場では出した側が負けるものと認識しています。 星取表を作る側の意図 よく見かけるパターンがこれです。 開発自体は長いため機能が豊富だが性能に劣る先発が、後発を貶めている 恣意的な項目選定で、そもそも負けている そもそも比較対象としての土俵が違う(全部入りのフレームワークと単機能なライブラリの比較) 特に 1 と 2 の組み合わせが多く、この裏では非機能要件で圧倒的に負けていることが多いです。例えば A は機能は豊富だけどビルドに 30秒で、Bは機能は足りないけど3秒だといった場合、多くの場合ではまず B

技術記事を書くまでのステップについて順にコツを解説していきます。 特に、技術記事を書きたくてもテーマ選定が難しい、文章が苦手だ、なぜか筆が進まない、うまくまとめられないといった方に読んで欲しい記事です。 一応、エンジニア歴としては数年以内のジュニアレベルの方を想定しています。 以下のように技術記事を企画して、書いて、公開するためのプロセスごとにちょっとしたコツをまとめています。気になるセクションだけでも読んでいただければ幸いです。 テーマを決めよう 対象読者を決めよう 章立てを決めよう 書こう タイトルを決めよう 【余談】技術記事を書く理由とは 筆者について QiitaとZennにて6年以上の記事発信経験があり、 Qiitaでは5,942Contributionsを記録、 Zennでは3,253Likesをいただいています。 テーマを決めよう コツ：テーマのカテゴリによって執筆のポイントや

今回は、私が何度も挑戦しつづけて失敗してきた「RSSリーダーを利用した情報収集」を遂に成功したので紹介させていただきます！ 失敗してきた理由 RSSリーダーを使ったことがある方にとっては、あるあるな話だとは思っているのですが、失敗してしまった主な理由は以下の通りです。 未読記事が貯まり続けた結果、使い続けるのが嫌になった。 自分にとって興味のない情報が入って来る場合があり、次第に情報の取捨選択が面倒になった。 外部サービスと連携しすぎていたら、各デバイスでサービスにログインするのが面倒になった。 要するに私は面倒くさがりなんです…🫠 ですが、RSS リーダー「inoreader」のプロプランを利用してみたところ、 こんな面倒くさがりの私でも、情報収集を習慣化できたので「inoreader」の推しポイントを紹介させていただきます！ 「inoreader」の推しポイント inoreader

Next.jsを使っている時に ISR や On-demand ISRをを当たり前に使っているのですが、Next.js がどういうふうに動いているのか小さい検証環境を用意して検証しました。 ISR, オンデマンドISRとは はじめに、ISRと On-demand ISR (On-demand revalidate) について軽くおさらいしておきます。 ISR ISR は SSG したページを revalidate で指定した時間を超えてからアクセスがあった時に、更新がないか再検証して、ページを更新する機能です。 オンデマンドISR オンデマンドISR はこの ISR をさらに強化したような機能で、ISR だと revalidate で指定した時間を待たないとページが更新されなかったのに対して、任意のタイミングでページを更新できるようにしたものです。 使い方などはこの記事では触れないので、m

前提 この記事は内製開発をしているSaaSの中の人であるエンジニアが、SaaSの内製ソフトウェア開発をする上での話として書いています。 前ふり 「スクラムで生産性は上がらないしリリーススケジュールが狂いまくりなんですよ」 「何が原因なんですか？どうすればいいんですか？」 という相談を受けました。 NDAを書いてから、どれどれとチームの状況を見てみました。 該当チームのスプリントゴール 該当チームのスプリントゴールはこんな感じでした。 QAフェーズのプロジェクトAを、QA作業を完了してリリースできる状態まで進める 実装フェーズのプロジェクトBを、フィーチャーの実装率を50%まで進める 設計フェーズのプロジェクトCを、要確認な点を除いて実装レディーな状態まで進める スプリントゴールが3つありますね。とても面白いですね。 思わずボンドルド卿みたいな反応をしたくなりますがここは先に進みましょう。

注意事項 本記事は自分の研究用の記録をメインの目的として残しています。 中には仕様が定かではないソースや自分の勉強不足からくる誤解が書いてある可能性があります。あらかじめご了承ください。 以前の記事でMultipath QUICとQUIC-LBのInternet Draftについて読んでみました。 Multipath TCPとL4ロードバランサにおいては、後述するいろんな問題があるようです。 そんな中、表題の組み合わせは実現しうるのか考察してみます。研究の記録として取り扱っていきます。 MultiPath TCP Multipath TCP(MPTCP)もMPQUICと同じように複数のコネクションを一つのコネクションとしてまとめて接続する技術です。 Multipath TCPはMPQUICとは違い、IPレイヤの情報に基づいて経路を増やします(MPQUICは4-tuppleに基づかないcon

Terraform 1.5 のベータ版がリリースされています。 Terraform 1.5 で追加される機能の中には以下のようなものが含まれています。 import ブロック terraform plan の -generate-config-out オプション Terraform では手作業などで作成済みの既存リソースも terraform import コマンドを使用して Terraform の管理に追加することができます。 しかし、 import したリソースの HCL 自体は自分で書かなければいけません。 もしも既存リソースの HCL を自動で生成したい場合は GoogleCloudPlatform/terraformer などのサードパーティ製のツールを使用する必要があります。 ところが、 Terraform 1.5 で追加される import ブロックと terraform p

Create-React-Appの始め方 ■ Create-React-Appの準備 Create React Appを使用するには、Node.jsをインストールする必要がある。 (※すでにNode.jsをインストールしてある場合には、この手順は不要。) なぜREACTを始める時Node.jsが必要か。 REACTでプロジェクトを作成するにあたり、Node.jsが必要な理由について。 まずは、Node.jsをとは、も書いていきます。 ■ Node.jsとは Node.js はスケーラブルなネットワークアプリケーションを構築するために設計された 非同期型のイベント駆動の JavaScript 環境です。 Node.js公式Docsより サーバーサイドのJavaScriptランタイム環境。 JavaScriptは通常、ウェブブラウザ上でクライアントサイドのスクリプトとして使用されるが、 Nod

Text-to-3Dがアツい 最近かなりText-to-3Dモデルがアツくなってきました。昨年9月末に発表されたDreamFusionから急速に発展し、11月にはMagic3DやLatent-NeRF, 12月にはSJCやDream3D, 今年に入って3月にはFantasia3DやText2Room, 今月5月にはOpenAIのShap-E, Text2NeRFが発表されるなど、ちょうど1年ほど前のText-to-Imageモデルの盛り上がり方を彷彿とさせます。 ※この記事は2023/5/29に執筆したものです その中で、5/25に発表された ProlificDreamerが強すぎるというのがあります。 まずこれを見てください。一番右がProlificDreamerで生成された3Dモデルです。左３つの既存手法はどこかもっさりとしているのに対し、ProlificDreamerはまるでどの視点

sumirenです。 背景 フロントエンド界隈はベンダやコミュニティ主導で新しいアーキテクチャや技術的手法がどんどん出ていて素晴らしいです。 一方、そうして量産されてきた用語が、界隈の変化に置いていかれている側面もあるように思います。例えば、SSRという用語を取り上げると、コンポーネントからHTMLへの変換を指すこともあれば、サーバー側でデータを取得することを指すこともあります。 実際、業界のパイオニアであるVercel/Next.jsも、そうした現状に対する懸念を持っているように思われます。実際、Next.js App Routerでは、以下のような変化が見られます。 getXXXPropsが廃止され、fetchに対する引数で表現されるようになった SSRやISRという「レンダリング」という言葉を、フェッチの文脈で使わなくなっている しかし、そっとドキュメントを書き換えた程度では、人々に

TL;DR 「正しく説明できないな」となった人は useEffect を使ったり useEffect の関連記事を読む前に、ここで一緒に理解していきましょう。 この記事を最後まで読めば useEffect の基本についてはバッチリになると思います。 useEffect の基本 以下のような形が基本形となります。 第一引数には useEffect のコールバック関数、第二引数には依存配列と呼ばれるものを渡します。 依存配列に値を渡した場合、その値が更新された際にコールバック関数が実行されます。

こんにちは！ 17さい3年生の「ソテツ」です✨ 去年に勉強を始めて、初めて一からQuickURLというサービスの個人開発ができたので紹介します！ ですが自信満々で作ったのにあんまり使ってもらえてない現状…😇 応援してやろうと思ってくれた方は拡散お願いします！本当に！ どんなサービス？使い方は？ QuickURLは簡単に言うとURLをブックマークして、複数サイトをセットで開けるサイトです 頻繁にセットで使うURLを登録しておくことにより、ワンクリックで開封することができます Googleでログインするだけで使用することができます✨ なぜこれを作ったのか？ 最大の理由としては、「自分が既存の類似サービスを触ってみて使いにくいと感じたこと」です 既に拡張機能などで類義品はあるのですが、個人的に画面がみにくくて非常に使いにくかったです。また、使っていてどうもテンションが上がりませんでした なので

はじめに コーヒーはコーヒー粉にお湯を注ぐなどして得られる抽出液である。抽出の方法の1つに粕谷 哲さんが発明した“4 : 6メソッド”という手法があり、これは要約すると下記のようになる。 コーヒー抽出の工程を注ぐお湯の量で前半4割と後半6割に分割する 前半4割の抽出においては、2回または1回お湯を注ぐがこのときの割合をコントロールする 後半6割はお湯を分割する回数をコントロールする このような調整を行うことによって、コーヒーの甘さ・酸味、濃さをある程度の再現性をもって調整できるという方法である。この手法は大変よいものであると思いつつも、次のような問題があると感じていた。 コーヒー豆の質量比でお湯の量を決定するが、豆 : 水 = 1 : 15以外の比率を用いると計算が複雑になる 前半4割の抽出では、1 : 1以外の比率を用いると計算が複雑になる 後半6割の抽出では抽出回数によっては1回あたり

Quartzという言語をデザインしてコンパイラを書いて自身をコンパイルできるところまで到達したので記録として書く (人に使ってもらうことなどは特に想定してないので、ドキュメントなどはありません) Quartzについて 言語機能的にはGoとかに近く、syntax的にはRustに近い言語としてデザインした。ターゲットとしてWASM(wat形式)のみサポート。 元々の想定として、ゲームのスクリプトやアプリケーションのプラグインなど、動的に読み込めて気軽にかけて、型やLSPなどの現代的なDXは提供したいというモチベで作り始めた。 例えばfizzbuzzのコードは以下のような感じ。 fun main() { for i in 1..100 { if i % 15 == 0 { println("FizzBuzz"); } else if i % 3 == 0 { println("Fizz"); }

前回、App Routerの遷移の仕組みと実装についてまとめました。 今回はこれの続編として、App RouterのClient-side Cacheの仕様や実装についてまとめようと思います。まだドキュメントに記載のない仕様についても言及しているので、参考になる部分があれば幸いです。 App Routerのcache分類 App Routerは積極的にcacheを取り入れており、cacheは用途や段階に応じていくつかに分類することができます。まずはそのcacheの分類を確認してみましょう。 Request Deduping Request Dedupingはレンダリングツリー内で同一データのGETリクエストを行う際に、自動でまとめてくれる機能です。 nextjs.org/docsより デフォルトでサポートしているのはfetchのみですが、Reactが提供するcacheを利用することでDBア

いまさら気づいたけど Headless 系のUIライブラリが一番 AI と相性いいのではないか。 ロジックはプログラマで書けて自由度高いし、コンポーネントのネスト構造から意図を読み取れるだろうし、class 名は自由に書けるから意図を表明しやすい。 それをプロンプトとして ChatGPT or Codex にそのまま投げて書かせる、ができる。 というわけで vite + react + radix-ui + vanilla-extract で実験してみた。 プロンプト あなたは凄腕のマークアップエンジニアです。 radix-ui は Headless UI ライブラリで、UIとしてのセマンティクスのみを持っています。 次のコードは React + radix-ui + vanilla-extract で書かれた React コンポーネントです。 // Popover.tsx import

音声のテキスト変換 Web上にいくらでも情報があるWhisperでの文字起こしです。API使うとお金がかかるので、ローカル環境でDocker使って（Docker使えれば）手軽に実行できるのが特徴です。 CPUでもGPUでも動きます。Apple SiliconMacでもLinuxでも多分Windows(WSL2)でも動きます。 Dockerファイルや使うソフトはGitHubのリポジトリに公開しています。 この記事は上記リポジトリの自分のための使い方のメモです。 使い方 ファイル準備 文字起こしする音声ファイルを用意します。ここではinput.mp3とします。 Docker準備 Dockerがない人は、Dockerをインストールしましょう。LinuxかWindows(WSL2)なら、とりあえず以下コマンドを実行すればOKです。Macの人はDockerデスクトップを使いましょう。 $ curl

はじめに よくAWSの仕事をするので、開発環境をAWS Cloud9(以下Cloud9)で用意することがある。 IAM Roleが使えるのでAWS内の開発は便利なのだが、そのままPythonで開発しようとすると、2023/05/27時点でこう表示されるので、ちゃんと開発環境作らなくちゃね。という気持ちになる。 久々にLangChainやLlamaIndexやらで盛り上がってるし、Python環境でも作るか！ と思い立った筆者。じゃあ何を準備すればいいんだっけ、と軽く調べただけでもpip, venv, pyenv, pipenv, poetryなどの選択肢がありすぎて、もうこの時点でげんなりする。Pythonのパッケージマネージャの周辺事情はずっと混沌としていたんだった…… ただ最近は比較的よさげなプロジェクトのRyeがあるので、今回はこれで環境を整えてみる。 Ryeとは 上で書いたような「

今までPolyrepoによるクライアントやバックエンドの開発を行ってきましたが、 規模が大きくなるにつれて問題が発生しやすくなったり、作業効率に影響が出るようになってしまったため、この度Monorepo構成へ移行しました。 そのときの手順について紹介したいと思います。 Polyrepoの課題とMonorepoへ移行する目的 Polyrepo運用時の一番の課題はリポジトリ間の依存関係を合わせづらいことにあります。 例えばクライアントの開発をするにあたってAPIが必要となった場合、 バックエンド側の対応が先に終わってる必要があるといった一種の依存関係があります。 この1点だけならPolyrepoでもMonorepoでも大きな違いはないかと思いますが、 iOS、Android、Webといったようにクライアントが複数ある場合や、 Protocol Buffersのような定義ファイルを別リポジトリに

これは未実装のアイデアを含む記事です。(後述する lint rule が未実装です) 要は EffectSystem を作ろうとしました。 https://www.eff-lang.org/ void に意味を込めたい こういうフロントエンドのコードについて考えてみましょう。 function mount(): void { const div = document.createElement('div'); div.textContent = "hello"; document.body.append(div); } function print(): void { console.log("hello"); } function maybeError(): void { // 低確率で例外が起こる関数 if (Math.random() > 0.999) { throw new Err

はじめに 2024年4月1日から障害者差別解消法の方針が改定される。この法律は「障害を理由とする差別の解消を推進する」ために、以下の3つを行うこととしている。 不当な差別的取扱いの禁止 合理的配慮の提供 環境の整備 「合理的配慮の提供」とは、障害のある人から「社会の中にあるバリア(障壁) を取り除くために何らかの対応が必要」との意思が伝えられたときに、行政機関等や事業者が、負担が重すぎない範囲で必要かつ合理的な対応を行うこと。 「合理的配慮の提供」は、これまで行政機関等は義務、事業者は努力義務とされていたが、改正法により、2024年4月1日から事業者も義務化されることとなる。 これによって、事業者のWebページにも何らかの配慮が義務となる。「合理的配慮の提供」が義務化されることで、Webサイトやアプリケーションの分野では、どのような対処が必要となるのか、2024/4の方針改定までに取り組む

はじめに TailwindCSSはJITモードが搭載されてからずっと使っています。 私自身、Tailwindを使うことで大幅に実装効率があがっているので、私なりのTailwindを使いたい理由を書いてみたいとおもいます。 と、そのまえに、、、 TailwindCSSを使うには学習が必要です 例えばシンプルな角丸のボタンです。 <button class="rounded border border-sky-400 text-white font-bold px-2 py-1 bg-sky-300 disabled:border-gray-300 disabled:bg-gray-300 disabled:text-gray-100">ボタン</button> <button class="○△□×○△□×○△□×○△□×○△□×○△□×○△□×○△□×○△□×○△□×○△□×○△□×○△□