mamiline - Tumblr blog

[mamiline]

映画「きみがくれた物語」ゴールデンレトリーバーからチワワが生まれていた

主人公のテリーサー・パーマーは、ウォーム・ボディーズにもでていた女優さんだったので、その流れで見た。

テリーサ・パーマー演じる医学生のギャビーと、その隣人でチャラ男で実は獣医師のトラヴィスとの出会いからストーリーが始まります。

ギャビーが飼っているゴールデンレトリーバーが妊娠・出産し、その介助のためトラヴィスを呼びつけますが、既にかわいい仔犬たちが生まれていましたというシーン。

ここでおもしろいのが、その仔犬たちが「チワワ」なんです、どう見ても。しかも生まれたてではなく身体も乾いていて目も開いている笑。ギャグかと思ったんですが、話は何事もなかったかのように進みます。

ハリウッド映画でもこういうことあるんだ！というなかなか見ない演出でした。

[mamiline]

はじまりのうた（BEGIN AGAIN）にアダム・レヴィーンが出てた

キーラ・ナイトレイ主演の表題の映画をBGMとして流していて、聞き覚えのある声が聞こえたと思って映像を見たら、眼鏡をかけてる男性が映っていた。よく見たら Maroon5 のアダムだった。映画出てたんだ。

この映画は、監督が俳優としてのキーラー・ナイトレイを批判したという記事を見て、キーラは嫌いではなかった（LUXのCMにはびっくりしたけど）から、何が気になったのかと思って聞いた。結局何が引っかかったのかわからなかった。

Maoon5 はまる音スーパーデラックスで聞いてから好きで、アダムのパートナーのベハティ・プリンスルーも2007年のドール顔モデルの流行からあらゆる雑誌で取り上げられてたモデルの一人で、ELLE girl で表紙を飾ったとき買ったし、どっちも好き。

[mamiline]

クロエ・グレース・モレッツが「最も検索された質問」に答える | Autocomplete Interview | WIRED Japan

ウムラウト（独: Umlaut）とは、ゲルマン語派のいくつかの言語において見られる母音交替現象、またはそれによって変化した母音を示すためのダイアクリティカルマーク（発音区別符号）で、ラテン文字の母音字の上部に付される横並びの2点「¨」のこと。

[mamiline]

下剋上エクスタシーはOK？

赤十字マーク問題をついさっき知ったのですが、下剋上エクスタシーも同様のマークを使っている。

ヘルプマークがオークションアプリで売買されていたり、作っただけではなくその在り方についても広く知れ渡ったり、協議できる場があるといいように思う。

[mamiline]

似てい　る？

[mamiline]

ano「ちゅ、多様性。」Music Video

音だけ聞いてたら、相対性理論の新しい曲かなと思った

[mamiline]

JIS X 8341-3:2016適合レベルAAでお願いします

と、ウェブサイトのリニューアル相談を受けてからデザイン制作着手前までに、アクセシビリティの実経験がない所で参考にした資料とそれらを元に検討した内容です。

この記事はアクセシビリティ Advent Calendar 2021 11日目の記事です。

ウェブアクセシビリティ基盤委員会さんのガイドラインを参考にしよう、結論です。

事前知識

相談時点でのアクセシビリティに関しての知識は、古くは富士通ウェブ・アクセシビリティ（※1）から近年参加した勉強会で印象に残ったものピンク書籍を1〜2周読んだだけで、一から適合レベルを意識した実経験は個人・所属会社ともにありませんでした。

適合レベルAAとは具体的に何をしたらいいか、ウェブアクセシビリティ方針というのを見かけるが何を元に誰が作るものなのか、達成基準？実装チェック？とは何なのか、実装面の話しや方針ではなくそもそもどういった手順で進めるか判っていませんでした。

情報収集

過去に参加した勉強会や Twitter 上でアクセシビリティに関する発信でよく見かける個人・企業さんの関連ページやスライドなどを参考にしつつ、適合レベルの検査はクライアント自身が検査業務を担われているというのもあり、その検査で使うツールや検査項目はどういうものなのか、検査ツールについてチェック項目について直接クライアントに確認し、ツールは総務省「mi-checker」ともう一つ、チェック項目は以下を参考にすると良いと共有してもらいました。

