2016-10-03 16:18:00
タグ機能をフルスクラッチで開発しようと思っていたのですが、便利なReact Componentが沢山見つかったのでそちらを利用してみました。
環境
React
Babel
Browserify
React Tag Autocomplete
npm
導入npmでReact Tag Autocompleteを導入します。
npm install --save react-tag-autocomplete
インクルードの仕方は色々あるかと思いますが、今回の環境ではrequireを使います。
var ReactTags = require('react-tag-autocomplete...
プログラミング
react
2017-03-31 16:01:00
概要Laravelで作っているアプリケーションに管理画面だけSPAを実装しようとした時、Laravelのディレクトリ構成とnginxのconfファイルをちょっとだけいじった話です。初めての試みだったのでメモがてらまとめました。
Laravelのディレクトリ構成バックエンドで完結するアプリをbackend-app、フロントエンドで完結するアプリをfrontend-appとし、ディレクトリを大きく分けました。backend-appではユーザー側の画面やAPIやバックエンドの処理を担当し、フロントエンドはSPAの管理画面を担当しています。ユーザー側の画面もfrontend-appの範疇な気がしますが...
インフラ
laravel
react
nginx
2016-10-03 15:57:50
先日、Laravel5.3ではフロントエンドフレームワークとしてVue.jsをデフォルトとして採用するのが決定したようです。
普段、フロントエンドはjQueryで開発しているのですが、最近の流行りに乗じてReactを使ってみることにしました。LaravelならVue.jsにしとくのが無難かなと考えたのですが、Reactが今一番伸びがある（らしい）のでReactにしました。AngularJSとで迷ったのですが、あくまでjQueryの代わりになるかつViewだけ担当するものを考えていたのでReactを選択しました。
それぞれのFWの技術的な利用価値について説明できるほどフロントエンドマンではないの...
プログラミング
laravel
react
2016-10-03 21:17:47
LaravelでReactをフロントエンドのフレームワークとして採用しているのですが、APIを設計する必要がでてきたのでやってみました。
やること
ResourceControllerをつくってデータを出力するだけのAPIをつくる
API公開を見越した認証用ミドルウェアを実装する
やらないこと
Restの説明
APIデータの更新や削除
Ajaxでのデータの取得と出力
環境
Laravel5.2
Resource Controllerをつくる職人さんの朝は早い・・・php artisan make:controller HogeController --resource
職人が仕事するとこ...
プログラミング
api
laravel
react
rest
2016-10-03 21:15:10
Laravel+React+SuperagentでAjaxを実装していたら、500エラーがでて、「いやいやまさかTokenじゃないっしょ〜 そんなの知ってるもん〜」と捻くれていたら、CsrfTokenが原因でした。
解決方法ヘッダにTokenを含める方法もありますが、ハードコーディング感があるので、VerifyCsrfToken.phpで該当URLを除外する方法がスマートだと思うのでそちらを記載します。
<?php
namespace App\Http\Middleware;
use Illuminate\Foundation\Http\Middleware\VerifyCsrfTo...
プログラミング
ajax
laravel
react
superagent
2016-10-03 21:07:08
表題の通りです。Laravel+React+SuperagentでAjaxなフォームを実装します。
AjaxライブラリとしてSuperagentを採用しているのは、jQueryから脱却したいのと、jQueryのAjaxよりも分かりやすかったからです。プロミスとかいう難しい概念があるらしいですが、それは横に置いておいてもとりあえずは使えそうです。
Web標準の観点からするとFetchAPIがイケてるらしいのですが、各ブラウザベンダーの実装にばらつきがあるようなので避けました。
フロントエンドってつくづくカオスだなーとボヤキつつも話を進めていきたいと想います。
やること
LaravelでAPIを用...
プログラミング
laravel
react
ajax
superagent
2016-10-03 21:06:21
ちょっと前の記事で、bowerでReactの環境をセットアップするという話をしたのですが、npmでReactのパッケージ管理をしたほうがスマートだし、ES6かけるようになっといた方がこの先お得よねということで環境を再構築しました。
ES5からES6で書き方が色々変わるのでその辺の改修がちょっと面倒でしたが、さほど難しいことはないので気負いしなくとも良さそうです。
環境
Laravel5.2・・・5.1とか5.2ユーザーはelixirのバージョンを最新（5.3のそれと同じ）に上げとくといいかもです。
Browerify(Elixirについてるやつ)
React
ES6
Reactをnpmで用意...
プログラミング
react
javascript
npm
webpack
es6
browerify
es5
2017-07-22 23:08:23
概要Rubel
数ヶ月前くらいからOSSとしてソースコードをgithubに公開しながらCMSを開発しています。何の目的で始めたかについてダラダラとかきます。
OSSとはOSSの定義についてWikipediaを参照してみます。
オープンソースソフトウェア（英: Open-source software, 略称: OSS）とは、ソースコードが利用可能で、著作権保持者がどんな目的のためでもソフトウェアを、学習、変更、そして配布するための権利を提供するというライセンスに基づいたソフトウェアである[1]。オープンソースソフトウェアは何れも共同で開発されている。オープンソースソフトウェアは最も著名なオー...
ポエム
oss
github
cms
laravel
react