フレームワーク
よく使いそうな Context と Fragment についてメモ。 Context そもそも、 Context はあらゆる階層のコンポーネント間で、データを共有する機能を持ちます。 しかし、v16.3 以前の React における Context には以下の注意書きがありました。 If you want your…
問題 Railsにて、新たに設定した環境変数が機能しない: myproject/config/initializers/constants.rb:13:in `fetch': key not found: "CONSTANT" (KeyError) 原因 RailsのPreloaderであるspringを入れていたため、環境変数が更新されていなかった。 解決法 $…
2017/04/26 curl部分に間違いがあったので修正、ついでにログインの必要な動作を追記 目標 Rails v5.0.0 から追加されたapiオプションを使い、ユーザーの作成と認証機能を実装したベーシックな Rails API を作る rails new まずはプロジェクトを作成します $…
問題点 Rails5になってrakeタスクのdrop動作に大きな変更があったらしく, Rails4からアップデートして初めての rake db:drop がエラーを吐いてしまう. $ bundle exec rake db:drop Mysql2::Error: Error dropping database (can't rmdir './db_name', errno:…
問題と原因 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…
参考: http://catlikecoding.com/unity/tutorials/clock/ シンプルな時計を作る 完成品はこちら: まずはプロジェクトの作成: プロジェクトの作成が完了したら、Create > Create Emptyから新しく"Clock"という名でゲームオブジェクトを作成する。また、Create…
http://aurelia.io Aureliaとは次世代UIフレームワーク。AngularJS、Reactに比べて影が薄い。どうなっていくんだろうか?チュートリアルをやってみた感想としては、HTTPリクエストとルーティング周りがクリーンで素敵。 以下、チュートリアルの適当な和訳。 …
React Hot Loader + Browsersync React Hot Loader を使えば、エディタを保存した時点で、React コンポーネントの変更が検知され、ブラウザの更新が自動で行われます。さらに、React Hot Loader はHotModuleReplacementPlugin(HMR) を使用しているため、更新…
ややこしい問題に直面したので、メモしておく。 問題 次のように、jQueryでコールバック関数にアロー関数を用いたスクリプトを記述する。 $("item > title").each(() => { let title = $(this).text(); console.log(title); }); このES6の構文ををBabelでES5…
Electron Markdown Editor powered by React-Redux いまのところ特徴としてはこんな感じ はてなブログエントリーの投稿 はてなブログエントリーリストの取得 Evernoteとの連携とか画像アップロード機能とかいろいろやりたい。あとキャッチーなネーミングがほ…
github.com 前に作ったelectron-oauth-twitterの応用。 このライブラリを使えば簡単にGithubのアクセストークンを取得できます。 uraway.hatenablog.com インストール npm install electron-oauth-github 使い方 アプリを登録 Client ID と Client Secretを取…
今回は基本的機能としてtodoの追加と削除ができるtodoリストを作成します。 前回と同様ジェネレーターからアプリのフォルダを自動生成するところから始めます。 詳しくは前回の記事参照。 uraway.hatenablog.com まずはindex.js js/index.js import React from …
最近流行りのReduxをより深く理解するために、 「分かりやすい」を目指して勝手にチュートリアルを書いてみます。 自分的には結構複雑に見えたんですが、 他のフレームワークやアーキテクチャに慣れていると簡単なのでしょうか? 参考: http://qiita.com/ogomr/…
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…
github.com Electronを使えば、 HTML + CSS + JavaScriptでデスクトップアプリが作れるらしい。 エディタはAtomを使っているけど、 簡単なドキュメントを書くだけならもっと軽いものを使いたいなあと思っていたので、 Reactを使ってマークダウンエディタを作り始…
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) Simple React components for GREE Button. インストール npm install --save react-social-sharebuttons 使用例 import { GREEButton } from 'react-social-sharebuttons'; class App extends React.Component { render() …
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) 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(HatenaBookmark) Simple React components for HatenaBookmark Button. uraway/react-social-sharebuttons: Simple Re... - GitHub インストール npm install --save react-social-sharebuttons 使用例 import { HatenabookmarkBu…
react-hatenabookmark-buttonとreact-line-buttonは、 react-social-sharebuttonsに統合されました。 react-social-sharebuttons react-social-sharebuttons(LINE) Simple React components for LINE Button. このLINEボタンはスマートフォン向けです。 PCユー…
uraway.hatenablog.com 前回と同じ要領で今度はLINEボタンのモジュールを作ってみました。 uraway/react-line-button: Simple React comp... - GitHub モジュールをまとめました。 こちらを使用してください。 uraway/react-social-sharebuttons: Simple Re... …
uraway/react-hatenabookmark-button · GitHub たった40行で作れてしまいました。 scrpitタグ作って必要なものを突っ込んでるだけです。 以下ソースコード。 モジュールをまとめました。 こちらを使用してください。 uraway/react-social-sharebuttons: Simple Re…
前にも記事を書きましたが、少し勉強した中で他にも解決法を見つけたのでまとめておきます。 さて、クライアントサイドのJavaScriptではrequireを使ってNode.jsのモジュールを読み込むことはできません。したがって以下の様なツールを組み込む必要があります…
1日に何回このようなimport宣言を書いていますか? import React from 'react' import ReactDOM 'react-dom' import $ from 'jquery' ファイルごとにいちいちimportするのはめんどくさいですよね。書き忘れるとエラーも起こすし。 そこで活躍するのがWebpack…
Webpack + React + ES6 Webpack + React + ES6の最小構成を考えてみる。 この記事は明石家サンタを見ながら書かれました。 (注: 2016/9/25 内容を大幅に改定、WebpackやReactの最新版に対応) 関連した過去記事 Webpack入門編 uraway.hatenablog.com Gulp + B…
fluxでの開発を見据えて、gulpを使った開発環境を作ってみた。 (Gulp + Browserify + ES6 + Babelify + Watchify + Brower-sync) 前提知識 gulp ES6(ES2015) 材料 gulp...自動タスク管理ツール Browsersync...ブラウザの自動リロード browserify...依存物を…
React-nativeで作ったiOSアプリを、実機テストしてみようとしたら、こんなエラーが出た。 AppDelegate.mを見てみる。 /** * Copyright (c) 2015-present, Facebook, Inc. * All rights reserved. * * This source code is licensed under the BSD-style lice…
uraway.hatenablog.com前に作ったTodoListをアップデートしてみました。 主な変更はチェック機能と削除機能の追加です。入力されたvalueをTodoListのデータの一つであるtextで取得できず苦労しました。 最初からデータのtextも、valueと名付けていればこんな…
これが、See the Pen Todolist by uraway (@uraway) on CodePen.ES6版だとこうなるSee the Pen TodoApp(ES6) by uraway (@uraway) on CodePen.でも、これだと不便なので、手を加えてみよう。 次回へ続く…