Furyu
[フリュー公式]

Tech Blog

フリュー株式会社の技術ブログです

2018年12月4日

Hashimoto Naoto

ESXiサーバにパスワードなしでSSH接続したい

ピクトリンク事業部開発部インフラ課の「部署名が変わったのに未だ慣れず、前世の記憶に苛まれている系エンジニア」の橋本です。こんにちは。今年がもう終わるとか信じたくないです。

本記事は フリューAdvent Calendar 2018 の12/4分です。

 

さて本題。

ESXiはVMware社 が提供する、仮想環境を構築する上で便利に使える強力なハイパーバイザです。
無料で使えるライセンスもあるので、利用されている方も多いのではないでしょうか。

 

バージョン5以前はvSphereClientの導入が必要でしたが、バージョン6以降からは割り当てたIPアドレスにブラウザからアクセスするだけでGUIによる視覚的な操作も可能です。これまでに比べるとべんりでつよいです。

 

しかし、何か作業をする際にその都度IDとパスワードによる認証を行うのは、正直面倒です。

面倒はないほうが幸せです。孫子曰く「兵は拙速を尊ぶ」とも言います。書いてる私は兵ではないですし、兵の人がこの記事を読んでいる率は低い気もしますが、簡潔なのは良いことです。(この一文が冗長であるという厳然たる事実は全力で見逃してください)

 

また、コマンドライン操作であれば自動化もしやすいです。

そのため、楽ちんにSSH接続できる環境にしましょう! というのが今回のお題です。

やりかた

  1. SSH接続を許可する
  2. 接続するユーザを作成する
  3. ユーザに権限を付与する
  4. 鍵ファイルを配置する
  5. ssh/config に接続設定を書く

SSH接続を許可する

ESXiサーバのデフォルト設定では、SSH接続を拒否するようになっています。
GUIにID, パスワードでログインしてから[アクション] → [サービス] → [SSHの有効化] を選択しましょう。

接続するユーザを作成する

[ホスト] → [管理] から [セキュリティとユーザ] タブを選択し、[ユーザーの追加]から設定してください。
英数字大文字小文字を含む、それなりに強いパスワード設定が求められます。

ユーザに権限を付与する

[アクション] → [権限]から、先ほど作成したユーザに対して権限を設定します。

そのユーザで行いたいことによって、適切な権限を設定します。

 

ゲストサーバの状態を確認する用途であれば「読み取り専用」で十分ですし、ホストの起動/停止まで自動化したいという欲求があるならば「システム管理者」といった具合にです。
「システム管理者」はなんでもできるので、迷ったらコレにしておけば、なんて気もするかもしれませんが、システムを壊さないためにも不要な権限付与は控えるほうが無難です。

もしユーザを乗っ取られたときにえらい目に遭いたくもないですし。

鍵ファイルを配置する

以降はコマンドラインでの操作です。

鍵の生成

接続するユーザ用の鍵ファイルを作成します。

ssh接続用の公開鍵をすでにお持ちの場合、鍵の作成はスキップして大丈夫です。
パスワードなしで接続したいので、パスフレーズは空のままにしておきます。github等で秘密鍵を公開してしまってはダメですよ。

鍵の配置

接続するESXi、接続したいユーザ名に置き換えて実行してください。rootのパスワード入力を求められます。
公開鍵(id_rsa.pub)はauthorized_keysという名前で置かなければなりません。

 

具体例として、先ほど作成して権限を付与したユーザがhogeというユーザだった場合は、

/etc/ssh/keys-hoge/authorized_keys

という形にしてやる必要があります。

.ssh/config に接続設定を書く

ここまでで完了でも良いのですが、より簡略化を進めるために ~/.ssh/config に以下の設定を追記しましょう。

たとえば、esx-hoge-01, esx-hoge-02, esx-hoge-03… というESXiサーバにhogeユーザで便利に接続したいのであれば、以下のようにまとめてやることも可能です。

こうしておくと、

としてやるだけでパスフレーズなしでSSH接続することが可能です。楽ちんになりました。

 

楽ができるって幸せですね! 手を抜くためには全力を尽くしましょうね。

余談

ESXiサーバを再起動すると鍵が消えるという悲しい問題もあるのですが、そちらはまた別の記事をご覧ください。


2018年12月3日

furusin

TextInputLayoutの導入方法と、導入による効果考察

こんにちは。ピクトリンク事業部の古川です。

この記事はフリューAdvent Calendar 2018の12/03分となります。

AndroidのTextInputLayoutについて触れていきます。

 

TextInputLayoutとは

AndroidのText入力欄をリッチにしてくれるもので、Support Library に含まれています。

Material Design Guidelineはこちら

 

上の動画のように、入力のヒントがアニメーションして常に表示されるようになってくれます。リッチですよね。

