Androidエンジニア デザイン部 #2に行ってきました

Androidエンジニア デザイン部 #2

https://nohana.connpass.com/event/94621/

に行ってきたので、そのときのレポートブログ

LT1つ目:InvisionのAndroidアプリでみる4つのデザイン基本原則

エウレカのFutagawaさん

資料

以下、LTを聴きながらのメモ

今日話す内容

  • Invisionとは
  • 4つのデザイン原則とは

Invisionとは

モックでデザインを簡単に作れるやつ

4つの原則とは

  • Proximity:近接
  • Repetition:反復
  • Alignment:整列
  • Contrast:コントラスト

Proximity:近接」

グループ化した要素は近くに、そうじゃない要素はより遠くに

まとまりある要素同士の距離は、まとまりのない要素同士の距離よりも短くする。

Alignment:整列」

画面内の全ての要素が他の要素と視覚的なつながりをもつようにする。

Repetition:反復」

アプリの全体を通してなにかの特徴を繰り返す。

「Contrast:コントラスト」

同じ要素でないものははっきりと異ならせる。

例えば、タイトルとアップデート時間は全くことなるものなので

文字の濃さを変えたりする。

 

ノンデザイナーズ・デザインブック

https://book.mynavi.jp/ec/products/detail/id=22176

非デザイナーでも読みやすい。

たまにPDFを配ってるときとかもある。



LT2つ目:「ありがたいUI」をもっと大事にしたい。

資料

以下、LTを聴きながらのメモ

 

デザインに対する持論

デザインって広義的な意味でいっぱいあるが

大切にしたいと思っていることがある。

デザインって、かっこいいとか美しいとかクールと思われがちだ。

かっこいいからインストールするとか、そういう訴求力もあるが

かっこいいから使い続けてるとかはあまりない。

使い続ける理由としてかっこいいからというのはあまりない。

※ただし、アイコンは除く

 

ありがたいと思えるアプリ

twitterの画像表示がありがたい。

複数枚あるとスライドできるが、

消したいときは、下から上にスワイプする。

これの嬉しいところが、タイムラインを眺める動作と変わりない動作でできる。

これがもし、画面上のほうに×ボタンとかで閉じる UI だったら、少し手間になる。

CamScannerの画像切り抜き

タップ部分が拡大表示される。細かく調整ができる。

座標の調整が確認しやすい。

マルチウィンドウ対応アプリ

例えばyoutubeをバックグラウンド再生できる。

AbemaTVのCM中にtwitterみるとか、そういうことができる。

 

これらのアプリにある機能がありがたいので

他のアプリに乗り換えられない。

クールとか美しいアプリというのも大切だが、

ありがたいUIも大切。



LT3つ目:Google I/O 2018

Googleの方のLT

自社アプリ、IOSched について。

 

IOSchedは、

Androidアプリを作っている人に、リファレンスとして見てもらえるように作られている。

 

2018年の見所

  • 秘伝のたれのソースコードをフルスクラッチ
  • Kotlin
  • Architecture Component

UIの面でもベストプラクティスをやろうとしている。

マテリアルデザインで出したい。

だが、I/Oがあるまではマテリアルデザインで出せない。というジレンマがあった。

なので、デザインを2つ作った。

 

今年の見所

Lottieというアニメーションのライブラリを使っている。

カウントダウンを実装している。

githubにソースコード公開しているので、DLしてぜひ見て見てね。

 

ナビゲーション

去年まではナビゲーションペインで作っていたのだが

ナビゲーションボトムに切り替えた。

view pager

1つのviewはマテリアルデザインでいうところの1つの要素

なので、viewとviewの間には区切りが欲しい。

いろんなアプリはその区切りを入れてないので、入れることによりくっきり見える。

ボトムアップバー

これもライブラリの中に入っている。

ここはアクションのメニューを並べる。

fabが据えられる位置を決められる。

たとえばGmailみたいなアプリで、詳細画面に行ったときは返信するボタンになるとかで、

返信ボタンは左に出したいとかだったら、アニメーションを使う。

スナックバー

これまではfabを押し上げるような形だったが、

fabの上に出しましょうとしている。

ボトムシート

一時的な状態を出すのにすごくいい。

必須要素をぜひ知っていただきたい。

 

Googleのアプリをだすときにクリアしなければいけないこと

  • タッチフィードバック
  • 色のコントラスト。背景と文字のコントラストが十分かどうか?
    accesibility checkerというアプリで、チェックできる。
  • 色だけで情報を表さない。必ず文字も入れる。色弱の人がわからないので。
  • 前の画面ってなんだっけ?とならないようにアニメーションをつけるようにする。
  • talkbackでの動作


LT4つ目:Kyashはなぜ使いやすいのか

ノハナの方のLT

資料

以下、LTを聞きながらのメモ

 

今回のアンケート(connpassの参加フォームで「UIが好きなアプリは?」という質問があった)でも、

Kyashが一番評価がよかった。

1. シンプル

Navigation Drawerがない。

  • 機能が絞れている。
    我々は、多機能にしがちだが、Kyashは機能が絞られててよい。
  • 階層が浅い
    画面スタックが最大でも3階層
    人間は画面について覚えにくいが、3階層しかないので覚えやすい。
  • 画面内の要素が多くない

これらのこと = アプリで迷子になりにくい。

2. 操作感のあるUI

請求画面と送金画面が大体似ているが、

画面の下の操作が少し違う。

 

画面遷移

下から出てきて、前の画面が消えるようになっている。

横スライドで画面が変わったりもする。

画面の連続性を出すためにいい。

3. こだわり

39円を送ると、thank you というアニメーションが出る。

一見意味ないことのように思える(これでユーザ数が増えるとか思えない)が、こだわりがあってよい。

ギフトコードの画面についても、細かいアニメーション(プレゼントボックスがカタカタ動く)がある。

これも意味ないと思うが、こういったこだわりのアニメーションを実装したりすることで、

ファンが楽しくなって、ファンが増えていく。



以下、懇親会で周りの人と喋ってて知ったこと

  • https://material.io
    マテリアルデザインについて書かれている。
  • なるほどデザイン
    初心者向けのデザインの本。読みやすい
    https://www.amazon.co.jp/dp/B012VJNW6Q/
  • Xamarin
    Android, iOSアプリどちらも一度に作れる
  • Human Interface Guidelines
    iOSアプリを作るときのデザインのガイドライン

「割り勘オンライン」をリリースしました

趣味で作っているAndroidアプリ

「割り勘オンライン」を728日にGoogle Playで公開しました。

https://play.google.com/store/apps/details?id=com.jp.acchan.groupdutch

 

「割り勘オンライン」は

立て替えが何度か発生する関係の人との間で役にたちます。

領収証をとっておく必要がなく、

何をいくら立て替えたのかをスマホで共有することができます。

 

また誰がいくら多く払っているのかを

ボタン1つで計算することができます。

こんなときに使ってほしい

友達と旅行中に立て替えが発生するとき

旅行をしていて、

「今回ガソリン代払っとくよ~」とか

「今回レンタカー代払っとくよ~」と、立て替えをして

旅行が終わってから精算。ということがないでしょうか。

 

そんなときに、「割り勘オンライン」を使えば

誰が何を支払ったのかのメモをアプリで共有することができます。

 

また、立て替えた結果、誰がいくら多く払っているのかを

すぐに計算することができます。

恋人とお財布を分けてて、きっちり精算したいとき

私自身がそうだったのですが、

恋人と例えば

「今日スーパーで買い物してきたよ」とか

「コンビニまとめて払っておくね」とかしているけど

