sitateru tech blog: Tips

sitateru tech blog

シタテルの技術やエンジニアの取り組みを紹介するテックブログです。

ラベル Tips の投稿を表示しています。 すべての投稿を表示
ラベル Tips の投稿を表示しています。 すべての投稿を表示

2019年1月24日木曜日

Gulp+EJSでページを量産

1月 24, 2019

こんにちは!
シタテル株式会社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で画像の色味が違う問題

1月 18, 2019

こんにちは!
シタテル株式会社UI/UXデザイナーの堤です。


以前出くわしたFirefoxとChromeが画像の色味が違う問題について解決方法をご紹介します。

画像はぱくたそさんから拝借

修正前

左がChromeで右がFirefox

微妙にFirefoxの色味が濃く出てしまいます。

修正後

解決方法

Photoshopで書き出しの際に「カラープロファイルの埋め込み」にチェックするだけ!

まとめ

以前なぜかわからずいろいろと調べていたところこの解決方法にたどり着きました。

微妙な違いにはなりますが、 写真が多いサイトだと全体の印象も変わってくるため気をつけたいと思います。

2019年1月4日金曜日

【mac】操作スペースを使いこなす!

1月 04, 2019

こんにちは!
シタテル株式会社エンジニアのいしづかです。

開発作業をしているといろんなソフトウェアを使いますね。
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 コマンドの紹介

12月 27, 2018

こんにちは! シタテルエンジニアの諏訪です。

今日はコンソール画面で使う 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で文字検索範囲が広すぎるときに疑う箇所

12月 17, 2018

こんにちは!
シタテル株式会社エンジニアのいしづかです。

みなさんはコードを書く時、どんなエディタを使ってらっしゃるでしょうか。

現在開発が続いているシタテルコントロールシステムのバックエンドはRailsで書かれています。

開発メンバーはそれぞれ自分が合うエディタを使っています。Ruby Mine使っている人もいますし、Atomもいたような・・・。

わたしはVisual Studio Codeを使っています。え?Vimであらずは人であらず?いや、まぁ、えへへ。

コードを書いているとコード内検索をかけたくなります。その際にはnode_modules配下とかは最初から外しておきたいものです。

今回はVisual Studio Code限定ですが、除外設定でハマったので備忘録としてその内容を書こうと思います。

Visual Studio Codeの除外設定

Visual Studio Codeの除外設定は大きく2つあり、 Files ExcludeSearch 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会議

12月 05, 2018

こんにちは!
シタテル株式会社エンジニアのいしづかです。

シタテルは熊本と東京の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日火曜日

シタテルで使っているデザインツールのご紹介

12月 04, 2018

こんにちは!シタテル株式会社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が動いてくれない

11月 29, 2018

こんにちは、シタテルの藤本です。
主にSCS(Sitateru-Control-System)という生産管理システムのバックエンド(Rails)を担当しています。

SCSではRailsでのViewは基本hamlで書かれていますが現在Vueへと移行しようとしています。
最近私もVueを触る機会があり、watchを使用していてハマってしまったところを2点ほど書いておきます。

  1. Objectをwatchするときはdeepをつけよう
  2. = で追加してはリアクティブになりませんよ

1. Objectをwatchするときはdeepをつけよう

以下のようにdata(user_nameusers)がいて
その値が変更されたことを監視するようにしたい場合に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の値をセットする際の処理の仕方です。

  1. とほとんど同じ内容ですが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つあります。

  1. 最初から定義しておく
  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にデバッガをかける

11月 21, 2018

こんにちは!
シタテル株式会社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つ道具

11月 13, 2018

こんにちは、シタテルの朝野です。
DevOpsやインフラ部分を担当しています。

今回はMacBookでの作業をちょっと楽にするアプリを紹介したいと思います。

本格的に開発をMacでするようになって2年ほどなのでまだまだMac界を知らないところもありますが、役に立てばうれしいです。

7つ道具とは!

Karabiner

https://pqrs.org/osx/karabiner/

キーの入れ替えや修飾キーがらみの動作をカスタマイズできます。
ちなみに私は

  • 左CapsLock -> 左Command
  • 左Command -> 左Control
  • 左Control -> 左CapsLock

という修飾キーローテーションをしていたりします。

AppCleaner

http://freemacsoft.net/appcleaner/

アプリケーションを「完全に削除」するアプリです。
アプリ本体に加え、設定ファイルやユーザーデータ等も一気に削除できます。
掃除をするなら徹底的にしたいですね。

Alfred

https://www.alfredapp.com/

Mac使いにはおなじみの帽子マークのアプリです。
アプリケーションの起動やファイル検索、Web検索、電卓など機能を素早く呼び出せます。
ほぼアプリケーションランチャーとしてだけ使っているのでもう少し使いこなしを覚えたいです。

Clipy

https://clipy-app.com/

クリップボードにコピーした履歴を保存して、呼び出せます。
いろんなところから何度もコピペをしていると、コピー元がどこだったかわからなくなることあるますよね?

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コマンドのエイリアスを設定する

11月 05, 2018

こんにちは、シタテルの藤本です。
主にSCS(Sitateru-Control-System)という生産管理システムのバックエンド(Rails)を担当しています。

シタテルではバージョン管理にGitを使用しています。前職ではSVNを使用していたので
まだまだ使いこなせていないところも多々ありますがなんとかやっております。

SVN時代はコマンドはほとんど使用していなかったのですがGitではコマンドにて使用しています。
使用するにあたりコマンドを打つのがだんだん面倒になってきます。
そこで省略できる方法を書いてみます。

Gitコマンドのエイリアスを登録する

git config [<option>] alias.[<登録したいコマンド>] [<実際のコマンド>]

で登録ができます、例えばstatusstとして登録したい場合は

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使うほうが便利

10月 31, 2018

こんにちは!

シタテルで エンジニアをしている建山です。

主に工場向けのマイオペというシステムの開発を行っています。

シタテルではファイルを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

ぜひ、お試ししてみてください。