Skip to content

Instantly share code, notes, and snippets.

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

Okuto Oyama yamanoku

🐙
一児の父です
89 followers · 76 following
View GitHub Profile
@yamanoku
yamanoku / pref_selectbox.pug
Last active November 12, 2018 08:54
pref_selectbox.pug
select(name="pref")
option(value="", selected) 選択
each val, index in {'001':'北海道', '002':'青森県', '003':'岩手県', '004':'宮城県', '005':'秋田県', '006':'山形県', '007':'福島県', '008':'茨城県', '009':'栃木県', '010':'群馬県', '011':'埼玉県', '012':'千葉県', '013':'東京都', '014':'神奈川県', '015':'新潟県', '016':'富山県', '017':'石川県', '018':'福井県', '019':'山梨県', '020':'長野県', '021':'岐阜県', '022':'静岡県', '023':'愛知県', '024':'三重県', '025':'滋賀県', '026':'京都府', '027':'大阪府', '028':'兵庫県', '029':'奈良県', '030':'和歌山県', '031':'鳥取県', '032':'島根県', '033':'岡山県', '034':'広島県', '035':'山口県', '036':'徳島県', '037':'香川県', '038':'愛媛県', '039':'高知県', '040':'福岡県', '041':'佐賀県', '042':'長崎県', '043':'熊本県', '044':'大分県', '045':'宮崎県', '046':'鹿児島県', '047':'沖縄県'}
option(value=index)= val
@yamanoku
yamanoku / tumblr-theme-style.css
Last active October 14, 2017 12:08
scrapbox tumblr theme color
body {
background-color: #36465d;
}
a {
color: #8f8f8f;
text-decoration: none;
}
a:hover {
color: #8f8f8f;
text-decoration: underline;
@yamanoku
yamanoku / .htaccess
Created October 14, 2017 13:04
WordPress Security .htaccess
# BEGIN WordPress
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>
@yamanoku
yamanoku / react-native-website-docs-accessibility.md
Last active February 22, 2020 14:50
（WIP）ReactNativeのアクセシビリティ項目の日本語訳
id title description
accessibility
アクセシビリティ
AndroidとiOSで動作するように設計されたReact NativeのAPIを使って、支援技術によるアクセシブルなモバイルアプリを作成する

AndroidとiOSはどちらも、OS付属のスクリーンリーダーのVoiceOver(iOS)やTalkback(Android)などの支援技術とアプリを統合できるAPIを提供している。React Nativeには、アプリがすべてのユーザーに対応できるAPIがある。

AndroidとiOSではアプローチが少し異なるため、React Nativeの実装はプラットフォームによって異なる可能性がある。

@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)
@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 / 2020-best-of-tweet-1st.md
Last active December 29, 2020 10:28
@yamanoku
yamanoku / 2020-best-of-tweet-2nd.md
Last active December 30, 2020 11:10
@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 / useNumberField-ja.md
Created April 18, 2021 13:11
https://react-spectrum.adobe.com/react-aria/useNumberField.html 日本語翻訳

機能

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

  • 小数点、パーセント、通貨値、単位などの国際化された数値フォーマットおよび解析のサポート
  • ラテン、アラビア、および漢数字システムといった30以上の言語のサポート
  • 使用されている番号付けシステムを自動的に検出し、国ごとのデフォルトの番号付けシステムにない番号の解析をサポートします
  • 標準または会計表記の記号、コード、名前など、複数の通貨書式をサポート
  • ユーザーからの入力におけるキーボード入力を検証し、国および番号付けシステムに従った有効な数値入力のみが受け入れられるようにします
  • インプット・メソッド・エディタ (Pinyinなど) から組版された入力を処理します。
  • 現在のプラットフォームと許可されている値に従って、モバイルに適したソフトウェアキーボードを自動的に選択します。