2022-10-07

感想：DESIGNING CONNECTED CONTENT デジタルプロダクトの長期的な成長を支える構造化コンテンツ

DESIGNING CONNECTED CONTENT

作者:マイク・アザートン,キャリー・ヘイン,石橋秀仁
ボーンデジタル

Amazon

総評

サイトやアプリ制作のために、コンテンツを構造化しようという話。対象ドメインの物事をモデリングし、それをもとにコンテンツを設計し、公開・運用していく方法が書かれている。抽象度が高く難解な本だった。

紹介されている作業は難易度が高く、うまく実行できる気がしない。でも構造化の必要性や利点はわかった。

面白かったところ

実際にあったIAサミットのサイト制作プロジェクトをベースに説明が展開されていく。構造化のアプローチで、拡張性の高い優れたサイトができるのだけれど、その価値が後継者には伝わらず、サイトは捨てられたと最後に書かれていた。

そのせいもあってか、チームメンバーや関係者との関わり方の注意が随所にたくさん書かれている。

2022-05-31

感想：オブジェクト指向UIデザイン──使いやすいソフトウェアの原理

オブジェクト指向UIデザイン──使いやすいソフトウェアの原理 WEB+DB PRESS plus

Amazon

総評

3分の2はオブジェクト指向UI設計の方法・UIの歴史の話、3分の1はワークアウト（UI設計の出題＆解説）だった。

オブジェクト指向UI設計についての解説は、すでに読んだことのあるような内容だった。ウェブ上の記事にあるようなものとそこまで変わらない。

読んだことをワークアウトをしながら確認できるのはよい。冗長な感じはするけど。

最後の方におまけのように書かれている、UIの歴史の話（オブジェクト指向UIのフィロソフィー）が面白かった。 graphic meansのUI版のような感じがする。知ったところで何の役にも立たないだろうけど、面白い。

2022-04-30

感想：Design Systems ―デジタルプロダクトのためのデザインシステム実践ガイド

Design Systems ―デジタルプロダクトのためのデザインシステム実践ガイド

作者:Alla Kholmatova
ボーンデジタル

Amazon

総評

単にパターンライブラリの作り方を解説する本なのかなと思っていたけれど、そうではない。デザインシステムのプロジェクトを会社に支持してもらう方法から、みんなに使ってもらうための体制づくりの方法まで書いてあって面白かった。

面白かったところ

Visual Loudness Guideなどの、コンポーネントのうるささや声色を定義するところがおもしろかった。目立つコンポーネントを無闇に使ってはいけないということも感覚的に伝えることができそう。
コンポーネント名はメタファーに基づく個性的な名称にするというのも自分には無い視点だった。事業会社でいろいろな人がコンポーネントを使って画面を組み立てていくときには、たしかにそういう想起されやすい名称にするのがよさそう。
デザインシステムについての説明をポストカードに印刷してくばったり、Slackで定期的に投稿したりといった地道な活動も確かに必要そう。
デザインシステムが無いためにかかるコストの提示方法の記事がおもしろかった。何も斬新じゃないけれど、差分のスクショもまとめると見ごたえがある。
- Designed for Growth. Technology companies are expected to… | by MarcoSuarez | Etsy Design | Medium
- And You Thought Buttons Were Easy? | by Nathan Curtis | EightShapes | Medium

2020-05-08

メモ：What's New In DevTools (Chrome 81)

間が開いてしまったけど、YouTube版で最新のWhat's New In DevToolsをちゃんと見てみた。

元情報

メモ

Moto G4 support in Device Mode

デバイスツールバーのデバイスリストに「Moto G4」というのが追加された。これを選択し、バーの右端のメニューボタンで「Show device frame」を押すとMoto G4のフレームが表示される。

この状態で「Capture screenshot」を押したときもフレームが表示される。

試しに撮ったのだけど、開き方が悪かったのか、違和感のある見栄えになった。

Cookie-related updates

ApplicationパネルのCookiesペインまわりでいくつかアップデートがあった。
- Cookie一覧でブロックされたクッキーの背景色が黄色になるようになった
- CookieのPriorityの欄ができた。各Cookieの優先度を見られる。
- Size以外のすべての欄をDevtools上で編集できるようになった。

あとNetworkパネルでは、各リクエストのところで右クリックすると「Copy」というメニューが出るけど、そこで「Copy as Node.js」が追加された。下記のような感じのスニペットがクリップボードにコピーされる。

