「Ginza.js#2」に参加してきました

  • Ginza.js#2に参加してきました。

ginzajs.connpass.com

タイトル 発表者
Vue初心者はVuetifyで遊んでみよう きり丸
Jestを使ってVueコンポーネントとVuexストアのテストコードを書いてみよう! karamage
vue×firebase製のなんちゃってCMSで、仕様決めから開発まで使い倒してる話@受託 MacotoChitose
TOEIC400点のRubistがセブのオフショアでReactNativeでアプリ開発した話 DYoko0701
Ionic/Vueを紹介してみる 果物リン
Making Figma Plugins with TypeScript takanorip
/f(ig usu)ma/の話 | Quramy

Vue初心者はVuetifyで遊んでみよう

  • きり丸さん

対象

Vuetify

vuetifyjs.com

Jestを使ってVueコンポーネントとVuexストアのテストコードを書いてみよう!

  • karamageさん

VueアプリでJestのセットアップ

  • jestとvue-test-utilsをインストール
  • Jest
    • JSのテストシェアNo1
    • テスト周り全部入り(他のテストツールだといろいろ組み合わせたりする必要あった)
    • カバレッジも取れる
    • スナップショットテストもできる
  • Nuxtアプリに入れるときはbabel周りでハマることもある
    • バージョンいじったら解消された

vue×firebase製のなんちゃってCMSで、仕様決めから開発まで使い倒してる話@受託

  • MacotoChitoseさん

VueとFirebase

  • 仕様決めの段階からコンポーネントを作って見せていく
    • 早めにフィードバックもらって軌道修正できる
  • Firebaseに仮データ入れて動作確認できる

TOEIC400点のRubistがセブのオフショアでReactNativeでアプリ開発した話

  • DYoko0701さん

ReactNativeでのアプリ開発

  • アプリ
    • ReactNative
  • サーバ

オフショア

  • なぜセブ?
    • 中国とかインドとかは単価上がってきてる
    • 公用語英語
  • ネットワークとても遅い(オフィスでも10M/bps)
  • 新しい技術より枯れたものの方が得意なことが多い
  • 既存の改修だと説明しないといけないので大変

Ionic/Vueを紹介してみる

  • 果物リンさん

Vueでネイティブアプリ

  • Weex
  • VueNative
  • どちらもあまり使われてない

Ionic

  • Web技術でネイティブアプリを作れる
    • Cordovaベース
  • v3まではAngularだった
  • v4からはVueやReactも使える

qiita.com

Making Figma Plugins with TypeScript

  • takanoripさん

Figma

  • Figma Designで検索
  • Web版とアプリ版がある

medium.com

Figma Plugin

  • 今まではPlugin作れなかった
  • 6/11にFigma Plugins betaが発表された
  • API経由で自由に機能にアクセスできる
  • TypeScriptで書ける(公式がおしてる)
  • WebWorker上のSandboxで任意のコードを動かせる

/f(ig|usu)ma/の話

  • Quramyさん

fusuma

hiroppy.github.io

github.com

  • markdown(mdx)でスライドが書ける
  • コードも貼れる(ハイライトついてくれる)

fusumaとfigma

  • .mdをスライドにするツールは過去にもいろいろあった
    • 図を入れるのがめんどくさかった
  • figmaならiframeでembedできる
  • mdxにiframeを入れたらよさそう
  • iframeの読み込みが遅かったのでgulpタスクでimgタグに置き換えた

「#portals_study」に参加してきました

  • portals_studyに参加してきました。

web-study.connpass.com

タイトル 発表者
Hands-on with Portals uskay
はてなにおけるPortals pastak
hitode909

Hands-on with Portals -seamless navigations on the web-

  • uskayさん

web.dev

Webのパフォーマンス

  • Lighthouseは最初のページがでるまでの速さをはかる
  • ページ遷移を快適にしたい
    • SPAにする?
    • SPA覚えてなくても使えるものはないか?
    • => Portals

iframeと似ている

  • portalsはiframeのようなもの
  • portalsは埋め込んだページにそのまま遷移できる

