Skip to content

Instantly share code, notes, and snippets.

View yamanoku's full-sized avatar
🐙
一児の父です

Okuto Oyama yamanoku

🐙
一児の父です
107 followers · 90 following
View GitHub Profile
@yamanoku
yamanoku / output_summary_2021.md
Last active December 16, 2021 01:57
Lapras output_summary 2021
@yamanoku
yamanoku / web-components-and-the-aom_translate-jp.md
Last active November 20, 2021 13:23
https://www.24a11y.com/2019/web-components-and-the-aom/ の非公式日本語訳

Web Components と the Accessibility Object model (AOM)

投稿日: 2019年12月2日 投稿者: Léonie Watson

HTMLは過小評価されがちです。複雑ではなく、厳格でもなく、ほんの少しの要素で結果を出し始めることができます。HTMLはCSSのようにクリエイティブではなく、JavaScriptのようにエネルギッシュでもありませんが、ブラウザと静かに連携してWebの多くの機能を実現しています。

HTML文書がブラウザで解析されると、いくつかのことが起こります。ブラウザはDOM（Document Object Model）を作成し、支援技術が実行されている場合はACT（Accessibility Tree）を作成し、多くの場合はユーザーインターフェース（UI）の一部として要素をレンダリングし、要素がインタラクティブな場合は期待されるインタラクションサポートを提供します。

もし私たちのHTML文書にこのようなHTMLが含まれていたら、




  


  




    


          
    

      

        
        

          

              @yamanoku
          

          

            
                yamanoku
                / index.md
            
            

              Last active
              July 31, 2021 04:56
            

              
                https://necolas.github.io/react-native-web/docs/accessibility の非公式日本語訳
              
          

        

      

        

  

      

    
アクセシビリティ


使い慣れたウェブアクセシビリティ API をプラットフォームに依存しない形で提供。


React Native for Web におけるアクセシビリティは、複数の独立した Web API をまとまったシステムとして統合しています。支援技術（VoiceOver、TalkBack といったスクリーンリーダーなど）は、ウェブアプリの構造、目的、対話性について、[HTML 要素][html-accessibility-url]、属性、および [ARIA in HTML][aria-in-html-url] から有用な情報を得ます。


アクセシビリティ Props API


React Native for Web には、アクセシブルなアプリを作るための API が含まれています。Web で最も一般的でサポートされているアクセシビリティ機能が、プラットフォームに依存しない accessibility* props として公開されています。



  


  




    


          
    

      

        
        

          

              @yamanoku
          

          

            
                yamanoku
                / accessibe-and-the-false-david-vs-goliath-narrative.md
            
            

              Last active
              August 15, 2021 08:57
            

              
                accessiBe and the false David vs. Goliath narrative（yamanoku による非公式日本語翻訳）
              
          

        

      

        

  

      

    
accessiBe and the false David vs. Goliath narrative – Eric Bailey の非公式日本語翻訳です。



accessiBe と偽りのダビデとゴリアテの物語




この話を読んでいて、すでに accessiBe と契約を結んでいる場合は、残念ながら手遅れの可能性があります。


この話では、Web サイトまたは Web アプリを使用しようとしている人々に直ちに害を及ぼすことをやめることをお勧めします。 accessiBe の１行の埋め込みコードを削除し、契約の残り時間を使い果たし、更新しないでください。かかったコストは教訓として扱いましょう。





  


  




    


          
    

      

        
        

          

              @yamanoku
          

          

            
                yamanoku
                / useNumberField-ja.md
            
            

              Created
              April 18, 2021 13:11
            

              
                https://react-spectrum.adobe.com/react-aria/useNumberField.html 日本語翻訳
              
          

        

      

        

  

      

    
機能


