はてなブックマーク

こんにちは、Web 開発部の須藤です。 この記事は ChatWork Advent Calendar の 12 日目です。 みなさん、AWS (Amazon Web Service) 使っていますか？ 弊社では 2010 年から AWS を利用し始め、今では様々な AWS のソリューションを使ってチャットワークを提供しております。 AWS re:Inventそのためチャットワークでは AWS を最大限活用できるよう、AWS 最大のイベント re:Invent に毎年エンジニアが参加させていただいています。 世界中の AWS エンジニアと一緒に数多くのセッションで勉強することができました。 re:Invent では多くの学びがあり、今後のチャットワークのインフラ設計が大きく進みました。 今後ともチャットワークにぜひともご期待ください 今日ご紹介するのは。。今日紹介するのはそんな大きい話ではな

この記事はGithubが落ちている時間で書かれました。@kyo_agoです。 今日はkarma middlewareでlocal proxyを立ててテストからサーバと通信する方法を紹介したいと思います。 karma middlewareとはkarma middlewareとはexpressのmiddlewareと同じようなもので、karmaがサーバとして動作している時に受け取った通信に対して何かしらの処理を行えるようにするものです。 実際karma自身のいくつかの機能もmiddlewareとして提供されており、設定のproxiesやfilesも実態はmiddlewareになっています。 karma middlewareの書き方公式ドキュメントまんまですが、karma.conf.jsに以下のような記述を行うことで定義できます。 （実際の処理はpluginとして定義する） middleware

難消化性デキストリンやめました。@kyo_agoです。 今日はkarma 1.0.0で導入されたcustomContextFileの使い方を紹介したいと思います。 （BusterJSをご存じの方はtestbedという方が通りがいいかもしれません） customContextFileとはcustomContextFileとはkarma 1.0.0で新しくサポートされた、「指定されたhtml内からテストコードを起動する仕組み」です。 これまでkarmaでDOMに依存したテストを書くにはコード内でcreateElementやinnerHTMLを行ってDOMを構築してから実行することが一般的でした。 customContextFileを使うことによってテストコード内で使用するDOMやテストの事前処理を簡単に書くことができます。 customContextFileの使い方はkarma.conf.js

骨折しました。@kyo_agoです。 今日はTravisCI上で実ブラウザ環境のテストを行う方法を紹介したいと思います。 弊社ではこれまで実ブラウザ環境のテストではTravisCIからProtractorを使ってSauceLabsへ接続してテストを行っていました。 しかし、これには以下のような問題があったため、ProtractorとSauceLabsを使用しない構成へ移行しました。 テストが高頻度で失敗するテストに影響しない部分の修正ですらテストが失敗し、コードの修正よりテストを通すほうが難しい状況になっていました。 （これは社内では「e2eガチャ」と呼ばれ、レビュー依頼のコメントには「e2eガチャ 1/5」と成功率が書かれていました。ちなみに「1/5」はわりといい確率です。悪い時は「1/12」くらいになります） 遅いSauceLabsへの接続時間、WebDriver経由のテスト実行などは

こんにちは。そしてみなさん初めまして、フロントエンドエンジニアの奥野です。 Twitterなどでは@armorik83として活動しており、Qiitaにて『AngularJSモダンプラクティス』を掲載したところ、とてもご好評頂きました。また、京都市出身でng-kyotoというAngularJSユーザグループの代表も務めています。 そんな私ですが、この度弊社の@kyo_agoと知り合った縁がきっかけで9月より入社と決まり、すぐさま京都から引っ越しフロントエンドエンジニアとして配属されました。 第60回HTML5とか勉強会 －ECMAScript 2015 & 2016－にて登壇 入社して間もないころ、突然「HTML5とか勉強会」への登壇オファーが舞い込んできました。HTML5とか勉強会とは、HTML5を中心に取り扱うコミュニティhtml5jが定期的に開催する勉強会で、今回のテーマはJavaSc

最近窓にすだれを取り付けました。@kyo_agoです。 2015/07/14に社内でScala.jsの勉強会を開催しました。 Scala.jsはまだ社内でも知見が少なく、割と突発的なイベントだったのですがなかなか濃い内容になったのでレポートしたいと思います。 Scala.jsとはScala.jsとは、Scalaで書かれたコードをJavaScriptに変換して実行できるようにするコンパイラです。 開発は2011/12/31から始まっており、2014年に入ってから話題になってきたようです。 形式何人かが資料を作って持ち寄り、随時発表をする形式で行いました。 登壇者「TypeScript経験2年（Scala経験0）」から「Scalaはソースまで読んでる（JavaScript経験0）」まで幅広く、多彩な発表で非常に盛り上がりました。 内容ざっくりこんな感じの話でした。 Scala.jsの何がつらい