Portals

  • Canaryでflugをたてると使える
  • Portals自体がアニメーションを持つわけではない
    • 遷移するタイミングでアニメーションをあてるいい
    • transitionが終わったタイミングでportsl.activate()
  • activateすると前のページのportalオブジェクトを取得できる
  • portalで表示しているページはユーザのインプットを受け付けない(セキュリティの都合、将来変わるかも)
  • portalで表示しているページとはメッセージでやりとりできる
  • activateするとhistoryが消えてしまう(直してる)
  • portalのネストはできるけどactivateできるのは手前のものだけ
  • ホワイトリストしたページでしか表示できないとかは検討中
  • WICGで仕様が議論されている

wicg.github.io

github.com

はてなにおけるPortals

  • pastakさん
  • hitode909さん

マンガビューワ

  • Webで快適にマンガを読む
    • URLを開くとすぐ読める
    • スマホでもPCでも
  • 画像の先読み
  • 次のエピソードの先読み
  • フルスクリーンで読み続けたい

Portals

  • 使用感
    • 簡単に埋め込める
    • 簡単に遷移させられる
  • portalsとして埋め込んでもらえるようにすることも考えてる
    • 今はiframeで提供している

「ABC 2019 Spring」に参加してきました

  • Android Bazaar and Conference 2019 Springに参加してきました。

abc.android-group.jp

  • 今回はAndroidのハンズオンに参加してみましたが、初心者でもわかりやすく且つHelloWorldの2歩3歩先くらいまでの内容でとても満足度の高いハンズオンでした。

teampansaru.connpass.com

  • ARのハンズオンも気になっていましたが、資料公開されているようなので個人的にやってみたいと思います。

japan-android-group.connpass.com

タイムテーブル

10:10~11:10

会場 タイトル 発表者
大講義室 Google I/O 2019 Recap! 鈴木拓生/Google

11:10~11:55

会場 タイトル 発表者
大講義室 円周率世界記録31.4兆桁への道 岩尾エマはるか/Google

13:00~13:45

会場 タイトル 発表者
大講義室 IBM CloudではじめるNative Android Application開発 萩野たいじ/IBM
4101 Google I/O 2019 Recap MLセッション(入門からアプリ化まで) 足立昌彦/株式会社カブク
4103 Service WorkerではじめるオフラインWebアプリの実装 堀正斉/PWA Beginners
4103 Background Sync APIを使った実装について 平田智子/PWA Beginners
4104 準天頂衛星受信機の動向について 松岡繁/(一財)衛星測位利用推進センター
4105 45分で作れるかCPU 今岡通博/日本Androidの会FPGA
4201 アプリとゲームのセキュリティーを高めよう ロドリゲス オスカル/グーグル合同会社
4202 Google I/O 2019 アプリの裏側 萩倉健支/Google

14:00~14:45

会場 タイトル 発表者
大講義室 プロダクトは歳を重ねるととどうなってしまうの 矢野りん/バイドゥ株式会社
4101 スマホ業界とエンジニアキャリア形成 里山南人/株式会社ビデオマーケット
4103 Nuxt.jsとFirebaseを使ったPWA開発事例 菅家大地/株式会社TAM
4104 産業用組込み機器へAndroid搭載の可能性 片山健久/ルネサスエレクトロニクス(株)
4105 最低限機能・格安・長持ちスマホのためのOS「SUNBLAZE OS」 常盤瑛祐/株式会社アメグミ
4201 〜初心者歓迎〜みんなで 東京公共交通オープンデータチャレンジしよう! イボギョン/GMOペパボ株式会社 ちーむパンサル
4202 Googleアシスタント最新情報と他プラットフォームへの拡張方法 一円真治/ヤフー株式会社
4304 TensorFlowで趣味の画像収集サーバーを作る 2019年5月号 Keiji ARIYAMA/めがねをかけるんだ / C-LIS CO., LTD.

15:00~15:45

