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

2000名以上の日本人英語学習者のデータからあなたに必要な学習時間を計算してくれるWebアプリ、作りました

エンジニアインターン生として働いているサウスピークにて、新たにWebアプリを作成しました。公開できるものとしては初のアプリですね。 どんなものか 英語学習時間シミュレーター 目標の英語力と現在の英語力から必要な英語時間を算出するWebアプリです。 …

"KeyError: key not found"

問題 Railsにて、新たに設定した環境変数が機能しない: myproject/config/initializers/constants.rb:13:in `fetch': key not found: "CONSTANT" (KeyError) 原因 RailsのPreloaderであるspringを入れていたため、環境変数が更新されていなかった。 解決法 $…

Rails5 API + devise でユーザーの認証と作成機能を実装した API を作成する

2017/04/26 curl部分に間違いがあったので修正、ついでにログインの必要な動作を追記 目標 Rails v5.0.0 から追加されたapiオプションを使い、ユーザーの作成と認証機能を実装したベーシックな Rails API を作る rails new まずはプロジェクトを作成します $…

Rails5: データベースがrakeタスクからdropできない時の対処法

問題点 Rails5になってrakeタスクのdrop動作に大きな変更があったらしく, Rails4からアップデートして初めての rake db:drop がエラーを吐いてしまう. $ bundle exec rake db:drop Mysql2::Error: Error dropping database (can't rmdir './db_name', errno:…

"Array values in the parameter are deprecated" エラー

問題と原因 Railsのサーバーやコンソール実行時次のような警告が出る場合: $ rails server Array values in the parameter are deprecated. Please use a String or nil. An Array was passed in from bin/rails:3:in `load' . . . この場合原因はbin/spring…

