フロントエンド・アーキテクチャ Meetup 参加レポート

こんにちは。プロダクトディベロップメントチームのエンジニア id:tsi-shinjo です。 今回は、先日(2019/01/24)開催した フロントエンド・アーキテクチャ Meetup by scouty × TeamSpirit についてレポートします！

teamspirit.connpass.com

今回のイベントについて

今回は、幅広いテーマでLTをする「ほろよいてっく」とは異なり、「フロントエンドアーキテクチャ」という観点でそれぞれの知見を共有する、という目的で、株式会社scouty様と合同で開催されました。ライブラリやフレームワークの使い方・テクニックについて扱う勉強会が多い中で、「フロントエンドの設計」に絞ってのイベントはなかなか珍しいのではないかと思います。

1. フロントエンド設計の話 / 株式会社scouty 翁さん(フロントエンドマイスター)

最初は、株式会社scoutyのフロントエンドマイスター（！）、翁さん( @kahirokunn )のLTで始まりました。

Atomic Design や、それにインスパイアされた Atomic Componentといったデザイン手法、他の発表者の話題にも上がっているDDD(ドメイン駆動設計)のほか、内部状態の整合性を保つための設計パターンとして Flux, CQRS, QueryComponent, Business Logic Component など、さまざまな設計手法をご紹介いただきました。

Atomic Design や Flux (Redux) は弊社のフロントエンドでも採用していますが、改めて他の設計手法も眺めると、それぞれの特徴が見えてきて興味深いですね。Atomic Component については実装例もご紹介いただいたので、実際にコードを読んでみるのも面白いです！

2. TeamSpiritのフロントエンドアーキテクチャ / 株式会社チームスピリット 横山(フロントエンドアーキテクト)

続いて、弊社のフロントエンドアーキテクト・横山によるLTです。弊社ではDDD(ドメイン駆動設計)をフロントエンド設計に取り入れていますが、なぜそれを採用したのか、React+Redux上でDDDを実装するにはどうすればよいかといったノウハウを、コードを交えて簡潔に説明してくれました。

DDD自体、例の分厚い本を読むのはかなり骨が折れる(しかも実践DDDはフロントエンドについてはほとんど言及されていない)ため、実践しようにもなかなか難易度が高いですが、こうしてフロントエンドDDDの実践例を見ると、いまチャレンジしようと考えている方にはとても心強く感じるのではないでしょうか。

3. チームスピリット社のFEメンバーがドメイン駆動を取り入れようとしてきた歴史の話 / 株式会社チームスピリット 植田(プロジェクトマネージャ・元フロントエンドエンジニア)

休憩を挟んで三番目は、弊社プロジェクトマネージャの植田から。先ほどの横山のLTを受けて、弊社のチームがDDDを取り入れるまでにどのような試行錯誤がされたか、という話でした。

ディレクトリ構造の設計とその変遷、Flowtype導入の経緯など、DDDに限らず「チームスピリットのFEチームがどういった悩みをもっていて、どう試行錯誤を繰り返して設計してきたか」が、実感を交えつつ説明されていました。似た悩みを感じている方はたくさんいると思うので、共感された方はぜひ実践していただきたいですね！

4. 何故 TeamSpirit には DDD が必要だったのか / 株式会社チームスピリット 湊(開発マネージャ兼フロントエンドエンジニア)

最後は弊社の開発マネージャ・湊が、なんと出張先のシンガポールからリモートで発表してくれました！（何故か向こうのオフィスは今日にかぎって照明が薄暗く、映像がちょっとホラーになっていましたが……）

湊もまたDDDを取り入れるまでの経緯を語ってくれましたが、植田のLTとは異なり、「複数のチームに分かれて開発する上でDDDはどう役立ったか」という観点からの話でした。「DDDという設計方針が存在することで、チーム内だけでなく、チームを超えた関係性にも秩序が生まれるようになった」という話は、今までにない視点で興味深かったです。DDDは開発が大規模であるほど享受できるメリットが大きいので、プロダクトのフェーズを見ながら良いタイミングで導入していきたいですね。

まとめ

「フロントエンドアーキテクチャ」という話題に絞ったMeetUpでしたが、それぞれに異なる視点からの考察があり、とても多様性があり興味深い会でした。LT後の懇親会では至るところでDDDについての話で盛り上がっていたようです。

開催後のアンケートを見ると、「ドメイン駆動設計は聞いたことがある or 学習をしたことはあるが、実際の業務では活用していない」という方が多かったようです。 「今回のMeetUpを受けてドメイン駆動設計（や他の設計手法）を試してみた」という方が増えると嬉しいですね。その際はぜひご登壇をお願いします！