最近だと、オミカレさんAndroidアプリがTextInputLayoutに対応しています。

 

導入方法

非常に簡単です。

Support Libraryをimplementする

まずはSuport Libraryを入れます。

これで準備は完了です。

では実際に使っていきましょう。

レイアウトのXMLを作る

TextInputLayoutを入れる

リッチな入力欄を作るには、TextInputLayoutと一緒にTextInputEditTextを利用します。

導入はこれだけです。

ログイン画面風に入力画面を作ると以下のようになります(レイアウトXML全体)

実行すると以下のような画面になりました。

textinputlayoutsample-MainActivity-12032018102340

 

導入のまとめ

いかがでしたか?

非常に簡単に導入する事ができました。

入力欄の色はデフォルトで入っていますが、themeをStyleで作成することで自由に変更することも可能です。

色を自由に変えることで、アプリのデザインに違和感なく導入することができます。

 

導入における効果の考察

以下の2点が大きいと思います。

  1. デザインがかっこよくなる
  2. 入力ミスが低減される

それぞれ見ていきます。

デザインがかっこよくなる

これは言わずもがな、とは思います。

通常のEditTextだとアニメーションも何もなく、少し固い印象です。

TextInputLayoutの小さなアニメーションを入れることで「かっこいい」「なんか動いてる!」といった体験をユーザーへ与える事ができます。

アニメーションがあると、アプリに対するユーザーの感じ方は大きく変化(向上)します。

これだけでも導入する価値は大きいのではないでしょうか。

入力ミスが低減される

TextInputLayoutとTextInputEditTextを組み合わせることで、ヒントが入力欄上部に常に表示されることになります。

そのため、例えばパスワードのような「入力ルール」を常に見られる状態になります。

結果、「半角英数字8文字以上、大文字含む」といったような複雑なルールを忘れずに、スムーズに入力してもらうことが可能になります。

スムーズ入力できるということは、アプリがストレスフリーで利用できることになります。

ストレスフリーなアプリは評価が向上します。

ちょっとしたデメリット

入力欄を全てTextInputLayout+TextInputEditTextにする…となると、その分コードは長くなりますし、

実装関係者が知らずにEditTextをそのまま使ってしまう場合があります。

TextInputLayout+TextInputEditTextを使った独自レイアウトを作っておき、

その独自レイアウトを使うようにルール化すべきなのかもしれません。

 

まとめ

TextInputLayoutの簡単な導入方法と、導入することにおけるメリットをまとめました。

アニメーションやストレスフリーなアプリはユーザー体験を向上させ、アプリの評価も向上させます。

改善は小さなことからコツコツと!

これからも改善活動を続けていきたいと思います。

 


2018年11月29日

furusin

