概要 以前、JSで書いた(ファミコンのエミュレータを書いた - undefined)ファミコンのエミュレータをRustで書き直してみた。 また、技術的な内容はQiitaの方にも書いているので興味のある方は参照してみてください。(まだ Hello, World!までしか書けてませんが。) qiita.com もともとファミコンのエミュレータって新しい言語を習得するのにちょうどいい題材だったりするのでは、って話しからスタートしてて、よくわからないのでJSで書いてみて、ようやくRustで一通りは実装できた感じ。まだバグや未実装（音声周りやマッパー）も多いんですが、ひとまずはお腹いっぱいな感じ。 成果物 github.com あと、いくつかのROMは以下で遊べるようにしてます。音が出るので注意してください。 またAPUの実装にまだバグが残っているのDCMチャンネルが未実装なので音が変だったり出てな

概要 ファミコンのエミュレータをJSでだらだらと作ってた。そこそこ遊べるようになったので公開しておく。技術的な内容は、またどこかで発表したり、Qiitaなどにまとめたい。（忘れないうちに。需要があるかは怪しいが。） 随分昔に作ってみたいなーと思いFPGAでの実装を開始したんだけど、早々に挫折した覚えがある。今思うとFPGAの場合タイミングの問題が付き纏うのでJSで書くより圧倒的に難易度も高いし、ハードエミュレータを実装するにしても前段階としてソフトウェミュレータを実装するのが定石っぽいので無謀だったっぽい。 ひとまずMapper0という基本的なカセット形式のみに対応し、スーパーマリオブラザーズがそこそこ遊べるくらいを目標とした。 成果物 github.com ファミコンのスペック MPU 6502(RP2A03), 8bit WRAM2KB VRAM 2KB 最大発色数 52色 画面解像度

OpenCVで試したいことがあり、OpenCV + wasmで入門がてら顔認識を試して遊んでみました。 OpenCVのビルド wasmへのビルドは参考になるような記事を見つけられず、いろいろ試したものの成功しなかったんですが、ビルドを成功させているリポジトリが発見でき手順通り（cloneするリポジトリ名のみ間違ってて修正しましたが）にやることでビルドできました。 github.com 例えば顔認識分類器のデータの追加変更や任意のモジュールの追加、削除などを行うことを考えると自前でビルドできないと今後きつそうなんですが、正直良くわからないってのが現状です。このあたりは課題。 ビルド筋を鍛えようにも取っ掛かりもないような状態なので、おすすめの資料などがあれば、是非教えていただけると嬉しいです。 wasm Rustでいろいろ試しているが、その際以下の記事をよく参考にさせてもらったりしてます。 s

実際にいくつかのオペレータを実装してみたらRxの気持ちがわかるかと思い実践してみました。 簡素化するために以下の方針とします。 unsubscribeしない errorハンドリングしない 実装してみたのは以下です。 of map subject filter delay fromPromise combineLatest switchMap Observable 何はともあれ、まずはObservableを実装します。 class Observable { constructor(producer) { this.subscribe = producer } } コードはこれだけで、producerを受け取って、自身のsubscribeに接続します。 producerはobserverを引数にとって、次に、どんなタイミングで、どんな値を流すか決定する関数です。 現時点ではイメージもわかないと

最初に この記事はflowtype導入の手順紹介というより、自分の作業ログに近いものです。flowtypeって何？ってところも含めて以下に紹介する記事を見たほうがわかりやすいと思いますので、参照してください。 今回試すにあたって、参考にした記事。 qiita.com qiita.com joe-re.hatenablog.com qiita.com 動機 自分の観測範囲内で「flowtypeいいよ！」って話しをよく聴くようになり、試してみることにした。 自分の場合はだが、主な動機としてはReactのpropTypes頑張って書く割に得られる恩恵少ないというのがあってflowtypeであれば、それを改善しつつ、部分的に適用することができる。 新規プロジェクトで あればTypescriptを採用するなどの選択肢を取ることが可能であるが、既存プロジェクトの場合はそうはいかない。だけど、flowt