きっちり精算したい人はいませんか?

 

1ヶ月分のレシートを残しておいて

1でレシートを計算して精算、ということは面倒ですが、

「割り勘オンライン」があれば、レシートを取っておく必要も

電卓で計算する必要もありません。

 

まだリリースしたばかりで
至らない点が多いと思いますが、
気になった点や改善点があればレビューに書き込んでいただけると
幸いです。

【食事&景品付き】エンジニアの為の合コン(エジコン)に行ってきました。

【食事&景品付き】エンジニアの為の合コン(エジコン)

https://engineer-quality-life.connpass.com/event/93073/

に行ってきたので、そのときのレポート

エンジニアトークしていい前提なので話しやすい

日頃僕はエンジニア以外の方と話すときは

エンジニアの話題をしても話が広がらないので

頑張って他の趣味の話をするのですが、

技術の話のほうがいろいろ話せたり興味があります。

 

エンジニアトークしていい前提なので

自己紹介のときから「どんな言語・技術を触ってます」と言えるので

エンジニアな話ができてとてもよかったです。

 

また、これは偶然だったのかもですが、

私のテーブルには

  • Webのサーバーサイド
  • Webのフロントエンド
  • インフラ
  • 組み込み系

の人がいて、いろんな話が聞けて楽しかったです。

運営の方がいろいろしてくれている

現地に着いてから聞いた話だったのですが、

もともと用意していた会場が使えなくなり、急遽新しい会場で開催してくれたとのことでした。

少しバタついてしまっていましたが

急な対応をしてくれた運営の方には感謝です。

 

また、歓談の途中に、みんなで行うエンジニアクイズを企画してくれていました。

httpの意味は?」という問題だったり

「フォン・ノイマンがコンピュータを作ったときに言った言葉は?」

というちょっとトリビア的な問題だったりして

みんなで盛り上がってクイズ大会ができました。

 

またクイズに正解すると景品ももらえました。

偶然私が正解したクイズの景品が、映画のギフトカードだったのですが、

それを口実に女性に「一緒に行きましょう」と誘うことができました。

誘う口実になる景品を考えてくれた運営の方には感謝です。

まとめ

とても楽しかったです。

 

あまり合コンという意識をせずに

単純に集まった人で歓談を楽しむような雰囲気だったので

私も緊張せずに楽しむことができました。

 

ただ、connpassの予定では女性は6名の参加だったのですが、

当日になると欠席が多く、実際に集まってくれたのは2名でした。

 

このあたりは、運営の方が次回にむけて改善していきたいとおっしゃっていました。

 

あと強いて言うなら

僕がいないほうのテーブル(入り口から遠い方)のテーブルで

運営の方が喋りすぎてなかったかなとちょっと心配になりました。

参加者同士の会話よりも、運営の方の話を参加者が聞いているような時間がながく思えたので、

そこだけちょっと心配でした。

 

エンジニアはやっぱりエンジニアトークで盛り上がりやすいので

それができる人で集まる合コンはいいものですね!

ソフトスキル4章まとめ

まず始めに、私達は人との良い接し方をとらないといけないということを認識しよう

私達はコードのために働いているわけではなく、人のために働いている

私達は一日中コードを書いていたいと思うかもしれない

人との調整ごとなどできればしたくないと思うかもしれない

 

だが、そこについては一度考えなおしてみるとよい

私達が書くコードは、コンピュータから「この実装をしてくれ」と言われて書くものだろうか。

 

いや、違う。

人から「こういうことを実現したい」と言われてコードを書くのだ

コードに落としこむ内容を決めるために会議に出るし、ビジネス的な戦略を練ったりするだろう

 

このように、私達がコードを書く理由は人からきているのだ

自分の仕事はコードを書くことだと思い込むのではなく、

他の職種同様、人と接する職種だと認識しなくてはならない

このことから、私達は人との良い接し方をとらなければならない

人との接し方を学ぼう

「大切にされている」と誰もが感じたい。

人と接するときに最も重要にしたいことは、相手がどうされたいかを意識することだ。

 

では、相手はどうされたいか?

要望はいくらでもあるだろうが、最も根本的な要望は「大切にされたい」ということである。

この最も根本的な要望を常におさえたまま、人とは接しなければならない。

 

仮に、人を見くびったり、存在を否定するような接し方をしてしまった場合、

相手は自分に対して反抗的な姿勢になってしまうことを肝に銘じよう。

決して批判してはならない

人は大切にされたいという心理が理解できると、

批判が目的の結果を生み出さないことも理解できるだろう。

 

また、良い行動を褒めるほうが、悪い行動を懲らしめるよりはるかに効果的だということは、

数々の研究成果で示されている。

 

リーダーである人なら、メンバーにベストを出させたいときには、

余計なことは言わずに褒める言葉を繰り返すのがよい。

 

一つ例を出すと、あなたのこれまでの上司で、

失敗に対して叱責を繰り返す人がいたら、そのときのことを思い出してほしい。

叱責されて、やる気が出ただろうか、モチベーションが上がっただろうか。

多くの人は、あなたと同じようにモチベーションはあがらない。

他人の立場になって他人主体で考えよう

相手の立場になって物事を考えたり、話し方を変えるようにしよう。

そうすることで、相手のことを軽んじたりしたり批判したりすることを避けることができる

 

相手の立場になるうえで重要なことが、相手が何を望んでいるか、

何を大切にしているかを把握することだ。

自分が話をする番になっても、相手の立場になって、相手中心の話題になるようにしよう。

 

例えば

ある機能をある特定の条件で実装したいとなった場合、それをそのまま上司につつえるよりも、

その実装をすることで相手(上司)にどんないいことがあるのかを伝えるほうが、

承認をもらえる可能性がグッと高くなる。

議論は避けなければならない

ソフトウェア開発者の我々は、論理的な議論によって最適な解を得られると思っている。

 

しかし、それは間違いだ

議論する人は、思ったほど論理的になれない。

 

見た目は大人であっても、時には感情を剥き出しにするし、何か反論されたときなどには感情的な意見を言ってしまったりする

そういった理由で、議論によって最適な解を導き出せるわけではないので、避けなければならない。

 

泣き叫ぶ子供に正しいことを論じても通じないように、

あなたに冷たくされて人は、あなたの言うことに賛同しないだろう。

 

何かのやり方について賛同できないとき、特にそれに人が関わっているときは

命をかけてまで反対するべきかどうかを考えよう。

自分の意見を諦め、相手の意見を尊重した実績を積み上げれば

いずれ相手は自分の意見に耳を傾けてくれるかもしれない。

 

社交術のために時間を使ったことがなければ、いますぐ始めたほうがいい。

そうすれば自分の人生がもっと楽しくなり、それは値段がつけられないほど価値のあるものだ。

「毒」のある人の扱い方。

他人を蹴落とすことばかり考えていたり、自分を犠牲にして悪いことを集めたりする人はいるものだ。

そういう人に出くわしたら、できる限り早く距離をとったり、逃げ出したりしよう。

それが最善だ。

もし、どうしてもその人と関わらなければならない場合の選択肢は

  • 相手のご機嫌をとる
  • 異動を検討する
  • 感情的にならないように最小限の範囲で接する

ことだ。

【集まれKotlin好き!Kotlin愛好会 vol2】に行ってきました

集まれKotlin好き!Kotlin愛好会 vol2

https://love-kotlin.connpass.com/event/91710/

に行ってきたので、その時のレポート

談義: 「JavaからKotlinにコンバートする際にj2kコンバータをカスタマイズした話」by paraya3636さん

資料