2015/06/26にアラタナさんとチャットワークとでDDD×Scalaの合同勉強会を開催しました。 アラタナさんの宮崎本社とチャットワークの東京オフィスをビデオ通話でつないでの合同勉強会でした。 この勉強会はクローズドイベントだったので、参加したくてもできない方がたくさんいたと思います。なので、Web開発部のチバがレポートをします。めちゃくちゃ楽しかったので、参加したくてもできなかった方たちのためにめちゃくちゃ楽しかったことをレポートします。 アラタナさんも当日の様子を「僕らの継続的ビール摂取型ドメイン駆動設計（ChatWork ✕ アラタナ合同勉強会）」という記事に書いてくれました！ 準備 宮崎と東京でインターネットを使って勉強会…なんてインターネットっぽい勉強会なんだ…！と思っていたら、アラタナさんが来社。しかも勉強会中に食べる食事を持って来てくれました！！！ DDDおじさんが突然の

こんにちは、先日Web開発チームに加わりました西口です。 HTMLメールの制作って煩わしくないですか？ おそらくそう感じているWebデザイナーの方は多いのではないかと思っています。 HTMLメールの制作って大変特に下記のような点が挙げられると思います。 テーブルレイアウト（コーディング面倒…）インラインCSS（コーディング面倒…）メールクライントごとで差のあるCSS対応（表示チェックどうすんの…）各種メールクライアントでの表示テスト（古い環境もまだまだ現役…）などなど… 弊社でもHTMLメールはそこまで頻繁に作成することがなかったので、これまでワークフローを見直すことがなく、ヘイトの増加を感じつつもHTMLを直接コーディングして作成していました。 ただ、やはりこういうフローでは時間がかかってしまったり表示確認が面倒だったので、どうにか効率良くならないかと調べていたら、HTMLメール作成用の

Web開発チームの尾崎です。もう夏のように熱くなってきましたね！ そんな、ある日のことWeb開発チームのマネージャーからタスクが降ってきました ( ﾟдﾟ) ・・・ (つд⊂)ｺﾞｼｺﾞｼ (；ﾟдﾟ) ・・・ (つд⊂)ｺﾞｼｺﾞｼｺﾞｼ （；ﾟДﾟ） …！？ 自分の評価のためにもやるしかないです！ http://sanographix.github.io/makibot/ MAKIBOTはGitHub社が提供しているBOTフレームワークのhubotで作られたラブライブの西木野真姫さんのBOTです。 別チャット用に作られたものですが、hubot-chatworkというものがあるので、こちらを使ってChatWork上で会話できるようにします。 関係ないですが、ラブライブは1期の3話でMP全損して視聴を断念しましたが、海未ちゃんが可愛いのは知ってます。 MAKIBOT+hubot-chatw

はじめまして。アプリケーション開発部（Androidチーム）の重村（@shige0501）です。 先日弊社の宮下がポストした「これからのChatWorkのAndroidアプリ戦略」で少し触れられましたが、３月１日よりChatWorkに入社し、モバイルアプリケーションエンジニア（Android担当）として日々Androidアプリの開発に携わっています。 普通の転職であれば特にこれ以上取り上げるような話もないように思えますが、私の働き方がちょっと他と違うので、少しお話させていただきます。 どうやって働いているのか？一般の企業であれば、公共交通機関や自転車・自動車などを利用して出社し、自分の席で一日の仕事をして帰るという流れになるでしょう。私も前職まではその働き方しか知りませんでした。 現在は完全なリモートワーク（在宅勤務）に挑戦しています。 弊社の主力サービスであるチャットワークはリモートワー

Web開発チームの安達です。 先日ブログでアナウンスさせていただいた「お肉を食べながらScalaのコードレビューする会」ですが、たくさんの方にご応募頂き、無事に開催することができました。今回は東京(5/14)と大阪(5/21)で開催したコードレビュー会の様子をレポートしたいと思います。 会場の様子まずは各会場の様子からお伝えします。東京は5/14に、弊社東京オフィス近くのカーサ カステリーニさんというイタリア料理のお店で開催しました。普段から社員に人気のお店ですが、今回は「お肉多めのコース」でしっかりお肉を食べました。 大阪は5/21、梅田のmeat kitchen SAKAMOTOさんという焼肉屋さんで開催しました。せっかくテレビ付きの個室を予約したのですが、HDMIケーブル忘れてしまうというトラブルがありました。しかしお肉を焼きながらだとレビューしづらいという知見も得ることができました