実践ドメイン駆動設計 (Object Oriented SELECTION)

次回は2月13日(水)に、 サービス品質向上しナイト ～みんなでテスト！10年続くチームと品質～ というイベントを開催予定です。弊社のシニアQAエンジニアも登壇予定ですので、ご期待ください！

willgate.connpass.com

We're Hiring!!

チームスピリットではエンジニアを募集しています。興味をもった方、もっと詳しく話を聞いてみたい方は、ぜひ以下のリンクからお問い合わせください！

www.teamspirit.co.jp

ほろよいてっく〜冬休み直前バージョン〜 参加レポート

こんにちは！プロダクトディベロップメントチーム松田 (id:a-matsuda)です。
東京でも初雪が観測されるなど、寒さ深まる今日この頃ですが、みなさまいかがお過ごしでしょうか。
さて今回は、昨年12月27日に開催した『ほろよいてっく〜冬休み直前スペシャル〜』の様子をレポートします！

ほろよいてっくとは

今回で3回目の開催となった「ほろよいてっく」。乾杯からスタートするほろよいてっくは、お酒を楽しみながら自由なテーマでLTを披露していく会で、社内メンバーだけでなく社外の方の飛び込みLTも大歓迎！！
気楽な雰囲気で、楽しみながらテックも学べてしまうのが、ほろよいてっくの魅力です。
過去のほろよいてっくも記事になっていますので、ぜひご覧ください！

teamspirit.hatenablog.com

乾杯！

弊社QAエンジニア・生井の掛け声の元、「ほろよいてっく」が始まりました！
今回も、SALVATORE CUOMOのビザとアルコールで乾杯。

Lightning Talkスタート

1. 「A QA engineer’sTool」by Rysei NAMAI

トップバッターは、最近”スニーカー”という趣味が増えた、QAエンジニア・生井です。
「チケット優先順位」および「テスト計画」の施策内容と、なぜそういう施策になったかの背景をシェアしてくれました。うまく回っている現場では、当たり前のようにやっていることも多いかと思いますが、なぜそれが必要なのかわかっていないと手段が先行してしまうこと、ありますね。ちゃんと背景を理解していれば、状況が変化した時にも、柔軟に形を変えていくことができそうです。

2. 「UTF-8入門」by Yoshihito NAKAHATA

続いて、前回のほろよいてっくのLT「オブジェクト指向とは何か？」が大好評だった、フルスタックエンジニア・中畑。今回もテーマ選びが秀逸です。
文字コードの基礎、Unicode/UTF-8の概要、エンコード/デコードそして脆弱性と、15分で語るにはかなり奥深い内容が、中畑のテンポで展開されました。（笑）
当たり前のIT技術が増えているなか、技術の成り立ちを理解せず使うことも増えていますが、こうやって興味を持つことはエンジニアとしての応用力に繋がりますよね。

3. 「モバイルでアトミックデザインをやった話」by Shodai YOKOYAMA

次は、弊社フロントエンドエンジニア・横山から。React.js のコンポーネント設計にAtomic Designを取り入れた話でした。Atomic Design の考え方や解決できることから、具体的にどのように導入していったのか、なぜうまくいったかまで、リアルな体験に基づく内容でした。継続開発のためにも綺麗なコンポーネント設計をと考えるエンジニアやチームは、Atomic Designを検討してみたらいいかもしれません。プレゼンテーションとビジネスロジックがちゃんと分離していれば、検討の価値がありそうです。

4. 「いとをかしな芬国記」by Chikara ISHIKAWA（飛び入り！）

飛び入りで社外から参加いただいた石川さんが登壇くださいました！LTに聞き入ってしまったため、写真を撮り忘れてしました。申し訳ありません！

学生時代苦手だった英語をどう克服してきたかの話。学生時代に北欧留学をし、留学先で「「自分が話せるスピード」＝「聞き取れるスピード」」ということに気づいて、海外ドラマをみながら、オーバーラッピング（字幕を英語にして俳優と一緒に喋る）やシャドーイング（字幕なしで遅れて喋る）を始めたそうです。オーバーラッピングは効果があり、なんと留学前後でTOEICのスコアも400%UPしたとか。私もシャドーイングは継続していますが、効果を実感した方の話を聞くと、励みになりますね！

5. 「Salesforce + React Native」by Tatsuya SHINJO

続いて、フルスタックエンジニアで、Devリーダーとしても活躍する多才なエンジニア・新上のLTです。イカのレベルもすごいんですよ。
私たちは、Salesforce Lightning Platform の開発基盤で開発をしています。Salesforceでモバイルアプリというと、Salesforce公式アプリが思い浮かびますが、それ以外にも、MobileSDKから作る方法、ReactNativeで開発する方法などがあります。今回はReactNativeで一部機能を開発してデモをしてくれました。色々できそうで面白そうですね！

