読者です 読者をやめる 読者になる 読者になる

Make: Electronics ―作ってわかる電気と電子回路の基礎

Make: Electronics ―作ってわかる電気と電子回路の基礎 ((Make:PROJECTS))作者: Charles Platt,鴨澤眞夫出版社/メーカー: オライリージャパン発売日: 2010/11/29メディア: 大型本購入: 6人 クリック: 207回この商品を含むブログ (22件) を見る 入門用に電子…

Intel EditsonとRaspberry PI Camera

Intel Edison やはり、小さいです。まずは標準アプリを母艦としたMBPに入れ初期設定しました。アプリでは、ファームアップデート・パスワード設定・WiFi設定の三つだけをやるもので、GUI操作だけで簡単にセットアップは終わります。動くところまで、Raspberr…

Ubuntu Core断念

Raspberry PIでサクッといっちゃったんで物足りずに、活用云々よりも先に違うLinuxディストロをいれてみようかと。で断念しました。 Snappy Ubuntu Core Raspberry Pi 2/3 | Ubuntu developer portal Raspberry PIの公式サイトでは公式の中の公式としてRaspb…

Raspberry PIを箱から出してGoアプリを動かす

Hello Raspberry! 8th gradeの長女(Mayaa)が最近いきなり電子工作に興味をもってブレッドボードなどを買ってきたので、対抗してRaspberry PIをはじめました。幸いにまだ臭いとかは言わないまでも、いずれ生ゴミ扱い仕掛けて来かねない思春期の娘に対して、…

macOS Sierra上でGAE/Go SDKが動くようになった

https://storage.googleapis.com/appengine-sdks/featured/go_appengine_sdk_darwin_amd64-1.9.46.zip gcloudツールからのコンポーネント管理では現時点アップデートされていませんでしたが、GAE/Go単体SDKはGo1.6.3ベースにアップデートされていました。 再…

reduxとreact-routerの間でURLとstateの同期を行う

reactのルーティング機能?というかテンプレートシステムというか?にreact-routerがあります。リクエストパスに応じて画面構成要素を組み立てるのでreact-routerを使ってアプリケーションを作ると当然URLと画面は同期することができます。URLを直打ちしても…

reduxはredux-actionsギプスをつけて養成

reactアプリケーション開発においてコンポーネントに引数として渡されるpropsと、スコープの大きな実行時変数としてのcontextに加えて、もっぱらコンポーネント内部の状態管理としてのstateをあれこれ操作するのがデータフローの基本だったのですが、ここ一…

goji.ioで正規表現Pattern

ハンドラのとこはgoji.ioで書いてます。見ると標準のnet/httpとgolang.org/x/net/contextをうまいこと活かしたからこその極薄なライブラリなのですが、リクエストパスでハンドラを切り替えるのに簡潔利便なので私はお好みです。しかし薄すぎて足りないところ…

可搬性の高いGoのVendoring環境整備

GAE/Goでも、package main/func mainのGoでも、プロジェクトはdirenvをつかってVendoringを実現すると可搬性高くて最高というメモ。 direnv シェルの実行パスに置かれたローカル設定を動的に反映させてくれるかしこいツール。素敵。インストールはHomeBrewで…

Sierraの上に仮想ElCapitanを作る

およそOKだったので、本体もSierraにアップデートしてしまいました。 試した範囲でおよそ問題なかったのですが、アップデートしてから動かなくなってしまったのに気がついたのが一つ、Go for Google App EngineのSDKです。こちら内部にGo 1.6.2を抱え込んで…

仮想Sierra環境を作る

Mac環境を汚さないように壊れてよい仮想なMacを作ります。どうせいまなら出たばかりのSierraで。Mac on MacはVMWareをつかうと超簡単と聞きますが、追加無償でも十分!VirtualBoxで作ります。ホストはEl Capitan。トータルで2時間半ぐらいかかりましたが、ほ…

SONY MDR-100ABN/Yを買った

長らくBeats Studio WirelessのTitaniumカラーを愛用してきましたが、急に激しい物欲が発作したのと、それを正当化する理由がいくつか出てきたので新しいヘッドホンを購入しました。選んだのはSONY MDR-100ABN/Yで、外れたら返品すればいいやと他の候補とは…