以下、談義を聞きながらのメモ

Java から Kotlin に変換する際に苦労した点

通常、Android Studio で変換すると思う。このとき、j2k コンバータが使われている。

ただ、この j2k コンバータは問題がある。

それは、強制的にnon null 変換されること

これを調べてみると、

引数や戻りの型に non null のアノテーションがついてないと、

nulableな変換にしてくれない。

そのため、そのまま実行するとクラッシュしてしまう。

解決案1

目視で全部チェックする

解決案2

Kotlin 化して全部テストする

ただ、この2つの案だと、やる際に手作業で辛すぎる。

さらに考えて、

コンバータを改造すればいいのではないかと考えた。

Java から Kotlin に変換するツール「j2kコンバータ」をカスタマイズした話

ステップ

  1. Kotlin を build する環境を整える
  2. typeConverter.ktを編集
  3. チャイルド IDEA を実行
  4. コードをコンパイルする。

Kotlin の build 環境は長くなるので割愛。

資料のURLとかをみてね!

カスタムコンバータの使い心地は?

クラッシュの確率が激減した。

信頼感がupして、レビューを簡素にすることができた。



談義: 「Java で書かれた Android アプリを Kotlin で書き直すまでの話」by Ryutaro Miyashitaさん

資料

以下、談義を聞きながらのレポート

書き直す際に

最初は部分的に使えるところで使っていこうという形だった。

次に、既存の画面を書き換えてみた。

次に、新しい機能追加の際には Kotlin を使い始めた。

チーム内に Kotlin が浸透してきた。

Javaとつなぎこみたいときどうすればいいの?

Javaとの共存はもちろんできるが、このコードは Java から呼ぶとか Kotlin から呼ぶとか意識づけが必要。

Kotlin 側に、Java からアクセスさせるためにアノテーションをつけてあげたりする。

ここは Java からアクセスするんだねっていうのを意識する必要がない。

Java には Unit 型はないので、 Java 側に Unit を返すような実装をしなければいけない。

このように、Java 側に Kotlin の都合が侵食していったりする。

Kotlin の旨味を100%引き出したいとなると

Java と Kotlin がお互いに都合をお互いに考えなければいけなくなる。

いっそのこと、Kotlin に書き換えたほうがいいのでは?となり、

ただ、Kotlin の習熟度レベルはバラバラ。

なので、レビューをしたり、チャットでクイズを出したり、説明したりして、

理解を深めて行った。

結果、5.3万行くらいあった、コードが4.3万行くらいになった。

手作業でやりきったのはいい思い出。

10ヶ月で全部 Kotlin 化した。

その間に機能追加やリファクタリングもできた。

効果

可読性はあがった。

Null Pointer Exception の撲滅。ほぼ出会っていない。

最後に

既存のアプリも段階的に Kotlin 化して行けた。

中途半端に導入するぐらいであれば、全てを書き換えたい。

 → Java と Kotlin 間でそれぞれを意識する手間を省けた

他チームから見た、想定外の効果

 → iOS エンジニアや Scala のエンジニアが Kotlin のコードを読んで交流が生まれるようになった。



談義: 「低レベルな Kotolin 」by tomoya0x00さん

資料

以下、談義を聞きながらのメモ

Kotolin のbyte型の話。

符号なしで処理をしたいことがある。

kotlin の byte 型に 0x80 を突っ込むと

-128になってしまう。

そこで、

符号なしとして扱ったときの最大値が十分に表現できる型に変換する。

そして、マスクをする。

やり方は、

toInt()して、0xffでandをとる。

チェックサムの話

2の補数表現を考慮して実装をする。



談義: 「webエンジニアが 2ヶ月Kotlin(Android)開発して思ったこと」by achanさん

私の談義です。

資料

以下、概要

日頃はサーバーサイドを触っている

  • サーバーサイド
  • インフラ
  • Kotlin(Android)

ができると、一人でオンラインアプリが作れるようになる。

webもできてアプリもできるって人は少ないように感じる。

webの現場で「それ、アプリでできますよ」って言えるようになりたい。

Kotlin楽しい

これから始める人はぜひ実機デバッグで欲しい。

動いたときの感動がある。

型に厳密な言語は楽しい

IDEが叱ってくれる

型を書くのは頭の整理になる。

webだといろいろ複雑な要素が多いし、環境が違うこともあるが

Kotlinだと、同じ問題に当たっている人が同じ解決策で乗り切れることが多い。

Kotlinの世界を見て思ったこと

  • viewとロジックの分離が難しい
  • クライアントにインストールされている古いバージョンへの対応
  • 端末依存問題

まとめ

サーバーサイドを日頃触っているが、

Kotlinを触って新しい世界に触れるのは良い。



談義: Property Getterby scacheさん

資料



談義: 「完全に理解した気になる Kotlin Coroutines」by takahiromさん

資料

apiが多いが、基本的なところから理解したい。

coroutinesはスレッドの上で動く、動きは確認できる。

中断もできる。



談義: 「KotlinJs でも Coroutines」by Ryo Sakaguchiさん

資料

react wigh kotlinのインストールは簡単

npm で数コマンドたたくだけでできる!

【Kotlin Developers Meetup】に行ってきました

Kotlin Developers Meetup

https://kotlin.connpass.com/event/90679/

に行ってきたので、そのときのレポート

Creating DSLs in Kotlin

JetBrains社のHadi Hariri氏にKotlinについて講演してもらいました。

ただ、英語での講演だったので、全然聞き取れませんでした。。。


LT

LT1: FSM DSL in Kotlin

資料

https://speakerdeck.com/tomoya0x00/fsm-dsl-in-kotlin

Kotlinでtree探索をしようとした話。

私が不慣れなのと、内容の難易度が高くてついて行けませんでした。。。


LT2: Readable Code in Kotlin

資料

https://speakerdeck.com/kaonash/readable-code-in-kotlin

以下、LTを聴きながらのメモ

 

リーダブルコードの中で

「コードは理解しやすくなければならない」と書かれている。

 

理解しやすいコードは

簡潔なコードというわけではない。

短いコードは一見かっこいいかもしれないが、

理解がしずらい点もある。

 

どうやれば理解しやすいコードがかけるか?

1.  nullableのハンドリング

できるだけ早くスマートキャストをしてあげて、

nullなのかそうでないのかという状態を明示するようにする。

2. 型推論にあまりたよりすぎない。

型推論は便利。

ただ、あまり頼りすぎると、

この変数の型はなんなんだと分からなくなってしまう。

 

変数の型を確かめるために、コードをたくさん追わないと行けない。

だから、型推論できる場所でも型を書くようにしましょう。

ではどんなときに型を書くのか?

変数名で型を推測できるときは書かなくてもよいが、

そうでないときは書いたほうがいい。

 

また、letについてみんながどう思っているのかを知りたい。

letはわかりにくいので

runmapというネーミングに変えてあげたほうが

英語が苦手な見としては、わかりやすい。


LT3: multiplatform kotlin?

資料

https://speakerdeck.com/panini/kotlin-multiplatform

以下、LTを聴きながらのメモ

 

登壇者のPaniniさんはKotlinエンジニアなのだが

React Nativeも最近書いている。

React Nativeの良い点としては、

ファイルをセーブしたら、そのまま実行してくれるので便利。

 

ただ、jsよりもkotlin書きたい。。。。

そんなときに

Kotlin.js

という、kotlinをjsに変換してくれる神と出会った。

 

Kotlin を React Nativeで書くためには、

一行、ライブラリをimportする文を書くだけでできる。便利。

 

Hot Reload

jsはコンパイルされないから、すぐに実行できる。

