sitateru tech blog: シタテル

sitateru tech blog

シタテルの技術やエンジニアの取り組みを紹介するテックブログです。

ラベル シタテル の投稿を表示しています。 すべての投稿を表示
ラベル シタテル の投稿を表示しています。 すべての投稿を表示

2018年12月25日火曜日

[第一回]SansanとHubSpotの連携

12月 25, 2018

こんにちは、シタテルエンジニアの工です!
今回は、SansanとHubSpotの連携の仕方について書いていきます 🚀

はじめに

シタテルでは、衣服生産をSCS、マーケティング・営業の部分をHubSpotを使って管理しています。

HubSpotを導入する際に、Sansanの情報をHubSpotに同期したいという要望があったので、SansanのAPIとHubSpotのAPIを組み合わせて同期処理を実装しました。

AWSLambdaを使って、定期的に同期処理を実行しています。

HubSpot公式にもSansanとハブスポットの連携の仕方という記事も公開されていますので参考にしてみてください。

Sansanの名刺情報をHubSpotにインポートする

使うもの

余談ですが実装したときAWSLambdaにはRubyの選択肢がなかったのですが、今は使用できるみたいですね。
普段はRubyを使うことが多いので、次にLambdaを使うときはRubyで実装してみたいです。

Sansanの情報を取得

公式ドキュメント Sansan Open API

handler.js

const axios = require('axios')
const moment = require('moment')
axios.defaults.headers.common['X-Sansan-Api-Key'] = process.env.SANSAN_API_KEY
axios.defaults.headers.get['Content-Type'] = 'application/json'

module.exports.importSansanData= async (event, context, callback) => {
  var updatedFrom = moment().subtract(2, 'hours').format("YYYY-MM-DDTHH:mm:ss")+"Z"
  var updatedTo = moment().format("YYYY-MM-DDTHH:mm:ss")+"Z"

  await axios.get(`https://api.sansan.com/v2.0/bizCards?updatedFrom=${updatedFrom}&updatedTo=${updatedTo}&range=all`)
      .then(function (response) {
        importHubspot(response)
        callback(null, response.data)
      })
      .catch(function (error) {
        callback(error)
      });
};

詳しくはこのあたりを参考にしてください。
AWSLambdaとServerlessを使ってみる[第1回]
AWSLambdaとServerlessを使ってみる[第2回]

日時取得のところがとてもブサイクです... 😢
なぜかタイムゾーンZにしないとうまくいかなっかった 🤔
本当は+09:00に設定したい。

var updatedFrom = moment().subtract(2, 'hours').format("YYYY-MM-DDTHH:mm:ss")+"Z"
var updatedTo = moment().format("YYYY-MM-DDTHH:mm:ss")+"Z"

HubSpotにインポート

取得したSansanデータをインポート。
propertyは数が多いのでほとんど割愛して記載します。

公式ドキュメント HubSpot Developers

handler.js

function importHubspot (response) {
  response.data.data.forEach(createContact)
}

function createContact (value, index) {
  var properties = [
      {
        property: 'email',
        value: value.email
      },
      {
        property: 'firstname',
        value: value.firstName
      },
      {
        property: 'lastname',
        value: value.lastName
      }
    ]

  axios.post(`https://api.hubapi.com/contacts/v1/contact?hapikey=${process.env.HUBSPOT_API_KEY}`, {
    properties: properties,
  })
  .then(function (response) {
    console.log(response.data)
  })
  .catch(function (error) {
    console.error(error.response.data)
  });
}

上の例はひとつひとつPOSTしていますが、こちらのAPI使えば1回のPOSTでまとめてCreateできます。
Create or update a group of contacts | Contacts API

CloudWatchでスケジュールを設定

serverless.ymlにスケジュールを設定します。
2時間おきにインポート 🚀

serverless.yml

functions:
  importSansanData:
    handler: handler.importSansanData
    events:
      - schedule: cron(0 */2 * * ? *)

これで2時間おきに、Sansanの名刺情報がHubSpotのコンタクトに同期されます!👏

最後に、deploy 🚀

serverless deploy -v