フリュー主催の勉強会(京都Devかふぇ#4)を開催しました!

こんにちは。ピクトリンク事業部の古川です。

前回に引き続き、フリュー主催の勉強会を開催しましたのでご報告します。

前回のレポートはこちらから

京都Devかふぇ#4 〜レガシーシステム考古学〜

今回も合計で約30名とたくさんの方々にご参加頂きました!

今回はモバイルなどといった特定の分野を選択するのではなく、エンジニアだったら通る(かもしれない)分野での開催となりました。

参加募集のconnpassに記載の説明文は、弊社メンバーが村上春樹風に執筆しました。

ぜひご一読ください。

勉強会の様子

15分枠

トップバッターは、弊社でプリントシール機の開発をしている田村より発表しました!

長年運用されてきた自前のライブラリにおける課題と、それに対するプルリクを活用した改善の取り組みについての発表でした。

私自身、非常に有益で「なるほどー!」と思う内容が多かったです!
IMG_20181122_190827

レガシーコードとの戦いの軌跡 from Katsuhiko Tamura

 

2番手は@mitsuharu_e 様より「iPhone OSアプリ開発の昔話」です。

脱獄(Jailbreak)など、懐かしい単語が並んで楽しい発表でした!

iOS(iPhone OS)が辿ってきた歴史を改めて確認でき、iPhoneの成長を感じられる発表でした。

IMG_20181122_192622

 

3番手は @cs_sonar 様より「物理サーバーを運用してきたという話」です。

物理サーバーを運営してきたことによる経験や、クラウドへ移行した利点を発表いただきました。

懐かしのサーバールームを思い出して色々な感情が湧いてきました。

IMG_20181122_194324

物理サーバーを運用してきたという話 from cs_sonar

 

LT大会

1人目は @fmty 様より「レガシーなコミュニケーションツール」です。

私自信、色々と思うところがありリアクションに困りました。。

こうやって世界を良くしていく活動には感銘します!

MVIMG_20181122_200154

2番手は@takey様の「VB6.0との闘い方」です。

VB6.0は20年前に出たバージョンですので、その古いものといかに付き合うか、色々な工夫が見られました。

IMG_20181122_200722

Kyoto devcafe#4 20181122 from takey

 

3番手は@mkashima 様より「Windows95の思い出」です。

(写真もスライドも手元にございませんでした!大変申し訳ございません!!!)

懐かしのWindows95のゲームが出てきて「うおぉぉ」となりました。

また、MacでWindows95が動かせられるアプリも紹介され、とてもおもしろい内容でした!

最後は@natsutan 様の「なぜFPGAの人は日付フォルダーでバージョン管理をするのか」です。

深い歴史の中で生まれた「レガシーとのお付き合い」だなぁと感じ、面白い内容でした!

IMG_20181122_202139

Kyoto dev caffe from Natsutani Minoru

 

まとめ

今回は特定の分野に限った技術分野ではなく、エンジニアであれば誰もが通るであろう「レガシーシステム」についての勉強会でした。

そのため、多様な分野の方々が集ってくださり、懇親会も非常に盛り上がっていたのが印象的です。

また、これまでは弊社サービスのピクトリンクに関わるメンバーばかりでしたが、初めて他部署のメンバーも参加してくれ、とても楽しんでくれました!

本勉強会も、今まで以上にもっともっと盛り上げていきたいと思っております。


2018年11月20日

masao

フリュー主催の勉強会が第4回目を迎え、会場が変わります!

お初お目にかかります🍤ピクトリンク事業部サービス開発1課のまさおといいます。

以前こちらの記事で紹介した弊社主催の勉強会 京都Devかふぇ が早いもので第4回目を迎えます!
私もスタッフとして参加していますが、毎回たくさんの方に集っていただいていて嬉しい限りです。
おそらく今年最後の開催ということで告知と、会場が変わるので経路案内です。

勉強会概要

日時:2018/11/22(木) 19:00〜21:30
場所:フリュー株式会社会議室 (京都銀行京都駅前ビル6F)
内容:レガシーシステム考古学
長年プロダクトを支えてきたいにしえのコードや仕様とうまく付き合うためのお話をします。
終了後は軽食をしながらの懇親会も予定しております。
詳細・参加申し込みは こちら から!

 

会場までの経路

GoogleMapの経路でいうと、このような感じです…が正面入口が18時には閉まってしまう罠があるので、弊社なりに写真付きでご案内します👐

 

ステップ1.JR京都駅から京都タワー方面へ向かう

まずは京都駅の中央改札口から出ます。
IMG02878_HDR

そのまま真っすぐ外に出ると視界が開け、京都タワーが見えます。
IMG02879

京都タワーに向かって歩いていくと、信号があります。信号を“右斜めに”渡ってください。
IMG02881_HDR-1024x576

ステップ2.京都銀行 京都駅前支店へ向かう

信号を渡ったら、ビルに沿って北方面に歩きます。
京都タワーとヨドバシカメラが道路を挟んで反対側に見える感じです。
ファミリーマートが見えたら、その手前の路地を入ります。あとすこし!
IMG_20181119_135511411_HDR

路地に入って1つ目の角を左にまがります。曲がってすぐの建物が会場です。
※一つ奥の京都銀行の立派な入り口に目が行きますが、18時以降は入れません。手前の通用口からお入りください。
IMG_20181119_135543304_HDR IMG_20181119_135636147

当日はこのあたりにスタッフが待機している予定です。
もしだれも居なくて入れない!という場合はTwitterで #KyotoDevCafe とつけてつぶやいていただければお迎えに参ります。
IMG_20181119_135642514

ステップ3.エレベーターで6階へ上がる

建物に入り右に進むと、オフィス階に上がるためのエレベーターがあります。
乗りこんで6階へ!
IMG_20181119_135732790

エレベーターを降りたら右へ!
手前側の扉をお入りください。
IMG_20181119_090836560

この扉を入って左側にある扉が会場入口です。(※正面、右側は弊社オフィスエリアのため立ち入らないでください)

 

それでは当日、皆様のご来場をお待ちしております 😁


2018年11月7日

furusin

Androidエンジニア以外にも知ってほしいAndroidアプリ用語-UI部品編-

こんにちは。ピクトリンク事業部の古川です。

この記事はZaimの@akatsuki174さんの記事「iOSエンジニア以外にも知ってほしいiOSアプリ用語-UI部品編-」に感化されて書きました、Android版となります。

AndroidとiOSは似たような画面を実装する事は可能です。

しかしUIの部品の名称が異なっている事が少なくありません。

また、それぞれ独特の部品もあります。

その辺りを明確にし、まとめていこうと思います。

重要度★★★

AppBar(もしくはToolBar)

toolbar

Android Material Design Guidelines:AppBars:top

iOSではナビゲーションバーと呼びます。

現在表示している画面のタイトルといった情報や、関連するアクションを表示する領域です。

画面の最上部に表示されます。

基本的に常時表示されているものですが、スクロールして下の方にある情報を表示したい際には隠すことも可能です。

 

また、画面上に大きく表示していたタイトルをToolbarに入れるようなアニメーションを作ることも可能です。

Android Support Library 22.2.0 で追加されたCoordinatorLayoutを利用します。

 

NavigationDrawer

activities-NonLoginMainActivity-10232018181213

Androidアプリの大きな特徴です。

Android Material Design Guidelines:Navigation drawer

ツールバーの左部に「≡」マーク(ハンバーガーマークと読んだりします)がある場合は、NavigationDrawerがある場合が多いです。

主な用途は画面の切り替えです。

Google系のアプリであればアカウントの切り替え機能を提供したりします。

FloatingActionButton

activities-BootstrapActivity-11062018140659

Androidアプリの特徴です。

Android Material Design Guidelines:Buttons: floating action button

通常は画面の右下に表示し、現在表示している画面で行いたいメインのアクションを提供します。

Toast

toast

Androidの初期から存在する、メッセージを表示するためのものです。

主にエラーメッセージを表示したり、ログインの成功などで使います。

TabLayout

tabs

iOSではタブバーと呼びます。

Android Material Design Guidelines:Tabs

複数の画面を1画面に用意し、ユーザーのアクションによって画面を行き来できるようにするものです。

タブ名は文字だけかアイコン付きが一般的です。

AndroidだとTabLayoutは画面上部に設置するのが一般的でしたが、近年では下部に設置するようiOSに近づいてきている印象があります。

私個人的には、上部にあると片手で端末を持っている場合に指が届かないので、下部に設置されるのは良い傾向だなと感じています。

BottomNavigationView

 

bn

Android Material Design Guidelines:Bottom navigation

iOSのタブバーと似たレイアウトになります。

TabLayoutにも似ていますが、BottomNavigationViewは完全に異なるメイン機能間を切り替えるためのナビゲーションを提供します。

アイテムの数も3〜5と制限があります。

近年、画面下部にBottomNavigationView+画面上部にTabLayoutを設置するといったアプリが増えてきました。

(例えばGoogle I/0 2018)

 

重要度★★

Dialogs

activities-NonLoginMainActivity-10232018190023

Android Material Design Guidelines:Dialogs

Androidでは、上記図のようなダイアログが一般的です。

ボタンは基本的に2つです。

・ネガティブボタン:キャンセルといったネガティブな動作を割り当てます。

・ポジティブボタン:OKや実行といったポジティブな動作を割り当てます。

「ニュートラルボタン」と第三のボタンを設置することができますが、あまりオススメしません。

ボタンが増えるとユーザビリティが下がる(ユーザーが正常な判断ができなくなる)ため、2つがよいかと思います。

 

CardView

browser-ChromeTabbedActivity-10232018190358

Android Material Design Guidelines:Cards

最近のGoogle検索結果もCardViewになっていたのをご存知でしたか?

各アイテムがまるでカードのようなViewになっていて、ひとつの物体として認識できます。

影が映っているように見えるのも特徴で、フラットデザインからマテリアルデザインに変わった時の大きな特徴です。

SnackBar

 

 

snackbar_button

Android Material Design Guidelines:Snackbars

簡単なメッセージを画面下部に表示するためのものです。

Toastにも似ていますが、Toastはメッセージを表示するだけのものでしたが

SnackBarはボタンを設置することが可能です。

例えばGoogleフォトだと画像を削除すると「ゴミ箱に移動しました」とSnackBarが出ますが、そこに「もとに戻す」ボタンも用意されています。

メッセージととにユーザーに何らかの行動をさせたい場合、便利です。(メール送信の取消しなど)

 

Swipe-to-Refresh(Pull-to-Refresh)

「引っ張って更新」と呼んだりします。

一度通信して情報を読み込んだ後に更新をかけたい時に使います。

WebブラウザやTwitterアプリにも使われています。

重要度★

ChromeCustomTabs

performance

通常はWebブラウザを立ち上げたり、WebViewを用いてWebページを表示していましたが、

ChromeCustomTabsを使うとアプリ内のWebページ読み込みを大幅に高速化できます。

ChromeCustomTabsはアプリ内に組み込まれたWebViewのような動作をするため、同一アプリ内での表示だとユーザーへ認識させることができます。

 

まとめ

いかがだったでしょうか。

AndroidにはiOSとは異なるViewがたくさんあり、似たものも使い方が多少異なっていたりします。

もっとたくさんありますが、また少しずつ触れていけたらと思います。