スマートキャンプのエンジニア入山です。 近年、ユーザ体験（UX）の優位性からSPA（Single Page Application）を採用しているWebアプリケーションを多く目にするようになりました。 弊社が8月1日にリリースした、インサイドセールスに特化したCRM Biscuet（ビスケット） も、Vue.jsを使ったSPAで構成されたサービスです。 SPAを採用することで多くのメリットがありますが、従来のMPA（Multiple Page Application）とは異なる運用ノウハウが必要になると思います。 今回はSPAをプロダクション運用する上で避けては通れない、リビジョンアップ時のクライアント側の対応をご紹介します！ SPAにおけるリビジョンアップ時の課題 リビジョン確認機能の実装方針 リビジョン確認機能の実装 アプリケーションにリビジョンIDを埋め込む リビジョン管理用JSON

スマートキャンプのデザイナー/エンジニアのhaguriです。 弊社では8月1日、インサイドセールスに特化したCRM Biscuet（ビスケット） という新サービスをリリースしました。 biscuet.jp Biscuetでは Vue.js + Atomic Design でコンポーネント設計をしています。今回はその構成と考え方・Biscuetチームでの運用について紹介していきます。 Atomic Design について templatesとpagesについて Biscuetでのルール atoms molecules organisms pages ディレクトリ構成 App.vue components/ plugins/biscuet-materials/ さいごに Atomic Design について Atomic Design とは、コンポーネント単位で設計していくデザイン・開発手法で

スマートキャンプでエンジニアをしている笹原です。 Terraform v0.12がリリースされて数ヶ月経ちましたがみなさんはもう使ってますか？ なかなか使えてなかったのですが、ブログ当番になったのをいい機会にアップグレードしてみました！ 今回は、アップグレードの手順を紹介したいと思います！！ アップグレード前の準備 アップグレード手順を確認する tfenvをインストールする Terraform v0.11.14でアップグレード前チェックを走らせる アップグレード前チェックの対応をする Terraform v0.12へのアップグレード Terraform v0.12をインストールする コードを修正する アップグレードの効用 終わりに アップグレード前の準備 アップグレード手順を確認する Terraform v0.12へのアップグレードは公式のアップグレードガイドに沿ってやっていきます。 アッ

スマートキャンプのエンジニア井上です！ 多くの開発要望がある中で、エンジニアのみでインパクトのある改善をするときにによくあげられるのがサイトの パフォーマンス改善 かと思います。 今回はサイトのスピート計測ツールである、 Google PageSpeed Insightsで使用されているLighthouseのスコア を参考にして、実際に効果があった施策をご紹介します！ Google PageSpeed Insightsとは Lighthouseとは Performance項目改善の進め方 実際の対策 レンダリングブロック対応 指摘内容 対策 画像圧縮対応 指摘内容 対策 オフスクリーン画像の遅延読み込み 指摘内容 対策 IntersectionObserver APIとは 実際の実装イメージ 不要なJS・CSS削除 指摘内容 対策 必須のドメインへの事前接続 指摘内容 対策 Resourc

スマートキャンプの今川です。 先日、AWS認定資格の ソリューションアーキテクト - アソシエイト を受けて無事合格してきました。今回は受験対策・受験を経ての感想や覚えておきたいことをまとめました。 AWSの認定資格をこれから取ろうとしている方、興味がある方の参考になれば幸いです。 背景 受験当時の経験・保持資格 受験準備 勉強方法 基本的な進め方 重要項目 ネットワーク系 コンピューティング系 ストレージ系 DB セキュリティ 振り返ってもう少し見ておけばよかったと思うところ 問題集 模試 受験の流れ 結果 資格特典 受けてみて まとめ 背景 ずっと仕事でAWSを触っていて、以前からAWS認定資格には興味があって取りたいな、と思っていたもののきっかけがなくずるずるときていました。 そんな時、部署的にAWSのテクノロジーパートナーになろうという機運が高まり、AWS認定資格保有者が必要だとな

