ES2015関連の英語を日本語に訳しておく
ViewComposerで渡すデータをControllerで渡したデータとマージする
View::composer(
'profile/*', 'App\Http\ViewComposers\ProfileComposer'
);
すごいよ、すごいよ。
具体的にはComposerServiceProviderを追加して、そこで弾込めするviewと、ロジックを書くComposerクラスを指定するという感じです。
詳しくはドキュメントを参照。
ServiceProviderを新しく作成したときは、config/app.phpのprovidersに追加するのを忘れずに。
それで、先日、大きなUI改修があって、いろいろ弾込めしないといけない事案が発生。
ViewComposer 使ってなかったら、もうげんなりしちゃうとこですが、そう今の私にはViewComposer があるんだぜっ!
だから全部使いそうな値はこっちに移してやるんだぜっ!
いでよ、超絶コピペ技巧!!
いやーいい汗かいたぜ。
と思ったのもつかの間、他の実装を進めていると、何やらデータがいろいろおかしい。
そしていろいろエラーが出ている。
ちゃんとControllerで設定してあるし、dumpしても値取れてるやん。
Viewでdump。
ファッ!?Controller の値とView の値がちがう。もしや呪いか!?
どうしよう、近くに教会がない。。
と思ったけど、私には思い当たることがあった。
そう、昨日の超絶技巧。
原因はきっとあれや。
あれー?蘭ねーちゃん、でもComposerの値ってController ので上書きされるんじゃなかったっけ?
そう書いてあった気がするんだけどなぁ(メガネキラーン)。
で、ドキュメントを確認したところ、Just before the view is rendered, the composer's compose method is called with the Illuminate\View\View instance.
つまり、viewがレンダリングされる直前にcomposeメソッドは呼ばれる。
なんだ書いてあるやん。しかもめっちゃ逆やん。 100万年前からそうだと思ってたけどね! というわけで、 Controllerでその変数設定してたら、そっちで上書きねーを実現するには、 以下3つの方法のどれかにする必要がある。 ・viewのデータをgetDataしてmergeする ・ComposerやめてCreatorにする(Creatorはレンダー直前じゃなくてViewがインスタンス化された直後に実行される) ・offsetExistsで、すでにkeyがあるか判定するviewのデータをgetDataしてmerge
view()->composer(‘partials.header’, function ($view) {
$with = array_merge([
'message' => 'This is a message on some page'
], $view->getData());
$view->with($with);
});
参考サイトComposerやめてCreatorにする
view()->creator('profile', 'App\Http\ViewCreators\ProfileCreator');
参考サイトoffsetExistsで、すでにkeyがあるか判定する
if($view->offsetExists('language_id')) {
$language_id = $view->offsetGet('language_id');
}
参考サイト
今回は設定するデータが多くて、すでにkeyがあるのか判定するのが面倒なので一番上のマージする方法を選択することにした。
ってここまで書いていて思ったんだけど、
ワイルドカード使ってるから同じディレクトリ配下のpartialなviewをいっぱい読み込んでいたら
全View分でデータ取ってきてマージしてってしてそう。。。
やっぱり弾込めするViewは細かく指定したほうが良さそうですね。
週明けにもう一度dumpしながら修正することにしよ。
ということで、皆様も便利なものを使うときは
使用上の注意をよく読み、用法・用量を守って正しくお使い下さい
じゃないと期限日直前に呪われます。
God bless you.
HTML5 Conference 2016 に行くよっ!
Sublime Textでタブ押したらスペ4入るようにする方法
どうも今月の更新頻度がやたら多くなってしまったベル子です。
先日のPG会は「読みやすいコード」についてでした。
そこでこんな話題がありました。
LaravelはPSR-2コーディングガイドライン準拠だから
> インデントには4つのスペースを使用し、タブは使用してはいけません。
とのこと。
ふがっ!!!
以前からtabとspaces4が混在しまくってしまうということがあって(私のコードにw)
気になっていたので先日のPG会のあとにいろいろ調べてみたら、
参考になるページを見つけました。
http://webkaru.net/dev/sublime-text-3-indent/
Sublimeだと
上部メニュー「Sublime Text」→「Preferences」→「Settings - User」で
// インデントの幅
"tab_size": 4,
// タブをスペースに変換
"translate_tabs_to_spaces": true,
を設定してやればいいっぽい。
もうタブなんて絶対入力できなくしてやればいいのである。
さらに、コード全体を切り取って、ショートカットキー「Commnad + Shift + V」で貼り付けるとインデントを反映して貼り付けてくれるそう。便利。
過去のタブも消し去ってしまえばいい。
PHPとかHTMLとかは単にタブかスペースか統一されていなくて
表示する環境によって崩れちゃうだけかもしれないが(それが大問題なんだけど....)
Stylusを書くときは塊のコード内で混在させるとコンパイルエラーが出てしまうので
結構、実害があって嫌だなと思っていたのであります。
でも、いちいちコピペするのは面倒だなーと思って、右下のSpaces:4のところを何気なくクリックしてみたら、「Convert Indentation to Spaces」という魔法のような機能があるではないですか!!
ということで、こんな感じのよくあるタブ&スペース混在のコードを作ってテストしてみます。
選択した状態で、長い棒のほうがタブで、点々のほうがスペースです。
ドン!!
わーすごーい!!
やったーやったよママン。
ということで、これからは気がついたらタブをスペ4に変更していこうかなと思いました。
いきなりいっぱいやると分けわかめなので、少しずつですが。
今までごめんね。他のPGの方。
君に愛称は必要ない
ついに、私が初めて買ったMacを廃棄に出すことにしました。
処理能力が低すぎて使い物にならなかったのですが、どうしても捨てられませんでした。私にとってそのMacは物ではなく、友達であり宝物だったからです。
いわゆる大福ってやつです。
2か月アキバに通いつめて、オタク店員に頭ごなしに反対されまくった末に、頑なに言うことを聞かずにゲットした一品です。
見事に誰一人としてMacをパソコン初心者が買うことに賛成してくれませんでした。
お客である私にほとんど説教する勢いで購買欲を削りにきていました。
今から思うと、それだけ言いたいことを言える世の中だったってことですね。
中には、サングラス、ウィッグ、豹柄ブーツという出で立ちのヤバさから、本気で心配してくれていた人もいたかもしれません。
それか、可愛い子が来たので、ツンデレ感を出してみただけの人もいたかもしれません。
とにかく、それが私の初めてのマイコンピュータでした。
いわゆるお嬢様学校に通っていたので、公立中学でもパソコンの授業がある時代に、パソコンを習わず、お茶だのお花だの礼儀作法だのを習うという生活をしていました。
そのせいでアメリカに留学した際は、他のアジアの子から相当バカにされました。
「日本ではパソコンのタイピングも学校で教えてもらえないの?」と。
他のアジアの国ではパソコンのタイピングの授業は普通にあるし、小学生くらいになったら大体おうちで練習するとのことでした。
まあ、あの子たちはセレブなのでそれが普通なのかは知りませんが。
当時、世界を知らなかった私は日本は先進国だからテクノロジーも優れていると思い込んでいたので、それはそれはショックだったし、恥ずかしかったことは言うまでもありません。
というのもアメリカの宿題の殆どが、パソコンを使って文書作成をするかスプレッドシートを作るかして提出というのが基本なので、タイピングができないと宿題ができません。
だから、他のアジア人の子を呼び出して、私が話すことを文字に起こしてもらうという感じで、宿題をやらなければいけなかったんです。そら嫌味くらい言ってやりたくなる面倒くささです。
もちろん日本のほうが先進的だと思うこともたくさんありました。
日本人が普通にケータイ電話を使っている頃、アメリカ人はポケベルを使っていました。
正直、ダサくて不便だなと思いました。パソコンは誰でも持ってるのに、ケータイを持っていない不思議。きっと恐ろしく高かったんじゃないかと思います。
あとはCDプレーヤーを使っている人が多くて、その頃は日本ではMDが主流だったので、随分古臭いもの使っているなという印象でした。きっとパソコンに音楽を取り込んでCDにするのが主流だったんでしょう。
憧れて行ったはずのLAは東京よりも少し田舎っぽくて、アメリカ人は想像よりもスタイリッシュではありませんでした。
私が辟易としていたふるさと東京は、思ってたほどダサくもつまらなくもなかったんです。
そんなこんなで、私は宿題を自分でやるためにパソコンのクラスを取ることにしました。
みなさんご存知のとおり、私は非常に努力家なので、放課後もひたすらタイピングの練習をしました。今まで代わりにタイピングしてくれてたアジア人の子たちにチャットの相手を頼んで、毎晩宿題そっちのけでf**kとlolの言い合いを続けたところ、すぐに高速ブラインドタッチを身につけることができました。
ありがとう、みんな。
そして日本に帰ってきて、自分で働いたお金で一番に買いたかったのが自分のパソコンでした。
そのパソコンで映像作品を作りたいと思っていたんです。
お金を貯めて一人暮らしを始めたときから、テレビとベッドしかない部屋の真ん中にパソコンを置くと決めていました。
そんなときに、あのiMac G4と出会ったのです。殆ど一目惚れでした。
それに映像を作るならMacのほうがいいんじゃないかと幼い自分なりに考えていたんでしょう。
アキバの店員と押し問答を繰り広げてMacと「Mac OS X パーフェクトマスター」をうちに連れて帰ってくることができました。
辞書並みに分厚いその本の頭から、徹夜で全ての機能を試していきました。後ろのほうはターミナルコマンドの解説だったのですが、何の疑問も持たずに全て解説どおりやってみました。
それも全ては「初心者がMacを買っても使いこなせない」と力説してきたオタク店員を見返すためだったと思います。
そういった点では彼に感謝しています。あの言葉がなかったら、あんなに必死で本を読んだりしなかったかもしれません。
それからというもの、私はベッドでは殆ど寝ないで、仕事から帰ってくるとパソコンで映像作品を作ったり、絵を描いたり、文章を書いたり、ウーハーをつなげて音楽を聴いたり、自宅サーバを立ててみたり、ホームページを作ったり、掲示板を作ったり、今振り返ると本当にくだらなくて誰にも見せられないようなものですが、そうやって毎晩いろんな新しいことをして遊ぶようになりました。
パソコンがやりたいので、当時、付き合っていた彼氏とも別れたくらいです。
仕事も、もっとMacが使えそうな印刷屋に転職しました。なのに、与えられた端末がWindowsだったので、本当に嫌だったことを覚えています。まず、右クリックの存在が反吐が出るほど嫌でした。マカーあるあるです。
まるで、大好きな彼氏がいるのに、毎日見ず知らずのおじさんの相手をさせられてるような気分です。
そういった意味で、今は使い慣れたMacを使わせてもらえる職場で、本当にうれしいです。
そんなこんなあんなそんなで、時は流れ、今のMacは3代目です。
今の私は、あの頃の私よりずっとずっとコンピュータでいろんなことができるようになりました。でも、あの頃のような情熱を持ってコンピュータに向かうことは、もう二度とないと思います。
そんな日々を一緒に過ごしたMacとも、そろそろ別れを覚悟するべきときが来ました。
使われないまま置いておかれて埃をかぶる毎日は彼もきっと嫌でしょう。
今は変色して黄ばんだ体ですが、彼を見るたびに初めて箱を開いたときの記憶が鮮明に思い出されます。
真っ白な体に青い画面。
モニターと胴体をつなぐピカピカの首。
透き通るモニターの縁。
マウスもキーボードもスピーカーもウーハーも全部お気に入りでした。
バイバイ、私のMac。
君には名前を付けなかったね。
今までありがとう。元気でね。
マテリアルデザインのモーションのドキュメントを翻訳してあげた
マテリアルモーション
マテリアルデザインの動きは、美しく流動的に、空間の関係、機能、および意図を説明するために用いられるものである。
動きはなぜ重要なのか?
動きは、どのようにアプリが構成されていて、何ができるのかということを示すことができる。
動きが提供するもの
- ビュー間での焦点のガイド
- もしユーザーがジェスチャーを完遂したら何が起こるのかのヒント
- 要素間での階層的、かつ空間的な関係性
- 裏で起こっていることから注意をそらすこと(コンテンツの取得や次のビューのロードなど)
- 特色、洗練さ、喜び
マテリアルはどのように動くか?
マテリアル環境は、重力や摩擦といった現実世界の力から得たインスピレーションを描くものである。 これらの力は、ユーザー入力が画面上の要素に影響する際や、どのように要素が相互に作用するかということを映し出すものである。
マテリアルなモーションの特徴
レスポンシブ
マテリアルはユーザー入力には素早く正確に反応する必要がある。
ナチュラル
マテリアルは現実世界にある力からインスパイアーされた自然な動きを表現する。
認識力がある
マテリアルはユーザーや周りにあるマテリアルを認識していて、オブジェクトに引き寄せられたりユーザーの意思に適切に反応できる。
意図的
正しい時に、正しい場所へユーザーの焦点を誘導する。
よいトランジッションを作る要素は?
動きはスピーディーに
必要以上にユーザーを待たせるべきではない。
動きは明確に
トランジッションは、明確で簡潔で統一感があるべきである。 一度にやりすぎるのは避けるべき。
動きは調和的に
マテリアル要素は速さ、反応性、意図によって統合される。 アプリケーションのモーション体験は、そのアプリケーション内で一貫している必要がある。
動きの結果
動きを使うことによる利点は、次の、マテリアルモーションを採用したアプリと、していないアプリの2つの例を見ることで確認できる。
※上記の翻訳は、個人的な翻訳であり、正確さを保証するものではありません。 あと、専門用語で言うところのベタ翻訳だから読みづらいとか、そういう苦情は一切受け付けない。 ではでは、またねーーー!!JSでObjectを配列にする様々な方法
var d = new Date();
こんなやつ(例は日付オブジェクト)です。
さらに言うとコンストラクタ関数を使って作る方法もあります。
よくJavaScriptオブジェクト指向プログラミング入門的なやつに出てくるやり方です。
function Car(make, model, year) {
this.make = make;
this.model = model;
this.year = year;
}
var mycar = new Car("Eagle", "Talon TSi", 1993);
でも、まだまだ不安でいっぱいなのでObjectが何なのかドキュメントを確認してみましょう。
もしかしたら、すごく分かりやすいかもしれないですよね!ワクワク。
オブジェクトを利用する
JavaScript において、オブジェクトはプロパティと型を持つ独立した存在まーーーーーさーーーーかーーーのーーーー いや、思っていたとおり、安定の全く理解不能な説明です。 一つだけ言えるのは、よく分からない文章をいくら眺めていても分かるようにはならないということ! これは私がエンジニアをはじめた頃から徹底していることですが、分からない文章の内容を調べあげるより、まずは最後まで読む、分からないまま実装を始める(w)、そしてから知りたいことを調べる、そして再度読む、そしてまだ分からないことを調べる、脱線する、また読む、実装する。 みたいな感じでやることです(徹底というわりに適当w)。 そしてJavaScriptのObjectを分かりづらくしている原因のもうひとつは、サーバとクライアントでデータをやり取りするときにJSON形式でやり取りしたりします。 このJSONというフォーマットとJSのObjectリテラルが非常に似ているから混乱してしまうのです。 (だいたいキーがダブルクォーテーションなのがJSONです。) そしてこのJSONはJSのObjectに変換ができます。
JSON.parse('{"p": 5}');
ObjectもJSONデータに変換できます。
JSON.stringify({ x: 5 });
ですね!
と、ここまでは前置きです。
これからが本題なのですが、Vue.jsを使うようになってからというかモダンJSを書くようになってから、Objectがいたるところに出てきます。
そんなObjectを配列にしたい!そんなふうに思うこともベル子にはあります。
調べてみたらObjectを配列にする方法にはいろいろあったので、またお得意のJS Binでご紹介しようと思います!!
一応コードも貼っておきます。
http://jsbin.com/zucigazori/edit?html,js,console
// ↓これはJS BinでES6使う用
/* jshint esnext: true */
var rgb = {r: 19, g: 79, b: 92};
// mapでやる方法
var rgb_1 = Object.keys(rgb).map(function (key) {
return rgb[key]; });
console.log(rgb_1);
// mapでキーの配列も作れる
var rgb_2 = Object.keys(rgb).map(function(key, index) {
return key;
});
console.log(rgb_2);
// ES7
// var rgb_3 = Object.values(rgb);
// console.log('rgb_3: ' + rgb_3);
// ES6のアローファンクション
var rgb_4 = Object.keys(rgb).map(key => rgb[key]);
console.log(rgb_4);
// Underscore.js
var rgb_5 = _.values(rgb);
console.log(rgb_5);
// jQuery
var rgb_6 = $.map(rgb, function(value, index) {
return [value];
});
console.log(rgb_6);
この中でベル子は、今回、最もスッキリ書けるES7記法で書いてみました。
というのも、Laravel ElixirでbrowserifyしてるいうことはBabelでトランスパイルしてるということでBabelがObject.valuesもPolyfillってくれるということです!!
OSSの恩恵ハンパないですね。
ではでは、突然おわりまする。
またねーーー★