freeeアクセシビリティー・ガイドラインVer. 202101.0を公開しました

こんにちは、freeeのアクセシビリティーおじさん、中根です。今年もこのブログとアクセシビリティー・ガイドラインをよろしくお願いします。

では早速、freeeアクセシビリティー・ガイドラインVer. 202101.0の更新内容を紹介します。

参考情報の更新

と言っても、今回の更新内容は非常に少なく、参考情報を1箇所更新したのみです。(他に誤字の修正はありますが。)

具体的には、Tab/Shift+Tabキーを用いたチェックに、キーボードのみで操作できるコンテンツかどうかを確認する際に活用できるブックマークレットを追加しました。

以下にも掲載したこのブックマークレットを実行すると、マウス・ポインターが消えます。

一部では極悪なブックマークレットと呼ばれているこのブックマークレット、ぜひクリックして何が起きるか試してみてください。(もし元の状態に戻したい場合はページをリロードしてください。)

マウス・ポインターを非表示にするブックマークレット
(リンクになっていない場合は記事本体のURLからお試しください)

これを実行した上で、TabキーやShift+Tabキーでフォーカスを移動し、Enterキーを押下するという方法で目的のリンクを探し、そのリンク先に遷移することができなければ、以下のガイドラインを満たせていないと考えられます:

このような(極悪な)ブックマークレットを作ろうということになった経緯ですが、「キーボードだけで操作できる」ということが実はあまり感覚的に理解されていないのではないか、という話が出たためです。キーボード操作のみでコンテンツを利用できるかどうかということは、日常的にWebアクセシビリティーに取り組んでいる人にとってはあまりにも当たり前のことですが、これまでそういったことに触れる機会がなかった人にとっては、具体的にどういうことなのか、どうなっていれば操作可能なのかといったことが分からないかのかもしれない、そんなことを考えました。

このような、Webアクセシビリティー分野の人たちが当たり前のことのようにとらえているけれど、その他の人にとっては全く当たり前ではないようなことというのは、意外に多いのかもしれないという気がしています。これを読んでくださっている皆さんの中にも、なにか思い当たるものがある方がいらっしゃるかもしれません。(もしそういったものがあれば、ぜひ教えてください。)

今後も、ガイドラインの内容、チェックの内容を本質的に理解する上で参考にできるような情報を追加していく予定です。

引き続きご意見などお待ちしています

今回の変更についても、それ以外の部分についても、ご意見やお気付きの点など、GitHubリポジトリーのIssuesやPull Requestsでお知らせください。

36歳にもなって、自分の学び方を学び直した話

この記事は freee Developers Advent Calendar の 25 日目の記事です。

こんにちは、横路です。 freeeで共同創業者CTOを担当していて、いまは技術戦略や共通基盤チームづくりを主にやってます。

今年は、これまで情熱と根気だけでスキルを身につけてきた1人のおじさんが、子育てなどのライフイベントを経て自分の学びの型を見直した話をします。最近そういえば新しいチャレンジ出来てないなあとか、やりたいけど全然時間がなくて…という人に勇気を届けたい。

自分の学びの型のサビに気づいたきっかけ

今年、コロナで会食が減って浮いた時間の一部を使って、ワインエキスパートの資格をとりました。

f:id:yokoji:20201225120748j:plain
ワインエキスパートの資格認定バッジ

正直言って深く知る前はワインが特別好きというわけではなかったのですが、きっかけは、ワインが好きな知り合いが意味のわからない単語の羅列を本当に楽しそうに話している姿を見たことでした。それはまさに、エンジニアリングを学び始めたての頃に自分が憧れた光景で、懐かしくもあり、いつしか自分が失っていた知の渇望の感覚でした。

今回、ひさびさに自分が全く土地勘のない領域でゼロから体系的に知識を身につけていく過程で、自分の学び方の癖にあらためて気づき、学び方そのものに対する自分の認識をアップデートしていく必要を強く感じたので、備忘録的に残しておきます。

これまでの自分の学びの型

