株式会社クイックのWebサービス開発blog

HAPPYなエンジニア&デザイナーのブログです

オシャレで綺麗なオフィスで働く

最近オシャレになったオフィスに引越したので紹介したいと思います。
電球がぶら下がってたり、緑がいっぱいだったり、天井が抜かれて配管むき出しになったり、会議室がガラスになったりしてます!

うどんより蕎麦派です。
matsBです。(๑•̀ㅂ•́)و✧


では早速、オシャレオフィスを写真と共に解説していきたいと思います。

執務スペース(南側)

f:id:aimstogeek:20180420105939j:plain 配管むき出しでシーリングファンが回って、電球がぶら下がってます。
以前の執務スペースと比べると、天井が高くなり開放感が全然違います。

執務スペース(北側)

f:id:aimstogeek:20180420110132j:plain 緑のソファーで木がいっぱいあって、天井から草が生えてます。
個人的にはこのソファーが好きで、MTGをここでやったりしてます。

会議室

f:id:aimstogeek:20180420110654j:plain なんと壁がガラスです!うちのデザイナーのこだわりらしいです!
最初は隣の会議室の人と目が合ったりしてちょっと恥ずかしかったんですが、2週間ぐらいで慣れて今はもう違和感を感じなくなってます。

MTGスペース&ランチスペース

f:id:aimstogeek:20180420111717j:plain カウンターテーブルがあり、そこでも仕事ができます。
昼食時には、お弁当などの内食の人が集まって食べたりもしてます。

カウンターテーブル

f:id:aimstogeek:20180420112027j:plain 冷蔵庫や電子レンジを置いてます。
カウンターテーブルのスペースが好きで、ここで1on1をやったりしてます。

さいごに

実はこのデザイン、外注ではなくうちのデザイナーがデザインしたらしいです!
近くにいるので今回のコンセプトを聞いてみたら
「温もりがあって落ち着くけど、今風な感じ」
「今までの執務室が日常の塊だったのでそこからの脱却」
らしいです!
こだわりポイントを聞いたら「めっちゃあるからこれ見て」と言われ、30ページぐらいある資料を渡されました。
全部書くとキリがないですが、全部にこだわってるようです!笑

ということで、オシャレになったオフィスで働くT親方に感想を聞いてみました!
matsB「どうっすか!?オシャレなオフィスは!?」
T親方「暑いです」(空調から一番遠い席だから)
matsB「テンションとか上がりません!?」
T親方「まぁどこにいても、テンションは変わらないですよね」
matsB「・・・・」
僕だけはしゃいですいませんでした・・・



\\一緒に『明日のはたらくを創る』仲間を募集中です!! // 919.jp

残念なプロジェクト管理を見てきたので誰かに伝えたかった話

こんにちは。 システムアーキテクトを担当している「こってぃ」でございます。
4月に入り、重度の花粉症に悩まされておりますが、
この時期はお花見とか外でビールを飲む機会も増えてくるので嫌いになれません。

さて、最近お笑いのライブに行ったところ、
リズム良く「あるあるネタ」を披露しているコンビがまだ頑張っておりました!
ブームは過ぎ去ったものの、観客は彼らの登場にとても喜んでおり、拍手喝采でした。

そんな彼らにあやかって、
今回はシステム導入プロジェクトにおける残念な「あるあるネタ」をお届けします!

弊社内のプロジェクトではなく、私個人が今までに見てきたものをお話します!

お仕事の合間に「あるよね~」と共感いただいたり、
「こんなプロジェクト嫌だ」と反面教師にして頂けると嬉しいです:D

このプロジェクトって美味しいの?

f:id:aimstogeek:20180412165903j:plain
あまりにもメンバの入れ替わりが激しかったり、
色んな開発会社が参画している場合、
プロジェクトの目的を共有出来ていないことがしばしば見受けられます。

そうなると、プロジェクトチームの熱量も下がってきて、
消極的なプロジェクト参加になってしまいがちです。

メンバが単一のプロジェクトのみに携わっている場合は別ですが、
そうでない場合、優先度の低いプロジェクトになってしまいますよね。

自分がメンバとして参画している際に、
とりあえず仕事を投げて終わりみたいな事されたら嫌ですよね。