まとめ

今回はSansanとHubSpotのAPIを使って、Sansanの名刺情報をHubSpotのコンタクトにインポートする方法について書きました。

SCSと外部サービスとの連携は今後もどんどん加速していくと思います!
マーケティング・営業 -> 衣服生産 -> 請求この流れがシステムでシームレスに実現できるように開発中です 💻

2018年11月24日土曜日

オンライン衣服生産システム[第4回] - マイオペレーター

11月 24, 2018

縫製工場向けシステム - マイオペレーター

こんにちは!
シタテル株式会社CTOの和泉です。

シタテルのシステム紹介4回目。

第2回までにマイアトリエを使ってユーザーが衣服生産をリクエストし、SCSでコンシェルジ内容を管理することを紹介しました。

今回はついに、実際に衣服を作る縫製工場のための生産管理システム、マイオペレータについてご紹介します。

アイテムの生産管理

マイオペレーターはシタテルと取引をしていただいている縫製工場向けに無料で提供しています。一般的なウェブブラウザやスマートフォンで使えます。

下の図が、マイオペレータにログインした後のトップ画面です。

進行中の生産アイテムの一覧が表示されています。この一覧からそれぞれのアイテムの生産管理ページへと飛べます。
一件、アイテム生産ページを表示して内容を見てみましょう。

注目して欲しいのは左上のタブ、それとメッセージの表示画面です。マイアトリエやSCSと同じように、このマイオペレータでもアイテムの詳細な情報を閲覧しながら、コンシェルジュに簡単にメッセージを送信できます。
左上のタブは切り替えることで、アイテムの生産工程ごとの情報を表示されます。

この左上のタブの名前、見覚えがありませんか?
SCSでご紹介した"ボックス"について、皆さん覚えているでしょうか?

お気付きの通り、SCSのボックスとマイオペレータのタブは連動しています。

SCSで[概要〜見積もり]ボックスが作られれば、マイオペレータで[相談]タブが作成され、
SCSで[サンプル作成ボックス]が作られれば、マイオペレータでは[サンプル]タブが作成されます

このように連動して、SCSで入力された情報がマイオペレータで連携・表示されています。



スケジュールや発注仕様書、工賃など、衣服生産に必要な情報はこのタブを切り替えながら一通り確認できます。その他細かい部分はメッセージのやりとりで簡単にコンシェルジュに相談可能です。
随時この画面に情報が反映され、またサプライヤー側でも進捗を入力することで、アイテムの生産管理が行えます。

工場全体のスケジュール管理

1つずつのアイテムの生産管理画面に加えて、それらをまとめて管理するカレンダー機能も用意してあります。

カレンダーを使えば、全てのアイテムで予定されている期日についてカレンダー形式で表示して工場全体のスケジュールを見られます。

稼働状況通知機能

縫製工場には繁忙期と閑散期があります。突然依頼が入ってくることも珍しくありません。

画面から月ごとの稼働状況を選択すると、コンシェルジュにメッセージが送られます。直近の稼働状況を事前にここから連絡しておくだけで、シタテル側に繁閑を伝えることができます。簡単に受注相談を調整できます。

トーク

トーク機能ではアイテムを限定せずにスケジュールの調整やその他全体的な(雑な言い方をするなら”ざっくばらん”に、”どんなことでも”)やりとりを行うことが出来ます。システムの改善要求などをトークで教えてくださる工場もあり、とても助かっています。

まとめ

今回の記事でシタテルのシステム紹介は一旦終わりですが、シタテルではシステムの開発・改修を日々行なっています。

このシリーズ記事を書いている間にもSCSと外部ビジネスツールとの連携や工場向けのマイオペマガジンの実装がされました。これからも追加機能がどんどんリリースされます。

引き続き紹介していきますのでお楽しみに!

2018年11月17日土曜日

オンライン衣服生産システム[第3回] - マイアトリエ

11月 17, 2018

ユーザー向けシステム - マイアトリエ

こんにちは!
シタテル株式会社CTOの和泉です。

シタテルのシステムを紹介する記事第3回。今回はユーザー向けのシステム「マイアトリエ」をご紹介します。

