4月 2019|sitateru tech blog

sitateru tech blog

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

2019年4月23日火曜日

同時に複数のマシーンで同じ操作をする with Tmux




sitateruのエンジニア北爪です。

複数のシェルで同じ操作をしたい時ってないですか?
  • ログを一箇所に集めてないけど、アプリケーションサーバーが複数台ある
  • 複数台同時にtopコマンドで負荷をまたはtailコマンドでログを調査したい

など調査段階でAnsible, Fabやcapistranoで操作するほどではなく、複数のサーバーを同じようにインタラクティブに操作したいという要求はあるように思います。

今回は複数のシェルに対して、分割された画面をみなが同時に操作、そのコマンドラインの結果を参照することが可能です。

tmuxを風にいうと、一つのpaneに行うキーボード操作をそのpaneが存在しているWindow内すべてのpaneキーボード操作を同期することができます

この機能は、tmuxの synchronize-panes 機能です。tmuxを使ってない人には導入する大きなメリットの一つになるのではないかとお思います。デフォルトです。

http://man.openbsd.org/OpenBSD-current/man1/tmux.1#synchronize-panes

使い方

1. tmuxを起動し、複数のpaneを作成がある状態で
2. tmuxにbindしてあるtmuxのprefixキーを入力した後で、 `:` を入力します
(余談私は ctrl-t にしています)

# act like GNU screen                                                                                                                                       
unbind C-b                                                                                                                                                  

set -g prefix C-t  

3. tmux用のコマンドが立ち上がるので、そこに、 set synchronize-panes onを入力します。
4. そうするとなんと!表示されているpane(分割した画面) に同じキーボード操作が入力されます
5. もう同期したくなくなったら、 set synchronize-panes off にて解除することが可能です。

以上です。



, ,

2019年4月16日火曜日

Vue.jsとScoped CSSとz-indexの話

ウェブサイトのイラスト

こんにちは、シタテルの茨木です。

突然ですが、scoped cssいいですよね

scoped cssは、特にVue.jsにおいては、css設計のスタンダードと言っていいのではないかと思います。

BEM等の学習コストの高い手法を覚える必要がなく、「コンポーネント内でのみcssクラス名の一意性を確保すればいい *1」という、シンプルで管理しやすい設計指針を打ち立てることができ、実に理にかなった手法ですね。
プロジェクト全体でのcss命名規約の統制問題は依然としてありますが、コンポーネントベースでの設計手法自体がコンポーネントを書き捨てる運用と親和性があるため、そこまで大きな問題にはならないのかなと思います。

依然として残る考慮点

一方、scoped cssだけで、コンポーネント内にcss的な関心事を完全に閉じ込められるかというとそうではなく、当然ながら例外もあります。

最も代表的な例としては、cssの仕様上継承されてしまう属性ですね。
font-sizeなど、属性自体が子孫要素に継承されるものとして定義されていますので、セレクタレベルでscopedにしたところで、子孫要素への影響を避けることはできません。

まあこの辺は書いていても直感的に理解しやすいのでそこまで問題になりにくいのですが、個人的に危ないなと思うのは「z-index」「重ね合わせコンテキスト」です。

z-indexの管理

cssをざっくり理解したつもりになっているエンジニアが犯しがちな間違いの一つが、z-indexがグローバルだと思いこんでしまうことだと思います。

そう考えているエンジニアは、Vueプロジェクト全体で単純にコンポーネントごとのz-indexを管理することをを思いつきます *2。例えば、コンテキストメニューのコンポーネントはz-index1000番台、モーダルダイアログのコンポーネントはz-index500番台といった管理です。(モーダル上でコンテキストメニューを開くかもしれない。その場合はコンテキストメニューがモーダルの下に回り込んでほしくない、なんてことを考えているわけですね)

この方式は重ね合わせコンテキストがページ内で1つであるうちは上手く機能しますし、ルール自体はおそらく間違いでもないです。
ただ、重ね合わせコンテキストに関する考慮を漏らしていると、「z-indexで勝っているはずなのに、なぜか後ろに回り込んでしまう要素」が出てくる可能性があり、「なぜか動かない」という状況に見舞われます。実際には仕様理解が足りていないだけなのですが。