6. 「初詣の前に」by Kaoru NAITO

唯一の女性フロントエンドエンジニアとして活躍する内藤。神社好きで知られる彼女、テックから離れて「神社とは何か？」を存分に語ってくれました。
祈り、感謝、誓いなど、日本人の生活のなかに入り込み、自然に行う行為の一つだと思いますが、全て神道からきているもの。祈り、感謝、誓いなどを通して、心は強くなるものと内藤。
みなさんは、年始は初詣に行かれましたか？神社は「自分自身を省みる場所」であり、「去年のことを感謝して、今年のことを祈って、今の自分に誓ってみる」のが本来の参拝だそうです。ぜひ来年の初詣にお役立てください！

7. 「英語学習という海に漂流して行き着いた先は・・」by Akiko MATSUDA

私・松田は、英語学習の海を漂流してきた話をしました。私の英語学習の歴史、独断と偏見に満ちた英語学習比較、そして辿り着いた英語コーチングスクール。
コーチングスクールの売りはコーチングですが、その仕組みはまるでスクラムでした。開発以外でもスクラムの仕組みは適用できること、またスクラムという仕組み自体が売りになっていることは、とても驚きでした。
自己管理に自信のある方は、継続学習にぼっちスクラムを取り入れてはいかがでしょうか？

8. 「英語を勉強する上で大事なたった１つのこと」by Yoshiaki MINATO

マネージャー兼フロントエンドエンジニアで、来年からTeamSpirit Singaporeにジョイン予定の湊。今一生懸命向き合っているのが、英語学習です。
「現地のエンジニアと必要最低限、仕事のコミュニケーションだけ取れるようにする」を目標に据え、最短で目標を達成するために湊が行なっていることをシェアしてくれました。単語を覚える→フレーズを覚える→実践する→繰り返すと言う感じでサイクルを回しているそうです！いいことを言っているのですが、なぜか面白くおかしく湊らしく、という印象が残るのは、やはり湊のキャラクターによるものでしょう。

9. 「誰も教えてくれない「開発」のこと」by Akira KURATANI

最後はPDチームディレクターの倉谷のLT。すごーく中身がきになるタイトルです笑
開発で考えること４つ（進行、仕様、設計、品質）を、ひとりプロジェクト、ウォーターフォール、スクラム、失敗するスクラム、アジャイルでは、誰がどこをみるのかを倉谷の視点で定義。
倉谷のLTのキモは、誰かが言っていることではなく、倉谷が考えていることを披露したところ。参加者も、どうあるのがいいだろうと考える機会になったのではないでしょうか。新しいことに挑戦していれば、誰も経験したことがないことにぶち当たるかもしれません。自分の頭で考えることが大事という真理を伝えてくれました。

まとめ

LT後は、LTのネタを肴に、あちこちで会話が盛り上がっていました。参加してくださったみなさまから、色んな話が聞けて面白かったという感想もいただきました。
ほろよいてっくでは、社外からの参加＆飛び入りLTも大歓迎です！次回は春先に開催予定ですので、お楽しみに！！
また、チームスピリットでは、社外の方も参加可能なMeetupを不定期で行なっています。1月にはフロントエンド・アーキテクチャ Meetupを、2月には品質向上のMeetupを開催予定。こちらも奮ってご参加くださいませ♬

エンジニア募集♪

チームスピリットではエンジニアを募集しています。チームに興味を持っていただいた方、ご連絡くださいね。（直接メッセージでも、下記の応募フォームからでも構いません）

チームスピリット アドベントカレンダー2018を総括

こんにちは。QAエンジニアの生井(id:riririusei99)です。

12月25日はアドベントカレンダーの最終日です。 早いもので開始から最後のエントリーまであっという間だったという感じがします。

adventar.org

総括ということで今回は2018年のアドベントカレンダーの投稿について（役に立つか分からない）一言コメントを添えて紹介します。

まとめ

1日目

アドベントカレンダーのスタートを飾ったのはディレクターという役職で幅広い活動をしている倉谷のLightning プロセスビルダーに関連する投稿です。
社内ではチームリーダの役割も持つ倉谷ですが、こういった活動に積極的に参加してくれてとても嬉しいです。

teamspirit.hatenablog.com

2日目

シンガポール拠点のライアンのSalesforce Basecampの参加レポートです。
写真多めで楽しそうなのが伝わってきたので、参加レポート書くときはたくさん写真を撮ろうと思いました。 teamspirit.hatenablog.com