会場 タイトル 発表者
大講義室 AI世代のデジタル教育―これからの時代を生きる子どもたちや私たちに必要なチカラ― 五十嵐悠紀/明治大学総合数理学部
4101 いざ就活!〜議事録係がAndroidエンジニアになるまで〜 林田守加/ちーむパンサル
4103 「5分で作れる!Glideappsではじめる超簡単PWA(プログレッシブ・ウェブ・アプリ)」 kinneko/JAG金沢支部
4103 PWA+TWA 進藤龍之介/日本Androidの会 Web Working Group
4104 OSAWGの近況と注目のRISC-VをFPGAで動かそう 鈴木直康/株式会社芳和システムデザイン 日本Androidの会運営委員
4105 電子立国再生への思いと、今挑戦していること 大橋太郎/株式会社電波新聞社 編集本部/出版部
4201 JavaAndroidを始めた人のためのJava -> Kotlinライブコーディング 中川幸哉/ウォーターセル株式会社
4202 Android Qのセキュリティ/プライバシー概要 木村隼人/日本Androidの会学生部
4304 食農を支えるプラットフォーム「みどりクラウド」と今後の展開 持田宏平/株式会社セラク

16:00~16:45

会場 タイトル 発表者
大講義室 クロスするリアルと仮想ー経済の視点 伊藤洋一/三井トラスト基礎研究所
4101 Androidにおけるパフォーマンスチューニング実践II 南里勇気/株式会社FiNC Technologies
4103 ServiceWorkerの実装 宮本将/日本経済新聞社
4104 空飛ぶクルマ「SkyDrive」の開発について 柳村将平/株式会社SkyDrive
4105 つらいと評判のAndroid BLEをまだまだ使い倒す話 原田賢太/JapanTaxi株式会社
4201 古から最新までのAndroidアンチパターン あんざいゆき/株式会社ウフィカ
4202 Flutter Recap from I/O 2019 + α 神原健一/NTTテクノクロス株式会社
4304 2019年春の技術であのARアプリを再現する 高橋憲一/株式会社カブク

Google I/O 2019 Recap!

Google I/O 2019

  • テーマ
    • Building a more helpful for Google everyone
    • privacy

Building more helpful for Google everyone

  • 全ての人々のためにより役立つGoogle
  • Duplex on Web
  • 検索結果をARで表示
  • Google Assistant
    • 30言語80カ国
    • 音声だけでスマホが操作できちゃう
      • OK Google言わなくていい
      • 個別のアプリの操作もできちゃう

機械学習/AI

  • Googleが提供する機械学習/AI
    • ML Kit
      • Firebase
      • モバイル
    • Google Cloud
      • Auto ML
      • スケーラブルに
    • TensorFlow
      • フレキシブルに
      • 自分でモデルを作る

ML Kit

  • TensorFlow Liteと比べて
    • そのままだとapkサイズ大きくなってしまうがML Kitだと解消できる
    • ML Kitなら一部のユーザだけに提供とかできる
  • ML Kit on device translation
    • オフラインで翻訳
    • 全てデバイス上で完結
  • Object Detection & Tracking
  • AutoML Vision Edge
    • モデルを作ること自体もAIにやらせる
    • 写真をたくさんあげたらかってに学習してくれる
    • 一度おとせばオフラインでも

TensorFlow

Android Q

  • プライバシーに関する機能が多い
  • 表面上は変更少ないけどアクセスのしかたなど変わるので改修必要

Kotlin first

  • Googleが作るサンプルなどはまずKotlinで提供
  • Googleのアプリの多くはKotlinだけで書かれている
  • Top 1000の内44%はKotlin
  • 新しい機能はあJavaはBest Effortだったり提供なかったりする
    • JetCompose

CameraX

  • Jetpackライブラリ
  • Camera2 APIを更に進化
  • Android L以降をサポート
  • ML Kitとの連携しやすい

Android Studio

  • Project Marble
  • 新しい機能追加より既存のものの改善重視

Google Play

  • latingの仕組みが変わる(今年の夏から)
  • 今までは全ての期間のLatingを平均していた
    • 直近の数字を使ったものに変わる