マイアトリエは服を作りたいと思うユーザーの皆さまがシタテルにご相談いただく窓口です。

  • 作りたいアイテムの相談
  • 進行中アイテムの状況確認

この2つを オンラインで行えるユーザー向けのシステムになっています。

  マイアトリエ

では実際にアイテムを作ることを想定しながら、マイアトリエを紹介します。

ちなみに、シタテルで生産できるアイテムや生産の流れを知りたい方は是非こちらをご覧ください。

シタテルで衣服を生産する流れ

シタテルで生産可能なアイテム

相談をはじめる

シタテルにご相談いただくのはとても簡単です。

1. お問い合わせの種類を選択

  マイアトリエ

2. お問い合わせ内容のタイトルを記入

  マイアトリエ

3. お問い合わせの詳細を入力

  マイアトリエ

たったの3ステップです。

詳細入力では画像などのファイルも添付できます。

アイテムの作成を希望される方は、似ているものの写真や図面などを添付していただくと、イメージがより伝わりやすくなります。

ご相談いただいた内容に対して、弊社のコンシェルジュがご返事します。コンシェルジュは衣服生産の業界でしっかりとした経験がありますので、信頼してお任せください。

相談を続けてアイテムの詳細を固める

ご相談内容に対してコンシェルジュがお見積りや生産に関するサポートを行います。

  マイアトリエ
  マイアトリエ

チャットの形式で進んでいきますので、スマートフォンなどで確認しながらすばやく相談を行えます。

詳細が決まったら生産の状況を確認しながら進める

衣服生産では、サンプル作成、本生産という2段階の流れを取ります。

各アイテムがどのような状況であるかが共有され、必要に応じてトピックで追加のご相談をいただけます。

  マイアトリエ
  マイアトリエ

複数のアイテムの進捗も確認できます。

  マイアトリエ

以上が、シタテルでのアイテム作成手順です。

工場との連絡や交渉、記事資材の手配などはコンシェルジュが全て行えますので、はじめての生産でも失敗すること無く進められるようになっています。

フロー情報とストック情報

シタテルでは、 コミュニケーションによって生まれる情報の伝達をフロー情報、その結果として決定されることをストック情報として、それぞれが気持ちよく扱えることを意識してシステムの開発を行っています。

ユーザーの方に沢山のボタンから選ばせたり、複雑な数値の入力をさせること無く、自然な会話の中で詳細を決定し、その情報をリアルタイムに共有します。

感性やイメージがとても大切なアパレルの世界ですので、システムによって思考が中断したり乱れたりしないように意識しています。

まとめ

第3回は シタテルがユーザーの皆さんから相談を受けるマイアトリエについて紹介しました。第4回はシタテルが連携する縫製工場に提供しているマイオペレーターについて紹介します。

お楽しみに!

2018年11月10日土曜日

オンライン衣服生産システム[第2回] Sitateru Control System(SCS)

11月 10, 2018

コンシェルジュ向けシステム - Sitateru Control System(SCS)

こんにちは!
シタテル株式会社CTOの和泉です。

シタテルのシステムを紹介する記事第2回。今回はコンシェルジュ向けのシステム「Sitateru Control System(SCS)」をご紹介します。
SCSはユーザーとシタテル、サプライヤーの間のストック情報(決まったことやデータ)やフロー情報(チャットなどでやり取りされるコミュニケーション)の橋渡しをしているシステムで、シタテルのいわば基幹システムです。

SCSの構成

SCSは主にトピック画面とアイテム画面で構成されています。
  • トピック画面 - コンシェルジュがユーザーとサプライヤー、それぞれとやりとりしているメッセージをトピックごとに管理している画面(フロー情報の管理)
  • アイテム画面 - 製作アイテムについて、アイテムごとに情報を管理している画面(ストック情報の管理)
コンシェルジュは基本的にトピックでユーザーやサプライヤーとコミュニケーションし、トピックで決まった内容をアイテムの情報に入力してます。前回の記事でご紹介した「マイアトリエ」からユーザーが送信するメッセージがトピック画面に反映されます。
SCSの役割