最近 sbtプラグイン職人(別名 すぶた職人)になっている かとじゅん です。 今回作ったのは、AWS用のsbtプラグインです。ソースは以下にあります。 https://github.com/chatwork/sbt-aws AWSに対応したsbtプラグインは他にも何個かあるのですが、使いたいものがなかったので、作りました(自分たちが欲しい機能しか作ってないので、全然機能足りないですが… P−Rください:P)。 とりあえず、今できることは以下だけです。 ElasticBeanstalk(以下 EB)の、アプリケーションバンドルを作成し、S3にアップロードしたいCloudFormation(以下 Cfn)のテンプレートファイルをS3にアップロードし、スタックの作成・更新・削除をしたいsbt-awsでは、使い方の説明を。 sbt-aws-ebEB用のプラグインです。Cfnを通じてEBを構成する

こんにちは！ChatWork CTOの山本です。 ChatWorkでは一年前に、PHPの独自フレームワークでつくられた大規模システムを、Scalaを使ってゼロベースでつくりなおすという決断をしました。 Scala採用までの経緯を三行で： カウボーイ開発で約4年間積み上げてきたPHPのシステムがもはや限界ゼロベースでつくりなおそうと開発合宿を開催。満場一致でScalaに決定！しかし社内にScalaを書ける人は誰もいないのであった・・(どうすんの・・？)参考記事： チャットワークの新しい開発言語とフレームワークを決める開発合宿を開催！その全貌を丸公開します。 というわけで勢いのままScala採用を決めたはいいものの、ここからどうしよう・・・という状態でした。 そこから約一年。ChatWorkのScala開発はどうなってるの？とご質問いただく機会も増えましたので、現在の状況含め、Scalaってど

Android チームの宮下です。 昨年の12月に Android アプリをリニューアルしたことはこのブログでも報告済みですが、今日はその後と今後の Android アプリの動きについてのお話です。 今やっていることバグ修正リリースしてから約 4 ヶ月が経とうとしていますが、その間に行っていたことは主に NPE との戦いでした。 Java を使ってプログラムを書くという特徴がある Android アプリ開発なので、気をつけていたつもりでも NPE の発生でクラッシュが発生していました。ご迷惑をおかけしておりますが、今も発生が確認されたものから 1 つずつ潰していっています。 機能改善バグ修正だけでなく、機能改善も進めています。例えば、タイムライン上に表示される Floating Action Button の視認性の向上や、コードのリファクタリングによる性能の改善などがあります。 最近公開

Web開発チームの安達(@UAdachi)です。 一年前は PHP 書いていましたが、ここ最近は糖質制限DDDおじさんことかとじゅん(@j5ik2o)さんの下で Scala をいっぱい書いてます。 かとじゅんさんは色んな人に糖質制限を教えたりもしていますが、社内では Scala もちゃんと教えてくれています。 今日はその一部をご紹介と、Scala の課題を一緒にレビューしてくれる人募集のお話です。 まずは二分木データ構造を実装してみよう社内の教育を何から始めるか悩みましたが、いくつか課題を出して、それをレビューするスタイルで始めてみました。 まず、最初にやった課題は二分木データ構造の実装です。 どんな二分木かというと、NodeにはLeafとBranchがあります。Leafは値をひとつ保持し、Branchはひとつの値と左右にNodeを保持します。また、各Nodeの値の大小関係は左 < 右とな

3月1日をもってチャットワークが 4周年を迎えました。今年は小さな機能改善だけでなく、大きな変化が見られると思います。 今まさに社内では大きな変化に向けて開発が進んでいるわけですが、幾つかある施策のなかにユーザーからのフィードバック反映があります。チャットワークでは、ソーシャルメディアでの声を拾い上げたり、UserVoice をつかって意見・要望を受け付けています。昨年開催したファンミーティングも利用者の生の声を聞くのに絶好の機会です。 以前からユーザーからのフィードバックは受け付けていたわけですが、それが開発やデザインへ反映するためのプロセスや手法が決まっていない部分がありました。 57,000社以上が利用しているわけですから、開発側の都合で変えることは当然できません。しかし、ユーザーの声を素直に採用すれば良いというわけでもありません。数社が「これが欲しい」という要望を出していたとしても