Design

  • Dark Theme
    • Android Qから強制的にダークモードにできる
    • アプリ作る人も対応が推奨
    • ダークモードでは彩度下げるとよい
  • バッテリー
  • Accessibility
  • Material Designも対応

Web & Chrome

  • Chrome 10年, Google 20年, Web 30年
  • Lazy Loadingをブラウザ側で
  • Flutter for Web

Privacy

  • Incognito mode
    • シークレットモードをyoutubeやmapでも
  • Live Caption
    • 動画に自動で字幕を付ける機能
    • 全てon device
  • 機械学習
    • on deviceで
    • Federated Learning
    • AIによるバイアスの発生を防ぐ仕組み

円周率世界記録31.4兆桁への道

  • 岩尾エマはるかさん(Google)

円周率と計算機の歴史

  • なぜ円周率を計算するのか
    • 人間の計算に関する進歩は円周率をどれくらい計算できるか
  • 紀元前で3.1まで分かっていた
  • なぜ円周率計算が難しいか
    • 桁数が多くメモリ要件が厳しい
    • 計算性能そのものは重要でない

今回の記録

  • 31兆1592億6535万....桁計算した
  • クラウドを使ったはじめての記録
  • 121日かかった

クラウドを使う利点

  • 数分でクラスタ作成できる
  • ハードウェア障害が少ない
  • スナップショットでバックアップできる

振り返り

  • 既存プログラムを4ヶ月走らせただけでは?
  • 始める前は誰も
    • ネットワークドライブで31兆桁計算できると思ってなかった
    • 単一VMを4ヶ月ヘビーに使えると思ってなかった
  • あとから見れば簡単に見えるのがクラウドのすごいところ

あんざいゆきPresents!理解が深まるビンゴアプリ feat.Nkzn

ハンズオン

セットアップ

  • packageの値は公開するとき一意にしないといけない
  • androidx.*
    • 3rd partyのライブラリ
    • チェック入れないと古いやつが入っちゃう

UI

  • match_constraint
    • maxまで幅をとる
  • wrap_content
    • 必要としてる最小の幅
  • スパナつきText
    • Preview用の値
    • 値を動的に変えたいとき用
  • 文字列は別ファイルで管理
  • dp
    • 解像度によらず同じ大きさ
  • sp
    • ユーザのフォントサイズの影響を受ける

Java

  • Activityという単位でページを作る
  • AppCompatActivity
  • onCreate
    • 初期化できるタイミングで呼ばれる
  • 画面を回転すると表示内容が消えてしまう
    • Activityを破棄して作り直すから
    • Activityを作り直す時でも値を保持しておきたい
      • => ViewModelを使うとActivityとは別で値を管理できるので保持できる
    • ViewModelはライブラリが管理してくれる
      • ViewModelProviders
  • LiveData
    • observeして値が更新されたら通知できる
    • Activityが作り直されるときにonStartというのが呼ばれる
    • そのタイミングでViewModelのデータを反映するようにする
    • Activityの方がViewModelより寿命が短いからobserverしたままにしておくとメモリリークしてしまう
    • Activityが破棄されるときにobserveが消されるようにしておく必要がある

「5分で作れる!Glideappsではじめる超簡単PWA(プログレッシブ・ウェブ・アプリ)」

  • kinnekoさん(JAG金沢支部)

Glide

  • Googleスプレットシートを使って簡単にPWAが作れる
  • Xamarin開発者が作ったもの
  • 何もしなくてもそれなりに綺麗なUIができる
    • UIの変更はGUIでできる
  • ログイン機能も簡単に設定できる
    • メールアドレス入力させてPINを送るとかも
  • Glideを使ってみて
    • 思ったほど複雑なことはできない
    • パフォーマンスイマイチ
      • PWAのメリットが・・・
    • deep linkできない(対応予定らしい)

PWA+TWA

  • 進藤龍之介さん(日本Androidの会Web Working Group)

TWA

  • Trusted Web Activity
  • PWAをPlayストアにあげられるようになった
  • ただしそんなにサクッとできるわけではない
  • ChromeのタブをActivityとして表示できるようにする
  • セッション、ストレージ、キャッシュなどChromeと共有

