添えられてるメッセージも良い!乗車完了後の画面。2018facebooksitateruでサービス・プロダクトを担当している北爪です。インフラを見ることもあり、ec2サーバーのアドレス管理についてCLIで行う方法を紹介します。目的ec2のインスタンスはアドレスが構築するたびに変わり、負荷や新しいプロジェクトが立ち上がると増えたり減ったりします。そのため、動的にサーバーアドレスを取得する必要があります。filterのpecoを使って、SSHまでおこないます。キーワードで絞るSSHするサーバーを選んでEnterを押すSSHコマンドがはかれる準備zshを使っているのを前提に説明します。CLIから、ec2をリスト化するコマンドを作成し、shellに設定します。clear-screen}さらに、好きなキーにバインドします。peco-ec2まとめec2をリスト化し、すぐにそこからsshを選べるようにしました。2018facebookこんにちは。シタテルでエンジニアをしている熊谷です。SPECというサービスのバックエンド開発(Rails)を行っています。前にAlexaスキルの作成を試したので、その流れを簡単に説明していきます。手順1.Amazonアカウントを用意するすでにamazon.co.jpの開発者アカウントがある場合は、それを使います。お買い物用のAmazonアカウントを使用して、開発を開始できます。Developerから、サインインして、情報を入力すると、開発用アカウントが登録されます。画像のページで、ログインをして進みます。Developerアカウントを作成]から進むと、amazon.com用のアカウントになってしまい、US向けのスキルになってしまうようです。Lambdaが推奨されているので、Lambdaでエンドポイントを作成するのが良いと思います。リクエスト、レスポンスはJSON形式で送信します。作成したLambdaのARNを指定します。6.インテントを作成する[インテントを追加]をクリックし、カスタムインテントを作成します。クエリー(文字列)などの型を指定できます8.インテントを設定する作成したインテントの設定で、サンプル発話を登録します。サンプル発話には上で作成したスロットを{スロット名}のような形で使用できます。これで簡単なスキルを作成できました!今回はざっくりした流れの紹介なので、ここまでにしたいと思います。次回はLambdaの内容や、作成したスキルの公開、テストなどを説明していこうと思います。2018facebookこんにちは、あさのです。Storageの記事を書きましたが、今回もそのネタで行こうと思います。Storage管理に移行したときのお話です。データ構造Paperclipではファイルのデータは各モデルのカラムに保存されています。userクラスのiconというファイルであれば、userテーブルに以下のようなカラムがあります。Storageでは全クラスの全ファイルをまとめて2つのテーブルで管理します。prof.jpgというファイルだと以下のようなレコードになります。関連づけられるんですね。19:23:03データ移行さて、それぞれのデータ構造がわかったのでマイグレーションをしていきます。このあたりの記事を参考にさせてもらい、rakeタスクで実装しました。Storageのテーブルに入れるという繰り返しです。Storage用に書き換えた後ではこのタスクは動かないので、Paperclip時に実行する必要があります。実際にやったところ数万件のデータがあったために5~6時間かかるという大引っ越しになってしましましたが、なんとか乗り切りました。Storageのデータ移行について書きました。Storageネタで書けるかもしれません。2018facebookこんにちは!シタテル株式会社CTOの和泉です。@shinobu_shiva今回は研究開発的に、「縫製工場の類似度算出を深層学習のモデルでやってみた」について書きます。成功?なにが?って話ですよね。結果的には全然精度出ませんでした。のべ1週間ぐらいでやってみた感じですし、サーベイも全然できてないので結果出るわけないのですが。やってみたのでブログに恥を晒しておきます。その道の専門の方にはお目汚しかと思いますがご容赦ください。データを教師データとして学習し、同様の類似分類を行える学習済みモデルを作成する。類似分類ができれば、これまでのアイテム作成履歴から代替となる工場の提案ができる。判定に用いられる特徴はある程度絞られているのではないかと想定し、学習によって効果の高い特徴が反映されるモデルが作成されれば、人の判断に近づけるのではないか。教師データに対しては98.8%の正答率に達したが、テストデータについては69.6%にとどまった。残念ながら実用に足るような結果は得られなかった。何をやったのかデータベースに保有する123の縫製工場を2次元平面上で類似しているものを近くに配置するように、弊社コンシェルジュに依頼して教師データを作成。(図1の青い点が各工場を表す)この際、「類似している=あるアイテムを相談するときに変わりに相談できる工場であるか」とした。作成された教師データが含む縫製工場データは114件。9件は情報不足により配置できなかった。作成した教師データは各工場ごとに位置ベクトルが与えられた状態になっている。この位置ベクトルを各工場がもつ特徴ベクトル(全313次元のうち、名前などヒューリスティックに取り除けるものを除いて、108次元)から求めるモデルを学習により獲得した。代替工場を考える際には、アイテムによって代替として扱うものが変わることが想定されるため、全体を2次元平面上に次元縮退してプロットすることが難しいであろうことは当初予定していたとおりであった。今回は、比較的手軽に作成できる教師データを用いて試してみたが、十分な結果は得られなかった。統計によるリコメンドではデータの量が問題になるが、良質で量のあるデータが十分にないのが現状。シタテルの取扱量が増えることによりある程度のデータは蓄積されていくが、滝行との連携も含めて扱えるデータ量を増やしていくことが必要である。工場データベースについてシタテルは500を超える縫製工場やサプライヤーと連携して衣服づくりサービスを提供しています。それぞれの縫製工場に対して、設備や人員、アイテムごとの金額感、繁閑の目安など300を超える情報をデータベースに格納しています。弊社コンシェルジュはこれらのデータを使ってご相談いただいたアイテムごとに最適な工場に問い合わせを行います。2018facebookこんにちは、シタテルの茨木です。ECR/ECSにデプロイする為の設定例を紹介します。Nuxt.jsアプリ用に作ったものですが、言語やAPサーバが違っても共通の部分がほとんどです。PRマージからの自動デプロイ、いいですよね。https://circleci.com/docs/2.0/ecs-ecr/https://github.com/CircleCI-Public/circleci-demo-aws-ecs-ecr基本的にはCircleCI公式ガイドの上記リンクを参考にしていますが、元ネタはterraform前提だったりでなかなか大仰です。(下記に説明漏れがあったら原典を見てください...)今回紹介するのはリンク先のスクリプト類を簡素化し、少し機能を追加(リポジトリ名からデプロイ先の環境面を切り替えできるように)したものです。以下で省略しているけれど必要なモノECS/ECRの設定これだけで別の記事が書けてしまうので割愛しますecsTaskExecutionRoleの割り当てとか忘れがちですかねgithubリポジトリ言わずもがな。CircleCIとの接続設定はされているものとしますDockerfileリポジトリのルートに。Dockerfileの書き方は解説しませんrequirements.txtリポジトリのルートに。docker-image~省略~さっそくですがビルドジョブです。circleci/node:10-stretchnode:10を使っていますが、これはビルドする対象がNuxt.jsアプリだからですね。./deploy.sh~省略~デプロイジョブです。$BASH_ENVブランチ名に応じた値(developブランチなら"dev")を環境変数に入れています。fi}deploy_clusterデプロイジョブから呼び出すスクリプトです。runする際に引数として付与され、docker内のアプリから環境変数として参照可能になります実際には、nuxt.config.js内でTARGETを参照し、APIサーバの向け先を切り替えたり等しています以上、ご参考になれば幸いです。2018facebookこんにちは!シタテルでエンジニアをしている建山です。工場向けのマイオペというシステムの開発を行っています。シタテルでは、チームがプロダクトなどでわかれており、今担当しているマイオペチームでは、デザイナー、エンジニアが一緒になって開発をしています。その中で、「マイオペ触る会」というのを隔週で行っています。その取組の目的や方法をご紹介します。マイオペ触る会って普段開発しているプロダクトを、開発しているメンバー全員でユーザーの気持ちになって操作する時間を設けています。目的としては、以下のような感じです。・ユーザーの目線に改めてなって自分たちが作っているものを使うことで、気づいてなかったユーザーの課題やUI/UXの問題を洗い出す・ユーザー目線を忘れないようにする意識付け方法として、それぞれ行いたい時に非同期でやろうとしたのですが、開発の忙しさに追われてやらないことがあったため、みんなで同じ時間に集まって行うようにしています。マイオペチームは拠点がバラバラなため、触る会の際は、zoomを繋ぎっぱなしにして話しながら進めています。以下のような、googleスプレッドシートを活用し、どういうストーリーで操作したかの簡単な説明、画面ごとの問題や気になったことを各自書いていきます。終わった後はgithubでイシュー化して、議論検討したり、ユーザーインタビューしてみたり、開発計画に組み込んで進めたりしていきます。やっていてよかったこと目的にも書いていますが、開発しながら毎日自分たちのつくっているものには触れ合っていますが、あらためて、ユーザーの気持ちになっと触る時間を設けると、また初心に帰ることができるし、新鮮な気持ちでユーザーの課題が見えることもあります。チーム全体でもユーザー目線で活発な議論が発生していると感じていてやっていてよかったと思う点ばかりです。まとめ今回は、チームで取り組んでいる「触る会」をご紹介しました。チームでは他にも、いろいろな取組をしていますので、また追々紹介したいと思います。チームや状況に合わせて、引き続きいいやり方を模索しながら改善していきたいと思います!優秀なUI/UXデザイナーがチームにいますので、きっと記事を書いてくれると思います。2018facebookこんにちは!シタテル株式会社エンジニアのいしづかです。シタテルは熊本と東京の2つ拠点があり、エンジニアもそれぞれいます。週に2回はリモートワークも認められているため、物理的に人が集まらないことは、もはや日常です。毎日の朝会や、様々なミーティングなどがオンラインビデオチャットで行われています。シタテルではZoomというソフトを使っていますが、ここで悩まされるのが周囲の雑音です。「発言時以外はマイクをミュートにする」というルールはあるものの、電話が鳴るとそっちの音が勝ってしまうこともしばしば。プルルルルルルル!!!」ツライ。そんな中、Krispというノイズキャンセリングのソフトがイイ!と聞いたので使ってみました。結論から申し上げますと、なかなかよかったです。KrispKrispは元TwilioのエンジニアだったDavitさんらが開発したアプリで、周囲のノイズ音を除去してくれます。ディープラーニングを用いて、ノイズ音をリアルタイムに除去しているそうです。動画が出てましたが、パトカーのサイレンが鳴り響いていてもクリアに通話できているというスゴさ。これはWeb会議の救世主ではなかろうか・・・!残念ながら今現在ではmac版しか無いので、それ以外のOSユーザーはこのオドロキを体験頂けませんが、シタテルの開発陣は全員mac利用者なので問題ナシです。!!インストールはこちらのページより。freeなので無料で使えます。pkgファイルが落ちてくるのでインストールします。ONにすれば準備完了です。↑これはZoomの設定画面ですが、マイクとスピーカーにKrispがいるので、それを指定します。使ってみる東京のエンジニアとZoomをつないだ状態で、以下のことをやってみました。談笑しているところにmacbook片手に近づく目の前で蛇口をひねって水をジャーっと出してみる会社の電話を鳴らしてもらう結果は良好でした!!すぐ周りは談笑しているのに「その部屋に他には誰もいないと思える」ほど静かだったそうです。蛇口の水音、全然しない、と!!マジですか!!もう手放せません。まとめWeb会議は環境がものすごく重要です。雑音が多くて声が聞き取れないとかなりのストレスになります。Krisp入れたばっかりなのでまだまだ試さないといけないですが、みんな入れてこそ価値が発揮されるので、これから布教活動をしていこうと思います。他にどのような工夫ができるか快適なミーティングをやるために、飽くなき探究を続けていきます。2018facebookこんにちは!シタテル株式会社UI/UXデザイナーの田仲です。今回はシタテルのデザイナーが使っている、デザインツールをご紹介します。Sketchデザインの作成はSketchをメインで使っています。去年まではPhotoshopがメインでしたが、下記で紹介するAbstract導入をきっかけに、Sketchをメインにしました。Photoshopに比べると、とても軽いのでストレスなく使える点が気に入っています。アップデートが頻繁にあるため、その度に少し迷うこともありますが、アップデートでの変化を発見することが楽しみのひとつでもあります。便利なプラグインもたくさん出てきているので、個人で試してチームにも導入していけたらと考えています。AbstractSketchのバージョン管理ツールです。同じSketchファイルを複数のデザイナーが修正したり、サポートしあえるようにしています。先日SketchのバージョンにAbstractが追いついていないことがあり、気がつかずSketchのバージョンを上げた時にSyncできない問題が起きてしまいました。(その時はSketchダウングレードして解決しました。)気軽にSketchのバージョンを上げられないという点は、微妙だなと感じています。現在は複数人で作業しているプロジェクトは1つしかいない状態なので、もう少し共同で作業するプロジェクトを増やし、お互いの知見を増やすことにも活かしていけるような使い方をしていきたいなと考えています。CloudPhotoshopやIllustratorは、Sketchでは作業しにくい写真の加工、パネルや印刷物の作成を中心に使っています。他にも、XDは気になる機能が次々に出ており、将来的にツールをAdobeに集約できると、データの互換性やコストなどの面でメリットがあると考えています。AbstractとSketchの方が便利だという結論から移行は考えていませんが、最新動向には日々注目しています。Zeplinデザイナーが作ったデザインをエンジニア確認できるツールです。開発内でのレビュー、最終的にエンジニアが実装するときに使っています。コメントができる点はinVisionと変わりがないのですが、サイズやカラーコードがわかるだけでなく、アイコンのダウンロードなどもできるので、デザイナーとエンジニアのやりとりを減らすことができています。今後はよりエンジニアとどうやったらもっと便利になるかを話し合い、ガイドラインなどとしても活用できるようにしていけたらと考えています。InVisionプロトタイピング・レビューに使用しています。InVisionはコードなどの情報がないので、デザイナーとエンジニア以外の生産や営業などのメンバーがレビューに参加する際に使っています。シタテルでは開発以外の職種のメンバーともデザインの段階から頻繁に意見を交わしています。これからも部署問わず、よりよいプロダクトをつくり上げるためにコミュニケーションを活発にしていけたらと思います。以上、シタテルで使っているデザインツールのご紹介でした。usシタテルのミッションはテクノロジーとイマジネーションで「ひと」と「衣服」の新しい未来をつくること。クラウドシステムを使うように服作りのリソースを誰でも好きなときに好きだだけ使えるプラットフォームを目指しています。Storage移行記:バリデーション編こんにちはあさのです。Storageに移行したときの話を書こうと思います。Paperclipはファイルアップロード用のGemです。https://...SQLite3でWindow関数を試してみた!はじめまして、DevOpsチームの甲斐です。何かブログのネタはないかなーと思っていたところ、たまたま以下のニュースを発見しました。ECSに自動デプロイする(おまけで環境面の切り替えも)こんにちは、シタテルの茨木です。ECR/ECSにデプロイする為の設定例を紹介します。Nuxt.jsアプリ用に作ったものですが、言語やAPサーバが違っても共通の部分がほとんどです。