独力でWebサービスを開発・構築できるフルスタックエンジニアへのロードマップ─幅広いスキルを「Udemy夏のビッグセール」で学ぶ！ - はてなニュース
Webで新規サービスを立ち上げる際に、UIからインフラ周りまで一人で面倒を見られるエンジニアは、少人数のスタートアップでなくとも非常に頼れる存在です。どんな課題に直面しても技術力で乗り越える、そんなスキルフルなエンジニアに憧れる方も多いでしょう。 この記事では、フロントエンドのプログラミング（JavaScript周辺）からサーバーサイド、インフラ、さらに開発手法まで、Web開発で必要になるさまざまなレイヤーのフルスタックなスキルの現在地と、関連するUdemyの講座を紹介します。 株式会社ヘンリーでVPoEを務める松木雅幸（@songmu）さんの執筆です。 フルスタックエンジニアに必要なスキル さまざまな講座でまとめて学習してみよう Udemyでは夏のビッグセールを開催中！ ※この記事は、株式会社ベネッセコーポレーションによるタイアップ広告です。記事末に、はてなブックマークした方にAmazo
Webサービス公開前のチェックリスト
個人的に「Webサービスの公開前チェックリスト」を作っていたのですが、けっこう育ってきたので公開します。このリストは、過去に自分がミスしたときや、情報収集する中で「明日は我が身…」と思ったときなどに個人的にメモしてきたものをまとめた内容になります。 セキュリティ 認証に関わるCookieの属性 HttpOnly属性が設定されていること XSSの緩和策 SameSite属性がLaxもしくはStrictになっていること 主にCSRF対策のため。Laxの場合、GETリクエストで更新処理を行っているエンドポイントがないか合わせて確認 Secure属性が設定されていること HTTPS通信でのみCookieが送られるように Domain属性が適切に設定されていること サブドメインにもCookieが送られる設定の場合、他のサブドメインのサイトに脆弱性があるとそこからインシデントに繋がるリスクを理解してお
PythonだけでWebアプリが作れるライブラリが増えている（2024.05） - Qiita
※本記事で言及しているReflexのdiscord内に日本語チャンネルをつくってもらいました。もし、興味をもった人がいたら参加してみてください。 １．PythonだけでWebアプリをつくるライブラリが増えている 最近（2024.05）、Python界隈ではPythonだけでWebアプリが作れるライブラリが増えています。詳しくは他の記事を参照してもらえればと思います。 以下の記事がとても参考になりました。ありがとうございます。 ２．ライブラリの分類 こうしたライブラリも大きくわけて２つの種類があるように思います。 ①データ解析の結果を表示するダッシュボードライブラリ ②汎用的なWebアプリをつくるローコードライブラリ ①ダッシュボード系ライブラリ たとえば、上記の記事にも出てきますし、ネットでもかなり情報の多い、StreamlitやDashは項番1のダッシュボードライブラリに該当すると思いま
Cloudflare PagesでURL短縮サービスをつくる！
Cloudflare PagesでURL短縮サービスを作ってみましょう！これを作ることであなたは以下を体験することができるしょう。 HonoでWebページをつくること Cloudflare KVをアプリケーションの中で使うこと アプリケーションをCloudflare Pagesへデプロイすること アプリケーションの特徴 今回作ってもらうアプリケーションはこのような特徴があります。 Viteを使って開発 UI付き JSXを使ってHTMLを書ける メインのコードは100行以下！ Zodを使ったバリデーション バリデーションエラーも表示 簡易なCSRF対策 デモ 完成品を使っている様子です。 完成品 完成済みのコードは以下にあります。 アカウント 今回、アプリケーションを作ってCloudflare PagesへデプロイするにはCloudflareのアカウントが必要です。無料の範囲で遊べるので、も
コストをかけずにWebサービスを公開するための構成例 - Qiita
はじめに 個人でフロントエンド(react)、バックエンド(node.js)、データベース(postgreSQL)を利用したWebサービスを公開したいと考えていました。 まずはテスト的に無料で外部公開できるサービスがないか調査しましたが、2022年8月に有料化されたHerokuの記事ばかりヒットしてしました。 結果的には無料で使用できる構成があり、実際にテストプログラムを動作させることができましたので構成例として記載しておきます。 ※無料なので比較的厳しい条件も含まれていたりするのでそれぞれのサービスを確認お願いします。 例えばsupabaseは数日間利用がないとインスタンスが一時停止して手動で起動させないといけないなどがあります。 今回試したサービス できるだけ同じサービスに集約したいと考えていましたが、実際にはフロントエンド、バックエンド、データベースはそれぞれ異なるサービスになってし
【1月23日追記】12月23日、24日に発生しました障害に関するご報告
いつもSkebをご利用いただき、誠にありがとうございます。 12月23日12時よりskeb.jpにアクセスできない大規模な障害が発生しておりましたが、12月24日07時に復旧いたしました。 12月23日、および12月24日が納品期限のリクエストは納品期限を12月25日23時59分までに延長させていただきます。 みなさまには多大なご迷惑をお掛けしましたことをお詫び申し上げます。 本障害につきまして詳細をご報告させていただきます。 概要日時: 12月23日12時22分〜12月24日7時00分 (JST) ダウンタイム: 18時間38分 内容: skeb.jpにアクセスできない不具合 原因: SkebはすべてのサーバとシステムをHerokuに設置していたが、障害発生時刻より同サービスのアカウントが理由の通知なく利用できなくなった。 解決: Herokuの一切の利用を中止し、すべてのサーバとシステ
[JavaScript] URLを文字列結合で組み立てないために、url-cheatsheetを作った
[JavaScript] URLを文字列結合で組み立てないために、url-cheatsheetを作った URLを文字列結合で組み立てると色々問題が起きやすいので、それを避けるためにURL APIやURLSearchParams APIでURLを組み立てるパターンをまとめたチートシートを作りました。 azu/url-cheatsheet: URL manipulation cheatsheet for JavaScript URLにユーザーが入力した文字列を含めるときはencodeURIComponentでエスケープする URLはプレーンな文字列ではなく構造化された文字列(文字の並びに意味がある文字列)として扱わないと、さまざまな問題を抱えやすいです。 たとえば、次のように文字列結合でURLを組み立てるとパストラバーサルの問題があります。 name に ../../adminのような文字列が
![[JavaScript] URLを文字列結合で組み立てないために、url-cheatsheetを作った](https://cdn-ak-scissors.b.st-hatena.com/image/square/b26f7dc8f9e783316f720174980e93c627438d74/height=288;version=1;width=512/https%3A%2F%2Fefcl.info%2Fpublic%2Ffavicon.png)
「SPAのタブ永遠に開きっぱなし問題」を更新ボタンを設置せず解決した - 橋本商会
こんにちは。強いUIはボタンを捨てるをスローガンにScrapboxを開発しています。shokaiですshokai.icon Helpfeel Advent Calendar 2022の5日目の記事です 昨日はHelpfeelエンジニアのyado.iconさんでした 採用面接中にチャーハン・ピラフ判定器とスタバ警察botで盛り上がる会社に入った | 株式会社Helpfeel ヨコハマハウスフラペチーノがエンジニア採用の役にたった？みたいで良かったです <a>タグの挙動を工夫する事で、Scrapboxからみたいなボタンをなくしました 更新ボタンの役割は2つ 更新がある事を教える 押すとアプリが更新される Scrapboxも昔こういうメニューがあった 今はもう無い では解説ですshokai.icon SPAのタブ永遠に開きっぱなし問題とは？ SPAとstaticなwebサイトの違い static
BASEのノーコードはどのように実現されているのか？ - BASEプロダクトチームブログ
基盤チームの右京です。 BASE ではショップのデザインを誰でも簡単にできるような、いわゆるノーコードな機能を提供しています。 デザイン | BASE (ベイス) ネットショップを無料で簡単に作成 この記事では、そんなノーコードなシステムの裏側について、簡単にですが解説しています。 ショップページ配信の基盤システム ノーコードの前にまず BASE のショップページ(ShopFront と呼んでいます)がどのようなシステムかを知っておく必要があります。BASE のショップページは特定の URL にアクセスすると必要なデータをデータベースから取得し、テンプレートエンジンを使ってサーバーのプログラムで HTML を生成して返す、よくある伝統的な Web ページとして実装されています。ただし、ショップ毎にページのデザインは全く異なるため、1 つの固定のテンプレートを利用しているわけではなく、ショッ
PHPとSQLiteをWebAssembly化し、Webブラウザ上でWordPressを実行可能にしたデモをVMwareが公開
VMwareのWasm Labsは、Webブラウザ上でWordPressを実行可能にしたデモを公開しました。 デモページをWebブラウザで開くと、実際にWebブラウザ上でWordPressが実行されます。 WordPressはオープンソースで開発されている代表的なCMSです。PHPで開発されています。バックエンドデータベースとしてMySQLが使われることが一般的ですが、今回のデモではSQLiteが使われています。 今回のデモを公開したVMwareのWasm Labsは、C言語をWebAssemblyバイナリにコンパイルできるEmScriptenコンパイラを用いて、PHPとSQLiteのコンパイルを行っています。 さらにメモリ上にファイルシステムを構築し、Service Workerをプロキシとするなど追加でWordPressを実行可能な環境を作り上げ、デモを作成したとのことです。 WebA
個人開発のサービスをVPSからVercelとCloud Runに移行した話
最近以下のような記事で個人開発のコストの話をよく見かけて、ちょうど自分も個人サービスをコストカットのためにVPSからほぼ無料なスタックに移行していたので構成とかを書いてみる。 前提としてはこんな感じ。 仲間内で使ってるだけのWebアプリケーション。月イチくらいしか使わない 技術スタックは技術的な実験とか学習を兼ねているので多少オーバースペックになるのはいい お金はなるべくかけたくない 移行前のスタック フロントエンドはNuxt.js、Netlify バックエンドはRailsでgRPC、envoyを噛ませてフロントエンドからはgRPC-Webで呼んでる VPS上にバックエンドのアプリケーションとDB（postgres）を動かしてる バックエンドは普通のRailsアプリにしてHerokuにするのが一番楽でお金もかからないんだけど、gRPC-Webを試してみたくて、そうするとproxyが必要にな
個人開発のコストはDB次第 - laiso
個人でWebサービスを継続的に運用するのは金がかかってかなわんという問題がある 「個人開発」だと定義が曖昧なので自己資金かつ赤字のプロジェクト(Webサービス)ということにする。 そういうプロジェクトではプロダクトオーナー=自分、開発者=自分、予算管理者=自分というロールになるので予算管理者としてコストを図る必要がある(ここでいうコストはWebサービスを実現するアプリケーションのランニングコストのこと)。 通常はみんな自分の人件費を0として計算していると思う(逆にいうとそれが負債という考え方もできると思う)。 ただしメンテナンス時間とコストのトレードオフもあるので、人件費0ではあるけど有限の時間は別軸として管理しているのが普通だと思う。極端な例だと「コスト削減できるけどメンテナンス時間10倍になる」というのは避けられる。 仮に個人開発のプロジェクトの予算を月数千円から高くても1万円ぐらいか
Electronの代替を目指す軽量なRust製フレームワーク「Tauri」、リリース候補版に到達
WindowsやmacOS、Linuxなどのクロスプラットフォーム対応のデスクトップアプリ開発を容易にするフレームワークとして高い人気を持つフレームワークが「Electron」です。 ElectronはChromiumとNode.jsを用いることで、HTML/CSS/JavaScriptのWebテクノロジーによってデスクトップアプリケーションを開発できるのが最大の特徴です。 いまやElectronは、Visual Studio CodeやMicrosoft Teams、Slack、GitHub Desktop、そして最近話題のNotionなど、さまざまなアプリケーションに採用されています。 このElectronの優れた特徴を備えつつ、よりメモリ消費量が小さくファイルサイズもコンパクトで、高いセキュリティを備え、柔軟なライセンスを実現しようと開発されたのが「Tauri」です。 Tauriは、
5年かけて作ったウェブアプリを Hacker News に投稿し、最初の1ドルを得た話
これは5年かけて JavaScript の技術スタックの間をうろつき、無駄な時間を過ごし、迷い、そしてなんとかローンチにこぎつけた体験の記録です。 自己紹介 初めまして。私は小さなモバイルアプリ開発会社を運営しているエンジニアです。 プログラミングを始めたのと同じくらいのときから、趣味で作曲活動をしています。 今日の作曲は DAW と呼ばれる大型のソフトウェアを利用することがスタンダードになっています。しかしたくさんのプラグインをマシンにインストールしなければならないことや、すぐに立ち上がる作曲ソフトが無いことにフラストレーションを覚え、軽量な MIDI シーケンサーアプリを好んで使っていました。 しかしそれらの多くは Windows2000 の時代から存在し、アップデートされず、その上 Windows 10 以降 MIDI の再生はまともにサポートされなくなりました。 その問題を解決する
WEBサーバをコンテナにした際に静的コンテンツはどこへ保存するのか | DevelopersIO
WEBアプリ WEBフレームワークはEchoを利用します。views/index.htmlと、assets/images/orora24O.jpgを読み込んでEC2ローカルに保存した画像を表示するだけページを作成しました。このアプリケーションをEC2インスタンスで実行しWEBサーバとして起動します。 手元でビルドしてEC2へ必要なファイルをコピーする計画です。ディレクトリ構成は以下です。 $ tree . ├── assets │ └── images │ └── orora240.jpg ├── go.mod ├── go.sum ├── main.go └── views └── index.html main.go package main import ( "io" "net/http" "text/template" "github.com/labstack/echo/v
Flashエミュレーター「Ruffle」はなぜ本家Flashの問題点を解決できるのか - 緑SM64のいろいろメモ
Adobe Flash Playerがセキュリティの問題などから2020年末に終了することが発表され、Flashで作られたゲームなどのコンテンツをなんとか次世代につなげようという試みがいくつか出てきています。 それらの中でも注目を集めているのが、ブラウザ上で動くFlashエミュレータRuffleです。 ruffle.rs Ruffleはユーザーがブラウザの拡張機能やデスクトップアプリとして利用可能なほか、Webサイト管理者側がWebサイト側に設置すればユーザーが特に何もしなくてもFlashコンテンツを再生することが可能です。 つまり、ユーザーかWebサイト管理者側のどちらか一方が導入していれば、Flashコンテンツを再生することができます。 開発は急速に進められており、多くのFlashアニメーションが再生可能なだけでなく、最近では「くまのプーさんのホームランダービー！」「ハム将棋」などの人
ローカル開発環境の https 化 | blog.jxck.io
Intro Web の https 化が進み、それに伴って https を前提とする API も増えてきた。 そうした API を用いた開発をローカルで行う場合、 localhost という特別なホストを用いることもできるが、それだけでは間に合わないケースも少なからずある。 localhost を https にするという方法もあるが、そのように紹介されている方法には、いくつか注意すべき点もある。 この辺りの話を、直近 1 ヶ月で 3 回くらいしたので、筆者が普段使っている方法や注意点についてまとめる。 特に推奨するつもりはない。 Update chrome の --host-rules について追記 localhost での開発の注意点 例として https://example.com にデプロイする予定の ServiceWorker を用いたアプリがあったとする。 開発をローカルで行う
Nuxtアプリを無料で公開するときに試した5つの環境まとめ(Firebase/GAE/Netlify/Heroku) - Qiita
最近Nuxtでいろいろ作っているけど、無料で使える環境をいろいろ試してる。 いろいろメリデメあるけど、SPAならNetlify/SSRならHerokuがよさそう。 いままで試したものをまとめてみた。 ほしかったもの 主に開発してるのがCGM系のWebサービスなので、 動的なOGP画像などが設定できる(OGP芸) カスタムドメインが使える 日次のランキング集計などの定期実行ができる が、無料でできて、なるべく実装が楽で、そこまで遅くないのがうれしい。 試した5つのパターン 試したのは以下の5パターン。試してみた順で記載。 Nuxt(SSR) + Cloud Function 起動がかなり遅かった。。実装も大変なのでNG Nuxt(SPA) + Firebase Hosting 構築はかなり楽。ただ、OGP芸が大変でFunctionsが必要 Nuxt(SPA) + Netlify プレレンダリ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
サブスクリプションサービスをつくる時にエンジニアが考えること / Behind the Scenes: Engineering a Subscription Service
LOCAL環境でHTTPSが必要なときはlocal-ssl-proxyが便利 - Qiita
