Visual StudioのコードにおけるMicrosoftの包括的なデザインの影響

ユニバーサル, または インクルーシブデザイン マイクロソフトは最近、ソフトウェア開発に真剣に取り組んでいるようです。. インクルーシブデザイン アクセシビリティをより広い観点から見ているので、アクセシブルデザインを次のレベルに引き上げます。 Microsoftの新しいソースコードエディタであるVisual Studio Codeをテストしていたとき、 実際に理論をどのように実施したか 自然に私の心の中で生じた.

この記事は、Visual Studio Codeのアクセシビリティ機能の説明だけを目的としたものではありません。公式ドキュメントには、それらの優れた要約が掲載されています。 包括的なアプリをデザインする 将来は.

なぜなら私たちはソフトウェアとWebデザインの両方において包含性がまもなく必要条件になると確信できるからです。もちろん利他的な理由からだけでなく、それは多くの新しいユーザーをテーブルに入れるからです.

マイクロソフトのインクルーシブデザインの4つの原則

Windowsデベロッパーセンターはアクセシブルなソフトウェアデザインを置きます ユーザビリティカテゴリ内, そしてそれらはまたトピックについての多くのすばらしい記事を出版した。マイクロソフトの インクルーシブデザインの4つの原則 この記事では（以下に簡単にリストされている）議論しています.

1. と思う ユニバーサル.
2. それを作る 個人的な.
3. それを保つ 単純な.
4. 作成する 喜び.

元の記事を読み終えたら、次のような式を使用して、原則がテストするのが必ずしも簡単ではない方法で説明されていることがわかります。 「感情的なつながり」, 「驚きを呼び起こす」, そして "魔法の". それで、私はむしろ実地に留まり、これらの主観的な意味合いを取り除き、そして原則を客観的な基準に変えることを望みます.

これらがVisual Studioコードでどのように実装されているかを分析するときは、次のように使用します。

1. と思う ユニバーサル：アクセシビリティ
2. それを作る 個人的な：カスタマイズ性、拡張性
3. それを保つ 単純な：気を散らすことのない、論理的なユーザインタフェース
4. 作成する 喜び：機能の発見可能性

もちろん、これは可能な分類の1つにすぎません。 多くの重複, 例えば、カスタマイズ可能性も “喜びをつくる” 原則として、具体的なものが必要なので、今のところこの解釈に固執しましょう。.

Windowsデベロッパーセンターでは、これらの包括的なデザイン原則をWindows 10アプリに適用することを推奨していますが、マイクロソフトは自社のMicrosoftデザインサイトも包括的デザインに専念しています。.

Visual StudioのコードはWindows 10専用ではありませんが、 クロスプラットフォームソフトウェア, マイクロソフトは、包括的設計を将来的に追いかけたいと考えているソフトウェア設計パスとして明確に扱うので、我々は依然として上記の原則に対してその機能を安全にテストすることができる。.

ユニバーサルだと思う

下 “ユニバーサルだと思う” 原則として、Visual Studioコードへのアクセスのしやすさを詳しく調べます。 多様なユーザーグループ向け, そのような支援技術のユーザー（彼らは障害や好みのためにそれらを使用するかどうか）、限られた技術を持つ人々、非ネイティブ英語を話す人など.

1.ズーム

Ctrl + = / Cmd + =を押すと簡単にズームできます。 （マック） のキーボードショートカット ズームイン, そしてCtrl + - / Cmd + - （マック） のショートカット ズームアウトする, また、トップメニューバーからズーム機能にアクセスすることもできます。.

バージョン1.1.1以降、Windowsキーボードでは+と - の記号は右側のテンキーでは機能せず、タイピング（英数字）キーパッドでのみ機能します。.

それは私たちが簡単に設定することを可能にするので、固定ズームレベル機能はこれを幾分補償します 固定ズームレベル ユーザー設定で（これを行う方法についての私の前の記事を読む）.

ハイコントラストテーマ

ハイコントラストのテーマが 視覚情報処理の処理 視覚障害のあるユーザーのためのものであり、したがってそれらはアクセシビリティの重要な要素です。.

あります デフォルトのハイコントラストテーマ Visual Studio Codeでは、をクリックして設定できます。 ファイル>設定>カラーテーマ ただし、Visual Studio Code Marketplaceからもダウンロードできます。.

