2019年1月24日木曜日
Gulp+EJSでページを量産
こんにちは!
シタテル株式会社UI/UXデザイナーの堤です。
複数の静的ページを作る際に便利なGulp+EJSについて紹介します。
今回やりたかったこと
- 静的なページを量産
- 共通パーツはテンプレート化したい
導入方法はNode.jsがインストールされている環境でプラグインをインストールします。
$ npm install gulp gulp-merge-json gulp-ejs gulp-rename fs
ディレクトリ構成
gulpfile.js
// gulpプラグインの読み込み
var gulp = require('gulp');
var merge = require('gulp-merge-json');
var ejs = require('gulp-ejs');
var rename = require('gulp-rename');
var fs = require('fs');
//jsonファイルの結合 ※複数のjsonファイルがなければ不要
gulp.task('json', function () {
gulp.src('./app/data/origin/**/*.json')
.pipe(merge({
fileName: 'pages.json'
}))
.pipe(gulp.dest('./app/data'));
});
//設定ファイルの読み込み
const jsonData = './app/data/pages.json';
const json = JSON.parse(fs.readFileSync(jsonData));
// ejsをhtmlへ変換
gulp.task("ejs", function() {
for (var key in json.pages) {
var data = json.pages[key];
data.path = key;
var layout = data.layout;
gulp.src("./app/ejs/" + layout + ".ejs")
.pipe(ejs(data))
.pipe(rename(key + '.html'))
.pipe(gulp.dest('./public'));
}
});
pages.json
{
"pages": {
"index": { //出力するhtmlファイル名
"layout": "index", //使用するejsファイル名
"title": "タイトル1"
},
"hoge/index": {
"layout": "index",
"title": "タイトル2"
}
}
}
index.json
<% include common/_head %> //includeするejs ファイルを指定
<%= title %> //jsonファイル内でしている要素が入る
実行方法
$ gulp json //jsonファイルの結合が必要な場合
$ gulp ejs
まとめ
ejsではjavascriptが使用できるためループ処理なども可能です。
あまり利用する場面は多くないですが、エンジニアさんに 依頼するほどでもないけど、ぱぱっと複数ページを作る必要があるときに便利です!
2019年1月18日金曜日
FirefoxとChromeで画像の色味が違う問題
こんにちは!
シタテル株式会社UI/UXデザイナーの堤です。
以前出くわしたFirefoxとChromeが画像の色味が違う問題について解決方法をご紹介します。
画像はぱくたそさんから拝借
修正前
左がChromeで右がFirefox
微妙にFirefoxの色味が濃く出てしまいます。
修正後
解決方法
Photoshopで書き出しの際に「カラープロファイルの埋め込み」にチェックするだけ!
まとめ
以前なぜかわからずいろいろと調べていたところこの解決方法にたどり着きました。
微妙な違いにはなりますが、 写真が多いサイトだと全体の印象も変わってくるため気をつけたいと思います。
2019年1月4日金曜日
【mac】操作スペースを使いこなす!
こんにちは!
シタテル株式会社エンジニアのいしづかです。
開発作業をしているといろんなソフトウェアを使いますね。
Slack・Webブラウザ・コードエディタ・gitツール・DBツール・・・etc
これらを1つのウィンドウ内に置いてキーボードで切り替えてもいいんですが、どうしてもゴチャゴチャ感は否めません。
macには「操作スペース」と呼ばれる仮想的なデスクトップ機能があります。
ディスプレイを何枚も持っているようなイメージの機能ですね。それを切り替えて使います。
今回はその操作スペースを使いこなすために、私が行っている設定をご紹介します。
操作スペースをつかう
Mission Controlを起動すると「デスクトップ1」って感じで表示されている部分、ここ Spacesバー って言うらしいです。最初はデスクトップ1だけですが、右端の+ボタンから増やすことができます。
私はいつも6つ用意しています。
それぞれ置いておくものを決めていて
- デスクトップ1: Slack
- デスクトップ2: Webブラウザ
- デスクトップ3: コードエディタ(Visual Studio Code)
- デスクトップ4: gitクライアント(SourceTree)
- デスクトップ5: DBクライアント(SequelPro)
- デスクトップ6: 予備
こんな感じで使っています。
どこに何があるか決めておくことで、ほしいウィンドウをパッと取り出せるようにしています。
ちなみに、このウィンドウの順番を使用状況に応じて並び替える機能があって、macさんの親切心なんですが、私にとって余計なお世話と化していたのでOFFにしています。
↓コレです。システム環境設定のMission Controlにあります。
すばやく切り替えるための設定
それでもデスクトップ1からデスクトップ4まで移動するにはトラックパッドを三本指でシャッシャッシャッと3回やることになります。
この行ったり来たりが地味にめんどくさい。。。
そこでショートカット1発で「デスクトップ○」を出すようにしています。
システム環境設定の「キーボード」でMission Controlのショートカット設定ができます。
↓コレです。
ここでは「control + 数字」を押すとデスクトップを切り替えるようにしています。
これでどのデスクトップを表示していても、Slackが見たければ「control + 1」ですし、コードエディタを出したければ「control + 3」で一発移動が可能です。
まとめ
ホントにちょっとしたことなんですが、毎日発生する微細な面倒事を放っておくと慣れてしまって当たり前になってしまうので、こんな細かい工夫も怠らないように心がけています。
みなさんそれぞれ快適な開発環境を構築しているようですので、その工夫を聞いて取り入れていきたいですね。
2018年12月27日木曜日
コンソール上でディレクトリの中身を樹形図表示する - tree コマンドの紹介
こんにちは! シタテルエンジニアの諏訪です。
今日はコンソール画面で使う tree コマンドについてご紹介します。
コンソールでディレクトリの中身をみる
ファイルの一覧表示
みなさんはコンソールを使っていてあるディレクトリ内のファイルの一覧がほしいときに
どんなコマンドを打ちますか?
たいていは ls
コマンドを使うと思います。
……コンソールを使う人が最初に覚えるコマンドの一つですね!
$ ls
Gemfile Rakefile config lib public tmp
Gemfile.lock app config.ru log storage vendor
README.md bin db package.json test
これだと一覧性に欠けてちょっと見づらいので -l
オプションを付ける方も多いでしょう。
$ ls -l
total 56
-rw-r--r-- 1 p-san wheel 2210 12 27 12:34 Gemfile
-rw-r--r-- 1 p-san wheel 5360 12 27 12:34 Gemfile.lock
-rw-r--r-- 1 p-san wheel 374 12 27 12:34 README.md
-rw-r--r-- 1 p-san wheel 227 12 27 12:34 Rakefile
drwxr-xr-x 10 p-san wheel 320 12 27 12:34 app
drwxr-xr-x 9 p-san wheel 288 12 27 12:34 bin
drwxr-xr-x 16 p-san wheel 512 12 27 12:34 config
-rw-r--r-- 1 p-san wheel 130 12 27 12:34 config.ru
drwxr-xr-x 3 p-san wheel 96 12 27 12:34 db
drwxr-xr-x 4 p-san wheel 128 12 27 12:34 lib
drwxr-xr-x 3 p-san wheel 96 12 27 12:34 log
-rw-r--r-- 1 p-san wheel 67 12 27 12:34 package.json
drwxr-xr-x 9 p-san wheel 288 12 27 12:34 public
drwxr-xr-x 3 p-san wheel 96 12 27 12:34 storage
drwxr-xr-x 11 p-san wheel 352 12 27 12:34 test
drwxr-xr-x 5 p-san wheel 160 12 27 12:34 tmp
drwxr-xr-x 3 p-san wheel 96 12 27 12:34 vendor
ディレクトリ直下のファイルを確認するにはこれでよいのですが
時として、サブディレクトリの中のファイルも同時に確認できると便利なことがあります。
新米エンジニアPさんの奮闘記を見てみましょう。
ファイルを探せ!
登場人物
- 【Pさん】
開発チームにジョインしたばかりの新米エンジニア。
シェルコマンドは cd と ls しか知らないくせに
やたらとコンソール画面を使いたがる、ちょっとクセのある新人。
Pさん初めてのタスク
Pさんの仕事初日。ソースコードの構成もよくわかっていない中で最初のタスクが飛び込んできました。
── Pさん、早速で悪いけど、404.html をちょっと修正してもらえる?
── は〜い、わかりました〜!
元気よく返事をしたものの、その 404.html
とやらは一体どこにあるのでしょう?
開封したての PC にまだエディタすら入れていないPさん。
とりあえずコンソール画面で ls コマンドを打ちまくって手当たり次第に探すことにしました。
── えーっと、エラー画面のソースだから…… view ディレクトリの中にあるんだよねきっと。
$ cd app/views/
$ ls -l
total 0
drwxr-xr-x 2 p-san wheel 64 12 27 12:34 item
drwxr-xr-x 5 p-san wheel 160 12 27 12:34 layouts
drwxr-xr-x 2 p-san wheel 64 12 27 12:34 message
drwxr-xr-x 2 p-san wheel 64 12 27 12:34 user
ありません。
── おや、、、フォルダしかないじゃん。。。すると layouts の中かな。。。
$ cd layouts/
$ ls -l
total 24
-rw-r--r-- 1 p-san wheel 347 12 27 12:34 application.html.erb
-rw-r--r-- 1 p-san wheel 229 12 27 12:34 mailer.html.erb
-rw-r--r-- 1 p-san wheel 13 12 27 12:34 mailer.text.erb
ありません。
── あれれ。。。あー、さては assets の中だな(錯乱)
$ cd ../../assets/
$ ls -l
total 0
drwxr-xr-x 3 p-san wheel 96 12 27 12:34 config
drwxr-xr-x 3 p-san wheel 96 12 27 12:34 images
drwxr-xr-x 8 p-san wheel 256 12 27 12:34 javascripts
drwxr-xr-x 6 p-san wheel 192 12 27 12:34 stylesheets
やっぱりありません。
── これはもう素直に find コマンドを使うしか…
$ cd ../../
$ find . -name '404,html'
(何も表示されない)
── 見つから…ない…… あっ、見つからないから 404 なんだ。なんつってハハハ(錯乱)
(注)錯乱したPさんはタイプミスをしていますが、本人気づく様子がありません。
コンソールの敗北
結局Pさんは、cd コマンドを使って 404.html を探すのを諦め
GUI なエディタをインストールしました。
エディタにはファイルを樹形図表示する機能があって
それを使うと一瞬で目的のファイルが見つかったのでした。
── はぁ〜意外と浅いところにあったのね。。。もうコンソールきらい。使うのやめよ。。。
やっぱり GUI ソフトにあるようなファイルの樹形図表示機能はとても便利です。
サブディレクトリも含めてファイルを一覧表示してくれるから。
Mac や Windows を使っていれば Finder や エクスプローラその他 GUI ソフトを使えばいいのですが
クラウドサービス上の仮想マシンに SSH でつなぐ場合など
シェルだけで操作を完結させないといけない場面も多いです。
……上の物語に出てきた新人Pさん、今後の仕事でちょっと苦労しそうですね。
コンソール画面でも、こんなふうに樹形図表示することができたらいいのに。。。
コンソールでディレクトリの中身をみる(再)
ファイルの一覧表示 (樹形図)
問題提起したばっかりですが結論です。樹形図表示、 実はできるんです。
ご覧いただきましょう。tree コマンドです。
$ tree
.
├── Gemfile
├── Gemfile.lock
├── README.md
├── Rakefile
├── app
│ ├── assets
│ │ ├── config
│ │ │ └── manifest.js
│ │ ├── images
│ │ ├── javascripts
│ │ │ ├── application.js
│ │ │ ├── cable.js
│ │ │ ├── channels
│ │ │ ├── item.coffee
│ │ │ ├── message.coffee
│ │ │ └── user.coffee
│ │ └── stylesheets
│ │ ├── application.css
│ │ ├── item.scss
│ │ ├── message.scss
│ │ └── user.scss
│ ├── channels
│ │ └── application_cable
│ │ ├── channel.rb
│ │ └── connection.rb
│ ├── controllers
│ │ ├── application_controller.rb
│ │ ├── concerns
│ │ ├── item_controller.rb
│ │ ├── message_controller.rb
│ │ └── user_controller.rb
│ ├── helpers
│ │ ├── application_helper.rb
│ │ ├── item_helper.rb
│ │ ├── message_helper.rb
│ │ └── user_helper.rb
│ ├── jobs
│ │ └── application_job.rb
│ ├── mailers
│ │ └── application_mailer.rb
│ ├── models
│ │ ├── application_record.rb
│ │ └── concerns
│ └── views
│ ├── item
│ ├── layouts
│ │ ├── application.html.erb
│ │ ├── mailer.html.erb
│ │ └── mailer.text.erb
│ ├── message
│ └── user
:
(省略)
:
├── public
│ ├── 404.html
│ ├── 422.html
│ ├── 500.html
│ ├── apple-touch-icon-precomposed.png
│ ├── apple-touch-icon.png
│ ├── favicon.ico
│ └── robots.txt
:
(省略)
:
300 directories, 1311 files
どうですかこの見事な樹形図!!! (グルメリポート風に)
深さを指定する
デフォルトだと上のように、カレントディレクトリから 3-階層目まで表示されます。
これだとちょっと多すぎる(or 少なすぎる)という場合は -L
オプションで階層の深さを指定できます。
例: 2-階層目まで表示
$ tree -L 2
.
├── Gemfile
├── Gemfile.lock
├── README.md
├── Rakefile
├── app
│ ├── assets
│ ├── channels
│ ├── controllers
│ ├── helpers
│ ├── jobs
│ ├── mailers
│ ├── models
│ └── views
:
(省略)
:
├── public
│ ├── 404.html
│ ├── 422.html
│ ├── 500.html
│ ├── apple-touch-icon-precomposed.png
│ ├── apple-touch-icon.png
│ ├── favicon.ico
│ └── robots.txt
├── storage
:
(省略)
:
33 directories, 35 files
変更時間順にソートする
-t
オプションを指定すればファイルの変更時間順に並べ替えて表示することができます。
$ tree -t
.
├── Gemfile
├── README.md
├── Rakefile
├── config.ru
├── app
│ ├── assets
│ │ ├── config
│ │ │ └── manifest.js
│ │ ├── images
│ │ ├── javascripts
│ │ │ ├── application.js
│ │ │ ├── cable.js
│ │ │ ├── channels
:
(省略)
:
300 directories, 1311 files
ディレクトリを指定する
ls コマンドがそうであるように、対象ディレクトリを指定して表示させることもできます。
$ tree app/assets/
app/assets/
├── config
│ └── manifest.js
├── images
├── javascripts
│ ├── application.js
│ ├── cable.js
│ ├── channels
│ ├── item.coffee
│ ├── message.coffee
│ └── user.coffee
└── stylesheets
├── application.css
├── item.scss
├── message.scss
└── user.scss
5 directories, 10 files
このほかにもさまざまなオプションを指定できます。
インストール・Tips
For Linux
Linux の場合は yum でインストールします。
yum install tree
インストールできたことの確認:
$ tree --version
バージョンが表示されれば OK 。
For Mac
Mac の場合は homebrew でインストールできます。
$ brew install tree
インストールできたことの確認:
$ tree --version
バージョンが表示されれば OK 。
Tips (文字化けするとき)
Linux だと罫線が文字化けすることがあります。
$ tree
.
tqq 404.html
tqq 422.html
tqq 500.html
tqq apple-touch-icon-precomposed.png
tqq apple-touch-icon.png
tqq favicon.ico
mqq robots.txt
そんなときは --charset=C
を指定すると OK です。
$ tree --charset=C
.
├── 404.html
├── 422.html
├── 500.html
├── apple-touch-icon-precomposed.png
├── apple-touch-icon.png
├── favicon.ico
└── robots.txt
おわりに
tree コマンドによるコンソールでの樹形図表示、いかがでしたでしょうか。
便利だなと思った方、ぜひ今日インストールして使ってみてくださいね。
一度インストールしておけばずっと使えます。
2018年12月17日月曜日
【備忘録】Visual Studio Codeで文字検索範囲が広すぎるときに疑う箇所
こんにちは!
シタテル株式会社エンジニアのいしづかです。
みなさんはコードを書く時、どんなエディタを使ってらっしゃるでしょうか。
現在開発が続いているシタテルコントロールシステムのバックエンドはRailsで書かれています。
開発メンバーはそれぞれ自分が合うエディタを使っています。Ruby Mine使っている人もいますし、Atomもいたような・・・。
わたしはVisual Studio Codeを使っています。え?Vimであらずは人であらず?いや、まぁ、えへへ。
コードを書いているとコード内検索をかけたくなります。その際にはnode_modules配下とかは最初から外しておきたいものです。
今回はVisual Studio Code限定ですが、除外設定でハマったので備忘録としてその内容を書こうと思います。
Visual Studio Codeの除外設定
Visual Studio Codeの除外設定は大きく2つあり、 Files Exclude と Search Exclude があります。
Files Excludeにパスを登録すると、その配下はエクスプローラー上にすら表示されません。Visual Studio Codeからは完全に管理対象外となり、当然検索にも引っかからなくなります。
Search Excludeにパスを登録すると、エクスプローラー上には表示されますが、検索に引っかからなくなります。
よって、検索の除外対象は「Files Exclude」+「Search Exclude」ということになります。
わたしがSearch Excludeに登録しているのは
の4つです。もうちょっと増やしてもいいかなと思うんですが、必要最低限で運用しています。
設定完了であるはずが、、、アレ、logの中身とか検索対象になってる。。。
パターンの書き方が間違っているのか?
設定する箇所が間違っているのか?
アレコレ試した挙げ句、最終的にたどり着いたのは
このボタンがONになっていないだけでした。。。
デフォルトではONでなにかのときにOFFにしちゃっていたのかもしれませんが、こんなの気づかないよVisual Studio Codeさん。。。
まとめ
何かを検索したとき、ほしいものがほしい分だけパッと手に入るっていいですよね。
検索範囲を適度なものに調整しておくのはコードを書くときのストレスを軽減してくれると思います。
かく言うわたしが、この除外設定が効いていなかった数十分間はストレスフルな状態でした。
他の開発メンバーがどんなチューニングを行っているかちょっと気になるところです。どんなプラグイン入れているかとか聞けたらレポートしたいと思います。
2018年12月5日水曜日
Krispで雑音に気を取られずにWeb会議
こんにちは!
シタテル株式会社エンジニアのいしづかです。
シタテルは熊本と東京の2つ拠点があり、エンジニアもそれぞれいます。
また、週に2回はリモートワークも認められているため、物理的に人が集まらないことは、もはや日常です。
毎日の朝会や、様々なミーティングなどがオンラインビデオチャットで行われています。
シタテルではZoomというソフトを使っていますが、ここで悩まされるのが周囲の雑音です。
「発言時以外はマイクをミュートにする」というルールはあるものの、電話が鳴るとそっちの音が勝ってしまうこともしばしば。。。
「あ、ここのところなんですけd プルルルルルルル!!!」
ツライ。
そんな中、Krispというノイズキャンセリングのソフトがイイ!と聞いたので使ってみました。
結論から申し上げますと、なかなかよかったです。
Krisp
Krispは元TwilioのエンジニアだったDavitさんらが開発したアプリで、周囲のノイズ音を除去してくれます。ディープラーニングを用いて、ノイズ音をリアルタイムに除去しているそうです。
動画が出てましたが、パトカーのサイレンが鳴り響いていてもクリアに通話できているというスゴさ。
これはWeb会議の救世主ではなかろうか・・・!
残念ながら今現在ではmac版しか無いので、それ以外のOSユーザーはこのオドロキを体験頂けませんが、シタテルの開発陣は全員mac利用者なので問題ナシです。
Let's install !!
インストールはこちらのページより。
今ならDownload for freeなので無料で使えます。
pkgファイルが落ちてくるのでインストールします。
↑アイコンが表示されるので、SPEAK without noise をONにすれば準備完了です。
↑これはZoomの設定画面ですが、マイクとスピーカーにKrispがいるので、それを指定します。
これで準備完了です。
使ってみる
東京のエンジニアとZoomをつないだ状態で、以下のことをやってみました。
- わざわざ談笑しているところにmacbook片手に近づく
- 目の前で蛇口をひねって水をジャーっと出してみる
- 会社の電話を鳴らしてもらう
結果は良好でした!!
すぐ周りは談笑しているのに「その部屋に他には誰もいないと思える」ほど静かだったそうです。
蛇口の水音、全然しない、と!!マジですか!!
もう手放せません。
まとめ
Web会議は環境がものすごく重要です。雑音が多くて声が聞き取れないとかなりのストレスになります。
Krisp入れたばっかりなのでまだまだ試さないといけないですが、みんな入れてこそ価値が発揮されるので、これから布教活動をしていこうと思います。
他にどのような工夫ができるか
快適なミーティングをやるために、飽くなき探究を続けていきます。
2018年12月4日火曜日
シタテルで使っているデザインツールのご紹介
こんにちは!シタテル株式会社UI/UXデザイナーの田仲です。
今回はシタテルのデザイナーが使っている、デザインツールをご紹介します。
Sketch
デザインの作成はSketchをメインで使っています。去年まではPhotoshopがメインでしたが、下記で紹介するAbstract導入をきっかけに、Sketchをメインにしました。
Photoshopに比べると、とても軽いのでストレスなく使える点が気に入っています。アップデートが頻繁にあるため、その度に少し迷うこともありますが、アップデートでの変化を発見することが楽しみのひとつでもあります。
便利なプラグインもたくさん出てきているので、個人で試してチームにも導入していけたらと考えています。
Abstract
Sketchのバージョン管理ツールです。同じSketchファイルを複数のデザイナーが修正したり、サポートしあえるようにしています。
先日SketchのバージョンにAbstractが追いついていないことがあり、気がつかずSketchのバージョンを上げた時にSyncできない問題が起きてしまいました。(その時はSketchダウングレードして解決しました。)気軽にSketchのバージョンを上げられないという点は、微妙だなと感じています。
現在は複数人で作業しているプロジェクトは1つしかいない状態なので、もう少し共同で作業するプロジェクトを増やし、お互いの知見を増やすことにも活かしていけるような使い方をしていきたいなと考えています。
Adobe Creative Cloud
PhotoshopやIllustratorは、Sketchでは作業しにくい写真の加工、パネルや印刷物の作成を中心に使っています。
他にも、XDは気になる機能が次々に出ており、将来的にツールをAdobeに集約できると、データの互換性やコストなどの面でメリットがあると考えています。まだAbstractとSketchの方が便利だという結論から移行は考えていませんが、最新動向には日々注目しています。
Zeplin
デザイナーが作ったデザインをエンジニア確認できるツールです。開発内でのレビュー、最終的にエンジニアが実装するときに使っています。
コメントができる点はinVisionと変わりがないのですが、サイズやカラーコードがわかるだけでなく、アイコンのダウンロードなどもできるので、デザイナーとエンジニアのやりとりを減らすことができています。今後はよりエンジニアとどうやったらもっと便利になるかを話し合い、ガイドラインなどとしても活用できるようにしていけたらと考えています。
InVision
プロトタイピング・レビューに使用しています。
InVisionはコードなどの情報がないので、デザイナーとエンジニア以外の生産や営業などのメンバーがレビューに参加する際に使っています。シタテルでは開発以外の職種のメンバーともデザインの段階から頻繁に意見を交わしています。これからも部署問わず、よりよいプロダクトをつくり上げるためにコミュニケーションを活発にしていけたらと思います。
以上、シタテルで使っているデザインツールのご紹介でした。
シタテルでは、積極的に新しいデザインツールや機能を試し、今よりよりコミュニケーションしやすい&デザインしやすい環境となるものがあれば乗り換えていきたいと考えています
2018年11月29日木曜日
Vueでwatchが動いてくれない
こんにちは、シタテルの藤本です。
主にSCS(Sitateru-Control-System)という生産管理システムのバックエンド(Rails)を担当しています。
SCSではRailsでのViewは基本hamlで書かれていますが現在Vueへと移行しようとしています。
最近私もVueを触る機会があり、watchを使用していてハマってしまったところを2点ほど書いておきます。
- Objectをwatchするときはdeepをつけよう
=
で追加してはリアクティブになりませんよ
1. Objectをwatchするときはdeepをつけよう
以下のようにdata(user_name
とusers
)がいて
その値が変更されたことを監視するようにしたい場合にwatchを以下のように書きます
data () {
return {
user_name: '太郎',
users: {}
}
}
watch: {
user_name: function (new_value, old_value) {
alert(`user_name watch!!${this.user_name}`)
},
users: function (new_value, old_value) {
alert(`users watch!!${this.users['name']}`)
}
}
methods: {
changeJiro () {
this.user_name = '二郎'
this.$set(this.users, 'name', '二郎')
},
changeSaburo () {
this.user_name = '三郎'
this.$set(this.users, 'name', '三郎')
}
}
上記の状態でchangeJiro
or changeSaburo
を呼び出すとuser_name
しか監視されません。
Objectを監視したい場合には以下のようにwatchに対してdeep
オプションを付与する必要があります。
users: {
handler: function (new_value, old_value) {
alert(`users watch!!${this.users['name']}`)
},
deep: true
}
公式の以下に記載があります。
watchについて
2. =
で追加してはリアクティブになりませんよ
もう1点ハマったところでObjectの値をセットする際の処理の仕方です。
とほとんど同じ内容ですがmethodsでの
users
へのセットをuser_name
と同様に=
に変更しています。data () { return { user_name: '太郎', users: {} } } watch: { user_name: function (new_value, old_value) { alert(`user_name watch!!${this.user_name}`) }, users: { handler: function (new_value, old_value) { alert(`users watch!!${this.users['name']}`) }, deep: true } } methods: { changeJiro () { alert(`check!! ${this.users['name']}`) this.user_name = '二郎' this.users['name'] = '二郎' //←ここが=でのセットに変わっている }, changeSaburo () { alert(`check!! ${this.users['name']}`) this.user_name = '三郎' this.users['name'] = '三郎' //←ここが=でのセットに変わっている } }
こちらも同様にchangeJiro
or changeSaburo
を呼び出すとuser_name
しか監視されません。
ただしusers['name']
を確認してみると値はセットされています。
原因としてはVue.jsはプロパティの追加または削除を検出できず、リアクティブになっていないため監視できないとのことです。
対応方法としてはわかっているもので2つあります。
- 最初から定義しておく
set
にて追加を行う
1. 最初から定義しておく
Objectのプロパティを最初から定義しておくことで監視することが出来るようになります。
dataに定義しているusers
を以下のように修正します。
users: { name: '太郎' }
2. set
にて追加を行う
こちらは1. に書いてある通りで、methodを以下のように修正します。
changeJiro () {
this.user_name = '二郎'
this.$set(this.users, 'name', '二郎')
},
changeSaburo () {
this.user_name = '三郎'
this.$set(this.users, 'name', '三郎')
}
もっと詳細については以下をご参照ください。
リアクティブの探求
また配列に関しても同様の注意が必要で以下に詳しく書かれております。
配列の変化を検出
終わりに
1人でわりといい時間考え込んでましたが周りに聞いたら即解決しました。
悩みすぎるのはよくないと反省すると共に心強い味方がいることに大変感謝した次第です。
またVueの公式は大変日本語でも充実しているのでしっかり読もうと思いました。
以上です、これからVueをご利用される方の助けになれば幸いです。
2018年11月21日水曜日
Visual Studio CodeでNuxt.jsにデバッガをかける
こんにちは!
シタテル株式会社CTOの和泉です。
シタテルではフロントエンドの開発にNuxt.jsを使っています。
デバッガをかけてたいときはどうしたらいいんだろうと思って調べていたら良さそうなやり方を見つけたので自分の記録がてら書いておきます。
参考:
https://codeburst.io/debugging-nuxt-js-with-visual-studio-code-724920140b8f
手順
Nuxt.jsのプロジェクトを作る部分は割愛します。
1. package.json に コマンド追加
"scripts": {
"debug": "node --inspect node_modules/.bin/nuxt",
2. デバッガの設定
画像左下の虫マークをクリック
図中「Launch Program」右の歯車をクリックして実行設定を開く
右下「Add Configuration」をクリックして「Launch via NPM」を選択すると実行設定が追加されます。追加後はlaunch.json
ファイルを保存してください。
3. デバッガの実行
追加された「Launch via NPM」を選択して再生ボタンを押すとデバッガが実行されます。
ブレークポイントは debugger
と記述
ブレークしたところで変数などを確認できます。
以上、簡単ですがNuxt.jsにデバッガをかけられるようになりました。
2018年11月13日火曜日
Macでの作業をちょっと楽にする7つ道具
こんにちは、シタテルの朝野です。
DevOpsやインフラ部分を担当しています。
今回はMacBookでの作業をちょっと楽にするアプリを紹介したいと思います。
本格的に開発をMacでするようになって2年ほどなのでまだまだMac界を知らないところもありますが、役に立てばうれしいです。
7つ道具とは!
Karabiner
https://pqrs.org/osx/karabiner/
キーの入れ替えや修飾キーがらみの動作をカスタマイズできます。
ちなみに私は
- 左CapsLock -> 左Command
- 左Command -> 左Control
- 左Control -> 左CapsLock
という修飾キーローテーションをしていたりします。
AppCleaner
http://freemacsoft.net/appcleaner/
アプリケーションを「完全に削除」するアプリです。
アプリ本体に加え、設定ファイルやユーザーデータ等も一気に削除できます。
掃除をするなら徹底的にしたいですね。
Alfred
Mac使いにはおなじみの帽子マークのアプリです。
アプリケーションの起動やファイル検索、Web検索、電卓など機能を素早く呼び出せます。
ほぼアプリケーションランチャーとしてだけ使っているのでもう少し使いこなしを覚えたいです。
Clipy
クリップボードにコピーした履歴を保存して、呼び出せます。
いろんなところから何度もコピペをしていると、コピー元がどこだったかわからなくなることあるますよね?
GIPHY CAPTURE
https://giphy.com/apps/giphycapture
デスクトップの任意の領域を録画してgifアニメーションのファイルに保存できるツールです。
アプリケーションの修正した部分の動作なんかをキャプチャしてプルリクエストに添付しておくとレビューがはかどります。
Macs Fan Control
https://www.crystalidea.com/macs-fan-control
温度管理アプリです。
回転数や基準温度を設定して冷却ファンの動作を調整したり、メニューバーにCPU等の温度を表示できます。
MacBookで目玉焼きが作れそうなときにぜひ。
FlagSwitcher
https://itunes.apple.com/jp/app/flagswitcher/id1157313107?mt=12
入力言語を切り替える際にチラッと国旗を表示するだけのアプリです。
だけなんですが、今入力モードを何にしたのかがわかると少しだけタイピングの効率が良くなります!💪🏻
まとめ
今回はMacの基本操作やシステム系のアプリを紹介しました。
普段のちょっとした作業を楽にするのもDevOps!
とまでは言いませんが、開発系のアプリ紹介なども考えているのでまた記事にできればと思います!
2018年11月5日月曜日
Gitコマンドのエイリアスを設定する
こんにちは、シタテルの藤本です。
主にSCS(Sitateru-Control-System)という生産管理システムのバックエンド(Rails)を担当しています。
シタテルではバージョン管理にGitを使用しています。前職ではSVNを使用していたので
まだまだ使いこなせていないところも多々ありますがなんとかやっております。
SVN時代はコマンドはほとんど使用していなかったのですがGitではコマンドにて使用しています。
使用するにあたりコマンドを打つのがだんだん面倒になってきます。
そこで省略できる方法を書いてみます。
Gitコマンドのエイリアスを登録する
git config [<option>] alias.[<登録したいコマンド>] [<実際のコマンド>]
で登録ができます、例えばstatus
をst
として登録したい場合は
git config --global alias.st status
と叩くと登録ができ
$ git st
On branch feature/XXX
Changes not staged for commit:
...
という感じで実行できるようになります。
Git - git-config Documentation alias
登録したエイリアスを編集する
登録した後にエイリアスを編集したくなった場合は以下のコマンドを叩きます
git config --global --edit
叩くと現在登録されているエイリアスが表示されますので修正が行えます。
Git - git-config Documentation edit
ちなみに自分が登録しているのはこんな感じです
st = status
br = branch
sth = stash
plog = log --pretty='format:%C(yellow)%h %C(green)%cd %C(reset)%s %C(red)%d %C(cyan)[%an]' --date=iso
glog = log --pretty='format:%C(yellow)%h %C(green)%cd %C(reset)%s %C(red)%d %C(cyan)[%an]' --date=iso --graph
co = checkout
reseth = reset --hard HEAD^
resets = reset --soft HEAD^
cm = commit
面倒になったら登録するようにしています。
その他
git
も打つのが面倒になって来たので以下をbashrcに登録します。
alias g='git'
これでグラフでログが見たい時には
g glog
と叩くと
* 7b409a634 2018-11-01 21:55:55 +0900 commitコメント (HEAD -> feature/XXXX) [member_name]
* fb51d1324 2018-11-01 14:01:38 +0900 Merge pull request [member_name]
|\
| * 83042fade 2018-11-01 04:39:00 +0000 commitコメント [member_name]
* | 0c745ad18 2018-11-01 11:25:25 +0900 Merge pull request [member_name]
|\ \
| * | e8f4b4bb8 2018-11-01 11:10:46 +0900 commitコメント (feature/YYYY) [member_name]
| |/
* | c53cf46d1 2018-11-01 11:22:27 +0900 Merge pull request [member_name]
|\ \
| * \ 827428b98 2018-10-31 17:21:50 +0900 Merge branch 'develop' into feature/ZZZZ [member_name]
| |\ \
と表示されるようになります。
以上です、git alias
で検索すると色々と出てくるのでお好きなものを登録してみて
お試しいただければと思います、それでは。
2018年10月31日水曜日
s3の操作はaws-cliよりs3cmd使うほうが便利
こんにちは!
シタテルで エンジニアをしている建山です。
主に工場向けのマイオペというシステムの開発を行っています。
シタテルではファイルをawsのs3でホスティングしています。
直接s3のファイルを操作することは少ないのですが、やはり時々は発生します。
そんなときにはaws-cli
を使うこともできるのですが、s3cmd
を使うとより簡単なコマンドでS3を操作できます。
いくつかよく使うコマンドをまとめました。
ディレクトリのファイル権限を操作
s3cmd setacl -r --acl-private s3://バケット名/ディレクトリ名/
-r
は再帰的に配下すべてやってくれる--acl-private
はprivate権限にする--acl-public
はpublic権限にする
※バケットも指定できる
ディレクトリの中身を参照
s3cmd ls s3://バケット名/ディレクトリ名/
バケットの情報をみる
s3cmd info s3://バケット名
これ以外にもファイル/ディレクトリアップロードや削除などいろいろなことができます。
コマンドのインストール
インストールはmacの場合、
brew install s3cmd
でできます。
コマンドを使う前に、AWSのアクセスキー等を設定 する必要があります。
s3cmd --configure
ぜひ、お試ししてみてください。