BASE開発チームブログ

Eコマースプラットフォーム「BASE」( https://thebase.in )の開発チームによるブログです。開発メンバー積極募集中! https://www.wantedly.com/companies/base/projects

デザイン表現が広がる、Lottieアニメーション

これは「BASE Advent Calendar」16日目の記事です。

こんにちは、BASEのDesign Groupに所属している吉岡です。

先日BASE BANK株式会社初めてのプロダクトとして即時に資金調達ができる金融サービス「YELL BANK」をリリースしました。個人的にお金にまつわるデザインは初めての経験ということもあり、難しかったのですが、LPではAfterEffectsで作ったアニメーションをCanvasやSVGアニメーションにできるプラグインを使って表現しました。

今回はせっかくのアドベントカレンダーなので、下記の様なHolidayAnimationを書き出してみようと思います。 f:id:yoshiokachang:20181214204538p:plain

環境設定

  1. Bodymovin をインストール creative.adobe.com

  2. プラグインインストールのためのzxp-installerもダウンロードします aescripts.com

  3. Lottieアニメーションの Bodymovin プラグインをダウンロードして、インストールする github.com

  4. bodymovinを解凍してzxpファイルをzxpインストーラーにドラッグしてインストールします。

  5. AfterEffectsに拡張が入っているか確認する

    • 問題なくインストールできれば、AfterEffectsのウィンドウ/拡張機能にBodyMovinが入っているはずです。

XDでデザインを作る

今回はテキストアニメーションを描いていこうと思うので、Adobe XDでまず描きたいテキストを配置します。この際にアートボードサイズが最終ブラウザに書き出すサイズになります。

テキストを配置したら、ファイル > 書き出し > After Effectsで書き出します(最近できた機能です。illustratorよりサクッとAfter Effectsに書き出せます。) f:id:yoshiokachang:20181214203924p:plain

After Effectsでアニメーションを作る

アニメーションを作っていきますが、Lottieを使う注意点を先に記載します。 - After Effectsのエフェクトは使えないと思ってていい - Expressionも書き出さないと使えない - グラデーション効かない

といった具合です。パスアニメーションができるよ、程度の認識で良いかもしれません。After Effectsで使える機能はこちらで確認できます。

前提が終わったところで...アニメーションを作っていきます。 まずはXDで作っていたテキストを、アウトライン化してシェイプとして配置しておきます。 f:id:yoshiokachang:20181214203954p:plain

今回は筆記体テキストが流れていく様なアニメーションを作りたいと思うので、パスに合わせてモーションが動くアニメーションを作っていきます。好きなシェイプを作り、テキストをなぞる様に位置のkeyframeを打っていきます。トランスフォーム > 自動方向でパスに沿って自動方向に設定します。こうすることでパスに沿ってシェイプが回転します。ここからは好きな様にパスを変形させてkeyframeを打っていきます。 パスに添わせたアニメーション部分はこんな感じです。 f:id:yoshiokachang:20181216102654g:plain

アルファマットでテキストを表示する

パスに添わせたアニメーションに合わせて、テキストを表示するためのシェイプもパスkeyframeを描きます。 テキストにアルファマットでマスクした状態にします。 f:id:yoshiokachang:20181216102734g:plain これでアニメーションは完成です。

JSONに書き出す

アニメーションが完成したら、JSONファイルに書き出していきます。 ウィンドウ > 拡張機能 > Bodymovinを選びます。

selectedでコンポジションを、Destination Folderに書き出し先ディレクトリを選びます f:id:yoshiokachang:20181214202648p:plain

settingsでは今回はこの設定で書き出します。 - Glyphs(もしフォントが残っていてもシェイプにしてくれます) - Hidden (マスクなどを使っていると必要です) - Demo (HTMLに雑にしてくれるので確認が楽でおすすめです) f:id:yoshiokachang:20181214202903p:plain

他にも、画像をJSONにincludeしてくれるAssetsの項目もあるので適宜必要あれば設定します。

確認してみる

書き出しフォルダにindex.htmlが生成されるので確認してみると...

f:id:yoshiokachang:20181216102804g:plain 作った通りのアニメーションが表示できています!

中身がどうなっているのかというと... AfterEffectsのレイヤーがちゃんとSVGのpathになって、transformされるのがわかります。 f:id:yoshiokachang:20181214204248p:plain

Lottieを使ってみて

グラフィックだけでもholidayっぽさはあるのですが、アニメーションをつけることでより情緒的な抑揚をつけることができるので、デザイン表現が簡単に広げられるLottieはとても使いやすいプラグインだと思います。 今までYoutubeなどで上げていた動画より、サクサク動きます! これを機に、アニメーションまでデザインしてみては...!

明日はAndroid エンジニアの木下さんです!

日本のパパに、育休のススメ~私の育休体験記~

f:id:A06rp012:20181215094942j:plain

はじめに

これは「BASE Advent Calendar 2018」15日目の記事です。

devblog.thebase.in

こんにちは、Backend Engineer Groupの菊地陽介です。今回は、BASEの育休エバンジェリストとして記事を書きたいと思います。今年の8月8日に第一子(綾瀬はるか似の娘)が生まれ、その後BASEの男性社員としては初めてとなる育児休業(以下、育休)を1.5ヶ月ほど取得しました。

育休取得直後に娘の心臓に先天性の疾患があることが分かり、一般的な赤ちゃんの倍くらい世話が必要だったので私が育休を取って妻と2人で育児をすることができたことは大変ありがたかったです(その後手術を行い現在は回復の方向に向かっています)。 なにより育休期間中の1.5ヶ月は娘の成長を間近で見ることができ、私の人生において生涯忘れないであろうかけがえのない日々となりました。そこで私が今回育休を取得して気付いたこと、思ったことを日本の全パパにお伝えしたい。

日本の男性社員が育休を取りにくい理由の一つとして、前例がまだ少なく情報があまりないということが挙げられると思います。今回育休に関する様々な知見を得ることができましたので紹介します。本記事をきっかけに育休に対する理解を深められたり、これまでより柔軟に考えてもらう機会になれたら幸いです。

(注)
- 制度の内容は育休を取りやすい方向に変わっているので本記事で述べているものと現在の制度が異なっている可能性があります。
- 本記事は育休について大まかに知ってもらうことが目的なので詳細については言及していません。

日本のパパの育休について

私が育休を取得しようか検討する際に知りたかった情報を紹介します。

一ヶ月以上の育休取得率は1%以下

パパの育休取得率は年々上がってきてはいるもののそれでも平成27年度時点で2.65%程度しかありません。さらに5日未満しか育休を取得しない人が56%を占め、一ヶ月以上の育休を取っている割合は20%以下です。つまり一ヶ月以上の育休を取っているパパは日本には100人に1人以下しかいないというのが現状です。

f:id:aiyoneda:20181214174352p:plain

f:id:aiyoneda:20181214174413p:plain

(厚生労働省「資料 「平成 27 年度雇用均等基本調査」の結果概要」より)

休業前の手取り賃金の8割がもらえる

育休を取得しない理由の一つとして、育休期間中の収入が0になると思っている人が多いのではないでしょうか。その心配はいりません。雇用保険の育児休業給付金制度があります。(※支給要件があります)手取り賃金で比べると約8割が支給されます。下記資料が分かりやすかったです。ちなみにメルカリさんのように育休期間中の給与を100%保障する会社もあるようです。

f:id:aiyoneda:20181214174450p:plain

(厚生労働省「育児休業給付金の資料」より)

※その他にも健康保険から支給される「出産育児一時金」や「出産手当金」等があります。(※こちらも支給要件があります)

産後一年の間で取得可能、また延長も可

育休は子供が産まれてすぐに取得しなければいけないものではありません。出産のタイミングでは自分が関わっているプロジェクトが忙しかったり、業務の引き継ぎがたくさん必要で育休を取りにくいという場合があるかもしれません。しかし「子供が産まれてから1年の間であれば取得可能」ということであればその間で育休を取れるように調整することは難しくないのではないでしょうか。

また、産後一年以内であれば育休を延長することもできます。私の場合当初1ヶ月の予定でしたが、育休取得後に娘の心臓に疾患が見つかり検査や入院などが必要となったため半月ほど延長しました。

私の育休

育休を取得するまで

上司に伝える

出産予定日の半年ほど前に上司に「1ヶ月くらい育休とりたいんですけど」と週に1度行われている1on1ミーティングの際に相談してみました。 このとき嫌な顔されるといった心配はまったくしておらず、「お、いいね!ていうか一ヶ月だけでいいの?もっと取った方がいいよ!」と言われるほどでした。 出産予定日前後は自分がいなくても業務に差し支えがないように配慮してもらいました。感謝です。

チームメンバーに伝える

チームメンバーには育休を取る一ヶ月前くらいに報告しました。 育休を取得しない理由の大きな理由の一つとして、自分が休むと会社が回らなくなってしまうと心配してしまう人が多いのではないでしょうか。もしそう思うのであれば本当に心配しなくてはいけないのは、自分がいないと会社が回らないほどに属人化してしまっている状況です。私の場合は属人化している業務がほぼなかったため、引き継ぎは隣の席の @tenkoma に15分ほど説明しただけでした。 赤ちゃんはいきなり産まれてくるわけではありません。自分も父になるんだという気持ちが湧いてから産まれるまでに半年以上の猶予があると思います。その間に自分の業務をチームのメンバーができるように引き継ぎを行い、気持ちよく育休を取得できるようにしたいですよね。 (ちなみに自分が休んでいても何一つ問題なく会社が回っていると寂しい気持ちになります)

申請の書類を提出する

育休の申請については、育休を取得する前に会社に簡単な申請書を提出し、あとの手続きは会社でやってもらえたのでとても簡単なものでした。

育休中

育休はバケーションじゃない

育休前は少なからず下記のような気持ちがありました。

  • 知性を感じさせるパパを目指して自己啓発本をたくさん読もう
  • カッコいいパパを目指して毎日筋トレして体を鍛えよう
  • 子供に尊敬されるパパを目指して国旗とか覚えよう
  • etc

結果的に何一つとしてできませんでした。 育休期間中に育児以外のことをする時間はないと思って間違いないと思います。おそらく日本では育休をバケーションのように考えている人が少なからずいらっしゃるようで、育休を取得することに対して後ろめたさを感じ、取得に踏み込めない人が多いのかなと感じます。 育休≠バケーションです。本音を言うと私にとって育休は仕事をしてるよりしんどかったです。

ママの期待値を調整する

産後クライシスという言葉があるように、出産を機に夫婦の関係性が悪い方向に大きく変わることも多いようです。 出産直後はホルモンバランスが崩れネガティヴ思考になったり、育児に対して過剰な責任を感じてしまう母親が多く、期待してるような行動を父親が取ってくれないと苛立ちやすくなってしまうようです。特段穏やかな私の妻に限ってそれはないと思っていたのですが甘かったです。

育児中の母親は父親に求めるハードル(期待値)が高くなりやすい一方で、世の多くの父親はそれをなかなか超えてこないので苛立ちが生じるのだと思います。ですので、ハードルを下げましょう。

具体的には「オムツ交換とミルクを作るのはパパ、お皿洗いと料理の準備はママ」といったように家事や育児の役割分担をできる限り明確にすることが重要だと思います。例えば「お皿洗いは気が付いた方がやるようにしよう」としておくと、「私は寝不足で疲れてるんだからパパが洗ってよ」とパパがお皿を洗うことを期待されることがあります。しかし事前にお皿洗いはママの役割と明確にしておけばそのような期待は起きないでしょう。逆にお皿洗いはママの役割としているのにパパがお皿を洗ったら感謝されるものです。

結果的にやってることは一緒でも期待値の調整次第でママからの評価は大きく変わるものです。 仕事と一緒ですね。

考え方が変わった

育児をすることで色々考え方が変わったなと感じます。私はたくさんある育児の中でオムツ交換が一番好きです。下記写真のように赤ちゃんのなされるがままにお股を広げている無力な様がたまらなく可愛いく思うのです。 あの人怖いな、苦手だな、堅物だなとこれまでは避けていたような人に対しても、「昔はオムツ交換してもらってたんだな」と思うと微笑ましく感じられるようになり、以前よりも余計な感情なくニュートラルに人と接することができるようになったと感じています。

また、育児がこれほどまでに大変なんだと実感することで自分を育ててくれた両親に対しての感謝の気持ちが強くなりましたし、世の中にいるパパママはみんなすごいなと尊敬の気持ちを抱くようになりました。

f:id:aiyoneda:20181214174542p:plain

育休が終わってから

復帰初日は転職初日のような緊張感がありました。1.5ヶ月間の育休でしたが個人的には1年くらい休んでいた感覚でした。私が育休を取っている間に次のような変化がありこれぞベンチャー企業だなと思いました。

  • 渋谷の2フロアに分かれていたオフィスから、六本木の高層ビルの37階に引っ越ししていた
  • 新入社員がたくさん増えてた

BASEの男性社員として初となる私の育休をきっかけに多くの男性社員から「次に子供が生まれる際には自分も育休を取ろうと思う」というふうに声をかけられました。 今後も育休エバンジェリストとして育休を取得することの意義を布教していきたいと思います。

出産&育児で得た知見

本記事の育休を勧めるという目的からは話が逸れるのですが、出産&育児の際にいくつか知見を得たので共有します。

日用品にかかるお金はけっこう節約できる

先輩パパママから「子供ができるとオムツ代とかミルク代がバカにならないよ!」とよく聞かされていました。 実際はそんなことありません。財テクオタクのぼくは1円たりともそれらにお金を使っていません。 そうです、ふるさと納税です。ふるさと納税を有効に使えばオムツ(メリーズ、ムーニーマン、グーン等なんでもある)、おしりふき、ミルクetcほとんどなんでも揃えることができます。ぜひ活用してみてはいかがでしょうか。

おすすめのアプリ

様々なアプリをたくさん比較した上で厳選したというわけではないですし、一番メジャーなものを使っていただけなのですが下記で紹介するアプリは大変素晴らしく感動したので個人的におすすめさせてください。

トツキトオカ

トツキトオカ」は、夫婦で共有できる妊娠記録・日記アプリです。

日々アプリの中の赤ちゃんが成長していき、また話す言葉もグッとくるものなので父親になるんだなという実感が徐々に湧いてきました。 また妻が毎日このアプリで日記を更新していたのですが、口には出しづらい心配ごとなどを書いていたりして妻の心情を理解するのに役立ちました。

f:id:aiyoneda:20181214174703p:plainトツキトオカ 公式HPより)