トピック画面

コンシェルジュがユーザーやサプライヤーとメッセージのやりとりを行う画面がです。トピックはクライアント(この画面ではユーザーのことをそう呼びます)とサプライヤーに分かれていて、下の画面はクライアントを絞り込んで表示した状態です。やりとりをしているクライアントごとのトピックが並んでいます。
トピック一覧
ここからトピックの個別画面を開いてメッセージの確認、送信ができます。また、個別画面ではそのトピックの参加者、話しているアイテムなどの情報も表示されます。ここからユーザーやアイテムの情報ページに飛んで確認することもできます。
トピック
メッセージはこの個別ページに時系列順に全て表示されています。チャットのようにこのページでメッセージを書いて投稿するという形になっています。もちろんファイルも添付できます。
メッセージ送信

アイテム画面

トピックでやりとりをして決まったアイテムの具体的な内容は、コンシェルジュがアイテム画面に入力し ます。アイテム画面には「概要」と「相談〜概算見積もり」「サンプル作成」「本生産」の3つの工程のボックスがあります。工程のボックスは任意に増やすことができます。(セカンドサンプルや 量産リピートなど)

概要

概要
概要にはアイテムの基本的な情報を入力します。トピックでのやりとりを通じて工程が進むと 対応するボックスを作成します。
ボックス作成

「相談〜概算見積もり」ボックス

ユーザーからの相談を受けると「相談〜概算見積もり」ボックスを作成します。アイテムについての相談内容を、具体的な情報に落としていきます。
相談ボックス
アイテム画面では関連するトピックを同時に確認できるようになっています。フロー情報とストック情報を1画面で確認できるようにすることで 正確で効率の良いコミュニケーションを実現しています。

「サンプル作成」ボックス

具体的なアイテムの内容が決まったら、次は「サンプル作成」ボックスです。サンプル作成に必要な情報を入力します。この情報はサプライヤー向けのシステムであるマイオペレーターを通じてリアルタイムに共有されます。
サンプルボックス1
上記ボックスに 1stサンプル作成とナンバリングされているように、「サンプル作成」ボックスは複数作れます。ユーザーの満足いくサンプル品が完成するまで、何個でもボックスは作成できますし、実際にサンプル品を作成することも出来ます。もちろん、その分のお代は発生しますが、、、
サンプルボックス2
サンプルボックス3

「本生産」ボックス

サンプルが完成したら次は本生産です。
「本生産 」ボックスも「サンプル作成」ボックスと同じように何個でも作れます。再発注が行われる度に、ここで「本生産」ボックスが作成され、サプライヤーへと情報が送信されます。
「本生産」ボックスで発注された内容に基づいてサプライヤーが生産し、完成品をユーザーに納品することでアイテム作成の1サイクルが完了します。
本生産ボックス

まとめ

今回はSCSをトピック画面とアイテム画面に分けてご紹介しました。
SCS (特にアイテム画面のボックス)を通じて、シタテルのアイテム作成の具体的な流れがご理解頂けたかと思います。ユーザーと相談 → サンプル作成 → 本生産が基本的な流れです。
実は、他にも原価計算や裁断報告など ご紹介できていない機能もたくさんあります。また毎週のようにどんどん機能追加されています。 随時このブログで紹介していきます!
次回は、衣服の相談を行うユーザー向けのシステムである「マイアトリエ」についてです。
お楽しみに!

2018年11月7日水曜日

熊本出張に行ってきました

11月 07, 2018
こんにちは!
シタテル株式会社UI/UXデザイナーの堤です。
シタテルは熊本と東京の2箇所にオフィスがあります。
シタテルでは入社して早い時期に東京支社勤務の場合は熊本本社へ、熊本本社勤務の場合は東京支社へ出張します。
■社員交流出張制度
ゼネラル社員として入社した社員は入社1ヶ月後〜2ヶ月経過の間に2泊3日を目安に勤務拠点と別拠点に出張して他拠点メンバーとの親睦を深めていただく制度です(もちろん出張先でリモート業務を前提としています)
10月入社の私は、10月中旬にデザイナー3名+CTOで熊本に行きました!


