青いやつの進捗日記。

メモとしてべんきょうのしんちょくをかいていきます。あとで自分が検索しやすいもん

東京オリンピックのバスケを逃さず見たいのだけど、自分でカレンダーに記入するのめんどくさいからgorin.jpを元にGoogle Apps Scriptで自動でカレンダーにイベント作る

結果 github.com 上記リポジトリです。 動機 Google Apps Script、地味に便利でSlackとの連携とか色々使えるのですが使ったことがなかったので使ってみたかったのですよね。 そして東京オリンピックのバスケをちゃんと見たいので自分のGoogleカレンダーに登…

GIFアニメーションをJavaScriptで任意のタイミングで動かす。とあるイベントごとに最初から再生

cly7796.net もうこの記事のままでいけます。 imgをcreateElementしてそのsrcに動かしたいGIFアニメーションと、その末尾にパラメータとしてタイムスタンプをつけるとキャッシュが残らず、リロードをせずとも例えばボタンのクリックのたびに毎回アニメーショ…

gif画像のループ回数を制御するために、Photoshopでデータを変える 無限ループを1回だけ再生に変えたい

www.trisec.co.jp の 4.アニメーションGIFで保存する を見てください PhotoshopでWeb用に保存、を選ぶと右下にループオプションが有るので、無限ループしているgifはここが無限になっているので一度に変更すると、1回だけ再生されて止まります

Reactで子要素から親要素のpropsを変える。buttonコンポーネントのonClick時に動かしたい関数を親から渡す

qiita.com 地味にちょっと理解できていなかったけど、わかった気がする ボタンコンポーネント type Props = { onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void } export const Button = (props: Props) => { const { onClick } = props return ( <button onClick={onClick}>content</button> ) } </htmlbuttonelement>…

TypeScript で使うタグの属性一覧を取得し、propsとして流す

qiita.com type InputProps = JSX.IntrinsicElements['input'] たぶんReact.ComponentPropsWithRefでもいける? ginpen.com で、例えばInputコンポーネントを作っていたとして、inputタグに標準で指定できる属性以外にもpropsあるとすると、コンポーネントへ…

TypeScript、型の条件分岐、色々ある ConditionalTypeとかts-xorってライブラリ使うとか

TypeScriptで型の条件分岐が色々方法あるの知らなかった… 1つ目、特定のPropsに応じて条件分岐させる。 そもそも、TypeScriptにはConditionalTypeっていうのがある qiita.com こういう例で一番出てくるのはボタンコンポーネントがaタグかbuttonタグか、で指…

GoogleChromeに自動文字起こしなんてものが…

support.google.com こういうのがあるんですね。英語を認識すると勝手に出てきます。 まあたまに邪魔なんですけど、NBAとか見ていて何言っているかなに一つ聞き取れないときにもこれ出てくると少しはわかるので、ある意味では便利

Next.jsで作ったアプリをGithub Pagesで公開する

github.com これをgithub pagesで公開できるようにした qiita.com にある qiita.com を参考にした Githun Action用のymlがなにをしているかは qiita.com がわかりやすい。 Github Pagesにデプロイする処理はみんな github.com を使っているみたいで、これで…

ffmpegでmp4をhlsに変換する

まず、ffmpegをインストール。 % brew install ffmpeg これでたぶんいける。自分はbrew linkがdid not complete succeccfullyだと言われたが実際はリンクできてたので謎。 mp4を変換してhlsストリーミング再生を実装してみる そしてこの記事を元に変換。 な…

Conventional Commit vscodeの拡張機能を使って対話方式でわかりやすいコミットログを書く

marketplace.visualstudio.com github.com feat: 〜〜 みたいには書いていたけど、feat(form):〜〜のようにscopeを書くの知らなかったな。なるほどだった コミットのログについている絵文字は gitmoji.dev これだったのね…なんなのだろうこれって思いながら…

Ricky-Diminished バッククオートが重複して表示されてしまうのを直す