メンバあってのプロジェクトです。
きちんとプロジェクトの目的を共有して、
成功へ導いていきましょう。

課題共有会が課題解決報告会に

f:id:aimstogeek:20180412165941j:plain
共有されるのは解決済み課題や、解決方法が明確になっている課題のみ。。。

新たに発見されて、解決の目処が立っていない課題は公表されません。

そんな課題共有会に出たことがある方もいらっしゃるのではないでしょうか。

「何か解決してたら前進している感でるし良いや。」って空気になっていますよね。

これ最悪です。

隠蔽している問題が表面化した際に生じる影響を考えるよりも、
その場を上手く乗り切ることを優先させている典型的な例ですよね。

そんな会議に出会ったら、
何のための会議なのかをもう一度問い直しましょう。

「この会議って課題潰した自慢大会でしたっけ?」

また、報告を受ける側としては、報連相をしやすい環境づくりは大切です。

常日頃、不都合な報告があった場合に詰めまくる姿を見せていては、
報告することをためらってしまうこともあるかもしれませんね。

永遠の「90%」

f:id:aimstogeek:20180410172046j:plain
開発のチームから提出されたWBSを見ると全部オンスケ、進捗率はいつ見ても90%になってます。

でも皆帰りは遅いんですよね。なんでかなー。

確認すると、報告されているWBSとは別のより細かいWBSがあって、
それを見ると実は遅延になっているという事もあります。

管理する側が正確な状況を把握出来なければ、何も手を打ちようがありません。

とはいえ、プロジェクトマネージャだけでなく、
報告をあげてくれるチームリーダも往々にして多忙を極めています。

そんな時にPMOのように遊軍的な人が、
プロジェクト管理の手助けをしてあげると上手く回るのではないでしょうか。

日はまた変動を繰り返していく

f:id:aimstogeek:20180412165828j:plain
計画時のスケジュールと比較すれば明らかに遅延しているのに、
報告資料ではなぜかオンスケになっています。

進捗ごまかしのテクニックで使われがちなんですよね。
合意無いリスケ。(テクニックでも何でもないですが)

報告側の人間性に問題があると言えばそれまでですが、
異変に気付く力も管理者には求められているのかもしれないですね。

ミイラ取りがミイラになる

大規模なプロジェクトになると、複数の開発チームが立ち上がります。
そこで、チーム毎にバラバラなドキュメント管理やプロジェクト管理にならないよう、
横串で開発チームを管理するチームが立ち上がることがあります。

ただ、開発が進むにつれて、テスト事務局のように、横串で管理するチームが複数出来てしまうことも。。

横串管理チーム同士が連携を取れていないと、毎週開発チームに似たような報告をさせることになり、
結果、開発チームの工数を圧迫するという事態が起きます。

そうなると、複数存在する横串管理チームを横串で管理するチームが発足されるわけですね。

横串管理するチームが自分たちを横串管理出来ずに横串管理される。 図にするとこんな感じかな。

f:id:aimstogeek:20180412150319p:plain

うん、よう分からん。

最後に

今まで見てきて残念だなって思った事例を書いてみました。

実は色んなプロジェクトで同じような事象が起きている様を見てきました。

中には、1つのプロジェクトで全て発生させているものもありました。
結局そのプロジェクトは遅延に遅延を重ねて残念なプロジェクトとして多くの工数を飲み込んでおります・・
(弊社のプロジェクトではないですよ!)

プロジェクトマネージャーやプロジェクトリーダ、
PMOを経験した方なら目にした事があるのではないでしょうか。

そもそも、世の中ではそうならないための色んな施策も紹介されております。

今回話した事例は反面教師として今後に活かしていきましょう。

ほなの。



\\一緒に『明日のはたらくを創る』仲間を募集中です!! // 919.jp

ユーザビリティを考える

こんにちは。”いのっちぃ”です。

WEBで、あるいは街角で、
何がいいたいのかわからない、
意図が読みとれないことでイライラしたことはありますか?

「ああ、あれはそうだなぁ」と具体的なサービスやアプリを思い浮かべた方もいるかもしれません。

今回は、「つかいやすさ」や「わかりやすさ」、すなわち「ユーザビリティ」について、ヤコブ・ニールセン博士の名言を借りて、考えていきたいと思います。

