サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
猫
cluex-developers.hateblo.jp
こんにちは、Webチームの柴山(@shikeapp0909)です。 私たちのプロダクト「ままのて」のフロントエンドはReact + SCSSで開発しています。コード規約は存在するもののインデントやセミコロンのつけ忘れなどをいちいちコーディングの際に気をつけながら開発するのも、コードレビューでチェックして防ぐのも余計な労力で効率が悪いため、リントとコードフォーマッターを入れることにしました。 今回はその導入内容を手順と共にご紹介します。 JSのリントとフォーマッター JSの方はESLintとPrettierでリントとフォーマットを行うようにしました。 JavaScript Standard Style 基本的なJSのコード規約はJavaScript Standard Styleに準拠することとしました。 公式から簡単にルールを抜粋すると、以下のようになっています。 インデントは2スペース 文
こんにちは、Webチームの柴山(@shikeapp0909)です。 今回は、弊社Webアプリ「mamanoko」の一部に処理高速化のためにGoを導入したので、どのように導入したかをご紹介しようと思います。 Railsで開発しているWebアプリ内にどのようにGoを取り入れたのか、実際のコード例を交えながら解説していきたいと思います。 なぜRails環境にGoを導入したのか そもそもなぜGoを導入することになったのかと疑問に思われるかと思います。 mamanokoはメディアサービスのため、ライターさんに文章を書いていただいています。複数のライターさんがおり、文章量も膨大になるため、表記揺れや誤字がどうしても出てきてしまいます。 そのため、文章校正が必要であり、以前からその機能を提供していました。 しかしこの文章校正の機能は記事の文章に対して表記揺れなどチェックしたい単語を総なめする処理をしてい
初めまして、Webチームのエンジニアの柴山(@shikeapp0909)です。 2017年11月に入社し、Webチームにアサインされ、子育て情報サービスmamanokoの開発をしています。 今回は、今年の2月にmamanokoにReduxを導入した際の考慮したことや設計などについて書きます。 導入前の状態 Reduxを導入する前は素のReactだけで実装していました。 stateの複数コンポーネントでの参照・更新をなるべく避け、stateを渡すのではなくコンポーネントをモノリシックにしてバケツリレーしないようにさせたりすることでなんとか回避している状態でした。 とは言ってもやはりコンポーネントはどんどん肥大化し、コンポーネントの中に複雑な処理が混ざり込み、とてもリーダブル・メンテナブルとは言い難い状態となっていました。 また、実装者によって実装の仕方も違ってきてしまい、どうすべきといった明
こんにちは。エンジニアの志村です。 cluex-developers.hateblo.jp の続きとなります。 今回はタイトル通り、デプロイ辺りを執筆していければと思います。 Blue-Green Deployment Blue-Green Deploymentはマーチン・ファウラー氏が提唱したデプロイ方式です。 blue, greenとほぼ同じ本番環境を2系統用意してデプロイを行います。このデプロイ方式ですが、 ダウンタイムの極小化 ロールバックが容易 という大きな2つの利点があります。 Dockerizeへのモチベーションとして前回の記事にも書いたのですが、徐々にドッグフーディング環境・本番環境で差異が出てきました。 そのような状況だと、ドッグフーディングでは正しく動作したのに本番環境では意図した挙動とは違うという場面も出てきます。 上記のようなトラブルがあった際に今までのIn pla
こんにちは、エンジニアの井戸田です。 今回はモダンなCSS環境を構築するために流行っていると言われているPostCSS×webpackをRailsに導入してみました。 今回は開発環境だけですが、次回本番運用に関して書いていきたいと思います。 環境 PostCSSとは Railsプロジェクトを作る webpack環境のためのディレクトリを作成 npmで必要なライブラリをインストール webpack.config.jsにビルドの設定を書く Rails側の設定 headタグ内のjavascript_include_tag, stylesheet_link_tagを変更 Railsの起動設定 テスト PostCSSのプラグインの導入方法 PostCSSのプラグインの紹介 postcss-import postcss-simple-vars postcss-nested postcss-mixins
こんにちは。エンジニアの志村です。 最近暑くて参りますね…。アイスばっかり食べてます。 さて今回ですが、Assets on S3を導入しましたのでその際のメモです。 結構この形でassetsを配信しているサービスは多いですよね。 今回は、Cloudfront+S3 / asset_sync+capistranoという定番のパターンで実装しております。 assets on S3とは デプロイ時にassetsファイルをS3に配置し、CDN経由で配信する方法です。 通常であればnginxやApache等のWebサーバーを介して静的ファイルは配信されています。 assets on S3はassetsファイルをS3に配置し、CloudfrontやAkamai等のCDN経由で配信します。 Webサーバー負担軽減やCDNを噛ませることによる高速化を目的として用いられることが多いかと思います。 仕組み 下
こんにちは。エンジニアの志村です。 今回から私は「Docker on Rails with ECSを実現させるために考えたこと」と題して、実際にDockerをProductionで運用する際にハマったポイント、また考慮すべき点に関して、数記事に渡って執筆していこうかなと考えております。 弊社では開発環境はDocker + compose、その他はItamae × EC2の構成でしたが、現在ドッグフーディング・本番環境をDocker with ECSに移行しております。 ProductionをDockerで運用しようと思った背景 今回インフラ環境を見直した背景として、 プロビジョニングツールの管理つらい →緊急で直接サーバ内で作業をした際にプロビジョニングツールとサーバ側の差異が発生。 OSにインストールしているライブラリのアップデートが完全手動になっている。 →自動化したい Product
こんにちは、神山です。 今まで週3日運動してたのですが、今冬、寒さのあまり週1日のみになってしまいました。極端に寒さに弱いです。 今回は暗号理論についてブログを書かせて頂きました。 暗号理論とは 暗号理論は暗号の仕組みを研究する分野になります。Wikipediaを引用させて頂きました。 暗号理論では主に次の二つを扱う。 暗号系 (cryptosystem) の構成方法や性能・安全性などに関する研究 暗号や電子署名といった守秘 (confidentiality) や完全性 (integrity) を実現する、 暗号アルゴリズムや暗号プロトコルの研究 暗号理論では、主として、アルゴリズムやプロトコルによってセキュリティ機能を実現する研究(情報セキュリティ)がなされており、 OSやネットワークの特徴を生かしてセキュリティ機能を実現する研究(コンピュータセキュリティやネットワークセキュリティ)と区
Grafanaかっこいいですよね。いつまでも見ていられそうです。 今回は統合監視ツールZabbixとAWSのCloudWatchメトリクス群を Grafanaで一元的に可視化して見れるようにしてみます。 今回の背景 CloudWatchやEC2のメトリクスを見るのに、 AWSにコンソールで入っていちいち確認するの面倒じゃないですか。 加えてサービスごとにAWSアカウントが分かれているとなると更に不便じゃないですか。 ・よりリアルタイムなデータを見たいものはZabbixのメトリクスを使用したい ・ELBにアタッチされてるホストの数も見たい ・オートスケーリングどんな感じか見たい ・インスタンス毎のメトリクスも見たい ・ついでにサービス全体でどれくらいの負荷がかかってるかも見たい ・なんなら複数のAWSのアカウントを跨いで見れると尚良い ・・・ということで全部grafanaに突っ込みました。
AWS Lambdaを使用して、AWS利用料金のお知らせをSlackに届くようにしてみた エンジニアの志村です。 先日AWS Summit Tokyo2016に2日間行ってきました。 今サミットではLambdaを用いたサーバレスアーキテクチャ、またKinesisを利用したリアルタイムストリーミング解析の話題が中心でした。 Lambdaは少々前から興味があったにも関わらず、実務で使用したことが無かったのでタイトルのようなものを実装してみました。 リクルートさんがやっていたのを真似て、今回は、Lambdaのcloudwatch-alarm-to-slack-pythonというBlueprintを使用し、Pythonにて実装しています。 サーバーワークスさんのブログを参考にさせて頂きました。 blog.serverworks.co.jp ゴール 下記のような通知を、毎日朝10時にSlackに流す
こんにちは、エンジニアの井戸田です。 弊社ではmamanokoという子育てをするママのためのメディアをRuby on Railsで運営しており、viewではHTMLテンプレートエンジンであるslimを使用しています。今までrubyの解析ツール rubocop や、scssの解析ツール scss-lint は導入しましたが、slimの解析ツールを導入していなかったということで、今回導入してみました。 インストール $ gem install slim_lint 又は Gemfile に下記を記入して bundle install をすることでインストールが可能です。 gem 'slim_lint', require: false require: false を指定することで、 autorequire をしないようにしています。 実行方法 スキャンするディレクトリ、又は複数のディレクトリを指
こんにちは、高橋です。 みなさん快適で楽しいAWSライフを送れていますか? 実は2ヶ月ほど前、AWSからCloudFrontでHTTP2によるコンテンツの配信ができるようになったので早速導入して見ました。 Amazon CloudFront now supports HTTP/2 S3のバケットにあるCSSやJS、画像などのアセットをCloudFrontから配信するというパターンは AWSでインフラを構築するサービスではよくあると思います。 今回はこういったS3上にあるアセットをHTTP2とgzipを使用してCloudFrontから配信するための設定方法などを見ていきたいと思います。 設定そのものは3分くらいで終わります。 CloudFrontにHTTP2を適用する 先ずはAWSのコンソールを開き、CloudFrontを選択します。 リンクまたはチェックボックスを押して「Distribut
こんにちは、エンジニアの神山です。 最近、テストカバレッジを上げるためRSpecを書きまくっています。ちなみに最初は90%でしたが、苦闘の末95%まで上がりました。結構骨が折れましたね。 その中でも大変だったのがFacebookログイン部分のテストです。外部APIを使っており、そこの部分のテストの書き方が分からなくて悩んでいました。 色々と調べてみるとモックを使うとうまいことテスト出来るよという文献を見つけました。 ということで今回は、外部API部分のテストの問題点、モックとは何か、またそれをどのようにテストに使うのかにフォーカスして記事を書きました。 外部API部分のテストの問題点 今回悩んだのは外部APIを使用している部分のテストをどのように書くかということです。 例えば、「ログインしようとしているユーザーのFacebookのアカウント情報を取得し、すでにDBに登録されていればログイン
こんにちは。エンジニアの志村です。 Docker for Mac便利ですね! docs.docker.com 日本語でも様々な記事が出てきています。 私もVagrant + Dockerをメインに使用しておりましたが、ついにDocker for Macに乗り換えました。 弊社では、dev環境をDockerにしているのですが、Vagrant + Dockerの時は快適に開発が出来ました。 ただ、VMを使わなくなった途端にめちゃくちゃ動作が重くなりました。 docker-compose --service-port ●●という感じで、rails serverとwebpack-dev-serverを立ち上げるのですが、ブラウザからの読込が劇的に遅い…。seedデータ突っ込むのもめちゃくちゃ遅い… フォーラムでも話題になっていますね。 forums.docker.com 私の環境でいうと、Vagr
こんにちは、エンジニアの神山です。最近大豆製品ばっかり食べています。 今回はWebサービスでよく見かける、現在地周辺検索を行う機能の実装について書きました。 例えば現在地から半径2km内にあるレストランを検索したり、現在地より最寄りの駅を探したりできる機能です。 今回使用したGemは、 geocoder と geokit-rails です。 まずこの2つのGemにフォーカスして話を進めていきます。 GeocoderとGeokit これらのGemは住所から緯度経度を割り出したり、緯度経度を用いた検索ロジックを提供しております。 具体的には以下の様な事ができます。 住所から緯度経度を割り出す 緯度経度から住所を割り出す IPアドレスから緯度経度を割り出す 指定したオブジェクトまたは緯度経度を中心に、指定した距離内や範囲(ex: 2km~5km)にある施設を検索する 2点間の距離を算出する ある
こんにちは。エンジニアの志村です。 先日assets on S3についての実装を行いました。 その際の記事は下記になります。 cluex-developers.hateblo.jp 今回はasset_syncにより、S3にassetファイルがアップロードされた段階でCloudfrontのInvalidationをLambdaを使用して走らせるという処理を実装したいと思います! Invalidationとは Cloudfrontのキャッシュを明示的に消す機能です。 dev.classmethod.jp クラスメソッドさんの上記の記事が非常に分かりやすいかと思います。 キャッシュを使用するのに重要なポイントは適切なキャッシュ期間を設けることです。それを行わないと古いファイルがいつまで経っても配信され続けてしまいます。 特にassets on S3を使用する場合には、明示的にファイルをInval
こんにちは、Cluexの高橋です。 先日EC2サーバーのOSを新しいものにしまして、その時にサーバーのテストを簡単に行ってくれるQualys SSL Labsで移行前のサーバーをテストしてみたところ、C判定が出てしまったので、nginxの設定も全体的に見直してみました。 イメージはこんな感じです テストしたのはこちら「Qualys SSL Labs」 www.ssllabs.com ということで今回はnginxの設定に関してセキュリティ関連でやっておくべき設定集をまとめました。 nginxのバージョン情報を隠す nginxのバーション情報を隠蔽します。 server { # ~~ server_tokens off; # ~~ } SSL通信に使用するプロトコルを指定する SSLv2やSSLv3はダウングレード攻撃やPOODLEなどへの脆弱性があるのでTLSのみ許可します。 server
こんにちわ。ディレクターの清水です。 今回は、「アナリティクスのデータをスプレッドシートに自動抽出してKPIを効率的に計る方法」を紹介したいと思います! 今回はAPIやGAS(googleAppScript)に関する知識が全くない方でも簡単に自動で抽出できる方法をご紹介するので、ディレクターの方々の参考になれば幸いです。 (2015/11/22 【使用ツール】 : スプレッドシート(spread sheet), アナリティクス(Google Analytics) ) 【かわいい&長持ち&絶対喜ぶ】1歳の誕生日におすすめプレゼント25選 | mamanoko(ままのこ) 最近の僕達のSEO施策 最近弊社ではサイトのリニューアルを行ったのですが、さらにユーザービリティ向上に何かできなかなと思っておりました。そこで、記事内にリンクを貼ることで、ユーザー様のニーズにあった記事をレコメンドしてユーザ
このページを最初にブックマークしてみませんか?
『cluex-developers.hateblo.jp』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く