みてね

みてね」は、子供の写真を家族で共有することができるアプリです。

スマホはLINEくらいしか使いこなせていなかった私の父と母もこのアプリなら使いこなせるくらい、UIUXが優れていて使いやすいです。 また、フォトブックやDVDをすごく簡単に作成することができます。しかもとても安価に作成できるので運営会社が今後も継続していけるのか心配になるほどです。

f:id:aiyoneda:20181214174735p:plainみてね 公式HPより)

まとめ

本記事を読んで育休を取ってみようかなという気持ちになっていただけたなら幸いです。

私が育休をとるにあたって業務の調整を行ってくれた上司やフォローをしてくれたチームメンバー、復帰後も温かく迎えてくれたBASEの社員みんなにこの場を借りてお礼を伝えたいと思います。

本記事を読んで少しでも伝わったなら嬉しいのですが、BASEはみんないい人でとても働きやすい良い会社です。 BASEってどんな会社なの?会社に遊びに行ってみたい!育休の話もっと詳しく聞きたい!財テクの話が聞きたかった!と思っていただける方がいらっしゃればぜひまでメッセをいただければと思います!

明日はデザイナーの吉岡さんがデザイン表現を広げるアレコレについて書くようです、ぜひご覧ください!

デザイナーの私が初めてプロダクトのコードをコミットしてみた!