3日目

チームスピリット社が誇る情熱エンジニアが綴るシェルスクリプトに関する投稿です。
弊社が開催しているほろよいてっくで毎回発表をしていますので、興味があるかたはそちらも是非お越しください。 pokuwagata.hatenablog.com

ほろよいてっく ほろよいてっく〜冬休み直前スペシャル〜 - connpass

4日目

プロダクトマネージャのスキルを念能力に例える投稿です。
これを読んだ時にQAエンジニアで考えたらどう考えるか…と他の職種でも考えたくなりました。 niseissa.hatenablog.com

5日目

開発チーム内で定期的に開発されるテックランチを取り扱った投稿です。 読むとナポリタンが食べたくなる。…そんな内容です。（冗談です。） teamspirit.hatenablog.com

6日目

フロントエンドテックリードによる渾身の今年の振り返り。 ちなみに彼は、会社の社員紹介ブログの記念すべき第1回を任されています。

2018年を振り返る · GitHub

7日目

参画したばかりのメンバーにも記事を書いてもらいます。 今日までの経験を基にSalesforceの紹介をしていただきました。 a-nakaya.hatenablog.com

8日目

写真×バックエンドエンジニアであるTsuruokaの投稿です。

trrrrok89.hatenablog.com

ちなみに前回のほろよいてっくの写真も撮っていただいています。 ほろよいてっく〜夏の自由研究発表会！〜 参加レポート - チームスピリットデベロッパーブログ

9日目

Aceによるシンガポール拠点の様子を書かれた投稿です。オフィスがとてもキレイ。
チームビルディングのツールとして卓球をしていますが、日本のオフィスはSplatoonができます。

htike-ace.hatenablog.com

10日目

和服系フロントエンドエンジニアによる。猫100％な記事。 地域猫活動って初めて聞きました。勉強になります。

naito-kaoru.hatenablog.com

11日目

QAのKaoによるオフィスをクリスマス仕様にしてくれた記事。
オフィスに季節感をもたせると違う気分になれてとてもいい感じです。 kaesanno.hatenablog.com

12日目

開発チームがはじめたアドベントカレンダーですが、弊社マーケティングチームの竹田にも協力していただきました。 SWTTで弊社倉谷が登壇した様子をレポートしています。

チームスピリット 倉谷、「Salesforce World Tour Tokyo 2018」で行われたEinsteinに関するセッションに登壇！ |チームスピリット

13日目

休暇中のQAエンジニアにもアドベントカレンダーを書いていただきました。 旅行先のドイツについてレポートしてくれています。自分も休みをとって旅行したくなりました。

703de.hatenablog.com

14日目

JerryによるLightning Componentの紹介です。
彼とはF1の感想をSlackで飛ばし合う仲なので、一緒にシンガポールにグランプリ見に行く際には向こうのオフィスでリモートワークしたいです。

ye-jerry-teamspirit.hatenablog.com

15日目

2018年いちばんヒットした記事を書いたプロデューサーの若林による、会社ブログの解析記事です。 総括の記事を書いてて気づいたのですが、サムネに会社のロゴが写ってるんですね。

teamspirit.hatenablog.com

16日目

プロダクトマネージャの古川によるFlutterとSalesforceの連携に関する投稿。 ごめんなさい、まだ読めてないです。この記事を書いてるまさに今、記事があがったみたいです。

teamspirit.hatenablog.com

17日目

私、生井によるチームスピリット社での仕事内容を書きました。
同じQAエンジニアでも仕事内容違ったりするので参考になれば… teamspirit.hatenablog.com

18日目

二宮による2拠点による開発の話と英語によるコミュニケーションについての投稿です。 英語、自分の思ったことがスラッとでるように頑張りたいです。 teamspirit.hatenablog.com

19日目

Prashantによる"Key to have a good work life balance" タイトルの通り…卓球・そしてマッチョな投稿です。（職場での働き方について言及しています） singh-prashant.hatenablog.com

20日目

新婚開発リーダーのApex自動テストの記事。 品質に対して強い関心をもっている気さくなお兄さんです。 qiita.com

21日目

弊社マネージャによるデベロッパーブログを振り返る記事。 12月25日公開って完全に本投稿と被せに来てますね…（笑）

teamspirit.hatenablog.com

22日目

じょーん（これがやりたかった） Salesforce女子部に所属してるRangerエンジニアのSWTTの参加レポートです mihoko-az.hatenablog.com

23日目 ＆ 24日目

まとめが終わった後に公開される…はず！！！

総括