Kotlinでもできないのかな?と思って調べたら、

gradle continuous build

という神の機能がある。

これを使ったら、ファイルの変化を検知してHot Reloadしてくれる。

コンパイルを挟むので少し時間がかかるけど、早いので良い。


LT4:spring fu on graalVM

以下、LTを聴きながらのメモ

 

登壇者の型は、Kotlin イン アクションとか、あかべこ本を書いた方。

graalVM

というのがある。

jvm言語はもちろん、それ以外の言語もこれの上で走る。

AOT compile

Javaや通常、実行時にバイトコードがマシンコードになるが、

これを使うことで、直接バイナリを得ることができる。

ただ、これはlinuxでしか動かない。

なので、macの上で docker  とか使って動かそう。

spring boot も動かせるよ!

ただ、jarファイルを食わせたら、エラーになってしまう。。。

ここで登場するのが

Spring Fu

kotlinでかけるよ!

これをgradlewで動かすと、もちろん動く。

そして、、、jarファイルを食わせると、、、同じようなエラーになってしまう。。。

告知!

kotolin fes 2018やるよ!

品川でやるよ!みんなきてね!


LT5: create minicraft mod with kotlin

以下、 LTを聴きながらのメモ

(英語でのLTだったので、メモが間違っている部分があるかもです。。)

 

登壇者の方は、Y.A.M の 雑記帳を書いている人。(いつもお世話になってます!!)

mine craft をやっているよ。

登壇者の方の息子さんもmine craftをやっているよ。私のPCでね!笑

mine craft modというものがあるよ

modというのは

オブジェクトのようなもので、

ブロックを追加したり、人のステータスを変更できたりするよ

forgeというもので、modカスタマイズできるよ。

modはInteljとgradleで作れるよ!

そしてjavaを使うんだけど、

今回kotlinでやってみたよ!

今回のゴールは私の息子がmodを作ることだ

ただ、

・子供がタイピングしたりエラーを解消したりいろんなファイルを触ったりするのはとても難しい

・重要なのは、早く、遊びながら作れること

結果として

modは子供がプログラミングに興味を持つのにいいきっかけになった。

そして、早くmodを作ることにも成功した!


Q & A

Hadi Hariri氏に直接質問をできるQ & Aが用意されました。

ただ、質問と回答が英語だったので聞き取れず。。。

英語勉強しよう。

【UIT#3 The “Backends for Frontends” sharing】に行ってきました

UIT#3 The “Backends for Frontends” sharing

https://uit.connpass.com/event/88434/

に行ってきたので、そのときのレポート

「マイクロサービスの思想から捉える、Backends for Frontendsとその類似パターン」 qsona (株式会社FiNC)

資料

以下、講演を聴きながらのメモ

BFFとは」「その位置付けと目的」

backend for frontendという言葉は少し混乱がある。

server for frontendという言葉のほうが実態に近いように思う。

複数のAPIを合成したりする位置付け

UI側でのABテストなどをする

BFFとマイクロサービスの関係性

マイクロサービスとは、協調して動作する、小規模な自律型のサービス

FINCアプリの場合は、各プロダクトが様々な機能を内包している。

機能の11個、それが単体でも事業になりそうなものが

FINCアプリの中にある。

それらを別々のマイクロサービスとして扱っている。

 

様々なクライアントと様々なサーバーがある。

それらを直接組み合わせると、

APIのコール数が増えるなどの問題がある。

 

その解決策として、中間に1つサーバーを挟む。

それを API Gateway として扱っている。

 

このAPI Gateway には独自のロジックは持たせたくない。

ロジックを持つと、マイクロサービスの旨味が減ってしまう。

注意点

バックエンドロジックをAPI Gateway にもりもりしてしまうと

辛くなる。

宣伝

Microservices architectureよろず本というのを書いたので、読んでね!

類似パターン

クライアントとBFF層のやりとりはgRPCにして

BFF層kotlinで書く。

iOS と Android は基本的に同じ構成をしている。

画面遷移など。

デザインによる違いなどの吸収はクライアント側で行う。

gRPCにした理由は

RPCにしたかったから。

レストフルは避けたい。

クライアントの要求に答える形なので、RPCとしたかった。

Kotlinの理由

既にいる Kotlin エンジニアのコストが減る。

並列処理として go や node.js を使おうかという考えもあったが、

コルーチンでギリギリ行けそうなので Kotlin



「FOLIOのBFFと秩序の話」 Quramy (株式会社FOLIO)

以下、講演を聴きながらのメモ

「FOLIOのBFFと秩序の話」 Quramy (株式会社FOLIO)

今日話すこと

FOLIO の BFF の自慢話

こんな失敗したのでみんなしないでねという話。

イントロ:サービス紹介、システム構成

MobileAPP と Web で大きく BFF を分けている。

モバイルアプリの iOS とAndroid へ提供している API は同じもので

デザインによる違いはクライアントで吸収させている。

BFF のお仕事

下流サービスの集約

Web の BFF は SSR(サーバサイドレンダリング)も行なっている

Aパート:良い話(うまくいった自慢話)

まずアーキテクチャはどんなのを採用しているか?

クリーンアーキテクチャ風

なぜこんな風にしているか?

BFF はクライアントやマイクロサービスに挟まれているので

クリーンアーキテクチャが親和性が高いと思ったから。

主な目的は型付け。

Json でやりとりをしていて、 Node.js を採用しているので、

型をつけたかった。

リクエストやレスポンス整形で誤っていればコンパイルエラーになるようにしている。

BFF の思想を決めておく

やるべきこと、やらないことを決めておく。

日付の計算やパースフォーマット、数値項目の加算原産など

チームでこれらのことに合意をとって進めて行くと良い。

Bパート:辛かった話(失敗した話)

Web の BFF と Mobile の BFF は作られた時期が全然違う。

Webのほうが古くて、それでつらかった部分を考慮して Mobile が作られている。

悲劇の紹介

ユーザーがみるダッシュボード的な画面。

ログインした次の画面、マイページ的な。

これが辛い。

薄いコントローラと巨大なロジック層によって

巨大な Json を返す。

React を採用しているので、クライアントで Json を処理する。

辛い部分として、

巨大なロジック層の部分が 1800 行とかある。

また、型も Any にしている。

型がついてないし、巨大なので触りたくない状態。

だが、旧来のMVCの形をしているので、ある意味わかりやすい部分はある。

直近の対処

改修をする際には、なるべく型付けを少しづつしていってリファクタリングをしている。

もう少し先の対応としては、

React コンポーネントが必要な Json を取りに行くという

画面側が必要な部分だけ取りに行く。next.jsのような思想を目指している。

おさらい

秩序をもたらすためには、

  • レイヤを意識しよう
  • ユースケースを意識しよう
  • スキーマ + 型を使おう


「merpay Frontend における BFF」 @1000ch (株式会社メルペイ)

資料

https://docs.google.com/presentation/d/1RY2qCIypDBju2LfVhBfBnBaaVN_SFM_KAz7-WVucl90/edit#slide=id.p

以下、講演を聴きながらのレポート

 

BFF のことを調べていたら

「使う側にとって、良い設計になっているバックエンド」

という文献に当たった。

最初は、API をまとめるための API サーバーという認識だったが、

複数の API サーバーにリクエストして、htmlを生成するサーバーも BFF と呼ぶ。

と、古川さん(Node.js会長の)が言っていた。

backend for frontendsという言葉なので、捉え方によってはなんとでもなりそう。

広義の意味では SSR Server を BFF と行ったり、