なぜわざわざアプリ化?

  • まだアプリでしかできないこともある
    • ウィジェット
    • 機種変更時に再インストールできる
    • マネタイズ
    • PWAとネイティブコンテンツの混在化
    • 同一ホストから複数のPWAが作れる

Digital Asset Links

  • アプリとWeb間の信頼の確保
  • intentの紐づけ

Flutter Recap from I/O 2019 + α

  • 神原健一さん(NTTテクノクロス株式会社)

Flutter

  • iOS/Androidのアプリを1ソースで作れる

Google I/O 2019

  • Flutter for Web
  • Flutterのセッション5つ

Material Design

  • MaterialDesignの問題点
    • どれもそっくりで似たようなものができてしまう
    • material theming発表(I/O 2018)
    • 独自のブランドイメージを出す
  • DarkTheme
    • flutterでも簡単に定義できる
  • Widget
    • もともとのwidgetをoverrideしてカスタマイズできる
  • Accessibility
    • semanticsLabelで読み上げ用の文字列を設定できる
    • 読み上げる順序の指定が可能に

For Multi Platform

  • Adaptive Components
    • いろいろなデバイスサイズでの表示に対応する
    • パターンをグルーピングして考える
  • Interactive/Passive
    • 手元で操作しながら画面を見る
    • 遠くにあって見るだけ
    • バイスによって画面までの距離が違うから文字のサイズも変えていかないといけない
    • バイスの画面サイズはとれるのでそれで出し分ける
  • iOS/Androidのデザイン
    • iOSのデザインはCupertinoというのがある
    • iOSだったら分岐して書くのでコードが複雑
    • Flutterの良さは1ソースでかけることなので、、

Beyond Mobile

  • Flutter for Desktop
    • hoverとかキーボードの操作も実装できる
  • Flutter for Web
    • JSに変換できる

Flutter 1.5

  • Material & Cupertino Widgetのアップデート
  • Flutter for Web
  • Dart2.3

「Google I/O 2019 Recap at LINE」に参加してきました

  • Google I/O 2019 Recap at LINEに参加してきました。

line.connpass.com

engineering.linecorp.com

タイトル 発表者
Google I/O 2019 Overview 藤原 聖
Androidの何か① Hidetsugu Tamaki
Androidの何か② 高島 友里
会場の雰囲気 櫛井 優介
Webの何か① 清水 大輔
Webの何か② YiXin Xu
Securityの何か コキチーズ
Flutterの何か Megumi Hattori
Speechless Live / Fireside Chat with Hiroshi Lockheimer Ken Wakasa

Google I/O 2019 Overview

  • 藤原 聖さん

Google I/O 2019

  • 2008年からで12回目
  • 2016: google assistant/google home
  • 2017: mobile/AI
  • 2018: AI
  • 2019: Building more helpful for Google everyone

Keynote

  • googleで検索した結果をARで見られる
  • google lensで読み上げ
  • AI for everyone
  • プライバシーの強化
  • on device
    • Live Caption
  • Android Q
    • Security/Privacyの強化
  • Devices
    • Nest Hub
    • Pixel 3a

レポート

engineering.linecorp.com

Androidの何か①

  • Hidetsugu Tamakiさん

Kotlin

  • I/O 2017で正式言語
  • Kotlin First
  • Java/C++のサポートも続く

Android Q

Dark Theme

  • なぜ重要?
  • Force Dark
    • Androidが自動でDarkに色を計算してくれる
    • 細かいところまでちゃんとやりたいならCustomで
  • Custom
    • -nightをつけて対応する
    • 画像もDark用を用意するとよい

Gesture Navigation

  • バイスのメーカーによって挙動が違ったのを統一
  • 変更点
    • バックボタンが消える
        - 左から右へのスライドに変わる
      
    • ナビゲーションバーの裏まで描画
    • 3ボタンと2ボタンは設定で切り替え可