名言は、ヤコブ・ニールセンの名言をツイートするヤコブ・ニールセンbotから引用しています。

ユーザーは忙しい、謎解きなんてまっぴら

ありますよね。ラビリンスみたいなサイト。
「自分の知りたいことは、いつわかるの?」という気持ちになってしまいます。

遅い理由なんて言われても、ふつう興味無いですよね。 サイトはできるだけ速く快適にする必要があります。 弊社のエンジニアも、日々快適なサービス(高速化)を目指して頑張っていますよ。

博士。手厳しい!
ネット上に流通している情報量が爆発的に増えたため、その人にフィットする情報にたどり着きにくくなっているように思えます。
私も情報を発信する際には、より有益な内容を目指していきたいです。

間違うのがあたりまえ

エラーメッセージ2連発。あるある!
入力フォームでエラーが出たけど、どこがダメなのだか、さっぱりわからないメッセージでは、直したいけど、直せなくて困りますね。

自由に入力できるフォームなのに、実は入力して良い文字が決まってる場合も困りモノ。「内容は正しいのに打ち直し...」という気持ちになってしまいます。

さいごに

コンテンツを届ける側は、ついつい、自分たちの伝えたいことばかりを考えてしまったり、効率を優先してしまうことがあります。

また、ユーザーはコンテンツに精通していないことや、 そこまで、熱烈な思いをもっているわけではないことがあるということを思い出し、 ユーザーの視点に立ち返ってモノゴトを考えたいですね。

と、自戒の意を込めつつ、筆を置きたいと思います。



\\一緒に『明日のはたらくを創る』仲間を募集中です!! // 919.jp

毎日をちょっぴり楽しくするゆるゆるbot機能3選

こんにちは。アプリエンジニアのねこです。

弊社のチャットワークにはBobという名前でかわいがられているbotがいます。
各所で管理者権限を持っているすごいやつです。

f:id:aimstogeek:20180330133817p:plain
なおボブ感は1ミリも無い
Bobに搭載されている、しょうもないけどちょっぴり日々が楽しくなる機能を3つ紹介します。
めちゃめちゃ便利でこれがないともう業務できない!みたいなものは一切ありません。
よろしくお願いします。

グループメンバーから◯人を選ぶ

f:id:aimstogeek:20180330101945p:plain
これだけLinuxコマンドっぽい形式

そのグループにいるメンバーを指定された人数分ランダムで選びます。 選ぶだけなんですが、「だれでもいい」タスクを振るのに余計な気を使わなくて済みます。
会議室を抑える係だったり、ランチに一緒に行く人を選ぶときなんかに便利です。

おみくじを引く

f:id:aimstogeek:20180330102332p:plain
朝の運試し

大吉・吉・凶・大凶の入ったおみくじが引けます。
朝から気分良くいきたいためか吉が出るまで引くメンバーが散見されます。
余談ですがこのBob氏、何故か凶を引く確率が高く、その割に私だけ吉を引くので確率操作を疑われています。
逆恨み良くない。

褒める

f:id:aimstogeek:20180330103437p:plain
わーい

みんな常日頃隙あらば褒められたいよね?褒められたら気分いいよね?それなら好きなタイミングで褒めてもらえるようにしたら良いじゃない??という想いから作られた気軽に褒めてもらえる機能です。
ふざけてやったけど思った以上になんだか元気が出るわ、
こっそり褒めてほしい気持ちをアピールできるわ、
周りも褒めるべきタイミングに気づけるわでなかなかいい機能だと自負しています。
ちなみにこれを作った時メンバーからこんなコメントをもらいました。ありがとうございます。

f:id:aimstogeek:20180330103852p:plain
この言葉をもらうためにエンジニアをやっています。



以上の3つでした。
botはとにかく業務を円滑にさせなければ、と気負いがちですが、仕事中気分が良くなるようなゆるゆる機能も大事なんじゃないかなって思います。
去年チャットワークにもWebhookが設定できるようになりましたし、今後もbotをうまいこと使ってチームメンバーを元気にしていきたいですね。



\\一緒に『明日のはたらくを創る』仲間を募集中です!! // 919.jp

PhpStorm tips集

初めまして!Perfume大好き新卒エンジニアのぱふゅーむです。