API をまとめる APIサーバーを backend for BFF という捉え方もできる。

node.js が API をまとめるようにしたくなかった。

isomorphoic app を動かすようにしたかった。

フロントエンドの人が js を触っているので、

その人たちもメンテナンスができる。

backend for bff がやっていること

API Gatewayとして動作させている。

httpリクエストを gRPC に変化して横流しする。

将来的にはアグリゲーションさせるかもしれない。



「なぜBFFを導入しなかったのか」 Kento Moriwaki (Wantedly, inc)

資料

Bffを導入しなかった理由(僕らにはまだ早かった)

以下、講演を聴きながらのメモ

システム構成

railsの一枚岩だけど Micro Service 化を進めている。

バックエンドとフロントエンドの責務を分けて行きたいと思って、

BFF の登場だ!ということを考えた。

課題

グローバルヘッダーやフッターは全ページ共通

ただ、SSR 化したかったのは、ヘッダーやフッターを除いて中のコンテンツを SSR したかった。

共通パーツ問題を解決するために考えたこと

  1. reactバージョンを作る?
    rails jqueryで2重管理になってしまう
  2. 全部react実装に統一する?
    Angularもいれていたので、Angular と React を2重管理させるのはカオスになりそうだった。

課題:インフラの問題

どうやってデプロイするか?

切り替わりの間で何か障害が起こったときのインパクトがでかすぎる。

また、画面を少しづつ移行させたいという要望もあった。

 

これらの課題を解決するに至らず、BFF は挫折した。

今後は

これらの要件を満たしつつ、最小限の工数で。

BFF は目的じゃなくて手段の一つ。

もともと作っていた Restful API でやってきたこと

model を json に変換するところを共通化していた。

複雑な処理もあるが、小さい Service 単位に切り出していた。

これらのことのように、Controller を薄くしておいたおかげで

さまざまな部分を共通化できた。

今後もし BFF に対応したかったら、

  • 対応する API を叩くように書き換えるだけ
  • BFF で直接 Render することも可能。

まとめ

SSR したいだけなら、BFF は必須じゃない

ただ、BFF のメリットはすごくあるので

1つ1つ疎結合にしていって、一歩ずつやっていこうと思う。



「LINEとBFFの話」 Jun (LINE株式会社)

資料

以下講演を聴きながらのメモ

LINEは、

  • サーバの人が多い
  • サーバは Java, Perl
  • サーバーサイドテンプレート
  • SPA でもindex.htmlはサーバーに置いてある

BFF というものは

フロントエンドとか技術だけの話だけではないと思う。

BFF の導入は慣れているプロセスを破壊するものなのか?

破壊は改善です!というのも、エンジニア以外から「本当に?」と思われてしまう。

BFF というのは、組織と責任が伴う。

 

BFF がなかったら、テンプレートがサーバーにあるため、責任が不明確。

例えば、画面の問題があって、テンプレートはサーバーにあるため

サーバーのエンジニアが見る

からの、「これはテンプレートの問題ですね」

となって、フロントエンドエンジニアが対応する

これは非効率

 

また、「これくらいのテンプレートならサーバーサイドエンジニアでも直せるや」

と思って直すと、フロントエンドエンジニアの人の知らないところで変更が入ってしまってつらい。

BFF があると

問題の切り分けが効率がよい。

サーバーサイドエンジニアはデータを触るだけ

フロントエンドエンジニアの人も、渡ってきたデータを触るのに集中できる。

何か BFF で問題が発生した場合は

インフラの人と責任分担して解決しよう。

SEO/OGP/i18n

のことは、最初から考慮して設計しよう

あとからの対応はほぼ無理になる。

performanceに関わること

BFF を導入しても遅くない。

むしろ早い。

node.js の速さもある。

内部ネットワークでの data fetch をすると rtt 1桁くらいになる。

「BFF しましょうとなったときに気をつけたいこと」

結果的にいいもの作って証明しないといけない。

開発環境を慎重に選びましょう

責任をちゃんと話し合いましょう

計測できるようにしましょう。

 → 数字がないと、何がよくなったのか証明できない。

結論

BFF はいいものだが、それだけじゃ進まないときもある

他の組織と話合おう

責任を分け合って、一部だけがつらくならないようにしよう。

結果的に良いものを作って、みんな幸せになろう。



「BFFアンチパターン」 @yosuke_furukawa

資料

バックエンドとフロントエンドを分けること自体がアンチパターンだという文献もある

そこで書かれていることが、

「どちらにも詳しいという人がいなくなってしまうし、責任の所在が不明確になったりもする。」

 

古川さんが BFF アンチパターンを書いていたときに

だんだん組織アンチパターンになってしまった。

 

BFF はフロントエンドとバックエンドの架け橋。

アンチパターンその1:スパースコミュニケーションのアンチパターン

BFF はアーキテクチャを疎結合にするが、

コミュニケーションまで疎結合になってしまうパターン。

n+1 queryのパターン

マイクロサービスだからといって

API を簡素にしていい訳ではない。

これらのことは、コミュニケーションをとらなかったから起こったこと。

アーキテクチャは疎であったとしても

対等な存在であり、コミュニケーションは密に行おう。

アンチパターンその2:インフラレスポンシビリティ

フロントのために BFF を導入したのに

何か BFF で問題があったとき、その責任をバックエンドに押し付けてしまうという問題

BFF は全員でみるべきものであるので、みんな当事者意識をもつようにしよう。

アンチパターンその3:ビックバンジョイント

フロントとバックエンドを別々で開発しており、

お互いに開発が完了した段階で結合テストをしましょうという段階で

確実に想定外のレスポンスが存在する。

なので、最後の最後で結合してあとは結合テストということができない。

なので、結合テストの部分はスケジュールを長く持たせないといけない。

古川さんたちがやっていることとして、

開発中にモックで作っているものを、

お互いの開発が部分的に終わったら、終わった部分から少しずつ本物にしていくということ。

【サポーターズCoLab勉強会】新規事業開発におけるエンジニアの心得に行ってきました

【サポーターズCoLab勉強会】新規事業開発におけるエンジニアの心得

https://supporterzcolab.com/event/410/

に行ってきたので、そのときのレポート

対象者

  • 現在新規事業の立ち上げに携わっている方
  • これから新規事業にたずさわるかもしれない方
  • (もしくはたずさわりたいと思っている方)
  • ライブラリを書くより、プロダクト開発が好きな方

話すこと

  • 作りすぎて失敗したことの事例紹介
  • つくりすぎないために
  • コアバリュー大事

登壇者の方が作ったサービス

pook

https://s.pook.life/lp/

ランサーズは、オンラインクラウドソーシングの会社だが

pookはオフラインでやることに特化したサービス

 → オフィスで肩を揉んでくれたり

 → 栄養士の方が手作りご飯を届けてくれたり

本題

エンジニアの新規事業への関わり方

そもそも新規事業って?

新規事業とは、既存事業から生かして、新しい経済成果を生み出すこと。

対して、起業というのは0から始めること。

どうやって関わって行くの?

求められること

サービスを作ることが求められる。

実際には、プログラムを書くというよりは、問題を解決すること。

失敗1:作りすぎた。

リリース時に作ったのは、

  • APIの数150本
  • ページは80

ガチガチの仕様をその通りに作ってリリースした。

多いと何が悪いか。

多いとリリースが遅くなる

 → 多すぎたということは、無駄なことを作ってしまった。

  → 使われないコードはただのゴミ。

本当にあった怖い話

 nヶ月書けて作った仕組みをすぐに消した。

 顧客が本当に求めていたものと違った。

どうすれば良かったか?

