独学で個人開発を始めて5年が経ちました。これまでには収益化に成功したサービスもあれば、鳴かず飛ばずでお蔵入りになったサービスも数多くあります。それらの経験から、成功したサービスはなぜ上手くいったのか、マーケティングや収益化において押さえておくべきことは何か、その要点が少しずつ見えるようになりました。 今回は私が開発〜集客〜収益化を行うプロセスと、各工程で気をつけているポイントを順を追って書き出してみます。上手く言語化できているか分かりませんが、暖かい目でお付き合いください。 収益化した3つのサービス 私はこれまでにWebサービスを20個以上開発しており、現在はポモドーロタイマー（月間100万ユーザー）やYouTubeのループ再生ツール（月間10万ユーザー）などを運営し、そこからの収入で生活しています。 基本は海外向けのBtoCで、以下のようなツール系が中心です： 収益化済みサービス： Po
Webブラウザは，開発者にとってもユーザーにとっても，もはや日常の一部となっているほど身近なソフトウエアですが，近年のブラウザはあまりにも高機能かつ巨大になってしまったため，その仕組みを詳しく理解することは困難です。そこで，シンプルなブラウザをRustを用いて実装することによって，ブラウザ上でWebサイトを開くまでに何が起きているのかを理解することを目的とします。さらに，作成したブラウザを，別冊で解説・実装している自作OSの上で動かすことによって，ブラウザと更にその裏側を理解していきます。
冥府刀（キテレツ大百科）
しばらく経ってもこの画面に変化がない場合は、Javascript を on にして再度読み込んで下さい。
「携帯動画変換君」を最初にリリースしたのが2004年10月10日。今日はちょうど20年目にあたります。そもそもこのアプリの更新自体も2005年には止まってますし、ずっとほったらかしていた＆既に新規の需要もなく「過去の」ソフトウェアであることは間違いないので、20周年、とは言っても何をどうにかできるものでもないのですが。まあせっかくなので何かはしたいと思っていたんですよね。 サイトリニューアルをやろうとしたまず最初にやろうとしたのがサイトリニューアル。個人サイトMobileHackerzも、もうだいぶ古くhttps化すらさぼってました。サイト全体のSSL化はもはやずいぶん前に必須になったのにも関わらずめんどくさくて放置してたくらいで😅 コンテンツ管理も古いどころの話でないほど古いし、いっそのことモダンなCMSベースにサイト全体を作り直しちゃろか、20周年だし、みたいなことを最初はやろうとし
【脱Qiita】元Qiitaガチ勢の私がまとめるエンジニア向け海外サイトまとめ - Qiita
はじめに エンジニアに関する情報量は日本よりも海外（特にアメリカ）の方が圧倒的です。 そのため、英語での情報収集を習慣付けておくとより早く必要な情報に辿り着くことができます。 英語がわからない場合は、ChatGPTに全てコピペして翻訳させましょう！日本語ネイティブの皆さんでも余裕で海外コンテンツを見ることができるでしょう！ 本記事では、濃い情報が集まる場所をまとめました。 日頃の情報収集やキャリアに関する情報まで幅広くまとめたので、エンジニア学生や初学者にとって役に立つ内容かと思います。 ChatGPTと紹介している情報源を連携すれば、英語が苦手だとしても必要な情報に素早く辿り着くことができるでしょう。 本記事の対象読者： 日頃の学習に役立つ情報源を知りたい方 年収やキャリアに関する情報を手に入れたい方 インターンや就活前に情報を仕入れておきたい方 本記事の構成 学習系 ニュース系 キャリ
このYouTubeライブはフロントエンドの最適化を専門にするmizchiさんがCloudflare Meet-up Tokyoで行った同タイトルのプレゼンを、RustやRDBの実装に詳しいkoba789さんを話し相手に語っていくというものだ。背景としては2人ともチーム開発の現場でのRailsが活発に利用されていた時期にウェブ開発を経験し、現在はNode.jsのサーバーサイドも実践している。 ライブは3時間半という長時間におよび、スライド外の周辺情報や持論や余談など多岐に渡るので、すでにこのプレゼンに触れた人でもさらに深掘りできるようなコンテンツになっている。 全体を大まかに1時間ごとの3パートに区切って視聴するとわかりやすい。前半はRailsからNext.jsに辿り着くまでのウェブ開発の変遷。ORMの話は主に後半戦で。最後の1時間はアフタートークになっている。 内容としてはRailsアプリ
「CTOの視点で選ぶ「最適な」アーキテクチャとは？」というイベントで登壇しました。 本記事は登壇資料をMarkdownとしてそのまま記事化したものです。スライドのほうが読みやすい方は、Speaker Deckで御覧ください！ 自己紹介1｜職歴、趣味など 職種・SNS 株式会社NoSchool CTO 2016年〜Webエンジニア。2019年〜現職 Twitter(X): 名人｜マナリンクCTO Zenn: https://zenn.dev/meijin 好きなHTTPヘッダーはCache-Control 趣味 将棋☗、カメラ📸、ラム酒🥃、個人開発💻、筋トレ💪、高校野球観戦⚾ 自己紹介2｜外部発信・諸活動 ZennでReact記事が人気 歴代記事でLike数1位（登壇時点） 個人開発 テストメーカー（ユーザー20,000人以上） エンジニア向け教材執筆 「LaravelでFat Co
こんにちは、トレタ VPoEの北川です。 今回は弊社でフロントエンドアプリケーションを新しく構築する際の開発環境として、何のライブラリを入れるかという開発環境初期セットを紹介しようと思います。 Web Framework / CSS Framework / Tesing Framework / Linter / Formatter、それぞれ定番で使うデファクトが大体ありましたが、近年では新しいライブラリも登場したので、2024年現在・最新版を、今回は直近で作られた実際のリポジトリを例にご紹介します。 今回紹介するリポジトリのアプリケーションはtoB向けの管理画面のアプリケーションで、特質した部分も特にない一般的なWebアプリケーションです。 それでは早速、package.jsonの内容はを見ていきましょう。 "dependencies": { "next": "14.2.13", "rea
【JavaScript】Idle Detection APIとかいう悪用以外の使い道がないAPI - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 2024/09/10にIdle Detection APIというAPIが更新されていました。 ステータスはDraft Community Group Reportです。 これはコミュニティによる提案であり、W3Cによる正式な勧告ではありません。 個人や団体レベルでも、とりあえずRFCを作ってみたり検討したりできる段階ということです。 以下はこの提案を管理しているGitHubから、このRFCの意義を解説したReadmeの紹介です。 User Idle Detection API このAPIでは、開発者はユーザがアイドル状態になったとき(キ
TypeScriptが仕事で使えるレベルに到達するためのガイド - Python転職初心者向けエンジニアリングブログ
TypeScriptが仕事で使えるレベルになるためには、単に基本的な文法や構文を理解するだけでなく、実際のプロジェクトやチーム開発でどのように活用するか、スケーラビリティや保守性を考慮しながらコードを書く能力が求められます。この記事では、TypeScriptを実務で使うために必要な基本から、少し踏み込んだ中級レベルの知識を、コード例を交えながら丁寧に解説します。 TypeScriptとは TypeScriptは、JavaScriptのスーパーセットで、JavaScriptに静的な型を追加した言語です。静的型付けとは、変数や関数にあらかじめ「このデータはこの型でなければならない」というルールを設定することです。このルールに基づいて、開発者が予想しない動作やバグを防ぐ手助けをしてくれます。 JavaScript自体は非常に柔軟で、型に縛られない自由な書き方ができますが、それが逆に大きなバグを生
ウェブでのテキストの折り返しは、HTMLコーダーにとって意外と難しい分野です。多様な画面サイズが存在する現代では、適切なテキストの折り返しについて悩むことが少なくありません。 この記事で紹介する折り返しとは、以下のようなテキストの区切りの良い場所で改行するかどうかです。 ▼固定幅で折り返し どこで生れたかとんと見当がつかぬ。何で も薄暗いじめじめした所でニャーニャー泣 いていた事だけは記憶している。 ▼文節での折り返し どこで生れたかとんと見当がつかぬ。 何でも薄暗いじめじめした所で ニャーニャー泣いていた事だけは記憶している。 本記事では、HTMLコーディングにおいて改行・折り返し方法の選択肢を整理し、最適な方法について考察します。 この記事で紹介すること <br />と<wbr />タグを使った改行指定 CSSのword-break: auto-phraseを使った自動折り返し JSラ
「だんご屋のひまつぶし」完全解析 - すぎゃーんメモ
「だんご屋のひまつぶし」とは 最長手順の問題は…？ 組み合わせ、グラフ問題 プログラムで解く 状態の列挙 グラフの構築 最短経路問題を解く WASM化して、ブラウザ上で解く もしもすべて異なる団子だったら さらに一般化していくと 到達可能性 頂点数 本数を固定し、高さを変える 高さを固定し、本数を変える まとめ Repository 「だんご屋のひまつぶし」とは 「ハノイの塔」の派生型のようなパズル。 高さ3の串が3本あり、3色の団子2個ずつ計6個が刺さっている。これらを1個ずつ移し替えて、ある状態からある状態へと遷移させる、というゲーム。 移動できるのは各串で一番上にある団子だけ。 団子の大きさのような概念はなく、高さ3以内であればどこにでも動かせる。 単純なルールだがなかなかに奥が深く、じっくり考えて動かさないと最適な手順で達成するのは意外に難しい。 パズルオーディションというもので最
Webページを表示し、スクロールダウンするとヘッダが非表示になり、ページのどこからでもスクロールアップするとヘッダが再び表示される、というのを見たことがあると思います。 これまでは実装するにはJavaScriptが必要でしたが、CSSのみで実装できる方法を紹介します。 Solved by CSS Scroll-Driven Animations: hide a header when scrolling down, show it again when scrolling up. by Bramus! 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに CSS Scroll-Driven Animationsでスクロール方向を検出する transition-delayプロパティを使ったテクニック ヘッダをスクロール時に表示
『JavaScriptプログラマーのためのTypeScript厳選ガイド』を執筆しました - Islands in the byte stream
JavaScriptプログラマーのためのTypeScript厳選ガイド という本を書きました。JavaScript中級者でTypeScript初心者のプログラマーに向けたTypeScriptの入門書です。 これまで何度かTypeScriptの記事を書いてきました。 TypeScript再入門 ― 「がんばらないTypeScript」で、JavaScriptを“柔らかい”静的型付き言語に｜ハイクラス転職・求人情報サイト AMBI（アンビ） 「がんばらないTypeScript」のための現実的な設定を考える ─ 4レベルの厳しさを使い分けてTypeScript疲れを克服しよう！｜ハイクラス転職・求人情報サイト AMBI（アンビ） 今回の本は、既存のJavaScriptプロジェクトをTypeScriptに移植するという場面を想定した「がんばらないTypeScript」路線ではなく、TypeScri
この本では、初心者・入門者の方に向けて、Next.jsの知識や使い方を体系的にまとめました。 【概要】 ・内容：HTML・CSS・JavaScriptとは？、Next.jsとは？、アプリを作る上での環境を整えよう！、Next.jsのプロジェクトを作ろう！、チャットアプリのパーツを作ろう！、オウム返しAPIを作ろう！、MUIを使ってリッチにしよう！、Vercelにデプロイしよう！、【余談】Joy.uiによるUIの変更 ・所要時間：約3時間 ・必須条件：HTMLの知識、CSSの知識、JavaScriptの知識 ・推奨OS：macOS / windows(WSL2) ・レベル：★★☆☆☆
エンジニアの評価シートは、業績やスキルを正確に測定し、エンジニアの成長を促すための重要な資料です。技術スキルだけでなく、プロジェクトへの貢献度や問題解決能力など、多角的な視点で評価することが求められます。 一方、評価基準が多岐にわたることから「エンジニア向けの評価シートの作成方法がわからない」「そもそも評価制度が確立しておらず、ゼロから制度を見直したい」と悩む方も多いのではないでしょうか。 本記事では、エンジニア向け評価シートの無料サンプルを配布します。加えて、評価制度の構築手順や評価シートの書き方も詳しく解説するので、ぜひ最後までお読みください。 エンジニアの評価シートを簡単に作れるツール「NotePM」 【基礎知識まとめ】エンジニアの評価制度とは？ エンジニアの評価制度とは、エンジニアの業績や能力を体系的に測定・評価するシステムのことです。この制度では、技術スキルやプロジェクトでの貢献
こんにちは。pixivのnamazuです。 先日開催されたPIXIV DEV MEETUP 2024にて、『pixivというシステムはどんな形をしているのか、それはなぜか。』というテーマで発表をさせていただきました。当日、セッションにご参加いただいた皆さま、そしてフィードバックをいただいた方々に、改めて感謝申し上げます。 Webサービス開発において面白い点の一つは、どのサービスもその要件や状況に応じて異なる選択がなされることです。結果として、類似点がある場合もありますが、細部において同じものはなく、すべてがユニークです。弊社内でもさまざまな違いが見られますが、業界全体を見渡すとさらに多様性が広がっていることでしょう。 今回の発表では、pixivのシステムに関する重要な要件や状況をいくつか取り上げ、現時点でどのような構造になっているかを、インフラストラクチャ、バックエンドアプリケーション、開
バーチャルスクロールの限界を突破する
はじめに 私は今、CSVエディタ SmoothCSV 3 を開発しています。フレームワークとして Tauri を採用しており、レンダラーにはWebの技術（React + TypeScript）を使っています。 CSVエディタは大量の行・セルを表示する必要がありますが、Webの技術ではこのようなシーンではバーチャルスクロールを使うのが定石です。 SmoothCSVでもバーチャルスクロールを使っていましたが、どうやらこのバーチャルスクロールにも限界があるらしく、数百万行のような極端に大量のデータを表示する場合に最後まで表示しきれない問題に遭いました。 ここではバーチャルスクロールの基本と、その限界をどう乗り越えたかを紹介します。 About Me 株式会社ヘンリーでソフトウェアエンジニア & アーキテクト的なことをしつつ、個人開発してます。 Social accounts: kohii on
小規模プロダクトにおける React 状態管理ライブラリ選定 in 2024 - バイセル Tech Blog
はじめに こんにちは！ テクノロジー戦略本部24年新卒の高橋です。 2023年の10月から内定者インターンを経験し、現在は開発3部CRMチームでフロントエンド(以後、FE)エンジニアとして働いております。 チーム内でFEの状態管理ライブラリを選定する機会があり、調査していく中で得た知見を共有したく、執筆に至りました。 少しでも状態管理ライブラリの選定に困っているFEエンジニアの参考になればと考えています。 はじめに 概要 前提 課題感 Context APIの思想とのズレ Context APIの記述量の多さ 状態管理ライブラリに求める要素 小さい単位で取り扱い可能 ボイラーテンプレートが少なく、APIが直感的で書き方の自由度が高くない 軽量 Reactアプリケーション内外での状態管理が可能 最終決定 検討候補 Redux Zustand Jotai Valtio 評価表 移行設計 既存C
ブラウザ内テキスト探索の高速化というテーマで改善を行いました。公開許可は頂いていますが、先方の希望で社名は伏せさせていただきます。 技術的には「再現性がある木構造のノード探索の条件の生成、その実行の高速化」という少しR&Dっぽいタスクでした。Playwright のコードを参考にしつつ、個別により速いパーツで置き換えていく、というもので非常に興味深いものでした。こういう仕事は楽しいので、いくらでも歓迎です。 今回は最初はドメイン理解に時間をあてて、その後十分にドメイン理解が進んだら計測しつつ改善する、という流れです。 以下、敬称略。 相談内容 ブラウザを自動操作する技術を開発している。技術的には一種のE2Eテストの応用技術で、サーバーに要素の探索条件と、その操作を登録する。 今回の相談では、その要素探索が重くなってしまうケースがあり、これを改善してほしい、という依頼。とくにテキストを条件に
記事作成時点で広く使われているHTMLレンダリングエンジンは、ChromeやEdgeの「Blink」、Safariの「WebKit」、Firefoxの「Gecko」の3種に絞られています。ごく少数の大企業や団体がウェブの将来の決定権を握る状況を打破するべく、「ゼロから書かれた新しいウェブエンジン」として「Gosub」の開発が進められています。 Gosub Web Browser Engine https://gosub.io/ Gosubは開発の初期段階で、現時点ではHTMLパーサーが「HTML5を正しく解析できる段階」まで開発が進んでおり、CSSパーサーは概念実証の段階です。また、JavaScriptのエンジンとして、記事作成時点ではGoogleが開発するV8が使用されていますが、Gosubはモジュール性を重視しており、将来的には開発者が好みのJavaScriptエンジンを選択できるよう
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Webアプリを作って収益化する、僕の個人開発ルーティン
［作って学ぶ］ブラウザのしくみ──HTTP、HTML、CSS、JavaScriptの裏側
「携帯動画変換君」20周年、のうらばなし｜MIRO
「Rails vs Node.js」を観た｜laiso
弊社の「意識ﾁｮｯﾄ低いアーキテクチャ」10選
フロントエンド開発環境スタートセット2024秋 - トレタ開発者ブログ
CSSで文節の折り返しを！ br・wbrとauto-phraseの活用術 - ICS MEDIA
これでCSSのみで実装できる！ スクロール方向に合わせてヘッダを非表示・表示する方法を解説
サクッと始めるウェブアプリ開発【Next.js / TypeScript】
【無料】エンジニアの評価シートサンプルと書き方｜制度の作り方や基準を紹介
pixivというシステムはどんな形をしているのか、それはなぜか。 - pixiv inside
Playwrightを参考にブラウザ内テキスト検索を高速化する (事例紹介:サードパーティスクリプト提供会社)
BlinkでもWebKitでもない新開発ブラウザエンジン「Gosub」