一言コメントを追加して紹介するだけなのに、想像以上に時間がかかりました…。
ですが、昨年のアドベントカレンダーに比べてたくさんのメンバーが参加することができました。
単純にメンバーの数が増えたのもありますが、様々なメンバーでプロダクトの開発を行っています。 弊社に興味がありましたら、右側の採用ページのリンクを押してくださいね！（露骨）

というところでアドベントカレンダーの総括を終わりにしたいと思います。

本投稿はチームスピリットアドベントカレンダーの25日目の投稿でした。

adventar.org

Flutter から Salesforce へ繋げてみた。

こんにちは。

株式会社チームスピリットの古川(id:furukawa-hisakatsu)です。

前回に引き続き、技術的な話となります。 今回は私自身も初めて触ってみましたが、昨年（2017年）からリリースされており、じわじわと人気が上がっている「Flutter」を使用してSalesforceと繋げてみました。

後、この記事はチームスピリット Advent Calendar 2018の16日目です。（大遅刻）

adventar.org

How to Flutter

Flutterとは？

そもそもFlutterとはなんぞやという人向けに、まずFlutterに関して軽く説明します。

Flutter自体は、Googleにて開発されており、主な用途としてはAndroidやiOS（iPhone）向けのモバイルアプリケーションとして利用されます。 メインの言語としてはあまり有名ではないが「Dart」言語を使用して開発します。 また、XamarinやReact Nativeと同様、一つのソースコードでAndroidやiOS（iPhone）開発ができるクロスプラットフォーム開発も行うことができます。

そのため、今回はAndroidやiOS（iPhone）にて動作し、Salesforceに接続して情報を取得しよう！が目的となります。

Flutter開発をしてみよう

Flutter開発に関してはそこまで敷居は高くなく、公式HPからインストール手順に従うことにより、手軽に開発することができます。 （iOS開発を行う場合は、Apple Developer Programの契約とMacOSが必要ですが）

flutter.io

また、Flutterに関しては他のライブラリに比べて、親切にも正常に設定されているかを検査する「doctor」機能が実装されており、 手軽さに拍車がかかります。

また、開発用IDEとしてAndroid StudioやXcodeにてそれぞれ機種のエミュレーションが可能となりますが、 実際の開発、検証を行う場合は実機による開発や検証をおすすめします。 （今回サンプル作成時も色々と悩まされました…）

実際に接続しよう

今回のサンプルコード

github.com

実行方法

1. 上記URLから、Gitで取得する、もしくはzipファイルをダウンロードして適当なフォルダに解凍してください。
2. Salesforceにログインを行い、接続アプリケーションの作成を行い、「コンシューマ鍵」と「コールバック URL」を「lib/settings.dart」の５～６行目に格納してください。
   （詳細な設定方法は以下「接続アプリケーションの設定」をご確認ください！）
3. 該当フォルダかたコマンドプロンプトやターミナルを開き、「flutter run」を実行すれば、できるはずです！
   （できなかった場合、記載されているコマンドを実行してみたり、「flutter docter」で設定が問題ないかを確認してみてください。）

説明

今回のサンプルではSalesforceとの認証を行い、ユーザ情報を表示するだけのシンプルな画面となっております。

FlutterToSalesforce

処理の流れ

1. まずエントリとして「main.dart」に接続され、「settings.dart」からスマートフォンのストレージにて保存されている情報を取得します。
2. 保存されている情報がなければ「connect/connect.dart」に移動し、WebViewにてSalesforceのログイン画面を表示し、認証します。
   認証後には「setting.dart」からスマートフォンのストレージにて保存され、「main.dart」に移動します。
3. 「settings.dart」に保存されている情報があるため、「user/user.dart」に移動し、ユーザ情報を取得して表示されます。
4. 右上の「ログアウト」をタップし、「はい」を選ぶことにより、「settings.dart」からスマートフォンのストレージにて保存されている情報をクリアし、「main.dart」に移動します。

Salesforceとの接続の話

今回のSalesforceとの接続に関しては、ユーザ情報の取得に関しては、よくあるREST API Queryを使用しているため、説明は割愛します。

認証に関しても、一般的なWeb サーバ OAuth 認証フローにて行っており、リダイレクト先自体は自身である「localhost」を指定し、URL情報から認証コードを取得する形となります。 ですが、今回は一般配布向けのアプリケーションであるため、通常で使用される「コンシューマの秘密」は使用せず、「コンシューマ鍵」のみを使用した認証方法となります。 それにより、以下の接続アプリケーションの設定がほんの少し違う形となっております。

接続アプリケーションの設定

さて、Salesforceと接続するための設定を行いましょう。 基本的な設定に関しては前回記事を参考にしてください。以下は変更点のみを記載します。