国内のオープンなslack teamを検索できるslack list jaを作った Slack-list-ja 経緯 最近、リモートワーカーのためのslack teamが作成されて参加させてもらっている。リモートワークならではの健康面などの知見・意見が交換されていて、非常に有用だと思っている。リモートワークして2ヶ月が経とうとしているんだけど、リモートワーク控えめに言っても最高なのでもっと広まって欲しい。 リモートワーカー Slack Team のご紹介 - 9mのパソコン日記 そんな中、国内にオープンなslack teamがどれだけあるんだろう？と調べ始めたら、海外にはそういったslack teamをリスト化したページSlack Listなるものが存在しており、remote-workers-jpの布教も兼ねて国内版を作ってみることにした。 技術的なとこ せっかく作るんだから何か触ったこと

今作ってるtwitterクライントでソートとリサイズができるコンポーネントが欲しかったので作った。 作ったもの github.com デモ http://bokuweb.github.io/react-sortable-pane スクリーンショット 使い方 インストール npm i react-sortable-pane サンプル 以下のように使用する。 <SortablePane margin={10}> <Pane width={200} height={500} style={style}> A </Pane> <Pane width={300} height={400} style={style}> B </Pane> </SortablePane> このコンポーネントについて もともとは以下のコンポーネントを作ったときのデモだったんだけど、今回コンポーネント化しといた。 blog

1月12日、サムライト株式会社に入社した。 サムライトは「Common LispでWebを取り戻す」を謳い、Common Lispを使ったWebアプリケーション開発を行っている数少ないWeb企業だ。 www.wantedly.com Common Lispやるの？ 自分はフロントエンドエンジニアとしての採用となる。フロントエンドはReact.jsを採用しているが、メンバーのほとんどがCommon Lisperなため、自分がフロントエンドを牽引していけるように、基礎筋力を養いつつ頑張っていきたい。 が、同時にCommon Lispも積極的に学びたいと思っている。ということを話すと、@nitro_idiot が「え？」って顔してたけど、それもそのはずで面談の時に「Common Lisp読む必要あるよ」って言われて「え？」って顔したのは自分だからだ（というより声に出してたかもしれない）。だけど、

昨日年が変わる2時間前くらいから、書こうか書かまいか、もやもやして、結局書かないまま年が変わってしまった。今日もどうしたものかと考えていたけれど、書くことでプラスになることが多いように思ったので書いておく。 良くも悪くも2015年は自分にとって激動の年となり、同時に実りを感じた年でもあった。 2015年振り返り ブログを始めた プログラミングを腰を据えて学びはじめた 会社の閉鎖が決定した 家をたてた 転職活動した ブログを始めた なんとなくブログを始めた。正確には2014年に開始したが、記事をちゃんと書こうと思ったのは2015年にはいってから。アウトプットするってのは自分にとってとても良い訓練で2016年も続けていきたい。自分は特に日本語の能力が極めて低いので、最も適したリハビリかもしれない。 1年間でよく読んでいただいたのは以下の記事。 blog.bokuweb.me blog.boku

kindleなんかはゲリラ的に無料セールを行う上に情報が取りにくいので特化したものを作った。 厳密には作ったまま放置していたのを最近動かしはじめた。 なにこれ？ Kindle, kobo, yahoo!ブックスから無料電子書籍を検索できます。 shelf.bokuweb.me 技術的な話 構成 その名を聴かなくなって久しい(?)MEANで学習用に夏くらいに作りました。 Openshiftで動かしてます。 主なパッケージ サーバーサイド 名称 概要 apac Amazon Product AdvertisingのNode.jsクライアント cheerio-httpcli HTMLパース付きNode.js用HTTPクライアントモジュール config 設定用 cron 書籍データのフェッチを定期実行 ect テンプレート mongoose MongoDB用object modeling too

概要 以前cocos2d-JSで作ったbmsjsをDOMベースでmithril.jsで実装してみました。 以下で遊べます。降ってくるのは全部div要素です。 デモ http://bokuweb.github.io/bmsjs-ithildin キーは白鍵が左からZ,X,C,Vが、黒鍵が左からS,D,FがターンテーブルにはBがアサインされてます。 ソース github.com なんでわざわざDOMで・・。 当然パフォーマンスを考えればWebGL使えって話しなんですが、以下の理由により試してみました。 すべてをcssでスタイリングしたかった 勉強のため、また、どれだけ動くか試したかった すべてをcssでスタイリングしたかった もともとユーザにテーマを作ってもらいたいと思い、cocos2d-JS版の時もjsonで設定できるようにスタイル部分を切り出そうとしていたんだけど、これがかなり辛かった。す

