うしろのこの本ください

なんでもかきます

vite + preactで理解するviteの依存管理

やった github.com 本当はviteで作る超速モノレポ環境!!をやりたかったが、やっていくうちに一番大事なところが微妙になったので調査の知見を残すことにした(なった) viteとは github.com そもそもviteがなにかというと、今までバンドル作ってそれをwatc…

Vue 3 + vue-router-nextを動かす

Vue 3のbeta版がリリースされて、あわせて周辺ツールがalphaからbetaへ作業中とのことだったのでvue-router動くかなと思ってやってみた。 github.com github.com 以下素振りりぽじとり github.com プロジェクトのセットアップ 必要なものをyarn addする。 ya…

font-awesomeをtree shakingする

メモ Nuxtのpluginsでfont-awesome(pro)を読み込んでいたが、脳死で全部importしていてくそでかall.jsが鎮座し虚無だった。 不要なフォントをtree shakingするようにした。 befor import '@fortawesome/fontawesome-pro/js/all' after import { dom, library…

Vueコンポーネントのmethodsだけテストする

VueはReactと違いコンポーネントからロジックを剥がそうとするモチベーションがあまり起きない作りだなーと感じている。SFCファイルに全部閉じ込めてしまった方が気持ち良い。しかしテストをmethodsやcomputedの入出力に対して行いたいものの、外出ししよう…

lernaコマンドの標準出力が微妙な時はstreamオプションをつける

TL;DR タイトル lernaはモノレポ管理下にあるpackage.jsonのコマンドを同時に実行することができる。 lerna run --scope s-* lint とするとpackage.jsonのnameがs-で始まるすべてのワークスペースでnpm run lintが実行される。(s-はオレオレパッケージのプレ…

あけおめ

12月に一回もブログ更新しなかったんですがQiitaに2本アドベントカレンダーかいてました。 Nuxt.jsで権限管理 - Qiita Composition APIってなんだ - Qiita 去年はミリシタへの課金額振り返ったりロードマップのやつ書いたりしてましたが、どちらもそれほど…

lerna link convertを理解する

最近案件でモノレポ化が盛んになっていて、自分はフロントエンド周りを少しずつ進めています。 構成はlerna + yarn workspaceの基本的なものですが社内ライブラリをパブリッシュしない方向で進めることになり、モノレポ内ですべて完結させる方針です。 で、…

Nuxtのpwa-moduleでプッシュ通知令和版

直近プッシュ通知の実装が必要になったためハマったところ中心に結果をメモる。 受け取り側 pwa-moduleはOneSignalをサポートしているため、Nuxtでプッシュ通知をやりたい場合これを使うのが一番簡単。 pwa.nuxtjs.org とりあえずpwa moduleとone signal mod…

NuxtとComposition APIとtsxで素振り

した github.com setupとtsxを紐づけるため別途プラグインが必要だが、普通にかける。 以下の流れで環境を作れる。 プロジェクト生成 npx create-nuxt-app 必要なモジュールのインストール yarn add @nuxt/typescript-runtime @vue/composition-api yarn add…

ミリオンのワンナイトクルーズはガシャと比べてコスパが良いのか確認する

クルーズのステートプランがミリシタのガシャ天井より安いと話題なので、ガシャと比べてどれくらいお得なのかをざっくり調べてみる。 ガシャは狙いのSSRが出るまで引くものとすると、"好きなSSRが出る期待値"とクルーズの値段を比べてクルーズの方が下回って…

NuxtMeetUpに登壇してきました

これに株式会社ROXX枠でLTしてきました。Composition APIについて、Nuxtと合わせて素振りした感想みたいな感じ。 nuxt-meetup.connpass.com スライド slides.com 初LTの割にはうまくやれたかなと思います。poaroファンとしてアナ尻遵守を心がけましたが15秒…

Svelte3のストアを触ってみる

自分が書いたタイミングがv3リリース後すぐだったので今のSvelteと差異があるかも。 svelte.dev つくったやつリポジトリ github.com つくったやつ ushironoko-svelte-sample.netlify.com つくったってほどでもないけど一応netlifyに投げた。 消えるフレーム…

ミリシタAPI Princess の型定義かいた

書いた。 github.com 別にDefinitelyTypedとかにはあげてないしパッケージ化もしてないので使うときはクローンするか、index.d.tsをコピペでよろしく。 ドキュメントの型を型定義ファイルに落としただけ。 api.matsurihi.me でれぽとかはやってなくて、あく…

Role-Based Access Control (RBAC) をVue.jsで表現する

元ネタ auth0.com 最近仕事で権限ごとに表示できるコンポーネントを制御する必要がでてきて、さてどうするかというタイミングでチームメンバーがRBACのことを教えてくれた。 Roleは1つ以上の権限を持ち、権限はコンポーネントの表示を制御する。まあ難しい考…

Flutter始めたので導入周りメモ

Flutterがfor webを発表し名実ともにマルチプラットフォーム対応になったのでいっちょやるかと思い立ち、環境構築した。環境はmacOS64bit。 flutter.dev FlutterはDartという言語を用いてマルチプラットフォームなGUIアプリケーションを作ることができるGoog…

auto chessやろう

面白いので皆やりましょう Dota2のおまけみたいな感じなのでDota2入れればできます。Dota2は無料なのでauto chessも無料です。 store.steampowered.com mobile版も出るらしいのでそれまでに触っておくと流行にいい感じに乗れます。 確実に流行ります。ゲーム…

令和最初の○○

令和最初の 聴いたラジオ 鷲崎健のヨルナイト×ヨルナイト www.joqr.co.jp 書いたコード github.com born-the-reiwa.netlify.com 開いたウェブサイト Twitter twitter.com 投稿したツイート 令和最初の静的Webサイトですよろしくお願いしますhttps://t.co/mZc…

Vue.jsで全然使ってない機能とかが割とあるって思って

吾輩はなんか使ってない/使う機会がないみたいなVue.jsの機能がある。理由はまだない。 最初に言っちゃうとグローバルで使うようなのは殆ど書いてない。Vue.useくらい? filter {{ message | capitalize }} <div v-bind:id="rawId | formatId"></div> filters: { capitalize: function (value) { if…

暫くTOKYO

です。インターン行ってきます。 フロントエンドのおしごとします。楽しみです。 東京おうち高いです。暮らすだけでせいいっぱいです。友達がいてよかったと思います。 自宅のPC達ともしばらくはお別れです。それが一番寂しいです。こんなに愛しているのに。…

最近のミリシタカード事情、スコアタとか

別に研究してるわけでもないので自分が感じていることだけ。間違ってたらTwitterのリプかなんかで言ってくれれば直すし、GitHubでプルリクもOK。 github.com それから旧フェス限(紬、歌織)と特化限定を比べた時の差の情報も欲しい。わかる人教えて。 スキ…

Vue 3.0で入る(予定の)Class APIについてのRFCを読んだ

github.com Evanが先日VueのRFCに投げたやつ。VueのコンポーネントがES6 Class Syntaxで記述できるよう拡張するというもの。 ブラウザ(CDN版) class App extends Vue { // options declared via static properties (stage 3) // more details below static…

ミリシタ担当アイドルシートをウェブでつくれるやつつくった

million-tantou-gen.netlify.com はい スコア計算機に比べて超省エネだけどまあね。 スマホで一々画像読み込んで配置してってやるよりマシだと思う。Canvasで色々やってるからスマホ対応が面倒でやってない。 ただPWAモジュール入れてるからオフラインでも動…

ミリシタのスコア計算をする簡易ツールつくった

つくった millionlive-simple-score-calc.me みりしたつーるさんのAPIと姫のAPIで成り立ってる。リポジトリはこれ。 github.com 使い方は楽曲選んで、5枚カード選んで、任意の総アピール値を入れて、計算を押す。そうすると1計算で1万回分のライブシミュ…

Element UIのel-tableでslot-scopeを使っていた人はVue2.6.xにあげるのは待った方がいいかも

先日Vue2.6.0がリリースされてv-slotが追加されたので、ついでにNuxtと一緒にバージョンアップしようとしたら既存コンポーネントが動かなくなった。 Element UIのel-tableはel-table-column内にslotを差し込むことで任意の要素を表示できる。この部分で今ま…

ミリシタライブシミュレーションAPI 「API for TD Score Calculation 」をNuxt.jsで使う

多分みんな使ってる編成とか出してくれるツールの計算部分だけAPIに切り出して公開してくれたもの。まだ試験運用らしい。 api.megmeg.work ツールの方 megmeg.work んで作った奴 github.com 使い方というか、GETで投げる時のパラメータが必要でそれの情報源…

React+TypeScriptの勉強を兼ねてポートフォリオつくった

つくった ushironoko2.me TSのサポートのお陰でほぼ実行時エラーに悩まされることはなくなったけど、Material-UIのコンポーネントの型とかで結構苦労した。 今思えば新しくReactとTypeScriptとMaterial-UIとJSXを同時に始めるってのはカロリー高い。とくに+…

ミリシタのラウンジ名でTwitterエゴサしてDiscordに飛ばす奴

最近ミリシタ関連のものしか作ってねーな github.com 前のocrの奴の流用。基盤自体が出来てるから検索ワードを変えてフィルタリング処理増やしただけ。 あとついでに全部TypeScriptで書き直した。VSCodeとの相性は評判通り物凄い良い。自製ライブラリもない…

ミリシタライブレポートから実績情報をOCRで読み取るやつ

お試しでつくった github.com 簡単な実装しかしてないけど、一応動く。技術スタックは以下 Elasticsearch Logstash Tesseract.js 詳しくはリポジトリに書いてある。Elasticsearch に Logstash が取得したライブレポートの Twitter 情報を送ってため込む。 Er…

ミリシタチームアナライザー使用感メモ

作ってるツールで実装に迷ったら、その時点でベータ版にしてある程度使ってみると良い。というわけでミリシタイベントRtF中に今作りかけのチーム編成最適化ツールを使ってみた。 その使用感メモ。リポジトリはこれ github.com 欲しくなった機能 カード能力の…

Twitterに投稿されたミリシタのプレイリザルトからGCPのVision API OCRで情報を積む試み

っていうのができそう。画像はテキストでTwitterスクレイピングした奴を Cloud Storage にため込む。んで Storage のアップロードトリガーで Cloud Functions を蹴って、Functions の内部で Vision API を呼び出すって感じ。スクレイピングも Functions で書…