ぽよんと表示されるmodalコンポーネントを作った - undefined
吹き出しコンポーネントを作った時から、SVGで面白い動きのコンポーネントが作ってみたいと思っていて、その習作としてSVGで描画したぽよんと表示されるmodalコンポーネントを作ってみた。 blog.bokuweb.me 作ったもの github.com デモ React-elastic-modal example 使い方 インストール npm i react-elastic-modal サンプル 以下のように使用する。極力react-modalに似せたつもり。 <Modal isOpen={ this.state.isOpen } onRequestClose={ () => this.setState({ isOpen: false }) } modal={{ width: '50%', height: '360px', backgroundColor: '#fff', opacity:
国内のオープンなslack teamを検索できるslack list jaを作った - undefined
国内のオープンなslack teamを検索できるslack list jaを作った Slack-list-ja 経緯 最近、リモートワーカーのためのslack teamが作成されて参加させてもらっている。リモートワークならではの健康面などの知見・意見が交換されていて、非常に有用だと思っている。リモートワークして2ヶ月が経とうとしているんだけど、リモートワーク控えめに言っても最高なのでもっと広まって欲しい。 リモートワーカー Slack Team のご紹介 - 9mのパソコン日記 そんな中、国内にオープンなslack teamがどれだけあるんだろう？と調べ始めたら、海外にはそういったslack teamをリスト化したページSlack Listなるものが存在しており、remote-workers-jpの布教も兼ねて国内版を作ってみることにした。 技術的なとこ せっかく作るんだから何か触ったこと
吹き出しコンポーネントを作った - undefined
吹き出しコンポーネントが必要になって作った。 作ったもの 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> このコンポーネントについて 吹き出し部分をSVGで描画し、ボックスとは独立して吹き出しの指し先も動かせるようにした。SVGはこれまでやろうやろうと思いながら触れてなかったけ
ソートとリサイズが可能なペインコンポーネントreact-sortable-paneを作った - undefined
今作ってる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
React Native for AndroidでGCMを使ってPUSH通知するまでの作業ログ - undefined
React Native for AndrodでPUSH通知させた時のおぼえ書き。 Google Cloud Messaging for Android (GCM ) とは? 開発者がサーバから Android デバイス上の Android アプリケーションにデータを送信できるようにする無料のサービス らしいです。 www.techdoctranslator.com GCM登録 以下からアプリを登録して、RegistrationKeyやgoogle-services.jsonを取得する。google-services.jsonはandroid/appに格納する。 Set up a GCM Client App on Android | Cloud Messaging | Google Developers React Nativeでは 以下のパッケージを使うのが楽。 github.
React Native用にシンプルなModal Componentを作った - undefined
タイトルのとおりだけど、シンプルなReact-Native用のModal Componentを作った。 標準でModalコンポーネントは用意されてるんだけど、以下のように今はiOSにしか対応しておらず、必要となったので作成した。 This component is only available in iOS at this time. この辺りは時間が解決してくれるんだろうけど、 まだまだiOSに比べてAndroidのコンポーネントは少ないので注意しないといけない。React NativeでiOS/Android両対応のアプリを作る場合は、Android用のコンポーネントを十分調査しておいたほうが良いと思う。 作ったもの github.com スクリーンショット iOS Android 使い方 インストール npm i react-native-universal-modal サンプル <
React Nativeのセットアップ - undefined
React NativeがAndroidに対応したので入門してみる。 事前準備 以下が準備できているものとする。 Homebrewがインストール済 nodebrewがインストール済 xcode6.3 or higherがインストール済 また作業環境は Mac OSX 10.11.1。 Androidのセットアップ Android SDKのインストール $ brew install android-sdk export ANDROID_HOME=/usr/local/opt/android-sdk を~/.zshrcまたは~/.bashrcに追加する。 $ source ~/.zshrc Android SDK Managerを起動する。 $ android javaがないと怒られる。適宜インストール。 ここからインストールした。 http://www.oracle.com/technetw
サムライト株式会社に入社しました - undefined
1月12日、サムライト株式会社に入社した。 サムライトは「Common LispでWebを取り戻す」を謳い、Common Lispを使ったWebアプリケーション開発を行っている数少ないWeb企業だ。 www.wantedly.com Common Lispやるの？ 自分はフロントエンドエンジニアとしての採用となる。フロントエンドはReact.jsを採用しているが、メンバーのほとんどがCommon Lisperなため、自分がフロントエンドを牽引していけるように、基礎筋力を養いつつ頑張っていきたい。 が、同時にCommon Lispも積極的に学びたいと思っている。ということを話すと、@nitro_idiot が「え？」って顔してたけど、それもそのはずで面談の時に「Common Lisp読む必要あるよ」って言われて「え？」って顔したのは自分だからだ（というより声に出してたかもしれない）。だけど、
退職しました - undefined
２０１５年の振り返り記事にも少し書きましたが、1月7日付けで退職しました。 特に何ってわけじゃないが、記録しておく。 なんで 会社の閉鎖が決定したため。不満がなかったといえば嘘になるが、こういった状態にならなければ基本的にはずっと勤めるつもりだった。選択肢の極めて少ない田舎においては、最もフィットする会社の一つだったのではないかとも思ってる。 これまで かれこれ10年弱、（名前をつけるならば）組み込みハードウェアエンジニアをやってきました。組み込みといっても幅広いが、自分の携わった開発は以下のような感じだった。 MPUクロックは20Mhz〜400MHzくらい(一度だけ1GHzのCoretex-A9の案件があった) OSはベアメタル、iTRONで4:6くらい、稀にVxWorksってのもあった。MPUがMMUを搭載していることのほうが少なく、LInuxを載せる案件はあつかったことがない FPG
2015年の振り返りと2016年の目標 - undefined
昨日年が変わる2時間前くらいから、書こうか書かまいか、もやもやして、結局書かないまま年が変わってしまった。今日もどうしたものかと考えていたけれど、書くことでプラスになることが多いように思ったので書いておく。 良くも悪くも2015年は自分にとって激動の年となり、同時に実りを感じた年でもあった。 2015年振り返り ブログを始めた プログラミングを腰を据えて学びはじめた 会社の閉鎖が決定した 家をたてた 転職活動した ブログを始めた なんとなくブログを始めた。正確には2014年に開始したが、記事をちゃんと書こうと思ったのは2015年にはいってから。アウトプットするってのは自分にとってとても良い訓練で2016年も続けていきたい。自分は特に日本語の能力が極めて低いので、最も適したリハビリかもしれない。 1年間でよく読んでいただいたのは以下の記事。 blog.bokuweb.me blog.boku
無料の電子書籍を検索できるWEBサービス作った - undefined
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
Mithril.jsでBMSを実装してみた話 - undefined
概要 以前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で作った - undefined
ぽよんと展開されるメニューコンポーネント、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版を公開しました - undefined
概要 先日公開した、はてブviewer『Pasta』のElectron版を公開しました。 主な機能については下記記事を参照してください。 blog.bokuweb.me WEB版ではGoogle Feed APIを使用してJSONPでデータを受けてたんですが、deprecatedとなっているのを見落としてまして、つい先日403が返ってくるようになってしまいました。そのため現在WEB版は使用できません。申し訳ありません。ひとまず復旧したようです。 取り急ぎElectron版では直接はてブのフィードを見に行くことで対応してます。 ダウンロード ここから各環境に合ったものをダウンロードしてください。 github.com WEB版に追加して行ったこと アイコンを作った アイコンはここで作りました。 ls8h.com Macの場合は*.icnsを作成する必要があります。 以下を参考にしました。 q
Elixir + Phantomjsでスクレイピングしてスクリーンショットとニュースの見出しをとる - undefined
Elixir関連の記事を眺めていたら以下の記事を見つけた。面白そうなので試してみる。 Scraping a Website with Elixir – Robert Lord core.garbage-collection.net 基本的には上記の記事に沿う。 PhantomJSのインストール npm --save phantomjs pakcage.jsonにrun scriptを追加。 ...(省略) "scripts": { "phantomjs": "phantomjs --webdriver=5555", "test": "echo \"Error: no test specified\" && exit 1" }, ...(省略) プロジェクトの作成 mix new elixir_scraping_sample mix.exsにHoundを追加。最新は0.7.6。(0.7.2を
はてブviewer『Pasta』をReact + Reduxで作って公開した - undefined
概要 自分用に使い勝手の良い、はてブviewerをReact/Reduxで作って公開しました。 ※GoogleFeedAPI停止につき現在利用できません。申し訳ありません。 Pasta - Hatena Bookmark Viewer - ひとまず復旧したようです。 デスクトップ版をもご利用ください。 blog.bokuweb.me スクリーンショット どんなものか 登録したキーワードに関連するニュースを配信する『Zite』というアプリがあるんですが、配信される記事が英語のみなので、こいつの日本語版を作ろうと思い着手しまた。当初はReact Nativeでスマホアプリを作り始めたんだけど、先にWEB版を作ってしまったほうが変なところで躓かずにすむんじゃないかと思い、こちらを先に実装することにしました。 ただリリース直前で気づいたんですが、公式にも同様の機能の『関心ワード』なるものが実装され
react-resizable-boxを作って公開しました - undefined
リサイズが可能な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
ElixirですごいE本 5章 - undefined
5章 すごいErlangゆかいに学ぼう！ 作者: Fred Hebert出版社/メーカー: オーム社発売日: 2014/08/11メディア: Kindle版この商品を含むブログ (1件) を見る 5.1 再帰の動き リストの長さ リストの長さを求める defmodule Recursion do def len([]), do: 0 def len([_|t]), do: 1 + len t end IO.puts Recursion.len [1,2,3,4] http://play.elixirbyexample.com/s/f148dc1a06 末尾再帰の長さ 末尾再帰に変更 defmodule Recursion do def tail_len(l), do: tail_len(l,0) def tail_len([], acc), do: acc def tail_len([_|
ElixirですごいE本 3章 - undefined
3章 すごいErlangゆかいに学ぼう！ 作者: Fred Hebert出版社/メーカー: オーム社発売日: 2014/08/11メディア: Kindle版この商品を含むブログ (1件) を見る 3.1 パターンマッチ defmodule Test do def greet(:male, name), do: IO.puts "Hello, Mr.#{name}!" def greet(:female, name), do: IO.puts "Hello, Mrs.#{name}!" def greet(_, name), do: IO.puts "Hello, #{name}!" end Test.greet :male, "Jack" Test.greet :female, "Betty" Test.greet :foo, "bar" http://play.elixirbyexamp
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
リサイズとドラッグが可能なReactコンポーネントを作った - undefined