もともと自分は、興味のあることがあると集中的に時間をかけて打ち込むことで、独りで一気に深く学ぶタイプでした。座学は得意だが手を動かすとなると不器用で、実践から学んで身につけるのが苦手。いま思うと、観察が下手なのか、手本を見て絵を描いたり体を動かすことが昔から極端に苦手でした。

また強すぎる自尊心で、出来ない自分と向き合い他人に頼って改善することを意識的に避けてきました。それでも興味を持ったことには効率度外視で時間をかけて取り組み、夢中になってやっていたらいつの間にか出来るようになっていた。それが自分の過去の学習スタイルでした。

いつの間にかコンフォートゾーンに安住し、ゼロから学ぶ機会を失っていた

そして子供が生まれ、自分のために使える時間が減る中で、実はこれまでの自分の学びのセオリーがまったく使えない環境になっていたのですが、そもそも技術も含めて体系的に何かをゼロから学ぶこと自体がほぼなくなってしまっていました。

GREE藤本さんの受け売りですが、ある程度エンジニアリングの経験やスキルがあると、多くの技術的課題を(実際にやっていなくても)抽象的に机上で理解できるようになり、これが続くと実際に自分がやっていたときのいろんな苦労を忘れて、必要以上にものごとが簡単に思えたり、自分ならすぐできるという錯覚に陥ってしまうという現象が、まさに起こっていたという反省もありました。

「RANGE」 という本では、環境が大きく変化するような領域ではむしろ専門的な経験が成長の邪魔をするという説も語られています。そこで、自分の枠組みを外してみるという意味でも全く違う領域のゼロからの学びを取り入れてみることにしました。

短期間で新しくゼロから学ぶのは大変だった

そして土地勘のないゼロからのワイン学習ですが、まずなんといっても座学のボリュームが多い。

f:id:yokoji:20201225120811j:plain
テキストはA4サイズ x 厚さ3cm以上の鈍器

ワインの歴史、作り方から世界中のワイン産地や銘柄、ブドウ品種の特徴まで、こまかく覚えないといけません。これは時間との戦いでした。学習時間を確保して3日坊主にならない工夫をして、日々の学習を自動化する必要がありました。

f:id:yokoji:20201225120754j:plain
見開き2ページだけでもこの圧巻の情報量

いちばん難しかったのは、3日坊主にならないようにすることでした。自分の場合はたまたまワインスクールで級長を任されたので、それが真っ当にコツコツやりきるためのよい牽制になりました。

そしてテイスティングの難しさ。これは経験が如実に出るところで、もともとワインが趣味でなかった自分にとってはなかなかの鬼門でした。外観、香り、味を決まったフォーマットで表現していくのですが、はっきりいって経験値がなさすぎて、どれがどの香りのことを言っているのかよくわからない。プロの表現を聞いて、自分の五感とマッピングしていく作業が必要でした。他人との感覚のズレを認識し、よくずれるところを重点的に繰り返し練習しました。

f:id:yokoji:20201225121631p:plain
テイスティングの用語選択用紙はこんなかんじ

そして今回手に入れた、新しい学びの型

振り返ってみると、今回の一連の学習プロセスで気づいた学びの型(新たな知識体系を効率よく自分にインストールするためのポイント)は、以下のようなことでした。

まず学ぶ目的を言語化する

  • 今回は、ワインエキスパートの資格を半年で取るという明確なゴールがあった

理想と現在地を可視化し、できない自分と徹底的に向き合う

  • 自分よりよいものさしを持っている人に、腹落ちするまでフィードバックをもらえる環境が大事
  • 一問一答テストの点数など定量的なフィードバックはわかりやすいが、テイスティングのように定性的なフィードバックのほうが重要な場面も多い

無理なく学び続けられる環境をつくり、学習を自動化する

  • 自分が続けられる方法はなにか?退路を断つ?誰かに伴走してもらう?

小さな成長実感をこまめに得られるようにマイルストンを置く

  • 成長実感がなくても学び続けられるほど心は強くない

仕事で意識してるはずのことを、プライベートでは意識できてなかった

いま言ったような学びの型って、仕事に当てはめると全部当たり前じゃないか!いつもやってるじゃないか!というかんじですが、プライベートでなにかを学ぶときにここまで意識することって意外とないんじゃないかと思います。少なくともわたしはこれまでなかった気がします。

