忍者ブログ
プログラマ、ララ・ベル子さんのゆるふわ奮闘記。

[PR]

×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

君に愛称は必要ない

ついに、私が初めて買ったMacを廃棄に出すことにしました。
処理能力が低すぎて使い物にならなかったのですが、どうしても捨てられませんでした。私にとってそのMacは物ではなく、友達であり宝物だったからです。

私が初めて買ったMacはiMac G4。
いわゆる大福ってやつです。
2か月アキバに通いつめて、オタク店員に頭ごなしに反対されまくった末に、頑なに言うことを聞かずにゲットした一品です。
見事に誰一人としてMacをパソコン初心者が買うことに賛成してくれませんでした。
お客である私にほとんど説教する勢いで購買欲を削りにきていました。
今から思うと、それだけ言いたいことを言える世の中だったってことですね。
中には、サングラス、ウィッグ、豹柄ブーツという出で立ちのヤバさから、本気で心配してくれていた人もいたかもしれません。
それか、可愛い子が来たので、ツンデレ感を出してみただけの人もいたかもしれません。

とにかく、それが私の初めてのマイコンピュータでした。

いわゆるお嬢様学校に通っていたので、公立中学でもパソコンの授業がある時代に、パソコンを習わず、お茶だのお花だの礼儀作法だのを習うという生活をしていました。
そのせいでアメリカに留学した際は、他のアジアの子から相当バカにされました。
「日本ではパソコンのタイピングも学校で教えてもらえないの?」と。
他のアジアの国ではパソコンのタイピングの授業は普通にあるし、小学生くらいになったら大体おうちで練習するとのことでした。
まあ、あの子たちはセレブなのでそれが普通なのかは知りませんが。

当時、世界を知らなかった私は日本は先進国だからテクノロジーも優れていると思い込んでいたので、それはそれはショックだったし、恥ずかしかったことは言うまでもありません。
というのもアメリカの宿題の殆どが、パソコンを使って文書作成をするかスプレッドシートを作るかして提出というのが基本なので、タイピングができないと宿題ができません。
だから、他のアジア人の子を呼び出して、私が話すことを文字に起こしてもらうという感じで、宿題をやらなければいけなかったんです。そら嫌味くらい言ってやりたくなる面倒くささです。

もちろん日本のほうが先進的だと思うこともたくさんありました。
日本人が普通にケータイ電話を使っている頃、アメリカ人はポケベルを使っていました。
正直、ダサくて不便だなと思いました。パソコンは誰でも持ってるのに、ケータイを持っていない不思議。きっと恐ろしく高かったんじゃないかと思います。
あとはCDプレーヤーを使っている人が多くて、その頃は日本ではMDが主流だったので、随分古臭いもの使っているなという印象でした。きっとパソコンに音楽を取り込んでCDにするのが主流だったんでしょう。
憧れて行ったはずのLAは東京よりも少し田舎っぽくて、アメリカ人は想像よりもスタイリッシュではありませんでした。
私が辟易としていたふるさと東京は、思ってたほどダサくもつまらなくもなかったんです。

そんなこんなで、私は宿題を自分でやるためにパソコンのクラスを取ることにしました。
みなさんご存知のとおり、私は非常に努力家なので、放課後もひたすらタイピングの練習をしました。今まで代わりにタイピングしてくれてたアジア人の子たちにチャットの相手を頼んで、毎晩宿題そっちのけでf**kとlolの言い合いを続けたところ、すぐに高速ブラインドタッチを身につけることができました。
ありがとう、みんな。

そして日本に帰ってきて、自分で働いたお金で一番に買いたかったのが自分のパソコンでした。
そのパソコンで映像作品を作りたいと思っていたんです。
お金を貯めて一人暮らしを始めたときから、テレビとベッドしかない部屋の真ん中にパソコンを置くと決めていました。
そんなときに、あのiMac G4と出会ったのです。殆ど一目惚れでした。
それに映像を作るならMacのほうがいいんじゃないかと幼い自分なりに考えていたんでしょう。

アキバの店員と押し問答を繰り広げてMacと「Mac OS X パーフェクトマスター」をうちに連れて帰ってくることができました。
辞書並みに分厚いその本の頭から、徹夜で全ての機能を試していきました。後ろのほうはターミナルコマンドの解説だったのですが、何の疑問も持たずに全て解説どおりやってみました。
それも全ては「初心者がMacを買っても使いこなせない」と力説してきたオタク店員を見返すためだったと思います。
そういった点では彼に感謝しています。あの言葉がなかったら、あんなに必死で本を読んだりしなかったかもしれません。

それからというもの、私はベッドでは殆ど寝ないで、仕事から帰ってくるとパソコンで映像作品を作ったり、絵を描いたり、文章を書いたり、ウーハーをつなげて音楽を聴いたり、自宅サーバを立ててみたり、ホームページを作ったり、掲示板を作ったり、今振り返ると本当にくだらなくて誰にも見せられないようなものですが、そうやって毎晩いろんな新しいことをして遊ぶようになりました。
パソコンがやりたいので、当時、付き合っていた彼氏とも別れたくらいです。
仕事も、もっとMacが使えそうな印刷屋に転職しました。なのに、与えられた端末がWindowsだったので、本当に嫌だったことを覚えています。まず、右クリックの存在が反吐が出るほど嫌でした。マカーあるあるです。