MicrosoftはWindows 7でハイコントラストテーマを導入しました、それは彼らがこの機能で追いかけているのを見るのはうれしいです.

3.キーボードナビゲーション

視覚障害や移動障害のためにマウスを使用できない人にとっては、キーボードナビゲーションを提供することが不可欠です。効果的なキーボードナビゲーションには、ユーザーが必要です すべての機能を制御できます ソフトウェアの キーボードだけを使って.

Visual Studio Codeはこの機能をうまく実装しています。 プリセットキー割り当て （全リストを参照）、ユーザーはJSON形式の設定ファイルを使ってキーボードショートカットをカスタマイズすることもできます。.

4.タブナビゲーション

タブナビゲーションはそれを可能にします さまざまな分野を飛び越える Studioコードの説明.

現在、バージョン1.1.1の時点では、VS Codeはすべての領域のタブナビゲーションをサポートしていません。たとえば、トップメニューバーはこの方法では使用できません。幸いなことに、マイクロソフトはドキュメントのCurrent Known Issuesにこの機能の欠如を認めています。.

テスト中に、 編集者, の サイドバー, の ビューバー （VS Codeのエリアの命名を参照）そしてそれらのすべてのアクションとアイテムはTabキーでアクセス可能です。 Tabユーザーはキーボードでトップメニューバーの機能にアクセスすることはできませんが。トップメニューで見つけることができるすべてのコマンドがそこから同様にアクセスされることができるので、コマンドパレットF1はこれに多少代わることができます.

タブナビゲーションの重要なユーザー補助機能は、ユーザーがTabキーの2つの機能を切り替えることができるタブトラッピングです。閉じ込められたTabキーはそれを可能にします VSコードのさまざまな部分に移動する, 通常はTabキー テキストファイルにタブ文字を追加します。 エディタエリアで開きます。 Ctrl + Mキーを押すことで、2つの機能を切り替えることができます。.

5.スクリーンリーダー

もちろん、スクリーンリーダーのユーザーもアクセス可能なソフトウェアを完全に利用できる必要があります。ドキュメントには、VS Code開発チームがNVDAスクリーンリーダーを使ってスクリーンリーダーの可用性をテストしたことが記載されています。.

テストには、他に2台のスクリーンリーダー、最も広く使用されているスクリーンリーダーアプリの1つであるJAWS、およびWindows 10の組み込みスクリーンリーダーであるMicrosoft Narratorを使用しました。.

JAWS すべての分野、コマンド、およびメニューを熱心に声に出して読んでください、しかしナレーターはタスクに関するいくつかのより小さな問題を抱えていました。例えば、トップメニュー項目をマウスで移動したときにしか正しく表示されませんが、キーボードの下矢印を使用したときは正しく表示されません。ただし、これはVisual Studio CodeではなくNarratorの欠点であるため、視覚障害のあるユーザーはより高度なスクリーンリーダーアプリを使用してすべてのVS Code機能にアクセスできると安全に想定できます。.

6.デバッガのアクセシビリティ

アプリを完全にアクセス可能で包括的なものにするために、私たちが最初に思いつかない部分にも注意を払う必要があります。 Visual Studioのコードの場合、デバッガはその良い例です。開発チームはそれを同様に包括的にするように注意を払ったので、それはまたタブとキーボードナビゲーションをサポートし、そしてそれはスクリーンリーダーからアクセス可能です.

7.ローカライゼーション

これで、アクセシビリティ機能について説明します。VSコードはドキュメントに記載されていますが、他にも重要なことがあります。 “ユニバーサルだと思う” 包括的なデザイン原則。その1つがローカライズです。 外国語のサポート 世界中の多くの人が英語を母国語としないので、表示言語として.

Visual Studio Codeは現在ローカライズされています 10の異なる表示言語 （英語、簡体字中国語、繁体字中国語、フランス語、ドイツ語、イタリア語、日本語、韓国語、ロシア語、スペイン語）.

これらの言語のユーザーは、表示言語をVS Codeのように設定する必要すらありません。 デフォルトでオペレーティングシステムの表示言語を選択します. 他の言語を表示言語として設定したい場合は、簡単に設定できます。 locale.json ファイル.