ココナッツオイルの硬度に春を感じている@kyo_agoです。 ユーザプレビュー用のChrome extensionを公開したので紹介したいと思います。 問題弊社ではリモート（シリコンバレー）に非エンジニアの決済者がおり、「新機能のレビューをどうやって行うか」が問題になっていました。 非エンジニア決裁者に向けた、技術アーキテクチャの説明 | チャットワーククリエーターズブログ これまでは以下の様な方法でレビューを行っていましたが、それぞれ問題があり解決策が求められていました。 画面を共有して説明するChatworkのLive機能で画面を共有しつつ説明する方法です。 メリット開発環境への接続方法等を考えなくていいので簡単気になる部分はその場で確認できるデメリット時間を合わせる必要がある（時差があるので時間調整が難しい）自分で操作できない（相手に音声で操作を依頼する必要がある）相手の環境でしか確

メリークリスマス！ChatWork CTOの山本です。 ChatWork Advent Calendar 2014もついに最終日となりました。 何を書こうかなーと2014年を振り返ってみると、ChatWorkの開発として今年は バックエンドをPHPからScalaへ (チャットワークがScalaを採用する理由)フロントエンドをJavaScriptからTypeScriptへ (チャットワークの、これからのフロントエンド戦略)モバイルをTitanium Mobileからネイティブ言語へ (ChatWork の Android アプリ開発裏話)と、基盤テクノロジーの大刷新を決断し、全社を挙げて推進していった1年でした。 関連するブログ記事では技術的な目線を中心に説明をしていますが、このレベルの刷新となると既存エンジニアの教育コストなども含め、会社のビジネスへのインパクトはとても大きく、開発部門の枠

着る毛布活躍中の@kyo_agoです。 この記事はChatWork Advent Calendar 2014 24日目です。 WorkspaceとはみなさんChromeのDevToolsにあるWorkspacesという機能をご存知でしょうか？ 実はこの機能2013年にはChrome stableに入っていますが、あまり話題になっていないようなので今回ご紹介したいと思います。 まず、Workspaceを紹介する前にLive editの機能を紹介したいと思います。 Live editとはChrome DevToolsのSourcesパネル内でコードを直接編集できる機能で、ここで変更した内容はページをリロードしなくても即座にページ上に反映されます。 ただ、Live editはページをリロードすると編集内容が消えてしまうため、修正した内容を取っておくには手動でローカルファイルにコピペする必要があり

お久しぶりです。かとじゅん(@j5ik2o)です。さて、僕は、ChatWorkに入社しても、相変わらず Scala や DDD を実践しているわけですが、今回は少し毛色が違う話をしたいと思います。先日、ChatWork Advent Calendar 2014 15日目の記事で、安達くんが、ID生成器の話を書いてくれたので、せっかくなので、ChatWork Advent Calendar 2014 23日目の記事として、Scala版も説明してみようかと思います。 PHPでID生成器を実装してみました | チャットワーククリエーターズブログ DBのシーケンスによるID生成ウェブサービスでは、時系列データを扱うことはよくありますが、タイムスタンプベースでユニークなIDを利用したいことがあります。方法論はいくつかありますが、お手軽なID生成といえば、DBのシーケンスを使ったものです。しかしながら

1年ぶりに記事を書きます。Web開発部のチバです。 この記事は ChatWork Advent Calendar 2014 の 22 日目の記事です。 みんないろいろ為になる記事を書いてて、プレッシャーを感じつつ、そのプレッシャーに押し潰された形でこの記事を書いています。 総務部の早乙女さんわたしが今日みなさんに紹介したいことは便利な情報やツールの事ではありません。総務部の早乙女さんのことです。 はい。誰なの。それをこれから説明します。 早乙女さんは総務部と言われている組織に所属している58歳のおじさんです。 チャットワークを使って色々と面倒なことをやってくれます。 最近パソコンを使い始めたばかりでまだ操作に慣れていないので今は出来ることは少ないですが、お願いした事をお願いした通りにやってくれます。(例外もあります) 何をしてくれるの早乙女さんにお願いをすると、特定の誰かをを既存のグループ

こんにちは！Web開発部の渋谷です。 この記事は ChatWork Advent Calendar 2014 の 18 日目の記事です。 先日、待望されていたメッセージ取得APIがリリースされましたね！ メッセージ取得API ドキュメント メッセージ取得APIが使えるとBotが作れたりと、夢が広がりますね 社内では、特定のBotアカウントへ「なに」と発言するとオフィスで流れている曲名を教えてくれるBotが作られたりと、おもしろいものが作られています 通知アプリ ChatWork Notifierそこで今回は、チャットワークをブラウザで開いていなくても通知を受け取れる通知アプリ ChatWork Notifier を チャットワークAPIを利用して作成しました！ 「チャットワークをブラウザで開くのを忘れて、メッセージに気付けなかった」などの声があったりしますので、解決の手助けになれば幸いです