f:id:aiyoneda:20181214105311j:plain

この記事は、「BASE Advent Calendar 2018」の14日目の記事です。

devblog.thebase.in

こんにちは!Design Groupに所属している森(@mrkzk )です!

リードエンジニアのお兄さんに「森さん、寿司食いたくないですか?」と聞かれ「もちろん、食べたいです。」と答えたらアドベントカレンダーブログを書くことが決定していました!お寿司は隠語だったのでしょうか?びっくりです! では早速、タイトル通りデザイナーの私が初めてプロダクトのコードをコミットしてみたお話をします。

どうしてコードを書くことになったの?

私の普段の業務はアプリのUIデザインなのですが、ときどきWebのクリエイティブ作成にも関わることがあり、いつもクリエイティブを作ったのちに「お願いします!」とこのようにエンジニアの方にお渡ししています。

f:id:aiyoneda:20181214102413p:plain

今回は、既存バナーのUIやショップ数が古かったので更新するために差し替えが必要だったのですが、「お願いします!」と言いながら、画像の差し替えくらい自分でできたらな、、と思っていたところこのような流れが・・・

f:id:aiyoneda:20181214102444p:plain

「こんな綺麗な流れってあるんだ・・・」と感心しつつ、探り探りでやっていくことに・・・

まず、作成したクリエイティブをステージングへ、そして本番へアップロードしなければいけません。 そこで噂には聞いていた画像アップローダーの出番です!

