Blog

ソフトウェアや読んだ本の話

2024/9/15

Node.jsでdev serverを複数同時に動かすためのCLIツールを書いた

Node.jsでdev serverを複数同時に動かすためのmatomeというCLIツールを書いた。 skaffoldを使っていて、複数のログが色付けされて1つの標準出力に吐かれるのが便利だなと思ったのがきっかけ。 ハイフン区切りで実行したいコマンドを指定すれば、並行にプロセスが動かした上でそれぞれの標準出力をまとめてくれる。 プロセス毎に色が割り振られるので視認性も良い。 npx matome -- wrangler dev -- next start やっていることは子プロセスを立ち上げて標準出力をパイプで受け取って出力しているだけだが、そこそこ便利なツールを作れたように思う。 主にM

TypeScript

2024/8/13

ブログにA/Bテストを導入した

最近Misreading ChatのA/Bテストの回を聞いて興味を持ったので、このブログにA/Bテストを実装してみた。 Misreading Chatで取り上げられたGoogleの論文では、 大規模な組織でA/Bテストを実施する方法について論じていたが、個人のブログ程度であればシンプルな方法で十分だろう。 ということで、TypeScript + React + Google AnalyticsでA/Bテストを実施した。 実装の概要は以下の通り。 0以上1000未満の整数をクッキーにセットする (以下、ID)。 IDの数字に基づいて、A/Bテストの状況を管理するオブジェクト(以下、実験オブジェ

TypeScript

機械学習

2024/6/4

電力価格の需給曲線を収集して眺める

久しぶりにJEPXのホームページを眺めていると、スポット市場価格の需給曲線が新たに公表され始めたことに気がついた。 面白そうだったので軽くデータを収集してみて、需給曲線を時系列横断的に眺めてみた。 https://www.jepx.jp/electricpower/market-data/spot/bid_curves.html 2023年6月頭から2024年5月末までの48コマのシステムプライスの需給曲線から、ランダムに2000個選んでグラフにしてみた。 一般的には横軸に入札量、縦軸に価格を取ることが多いと思うが、今回は分析の都合上逆になっている。 画像を見た直感的な感想は以下の通り。

JEPX

機械学習

2024/4/8

package.jsonのstyleフィールド

今日とあるパッケージのソースコードを読んでいたらstyleというフィールドがあるpackage.jsonを見かけた。 少なくともnodeのドキュメントとnpmのドキュメントには記載がなくて、 何の仕様に基づくフィールドなのかよくわからない。 なにか特定のパッケージの拡張なのかなと思って調べてみるとこの記事が見つかった。 記事を読む感じだとpostcss関係の拡張のようだ。 https://jaketrent.com/post/package-json-style-attribute/ This plugin can consume local files, node modules or w

2024/2/1

Cloudflare PagesにCLI経由でアップロードする

Cloudflare PagesはデフォルトでCI機能が内蔵されているが、1レポジトリに対して復数のページにデプロイするような用途には対応していない。 モノレポ構成などで復数のpageに対してデプロイ処理をしたい場合にはwranglerというCLIツールを使って自前でCIを組むことができる。 以下の例はyarnを使ってCLI経由でデプロイしてみた作業記録。 wranglerをインストール $ yarn install -D wrangler APIトークンを取得 Cloudflareのprofileページからトークンを取得する。 取得したAPIトークンを環境変数にセットする。 wrangle

2024/2/1

Cloudflare Workersからのリクエストだけ308が返ってredirect loopに陥る

2日溶かした。 k8sのingress-controllerの下でサーバーを動かしていたところ、Cloudflare Workers経由のhttpsリクエストに対してだけ308を返す状況に陥った。 手元からcurlでhttpsリクエストを送るとちゃんと200が返ってきていて、何故かCloudflare Workersからfetchするときだけredirect loopに陥る。 原因 HTTPSを送っているつもりがHTTPでリクエストを送っていた。 https://で始まるURLを指定しても、CloudflareのEncryption Modeの設定次第ではhttpで送られる。 今回発生した

2023/12/25

honoのテストケースで環境変数を利用する

honoでCloudFlare Workers上で動作する認証機構を書き始めた。 honoのセットアップは非常に簡単でものの数分でwranglerの開発環境が手に入った。 一方でE2Eのテストケースを書こうとした際にテスト用の環境変数を渡す方法がわからず戸惑ったのでメモ。 結論 app.fetch()の第2引数や、app.request()の第3引数に環境変数を渡すことができる。 以下app.request()を利用した場合の例。 const env: EnvironmentVariables = { KEY1: "VALUE1", KEY2: "VALUE2", };const app

javascript

2023/11/30

terraform moduleを勉強してスケジュールされたECSタスクを簡単に作れるようにする

株の自動取引関連の話。 各種取引のバッチ処理のためによくECS + Event Schedulerの構成を利用している。 Fargateの上でECSを動かすと高くなるイメージだが、短時間の処理+低スペックのインスタンスを使えば殆ど気にならない。 短時間のバッチであればlambdaのほうが良いという意見もあるかもしれないが、 lambdaは多重起動の問題と処理時間が最長15分という制約があるため株取引のバッチ処理としてはやや使いづらい。 ただterraformでECSとEvent Schedulerを組み合わせたタスクを定義しようとするとaws_ecs_task_definitionとaws_s

terraform

2023/11/29

PythonからGoogle Sheetsを操作する

株の評価額を自動で管理したかったのでpythonからGoogle Sheetsを操作する方法を調べた。 調べてみると実はあまり事例がなかったのと、Pythonでのチュートリアル以上の良いドキュメントが見当たらなかった。 そのため施行錯誤しつつ以下の一次資料を参考に実装した。 pythonのクイックスタート Google Spreadsheet API コンセプト 操作する対象のスプレッドシートのIDは既知。 1セルずつ取得・更新できればいい = バッチでの更新は対応しない。 左上からのオフセットで各セルにアクセスしたい。 自動化前提なのでサービスアカウントで認証処理はする。 前準備 セ

python

2023/11/12

クロス取引を防止するための入札前処理

先日構築した自動取引プログラムを動かしていたら、少量だが意図せずクロス取引が発生して証券会社から注意を受けた。 そもそもクロス取引というものを正しく理解できていなかったので調査した。 https://www.jpx.co.jp/regulation/preventing/manipulation/index.html#heading_17 JPXのサイトに詳しく記載があった。 クロス取引の禁止自体は金融商品取引法の159条に記載があるようだ。 売買を活発に見せる対等売買、 売り買い不均衡な対等売買あたりがクロス取引関連の説明になっている。 クロス取引を行うことによって売買高を増加させたり株価を

python

自動取引

2023/10/21

Ryeを試してみた

株の取引システムのバグを修正したら、依存関係が壊れてより一層壊れた。 以前poetryとpytorchの噛み合わせが悪く導入を断念して以降、requirements.txtを使っていたが改善しないと辛さがありそうだ。 ということで職場で噂になっていたryeをインストールして使ってみることにした。 https://rye-up.com/guide/ 導入自体は非常に簡単で、公式サイトに記載されているcurlで一発で入る。 最低限の使い方は以下の通り。 初期化 $ rye init "ディレクトリ名" pythonのバージョンの固定 $ rye pin 3.12.0 依存関係の追加 $ rye

python

2023/10/12

書評「オンスクリーン タイポグラフィ 事例と論説から考えるウェブの文字表現」

フロントエンド開発者にとってテキストのスタイリングは日常茶飯事である一方で、「良いテキストのデザインとは何か」について教えてくれる教材は多くない。 自分も正直どのようなCSSを書くのがデザイン的に見栄えがするのか、複数のデバイス間で一貫性のある見た目になるのか、 という点についてのベストプラクティスがわからず、趣味で作るWebサービスではやっつけで済ませることが多かった。 テキストのスタイリングやタイポグラフィに関する知識が無くてもWebサービスを作ることは可能だが、やっぱり見た目がしょっぱくなる。 これらの知識を学べる何か良い本が無いか、と本屋をさまよっていたら偶然「オンスクリーンタイポグラ

書評

フロントエンド

2023/10/10

AWS Solution Architect Professionalに合格した

以前AWS Developer Associateに合格した際、特典として次回の受験料半額チケットがついてきた。 まんまとAWSの策略に嵌っている気もするが、せっかくなのでSolution Architect Professional (SOP) を受けてきた。 大体2週間ほど勉強しての受験とギリギリのスケジュールだが、結果は780/1000で何とか合格できた。 勉強法  Developer Associateを受けたときには日本語のUdemyの講座があったが、2023年9月現在においてはSOPの日本語講座は存在していないようだった。 仕方ないのでこの本 を購入して一周ほど問題に取り組んだが明

AWS

資格

2023/10/1

最近見て良かったUI(baigieのランディングページのナビゲーション)

最近流れ着いたbaigieのランディングページのスマホ用ハンバーガーメニューがいい感じだった。 スクショは勝手に貼っているので怒られたら消す。 ハンバーガーメニューのUI自体は比較的よくあるものだが、結構独特な場所に配置されている。 位置が右下にあるので右手で持ったときに親指で押しやすい。 アニメーションもヌルヌルしていて操作体験が良い。 ただこのレイアウト、ユーザーが右手で操作しているか左手で操作しているかによって体験が違うので、右と左どちらにボタンを配置するかは悩ましいものがある。 Googleで1分ほど調査したところ、一番上に出てくるサイトがいい感じの調査結果を載せていた。 年代によっ

自作ブログ

フロントエンド

React

Typescript

2023/9/19

HTTP/1.1のHeaderの仕様とNginxにおけるパーサーの実装

前回に引き続きHTTP/1.1の仕様とNginxの実装を読んでいく。 今回はHeaderのパース周りについて。RFC9110と9112に関連する記載がある。 https://datatracker.ietf.org/doc/html/rfc9110 https://datatracker.ietf.org/doc/html/rfc9112 Headerの仕様 RFC9110ではHeader, Trailerで使われるName-Value型の形式をFieldと呼んでいる。 5章がまるまるFieldの説明になっていて、Field Name, Field Valueで利用可能な文字や細則について

HTTP

Nginx

自作サーバー

2023/9/10

HTTP/1.1のRequestLineの仕様とNginxにおけるパーサーの実装

サーバーを自作するためにHTTPの仕様書とNginxの実装を確認した。 まずはhttp仕様を確認する。 https://datatracker.ietf.org/doc/html/rfc9110 https://datatracker.ietf.org/doc/html/rfc9112 HTTPの仕様はこれまで何回か更新されているようで、2023/09/10時点ではRFC9110から始まる一連のRFCが最新の仕様のようだ。 2022年に大きな再編があったようで、各RFC間の関係はこのブログで取り上げられている。今回はHTTP/1.1のrequest-lineの仕様を確認したいだけなのでおそ

HTTP

Nginx

自作サーバー

2023/9/6

ブログのコードブロックをいい感じにする(後編)

前編の続き。 自作rehypeプラグインを作成して、ハイライトされたコードブロックを好きなタグで覆うことができるようになった。 あとはこのコードブロックに動きを付けていく。 可能であればマークダウンを直接Reactに変換して動きをつける、みたいなことが出来れば楽だったが挫折した。 そこで今回は生成したHTMLをラップするReactコンポーネントを作成して、addEventListenerなどを駆使して動きを付けていく。作成するコンポーネントは以下のような感じのもの。 export const Article: React.FC<ArticleProps> = ({ dangerHtm

自作ブログ

フロントエンド

React

Typescript

2023/9/3

ブログのコードブロックをいい感じにする(前編)

今使っているコードブロックが色々と見にくい。 コントラストが低くテキストを読みにくいし、よくあるコピー機能が無くてコピーしにくい。 色々とライブラリを漁ってみたがしっくりくるものが無かったので自作することにした。 Before After 実装方針 自分が考えるいい感じのコードブロックとは以下のようなものだ。 ハイライトがしっかりしていてテキストが読みやすい。 何の言語か明確に表記されている。 行番号が表示されている。 コピペが簡単。 rehypeの枠組みの中で使える。 (可能であれば)Reactで実装できる。 これらを踏まえて調査した結果 + 簡単な実験の結果以下のような方針で実装し

自作ブログ

フロントエンド

React

Typescript

2023/8/27

ブログにtextlintを導入した

記事を書く際に細かい誤字脱字や表記のチェックなどに時間を取られて、文章を書くための心理的なハードルが高まっている。 もっと気楽に文章を書けるようにするためtextlintを使って、細かい確認作業を自動化することにした。 https://textlint.github.io/ 必要なモジュールの追加 まずは必要なライブラリやプラグインを追加する。textlintはプラグイン形式のツールで、 有志が作成した追加のルールを導入できる。 日本語用のプラグインをまとめているコミュニティを見つけたので、ここに記載された表を参考に何個かプラグインを追加する。 https://github.com/textl

自作ブログ

2023/8/27

自作HTTPサーバーの動作モードをEdgeTriggerにした

自作サーバーにここで調査した内容を組み込もうと一週間作業していたが、 諸々の罠に嵌ってやっと動くようになった。 以下嵌ったポイントに関するメモ。 https://tori29.jp/blog/20230816_edge_trigger AcceptはEAGAINを返すまで繰り返す必要がある listener用のsocketをepollに登録しておくことで、 入力があった瞬間にacceptが可能になる。 この動作がLevelTriggerでは正常に動いていたのに、EdgeTriggerにした途端低い確立で入力を見逃すという事象が発生するようになった。 ログとにらめっこしつつ、GPT4に色々教えて

Nginx

自作サーバー

Rust

2023/8/15

なぜEdgeTriggerモードのときはNonBlockingIOを使うべきか

自作サーバーでIOをEPOLLで多重化しようとしていて、 LevelTriggerとEdgeTriggerどちらを使うべきか悩んでいる。 そもそもそれぞれのメリット、デメリットもよく理解できていない状態だが、 それ以上にepoll(7)に記載されている。 「EdgeTriggerを使うならNonBlockingなファイルディスクリプタを使いなさい」という説明がなかなか理解できなかった。 An application that employs the EPOLLET flag should use nonblocking file descriptors to avoid having a b

Nginx

自作サーバー

2023/8/15

RustでEvent駆動型のサーバーを作っている

Nginxを業務で少し触れたところ微塵も理解できなかったので、自分で作ってみようと思い立った。 socketをbindしてacceptしてread-writeみたいな初歩の初歩は理解しているものの、 イベント駆動型って何?、ノンブロッキングってどこをどうノンブロッキングにしているの?、みたいな踏み込んだ話題を全然理解できていない。 理解していないものを使うのもスキルの1つだと思うが、知っいて困ることは無いよねということで作り始めた。 https://github.com/toritoritori29/rashin あとは単純にRustの習熟度を上げたいという気持ちがあり、先週くらいからチマチマ

Rust

Nginx

自作サーバー

2023/8/6

AWS Developer Associateに合格した

仕事でAWSに触る機会が増えていてしキャッチアップする必要性を感じたため、AWS Certified Developer - Associateを受けてきた。 諸事上で最後の最後までやる気がでなくて、結局最後3日で知識を詰め込んだが結果は849/1000と比較的いい感じの結果を取ることができた。 勉強法  AWSの資格試験は日本語での勉強法がしっかりと確立されていない感じがあって、どう勉強すればいいか悩んだ。 結局使った資料は以下の2つだけだったが、合格するためであればこれで十分だったように思う。 Udemyの講座 Blackbelt(AWSが開催するセミナーの過去資料。サービス毎の解説がい

AWS

資格

2023/7/24

python-json-loggerを導入した

作っている株の自動取引基盤でログを分析するにあたって、json形式のログを扱えるようにしたくなった。 特にCloudWatchInsightでログを漁るときに、ログにタグのようなものを付けられると使い勝手が良さそうだということで環境を整備した。 1からloggingライブラリのFormatterを自作するのは面倒くさそうなので、省ける手間はライブラリを使って可能な限り省きたい。 いい感じのpython-json-loggerというライブラリが見つかったのでこれを使った。 python-json-logger loggingのFormatterとして提供されているので、Handlerに登録すれば

機械学習

python

自動取引

2023/7/19

ボンフェローニ補正付きコルモゴロフ・スミルノフ検定

予測で使っているデータに問題が無いことを確認するためにボンフェローニ補正したコルモゴロフ・スミルノフ(KS)検定で特徴量の異常を検知する。 ボンフェローニ補正についてはwikipediaが詳しかったので、これを参考に実装した。 KS検定はscipyに実装があるので楽に実装できた。 ボンフェローニ補正自体はそんなに難しい概念ではなくて、複数回検定すると偶然棄却されてしまう可能性が上がるので、 全体で行う検定の回数に応じて、各検定の有意水準を割ることで補正を加えるという話のようだ。 def ks_test( df1: pd.DataFrame, df2: pd.DataFrame, sig

機械学習

python

自動取引

2023/7/15

Concept Driftに関するサーベイ

株を自動取引するにあたって、予測に使っているデータに問題が無いかどうかを監視したい。 市況の変化に伴って一時データに変化が生じる可能性もあるし、前処理の何らかのバグによって生成された特徴量がおかしくなる可能性も考えられる。 Concept Driftの定義と分類 この論文に基づいてざっくりと定義を確認した。 が論文内で言及されているように、人によって各概念の呼び方にブレがあるので 文脈に応じて適切に応じて相手が何を行っているのか察するのが良さそう。 このライブラリみたいにドキュメント内に定義が書かれていると親切だなとは思う。 論文内では説明変数Xと目的変数Yの同時分布が時刻によって異なること、

機械学習

2023/7/15

上にスクロールしたときにだけ表示されるちょっといい感じのボタンを作る

ブログの見た目をリッチにしようと思い立って、上スクロールしたときにだけ表示されるボタンを作った。 ざっくりとした要件はこんな感じ。 下にスクロールしたときには表示されない 上にスクロールしたときにだけ表示される On, Off時にはいい感じにアニメーションする 負荷やちらつきは最小限に 環境としてReact+Tailwindで動作するものを作る。ボタン一個だけどしっかりしようとしたものを作るのは結構大変。 ベースになるコンポーネント 普通にReactでコンポーネントを作成する。アイコンにはreact-iconsを使っている。styles.popupとstyles.dismissはアニメー

React

フロントエンド

2023/7/6

自動取引システムをどうやってテストすればいいか

自動取引システムをどうやってテストしけばいいかの個人的整理メモ。 基本的に日時での取引戦略を前提にしているの+あくまで実装前の妄想なのでご注意ください。 なぜテストしたいか 自動取引システムが止まることで機械損が発生してしまう ロジックが間違っているまま放置していると誤った発注を出して実損を出してしまう 修正時の心理的安全性を高めたい 何が難しいか テストのために割と複雑なデータを準備する必要があって面倒 学習モデルが正しく動いているかどうかを出力された取引戦略から推測するのは殆ど不可能 簡単にリサーチ stock trading testingとかstock traiding con

自動取引

2023/7/2

NextJS App RouterでSitemap, Robot.txt, RSSを配置する

このブログにsitemap, robots.txt, RSSなどを配置したいが、旧来のPagesRouterとAppRouterのドキュメントやブログが混ざっていてなかなかまとまった情報が無い。 もろもろ調べたところ以下の通りに対応するのが一番簡単そうだった。 sitemap: NextJS組み込みのsitemap関数を利用 robots.txt: NextJS組み込みのrobot関数を利用 RSS: route.tsを使って自前でレンダリング SitemapとRobot.txt この2つに関してはNextJSに予め組み込まれた関数が存在しているので、それを使うのが良さそう。 サイトマップ

フロントエンド

2023/7/1

立花証券のAPIを触ってみた雑感

株の取引を自動化するためにAPI経由で取引できる証券会社を探したところ、立花証券という会社がAPIを提供していることを知ったので試してみた。 TL; DR; (おそらく唯一の)簡便に使える取引API ドキュメント+サンプルコードがあるので開発に困ることは無さそう セキュリティ的に不安が残る仕様が多い 口座開設 立花証券には「立花証券ストックハウス」と「立花証券e支店」の二種類のネット証券子会社あって、APIでの取引ができるのはe支店の方。 誤ってストックハウスで作成してしまうと、APIが使えないどころか一度口座を解約しないとe支店側に口座を作れない。 手続きは書面で行う必要があって開設まで

自動取引

2023/6/30

はてなブログから自作ブログシステムに移行した

仕事でフロントエンド周りに関わるようになったので、気軽にフロントエンド周りの開発を試せる環境が欲しくなった。 はてなブログのWeb上で文章書くのもしんどかったので、ブログ+その他実験上としてWebサイトを立ち上げた。 あとはいざというときにポートフォリと的なものが嬉しいという気持ちもあった。 使った技術 維持費をかけたくなかったのでSSGで静的ファイルホストを前提にしてサイトを構築した。当初はGatsbyの採用を考えてたが学習コストが高いのとNextJSでも静的サイトの構築はできるので結局NextJSを採用した。 画面構築: NextJS CSS周り: tailwind + CSS Modu

フロントエンド

React

2021/12/18

Truffleを使ったSolidity開発環境の構築 + FaucetのExampleの作成

前回マスタリングイーサリアムを読んでイーサリアム周辺の話をざっくり勉強したので今度は実践。 truffleとganacheを導入してローカルでsolidityをコンパイル+実行できる環境を整える。 全体の流れとしては、シンプルなFaucetコントラクトを作成→ローカルのシミュレーターにデプロイ→javascriptからweb3jsを使ってABIを叩く。 環境のセットアップ 何はともあれganacheをインストールする。ganacheはローカルのブロックチェーンシミュレーターで、作ったコントラクトを気軽にデプロイして試すことができる。 ganache-cliというcli版も存在するのでお好きな方

2021/4/30

numpyのchoice関数を読む

javascriptは標準で重み付きのchoice関数が無いのでライブラリを探すか自分で作る必要がある。折角なのでpythonの勉強がてらnumpyのchoice関数を読んだ。 該当箇所のソースコードを引用しつつ説明を加えていく。 概観 ざっくり2つの引数(replace, p)によって挙動が変わっている。replaceは復元抽出か非復元抽出かを表していてTrueなら復元抽出になる。 pは各要素の選択確率を表していて指定されなかった場合には等確率で選択される。 「replaceがTrueかFalseか」×「pが指定されたかされてないか」の4パターンで異なるロジックが用意されていた。 復元抽出の

2021/4/29

GAEのフレキシブル環境でpuppeteerを使う

prill のプリント作成機能のコア部分にはpuppeteerを使っている。GAEでpuppeteerを動かしたくて試行錯誤した結果、フレキシブル環境でカスタムコンテナを使うことで動作に成功したのでそのときのメモ。後から調べたところによると適切に設定すればスタンダード環境でもpuppeteer動かせそう。スタンダード環境のほうがお手軽だし今から試す人はそっちを使ったほうが良いかもしれない。 TL; DR; GAEのフレキシブル環境ではカスタムコンテナを動かせる Chromeを実行可能なカスタムコンテナを作れば好きにpuppeteerを動かせる フレキシブル環境個人で使うには高いからスタンダー

2021/1/2

Javascriptでキーボードショートカットを実装する

anntにキーボードショートカットを実装したいと思って調べてみても、検索に引っかかるのはライブラリの使い方ばっかりであまり具体的な仕組みが見つからない。 あまりブラックボックスなライブラリを使いたくないという気持ちと、この程度簡単に実装できるだろというイキリで更に調査を進めるとshortcut.jsという非常にシンプルなライブラリが見つかった。 コンパクトにまとまっているので、内容を読み解いた上で使いやすいようにクラスとして実装し直した。 注意点としてshortcut.jsはブラウザのバグやIEにも対応しているが、シンプルさを優先して今回の実装では省いている。 前提知識 キーボードに限らずブラ

2020/12/9

個人開発サービスの記事周りをWordpressに切り出した。

タイトルの日本語が怪しい気がします。コツコツ開発しているanntの話です。 anntはFirebaseで動いていて基本的には静的なページで動いていたので、チュートリアルなどの記事を書くときも直接htmlタグ付けしていくという苦行をしていました。 最近さすがに当時の自分は何を考えてこんなの作ったんだ?と思い始めたので記事や頻繁に編集する部分をWordpressに切り出しました。 利用した技術 とにかく楽に環境を整えたかったのでWordpressはGCPのMarket Placeで立てようと決めていました。 GCPの Market PlaceでWordpressを立てるのは本当に楽でクリックしてい

2020/9/23

多角形の内外判定(javascriptでの実装を添えて)

アノテーションツールでセグメンテーション用に多角形での範囲選択を実装しようとしている。 四角形の場合には簡単に内外判定ができるが、多角形だとそう簡単にはいかない。 今回実装にあたって多角形の内外判定を勉強した。 TL;DR Winding Number Algorithmは割と楽に実装できる 実装するときは角度の符号の計算を忘れない 参考にした資料 理論だったり詳しい実装のポイントは以下の資料を見てください。 この資料を見て理解できればこの記事は読まなくて大丈夫です。 www.nttpc.co.jp Winding Number Algorighmとは 多角形の角2つと対象となる点が

2020/9/6

anntを大きくリファクタした

前公開したanntをちまちま改修してたのでリリース 改修前 改修後 主な改修内容は Google Drive対応 内部のリファクタリング デザインの変更 の3点 Google Drive対応 Google DriveはDropboxと違って、階層構造のファイルシステムじゃないので実装が手探りになってしまった。 Google Driveは普段使い慣れているWindowsやMacみたいにパスでファイルやフォルダを指定できない。(フラットファイルシステムというらしい) 各ファイルが親フォルダの情報を持っているので、SQLのSELECT~WHERE文みたいなイメージで指定したフォルダを親とする

2020/8/3

Google Drive APIでファイルをアップロード - Multipart/Related

前回に引き続きGoogleDriveAPIのお話です。 今回はファイルの新規アップロードについてです。 createエンドポイント ファイルを新規にアップロードするにはcreateエンドポイントを使用します。 このエンドポイントが曲者で、アップロード時に3つのアップロードタイプから一つを選んで明示的に指定する必要があります。 media - ファイルのみをアップロード multipart - ファイルとメタデータを同時にアップロード resumable - 複数回のリクエストでファイルとメタデータをアップロード 現実問題としてメタデータ無しでファイルをアップロードしたいという局面は殆ど無い

2020/7/24

Google Drive APIでパスを指定してファイル一覧を取得する

Google DriveAPIで心が折れた 指定したパスのファイルが存在するか知りたいだけだったが、Google Drive Api V3のリファレンスを読んでもあまりファイルパスに関する記述が殆ど見当たらない。 クラウドストレージサービスのリファレンスでそんなことあるかと思って調べた。 stackoverflow.com Try to stop thinking in terms of file paths. Google Drive is a flat filesystem, where "parent" is simply an attribute, a bit like a ta

2020/7/10

vue.js+vue-routerで自作サービスの多言語対応

以前作ったWebサービスの多言語対応を行った。 anntはvue-routerで動くSPAだったが、URLに応じて適切な言語で表示するように改修した。 日本語:https://annt.ai/ja 英語:https://annt.ai/en 多言語対応の方法 初期段階で多言語対応ってそもそもどうやるんだろうと思いながらWeb検索をしていると、だいたいどこのサイトでも以下の3通りがメジャーですよと教えてくれた。 4 Key SEO Tips for Your Multilingual Website in 2020 グローバルドメイン .jpや.frなどの国固有のドメインを購入してドメイン名

2020/7/7

pythonで色を連続的に変化させる方法

色をシームレスに変化させたい。虹色みたいに。ただそれだけ。 と思っても、実は色についてほとんど知識が無いことに気がつく。RGBは分かるが、それを使ってどう変化させればいいかわからない。RGBのRの値だけを変えても色の赤みが薄くなるか濃くなるかだけで、虹色みたいに変化させるのは難しいのではと思った。 色空間 ja.wikipedia.org 困ったときのウィキペディア。世の中には皆がよく知るRGB以外にも色を表現する方法はあるようだ。というかペイントとかでお世話になっていた。 RGBは赤・緑・青の原色を混ぜ合わせることで色を表現する方法だが、HSV色空間は、Hue(色相)、Saturation

2020/6/26

BoundingBoxごと画像を回転・反転・リサイズ

物体検出の前処理だったりデータ水増しを使用とすると、どうしても回転、反転、リサイズなどの処理を行う必要が出てくる。 画像だけであればOpenCV使ったりNumpy使えば、サクっとできるがバウンディングボックスだと若干めんどくさい。(特に回転) ライブラリを作る中で実装したので、それぞれの簡単な実装を紹介する。 前提 BoundingBoxの表現として以下のようなBoxクラスを使う。x、yは画像左上の座標、w, hはBoundingBoxの幅と高さを表している。 画像の読み込みにはopencvを使い(height, width, channel)の形をしたnumpy配列として読み込む。 デフォル

2020/6/21

Dropbox上の画像を直接アノテーションできるサービスを作った。Part 2

前回に引き続きanntというサービスを作った話です。 part.2 では主に技術面の話について書いていきます。 フロントエンドの話 今回始めてvue.jsを使ったのですが本当に便利です。何が便利かってサイトを構成するパーツを分けて実装できるのが本当に楽でした。 anntはvue-routerを使ってSPAとして作成したのですが、思ったよりぬるぬる動いてこれは良いものだとなりました。 実装していく際にも各ページ毎にComponentとして実装していくので、特にファイルが肥大化することもなく読みやすく作れます。勢いで作ったので一部は肥大化してしまいましたが。 これまでjs周りでjquery以上の何

2020/6/20

Dropbox上の画像を直接アノテーションできるサービスを作った。Part 1

個人開発でサービス作りました。宣伝かねて苦労話・モチベーションとか個人開発に興味がある方に向けて公開します。 まずはPart 1ということで、コンセプトだったり動機だったりとメンタル面の話です。(技術の話も少し触れます) 何を作ったの anntというブラウザ上で動作するアノテーションツールです。 特徴としては Dropboxにある画像データを読み込んでアノテーションができる アノテーションですぐに読み込むことができる Dropbox上で動作するので画像を上げればタブレットでも作業できる(予定) という点でvottとかlabelimgとかとは差別化できてるのかなと思います。開発期間は約1ヶ

2020/3/29

過去に計算したDataFrameと内容が同じか高速に判定したい

機械学習の文脈で同じ前処理を実行するたびに数十分取られるのが非常に辛く感じる。 特に同じ入力を入れているのに実行するたびに計算をしなおすのが馬鹿らしく感じる。 かといってDataFrameを丸々キャッシュして、関数呼び出すたびに前回のDataFrameと同じか検証するものアホらしい。 もやもやしつつfeatherとhashでうまいことやれば高速に検証できね?って思ったので頑張ってみた。 コンセプトは以下の通り featherを使ってDataFrameをbytesに変換 高速なハッシュアルゴリズムxxhashを使ってbytesのハッシュ値を計算。 初回はハッシュ値とDataFrameを何かしら

2019/11/9

深層学習+Hough変換で紙の領域検出

kaggleやるよ何て名前をつけておいて1年半くらいkaggleやってませんでした。 その間何やってたかって言うとAI使ったWebサービスを作ろうとして挫折してを繰り返してました。 今のところ何の生産物も無いっていう悲惨な状況なんですけど、しょうもないノウハウ達は手に入れたのでせめてもの手向けとして公開しようかなと思う。 ① 紙の領域検出 画像の中に含まれる領域を検出するメジャーな方法としてはCanny特徴量でエッジ検出+Hough変換で直線の検出っていう組み合わせがメジャーだと思います。 ただCanny特徴量は紙以外の物体が入っていたり紙面に色々描かれていたりすると、余分なエッジまでも検出し

2018/11/5

Docker使って手軽にGCEで機械学習できる環境を整えた

最近、強化学習的なとこに手を出してみたけど手元のMacbook AirじゃメモリやCPU的に厳しいのでクラウドで実行することを検討した。 最初はAmazon EC2借りようかなーと考えていたけれど、Google Compute Engine(GCE) だとプリエンプティブという格安実行モードがあることを知り、GCEで実行することにした。 プリエンプティブモードで実行すると、1日しかインスタンスを実行できない、突然インスタンスが停止するなどのデメリットがある代わりに、通常価格より50%以上安くインスタンスを利用できる。 しかし毎回ファイルを転送してsshで繋いで実行するのは正直面倒くさい。そこで

2018/9/2

機械学習の前処理を効率的にするPreprepっていうライブラリを作った

最近kaggleは放置して機械学習を使った競馬の予想をやってるんですけど、少しパラメータを変えただけのコードを実行するだけなのに、毎回一から前処理をしていると時間がかかりすぎて死ぬという問題が発生していました。 そんな悩みを解決するために、実行するときに前処理をキャッシュしておいて、次に実行するときには以前と変化した部分だけを計算するPreprepというライブラリを作りました。 GitHub - mikebird28/preprep よく何言ってるかわからないと思うので実際に例を見てもらったほうが早い気がします。 import preprep import pandas as pddef fu

2018/6/14

TargetEncodingのスムーシング

はじめてのFeature Engineeringで紹介したTargetEncoding, LikelihoodEncodingはカテゴリ変数の前処理としては非常に強力な手法だが、あるカテゴリに所属するデータの数が少ないと過学習の原因になってしまう可能性がある。 データ数が少ないカテゴリを持つデー[タセットではTargetEncodingのスムージングという手法を提案している。 まず通常のTargetEncoding、LikelihoodEncodingは以下のような式で表現できる。 ここで! \displaystyle n_i](https://chart.apis.google.com/c

2018/5/19

はじめてのFeature Engineering

先日KaggleのAdTracking Competition に参加したが惨敗したため、特訓することにした。 Ad Tracking Competition で4位の人がFeature Engineeringについて非常にまとまった資料を公開していたので、その要約をまとめた。 勉強がてらPythonでサンプルコードを書いたので一緒においておく。 h2o-meetups/Feature Engineering.pdf at master · h2oai/h2o-meetups · GitHub 何故Feature Engineeringが必要なのか 価値のある特徴量を生成し、ノイズの原因となる

2018/5/12

feather - pandasの読み書きを高速化

kaggleに参加して巨大なCSVファイルを読み書きしていると、それだけで数分近くかかってしまうことがある。 そこで紹介されていたfeatherというDataFrame保存用ライブラリを使ってみた。 featherはpandasのDataFrameを高速に保存、ロードするために開発されたApache Arrowのpythonラッパーだ。 Apache Arrow特有のカラム型メモリ管理をすることで、データの読み書きを高速化しているそうだ。 ベースになっているApacheArrowが他言語や他オープンソース(SparkやHadoop)との互換性を重視しているために、feather形式で保存すれば

2018/5/9

Talking Data AdTracking Fraud Detection Challenge

先日開催されたTalking Data AdTracking Fraud Detection Challengeに参加した。 Talking Data AdTracking Fraud Detection Challengeは中国の広告企業TalkingData主催のコンペで、広告クリックのログから不正なクリックを検出するというコンペティションだ。 TalkingData AdTracking Fraud Detection Challenge | Kaggle 初めてのkaggleで最終的な結果は**1012位/3967位、上位26%**だった。最初のコンペティションとしては悪くない結果だと