はじめに robots.txt robots.txt の基本 robots.txt の限界 X-Robots-Tag X-Robots-Tag の仕様 X-Robots-Tag と robots.txt の組み合わせに注意 X-Robots-Tag の限界 さいごに 参照 はじめに こんにちは。SRE マネージャーの izzii です。最近会社でオフィスの引越しがありました。前のオフィスはコワーキングスペースで複数社で空間を分割するようなオフィスだったのですが、フロア丸々テックタッチというのが新鮮です！ エレベーターを上がると会社のロゴが大きく見えるのが嬉しい！ さて、私は一年ほど前にウェブセキュリティの文脈でクローラーについて調査することがありました。そこで robots.txt や meta tag に関する不正確であったり古い記事が、検索の上位に紛れ込んでいることに気がつきました。同

Web app to desktop app in minutes Take your web app codebase and transform it into a cross platform desktop app with native functionality.

このように、REST の設計原則に従って API を構築することで、ほとんどの API 設計は直感的に、かつ問題なく行うことができます。 デザインパターンの紹介 ここからが本題です。大抵の場合、上の例で示したような API 設計で十分です。 ただ、複雑な要件では、上のような典型的な API 設計のみでは良いAPIを設計するための4つの特性を満たせないことがあり、そのような場合のためにデザインパターンが有効です。 カスタムメソッド 概要 カスタムメソッドは、標準的な CRUD 操作（作成、読み取り、更新、削除）では対応できない特定の操作が必要になる場合に便利です。例えば、メールの送信や即時の文書翻訳など、通常の create や update メソッドでは処理が難しい操作がこれに該当します。 参考までに、以下に Google が出しているカスタムメソッドの記事を示します。 実装例 以下は、カ

これをどう作ったかの解説。 PWA まず、上のスクリーンショットのアイコンはSafariの「ホーム画面に追加」で作られたものである。タップするとフレームなしのブラウザが立ち上がって、xsystem4（ゲームエンジン）のWebAssembly版が起動する。xsystem4のWebAssembly移植についてはこちらの記事に書いた。 この種のWebアプリはプログレッシブウェブアプリ (PWA)と呼ばれる。最近さっくり廃止されかかったりして、いつまで使えるかは少し心配でもあるが…。 iOS / iPadOS SafariにおけるPWA SafariのPWA対応は他プラットフォームのChromium系ブラウザと大きく違っている点が一つあって、SafariとインストールされたPWAはストレージを共有しない。つまり、例えばSafariでログインしたユーザーがホーム画面にサイトをインストールしてそちらを

バックエンドエンジニア兼万年ダイエッターの taisa です。テックタッチは、以前マイクロサービスからモジュラーモノリスを経て新マイクロサービスへの切り直しを実施しました。本記事では、マイクロサービス・モノリスについて簡単に触れながらテックタッチがどういったプロセスでマイクロサービスの切り直しを実施したかを紹介します。 はじめに マイクロサービスとモノリス マイクロサービスとは マイクロサービスの利点 モノリスとは 単一プロセスモノリス モジュラーモノリス 分散モノリス テックタッチの場合 初期の頃の構成イメージ マイクロサービス切り直し前 特徴 モジュラーモノリス化 サービスの移行 別ドメイン境界でサービス切り直し イベントストーミング マイクロサービス切り直し後 DB 統合へ続く まとめ 参考 追記 はじめに テックタッチは初期の頃からマイクロサービスアーキテクチャを採用していますが、

The story of 'stale-while-revalidate' HTTP Cache and missing headers The Cache-Control HTTP header offers a wide range of possibilities for optimizing web applications. Two of its relatively interesting values are the stale-while-revalidate and stale-if-error attributes, described in the RFC 5861 specification. Support for the former attribute has already been implemented in the most popular brows

はじめに 三行まとめ TanStack Query とは？ v5 アップデート内容の紹介 hooks のインターフェースの統一 Suspense の正式サポート v4 v5 Optimistic Update をシンプルに そもそも Optimistic Update とは？ デモアプリ Optimistic Update の実装例 v4 v5 まとめ 参考資料 はじめに こんにちは！テックタッチでフロントエンドエンジニアをしている tsune です。野球好きの自分は、この時期になるとプロ野球開幕が待ち遠しくなってきます⚾ 開幕戦のチケットも確保したので、当日は会社のメンバーと一緒に神宮球場に行く予定です🥳 この記事では 2023 年 10 月に正式リリースされた TanStack Query の v5 へのアップデート内容を紹介します！ また、その中でも Optimistic Upda

