2021/12/17 Engineers in CARTA vol.2 #MySQL https://voyagegroup.connpass.com/event/231708/ 得意なことというより特異なことを紹介するコーナーになってしまった

Intro システムにおいてキャッシュの設計は永遠の課題であり、 Web のパフォーマンスにおいても非常に重要である。 Web では、 HTTP ヘッダを用いてブラウザやプロキシにキャッシュの制御を指定する。 Stale-While-Revalidate ヘッダは、このキャッシュ制御に選択肢を追加する新しい仕様である。 このヘッダの概要と、本サイトへの適用を解説する。 Web におけるキャッシュ キャッシュの種類 まず、ブラウザが持つ従来のキャッシュの機構について整理する。 そもそも、キャッシュを行う意義は大きく二つある。 リソースの取得を高速化する サーバへの負荷を減らす これまでは HTTP ヘッダを用いて、キャッシュを管理させる方法を用いてきた。 Web における、キャッシュの指定には大きく二つの方式がある。 ブラウザはリクエストを発行せず、保持するキャッシュを使用する(Cache-

AWS DevDay 2021のブレイクアウトセッションで講演した際の資料です。

※ Vue.js については、本記事では methods に書き込むfunctionの事例を記載しており、コンポーネントレベルでのサンプルは記載しておりません。 Railsを選んだのはサンプルが豊富で試しやすそうだったからですが、S3のSDKが提供されている言語であれば基本的には同じことが実現できると思います。 同様に、CloudStorageなどでもpresigned urlにあたる機能はある ( 参考 署名付きURL ) ということなので、この考え方自体はS3に限らず流用可能かと思います。 presigned url / presigned_post presigned(事前に署名した) url というだけあって、予め発行しておいたURLに対してのPOSTでのアップロードを受け付ける機能です。 厳密にはURLだけではなく、合わせて発行されるトークンなどとセットで可能になります。サンプル

2021年12月16日、オインクゲームズの人気小箱ボードゲームを Nintendo Switch で遊べる「レッツプレイ！オインクゲームズ」がリリースされました。 ボードゲームのデジタル化は、数々のデジタルゲームを手掛けてきたオインクゲームズのデジタル部にとっても初めての挑戦で、試行錯誤の連続でした。元々のボードゲームをよく知ってるだけに、対面でプレイした時の楽しさ・盛り上がりが再現できるか、不安がありました。しかし、チーム内で何度もテストを重ね、UI や演出を工夫していった結果、間違いなく対面でのプレイに匹敵する作品が完成しました。 XD 上で色々と考えながら UI を作っても、実際に組み込んで動かしてみると、全然意図通りに機能しなかったり、分かりにくかったりすることがたくさんありました。ここでは、UI デザイン・演出担当が、どのような問題を感じ、どのように解決していったかを、初期に開発

Webブラウザーは情報収集に欠かせないツールだ。的確な検索で有用なWebページを見つけ出し、その情報を利用しやすい方法で収集する。その際には検索のノウハウとWebブラウザーの多彩な機能が役に立つ。本特集では、「Chrome」と「Edge」に注目し、情報の検索と整理のための最新テクニックを紹介する。 Chromeには各種の機能を付加できる「拡張機能」があり、「Chromeウェブストア」から入手できる。Edgeにも独自の拡張機能はあるが、基本部分がChromeと共通になっているので、Chromeの拡張機能もたいていは使える（図1）。ここでは、情報収集などに役立つ主要な拡張機能を紹介しよう。

インディーゲームスタジオのOMOCATは12月16日、Steamで配信中のホラーRPG「OMORI」（公式サイト）の日本語版を、同日より配信開始しました。価格は1980円。 同作は2014年より開発を開始し、2020年にリリースされたドット絵ベースのRPG。「MOTHER」や「ゆめにっき」を思わせる温かくも不穏なドット絵と、鉛筆画タッチの手書きイラストが調和したビジュアルが特徴的で、2014年に行われたクラウドファンディングでは5000人以上からの支援を集めました。 これまでは英語のみの対応でしたが、Steamでの評価は「圧倒的に好評」。日本語化に先駆けて遊んだ人たちからは絶賛する声も多く、カルト的な人気を誇っていた作品でしたが、今回の日本語化でさらにファンを増やしそうです。 また、同作はSteamのほか、Nintendo Switch / PS4 / PS5 / Xbox One / X

ブラウザで多くのコンテンツが提供されるようになり、Webアプリの処理を高速化する手法が重要になっています。特にJavaScriptでは快適なユーザー体験を届けられない場合には、何か別の手法が必要です。 そこで役立つのがソフトウェアアーキテクチャのWebAssemblyです。ブラウザで重くなる処理をバイナリに変換して実行できる技術で、パフォーマンスを最適化して高速な処理を実現できます。 新刊『入門WebAssembly』は、このWebAssemblyに興味があるエンジニアが仕様や機能、実装方法を基本から学べる入門書です。 どのようなケースでWebAssemblyを利用したらいいのか、また利用すべきでないかも説明しており、デバッグやメンテナンスなど運用面も解説が充実しています。 Webエンジニアにとって必須となる高速化の技術として、ぜひWebAssemblyを試してみてください。 ※本書は『T

デザインはちょっとした一手間を加えるだけで、ぐっとよくなります。 プロのUIデザイナーによるWebページやスマホアプリのUIとUXを改善するデザインの知識とテクニックを紹介します。 第9弾は見出しや本文など、テキストのデザインのテクニックです。 UI & UX Micro-Tips: Volume Nine. by Marc Andrew 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 1. ホワイトスペースはデザイン要素 2. 明るいテキストと画像のコントラスト比を適切に保つ 3. 見出しや本文にぴったりな垂直のリズム 4. 書体の読みやすさは、x-heightまたはIl1で確認 5. テキストブロックのサイズに応じてline-heightを調整 6. テキストのカラーパレットはシンプルにし、濃淡だけを変える はじめ