突然ですがみなさんは開発にどのエディターを使われていますか? ちなみに私のエディター歴はこんな感じです。

  1. Eclipse
  2. Sublime Text3
  3. Vim
  4. PhpStorm

弊社ではPHPで開発を行う事が多く、PhpStormを使用しているエンジニアが多いです。自分も現在はPhpStormを使っています。 まだ使い初めて間もないのですが、今回は学習も兼ねてPhpStormのあれこれを紹介したいと思います!

(ショートカットキーについてはMac表記になります)

PhpStormについて

1ヶ月間は無料で試用できますが、基本的に有料です。ちょっとお高いのが痛いですがお値段以上の価値はあると思います!

良く使うショートカット集

Find Action

⌘+⇧+A

やりたいことをなんとなく入力するとそれらしい機能をメニューで一覧表示してくれます。 自分はよくショートカットを忘れるのでKeymap Referenceを参照してます(笑)。

f:id:aimstogeek:20180320164624p:plain

定義元へジャンプ・戻る

定義元へジャンプ

⌘+B(⌘+クリック)

戻る

⌘+⌥+←

カーソル位置のワードの定義元へジャンプできます。非常に良く使うショートカットです。

Navigation

クラス名で検索

⌘+ O

ファイル名で検索

⌘+⇧+O

変数名・メソッド名などで検索

⌘+⌥+O

どれもサジェストが非常に強力で簡単に絞り込みできます。しかも軽い! (余談ですがターミナルではThe Silver Searcherを使用しています。grepよりかなり高速に動くのでオススメです!)

コードフォーマット

⌘+⌥+L

コードの自動整形をしてくれます。PhpStormではコードフォーマットを詳細に設定をすることができます。

コードフォーマットの設定

  • [PhpStorm]-[Preference]-[Editor]-[Code Style]

f:id:aimstogeek:20180320182401p:plain

インデント・中括弧・Docコメントなどかなり詳細な設定を行えます。PHP以外にもJavaScriptCSSSQLなどにも対応しています。 チェックボックスにチェックをいれると反映箇所がハイライトされるのでとてもわかりやすいですね!

矩形選択

⌘+⇧+8

補完

^+Space

コメントアウト

行コメント

⌘+/

ブロックコメント

⌘+⌥+/

紹介しきれませんでしたが、他にもデバッガやコード分析など便利で強力な機能がたくさんあります。 早く覚えて開発に活かしていきたいですね。それでは!


弊社では楽しく真剣にプロダクトと向き合い、『明日のはたらくを創る』仲間を募集中です!

クイック・エンジニア中途採用サイト

Chromeのバージョン65でS3からdownload属性を使った画像のダウンロードができなくなった

Webサービスプランナー兼ディレクターのyumeです。

運営しているサイトの1つに、看護師向けのフリー素材サイトがあるのですが、
Chromeがバージョンアップしたらダウンロードボタンでダウンロードできなくなった」と問い合わせがありました。

f:id:aimstogeek:20180318164418p:plain 看護師🎨イラスト集の素材ダウンロードページ。関係ないけど、この画像花粉症にも使えますね。 今年の花粉やばいです。

現象

HTML5のaタグのdownload属性を使って実装しています。

<a href="https://img.kango-roo.com/upload/images/ki/cold-influenza-cough-mask-female.png" download="cold-influenza-cough-mask-female.png" class="dlBtn ieDlBtn" data-file-name="cold-influenza-cough-mask-female.png">
<img src="/pc/img/ki/common/btn/download.png" alt="無料 ダウンロード">
</a>

ダウンロードさせる画像は、S3に置いてあります。

これまでは、「無料ダウンロード」ボタンを押すと、画像ファイルのダウンロードが始まっていたのですが、
Chromeが65になると、ダウンロードできずにブラウザ内で画像を表示してしまうようになりました。

対処法

結論、S3上の画像ファイルのContent-typeをbinary/octet-streamに変更することで解決しました。

Content-typeはこれまでimage/pngになっていて、それで問題なくダウンロードをさせることができていたのですが、Chrome65では扱いが変わったようです。

AWSGUIコンソールから変更する場合

メタデータの変更」からポチポチやっていきます。 f:id:aimstogeek:20180319091650p:plainf:id:aimstogeek:20180319091654p:plain