The MDN Curriculum provides a structured guide to the essential skills and practices for being a successful front-end developer, along with recommended learning resources. Last updated: February 2024 Beginner's level Self-paced Free Defines the essential skills and knowledge every front-end developer needs for career success and industry relevance. Created by Mozilla and refined with insights from

こんにちは。SWATチームの今谷と、LY会員サービス統括本部の木所です。 LINEとヤフーの会社合併に伴って、LINEヤフー株式会社が提供するサービスを利用するユーザーに「新プライバシーポリシーへの同意」をいただくためのモジュールを開発しました。本記事では、ヤフーのユーザー5,400万人から”同意”を得るための工夫について、実装上の不具合も交えてご紹介します。 なお、ご紹介する内容は、UIT × Bonfire Front-end Meetup #1 での発表が起点となっています。詳細についてより深く知りたい方は、発表資料 や Podcast をあわせてご参照ください。 会社合併と、新プライバシーポリシーのご案内 LINEとヤフー、それぞれで同意モジュールがあります。Web向けのほか、iOS・Androidアプリ向けにも提供しました。 Webの同意モジュールでは「Modal版」と「Ful

Intro 以前から騒がれていた Apple によるサイドローディング周りの緩和について、正式な情報公開があった。 Apple announces changes to iOS, Safari, and the App Store in the European Union - Apple https://www.apple.com/newsroom/2024/01/apple-announces-changes-to-ios-safari-and-the-app-store-in-the-european-union/ ストアやペイメントの緩和もあるが、ここでは WebKit に関する部分だけを抜粋し、どのような条件があるのかをまとめておく。 筆者が公開情報を読んで解釈したものなので、内容は保証しない。 前提 iOS/iPadOS に入れられるブラウザには、WebKit を用いる必要があ

Intro 2023 年の Web 技術を振り返る試験として、「Web 技術年末試験 2023」を実施した。 その問題と想定解答、平均点などを公開する。 Web 技術年末試験 この試験は、「去年の Web にはどんな変化があったか」「どんな新しい技術が出てきたか」などを、試験形式で振り返るコンテンツを作ってみたことに端を発している。 2022 年はこれを狭い範囲で実施したが、思った以上に評判が良かったため、2023 年は受験者を一般募集してみることにした。 試験形式であるため点数は出るが、目的は「今年はこんなことがあった」を振り返ることや、「こんなことがあったのは知らなかった」という取りこぼしに気づく機会になることである。 解答用紙/想定回答 [解答用紙]: Web 技術年末試験 2023 https://docs.google.com/document/d/1jdN0NsM-PAnYRl

このアンカータグはブラウザーに次のように指示します： ユーザーがこのリンクをクリックしたら、'/blog'にHTTP GETリクエストを発行し、レスポンスの内容をブラウザーのウィンドウに読み込みます。 これを踏まえて、次のようなHTMLの例を考えてみましょう： これはhtmxに次のように指示します： ユーザーがこのボタンをクリックしたら、'/clicked' にHTTP POSTリクエストを発行し、レスポンスの内容を使ってDOM内のid parent-div の要素を置き換える。 htmxは、ハイパーテキストとしてのHTMLの核となる考え方を拡張・一般化し、言語内で直接多くの可能性を開きます： アンカーやフォームだけでなく、どんな要素でもHTTPリクエストを発行できるようになります クリックやフォーム送信だけでなく、どのようなイベントでもリクエストをトリガーできるようになります GET や

はじめに こんにちは、Repro Booster という製品の開発責任者／プロダクトマネジメントを担当しているEdward Fox（edwardkenfox）です。 WebサイトやWebアプリケーションの表示速度を考える上では、キャッシュの活用はとても大事なテーマです。一口にキャッシュといっても、Webの文脈だけで見ても様々なレイヤーや用途のキャッシュが存在します。今回は昔ながらのキャッシュ、いわゆる HTTP Cache に的を絞り、HTTP Cache のヒット率について考えてみたいと思います。 さまざまなキャッシュレイヤー 前述のように、Webにおけるキャッシュには用途やレイヤーの異なる様々な種類のものが存在します。Webサイト／Webアプリケーションを開発する上で気にかけるべきものは、おおよそ次のようなものが該当するでしょう。 HTTP Cache （ブラウザキャッシュ） Cach