接続アプリケーションの変更点

• コールバックURLには自身である「localhost」を指定しましょう。（例：「http://localhost:25640」）
• 今回は「コンシューマ鍵」だけで認証を行うため、「Web サーバフローの秘密が必要」にチェックを外しましょう。

実行してみましょう

少し苦戦するところはありますが、簡単にモバイルアプリケーションができました。

締め

今回Flutterにてモバイルアプリケーションを開発してみましたが、まだまだ不具合等もちらほら見えており、まだまだ発展途上ではある状態となっております。 ですが、クロスプラットフォーム開発ができるメリットはそれぞれの言語習得や労力を上回る成果を出してくれます。 Flutter以外にもいくつか選択があります為、自分に合った言語やライブラリを探してみてください。

（自分としてはUnityでモバイルゲームを作ってみたいですね）

チームスピリットデベロッパーブログを振り返る

こんにちは。プロダクト開発チームの松田(id:a-matsuda)です。

今年も残りわずかとなってきましたね。年末といえば 1年を振り返って成果を祝福したり、できなかったことを反省したり。そして来年は何をしていこうかと次なる目標を考え始める時期ではないでしょうか？

そこで今回は、はてなブログに引越しをして丸 2年となったこのチームスピリットデベロッパーブログを、google Analyticsのデータをみながら、振り返っていきたい思います。

チームスピリットデベロッパーブログとは

チームスピリットのプロダクト開発チームの有志メンバーで書いているブログで、12月のAdvent Calendarの時期は、投稿数が多くなります（笑）これまでは、魂のブログという会社ブログのなかで投稿をしていましたが、2016年12月に独立、はてなブログに引越しをしました。

ブログビュー数ランキング

さあ最初は、みなさんがきっと気になる「ブログビュー数ランキング」です！

第5位：Slack×GAS 契約自動更新サービスの稟議忘れを防ぎたい！（ビュー数：461）

teamspirit.hatenablog.com

Slack×GAS連携を取り入れてから1年が経ちますが、おかげさまで稟議申請忘れが大幅に削減され効果を実感しています。 この記事でもご紹介している通り、Googleカレンダーの情報を抽出してSlackに通知をするなど、GASとSlackを連携させることで業務効率化や品質向上に繋がる様々な仕組みを構築できるので、そのあたりが注目されたのかもしれません。

第4位：入社して10ヶ月がたったので入社エントリ書く（ビュー数：512）

teamspirit.hatenablog.com

メンバーの入社エントリーですが、チームスピリットの自由な働き方や仕事に集中できる環境について紹介をしてくれています。 フレックスタイム制、スタンディングデスク、リモートワークやチームの雰囲気など盛りだくさんなので、気になった方はぜひチェックしてみてください。チームスピリットの働き方や環境に注目が集まることは、とても嬉しいことですね！

第3位：スクラムMTGに【Lean Coffee (リーンコーヒー)】を導入してみた！（ビュー数：642）

teamspirit.hatenablog.com

Lean Coffee というミーティング方法をご存知でしょうか？ ご興味の湧いた方は、ぜひ記事をご覧くださいね！ この記事に注目が集まったのは、みなさんミーティングのやり方について試行錯誤をしているということかもしれません。 新しいミーティング方法があれば知りたい、もっと良いミーティング方法はないのだろうか？と考えている読者のアンテナに引っかかったのではないでしょうか。

第2位：Amazon Echo から Salesforce へ繋げてみた（ビュー数：866）

teamspirit.hatenablog.com

GoogleHomeやAmazon Echoに世の中の注目が集まっていた2017年の記事で、GoogleHomeやAmazon Echoで何ができるのか、色々試してみようという動きが多かったですね。そういう意味では、世の中の興味・関心にマッチした内容になっていたことが、記事のビュー数アップに繋がったのかもしれません。

第1位：Google Homeから音声で出退社を記録する（ビュー数：1213）

teamspirit.hatenablog.com

圧倒的なビュー数で第1位を獲得したのは、GoogleHomeとTeamSpirit連携です！！おめでとうございます。 第2位と同様、2017年の記事で、GoogleHomeには注目が集まっていました。第2位からダントツ引き離したのは、やはりTeamSpiritと連携するというチャレンジをしているところでしょう。TeamSpiritのユーザ様をはじめ、エンジニアにも刺さる記事だったことは間違いありません！

アクティブユーザ数の動向は？

ランキング以外も振り返っていきましょう。アクティブユーザ数（以下AU）とは、特定の期間内にサイトを訪れたユーザーの数を表す指標のことです。月別のAUは2017年12月以降大きく増加しています。2017年のAdvent Calendarに取り組んだ後から増えていますね。ランキング第1位、第2位の記事が投稿されたのもこの時期です！