「達成基準チェックリスト」の具体的な達成方法と実現方法の文書

ウェブアクセシビリティ基盤委員会さんのページは、情報量（見慣れない言葉）の多さに面食らっていた所でしたが、見てるものは合ってるのがわかりました。

達成基準・実装チェックリストとは

実装チェックリストをダウンロードし、1行ずつ読み進めてみました。 が、以下を読みつつ分かるような分からないような言葉が多く、まったく頭に入ってきませんでした。詰みです。

WCAG 2.0 解説書

WCAG 2.0 への適合を理解する

WCAG 達成基準の達成方法を理解する

何気なく ja11yc の YouTube を見返して、関連動画で以下の動画を見つけました。2〜3回みて言葉の意味や達成方法は何かなど、とてもわかりやすかったです。達成方法は全部やらなければいけないものと思い込んでいたので、見つけられてよかったです。

https://www.youtube.com/watch?v=h218GP3RIVA

この動画で WAIC のウェブサイトにちゃんとガイドが載ってるのを見つけられました。

達成基準リストなどは、のちに知る時代工房さんのサービスを活用し作成ました。

ウェブアクセシビリティ方針とは

上記から紐づいて、WAIC さんのウェブサイトでウェブアクセシビリティ方針についてもちゃんとガイドラインが掲載されていてました。以下のページを参考に方針がどういうものなのかを理解できました。

ウェブアクセシビリティ方針策定ガイドライン

どう進めるのか

ウェブ制作フローとアクセシビリティとをどう合わせたらいいか、調べました。

JIS X 8341-3対応のすすめかた｜実践ノウハウ｜エー イレブン ワイ［WebA11y.jp］

とてもわかりやすかったのが、以前参加したWP Zoomup #14 でした。

参加当時は自己当事者としての認識がなかったので改めて4〜5回ほど見て発見がありました。

「『誰もが使える』デザインを生み出すために」 伊原 力也 WP ZoomUP #14 　レポート

#15 WP ZoomUP 【緊急開催】Re:『誰もが使える』デザインを生み出すために

試験とは

ここで、試験とはどういうものなのか知るのに、以下を繰り返し見ました。

https://www.youtube.com/watch?v=sv5zvQnR9_s

https://www.youtube.com/watch?v=-SjG-2l4I4g

制作工程の検討

上記アクセシビリティに関する情報収集から、ウェブアクセシビリティ方針、達成基準チェックリスト、実装チェックリストを作成し、制作担当に事前に共有。掲載原稿の作成と検査のタイミングについてはクライアントに協力を仰ぐことにしました。具体的には 雛形html や CMS 実装後の検査ではなく、設計・デザイン・html のそれぞれの段階で検査を実施してもらい、雛形html完成後の大きな手戻りをなくすのが主な狙いでした。クライアントがCMSへの原稿流し込み時に、アクセシビリティ適合に引っかかる要素を、文書構造やaltなどの「原稿」部分に絞られるように検討しました。

制作会社としてウェブ制作の工程と各工程ではどんなデータを支給するか、新しいCMSの管理画面と原稿の流し込み方法を簡単に説明し、アクセシビリティへの適合に合わせて現ウェブサイトの不足点を共有し、原稿の精査を依頼しました。クライアントからはどんな検査ができてどれくらい日数が必要かなどを伺って、全体工程を決めました。各工程で達成基準・実装チェックをどの方法で達成するかを明記して、段階的に達成していく方針を取らせてもらうことになりました。

導線設計・デザイン方針の策定

事前確認できるように設計段階で実装が複雑にならないUIの検討、使用フォントの種類・基準になる配色については、以前参加したカラーユニバーサルデザインの勉強会や、mjmj さんのお話を取り入れて、コントラスト比に気をつけながら作りました。

ウェブ制作に活かすユニバーサルデザインの視点

