サクサク読めて、アプリ限定の機能も多数！
トップへ戻る
アメリカ大統領選
blog.spacemarket.com
こんにちは、最近急に寒くなってきて活動領域が狭まっている荒田です。夏が恋しいですね。 さて、今更ながら便利なnpmコマンドを紹介したいと思います。本当は全てのnpmコマンドを紹介しようかと思ったのですが、使わなそうなコマンドがたくさんあったのでよく使う・便利なものをご紹介できればと思います。 初期化 npm-init ← 新規プロジェクトフォルダーとpackage.jsonが新規作成される package nameやversionなど聞かれるので必要に応じて入力します。デフォルトでよければEnterもしくはyを連打。 package name: (test) version: (1.0.0) description: entry point: (index.js) test command: git repository: keywords: author: license: (ISC)
フロントエンドエンジニアの小牧です。 先日、SPACEMARKET Tech Meetup #2 で GraphQL の Mutation 実装について話しました。 今回はスライドにもある Mutation の実装例について触れていきたいと思います。 Apollo Client と react-apollo GraphQL のクライアントは Apollo Client を使用しました。 Apollo 公式ドキュメントが充実しています。 少し前にデザインが一新されて個人的にとても見やすくなりました。 React との連携は react-apollo を使用しています。 react-apollo で Mutation の実装を行う方法は1つではありません。 graphql 関数を使用した方法や Mutation Component 使用した方法があります。 どちらを使うかは採用しているアーキテ
こんにちは、エンジニアの藤田です。 最近は趣味で iOS 開発に挑戦しています。 体験したことない DX に戸惑いつつも、新しい言語やフレームワークはわくわくがいっぱいです！ とはいえ、iOS 開発を進めていたら API が欲しくなって、気がついたら API の実装を凝り始めてしまっている今日この頃です。 さて、前回の私のエントリーでは AWS CodePipeline で CI/CD の仕組みを構築したお話 をご紹介しました。 今回のエントリーではこの CI/CD のインフラ・仕組みを 別環境・別サービスに横展開する ために行った 「terraform を使った Infrastructure as Code 実践」についてご紹介します。 terraform とは HashiCorp社が開発している コードからインフラを作成/コードでインフラ構成を管理する ためのツールです。 ここでいう「
こんにちは、CTOの鈴木です！前回のブログ執筆から気がつけばなんと2年経過！今回はスペースマーケットのメインであるWebサービスとアプリ部分の技術スタックについてまとめてみようと思います。 技術スタックについては定期的にまとめており、変遷については以下の記事に書いています。 2016年 スペースマーケットを支える開発環境とアーキテクチャ – 2016年秋編 2017年 スペースマーケットの技術スタック【2017年末版】 前回2017年からの差分としてわかりやすいように、新規追加は太字、撤退したものに関しては取り消し線をつけてみてます。それでは見ていきましょうー。 Web Frontend 言語 Javascript Typescript GraphQL 言語としては、Universal Javascriptを引き続き推奨し、プロダクト施策などに絡めてTypeScriptへの移行を進めていま
GraphQLとマイクロサービスは相性が良さそうな件 〜Apollo Federationを用いたスキーママージについて〜 こんにちは バックエンドエンジニアの西尾です。 スペースマーケットではバックエンド側は長らく単一のアプリケーションで構成されていましたが、去年くらいからマイクロサービスアーキテクチャーへの移行を進め始めました。 すでに本体(Main)と検索機能(Search)(※1)は分離されていますが、現在は本体から予約部分を切り出すことを行なっています。 （※１： 元の本体のバックエンドAPIのことをMainまたはv2, Mainから部屋の検索などを担う部分だけを切り出したサービスをSearchと記載しています。) 切り出すにあたり、考えなければならないことはたくさんあるのですが、今回はその中で 複数サービスに分離されているデータを合成し、クライアントに単一システムだった時と同じ
こんにちは、エンジニアの奈良です。最近よく使うアプリはDELISH KITCHENです。 料理初心者には「たまねぎがしんなりするまで」の「しんなり」がどれぐらいかを動画で確認できるのはありがたい。 出会い ある日、こんなニュースや記事を発見しました。 https://pullpanda.com/github https://tech.studyplus.co.jp/entry/2019/06/18/154711 ニュースはGithubがPull Pandaを買収した件、 記事はPull Pandaを導入した事例を紹介する内容でした。 タイミングとしては、買収がされた間もない頃だったと思います。 買収以前に、自分はこの時点で初めてPull Pandaの存在を知りました。 Pull Pandaとは Pull Pandaを簡単に紹介すると、 以下の3つのGithub PullRequestに対す
こんにちは、エンジニアの藤田です。 私事ですが、2018年の11月に入社してから半年以上が過ぎました！ 自分の入社エントリーを読み返してみると 入社から半年以上たった今も自分が思うスペースマーケットへの魅力は変わっていないような気がします。 しかしながら、入社早々いろいろなことを任せていただいたこともあり、スキル面はだいぶ変化がありました！ 今回は私がスペースマーケットに入社一ヶ月で、いきなり任された AWS CodePipeline を使った CI/CD の自動化について書こうと思います。 入社したてでシステムの構成もまだ把握していない段階でも、 AWS CodePipeline の力を借りて、比較的簡単に CI/CD を構築できました。 AWS CodePipeline とは AWS の公式ドキュメントから引用すると AWS CodePipeline は完全マネージド型の継続的デリバリ
こんにちは、Webエンジニアの山本です。将来の夢はスパイダーマンです。 先日SPACEMARKET EVENTというサービスのバックエンドAPIをRESTful APIからGraphQL APIに完全移行しました。 ※GraphQLとはなんぞやという方はgfxさんの記事が非常に詳しいです。 以前は参照系がGraphQL、更新系がRESTと役割を分けていたのですが、この移行により更新系もGraphQLで行う形になりました。 APIを移行する上での難点の一つが画像（等ファイル）のアップロードです。 GraphQLではサーバーへのデータの受け渡しには一般的にJSONが使用されます。 htmlのform submitやjsのFormDataオブジェクトを使用するなどエンコードタイプがmultipart/form-dataであればバイナリデータを送信できますが、JSONではバイナリデータを扱うことが
こんにちは、Webエンジニアの鈴木です。 最近NBAプレイオフに触発されて3年ぶりにバッシュを新調しましたがまだ一度も履けていません。 エンジニア未経験からスペースマーケットに入社してあっという間に半年が経過しようとしています 日々の実装に追われて基礎知識がおろそかになっているのを痛感しているので、先輩エンジニアの山本さんが前回紹介していた書籍などで基礎固めの日々です。 基礎といえば、コーディングにおいても「最低限これだけは守ってもらいたい基本ルール」をもとにコードを書く方が良いとされています。 特にチーム開発の場合、エンジニアごとにコーディングのスタイルが全く異なってしまうと以下のようなデメリットがあると思います。 コードリーディングしにくく、実装の理解に時間がかかる コードレビューの際に共通認識がないため、指摘事項の線引きがあいまいになる そこでスペースマーケットでは、RuboCopと
こんにちは、Webエンジニアの山本です。得意科目は生物です。 私は2017年の頭にスペースマーケットにジョインしたのですが、それまではエンジニアとしての業務経験はありませんでした。 未経験で採用されるまでと入社後にどのような経験を積んでスキルを伸ばしたかなどをとりとめなく書きたいと思います！ エンジニアへの転職を目指されている方や、スペースマーケットならどのように成長出来そうかを知りたい現役エンジニアの方の参考になれば幸いです。 入社まで 高校時代に始めた男子シンクロのパフォーマーをしたりインストラクターをしたりなんやかんやとしたあと、2年半ほどWebディレクターをしていました。 WebディレクターとしてはUX設計や制作進行業務に携わっていたのですが、身近でエンジニアの方を見ていて自分もあんな風に1から作れるようになりたい！と思ったことが転職のきっかけです。 ここからは通常独学かスクールに
フロントエンドエンジニアの万谷です。 スペースマーケットではより早く、より検索しやすくするために、年末にトップ画面や検索画面のリニューアルを行いました。 検索を高速化する一環として、検索用のAPIが切り出され、GraphQLで引けるようになりました。 このあたりの話は、以前のミートアップで話がありましたので、詳しくはこちらをご覧ください。 というわけで、iOSアプリでもその恩恵を受けるため、GraphQLを引けるようにすべく、導入＆実装を行いました。 これからiOSアプリでGraphQL引くぞ！という方の役に立てば幸いです。 2019/05/09: apollo-tooling@2.10.3に対応した内容にアップデート 導入 apollo-ios導入 弊社ではWebですでにGraphQLを活用しており、そのライブラリとしてApolloを使用しておりました。 iOSアプリでもいくつかライブラ
こんにちは、エンジニアの柿木です。 今回は、スキーマ駆動のAPI開発について投稿します。 スキーマ駆動のAPI開発とは？ スキーマ駆動のAPI開発とは、「最初にスキーマの設計をし、APIの開発者と利用者がそのスキーマを中心に開発を進めていく手法」と言えるかと思います。 スペースマーケットで最初に私が取り入れてみようと思ったきっかけは、昨年12月に発行されたWEB+DB PRESS Vol.108｜技術評論社の特集を読んだことがきっかけでした。 スキーマ駆動開発導入のモチベーション 以前のブログや勉強会でも紹介されていた通り、弊社では、GraphQLを採用しています。 RailsでGraphQL APIを作る時に悩んだ5つのこと 検索のMicroservices化 with Apollo Server – Speaker Deck GraphQL GatewayをNode.jsで作ってる話
こんにちは、エンジニアの玉川です 開発をする上で必要になる仕様書。 開発者は仕様書の大切さを一番知っていると私は思います。 仕様書の管理方法は会社によって様々でしょう。 弊社では、仕様の運用管理にGitHubを使用し、仕様書の形式をマークダウン形式で作成するようにしました。 今回はそのTipsについて書いていきます。 仕様書管理で直面した2点の問題 仕様書等のドキュメント管理はエクセルなどで管理されることが多いと思いますが私は2点問題があると考えています。 1. 仕様の変更があったが仕様書の変更をしたかどうかがわからない 2. 作成者のリッチテキスト編集能力に差が出てしまい、編集だけに時間がかかり使わなくていい時間が大幅にかかってしまう この2点を解消するために、 管理をGitHubに。仕様書をマークダウンで書いていくようにしました。(今回はGitbookは使用しませんでした) 2つを選ぶ
こんにちは。バックエンドエンジニアの西尾です。 スペースマーケットではAPIサイドは主にRailsを利用していますが、最近は一部サービスでNode.js+Typescriptを使い始めました。 個人的にはまだ触れていなかった領域であったのでお勉強がてら簡単なコードを書いてみたいと思っていました。 また、Node.jsの他にもう一つ最近気になり始めていたものにClean Architectureという設計思想があり、Clean Architecture 達人に学ぶソフトウェアの構造と設計を読んでいます。 本の概要は、アプリケーションが成長するに従い徐々に改修コストが上がってしまう、これを防ぐためにはうまい方法、つまり良い設計を知っている方法があるという導入から始まり、設計の歴史、原則とそれを実現するための１手段としてClean Architectureという設計思想について語られています。
こんにちは。 社内で勧めてもらった海外ドラマ、シリコンバレーを見終えてしまい、今更ながらSTEINS;GATE（ゼロではない方）を見始めた原口です。 先日、スペースマーケットのサイトがリニューアルされました！ スペースマーケット | 貸し会議室から球場までレンタルスペース簡単予約 | スペースマーケット 皆さま、もうチェックはしていただけたでしょうか？ 多くの改善を行い、より使いやすいサイトに生まれ変わりましたので、是非一度チェックしてみてください！ 本日はリニューアルを迎えるにあたり、主にマークアップ部分を担当した私が普段使用しているスタイリングについてのお話をさせていただきます。 今回お話すること calc vw/vh flexbox position: sticky 番外編：colorの指定 calc プロパティの値を計算することができるcalc。 +（加算）、-（減算）、×（乗算）
みなさん、こんにちは。 オーブントースターでパンを焼くと必ず焦がしてしまうエンジニアのたまがわです。 みなさま、調子はいかがでしょうか。 本日は、 ちょっと前にトレンドにもなった、PWA(Progressive Web Apps)機能の一部実装を行った話をしていきます。PWAについて書こうとすると長くなってしまうので、実装した機能にスポットを当てて書いていきます。 今回書くこと ServiceWorkerの登録 Web App Manifestの作成 OneSignalを使用したプッシュ通知について 今回は書かないこと App ShellとContentについて キャッシュについて HTTPS対応について 下準備 作業を始める前にGoogleCodeLabを何回も読み、PWAについて徹底的に調べます。 なるほど、難しそうだ。といきなり心を折られそうになりました。私は。 GoogleCode
こんにちは。 フロントエンドエンジニアの玉川です。私ごとで恐縮ですが先週、入籍しました🎉 家では家事を積極的に行っていつでも主夫になれるレベルまで上がってきました。 みなさま、調子はいかがでしょうか？季節もすっかり肌寒くなってきましたね。風邪はずっと引いています。 今日も私は絶好調です。 さて本日は、 Google Play Servicesの1つでもあるSign-inを使ってOAuth認証を行うまでを共有したいと思います。 今回記載しないこと Firebaseについて Firebaseを使用して認証を行うことも可能ですが、今回は割愛させていただきます。 Googleファイルを取得する まずはGoogleDeveloperConsoleで認証情報の作成・設定を行います。 1.「認証情報を作成」で「OAuthクライアントID」を選択。 2.アプリケーションの種類を「Android」にし、証
こんにちはデータエンジニアの小林です。 データ分析をしたいときにログデータと事業DBをデータウェアハウスに入れてSQLでJOINをしたり したいと思います。事業DBをBigQueryなどのデータウェアハウスに入れればできるんですが やり方がいっぱいあって悩むと思います。 今日はGCPに最近リリースされたCloud Composerを使ってMySQLにあるデータをBigQueryに同期させる方法を書きます。 対象読者 airflowやworkflow engineなどの概念を理解している方。 Cloud Composerとは？ Cloud Composer(以後Composer)はGCP上でボタン1つ押せばairflowというworkflow enginzeをGKEに立ち上げてくれるサービスです。 今回airflowでやること Composerの立ち上げ DBからデータを取得してGCSにjs
こんにちは。 エンジニアの奈良です。 スペースマーケットでは、現在マイクロサービスへの移行を進めています。 はじめはシンプルな単一のrailsアプリだったのですが、サービスが大きくなり、複数のプロジェクトを並行して開発を進めるにあたって、フロントエンドとバックエンドだったりサービスごとだったりと、どんどん機能・サービスの分離が進んでいます。 その一環として、スペースマーケットでは直接EC2上でシンプルに動作させていたrailsの機能をnode.jsに移行・Docker化し、ECS上で動作するよう移行を進めています。 新規サービスでは、はじめからECSで作成できるのですが、既存でかつ多くのページを持つサービスだと、影響やタスクの優先度なども鑑みて、一気に移行するのではなく徐々に移行する必要があります。 その中で、同じドメインを使用しつつも、ある画面では既存のEC2を、別の画面ではECSが動か
こんにちは、フロントエンドエンジニアの万谷です。 今回は複数サービスのWebフロントエンドを運用する際のリポジトリ構成についてお話します！ 特にmonorepoかmanyrepoか悩んでいる方の助けになれば幸いです。 なお、今回出てくるリポジトリは全てWeb開発をベースにしており、その点からnpmパッケージの話が出てきますので、そのあたりは適宜読み替えていただければと思います。 はじめに スペースマーケットでは、これまでreact-railsを使った時間貸しとそのホストダッシュボードを1リポジトリで管理してきました。 そんな中2017年9月に民泊スペースを取り扱う「SPACEMARKET STAY(以下STAY)」から脱react-rails化し、Node.js+React.jsの単体のフロントエンドリポジトリが生まれ、続けて2017年11月に法人向けの「SPACEMARKET BUSIN
2019/9/25 GraphQLとマイクロサービスは相性が良さそうな件 〜Apollo Federationを用いたスキーママージについて〜
エンジニアの柿木です。 今回はスペースマーケットでのチケット対応(問い合わせ・バグ報告)との向き合い方についてご紹介します。 チケット対応は、各社、体制や取り組み方が異なると思いますが、我々のようなスタートアップの場合、リソースが限られているので、通常の開発業務を行いながら、並行して行うことがほとんどかと思います。 なるべく仕組み化することで、イレギュラーなタスクもスタックさせずに消化していくことが大事ですが、そのあたりの工夫なども参考になれば幸いです。 チケット作成の流れ まずは、チケット作成の流れについてです。 スペースマーケットでは、チケット管理にTrelloを使用しており、チケットの種類によって、ボードを分けて作成してもらっています。 チケットの種類 1. 質問・仕様確認 2. 緊急(サービスとしてすぐに対応する必要がある) 1. 質問・仕様確認 ユーザーからの問い合わせをもとにC
こんにちは。エンジニアの堀です。 先日の社員合宿での自由参加のアクティビティで乗馬体験をして内腿が筋肉痛です。 今回はスペースマーケットではエンジニアとしてどのようなスキルセットが求められ、また入社してから今日までにどのように身についていったか紹介します！ 転職活動でスペースマーケットを考えているエンジニアの方や、今後若いエンジニアをどうやって教育していこうか考えているマネージャーの方などの参考になればと思います。 スキルマップ スペースマーケットでは大体半期ごとにエンジニア全員で、メンバーそれぞれのスキルセットを確認し、それをスキルマップとしてまとめています。 スキルの度合いは ⭐：スペシャリスト 一人でできる 技術的な仕様にも詳しい チューニングやパフォーマンス対策もでき、先進的な内容での技術発信もできる ＋シニアのスキル ◎：シニア ある程度一人でできる 人に教えられる コードのレビ
こんにちは、Webエンジニアの山本です！ 我が家のGoogle Homeは「ゴリラつけて」とお願いすると間接照明のスイッチをオンにしてくれます。みなさんもぜひどうぞ。 さて今回はソーシャルログイン機能の実装の話です。 Node.jsにおけるユーザー認証のデファクトと言えるPassportを利用して、facebook・Google・Twitter（以下provider）の認証機能を先日実装したのですが、実装中に知りたかったな〜と思うことを書いていきますので参考にしていただければ幸いです。 書いたこと 各providerからユーザー情報を取得する上での実装の共通化についてをメインに書きました。弊社ではフロントエンドのWebフレームワークとしてExpressを利用していますので、サンプルコードもExpress前提となります。 書いていないこと 各providerへアプリを登録する手順については触
PhotoshopからXD、さらにSketchへ…Atomic Designを実現させるまでにぶち当たったデザインチームの苦悩 デザイナーの横井です。こんにちは！ 猫飼いなのですが猫に顔をうずめるのが難しい季節になってまいりました（毛まみれ） 久しぶりのデザイン記事となりましたが、今日は弊社デザインチームが行ったAtomic Designのシステム化の紹介と失敗体験、そしてその道のりを、赤裸々にご紹介しちゃいたいと思います。 既に完成したデザインのコンポーネント化に悩んでいる方々の参考に、少しでもなれば幸いです。 初期のスペースマーケットデザイン ゴリゴリのPhotoshopデザインだった時代 弊社のメインサービスである、スペースマーケットのデザインは約3年前にリニューアルリリースされました。 当時は全てPhotoshopでデザインされ、１ページにつき１ファイル、スマートフォンもPCも別フ
こんにちは。Webエンジニアの仁科です。 スペースマーケットでは先日、特集ページという新しい機能をリリースしました。 特集ページではスペースの利用シーンの提案やその利用シーンに適したスペースの紹介しています。 今回の記事では特集ページについて実装や技術スタックなどエンジニア目線での話をしたいと思います。 特集ページの目的 まずは今回リリースした特集ページの目的について紹介したいと思います。 レンタルスペースを利用するという習慣は次第に世間に広まってきていますが、まだまだ認知度を上げていく必要があります。 「レンタルスペースってどういったときに使うの？」 「花見ってレンタルスペースでやることもできるの？」 このように、まだレンタルスペースを活用していない方に具体的な利用シーンを知ってもらうために今回の特集ページを作成する運びとなりました。 特集ページでは『イベントの詳細』や『おすすめスペース
フットカバーソックスを洗濯をすると片方必ず無くなります。あれはどこへ行ってしまうのでしょうか？ こんにちは、エンジニアの玉川です。みなさまいかがお過ごしでしょうか。 さて、今日は前回のandroidの内容とは打って変わって、 ReactNativeの開発終盤で必要となるipaファイルの書き出しを自動化した話をしようと思います。 React Nativeでの開発 少し前になってしまいますが、5月10日にスペースマーケットにスペースを貸し出す、ホストの方のためのアプリをリニューアルしました！ ゲストの方に使っていただいているアプリは、iOSはSwift、androidはKotlinを使用して開発をし、 ホストの方に使っていただいてるアプリはReact Nativeを使用しております。 React Nativeを開発で少し問題な点 ReactNativeの開発はReactJSを使うためWebエン
ありがたいことにスペースマーケットを利用する人は日に日に増えています。 しかしながらサービスが広く使われるようになると問題となってくる一つにシステム性能問題があげられます。 かれこれ半年前のことですが、今回は実際にスペースマーケットが直面したルーム検索における性能問題とその解決策について紹介したいと思います。 事の始まり ある時、全ユーザーに対してキャンペーンメールとプッシュ通知を行うことがありました。 ユーザーはキャンペーンの通知を受け取り、アプリユーザーの場合はアプリが起動します。 そしていざ通知を行うと アプリにはメンテナンス中の文字が表示されていました 少し経つと事象は改善しましたが、この時は直前に色々とリリース作業も行っていたこともあり、なぜメンテナンス中となってしまったのかわからない状態にありました。 もしかしたら通知を実施した際にアクセス過多となりサーバーが一時的に応答不可と
こんにちは、最近バチェラーseason1を見始めたら止まらなくなり気づいたら土日をフルに使って全話見終えていました、フロントエンドエンジニアの荒田です。 スペースマーケットではスタイリングされたコンポーネントを確認するためにStorybookを導入しています。 (Storybookについては以前書いた記事をご参照ください) 今回はそのStorybookの便利なaddon機能について紹介したいと思います。 addonの基本的な導入方法 まず、導入したいaddon機能をインストールします。 （例） npm i -D @storybook/addon-viewport .storybook/addons.jsファイルを作成し、導入したいaddonを読み込みます。 import '@storybook/addon-viewport/register'; どのaddonも導入方法は基本的に同じになり
次のページ
このページを最初にブックマークしてみませんか？
『スペースマーケットブログ』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