また、ワインスクールの級長業を通じて、この学びの目的や環境を1人1人カスタマイズするのがいかに大変かも痛感しました(スクールは開発チームと違い、キャリアもビジョンもライフスタイルも全くバラバラなのだ)。 結局のところ、各々が自分の学ぶ環境について自分で考えて自分の舵をとらないと、効果的な学びのサイクルは回らないのです。

山本五十六が「やってみせ、言って聞かせて、させてみせ、ほめてやらねば、人は動かじ」と言うのも、この学びのエンジンを積んでいる人が圧倒的に少ないからではないかと思います。具体的なスキル習得のために誰かがこのフルコースを回すサポートをしてあげることもときに必要ですが、それよりも学びのエンジンを積み自分の舵を自分でとるためのメタな学びこそ、できるかぎり若いうちに身につけたいスキルのひとつだなといまは思っています。

3年後の個人的な人生目標とfreeeでの働き方をアラインさせるチャレンジ

この点に関して言うと、freeeでは最近グロースビジョンという取り組みを始めていて、個々人が3年後の人生ビジョンを自ら立て、そこから逆算してfreeeでこの半年間に何に取り組むかをマネージャとすり合わせる機会を設けています。これの意図はまさに、目標設定のスキルを高めて自律的な成長を促し、自分で自分の舵をとれるようになることです。freeeではメンバーの成長が会社の成長を支えるという信念があるから、各人が3年後にfreeeにいるかいないかに関わらず、そこに大きく投資しています。freeeでは新卒に3年でCTOになれと伝えているが、この学びのエンジンはマストだと思っています。

卓越への憧れと科学的アプローチ

また余談ですが、言語化しきれない定性的なゴールを追いかけて高みを目指す人たちが、どうやったら再現性をもって学び卓越の境地に到達できるのか?は、ライフワークとして今後も追いかけたい興味深いサブテーマだと思いました。エンジニアの文脈でいうと、3年もやれば多くの人はチームでWeb開発を出来るようになる中で、例えばfreeeのように100万人以上が使うサービスのコアアーキテクチャを考える場面では、トップエンジニアと働いていると明らかに技術的なセンスの差を感じる瞬間があります。なぜ見えている世界が違うのか?どうすれば一歩抜けた世界が見られるようになるのか?freeeで働いているエンジニアたちには、その世界を再現性を持って見られるようにしたいと思います。

前掲の 「RANGE」 では、まずさまざまな領域の課題に広く取り組んでから自分にフィットした領域を見つけて専門特化していくのが、卓越する鍵だと述べられています。また、「超一流になるのは才能か努力か?」という本では、卓越した技能を持つ専門家による「心的イメージ」をいかに理解して他人に伝え、再現性を持ってマスターしてもらうか?という方法論について、科学的なアプローチで挑んでいます。来年からfreeeでは、研究室制度と銘打って師弟スタイルのエンジニア育成施策にもチャレンジする予定なので、そこでいろいろトライしてみようと思っています。

おわりに

今回は、ひさしぶりにゼロから体系的な学習をしたついでに、自分の学び方をアップデートした話をしました。CTOとして技術的な意思決定の精度を高めるため、そしてfreeeをトップエンジニア輩出企業にするために、今後も学びの型をブラッシュアップしていく所存です。

freeeのエンジニアとコロナ

この記事は freee Developers Advent Calendar の 24 日目の記事です。

こんにちは @hiraguri です。 freeeの開発担当取締役をやっていて、エンジニアチームの組織作りを主にやってます。CDOという役割ですが、DesignではなくDevelopmentです。わかりにくめです。

今日はfreeeのエンジニアチームがコロナ下のリモートワークをどう過ごしているかを共有しようと思います。 各社でさまざまな工夫をされてると思いますが、一事例として参考になれば嬉しいです。

リモワの始まり

freeeではコロナの急拡大をうけて、2月25日から全社リモートワークを開始しました。 いまも全社リモートは続いていて、ちょうど今日で丸10ヶ月になります。

健康状態の可視化

