小林克也 Best Hit USA
- オンエア:2017-06-21
- Nack5
1位はゼッド & アレッシア・カーラのStay。
今日はビートルズのシー・セッド・シー・セッドが作られたとかディープ・パープルのリッチー・ブラックモア脱退とかジョージ・マイケルがソニーとの裁判で負けたとか。
あとキャプテン＆テニールの話。元々はビーチボーイズのツアーのメンバーだったという。
Love will keep us together ですよね。
初登場の曲はまだピントこないが、上位はあまり動きなし。
ジュリア・マイケルズって人はいろんな人に歌詞を提供してるけど、これがデビュー曲だって話とか。
イシューズね。
うーん。。。 全体的に、なんかもうちょっと違うタイプの曲はないのかな。。
K's Transmission 坂崎幸之助
- オンエア:2017-06-16
- Nack5
2曲目がジャクソン・ブラウンの孤独なランナー。
ライブ版だった。意外にガチャガチャとバンドバンドしてる音で、あーこんなんだっけと。
まあ、どうも突き抜けた感じがないんだよね、ジャクソン・ブラウンは。
その後坂崎幸之助は小学4年でビートルズにはまったという話から、それ以前の音楽という展開でプレスリー。
4年生は早いなー。
ませてる。
ん、本人61歳って言ったね。
その後クラプトンのチェンジ・ザ・ワールドがかかったけど、これがまたj-waveでかかるのとバージョンが全然違う。
ギターの音が。。。
後半はライブ盤の特集ってことでチューリップのLIVE!! ACT TULIP。
これまたロックしててびっくり。格好いい。
ローザ・ルクセンブルクのライブ・オーガストかと思った（笑。
がんばってーという観客の女子のかけ声の話で大爆笑。
山下達郎サンデー・ソングブック
- オンエア:2017-06-18
- 東京FM
本人のライブの曲特集。
夏への扉とか。
聴取率週間だから、その時は必ずライブの曲の特集にしてるような話ぶりであった。
なるほどこの番組を聴く人はなんだかんだいっても山下達郎の曲を聴きたい、聴けるだろう、と思って聞いてるのか。。
当たり前か。。。
SUGARって曲がギターバトル？
![夏への扉[新訳版]](https://images-fe.ssl-images-amazon.com/images/I/41i94BLdluL._SL160_.jpg "夏への扉[新訳版]")
- 作者: ロバート・A・ハインライン,小尾芙佐
- 出版社/メーカー: 早川書房
- 発売日: 2009/08/07
- メディア: 単行本（ソフトカバー）
- 購入: 35人 クリック: 274回
- この商品を含むブログ (127件) を見る
松任谷由実のYuming Chord
- オンエア:2017-06-16
- 東京FM
ユーミンの好きなブリティッシュロックの特集。
1曲目がポリスの孤独のメッセージ。
こないだのポール・マッカートニーの来日で会ってサインもらっちゃった話とか。
ポールの曲はウイングスの「死ぬのは奴らだ」。
ピンク・フロイドが好きだけど曲が長いのでラジオではかけられないとか。
長いったってねえ。どの辺の曲なのかな？ wish you were here とか？
あとエド・シーラン絶賛してた。シンガーソングライター、現代版エルトンジョン。
- アーティスト: Pink Floyd
- 出版社/メーカー: Pink Floyd Records
- 発売日: 2016/01/29
- メディア: CD
- この商品を含むブログを見る
かなりいまいちlaravel
うーん
macportで複数インストールしたphpのバージョンを切り替える
忘れてたが。
こうでした。
sudo port select php php70
結局、世の中のvim使いはMBPをどうしたんですかね
まあ、また、新しくMBP出たようですが、15インチはタッチバーのみで、escキーがない。
どうしたもんですかねえ。
MBP Touchbar + VIM = Nightmare?
13インチだとなあ、画面小さいんだよなあ。
APPLE MacBook Pro with Retina Display (2.7GHz Dual Core i5/13.3インチ/8GB/128GB/Iris Graphics) MF839J/A
- 出版社/メーカー: アップル
- 発売日: 2015/03/13
- メディア: Personal Computers
- この商品を含むブログを見る
vue.jsのコンポーネント、あまりありがたみを感じられない
コンポーネントという機能があり、これは強力そうだなー、って感じではあるのですが、いざやってみるとこんな感じで。
<div id="demo1"> <input type="text" v-model="message"> <sample-component v-bind:msg="message"></sample-component> <input type="text" v-model="message2"> <sample-component v-bind:msg="message2"></sample-component> </div>
// こっちが子
var SampleComponent = Vue.extend({
template: `<div> {{msg}}</div>`,
props: ['msg']
})
// これが親
var demo = new Vue({
el: "#demo1",
data: {
message: '',
message2: ''
},
components: {
'sample-component': SampleComponent
}
})
どうもなんかデータの受け渡しが面倒になっただけで何のありがたみも感じられない。
分ければ分けるほど物事が複雑になって分かりにくくなる。
- 出版社/メーカー: バンダイ
- 発売日: 2015/10/31
- メディア: おもちゃ＆ホビー
- この商品を含むブログを見る
vue.js で複数ファイルアップロード、プレビュー表示
画像を登録してファイルアップロードという処理だが、登録画面からファイル一個だけ登録すればいい、という話はあまりなくて、なんだかんだで複数登録したいんだがどうすればいいのかという話になる。
なのでこういうのは結局複数登録に対応していないと話にならないのだ。
というわけでHTML側は、こんな感じで。
<div id="app"> <div> <h2>Select an image</h2> <input type="file" @change="onFileChange"> </div> <div v-if="images"> <ol> <li v-for="(image, index) in images"> <h2>{{image.name}}</h2> <img :src="image.thumnail" /> <button @click="images.splice(index, 1)">Remove image</button> </li> </ol> <button @click="submitImage">Submit image</button> </div> </div>
v-for でループさせるわけだが、その中のHTMLマークアップは適当に書いてます。
<li>が基本単位でそれで繰り返し表示にしようということですね。
で、ループを (image, index) in images というように書くと、このループのindex（今何番目か）が取得できる。
それを使って、Removeクリックで、splice(index, 1) とすることで、配列の最初からindex番目の要素を1個削除しようということですね。
js側は、
var app = new Vue({
el: '#app',
data: {
images: []
},
methods: {
onFileChange: function(e){
var files = e.target.files || e.dataTransfer.files;
this.createImage(files[0]);
},
createImage(file) {
var image = new Image();
var reader = new FileReader();
var vm = this;
var obj = {};
reader.onload = function(e) {
obj.thumnail = e.target.result;
obj.uploadFile = file;
obj.name = file.name;
vm.images.push(obj);
};
reader.readAsDataURL(file);
},
submitImage: function(e) {
var formData = new FormData();
formData.append("number", "123456");
for (var i = 0; i < this.images.length; i++) {
formData.append('yourimg' + i, this.images[i].uploadFile);
}
var config = {
headers: {
'content-type': 'multipart/form-data'
}
};
axios
.post('post.php', formData, config)
.then(function(response) {
// response 処理
console.log(response);
})
.catch(function(error) {
// error 処理
})
}
}
});
data は全体は images という配列になっていて、その一個一個が name(ファイル名), thumbnail(画像プレビュー用データ), uploadFile(画像そのもの)というオブジェクトから成っている。
createImage ではファイル情報からオブジェクトを生成して、それをimages配列に追加している。
配列に追加すると、画面に表示される。
remove ボタンクリックでその配列から要素を削除すると、画面も消える。
サーバー側にサブミットする時はformDataに一つずつappendしてpostする。
なんとも、@click="images.splice(index, 1)"これだけで消せてしまうってのがすごいよー。 jquery的にボタンのparentのliの、。。なんて考えなくてよいという。。。
- アーティスト: ザ・ビートルズ
- 出版社/メーカー: EMI Catalogue
- 発売日: 2015/12/24
- メディア: MP3 ダウンロード
- この商品を含むブログを見る
vuejs でFormData つかってファイルアップロード
ついでなので、ファイルをpostするところまで追加してみる。
<div id="app"> <div> <h2>Select an image</h2> <input type="file" @change="onFileChange"> </div> <div v-if="image"> <h2>{{imgName}}</h2> <img :src="image" /> <button @click="removeImage">Remove image</button> <button @click="submitImage">Submit image</button> </div> </div>
var app = new Vue({
el: '#app',
data: {
image: '',
imgName: '',
uploadFile: ''
},
methods: {
onFileChange: function(e){
var files = e.target.files || e.dataTransfer.files;
if (!files.length) {
return;
}
if (!files[0].type.match('image.*')) {
return;
}
this.createImage(files[0]);
this.uploadFile = files[0];
},
createImage(file) {
var image = new Image();
var reader = new FileReader();
var vm = this;
reader.onload = function(e) {
vm.image = e.target.result;
};
reader.readAsDataURL(file);
vm.imgName = file.name;
},
removeImage: function(e) {
this.image = '';
this.imgName = '';
},
submitImage: function(e) {
var formData = new FormData();
formData.append("number", "123456");
formData.append('yourimg', this.uploadFile);
var config = {
headers: {
'content-type': 'multipart/form-data'
}
};
axios
.post('post.php', formData, config)
.then(function(response) {
console.log(response);
// response 処理
})
.catch(function(error) {
// error 処理
})
}
},
});
うーん、なんかすっきりしないが。 まあ、でも、結局はファイルはサーバー側でなんとかするしかないわけだし、多かれ少なかれこんな感じになるのでは。
vuejsとFileAPIでファイルアップロードのプレビューまで
File APIなんてものが使えるようになってたのね。 IE10以上、ならいいんじゃないかなー。
で、こちらを参考に。
<div id="app"> <div v-if="!image"> <h2>Select an image</h2> <input type="file" @change="onFileChange"> </div> <div v-else> <img :src="image" /> <button @click="removeImage">Remove image</button> </div> </div>
var app = new Vue({
el: '#app',
data: {
image: ''
},
methods: {
onFileChange: function(e){
var files = e.target.files || e.dataTransfer.files;
if (!files.length) {
return;
}
this.createImage(files[0]);
},
createImage(file) {
var image = new Image();
var reader = new FileReader();
var vm = this;
reader.onload = function(e) {
vm.image = e.target.result;
};
reader.readAsDataURL(file);
},
removeImage: function(e) {
this.image = '';
}
},
});
恐ろしく簡単に実現できる。すげえなあ。
Kindle Paperwhite 32GB、マンガモデル、Wi-Fi 、ブラック、キャンペーン情報つきモデル
- 出版社/メーカー: Amazon
- 発売日: 2016/10/21
- メディア: エレクトロニクス
- この商品を含むブログ (3件) を見る
vue.js 他のモーダルmagnificPopupと組み合わせる場合
こんな感じのmagnificPopupが組み込まれている場合、
<a class="pop-up" href="confirm.php"><img src="./close.png" alt=""/></a>
$(function(){
$('.pop-up').magnificPopup({
type: 'iframe',
disableOn: 200,
mainClass: 'mfp-fade',
removalDelay: 200,
preloader: false,
fixedContentPos: false
});
});
confirm.php で
<div class="bwrap"> <a href="#" v-on:click="closeModal">OK</a> <a href="#" v-on:click="cancel">キャンセル</a> </div>
としておいて、
var app = new Vue({
el: '.bwrap',
methods: {
closeModal: function(){
console.log('ok');
parent.$.magnificPopup.close();
},
cancel: function(){
console.log('canceled');
parent.$.magnificPopup.close();
},
},
})
こんな感じかなー。いずれにしろmagnificPopupのiframeは極力避けた方がいい。
