個人的に「Webサービスの公開前チェックリスト」を作っていたのですが、けっこう育ってきたので公開します。このリストは、過去に自分がミスしたときや、情報収集する中で「明日は我が身…」と思ったときなどに個人的にメモしてきたものをまとめた内容になります。 セキュリティ 認証に関わるCookieの属性 HttpOnly属性が設定されていること XSSの緩和策 SameSite属性がLaxもしくはStrictになっていること 主にCSRF対策のため。Laxの場合、GETリクエストで更新処理を行っているエンドポイントがないか合わせて確認 Secure属性が設定されていること HTTPS通信でのみCookieが送られるように Domain属性が適切に設定されていること サブドメインにもCookieが送られる設定の場合、他のサブドメインのサイトに脆弱性があるとそこからインシデントに繋がるリスクを理解してお

Intro Fetch API の実装が広まり、 IE もリタイアを迎えたことで、今後忘れ去られていくことになるだろう XMLHttpRequest について。 どのように始まり、どのように広まり、どのように使われなくなっていくのか。その間に残した多大な功績を残す。 XMLHttpRequest の始まり この名前は非常に長いため、通常 XHR と略される。 この API は、現在の Web API のように W3C/WHATWG による標準化を経て策定された API ではない。 Microsoft によるいわゆる独自実装の API として始まり、後追いで標準化される。 したがって、 Web API の中でもかなり異質な命名である XHR が、 XmlHttpRequest でも XMLHTTPRequest でもなく XMLHttpRequest である理由も、 Microsoft の命