freeeでもリモートワークの環境に慣れず体調を崩してしまう人がでてきていましたが、直接顔をあわせないので体調を崩してしまうまで健康状態がわかりにくいことが悩みでした。 今年の7月からパルスサーベイという意識調査を定期的にやることで、健康状態の可視化を試みました。

設問は3つ

  • 仕事は充実してますか
  • 人間関係はどうですか
  • よく眠れてますか

回答は「全然良くない」から「とても良い」まで5段階とし、「良くない」の割合(低スコア率)をだしています。

f:id:hiraguri-hiraguri:20201223225626p:plain
パルスサーベイ(全社)

f:id:hiraguri-hiraguri:20201223225712p:plain
パルスサーベイ(エンジニア)

睡眠の低スコア率がきれいに下がっていて(眠れるようになった!)安心です。 9月25日の調査で10%あたりまで下がっているので、人間は大体7ヶ月くらいで新しい環境になれるのかもしれません。

仕事や人間関係がもともとあまり問題になってないのは、人と直接会わない分ストレスが低いからでしょうか。(もともと人間関係が良いのかもしれない!)

エンジニアのスコアが全社と比較して全体的に悪いのは、エンジニアのほうが環境の変化に敏感だからかもしれません。

こうやって数字にしてみると全体の動きがわかりやすくなるので、パルスサーベイはやってよかったです。

うちはこんなメトリクスとって良かったよ、とかあればぜひ教えてください。

エンジニア4名の早期退職

今年の夏に入社したエンジニアが4名も早期退職(入社後3ヶ月以内)になってしまいました。 退職理由はそれぞれ別だったのですが同時期に複数人が早期退職するのは創業以来初めてだったので、フルリモートが影響してるのだろうと仮説をたて、入社オンボーディングを見直すことにしました。

「なんでも聞いてね」から「聞きにいく」スタイルへ

これまですぐ隣にチームメイトがいたので「なんでも聞いてね」が通用していたし、それで十分でした。しかしリモートになるといくらオンラインで常時つなげていても、ふとしたときに聞くハードルはすごく上がっていて(もしくは慣れない)、思い切ってこっちから「聞きに行く」スタイルにしました。

チームメートとの1on1が大事

入社後なかなかなじめない理由の一つに、チームへの所属感を持ちにくい、なかなかチームメンバーとの距離感が縮まらないというのがありました。これまでも1on1は大事にしていてマネージャーやメンターとの1on1はこまめにやっていましたが、実はチームメンバーとの1on1こそリモートでは大事なんじゃないかという話になりました。

結論、入社1on1しまくる

上の2点をふまえて、入社後3ヶ月は1on1しまくることにしました。 マネージャーやメンターだけでなく、チームメンバーも2週に1度1on1、マネージャーのマネージャーも毎月1on1、入社した人が嫌じゃない限り1on1しています。 ただし1on1は基本15分としました。

僕も入社したエンジニア全員と毎月1on1していて、(彼ら彼女らの役に立っているかは不明ですが)どこにやりにくさを感じるか、いまの環境になにが足りないのかを直接聞けて、すごくいい機会になっています。

いろんなチームビルディング

10ヶ月もリモートワークが続くとリモートランチやリモート飲みだけだとどうしても飽きてきてしまうので、社内で好評だったおもしろい取り組みを紹介します。

  • リモートでボードゲームしながら飲む
  • リモートで毎朝コーヒー飲む時間をつくる(仕事の話禁止)
  • リモートでプルリクみながら飲む
  • リモートでプロダクトKPIの数字を眺めながらご飯食べる
  • プロダクト単位でemg/pm/ux/qaみんなでリモートオフサイトする

特にリモートオフサイトは準備は大変だけどすごく盛り上がったそうです。

人事労務freeeのリモートオフサイトでは、競合他社のプロダクトをみんなで触ったり、1年間のOKRの読み合わせで理解を深めたり、ユーザーの声を動画でもらったり、みっちり5時間盛り上がって参加した人の反応もよかったようです。

意外とプライベートな話題より、がっつり仕事の話の方がみんな共通して関心が高いので、リモートでもチムビルになりやすいのかもしれません。

freeeのこれからの働き方

