はじめに AWS S3 を用いてホストしている Web サイトで任意の期間だけメンテナンス画面を表示したいという要件がありました。 構成としては、前段に CloudFront をかましていているだけのシンプルな構成です。 細かい設定としては、S3 オリジンは静的 Web サイトホスティングを有効にし、CloudFront からのアクセスしか受け付けないように設定しています。 この記事では、上記の構成でどうやってメンテナンス画面を実現するかということをメインに考えていきます。 やりたいこと 実現するにあたりメンテナンス時の要件を整理してみます。 一般ユーザが Web サイトにアクセスするとメンテナンス画面を表示させたい。 管理者や開発者など特定の IP アドレスによるアクセスは許可し、通常通り操作できるようにしたい。 どうやって実現するか 結論から言うと、CloudFront に WAF の

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という

この記事はSmartHR Advent Calendar 2020 11日目の記事です。 僕のお手伝いしているSmartHRでは、毎週バックエンドエンジニアが集まり、技術的なトピックについて共有、相談しあうミーティングを開催しています。そのミーティングでは僕がTipsなどを共有するコーナーが常設されています*1。 このエントリでは、そのコーナーで共有した内容をひとつ紹介します。 APIに制限をかける方法について APIを外部に提供するとき、一定の制限をかけてユーザがAPIを乱用するのを防ぐことはよくあることではないでしょうか。素直に考えると「1時間に5000回までAPIを実行できる」のようなやり方を思いつきますね。GitHubのAPIもそのやり方ですし、SmartHRのAPIも同様です。 じゃあそれでいいのでは。となるかもしれませんが少し待ってください。いろんなクライアントがAPIを大量に

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

This article details the needed skills and the corresponding tutorials to learn them effectively. The illustrated guide is provided by Kamran Ahmed and can be found on roadmaps.sh or the GitHub repo — Kamran’s work is excellent so be sure to star the repo and subscribe to his newsletter to support his efforts. Don’t be intimidated by the map. It may seem like a lot, but I’ll break it down so you c

Webデザイナーとデベロッパー向けに、2020年参考にしたいWebデザインの最新トレンドと技術の進化を紹介します。 最近注目されているWebサイトやスマホアプリのトレンドを調べ、デザインと技術の変化とそのトレンドの根底にある背景を解説します。 Top Web Trends for 2020 and why they are coming by Jouan Marcel 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 Webデザインのほとんどのトレンドは、その時点で利用可能な技術に遡ることができます。少し前までは例えば、表示がフェードインする要素、レスポンシブレイアウト、パララックスなどがそうです。また、グラフィックデザインのトレンドと並行することもあります。 磨りガラスのエフェクト ダークモード どこにでもグラデーション 洗練さ

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年は、サブスク型、マッチング、AI関連のサービスが流行した一年になった。 また、時代背景から、副業・フリーランス向けのサービスも普及。 食・旅行・趣味など、様々な面で”無駄をなくす”サービスが多いことも特徴的だった。 今回まとめた、2019年話題のサービスは11項目・総勢50選。 フリーランス向け サブスク型 マッチング 仕事効率化 稼げる副業 ライフスタイル 「食」関連 趣味 旅行 女性向け 学生・学習者向け 開発者の想いがこもった普及すること間違いなしのサービスばかりだ。 50選という膨大な記事になってしまったため、ブックマークして暇な時に確認することを強くオススメする！ フリーランスを助ける便利なサービス3選 1. フリラテ フリラテは、これから副業・フリーランスなど「個人で仕事を始めたい」と思っている方のための支援サービス。 フリーランス一歩目を間違わないために、個人での仕

はじめまして、Webデザイナーの こばやす(@kobayas_s)と言います。 普段はtwitterが主な活動場所ですが、以前こんなツイートをしました。 これが思いの他反響があり、深く掘り下げてみようと思いました。 新卒でデザイナーになろうと思っている方や転職活動をしている方に役立てて貰えたら嬉しいです。 私はWebデザイナーなので、ネットの業界に関するポートフォリオの作り方を軸に書いていますが、どんなデザイナーの採用でも考え方は一緒だと思います。 ちなみに、私が最初に入った会社では「プロダクトデザイン」という雑貨やキャラクターグッズなどのデザインをする仕事をしていました。 私のキャリアでよくある質問は下記に記載したので、興味がある方はみてみてください。 そこでもポートフォリオは提出必須で、大体下記と同じような内容で作っていました。（今回の内容では応募者の観点＋採用者の観点が含まれています

JAMstackってなに？実践に学ぶ高速表示を実現するアーキテクチャの構成 JAMstackは、「JavaScript」「APIs」「Markup」の3つの技術を組み合わせた、新しいWebアプリケーションアーキテクチャです。いち早くJAMstackを利用してWebサイトを作成した、寺川直宏さんと風間雅也さんにJAMstackについて聞きました。 JAMstackという言葉をご存知でしょうか。JAMstackは、「JavaScript」「APIs」「Markup」という3つの技術を組み合わせた、新しいWebアプリケーションアーキテクチャです。パフォーマンスの改善、セキュリティの担保、スケーラビリティの確保が見込めるため、フロントエンド界隈で、大きな注目を集めています。 しかしまだ登場したばかりの概念ゆえ、実例も少なく、理解しにくい面もあります。そこで、いち早くJAMstackでWebサイトを