CUIで一括変更する場合

Content-typeのみの変更はできないようです。

下記記事では、一度ファイル名を変更して戻す、というやり方が紹介されていましたが、データ量の問題か時間がかかったりしてうまく適用できませんでした。。

AWS S3にアップロードしたファイルのContent-Typeを一括で書き換えるワンライナー - Qiita

そこで、一度S3上でバックアップ用のバケットを作成し、コピーする形で書き換えました。

aws s3 cp --profile <account-name> s3://<bucket_name_for_backup>/<directory> \
--profile <account-name> s3://<bucket_name_for_production>/<directory> \
--metadata-directive REPLACE --Content-Type=binary/octet-stream --delete

--metadata-directive REPLACEをつけるのがポイントです。

問題

今後新規でアップする画像について、サムネイル画像はimage/pngで、ダウンロード画像はbinary/octet-streamにする方法を模索中です。

都度手動でやるのは…うーん。

参考

S3のContent-Dispositionのブラウザ対応について調査してみた - Innovator Japan Engineers’ Blog 「注意点」の項に助けられました

おわりに

意味が分からなすぎてあたふたしていたら、いろんなメンバーが助けてくれました…

1つの問題を協力して解決できるってほんとありがたいです( ;∀;)

ということで、

\\一緒に『明日のはたらくを創る』仲間を募集中です!! // 919.jp

Elasticsearchを1.3から5.5にアップグレードした手順

先日社内LT大会で「藤岡弘、」愛を、 思う存分プレゼンしたhamanokamiです(☝ ՞ਊ ՞)☝

さて弊社クイックでは、社内システムの検索機能に、 Elasticsearchを使用しています。

ただ去年の9月まではバージョンが1.3!!!という、 恐竜時代のElasticsearchを使用していました。

約2年も前から「バージョンアップしたい×2」と思っていたので、 バージョンアップができたときはひとりで感動していました。

もちろんひとりで打ち上げにも行きました。(ブログ書いているときに、「打ち上げには呼べよ!!」とつっこまれました)

ということで、ここからはElasticsearchのバージョンを、 1.3から5.5にアップグレードした話をしていきます。

バージョンアップ以前の環境情報

  • Elasticsearch: 1.3(yumでインストール)

Elasticsearch本体をアップグレードする手順

まず1系から5系のアップグレードはできないため、 一旦2系にアップグレードしてから、5系にアップグレードするという、 大きく分けて2段階のステップが必要です。

1系から2系にアップグレード

作業するサーバーは、もちろんElasticsearchがインストールされているサーバーです。

まずシャード割り当てを無効にします。

 curl -XPUT 'http://localhost:9200/_cluster/settings' -d '{ "persistent": { "cluster.routing.allocation.enable": "none" } }'

リスタート高速化のために、synced flushの手動実行します。

curl -XPUT 'http://localhost:9200/_flush/synced'

Elasticsearchを停止させます。

sudo /etc/init.d/elasticsearch stop

2系用のElasticsearchのレポジトリをインポートします。

sudo rpm --import https://packages.elastic.co/GPG-KEY-elasticsearch

インポートしたレポジトリの設定を書き換えます。

sudo vi /etc/yum.repos.d/elasticsearch.repo

[elasticsearch-2.x]
name=Elasticsearch repository for 2.x packages
baseurl=https://packages.elastic.co/elasticsearch/2.x/centos
gpgcheck=1
gpgkey=https://packages.elastic.co/GPG-KEY-elasticsearch
enabled=1

Elasticsearchをアップグレードします。

sudo yum update elasticsearch

Elasticsearch設定ファイルを修正します。

sudo vi /etc/sysconfig/elasticsearch

# CONF_FILE=/etc/elasticsearch/elasticsearch.yml // コメントアウト

インデックスが残っている場合は、インデックスを削除します。

sudo rm -R /var/lib/elasticsearch/【クラスタ名】/nodes/0/indices

Elasticsearchが無事起動できるか確認します。

sudo /etc/init.d/elasticsearch start
curl -XGET 'http://localhost:9200/_cat/nodes'

無事起動していることが確認できたら、次のステップへ。

2系から5系にアップグレード

