Intro Web の https 化が進み、それに伴って https を前提とする API も増えてきた。 そうした API を用いた開発をローカルで行う場合、localhost という特別なホストを用いることもできるが、それだけでは間に合わないケースも少なからずある。 localhost を https にするという方法もあるが、そのように紹介されている方法には、いくつか注意すべき点もある。 この辺りの話を、直近 1 ヶ月で 3 回くらいしたので、筆者が普段使っている方法や注意点についてまとめる。 特に推奨するつもりはない。 Update chrome の --host-rules について追記 localhost での開発の注意点 例として https://example.com にデプロイする予定の ServiceWorker を用いたアプリがあったとする。 開発をローカルで行う場
この記事で紹介した手順をライブラリ化して公開しました🎉 こちらの別記事 で使い方など詳しくご紹介していますので、ぜひご参照ください！ 2024/05/07 追記 最新の登壇スライドバージョンはこちらです。 登壇時の様子がYouTubeに上がっているのでよろしければあわせてご覧ください。 はじめに 言い切りタイトルすみません 僕を含む一定数の人にとって現時点でのベストプラクティスとなりうる手法という意味で紹介しています 極めてシビアな帳票出力の世界にいる人から見ると使い物にならない内容かもしれないと思います 帳票印刷の世界では SVF というサービスが有名らしいです。が、こういった外部サービスは使わずに自力で実装するというのがこの記事の前提です 動的に明細行の数が増減する連票はこの記事の解説では考慮していませんが、追加で実装するのはそれほど難しくないということは読んでいただければ分かるかな
シェアウェア（という表現はおいておいてのやつ。https://anond.hatelabo.jp/20230124045812）の記事が面白かったので、自分の得意分野の領域でいろいろ紹介します。 基本的に、SaaSのサービスは便利だけど、あれもこれもと契約していったらサブスク破産するので、 ものによってはセルフホストした方がいいと思ってる派。 Dropbox/GoogleDrive/box代替 NextCloudもともとownCloudっていうDropbox代替があったんだけど、そこから分派して今も機能開発が続いている。 興味深いのはLAMP構成なので、VPSや自宅サーバーじゃなくても、レンサバで動くのがいいよね。 データ保存領域はオブジェクトストレージ（S3互換）も利用できるので、例えばWasabiなんかと契約してお安く済ませてしまうのも全然アリかと。 Trello代替 Wekan最近は
研修資料・動画一覧Git研修（ 動画 / スライド ）データベース研修（ 動画 / スライド1, 2 / SQL演習環境 ）設計・テスト研修（ 動画 / スライド ）コンテナ研修（ 動画 / スライド1, 2 ）iOSアプリ開発研修（ 動画 / スライド / リポジトリ ）Androidアプリ開発研修（ 動画 / スライド / リポジトリ ）フロントエンド研修（ 動画 / スライド / リポジトリ ）ゲーム開発(Unity)研修（ 動画 / スライド1, 2, 3, 4, 5, 6 / リポジトリ ）Flutter研修（ 動画 / スライド / リポジトリ ）AI研修（ スライド1, 2, 3, 4 / リポジトリ ）セキュリティ研修（ スライド ）チーム開発研修（ スライド ）Git研修チーム開発での Git (+GitHub) の使い方とGit の内部的な挙動について学ぶ研修です。後半
個人情報テストデータジェネレーター
アプリケーションのテストなどで利用できる、リアルな架空の個人情報データ（疑似データ）を生成するツールです。
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
週末にちょっとしたウェブサイトというかリンク集（？）を作った。 今回は生成AIツールをフル活用していつもより効率よく作業ができた。 生成AIツールについては日々、新しいものがヤバイすごいと宣伝されているけど、実際にどう使っているのかという情報が少ないと感じている。 なので具体的な使い方を書いてみることにした。 作ったもの 開発の概要 最終的なアーキテクチャ UI開発に生成AIツールを使う 初期デザインの参考元 デザインツールの選定と比較 Next.jsの利用 Cursorを活用した開発 データ整形にLLMを使う スクレイピング Amazonの商品データ取得 LLMの選定 動的なコードと静的なコードの使い分け TypeScriptを使わない範囲を定めた 静的サイト生成（SSG）の採用 柔軟なデータベース設計 まとめ 作ったもの 『最も重要な「最も重要なマンガ10選」10選』は「最も重要なマン
CyberAgent にて行われたカンファレンス「CA BASE NEXT」の登壇資料です。 https://ca-base-next.cyberagent.co.jp/sessions/can-we-build-web-applications-in-rust/
2023/09/06 に行われた OCHaCafe Season7 #4 で用いた資料です。 セッションアーカイブ動画：https://youtu.be/p3VmoPKrBNs
Index of /
Proudly Served by LiteSpeed Web Server at cocoa-log-checker.com Port 443
Electronライクな新フレームワーク「Gluon」登場。Chromium内蔵せずWebブラウザを利用、Node.jsだけでなくDenoとBunにも対応
デスクトップアプリケーションの開発を、JavaScriptなどのWebテクノロジーで可能にするフレームワークとして知られるのがElectronフレームワークです。 このElectronのようなフレームワークが新たに登場しました。「Gluon」です。 Electronがアプリケーション基盤としてNode.jsとChromiumをバンドルするのに対して、GluonはOSにインストールされているWebブラウザを用いるのが大きな特長です。 Google ChromeのようなChromiumベースのWebブラウザだけでなく、Firefoxにも対応作業が進められており、最新のバージョン0.11ではFirefoxでの安定度が向上しました。 Node.jsをバンドルする点はElectronと同じですが、Node.jsの代わりにDenoやBunを利用することにも実験的に対応しています。 Gluonは主にCh
こんにちは、クックパッドで最近はモバイルアプリを離れもっぱらウェブアプリを作っている @morishin です。 先日、社内で「モダンウェブフロントエンド勉強会」と題して React, Next.js, Core Web Vitals, SSR, CSR, SSG, ISR, SSR Streaming, React Server Component といったキーワードに触れつつ、昨今のウェブ開発事情について話をしました。せっかくなのでその内容の共有と、勉強会を開催した動機などを紹介したいと思います。 この話は fukabori.fm でも取り上げていただいてお話ししたので、よければそちらもご視聴ください。 fukabori.fm 背景・動機 クックパッドのウェブアプリケーションは10年以上もの間 Ruby on Rails で開発されてきましたが、2020年から一部のページは Next.
Developers Summit 2025（2025.02.13-14） - 翔泳社イベント 1日目 13-E-9 あなたのプロダクトが見たい！個人開発リレーセッション で話したときの資料です。 https://event.shoeisha.jp/devsumi/20250213/session/5551
この文章は祈りです。 主にRuby on Railsアプリケーションを想定した話です。 Ruby on Railsアプリケーションでは、Fat Model問題という問題が起きることがあります。 ドメインオブジェクトが肥大化しメンテナンスしにくくなる問題です。 Fat Model問題に対応するためにサービスレイヤーを導入することがあります。 「ドメインモデル貧血症」と呼ばれているアンチパターンです。 ドメインモデル貧血症 ドメインのロジックをドメインオブジェクトの中に入れないという設計ルールに従っているのでしょう。その代わり、すべてのドメインロジックを含むサービスオブジェクト群が存在しているのです。 Fat Modelを恐れよ Fat Modelは「単一責任原則」を満たしていないモデルです。 単一責任原則 | プログラマが知るべき97のこと 1つのサブシステムやモジュール、クラス、関数などに
効果音ポン出し画面｜効果音ラボ
生配信やZoomなどで活用できる、効果音を好きなボタンに割り当てて鳴らせるWebアプリです。音は2000種類以上の中から選べます。
今年はコロナの影響でいろんなイベントがオンラインになったり、中止になったりしてますが、 web.dev live 2020 が7月初頭にやっていたので、聴講してきました。 web.dev その中でも面白かったものについていくつか紹介します。 Day 1 ほぼ Core Web Vitals についての話でした。 以下のトークが面白かったです。 What's new in speed tooling Optimize for Core Web Vitals Core Web Vitals についてはもう既にたくさん資料があると思いますが、一応解説しておきます。 Core Web Vitals 初期表示の新しい指標です。去年くらいからずっと Chrome Dev Summit とかでは言われていて、既にLighthouse をはじめとして、色々なツールでサポートされています。Largest C
Goで作ったロジックにWebUIをつけてGitHubページに公開する | フューチャー技術ブログ
ちょっとしたツールをGoで作ってみたのですが、わざわざインストールしなくてもいいようにWebのUIをつけてブラウザで使えるようにしてみました。作ってみたのは以下のツールで、Markdownのリスト形式でざっと下書きしたテーブルの設計をSQLとか、PlantUMLとかMermaid.js形式のERDの図にします。 https://shibukawa.github.io/md2sql/ ウェブフロントエンド部分はNext.jsの静的サイトで、GoはWASMにしてロードして実行しています。WASMを使うのは初めてなのであえて選んでみました。 GoをWASM化するもともとCLIツールは作っておりました。CLIのメインはcmd/md2sql/main.goで作っていました。この中でやっていることは kingpin.v2のオプションパース 指定されたファイルを読み込み(あるいは標準入力) パース 指定
かなり昔に Elasticsearch ベースの検索システム（Heineken）を作っていた。 Elasticsearch で部内 Wiki 検索高速化 - Speaker Deck 特に更新せず数年動かしていたのだけど、サーバーの置き換えに伴って Kubernetes に置きたいよねという話になり、ついでに Elasticsearch も新しくしたいよね、となった結果、現状のフロントエンドだと最新の Elasticsearch では動かないということがわかった。 nonylene.hatenablog.jp フロントエンドの改修が必要なわけだが、ここでフロントエンドの構成を見ると… FlowType create-react-app PureComponent Bootstrap 3 古すぎる！絶対アップデート難しいし触りたくない技術しかない。 フロントまわりの構成を変えたいとずっと思っ
Leverage a personal AI search agent & customized recommendations with You.com's AI chatbot. Converse naturally and discover the power of AI. Chat now!
swaggerとは 古の時代、API仕様書はwordやexcelで表現され、各所に共有されるというのが一般的でした。 ですが近年、API仕様を表現する際にはswaggerを利用するのが最も効率的で、保守性が高く、世間一般で仕様化され、見やすいというのもあり、一般化されてきたのではないのでしょうか 今回はそんなswaggerの書き方について、まずは書くために覚えておきたいポイントを解説していこうかと思います！ どう書いてくか swagger editorで書く 公式がWeb上に提供しているツールを利用し、すぐにでもswaggerの執筆が可能となっています！ なにをインストールする必要もなく開始1秒で利用できるので、私も重宝してます なお、ページを開くとサンプルAPI仕様がすでにある状態でのスタートとなり、記法の参考などにもなります vscodeで書く 必要なプラグインをインストールし、vsc
はじめに Next.jsにServer Actionが新しく導入されました。サーバ上の関数をブラウザから直接呼び出すようなコードの書き味を提供するもので、非常に魅力のあるコンセプトだと私は思っています。ただしサーバ上で実行されるコードとブラウザで実行されるコードの境界が曖昧で、"use server"のセキュリティ上の懸念もよく議論されています。 一方で、私の先日の記事Next.jsで簡単なCRUDアプリを作りながら気になったセキュリティ: Railsの視点からで、私はこの"use server"問題には言及しませんでした。まだ非常に新しい話題でかつNext.js側の対応も進行中だというのもありますが、実は個人的にあまり気にならないのが最大の理由です。 気にならなくなったきっかけは、Server ActionをRuby on Railsのコントローラと同じように考え始めたことです。こうする
こんにちは、やせです。 普段はゆるく個人開発をしている学生です。 はじめに 本記事では、Next.js+Hono+Bunを用いて、型安全にWebアプリ開発を行う方法を入門者向けに説明していきます。 また、本記事では以下の内容も扱います。ZodやDrizzleを用いて、データベースからフロントエンドまでを型安全に開発することができます。 Bun Workspacesを使用したモノレポ構成 HonoのRPC機能 Zodによる型安全なバリデーション Supabase DB + Drizzle ORMによるDB操作・マイグレーション TanStack Queryを使用したデータフェッチ Next.jsで作成したSPAをCloudflare Pagesへデプロイ Honoで作成したAPIサーバーをCloudflare Workersへデプロイ 各章の最後には、実際に手を動かして学びたい人向けにハンズ
![[入門] Next.js+Hono+Bunのモノレポ構成で型安全なWebアプリ開発をする](https://cdn-ak-scissors.b.st-hatena.com/image/square/4861b0c071b28dedef074a905a5dead4b112575f/height=288;version=1;width=512/https%3A%2F%2Fres.cloudinary.com%2Fzenn%2Fimage%2Fupload%2Fs--HEpCXXfD--%2Fc_fit%252Cg_north_west%252Cl_text%3Anotosansjp-medium.otf_55%3A%25255B%2525E5%252585%2525A5%2525E9%252596%252580%25255D%252520Next.js%25252BHono%25252BBun%2525E3%252581%2525AE%2525E3%252583%2525A2%2525E3%252583%25258E%2525E3%252583%2525AC%2525E3%252583%25259D%2525E6%2525A7%25258B%2525E6%252588%252590%2525E3%252581%2525A7%2525E5%25259E%25258B%2525E5%2525AE%252589%2525E5%252585%2525A8%2525E3%252581%2525AAWeb%2525E3%252582%2525A2%2525E3%252583%252597%2525E3%252583%2525AA%2525E9%252596%25258B%2525E7%252599%2525BA%2525E3%252582%252592%2525E3%252581%252599%2525E3%252582%25258B%252Cw_1010%252Cx_90%252Cy_100%2Fg_south_west%252Cl_text%3Anotosansjp-medium.otf_37%3A%2525E3%252582%252584%2525E3%252581%25259B%252Cx_203%252Cy_121%2Fg_south_west%252Ch_90%252Cl_fetch%3AaHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3plbm4tdXNlci11cGxvYWQvYXZhdGFyL2E5MGI0Mjk5NDcuanBlZw%3D%3D%252Cr_max%252Cw_90%252Cx_87%252Cy_95%2Fv1627283836%2Fdefault%2Fog-base-w1200-v2.png)
超楽にRubyで雑に書いたスクリプトをsystemdで管理したい！ - 宇宙行きたい で systemd がユーザ権限で使えることを知る。 開発環境用では nohup と cron の @reboot を使っていました。こちらもお手軽なので紹介。 @reboot とは crontab(5) に @reboot があれば使えます。その名の通りリブート時に一回だけ実行。Ubuntu なら利用可能。 $ man 5 crontab (省略) Instead of the first five fields, one of eight special strings may appear: string meaning ------ ------- @reboot Run once, at startup. @yearly Run once a year, "0 0 1 1 *". @annual
概要 先日、PydanticV2 に対応した FastAPI 0.100.0 が正式にリリースされました。 PydanticV2 は大部分を Rust で書き直したことで高速化を実現している他 使い勝手向上のために API が多少変更になっているので、移行作業が必要になる場合があります。 本記事では、V1->V2 への移行のポイントについて紹介します。 速度向上について Rust 化による速度向上も重要なポイントです。 参考までに、私が Pydantic 部分のみで試した際は、5~6 倍高速化されていました。 以下のクラウドカメラの Safie 社のブログで、FastAPI で使用した場合の速度向上について実験されています。 参考リポジトリ FastAPI 0.100.0 に対応した FastAPI のサンプルリポジトリを公開しています。 他にもパッケージ管理の Rye や Linter
https://kaigionrails.org/2023/talks/ginkouno/ Kaigi on Rails 2023登壇時の資料です。
社内で使う npm パッケージの作成に Deno を採用した話 - Cybozu Inside Out | サイボウズエンジニアのブログ
こんにちわ。フロントエンドエキスパートチームの@nus3_です。 最近、社内用の npm パッケージを作る必要があり、そのパッケージは依存が少なく、実装もシンプルだったので、npm パッケージの作成には Deno と dnt を採用しました。 dnt とは dnt は Deno で実装したモジュールを CJS、ESM に対応した npm パッケージに変換してくれるビルドツールです。 使い方も簡単で、次のように dnt が提供するbuild関数にエントリーポイントや出力先などの必要な情報を渡すだけです。 import { build } from "https://deno.land/x/dnt@0.38.1/mod.ts"; await build({ entryPoints: ["./mod/index.ts"], // Denoで実装したモジュールのエントリーポイント outDir:
遷移の高速化 ヤフートップの試行錯誤
LY社では、Webパフォーマンスの改善による高速化の取り組みを続けてきました。中でもbfcacheの有効化は、ユーザー影響が大きく重要視していた技術の一つです。 bfcache（バックフォワードキャッシュ）とは、ブラウザでページを遷移した時にページの完全なスナップショットとして保存されるメモリキャッシ…
rails statsと企業価値 - algonote
開発スピードが遅いのか、作っているものの筋が悪いのか 前口上: rails statsで企業価値は測れるか？ rails stats はRailsリポジトリの統計情報が取れる便利コマンドです。LaravelでもLaravel Statsを使って php artisan stats で同様のことができます。 結構リポジトリの内情を丸裸にするコマンドで、モデルやコントローラーのサイズからアプリの規模感が掴めますし、コードとテストの割合からしっかりテストが書かれているかがわかります。 Webサービスの事業価値は大きく見れば売上や成長率、より細かく見ると業態やtoBかtoCか、どこの産業向けか、アクティブユーザー数などで決まります。一方でIPO以降の売上成長率は従業員数に比例しているという話もあり、ビジネススキームが決まってしまえば後は頭数に比例するとも言えそうです。 Four Keysなどの開発
VTuber Collab Map
Check how VTubers interact with each other in real time.
GitHub - grafana/oncall: Developer-friendly incident response with brilliant Slack integration
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
はじめに Playwright MCP を使って、自然言語から E2E テストを実行できるかどうかを試してみました。今回は、デスクトップ版の Claude を利用して、プロンプトを入力してテストを実行してみます。テスト対象のアプリケーションは、ブラウザベースで操作可能な TODO を管理するサンプルアプリを対象としました。 Playwright MCP の詳細については、公式のドキュメントを確認してください。 実行環境 Claude for Mac: 0.9.1 Claude Pro プラン（Free プランでも制限内で、実行はできます） @playwright/mcp: 0.0.9 テスト対象のサンプルアプリについて テストを実行するサンプルアプリケーションは TODO タスクを CRUD できるようなシンプルな WEB アプリです。以下のような機能があります。 タスクを新規作成、編集、
開発しているPythonの高速な将棋ライブラリcshogiに、ブラウザでUSIエンジン同士の対局が行える機能を追加した。 python -m cshogi.web.app --engine1 E:\game\shogi\gikou2_win\gikou.exe --engine2 E:\game\shogi\apery_wcsc28\bin\apery_wcsc28_bmi2.exe --byoyomi 1000 --port 8000のように実行して、ブラウザから「http://localhost:8000/」にアクセスして、USIエンジン同士の対局を観戦することができる。 これだけだと、将棋所のような便利なネイティブアプリがあるのでわざわざこの機能を使う必要はないが、Google Colab上で実行することができる。 Google Colabで実行 USIエンジン同士の対局 # csh
Hypothesisとは何か、プロパティベーステストとは何か Hypothesisは、Python向けのプロパティベーステストのライブラリである。 プロパティベーステストは、生成された多数の入力データに対してプロパティ(性質)が満たされるかどうかをテストする手法である。 HaskellのQuickCheckライブラリが初出で、現在は各プログラミング言語に移植されている。 従来のユニットテストは、ある程度固定したテストデータを指定してテストを行っていた。 その際、境界値分析などで妥当なパラメータを決定していた。 しかし、境界値分析が必ず通用するとは限らないし、人間が行う以上、ミスも発生する。 プロパティベーステストはデータを固定する代わりにそのデータが満たすプロパティを指定してテストを行う。 実際のテストケースはHypothesisがプロパティを満たすパラメータを決めて生成してくれる。 人力
Drag and drop countries around the map to compare their relative size. Is Greenland really as big as all of Africa? You may be surprised at what you find! A great tool for educators.
図解 CSR, SSR, SG(SSG), ISR
何周も遅れてしまっているのですが、フロントエンド周りの勉強に取り組んでいます。色々と遠回りをしつつ、Next.jsに流れ着きました。SSRとかSSGとか分かりにくい言葉が多くて難しそうに感じたので、自分なりの理解を図にしてみました。 Server Side Application サーバーはリクエストを受けると動的にHTML文書を生成して返却する。 1993年にCGIが登場した時から基本的に同じ仕組みであり、今でも主要なアーキテクチャです。 Ajax クライアント（ブラウザ）側のJavaScriptでサーバーから追加データを取得し、DOM操作でページの内容を書き換える。 ページ遷移することなくコンテンツを書き換えることができる手法です。このアーキテクチャが登場してから、Webアプリケーションで実現できるUIや表現の幅が飛躍的に広がりました。 CSR (Client Side Renderi
積読が崩せないので読書記録サービスをつくった
背景と動機 本をよく買います。 気になった技術書や小説、漫画など、社会人になってからは特に買う頻度が増えたように思います。 しかし、読む時間がなかなか取れなかったり、期間が開いてどの本を読んでいたのか忘れてしまったりして、気付いたら積読が積み上がり「あ～やべ…」と感じることが多くなっていました。 「今読んでる本」をシンプルに管理できる何かがあれば、この状況を打破できるのでは…！と思ったので、読書記録サービスをつくってみました。 つくったもの yondako という読書記録サービスをつくりました。 GitHub か Google アカウントで登録できます。 デモ動画はこんな感じです。 「よみたい」「よんでる」「よんだ」の3状態で読書状況を記録できます。 レスポンシブ対応もしていて、スマホからも利用できます。 SNS的な要素や感想の記録などをあえて排除して、読書状況の記録に特化しているのが特徴
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ローカル開発環境の https 化 | blog.jxck.io
ついに、Webアプリでの帳票印刷のベストプラクティスを編み出しました
VPSや自宅サーバーにインストールしたいSaaS代替Webアプリ38選
今年もミクシィの22新卒技術研修の資料と動画を公開します！
GitHub - Bad Todo 非常に多種の脆弱性を含む診断実習やられアプリ
生成AI/LLMを使ったウェブサイト開発 - laiso
Rust で Web アプリケーションはどこまで開発できるのか
セキュアなWeb APIの作り方 / Secure Web API
モダンウェブフロントエンド勉強会を開催しました - クックパッド開発者ブログ
個人開発から公式機能へ: PlaywrightとRailsをつなげた3年の軌跡
人はFat Modelを恐れサービスを求め ドメインモデルは貧血に至る - @ledsun blog
web.dev live 2020 を聴講した - from scratch
「Edge」の開発ツールを統合し「Visual Studio Code」でWebアプリの開発を完結／Microsoftが「Microsoft Edge Tools for VS Code」拡張機能を一般リリース
検索システムのフロントを SSR・Remix で作り直した - Unyablog.
oimo.io
You.com | AI for workplace productivity
今日から始めるswagger入門（最低限書けるようになる） - Qiita
Next.js App Routerの"use server"雑感 : Rails視点から
[入門] Next.js+Hono+Bunのモノレポ構成で型安全なWebアプリ開発をする
サーバ再起動しても cron で Web アプリを雑に立ち上げ
FastAPIがPydantic v2対応したので、V2移行のポイントを紹介する(意外と簡単)
https://jp.techcrunch.com/2020/08/14/quantumcore-sloos-microsoft-appsource/
技術的負債の借り換え on Ruby and Rails update
Playwright MCP を使って、自然言語で E2E テストを実行してみた - Qiita
cshogiにWebアプリを追加 - TadaoYamaokaの開発日記
Hypothesisとpytestを使ってDjangoのユニットテストを書く - 何かを書き留める何か
Compare Countries With This Simple Tool
https://heritagemap.nabunken.go.jp/main
himatubushitrend.com
akane7.lo.gob.jp
www.nhk.jp
kohakumorugana.hatenablog.com
aadokkan.the-spirit-of-phoenix.com
ameblo.jp/makoatu-kateisaien-2022