おそらく10の表示言語はそれほど多くありませんが、VS Codeが新しいソフトウェアであることを考慮すればそれは悪くありません。そして、マイクロソフトは将来もっと多くをサポートするでしょう。現時点では、サポートされている言語以外の言語を使用しているユーザーは、自分のVS Codeを英語でインストールします。.

8.アクセシブルサイズ

現代のソースコードエディタはそれほど大きくはありません。Microsoftもこの傾向に加わっています。VisualStudioのコードは 100 MB未満 ダウンロードし、そのディスクのフットプリントは200 MB未満です.

クロスプラットフォーム開発

包括的なソフトウェアが必要な場合は、もちろんクロスプラットフォームである必要があります。つまり、異なるオペレーティングシステムで実行する必要があります。サポートしているため、VS Codeはこの要件を満たしています。 Windows、OS X、およびLinux 同様に.

個人的にする

“個人的にする” Microsoftの包括的なデザインの第二の原則であり、私たちは見ているでしょう カスタマイズ性 そして 拡張性 私が前にそれを約束したように、この基準の下で。 Visual Studio Codeは両方の要件を非常にうまく満たしているので、ここではカスタマイズ性について、そして拡張性について別々に投稿しました。.

つまり、カスタマイズ性は次のように実装されています。 カスタムテーマ そして モジュール化されたJSON形式の設定, 拡張性が達成されている間 カスタム拡張 ユーザーはVisual Studio Code Marketplaceからダウンロードすることも、TypeScriptまたはJavaScriptで自分で作成することもできます。.

Visual Studio Codeの拡張性への取り組みの技術的背景については、こちらをご覧ください。.

カスタマイズ性は、ソースコードエディタの典型的なユーザーである技術に精通した人々にとって理想的な方法で解決されています。 モジュール化されたJSON形式の設定ファイル.

構成オプションは、見ることが難しい巨大なメニュー階層の背後に隠れていないので、これは素晴らしい解決策です。コーディングの専門家でなくても、ユーザーは次のことが可能です。 カスタムを簡単に編集 .ジョンソン ファイル, Visual Studioのコードでは、デフォルト設定とカスタム設定が2つのエディタペインに隣接して開いているため、ユーザーが簡単に試すことができます。.

設定ファイルはモジュール化されており、論理的に構造化された階層構造になっています。 .ジョンソン ファイル、これは最も重要なもののリストです：

1. settings.json にとって カスタムユーザー設定, 経由でアクセス可能 ファイル>設定>ユーザー設定 メニュー
2. .vscode / settings.json にとって カスタムワークスペース設定, 経由でアクセス可能 ファイル／環境設定／ワークピース設定 メニュー
3. keybindings.json にとって カスタムキーバインド, 経由でアクセス可能 ファイル>設定>キーボードショートカット メニュー
4. javascript.json, php.json, css.json, c.json, そして他のたくさんの .ジョンソン セットアップ用のさまざまなプログラミング言語用のファイル カスタムユーザースニペット, 経由でアクセス可能 ファイル>設定>ユーザースニペット メニュー
5. launch.json にとって カスタムデバッガ設定, デバッグビューのトップバー（エディタの左側）にある歯車のアイコンをクリックするとアクセスできます。
6. .vscode / locale.json にとって カスタム表示言語設定, を入力してアクセス可能 言語を設定する コマンドパレットにコマンドを入力する（F1）
7. .vscode / tasks.json にとって カスタムタスクランナー設定, を入力してアクセス可能 Task Runnerを構成する コマンドパレットにコマンドを入力する（F1）

私はVS Codeユーザーがカスタマイズ可能性について苦情を言うことはほとんどできないと思う。.

設定オプションはモジュール化されているので、ユーザーはそれらの面倒を見る必要があるだけです。 彼らは本当に必要, それは彼らが彼らが実行したいタスクに集中し続けるのを助けます。したがって、彼らはより直感的なワークフローを残されるでしょう.

複雑にしないでおく

マイクロソフトの会うことができます 複雑にしないでおく プログラミングと設計の他の多くの場所での包括的な設計原則は、単にKISS（Keep It Simple、Stupid）設計原則とDRY（Don't Repeat Yourself）ソフトウェア開発原則について考えてください。この実行中のコンテキストでは、私たちは ユーザーインターフェースのシンプルさ.

