【勉強会メモ】PHP Conference Kansai 2018
- 日時：7月 14日 (土曜日) 10:00～18:00
- 場所：グランフロント大阪 北館 タワーC 8階
毎年恒例のPHPカンファレンスですが、今回初参加です。PHPは仕事では使ったことがないしあまり詳しくないのですが、今回は弊社のメンバーが登壇するとのことで午後から参加してきました。
チャットディーラーの高速開発を支えるLaravel
坂田晃平さん
10年以上PHPでノンフレームワークで開発してきたチームがLaravelで高速開発
言語・フレームワーク
- PHP 7.1
- Laravel 5.5
- Node.js,Express,Socket.IO
開発チーム構成
- バックエンド（PHP）3名
- チャット（Node.js）3名
- 設計〜リリースまで半年（開発は実質2ヶ月）
新サービス立ち上げの課題
- 短納期
- レガシーからの脱却
フレームワークを使ってメンテナンス性向上
長期サポートされる条件を検討
- 使用者数が多く人気がある
- 活発なコミュニティ
- LTSを宣言している
Laravel
機能性
フレームワーク選定まとめ
- 長期サポート
- 機能性…フルスタック
Laravelで良かったこと
- オールインワンでスピード開発に向いていた
- 標準ライブラリが使いやすい
Laravelで困ったこと
Q: 実装2ヶ月Laravelの勉強法は？
- 事前の要件定義や設計の期間2ヶ月で勉強
- 本や学習サイト
Q: BootstrapやjQueryとVue.jsはどのようなところ？
- フロントの画面制御の処理はVue.js
- jQueryはVueでの実装方法がわからなかったり実装が簡単、ライブラリがある場合などに使用
- それぞれ使いやすいところで使った
Q: LaravelでWebSocketまわりは触っているのか？
- Laravelから直接は触っていない
- バックエンドサーバとチャットのサーバは別
- Laravelはスタッフ側の管理機能
PHPアプリケーションのコンテナ化入門
藤原吉規さん
コンテナが注目されている背景
コンテナの技術
コンテナとは
- リソース隔離されたプロセス
コンテナの特徴とメリット
- ゲストOSがリソースを持っていない
- リソース効率…オーバーヘッドが少ない
- スピード…起動が早い
- 柔軟性
- 可搬性
Dockerの登場
Dockerキーとなるコンポーネント
- Dockerコンテナ…プロせスとして起動するアプリの実行環境
- Dockerイメージ…OSやアプリを含むコンテナのテンプレート
- Dockerレジストリ…Dockerイメージを格納するレジストリ
- Dockerfile…OSのイメージからアプリまでが動作する環境がコードとして記述されたファイル
- Dockerクライアント…Docokerを操作
Docker環境の動作イメージ
- ライブデモ
- ApachとPHP 7.2を入れたDockerfileをgit cloneしてきて修正→コミットしてpush
- コードパイプラインでビルド、ステージングで確認して承認し、本番反映
（詳細は省略）
※参考
https://github.com/twingo-b/ecs-demo-php-simple-app https://aws.amazon.com/jp/cloudformation/aws-cloudformation-templates/?nc1=h_ls
コンテナ活用のポイント
- アプリ開発に考え方の変革が必要
- 12 Factor Apps (https://12factor.net/ja/)
- 複雑さを避けてシンプルに
- コンテナ内にタスク、ログ、設定、データを全部入り→アンチパターン
- 運用を考慮した仕組みが必要
- 複数ホストでどうコンテナを管理するか
- どのホスト上でコンテナを可動させるべきか？
AWSコンテナ関連サービス
- ECS,EKS…コンテナ管理
- ECR…マネージド型Dockerコンテナレジストリ
- Fargate…EC2インスタンスの管理不要。計算リソースの使い方を根本的に変える
- 先月から東京リージョンも利用可能になった
フロントエンドエンジニアが伝えたい最近の事情
大原壯太さん
最近のフロントエンド
- 登場人物が豊富でツライ世界
- 変数の巻き上げ
- thisの指すものが異なる
- 型変換の問題
9 + '1'と9 - '1'など
罠を回避する環境が整いつつある
- ES2015のletかconstを使う
- アロー関数はthisの対象が変更されない
- FlowType or TypeScriptで型を導入する
- コールバック地獄→PromiseやAsync/Await
- class構文
- Template Literalなどなど
JavaScriptも進化してきている⇒SPA,SSR,BFF
SPA(Single Page Applicatio)
Routingはフロント側で行って必要な情報をAPIで取得
- 高速なページ遷移
- UX向上
- 開発・運用コストが低い
マイナス
SSR(Server Side Rendering)
- 初回アクセスのときだけServer側でRenderingする
- 初回アクセス以降はSPAとしてクライアント側でレンダリング
↓解消
BFF(Backend for Frontends)
なぜBFFが必要なのか
- 従来
- HTMLテンプレート
- 更新はform
- SPA
- ページごとにAjax
⇒1ページ表示するのに何回もAPIを投げるのは無駄が多い
フロントエンドエンジニアとうまく協業する
Swagger
- YAML or JSON
- REST APIの設計、ドキュメント化、テスト
- Swagger Editor
HerokuでPHPアプリ開発速度を倍にする
岡本充洋さん
HerokuはSalesforceファミリーのサービス
PHPアプリの開発の速度を上げたい
開発スピードを上げるには？
⇒Herokuは開発者のためのPaaS
Herokuの実行環境
- Dyno…アプリを動かす
- Data…データベース
- Elements…追加機能
Heroku で環境を構築＆デプロイするには
サポートしているPHP環境
- 5.6系、7.x系
- Apache 2.4もしくは Nginx 1.8
- 各種Extensionにも対応
開発を早めるには
- Heroku CI…GitHubにあるHerokuアプリを自動テスト
- Heroku Pipelines…複数のHerokuアプリを管理
後藤さん
（デモは省略）
GAE に PHPアプリを継続的デプロイする
岸田健一郎さん
サンプルコード
- PHP/Java/Go/Python/Node.js/C#/Ruby
- Standard Edition(VM)とFlex Edition(Container)
- Standardは28インスタンス時間/日まで無料
- PHP Standardは5.5, 7.2がα
- gVisorがホットな話題
- phpusers-ja.slack.comの#gae
※参考
継続的デプロイ
継続的結合
Container Builder
- 1日あたり120分まで無料
- 120分以上は$0.0034/分
- フルマネージドサービス
- ビルドトリガーでCI/CDを自動化
- Dockerコンテナを実行
- SDKを使うとローカルビルドもできる
Container Registry
- プライベートDockerレポイトリ
- 高速なpush/pull
- 様々なCI/CDツールとの連携も可能
- Docker V2 Registry API対応
- ストレージと下りの通信量が課金対象
説明＆デモ
- GAEバージョン管理
- 1つのプロジェクトにフロントとバックエンドを共存可能
- 新規プロジェクトの作成と設定
- ビルド&デプロイ用イメージの作成 ビルドしてイメージをpush
- ビルドトリガーの作成
- GitHubなどにPushするとビルド＆デプロイ
- Dockerイメージを作ってデプロイもできる
※参考資料
ここからLT
ネコとワタシとPHP in 沖縄
ねこにしさん
一人でおうちで作業していてさみしい
そんなあなたに ネコ駆動開発
沖縄で働くメリット
- 他県に比べて優位性
- インターネット回線がとおってる
- たまにフリーのWifiが飛んでる
- コンビニがある
- 道に自販機がある
- 海が近い
勉強会は結構たくさんある
- PyData
- Startup
- ハッカーズチャンプルなどなど
コワーキングスペースもそこそこある
- イングリッシュガーデン
- 750円／日でフリードリンク
沖縄でネコ駆動開発いいですよ！
誰かフィクスチャ書いてくれるんなら俺もテスト書くわ
たなかひさてるさん
- ORMやFWとは独立して冗長な記述を減らしサービスの成長を阻害しないフィクスチャローダを作った話
- DBのテストのデモ
（高速な発表だったのでメモの詳細は追いつかず…）
※参考
mixed型なんてけしからんと社内チャットでつぶやいたら炎上した
@kawanamiyuu さん
PHP: rfc:mixed-typehint ⇒けしからん
- 結局なにも型を指定しないのと一緒では？
- PHP7でスカラー型（型に対して安全になった）⇒逆光している？
↓
PHPチャットルームが炎上
肯定的意見
- mixedを推奨したわけではない
- mixedだから気をつけてという明示
- 型を指定するハードルが下がって良い
- レガシーコードでどうしても型を絞れないときにマーキング
⇒熱いものを感じる
まとめ
- mixedはけしからん
- 型をちゃんと書きたい
- レガシーとも向き合う必要がある
- mixed型1つでいろいろな意見がある
⇒みんな実はPHPが好き
テストを書いたことがないエンジニアがテストを書けるようになるまでやったこと
テストを書けるいろいろなステージがある
そもそもなぜテストを書くのか
- ちゃんとテストを書いたという自信とストレス軽減
ステージ1：自分のコードにテストを書く
- 最初にきれいに書こうとしない
- 迷ったらテストを書く
⇒難しくないことがわかる
ステージ2：テスト観点の網羅を意識する
- 十分なテストを書こう
- テストが仕様書になる
ステージ3：既存コードにテストを書く
- 既存コードの動作を保証する
- バグなのか仕様なのか⇒現在の動作を保証する
- テストしやすいコードに改善⇒仕組みを使う
ステージ4：テスト駆動開発を実践してみる
- テスト駆動開発を学習する⇒実践
ステージ5：XXX
- まだまだ先はある
- デザインパターン
- 抽象化
私のDDD学習ノート「境界の設計は大事」
@kuma_nana さん
www.slideshare.net
- ドメイン
- 解決しようとしている問題の領域
境界づけられたコンテキスト
事例
- 背景：自社サービスで外部のWebAPIログインを利用
- ログインAPIのレスポンス結果をバリデーション
レガシーな例
- コントローラークラスにべた書き
- 複数のドメインの知識があってもつれている
STEP1：サブドメインの抽出
STEP2：ドメインの設計
まとめ
その他のセッションの参考情報
【勉強会メモ】〜クラスメソッドのモバイル開発を知る!〜全5回 #1 Android開発編
- 日時：2018/07/13(金) 19:00 〜 21:30
- 場所：クラスメソッド大阪オフィス
Androidエンジニアってなにするの？
橋本 早樹さん
クラスメソッドってなにやってるの？ （モバイルアプリ事例）
アプリの制作フローとエンジニアに求められること
- プロジェクトリーダー
- デザインメンバー
- サーバメンバー
- アプリメンバー
コミュニケーションツール
- Backlog
- Slack
- chatwork
- Google ハングアウト
ヒアリング（要件定義）
- PLがお客様にヒアリング
要件定義フローのメンバーのふるまい
技術調査
- 要求が実現できるか
- 他ベンダーの仕様確認
- モバイルの機能調査
- サービスの仕様調査
設計
サーバ設計
アプリ設計
- 画面設計
- 通信処理
- 認証処理
求められること
- モバイル機能の把握
- APIの理解
- 仕様調整
実装
- Travis
- CircleCI
- bitrise
- GIthub
- Zenhub
- zube
求められること
- プログラミング
- デバッグ
- 原因調査・課題解決
- Logcat
- Profiler
- apk Analyzer
原因調査に役立つデバッグツール
結合テスト→リリース→打ち上げ
からの
運用スタート
求められるスキル
- サービス仕様の理解
- 顧客の業務内容の理解
運用する人のタスクを理解する
- プッシュ通知を送りたい
- ユーザーの行動を知りたい
- アプリが落ちた時の問い合わせに対応したい
運用ツール
- Firebase
- fabric
最近の傾向
- 全体プッシュではなく、セグメントを分けたプッシュ通知をしたい
- セグメントを分けたユーザーの行動フローを見たい
- コンバージョンに関与したイベントを取りたい
モバイル実装だけでなくビジネスやプロダクトに関するスキルも求められてくる
クラスメソッド（モバイルアプリサービス部）ってどうなの？
良い点
- フレックス勤務
- リモートワーク
- 新しいものをどんどん取り入れる
- 受託案件が多い
欠点
- 教育フローがない
- 発展途上
- 受託案件が多い
KotlinとAndroid Architecture Componentsを採用してみた
工藤 星命さん
採用したアーキテクチャ
アーキテクチャやライブラリ群
- Kotlin
- MVVM
- ライブラリ
- AAC
- RxJava(RxKotlin)
- DI(koin)
- DataBinding
MVVM
- Google samplesの
todo-mvvm-live-lotlinやDroidKaigiを参考に設計
実装例
ViewModel
- ObservableField
- LiveData
ここまでの感想
- ViewModelが保持するプロパティ（値やイベント）とView感の通信の実現に必要なコードがほぼ無い（ライフサイクルも考慮される）
- ViewModelがViewの実装と密接なのでViewModelの単体テストが難しい
ViewModelでライフサイクルイベントを監視
- ViewModelで監視したいライフサイクルをアノテーションで追加
Koinフレームワーク
- 記述がシンプル
- AACのみでViewModelを作るときの煩雑さが軽減される
- ViewModelの共有も簡単
東京、大阪、福岡、離れていても大丈夫なリモートワーク術
西田 将幸さん
リモートワークの流れ
リモートワークのいいところ
- 通勤時間削減
- 満員電車から逃げられます
- 仕事する上でもっとも無駄な時間を削れます
- 災害時で交通機関が麻痺しても働ける
- 家族
- 家族とご飯が食べれます
- 子供を幼稚園に送っていけます
- 遠くの人と働ける
- 遠くの拠点の優秀なエンジニアと働ける
- 地方からでも東京とかのイケてる会社で働ける
リモートワークの悪いところ
- 圧倒的孤独
- 小拠点に集まって自分だけがリモートの場合に顕著
- 会議中話し始めるタイミングがつかみにくい
- 対策
- 会議室のハングアウトではなく全員PCのHOに入室
- 朝会後に雑談できる時間を30符ほど作る
- リモートどうですか？と声をかけてもらう
- 物理的距離
- 1つの拠点にタスクボードなどが置かれてリモートで確認するのが大変
- 対策
- ツールはすべてオンライン
- Cacco等で図を共有しながら説明
- 紙に書いたボードをカメラで写して共有
- 情報格差
- 1つの拠点にチームの多くがいてリモートが少数の場合に発生
- 対策
- 朝会中に「もや」を話す時間を容易
- チャットに話したいことを書いておく
- チャットではなくIssueで議論（あとで流れがわかる）
- コミュニケーションコスト
- 普通にしゃべるのより3倍はきつく伝わる
- チャットだと思ったより伝わらない
- 突然知ってる体で話される
- 対策
- 語尾に感嘆符
- チャットで描く時は結論から書き、必要以上に説明する
- コンポーネントが別れていても横断して担当できるように1つの大きな機能単位でタスクを割り振って非同期で仕事ができるようにした
まとめ
- オンラインが前提のツールが揃ってきて不便がなくなりつつある
- 必要なのは善良な市民（お互いの信頼）、小さなことでも改善していく気持ち
【勉強会メモ】関西Node学園 梅田キャンパス 2時限目
- 日時：2018/07/05(木) 19:00 〜 21:30
- 場所：さくらインターネット株式会社 大阪本社
Swagger - OAS 3.0
@_mikakane さん
APIドキュメントの生成
OAS a.k.a Swagger
OpenAPI 3.0
Swaggerの運用
- Yamlとかでエントリポイントごとに書いてマージ
- バックエンドで書くなら最終的にJSONさえホストしてもらえればOK
- 共通化・自動化できるところは頑張る
- Componentsを利用してスキーマ定義は再利用可能
API仕様書を作る
- swagger-ui-distで簡単にSwagger仕様書を配信できる
- ドキュメントを作る→ドキュメントを使う
Swaggerの諸問題
- 読み物としてのドキュメントは陳腐化する
- DB定義書と同じ問題
- 読むドキュメントから使うドキュメントへ
- 実装との乖離をすばやく気づけるように
Swagger-client
Swagger-ui
まとめ
- フロント開発にAPIの管理はとても重要
- Swaggerでより効率な開発サイクルを
AWS Lambda上のnodejsの単体テストした
@papettoTV さん
案件概要
- AWSを使ったIoTシステム構築
- センサーデータが常時アップロード
- データ保存加工
- 保存データの検索
テスト方針
- カバレージ目標
- 品質要件によってかわる
- 今回は80%
テスト対象アプリ
- Lambda上で動作
- Node.js 6.10（開発当時）
- Promise
- 他のLambdaやS3,DymnamoDBなどにリクエストを投げる
主なファイル構成
index.js…Lambda関数上の実行対象test/index.test.js…テスト用ファイル
Tips
- exportsで関数定義
- 定義する関数はexports.xxの形で宣言
- ×
const functionA = function(){} - ○
exports.functionA = functionA
- ×
- 外部（テスト用ファイル）から呼び出せる
- 定義する関数はexports.xxの形で宣言
- exit0
nyc --reporter=html --reporter=text mocha || exit0- 多分バットノウハウ
- callback内で評価
return callback();- lambda側で期待する終了処理ではない
- timeout error
nyc --reporter=html --timeout 5000- →解決せず
レポーティング
npm run test-report- 単体テスト結果：unittest-reporthtml
スプレッド構文いろいろ
@mochiya98 さん
発表資料： スプレッド構文いろいろ - Google スライド
スプレッド構文
実際にどういうところで使うのか
r=[...a]
- 配列の浅いコピーを作る
Array.prototype.slice.call(a)と似た結果が得られる- 厳密にはIteratableでなければいけない
- 内部の処理が違う
for(x of hoge)みたいなのが...hoge
r=[...a, ...b]
a.concat(b)と似た効果
r={...a, ...b}
- aとbを統合する（同一プロパティはbで上書き）
- 浅いコピーを作りながらプロパティを追加／上書きする
r=[..."msg"]
"String".split("")と同じではない
r=[...undefined], r=[...null]
- エラーになる
r={...undefined}, r={...njll}
- エラーにならない
※参考
私の OSS 道について
- 2010〜日本に
- OSSの開発にたずさわる
OSSしない理由
- 恥ずかしさの恐れ
- 時間の問題
- 英語
- 非友好的なコミュニティ
- 財政的に防御できない
OSSする理由
- 勉強する
- 社長が言ったから
- OSSせず悪い経験（社内で作っているコードはすれられた）*
- 会社をやめれるように*
- 破産の場合に継続する方法
- より大きな利益のために*
- 他人のエンパワーメント
- 感謝の気持ち
- セフルプロモーション
- コードを将来にも使えるように*
- OSSのライブラリのクォリティが悪いから
- OSSしない理由がないから
- アイデアのフィードバックがほしいから
（*個人的に重要なもの）
おすすめ記事
Node.jsとOSS
- Node.jsはLINUX Foundationの1つのプロジェクト
Node.js向けUNIX哲学の3つのこと
- プログラムが1つのことをうまくやるように
- 効率よりも移植しやすさを選べ
- 効率と移植性を高めるためのシェルスクリプトを利用せよ
3つのプロジェクト方法
- Monolith/Cathedral-style:stdlib,jQuery
- Bazaar-style:Node.js
- Cathedral-core,Bazzaar-community:reactなど
私のOSS道について
- 小モジュールが好き
- できれば生JS必要であればTypeScript
- モジュールができるならすぐ公開
好きなツールより、すでにあるツールが良い
コミュニケーションを簡単にする
- Code of Conduct
- Issue Templates
- PRなレビュー必要
私のOSS心
- Issue + PRはお客さんではありません。興味があるなら直します
- ユーザーにコントリビューターになってもらうように頑張っています
- つまらないときにビジネスを考えています
- いつでも改善できます
- 進捗をコミュニティーとシェアします
まとめ
【勉強会メモ】Vue.js / Nuxt.js Meetup Osaka #0
- 日時：2018/06/30(土) 14:00 〜 17:00
- 場所：株式会社アイル
Vue.jsの勉強会が大阪で初開催。定員の倍以上の申し込みがあったようで、関心の高さが伺えます。私も申し込んだときにはすでに補欠で数日前にギリギリ繰り上がりました。入門的な話からアーキテクチャの話まで幅広いテーマで内容の濃い勉強会でした。
デザイナーの私が Vue.js を触ってみた
Yasui Risaさん
デザイナーがVueを知るメリット
- 仕組みを考慮したデザインができる
- 工数削減に強力できる
- 仕組みを活かしたデザインが作れる
CodePenを使ってVue.jsを触ってみた
なぜCodePen？
- Vueに必要な小難しい環境構築なしでとりあえずさわることができる
公式サイトベースで学習
買い物リストのサンプルデモ
- v-forを使う
- 配列のデータを使う
- v-model
- フォームに入力された値を取る
- v-on:click
- クリックイベントを取得して処理を呼び出す
まとめ
- CodePenを使えばハードルの高い環境構築なしでVueを触ることができる
- コードがシンプルでわかりやすい
- まずは簡単なことからはじめてみると楽しく学ぶことができる
AVAでのE2Eテストとpuppeteer
豊川 泰弘さん
AVAとは
- JavaScriptのテストFW
- Pure JavascriptのユニットテストとかE2Eテストで使っている
- 非同期のテストができる
- mochaと比べるとassertの書き方も少し見やすく書きやすくなっている
事前準備
npm installする
AVAのテストコードの例
test('divide function test', async t => {
t.is(divide(4, 2, 0.5)
})
package.json
"test": "ava --verbose"
"ava": {
"require": [
"esm"
]
}
そもそもフロントエンド側のテストコードって必要？
- 品質を担保する一つの手段であるので時間があれば書いたほうが良さそう
- Pure javascriptで書かれているロジック部分は「正しく動いているよ」は保証したほうが良さそう
- CIで定期的にテストを実行し品質を担保しやすくなる
- GitLab CIを使ってGitコマンドでpushされた時に動くようにしている
それ以外でこんなところでテストコードを使ってました
- コードレビュー時にテストコードを書く
- メソッド共通化の検討時にテストコードを書く
AVAでのE2Eテスト
- NUXTの公式ページにあるE2Eテスト内容を試してみた
E2Eのテストコード
test.before でnuxtを起動
AVAでのE2Eテスト
- テストが実行されるごとに
npm run generateと同じ内容のものが走ってからテストが実行される - ちょっとしたテストでも時間がかかりしんどい
- localStorageが定義されていないための参照エラーが出続けてテストが一向に進まなかった
Puppeteer
- Chrome Developer Protocolを使ってブラウザ操作が行えるライブラリ
npm installでインストール- スクレイピングツールとしても使える
- スナップショットとかも取れたりできるので便利
- Ver.1.0が2018年1月に出ている
- Googleが提供
- CentOSとかでも利用が可能
- 資料が多そう？
ちょっとした動作確認用としてTry Puppeteerがある
Puppeteerを使わない選択に
- ライブラリのインストールに時間がかかりそう
- 必要なライブラリがインストールできなくなったら本当にGitlab CIで動くのか
- Nuxt公式のほうが安心
まとめ
- AVAでのテストコードを書くのも良さそう
- E2Eテストはそれなりに苦労した
- ローカルだけでのE2Eテストの実施だけであればPuupeteerのライブラリを使ってテストとするのも良さそう
※補足：会場のアンケート
- 普段フロントエンドのテスト書いている人は意外と少ない
- mocha派が多い
- AVA派は少ない
Clean Architecture with Vue
andoshin11さん
Clean Archtectureの概要
クリーンアーキテクチャ(The Clean Architecture翻訳) | blog.tai2.net
- オニオン型のレイヤードアーキテクチャ
- 各レイヤーの名前は重要ではない
- 依存性の矢印が単方向であることが大切
- 内側のレイヤーは外の世界を知らない
アプリケーション実装パターン
Vuexを利用したFluxパターンの課題
- Actionsにアプリケーションロジックが集約しがち
- ドメインモデルをどこに書くか
- Storeの構造がViewを意識したものになりがち
- Gettersを全てのViewに用意するのは厳しい
- Mutationにロジックを書く人が後を絶たない
- 本当にTestableか
→スケールしなさそう
今回の設計方針
- 厳密なレイヤー分割
- 関心ごとの分離（DDDライク）
- 単方向データフロー（Fluxライク）
- 依存性も単方向でテスタブル
- 外部IFに依存しない
→Fluxの良いところを活かしつつDDDの考えも取り込んでスケーラビリティの高いアプリケーションにしたい
大事なのはレイヤーを増やすことではなくでレイヤーの依存性の方向性
Vue.js / Nuxt.js
後藤知宏さん
Vue.js = Progressive Framework
Vue.js = data binding tool
- データの内容がViewと結びつく
- シンプルなアプリケーションから大規模なアプリケーションまで使える
- スケールする知識の選択肢になる
Vue.js=custom component loder
- Webpackなしでもいける
- .vueファイルでWebpackありだとよりスムーズな開発
- Backendアプリケーションなどの大規模なものでもシンプルに管理できる
- タグの部分はバックエンドに任せる
Vue公式でコードを書きながら動作を確認してみると良い
Vue.js with VueRouter
SPA化する場合などにRouterを導入できる
Vue.js with Nuxt.js
- Vue.js
- VueRouter
- Vuex
Nuxt.jsはVue.jsで作るときに必要となる3つの構成をある程度まとめたFW
ここからLT
Vue.jsでスタイルを動的に変更する3つの方法
qwerty8tさん
- クラスのバインディング
class="{{ className }}"
- スタイルのバインディング- インライン
style="{ color: activeColor}"
- スタイルのバインディング- オブジェクト
style="styleObject"
Stringで"や'を多用する書き方はキモい
- クラスのバインディングを使いましょう
※参考
Vue.jsのmethodsとcomputed
ショウノシオリさん
Vue.jsのmethodsとcomputedって違うの？
- Vue.jsのscript要素
- 読み込むタイミングが違う
書き方はほぼ同じだけど何が違う？
methods- メソッド
- メソッドなのでhtml上では
()が必要 - 毎回呼び出す
- キャッシュされない
computed（算出プロパティ）- プロパティ
- html上では
()なし getter/setterが定義可能- デフォルトはgetterのみ
- 値が変わらなければ呼び出されない
- キャッシュされる
JavaScriptのプロパティには2種類ある
- 値が格納されるデータプロパティ
- アクセサプロパティ
computedはこれ- 値は持たず
getter/setterと呼ばfれる関数を設定する
Computed Setter
- getはデフォルト
- setを書くとsetterが使える
methods と computed
- キャッシュされることが一番のポイント
どういうふうに使い分ける
- 基本は
computedを使い、どうしても必要なときはmethods computedは依存関係に基づいてキャッシュされる- dataプロパティがあった時に常にチェックして再び処理が走る
- 必要なときだけ処理が走る
methodsはdataプロパティが変わっていても変わらなくても毎回処理が走る- Dataを使って日時などを取得すると
conputedだとキャッシュされてしまう
その他注意
methodとcomputedで同じ名前を使わない- 外部からの呼び出し時もmethodを使うべき
まとめ
- 大きな違いはキャッシュの有無
- 毎回呼び出す必要がないなら
computedを使う - 同じ名前は使わない
※参考
【勉強会メモ】Mobile Act OSAKA #6
- 日時：2018/06/29(金) 18:45 〜 21:30
- 場所：Osaka Innovation Hub (大阪イノベーションハブ)
モバイルをテーマとして様々な情報が得られる数少ない勉強会です。懇親会も含めて毎回とても勉強させてもらっています。
Takanori Hirobe「SwiftのStringから理解するCollectionプロトコル」
※少し遅れたため途中からのメモです。
RandomAccessCollection
StringはUnicodeに忠実
- Emojiは4つでも3つでもカウント1
- バックスペースを何回押したら消せるかに依存
絵文字だけではない
"\n".countは 1"\r\n".countは 1
全部数えないと文字列がカウントできない
Stringのcount計算量はO(N)
oishi「DEP(Device Enrollment Program)について 〜電源ONで全自動設定〜」
- 400台に同じWiFi設定したい
- 1,000台に同じアプリをインストールしたい
- 自社開発アプリ以外は触らせたくない
- 標準アプリを一部消したい
- もう自動で全部やってほしい
WiFi→Activate→Setting
- Single App Mode
- Safari ONLY
構成要素
DEPの流れ
- 法人からVARにDEP端末を発注
- VARがAppleにDEP端末に発注
- Appleはserial noをDEPのデータベースに登録
- 端末の初期起動時にDEPサーバに問い合わせ
- DEO端末の場合、MDMにアクセスして設定集を取ってくる
- 事前に設定ができる
ogwssk「新卒採用にVRアプリとゴーグルを内製してみたら色々と新鮮だった話」
2018年4月に「0次選考」というモバイル向けVRアプリをリリース
2019年度新卒採用「0次選考」 VRアプリをリリースしました | ニュース | フェンリル
VRアプリの中で3つの謎を解くともらえる情報を使って特設サイトの謎を解くと選考が少し有利になる「あるもの」がもらえる
開発の背景
- 新卒採用者のエントリー数の減少
- 採用コストの増加。技術者の採用ハードルが上がっている
- 採用ターゲットと実際に集客できている学生がずれすぎている
VRを通して会社の世界観を体験してもらおう
- ゴーグルを含め内製「デザインと技術のフェンリル」を体験してもらう
リリース後の効果
- 様々なメディアに紹介された
- 一括エントリーで216%増
大変だったところ
- VRならではのユーザーインターフェース扱いの違い
- 3Dデザイナーの確保
- QAさんがVR酔いと戦いながらデバッグ
usami-k「RxSwift 再入門」
RxSwifttとは
- 非同期のイベントを受け取るための枠組み
- UIイベントの受け取り
- Web APIレスポンス受け取り
- データの変化の監視
コード例
- UIButton
- UITextFiled
- Notification
- URLSession
イベント処理の流れ
- Observable = イベントが流れて売るSequence
- ObservableをSubscribeするとイベントを受け取れる
- disposeで破棄
補足：Observableに流れてくるもの
- enumで定義
- .next
- .error
- .completed
データバインディング
例えば
- モデルの値の変化をUIに伝えたい
- UIの値の変化をモデルに伝えたい
- そのための手段としてRxSwiftが使える
データバインディングのための手段
- BehaviorRelay/PublishRelay
- Observableの一種
- nextがけが流れる、終了しない
Relayの使い方：accept
- acceptでRelayに.nextイベントを送ることができる
Relayの使い方：bind
- subscribeの代わりにbindが使える
BehaviorRelay/PublishRelay両者の違い
- 初期値を持つ／持たない
- valueで現在値が取得できる／できない
- subscribeした時に現在値が流れる／流れない
バインディングは単方向
- bindは実はsubscribeであることを知るとわかりやすい
双方向だとデータの流れのIn/Outが区別しづらい
- アプリ設計としてデータの流れる方向を意識できることは大事
RxSwiftを使ううえの注意点
- なんでもできすぎる
- 強力なツールのため無節操に使うとこんがらがる
- アプリ設計を考えておく
- アプリ設計に対して、実装を楽にしてくれるツール
- ライブラリ自体の規模が大きい
- 様々なクラスがあって把握しづらい
- うまく付き合えば便利
tatsuhama「インドの低速なネットワーク環境の攻略法」
インドの低速なネットワーク環境の攻略法 from 健一 辰濱
www.slideshare.net
インドのネットワーク事情
- 世界最下位の通信速度
- 日本のPHSのような半径数百mの弱いアンテナ
- 奪い合い
- 3GB月500円
- インターネット人口爆増
- 重たいアプリはユーザーに届かない
分析
- 現地で受け入れられているアプリのUXはいずれも低速なネットワーク環境でも動いていた
各アプリの投稿UX
- Twitter
- 投稿ボタンを押したら即画面遷移
- 上部にProgress
- Facebook
- 投稿後、即画面遷移
- トップ画面で送信中であることがわかる
- LINE
- オフラインになったら自動再送
- Instagram
- 段的読み込み
New Relic Mobileによる分析
- HttpRequest Sort
- Geography Sort
- Interactions
- Dashboard
その他のツール
対応
- アプリのバイナリサイズ削減
- 機能削減 -アプリ内画像をWebp -App bundle形式（google I/O 2018）
- 画像の送受信サイズ削減
- Base64→Multipart
- 長辺Maxサイズに設定して必要十分なサイズにリサイズ
- 直列通信を並列化
- 通信結果を待たないUXへ変更
- 通信に失敗しても自動リトライ
まとめ
- アプリを軽く
- 通信結果を待たないUX
- ツールを活用して分析
Kenta Nakai「クラッシュレポートサービスのパンくず機能でクラッシュ対応を楽にする」
クラッシュしたときに何を見るか
- ユーザからの問い合わせやレビューを参考に調査
- クラッシュレポートサービスの情報を参考にする
課題
- 再現手順がない情報が足りない
- 手探りになりやすい
- クラッシュによってはスタックトレースがわかりにくい
Breadcrumbs（パンくずリスト）
- 画面表示やボタンのタップイベントなどの推移をトレースする
- ユーザーがどういう経路でクラッシュに至ったかがわかる
UIViewCOntroller#viewDidAppear
- クラス名からどの画面が表示されたかわかる
パンくずリストによって
- クラッシュまでの操作が推測しやすくなる
- スタックトレースと併用することでヒントが増える
Sentry使い方
- CocoaPods、Carthage、gradleでインストール
- AppDelegate、ActivityのonCreateなどで初期化
- enableAutomaticBreadcrumbTraking
- iOSのみ
- Storyboardでのアクション
- ボタンのTouch Down
- カスタムイベントの送信も可能
Sentry以外でパンくずリストが使えるもの
- Firebase Crashlytics
- アナリティクスの統合
- Bugsnag
TakuyaOhashi「そろそろ使いどき！？ARCoreの復習」
ARCoreとは
対応端末
- Preview
- Pixel,Pixel XL,Galaxy
- ARCore 1.3.0
- たくさん
ARCoreリポジトリにIssueを出した バグ報告
ARCore Previewでできたこと
- 水平面検出
- 照明条件の推定
- モーショントラッキング
ARCore 1.3
- 垂直面の検出
- Augmented Images（マーカー画像検知）
- Cloud Anchors
- エミュレーター対応
- Sceneform
- 簡単にARcoreアプリを開発できる
- Sceneform形式で３Dモデルをインポート
- 自動でgradleファイル追加など
- 平面検知
- Anchorの設置が簡単に可能
Augmented Images
- 画像を認識して拡張
- 画像と一致した画像に3Dモデルなどを拡張
- Unityでも直感的に実装
地球の画像を見つけて4つ角に額縁をつける
- オフラインでもできる
Cloud Anchors
複数のスマホでAR体験を共有
- iOSのARKitも可能
- ARCore Unityでも動作
- Google Cloud Platformの利用が必須
まとめ
そろそろARCoreと思っていたが…
ナイアンテックがARプラットフォームを開発中
NakaHiro「システム開発と経費処理」
経理について
- 納税額の計算
- 決算書作成
- 資金不足にならないか計算（キャッシュフロー）
システム開発は分割払い
- 導入効果が明確…償却費、会計固定資産計上
- 明確でない…償却費／1年で計上
- 教育・コンテンツ…1年で償却／1年で計上
- 社内稟議書
- 契約書
- システム稼働日
- 請求書
1万円節税できたら100万円の受注案件と同じ価値がある
