Furyu
[フリュー公式]

Tech Blog

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

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がたくさんあり、似たものも使い方が多少異なっていたりします。

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

 

 


2018年11月2日

awata

pacemaker+corosync環境を作成した時にハマった話

こんにちは。
ピクトリンク事業部インフラ課の粟田です。
今回は pacemaker+corosync環境をCentOS7上に構築した時にハマった話を書こうかと。

発生した問題

サーバ2台(CentOS7)にpacemakerとcorosyncをインストールして環境を構築中にcorosyncが疎通できていなくて、pcs status corosync や crm_mon を実行すると、お互いにOFFLINE……

ログを見てみると unclean(offline)の文字列が見えたので、ググって出てきた結果を参照すると、再起動したら直ったというようなものが出てきたけれども解決に至らず……

原因

corosyncの設定時には(DNSで解決可能な)ホスト名を指定してたんですが、corosyncはこのホスト名を127.0.0.1と認識してたんでした。

なんで127.0.0.1になるんだろうと原因探していると/etc/hostsが悪さしてたんでした。

127.0.0.1にホスト名書くなよ……

きっとこの辺の設定を全サーバで意識したくなかったせいなんだろうな。

あとがき

無駄に時間使っちゃったよ……


2018年10月31日

Kayo

sudo: ruby: コマンドが見つかりません。。。

みなさん、こんにちは。ピクトリンク事業部インフラ課の藤本佳世です。

最近、サーバのリプレース作業の一環として、バッチスクリプトの移行作業を実施しています。この作業中、「sudo: ruby: コマンドが見つかりません」問題に出くわしたので、対処方法をシェアしたいと思います。

問題

フリューでは、rundeckを使って日次・月次のバッチを実行しています。

新しく構築した環境(以下、新サーバとします)に、従来通りの手順でスクリプトを実行しようとしたところ、エラーが出てしまいました。

今までは問題なく実行できていたのに、なぜ……?

対応策

sudoにオプションiをつけて解決しました。

詳細

エラーになっているexample.shの52行目を確認すると、rubyスクリプトを実行する記述がありました。

エラーの原因は、このrubyコマンドを実行した際、rubyコマンドが見つかりませんというエラーのようです。

実際に新サーバにsshログインし、rubyコマンドがないのかバージョン確認で検証してみました。

やはり、「ruby:コマンドが見つかりません」が出力されました。

旧サーバで実施すると問題ありませんでした。

rootで実施すると問題ありませんでした。

原因は、sudo経由で実行した場合、環境変数が引き継がれない...という問題でした。

もう少し詳しく説明すると

sudo はrootや他のユーザの権限でコマンドを実行することができますが、sudoの設定(/etc/sudoers)によっては、環境変数が引き継がれなかったり、上書きされる設定になっている事があります。

こちらは/etc/sudoersファイルの一部を切り取ったものです。

env_resetが設定されていてますが、これはsudoが実行された際、環境変数がsecure_pathの設定値に上書きされてしまいます。
またenv_keepにPATHがないためにPATHが引き継がれません。

上記のように、/etc/sudoersに追加することで、PATHを引き継ぐことができますが、
今回、私はsudoにオプション-iをつけて対応しました。オプション-iとは、何でしょうか?

こういう時は、–helpコマンドで調べると便利です。

では、 -i  オプションの効果を踏まえて、ruby の設定が環境変数のPATHに設定されているかを見てみましょう。

sudoだと環境変数のPATHが通っていません。
オプション-iを付けることにより、この問題を解消することができます。

補足

sudo のオプションに-Eがあります。

これも環境変数を維持してくれるものになりますが、これでは問題を解決することができませんでした。
原因は不明なので、こちらに関してはもう少し調査する予定です。

最後に

フリューでは、全ユーザにsudo実行できる権限を付与するかわりにrootでのシェル操作を禁止しています。

【理由】

  • セキュリティ向上のため
  • rootコンソールでシェル操作をすると、「誰」が「何」を操作したのか解りにくくなるため
  • sudoを使用してのroot権限での操作はログに残るので追跡調査が可能になるため

 