数値フィールドは <input type="number"> で構築できますが、ブラウザやプラットフォーム間で動作が非常に一貫しておらず、ローカライズされた書式設定オプションが限られています。また、ステッパーボタンのスタイルを設定するのが困難です。useNumberFieldは、国際化フォーマットオプションをサポートし、必要に応じてスタイル設定できるアクセス可能な数値フィールドを実現します。


    

  • 小数点、パーセント、通貨値、単位などの国際化された数値フォーマットおよび解析のサポート
    • 

  • ラテン、アラビア、および漢数字システムといった30以上の言語のサポート
    • 

  • 使用されている番号付けシステムを自動的に検出し、国ごとのデフォルトの番号付けシステムにない番号の解析をサポートします
    • 

  • 標準または会計表記の記号、コード、名前など、複数の通貨書式をサポート
    • 

  • ユーザーからの入力におけるキーボード入力を検証し、国および番号付けシステムに従った有効な数値入力のみが受け入れられるようにします
    • 

  • インプット・メソッド・エディタ (Pinyinなど) から組版された入力を処理します。
    • 

  • 現在のプラットフォームと許可されている値に従って、モバイルに適したソフトウェアキーボードを自動的に選択します。
    • 




  


  




    


          
    

      

        
        

          

              @yamanoku
          

          

            
                yamanoku
                / select-frontend-tech.md
            
            

              Created
              March 26, 2021 01:45
                — forked from mizchi/select-frontend-tech.md
            

          

        

      

        

  

      

    
フロントエンドの技術選定で考えること


Frontend Study 用


前提: フロントエンドは式年遷宮が有効である


    

  • DB を持たないため、表層の技術を交換するだけで済む

      

    • JSON API が実質的な分解点になっている
      • 

    • 近年ではモバイルアプリのために JSON API が切り離されていることが多く、ここの利用者になるだけでよい
      • 

    

    • 

  • Rails や PHP で ORM ヘルパーにべったりな場合に困難になる(クライアントで同等のバリデーションを再現する必要)
    • 




  


  




    


          
    

      

        
        

          

              @yamanoku
          

          

            
                yamanoku
                / 2020-best-of-tweet-2nd.md
            
            

              Last active
              December 30, 2020 11:10
            

          

        

      

        

  



    


          
    

      

        
        

          

              @yamanoku
          

          

            
                yamanoku
                / 2020-best-of-tweet-1st.md
            
            

              Last active
              December 29, 2020 10:28
            

          

        

      

        

  



    


          
    

      

        
        

          

              @yamanoku
          

          

            
                yamanoku
                / react-spectrum-why-react-aria-translate.md
            
            

              Last active
              August 8, 2023 04:41
            

              
                Why React Aria? 非公式日本語訳
              
          

        

      

        

  

      

    
なぜReact Ariaなのか？


このページでは、React Aria が存在する理由と、それが解決する問題について説明します。


動機


デザインシステムはかつてないほど普及しており、大小を問わず多くの企業が独自のコンポーネントライブラリをゼロから実装しています。Reactのような最新のビューライブラリにより、チームはこれらのコンポーネントをこれまで以上に簡単に構築して保守することができますが、多くの種類のデバイス間で動作するインタラクションを完全にアクセス可能な方法で行うことは、まだ非常に困難です。


ウェブは非常にユニークなプラットフォームです。非常に多様なデバイスとインタラクションモデルで動作し、プラットフォームの美学が明確に定義されていないため、各企業は通常、デザインシステムの各コンポーネントを自社のブランドに合わせてスタイル化する必要があります。ブラウザに内蔵されているUIコントロールは非常に少なく、存在するものはスタイルを整えるのが非常に困難です。そのため、あらゆる企業のウェブ開発者は、すべてのコントロールを一から作り直す必要があります。これは、他の多くの企業が行っている作業を重複して行うために、各企業が何百万ドルもの投資を行っていることを意味します。


ウェブが提供する完全にスタイル可能なプリミティブ(例:``)は非常に強力ですが、意味的な意味を欠いています。つまり、コンポーネントを実装するために使用している div スープの意味を支援技術が理解できないため、アクセシビリティが欠落していることが多いということです。ARIAを使用してセマンティクスを提供する場合でも、JavaScriptを使用して各コンポーネントのすべての動作をゼロから実装する必要があり、これを多くのデバイスやインタラクションモデルにまたがって行うのは厄介です。



  


  




    


          
    

      

        
        

          

              @yamanoku
          

          

            
                yamanoku
                / JavaScript.md
            
            

              Created
              August 12, 2020 23:32
                — forked from kenmori/JavaScript.md
            

              
                JavaScript練習問題集(ECMAScript2015,2016,2017,2018,2019,2020,other Library)
              
          

        

      

        

  

      

    
JavaScript練習問題集


JavaScript


更新情報


・Decoratorsに関する問題を追加(2020/6/6)
・リンクを追加(2020/5/30)
・問題を追加(2020/4/18)




  


  




    


        

          
        

    

  




    

  


  


          



    



  

    

    

    





    


    

    

  


	

		
		
	
	OSZAR »