以上が、デザイン制作前までにアクセシビリティに関して参考にした資料やそこからの検討内容です。

WCAG の解説書を見たとき途方もないものを見た気がしていましたが、一周回ってアクセシビリティ基本のき に立ち戻ってきた感があります（まだ1案件）。

デザイン制作〜html、CMS実装後などの話は、またどこかでできればと思います。

過去参加した主にアクセシビリティ中心の勉強会や参考ページ

Webアクセシビリティの学校 in 札幌（2016・2019年）

同 オンライン特別授業（2020年）

Japan AccessiblilitY Conference（2017・2019年）

『誰もが使える』デザインを生み出すためにWP ZoomUP #14（2019年）

【緊急開催】Re:『誰もが使える』デザインを生み出すためにWP ZoomUP #15（2019年）

GAAD Japan 2020

辻ちゃん・ウエちゃんのAccessiブルGoGo!

wabA11y.jp

[書籍]デザイニングWebアクセシビリティ

[CodeGrid]アクセシビリティへのエンジニアの立場と現実

PDF版 WCAG 2.0 (JIS X 8341-3:2016, ISO/IEC 40500:2012) 早見表／逆引き表 - 時代工房さん

ウェブ制作に活かすユニバーサルデザインの視点 - MJMJさん　ほか

※1 Webアクセシビリティの学校で、それまでに自分が知っていたアクセシビリティがそれであると教わりました。

[mamiline]

MT.net 入力フォーマットの初期設定を反映してみた

MT.net の記事・ウェブページの本文・続きを作成する時に利用する、入力フォーマットを管理画面で指定できるようになった。 https://movabletype.net/2021/08/format.html これまでは、新しく記事やページを作成する際、入力フォーマットの初期設定は「リッチエディタ」のため、入力の際にブロックエディタに変更が必要だったが、今回のアップデートでその手順が省ける。 ブロックエディタに寄った構成の既存クライアントがいるが、早速設定をしておいた。 設定前の作成画面

設定後の作成画面

記事がサイト直下ではなく、サイトにぶら下がる形でブログがある時は、ブログ毎に上記の設定が必要です。

[mamiline]

Weather App を作った

JavaScript の fetch API を使って、天気予報 アプリを作った。 fetch の Promise を async / await を使ってみた。

位置情報を取得して、許可してる場合にその場所の天気予報を取得する仕組みまでやってみたい。

仕組みをふわっと理解してる状態なので、理論は後追いする。

[mamiline]

Full JavaScript Cource をやり終えた

都度課題が提示されて自分で考えて書くシーンが多いので、書くことで頭に入った。

約8時間のコースだけど、土日と連休2、3日使って4日間くらいで1しゅうした。一部、英語の意味がわからなくてコードだけ追う状況もあったけどコードを見て前後の文脈から理解してった。

他にも、ともすたのたにぐちさんの動画見たり、他の JavaScript コースをかじってみたりしている。TypeScript は少し Java の知識が活かせそうに思た（型）。

基礎から最近の書き方まで一通り学べた。ずっと基礎構文本ばかりで手を動かしてなかったから、イマイチ何したらいいかわからなかったのが、自分的にもこうやって何かを作りながら理解できる教材と出会えてよかった。

今このコースにない Fecth API でアプリを作ってみている（知らない仕様だらけでコードを理解するのに、ここ2日くらいかかっていますが・・・

これまで jQuery を少し触れるのと、jQueryプラグイン入れてスライドショーとかよく使うものはできるけど、そもそも JavaScript がわからないから Vue のコードも理解が追いついてないかも・・・と思って始めてみた。JavaScript わかるとその周辺のネットワーク関係のことも知りたくなったし、最近触れてない touch desiner とか（pythonだけど…）の理解がしやすくなるかなと思ってる。

仕事で使う機会がないのですぐに忘れてしまいそうだけど、アニメーション や開発環境を用意したり読んだりする際に、自分が楽になる手段は持っておきたい。

[mamiline]

[Chrome プラグイン] Vue devtools を入れた