熊本オフィス


東京オフィス


熊本オフィスのいいところ

  • オフィス周りがうるさくない
  • 人混みをかき分けたり並ぶことがなく通勤のストレスがない
  • 落ち着いた雰囲気の飲食店が周りに多い

東京オフィスのいいところ

  • 周りにカフェやコワーキングスペースが豊富
  • セミナーやイベント会場へのアクセスが楽
  • ランチには困らない

まとめ

近くにいるからこそ生まれる会話はあるものの、熊本でも東京にいるとき同様にZoomやSlackを使用してコミュニケーションをとれるため、とくに不自由なく業務を進めることができます。
人生初の出張でしたが、熊本本社の方々に挨拶ができたり、縫製工場を直接見る機会をいただいたり、熊本名物をいただいたりと充実した4日間を過ごすことができました!

2018年11月3日土曜日

オンライン衣服生産システム[第1回]

11月 03, 2018

はじめに

こんにちは!
シタテル株式会社CTOの和泉です。

今年の4月にそれまで努めていた大学を離れてシタテルに正式にジョインしました。半年近くが過ぎ、いくつかのプロダクトリリースを行う中でお客様とお会いする機会も多くあったのですが、私達が内製でシステムを開発していることや、それを使ってどのように業務を行っているかというのは知られてない事に気が付きました。

ということで、4回の連載で「シタテルのシステム」についてご紹介します!

シタテルが開発しているシステムについて、コンセプトや構成、どのように使われているのかをお伝えします。ベールに包まれたシタテルの内側に興味を持っていただけたら嬉しいです。(そして衣服生産のご相談をいただけたら、、、← 欲)

シタテルとは

シタテルはオンラインで衣服の生産を行うためのプラットフォームサービスです。衣服を作りたいというユーザーの皆さんに対して様々なお手伝いをさせていただいています。また、そのために必要な縫製工場や生地会社、2次加工工場、パタンナー、デザイナーなど様々なサプライヤーと連携しています。

こう言うとシンプルなマッチングサービス(出会いの場を提供してあとはお任せする)のように捉えられることも多いのですが違います!

シタテル社内には上記サプライヤーとユーザーの間をつなぐコンシェルジュがいて、アパレルのプロの方が煩雑だと感じる部分ををお手伝いしたり、はじめて衣服生産に関わる方でも衣服生産の複雑な部分で挫折しないようにサポートしています。なので、マネージド(管理された)な衣服生産プラットフォームと言えるかもしれません。

ログイン

これはシタテルウェブページのトップ画面です。この画面を見ればもう「ここから登録してログインして、オンラインでシタテルとやりとりして衣服を作るんだ」という流れがばっちり想像出来ると思います。

いや、全然わからないですね。すみません。でも、この連載を読み終わる頃にはバッチリわかるはずですので、、、がんばります。

第1回目の本記事では、ログイン後の画面やそのさらに裏側で実際にどのようなシステムが動いているのか。シタテルの「オンラインで衣服生産」とはどこまでを本当にオンラインで行っているのか。その全体像をざっくりとご紹介します。第2回ではシタテル内部でコンシェルジュが扱うSCS(sitateru control system)、第3回ではユーザーがシタテルとのやり取りに使うマイアトリエを紹介します。最後の第4回では連携工場が使っているマイオペレーターについて紹介します。

シタテルで衣服生産する流れ

シタテルで衣服を生産する場面では、大きく分けて3人のキャラクターが登場します。

  • これから衣服を作りたいと思っているユーザー
  • ユーザーの要望をヒアリングして生産を管理するシタテルのコンシェルジュ
  • 実際の衣服製作に関わるサプライヤー(生地や資材を提供する会社も含みます)

ユーザーは、シタテルのコンシェルジュと、作りたい衣服についてやりとりを行います。具体的なイメージが固まると、コンシェルジュがサプライヤーと連携して生産を進めます。
基本的にユーザーとサプライヤーが直接コンタクトとることはなく、コンシェルジュが間に入って両者をサポートします。

登場人物

