読者です 読者をやめる 読者になる 読者になる

クラウドワークス エンジニアブログ

日本最大級のクラウドソーシング「クラウドワークス」の開発の裏側をお届けするエンジニアブログ

エラーモニタリングサービス Rollbar と GitHub Issue を利用したエラー対応フロー

f:id:uzuki-first:20160825142018j:plain *1

開発の所(@ctokoro_me)です。 インド音楽の演奏が趣味の一つなのですが、興味のある人が全然いない(そもそもインド音楽自体がほぼ知られてない)のが隠れた悩みです。

さて、みなさんが運用中のアプリケーションでは、エラーモニタリングはどのように行っているでしょうか? ログを tail / grep している感じですか?? それとも、エラーが起きたらメールが飛んで来るようになっているのでしょうか? どちらにしても、ユーザーが増えてくると管理が大変になってきてしまいますよね 😵

「一行のログの向こうには、一人のユーザがいる」 *2 という格言(!)もある通り、エラーが起きたということはそのユーザーがサービスを正常に使えていないということです。 しっかりと対応していきたいですね。

エラーモニタリングサービス

クラウドワークスではエラーモニタリングサービスとして Rollbar を採用しています。

rollbar.com

続きを読む

マネージャーでもできる!Google スプレッドシートのグラフを Slack に定期ポストする手軽な方法

GAS Slack アジャイル チームビルディング

クラウドソーシングで最大手のクラウドワークスでマネージャーをしてます。@ouraです。

みなさん毎日グラフをみてますでしょうか? エクセルや Google スプレッドシート直接開いてみるのも良いですが、せっかくチャットを使っているのなら活用しましょう!ということでこのエントリです。 定期的にグラフをチャットで見えるようにすることで、こんなメリットがあります。

  • 目標へ向かう意識の強化
  • 現在位置の見える化
  • 関わるメンバーの一体感醸成

f:id:squidinq:20160817183738j:plain

前提条件

かなり限定的ですが、私の観測範囲では割りと同じ環境の会社さんが多いかと思われます。

  • Slack を利用している
  • Google スプレッドシートでグラフをみている
  • セキュリティ上の理由で Google スプレッドシートの公開範囲が組織内に制限されている

手順

GAS(Google Apps Script) を利用してポストします。 そして利用する Slack の API は file.upload になります。 (Incoming WebHooks はファイルアップロードに未対応のため。)

まずは Slack API を利用するためのトークンが必要になるため、ボットを作成してトークンを取得しましょう。

トークンを取得できたら GAS を作成します。 通知したいグラフがある Google スプレッドシートのメニューから辿れます。

f:id:squidinq:20160817191648p:plain

こちらがエディタ画面。

f:id:squidinq:20160817191847p:plain

そして以下の様なスクリプトを書きます。

function myFunction(){
  var today = new Date();
  // 土日は実行しない
  if (today.getDay() == 0 || today.getDay() == 6) {
    return;
  }

  var ss = SpreadsheetApp.getActiveSpreadsheet();
  var sheet = ss.getSheetByName("graph"); // シート名を指定
  var charts = sheet.getCharts();

  // グラフが複数ある場合は調整が必要です。
  var chartImage = charts[0].getBlob().getAs('image/png').setName("graph.png");

  slack(chartImage);
}

function slack(chart) {
    var url        = 'https://slack.com/api/files.upload';
    var token      = 'xxxx-xxxxxxxxx-xxxxxxxxx-xxxxxxxxx-xxxxxxxxx'; // ボットのトークンをこちらで使います。
    var channel    = '#my_team';
 
    var payload = {
        'token'      : token,
        'channels'   : channel,
        'file'        : chart,
        'filename'    : 'バーンダウンチャート'
    };
 
    var params = {
        'method' : 'post',
        'payload' : payload
    };
 
    var response = UrlFetchApp.fetch(url, params);
}

あとは定期実行の設定をします。

f:id:squidinq:20160817201439p:plain

f:id:squidinq:20160817201602p:plain

としておくと、夕会の時間に良い感じにバーンダウンチャートがチームのチャンネルに表示されました!

f:id:squidinq:20160817202150p:plain

簡単ですね! :D

最後に

クラウドワークスでは開発チームのチャンネルでバーンダウンチャートを共有し、事業部とのコミュニケーション用のチャンネルではKPIやOKR*1を共有したりしています。技術的には目新しいものはなかったかもしれませんが、僅かな技術力にしても仕組みを工夫することで事業に貢献することはできるという一例として参考になればうれしいです。:)

We're hiring!

クラウドソーシングのクラウドワークスではリモートワークで育児に積極的に関わりたいエンジニアを募集しております。

www.wantedly.com

また、興味のある方はお寿司ランチを無料で食べながら話を聞くことができますので、よろしければこちらもどうぞ!