JetpackCompose

  • Frameworkの同梱されないUIきっと
    • バージョン関係なしに更新できる
  • 宣言的なUI作成キット
  • Reactive Programming + Kotlin
  • 既存コードと互換性あり
  • まだExperimental

Androidの何か②

  • 高島 友里さん

Android Studio

  • Project Marble
  • System Health
  • Feature Polish
    • Apply Changes
    • Layout Inspector

Webの何か①

  • 清水 大輔さん

Google Assistant

  • Deplex on the web
  • Interactive Canvas
    • NestHubにブラウザで表示
    • 音声のインプットに対して処理をして画面を表示
    • Assistant Canvas API

Google Search

Chrome

  • Perception Toolkit
    • カメラを使って情報を取得する
    • バーコード読み取ってその商品を画面に出す
    • Shape Detection API
    • proj-fugu
      • ネイティブとWebのギャップを埋める

Webの何か②

  • YiXin Xuさん

Site Performance

  • Twitterがどう考えるか
    • responsive
    • mobile first
    • one codebase
  • TwitterLiteで30%高速化
  • パフォーマンス改善の工夫
    • code ssplitting
    • component based design
    • lazy load
    • < 3MB

Lighthouseの 新機能

  • Lightwallet
    • PerfBadgetを設定して測定できる
  • LighthouseCI
    • Coming Soon

Securityの何か

  • コキチーズさん

Incognito mode

  • シークレットモードがyoutubeやmapでも

Android

  • Qからハードウェアアクセラレーションがなくても暗号化される
  • TLS1.3デフォルトでon
  • 弱い暗号鍵はGoogleが強くして署名してくれる
  • scoped storage
    • /sdcardへのアクセス制限
    • 他のアプリが作ったファイルへのアクセス制限
  • 位置情報
    • バックグラウンドで位置情報をとるのは別で権限必要に

Web

  • Googleに報告される脆弱性の半分はWeb
  • Content Security Policy(CSP)
    • 読み込み可能なリソースをホワイトリストで設定
    • nonceをつける
      • ランダムな値
    • strict-dynamic
      • nonceで許可されたscriptを動的に読み込むことを許可
  • Trusted Type
    • DOM Based XSSを防ぐAPI
    • innerHTMLなど使うときに信頼できる型にしてから入れる
  • fetch metadata
    • リソース取得時にmetadataを付与する
  • Cross-Origin-Opener-Policy
    • window.openの挙動を制限

Flutterの何か

Flutter

Flutter App

  • Google I/Oに合わせて公開されたアプリ
    • Flutter Developer Quest
    • KENKEN

Flutter for Web

  • DartはもともとWebでJSの代わりに使おうとしてたもの
  • Flutterエンジンをブラウザように切り替えてWebで動かす

Multiplatform

  • バイスサイズにスクリーンとの距離が違う
    • そういった設計の工夫についてのセッション
  • iOSAndroid
    • 細かい挙動の差異はFlutterが吸収してくれる
    • UIのパーツが異なるものは実装で使い分ける
      • パーツは用意されている

Dart

  • 特徴
    • Productive
    • Fast
    • Multiplatform
  • UI開発に向いている言語
  • ホットリロードできる
  • 宣言的に書ける
  • UI as code
    • 親子関係の階層がわかりやすい

「Inside Frontend」に参加してきました

  • Inside Frontendに参加してきました。

inside-frontend.com

# タイトル 発表者
A-1 TypeScript: Why and how we adopted it at Slack Felix Rieseberg
A-2 Introduction to Lucet Adam Foltzer
A-3 Nuxt.jsで中規模サービスを統合した話 Koichi Sawada
Hajime Sasanuma
B-3 Making less of the web with feature policy Andrew Betts
C-3 デザインエンジニアとフロントエンド Shinichi Kogiso
A-4 formの送信ログから反省する、本当は必要だったvalidationや機能たち Yuta Ide
B-4 Web App Checklist 〜高品質のWebアプリケーションをつくるために〜 Kazunari Hara
Marina Toki
C-4 いちからデザインシステムを作ってみて学んだこと Kengo Haruno
A-5 BFFのDeveloper Experience Yosuke Kurami
B-5 strobo.fm公開収録 Shogo Sensui
Hiroki Tani
C-5 AbemaTVにおけるCSS is too fragile問題に対する解 Shota Kubota
A-6 世界中誰もが使えるサービスを目指して、Web標準で作るガラケーサイト Mariko Kosaka
B-6 Loading Performanceとの向き合い方 Sho Miyamoto
C-6 品質と開発速度を両立させるために捨てたものと守ったもの Tsuyoshi Wada
Soichi Masuda

