2017年03月10日 16時51分
何番煎じかわかりませんが探した限り思った感じの拡張が見つからなかったので自分で作りました。
名前を付けてフォームの入力内容を保存・復元できます。
テスト入力などに活躍すると思うので使ってください。
Remember form inputs
https://chrome.google.com/webstore/detail/fcolhfpojmepceidnkkannbfpegihmhl/publish-accepted?hl=ja
2016年01月11日 19時16分
流れが速すぎてWebの情報がすぐ古くなる界隈なので環境構築に手こずったのでメモ。
オフィシャル見るのが確実なんだろうけど…
|
1 2 3 4 |
npm init npm install --save-dev babel-core babel-loader babel-preset-es2015 babel-preset-react babel-preset-stage-0 npm install --save-dev webpack npm install -g webpack-dev-server |
.
..
package.json
webpack.config.js
src/
src/main.js
src/hello.jsx
src/world.jsx
dist/
dist/bundle.js
dist/index.html
node/modules/省略
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
// webpack.config.js module.exports = { entry: __dirname + "/src/main.js", output: { path: __dirname + "/dist", filename: "bundle.js" }, module: { loaders: [ { test: /\.jsx?$/, loader: "babel-loader", exclude: /node_modules/, query: { presets: ["es2015", "stage-0", "react"] } } ] } }; |
|
1 2 3 4 5 6 7 8 9 10 |
// src/hello.jsx import React from 'react'; class Hello extends React.Component { render() { return <h1>Hello</h1> } } React.render(<Hello/>, document.getElementById('hello')); |
|
1 2 3 4 5 6 7 8 9 10 |
// src/world.jsx import React from 'react'; class World extends React.Component { render() { return <h1>World</h1> } } React.render(<World/>, document.getElementById('world')); |
|
1 2 3 4 |
// src/main.js import Hello from './hello.jsx'; import World from './world.jsx'; |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<!-- dist/index.html --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Hello React</title> </head> <body> <div id="hello"></div> <div id="world"></div> <script src="bundle.js"></script> </body> </html> |
|
1 |
webpack-dev-server |
下にアクセス。
※ 最後のスラッシュが必須なことに注意
http://localhost:8080/webpack-dev-server/
ファイルを編集すると勝手にリロードされる。とても便利。
2015年12月10日 00時20分
※2015/12/10 このサイトで実行するリンクを追加
これはクソアプリ Advent Calendar 10日目の記事です。
学生時代に作った数あるクソアプリを披露しようとしたんですが、メディアがZipで読み取る環境が無いという残念な状況だったので新たに作成することにしました。
それが下のコードです。
|
1 2 3 4 5 6 7 8 9 |
(function(){ var t = document.querySelectorAll("*"), k, u; for(k in t){ u = document.createElement('span'); u.textContent = "?"; t.item(k).appendChild(u); } })(); |
NEW! このサイトで実行してみる ※複数回押すと?に?します
ブラウザのConsoleに貼り付けて実行してください。
下のような感じで全ての閉じタグの直前に?します。
?が少ないほどタグが少ないことになります。
余計な?が増えすぎないように気をつけましょう。
2015年08月25日 01時19分
久々にJavaScriptのソースとにらめっこする機会があった。
そこで気になったのが非同期処理の連結方法。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
function func1() { var flag = getAsyncFuncStatus(); swtich (flag) { case 1: // 未完了時はリトライ setTimeout("func1()", 1000); break; case 2: // 完了時の処理 // ここで非同期処理が終わった処理を記述 doSomething(); // 次の非同期処理へ func2(); break; } } funciton func2() { var flag = getAsyncFuncStatus(); swtich (flag) { case 1: // 未完了時はリトライ setTimeout("func2()", 1000); break; case 2: // 完了時の処理 // ここで非同期処理が終わった処理を記述 doSomething(); // 次の非同期処理へ func3(); break; } } // func3も似たようなコードで記述 func1(); |
こんな感じで非同期処理が書かれていた。
非同期処理の完了部分に次の非同期処理の呼び出しが記述されていて見通しが悪く、
なんとかしたかったので検索してみたら速攻でdeferred, Promise辺りの単語にあたった。
既にjQueryを使っていたのでjQueryのdeferredを使ってみることにした。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 |
function func1() { var dfd = $.Deferred(), proc = function() { var flag = getAsyncFuncStatus(); switch (flag) { case 1: setTimeout("proc()", 1000); break; case 2: // ここで非同期処理が終わった処理を記述 doSomething(); dfd.resolve(); break; } }; proc(); return dfd.promise(); } function func2() { var dfd = $.Deferred(), proc = function() { var flag = getAsyncFuncStatus(); switch (flag) { case 1: setTimeout("proc()", 1000); break; case 2: // ここで非同期処理が終わった処理を記述 doSomething(); dfd.resolve(); break; } }; proc(); return dfd.promise(); } // func3も似たようなコードで記述 func1() .then(func2()) .then(func3()); |
非同期処理の連結が外に出せて非常にスッキリした。
func1とfunc2の順番が逆になっても変更箇所は最後の呼び出し部分だけで済むし良い感じ。
とか思って実行してみたらfunc1の完了を待たずにfunc2とfunc3が実行されてしまう。
すっごい悩んで調べまくったらjQueryのバージョンが1.7でthenの挙動が1.8以上と違ったのが原因だった。
徒労感が半端ない理由で余計疲れた。
jQuery.Deferredを使うんだったら最低でも1.8以上にしないとネット上によく書かれているthenによる非同期処理の直列繋ぎはできないので要注意。
2014年03月12日 15時07分
Lionのsafari（5.1.7）でjQueryのclick()関数を実行したらTypeError: ‘undefined’ is not a function (evaluating xxxx.click()と出た。
エラーメッセージでググると以下のページを発見。
「言語定義はclick()関数はHTMLInputElementにのみだよ」って感じかな。
確かにaタグに対して実行していたので納得。
でもsafariもバージョン上げるとエラー出ないんだよ。
納得いかないまま該当箇所に関してはjQuery使わずにevent作って対応。
|
1 2 3 4 5 6 7 8 |
// 対象オブジェクト取得 var element = $('#foo'); // イベント作成 var click_ev = document.createEvent("MouseEvent"); // 初期化 click_ev.initEvent("click", true, true); // 発火 element.dispatchEvent(click_ev); |
IEの旧バージョンがディスられまくっててsafariの旧バージョンが皆に忘れされれているのは母数の少なさに加えてOSの安さがある。
この症状報告した会社の人もLionから無償でアップデートできるんだから特別な理由がない限りさっさと最新OSに変えて欲しい。