はじめてのUnity (C#)

参考: http://catlikecoding.com/unity/tutorials/clock/ シンプルな時計を作る 完成品はこちら: まずはプロジェクトの作成: プロジェクトの作成が完了したら、Create > Create Emptyから新しく"Clock"という名でゲームオブジェクトを作成する。また、Create…

はじめてのAurelia

http://aurelia.io Aureliaとは次世代UIフレームワーク。AngularJS、Reactに比べて影が薄い。どうなっていくんだろうか?チュートリアルをやってみた感想としては、HTTPリクエストとルーティング周りがクリーンで素敵。 以下、チュートリアルの適当な和訳。 …

webpack, React Hot Loader + Browsersync でクロスブラウジング+ホットリロード開発

React Hot Loader + Browsersync React Hot Loader を使えば、エディタを保存した時点で、React コンポーネントの変更が検知され、ブラウザの更新が自動で行われます。さらに、React Hot Loader はHotModuleReplacementPlugin(HMR) を使用しているため、更新…

Babelを使うとアロー関数内のthisがundefinedになる

ややこしい問題に直面したので、メモしておく。 問題 次のように、jQueryでコールバック関数にアロー関数を用いたスクリプトを記述する。 $("item > title").each(() => { let title = $(this).text(); console.log(title); }); このES6の構文ををBabelでES5…

Reduxのテストファースト開発(第七回 サーバー・アプリケーションとの接続)

前回 uraway.hatenablog.com Setting Up The Socket.io Client クライアントのReduxアプリと、サーバーのReduxアプリをどのようにつなげるのか。 サーバーはすでにsocket接続を受信し、voting stateを放出する準備がある。他方、クライアントはRedux storeを…

Reduxのテストファースト開発(第六回 クライアントサイドのRedux)

前回 uraway.hatenablog.com Introducing A Client-Side Redux Store Reduxはサーバーアプリケーションですでに使用し、その素晴らしさを確認した。次に、ReduxがReactアプリケーションとどのように作用するのかを見よう。 サーバーの時と同じように、アプリ…

Reduxのテストファースト開発(第五回 クライアント・アプリケーション)

前回 uraway.hatenablog.com The Client Application クライアントアプリケーションでもReudxを使用する。Redux自体がどのように働くかはすでに見た。Reduxは、Reactとどのように合わさるのか、Reactアプリのデザインにどのように影響するのか見ていこう。 C…

Reduxのテストファースト開発(第四回 Socket.io サーバーのセットアップ)

前回 uraway.hatenablog.com Setting Up a Socket.io Server このアプリケーションは別のブラウザアプリのサーバーとして働く。そのため、クライアントがサーバーと相互通信する方法が必要となる。 自身のあるいは他人のアクションがすぐに反映されるのを見…

Reduxのテストファースト開発(第三回 Reduxの導入)

前回 uraway.hatenablog.com Introducing Actions and Reducers アプリのコア関数はあるが、Reduxではこれらの関数を直接呼び出すことはしない。関数と外側の世界の中間層となるのが Action だ。 Action はstateの変化を描写するシンプルなデータ構造である…

Reduxのテストファースト開発(第二回 投票アプリケーションのロジック)

前回 uraway.hatenablog.com Writing The Application Logic With Pure Functions アプリケーションロジックに移ろう。アプリのコアは、木構造と新しい木構造を生み出す一連の関数から成り立つ。 Loading Entries まずはじめに、このアプリケーションは投票…

Reduxのテストファースト開発(第一回 前準備)

teropa.info こちらの要約。流石に長過ぎるので、キリの良い所で分割する。 A Comprehensive Guide to Test-First Development with Redux, React, and Immutable Reduxは怖くない。ReduxはとてもシンプルなライブラリなのでAPIをすべて学ぶことは難しいこと…

ElectronとReact-Reduxではてなブログに投稿できるマークダウンエディタ作った

Electron Markdown Editor powered by React-Redux いまのところ特徴としてはこんな感じ はてなブログエントリーの投稿 はてなブログエントリーリストの取得 Evernoteとの連携とか画像アップロード機能とかいろいろやりたい。あとキャッチーなネーミングがほ…

Electronから簡単にGithub OAuth認証するライブラリ作った

github.com 前に作ったelectron-oauth-twitterの応用。 このライブラリを使えば簡単にGithubのアクセストークンを取得できます。 uraway.hatenablog.com インストール npm install electron-oauth-github 使い方 アプリを登録 Client ID と Client Secretを取…

ElectronのMacOSデスクトップアプリUIキット「Phtoton」とReact

Photonを使えば、 もともとGithub製のエディタAtom用に作られたElectron(http://electron.atom.io/)で作られたアプリを手早く綺麗に仕上げることができます。 使い方 こちらからPhotonをダウンロードして、 自分のElectronプロジェクトフォルダに入れておきます…

React Redux勝手にチュートリアル(TODO List)

今回は基本的機能としてtodoの追加と削除ができるtodoリストを作成します。 前回と同様ジェネレーターからアプリのフォルダを自動生成するところから始めます。 詳しくは前回の記事参照。 uraway.hatenablog.com まずはindex.js js/index.js import React from …

Redux勝手にチュートリアル(Counter)

最近流行りのReduxをより深く理解するために、 「分かりやすい」を目指して勝手にチュートリアルを書いてみます。 自分的には結構複雑に見えたんですが、 他のフレームワークやアーキテクチャに慣れていると簡単なのでしょうか? 参考: http://qiita.com/ogomr/…

react-social-sharebuttons(Facebook) 日本語ドキュメント

react-social-sharebuttons(Facebook) Simple React components for Facebook Button. インストール npm install --save react-social-sharebuttons 使用例 import { FacebookButton } from 'react-social-sharebuttons'; class App extends React.Component…

React + Electronでエディターを作りたい

github.com Electronを使えば、 HTML + CSS + JavaScriptでデスクトップアプリが作れるらしい。 エディタはAtomを使っているけど、 簡単なドキュメントを書くだけならもっと軽いものを使いたいなあと思っていたので、 Reactを使ってマークダウンエディタを作り始…

react-social-sharebuttons(Linkedin) 日本語ドキュメント

Simple React components for Linkedin Button. インストール npm install --save react-social-sharebuttons 使用例 import { LinkedinButton } from 'react-social-sharebuttons'; class App extends React.Component { render( const url = "http://urawa…

react-social-sharebuttons(GREE) 日本語ドキュメント

react-social-sharebuttons(GREE) Simple React components for GREE Button. インストール npm install --save react-social-sharebuttons 使用例 import { GREEButton } from 'react-social-sharebuttons'; class App extends React.Component { render() …

React Twitter Timelineモジュール作りました

github.com 使い方 まず、こちらで新しくwidgetを作成し、 表示されるコードの中のdata-widget-idの値を取得します。 <a class="twitter-timeline" href="https://twitter.com/****" data-widget-id="your widget ID">****</a> 取得したwidget IDをwidgetIdプロパティとして次のようにコンポーネントに渡します。 import React from 'react'; import ReactDOM from …

react-social-sharebuttons(Feedly) 日本語ドキュメント

react-social-sharebuttons(Feedly) Simple React components for Feedly Button. インストール npm install --save react-social-sharebuttons 使用例 import { FeedlyButton } from 'react-social-sharebuttons'; class App extends React.Component { ren…

react-social-sharebuttons(Hatena Bookmark) 日本語ドキュメント

react-social-sharebuttons(HatenaBookmark) Simple React components for HatenaBookmark Button. uraway/react-social-sharebuttons: Simple Re... - GitHub インストール npm install --save react-social-sharebuttons 使用例 import { HatenabookmarkBu…

react-social-sharebuttons(LINE) 日本語ドキュメント

react-hatenabookmark-buttonとreact-line-buttonは、 react-social-sharebuttonsに統合されました。 react-social-sharebuttons react-social-sharebuttons(LINE) Simple React components for LINE Button. このLINEボタンはスマートフォン向けです。 PCユー…

JavaScript初学者が1時間でNode.jsのReactLINEボタンモジュールつくった

uraway.hatenablog.com 前回と同じ要領で今度はLINEボタンのモジュールを作ってみました。 uraway/react-line-button: Simple React comp... - GitHub モジュールをまとめました。 こちらを使用してください。 uraway/react-social-sharebuttons: Simple Re... …

JavaScript初学者がNode.jsのReactはてなブックマークボタンモジュールつくった

uraway/react-hatenabookmark-button · GitHub たった40行で作れてしまいました。 scrpitタグ作って必要なものを突っ込んでるだけです。 以下ソースコード。 モジュールをまとめました。 こちらを使用してください。 uraway/react-social-sharebuttons: Simple Re…

Uncaught ReferenceError: require is not defined 対処法まとめ

前にも記事を書きましたが、少し勉強した中で他にも解決法を見つけたのでまとめておきます。 さて、クライアントサイドのJavaScriptではrequireを使ってNode.jsのモジュールを読み込むことはできません。したがって以下の様なツールを組み込む必要があります…

いつまでimport Reactしているつもり? Webpack-ProviderPlugin

1日に何回このようなimport宣言を書いていますか? import React from 'react' import ReactDOM 'react-dom' import $ from 'jquery' ファイルごとにいちいちimportするのはめんどくさいですよね。書き忘れるとエラーも起こすし。 そこで活躍するのがWebpack…

React + Reails のUniversalアプリケーションの構築: Part 1

下記の記事の翻訳です。翻訳記事内の翻訳文以外のコンテンツ、ソースコード、画像の著作権は原作者にあります。 Universal React with Rails: Part I — Medium Author Alex Fedoseev reactive goofy on rails Planning the application この記事では、React…

Webpack + React + ES6の最小構成を考えてみる。

Webpack + React + ES6 Webpack + React + ES6の最小構成を考えてみる。 この記事は明石家サンタを見ながら書かれました。 (注: 2016/9/25 内容を大幅に改定、WebpackやReactの最新版に対応) 関連した過去記事 Webpack入門編 uraway.hatenablog.com Gulp + B…

Reduxまとめ(2)超訳

Actions Actionsはアプリからstoreにデータを送る情報のペイロード。storeに対する唯一のソースだ。 新しいtodo itemを追加することを表すactionの例を示す。 const ADD_TODO = 'ADD_TODO' { type: ADD_TODO, text: 'Build my first Redux app' } actionsは…

快適な開発環境を目指して(4)

fluxでの開発を見据えて、gulpを使った開発環境を作ってみた。 (Gulp + Browserify + ES6 + Babelify + Watchify + Brower-sync) 前提知識 gulp ES6(ES2015) 材料 gulp...自動タスク管理ツール Browsersync...ブラウザの自動リロード browserify...依存物を…

React-nativeで作ったiOSアプリを実機テストする

React-nativeで作ったiOSアプリを、実機テストしてみようとしたら、こんなエラーが出た。 AppDelegate.mを見てみる。 /** * Copyright (c) 2015-present, Facebook, Inc. * All rights reserved. * * This source code is licensed under the BSD-style lice…

React.jsとES6でTodoListアプリを作ってみる v2.0.0

uraway.hatenablog.com前に作ったTodoListをアップデートしてみました。 主な変更はチェック機能と削除機能の追加です。入力されたvalueをTodoListのデータの一つであるtextで取得できず苦労しました。 最初からデータのtextも、valueと名付けていればこんな…

ES6版ReactでTodo Listを作ってみる

これが、See the Pen Todolist by uraway (@uraway) on CodePen.ES6版だとこうなるSee the Pen TodoApp(ES6) by uraway (@uraway) on CodePen.でも、これだと不便なので、手を加えてみよう。 次回へ続く…

Stack Overflow で英語で質問してみる

Stack Overflow とは: Stack Overflow is a question and answer site for professional and enthusiast programmers. It's built and run by you as part of the Stack Exchange network of Q&A sites. With your help, we're working together to build a…

ES6版React.jsでBMI calc を作ってみる

BMIカテゴライズ 参考: Calculate Your BMI - Metric BMI Calculator See the Pen BMI calc by uraway (@uraway) on CodePen.bmiCalc関数によって、BMI数値を計算し、stateを更新して、BMI数値をカテゴライズする。トリガーを書き忘れてて数十分詰まった。 …

ES6版React.jsでCowntdown Timerを作ってみる

See the Pen countdown timer by uraway (@uraway) on CodePen. 参考: reactjs - React.jsでFormを扱う - Qiita Forms | React タイトル通り。 class CountdownTimer extends React.Component { constructor() { super(); this.tick = this.tick.bind(this)…

ES6版React.jsでClick counterを作ってみる

tutorialが難しいので、それより簡単なClick counterをES6で作ってみた。 気をつける点は、初期値はconstructorで定めることと、コールバック関数でオブジェクトが変なところを参照している時にはbindをしてあげること See the Pen Hello World by uraway (@…

React.jsで機能付きタイマーを作ってみる

uraway.hatenablog.com 前記事でサンプルコードを見ながらタイマーを作りました。さすがに寂しいので、start,stop,reset機能のボタン(button)を自分なりに作ってみました。 ボタン参考: React Componentでthisがundefinedになる問題の解決策初心者すぎてこ…

React.jsでタイマーを作ってみる

React.jsを使って、タイマーを作ってみます。 A JavaScript library for building user interfaces | React参考: Top-Level API | React ReactのAPIを眺めてみた - Umi Uyuraのブログ reactjs - React.jsのState - Qiita JavaScript - React.jsのチュートリ…

React.jsでHello world!

そういえばやってなかったので、Hello worldしてみます。 Getting Started | React

Tutorial|Reactでリアルタイムコメントボックスをつくる

Tutorial | Reactを参考にして、リアルタイムコメント機能をつくってみます。翻訳しながら少しずつ進めていきます。