material-uiのSVGアイコンを作る

Googleはマテリアルデザインのガイドラインを提供するほかに、CSS+ JavaScriptのライブラリ(Material Design Lite)やフォント(Roboto/Notoなど)も用意し、アイコンもまたまとまった数のものがあります。 design.google.com このアイコンは最も使われるだ…

JsDOM+React TestUtilsの使い方を改良

TestUtilsにはいろいろ便利なメソッドがあるのを見つけてテストの書き方を変えたら、UserAgentが設定されていないということでエラーが出るようになってしまいました。かといって直接にnavigator.userAgentを設定しようにもGetterしかないと弾かれてしまいま…

素のnodeでES6の多くが動く

ECMAScript 2015 (ES6) | Node.js 今、BabelでES6とJSXをトランスパイルしてますが、そのBabelを起動するGulp(gulpfile.js)についてはES5で書いてました。しかしすでにnode v5.xではV8エンジンの対応状況が進んできているためにES6の仕様の多くが動いちゃ…

Reactコンポーネント内からkeyが取れない仕様だった

http://facebook.github.io/react/blog/2014/10/16/react-v0.12-rc1.html#breaking-change-key-and-ref-removed-from-this.props すでに0.12での仕様変更でしたから、私がReactに触れてからはずっとそうなってたのですが、自分で書いたコードの謎バグに悩ま…

gulp-jasmineでES6で書いたReactコンポーネントとReactステートレスコンポネントさらにはExpressルーターを同時にテストできるようにする

一通りハマって模索した結果、それぞれしっかり原因判明やりきって解決するまでの質ではないのですが、ES6 で書いたReactコンポーネントとステートレスコンポーネントをテストするとともに、ES6で書いたExpressルーターもまとめてテストできるプロジェクト設…

react-router v2リリース

しばらくrc版を用いて開発していましたが、react-router v2が昨日か一昨日ぐらいにリリースされていました。ドキュメントも新しくv2になってます。 react-router/ComponentLifecycle.md at latest · rackt/react-router · GitHub いつからあったかは定かでは…

TestUtilsが関数コンポーネントダメだって

'use strict'; /*global jest*/ jest.dontMock('../BootstrapResponsive'); const React = require('react'); const ReactDOM = require('react-dom'); const TestUtils = require('react-addons-test-utils'); import {ResponsiveCol} from '../BootstrapRe…

BootstrapのGridをReactに持ってきてみた。

material-uiを気にいって、それでReactアプリ書いてます。発展途上ではあるも開発者の方々がこまめにがっつり頑張ってくれてて、日々npm updateをかけるのが楽しみです。そんなmaterial-uiも今の所はGridレイアウトのコンポーネントはありません。Google謹製…

ReactのES6-classでのコンテキスト

class PutContext extends React.Component { getChildContext() { return {color: '#03a9f4'}; } render() { return <div>{this.props.children}</div>; } } // childContextTypesはpropTypesと同じスタイルの設定 PutContext.childContextTypes = {color: React.PropT…

WebStormでESLintを使う

数日、バタバタと調査しては考えが変わる毎日ですが、ES6-classでReactアプリを書く前提が整ってきました。 classボディ外に、propTypes/contextTypes/childContextTypesを書くのも、そういうものと思えばまあいいか MixinはAOP的なラッパーコンポーネントを…

Reactコンポーネント名の規則

つまらないハマりがあったので。 const foo = React.createClass({ render() { return <div>Foo</div>; } }); console.log("JSX:" + ReactDOMServer.renderToStaticMarkup(<foo/>)); console.log("API:" + ReactDOMServer.renderToStaticMarkup(React.createElement(foo))); </foo/>…

ReactのES6-classが所詮糖衣構文しかも甘くない

