Laravel 5.4 + Vue 2.1 でSPAアプリケーション作成チュートリアル - Qiita
何となく Laravel ＋ Vue.js の使い方が分かってきた。 自分の頭の整理を兼ねて、書き残しておく。 ※ 追記 2019/02/26 現在では Laravel も Vue も若干古いバージョンですが、基本的な考え方は同じなので、参考になれば幸いです。 処理の流れ ブラウザ → Laravel: SPAのViewをリクエスト（初回のみ） ブラウザ: Vue を初期化、View （仮想DOM） を描画 Vue → Laravel: XHRでデータをリクエスト Vue → ブラウザ: クライアントサイドでのルーティング Laravel の役割 Webサーバー。起点となるSPAのViewを初回だけ返す。 APIサーバー。サーバーサイドでデータを処理し、JSONを返す。 Vue の役割 Viewの描画。変数のバインド、繰り返し、イベント検知など。 Router。 vue-router を使
関Javaのフロントエンド勉強会でRiot.jsの発表をしました。 #kanjava | nocono
2017/02/18(土) 開催の下記のイベントで、Riot.jsを紹介するLTをやりました。 [関ジャバ] フロントエンド初心者勉強会 in 大阪 - connpass Quiver のプレゼンモードで発表したためSpeakerdeckなどへのアップロードができないので、発表内容はこの記事に直接載せておきます。 Riot.js 自己紹介 Abe Asami “きの子 ” フリーランスプログラマ http://nocono.net/ @aa7th Scala、Andorid(Java/Kotlin) 今日の内容 今の案件でRiot.jsを使っているので紹介します。 採用の経緯 Webアプリの動的な部品をちょっとだけ作りたい JQueryでゴリゴリ書きたくない 大げさなJSフレームワークは使いたくない そこで試してみたのがRiot.js http://riotjs.com/ Riot.jsと
Facebookの競合他社はReact.jsが使えない？
React v16リリースと共にMITライセンスへ https://facebook.github.io/react/blog/2017/09/26/react-v16.0.html#mit-licensed 16系だけでなく、すぐに移行できない人向けに、15系の主要バージョンもMITライセンスに変更されました。 2017/09/24追記 近日リリース予定のReact v16にて、ライセンスをBSD + PatentsからMITに変更予定とのPOSTがありました。 We're relicensing React, Jest, Flow, and Immutable.js under the MIT license. https://t.co/3XD0z49UsS — React (@reactjs) 2017年9月22日 但しまだGitHubでLICENSE*ファイルの変更やPATENTS
フロントエンドで使ってるものがあまり変わってない - No Regrets in Bathing
自分のスタックはあまり変わっていない。ほとんど10年のツケを払っていない。学習能力が低いせいでもあり、選んだスタックがバージョンを重ねている成果でもある。 毎回使う フレームワーク：Vue.js 消耗、などの意見が散見されたが、べつに今でも便利に使えている。 browserifyやwebpackがあれば便利だけど、なくてもいい、ってバランスが好き データフローは特に考えない。状態がそこにあるので書き換えれば良い。 あまり頭を使わなくていいのが助かる Reactの考え方は好きなのだけど、よっしゃFluxやるぞって気持ちにはならず、Reactのみでよしなにやるソリューションが広まったらいいなと思う。 ビルドシステム： browserify / watchify substackの作るものはどれも品質が高いので、もうsubstack製品だけ使っていればいいやという気持ちになりがち。余計な処理が全
DarkroomJS – JavaScriptで画像切り抜き
画像加工を行うと言えばローカルで画像編集ソフトウェアを使うのが思い浮かびますが、最近では随分Webベースで行えるようになっています。複雑な加工はまだまだですが、ちょっとした加工であればWeb上で行う方が手軽だったりします。 今回はその一つ、DarkroomJSを紹介します。位置を決めて切り抜きするという加工をシンプルに手早くできるようになります。 DarkroomJSの使い方 DarkroomJSはCanvasタグを使って画像加工を行います。加工後はそのまま切り抜かれた形で保存もできるようになっています。今は写真コンテンツも大きくなっているので、それをユーザサイドで加工してもらうための方法として使ってみるのが良さそうです。 DarkroomJSはJavaScript製、MIT Licenseのオープンソース・ソフトウェアです。 DarkroomJS MattKetmo/darkroomjs
t_wadaさんが提案するJavaScript速習コースを実際に履修してみた - WEB SALAD
はじめに もう2ヶ月前の話なのですが、日本のTDD第一人者で、最近はpower-assert-jsの開発などJS界隈でも活躍されている@t_wadaさんが、Twitterでこんな提案をされていました。 『JavaScript: The Good Parts』と『WEB+DB PRESS Vol.87 第1特集』のあわせて250ページ未満でES6までの全体像をつかむ速習コースのご提案 http://t.co/doPQ7V4enw http://t.co/NKTGz3syk7— Takuto Wada (@t_wada) 2015, 8月 10 ちょうどこの頃、初めてのgemを作り終え、Ruby以外の言語に対する学習欲が高まっていたので、この提案に乗っかってみることにしました。 本エントリでは、この速習コースを実際に履修した感想と、結果どうなったのかを書きたいと思います。 履修前の状態 ずっと
Three.js + Oimo.js で物理演算してみるテスト - CX's Hatena Blog
WebGL アドベントカレンダーということで、今日は、3D 物理演算のライブラリ「Oimo.js」を紹介したいと思います。 以前、Three.js + Cannon.js でゴゴゴとドドドを物理演算してみるテストにて、少し紹介しましたが、有名どころの JavaScript の 3D 物理演算ライブラリとして ammo.js（Demo） Cannon.js（Demo） oimo.js（Demo） と、いったライブラリがあります。 それぞれ、一長一短な部分があるのですが、個人的には、Oimo.js がファイルサイズがコンパクトなのとパフォーマンス的に優れているのでオススメです。 なお、Oimo.js は、Saharan さんの ActionScript 3.0 版物理演ライブラリ「OimoPhysics」を lo-th さんが、JavaScript にコンバージョンしたものになります。 拙作で
CORS(Cross-Origin Resource Sharing)について整理してみた | DevelopersIO
ブラウザからAmazon S3に直接ファイルをアップロードしたい 先日、Amazon S3にファイルをアップロードするWebアプリを作ろうとして色々調べていたところ、S3にCORSという仕様のクロスドメインアクセスの設定をすることによって、ブラウザから直接S3にアップロードをする方法にたどり着きました。ただ、この方法を使うにあたってはCORSというクロスドメインアクセスの仕様をきちんと理解しておいた方が良さそうでしたので、まずはCORSについて自分なりに整理してみました。 なお、弊社の横田がCORSとS3についての記事を以前書いていますので、S3のCORSサポートに関する概要を知りたい方はそちらをご覧下さい。 CORS(Cross-Origin Resource Sharing)によるクロスドメイン通信の傾向と対策 CORS ブラウザでAjax通信を行う際には、同一生成元ポリシー(Same
シンプルでかつ最高のJavaScriptプロファイラ sjsp を作りました！ ― Webアプリケーションが複雑化する中でプロファイラに求められるものとは何か - プログラムモグモグ
あらすじ Web技術が複雑になる中で、JavaScriptのプロファイリングをとる方法とは。 プロファイリングを取るためのコードを手で書いてみましょう。 とてもシンプルで、かつ最高のJavaScriptプロファイラ sjsp を作りました。 本当にあった怖い話 上司 「とにかくJavaScriptのコードを速くしてくれ」 私 「分かりました、速くします」 (次の日) 私 「いいプロファイラがないなら作ればいいじゃない」 同じチームの人 「えっ？」 私 「最高のJavaScriptプロファイラ作ったよ」 同じチームの人 「「えっえっ？？？」」 私 「早速使ってみたらこことここが遅いって分かったよ」 同じチームの人 「「「この子は一体…」」」 JavaScriptのプロファイリングの難しさ 近年、Webブラウザーの処理速度は著しく向上し、その可用性の高さから、アプリケーションのプラットフォーム
IE8でアップロードに失敗する問題 - モーグルとカバとパウダーの日記
とあるWebアプリでIE8からだとアップロードが出来ない、という相談を受けました。 javascriptというかjQueryを利用して、ajaxでファイルをアップロード出来るのですが、IE8だと動かないというものです。 javascriptのソースを調べてみると、FormDataというクラスが利用されており、これはいわゆるHTML5なクラスのため、IE9以前だと使えないということがわかりました。 IE9以前でこういう用途の場合だとiframeを使って送る手法で実現するようです。 IE9以前でもアップロード行えるようにするjQueryプラグインは以下のようなものがありました。 jQuery File Upload Demo jquery.upload-1.0.2.js 今回自分は、よりシンプルな jquery.upload.js をベースに修正して利用したのですが、最近はメンテされていないよ
俺のJSライブラリの世界観(2014末版) - Qiita
http://qiita.com/advent-calendar/2014/frontrend 概論 ここ近年のモダンJSは特に理由がなければcommon.jsのrequireスタイルで記述され、webpack/browserifyでビルド/読み込むことを前提にしてよい。今やビュー層を除いてブラウザとnodeのライブラリの境界は非常に曖昧である。 識者諸君においては常にどちらの環境でも読み込めるようなライブラリを提供するように心がけることを切に願う。 今日はライブラリの名前しか出さないんで各自ググるように。 立場 サーバサイド~ゲームプログラミング出身node寄りフロントエンドエンジニア このサイトのスタッフだけど他のことに手一杯でQiitaのフロントはまだそんなにいじってない すまんな 他ってなんだろうな 言語 CoffeeScript TypeScript 最近DDDっぽい構成を目指し
【2014】海外で話題のjsライブラリ/フレームワークまとめ76選 - Qiita
HackerNewsやProductHuntなどで今年話題になったjsライブラリ/フレームワーク一覧です。 備忘録として個人でまとめていましたが、けっこう使えそうなものもあったので、Qiitaにまとめてみました。 ＊vue.jsのようなメジャーなものは省いています。 ・Metricsgraphics.js D3の時間軸を必要とするグラフだけに特化したjsライブラリ D3って色々できるけど実際そんなに使いこなせてない人はこっちの方がいいかも！ ・intro.js ささたつさんの記事でおなじみのサイト上で動作するチュートリアルを簡単につくることが出来るライブラリ ・Seriously.js リアルタイムでのWeb用ビデオのコンポジター。 After EffectsやNukeを参考に作られ、高品質なエフェクトを適用できるだけでなく、映像をよりダイナミックに、そしてインタラクティブなものにすること
一定時間で繰り返す（setTimeout）－JavaScript入門
HOME JavaScript入門 一定時間で繰り返す（setTimeout） 前のページではsetInterval()を使ったタイマー設定について見ました。 このページではもう一つのタイマー設定方法、setTimeout()について説明していきます。 setTimeout()を使ったサンプルスクリプト setTimeout()は設定時間後に関数を呼び出す命令文で、 それ自体では繰り返しは起こりません。 例えば以下のスクリプトをHTMLのBODY内に書いてみてください。 3秒後にメッセージが表示されて終わりになります。 <form> <input type="button" value="Timer" onclick="setTimeout('mes()',3000)"> </form> <script> function mes() { alert("3秒経ちました！"); } </sc
LAMPに代わる構成として注目のMEANスタックの基礎知識とインストール、ひな型作成
LAMPに代わる構成として注目のMEANスタックの基礎知識とインストール、ひな型作成：MEANスタックで始めるWebアプリ開発入門（1）（1/3 ページ） MEANスタックを用いたWebアプリの開発方法について紹介していく連載。初回はMEANスタックの特徴と構成要素MongoDB、Express、AngularJS、Node.jsの概要、インストールの仕方とひな型の作成方法を解説。 連載目次 今でもよく使用されていますが、以前からWebアプリ開発ではLAMP環境がよく使用されていました。LAMPとは、一般的なWebアプリを開発するのに人気の高いオープンソースソフトウェアを組み合わせたもので、以下を用いたシステムのことです。それぞれの頭文字を取って「LAMP」と呼ばれています（参考）。 OS：Linux Webサーバー：Apache HTTP Server データベース：MySQL プログラ
AngularJSを使ったWebアプリのアーキテクチャ設計 - Qiita
AngularJSは公式で分かりやすいチュートリアルが用意されているし、日本語の記事も増えてきたし、けっこう簡単に使い始めることができるんじゃないかと思います。 でも、チュートリアルやサンプルはクライアントサイドオンリーなことが多くて、サーバーサイドも含めたWebアプリを作ろうと思うと、どういう構成にすればいいのか迷うのではないでしょうか？（僕がそうでした） 最初は試行錯誤していたのですが、書籍やネットの記事を読んだりGitHubで見つけたアプリを真似たりしているうちに、どういう構成にすればいいのかだんだん見えてきたので、解説してみたいと思います。 SPA 最近、SPA（Single Page Applicationまたは Single Page Web Application）という言葉をよく耳にするようになりました。 SPAとは、最初のページだけ通常のWebアプリと同じようにサーバーか
ファイルダウンロード完了後に画面遷移などをjavascriptで行う - nabehiro ブログ
レアケースですが、PDFファイルダウンロード後にページの画面遷移(再読込)を行いたいケースがありました。 javascript(setInterval) と Cookie を利用するとファイルダウンロード後に処理を行うことができます。 サンプル form submit でファイルダウンロードし、ダウンロードが完了した後に alert を出します。(画面遷移したい場合は、location.hrefなどで) サーバサイドのファイルダウンロード処理の中では cookie({ name:"downloaded", value:"yes", path:"/"}) を発行します。 ※jquery.js, jquery.cookie.js を使用している前提。 <html><body> <form> <input type="submit" value="ダウンロード" /> </form> <scri
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
anime.js
続 クロスドメインで使う XMLHttpRequest と CORS の話 | 日頃の行い
http://chibinowa.net/notebook/js/pjax-fragment.html
IBM Developer