こんにちは。先日、家族で衆院選の投票へ行く途中、スキップをしたら盛大に大コケして骨折からいまだ完治していない左手首を再度痛めたアプリケーション開発部の うえの (@astronaughts) です。 この記事は ChatWork Advent Calendar 2014 の 16 日目の記事です。 ちょいと本題の前にご紹介。先日の 12 月 10 日に Android アプリがリニューアルしました！ その時の開発秘話も公開中ですよ はじめにさてさて本題ですが、以前から気になってた MQTT について書きたいと思います。といってもあまり仕込みが出来なかったので、まとめ記事とさせていただきました。 ここ最近 IoT やら M2M というワードが盛り上がりつつあるなか、MQTT がそれらと同時に語られることが多い印象です。 本記事で紹介するのは、各種環境で動作する MQTT のクライアントのライ

こんにちは！Web開発チームの安達です。 この記事は、ChatWork Advent Calendar2014 15日目の記事です。 みなさん、Scala使ってますか？ 今日は「PHPでID生成器を実装してみた」というお話をしたいと思います。 IDの生成ウェブサービスのグローバル展開やスケーラビリティについて考えだすと、IDの生成に関わる課題が浮かび上がってくると思います。 例.「東京とシドニーのデータセンターにサーバを配備したとき、IDが衝突しないように生成できるのかな？」 またサービスの可用性について考えだすと、こちらでもID生成が絡む課題が。 例.「RDBMSのAUTO INCREMENTでIDを生成しているんだけど、この1台が落ちたらサービス止まっちゃう…。」(単一障害点) 理想としては、スケールアウト出来て、複数のサーバで並列にID生成が可能で、単一障害点にならないような形でID

(この記事は ChatWork Advent Calendar 2014 の10日目として提供いたします) 皆さん、こんにちは。 アプリケーション開発部の宮下と申します。 本日、 2014/12/10 に新しい Android 用の ChatWork アプリを公開しました 今年4月に Android アプリのリニューアルを行ったのは弊社のブログでお知らせしていたとおりですが、再び Android アプリをリニューアルする運びとなりました。今回はその裏話と技術的なお話をしたいと思います。 思いの丈を一通り綴ったので長文となっていますが、お付き合いよろしくお願いします Project “Harukas”4月に公開したバージョン 2.0 は、社内では “Harukas (ハルカス) ” というコードネームが付けられていました。大阪にある超高層ビルが由来ですね。 “Harukas” は先だって公開

お久しぶりです、デザイン部の守谷です。 ここしばらくクリエイターズブログでのアウトプットができていませんでした。その間、チャットワークと私の周りで何が起こっていたかというと、グローバル展開と合わせブランドカラー／ロゴの変更、それに合わせたチャットワークの各サイトのリニューアル、一番最近ではツールのカラーもブランド統一に合わせ変更になったのをご覧いただいていることと思います。 ちなみに、既にご利用の方はお気づきかと思いますが、今回のリニューアルではUI変更を行わずにテーマ（と一部アイコンの変更）のみの最小限での調整、という方針で進みました。利用者がたくさんいるチャットワークを大胆にいじって混乱を招くより、早々にカラーだけでも「チャットワークブランド」と合わせることが重要との判断からです。 色のみの変更、という場合、バランスだけ見ていればOK！簡単！速攻完了！そうは行きません。 もしもそれだけ

こんにちは！こんばんは！サーバーエンジニアの藤原です。 ChatWork Advent Calendar2014の7日目を担当します。 AWS最大のイベントAWS re:Inventをご存知でしょうか？毎年ラスベガスで開催されており、今年も11/11～14にかけて行われました。ありがたいことに、私は初回から3回連続で参加しています。そして、弊社クラウドチームから、今年は計5名！参加しました その後、シリコンバレーにもう1週間滞在し、計2週間の長期出張になりました re:InventではKeynoteをはじめ、様々なセッションが同時並行で行われるのですが、昨年・今年と行われている、ちょっと変わったイベントがあります。そう、GameDayです GameDayとは？2012年米国大統領選挙にてオバマ大統領陣営で行われたキャンペーン『Obama For America』が発祥のイベントになります。