コロナの感染状況が落ち着く前提で、freeeでは4月から週2出社 + 週3リモートのハイブリッドな働き方にトライする予定です。

いまではすっかりリモートワークに慣れたのですが、出社には出社のいいところがあったので、今後の働き方を決める上で一番むずかしいハイブリッドにトライしてみることにしました。いいところや働きづらいところがたくさんでてくるはずなので、その学びを踏まえて今後のfreeeの働き方を議論していきたいと思っています。

社内で出社したいという声をけっこう聞くようになったり、採用の現場でもフルリモートの会社は避けたいという人もでてくるようになりました。

あらためて出社とリモートを両方経験してみて、なるべくいいとこどりできるような新しい働き方を見つけていきたいです。

スペアリブの作り方

そういえば今日はクリスマスイブなので、クリスマスぽいレシピを載せて終わります。

母のレシピですが、鍋に放り込むだけで激ウマスペアリブの出来上がり。 家族からの評価がうなぎ登ります。 ふだん料理しない自分でもめっちゃ簡単だったので、ぜひ作ってみてください。

オレンジジュースはポンジュースがおすすめ!

f:id:hiraguri-hiraguri:20201223234247j:plain
母のレシピ

  • スペアリブ 1kg
  • オレンジジュース
  • トマトケチャップ 大さじ5
  • しょう油 大さじ3
  • ウスターソース 大さじ2
  • 玉ねぎ
  • 人参
  1. 肉に塩こしょうして全面に焼き色をつける
  2. 鍋に肉を入れ、肉がかぶるくらい迄オレンジジュースを注ぎ、ベイリーフ、トマトケチャップを入れ、煮込む
  3. 途中、人参を加え少し煮込み、しょう油、ウスターソースを加え、煮る
  4. 最後に玉ねぎを入れ更に煮る

f:id:hiraguri-hiraguri:20201223233602j:plain
激ウマスペアリブ

明日は最終回、freeeの創業者CTO @yokoji です!

メリクリ〜よいお年を〜

アドベントカレンダーは、ぎりぎりにならないと書けないを解決する

この記事は freee Developers Advent Calendar の 23 日目の記事です。


悩みの種の泉へようこそ

ここでは皆様から送られてきた悩みの種を ひも(@him0net) が無駄に技術で解決し、どのくらい解決できているかを担当編集者の takuma に評価してもらいます。

それでは、悩みの種を紹介しましょう。

「こんにちは、会計 freee のアプリケーションをエンジニアをしている ひも です。弊社では freee developer アドベントカレンダーというものがあり、12/1 から 12/25 のクリスマスまで、1日1つブログ記事を公開していくという取り組みをしています。私は毎年11月に、この執筆者の募集で立候補してしまうのですが、いざ12月になるとバタバタして全然記事が書けていないことに状態で苦しんでいます。ここで思ったのですが、技術の力で記事の執筆を支援することはできないでしょうか?よろしくおねがいします。」

この悩みの種、技術で解決するとこうなります。

developers ブログの記事をもとに文章の自動生成を行うと「xxx」という文章ができる。

実際に実装してみた

まずは、文章の生成の方法の技術選定を行う。文書の生成プログラムをざっくり調べたところ、Chainer や TensorFlow を用いた RNN (回帰型ニューラルネットワーク)によるものと、マルコフ連鎖に基づくものが見つかった。

時間が無い(超重要)ので、アルゴリズムを理解しているマルコフ連鎖に基づく文章の自動生成を採用することにした。

また freee のアドベントカレンダーの記事を作成することが目的なので、シードデータには過去のアドベントカレンダー (2018-2020) の記事を利用することにする。記事の収集には先進の技術(コピペ)を用いた。

f:id:him0:20201223011411g:plain
アドベントカレンダーをコピペしてシードデータを集めている様子。

マルコフ連鎖の辞書作成にあたり、分かち書きには、形態素解析エンジン MeCab を用いた。セットアップには ipa辞書インストールも必要であった。

python から MeCab が呼び出せる環境を構築を行い、分かち書きを行った。

