AIラジオ『zenncast』の技術構成（プロンプトつき）
先日、個人開発していたzenncastというWebサービスをリリースしました。 Zennでトレンドになっている記事を、毎日AIが10分のラジオにして届けてくれるというサービスです。 ありがたいことに公開後はたくさんの方に試してもらえ、技術的な質問も多数いただきました。 このZennではzenncastの技術構成や仕組みを紹介します（プロンプトつき）。 作ったもの まずはエピソードを一つ選んで1分くらい聴いてみてください！ AIラジオの雰囲気が掴めると思います。 主な機能・特徴 毎朝10分のラジオを生成 Zennでトレンドになっている記事を要約して紹介 お便りを投稿すると、翌日のエピソードでAIパーソナリティが拾ってコメントしてくれる BGMをつけて爽やかな聴き心地 これらのステップは人の手を介さずすべて自動化されています。 Spotifyなどの各種プラットフォームへの配信はSpotify
Playwright & Vite ではじめる脱レガシー向け軽量 Visual Regression Test - Cybozu Inside Out | サイボウズエンジニアのブログ
こんにちは！フロントエンドエキスパートチームの @mugi_uno です。 みなさんは Visual Regression Test は普段活用していますか？ 昨今では事例もよく耳にするようになった印象です。一度使って手放せなくなった方もいるのではないでしょうか。 今回の記事では、通常のプロダクト新規開発とは異なる “脱レガシー” の文脈で Playwright を用いた簡易的な Visual Regression Test を試してみたので、導入に至る経緯と、どのように実施しているかを紹介します。 フロントエンドリアーキテクチャとサイレントリリース 現在サイボウズでは kintone のフロントエンドリアーキテクチャプロジェクトと称して、Closure Tools から React への脱レガシー作業が進行中です。プロジェクトの詳細については @koba04 が書いた次の記事をご覧くださ
terraform で静的ファイル配信サーバーのインフラをコピペできる状態にする - Qiita
背景 個人開発アプリを作る時に、LP等の用途で静的ファイルを単純に保存・配信するだけのサーバーが必要になることが多い。 毎回 AWS Management Console から同じ手順で作っていたが、環境ごとに設定したりするので地味に面倒くさい terraform で「コードをコピペするだけで S3, CloudFront, ACM, Route53 周りの設定を完了できる」ような状態にしたい 相手の本棚を覗けるマッチングサービス「MatchLab」の LP を terraform で管理できるようにしてみた。 目次 terraform とは 使い方 既存のインフラを terraform 管理に移行する GitLab CI/CD で変更を検知して自動化 terraform とは https://www.terraform.io AWS 等のインフラの設定を宣言的に書いておくことで、コードに
障害対応をがんばるPMは尊い｜さとじゅん
メルペイでPMしてます、さとじゅんです。 言いたいことはタイトルの通りです。 「障害対応がんばるPMは尊い！！！！！！！！」」 現場からは以上です。 ありがとうございました。 、、、と言うくらい、タイトルでもう言いたいことの80%くらいを言い切ってしまいました。 ちなみに最初に言っておきますが、障害対応自体はPMだけでなく関わった方すべてが尊いです。 これは間違いありません。 今回はPMに焦点をあてた内容にしたかったのでこのタイトルにしました。 障害が起きた時、とてもプレッシャーのかかる局面だったかと思います。 なにが起きてるのかわからず焦ってしまったと思います。 それでも仲間と乗り越えてきたんだと思います。 みなさま本当にいつもお疲れさまでございます。 まえおきということで、プロダクトを運用していく過程で障害対応は避けては通れないですよね。 昨今の華々しいプロダクトマネジメント論はプロダ
Email Address Regular Expression That 99.99% Works.
Just copy and paste the email regex below for the language of your choice. Feeling hardcore (or crazy, you decide)? Read the official RFC 5322, or you can check out this Email Validation Summary. Note there is no perfect email regex, hence the 99.99%. General Email Regex (RFC 5322 Official Standard) (?:[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*|"(?:[\x01-\x08\x0b\x0c\x0e-\x1f\
Deno by Example
Deno is a simple, modern and secure runtime for JavaScript and TypeScript that uses V8 and is built in Rust. Deno by example is a collection of annotated examples for how to use Deno, and the various features it provides. It acts as a reference for how to do various things in Deno, but can also be used as a guide to learn about many of the features Deno provides.
移行パターン（ストラングラー、抽象化ブランチ、同時実行）を活用してブラックフライデーを乗り切った負荷対策 - エニグモ開発者ブログ
エンジニアの木村です。この記事は Enigmo Advent Calendar 2021 の 13日目の記事です。 いろいろやってますが、BUYチームという購入UXに関わる機能開発を担当するチームのマネージャーもやっています。１１月末に行われるブラックフライデー、サイバーマンデーといった大型キャンペーンに備えた開発もそのチームで担当したのですが、今日はそれに備えて行った負荷対策の１つの取り組みについてお話しします。 悔しい思いをした去年のブラックフライデー 平素よりBUYMAをご利用いただきまして、誠にありがとうございます。 本日0時頃より、サイトに繋がりづらい状況が続いており、現在復旧に向けて全力で対応を行っております。 ご不便をお掛けしてしまい大変申し訳ございませんが、何卒ご理解を賜りますようお願い申し上げます。— BUYMA(バイマ)| 海外ファッション通販サイト (@BUYMA)
GitHub - alan2207/bulletproof-react: 🛡️ ⚛️ A simple, scalable, and powerful architecture for building production ready React applications.
React is an excellent tool for building front-end applications. It has a diverse ecosystem with hundreds of great libraries for literally anything you might need. However, being forced to make so many choices can be overwhelming. It is also very flexible, you can write React applications in any way you like, but that flexibility comes with a cost. Since there is no pre-defined architecture that de
Reactベストプラクティスの宝庫！「bulletproof-react」が勉強になりすぎる件
Reactアプリケーションのアーキテクチャの一例として公開されているGitHubリポジトリ「bulletproof-react」が大変勉強になるので、私自身の見解を交えつつシェアします。 ※2022年11月追記 記事リリースから1年ほど経過して、新しく出てきた情報や考え方を盛り込んだ続編記事を書いていただいているので、こちらも併せて読んでいただければと想います（@t_keshiさんありがとうございます！）。 ディレクトリ構造が勉強になる まずはプロジェクトごとにバラつきがちなディレクトリ構造について。 ソースコードはsrc以下に入れる bulletproof-reactでは、Reactに関するソースコードはsrcディレクトリ以下に格納されています。逆に言えば、ルートディレクトリにcomponentsやutilsといったディレクトリはありません。 たとえばCreate Next Appで作成
Gatsby+microCMSサイトにAlgolia全文検索機能を実装 - Qiita
Gatsby+microCMSサイトにAlgolia全文検索機能を実装 経緯と調査 Bing Custom Searchの設置 サイト内検索機能として自社サイトにBing Custom Searchを設置（サイト内検索）のとおりBing Custom Searchを埋め込む予定だった。しかし、<Helmet />やhtml.js、Iflamely、様々なことを試したが駄目だった。表示されない。 Markdownファイルを検索用データにする 以下のコマンドでマークダウン用のプラグインを追加、 そしてマークダウンファイルを作りローカルに保存。プラグインでそれを読み込んで検索するやり方がある。悪くない。しかし全文検索でなくキーワードに登録した単語での検索になる。マークダウンファイルの準備も必要。 参考： Gatsby製ブログでサイト内検索を実装しました Gatsby と Netlify で Ja
2020年に立ち上げたWebフロントエンド構成の振り返り
こんにちは、よしこです。 株式会社ナレッジワーク というスタートアップで、2020年4月の創業時から一人目のフロントエンドエンジニアをしています。 初期に考えて組み上げたスタックで1年半ほど開発・運用してみて、なかなか快適に日々開発ができているので 新規開発のプロダクト立ち上げ時にどのようにフロントエンドを構築したのか？ 立ち上げから1年以上開発・運用を続けてきた今、それらの選択はどうだったのか？ を記事にして振り返り、公開したいなと思いました。 （プロダクトの内容はステルスで進めていてあまり対外的な発信ができないので、かわりに技術的なところはどんどんオープンにしていきたいなという気持ちがあります） いろいろな項目ごとに振り返りたいので、この記事は各項目を横断するindexとして項目ごとの概要を簡単に説明し、深堀りは項目ごとに追って詳細な記事を書いていく予定です！ 前提 プロダクトとしての
"6年分"のRailsバージョンアップをなめらかに行う方法！ - AppBrew Tech Blog
こんにちは、id:r7kamura です。業務委託という形で1年ほど関わりながら、美容のクチコミサービスLIPSに利用しているRuby on Rails (以下Rails) というWebアプリケーションフレームワークのバージョンを、4.2から6.1に上げました。 Rails 4.2のリリースは2014年、Rails 6.1のリリースは2020年なので、およそ6年分のバージョンアップを一気に推し進めたことになります。 今回はこれを題材に、この手のフレームワークのバージョンアップ時に起こりがちな諸問題や、やって良かったこと悪かったこと等について振り返ろうと思います。 あまりRailsに限った話はしないように心掛けて書いたので、こういったバージョンアップ作業に興味がある方にはぜひ読んでいってもらえればと思います。 変更の粒度など レビューのやり方 複数データベース対応で困った話 テストがなくて困
実践！ Typescript で DDD - マイクロサービス設計のすすめ - Leverages Tech Blog
対象読者 マイクロサービス化を検討しており、実際に作る場合の構成を参考にしたい。 ドメイン駆動設計について、基本的な用語の知識がある。 TypeScript を多少触ったことがある。理解がある。 はじめに こんにちは。エンジニアの吉村です。 現在、弊社が運営する teratail というサービスに携わっており、CakePHP で動作しているモノリシックな既存サービスをマイクロサービスに移行するというプロジェクトを進行中です。 この記事では、実務を通して得た知見として、マイクロサービス化によりどんな恩恵があるのか、具体的にどのような構成で実装をしているのかについてご紹介します。 TL;DR マイクロサービスのバックエンドサービスの実装に焦点を絞って、ドメイン駆動設計 + オニオンアーキテクチャをベースに設計をしました。 本記事では、具体的に「ユーザ新規登録処理」の実装をする場合を例にとり、実
Elm at Rakuten | Rakuten Engineering Blog
In our team at Rakuten, we have been using Elm1 in production for almost two years now. This post is about our story, the lessons we learned, and our likes and dislikes. This post is quite long so if you prefer to see an overview, feel free to jump to the index. Everything started in the Berlin branch of Rakuten during the summer of 2017. We were maintaining a medium-size single-page application w
CLS改善した結果、事業成果がグンと上がった話 | CyberAgent Developers Blog
はじめに こんにちは、AmebaマンガでWebフロントエンジニアをしています、小林と岸です。 本記事ではAmebaマンガフロントエンドチームが取り組んだWebパフォーマンス改善の取り組みと成果を紹介します。 Amebaマンガのフロントエンドチーム紹介 Amebaマンガはマンガをスマホ完結で購入・閲覧できる、電子コミック配信サービスです。23時間待てば無料で読める無料連載、編集部による特集などのコンテンツで、新たなマンガとの出会いを支援しています。 Amebaマンガのフロントエンドチームは5名の体制です。うち半数がプロダクトの運用に関わる新機能の開発や改修をメインに、もう半数が今回お話しするパフォーマンスを中心としたWEBの品質改善をメインに日々開発をおこなっております。 なお、建てつけ上「パフォーマンス」と「プロダクト」の開発に二分となっておりますが、これは専任ではありません。 プロダクト
Python言語による実務で使える100+の最適化問題 | opt100
指針 厳密解法に対しては、解ける問題例の規模の指針を与える。数理最適化ソルバーを使う場合には、Gurobi かmypulpを用い、それぞれの限界を調べる。動的最適化の場合には、メモリの限界について調べる。 近似解法に対しては、近似誤差の指針を与える。 複数の定式化を示し、どの定式化が実務的に良いかの指針を示す。 出来るだけベンチマーク問題例を用いる。OR-Libraryなどから問題例をダウンロードし、ディレクトリごとに保管しておく。 解説ビデオもYoutubeで公開する． 主要な問題に対してはアプリを作ってデモをする． 以下，デモビデオ： 注意 基本的には，コードも公開するが， github自体はプライベート そのうち本にするかもしれない（予約はしているが， 保証はない）． プロジェクトに参加したい人は，以下の技量が必要（github, nbdev, poetry, gurobi); ペー
あと2時間でElastiCacheのメモリが枯渇！そのときあなたは何をしますか？
突然ですが... あなたは、あるゲームプロジェクトの本番リリース2日前にサーバエンジニアとしてJOINしました。いざリリースを迎えたとき、ElastiCacheのメモリが突然危険域を超え、さらにあと2時間で枯渇しそうな状況になりました。 さて、この状況におかれたあなたは何をしますか？ はじめに モバイルゲームのシステムは新しいイベントをopenするとトラフィックが2倍、3倍、時には普段の10倍以上来ることがあり、トラフィックの変動が非常に大きい特性があります。 新しいゲームのリリース時はより顕著で、想定以上のトラフィックが来ることもしばしばあります。 この記事は、あるゲームプロジェクトの本番リリース時に大規模トラフィックが来た際のサーバトラブルを題材に、 どのような観点で問題を切り分けていったのか、トラブルシュートのプロセス どのような準備(負荷テスト)をしていれば防げるのか という話をし
Vuex + DDD のアーキテクチャを考える - Techtouch Developers Blog
フロントエンドエンジニアの国定です。 この記事では、TypeScript + Vue.js で開発しているフロントエンドに今年からドメイン駆動設計（DDD）を取り入れ始め、ひとまず設計が落ち着いてきたのでその経緯とアーキテクチャについて解説します。 課題 アーキテクチャ Domain Service Store（Vuex） UI（Vue.js） 軽量DDDに陥らないために まとめ 課題 Vuex（Store）の責務は、エラー判定などのドメインロジック・データの永続化・API の呼び出しなど、State 管理のほかにも多岐にわたっています。UI の改善や機能追加など変化の多いフロントエンドでは開発が進むにつれ Vue + Vuex のあちこちに同じ処理が散在してしまいます。 テックタッチでもメンテナンスを繰り返す度にコードの複雑さが増し、機能追加や修正に時間がかかるようになってきました。去年
ヘッドレスブラウザとSSRF | 技術者ブログ | 三井物産セキュアディレクション株式会社
ヘッドレスブラウザは、サーバ環境などでHTMLをレンダリングするためにバックグラウンドで動作させるブラウザです。 筆者も昨年診断ツールに組み込んだのを契機に使用し始めました。使ってみるとなかなか面白いので、今年は社内での学習用の「やられサイト」にも組み込んでみました。今回はこのやられサイトを題材にして、ヘッドレスブラウザとSSRF（Server-side request forgery）について書きます。 やられサイトの概要 開発したやられサイトは簡単なブックマークサイトです。ユーザがURLを入力すると、そのスクリーンショット画像をヘッドレスブラウザで取得して、ユーザが付けたコメントなどの付加情報とともに保存します。 下図はヘッドレスブラウザに関連する部分の構成です。 図のとおりNode.jsのPuppeteerを使用しており、バックエンドのブラウザエンジンはChromiumです。性能向上
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - roottusk/vapi: vAPI is Vulnerable Adversely Programmed Interface which is Self-Hostable API that mimics OWASP API Top 10 scenarios through Exercises.
