モダン焼きの起源
いきなり横道にそれますが、情報って埋もれがちなので…
モダン焼きは戦後の神戸から生まれたお好み焼きで、加納町三丁目辺りにあったお好み焼き屋の女将がそばを載せて焼いたのが発祥。それが当たって大繁盛！そのお好み焼きの呼び名は無かったんだけど、常連のお客さんが「神戸のこの地ならモダン」ってことでいつしかお客さんたちが“モダン焼き”と呼ぶようになり、それが「モダン焼き」の起源となりました。
大繁盛したので寮も備え、住込み店員さんを何人も雇っていたそうです。店のそとには飲用水の水道を設置して、地域の貧しい人のために水💧を汲めるようにしたんだとか。さらに地域に役立ついろんなものを提供したり提案して、街の人々からとても愛された、そんな店、そんなお店の店主ご夫婦だったそうです。
でも「モダン焼きはうちが発祥」「いやうちが発祥」とあっちこっちで謳っているよね？
それはこの店から独立した人たちか、上手に真似た店（確か大阪？「大阪でどうしてモダンなの？」って考えてみてね）。
その後、お店は廃業（だって稼いだお金を元手に息子が他の商売したら超大当り!）したので、懐かしく話してくださったその方は「それでいいんじゃない」🤗…さすが太っ腹ｗ
（2018.9.3追記：モダン焼き発祥の謎に更に迫る話を聞けたので）
戦後、米軍払い下げのアイスキャンディーメーカーを手に入れ、アイスキャンデー作って売り出すとバカ売れ！場所も丁度良くて神戸で遊ぶついでの憩いにピッタリ。でも売れるのは夏場だけ…『冬に商売できるものないかな〜』と考えて、大阪のお好み焼き屋に弟子入り。そこでしっかり仕込んでもらって、お好み焼き屋も始めたそうです。それで思いついたのが、そば載せお好み焼きって訳。これが凄まじく当たって…
そこまで聞いて質問「ってことはおばあちゃんの弟子入り先ってぼてぢゅうじゃないの？」と聞きますと「お好み焼き屋にアイスキャンデーあるのなんでとおばあちゃんに聞いたときに教えてもらった話だからねぇ。知らないねぇ。」とのこと。
ということは、、、後はおばあちゃんの親切心（大人の都合）のようです。
そんな話を思い出しながら、今どき(2016年春から現在)のモダンなJavascriptとjqueryの書き方に従った部品を書き溜めつつ共有しておきます。
(2018.10.23追記)その店名がわかりました。そのお好み焼き屋の名前は「ハトヤ」。神戸市電の停留所が近くにあったそうです。
input button
<input type="button">でボタン作る方法はあちこちに書いてあるけど、どれもID指定。
でも本当に必要なのは、ボタンを沢山生成してどれか一つをクリックしたら、それぞれに違ったアクションさせたい感じですよね。
そうなるとclass指定という選択肢になりますが、下記では.favoriteと指定。そしてHTML5のdata要素で個別に値を渡すように書いてあげれば色々操作できますよ。ついでにajax以下もモダン例にしておきました。
$(document).on('click', '.favorite', function(){
var id = $(this).data('fvrtId');
var api = "/api/favoriteReg";
action.clickFavorite(id,api);
return false;
});
var action = {
clickFavorite:function(id,uri){
$.ajax({
url: uri,
type: 'post',
data: {
fvId: id
},
datatype: 'json',
scriptCharset: 'utf-8',
})
.done (function(rsp) {
if (rsp.result === 1) {
alert('大好き！');
location.reload();
} else {
alert('好きなんだけど、ちょっと変じゃない');
}
})
.fail (function(rsp) {
alert('好きかもしれないけど、なんか変だよ');
});
}
};
見慣れない書き方ですか？
var act = {name:function(id){
...
}};
じゃ、慣れていきましょう！この書き方の場合、act.name(id);で動きます。
そしてボタンはこう書いておきます。
<input type="button" value="お気に入り" class="favorite" data-fvrt-id="1234567890">
これ↑をループで回してdata属性の中に動的にidを渡すなりすればイイんじゃないでしょうか。
data属性のdata-fvrt-idのハイフンに注目。jqueryで指定した値を取得するとき、
これは$(this).data('fvrtId');となります。キャメルケースになりますよ。
これを$(this).data('fvrt_id');にしたければ、
data属性をdata-fvrt_idにすればよいです。
え？これが原因でハマってましたか？よくあることです。これで一つまた頭の具が増えた感じですね。
お好み焼きはソースが命！そばもいい具合じゃないでしょうか。
<input onclick="...">なんてもう今どき使いませんよ。そのソース賞味期限切れです。
$.getJSON()
JSONファイルでのやり取りがベーシックな今、これをパクっと食べて、そこから必要な値を取り出し、配列にして返却ってやりたくないですか？
やりたいですよね〜。
その方法です。
niceGetJson:function(){
var values = [];
$.ajaxSetup({async: false});
$.getJSON('/json.js', function(names) {
$.each(names, function (i, name) {
if(name.ja) {
names.push(name.shimei);
}
})
$.ajaxSetup({async: true});
});
return names;
}
これを
var namesArray = action.niceGetJson();
なんて書いてあげれば、配列で受け取れます。
これの肝は、$.ajaxSetup({async: false});と$.ajaxSetup({async: true});この２つで$.getJSON()をサンドイッチしてあげること。これをやらないと値が返ってきません。
ajax通信は非同期通信なので、jsonデータを取れていなくてもどんどん進み、値が空ということになります。それで上記でサンドイッチして、同期化させて進むようにすることで、欲しい値が返ってくるという具合。
えっ？ 動かないって？
そりゃそのままパクっても動きませんって。これは上の続きですから。
var action = {
clickFavorite:function(id,uri){
色々書いた
},
niceGetJson:function(){
$.getJSON(この件);
}
};
でどうです？動きましたか。
こうすることで、変数名をごちゃごちゃにすることなくまとめられます。
ねっ、おいしそうでしょ〜。
二重送信防止のアイディア
ダブルクリックの癖が刷り込まれている人々に［送信］ボタンを清く正しく美しく謳歌してもらうのは至難の業。
JavascriptとかjQueryで色々と独創的な二重送信を発生させない実装が紹介されてるけど、僕の口にはなんだか合わない。
それで作ってみました。
<script>
$(document).on('click', '#exe', function(){
$("#exe").prop('disabled', true);
$('form').submit();
});
</script>
<h1>二重送信させない</h1>
<form action="" method="post" id="form">
<input type="submit" value="送信" id="exe" name="exe">
</form>
一応<input>でtypeはsubmitにしていますが、これなら送信はJS側で実行することになるので、<button>エレメントでいい感じにすることも可能ですよ。味付けは自分好みがよろしいかと。
ボタン押したら送信させたいけど…
送信したい値は１つ。でもレイアウト決まってるところでhtmlソースをごちゃごちゃ書いてレイアウト崩れるの心配しながらするのって、かたち崩れるのやだし見た目も味わいだし。
やっぱり美味しく食べたいです。
JSで作ろうかな〜って思ってたら、超素敵なシンプルコードの先人がおりました！
【JS】ボタンを押してSubmitする←ディスアピア
これ参考にしてJQueryで書いてみました。
<script>
$(document).on('click', '#mode', function(){
var uri = $(this).data('uri');
var mode = $(this).data('mode');
if ( confirm('モードシフト')) {
act.send(uri, mode);
};
return false;
});
var act = {
send: function (uri, mode) {
$("<form>", {
action: uri,
method: 'post',
style: 'display:none',
id: 'send'
}).appendTo('body');
$("<input>", {
type: 'hidden',
name: 'mode',
value: mode
}).appendTo('#send');
$('#send').submit();
}
};
<script>
<body>
...
<button id="mode" data-uri="https://hoge.fuga/mode_change" data-mode="1">アクティブ！</button>
これで、受け取った先で$_POST['mode']に値が入ってくるので（この場合は1）、それをどうするかの処理を書くといいね。
そう言えば、マヨネーズまぜまぜのオーロラソースってのあるけど、あれは自分で混ぜていくから🌪️オーロラみたいにマーブルな感じ🍥を楽しむのであって、混ぜ終わった完成品はオーロラソースじゃないぞって呼ぶな！邪道だ！！
続く…
なんか作ったら続き書きます。
参考にした記事
jQuery使いが知っておくべき8つのjQueryテクニック
一貫性のある慣用的なjavascriptの書き方
私の中のJavaScriptの進化
https://qiita.com/mosa_siru/items/e0b6dc8c2dc05198f639
https://qiita.com/syobochim/items/120109315f671918f28d
https://qiita.com/shizuma/items/d561f37f864c3ebb5096
https://qiita.com/tomoya_kashifuku/items/30522f1ae729daa8191b