TypeScript: Why and how we adopted it at Slack

  • Felix Riesebergさん(Slack)

SlackのデスクトップアプリをTSに移行した話

  • Electronを使ってる
  • JSにバグが有るとクラッシュする
  • 構造化されたコードを書かないといけない
  • JSDocでドキュメント化
  • TSのよさ
    • 型がある
    • エディタの補助がきく
  • KOAをつかったけどドキュメントを開くことなく開発できた
    • 型と補完のおかげ
  • ESLintはすばらしいがTSLintはまだそこまでいってないe
    • ESLintがTSサポート始めた
  • JavaScriptしかやったことない人は型を知らない
    • そういう人にとっては型が難しい

Introduction to Lucet

  • Adam Foltzerさん(Fastly)

Lucet

Web Assembly

  • 低レイヤーの言語
  • 高パフォーマンス
  • ブラウザで動く
    • サーバでも動く
  • ブラウザ内でも安全に動く
  • WebAssemblyに変換できる言語
    • Rust, C, C++ TS, go, swift

Terrarium

  • RustやTSでかいたWebAssemblyをアップロードできるWebサイト

Nuxt.jsで中規模サービスを統合した話

  • Koichi Sawadaさん(yahoo)
  • Hajime Sasanumaさん(yahoo)

ebook japan

  • ebook japan + yahooブックストア
  • 開発期間約1年
  • 電子書籍販売サービス

開発体制

  • FE -> yahoo
    • yahooの資産が利用できる
  • API + DB -> ebook
    • ebookの表船機能/データ
  • vue × Nuxt
    • vueはデザイナーが理解しやすい
    • ライブラリアップデートの手間削減
    • 初心者向けに日本語ドキュメント
    • Reactは(当時)ライセンスの問題
  • node + express

風土の違い

AtomicDesignへの挑戦

  • なぜ?
    • 新規回月なので途中導入より入れやすい
    • デザイン変更が多発が予想できたから
    • UIの一貫性を保ちたかったから
  • 苦労したこと
    • エンジニアとデザイナーの成果物が違う
    • スクラムと相性悪かった
      • 通化していく作業の優先度が低く改善が疎かに

実装上の苦労したこと

  • apiから返ってくるデータが大きい
    • 使わない情報もたくさん入って返ってくる
    • 開発機関制約の中で大は小をかねた形
    • mixinsを使ってget処理をまとめた

リリース後の改善

体制

  • 動くものを見せるとこに集中しすぎた
    • エラー処理やシステム面での改善が放置気味
  • 経験豊富なエンジニアがいない
    • フロントエンドのサポートチーム追加
    • PRのレビューや実装の相談をうける

システム(パフォーマンス改善)

  • api呼び出しフローの改善
    • Promise.allできるものはまとめる
    • 描画語でいいものは描画後に取得
  • レスポンスサイズ削減
    • apiから取得したデータを削ってからclientに返す
  • JSファイル改善

いちからデザインシステムを作ってみて学んだこと

  • Kengo Harunoさん(yahoo)

デザインシステムを作るきっかけ

  • 多くのサービス多くの関係者
    • 20サービス関係者1000人(デザイナー/エンジニア/ビジネス/業務委託)
  • デザインがサービスでばらばら
    • 一貫性確保
    • デザイン開発効率化
  • 何を作る?

デザインシステム開発(デザイン編)

デザインガイドラインの策定

  • デザインの定義
  • 抽象的なスタイル定義
  • 具体的なルール