アクティブユーザ数

ユーザの地域は？

日本、シンガポール以外に、アメリカからのアクセスもありますね。Dreamforceに参加したチームスピリット社員からの閲覧かもしれません。今後はますます、世界のエンジニアからも注目される記事を書いていきたいですね。

セッション数（国別）

もっともよく使われるデバイスは？

まだまだPCからの閲覧が多い印象です。お仕事中にみてもらっているのでしょうか。

デバイス別セッション数

まとめ

簡単ではありますがチームスピリットデベロッパーブログの2年の奇跡を振り返ってみて、いくつかの気づきがありました。 これらを生かして、来年もこのブログを盛り上げていきたいと思います！！

• （当然ですが）世の中の興味・関心が集まっている技術や取り組みに注目が集まること
• TeamSpirit×興味・関心のある技術の組み合わせに期待されていること
• Advent Calendarは新しい読者を獲得できる素晴らしい取り組みであること
• 日本やシンガポール以外の国でも記事をみてもらえるチャンスがあること

エンジニア募集♪

チームスピリットではエンジニアを募集しています。チームに興味を持っていただいた方、ご連絡くださいね。（直接メッセージでも、下記の応募フォームからでも構いません）

終わりに

最後になりましたが、この投稿は チームスピリット Advent Calendar 2018 - Adventar 第21日目の投稿になります。

TeamSpirit Singaporeと日本の開発チームがうまくやってる話

Hi everyone! TeamSpirit Singaporeの二宮です。
私がTeamSpritの海外開発拠点の社員一号として入社し、気づけば6ヶ月が経ちました。

前回のTeamSpirit Singapore紹介記事はこちら。

teamspirit.hatenablog.com

今ではシンガポールのメンバーも増え、日本の開発チームと連携しながら、いい感じに開発が進められるようになって来ました。
今回はその事についてシェアしたいと思います。

 開発体制について

まず現在の開発体制、日本とシンガポールチームの位置付けについて説明したいと思います。

ざっくり、こんな感じになってます。（※チーム名は仮称です。）

一つの製品を、モジュールで大きく2つのチームに分けて、その片方のチームが日本、シンガポールの混成チームになっています。

（Team Bの内訳は、日本：PM 1,スクラムマスター兼QA 1, エンジニア 3、シンガポール：エンジニア 5）
なので、もちろんスクラムイベントは日本とシンガポール両方のエンジニアが同席して行われますし、プロダクト横断の大きなスクラムイベントにもシンガポールからリモートで参加しています。

シンガポールチームの歴史

下記がシンガポールチームの人数推移です。

6月から始まって、少しづつですが、着実に人数が増えて現在は5人になりました。

上記の様に、国際色も豊かです。すべての国が分かりますか？

今後も、少しづつ人数が増えていく予定です。

コミュニケーションのとり方

シンガポールチームと混成チームになってから、チームの公用語は英語になっています。

スクラムイベント、チケットの表記、Slackでのやりとり、その他ドキュメントは基本英語ファースト（英語、もしくは英日併記）です。

とはいえ、全員がいきなり英語をペラペラに話せる訳では無いので、日本人同士の場合は普通に日本語を使っています。

始めた当初は全く自信がなかった日本メンバーも、学生時代の読み書きの経験＋Google先生のおかげで、Slack上でのコミュニケーションはだいぶスムーズになってきています。

口頭でのコミュニケーションが必要な場合は、私が通訳サポートすることもありますが、基本的にダイレクトにSlackなどでやりとりできています。

海外と一緒に仕事をするというのは一見ハードル高そうに見えますが、エンジニア同士の場合、そもそもプログラミング言語という共通言語があるので割となんとかなります。

シンガポールのメンバーも、コミュニケーションについて不便に思っていることは殆どなさそうです。

どこまで英語でコミュニケーションするか

ここが一つのキーとなる要素になるかと思っています。

よく英語化の事例とかで、社内英語公用語化！などと一気にすべてを英語に置き換えることを大々的にやっているところもありますが、私の感覚だとそんな必要はないと感じています。

ドキュメント類は読めないとわからないので英語、これは必要。

残りのミーティング類については、すべてを英語で行う必要はないというのが今の所の答え。

最低限は事前に用意して英語でやる、残りの込み入った部分については私が軽く通訳しながら、要点は後から改めて共有、それが効率が良くて早いです。

残りの小さな疑問や、質問については、ドキュメントや画面、ソースを見ながら後から直接個人間でSlackなどで英語でやり取りして埋めていけています。