fetch("https://web.dev/", {
  "headers": {
    "upgrade-insecure-requests": "1"
  },
  "referrer": "https://web.dev/",
  "referrerPolicy": "no-referrer-when-downgrade",
  "body": null,
  "method": "GET",
  "mode": "cors",
  "credentials": "omit"
});

More accurate web app manifest icons

Applicationパネルのマニフェストのところで、アイコン表示のところ、以前は独特な挙動をしていたけれど、今はChromeと同じマニフェストアイコンが表示されるようになった。

Hover over CSS content properties to see unescaped values

CSSのcontentプロパティ、Devtoolsでみるとエスケープされた値が表示されるけど、hoverするとエスケープなし版の表示が見られるようになった。

More detailed source map errors in the Console

Consoleでソースマップのロードやパースに失敗したとき、より詳細な原因を表示してくれるようになった。

Setting for disabling scrolling past the end of a file

デフォルトだと、Sourceパネルではコードが見えなくなるところまでスクロールできるんだけど、それが邪魔な人はSettingパネルの「Allow scrolling past end of file」のチェックを外すと余分にスクロールされなくなる。

Bonus tip

動画だとたまにTips紹介がある。ドロワーメニュー内の「More Tools」ボタンが結構便利だよという話。

たとえば「Quick Source」でSourceパネルを開いていないときでもSourceがみられるし、「Search」のところで関連ソースのグローバルなキーワードサーチができる。

2020-02-13

ECMAScriptの内部のパラメータたち

JSについてあまり詳しくないので、以下の記事が面白かった。
v8.dev

レキシカル環境とか、プロパティーディスクリプタとか、環境レコードとか、JSのspecにだけ登場する型の解説はここにある。
https://tc39.es/ecma262/#sec-ecmascript-specification-types

spec用に定義された抽象操作という関数がある。
https://tc39.es/ecma262/#sec-abstract-operations

[[]] で囲まれているのは内部スロットもしくは内部メソッドというもの。

内部スロットはJSオブジェクトか特定の方のデータメンバのことで、オブジェクトの状態を格納するのに使われる。
内部メソッドはJSオブジェクトのメンバである。

例えばJSオブジェクトは[[Prototype]]の内部スロットと、[[GetOwnProperty]]の内部メソッドを持っている。
しかしこれらはJSからアクセスすることができない。

たまに、内部メソッドは、似たような名前の抽象操作にいろいろとデリゲートする。例えばordinaryオブジェクトの[[GetOwnProperty]]は[[GetOwnProperty]](P)をつかう。

[[GetOwnProperty]](P)は説明をみると、Return ! OrdinaryGetOwnProperty(O, P)って書いてあるんだけど、このOrdinaryGetOwnPropertyは内部メソッドじゃない。オブジェクトに関連づいているわけじゃないので。操作対象のオブジェクトがパラメータとして渡される。

ECMAScriptのオブジェクトにはordinaryオブジェクトとexioticオブジェクトがある。
ordinaryオブジェクトは、必須内部メソッド（essential internal methods）と呼ばれる、デフォルトの挙動のセットを持っている。
https://tc39.es/ecma262/#table-5

デフォルトの挙動から逸れるものはexioticオブジェクトである。
一番有名なexioticオブジェクトはArray。lengthプロパティのところがデフォルトじゃない。

ECMAの挙動説明のところは（！や？が書いてある）、完了レコードの記述である。

完了レコードには3つのフィールドがある
[[Type]] - normal、break、continue、return、throwのいずれかがはいる。normal以外は abrupt completions といわれる
[[Value]] - 関数の戻り値や例外など、完了時に生成される値
[[Target]] - directed control transfers につかうとか

全ての抽象操作で暗黙的に完了レコードが返される。戻り値がBooleanのときでも、型がnormalの完了レコードにラップされている。

※ ただし、完了レコードから値を抽出するのではなく、そのままの値を返すヘルパー関数などもある

たとえばあるアルゴリズムが例外をスローするとき、完了レコードの[[Type]]はthrowであり、[[Value]]は例外オブジェクトになる。
https://tc39.es/ecma262/#sec-completion-record-specification-type

ReturnIfAbrupt(argument) というのがあるんだけど、これは、
abrupt completion のときは引数を返し、そうでなければ完了レコードから値を出してくるもの。
https://tc39.es/ecma262/#sec-returnifabrupt

そして！や？の説明はここにある。
https://tc39.es/ecma262/#sec-returnifabrupt-shorthands

この記事は連載ものっぽい。また気が向けば続きをチェックする。