好きなYoutuberがLive配信を予約したら、Googleカレンダーに自動で予定を入れるスクリプト - Qiita
好きなYoutuberがLive配信を予約したら、Googleカレンダーに自動で予定を入れるスクリプト JavaScriptGASGoogleCalendarAPIYouTubeAPI #更新 2021/09/09更新：配信予約のタイトル・概要変更に対応 2021/08/03更新：配信予約のキャンセルに対応 2021/08/01更新：配信予約の時間変更に対応 2021/02/23更新：重複チェックする期間を半年先から3年先（配信予約の上限）まで延長（長期間先の配信予約をフリーチャットとして使うケースに対応するため） #概要 Vtuberにハマっていますが、好きなVtuberのLive配信の予定をGoogle カレンダーに自動で登録できたら、そのために予定を調整するのに便利だよなぁ、と思ってスクリプトを作ってみました。 Vtuberさんに協力を仰がなくても自動でGoogle カレンダーに登録
Transformerに自分の好みのDLsite音声作品を学習させて、癖に刺さる新作を毎日通知するシステムを作った話 - Qiita
Transformerに自分の好みのDLsite音声作品を学習させて、癖に刺さる新作を毎日通知するシステムを作った話 作ったもの DLsiteの新作音声作品をクローリング -> 好みかどうか推論 -> 好みならSlack通知をするシステムを完全サーバーレス（AWS SAM）で構築しました。さらなる精度向上のため、Slackメッセージのボタンをもとに教師データを蓄積する処理も作りました。 デモ（ぼかしMAX） とてもわかりにくいですが、好みであろう作品がPOSTされているSlackの画面です。各メッセージについている「興味あり！」「別に…」ボタンを押すとLambdaが起動し、DynamoDBに新たな教師データとして保存されます。 なぜ作ったのか DLsiteが好き、以上。 ・・・ もう少し真面目に書くと、 会社でテキストデータに触れることが多いので、うまく扱えるようになりたい 音声作品はシチ
RictyフォントとRicty Diminishedフォントが正式にサポート終了となった話 - Qiita
2023年1月現在、Qiitaのコードブロックでも採用されている有名な日本語対応プログラミング用フォントのRictyとRicty Diminishedが、2023年1月28日をもって「正式に」サポート終了しました。具体的には、配布ページの冒頭に、以下の文章が追加されています。 Ricty および Ricty Diminished は、2010 年代前半には欧文・和文合成プログラミング用フォントとして先駆的でしたが、現在は前時代的な存在となっています。不具合もいくつか確認されています。良質なプログラミング用フォントが数多く登場していますので、それらの利用をおすすめします。 よって今後は、他のフォントを使用するのが良いでしょう。 移行先の候補となるフォントの一覧もあるので、ぜひ確認してみてください。 経緯 RictyフォントとRicty Diminishedフォントは、プログラミング用フォント
GraphQLはサーバーサイド実装のベストプラクティスとなるか - Qiita
この記事は GraphQL Advent Calendar 2020 14 日目の記事です。 前回の記事は @joe-re さんの 「ライブラリの実装からCursor-based paginationにおけるcursorのフォーマットのベストプラクティスを探る」 でした。 前置き GraphQLは2010年代後半に出てきた技術の中でも個人的に特に強力なアプリケーション実装パターンの一つだと思っているのですが、シンプルな実装なのに利用用途が豊富にあることと利用する立場が違うと全く印象を抱く事から全体像を掴みづらく、本来持つべきポテンシャルに対してまだ認知が広がっておらず利用されていないように感じます。 今回はサーバーサイドからの視点を中心にGraphQLを構築する要素を分解して解説するのとともに、それを利用した際にWebアプリケーション開発やそれに関わるエンジニアに起きうる変化について書いて
「SwiftUIでMVVMを採用するのは止めよう」と思い至った理由 - Qiita
※2022/04/23 追記 本記事の続編として、以下の記事を書きましたので、合わせて御覧ください。 仕事でSwiftUIでTCAを使ってみて、かなり知見がたまったので、その解説です。 MVVMからTCAへの移行を考えているのであれば、参考になると思います。 宣言的UIに、MVVMって不要なのでは？ iOS開発の現場で、宣言的UIが当たり前に使われるような時代になりました。 SwiftUIの開発体験、素晴らしい です。最高です。 しかし最近、SwiftUIで当たり前のように 「MVVMで開発しよう」 となったときに、 「ほんとにそれでいいんだっけ？」 と疑問に思いました。 自分の考えを深掘ってみると 問い: iOS開発で、宣言的UIにMVVMを採用することは本当にいいんでしたっけ？ 結論: 「SwiftUIを使うのであれば、MVVMを採用するのは止めよう」 理由： ViewModelの存在
パスワードの1文字目に「~(チルダ)」を使って痛い目にあった - Qiita
何を言っているんだと思われるかもしれないですが、気軽にパスワードの1文字目に「~」を使わないほうがいいというお話です。 起こった問題 踏み台サーバー経由でサーバーAに接続して作業をしていた時の話です。 いわゆる多段 ssh 接続というもので、リモートワークになってからは結構使われる方も多いかと思います。 サーバーA上で root 権限になろうと sudo su - してパスワードを入力したら Connection to xxx.xxx.yyy.zzz closed. の文字とともにサーバーAから追い出されてしまいました。 なにかの間違いだろうと何度か挑戦していたのですが、結果はサーバーAから切断され踏み台サーバーに戻る羽目に。。。 そのときに入力していたパスワードが ~.xxxxxxxxxx のような ~ から始まるものでした。 調査 ~ って何か意味があったよなーと思ってどう調べようかと
モダンフロント開発に必須の知識(ES2015~ES2023まとめ + 高階関数) - Qiita
はじめに モダンフロント開発に必須の知識であるES2015〜以降の記法と、実務でよく使用される高階関数について、自分の中で改めて復習、整理しておきたいと思います。 それぞれの項目に★~★★★の重要度も記述しています。 ★★★ => 必ず覚えておくべき ★★ => 覚えておくべきだが、使う場面が限られる ★ => 知識としては知っておいた方が良い 現在フロントエンドエンジニアの方やフロントエンジニアになりたての方、フロントエンドエンジニアを目指して勉強中の方に読んでいただけたら幸いです。 ES(ECMAScript)とは？ JavaScriptの標準仕様。 現在ブラウザで使われているJavaScriptは、ECMAScriptの仕様に則って開発されています。 JavaScriptは他の言語のようにversionなどが存在せず、「ECMAScriptのversion~~に対応しているJavaS
ECMAScript(JavaScript)の仕様をちょっと読んでみよう - Qiita
イントロ MDN はもはや業界標準の JavaScript リファレンスサイトであるが、JavaScript の syntax (構文) や低レベルな動作については情報が載っていないことがある。このような場合は仕様に立ち返ってみる必要があるが、ECMAScript の仕様は非常に分かりにくい。この記事では、ECMAScript の仕様がどういうルールで書かれているか、どう読めばいいかを軽く説明する。 if 文の syntax の仕様ってどうなってるの？ if 文は statement1 であるから、"13 ECMAScript Language: Statements and Declarations" の中で説明されている。 早速最初の syntax1 のところを見てみると、下のように分かりにくい式のようなものが書かれている。 https://tc39.es/ecma262/#prod-
型推論のTips集 - Qiita
始めに 自分が今までTypeScriptで型推論させるにあたって、中々いい方法が見つからず、他にいいやり方がないか模索して時間がかかってしまうケースがいくつかありました。 そこで今回は割と使うケースで解決するのに苦労したものについて、Tipsという形でまとめてみました。自分はこのやり方でやっていますが、他にいいやり方があれば是非コメントください！ 基本編と上級編に分けており、上級編の方が割と込み入ったことをやっているものになります。 基本編 Object.keysに型をつける Object.keysの返り値の型はstringで固定されているため、以下のように書くとtype errorになってしまいます。 const obj = { a: 10, b: 'text', c: true, }; Object.keys(obj).forEach((key) => { // key: string
IPアドレスの例示で xxx.xxx.xxx.xxx を使うな - Qiita
悲劇は起こった… ある日のLINE A氏「IPアドレスについて教えて欲しい！」 B氏「IPアドレスっていうのは xxx.xxx.xxx.xxx っていうフォーマットの…」 A氏「このリンクなに？」ﾎﾟﾁｰ ＼ﾌﾜｰｵ♡／ B氏（YABE） 何が起こったのか LINE や Twitter などの SNS は投稿されたリンクを自動的に飛べるようにしてくれます。 今回不幸なことに、この .xxx というドメインは存在し、xxx.xxx というドメインは登録されていました。 参考： ドメイン (domain)とは |「分かりそう」で「分からない」でも「分かった」気になれるIT用語辞典 ドメイン名の種類 JPNIC そして .xxx ドメインの用途はよりによって… 用途 登録対象 > アダルトエンタテイメント業界用 < >> アダルトエンタテイメント業界用 << >>> アダルトエンタテイメント業界
知ってると得をするReactコンポーネントのイケてる書き方 - Qiita
はじめに 基本的にReact + TypeScriptでフロントの開発をしているんですが、実際にコードを書いている時に気をつけていること、便利な書き方として知っておくと得をするReactコンポーネントの書き方を紹介します。 Propsが多くなりすぎたら やたらpropsが多くなってしまうことありませんか？しかも同じような名称ばっかりを何回も書くことになるという。そうゆうときはできる限りショートハンドで書きましょう。 return ( <SampleComponent type={user.type} name={user.name} email={user.email} image={user.image} /> )
さばぴょい伝説 - Qiita
位置について ROBOCOPY どん！ Woooooooo(さばおっち) Woooooooo(さばぴょい さばぴょい) Woooo(うつだっち) Woooo(さばぽい) さばさばうつうつ 5 1 0 RAID！！ オレンジぱっぱか怪ストレージ(はいっ) ちょこちょこなにげに(そーわっ So What) 第一第零第五RAID(だんだんだんだん異音が近づき) めんたまギラギラ障害でーす(はいっ) 今日もめちゃめちゃはちゃめちゃだっ(ちゃー) がち追い込み(睡眠カット) 家帰りてー(でも帰れなーい) DATは(からっぽ)HDDは(消した) どいつもこいつも あらら(リワインド) 泣かないで(はいっ) 拭くんぢゃねー(おいっ) 業者呼んでも(なおらないっ)(はーっ？) きょうの総務の女帝は あたしだけに注意する サーバルームへゆこう 電源を切って マウント外して 業者のなかに 光ともす (どーきど
雰囲気で使わない React hooks の useCallback/useMemo - Qiita
React hooks にはメモ化のための useCallback と useMemo という関数があります。 hooks を使い始めて、この二つの関数を知った私はこう思いました。 「え？無条件でパフォーマンス上がるんなら全部これで書くべきやん！」 と。 というわけで、しばらくそのスタンスで書いてきたのですが、果たしてこの「無条件でパフォーマンスが上がる」という前提は本当に正しいのか、というかそもそも"パフォーマンス上がる"とは具体的に何をしてくれるのかを理解せずに使っていたので、ここで「全て useCallback/useMemo で書く」という方針が正しいのか、それとも他の方針が存在するかを考えてみました。 大きく次の3つの観点で考えます。 パフォーマンス 可読性 バグの発生しやすさ 1.パフォーマンス 「そもそも useCallback/useMemo はパフォーマンス向上の用途なの
【React.js】SPAでのリビジョンアップ対策 - Qiita
11月からエイチームライフスタイルにJoinした奥山です。 本稿ではReactでWEBサービスなどを運用されている方で、同様の問題で苦労されていることの解決に役に立ってもらえればと思います。 ReactはWEBに新しいUXをもたらし開発するのも非常に楽しいものですが、同時に従来のWEB運用では想定し得なかった問題も出てきます。今後はこういった現場のノウハウ的なものを定期的にアップしていけたらと思います。 ReactなどでSPAを構築するメリットは高速動作する優れたUIがあると思います。 SPAの実態であるJavascriptファイルを最初にブラウザ側に読み込むことで、後はAPI通信のみとなるためHTMLページを都度読み込む従来のWEBサイトと比べ、不要な情報の読み込みや再レンダリングのオーバーヘッドが軽減され、高速なUIを実現できるようになります。 リビジョンアップ時の問題 WEBサービス
Next.js公式examples集を分類（2020年7月版） - Qiita
更新履歴 Next.js公式examples集を分類（2023年7月版） Next.js公式examples集を分類（2022年7月版） Next.js公式examples集を分類（2021年7月版） Next.js公式examples集を分類（2021年1月版） Next.js公式examples集を分類（2020年7月版） はじめに Next.jsの公式サンプルは現在236本あります。（2020/07/22） しかし、このままではどれを見たらいいのかわからないので主観で分類してみました。 （基礎）Next.jsで基礎的な内容を扱っているサンプル。 （公式）公式ドキュメント で説明するのに使われているサンプル等。 degitを使ってソースのみを取得したい（npx create-next-appをつかってインストールまではしなくていい場合） Next.js公式examples集 Next.
世のフロントエンドエンジニアにApollo Clientを布教したい - Qiita
こんにちは。いかがコーディングお過ごしでしょうか。 私は今更ながら最近GraphQLで遊び出し、そしてApollo Clientに出会いました。 ワクワクしました。「これは想像以上に既存のフロントエンドの設計・実装を変えるものだぞ！」と感じました。 「Apollo ClientってGraphQLクライアントでしょ？GraphQLエンドポイントない俺には関係ないな。」と思ったそこのあなた、それだけじゃないんですApollo Clientは！！！！！ 本記事では「Apollo Clientとはなんぞや」という話と「なぜ私がApollo Clientを布教したいのか」という点について語ります。実は最初は実装含めたチュートリアルを書いていたのですが長くなり過ぎたため記事を二つに分けました。この記事はどちらかと言うと概念系の話が多めで、片方にApollo Client + Reactのチュートリアル
React.memo / useCallback / useMemo の使い方、使い所を理解してパフォーマンス最適化をする - Qiita
React.memo / useCallback / useMemo の使い方、使い所を理解してパフォーマンス最適化をするJavaScriptReactreact-hooks はじめに React（v16.12.0）のReact.memo、useCallback、useMemoの基本的な使い方、使い所に関しての備忘録です。 「React でのパフォーマンス最適化の手段を知りたい」 「なぜReact.memo、useCallback、useMemoを利用するのかわからない」 といった人達向けに書いた記事です。 デモは CodeSandbox 上に置いてあります。編集して動作を確認してみると理解が深まると思います。 本記事で用いている用語 メモ化 計算結果 メモ化 計算結果を保持し、それを再利用する手法のこと。 キャッシュのようなものだとイメージすれば良いと思う。 そのため、以下の言葉の意味は
Reactのレンダリングに関する完全ガイド - Qiita
この記事はComplete Guide to React Rendering Behaviorの翻訳記事になっています。 ご本人(Markさん)にも許可を頂いて翻訳しております。 こちらの記事がReactのレンダリングを理解する上で今までで一番体系的で一番分かりやすかったので、ぜひ紹介したく翻訳させて頂きました。 翻訳ツールにもたくさん助けてもらいながら行い、意訳が出来ていない部分が多々あるかと思いますので修正依頼を出して頂けると幸いです！ Twitterでも、フロントエンドに関する事や、アメリカでのエンジニア経験に関してツイートしているので、よかったらフォローお願いします。 Twitter: @hellokenta_ja 下記から本文です。 Complete Guide to React Rendering Behavior この記事は、Reactレンダリングがどのように振る舞うか、Co
React.useEffectで非同期処理をする場合の注意点2つ（変更あり） - Qiita
はじめに React 16.8から導入されたhooksにはuseEffectがあります。 詳細は公式サイトをまず参照しましょう。 useEffectを使うと、コンポーネントのレンダリングとは別に処理を書くことができます。useEffectでしばしば非同期処理を書くことがあります。例えば、サーバからのデータ取得の処理などがあります。 以下では、useEffectで非同期処理を書く場合の注意点を2つ紹介します。ケースによっては注意点はこの2つだけではない可能性が高いので、ご留意ください。 promiseを返さない useEffectに渡す関数の戻り値はcleanup関数です。 useEffect(() => { console.log('side effect!'); const cleanup = () => { console.log('cleanup!'); }; return clea
Typescriptのinterfaceの使い方 - Qiita
はじめに インターフェース自体をあまり理解できていない為使い所がわからなかった。 そのこで、調べたことをまとめてみました。 インターフェースとは 中身の実装を持たず、メンバーや型の定義だけ持つ。 （よくわからない説明になってしまいました） ◎基本的な使い方 implementsキーワードを使用して、インターフェースを実装します。 classの継承の時にextendsを使用するのと似てます。 インターフェースを実装している場合、インターフェースに存在するメンバーと同じ名前のメンバーが 必ず存在している必要があります。 interface MyInterface{ name:string } class MyClass implements MyInterface{ name:string;//このメンバーがない場合コンパイルエラーとなる。 }
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
