HANT blog

リアルタイム動画アンケートサービスHANTのブログ

flex-itemを改めて復習する。

フロントエンドエンジニアの山本です。

flexbox、本番環境でも使えるようになってきてますね。
弊社でも去年の中頃から積極的に使っていますが、理解が雑だったので度々はまってました。

flex-container用のjustify-contentとかのプロパティはシンプルなので、覚えやすいのですが、 flex-item用のプロパティは挙動に驚くことが。

例えば、flex-item内のテキストが改行してくれなかったりとか...

そこで苦手なflex-itemのflexプロパティ(flex-basis, flex-glow, flex-shrink)を腰を据えて復習しまして、けっこうすっきりできたのでまとめました。


1. flex-basisはflex-item(以下アイテム)の基本サイズを定義するプロパティ

2. flex-glow / shrink はflex-container(以下コンテナ)と各アイテムの基本サイズの総量との差の分のスペースをどう伸縮させるか定義するプロパティ

  • flex-glowはアイテムの基本サイズの和がコンテナのサイズより小さい場合、どのアイテムをどのくらい伸ばすか定義する。

f:id:HANT-official:20160916122016p:plain

  • flex-shrinkはアイテムの基本サイズの和がコンテナのサイズより大きい場合、どのアイテムをどのくらい縮めるか定義する。

f:id:HANT-official:20160916122022p:plain

3. flex-basisが0の時は基本的なサイズが0になるため、flex-glow/shrink がアイテムのサイズに直結する。

  • w3cの勧告内ではflex-basisがautoの時を'相対的'と呼び、0の時を'絶対的'と呼んでいる

flex-glowは伸びでflex-shrinkは縮みと表面的にしか理解できていなかったので、これで随分すっきりしました。

ここからはよくあるケース。

よくあるケース1 片方のアイテムの幅は決まっているけど、もう片方は決まっていない。

この場合、幅の決まっているアイテムにはflex: 1 0 ${アイテムの幅} にして、決まっていない方は flex: 0 1 autoにすると、

See the Pen flex-itemよくあるケース(1) by takumi yamamoto (@tqmyaml) on CodePen.

「なんで改行がされないんだ...」となることはもうありませんね^^

よくあるケース2 アイテムの総数が場合によるけど、折り返さず、各アイテムの幅を等しく

flex-basisをautoにしてしまうとアイテム内のコンテンツの量によって伸縮してしまうので、flex: 1 0 0 を各アイテムに指定します。

See the Pen flex-itemのよくあるケース(2) by takumi yamamoto (@tqmyaml) on CodePen.

全部同じ幅にすることができました^^

flexやっぱり便利ですねー
これからはさらにサクサク書けそうです!

参考:
CSS Flexible Box Layout Module Level 1 (日本語訳)
CSS Flexible Box Layout Module Level 1

ECMA2015でGoogle Apps Scriptを開発する

こんにちは、エンジニアの芦澤です。みなさん日々の業務、自動化してますか。

弊社のサービスHANTでは、SEOの確認の為Google検索での順位を手動で取得してスプレッドシートに登録しています。 ですが、検索するキーワードが増えてくると流石に毎日手動でキーワード毎に順位を取得するなんて時間がもったいなくなってきます。そこで自動化です。

社内のサーバーにスクリプトを置いてcronで定期実行してもよかったのですが、今回はリソースを内部に保持しないようGoogle Apps Scriptを選択しました。

※Googleデベロッパーブログに次の記事が出ていたのを思い出したのでローカルで開発してコマンドラインからGoogle Driveにアップしようという軽い気持ちです。

続きを読む

Python 歴1年の Python エンジニアが Mac にインストールしたアプリ

家でも会社でも毎日 Python 書いてます。エンジニアの芦澤です。

最近自宅の Mac がお亡くなりになってしまった為 MacBookPro15 を購入する必要が出てきてしまいました。面倒なのですが、イチからアプリのインストールする羽目になってしまった為、ついでだしブログのエントリーに使ってしまえと言うことで皆さんお付き合いお願いします。

タイトルにもあるのですが、ここ一年ほど趣味でも仕事でも Python ばかり書いていまして、 Python 開発時に使用するようなアプリ交えて紹介してみたいと思います。

Xcode

f:id:Ashizawa:20160721183107p:plain

開発ツールが必要になる為インストールします。 Swift 書く時やストアにアップする時なども使いますが IDE として使用する頻度はそんなに高くないのに必須なツールです。

PyCharm

f:id:Ashizawa:20160721183204p:plain

Python を書くようになってから使い出しました。使い始めてからは Professional が便利過ぎるせいで他のエディタをあまり触らなくなってしまいました。

IDE の為 PyCharm 経由で DB に接続してレコードの確認が出来たり、DB の接続情報から ER 図を出力出来たり。最近では Docker 周りの機能まで盛り込まれて PyCharm の中でだけで開発出来る環境になってしまっています。

Docker

f:id:Ashizawa:20160721183205p:plain

最近ベータ版になって、一般公開もされた為 VirtualBox 経由ではなくアプリ版を使用しています。開発環境でも本番でも必須のツールになっています。

iTerm2

f:id:Ashizawa:20160721183206p:plain

一日の大半この黒い画面のアプリと向き合っています。

Emacs

f:id:Ashizawa:20160721183207p:plain

GUI 版を Carbon ~ Cocoa と使用し、最近 emacsmacport の Cocoa に乗り換えました。 PHP などは Emacs を使って書いています。

Sequel Pro

f:id:Ashizawa:20160721183209p:plain

MySQL を GUI で触れるクライアントソフト。ちょっとした確認で mysql-client からパスワード打って繋げるのが面倒な時などに使用します。

Redis Desktop Manager

f:id:Ashizawa:20160721183210p:plain

