はてなブックマーク

この記事はtraP新歓ブログリレー2024、19日目の記事です はじめにこんにちは！　23Bの @cp20 です！ 2024年の3/23(土)～3/24(日)の2日間にわたって行われたWeb Speed Hackathon 2024に初めて出場して、そしてなぜか優勝してしまいました。新歓ブログリレーっぽいただの体験記を書くつもりが優勝者の参加記を書くことになってしまってが重いんですが、頑張って書こうと思います...！ 今年の順位表 (全体はリーダーボードから見れます)体験記もともと軽い体験記を書くつもりだったので、とりあえず技術的なところを省いて体験記を綴っていこうと思います。お前の話なんか興味ないから早く技術的な話を聞かせろという人は「改善の流れ」のところまで読み飛ばしてください。 競技前Web Speed Hackathonに出るのは今年が初めてで、去年以前の過去問を解いたことすらなか

この記事はtraP Advent Calendar 2023 14日目の記事です。 はじめに こんにちは。19Bの@kegraという者です。いつもゲーム開発とかWeb開発あたりをやってます。 今日はJavaScript(TypeScript)で最近やらかした割と初歩的なデカいミスを紹介したいと思います。 setInterval()による定期ポーリング 僕は今あるシステムを作っており、そのシステムではクライアントサイドが定期的にサーバーのAPIを叩いて情報を取ってくる感じになっています。いわゆるポーリングです。 クライアントサイドはWebフロントエンドで作っており、僕はこの実装でsetInterval()を使っていました。 setInterval(() => { updateData(); }, 5000); // 5秒おきにポーリング そこで本当にしょうもないのですが、第2引数を書き忘れて

(本当のリポジトリはIPアドレスとかいろいろ上がってるのでコピーです) 名前は競技が終わってから考えました。ISUCONで自分たちの代わりにsshしてくれるのでこの名前です。 構成大きく分けて、手元の１コマンドで全サーバーでデプロイを行うansibleと、ブラウザで必要な情報を見るobserver(勝手に名前を付けた)に分かれています。 ansibleansibleは、初動で必要なツールを入れるための0_init.ymlと、毎回のデプロイを行う1_deploy.ymlを作りました。典型的なnginx+MySQL+systemdのアプリであればこれらで対応できるようにし、典型でない問題が来た時には、Makefileを書いて 2_make_deploy.yml で対応できるようにしました。 initの方では、下のobserverで必要なexporterなどを入れたり、GitHubの鍵を登録した

OVRを用いて空間を移動している様子(空間を手で掴んで移動する感じ)Virtual Desktop (有料2000円位) PCVRを無線でやるなら超オススメQuest2のストアやPico4のストアで購入できます。 無線でPCVRするのに特化した凄い奴。デスクトップを表示する機能もある。Quest2のストアやPico4のストア等で買いましょう。また、これを用いれば外出先のネット環境が良ければ、外出先でも遠距離でPCと通信をすることで、PCVRで入ることが出来ます。 XSOverlay (有料1010円) PCVRユーザーならあるとめっちゃ便利Steamからダウンロードできる。 VR上にPCのモニターを出すことができ、コントローラーでマウスの操作などができて便利。VRを着けたまま、VRChatをプレイしながら作業できたり動画やツイターを見たりできる。 OVR Toolkit 1220円でも同等