まるで、大好きな彼氏がいるのに、毎日見ず知らずのおじさんの相手をさせられてるような気分です。

そういった意味で、今は使い慣れたMacを使わせてもらえる職場で、本当にうれしいです。

そんなこんなあんなそんなで、時は流れ、今のMacは3代目です。
今の私は、あの頃の私よりずっとずっとコンピュータでいろんなことができるようになりました。でも、あの頃のような情熱を持ってコンピュータに向かうことは、もう二度とないと思います。

そんな日々を一緒に過ごしたMacとも、そろそろ別れを覚悟するべきときが来ました。
使われないまま置いておかれて埃をかぶる毎日は彼もきっと嫌でしょう。

今は変色して黄ばんだ体ですが、彼を見るたびに初めて箱を開いたときの記憶が鮮明に思い出されます。

真っ白な体に青い画面。
モニターと胴体をつなぐピカピカの首。
透き通るモニターの縁。

マウスもキーボードもスピーカーもウーハーも全部お気に入りでした。

バイバイ、私のMac。
君には名前を付けなかったね。
今までありがとう。元気でね。

拍手[3回]

PR

マテリアルデザインのモーションのドキュメントを翻訳してあげた

どうも!
コーディング中にマテリアルデザインのページにMotionのページが追加されているのに気がつきました。5月ごろに追加されたみたいです(気づくの遅)。
https://material.google.com/motion/material-motion.html
(マテリアルデザインが何だか知りたい人はGoogleで検索よろしく!!)

結構、マテリアルデザインのコンセプトって読んでみるとなるほどねーって感じで面白いんですが、英語なので読む気が湧かないじゃないですか。
だから今回は私が翻訳してあげました(ドヤ顔)。
忙しいのに翻訳してあげたんだから、みんな感謝してよねっ!(なぞのツンデレキャラ)

マテリアルモーション

マテリアルデザインの動きは、美しく流動的に、空間の関係、機能、および意図を説明するために用いられるものである。

動きはなぜ重要なのか?

動きは、どのようにアプリが構成されていて、何ができるのかということを示すことができる。

動きが提供するもの

  • ビュー間での焦点のガイド
  • もしユーザーがジェスチャーを完遂したら何が起こるのかのヒント
  • 要素間での階層的、かつ空間的な関係性
  • 裏で起こっていることから注意をそらすこと(コンテンツの取得や次のビューのロードなど)
  • 特色、洗練さ、喜び

マテリアルはどのように動くか?

マテリアル環境は、重力や摩擦といった現実世界の力から得たインスピレーションを描くものである。

これらの力は、ユーザー入力が画面上の要素に影響する際や、どのように要素が相互に作用するかということを映し出すものである。

マテリアルなモーションの特徴

レスポンシブ

マテリアルはユーザー入力には素早く正確に反応する必要がある。

ナチュラル

マテリアルは現実世界にある力からインスパイアーされた自然な動きを表現する。

認識力がある

マテリアルはユーザーや周りにあるマテリアルを認識していて、オブジェクトに引き寄せられたりユーザーの意思に適切に反応できる。

意図的

正しい時に、正しい場所へユーザーの焦点を誘導する。

よいトランジッションを作る要素は?

動きはスピーディーに

必要以上にユーザーを待たせるべきではない。

動きは明確に

トランジッションは、明確で簡潔で統一感があるべきである。
一度にやりすぎるのは避けるべき。

動きは調和的に

マテリアル要素は速さ、反応性、意図によって統合される。
アプリケーションのモーション体験は、そのアプリケーション内で一貫している必要がある。

動きの結果

動きを使うことによる利点は、次の、マテリアルモーションを採用したアプリと、していないアプリの2つの例を見ることで確認できる。



※上記の翻訳は、個人的な翻訳であり、正確さを保証するものではありません。
あと、専門用語で言うところのベタ翻訳だから読みづらいとか、そういう苦情は一切受け付けない。

ではでは、またねーーー!!

拍手[0回]

JSでObjectを配列にする様々な方法

皆さん、こんばんはベル子です。

あまりJSに詳しくない人に教えるときに
きっと一度は経験するかもしれない質問を紹介します。

「これはObjectなんで〜〜」
「Objectって何ですか?」

あなたの心の声:で、出たーーーーーーーーその質問!

「phpで言うところの連想配列みたいなものです(早口&小声)」

ほらそんな細かいこと気にしないで先に進みますよ★感を出しまくってスルーするのが定番のこの質問です。
なぜなら、ぱっと話してその日のうちに理解できるような代物ではないということをあなたは知っているからです。

Objectが何なのか、実際は連想配列というよりはClassに近いものだと認識していますが、実装上では連想配列のように使われることが多いので、分かりやすく説明するために後ろのマサカリを担いだ誰かに見つからないように、震えながらそう応えたりGoogleのURLを投げつけたりするのが定番です。