画像アップローダーの実装に関しては、先日エンジニアリングマネージャーの加賀谷が記事に書いています!

devblog.thebase.in

画像アップローダーくんの使い方

  1. Slackの該当チャンネルに作成したクリエイティブを投稿する
  2. Slackで@image-uploader heyと話しかける  

f:id:aiyoneda:20181214102534p:plain

  1. 画像アップローダーくんからお返事がきたので快くyesを選択

f:id:aiyoneda:20181214102607p:plain

すると・・・

f:id:aiyoneda:20181214102638p:plain

ステージングにアップロードできちゃいました!こんな簡単に・・?と疑っていると、今度はタコとネコのハーフからお返事が来たので快くyesを選択。

f:id:yaakaito:20181214110938p:plain

すると・・・

f:id:aiyoneda:20181214103043p:plain

できました!差し換え用のクリエイティブを本番にアップロードすることができました。すごい!

と、ここまでは画像アップローダーくんに助けられていましたが、ここからは一人の戦いです。

OSの出し分け

今回私が作成したクリエイティブは、アプリへのダウンロード導線バナーです。 OS別にバナーを作成しているので、iOSユーザーには左のiPhone端末バナー、そしてAndroidユーザーには右のAndroidの端末バナーを出したいのです。

f:id:aiyoneda:20181214103111p:plain