$ poetry run python wakati.py
['', 'こんにちは', '、', 'freee', '株式会社', 'で', 'エンジニア', 'を', 'やっ', 'て', 'いる', 'id', ':', 'ymrl', 'です', '。', '\n', 'はやい', 'もの', 'で', '、', '2018', '年', 'も', '残す', 'ところ', '1', 'ヶ月', 'と', 'なり', 'まし', 'た', '。', '\n', '12', '月', 'と', 'いえ', 'ば', '年末', '調整', 'と', 'Advent', 'Calendar', 'です', 'ね', '!', 'という', 'わけ', 'で', '、', 'この', '記事', 'は', 'freee', 'Developers', 'Advent', 'Calendar', 'の', '1', '日', '目', 'です', '。', '\n', '今年', 'も', 'また', '12', '月', '25', '日', 'まで', '毎日', 'リレー', 'で', '記事', 'を', '掲載', 'し', 'て', 'いき', 'ます', '。', '\n', 'さて', '、', '今回', 'は', '開発', '者', 'ブログ', '、', 'つまり', ...

分かち書きが正しくできているのか確認すため、単語の出現回数順で表示してみた。

$ poetry run python collection_order.py
('の', 4699)
('、', 4405)
('\n', 3983)
('。', 3968)
('を', 3824)
('て', 3585)
('に', 3415)
('が', 2946)
('は', 2708)
('で', 2459)
('た', 2301)
('し', 2279)
('ます', 1709)
('と', 1603)
('です', 1125)
('こと', 971)
('も', 970)
('い', 898)
('する', 832)
('な', 797)
('まし', 789)
('いる', 599)
('という', 572)
('freee', 561)
...

freee という単語がこの順位ででてくるのはなかなかにこの freee developers blog らしい文章ができそうで期待が高まってきた。

マルコフ連鎖のロジックの実装を行う。階層は適当に決め打ちで3階でいくことにした。3単語をキーにして、次に出てくる単語が決定する。分かち書きを行った単語をキーとその後に出てくる単語のリストと言う形で辞書として格納していく。

dictionary = [
  ([ 'こんにちは', '、', 'freee' ], [ '株式会社', ... ]),
  ([ '、', 'freee', '株式会社' ], [ 'で', ... ]), ...
]

実際の文章を生成するロジックでは最新の3単語は保持して、マルコフ連鎖の辞書から次のワードのリストを決定し、リストの要素からランダムで1つの単語を抽選する。

prev_three = ['こんにちは', '、', 'freee']

# python で、array find するの地味に大変だった
next_word_list =  next(filter(lambda x: (x[0][0] == prev_three[0] and x[0][1] == prev_three[1] and x[0][2] == prev_three[2]), dictionary), None)
next_word = random.choice(next_word_list)

ロジックが出揃った。

実際に出力してみた。

さて、どんな文章が生成されるのか!!!

f:id:him0:20201223135850g:plain
terminal でプログラムを実行している様子

$ poetry run python markov_chain.py
昔からエンジニアリングもマネージメントも好きなので、エンジニアとしての原点回帰であっても、どういった料理が来たかや何をお皿によそったのかを知るために編 み出した方法として、巷では自作キーボード界隈でいうところの終着点的な意味です。

こうしてこの世界でまた1つ悩みの種が技術で解決された。

developers ブログの記事をもとに文章の自動生成を行うと「エンジニアから料理に目覚め、自作キーボードに落ち着く」という文章ができる。

運命の評価発表

それでは、どのくらい解決できたかを評価していただきます。

him0「どうですか?」

takuma「エンジニアとしてのキャリア像について語るかと思いきや実際には料理について考察しているようで、非常に興味深いです。」

takuma「でも、そんなことより、来年は11月から準備してくださいね。」

him0 🥺

him0「明日は、hg さんの記事です。」

him0, takuma 「それでは、またお会いしましょう。でわでわ〜」


自分はマルコフ連鎖の辞書をタプルで実装してしまったが、[Python]N階マルコフ連鎖で文章生成 の deque を使った実装がきれいだったので、コードはこちらを参考にした方が良いです。また、文章の初めに [BOS] を設定し、 を FOS として扱う実装もこちらを参考にさせていただきました。ありがとうございました。