UNIXという考え方 スマートキャンプでエンジニアマネージャーをしています林です。 私はエンジニアマネージャーをやっているのですが、エンジニアではありません。 マーケターとしてスマートキャンプに入社し、マーケティングの成果を最大化するためにディレクターの立場でプロダクト改善を行ううちに開発チームのマネージャーになったという経歴です。 tech.smartcamp.co.jp 非エンジニアがエンジニアのマネジメントをするにはエンジニアについて学ばなくてはいけないことが多々ありますが、私が色々と学んできた本の中で、特に役に立った書籍を紹介していこうと思います。 「UNIXという考え方」 この本をオススメする対象者と読むメリット この本を読んだ背景 本の内容・構成・読みやすさ 私視点で学びになったポイント3点 ①「スモール・イズ・ビューティフル」 ②大きな一まとまりをつくるよりも、分解した小さな

こんにちは。スマートキャンプデザイナーの髙松です。 私は今年の1月からスマートキャンプにデザイナーとして入社したのですが、プロダクト部門のエンジニアチームに所属しています。 弊社にはデザイン部署がないというのも理由の1つですが、私の業務の半分は開発が必要となることが主な理由です。 しかし、入社した当時、実務での私の開発経験は0に等しい状態でした。 この記事では、開発経験0から出発したデザイナーが、エンジニアチームにいた半年で身についたことや、やりきれなかったことなどを書いていこうと思います。 似たような境遇にある方の参考になれば幸いです。 いろいろと0地点からの出発 自分の理想とギャップ 自分の理想 理想と現実のギャップ 初めて見るRuby on Rails デザイン / 開発環境が変化している なにがわからないのか、わからない状態 やったこと 半年で得た学び やってよかったこと エンジニ

スマートキャンプでマーケターをしている佐々木です。 最近は自販機でペットボトルを購入することにハマっています。 私は弊社の運営する資料請求サイト「ボクシル」のマッチング最適化を生業として生きているのですが、追うべきKPI・可視化したデータの共有にはスプレッドシートを好んで使っています。 SQLで取り出したデータであればRe:dashで共有するのがライトなのですが、 SQLでとってきたもの以外のデータを上手く組み合わせられない 様々なアレルギー反応を起こす人がいる（英語UIがダメな人、クエリ見ると卒倒しちゃう人etc...） 権限管理が大変 などダッシュボードとして利用していくにあたって、特に非エンジニアに浸透しづらいというのがあります。 そこでスプレッドシートをダッシュボードとして活用していく方法を紹介したいと思います。 概要 ツールごとの役割分担 使った技術 流れ 全体 1. Re:da

エンジニアの笹原です。笹が好物のパンダからもじってパンくんと呼ばれています。 皆さんはGitのリモートリポジトリとして何を使ってますか？弊社ではGitHubを使っています！ GitHubはそれ自体の使いやすさはもちろんですが、各種ツールとの連携のしやすさや自分でGitHub Appsを作ったりMarketplaceを使ったりすることでの拡張性の高さも魅力ですよね！！ 先月、GitHubがPull Pandaを買収したことで、Pull Pandaが提供しているツールが無償利用できるようになりました！！ pullpanda.com そこで、実際に導入したフローを紹介します！ 概要 導入方法 GitHub・Slackとの連携 通知の設定 実際の通知 終わりに 概要 Pull Pandaが提供しているツールは大きく以下の3つに分けられます Pull Reminders PRの状態に応じて通知をして

オフィスが変わり、自席から窓を眺めると東京タワーが見えるようになりました。 スマートキャンプの今川（ @ug23_ )です。 2019年6月26日に五反田.rbにLT枠で参加してきました。 gotanda-rb.connpass.com 自分含め、4名の方が発表したのでそれぞれ紹介しようと思います。 @kutaike1504さん ぼくらのかんがえたさいきょうのfactory_bot @saiid_kkさん RSpecあなたならどう書く？ @ug23_ 残す価値のあるテスト設計 @walkersumidaさん CircleCIで docker-compose最強? 飛び込みLT @nontak2 さん AWS Summit 2019行ってきた 最後に @kutaike1504さん ぼくらのかんがえたさいきょうのfactory_bot speakerdeck.com RSpecに不可欠なfac