ところが、コードの書き方が全くわかりません。 とりあえずOS 出し分けで検索してみると、「JavaScriptで簡単にUA判定する方法」に関する記事が出てきました。どうやらUA判定というものがあって、これを使えばiOSかどうかがわかるらしいので、UAを利用してiOSを判定するコードを探しました。

こちらです。

var ua = navigator.userAgent
var isIOS = ua.indexOf("iPhone") >= 0
  || ua.indexOf("iPad") >= 0
  || navigator.userAgent.indexOf("iPod") >= 0

こちらを利用して、実際に画像を出し分けるコードを書いてみます。 imgタグはわかっていたので、このソースを切り替える方法を調べていくと「getElementByIdを使ってソースを書き換えると良い」とあったのでとにかく書いてみました。

<script>
var ua = navigator.userAgent
var isIOS = ua.indexOf("iPhone") >= 0
  || ua.indexOf("iPad") >= 0
  || navigator.userAgent.indexOf("iPod") >= 0;
var img = document.getElementById('appBannerImg')
if (isIOS) {
    img.src = "//static.thebase.in/img/u/U1MK212HY/FER5CBE2D.png"
}
else {
    img.src = "//static.thebase.in/img/u/U1MK212HY/FERP402M8.png"

}
</script>

これでpushしてみると・・・ちゃんと動いてます!出し分け成功!

f:id:aiyoneda:20181214103205p:plain

なんとかこれをプルリクエストまで持っていくことができました!なんでしょうか、この達成感は・・!!

f:id:aiyoneda:20181214103228p:plain

プルリクエストー!!と舞い上がっているところに間髪入れずリードエンジニア兄さんからのつぶやき↑が聞こえてきました。コードを少し書くだけでも一苦労だったので正直勘弁してほしいなと思ってしまいましたが、どうせなら!とquerySelectorに書き換えることに。

- var img = document.getElementById('appBannerImg')
+ var img = document.querySelector('#appBannerImg')

getElementByIdの部分をquerySelectorに変更し、imgタグの前に#をつけるだけ! これがイマドキなんですね(getElementByIdの方が響きはイカしてると思いますが)

f:id:aiyoneda:20181214103323p:plain

こうして無事リードエンジニアの兄貴からOKが出ました!リリースです🎉

おしまい

ここまでの流れを簡単に書いてきましたが、実際はコマンド一つを実行するにも調べながら、質問しながら、とかなり苦労しました。 それでもターミナルがガガガーっと動くのは楽しいし、自分の制作物をエンジニアさんにお任せするのではなく、最後まで責任持って本番環境に届けることに気持ちの良さと達成感を覚えました!

私のようにこれからは一通り自分でやってみるぞ!!というデザイナーが増えると嬉しいです。 ちなみにTwitterトップでLINEスタンプ販売中なので見てみてください!

明日の担当はBASEのイクメン・菊地さんです!

テストを書くモチベーションを上げるための、カバレッジレポート活用方法

f:id:okinaka:20181210121202j:plain
BASE Advent Calendar 2018 (13日目)

この記事は、「BASE Advent Calendar 2018」の13日目の記事です。

devblog.thebase.in

Backend Engineerの沖中 (@okinaka) です。

