S3 + CloudFront でホスティングしている静的 Web サイトをメンテナンス状態にする
はじめに AWS S3 を用いてホストしている Web サイトで任意の期間だけメンテナンス画面を表示したいという要件がありました。 構成としては、前段に CloudFront をかましていているだけのシンプルな構成です。 細かい設定としては、S3 オリジンは静的 Web サイトホスティングを有効にし、CloudFront からのアクセスしか受け付けないように設定しています。 この記事では、上記の構成でどうやってメンテナンス画面を実現するかということをメインに考えていきます。 やりたいこと 実現するにあたりメンテナンス時の要件を整理してみます。 一般ユーザが Web サイトにアクセスするとメンテナンス画面を表示させたい。 管理者や開発者など特定の IP アドレスによるアクセスは許可し、通常通り操作できるようにしたい。 どうやって実現するか 結論から言うと、CloudFront に WAF の
Webフォント読み込み戦略（2021年） - MOL
Preload web fonts 前回、といっても2年前だが、display=swapとはなにかで、Google Fontsを読み込むときはURLパラメータに display=swap をつけるといいよと言った。というわけで、それ以降、『目標をセンターに入れて、display=swap…』と盲目的に考えるようになってた。 おさらいとして display=swap では、まず代替フォントを表示し、Webフォントをダウンロードしたら、随時スワップするという挙動になる。この場合、代替フォントからWebフォントへ切り替わる FOUT (flash of unstyled text) が起こってしまう。こんな感じ↓ 出典：font-face descriptor playground まぁ何も表示されないよりかは良いかと思うわけだが、時は流れ、最近ではWebの指標として、Web Vitalsという
APIに利用制限をかけるとしたらどういうやりかたがあるのか - おもしろwebサービス開発日記
この記事はSmartHR Advent Calendar 2020 11日目の記事です。 僕のお手伝いしているSmartHRでは、毎週バックエンドエンジニアが集まり、技術的なトピックについて共有、相談しあうミーティングを開催しています。そのミーティングでは僕がTipsなどを共有するコーナーが常設されています*1。 このエントリでは、そのコーナーで共有した内容をひとつ紹介します。 APIに制限をかける方法について APIを外部に提供するとき、一定の制限をかけてユーザがAPIを乱用するのを防ぐことはよくあることではないでしょうか。素直に考えると「1時間に5000回までAPIを実行できる」のようなやり方を思いつきますね。GitHubのAPIもそのやり方ですし、SmartHRのAPIも同様です。 じゃあそれでいいのでは。となるかもしれませんが少し待ってください。いろんなクライアントがAPIを大量に
2020年、オンラインサービスやWebアプリの開発を独学で勉強したい人に役立つ練習プロジェクトのまとめ
Webアプリやスマホアプリ、オンラインショップ、オンラインサービスなど、Web開発における一通りの需要に応えられるような知識・スキルを練習するのに役立つプロジェクトを紹介します。 8つのプロジェクトにはそれぞれ異なる課題が設定されており、開発者が行う実際のタスクが反映されています。 バックエンドが中心ですが、フロントエンドのCSSのテクニックなども磨けます。 8 Projects with modern designs to become a Full-stack Master 2020 by Thu Nghiem 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに Image Uploader My Unsplash CatWiki Authentication App Shoppingify Chat Group Tw
The 2023 Web Developer Roadmap
There has never been a better time to learn to code or make a career change to software engineering. The demand for web developers is at an all-time high, and it’s only increasing. There are both free and premium tutorials online that teach you the skills to get a job as a developer — no CS degree required 🤓. This article details the needed skills and the corresponding tutorials to learn them eff
2020年、注目されているWebデザインの最新トレンドと技術の進化
Webデザイナーとデベロッパー向けに、2020年参考にしたいWebデザインの最新トレンドと技術の進化を紹介します。 最近注目されているWebサイトやスマホアプリのトレンドを調べ、デザインと技術の変化とそのトレンドの根底にある背景を解説します。 Top Web Trends for 2020 and why they are coming by Jouan Marcel 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 Webデザインのほとんどのトレンドは、その時点で利用可能な技術に遡ることができます。少し前までは例えば、表示がフェードインする要素、レスポンシブレイアウト、パララックスなどがそうです。また、グラフィックデザインのトレンドと並行することもあります。 磨りガラスのエフェクト ダークモード どこにでもグラデーション 洗練さ
PWAに特化したカンファレンス「PWA Night CONFERENCE 2020」、2月に渋谷で開催
PWA（Progressive Web Apps）の勉強会コミュニティであるPWA Nightは、PWAに特化したカンファレンスイベント「PWA Night CONFERENCE 2020」を、2020年2月1日にAbema Towers（東京都渋谷区）で開催する。一般チケットは1000円、懇親会付きチケットは2000円。 「PWA Night CONFERENCE」は、PWAについてカジュアルかつフラットに情報交換し、トレンドを盛り上げることを目的に開催する。セッションはビジネス系、開発系の両方のテーマを扱い、エンジニアだけでなくデザイナーやディレクターといった、Webサービス開発に携わるすべての人が楽しめるカンファレンスを目指している。 開催日時は2020年2月1日13時～20時30分（12時15分開場）。 登壇者 PWAは、新たなWeb体験を作っていくためのWeb開発コンセプトで、2
これ知ってる？2019年話題になったWebサービス・アプリ50選まとめ【令和最新】 | XM無料案内所
2019年は、サブスク型、マッチング、AI関連のサービスが流行した一年になった。 また、時代背景から、副業・フリーランス向けのサービスも普及。 食・旅行・趣味など、様々な面で”無駄をなくす”サービスが多いことも特徴的だった。 今回まとめた、2019年話題のサービスは11項目・総勢50選。 フリーランス向け サブスク型 マッチング 仕事効率化 稼げる副業 ライフスタイル 「食」関連 趣味 旅行 女性向け 学生・学習者向け 開発者の想いがこもった普及すること間違いなしのサービスばかりだ。 50選という膨大な記事になってしまったため、ブックマークして暇な時に確認することを強くオススメする！ フリーランスを助ける便利なサービス3選 1. フリラテ フリラテは、これから副業・フリーランスなど「個人で仕事を始めたい」と思っている方のための支援サービス。 フリーランス一歩目を間違わないために、個人での仕
デザイナーの採用担当した私が良いと思ったポートフォリオ｜こばやす｜Webデザイナー
はじめまして、Webデザイナー、ディレクターの こばやす(@kobayas_s)と言います。 普段はtwitterが主な活動場所ですが、そこで以前こんなツイートをしました。 これが思いの他反響があり、深く掘り下げてみようと思いました。 新卒でデザイナーになろうと思っている方や転職活動をしている方に役立てて貰えたら嬉しいです。 私はWebデザイナーなので、ネットの業界に関するポートフォリオの作り方を軸に書いていますが、どんなデザイナーの採用でも考え方は一緒だと思います。 ちなみに、私が最初に入った会社では「プロダクトデザイン」という雑貨やキャラクターグッズなどのデザインをする仕事をしていました。 そこでもポートフォリオは提出必須で、大体下記と同じような内容で作っていました。（今回の内容では応募者の観点＋採用者の観点が含まれています） 01.デザイナーの採用担当者はポートフォリオの何を見ている
JAMstackってなに？実践に学ぶ高速表示を実現するアーキテクチャの構成 - エンジニアHub｜Webエンジニアのキャリアを考える！
JAMstackってなに？実践に学ぶ高速表示を実現するアーキテクチャの構成 JAMstackは、「JavaScript」「APIs」「Markup」の3つの技術を組み合わせた、新しいWebアプリケーションアーキテクチャです。いち早くJAMstackを利用してWebサイトを作成した、寺川直宏さんと風間雅也さんにJAMstackについて聞きました。 JAMstackという言葉をご存知でしょうか。JAMstackは、「JavaScript」「APIs」「Markup」という3つの技術を組み合わせた、新しいWebアプリケーションアーキテクチャです。パフォーマンスの改善、セキュリティの担保、スケーラビリティの確保が見込めるため、フロントエンド界隈で、大きな注目を集めています。 しかしまだ登場したばかりの概念ゆえ、実例も少なく、理解しにくい面もあります。そこで、いち早くJAMstackでWebサイトを
WebAssemblyがW3Cの勧告に到達。「WebAssembly Core Specification 」「WebAssembly Web API」「WebAssembly JavaScript Interface 」の3つ
W3Cの WebAssembly Working Groupは、Webブラウザ上でネイティブコードに近い実行速度で高速に実行できるバイナリフォーマット「WebAssembly」の仕様が勧告に到達したことを発表しました。 今回勧告になったのは、WebAssemblyに関連する3つの仕様です。 1つ目はWebAssemblyのバイナリファイルを実行する仮想マシンの仕様を定義した「WebAssembly Core Specification」。これは一般的なマイクロプロセッサの動作を模倣するような作りにすることで、WebAssemblyのバイナリファイルでプロセッサのネイティブコードに近い実行速度を実現するようになっています。 2つ目の「WebAssembly Web API」は、さまざまなプラットフォームでWebAssemblyを利用可能にするため、WebAssemblyバイナリファイルのシリ
「ステマ依頼」を受けたときの断り方（ケース別文章例） - Webライターとして生きる
ブロガーやライターとして活動していると、お問い合わせフォーム経由で「ステルスマーケティング」の依頼が来ることが往々にしてある。 漫画家の人にもこうした依頼はあるようで、Twitterに投稿された「映画 アナと雪の女王2」のレビュー漫画のいくつかがステルスマーケティングの疑惑を持たれ、炎上している。 こうしたステマ炎上事件に対し、クリエイターサイドからは「私だったら絶対に受けない」「断って当然」みたいな反応もちらほら見られるが、これはまさに《言うは易く行うは難し》であり、実際に自分が当事者になったときにステマを断るのはかなり難しい。 もし提示された報酬が100万円だったら？ 契約締結＆入金後に相手がステマの話を持ち出してきたら？ 原稿納品後に「PR表記無しでツイッター告知することも含めての依頼です。契約書にも『弊社のマーケティング活動に協力すること』が条件として書かれています。従っていただけ
徳丸浩氏が誤解を指摘――Webサービス運営者が知らないと損害を生む「パスワード保護の在り方」
徳丸浩氏が誤解を指摘――Webサービス運営者が知らないと損害を生む「パスワード保護の在り方」：＠ITセキュリティセミナー サイバーセキュリティの世界で取り上げるべきトピックは多々あるが、「基本的な守りを固める」ことも重要だ。2019年6月26日に行われた「＠ITセキュリティセミナーロードショー」の中から、その際に役立つセッションの模様をレポートする。 2019年初め、ファイル共有サイト「宅ふぁいる便」で会員情報の漏えいが発生した事件では、世間に大きな驚きが走った。漏えいの事実自体もさることながら、保存されていたパスワード情報が「暗号化されていなかった」ためであり、特にインターネット上では「今どき、パスワードを暗号化していないなんて」と厳しい批判が相次いだ。 複数の調査や報道によると、パスワードを平文で保存しているサイトは宅ふぁいる便に限らない。その後FacebookやGoogle、Twit
Affinity製品を使用しているWeb制作者のインタビュー動画と最近のユーザーグループの活動について
Affinity User Group JAPANの活動として、Affinity製品を使用しているプロのWebデザイナーの方のインタビュー動画を撮影したのですが、その際撮影のお手伝いをさせていただきました。 インタビューに応じていただいたのは株式会社インターフィールの勝谷元気さんです。 動画は以下からご覧いただけます。 勝谷元気さん(@nibushibu)は2014年のAffinity Designer Beta版の頃から使用されているそうで、Webサイトの制作だけでなく、印刷物もAffinity Designerで作られているとのことです。 撮影・編集・アップロードされたYMRchannelではAffinity Designer NINJAというAffinity Designerの日本語チュートリアル動画を配信されています。 なお、このインタビュー動画には翻訳者の方に翻訳していただいた英
How to Use the Web Share API | CSS-Tricks
The Web Share API is one that has seemingly gone under the radar since it was first introduced in Chrome 61 for Android. In essence, it provides a way to trigger the native share dialog of a device (or desktop, if using Safari) when sharing content — say a link or a contact card — directly from a website or web application. While it’s already possible for a user to share content from a webpage via
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Run C# natively in the browser through the web assembly via mono-wasm
Carbonのようにソースコードにシンタックスハイライトを付けて画像化してくれるWebサービス「Codeimg .io」が公開。
WordPress Proposes Plan for 61% of WP Sites Using Outdated PHP
Webフレームワークとして、Python/Django、PHP/Laravel、Ruby on Rails、それぞれの強みは何だと思いますか？
検索ユーザーに選ばれるコンテンツ設計とは？―小手先のノウハウではなく“検索意図”と“背景”を捉える | 【レポート】Web担当者Forumミーティング 2019 Spring