さきほど起動させたばかりのElasticsearchを停止させます。

sudo /etc/init.d/elasticsearch stop

5系用のElasticsearchのレポジトリをインポートします。

sudo rpm --import https://artifacts.elastic.co/GPG-KEY-elasticsearch

インポートしたレポジトリの設定を書き換えます。

sudo vi /etc/yum.repos.d/elasticsearch.repo

[elasticsearch-5.x]
name=Elasticsearch repository for 5.x packages
baseurl=https://artifacts.elastic.co/packages/5.x/yum
gpgcheck=1
gpgkey=https://artifacts.elastic.co/GPG-KEY-elasticsearch
enabled=1
autorefresh=1
type=rpm-md

Elasticsearchをアップグレードします。

sudo yum update elasticsearch

Elasticsearch関連の設定ファイルを修正します。 /etc/sysconfig/elasticsearchは今回新しく作成されたファイルを使用します。

sudo vi /etc/sysconfig/elasticsearch.rpmnew

ES_HOME=/usr/share/elasticsearch
JAVA_HOME=【任意のPath】
CONF_DIR=/etc/elasticsearch
DATA_DIR=/var/lib/elasticsearch
LOG_DIR=/var/log/elasticsearch
ES_USER=elasticsearch
MAX_LOCKED_MEMORY=unlimited
sudo mv /etc/sysconfig/elasticsearch /etc/sysconfig/bk_elasticsearch
sudo mv /etc/sysconfig/elasticsearch.rpmnew /etc/sysconfig/elasticsearch

/etc/elasticsearch/elasticsearch.ymlも同様です。

sudo vi /etc/elasticsearch/elasticsearch.yml.rpmnew

cluster.name: 【任意】
node.name: 【任意】
bootstrap.memory_lock: true
network.host: 【任意】
http.port: 9200

bootstrap.system_call_filter: false
xpack.security.enabled: false
sudo mv /etc/sysconfig/elasticsearch /etc/sysconfig/bk_elasticsearch
sudo mv /etc/sysconfig/elasticsearch.rpmnew /etc/sysconfig/elasticsearch

Javaのヒープサイズを修正します。

sudo vi /etc/elasticsearch/jvm.options

-Xms8g
-Xmx8g
ES_HEAP_SIZE=10g

デフォルトのユーザプロセス数の上限を修正します。

sudo vi /etc/security/limits.conf

elasticsearch  -  nproc  2048

ファイルディスクリプタの上限を修正します。

sudo vi /usr/lib/systemd/system/elasticsearch.service

LimitMEMLOCK=infinity

必要なプラグインをインストールします。

sudo /usr/share/elasticsearch/bin/elasticsearch-plugin install analysis-icu
sudo /usr/share/elasticsearch/bin/elasticsearch-plugin install analysis-kuromoji

Elasticsearchが無事起動できるか確認します。

sudo /etc/init.d/elasticsearch start
curl -XGET 'http://localhost:9200/_cat/nodes'

無事起動できたら、シャード割り当てを有効にします。

curl -XPUT 'http://localhost:9200/_cluster/settings' -d '{ "persistent": { "cluster.routing.allocation.enable": "all" } }'

これでアップグレードは完了です。 もしJavaのアップグレードも必要な場合は、 下記手順でインストールしてください。

cd /usr/local/src
sudo wget --no-cookies --no-check-certificate --header "Cookie: gpw_e24=http%3A%2F%2Fwww.oracle.com%2F; oraclelicense=accept-securebackup-cookie" "http://download.oracle.com/otn-pub/java/jdk/8u144-b01/090f390dda5b47b9b721c7dfaa008135/jre-8u144-linux-x64.tar.gz"
sudo mkdir /usr/java_8/
sudo tar zxvf jre-8u144-linux-x64.tar.gz -C /usr/java_8/
sudo mv /usr/java/ /usr/java_7/
sudo mv /usr/java_8/ /usr/java/

参考

www.elastic.co www.elastic.co

終わりに

アップグレードは完了したけど、既存のインデックス構成では動きません。 エンジニアならご存知のとおり、メジャーバージョンが変わると使えないものがでてきたりします。 そこらへんの話はまた今度します。 ほな!

\\『明日のはたらくを創る』仲間を募集中!! // 919.jp