undefined

bokuweb.me

実装して学ぶRxJS

実際にいくつかのオペレータを実装してみたらRxの気持ちがわかるかと思い実践してみました。 簡素化するために以下の方針とします。 unsubscribeしない errorハンドリングしない 実装してみたのは以下です。 of map subject filter delay fromPromise combin…

Angular2 RC5への更新とステート管理の変更、power-assertによるテストまで試す

概要 以前触ってみたときはRC3でRC5が出たらもう一回触るかってことで、以前作ったサンプルのRC5への更新、ステート管理の変更、ユニットテストについて試してみた。以前の記事は以下。 blog.bokuweb.me RC5への更新 情報収集をするとNgModuleが追加されたこ…

モダンCSSフレームワーク『Bulma』のReactコンポーネントセット『ReBulma』を作った

概要 今年に入ってからのんびりTwitterClient(https://github.com/bokuweb/tsukiakari)を作っていて、こいつに使いたいなーと思いコンポーネントセット作った。といっても、まだかなり雑でまだまだやることがありそう。 以下のような記事もあって様々なReact…

golang入門するためにlifegame書いてみた

タイトルとおりなんだけど、golang使ってみたいと思うケースが出てきて、入門のためまずはlifegameを書いてみた。 ルール ライフゲーム - Wikipedia 結果 github.com 16/7/16修正しました package main import ( "fmt" "math/rand" "time" ) type game struc…

Angular2でReactのチュートリアルを試してみる

概要 一回触ってみたいと思っていたAngular2をようやく触ってみた。最近は新しいフレームワークやライブラリを触る場合はゲームを作ってみるか、Reactのチュートリアルをやるようにしていて、今回はReactのチュートリアル(コメントフォームのやつ)をAngula…

flowtypeを試してみる

最初に この記事はflowtype導入の手順紹介というより、自分の作業ログに近いものです。flowtypeって何?ってところも含めて以下に紹介する記事を見たほうがわかりやすいと思いますので、参照してください。 今回試すにあたって、参考にした記事。 qiita.com …

ElixirですごいE本 11章

すごいErlangゆかいに学ぼう!作者: Fred Hebert,山口能迪出版社/メーカー: オーム社発売日: 2014/07/04メディア: 単行本(ソフトカバー)この商品を含むブログ (8件) を見る 引き続き。 11.1 状態を述べろ defmodule Kitchen do def fridge1 do receive do {…

HerokuへDockerを使ってPhoenixアプリをデプロイする

ここ数日全然うまくいかなかったけど、一応動作したので記録として残しておく 前提 HerokuへのDeproy成功したが、一連の知識がなさすぎて、なぜダメだったのか、なぜ動くのか説明できない pic.twitter.com/qRaYZgTMUk— Bokuweb (@bokuweb17) 2016年3月23日 h…

Phoenix + ReactでChannelを使用した簡易チャットを作る(1)

勉強用の題材としてブログを作りはじめた。 blog.bokuweb.me ブログの更新やコメントにも使用できるので、次はchannelを使用して簡単なチャットを作ってみる。Channelとは簡単にwebsocket通信ができる機能で、Node.jsにおけるSocket.io的なものと理解してい…

Phoenix + React + Reduxでブログシステムを作る(1)

Elixir、Phoenixの勉強のための題材として、ブログシステムで作ってみることにした。飽きるまでのんびり改修していこうと思う。Elixir/Erlangの学習はすごいE本を並行して進める。 Elixir、Phoenixのインストールは完了しているものとする。 今回のゴール 記…

ぽよんと表示されるmodalコンポーネントを作った

吹き出しコンポーネントを作った時から、SVGで面白い動きのコンポーネントが作ってみたいと思っていて、その習作としてSVGで描画したぽよんと表示されるmodalコンポーネントを作ってみた。 blog.bokuweb.me 作ったもの github.com デモ React-elastic-modal …

ElixirですごいE本 10章

しばらく停止していたElixirの勉強、順番を入れ替えて10章から再開することにした。 すごいErlangゆかいに学ぼう!作者: Fred Hebert,山口能迪出版社/メーカー: オーム社発売日: 2014/07/04メディア: 単行本(ソフトカバー)この商品を含むブログ (8件) を見…

国内のオープンなslack teamを検索できるslack list jaを作った

国内のオープンなslack teamを検索できるslack list jaを作った Slack-list-ja 経緯 最近、リモートワーカーのためのslack teamが作成されて参加させてもらっている。リモートワークならではの健康面などの知見・意見が交換されていて、非常に有用だと思って…

吹き出しコンポーネントを作った

吹き出しコンポーネントが必要になって作った。 作ったもの github.com デモ React-balloon example スクリーンショット 使い方 インストール npm i react-balloon サンプル 以下のように使用する。 <Balloon start={{ box: { x: 100, y: 100, width: 300, height: 105 }, destination: { x: 400 , y: 400 }, }} style={{ borderRadius: '5px' }} backgroundColor="#ECF0F1" > Hello, World…</balloon>

ソートとリサイズが可能なペインコンポーネントreact-sortable-paneを作った

今作ってるtwitterクライントでソートとリサイズができるコンポーネントが欲しかったので作った。 作ったもの github.com デモ http://bokuweb.github.io/react-sortable-pane スクリーンショット 使い方 インストール npm i react-sortable-pane サンプル …

React Native for AndroidでGCMを使ってPUSH通知するまでの作業ログ

React Native for AndrodでPUSH通知させた時のおぼえ書き。 Google Cloud Messaging for Android (GCM ) とは? 開発者がサーバから Android デバイス上の Android アプリケーションにデータを送信できるようにする無料のサービス らしいです。 www.techdoctr…

React Native用にシンプルなModal Componentを作った

タイトルのとおりだけど、シンプルなReact-Native用のModal Componentを作った。 標準でModalコンポーネントは用意されてるんだけど、以下のように今はiOSにしか対応しておらず、必要となったので作成した。 This component is only available in iOS at thi…

サムライト株式会社に入社しました

1月12日、サムライト株式会社に入社した。 サムライトは「Common LispでWebを取り戻す」を謳い、Common Lispを使ったWebアプリケーション開発を行っている数少ないWeb企業だ。 www.wantedly.com Common Lispやるの? 自分はフロントエンドエンジニアとしての…

リサイズとドラッグが可能なReactコンポーネントを作った

以前作ったreact-resizable-boxにドラッグで移動できる機能を付加したreact-resizable-and-movableを作った。あまりいい名前が思いうかばず残念な感じになってしまった。 Demo React-resizable-and-movable example Repository github.com インストール npm …

退職しました

2015年の振り返り記事にも少し書きましたが、1月7日付けで退職しました。 特に何ってわけじゃないが、記録しておく。 なんで 会社の閉鎖が決定したため。不満がなかったといえば嘘になるが、こういった状態にならなければ基本的にはずっと勤めるつもりだ…

2015年の振り返りと2016年の目標

昨日年が変わる2時間前くらいから、書こうか書かまいか、もやもやして、結局書かないまま年が変わってしまった。今日もどうしたものかと考えていたけれど、書くことでプラスになることが多いように思ったので書いておく。 良くも悪くも2015年は自分にとって…

無料の電子書籍を検索できるWEBサービス作った

kindleなんかはゲリラ的に無料セールを行う上に情報が取りにくいので特化したものを作った。 厳密には作ったまま放置していたのを最近動かしはじめた。 なにこれ? Kindle, kobo, yahoo!ブックスから無料電子書籍を検索できます。 shelf.bokuweb.me 技術的な…

Mithril.jsでBMSを実装してみた話

概要 以前cocos2d-JSで作ったbmsjsをDOMベースでmithril.jsで実装してみました。 以下で遊べます。降ってくるのは全部div要素です。 デモ http://bokuweb.github.io/bmsjs-ithildin キーは白鍵が左からZ,X,C,Vが、黒鍵が左からS,D,FがターンテーブルにはBが…

ぽよんと展開されるメニューコンポーネントをReactで作った

ぽよんと展開されるメニューコンポーネント、react-motion-menuを作りました。 動きは以下を見てください。div要素をぽよんぽよんさせてます。 デモ 以下で実際に操作できます。 example リポジトリ github.com インストール npm i react-motion-menu 概要 …

はてブViewer 『Pasta』のElectron版を公開しました

概要 先日公開した、はてブviewer『Pasta』のElectron版を公開しました。 主な機能については下記記事を参照してください。 blog.bokuweb.me WEB版ではGoogle Feed APIを使用してJSONPでデータを受けてたんですが、deprecatedとなっているのを見落としてまし…

Elixir + Phantomjsでスクレイピングしてスクリーンショットとニュースの見出しをとる

Elixir関連の記事を眺めていたら以下の記事を見つけた。面白そうなので試してみる。 Scraping a Website with Elixir – Robert Lord core.garbage-collection.net 基本的には上記の記事に沿う。 PhantomJSのインストール npm --save phantomjs pakcage.json…

はてブviewer『Pasta』をReact + Reduxで作って公開した

概要 自分用に使い勝手の良い、はてブviewerをReact/Reduxで作って公開しました。 ※GoogleFeedAPI停止につき現在利用できません。申し訳ありません。 Pasta - Hatena Bookmark Viewer - ひとまず復旧したようです。 デスクトップ版をもご利用ください。 blog…

react-resizable-boxを作って公開しました

リサイズが可能なdiv、react-resizable-boxを作りました。 こういうの。 Demo React-resizable-box example Repository github.com インストール npm i react-resizable-box 概要 Electronでリサイズ/ソートが可能なカラムを使いたいと思い、検索したところ…

ReduxでReducerでのstateの変更がviewに通知されないケースについてのメモ

知らなかったので完全にハマった。おぼえ書き。 以下のエントリに記載があった。 qiita.com 例えばこんなreducerの場合、viewが変更されない。 function someReducer(state, action) { switch (action.type) { case SOME_ACTION: state.someValue = action.s…

React NativeでNavigatorIOSに渡したpropsが更新されない

React NativeのNavigatorIOSで管理されるシーンについては以下のようにpassPropsでpropsを渡すんだけど、渡した先のthis.propsは更新されない。例えば、以下でthis.props.hogeが更新されてもHomeScreen内のthis.props.hogeは更新されない。issueにも上がって…

React Nativeのセットアップ

React NativeがAndroidに対応したので入門してみる。 事前準備 以下が準備できているものとする。 Homebrewがインストール済 nodebrewがインストール済 xcode6.3 or higherがインストール済 また作業環境は Mac OSX 10.11.1。 Androidのセットアップ Android…

Karma + mocha + powerassert + ES6でのkarma.conf.js設定メモ

Karma + mocha + powerassert + ES6でのkarma.conf.jsの設定メモ。espowerifyではなく、babel-plugin-espowerで意図通り動いた。 // Karma configuration // Generated on Fri Sep 25 2015 15:55:15 GMT+0900 (東京 (標準時)) module.exports = function(con…

ElixirですごいE本 5章

5章 すごいErlangゆかいに学ぼう!作者: Fred Hebert出版社/メーカー: オーム社発売日: 2014/08/11メディア: Kindle版この商品を含むブログ (1件) を見る 5.1 再帰の動き リストの長さ リストの長さを求める defmodule Recursion do def len([]), do: 0 def …

ElixirですごいE本 4章

すごいErlangゆかいに学ぼう!作者: Fred Hebert出版社/メーカー: オーム社発売日: 2014/08/11メディア: Kindle版この商品を含むブログ (1件) を見る 4.1 動的で強い型付け Elixirは動的で強い型付け iex(1)> 6 + "1" ** (ArithmeticError) bad argument in …

ElixirですごいE本 3章

3章 すごいErlangゆかいに学ぼう!作者: Fred Hebert出版社/メーカー: オーム社発売日: 2014/08/11メディア: Kindle版この商品を含むブログ (1件) を見る 3.1 パターンマッチ defmodule Test do def greet(:male, name), do: IO.puts "Hello, Mr.#{name}!" d…

ElixirですごいE本 2章

これまで ElixirですごいE本 1章 - bokuweb.me すごいErlangゆかいに学ぼう!作者: Fred Hebert出版社/メーカー: オーム社発売日: 2014/08/11メディア: Kindle版この商品を含むブログ (1件) を見る 2章 2.2 モジュールを作る Elixirではdefmoduleでモジュー…

ElixirですごいE本 1章

すごいE本を読みつつElixirを学んでみる。 すごいErlangゆかいに学ぼう!作者: Fred Hebert出版社/メーカー: オーム社発売日: 2014/08/11メディア: Kindle版この商品を含むブログ (1件) を見る すでにヽ(´・肉・`)ノログ さんが実施されていた。 2014/07/…

末尾再帰(最適化)について調べる

すごいE本の「再帰さん、こんにちは!」を読んでて、末尾再帰のところが理解できなかったので調べた。 基本的な再帰関数duplicate/2 以下は整数の第二引数の項を第一引数の数だけコピーしたリストを作る関数。(「すごいErlang ゆかいに学ぼう!」55頁より) d…

Mithril.jsでjubeatライクな音ゲーのプロトタイプを作る

※修正jubeats->jubeat 成果物 github.com ここで遊べる(スマホもしくはタッチが有効な環境) http://bokuweb-sandbox.github.io/mithril-game-prototype/ jubeatはこんなゲーム。 目的 bmsをreactで際実装したいという欲求— Bokuweb(求職中) (@bokuweb17) 201…

ElixirとPhoenixをインストールするメモ

Elixirのインストール $ brew install elixir Hexのインストール Hexはパッケージ管理ツール。npmに相当するものでしょうか。 $ mix local.hex $ mix Hex Hex v0.9.0 Hex is a package manager for the Erlang ecosystem. Phoenixのインストール $ mix archi…

ReduxとES6でReact.jsのチュートリアルの写経

成果物 github.com 目的 ReduxとES6への入門。 React.jsを(ようやく)触る機会が出て、情報量の多いFluxxorとCoffeeScriptで入門してた。 いろいろ情報を集めると、flummoxが人気!!みたいなのを見て、覗いてみたら4.0 will likely be the last major releas…

最強のTwitterクライアント進捗その2

昨日の問題がひとまず落ち着いたのでmac版のみv0.0.1をアップしました。 github.com 「非同期処理内のm.redraw()で描画されない」問題について project/v0.0.1/ithildin-darwin-x64/ithildin.appに*.appを生成し、そこからアプリを起動していたんですが、そ…

最強のTwitterクライント進捗

github.com 触り始めて2週間たったので自分もとりあえずここまでをまとめておく。 【参考】 r7kamura.hatenablog.com r7kamura.hatenablog.com 画像展開 とりあえず先頭の画像だけをばーんと見せてる。複数画像は表示できていない、gifや動画は未対応。gifは…

2015年8月に見つけたWEBサービス等作ってみた記事まとめ

8月分です。Electronなど多め。 Raspberry PiとOpenCVでスプラトゥーンの勝敗を自動記録する仕組みを作ってみた hogesuke.hateblo.jp つくったもの ikashot.net どんなもの? スプラトゥーンではバトルの履歴を見れないようになっているので、勝率がわかりま…

最強のTwitterクライアント戦争にこっそり参戦してみた

周回遅れ気味だけど、こっそりtwitterクライント作りはじめました。今ならElectronの情報もいろいろ流れてるし。飽きたらやめます。 最強のTwitterクライアント戦争情報 r7kamura.hatenablog.com どんなの? 現状。タイムラインの取得だとかお気に入りの取得…

MithrilでMaterial Design Liteを使用するメモ

MaterialDesignLiteのコンポーネントは基本的にはJavascriptを用いているので、そのままでは動作しない。 mithril本の「5.6 BootstrapのJavaScriptを利用したコンポーネントを利用する」を参考にした。 具体的にはconfig擬似属性を使用して初回描画完了時にc…

Elasticsearchをいれて触ってみたメモ【Node.js】

Elasticsearchで遊んでみるメモ。 日本語情報はまだ少なく、書籍のverも古いらしいので調べながら手を動かしてみる。その記録。 高速スケーラブル検索エンジン ElasticSearch Server作者: Rafal Kuc・Marek Rogozin’ski,株式会社リクルートテクノロジーズ,大…

BMSをブラウザで遊べるWEBサービス『bmsjs』のα版を公開いたしました

概要 bmsjs(α版)というWEBサービスをリリースしました。 bmsjsはブラウザ上で動作するBMSプレイヤーとSNSの機能を持つWEBサービスです。 bmsjsbmsjs.net BMS? 元々は、KONAMIの音楽ゲーム『beatmania』を模したシミュレータにあたる『BM98』用の譜面データフ…

にょーんと出てくるサイドメニューを勉強がてら作った

基礎的なところですが、理解のため勉強しながら「にょーんと出てくるサイドメニュー」を作りました。 今回はjQueryを使ってるけどAngularJSなら<section class="side-menu" ng-class="{'side-menu-open' : isOpen}">とか<div class="menu-icon" ng-click="isOpen=true">とかすればJSを書かなくてもいいかも。</div></section>

2015年7月に見つけたWEBサービス等作ってみた記事まとめ

2015年7月に見つけた分。 railsとangularjsとbootstrapでwebサービスを作ってみた railsとangularjsとbootstrapでwebサービスを作ってみた - Qiitaqiita.com つくったもの アップスワーク[apps-work.com] | 無料クラウドソーシングサイトapps-work.com どん…