今はそんな感じで状況に応じて、コミュニケーションの方法を変えていってうまく行っています。

出張によるF2Fのコミュニケーション

重要な開発が始まる時は、日本からPMやエンジニアが来て短期的に直接一緒に働くこともあります。

F2Fのコミュニケーションを取ることで、仕様の理解や疑問の解消を効率よく行っています。

普段、画面越しでしかやり取りできない人と直接コミュニケーションできるのも、シンガポールメンバーの刺激になりモチベーション維持にも繋がってます。

交流イベントなど

仕事以外ではなかなか話す機会の無い人たちとは、"オンラインランチ"という企画をして交流を図っています。

"オンラインランチ"とは文字通り、画面越しにランチを持ち寄って、ビデオ通話しながら、雑談しながらランチを楽しむというものです。

顔と名前を知らないと、なかなか仕事上でも話しかけるのを躊躇したりしてしまいますが、このようにお互いを知ることで、オフィスを超えて気軽に話しかけられる関係を構築しています。

まとめ

最初はお互い、海外と仕事をしたことがない日本メンバー、日本と仕事したことがないシンガポールメンバー、という不安でいっぱいなスタートでしたが、今では非常によく開発プロセスが回せています。

英語でのコミュニケーションも最初は拙かった部分もありますが、日々良くなっていっています。

このままの調子で日本と海外で強固な開発チームを実現できるよう、さらに頑張っていきます！

----

この記事はチームスピリットアドベントカレンダー18日目の記事になります。

adventar.org

チームスピリットでのQA仕事内容

はじめに

寒い日が続いていますね。
QAエンジニアの生井 ( id:riririusei99 ) です。
会社ごとにQAと呼ばれる人達は働き方が異なっているのではないかというのが自分の持論で、今回は私が所属しているチームでの働き方を紹介することでチームスピリットに興味があるQAの方の想像と実際の仕事内容のギャップを埋められないかなと考えた。そんな記事です。

開発サイクルと主な仕事

所属しているTeamSpiritWSPチームではSalesforceプラットフォームのバージョンアップに合わせて4ヶ月の開発サイクルを一つの単位として開発を行っています。
2017年よりスクラム開発を採用しており、現在は4ヶ月の開発サイクルを更に2週間のスプリントに分割し、前半6スプリントが開発スプリント・後半2スプリントがリリーススプリントとしています。

開発サイクル単位でのQAの仕事をざっくりではありますが、簡単にまとめると下記になります。

開発サイクルでの大まかな流れ

• テスト計画作成（左上のTest Planning）
• StoryTicket のテスト設計・実施 （緑）
• QualityTicketの実施 （青）
• Test Reportの作成 （赤の範囲部分）
• Quality Reportの作成 （オレンジ）

テスト計画作成

開発サイクルにおける計画を立てます。
私達のチームでは毎回少しずつ項目は違いますが主となるものは下記です。

• 品質目標
• リリース判定基準
• テスト環境
• 活動内容
• テスト体制・スケジュール
• 成果物

StoryTicket のテスト設計・実施

開発チームが作るストーリー毎の機能開発のテスト設計・実行を行います。
QAエンジニアはスクラムにおける開発チームのメンバーとして開発に参画しています。
そのため仕様検討を始めとするすべての会議に参加しますし、必要であれば調査も実施します。

QualityTicket(QA用バックログ)

テスト計画ができたタイミングでQA用のチケット(QualityTicket)のBacklogを作成します。
最近実施した具体的な例でいうと下記のようなイメージです。

• 強化テスト
• Salesforceプラットフォームのバージョンアップテスト
• テスト設計のカイゼン
• テストの自動化
• CIサーバの構築

Test Reportの作成

スプリントレビューのタイミングでTest Reportの共有を行います。
Test Reportではテストの結果と起票されたバグチケットのトレンドからスプリント毎にリスクになる事象・問題がないかを確認しています。

品質評価レポート

4ヶ月毎のリリースパッケージを作成する際には現在のプロダクトの品質はどの程度かレポートを書きます。
ここではQualityTicketの実施状況や、各Test Reportを基にプロダクトの品質に課題があるかどうかとリリースできるような状態かを確認しています。
品質評価レポートは次回の開発サイクルでのテスト計画でのインプットにもなるので重要なレポートになります。

まとめ

いかがでしたでしょうか。 各項目でざっくりと書こうと思ったのですが、ひとつのセクションでも内容があるので簡潔に書いた結果、抽象的な記事になってしまって少し反省しています。

最後になりましたが、この記事はチームスピリットアドベントカレンダー17日目の記事になります。 adventar.org

最後までありがとうございました。ではこの辺で。