エンジニアの笹原です。 スマートキャンプ は6/24より新オフィスに移転するのですが、引越し日と入居日がずれることになり、6/1~21の3週間はリモートワーク期間となりました。弊社ではこの期間をリモートウィークと読んでいます。 代表の記事がこちらです。↓↓↓ note.mu 基本の就業時間を守っていれば、3週間入居しているシェアオフィスのほかに北海道支社や実家などで業務を行うことが可能だったので、タイや北海道からリモートワークをしています。 AWS Client VPNが東京リージョンで利用できるようになり、今回のリモートワークで試してみたので、導入方法やセキュリティグループの設定について書いてみたいと思います！ AWS Client VPNとは リモートワーク時の通信要件 通信要件を実現する上での課題: IPアドレスの固定 なぜIPアドレスを固定することができないのか 解決策: プライベ

こんにちは。今週はスマートキャンプ札幌オフィスに出張中の米元です。 北海道は空気がきれいで食べ物も美味しく、湿度が低くてとても過ごしやすいです。 また、オフィスの窓からは大通り公園の街路樹が見えて気持ちよく働けています。 本記事ではそんな素敵な札幌オフィスで約一ヶ月前に行われた新卒エンジニア研修の話をご紹介したいと思います！ 経緯 目的 1. SQLを使いこなせるようにしてほしい 2. エンジニアと仕事するうえで必要なことを教えてほしい 研修内容を決める そして、北の大地へ・・・ 座学（70分） 内容 実際に使ったスライドの例 プログラミング研修（90分） 内容 SQL講座（130分） 内容 グループワーク（360分） 内容 成果物 目的 結果 反省会（空港） フィードバック 反省点 今後 経緯 弊社では今年度から新卒採用を行っており、4月に5名の新入社員が入社しました。 全員セールスやコ

今週末から北海道オフィスに出張でワクワクしている瀧川です。 私はデータ分析基盤の構築をする機会がよくあり、FluentdやEmbulk、Digdag、BigQueryを好んで使っています。 構築する際に気をつけることというと、冪等性やログ欠損(リカバリ)などいろいろあるかと思いますが、その中でも重要になるのが 個人情報などの見せられないデータ(機密情報) の扱いかな思っています。 構造化されたデータの個人情報であれば、そもそも分析基盤に転送しないことや、マスキングして送るなど対策は容易*1ですが、例えば「バグでログの可変な箇所に個人情報が入ってしまった」とか「アンケートの集計をしたいが電話番号など入ってしまっていて隠したい」などの場合、検出や秘匿化はかなり難しいと感じています。 その課題を解決してくれるのがGoogleCloud DLP(Data Loss Prevention) APIで

エンジニアの井上です！ 今回は私が最近気になっていたAuth0とNuxt を使って簡単な認証機能を作っていきたいと思います。 認証をどのように実装するかは皆さん結構悩まれているかなと思います。 Auth0は様々な既存プロバイダと自由に連係可能かつマルチデバイス対応、多要素認証に対応しているなどのメリットがあり、かつ導入がとても簡単そうなので個人的に注目しています！ Auth0とは Nuxtとは Auth moduleとは Nuxt middlewareとは 実際にAuth0で認証作ってみる Nuxt でプロジェクト作成 Auth Moduleを追加する Auth0を設定する 認証ページを作成する ログインしてみる middlewareを使用してログインチェックする 終わりに Auth0とは Auth0 は認証基盤サービス (IDMaaS) です。マルチデバイス対応しOpenID Conne

はじめまして、スマートキャンプの郷田と申します。 この記事では、エンジニアがコーポレートITを立ち上げた経験を元に学んだことをアウトプットしています。 コーポレートITに関わる人の助けになればいいなぁと思って書きました。 経緯 立ち上げの過程でやったこと 情報セキュリティの勉強 コーポレートIT関連の業務の切り出しと巻取り 社員の教育や啓蒙活動 Pマーク申請・取得 採用 立ち上げで学んだ6つのこと 1. セキュリティやシステム管理の知識 2. 想像以上の悲惨な状況 3. バックオフィスの業務 4. 社員のセキュリティへの漠然とした不安 5. 協力者の重要性 6. 自分がやるべきこと コーポレートIT部門をこれから作る企業へ 必要だと感じている方 立ち上げてみたいエンジニアの方 今のスマートキャンプ の状況 さいごに 経緯 2016年の10月頃にスマートキャンプにエンジニアとして入社しました