この記事は新歓ブログリレー2023 37日目(4/14)の記事です。 こんにちは、19B/22Mの翠(sappi_red)です。SysAd班で活動していました。Viteのチームメンバーだったりもします。 この記事ではViteでの開発中のSSR対応の仕組みがどう実装されているか、どうしてそうなっているかについて紹介します。 前提知識 特筆すべき点のみを取り上げたざっくりとした説明です。 Webフロントエンド Web上のサービス・アプリケーションのユーザー側に近い開発領域のことを指します。「ボタンを押したときにどうなるか」や「ページ内のどこに何が表示されるか」をプログラムするなど、主にユーザーの端末上で動作するプログラムの部分を指します。 Vite Webフロントエンド開発において使われているツールの一つです。フロントエンドのプログラムを構成するファイルを各実行環境(ブラウザ、Node.jsな

制作記録 制作のきっかけ dotfilesを整備し始める Neovimを触り始める Neovimのカラースキームをデフォルトのものから変えたくなった 色々探したが"好きな"カラースキームが見つからなかった 「そういえばVSCodeではどんなテーマ使ってたっけ...」 「なんかVSCodeのテーマもよくよく見ると好きじゃないな...」 「作るか」 方向性の決定 Marketplaceで検索すれば、"良い"カラーテーマはたくさん見つかります。かわいいテーマ、かっこいいテーマ、見やすいテーマ...しかし、私が欲しかったのは"好き"なテーマでした。俺の、俺による、俺のためのオレオレテーマが欲しいのです。ならば作るしかありません。俺が。 ということで"好き"なテーマを作ることを第一目標としました。 ベースとなるテーマのピックアップ テーマ制作にあたり、初動の時点で0から10まで自作するのは無謀である

全世界5億人[1]のMicrosoft PowerPointユーザーの皆さんこんにちは。Keynote、Google Slidesユーザーの方もこんにちは。本記事はtraP夏のブログリレー8月19日の記事です。 こんにちは。@d_etteiu8383です。突然ですが皆さんは課題や仕事で「プレゼン用のスライドを作ってくれ」と言われたらどんなソフトウェアを使って作成しますか？ ...え......? ......Microsoft PowerPoint.........!? 見出しやテキストの位置、フォントサイズをマウスでちまちまと調整する必要があったり[2]、閲覧に専用のソフトウェアが必要な[3]あのPowerPointを使っているのですか...? ...失礼、少し質問を変えましょう。皆さんはMicrosoft PowerPoint以外のプレゼン用スライド作成ソフトをご存じですか?もしパワポ

昨日の自分「今作ってる曲まじで良すぎる。天才かもしれん」 今日の自分「ﾅﾆｺﾚ。曲作り下手すぎか～～」 この記事は新歓ブログリレー23日目の記事です。 こんにちは、カシワデと言います。サウンド班に所属していてパソコンで音楽を作っています。 皆さん、DTMってしってますか？ DTMとはDeskTop Musicという和製英語の略で、パソコンで音楽を作ることを広く指します。パソコンで音楽を作ると言っても昨今の曲は大体パソコンを用いて作られているので、DTMというと特に"打ち込み"のニュアンスが出るような気がします。 でも、『パソコンで音楽を作る～』とか『打ち込み』っ… 🎉入学おめでとう🎉まずは新入生の皆さん、ご入学おめでとうございます！！！これから始まる大学生活は非常に短いですし、世間で言われる程時間に余裕があるわけでは無いので、後悔の無い充実した生活を送ってください！

この記事は2022年の夏のブログリレー12日目の記事です。 こんにちは。20Bの@Rasです。初めましての方はぜひ過去のブログもご覧ください！ → 過去のブログ一覧 目次 概要 30秒でわかる今回の内容 本編 何が実装されたの どう書くの キャッシュが効かなくてハマった話 どっちを使えばいいの おまけ おわりに 概要 30秒でわかる今回の内容 Github ActionsでGo製アプリケーションのCIを回す際にactions/setup-go@v3を使っている v3.2.0がリリースされ、キャッシュ機能が実装された モジュールキャッシュとバイナリキャッシュの2種類のキャッシュに対応 モジュールキャッシュ: go.modで管理される依存モジュールのキャッシュ バイナリキャッシュ: コンパイル後の実行バイナリのキャッシュ これまではactions/cacheを併用していたが不要に 記述が簡潔に

こんにちは、19の翠(sappi_red)です。 この記事では自分が2022年に行ったOSS活動を振り返ります。(もう2023年になって一週間以上経っていますが…) 2021年まではちょこちょこコントリビュートしていたのですが、昨年はかなりがっつり活動していました。 最初に統計情報を見て、そのあと時系列順に振り返っていきます。 統計情報以下はパブリックリポジトリから一部のリポジトリを除いた値を利用しています。 プルリクエスト2022年の合計プルリクエスト数は556件でした。365日で割ると日に1.5件程度です。 Repository Values

この記事は新歓ブログリレー2022 / 40日目の記事ですこんにちは、19Bのカシワデです。普段はオーケストラ系の曲を作ってます。 TwitterやSoundcloudもよろしくね！！！！！！ さてさて、皆さまいかがお過ごしでしょうか。近くスプリングセールやサマーセールなども行われるであろう中、DTMerの敵である円安はめちゃめちゃに進み、とてもじゃないがプラグインは買えないよ～～～と言ってる頃かと思います。 こんなことを思ったことはありませんか。 「あぁ…もしも自分が理想とするプラグインを無料で作れたら、こんなにも散財することはないのになぁ」その思いを叶えてしまおう、というのが本記事の目的となっています！ さて 今回メインに扱うのはJUCEと呼ばれるフレームワークです。 オーディオ関連のソフトウェアを開発することに特化したフレームワークで、比較的簡単にVSTプラグインやVSTプラグインホ

この記事はtraP Advent Calendar 2021 42日目の記事です。 こんにちは、20Bのxxarupakaxxです。 今回はgRPCについて解説していきます。 ※本記事ではgRPCのサンプルコードはございません。ただただgRPCについて話していきます。 自分が所属しているプロジェクトのミーティングでgRPCについて話題が上がり実際にgRPCで開発を進める方針になったので自分が調べた限りの知見をまとめて共有しようかなと思います。 gRPCってなんぞや gRPCって聞かれてもなんも思いつかないですよね..　gがついているから、Googleがなんか作ったんじゃないのって思うそこのあなた！そうです、Googleが開発したものなんです！！ですが、g + RPC.. RPCってなんだろうと思う方が多いかと思います。なのでまずRPCについて軽く説明していきます。 RPCってなに RPCと

(最終更新:2023/01/10) この記事は、traP夏のブログリレー 19日目の記事です。 基底現実の皆さん、こんにちは。仮想現実に住んでいるケモノの、pikachu0310です。 この記事では、ケモナーの人またはケモノを対象とした、VRChatの始め方、そしてその歩き方(ケモノ系のイベントやオススメのワールド)を紹介していこうと思います。 また、この記事では、VRを持っていない、Windowsのパソコンでプレイすることを想定していますが、VRでプレイしようとしている方でも問題なく読めます。 まずVRChatを起動するまで Steamでダウンロード！(無料！容量軽い！すぐ入る！) ダウンロードしている間にWeb上でアカウントを作る！ VRChatを起動して、作ったアカウントでログイン！ようこそ！ ケモノになろう！！！ ここをクリックした後、右のINVITE MEをクリック！ するとVR

この記事は夏のブログリレー17日目の記事です。 こんにちは、19Bの翠(sappi_red)です。普段はSysAd班で活動しています。Viteのチームメンバーだったりもします。 npmからインストールしたパッケージをモジュールバンドラーで使えないことに遭遇したことのある人は少なくないでしょう。 この記事ではそれが発生する要因の一つである、package.jsonのエントリーポイント用フィールドについて書いていきます。 モジュールバンドラーとトランスパイラは意味が異なるものですが、モジュール形式の変換においては境界線が非常に曖昧になるため、この記事ではまとめてバンドラーと呼ぶことにします。 モジュール形式 話を進める前に、前提となるモジュール形式という概念について説明しておきます。 JavaScriptでは元々、プログラムを複数のモジュールに分割する標準仕様が存在しませんでした。そのため、標

こんにちは、21Bのseasonです。この記事はtraP夏のブログリレー3日目の記事です。 自作Cコンパイラでセルフホスト達成しました。 リポジトリ: https://github.com/season1618/c-compiler/tree/main 自作Cコンパイラでセルフホスト達成しました！！！！！！🎉🎉🎉https://t.co/8fLIAJWksQ pic.twitter.com/2fgH5sKoZ0 — season (@season1618) July 27, 2022 実際にどうやって作るかを書くと長くなるので、ここでは経緯とか完成までの流れとかを書こうと思います。一応開発メモは以下に上げておきました。 開発メモ: https://github.com/season1618/note/blob/main/cs/c-compiler/index.md 経緯 大学の講義で

ルルーシュA ISUCON12の本選に出たい。インフラが得意。 ルルーシュB ISUCON12の本選に出たい。何でもできる。 ルルーシュC ISUCON12の本選に出たい。コードが書ける。モットーは 「Don't think, feel.」 ※ この記事は99%のユーモアと1%の技術でできています。 deploy.sh が 生まれた 日 前日、夜 10:00。 その 名 は SQLite 「来たか、この日が。コードネームansibleを実行する。」 グオオオン(ansibleが走る音) 「まずはドキュメントとコードを読むか。」 var ( // 正しいテナント名の正規表現 tenantNameRegexp = regexp.MustCompile(`^[a-z][a-z0-9-]{0,61}[a-z0-9]$`) adminDB *sqlx.DB sqliteDriverName = "s

こんにちは、@oribeです。 もうすぐISUCONの季節ということで、traP内では部内ISUCON(PISCON)を開催しています。 PISCONに参加してみたもののどう取り組んでいいかわからない、というISUCON初参加のメンバーに向けて講習会を開催しました。 ISUCONについてのwriteupや解説記事は多く公開されていますが、Web開発やインフラの初学者向けに丁寧に解説したものは少ないと思われます。 そういった「ISUCONを通してこれからWeb開発やインフラの知識を身につけていく人たち」の踏み台となれば、と考え講習会の資料・アーカイブを公開することにしました。 前半でISUCONの参加準備についての座学を行い、後半ではハンズオン形式で計測ツールの使用や改善を行っています。 対象 ISUCONに初めて参加する人 Web開発やインフラを勉強し始めたばかりの人 traP内で例年開催

こんにちは、19のSysAd班の翠(sappi_red)です。普段はtraQのフロントエンドの保守を行ったりしています。 こんばんは、19のSysAd班のtemmaです。普段は普段どおりのことをしています。この記事の面白い部分はすべて僕が書いています。面白くないところは翠君が書いています。 この記事では、日々パフォーマンスに頭を悩ませる開発者の方のために、ワンタッチで劇遅SQLを200倍高速でキュートなSQLに劇的ビフォーアフターする方法を紹介します。 「おいおいおい、遅くしたくて記事を読み始めたのに話が違うじゃないか💢」と思ってるそこのあなた👈 早くできるということは遅くもできるんですね。 TL;DR ここにテーブルがあります。 CREATE TABLE messages ( id CHAR(36) NOT NULL　PRIMARY KEY, text TEXT COLLATE ut

この記事はtraP新歓ブログリレー2022 41日目(4/18)の記事です。 こんにちは、19Bの翠(sappi_red)です。 普段はSysAd班で活動しています。 この記事ではVite-likeなウェブフロントエンドツールをつくっていきながら、Viteの大まかな仕組みを説明していきます。 できる限り細かく手順を書いたので、ぜひ実際に追ってみてください！ 実際に完成したものはこのリポジトリ(sapphi-red/micro-vite)にあります。名称は愚直にMicroViteにしました。 ある程度Viteに近い実装にはなっていますが、そこそこいろんな箇所が異なります また、動作確認はNode.js v16.14.2で行っています。(がおそらくv12以降なら動くと思います) 準備 とりあえず動作確認用のごく単純なウェブアプリケーションを作ります。 動作確認用なのでplaygroundという

新歓ブログリレー33日目の記事です！ まえがきどうも19の亀茶です †内ではこれといって目立った活動はしておらずのんびりと過ごしております 一説によるとtwitterで可愛い絵を布教する人として認知されてるみたいです ありがたいですね さて、話は変わりますが皆さんは今のキーボードに満足されているでしょうか ひとえにキーボードといっても様々なものがあります。ノートPCにそのまま引っ付いてるものや、テンキー（数字だけを打ち込むやつ）や矢印キーがついているいわゆるフルキーボードといったもの。はたまたUS配列であったりJIS配列であったり... 自分は普段US配列のキーボードを使用しているのですが、少し不満がありました。 それはスペースキーが無駄に長いことです。Ctrl等の装飾キーを親指で押せると便利だと思うのですが、頑張って親指を伸ばさなければ届きません。この点、JIS配列だとスペースキー

この記事は新歓ブログリレー12日目の記事です。 21Bのasariです。普段はSysAd班でweb開発をしています。 フロントエンドに続き、ToDoアプリのバックエンドをGo言語を用いて実装していきます。全4日間です。 Go Go（Golang）は、Googleにより開発されたwebサーバー構築に特化した言語です。Goは比較的新しい言語であり、シンプルかつ高速です。近年非常に流行していて、Google、PayPal、Netflix、mercariといったあらゆるサービスで利用されています。 この記事でできるようになること この記事では、簡単なwebアプリの 設計ができるようになる Goで実装できるようになる ことを主眼に置いています。 ですから、WebアプリのAPI設計やGoの主要な実装については丁寧に解説しています。一方で、DBの設定やそのパラメーターといった細かい箇所は解説を省き、動く

2021夏のブログリレー16日目の記事です この記事では、Wingetについて紹介していきます。 Wingetとは Wingetとは、Ubuntuのaptのように、コマンドラインからソフトをインストールできるツールです。一応Winget以外にも Winget Chocolatey Scoop といったものがありますが、Microsoftが開発している点、そして今のところ個人でもプルリクを送れば好きなソフトを追加できる点からWingetを推しています。 また、Wingetを使用するとソフトのアンインストールもコマンドラインから実行できるようになります。 私はWingetを使用してこれらのソフトをインストールしています。 7zip git gnupg gpg4win nodist PowerToys Click gow GoogleChrome VSCode Docker Steam Disc

gzip圧縮だとあまり圧縮できていなく、スライディングウィンドウが小さいせいかなと思ったのですが、実際に大きさがかなり違うみたいなので、それが原因としてありえそうです。 Gzip uses a fixed size, 32KB window, and Brotli can use any window size from 1KB to 16MB, in powers of 2 (minus 16 bytes). This means that the Brotli window can be up to 512 times larger window than the deflate window. Results of experimenting with Brotli for dynamic web content - The Cloudflare Blog AudioContextの

インスタンスのひとつ「S512」には、サービスの中でも特に重要な部内SNS「traQ」と部員管理システム「traPortal」、認証基盤「pipeline」がデプロイされています。 ArchLinuxくん... SysAd班では、これらVPSのOSにArchLinuxを採用しており、当時のカーネルバージョンは5.12.3-arch1-1でした（たぶん）。 ArchLinuxはUbuntuやCentOSと異なり、SimplicityやModernityの思想からパッケージのRolling releaseを採用しています。 Simplicity 不必要な追加や修正がないこと オリジナルの開発者（アップストリーム）によってリリースされたソフトウェアを、ディストリビューション（ダウンストリーム）特有の変更を最小限に抑えた状態で出荷する ディストリビューションのQAは最小限で、アップストリームによる

i+j=k の条件を x の指数にすることで、xi と xj を掛けたときに xi+j と足し算ができて、同類項が足されて畳み込みになるというわけですね。 多点評価と多項式補間 グラフ上で、1 点を通る 0 次多項式、2 点を通る 1 次多項式、3 点を通る 2 次多項式、… は一意に定まりますね。 fC​(x) は ∣A∣+∣B∣−2 次多項式なので、∣A∣+∣B∣−1 個の点でのfC​(x) の値が分かれば fC​(x) が分かるということになります。 N=∣A∣+∣B∣−1 と置きます。 N 個の点 ζN0​,ζN1​,…,ζNN−1​ を選び、fC​(ζN0​),fC​(ζN1​),…,fC​(ζNN−1​) を求めて C を復元することを考えます。これが畳み込みを高速にする秘訣です。 fA​(x)×fB​(x)=fC​(x) であることを思い出すと、fA​(ζN0​),fA​(ζ