どのように作るかというと

var Belko = new Object();

または

var Belko = {};

ですね。よく見るのは後者だと思います。
厳密に言うと、こうやって作ってるのはカスタムオブジェクトで、
JSには組み込みのオブジェクトも存在します。


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の恩恵ハンパないですね。

ではでは、突然おわりまする。
またねーーー★

拍手[1回]

グローバルで使うメソッドを何とかしたい。教えて偉い人。

皆さんお気づきだろうか、今日が7月1日だということを。
どうもベル子です。

ブログの更新目標を過ぎてしまったわけだが、
内容でカバーするつもりなので、そこんとこヨロシク!!
嘘です、すみません。

ということでVue.jsでのコーディングも慣れてきたにはきたのですが、
ちょっと困っていることがあって、
コンポーネントを拡張したり、グローバルなVueインスタンスやコンポーネントに共通で使うメソッドなどを混ぜ込みたいと思うことがある。

どうすればいいか、みんなどうしてるのか。
偉い人に教えてもらいたい。
ググッてみた。
だけどあんまり偉い人に出会えなかった。
だから暇つぶしにドキュメントを見てみた。
Mixinという概念に出会う ← 今ここ

Mixinとは要するに共通で使いたいものを書いておいて、
インスタンスの中で読み込むと既存の人たちに混ぜ込んでくれるよ!
というものようだ。
何やらすごく便利そうだ。
私の求めていたもの、そうに違いない。

createdなどのフック系は上書きされず順番に実行されて、
methodsの中の関数みたいなのは、同じ名前だと上書きされていくようです。

文字書いてもなんだか分からないと思うので、
ちょっとしたサンプルを作りました。

Mixinとか継承とかで遊んでみた on jsbin.com


いろいろ遊びすぎて訳が分からなくなってますが、
1つ分かったのはMixinだろうが、extendだろうが
同名の関数は一番最後に上書きして定義したやつになる。
createdに書いたやつは全部順番に実行される。
グローバルのVueインスタンスに関数を混ぜ込みたいならMixinを使えばいい。

ということのようです。

なーるほどねー。

ということはグローバルに使う可能性のある関数はMixinにすればええんやね。
ということでいろいろ悩んでいたことは解決しました。
やっぱりドキュメントは偉大です。

拍手[0回]

Vue.jsでコンポーネント内のpropsにキーを追加する方法

どうもベル子です。

今回はVue-routerネタを書こうと思ったんですが、
ちょっと時間がないのでこちらのネタを先に。

まず前提としてVue.jsはjQueryを使う場合と全く作法が違うので
JavaScriptのコーディングというよりは、もう新しいものとして理解するのがいいと思う。
引きづられたり、無理やり組み合わせようとすると、シンプルなものも訳が分からなくなる。
この何ヶ月かいじってみた私の感想。

事前にモジュールバンドラーなどの知識が必要なので、
モジュールバンドラーが何か不明なレベルの人は
ベル子の過去記事に目を通すといいと思う(宣伝)。

【Vue.jsでのコーディングで主にすること】
コンポーネントというアプリケーションで使うパーツをたくさん作って、
それを組み合わせて大きなアプリケーションにしていく。
以上。

これだけ聞くとすごく簡単そう。
そしてチュートリアルなんかをやってみると、びっくりするほど簡単に感じる。
今まで自分がやってたことは何だったんだろうと思う。
そしてコードが種類別に整理されていて、すごく読みやすい!
ページの遷移はまったく必要なくなる。

ただ、ハマりポイントも結構ある。
今まで経験したことのないことをやろうとするので見本のコードが見当たらない。
どう組めば実現できるのか想像ができない。
jQueryと組み合わせたり、ほかのプラグインと組み合わせたりする必要が出てくると
DOMが生成されるタイミングとか気にしないといけなくて一気に闇。

そして、かなりハマり度が高いのが、
入れ子になっている親子コンポーネント間でのデータ渡し&更新通知だ。

子コンポーネントに親からprops経由でデータを渡したときに、
コンポーネント内でpropsのオブジェクトにキー(厳密にはプロパティ)を追加したいとする。

当然、以下のようにすると思う。

this.user.text = 'いえーい';


ベル子が年齢を詐称していることは気にせず、まあまずはこれを見てくれたまえ。
https://jsfiddle.net/6yf84nyq/1/

以下をコメントアウトしてupdateしてrunしてみて欲しい。

// this.$set('user.text', 'やっほー');


ひとことは表示されなくなっていることが分かると思う。
詳細は以下を確認して欲しいんだけど、
https://jp.vuejs.org/guide/reactivity.html
props経由で渡してあるデータに新しいプロパティをセットして、
それをリアクティブにしたい場合は


this.$set('user.text', 'やっほー');

のようにしないといけない。

これを忘れて、
「あれ?値は書き換わってるのにリアクティブにならない.....」
ということがよくあるので、みんなも気をつけてね!

では、急いでるので今日はこの辺で。

拍手[0回]