crowdworks.co.jp

*1:Objectives and Key Results。野心的な目標と進捗をトラッキングする一種の目標設定のフレームワーク。

クラウドワークスで働くエンジニアのリモートワークの取り組み

リモートワーク

こんにちは、出産で里帰り中の奥さんと子供に会いに毎週末東京から新潟まで新幹線で帰っている、スマホアプリチームの @tkoshida です。

さて弊社では7月より全社でリモートワークを導入し徐々に利用が拡大していることから、今回は弊社エンジニアの、特にスマホアプリチームに絞ったリモートワークの取り組みを紹介しようと思います。

続きを読む

ログ解析初心者に贈る便利なコマンドの使い方

f:id:Tomato-360:20160809192528p:plain

好きなMH(今はGTM?)はヴァイオラの那須(@nasum)です(アイスブレーク)。レッドミラージュも捨てがたいですが、ヴァイオラが一番好きですね。ちなみに好きなファティマは京です。

Webサービスを運営している以上、避けて通れないのがログ解析です。このログ解析あまり経験がないと何をどう始めたらいいのかよくわからないと思います。私自身今までログ解析の仕事をしたことがなかったので、わからない状態が続いているという危機感がありました。

そこで最近はできるだけ率先してログ解析の仕事があればそれをやるようにしてコマンド力を鍛えています。今回は教えていただいたり自分で調べたりして得られたログ解析するときに使うコマンドの使い方を紹介したいと思います。

以下簡単にログ解析の流れとともにコマンドを紹介します。やっていることは「ログに記録されたファイルサイズを合計して1日に配信される特定の条件を満たした応答のサイズを調べる」ということをやっていきます。

続きを読む

jQueryのプッシュ通知プラグインを作りました

初めまして。インターンの@asmsuechanです。 IDに使ってる'asm'はあすみんじゃなくてアセンブリです。

最近のマイブームはgithubのstudyリポジトリをブログ代わりにtipsを書いた.mdファイルをポンポン投げていくことです。

やってること

自分は今メッセージ改修チームに所属しており、メッセージのUX改善を目標として仕事をしています。

これまでほぼほぼJavaScriptは書いたことなかったのですが最近はほとんどJavaScriptしか書いていません。JavaScript楽しいのでもっと書けるようになりたいです。

ここでする話

プッシュ通知が簡単にできるjquery_push_notificationというプラグインを作ったことについて書きます。

f:id:hyottokoaloha:20160809141549p:plain

デモサイトはこちらです。

以下のサイトで紹介していただきました。

phpspot.org

プラグインを作るきっかけ

メンターさんの 「FacebookのMessangerのように新着メッセージがブラウザに通知されたらUX改善になるかもね」 という提案から自分がブラウザプッシュ通知を担当することになりました。

そして実際に作る際、どうせなら他の人も簡単にプッシュ通知が出来るようになって欲しいという思いがあったのでjQueryプラグインという形に落ち着きました。

ブラウザプッシュ通知の実装

まず実装はMDNのNotifications APIjQueryのプラグイン作成方法を見ながら最小限の実装をしました。

作ってまずメンターさんに言われたのが 「これじゃマージできないよね。エラー処理がなっていない。商業プログラムを書く時はエラー処理が一番重要になる」 でした。

この言葉はメンターさんからの指摘の中でも強く印象に残っており、仕事としてのコードを考えるきっかけになりました。

プラグインとして公開

ライブラリとして世界の人に使ってもらうにはどうすればいいのか考えて(他のライブラリを参考にしながら)、ドキュメントとデモとテストがあれば使ってくれそうだと思い、.js、.coffee、.min.jsしかなかったリポジトリにこれらを追加していきました。

ここからはもう完全に個人の時間で書き進め、プッシュ通知の部分はほとんど出来ていたので3日くらいでデモサイトとテストとREADME.mdを書きました。

また、Notifications APIをラッピングしたライブラリは他にもあったので(jQueryはなかったはず)、これらを参考に作りました。

github.com

github.com

実装

実装に特に難しい部分はなく、ただNotifications APIをラッピングしただけです。以下のようなインターフェイスで呼び出すことが出来るようにしています。

$.notify('タイトル');

テストはkarma+jasmineで書きました。

ブラウザプッシュ通知の現状

残念ながら仕様上の都合でクラウドワークスではブラウザプッシュ通知でこのプラグインが使われることはなくなりました。

ですが現在別の方法でブラウザプッシュ通知を実装していますのでリリースを乞うご期待です!

We're Hiring!

クラウドソーシングのクラウドワークスでは他のエンジニアのためになるライブラリを書きたいエンジニアを募集中です。

© 2016 CrowdWorks, Inc., All rights reserved.