カードゲーム
非常に簡易的なものですが、動くものを作って見ました。
出力されたコードはこのような感じでした。
| <!DOCTYPE html><html><head><meta charset=utf-8><meta name=viewport content="width=device-width,initial-scale=1"><title>uranai</title><link href=/static/css/app.b387307636adb7bd39933da5a36546ce.css rel=stylesheet></head><body><div id=app></div><script type=text/javascript src=/static/js/manifest.eed5c92157ba8f40ad16.js></script><script type=text/javascript src=/static/js/vendor.241ef15c58009ea20e89.js></script><script type=text/javascript src=/static/js/app.02ad93d1e68747d321f2.js></script></body></html> |
課題1
v-bind:src="card.path"
このようにsrcをbindしているのですが、assetsから画像を呼び出したいので、pathをstringで書き出すのではなく、カードの数字（1、2など）をcard.pathに設定し、前後の文字列は定数として持っておきたいのである。
[domain] + [card.path] + '/.png'
propsで渡ってきた変数しか使えないのかなー。調べる。
ディレクティブについて少し調べた事
v-ifは遅延描画
値がtrueになるまで描画はされない
v-showは状態に関わらず最初から描画される
cssで表示の切り替えをしている感覚
速度を求めるならv-showを使い、cssで扱いにくい要素に関してはv-ifを使う
v-ifを使う感覚が強いけど、それは無駄なdomを置いておきたくないからっていう事で、v-showの使い道は、トグル的なものに・・かな。私の想像の範疇でしかないけど。
ユーザー操作が激しいやつは、cssで制御しておきたい・・。
少しの遅延も許さないわよ！はv-showで書け・・とか？
vueを書いているときは癒しになります。普段はAngular使いなので・・
Vue.jsもくもく会 2回目の参加
またも、おしゃれの聖地、恵比寿ガーデンプレイスに来ておりました。
茨城県から、わっせわっせとmacだけ持ってお登ってきました。
メドピアさん主催でやられている、Vue.jsもくもく会@恵比寿#15 に来ました！
先週から連続での参加！今週も楽しみにしていました。
私は、以前作った占いアプリをVue.jsで作り直したいので、専らそれが目的です。
CLIは前の記事にも書いてありますが、構築しまして、これからアプリの中身を作る段階です。
所要時間2時間
ドキュメントを流し読みし、AngularJSとの違いをメモメモ。
テンプレートのcss classを設定するディレクティブがありますが、複数のclassを同時に扱えたりします。
AngularJSはclass.hoge＝isActiveというように、単独のclassに設定してますので、複数は設定できないのです。
v-ifとv-showの違いも面白かった。
v-ifは、値がtrueになるまで描画されないが、v-showは値関係なく最初から描写されています。v-showはcssで制御することを前提として作られたような感じ。
v-showのようなディレクティブはAngularJSには無かったような。一年以上AngularJS触ってますが、私は使った事はないです。
そして、ずっと気になっていたストア的なものどこにあるんだ問題。
VueXを使えばデータ管理出来るとのこと。それも、後付けokな仕組みです。
こういうのって、後から付けようとしても無理なこと多くないですか？
大体は、環境を作り変える強い意思を持つよね。。
Vue.js楽！
もくもく会は19:30からはじまり、21:30頃になると成果発表をするのですが、プロジェクターに映して皆さんにお話すると、色々な意見を頂けます。ありがたいです。
占いアプリは、一先ずランダムなデータを表示をさせる所まではいけました
次は…年明けということでしたので、少しの期間、、お勉強に励もうと思います。出来上がったものを次はお見せしたいですね！
最後に、壁紙がオシャレだったのでパシャり。許可はとっております。
主催者様、またお世話になります！来年も宜しく御願い致します。
VueのCLI環境構築
環境
OS: Hight Sierra(バージョン 10.13) HomeBrew導入済み
まずはnodeをインストール
ターミナルを開く(私はiTerm2を使っています)
nodebrewを入れる。 GitHub - hokaccha/nodebrew: Node.js version manager
curl -L git.io/nodebrew | perl - setup
パスを通す export PATH=$HOME/.nodebrew/current/bin:$PATH
vi ~/.bash_profile
適用させる
source ~/.bash_profile
現在のバージョンを確認する。
nodebrew ls-all
nodeをインストール この時点での最新9.2.0
nodebrew install-binary v9.2.0
何がインストールされているか確認する
nodebrew ls
どのバージョンを使うか指定
nodebrew use v9.2.0
使えるのか確認する
node -v
インストール成功
CLIを使う
# vue-cli をインストール $ npm install --global vue-cli # "webpack" ボイラープレートを使用した新しいプロジェクトを作成する $ vue init webpack my-project # 依存関係をインストールしてgo! $ cd my-project $ npm install $ npm run dev
ユニットテストのライブラリーはJestとか選択しちゃいました。karmaも選択できたのですが、現場はkarmaでフレームワークがjasmineなので違うものを入れてみようかなと思いました。jasmineだから楽なわけではないし私の場合は・・。
サーバーが立ち上がりました。 8080は使って欲しくないけど・・まあいいか。仕事の開発サーバーと同時に立ち上げることもないし。
ブラウザで起動するとこんな感じ。 ここまでの所要時間、ブログを書きながら+途中人と電話もしつつ、1時間でした。純粋にコマンドを打っていくだけですので、15分くらいで出来るのではないでしょうか。素晴らしい！Vue.js! いつも悩む環境構築ですが、これは楽ですね！
Vue.jsもくもく会へ参加
昨日は恵比寿のガーデンプレイス タワー内のメドピア様主催のVue.jsもくもく会へ参加してきました。
私はVueを触るのは初めてでしたので、まずはドキュメントを読みながら、手元で動かしつつ、勉強しておりました。
現場ではAngularJSを触っているので、書き方の違いや設定方法の違いなど、楽しく学べました。
ディレクティブに1回しか読み込まない、v-onceと言うものがありました。
これは、テンプレート側に設定しておくと、1度だけ読み込みその後変更を感知しないというもの。
でも変更自体は出来るというもの。
thisで参照すると変更自体はできているようだったので。
何に使うんだろうね？と参加者の方に聞いたりしておりました。
変更させたくない箇所としての役割は想像できるけど。
まぁ、まだ私は初学者なので、気にせずに学んで行こうかな。
AngularJSとの違いを感じられるという利点を生かして。
占いカードのアプリをVue.jsで作ろうと思ってるので、来週も参加しようと思っています。
とても、楽しかった！
恵比寿ガーデンプレイス、綺麗でした。
UX JAM21参加しました
こちらのイベントに参加してきました。
UX JAM 21
FEなのになんで参加しようとしたのか
UX系のイベントって、あまり行った事が無かったから興味があって。
いけてるUXについてわんさか話が聞けるんじゃないかという期待から。
参加者の比率
マーケター（アナリスト含む）：30%
エンジニア：25%
デザイナーやアートディレクター：25% ←！？
謎の人達：20%
LTの内容
19:50-20:10 LT Session 1
ソニーグローバルソリューションズ株式会社 武田博さん
「自己組織化されたエンジニアチームだからこそできる自らが実現するUX」
株式会社ＦＣＥトレーニング・カンパニー（SmartBoarding） 大司奈緒さん
「B向けProductで、管理画面のUXにこだわったら、3倍売れた話」
この二つは遅刻して、聞けなかった。。
でも、武田さんのLT目当てでしたので、ビール片手に…直接話しかけに行きました。
フロントからサーバーサイドまで、そしてデプロイもやられているとの事。
デザイナーとの距離も近く完全なる分業化をされて居ない事でUXの細やかな修正も、調整も、デザイナーに一度返したりせず、己でやるスタイル。任せられるだけの、センスがお有りだからだと思いますが、完全分業体制に少し疑問を持つ機会となりました。
武田さんとは、その後メールでのやり取りをさせていただいておりますが、
「デザイナーさんとの距離感を近づけるためにしていることは？」
とお聞きした所、
「1人のデザイナーさんにこの人は信頼できる、凄い人だと認識してもらうと、勝手に周りに宣伝してくれる。そうする事で、任せてもらえる環境が出来る。」
とのことでした。１人外のチームや違う職種の方と仲が良くなれば、自然とそのチームや職種の界隈で話題に上がって、「あの人凄いらしい」になる。話が独り歩きしている事もありますが、その界隈から仕事を依頼されたり、信用してもらえたり、良いことづくめですね。
スライド内の 可愛らしい さし絵はご自身で描かれているとのこと。
20:25-20:45 LT Session 2
株式会社ベストティーチャー 宮地俊充さん
「スマートスピーカーにおける音声IFのUX設計とは」
会社にもGoogle Homeがあるなぁと思い聞いていました。
スマートスピーカー向けのアプリを作る際は、ユーザーがスピーカーへ発声させる言葉を端的にさせる事、スピーカーが話す内容を冗長とさせない事がポイントとの事でした。
スピーカーもユーザーも音声だけで聞き取るので、長い文面を話すと理解しにくいですよね。
スマートスピーカー向けアプリのUX設計のコツ_UX JAM 21
株式会社フォーク 丹波伸輔さん
「他言語のコミュニケーションとUI / UX」
アイコンについてお話しされていました。日本人はアイコンを作るのがあまり上手ではないらしい！
なぜかと言うと漢字を想像して複雑化させる傾向があるから。
ただ、絵文字については複雑化している方が表情が伝わりやすいのもあり、得意としている。
言語が異なる事で、作り上げるアイコンが違うという話から、多言語コミュニケーションを取る事で、UXの幅が広がると言う様なお話しだった気がします。
象形文字とか出てきて面白かったです。
（丹波さんのweb2.0時代からのアートディレクター感が、また…きました。）
ナイル株式会社 石井智彦さん
「ウェブアナリストが好きなUXと数字」
アナリストが、営業向けに週１回2時間ワークショップ（カスタマージャーニーみたいな感じの事を）をやってるらしい。
GAで、ユーザーデータが取れる様になったので、出来る事が増えたとの事。あと、owndメディアはCV悪いとの事。。
社長ブログとかを例として出されていました。←社長ブログとかって、自社サービスや自社製品のファンの方々へのサービス・近況報告的なものだと感じていますが、間違ってますかね？
21:00-21:20 LT Session 3
株式会社ガイアックス 岩永太貴さん
「体験予約プラットフォームで感動的な人との出会いを実現する仕組み」
TABICAというサービスのお話。ホストがイベントを作り、ゲストが予約するというもの。
トリップアドバイザーの反対版。
サービスに興味があり岩永さんに直接話しかけに行ったのですが、ホスト側の設定価格から10%手数料が引かれ、ゲスト側はホスト側の設定価格の20%増しで購入するとのこと。
他サービスと比べてちょっと高過ぎるので、何故高いのか聞いて見たところ、「ゲストに保険に入ってもらっている」からとのこと。これには驚きました。
ホストとしての経験が何度かある私は、ゲストに何かあった時、どうしようと言う思いが常にありましたので、イベントの日は開始から終わりまで神経をかなり尖らせて居ないといけませんでした。
ホストにとって、ゲストにとっても非常に安心できるものだなと思いました。
株式会社ハッピーコム 戸田江里子さん
「世界のUXパーソンが集合”Talk UX2017 in台北”レポート」
女性のUXグループイベントをやっているらしい。Ladies that UX。
オリンピック向けに多言語UIを用意していく必要性。←ホテルや乗り換えアプリとか、飲食関係アプリとか…ですかね！？
海外はOJTが少なめで、ボードゲームでUXを学んだりしている。ワークショップは日本と同じ様な感じらしい。
まとめ
イケイケのマーケターや、リクルーターが多っ！
私にとっては、ライオンの檻に入れられたも同然でした。恐怖。そして前職の知り合いも何故かいるし、ずっと喋っていたし、、新しい出会いはどこへ…でも楽しかったから良し。
入場時にたまたまお声をかけて頂いたpythonエンジニアさんと（かなり安心感あり）運命共同体の様に行動しておりました。（帰りは、フリーの大人しめなデザイナーさん&pythonエンジニアさん&私で駅まで🚉歩きながら団欒。←自然と分業体制されていることに後で気がつく）
リブセンスさんが、じゃんけんで勝ったらビールをプレゼントというのをやっていました。私は負けました。
非エンジニアの為の市場価値を知る転職サービスを出されている様です。アートディレクターさんとか、アナリストさんとか向けでした。
ご飯が美味しかったです(*´꒳`*)
そして、おしゃれな会場で、そしてお若い方が多かったですね。元気を沢山頂きました。
今度行くときは、マーケターのふりをしてイケイケで参加して見ようかと思います！