コンポーネントのリストアップ

  • 名前をつけていく(時間かかった)
  • 汎用的過ぎて名前むずい
  • 業務固有すぎてしっくりこない
  • 見た目にとらわれずどんな役割をもっているかを考えて選ぶ
  • 全員が納得するものにした(納得しない=適切でない)

スタイルガイドの制作

  • sketchでデザイン作成
    • あらゆるケースや状態を考慮しないといけないので大変だった
    • 種類×サイズ×状態分作る
  • デザインルールをドキュメント化
    • デザインルールを文字化するの難しい
    • 不明瞭な部分が残らないように
  • レビューは全員(4人)がOK出すまでやる
    • 共通認識を担保

デザインシステム開発(フロントエンド編)

コンポーネントライブラリの提供方法

  • 最初はhtml/css/jsでの提供
  • コーディング設計
    • BEM記法
  • Fractal
    • スタイルガイドジェネレーター
    • markdownで書ける
    • Handlebars + yaml
    • 静的サイトとして出力できる

方向転換

  • Reactを使ったプロジェクトが多い
  • Reactコンポーネントとして提供してほしいという要望
  • html/cssでの提供ではは活用しづらい

Reactでコンポーネントライブラリ

  • Storybookベースのものに変更
  • CSS Modules with Sass
  • TS
    • 有識者はいなかった
    • 性的チェックでエラー気づきやすい
    • エディタ補完便利
    • 型でデザインをより厳格化できる
  • スタイルガイドをGatsbyで静的ページとして作った

振り返って

  • デザインから実装までこなすのはとても大変だった
  • デザインシステムは巨大なプロダクト
  • 使う人とのコミュニケーションが大事

BFFのDeveloper Experience

  • Yosuke Kuramiさん(FOLIO)

BFF

  • Backends for Frontends
  • UX視点
    • パフォーマンス
    • UIに必要十分なAPI
    • 統一したUI
  • マイクロサービス視点
    • ドメインに注力
    • シンプルで再利用性の高いAPPI
    • サービスこどの技術得意製
  • これらをつなぐためにBFF

FOLIOのBFFの役割

  • API Aggregation
    • koa
  • SSR
    • react + redux

BFFのいいところ

  • バックエンドはドメインの開発に注力
  • フロントエンドはUIの要求をAPI
  • SSRで高速化
  • => ただしフロントの仕事は増える

BFFを効率的に開発するために

バックエンドを待たない

  • IDL driven development
  • Interface Definition Language
  • FOLIOではThrift
  • IDLからコードを生成

サービスの仮データ

  • 開発中のAPIはモックに差し替えたい
  • 開発済みならテスト環境につなぎたい
  • BFFのコードはどちらにつないでも変わらないようにしたい
  • Direct Proxy

Developer向けの機能

  • BFFはフロントエンドがいじるので開発者用のAPI作ってUIを作ることもできる
  • stateを変える画面作って画面のバリエーションを試せたり

世界中誰もが使えるサービスを目指して、Web標準で作るガラケーサイト

proxx.app

今の時代のガラケー

  • スマートフィーチャーフォンのこと
  • 機能
    • KaiOS
    • モダンブラウザ搭載
  • アフリカ、インド、インネシアではやってる
    • 安いから
  • 画面小さい、タッチスクリーンない、十字キー
  • キャリアがアプリを握っているからWebで提供するようにした方がいい

ゲームを作ってみる

  • Webの強みはドキュメント
    • その正反対をやってみる
  • ユーザのインプットが多いもの
  • あらゆるデバイスをサボーとするようなもの
  • => マインスイーパー的なもの

どうやって開発したか

  • チームスペック
    • フロントエンドエンジニア3人
    • kaiOS初めて
    • WebGL初めて
  • どこまでやるか
    • 1コードベースで作る
    • a11y対応も
    • パフォーマンス第一
  • コード
    • ゲームロジック
    • Stateサービス
    • UIサービス
    • 描画処理
    • 前者2つはWebWorkerで動かす
  • FW
    • WebWorkerとのやりとりはComlink
    • preact

github

github.com