Redis 用の GUI クライアントソフト。 HANT でも Redis を使用する為確認用にいれています。

Karabiner

f:id:Ashizawa:20160721183211p:plain

キーリピートを爆速にすることで作業効率アップをはかります。

Slack

f:id:Ashizawa:20160721183212p:plain

2年ほど前から社内に導入して昨年 Skype から完全に切り替えました。複数のサードパーティーツールと連携出来て通知をひとまとめに出来る為、情報共有のツールとして今では必須のアプリになっています。

Homebrew

f:id:Ashizawa:20160721183213p:plain

アプリではないですが、「これさえ入れておけば君もエンジニア!」っと言われるようなパッケージ管理ツール。何気に確認に便利な GUI 版もあるのですがコマンドラインで叩く方が慣れている為 CUI 版使ってます。

あまりローカルのディレクトリを汚したくない為、アンインストールが簡単に出来る homebrew はもう長いことお世話になっていますね。

pyenv

Mac ユーザーで Python エンジニアを自称するには必須です。

pyenv-virtualenv

Mac ユーザーで Python エンジニアを自称するには必須です。その2

pyenv-virtualenvwrapper

必須ではないのですが、pyenv-virtualenv が便利になるので入れてます。

nodebrew

あまり Node.js は書く機会ないのですが、フロントエンド周りのツールを入れるのに使っています。何気に軽い計算するときにインタプリタ立ち上げて計算機代わりに使ったりもします。

phpbrew

自称 Python エンジニアなのですが、仕事では PHP も扱う為、環境構築時に使用します。

rbenv

tmuxinator や Sass でお世話になっております。たまに Rack でサーバーを書いたりもしますが、パッケージ使う為というのが大きな理由になっている気がします。

ruby-build

rbenv を使うなら必須ときいて入れました。

tmux

screen で困ることはなかったのですが数年前、横分割が出来ると聞いて飛びつきました。

terraform

みんな大好き hashicorp プロダクト。構成管理用に。 そろそろ業務でも使っていこうと思い、自社サービス HANT にも導入準備中です。

tig

1日に何回も立ち上げます。 この規模感のツールは使い勝手が良いので一度覚えると手放せません。

awscli

管理画面から全部設定するなんて正気の沙汰ではありません。 自社サービス HANT でも使用しています。

chrome-cli

これだという良いシチュエーションが思い浮かびませんが、あるとなにげに便利です。

fortune

StarWars のセリフとか表示すると出来るヤツと周りに思わせれるかと思って入れてます。

Alfred 3

f:id:Ashizawa:20160721183214p:plain

Spotlight の代わりに使っていますが、基本アプリの呼び出しにしか使っていません。 たまに辞書引いたり計算機代わりにしたりという程度です。

Atom

f:id:Ashizawa:20160721183216p:plain

このブログ記事も Atom を使って書いています。プログラムを Atom で書くことはまれですが、じっくりと文章を書く時は割と使います。

今は RedPen を導入して日本語のバリデーションを掛けながら記事を書いています。

OmniFocus2

f:id:Ashizawa:20160721183217p:plain

Apple Store で購入。タスク管理は全て OmniFocus2 で管理して、iPhone で確認しています。

Reeder3

f:id:Ashizawa:20160721183218p:plain

ショートカットが秀逸な RSS リーダー。

1Password 6

f:id:Ashizawa:20160721183219p:plain

Webサービスやアカウント類の管理用に使用しています。プロジェクト単位では使いにくいので他の共有方法を模索中。

Clipy

f:id:Ashizawa:20160721183220p:plain

クリップボード管理ツール。コピペの履歴を保持出来るのでコードを書く時でも使えます。スニペットを使用すればさらに使う頻度が上がる為、コレがないと作業効率がかなり落ちてしまいます。

HyperSwitch

f:id:Ashizawa:20160721183221p:plain

⌘+Tab を便利にしてくれる補助ツールです。

AppCleaner

f:id:Ashizawa:20160721183222p:plain

アプリ削除ツール、Launchpad からアプリの削除が出来るのですが、余計なファイルが深い所に残ってしまう為ツール経由で削除しています。

Disk Diag

f:id:Ashizawa:20160721183224p:plain

かなり悩んで AppStore で購入。キャッシュ削除等、手動で出来る作業なのですがお手軽さを取ってしまいました。

Fluid

f:id:Ashizawa:20160721183225p:plain

Web サイトをアプリ化してくれるツール、Gmail などをアプリ化して使っています。

Stay

f:id:Ashizawa:20160721183226p:plain

外部ディスプレイの抜き差ししているとウィンドウ内のアプリが一箇所にまとまってしまう為デュアルディスプレイ時の配置を記憶してから MTG に参加するなどの使い方をしています。

まとめ

制作物のアウトプットに影響しないアプリが多かったですが、いかがだったでしょうか?この記事が少しでもみなさんのお役に立てれば幸いです。

弊社では様々なアプリを使って作業の効率化を進めていけるエンジニアを募集しています。

Pocketのソーシャルボタンの画像をカスタマイズした話。

Rebeltのフロントエンドエンジニアの山本です。 HANTのフロントエンドもちょろちょろ触ってます。

7/15にHANTのアップデートをリリースしました。

今回のアップデートの主な内容は

  • 管理画面のスマートフォン対応
  • プロモーションページのソーシャルボタンの挙動を改修
  • プロモーションページの文言を変更

などになります。

Pocketのソーシャルボタンは画像がそのままなことが多い。

HANTではソーシャルボタンの画像をカスタマイズして使いたかったので、 各ソーシャルボタンのドキュメントを眺めていたのですが、 Pocketのソーシャルボタンの画像カスタマイズ方法は載ってないのです。

続きを読む