W3Cの WebAssembly Working Groupは、Webブラウザ上でネイティブコードに近い実行速度で高速に実行できるバイナリフォーマット「WebAssembly」の仕様が勧告に到達したことを発表しました。 今回勧告になったのは、WebAssemblyに関連する3つの仕様です。 1つ目はWebAssemblyのバイナリファイルを実行する仮想マシンの仕様を定義した「WebAssembly Core Specification」。これは一般的なマイクロプロセッサの動作を模倣するような作りにすることで、WebAssemblyのバイナリファイルでプロセッサのネイティブコードに近い実行速度を実現するようになっています。 2つ目の「WebAssembly Web API」は、さまざまなプラットフォームでWebAssemblyを利用可能にするため、WebAssemblyバイナリファイルのシリ

ブロガーやライターとして活動していると、お問い合わせフォーム経由で「ステルスマーケティング」の依頼が来ることが往々にしてある。 漫画家の人にもこうした依頼はあるようで、Twitterに投稿された「映画 アナと雪の女王2」のレビュー漫画のいくつかがステルスマーケティングの疑惑を持たれ、炎上している。 こうしたステマ炎上事件に対し、クリエイターサイドからは「私だったら絶対に受けない」「断って当然」みたいな反応もちらほら見られるが、これはまさに《言うは易く行うは難し》であり、実際に自分が当事者になったときにステマを断るのはかなり難しい。 もし提示された報酬が100万円だったら？ 契約締結＆入金後に相手がステマの話を持ち出してきたら？ 原稿納品後に「PR表記無しでツイッター告知することも含めての依頼です。契約書にも『弊社のマーケティング活動に協力すること』が条件として書かれています。従っていただけ

Carbonのようにソースコードにシンタックスハイライトを付けて画像化してくれるWebサービス「Codeimg.io」が公開されています。詳細は以下から。 Codeimg.ioはドイツ・ミュンヘンのエンジニアIgor Dusparaさんが公開したWebサービスで、ソースコードをシンタックスハイライトや装飾を施して画像化してくれる機能があります。 Create and share beautiful images of your source code. #codeimg codeimg.io Codeimg.io 同様のWebサービスはDawn Labsが公開している「Carbon」やRishi Mohanさんの「CodeZen」などがありますが、IgorさんがProducthuntでコメントしているように、Codeimg.ioはモバイルフレンドリーで、FacebookやTwitter、I

回答 (2件中の1件目) 会社が倒産する主な原因だと分かり切っているRuby on Railsは決して開発で使用してはいけないと言う重要な話をしようと思います。 Railsは、メリットは、開発スピードは速く、開発していて楽しいが、 デメリットの方が遥かに大きく、ソースコードの分析は開発者本人にしか分からないので、 チームでの共同開発やメンテナンスに向かない、他人がソースを分析出来ないのでメンテナンス不能。 ですから、もし、Railsで企業の重要なシステムを動かしている場合は、メンテナンスや改善の必要が出た場合には、システムの設計書を元に、無ければ担当部署やお客様にヒアリングして調...

徳丸浩氏が誤解を指摘――Webサービス運営者が知らないと損害を生む「パスワード保護の在り方」：＠ITセキュリティセミナー サイバーセキュリティの世界で取り上げるべきトピックは多々あるが、「基本的な守りを固める」ことも重要だ。2019年6月26日に行われた「＠ITセキュリティセミナーロードショー」の中から、その際に役立つセッションの模様をレポートする。 2019年初め、ファイル共有サイト「宅ふぁいる便」で会員情報の漏えいが発生した事件では、世間に大きな驚きが走った。漏えいの事実自体もさることながら、保存されていたパスワード情報が「暗号化されていなかった」ためであり、特にインターネット上では「今どき、パスワードを暗号化していないなんて」と厳しい批判が相次いだ。 複数の調査や報道によると、パスワードを平文で保存しているサイトは宅ふぁいる便に限らない。その後FacebookやGoogle、Twit

Affinity User Group JAPANの活動として、Affinity製品を使用しているプロのWebデザイナーの方のインタビュー動画を撮影したのですが、その際撮影のお手伝いをさせていただきました。 インタビューに応じていただいたのは株式会社インターフィールの勝谷元気さんです。 動画は以下からご覧いただけます。 勝谷元気さん(@nibushibu)は2014年のAffinity Designer Beta版の頃から使用されているそうで、Webサイトの制作だけでなく、印刷物もAffinity Designerで作られているとのことです。 撮影・編集・アップロードされたYMRchannelではAffinity Designer NINJAというAffinity Designerの日本語チュートリアル動画を配信されています。 なお、このインタビュー動画には翻訳者の方に翻訳していただいた英

検索上位でもAI Overviewsに出ない!? 老舗米屋・八代目儀兵衛が取り組んだGEO施策 4月20日 8:00

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