(承前:昨日の追記) react-mixin(https://github.com/brigand/react-mixin)でES6のclass構文を試してみました。書いてから気がついたのは、短時間で試したぐらいの中ではちょっとコード書き直すだけでどんどん筋が悪い体裁になっていくので、時期尚早とい…

関数型的なJS

JavaScriptで学ぶ関数型プログラミング作者: Michael Fogus,和田祐一郎出版社/メーカー: オライリージャパン発売日: 2014/01/18メディア: 単行本(ソフトカバー)この商品を含むブログ (5件) を見る ECMAScript6まじりのJavaScriptに手が馴染んできました。R…

MongooseでのCRUDと謎挙動

const Mongoose = require("mongoose"); const Schema = Mongoose.Schema; Mongoose.connect("mongodb://localhost:27017/sample"); const Person = Mongoose.model("person", // <-この"person"が後で問題になる new Schema({ created: {type: Date, defaul…

material-uiのi18n対策のひとつ

Material Designを実現するReactコンポーネントセットであるmaterial-uiは有用な上で、ソースを読んでも大変参考になるものが多くあります。中でもDatePickerのコードはReactでの動作エフェクトの作り方の他、コンポーネントを組み合わせてコンポーネントを…

Reactコンポーネントをファイル分割したら沈黙してしまった件

Reactで大きな画面を作るうちに、人の習性としてReactコンポーネントをファイル分割したくなります。 var React = require('react'); var Item = React.createClass({ render: function () { return <li value={this.props.value}>{this.props.text}</li>; } }); var List = React.createClass(…

document.querySelector

Reactコンポーネントをページに適用する際に、たったこれだけのためにjQueryを入れたくもなかったので、document.getElementByClassNameや〜Idでエレメント取得していましたが、単純名だけかい!という課題に私が知らなかっただけですでに高度な回答がありま…

PassportによるFacebook認証(続いてDBへ保存)

Passportでの認証を実践的に進めてみます。認証情報を永続化するのにMongo DBを利用します。はじめだけMongo DBのJSドライバをそのまま使って書いてましたが、コードブロックをtry-finallyで囲って最後にDB接続を解放するような書き方など2000年ぐらいにJava…

x-powered-byを消す

悪意ある攻撃への対策として、Responseのヘッダから'x-powered-by'を削ると良いという。 Expressでは何もしなければ、サーバ実装を示すこのヘッダ値に'Express'と正直に返してしまいます。そうなると悪い人が「そうかNodeでExpress使ってるのね」とすぐわか…

PassportによるFacebook認証(第一歩)

var Passport = require('passport'); var Facebook = require('passport-facebook'); // Facebook Strategyの設定を'fb'で登録。省略すると'facebook'で設定される Passport.use('fb', new Facebook.Strategy({ clientID: '1513567018936647', clientSecret…

オレオレHTTPSサーバを立てる

実際には証明書を買うとしても、開発時にはオレオレ証明書。 $ openssl req -nodes -x509 -newkey rsa:2048 -keyout key.pem -out cert.pem -days 90 Generating a 2048 bit RSA private key ...........................+++ .........................+++ w…

SuperAgentとMulterでファイルアップロード

ファイルアップロードの機能を作るのに、二日ハマりました。前提としてReactで作ったFormから投げ、Express4で書いたサーバで受けるというところでの通信部分だけです。まずガチなところとしてサーバを作ります。 var express = require('express'); var mul…

ReactでinputのonChangeが効かなくて焦った話など

Reactでちょこちょこ書いていて、嵌ったところをメモ。ちなみにECMAScript6は、ExpressもReactもあまりメリットない割に、参考資料が少なくてどう書いていいのか悩む時もあるのでやめた。Babelでreact-presetだけ使ってます。 inputのonChangeが効かなくなっ…

Node.js 5.0へ

5.0!ほんの一年ぐらい前は0.10とか0.11とか名乗ってたのになあ。 www.publickey1.jp 運用モードでも全くないので、バシッと最新にしちゃいます。これまではnodejs.orgから落としてきたインストーラを使ったので「n」を入れて、そこからアップデートします。…

今はbabel-nodeで動かす

ECMAScript6で、node.js/express.jsのサーバ側を書く段になるとes6的メリットを享受できていません。Reactの方はclassを用いて書くといい感じなんですけどね。 // server.es6 import express from 'express'; const server = express(); server.get('/', asy…

importの解決でBrowserifyからのBabelify

ECMAScript6でクライアント側を書いてますが、極小のHello Worldレベルから一歩進むだけで壁が。JavaScriptの発展の歴史の中で大きなアプリケーションを作るためのパッケージ参照機構が様々用意されてたみたいですが、そこにまた大きな曲がり角が出てきちゃ…

ECMAScript6を楽に

少々触った程度ですが、もうWebStormからSublimeやBracketsといったテキストエディタ+へは戻れません。だいたい最近の流行をつかんだところで、もっと中身の方に移ろうと思います。 babeljs.io JSX書くのに、BabelがいるってんならECMAScript6もいいよねっ…

Reactのバージョンあがってた

Reactのバージョンがv0.14.0に上がってました。構成もいろいろ変わってる。。。3秒見るだけで変わってて、独立したJSXTransformerが無くなりJSXの逐次変換ではBabelが使われるようになり、グローバル変数としての"React"を"ReactDom"に代えて利用ケース毎に…

React向けにLinterを設定する

JavaScriptを書き、Reactに触れるにあたって、エディタをどうしようかと一回りしました。元々Javaな人なんでEclipseなどの統合開発環境でがっちりサポートされてきた身としてはテキストエディタだけでっていうのは不安です。不安なんで一年前には速攻でJetBr…

入門 React

入門 React ―コンポーネントベースのWebフロントエンド開発作者: Frankie Bagnardi,Jonathan Beebe,Richard Feldman,Tom Hallett,Simon HØjberg,Karl Mikkelsen,宮崎空出版社/メーカー: オライリージャパン発売日: 2015/04/03メディア: 大型本この商品を含む…

神風

子供の時から何がまずいって、夏休みの宿題(のようなもの)をサボりにサボってギリギリまで熟成させて言い訳も効かないぐらいにしてしまいます。そんな時は体も正直で、毎日時間になったからと就寝してもいろいろ心配で寝れなくなって来ます。ピークになると…

新COO招聘

6月より、学生時代からの古い友人である新井正広さんをGlabio, Inc.そして来るBayPOS, Inc.のCOOとして招聘しました。彼とは1996年の暮れに、Nifty ServeにDelphiのコミュニティを作る発起人グループとしてはじめて出会い、Delphi Users' Forum (通称FDELPHI…

BayPOS, Incがはじまるまでの個人史を振り返ってみた

サイオスとHotto Mottonoのプレナス、米国で飲食店向けITシステムの合弁会社news.mynavi.jp プレナスの「やよい軒」、年内に米国1号店 出店加速へサイオスと共同出資会社www.nikkei.com 5/18のプレナスおよびサイオス両社の取締役会にて、レストラン向けIT…

はじめよう!要件定義

このエントリはまさしく4/1に書きたかった。しかし今は米国に住んでるので時差がありちゃんと4/1に書くにはちゃんとしないと。日本時間の4/1かつ米国西海岸時間でも4/1。具体的には日本の4/1午後4時から4/2午前0時の間、こちらでは4/1午前0時から午前8時の8…

Rhodia webnotebook

散々iPadやAndroid Tabでメモ取ろうかとしてみたけど、結局Rhodiaに戻った。ロートルなのかな? 写真のとおりのRhodia webnotebookのA6横ドット罫というのを愛用してましたが、残りページ少なくなってきたので同じの買おうと思ったのですけど、モデルチェン…

Android Studio 1.1で変わった

Android Studioがすでに先週にアップデートされていたみたいですが気がつくのが遅れました。 今回のアップデートで地味に嬉しいのはOSX版の利用JDKが、従来の「1.6*」だけでなく「1.7+」も加わったこと。Apple配布のJDK1.6がOSと密着してたうえにYosemiteか…

RetrofitとJsoupでWebスクレイピング

Robolectricで書いたお試しコードですが、RetrofitでHTMLのスクレイピングをしてみました。HTMLのパーサーはJsoupを用いています。手元の実行環境はAndroid API16とRobolectric 2.4ですけど、サンプルは画面が無いのでほとんどバージョン関係なく動くと思う…

バージョン過渡期の混乱

Androidは新機能のバックポートが充実しているので古いAPIでも新OSの目玉機能は同様に使えたりして好感なのですが、その時ターゲットとするバージョンの選択に応じて複数方法が用意されており、逆に何を使ったらいいんでしょうか?という混乱があります。そ…