読者のみなさんはテストを書いてますか?テストが面倒くさいとか思ってませんか?(私はたまにあります)
そんな時、モチベーションをあげるには、どのような工夫をしていますか?

私の場合、カバレッジ計測の結果のレポートがとても役に立っています。 レポートを眺めると、視覚的に

  • 「どの行が実行された」とか
  • 「カバレッジ率が◯%」だとか
  • 「ここ複雑だけどテストがないクラスがあるよ」など、

いろいろ気づきがあります。

「ここマズイな、テスト書いて確認しなくちゃ!」という気持ちになるのでとても重宝しています。

とてもいいツールだと思うのですが、残念ながら BASE社内でもまだ十分に活用されていないのが現状です。ですので、この記事をきっかけに、広めていければいいのではないかと期待しています!

現状ではカバレッジレポート出力が時間がかかる問題があるのですが、今後、自動生成する仕組みを用意できればと考えています。

カバレッジレポートについて

BASEでは、主にCakePHPでサービスが構築されており、ユニットテストも、若干手を加えていますが基本的にはCakePHPに用意された仕組みを利用しています。カバレッジレポートは、その機能を利用して生成しています。

カバレッジについての簡単な説明は、CakePHP クックブックをご覧ください。
(内部的には PHPUnit を利用しています。詳細は こちら

カバレッジレポートには出力形式がいくつかあるのですが、今回はモチベーションアップが目的なので、人が見てわかりやすいHTML出力を紹介します。

出力されるHTMLページは大きく分けて3つに分類されます。

各ディレクトリ内のファイル一覧 (index.html)

  • ファイル毎の大まかなカバレッジ状況を一覧で確認できるページ*1

f:id:okinaka:20181210123856j:plain
ファイル一覧(index.html)

各ファイルのカバレッジ詳細 (PHPファイル名.html)

  • どの関数・行がテストされたかなど詳細を確認できるページ
  • 次にどんなテストが必要かを考える際に役立ちます

f:id:okinaka:20181210124020j:plain
カバレッジ詳細(PHPファイル名.html)

ダッシュボード (dashboard.html)

  • 以下のカバレッジ状況を俯瞰的に確認できるページ
    • クラス・メソッドのカバレッジ率 (Coverage)
    • コードの複雑度 (Complexity) の分布図
    • カバレッジ率の低い順のクラス・メソッド一覧
    • リスク (CRAP値) の高い順のクラス・メソッド一覧
  • 全体の状況を把握したり、次にどのファイルをテストすべきかをざっと見るのに便利!

f:id:okinaka:20181210124152j:plain
ダッシュボード(dashboard.html)

テスト作成とカバレッジレポート出力

では、実際にレポートを出力して内容を見てみましょう。

まず最初に、とあるメソッドに対してテストを1つ書いてみました。

<?php
    public function testView()
    {
        // テスト対象を実行
        $this->testAction('/posts/view/1', ['method' => 'get', 'return' => 'contents']);
        
        // とりあえず、ステータスコードの確認
        $this->assertSame(200, $this->controller->response->statusCode());
        
        // その他、なんらかの結果の確認...
    }

この時点で、カバレッジレポートを出力してみます。レポートを見ると、どうやら一部実行されていない行があるようです。 (注:緑の部分がテストされた行で、赤い部分が未テストな行です。赤い部分をなんとか消したくて、ウズウズしてきますね!)

f:id:okinaka:20181210124316j:plain
カバレッジ詳細(テスト1回目)

未テストだった行を確認してみると、$id が未指定 (null) だった場合と、 データーベースに未登録な $id だった場合の処理がテストされてないようです。 このレポートを受けてテストケースを追加してみます。

<?php
    /**
     * @expectedException NotFoundException
     * @expectedExceptionMessage Invalid post
     */
    public function testViewで、IDが未指定だった場合は例外発生()
    {
        $this->testAction('/posts/view/', ['method' => 'get', 'return' => 'contents']);
    }

    /**
     * @expectedException NotFoundException
     * @expectedExceptionMessage Invalid post
     */
    public function testViewで、未登録なIDを指定した場合は例外発生()
    {
        $this->testAction('/posts/view/999', ['method' => 'get', 'return' => 'contents']);
    }

結果がこれ。

f:id:okinaka:20181210124408j:plain
カバレッジ詳細(テスト2回目)

やりました!赤かったところが全部緑色に!これで安心です。

ここで、注意点があります。全部緑色になって喜んでいましたが、緑色の行を増やすよりもむしろテストの内容の方が重要です。 たとえテストが実行されたとしても、ちゃんと動作を確認していなければ意味がありません。あくまで、モチベーションを高め、テスト状況を確認するためのツールと捉えていただければと思います。

明日はデザイナーの森さんです!お楽しみに!

*1:注: CakePHP 公式のクックブックのチュートリアル を元に、独自のテストを実行した結果を表示しています。

BASEがもっと好きになる。鶴岡さん観察日記

f:id:aiyoneda:20181212152057j:plain

この記事は、「BASE Advent Calendar 2018」の12日目の記事です。

devblog.thebase.in

こんにちは、BASE BANKインターンの かわごえ(@heart_breakers2)です。

今回は少し趣向を変えて、「鶴岡さん観察日記」と題して、BASE 代表取締役CEOおよびBASE BANK 代表取締役CEOである鶴岡の普段の様子をイラストを交えてカジュアルに伝えていきたいと思います。
(みなさんにもカジュアルな雰囲気で読んでいただきたいので、記事内ではあえて「鶴岡さん」と表記しています。)

私がインターンとしてBASE BANKにジョインし、鶴岡さんのななめ前の席に配属されてから半年が経ちました。
みなさんがきっと知らない鶴岡さんの素顔や、BASEの好きなところをまとめてみました。
この記事を読んでいただき鶴岡さんやBASEに興味を持っていただけると嬉しいです。

はじめに

みなさんは、BASE代表の鶴岡さんをご存知ですか?

BASEが提供するネットショップ作成サービス「BASE」は、「お母さんも使える」をコンセプトとしたネットショップを作成できるサービスで、現在は60万人を超えるオーナーズに利用されています。

鶴岡さんはBASEの創業者。
Forbes JAPANが発表した「日本の起業家ランキング2019」で3位に選出された、日本で最も注目されている起業家の一人です。

「60万ショップも使っているサービスを作っているんだ!すごい!」
「Forbesでも注目されているんだ!すごい!」
と思った方もいるのではないでしょうか。

私から見た鶴岡さんは、傾聴力と本質を見抜く力が圧倒的に高く、どんな人でも一緒にいて心地よい存在で社内外にファンが多いようです。

しかし、鶴岡さんが遠い存在と思われてしまっているのか、↓のようなツイートにだれもツッコめない状況になっているような気がします。

この記事では、社内での鶴岡さんはどのような様子なのか?何を大切にして事業を進めているのか?
BASEの素敵な制度などもご紹介しつつ、鶴岡さんにまだお会いしたことがない方でも身近に感じていただけるよう、イラストと写真で紹介していきます💫

鶴岡さん観察日記

AM 11:00 

Be Hopefulキャンディー

鶴岡さんの朝は、たいてい午前11時のミーティングで始まります。

鶴岡さんはミーティング中どんな感じなの?と気になる方も多いのではないでしょうか。
社内のミーティングの様子を覗いてみましょう。 f:id:aiyoneda:20181212103119j:plain

鶴岡さんとの社内ミーティングは社長室で行われることが多く、鶴岡さんが座る席の近くにはBe Hopefulキャンディーが入ったガラス瓶が置かれています。

ミーティングではキャンディーを手に取り頬張っている鶴岡さんですが、発言はいつも本質的で、

  • 「オーナーズのためになるどうか」
  • 「オーナーズにとってわかりやすいかどうか」

をいつも大切にしているので、私たちもどのような判断をすべきかがクリアになります。

ちなみに、BASEの行動指針

  • Be Hopeful
  • Move Fast
  • Speak Openly

の3つで、どれも欠かせない重要な指針となっています。

f:id:aiyoneda:20181212104221j:plain

実際のBe Hopefulキャンディー。
行動指針の浸透のために作られたもので、キャンディーの中に"Be Hopeful"と書かれていてかわいいです。
キャンディーの色は、「BASE」のサービスロゴであるティピのマルチカラーを使用していて、社内のいたるところに置いてあります。

PM 0:30 

みんなの食堂

先日からBASEでは、いわゆる社員食堂のサービスが毎週水曜日に提供されています。

鶴岡さんも毎週この社食を利用していて、メンバーと楽しく会話しながらランチをしています!

(鶴岡さんの写真は撮り忘れちゃいましたが、みなさんが食堂を楽しんでいる様子です💕)

現在は30食限定でいつもすぐに売り切れてしまうのですが、500円で定食を食べることができます!!
(BASEは37階にあるので、ランチにいくにも時間がかかってしまうのです)

ココロータス

別の日の様子です。
鶴岡さんはお昼頃になると、定期的に、大好きな神宮司さん(執行役員/Product Manager)にこう語りかけます。 f:id:heart_breakers2:20181212002130j:plain

ココロータスとは、アジア料理を中心に、多国籍のランチを提供するキッチンカーです。またココロータスは、お支払いアプリ「PAY ID」の加盟店で、スマホでQRコード決済が可能なのでお財布を持たなくてもランチを買うことができます。

f:id:heart_breakers2:20181212002201j:plain

メニューが提供されるのを今か今かと待ちわびているようです。

ココロータスのメニューはどれもボリューミーかつ1000円以内で注文できます。企業の社長はいつも豪華な食事をしているというイメージの方もいらっしゃるかもしれませんが、鶴岡さんのランチはいたって庶民的なんです。

ココロータスのキッチンカーは現在、江戸川橋と六本木三丁目で販売を行っています。六本木周辺に勤務されている方はぜひチェックしてみてくださいね!

PM 3:00 

カップスープ

ある日出社すると、隣の机に大量のカップスープが置かれていました。

f:id:heart_breakers2:20181212002430j:plain

置いたのはもちろん鶴岡さん。

f:id:heart_breakers2:20181212002459j:plain とのことだったので、3時のおやつにたまごスープをいただきました。

この時は特に何かのお祝いやイベント事があったわけではないですが、特に理由がなくともさらっとメンバーに差し入れをする様子を見て鶴岡さんの優しさや心遣いを感じました。まだ食べきれていないほど、大量に購入されていました!

ちなみに、鶴岡さんが好きなのはコーンポタージュ。

PM 4:00 

「順調?」

夕方になると、近くにいる人を中心に「順調?」と話しかけるのが鶴岡さんの癖です。
「え!?社長に進捗確認されるとかプレッシャー!!」と感じる方もいるのではないでしょうか。

でもBASEでは違います。

f:id:heart_breakers2:20181212002532j:plain

私から見ると、鶴岡さんの「順調?」という発言はメンバーにプレッシャーをかけたいという意図ではなく、「困ったことがあったらいつでも聞いて大丈夫だよ」という心配りなのではないかと思います。

なので、鶴岡さんに「順調?」と聞かれて正直に答えないメリットはありません。順調ならそう答えればいいし、何か詰まっている点があるなら打ち明けた方がよいです。
私自身も実際にこの言葉をかけられて、「ユーザーからの反応があまりなくて、次の施策をどうするか悩んでます!」と相談したことがあります。

なぜなら先ほども書きましたが、鶴岡さんは傾聴力が優れていて、本質的なことを見抜く力が高く、私たちの想像を超えるようなフィードバックをしてくれるからです。

BASEの行動指針に「Speak Openly」とあるように、たとえ物事が順調に進んでいない場合でも、正直に話すことで鶴岡さんから的確なフィードバックを得られるため本質を見失わずにプロダクトを作り続けることができます。

f:id:aiyoneda:20181212104632j:plain
お気に入りのゴジラをつかみながら喋る鶴岡さん

PM 5:00 

ジャック・ドーシー氏

f:id:heart_breakers2:20181212000839j:plain 鶴岡さんが12/3に日経BP社によって行われたイベント「スモールビジネス新潮流 「ポスト2020」を見据えて」に登壇が決まった時の話です。

テーマは「スモールビジネスが秘める可能性と未来」について。Twitter、Squareの創業者であるジャックドーシー氏も参加するセッションです。

中小企業や個人で活動しているオーナーズをどのような方法で応援できるかについて、鶴岡さんの考えやBASEの取り組みを話したそうです。当日の様子が気になる方はぜひ、Twitterで「#ポスト2020」と調べてみてください!

ちなみに鶴岡さんはかねてからジャックドーシー氏の大ファンで、このイベントでの登壇が決まったときは本当に嬉しそうでした。

(鶴岡さんの目がキラキラしてます!!)

おわりに

いかがでしたか。
鶴岡さんの普段の様子が伝わるように意識して書き上げたので、鶴岡さんの温かい人柄、飾らない素直な性格、そしてBASEの良さが伝わっていると嬉しいです。

明日は、沖中さんがカバレッジレポートについて書きます!