今回のように、sudoを使っているといくつかの問題に出くわすことがあります。
しかし、セキュリティを担保するためには、rootで直接実行するよりもsudoを使うよう習慣付けるのが望ましいです。
そのためにも、今回のようにオプションを調べて対応することが、今後も大切になりそうです。


2018年10月16日

awata

ansible で become_user が失敗した時の対応

はじめまして。こんにちは。
ピクトリンク事業部インフラ課の粟田です。

今回の内容を書くに至った経緯

ansibleを社内で利用している事は他の記事を参照してもらえればわかると思いますが、今回そんな運用の中で発生した問題とその解決方をメモとして残しておこうという次第です。

ついでに周りからのなんか書いて投稿しろ、という感じだったりします。

 

発生した問題

ユーザ管理とsudoの権限設定にはldapを使用している環境になります。

実際にログインした状態で

などは実行できます。

また、ansibleを実行する際に、ansible_ssh_userにrootを基本的には使用しないのが運用ルールとしてあります。

どのサーバにもrootでログインしようとする人が居るので、これは禁止すべきでしょ、普通。

この状態で、以下の様なplaybookを実行するとエラーになりました。

エラー内容はこう(あまりにも見難かったのでjqで整形してあります)

become_userを記載しない場合には問題なく実行完了するので、油断してたんですが、実際にログインして、コマンドを実行してみました。

ようは、

  • ansibleでログインする際のユーザは一般ユーザ
  • 一般ユーザでもsudoできる
  • sudo -u 別ユーザ コマンド が実行できない

という部分がポイントです。

そんな環境そうそうないでしょうけど…

解決方法

  • 今更ldapの設定を変更して失敗したら影響範囲が大きいのでとっても億劫
  • 一部バッチ処理でもsudoしてるのがあるのでldapいじりたくないな
  • とりあえず、運用としてansibleユーザだけなんとかできれば良い

という事で、ansibleユーザのsudoの権限を単純に解決することにしました。

としてローカルで作成したファイルをansibleのcopyモジュールでリモートの/etc/sudoers.d以下に配置するという最も単純な手法で解決としました。

あとがき

ldapサーバ作った時にもうちょっと検証しておけば…

内輪ネタは削除された…


2018年09月25日

furusin

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

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

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

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

京都Devかふぇ#3 〜フロントエンド〜

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

これまで開催した2回はどちらもモバイルに特化した内容でしたが、今回は初のフロントエンドでしたので、はじめましての方が多かったです!

勉強会の様子

トップバッターは弊社の佐藤Johnより、「Vue.jsを使うようになるまで」を発表しました。

IMG_20180914_190946

Vue.jsを導入するまでに至った経緯から、Vue.jsのいいところを纏めて発表しました。

二人目は @kobashinG 様より、「Puppeteerのお話」でした。

IMG_20180914_192804

Googleが出しているHeadless Chrome Node APIのライブラリで、

どんなモチベーションで触り始めたか、簡単にどんなことができるかを発表してくださりました。

 

3人目は@jiyuujinlab 様より、「あえてNuxtを使わずプロフィールサイトを作った話」でした。

IMG_20180914_194229

プロフィールサイトを作ってみた実体験を基に、デモを交えてVue.jsの良いところを発表してくださりました。

人生初の登壇だったとのことで、そのような場を提供することができて運営として嬉しい限りです!

 

LT大会

LT大会では@RyosukeIzumi 様、るい 様、@funnelbit 様、そして私の4人が登壇しました。

IMG_20180914_200814

IMG_20180914_201327

IMG_20180914_202051

IMG_20180914_202544

懇親会の様子

一度休憩を挟み、LT大会を終えて、懇親会です!

今回は北海道を応援する意味でも、いつものケータリング(カツサンドが好評)に加え、サッポロビールをご提供しました!

IMG_20180914_200603

 

 

まとめ

参加した皆さんもたくさんTwitterでツイートしてくださり、とても盛り上がった勉強会となりました!

懇親会でお話した方から「とても楽しいからまたやってほしい!」というお声を頂きましたので、

是非ともまた開催したいと思います!