作らなければよかった

 → しかし作って見ないと分からないこともある。

  → 作る前にそもそも考えることがあるはず。

  • 同じような体験ができるサービスを作って模擬する。
  • ユーザーにもっとヒヤリングする
  • プロトタイプで実験してみる。

反省

  • 作らないで実験できないか考えてみる。
  • 試したい仮説をすぐに実装できないか考える

失敗2:技術選定

エンジニアあるある。

最近イケてる○○という技術を使おうぜ!

 → 既存に縛られないので、使いがち

結果

情報が少なくて死ぬ。

社内で知識が多い人の助けも受けられない。

サービスがあたるか当たらないかという問題の前に

サービスが作れるか作れないかという問題が発生する。

反省

  • 枯れた技術を使うべきだった
  • もっと協力しやすい技術を選定すべきだった。
  • できるかどうか分からないは早めに潰す。

失敗3:仕様が変わる。

どうしてそうなった?

  • 作るべきものがあやふやだった
  • 目的を達成するための機能がもりもり
  • 全部マスト

どうすればよかった?

コアバリューを定めて、やらないことを決める。

コアバリューとは?

ミッションやビジョン実現のために、組織が独自にもつ共通の価値観。

これを選定することで、作らないものを決めることができる。

 → コアバリューはなんですか。どうしても欲しい機能はなんですか。と唱える。

  → そうすることで、議論の着地点も見つかる。

反省

コアバリューを決めて、作らないを決める。


まとめ

新規事業開発に置けるエンジニアの心得

  • 一番大事なことは作らないこと
  • また、そのために、コアバリューを決める。
  • エンジニアとして問題を解決することにコミット

とはいえ、経験がないと分からないことが多いので、経験をたくさんしよう。


Q & A

Q1.

コアバリューを決めることでいらないものが見えてくるということだったが

APIの数など具体的にはどの程度減ったりするか?

A1.

Apiの数は80本になったりした。大体全部合わせて半分くらいになった。

Q2.

やっていくなかで一番コストがかかることは?

A2.

新規事業でいうと、人件費が一番コストになる。

技術でいうと、どこにコストがかかるか?

 → 作って捨てればいいので、キレイに作らないことを考えればよかった。

  → 無駄にキレイにつくることを考えてしまった。

   → 結果、使われないキレイな部分ができてしまった。

なので、キレイに作るっていうところにコストがかかる。

Q3.

新規事業をやる上で、予算をどのくらいに抑えろとかあったか?

A3.

最初はなかったが、途中からなんでこんなに時間かかってんだとかあった。

最初はノリで始まったものだが、どうしてこれこんなに時間かかってるの?とか。

新規事業は黒転するまでに時間がかかる。

 → なので、試算を前もってしておいて(エンジニアどのくらい必要です。どのくらいでリリースできます。どのくらいで黒転しますとか)ロードマップ考えておこう。

Q4.

開発するに置いて、「これ使ったよ」みたいなツールとかあるか?

A4.

プロトタイプを作るツールでいうと、InVisionというツールを作っていた。

https://www.invisionapp.com/

InVisionというのは、web上ピピッと操作してプロトタイプを作れるツール。

逆にコンフルエンスを使ったのは失敗だったと思った。

コンフルエンスはバージョン管理ができたり、キレイに書けたりすることができるツール

別にキレイに書く必要はなかったが、キレイにかけるがために、キレイに描こうという空気ができてしまった。

それよりも、ガンガンアウトプットできるようなツールのほうが良かった。

【集まれKotlin好き!Kotlin愛好会 vol1】に行ってきました

【集まれKotlin好き!Kotlin愛好会 vol1】

https://love-kotlin.connpass.com/event/86390/

に行ってきたので、そのときのレポート

談義: NaotoTakehataさん「サーバーサイドKotlinとの邂逅」

以下、談義を聴きながらのメモ

kotlin導入のきっかけ

Kotlin は Android のイメージがまだ強いが、なぜサーバーサイドで使おうと思ったか?

従来、 Java(spring) で開発をしていた。

開発メンバーから新しい言語にチャレンジしたいという要望があった。

リスクと葛藤

  • Java の資産がいっぱいある
  • 作り直す時間
  • 導入後に廃れたらどうしよう
  • Kotlin できる人材が少ない

kotlinのいいところ

Java からの移行がしやすい。

  • Kotlin で Spring の使用が可能
  • 過去に使っていたライブラリの活用も可能
  • 部分的にjavaを残すことも可能
  • コードの変換が可能

Java to Kotlin

Android Studio の機能で、コードの変換が可能

最初から自分で書き直すよりは、コストがかからない。

結果、Java から Kotlinに移行して、その他(ライブラリなど)はそのまま使えている。

構文の形だけkotlinに書き換えるくらいでいける。

Kotinはサーバーサイドでも十分使える

Javaを使って入れば移行コストは比較的低い

Kotlinはモダンで良い言語

宣伝

「てっくぼっと!」というエンジニアブログをやっていて、

そこで Spring と Kotlin の話を書いていたりするので読んでね。


談義: AtsukoFukuiさん「こんな時どう書くの? 逆引きKotlin入門」

資料

今回のゴールは Kotlin 描き始めたい初心者が  Kotlin よさそうって思えるようになることだよ。

以下、談義を聴きながらのメモ

変数

変数の宣言は var ,  val がある

var mutable

val imutable

型推論ができるので、型を書かなくても変数宣言できるよ!

オプショナルが使える。

null を許容する変数には、変数の末尾に をつける

null を意識するようになるので、ぬるぽで落ちることが少なくなるよ!

変数は class に属する必要がない。つまり、第1級オブジェクトとして宣言できる。

定数には const

関数

fun で関数がかける。

デフォルト引数と名前付き引数をサポートしている。

条件式

if文

Kotlin において if は式。文ではない。

つまり、値を返すことができる。

なので、if 文の中に値をそのまま書けば、それが return される。

例えば、

val max = if (a > b) {

  a

} else {

  b

}

のように。

三項演算子はつかえないが、エルビス演算子が使える。

エルビス演算子の名前の由来は「?:」という記号を横からみると

エルビスプレスリーに似ていることから付いた名前だよ!

null チェックは、スコープ関数とオプショナルの組み合わせがよく使われる。

when

if 同様に when も式

whenの後ろの()の値が比較の対象になる。

when(point) {

  in 0..10 -> User.gold

  else -> User.other

}

みたいにかける。

()を省略してもよい。

when {

  point in 0..10 -> User.gold

  score in 10..20 -> User.Silver

}

のように、違う値を比較することもできる。

まとめ

kotlinはかわいい!


談義: Paniniさん「Convert  Java  file to  Kotlin  file ⇧⌘K」

資料

以下、談義を聴きながらのメモ

android studioで、Java file を Kotlin にconvertすることができる

90%くらいはちゃんと動く。

Java で書いたコードは自分で意図は理解しているので

あとはコンバートしてくれれば Kotlin がかける!

 

ただ、Java  で書いたコードを変換してくれているだけなので、微修正は必要。

 

ぬるぽが起こるところは Kotlin でも起こるので

!!が付いていることがある。

その場合は?をつけると、その値が評価されなくなるので良い。

ただ、評価されなくなるのも困るので、

ちゃんと何か値が代入されるよってことで

lateinit 修飾子をつける。

そしたら ? もいらない。

ただ、初期化の段階で入れる予定の初期値をちゃんといれたい。

だが、onCreate 内で初期化している

そんな場合は、lazyを使えば遅延初期化で初期化ができる。


談義: takahiaさん「KotlinでRealmを扱う」

