ブラウニアンセルオートマトン(Brownian Cellular Automata: BCA)のシミュレータを作ってみる。

動作例

www.youtube.com

ソースコード

github.com

以下、非専門の者が書いているため誤り等ある可能性が非常に高いです。詳しくは出典等をご参照ください。

ブラウニアンセルオートマトン(Brownian Cellular Automata: BCA)とは

ブラウニアンセルオートマトンとはブラウン回路をセルオートマトンとして表現したものです。

ブラウン回路

ブラウン回路はノイズやゆらぎといった通常の電気回路では阻害要因となるものを利用する回路を表します。CPUのプロセスルール微細化のような回路の微細化が進むと、ブラウン運動のようなランダム性のあるノイズが無視できないものとなってきます。ブラウン回路ではこういったノイズも回路の動作の一部として利用します。

セルオートマトン

セルオートマトンはセルと変換規則で表す計算モデルです。代表的なものとしてはおなじみライフゲームがあります。

ブラウニアンセルオートマトンの特徴

以下のようなものが挙げられます。

  • ランダム性を表現するために非同期セルオートマトンとなります。実装例では、時間単位で1つの信号にのみ変換規則を適用することで表現しています。
  • 信号の伝達、交差、回転の3規則およびそれらを90n°回転させたものが適用対象となります。

これらを実装し、半加算器回路を構築したもの(出典より引用しました)が動作例で動かしている動画のものとなります。

出典

小林, 聡., 萩谷, 昌., 横森, 貴., 山村, 雅., 木賀, 大., 礒川, 悌., Peper, F., 西田, 泰., 角谷, 良., 本多, 健., & 青野, 真. (2015). 自然計算へのいざない. 近代科学社.

余談

最初XAML Islandsを利用したC++で書こうとしていたのですが、C# onlyで書いた方が楽そうだったので全部C#で書くことに。そしてMVVMガン無視してコードでGUI要素操作しているからC#のプロに怒られそう。

読んだ: 最適化問題入門 錐最適化・整数最適化・ネットワークモデルの組合せによる(Pythonによる問題解決シリーズ 第2巻)

出版社のWebサイト

www.kindaikagaku.co.jp

より詳細な目次(PR記事)

prtimes.jp
公開していい情報なら出版社のWebサイトにも置いてほしいな……

感想

正直なところ私が求めていたものとは違ったな……というのが感想です。ほぼ流し読みだったので誤り等あればご容赦ください。

とにかく数式(と行列)が多い

導入に近い第2章で問題の分類が説明されているのですが、ここで数式上の定義を網羅することを徹底していたため圧倒されました。また、本書の全体を通しての方法がPythonで数式をモデリングし、ソルバで解を求めるという方法である以上、実際の問題を解くサンプルにおいても数式が多用されています。(もっとも、このような最適化問題を解くのであればこの程度の数式と行列は扱えなければならない、ということであれば否定はできません)

解を求める部分がソルバに投げられており、コードはモデリングに終始している

私が求めていたものと違った部分の1つです。本書では

  1. Pythonで問題のモデリング
  2. ソルバで解く

の2段階で問題を解くため、実コードはほぼほぼモデリングのみで解を求める部分は言ってしまえばブラックボックスとなっております。そのため、他言語で実装しなおすということが難しいです。(より正確に言えば、ソルバのInputとして対応している言語でしか実装しなおせないです)何を目的として本書を読むかにもよりますが、人によっては2章以外は流し読みでもよさそうな内容になってしまっています。(私がそうでした)
また、ナップサック問題のようなある種最適化問題以外のコンテキストで出てくる問題もソルバを用いて解を求めるようになっており、その部分についてはソルバを用いない解に慣れている私には冗長な解法となっているように感じました。(そしてナップサック問題アルゴリズムだけ何故かPythonコードではなく擬似コードなんですよね……汎用アルゴリズムとして記載しているからだとは思いますが)

近似解を求める方法は記載されていない

私が求めていたものと違った部分のもう1つです。本文中ではメタ解法として現実的な時間で近似解を求める方法があることは提示されていますが、そこに関してより具体的な方法は提示されていなかったように思います。もしかしたらソルバ実行時のパラメータにあるのかもしれませんが。ヒューリスティックな解法の実装をある種期待していたので、そこは肩透かしな部分でした。

錐最適化の使いどころがいまいちわからなかった