ぽよんと展開されるメニューコンポーネント、react-motion-menuを作りました。 動きは以下を見てください。div要素をぽよんぽよんさせてます。 デモ 以下で実際に操作できます。 example リポジトリ github.com インストール npm i react-motion-menu 概要 ぽよんとアニメーションするメニューを作りたくなって作った。 当初はもっとスライム感みたいなのを表現したくてsvgで検討していただんだけど、いろいろとスキル不足な感じでreact-motionを使って遊んでみることにした。 svgで何かを作りたい場合、Inkscapeとかでベジェ曲線を思い通りに扱えるようになると捗るかもしれない。 使い方 展開する要素をchildrenに記述します。 あとはwidthや展開時のメニューアイテム間の距離をdistanceで指定してください。 <Menu di

概要 先日公開した、はてブviewer『Pasta』のElectron版を公開しました。 主な機能については下記記事を参照してください。 blog.bokuweb.me WEB版ではGoogle Feed APIを使用してJSONPでデータを受けてたんですが、deprecatedとなっているのを見落としてまして、つい先日403が返ってくるようになってしまいました。そのため現在WEB版は使用できません。申し訳ありません。ひとまず復旧したようです。 取り急ぎElectron版では直接はてブのフィードを見に行くことで対応してます。 ダウンロード ここから各環境に合ったものをダウンロードしてください。 github.com WEB版に追加して行ったこと アイコンを作った アイコンはここで作りました。 ls8h.com Macの場合は*.icnsを作成する必要があります。 以下を参考にしました。 q

概要 自分用に使い勝手の良い、はてブviewerをReact/Reduxで作って公開しました。 ※GoogleFeedAPI停止につき現在利用できません。申し訳ありません。 Pasta - Hatena Bookmark Viewer - ひとまず復旧したようです。 デスクトップ版をもご利用ください。 blog.bokuweb.me スクリーンショット どんなものか 登録したキーワードに関連するニュースを配信する『Zite』というアプリがあるんですが、配信される記事が英語のみなので、こいつの日本語版を作ろうと思い着手しまた。当初はReact Nativeでスマホアプリを作り始めたんだけど、先にWEB版を作ってしまったほうが変なところで躓かずにすむんじゃないかと思い、こちらを先に実装することにしました。 ただリリース直前で気づいたんですが、公式にも同様の機能の『関心ワード』なるものが実装され

リサイズが可能なdiv、react-resizable-boxを作りました。 こういうの。 Demo React-resizable-box example Repository github.com インストール npm i react-resizable-box 概要 Electronでリサイズ/ソートが可能なカラムを使いたいと思い、検索したところ同様のものはあったけど、使い辛かったので勉強も兼ねて作りました。 具体的には以下のように使用する予定。以下はreact-motionとreact-resizable-boxで作ったデモ。 http://bokuweb.github.io/react-sortable-column-sandbox/ さいごに 使えそうだったら使ってやってください。 github.com

6月に見つけたものをまとめました。 【サービス】個人Web製作者にとっての最強構成「RubyOnRails+ConoHa+オブジェクトストレージ」で手描き文字の投稿サイト「手描き」を2日で作る過程をメモってみた blog.tohuya.com つくったもの tegaki.net どんなもの？ 「手描き文字ってなんかワクワクしませんか？」 好きなんです。手描き文字 その人の個性が出るし、かっこいい字も可愛い字も最高です ……しかし！今のところ文字を「作品」として投稿できる場はなく、強いて言えば「Twitter」でたまに行われているタグによるお遊び的なもの それなら作ろうではないか！……ということでやってみました 使用技術・環境 ConoHaVPS Ubuntu Nginx Unicorn RubyOnRails Herokuの無料枠でPythonのWebアプリを公開してみた時のメモ myen

C3.jsとは? C3.js | D3-based reusable chart library C3 はチャートに特化したビジュアライゼーションライブラリです。D3 のラッパーライブラリで、D3 の見た目の美しさやインタラクション性などの特徴を残しながら、チャートライブラリとして分かりやすいインターフェースを提供するという方針で開発を進めています。 http://blog.xica-inc.com/about-xica/member-12/ これはまではhighchart.jsを使っていましたが、商用利用は有償だったりするので今回C3.jsをいじってみます。 サンプル どんなチャートが作れるか以下のサンプルを見れば分かります。 C3.js | D3-based reusable chart library 使ってみる 音ゲーなどではゲーム終了時にスコアの軌跡がグラフとして描画されたりしま