資料

以下、談義を聴きながらのメモ

Realm とは、Android や ios で使われる、簡易的なDB

登壇者の方は毎回、

「トランザクションの管理と CRUD の実装は、なんで面倒くさいんだろう。」

と思っていた。

Spring Boot は

1個のアノテーションでトランザクション管理ができる。

共通の interface で Crud の実装ができる

まとめ

Realm の transaction 管理は inline で定義して共通化する。

Realm の基本的な CRUD は abstract class で定義して共通化する。


談義: miho.sasakiさん「How to KotlinのセッションからKotlinらしい表現を学ぶ」

資料

Google I/O に行ってきて、

Java っぽいコードをどうやって Kotlin にしていくかっていうライブコーディングをやっていて

そのコードの書き出しを自分でもやってみたので、そういう発表。

「AKIBA.AWS #6 ネットワーク x 基礎編 – VPNとDirectConnect -」に行ってきました

AKIBA.AWS #6 ネットワーク x 基礎編 – VPNDirectConnect –

https://classmethod.connpass.com/event/84401/

に行ってきたので、そのときのレポート

1. 日本でAWS Direct Connectを利用する話

資料

 

以下、講演を聞きながらのメモ

想定する聴講者

ネットワークはあまり詳しくないけど、AWSを使ってみたいIT技術者

ネットワークセキュリティとその設計

Direct Connectはオンプレとクラウドを繋げるサービス

 

インターネットは怖いのでセキュリティをしなければいけない。

コンピュータセキュリティは大きく分けて2種類ある

エンドポイントセキュリティ

 → ウィルス対策ソフトを入れたり

ゾーンセキュリティ

 → 企業などが、自分の管理下のネットワークを置いて、そこで管理すること。
プライベートなネットワークのこと。

 → 組織内の人のみアクセスできるプライベートネットワーク。専用の箱を作って管理。

 → 誰でもアクセスできるパブリックネットワークとの境界を
しっかり分けて管理しましょうということ。

 → 会社の場合だと、ルータがその境界になっていたりする。

家庭のネットワークと企業のネットワークの違い

会社のネットワークは、システムの用途などでプライベートネットワークが別れている。

オフィスのLANとデータセンターで別ネットワーク。

それぞれのプライベートネットワークをどう繋ごうかと考えたりする。

拠点間プライベートネットワーク

方法としては大きく2種類ある

インターネットVPN

安価でベストエフォート

パブリックなインターネットを経由して行うが、組織内の通信を暗号化することにより実現。

インターネットを経由して行なっているので、使い勝手も特に差異はない。

IP-VPN

高価・高セキュリティで帯域保証つき

インターネットベンダーの設備を経由して、閉じた通信網のなかで行う通信。

 → 昔は、ビルとビルの間に線をつないで、、、とかやってる時代もあった。

 → いまは、ネットワークベンダーの設備を使ってやったりしている。

 

Ethernetであれば、ネットワーク通信自体の要件に違いはない。

セキュリティレベルや品質で選択する。

クラウドのネットワーク設計

いわゆる、VPCの話。AWSVPCはどういうつくりなのか?

VPCとは

AWSで使えるネットワーク機能

ざっくりいうと、AWSで使えるネットワーク機能が詰まったもの。

 

VPCの便利なところというのが、

パブリッククライドとしては、東京リージョンということで共通で使うのだが、

ユーザごとにネットワークを切って使うことができる。

 

それぞれのVPCは独立していて、閉じた仮装プライベートネットワーク。

やろうと思えば、VPC同士の接続(ピア接続)もできる。

 

本番と開発のネットワークを分けたいというような形で使われることが多い。

本番のネットワークのセキュリティレベルはあげたいが、

開発用はポコポコサーバーを建てたい、など。

 

VPCとプライベートネットワーク(社内の環境)との相互接続を実現するために

AWSが提供しているDirect Connectというのがある。

 

