フレームワーク

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... …