2020-07-06

a11yとは

「a11y」って何？

最近、アプリのコーディングをするようになって、こんな言葉を耳にしました。

正解は、「accessibility」の頭文字と末尾の文字。間の文字列が11文字なので、「a11y」と省略して使われるそうです。
なんともおしゃれ！

アクセシビリティと言ってもらえればわかるのにとも思いつつ、
「利用しやすさ」の改善。なかなか正解がないというのが現状です。

一昔前までは障害のある人向けの対応と言われてきましたが、昨今ではデバイスが多様化していて、コンテキストによって使いかたも多種多様化している中、「情報を取得するためにどんなデバイスを使用していたとしても、取得できる情報は同じであるべきだ。」という考えです。

Webコンテンツの画面での見えかたはさまざまで、その見え方もユーザー一人ひとりがカスタマイズすることも可能です。さらに、合成音声や点字などに変換されることもあります。

ユーザーがどのようなカタチでWebコンテンツを受け取ったとしても、その中身は同じであるべきです。それが「Webアクセシビリティ」の基本的な考えかたといってもよいでしょ
『引用：Webアクセシビリティとは？｜基礎知識｜エーイレブンワイ［WebA11y.jp］』

2020-06-11

VSCodeの環境を整える

インストールしたら
拡張機能で以下を追加する。

・ESLint (.js.vueのコードを整形)

settings.jsonnに以下を追加

"eslint.enable": true,	
"javascript.format.enable": false

・stylelint　（.scssを整形）

settings.jsonnに以下を追加	
"css.validate": false,	
"scss.validate": false,	
"stylelint.autoFixOnSave": true,	
"[css]": {	
    "editor.formatOnSave": false	
},	
"[scss]": {	
    "editor.formatOnSave": false	
},

・stylelint-plus 自動修正、エラー表示

・Code Spell Checker　　スペルチェック
・Auto Rename Tag　閉じタグを同時編集してくれる
・SCSS IntelliSense　scssの定義箇所を表示
・Vetur　vueファイルのシンタックス等を表示
・Vue Peek　vueのコンポーネント等へ移動が可能になる

2020-06-11

BEMを使ってみた！

CSSをBEM で書いてみる

BEM（Block、Element、Modifier）

参考：
スタイル計算のスコープと複雑さの軽減 | Web | Google Developers

複数の言葉を使う場合はキャメルケースで記述する
B/E/M
BlockNam__elementName--modifierName

pages/aaa/bbbは
Aaa__BbbCccになる。

2020-06-10

Nuxt.jsを始めてみた（１）

環境構築：

まず、最新のNodo.jsを入れる。Macは初めから入っているのだが、数人で開発する際には揃えたほうがセキュリティ的にも安全だし、望ましい。
複数のバージョンを入れることができる。
https://nodejs.org/ja/
今回は、windowsにChocolateyも一緒にインストールしてみる。
Chocolateyを使った環境構築の時のメモ - Qiita
npmのバージョンも揃えておいたほうが良い。
※npmは上Nodeをダウンロードしてインストールすると一緒にインストールされる。

Macだとターミナルから実行
ーーーーーーーーーーーーーーーーー
npm -v
node -v　　使用中のバージョン確認
nodebrew list　インストールされているNode一覧が表示される

Macのnodeをあげるなら
$nodebrew setup
$nodebrew install-binary v12.0.0
$nodebrew use v12.0.0　　使用するバージョンを指定

windowsだとコンソールから
ーーーーーーーーーーーーーーーー
node --version
npm --version

エラーが出た場合
ーーーーーーーーーーーーーーーー
・Sassエラーが出た場合は、
npm rebuild node-sass
でsassを再構築。
・nodeを複数いれてエラーになったら
rm -r ./node_modules/
npm install
をすると環境独自の問題が解決できるはず。

2020-03-02

モーダルの位置を調整する（リサイズ可）

JavaScript

function resize() { 
	var modal_content =document.querySelector(".modal_content");
	var contenttop = ( window.innerHeight - modal_content.offsetHeight)/2;
	(contenttop > 0 )? modal_content.style.top=contenttop+"px":modal_content.style.top=0+"px";
  }

resize();

window.onresize = resize;