シタテルではこの3人のキャラクターにそれぞれ専用のシステムを用意しています。

  • ユーザー向けシステム「マイアトリエ」
  • コンシェルジュ向けシステム「SCS(sitateru control system)」
  • サプライヤー向けシステム「マイオペレーター」

この3システムを使って、ユーザーとの相談からサプライヤーへの発注・生産までをオンラインで行っています。それぞれのシステムについて第2回目から個別に紹介しますが、ここでもざっくりと説明します。

ユーザー向けシステム「マイアトリエ」

マイアトリエ

マイアトリエはユーザーが作りたいアイテムについてコンシェルジュと相談するためのシステムです。コンシェルジュとメッセージのやりとりを行いながら、製作状況の確認も行うことが出来ます。アパレルのプロであるブランドから、初めて衣服生産をする方まで全てのユーザーが利用します。

コンシェルジュ向けシステム「SCS(sitateru control system)」

SCS

SCSはコンシェルジュが行う製作進行の全てをサポートしています。ユーザーとのメッセージやファイルによるやり取り、その中でで決まった事項を社内、社外と共有するために整理して入力するための機能が備わっています。サプライヤーへの発注依頼もこのシステムの情報を用いて行います。

サプライヤー向けシステム「マイオペレータ」

マイオペレーター

マイオペレーターは主に縫製工場が使う生産管理システムです。衣服生産に必要な指示書やスケジュールについて一元管理し、発注から納品までサポートします。データはSCSと同期しています。今年の6月から400以上ある提携工場に順次導入し、7割程度の工場に使っていただいています。エクセルなどで管理をされていた工場も多くある中、使いやすく、他社の案件もこれで管理したいなどの声をいただいています。

シタテルのシステム設計思想

上に紹介した3システムは、それぞれが別々に開発されていますが、SCSを中心としてAPIで接続されています。入社してからシステムの設計思想を言語化していく中で私達が作るシステムは他のアパレルITベンダーと何が違うべきであるかを考えました。

生産の管理につかうシステムと言うと、たくさんの複雑な入力項目があって、コンピューターにあれこれ急かされて、というものを想像するシステム開発関係者の方も多いのではないでしょうか?下手をするとめちゃくちゃ横に長いエクセルシートのさらに使い勝手が悪くなったようなシステムになる場合も、、、(大学時代に使っていたものがまさしくそうでした)

シタテルでは「コミュニケーションを促進するためのデータ共有」「入力よりも出力」を重視してシステムの設計、開発を行っています。

世の中にはシステムがなくても電話と帳簿でビジネスができている場面は多くあります。コミュニケーションをとることがビジネスにおいて最重要であり、データをオンラインでやり取りすることは副次的であると、私は考えています。(コミュニケーションが最も大事で普遍的だからこそ、SlackやLINEのようなツールがビジネスの場で重宝されているのだと思います)

そのため、シタテルが開発するシステムでは、メッセージでのやりとりを重要視しています。コンシェルジュは基本的に、メッセージを用いてユーザーや工場とやりとりを行います。生産工程をパターンやテンプレートに当てはめて最適化するのでは無く、それぞれの案件に合わせてコミュニケーションによって解決する。そのコミュニケーションで伝えづらいものをデータという形でシステムが出力して共有する。それに最小限必要な入力項目を作成する。この順序でシステムの設計、開発を進めています。

シタテルは多くのユーザーやサプライヤーをつなぐビジネスを行っています。このようなビジネス形態はアパレルの業界では珍しいようです。そのため、1つの会社のオペレーションを極限まで効率化するためのシステムではなく、多くのプレイヤーが一緒に働きながらビジネスを進めていくシステムが必要であり、それを自らの手で作り上げています。

まとめ

シタテルがユーザーとの相談依頼からサプライヤーへの生産発注まで独自のオンラインシステムで行なっていることを紹介させていただきました。嘘偽りのない「オンラインでの衣服生産」だと思っていただけましたか?

次回からはもっと具体的に、マイアトリエ、SCS、マイオペレータを、それぞれのシステムごとに紹介します。

お楽しみに!