理解すべき仕様「重ね合わせコンテキスト」の詳細についてはMDNを読んでください。

https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context

ざっくり言えば、「z-indexは同じ重ね合わせコンテキストの中での比較にしか使われない」「重なる系の属性(potision: absoluteなど)が指定された要素は自身が重ね合わせコンテキストを形成する」ということです。

これもfont-sizeなどと同じで、親要素で指定された属性が(たとえscopedであろうとも)、子孫要素に影響を与えうる、ということですね。

デザインは文脈依存?

scoped cssとコンポーネントベースでの部品化は、確かに今までのcssの不便さや複雑さの大部分を解決しているように見えますが、z-indexの件を一つの例として考えると、「デザイン・見た目・UIは、どこまで部品化しても文脈依存から逃れられない」ということを示している気がします。まさに、重ね合わせ「コンテキスト」ですしね。

z-indexをpropsで渡せば…みたいな発想はもちろんあるのですが、結局その先にあるのはinput要素の再発明だったりするわけです。input要素をwrapしてたはずがinput要素を作っていた…みたいな。

どんなコンテキストでもデザイン破綻せず使うことのできるUI部品の実装は、相当な労力を要します。(まあ、実際にUI部品系のnpmパッケージの中を覗いてみると、普通にz-indexがハードコードされていて変更できなかったりすることが多く、みんなほどほどに手を抜いているんだと思いますが)

プロジェクト内でのデザイン統一・再利用を想定してコンポーネントを分割設計する際に、デザイン的な汎用性を求めるのはほどほどにしておくべきなのかな、と思った次第でした。

他コンポと疎結合に作るとか、ステートレスに作るとか、そちらに労力を割いたほうが実りが大きいんじゃないかな。UIの寿命は短いので、捨てやすいように疎結合に書くのが一番大事かな、と個人的には思います。



*1: slot内のスコープが親子共通だったり、コンポーネントroot要素に親からclassが注入できるといった例外はありますが

*2: 私です


, , ,

2019年4月8日月曜日

地方活性化のイベントに参加してきました

こんにちは、シタテルの藤本です。
イベントの参加のために久しぶりに東京に行きましたが、渋谷駅から出られなくなりそうになりました。
あらためてお上りさんには厳しい街であることを実感しました。



先日「スマホで見つける地方のしごと」というシンポジウムにパネラーとして
参加させていただきました。

内容を簡潔にすると「首都圏での離職と地方へUIJターンを希望する方と地方企業の
マッチングを進めて地方を活性化していこう」というイベントでした。

200名以上の方が参加され、各者の熱いプレゼンもありここから少しづつ
地方へ人材が広がっていってくれるのではないかと感じることができたイベントでした。

そんなイベントについて簡単にレポートしてみたいと思います

プレゼンター、パネラー

プレゼンター、パネラーとして以下の方々が参加されていました。

  • 求人サイト運営企業
  • 地方自治体
  • 商工会議所
  • 地方への移住者(Uターン)

イベントの大まかな流れ

以下の内容で2時間ほどのイベントでした。

  1. 厚生労働省からの本取組みにおける施策のついての説明
  2. 求人サイト運営企業からのプレゼン
  3. 地方自治体、商工会議所、移住者からのプレゼン
  4. パネルディスカッション

各者の主張について

各者の主張について個人的に印象的だったことについて書いていきます。

求人サイト運営企業

求人サイト運営企業の方からのプレゼンで印象に残ったのは以下の2点でした


  • 転職は孤独であり寄り添うことに注力したい
  • 転職は一般的になっている

転職は孤独であり寄り添うことに注力したい

転職にする時は非常に多くの「不安」と戦うことになると思いますが共有・共感者が少ないといった問題があり、そこに「賛成」と後押しすることで生き方を一緒に考えていこうといったものでした。

個人的には人材の流動性が高まることはいいことだと思っているので求人サイト側がこういったことを考えていただけるとありがたいなと思いました。