線形最適化の変形問題として扱えられそうなのですが、これの使いどころがいまいちわかりませんでした。実問題例との対応も正直なところ十分とは思えない感じでしたので……

組み合わせどこ……?

問題を組み合わせることが強調されていますが、どこにあるか分かりませんでした。(流し読みだったため読み落とした可能性は否定できません)

読んだ: テキスト処理の要素技術

私が知る分野でもなく、あまり突っ込んだこと書けないのでTwitterで全部書けないかなーと思っていたけど微妙に字数足りなかったのでこっちで。

出版社の紹介ページ

www.kindaikagaku.co.jp

節レベルでの目次はこちらのPR記事に書いてありますね。
prtimes.jp

感想

はじめにでも触れられていますが、実用向けに手法を絞って紹介している(それこそフィルタリングでは単語のマッチで処理もありました)のため、実際に何か構築する際の指針となりそうでした。こういったケースではこうした方がいいということが書かれているのも、右も左もわからない状態では手法を検討しなければいけないけどそもそも手法のメリットデメリットがわからないということに陥るので実用面で助かると思います。

今のところ言語処理をするプログラムの作成予定はなく純粋な興味で購入しましたが、どこから入ればいいかということは何も知らないなりには理解できたので、何か面白いことができないかなと。

YouTubeのレコメンデーションから特定の単語を含むものを除去したい。

つくりたいもの

YouTubeのレコメンデーションから特定の単語を含む動画/配信を除外(とりあえず見えなく)する。

できたもの


戦略

  • トップのレコメンデーションはytd-browse要素配下、動画/配信ページサイドのレコメンデーションはytd-watch-next-secondary-results-renderer要素配下に情報が入っている。
  • これらの要素は必要になるまで生成されない。一度生成されたら、後は表示と非表示を切り替えて処理している模様。
  • 各動画/配信はトップページはytd-rich-item-renderer要素、サイドはytd-compact-video-renderer要素に情報が入っている。
  • 動画/配信名は要素をJS上でouterText属性参照で取れる。チャンネル名とかほかの要素も取れるけどひとまず気にしない。
  • ytd-browse要素、ytd-watch-next-secondary-results-renderer要素はいずれもidがcontentのdiv要素配下にある。

これらを踏まえ、idがcontentの要素を監視し、ytd-browse要素、ytd-watch-next-secondary-results-renderer要素それぞれが存在すれば各配下の動画/配信をフィルタ監視を開始するという処理にしました。
DRYの観点とかちょっと気になるのでもし機能を増やすことがあればリファクタするかも。

なんでこんなものを作ったかの経緯になるのですが、YouTube中心で活動されているとある歌手の方がおりまして、その方の歌に半ば惚れ込んでいるような感じだったのですが、それまで月1回配信があるかどうかという感じだったのがある時期を境に突然ゲーム配信の頻度が増えまして(それこそYouTubeを開いたらだいたいライブ配信中の表示が出てくるくらい)、坊主憎けりゃ袈裟まで憎いの心理で一時期作品まで嫌いに傾いていた時期があったんですね。ただ、先日ふとその方の歌を改めて聴く機会がありまして、やっぱり離れられないと実感してしまったんですね。となればもうこういったことを起こさないように見えないようにしよう、という苦い経験があってものです。

VTuberの歌枠などまとめサイト(あるいはWebアプリ)のデザインを一新した話。

できたもの

Before

After


だいたい音楽プレーヤーでできそうなことは実装した……と思っています。
画面レイアウトはYouTube Musicを参考に。

経緯とか

井の中の蛙大海を知る。


旧デザインのものは2020年1月公開のものから多少の機能増加はあれどほぼ変わっていませんでした。当時からこのようなアプリが存在したかどうかは私のリサーチ不足もあり寡聞にして存じ上げておらず、ひとまず公開を優先する都合もありデザイン無視で公開しておりました。(私がこのようなデザインセンスが皆無というのもありましたが……)
月日は流れ。今ではそれなりの数の類似アプリもあるようで、今回こういった記事がTwitterのTLに流れてきたことからいよいよこれはヤバいぞ、ということで重い腰が上がりました。
ぶっちゃけ似たようなものを先行して作っていたこともあって色々悔しかったのもある。

やったこと

HTMLとCSSのお勉強

rutilicus.hatenablog.com
ちょうど電子書籍版が半額で購入できる時期だったため真っ先に飛びつきました。

