React.js
概要 今年に入ってからのんびりTwitterClient(https://github.com/bokuweb/tsukiakari)を作っていて、こいつに使いたいなーと思いコンポーネントセット作った。といっても、まだかなり雑でまだまだやることがありそう。 以下のような記事もあって様々なReact…
最初に この記事はflowtype導入の手順紹介というより、自分の作業ログに近いものです。flowtypeって何？ってところも含めて以下に紹介する記事を見たほうがわかりやすいと思いますので、参照してください。 今回試すにあたって、参考にした記事。 qiita.com …
勉強用の題材としてブログを作りはじめた。 blog.bokuweb.me ブログの更新やコメントにも使用できるので、次はchannelを使用して簡単なチャットを作ってみる。Channelとは簡単にwebsocket通信ができる機能で、Node.jsにおけるSocket.io的なものと理解してい…
Elixir、Phoenixの勉強のための題材として、ブログシステムで作ってみることにした。飽きるまでのんびり改修していこうと思う。Elixir/Erlangの学習はすごいE本を並行して進める。 Elixir、Phoenixのインストールは完了しているものとする。 今回のゴール 記…
吹き出しコンポーネントを作った時から、SVGで面白い動きのコンポーネントが作ってみたいと思っていて、その習作としてSVGで描画したぽよんと表示されるmodalコンポーネントを作ってみた。 blog.bokuweb.me 作ったもの github.com デモ React-elastic-modal …
国内のオープンな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>
今作ってるtwitterクライントでソートとリサイズができるコンポーネントが欲しかったので作った。 作ったもの github.com デモ http://bokuweb.github.io/react-sortable-pane スクリーンショット 使い方 インストール npm i react-sortable-pane サンプル …
以前作ったreact-resizable-boxにドラッグで移動できる機能を付加したreact-resizable-and-movableを作った。あまりいい名前が思いうかばず残念な感じになってしまった。 Demo React-resizable-and-movable example Repository github.com インストール npm …
ぽよんと展開されるメニューコンポーネント、react-motion-menuを作りました。 動きは以下を見てください。div要素をぽよんぽよんさせてます。 デモ 以下で実際に操作できます。 example リポジトリ github.com インストール npm i react-motion-menu 概要 …
概要 先日公開した、はてブviewer『Pasta』のElectron版を公開しました。 主な機能については下記記事を参照してください。 blog.bokuweb.me WEB版ではGoogle Feed APIを使用してJSONPでデータを受けてたんですが、deprecatedとなっているのを見落としてまし…
概要 自分用に使い勝手の良い、はてブviewerをReact/Reduxで作って公開しました。 ※GoogleFeedAPI停止につき現在利用できません。申し訳ありません。 Pasta - Hatena Bookmark Viewer - ひとまず復旧したようです。 デスクトップ版をもご利用ください。 blog…
リサイズが可能なdiv、react-resizable-boxを作りました。 こういうの。 Demo React-resizable-box example Repository github.com インストール npm i react-resizable-box 概要 Electronでリサイズ/ソートが可能なカラムを使いたいと思い、検索したところ…
成果物 github.com 目的 ReduxとES6への入門。 React.jsを(ようやく)触る機会が出て、情報量の多いFluxxorとCoffeeScriptで入門してた。 いろいろ情報を集めると、flummoxが人気！！みたいなのを見て、覗いてみたら4.0 will likely be the last major releas…