ちなみに弊社のBaseValueの一つに「よりそう」と言葉が定義されており、大きく以下の3つで構成されています。

  • リスペクトする
  • 声を聴く
  • 感動を与える
詳細が気になった方は以下を参照いただけると嬉しいです。

シタテルの目指す未来|シタテル株式会社

転職は一般的になっている

転職をポジティブに捉えているのは全世代で5割以上となっているということでした。
プレゼンターの方の言葉ですと「ポジティブ、ネガティブというより転職は一般化してきている」といわれていることがとても印象的でした。

地方自治体・商工会議所

地方自治体・商工会議所でも地方企業の魅力や人材育成・確保に向けた種々の取り組みを
されているのがすごく伝わってくるプレゼンでした。
印象的だったのは以下の3つです。

  • 人材育成・確保に向けた種々の取り組みをされている
  • コメリは新潟の上場企業だった
  • 地域資源を生かしたビジネスを展開

人材育成に向けた種々の取り組みをされている

小型ロケットの製造から打ち上げを通じた技術者の育成を行なっており、実際にロケットの打ち上げを成功されている地方がありました。

企業の枠を超えた技術者の連携や情報交換、人脈の育成などを推進されているとのことで地方を活性化していくために技術を磨いていくことは大切だなと感じました。

またUターンを促進するために東京からの無料のバスを出していたり、子供の時からものづくりフェアを実施して小学生に体験し興味を持ってもらい、ものづくりの楽しさを感じてさらに地元企業への魅力に気づいてもらうなどの取り組みをされていることも印象的でした。

コメリは新潟の上場企業だった

家の近くにコメリというホームセンターがあり、品揃えもよく安いのでよく利用させてもらっています。

その企業が新潟の三条市発祥の企業でしかも上場しているのは知りませんでした。
さらに三条市には上場しており本社をおいている企業が多くあり、人口1人あたりの上場企業数は東京、大阪についで3位とのことです。

地域資源を生かしたビジネスを展開

「もくロック」というブロックの木製玩具があるのですがこれの原材料となっているのが
地元の金属加工目メーカーが生み出しものということでした。
地元の資源を使い、地元の企業が新たなビジネスを生み出すということは素晴らしいなと思い印象的でした。

地方への移住者

広島への移住者の方でまちづくりのコンサルタントを行われている方でした。
非常に広島への熱い気持ちを持っている方で印象的だったのは以下の2点です。

  • 経営者との距離が近くなった
  • 「自分がいなくても回る」から「自分がいるから回る」

経営者との距離が近くなった

頻繁に経営者と面と向かって話す機会があり東京にいる時にはなかったことであるということでした。

「自分がいなくても回る」から「自分がいるから回る」

東京よりも人口が少なくなるので自分の役割や影響の割合が多くなるため、自分を必要とされる、頼られることが強く感じられるようになったということでした。

ぜひシタテルへ!

弊社シタテルですが本社は熊本にあります。
私も東京で13年程働いておりましたが2018年より熊本へUターンしてシタテルで働いております。

転職についての不安は色々とありましたが1つだけ挙げるとすると
前職ではほとんど管理業務を行なっており、実務でのプログラミングは5年以上していない状態でした。

そんな状態でどこまでやくに立てるか不安では、転職してまずは1年やってこれることができました。
まだまだ未熟で周りに迷惑をかけてはいますがシタテルのエンジニアの方はみんな教えたがりで優しく、わからないことがあり聞いたら、進んで色々と教えてくれるのでいつも助かっています。

私のように少しプログラムから離れてしまったがまた現場に戻りたいと考えている方もいるのではないかと思いますので、もし首都圏にて「また現場でプログラミングをしたい」、「いろんな技術に触れたい」という方、かつ「地方へ移住してみたい」という方がいらしたぜひシタテルへお話を聞きにいらしてください!

エンジニア│熊本or東京勤務 - シタテル株式会社のWeb エンジニア中途・契約・委託の求人 - Wantedly

少しだけ熊本の風景を

参加したイベント時に使用した風景写真です、熊本には自然が多く、いろんな風景を楽しむことができます。

近くの公園で桜満開になった時


家族でよく出かける天草の海

, ,