関連コードの書き直し

1月にTypeScriptを勉強していたこともあり、旧コードのロジックで使える部分は使いつつTypeScriptでの全面的な書き直しに至りました。コード補完ができる。つよい。
当初はBabelを継続使用してTypeScriptをJavaScriptに変換していたのですが、これだとReactのimportが(参照できないのでコンパイルエラーとなるため)できず、TypeScriptの恩恵フルでを受けられないため途中で基盤をwebpackに変更しました。

改めて関連技術の列挙

フロントエンド

  • TypeScript
  • React
  • webpack
  • HTMLとCSS

バックエンド

興味がある方は是非コードを見ていただければと思います。

読んだ:これだけで基本がしっかり身につく HTML/CSS&Webデザイン1冊目の本

www.shoeisha.co.jp
いろいろ(※)あっていい加減uisetlistのフロント側をモダン化しないとまずいと思ったため読みました。
※:

これを読んだ人の知識レベル

  • 一応HTMLについては理解している。ただし、化石レベル。
  • どのくらい化石かというと、時代が2000年代中盤あたりの個人HP作成時代で止まっている。CSSは一応あったけど、まだ書かない方が主流だった(と思われる)時代。
  • 当時の思い出:箱庭諸島は負荷が高いので禁止、Yahooのリンク集、キッズgoo、とほほのWWW入門(まだ更新が続いているらしい、すごい)、Flash全盛期、KENT WEBとか……

学んだこととか

  • HTMLはもはやコンテンツを書くためにしか書かない。装飾は全部CSSで書く。
  • なんなら画像とかも装飾品はCSSで配置する。
  • 結構pxをサイズに指定している? Androidやっていたときはpx指定ってdpiによって表示大きく変わるからあまり使わない方がよかったと思ったけど。
  • レスポンシブデザインの作り方、表示確認方法

装飾が基本全部CSSで書くというのが印象深いです。HTMLの方の説明なんて全体の4, 5分の1程度だったのではないでしょうか。
画像も地図とかロゴとかのコンテンツに関係あるもの以外はCSSで配置しているようでした。

px指定に関してはフォントサイズをベースとする単位のremがあるようで、ブラウザのフォントサイズ変更機能への対応を考えた場合にこちらが望ましいということがあるようです。実際に作る際には検討します。

レスポンシブデザインについてはHTMLで書く内容がコンテンツだけに絞ったことでできるようなものですね。ディスプレイのサイズに応じてCSSで並べ替え・調整をすればOKという感じでした。

次はいよいよ実演ですね。できるかな

SBI証券の単元未満株(S株)発注画面で上限株数を表示させたい。

やりたいこと

昨年暮れの投資信託のあれこれがあってSBI証券の口座開きました。で、単元未満株の購入手数料が後日キャッシュバックされるということらしいので、配当金再投資を行う証券会社をネオモバイル証券からSBI証券に移すことにしました。
で、いざ注文しようとすると発注画面に上限数の表示がない。同じSBIグループのネオモバイル証券にはその機能あるのに。
ということで以下の画像の赤枠で囲った部分のように、注文時に上限株数を表示させたいです。
f:id:rutilicus:20220115093740p:plain

方針

また、と言われそうですがUserScriptを作成して上限株数表示を追加します。当初は単元未満株の発注ページだけで完結させるつもりだったのですが、ちょっと難しそうだったので以下3つの機能を組み合わせることにします。

  1. ホームページ表示時に買付余力を取得する。
  2. 個別銘柄ページ表示時に制限値幅上限値を取得する。
  3. 単元未満株発注ページ表示時に、上限株数を計算、ページ表示に追加する。

上記方針のため、銘柄コードを直接入力する発注ページでは表示されません。

2022/1/15時点でのSBI証券における単元未満株の発注上限株数Sは制限値幅上限値をP、買付余力をLとすると以下の式を満たす最大の整数となります。


L\geq\left\{\begin{array}{ll} P \times S \times 1.0055 & (S \geq T) \\ P \times S + 55 & (S < T)\end{array}\right.\ where\ T = 55 \div 0.0055P

ソースコード

方針に従って実装します。コードは以下のGistで公開しております。まともにテストなどはしていないので無保証です。

いい感じにIDなどが割り振られていなかったので直近のElementを参照してそこから相対参照で取得することを結構やっています。いつ使えなくなるか不安です。