Intro 筆者は、 Web のセマンティクスに対する実装の方針として、大きく Push 型の実装 と Pull 型の実装 があると考えている。 もっと言えば、それは実装方法という具体的な話よりも、開発者のセマンティクスに対する態度を表現することができる。 この話は「Push よりも Pull が良い」などと簡単に切り分けられる話ではない。 「自分は今 Push で実装しているのか、 Pull で実装しているのか」この観点を意識するかしないかによって、セマンティクスに対する視野が広くなり、その応用として、たとえば今自分が行っている実装が、将来の Web においてどのような互換性の問題を生じるかなどを想像できるようになるだろう。最近問題になる Ossification を、こうした視点の欠如の結果とみることもできる。 (本エントリでの Ossification は、一般に言われている Pro

アメーバスタッフブログでも記載させていただいた通り、11/15より順次アメブロのAMP対応を終了させることになりました。 なぜAMPをやめるのか？2016年の3月にアメブロはAMP対応をスタートさせていました。 （当時のブログ記事はこちら） そこから5年以上AMPを採用し、モバイルの検索結果からはAMPキャッシュに飛ぶようになっていました。 Googleの検索結果からはGoogleのキャッシュに移動するわけで、当然体感速度としては良好なものであったと思います。 「それなのになぜやめるのか？」 ですが、基本的にはビジネス的な問題となります。 ウェブ界の状況、社会状況等々によっての総合的な判断ということになります。 検索結果がクリックされた際にGoogleのキャッシュが表示されるという点では、CDNのコスト削減等はあるのですが、それでもやはりトータルで考えたときに今回はAMPを終了させるという

Webエンジニアのブログです。

こんにちは、小林（@koba04）です。 本記事では、シングルページアプリケーション（以下、SPA）における状態管理について解説します。 GmailやTwitterは、SPAとして構築されている代表的なWebアプリケーションであり、スムーズなページ遷移をSPAによって実現しています。またElectronやPWA（Progressive Web Apps）の登場により、複雑なアプリケーションをWebの技術を使って構築する場面も増えてきました。 これらの複雑なアプリケーションにおいては、既存のページ単位での状態管理の考え方では対応が難しくなります。 そこで今回は、具体的なフレームワークも取り上げながら、Webフロントエンドにおける状態管理のアプローチについて紹介します。 フロントエンドでの状態管理の複雑化 ページの単位を超えた状態の保持 モデルとビューによる処理の分割 イベントの管理が複雑にな

As time goes on I find myself increasingly annoyed with login forms. As password managers like 1Password (which is what I use) and Chrome’s password manager (which I also sorta use) become more popular, it’s important for websites to be aware of how users go about logging into their sites. Let’s walk through some login patterns and why I think they’re not ideal. And then let’s look at some better

こんにちは丸山@h13i32maruです。 今日、Trickle（読み:トリクル）というサービスをリリースしました！ アクティビティ トピック 他の人のアクティビティ Trickleは「Twitterなにか少し疲れてきたなぁ。でもやめたいわけではないし、うーん」と僕が困っていたことを自分で解決するために作ったサービスです。 なので自分をターゲットにしたサービスなのですが、せっかくなので多くの人に使ってもらいたい！というわけで、リリースのお知らせを兼ねた紹介記事を書きました。気になった方は是非続きを読んでみてください。 まとめ 自分のアクティビティをトピックごとに気兼ねなく書き留めることができる ジョギング、読書、猫と遊ぶ、などの自分で作ったトピックごとにアクティビティを書き留める 他人の興味あるトピックだけをサブスクライブ（いわゆるフォロー）できる 「Aさんの読書トピックはサブスクライブし

千田さんは、ヤフー個人ニュースとして、「ノーベル賞のNHK解説に「キズナアイ」は適役なのか？　ネットで炎上中【追記あり】」という記事を、10/3 10:09に書いた。 ノーベル賞のNHK解説に「キズナアイ」は適役なのか？ ネットで炎上中【追記あり】(千田有紀) - 個人 - Yahoo!ニュース その時、実際のところキズナアイは炎上していたのか？このエントリーは、この疑問を検証する。実際に、10月01日から10月03日までのツイートを収集して、どのくらい炎上していたのかを集計した。実際このニュースのあと炎上したが、千田さんがニュースを書いた時点で炎上していたか？を調査する。その後のことに関しては、こちらのブログが詳しい。 キズナアイ関連ニュースまとめ - まなめはうす 時間がない人向けまとめ 10/01にキズナアイのノーベル賞まるわかり授業が公開されたあと、太田さんがツイートするまで批判ツ

表題の通り、お恥ずかしい限りではありますが、人生ではじめて警察（神奈川県警！）のお世話になる運びとなりました。 罪状としては「不正指令電磁的記録 取得・保管罪」、通称ウイルス罪とのことで、まさに青天の霹靂の思いです。 以下ではこの度起こったことを可能な範囲でありのまま共有できればと思います。 この記事の目的まず、この記事を公開した目的は「他のクリエイターの人に同じ経験をして欲しくない」という一点に尽きます。 手前味噌ではありますが、私はこれまで多くの尊敬するクリエイターの方々と同じように「良いクリエイターであろう」と腐心し、できうるかぎりの努力をしてきたつもりです。 今回の件に関しても決して私利私欲のためではなく、あくまでユーザーのためにできることを、と模索した結果でした。 それがこのような形で取り沙汰されることとなり、残念という他ありません。 忸怩たる思いではありますが、この件から何かし

他人のパソコンのＣＰＵ（処理装置）を借用して、仮想通貨のマイニング（採掘）を手伝わせる「コインマイナー※」。仮想通貨ブームもあって話題になっているが、そのプログラムをサイトに設置している運営者たちが、不正指令電磁的記録（ウイルス）供用や保管などの容疑で相次いで摘発されている。コインマイナー用のプログラムが「ウイルス」と判断されたからだが、技術者からは疑問や反発の声も出ている。なぜなのか。 【用語解説】コインマイナー 仮想通貨取引の正しさを証明するための計算作業に参加し、対価として仮想通貨を入手することを金の採掘に例えてマイニングと呼ぶが、計算には高性能なコンピューターが必要だ。このため、他人のコンピューターの処理能力を借用して行おうとするのがコインマイナー。今回、捜査対象となっているのは、自分の運営サイトにコインマイナー用のプログラムを設置していたケースだが、このほか、第三者がサイトを改ざ

嫁を面接した企業が「あれ、これって……。」となる画像 はじめに 最近嫁が転職活動をしていたのですが、デザイナーは転職活動をする際に「ポートフォリオ」なるものが必要になるそうです。Webデザイナーである嫁は、このポートフォリオをWebサイトとして製作したいとのこと。 エンジニアリングを生業とする旦那として、ここは一肌脱がねばと思い、ポートフォリオサイトの構築をしました。 コントラクター（僕）のスペック iOSエンジニア Webアプリは過去にやっていた クライアント（嫁）のスペック デザイナー（仕事はWeb系） Ruby, JavaScriptはほぼ書けない HTML, CSSは書ける Git, GitHubは使える クライアント（嫁）の要望 パブリックに公開するのではなく、履歴書に添えたい URLを知っている人しかアクセスしない パスワード（BASIC認証）が欲しい デザインはいちから自分で

最近、Webサイトの高速化が話題になっています。 Wantedlyでもサーバーサイドのレスポンス速度はしっかりトラッキングして取り組んでいましたが、フロントエンドはまだまだやれることがあると認識し、悔しさを胸にさっそく動き出しています。 取り組むに当たって、まずは事例を集めていくことから始めました。サーバーサイドの実装を見ることはできないですが、フロントエンドは頑張れば覗けるので、Webサイトの高速化に取り組んでいそうな他のサービスをじっくり観察することで、自分たちのプロダクトに最適な方法を選択できるはずです。 様々な種類のサービスを提供しているサイトを調査してみると、その高速化の手法はサービスごとに結構違っていて、学ぶことが想像以上に多かったので、ブログにまとめてました。同じようにWeb高速化へのモチベーションが高まっている皆さんの参考になれば幸いです。 Netflixまずは、動画ストリ

最初にいっておく。これは負け惜しみだ。 SPAとPWAの現状 自分は日本でReactの勝手エヴァンジェリストみたいなことをやっていて、SPAの重めのコンテンツをよく作ってるからか、「お前らフロントエンドを物事をややこしくして、重いページを量産してウェブを劣化させてるじゃないか！」みたいな批判を、名指しでよく受ける。なんで僕にいうかわからないけど、React = SPA みたいなイメージでスケープゴートにされてるんだろう。それはまあいい。 自分の仕事でSPA技術を使うところは、ちゃんと必要性もあるし理由も説明できる。ただ、やはり近年の複雑化/重量化について思うところはあるので、逆に振って AMP/PWA という選択肢を持っておきたくて、正直言うと依頼されたR&Dの仕事でもあったんだけど、一通り覚えた。なんだけど、今のところ仕事で使うタイミングがない。 PWA技術を仕事で使えなかった理由として