アクセシビリティの観点から、認知的および知的障害を持つユーザーのために、使いやすくてシンプルなユーザーインターフェースが通常推奨されます。 Visual Studio Codeはソースコードエディタであるため、この種の障害を持つ人々が頻繁に使用するソフトウェアではないと思われますが、灰色の部分もあります。.

シンプルさはそれらのために重要なだけではありませんが、うまく設計された論理インターフェースとして 学習曲線を下げる, そして 仕事のスピードを上げる, ソフトウェアを一般の人々にとっても魅力的なものにする.

Visual Studioのコードも よく知られている心理現象を利用しています, 単なる露出効果（または なじみ現象Atomのような他の有名なソースコードエディタのレイアウトに似た基本的なレイアウトを採用しているので、.

このドキュメントから、マイクロソフトが大きな影響を与えたのは次のような努力によるものであることがわかります。

VS Codeは他のソースコードエディタでも見られるSide by Side Editing機能をユーザーに提供します、そしてそれは偶然の一致ではありません、 それはコーディングプロセスをずっと簡単にします, そしてもちろん “複雑にしないでおく” 包括的なデザイン原則も.

基本的なUIに加えて、Visual Studio Codeは包括的なデザインに関する記事で言及する価値のある優れた機能を備えています。

• インテリセンス それは文脈に基づいて提案をユーザーに提供します（人工知能を使用するバックエンド部分も良い解決策です）
• ピーク インラインウィンドウに完全な関数定義を表示する（Shift + F12）
• コマンドパレット （F1）すべてのコマンドを同じ場所でアクセス可能にする.

喜びを作成

それを調べるために使用できる具体的な基準を見つけることは、特に簡単ではありません。 “喜びを作成” 包括的な設計原則なので、ついに私は次の基準を決めました。 機能の発見可能性, Microsoftがこの原則を次のように定義していたため。

この言い回しは、グーグルの最新の大きなことの1つであるマイクロモーメントを皆さんに思い出させるかもしれません。そのため、大手テクノロジー企業がどのように業界を前進させるかについて考えるとき、同様の結論に達するかもしれません.

包括的なデザインでは、それは非常に重要です ユーザーを引き付ける, そして 好奇心をそそる, 私達が私達が多ければ私達がおそらく最もよい達成できる 彼らが前進するのを助ける 彼らがユーザーの旅のある時点に到達したとき。ただ 正しい瞬間に, 前ではなく後でもない.

私達が話すとき 機能の発見可能性, 喜びを生み出すことのより世俗的な現れである、それはうまく設計されたユーティリティナビゲーション、スマートなドキュメンテーション、および適切な瞬間にのみ現れる支援的な情報のようなものによって増加することができる.

これらすべての機能の例はVisual Studio Codeにあります。 IntelliSense そして コマンドパレット, しかし 構文の強調表示 そして カスタムコードスニペット ユーザーがソフトウェアを最大限に活用するのを助けることもできます。 Visual Studio Codeを使用して喜びを感じるかどうかを判断する必要があります。.

私自身、私は多かれ少なかれ経験が好きでした： よく構造化されたオンライン文書, の 簡単に移動できるVisual Studio Code Marketplace, そしてその カスタムカラーテーマ ドロップダウンリストをスクロールしながらリアルタイムでプレビューすることができます。 ファイル>設定>カラーテーマ メニュー）.

最後の言葉

包括的デザインは新しい分野であるため、テクノロジー業界はまだ実験段階にあります。マイクロソフトは、マイクロソフトによって大きな節目を迎えたと思います。 インクルーシブデザインの4つの原則を定義する.

これまで見てきたように、彼らは新しいソースコードエディタであるVisual Studio Codeに理論を実際にうまく実装することに成功しました。.

アクセシビリティと包含性の両方が ユーザーエクスペリエンスの一部, 最新の業界動向に遅れないようにしたいのであれば、それらについてもっと学ぶことが賢明です。以下が参考になるリソースです。

• Windowsデベロッパーセンターのユーザー補助記事
• Microsoft DesignのInclusive Design Toolkitのマニュアル（PDF）（ダウンロード可能）
• Hongkiat.comアクセシビリティタグ