こんにちは。エンジニアの笹原です。 スマートキャンプではフロントエンドの開発にVue.jsを取り入れています。 Vue.jsで開発するうえで、SFC（単一ファイルコンポーネント）を利用できることは良さの一つだと思います。 今回は、Sprocketsでアセット管理を行っているRailsプロジェクトに、Webpackを入れることでSFCを使えるようにする方法を紹介します。 SFC（単一ファイルコンポーネント）とは SFCの良さ SFCの実装方法 Sprocketsを利用しているRailsプロジェクトにSFCを導入する 課題と解決方法 完成予想プロジェクト構成 導入手順①: 必要なnpmモジュールのインストール 導入手順②: Webpackの設定 導入手順③: ビルドの実行 終わりに SFC（単一ファイルコンポーネント）とは Single File Componentの略で、テンプレート、ロジッ

エンジニアの今川(@ug23_)です。 本番環境サーバのユーザ管理、みなさんはどうしていますか？ みんなで同じユーザ・同じ鍵を使う 入社・退職時にはインフラ担当者がユーザ追加・削除する という感じのレガシーなやり方をしてしまいがちですよね。 全員で同じユーザを使う運用は入社時はとってもラクですが、退職者がでた時、漏洩したかもしれない時、鍵を変えて全員に伝えて…と、無駄が多いですし、サーバ上での動作を監査できるようにするという意味でも、全員がそれぞれ自分のユーザでログインできるようにしておきたいです。 また、人に依存しないしくみにしたいですね。「○○さん休みだからユーザ作れないね」というのはナシにしたいです。 ということでAnsible Playbookでユーザ作成をはじめ、 ユーザの削除 や sudo権限をなくす処理を実行できるようにし、冪等なユーザ管理ができるPlaybookを公開するこ

平成も残るところわずかとなりましたね。 ティム・バーナーズ＝リーによって、WWWの原型が生み出されたのが平成元年(1989年)なんですよね。 そんなことをエンジニア達で話していて、せっかくなので平成に登場した情報技術を時系列にしてまとめる自由研究をしてみることにしました 。 「自分の生まれ年になにができたのか」 「こんな技術もあったなあ」など思いを馳せていただければ幸いです。 ※ スマホなどでは見にくいかと思いますので、画像版やPDF版などもお試しください。 ※ 片手間でまとめたので、「年が間違ってる」「ロゴがおかしい」などあるかと思いますがご容赦ください。 【追記 2019-04-27】 たくさんコメントありがとうございます！ 皆さんそれぞれ平成を思い返していただけたようでとても嬉しく思います。 思い入れのある技術が入っていない、誤りがあるなどのお声も頂いているので、再度調べまして反映さ

デザイナー兼エンジニアの葉栗です！ スマートキャンプでは以前からWebフロントエンド開発にVue.jsを取り入れています。 Vue.jsなどコンポーネント指向のフレームワークは、UIフレームワークも豊富で、お手軽にリッチなUIが構築できるのでいいですよね。 今回は私のお気に入りの、Vue.js + Elelment UI + Lottie というライブラリを使って、数十分でできる簡易的なログインページを作ってみようと思います。 0から構築をはじめて、レイアウト設計、ElementUIで実装、Lottie組み込み、完成といった感じで詳しく説明していきます！ 完成画面 😊 使用技術 Vue.js Element UI Lottie（ロッティー） 実装します！ 事前準備 Vue CLIをインストール プロジェクトを作成 ElementUIをインストール ログイン画面を作成 不要コードの削除 コ

こんにちは。エンジニアの米元です。 昨年12月に1人目の子供が産まれ、年始から1ヶ月間の育休をとりました。 2月に復帰して2ヶ月が経ち、ようやく少し落ち着いてきたので育児を通して取り組んだ事や、エンジニア・マネジメント経験が活かされた事を紹介しようと思います。 あくまで私のケースなので他の方には当てはらない事があるかもしれませんが、エンジニアだけでなくこれから子育てをする方の参考に少しでもなれば幸いです。 前提 そもそも育休とは 何のために取ったのか 育休に入る前にやったこと 目標設定 育休中にやったこと 妻とタスクの洗い出し 1on1 振り返り 効率化・自動化 購入した物 良かったもの 食器洗い乾燥機 洗濯乾燥機 大型冷蔵庫 非接触の赤外線温度計 リッチェル ひんやりしないおふろマット 微妙だったもの バランスボール 電動ハイローチェア アプリ・サービス系 タスク・スケジュール管理 Tr