だがしかし動かない・・・ このプラグイン、2021年7月現在 Vue 3系ではまだ「ベータ版」の必要がある。

参考：https://qiita.com/yosaprog/items/b1305b3e607272e70958

参考先とまったく状況でしたが、ベータ版をインストールし直してブラウザをリロードしたら動きました！

[mamiline]

[VS Code プラグイン] Live Server を入れる

ローカルサーバーは python で立ててたので入れてみました。

1. プラグインをインストールし、「Enabled（有効）」にする

2. VS Code 右下「Go Live」でブラウザが立ち上がります

プラグインを入れた後に「有効」設定って必要だっけ？と思ったのでメモしておきます。

[mamiline]

Vue.js プロフェッショナルWebプログラミング [メインビジュアルのコンポーネント化]

pages/index.vue とは

ページごとに値を変更する場合、ページコンポーネントに追加する

layouts/defalut.vue は全ページ共通なので、ヘッダーとフッターコンポーネントに追加していた

LayoutVisual.vue のコード（p.296 の正しいコード）

<script> export default { name: 'LayoutVisual', props: { title: { type: String, default: '', }, message: { type: String, default: '', }, visual: { type: String, default: 'visual-home', }, height: { type: Number, default: 75, }, }, } </script>

疑問

props ってなんだ？

LayoutWrapper.vue のラッパー要素のコンポーネントがいまいち理解しきれてない

[mamiline]

Vue.js プロフェッショナルWebプログラミング [パーツのコンポーネント化2]

・prettier のエラールールがわからない prettierrc というよりVue・htmlの改行によってエラーが出るけど、よくわからない改行場所でエラーになるのがわからない、ルールが掴めない。。 ・LayoutWrapper.vue に書くように書いてある？ ヘッダーとフッターをコンポーネント化する話なのに、なぜかLayoutWrapper.vue に headerを書くような説明があるような。 今日はここまで。

[mamiline]

Vue.js プロフェッショナルWebプログラミング [パーツのコンポーネント化]

本と同じコードだとエラー表示になるので、エラーコードに従ってコードを修正した。本の出版時期のバージョンと今とは違うからかも。。

p.283 scriptを記述（components.BaseHeading.vue）を修正

<script> export default { props: { name: { type: String, default: '山田', }, }, } </script>

[mamiline]

Vue.js プロフェッショナルWebプログラミング を進めている

Vue.js はきっとこの先も案件では使わないけど、Jamstack、Headless CMS、Netlify とかを知りたいので購入。

エビスコムテックさんの「Webサイト高速化のための 静的サイトジェネレーター活用入門」とすごく迷いましたが、JavaScript がそもそも書けない。

書けない自分でもVue の公式チュートリアルは数回触ってみて割とスルスルと勧められたので、掴みやすい方を優先しました（React わかると WordPress の ブロックエディタを作れる話は聞いたので、いずれは）。 GatsbyJSの本を書いた理由

さて、先月くらいからちょっとずつ進めていて、これは誤植かな？と思うところがあり、公式ページにも載ってないのでとりあえずメモ。

p.268 の以下のコマンドの1行目 cd vue-mdn-cafe/ npm run dev ↓ cd mdn-cafe/ npm run dev この例のフォルダ名は、こうかな？と思いました。 言及している方を見かけないので、もしかしたら、エラーも出ないですし私の環境だけかもしれないです。

装丁のイラストがかわいい

プロフェッショナルWebプログラミング Vue.js

[mamiline]

Google 検索結果にダークモード表示切替えアイコンが追加された

Google Chrome バージョン: 89.0.4389.114

Google 検索結果画面の右上（アプリボタンの左）に、見慣れない太陽アイコンが表示された。

太陽アイコンをクリックすると、検索結果画面が黒くダークモードに表示が切り替わった。ちなみに、使っている Mac はダークモード設定していない。

ダークモード設定にすると、右上のアイコンが月に変わった。

OSをダークモード設定していなくても、ワンクリックで検索画面をダークモードに切り替えられるのは便利な気がした。