VPCとプライベートネットワークを繋げる手段は3

  • VPCのインターネットVPN機能
  • EC2でインターネットVPNソフトウェアを実行
  • AWS Direct Connect (今回のメイン

Direct Connectの特徴

  • 高品質
  • 高セキュリティ

サービスとしてのSLAは未定義なため、

現状は、月のアクセスがどのくらいまで保証、というのが明示されていない。

AWSによるサービスのメンテ頻度など実績で比較する。

Direct Connectはメンテ頻度が少ないので、安定しているなど。

対して、インターネットVPNというのが、構築も簡単で手軽である。

AWS Direct Connect

日本で使えるところ。

  1. エクイニックス ty2(東京 東品川)
  2. アット東京 cc1(東京 新豊洲)
  3. エクイニックス os1(大阪 四つ橋)

AWSのリージョン(東京・大阪)とは別

コラム

Direct Connectがある場所に、日本のAZがあるの?という質問がよくある。

真実はわからないが、違うというアナウンスがされている。

Direct Connectの使い方

Direct Connectが提供してくれるのは全てではなく、

VPCから、先ほどの3箇所(エクイニックスty2、アット東京cc1、エクイニックスos1

までの通信が用意される。

 

その3箇所のところにLANの差込口があるので、そこまでは繋ぐよ。

そこから自社のネットワークまでは、自分で用意してね。っていうようになっている。

自社のネットワークまでの繋ぎ方は2種類ある

占有プラン

3つのいずれかのデータセンターと通信を自前で行なって

IP-VPN接続などをする。

自社内のプライベートネットワークの中に

3つのうちのデータセンターへの口を用意する。

メリット

ユーザが自分でいろいろ設定するので、制約は少ないというメリットがある。

 → たとえば、複数のネットワークベンダーからデータセンターに繋ぐということもできるし、

   いくつものVPCを繋げるということもできる。

デメリット

価格が高いこと

共用プラン

ネットワーク事業者が、3つのうちのデータセンターとクラウドとの接続をやっているので、

自社内からそのクラウドに対して、IP-VPN接続を行う。

メリット

占有プランと比べて、データセンターとのやりとりコストや予算などが抑えられること。

デメリット

制約が多いことと、接続できるVPC数が1つだけであること。

まとめると

  • 共用プラン:比較的手軽
  • 占有プラン:本格利用

とっかかりはどうするか?

Direct Connnectを使いたいとなったら、既存のネットワーク事業者の営業さんに相談をする。

 → 中には、Direct Connectの経験があるネットワークベンダーもある。

 → AというネットワークはIP-VPN接続でやって、
   Bというネットワークはネットワークベンダーにお願いして、というようなやりかたもある。

技術的な不明点があれば、質問したり、AWS専用線アクセス体験ラボの活用がおすすめ

おまけ

  • Direct Connect応用機能
    → 占有プランでないと使えなかったりする。
  • パブリック接続
  • Direct Connect Gateway
  • Lag

まとめ

  • Direct connectはプライベトネットワークとVPCを高品質セキュアにつなぐサービス
  • 占有プランと共有プランがある
  • 質問があればネットワークベンダーに質問してみよう。

Q & A

Q1.

メンテナンスの頻度はよくある?

A1.

Direct Connectの推奨としては、冗長構成となっているので

片方がメンテナンスになってしまっても、

もう片方が残っていればいいというような状況にしておくのがよい。



2. AWS 専用線アクセス体験ラボトレーニング参加レポート

登壇者の方(濱田さん)から。

今回の講演で、面白かったポイントを伝えたりしようと思う。

また、これを聞いた人が参加したいなと思ってもらえたらよいかなと思う。

資料

 

以下、講演を聞きながらのメモ

イントロ

濱田さんが日頃の業務をしているときに

AWSとオンプレとの接続はマスト要件」という案件がある。

そういう場合は、

Configファイルを渡して、つながったら、よしやった!と思う。

ただ、当時のイメージとしては、

お客さん側の得体のしれない機材や得体の知らないネットワークが

どのように稼働しているのかイメージがつかなかったため、

体験ラボハンズオンに参加した。

 

結論からいうと、バックエンドやVPNとかよくわからないという方にとっては

とても学びがあって楽しい。

体験ラボとは?

学べる。

ルータを使った接続の体験とかができる。

会社でネットワークの運用とかをやっている人におすすめ。

 

トレーニングは2種類あって、

ハンズオントレーニングの方をやってきた。

(もう片方は座学なのかもしれない、、、たぶん。)

 

料金が無料!!!!!!!!

 

ハンズオン会場は、AWSのビルの素敵なところで行なう。

注意:ボルダリングするところがあるが、そこの写真とると怒られる。

 

行くときは、PCAWSアカウントを用意しておく。

 

講師は、AWSの菊池さんという人。ガチガチのスペシャリストの人。

とても丁寧に教えてもらえる。

 

ハンズオン形式でテキストを進めて行く形。

 

講演の中で説明されるが、

あるWEBサイトにAWSアカウトを登録すると

自分のAWSアカウントのDirect Connect のところに

Virtual Interfaceが自動で作られる。すごい。

 

ハンズオンの中では、VGWの作成などが

こうやればできますよってテキストに書いてあって、それをやる。

 

ある程度最初に、どんなことをやるのかイメージして

ハンズオンで進めていくことで理解が深まるのでよい。

よかったこと

  • Direct Connectの設定の流れを一気通貫で学ぶことができる。
  • ルーターコマンドを体験できる。
  • 講師にマニアックな質問ができる。
    → 参加人数がそれほど多くないので、
    ネットワークスペシャリストにVPNや専用線の質問ができる!
  • テストラボトレーニングの資料がもらえる。

まとめ

これまで霧のようなイメージだったお客さん側の環境が理解できるようになった!

また、無料だし3時間くらいだし、失うものは何もないので参加すると良い!

AWS 専用線体験」で検索!

Q & A

Q1.

無料ということだったが

ハンズオン内で行うAWS料金も無料?

A1.

そこはさすがに自分持ちです。

ただ、ハンズオン内でかかる費用は50円くらい。

しかも、ハンズオンの資料がもらえるので、それを見ながら1週間くらい遊んだりはできる。

1週間くらいはハンズオン用のデモの環境を残しておいてくれるので)



3. VPN接続とルーティングの基礎

まず始めに、登壇者の菊池さんから

今回はだいぶテクニカルな内容になります。と説明があった。

菊池さんは、AWS認定を8冠しているすごい方。

資料

 

以下、講演を聞きながらのメモ

1. AWSVPN接続

いわゆる、インターネットVPN

 → インターネット上の通信でパケットをカプセル化することで仮想敵なトンネルを形成

 

実現方法によって2つの分類がある。

  • ハードウェアVPN
  • ソフトウェアVPN

ハードウェアVPN

接続に必要な部分が、AWSのサービスとして提供されている。

ソフトウェアVPN

EC2の中にソフトウェアをインストールして、そこを通してVPN接続すること。

 

この2つを比べて一番違う部分が、

ソフトウェアVPNの場合は、

VPN接続の部分を、ユーザが自分たちで保守・運用しないといけない
例えばEC2インスタンス建てたりソフトウェアをインストールしたりとかということ

今回のテーマはハードウェアVPN

ハードウェアVPN = マネージドVPN

拠点間を繋ぐIPSecVPN

2. ハードウェアVPN

出てくるコンポーネントは3

  • customer gateway
    → オンプレ側に設置するルータ
    public ipを必要とする。
  • virtual private gateway
    VPCにアタッチするゲートウェイ
  • VPNトンネル
    → CGWとVPGを繋ぐ

 

AWS上での設定はとても楽。3ステップ。

 

設定ファイルが最後にDLできる

 

設定ファイルには、

  • IPSecVPNの設定情報
    → IKE/Ipsec/TUNNEL
  • BGPルーティングの設定(動的ルーティングの場合)

が書かれており、

IKEの事前共有鍵、AWS側の接続先IPなどが書かれている。

 

AWS側では、2箇所でルートが設定されている。

  • VGW
  • VPCのルートテーブル

3. BGPによる経路交換

AWSを使うと、IPSecまでの設計はほとんどいらない。DLするConfigに書かれている。

ネットワークの経験がない人がBGPをやろうとすると、一気にハードルが高くなる。

 

BGPとは?

Border Gateway Protocol

のこと。

動的ルーティングプロトコルの1

 

AS(Autonomous System:自律システム)間で経路情報を交換する。

ASナンバーというのは、大きなネットワークキャリアとかが、他と通信するための番号。

 

TCPで接続したルータ間で経路をアドバタイズ(広報)する

 → パスアトリビュート属性を付加することで経路を制御

  → ISPとかが複数の経路を提示してくれるが、
この属性によって最短の経路が何かを示してくれる。

 

VGWVPNトンネルの間にルータが2つある。

  • CGWで設定したCIDRCGWから受け取るルータ
  • VPNCIDRCGWに送信するルータ

 

BGPでは、パスアトリビュートのパラメータが10以上ある。

AWSでよく使われているのは

  • Local_Prefence
  • AS_PATH
  • Med

ここら辺の話はとてもディープな話になるので、

また次回の勉強会でやろうかな菊池さんがおっしゃってました。

4. 設定時の注意

CGWには実績のある機器を設定しよう

 → 不具合の回避

 → 実績のない機器を検討する場合は事前検証を。

 

AWSが公式に検証をサポートしている機器もある。

そういうものを使えば、まぁ、間違いないでしょう。

その機器の中に、 Cisco とか Juniper とかある。

コラム

ネットワーク屋さんからすると、CGWVGWは同じ機種を使うのがセオリーなので

AWSで使われている、謎の機器を使うときは、サポートされているものを使いましょう。

サンプルコンフィグの注意点

CGWNAT環境にある場合。

クライアントのFireWallの奥にCGWがある場合。

その時は、インターネットからFireWallを超えてCGWにアクセスできるように設定しよう。

サンプルコンフィグを使うと、NATGWIPが記載されているので、そこの書き換えが必要。

繋がらないときのトラブルシューティング

  • Ipsecがダウンしていないか
  • BGPがダウンしていないか
  • ルートテーブルが反映されているか

まとめ

  • ハードウェアVPNはマネージドなIpsecVPN
  • BGPまたはstaticルーティング経路を設定
  • AWSが、設定は簡単

Q & A

Q1

今回話したような内容は、ネットワークベンダーさんがやってくれる?

A1

基本的にやってくれる。

Q2.

経路交換しているときに、

VPC側の経路情報が流れてしまうという話があったがルーティングの設定をすればよいのか?

A2.

そうですね。オンプレの設定だけルーティングするような設定をしないといけない。

Q3.

Direct ConnnectSLAの設定がないという話で、冗長構成が推奨ということだったが、

どういう内容があるか?

A3.

データセンサーから線を2本引くなど。どこまでお金かけるかとか、考え方とかによることになる。

Q4.

AWS側でVPN接続する際にルータが2

CGWCIDRを受け取るものと、VPCCIDRを送るもの)出てくるが、

それが別れているのはなぜか?

A4.

AWS側が冗長化のためにやっている。

メンテナンスの際は、片方がとまるが、片方は生き残ったままというような形になる。