Ricky-DiminishedをVSCodeのフォントに指定しているのですが、`がなんか被っちゃって正しく表示できないんですね。 それを直せます。下記を参考にしました。 zenn.dev qiita.com Qiitaのほうに習ってGUIのFontForgeを使って直しました。 ただこれMacを変える…

!!で明示的にbooleanにする

!!number みたいな感じで、numberが値入っているか否かを判定できる。 jsprimer.net !はNOT演算子で真偽値を返すので、!numberにさらにNOT演算子を指定すればnumberがtrueかを判定できる。 まあただjsprimerでも書いてあるとおり、大体の場面において違う明…

SPAで一定時間をあけて処理する

docs.github.com SearchAPIが1分に30回までしか叩けないらしい。 ページネーションのようなものを実装したい。ただ普通にリスト取れるAPIだと一度に取れる件数に制限あって、プルリクだったら100。SearchAPIでtotal_lengthがとれるのでそれをとりたい。 けど…

query-string、バージョン5じゃないとIEに対応していない

zenn.dev を真似してquery-stringってライブラリを使っていたのだが、 github.com 最新を普通に入れると現状ではバージョンが7が入ってたのですが、これ、IE非対応らしい。 github.com バージョン5ならIE対応してくれるらしい。 いやーSPAのIE対応ってなんか…

TypeScriptでArrayをTypeに変換する

qiita.com const englishList = ["aaa", "bbb"] as const type English = typeof englishList[number] こうするとenglishList自体も配列としてfilterとかでチェックするとかに使える ところでtypeof englishList[number]って書き方ってなんなのだろう…ちょっ…

Next.jsでModule not found: Can't resolve 'fs'って言われるやつ is 何

まずfsってなに qiita.com なるほどファイルを扱うためのモジュールで、Node.jsが提供しているモジュールなのでわざわざインストールする必要とかはないらしい。自分はMarkdownのファイルを読むために使っていた。 で、本題。これをNext.jsで使う際に、 Modu…

配列から任意の要素を取得する際に配列のindexで指定はしないで条件一致で取得しよう

と、レビューで言われまして。 例えば const List = ['first', 'second', 'third'] ['a','b','c'].map((item, index) => ( <Text>List[index]</Text> ) みたいな。 で、これはなぜか。 理由としては 堅牢性が低い 保守性が低い 静的解析しにくい だと。 つまるところ、ind…

【メモ】Stimulusなんてフレームワークがあるのね。サーバーサイド組み込み用のHTMLテンプレート実装とかで輝きそう。

necomesi.jp 一緒にプロジェクトやってる人がこんなの見つけたーと話していた。 受託のWeb開発とかだとサーバーサイドとの兼ね合いもあり自由にReactを使うとか使って宣言的に出来ず、どうしても命令的にやらざるを得ないことはある。そこで見つけた上記の記…

GithubのBranch protection rulesのBranch name patternで、2つのブランチ(developとmaster)に対して同じ設定したい

qiita.com 上記の諸々をmasterとdevelopに設定したい。 で、どうするんだっけなーと。 stackoverflow.com これが参考になりました。 [master,develop]* これでいけました。

Reactで良い感じにページ内アンカー(ページ内遷移)を実装する

www.npmjs.com github.com これ便利。 import { Element, Link as ScrollLink } from 'react-scroll' <ScrollLink to="section" smooth={true} duration={500}> TextText </ScrollLink> <Element name="section"> Section </Element> これでScrollLink to="section"を押下時にスムーススクロールでElement name="section"まで遷移してくれる。 import { anima…

yakuhanjp、3.3→3.4で地味に破壊的変更があった scssのパスの指定が変わっておるよ

github.com (とかの約物を半角に出来るフォント。便利。 で、10日前に3.4.0がリリースされました。マイナーアップデートですね。 なので開発環境もアップデートしてみる…と、なんとそのままでは動きません。おそらく、Scss使ってるならCSSがビルドできなく…

ページ下部にトップに戻るボタンとか設置する時に気をつけるべきこと。iOSでセーフエリア、Safariで下部のステータスバー

iOSのSafariはブラウザ開いた際に出るステータスバー分、タップできないエリアが存在する。ここの領域はステータスバーが出ていないときはタップが無効になる。 また、iPhoneX以降はセーフエリアというのが存在する。周囲のノッチの周囲あたりがセーフエリア…

GithubのPullRequestで画像を小さく貼りたい…

って思うじゃないですか。で、探したら qiita.com あーこれ!!まさにこれ。 だいたい修正前と修正後をスクショして貼るとか、テーブルにして横並びに出来ると見やすいし便利。

Visibility:hidden; と display:none; の、アクセシビリティ的な違い

よく要素をopacityで消したりすると思うのですが、opacityで消すと要素は残るのでタブで移動とかするとカーソルがあたってしまうのです。なので、アクセシビリティ気にする必要あるのであればopacityでは厳しい。 なので、その場合はカーソル当たらない状態…

IE11やSafariでmatchMediaのaddEventListener('change' は効かない

developer.mozilla.org matchmediaありますよね。上記を見てIE11も対応しているので油断していました。 window.matchMedia(`screen and (max-width: 768px)`).addEventListener('change', () => { }); 上記のようにmatchmediaの閾値を検出するのをaddEventLi…

lodashでイベントを間引く。イベントの終了後にしたり、イベントを何秒ごとに区切ったり。

qiita.com この記事が参考になります。 throttleを使うと、何秒ごとにイベントを起こす、のように出来ます。 this.elms.forEach(elm => { window.addEventListener( 'scroll', throttle(() => { elm.style.left = `-${pageXOffset}px`; }, 20) ); }); 上記の…

JavaScriptで高さを小数点まで含めて取得したいときに

qiita.com 上記の記事が参考になります。 qiita.com のように、高さ取得したかったらoffsetHeightとか使うと思いますが、これ丸めちゃって整数になるんですね。まあだいたい計算出来れば良いならそれで良いのですが、 tech.motoki-watanabe.net でparseFloat…

getComputedStyleでスタイルを取得し、parseIntやparseFloatで数字にする

qiita.com const elm = document.querySelector('.elm'); const style: CSSStyleDeclaration = window.getComputedStyle(elm); const lineHeight = style.lineHeight; のように、して、実際に計算された後のCSSの値をとってこれます。 こちらの結果は21pxの…

WindowsのGoogleChromeでタイムゾーンのバグあったみたいだけどもう治ってるっぽい。

あー PCは Google Chrome ですか?だとすると、時間表示(タイムゾーン)がおかしくなるケースが発生しているとか…(原因調査中?)https://t.co/oGtvIR73ANだとすると、他のブラウザか端末で購入しておくのもよいかな…と。— PKS|通りすがり (@JustApasserby00) 2…

Safariでのバグ。z-indexとtransformの組み合わせにおるz軸での戦い

Safariで、 .layer1 { transform: rotateX(45deg) } .layer2 { z-index: 1; } rotateXさせている.layer1の上に.layer2を乗せたい時。 Chromeなどでは問題なかったのだが、Safariではなんと、.layer1が上に来る。 どうやら、Safariではz-indexよりtransformの…