ChatWork Creator's Note

ビジネスチャット「チャットワーク」のエンジニアとデザイナーのブログです。

ChatWorkのコーポレートフォントとその歴史を掘り下げる

はじめまして。デザイン部のかねこです。 すっかり桜も満開になり、毎日桜と東京タワーを眺めて良い心地になっている今日このごろです。いい季節ですね。

さて今回はChatWorkのデザインガイドラインに紐付いたお話です。デザインガイドラインとは?最初に分かりやすい例として1つご紹介します。

ChatWorkではロゴを自由にダウンロードしてお使いいただけるよう、 ダウンロードページ をご用意しています。 その中に「ロゴ利用ガイドライン」というドキュメントがあり、ChatWorkのロゴをご利用の際に守っていただきたいルールが書かれています。

f:id:cw-tomomi:20180330150723p:plain
横並びのロゴのセーフティスペースや組み合わせのガイドライン(抜粋)

引用元:ChatWorkロゴ利用ガイドライン(PDF)

このように、色やフォント、レイアウトなど会社で設けているデザインのガイドラインがいくつかあります。

続きを読む

アイトラッカーデバイス初体験

こんにちは、デザイナーの(@emim)です。チャットワークのUIデザインをおこなう傍ら、社内でのアクセシビリティ関連の対応・施策や啓蒙を進める係をしています。

先日、AccSell Meetup 013 『ユーザーと一緒に試してみよう! ~あの○○はどこまで使えるのか~』 | Peatixというアクセシビリティのイベントに参加しました。元々アクセシビリティの情報をメルマガ/ポッドキャストで配信されているAccSell(アクセル)というサイトが定期的に開催しているセミナー形式のイベントで、13回目は視覚障害者の普段のWebの使い方を見る(ユーザーテストの公開)、という回でした。

今回はそのイベントの導入セッションでおこなわれた、アイトラッカーデバイス「Tobii Eye Tracker 4C」の操作デモと、実際に私自身が体験させてもらった操作感が衝撃的だったので紹介します。

Tobiiってなに?

f:id:cw-moriya:20180327111639p:plain

出典:Eye Tracking + Windows 10 – Official Eye Tracking Blog

Tobiiとは、アイトラッキング(視線追跡操作)機能を使った端末のこと。

販売サイトを見ると、この端末自体はゲーム用に作られたもののようです。

細長いバー状の端末を磁石でパソコン画面の前面に配置。このバーが視線の動きを測って、マウスの代わりに画面を操作できるようになるという仕組みです。

続きを読む

第2回 SRE Lounge(主催 ユーザベース様) に参加しました!

はじめまして。ChatWork SREチームの坂本です。先日の東京マラソンで無事にサブ3.5を達成しました。サブ3.5は1QのOKRの1つだったので、無事に達成できて何よりです。

さてさて、先日、弊社の冨田が下記のブログを公開したところ、ユーザベース様より、SRE Loungeへのお誘いを頂き、その取り組みに共感し、参加させて頂きました。

creators-note.chatwork.com

SRE Loungeについては、下記のユーザベース様のブログをご参照ください。

tech.uzabase.com

場所は、弊社シアタールームにて、ユーザベース様のお声がけにより参加したのは下記の企業となります(敬称略)。

  • 株式会社クラウドワークス
  • 株式会社スタディスト
  • 株式会社ユーザベース
  • ChatWork株式会社

以降、会社名の敬称は略させて頂きます。

続きを読む

Android P Preview SDK でアプリをビルドできるようにしてみよう (Preview 1 時点のお話)

こんにちは @ryugoo_ です。

先日、 Google から Android P Developer Preview が発表されました。残念ながら日本では合法的に Android P Developer Preview をインストールして実機テストできるデバイス (Pixel シリーズ) は発売されていませんが、ひとまずはエミュレーターを使ったテストを行うことができる状態です。 Google には是非とも日本における Pixel シリーズの発売を実現してほしいものです。

それはひとまず横に置いて、 Android P Preview SDK が公開されたことで、私たちチャットワークの Android アプリが Android P Preview SDK を使ってビルドできるかのチェックを行いました。最終的に無事にビルドと動作確認を行うことができましたが、そこに至るまでにハマった過程があります。

今回はハマった事柄と、それをどう解決したのかを共有したいと思います。

続きを読む

Kotlin を使った Android アプリ開発を拡張関数で加速させる!

こんにちは。 @ryugoo_ です。先日、 Google から Android KTX というライブラリが公開されました。チャットワークの Android アプリでも早速利用を開始しています。

developers-jp.googleblog.com

Android KTX は Kotlin で Android アプリを開発する場合に使える拡張関数群です。よく使う処理を簡潔に呼び出して使えるようになります。

// Before
sharedPreferences.edit()
  .putString("Hello", "World")
  .apply()

// After
sharedPreferences.edit {
  putString("Hello", "World")
}

もちろん Kotlin の拡張関数は自分達のコードでも定義して使うことができます。今回は私たちが実際に使っている拡張関数の一部を紹介したいと思います。

続きを読む

chatwork-cliというツールを作った話

こんにちは、あらいです。

ツールを作りました

chatwork-cliというツールを作りました。 Go言語でできたチャットワークAPIのCLIクライアントで、shellから簡単にAPIを叩くことができます。 こんな風に。

# 自分の情報を得る
$ cw get me
# ===> GET https://api.chatwork.com/v2/me

$ cw get me | jq .name
# "新井崇司"

# 自分のタスクを得る
$ cw get my tasks
# ===> GET https://api.chatwork.com/v2/my/tasks

# メッセージを投稿する
$ cw post rooms 84810920 messages 'body=I am hungrrrry'
# ===> POST https://api.chatwork.com/v2/rooms/84810920/messages

shからチャットワークに通知を送る・タスクを作るなどの用途に使うことができます。 go getコマンドで入手(GitHubのREADMEを参照)、 またはリリースページからMac用のバイナリがダウンロードできます。

ぜひご活用ください。

注:これは新井個人が作ったツールであり、ChatWork社が公式にサポートするものではありません。

なぜ作ったか

chatwork APIはcurlコマンドで簡単に利用することができます。 先々月に招待リンクを操作する機能をリリースしましたが、 その開発中にモリモリcurlを叩いていました。 しかし複数アカウントを切り替えて使おうとするとトークンの管理が面倒であったり、 送信先のroom_idが覚えていられないなど、不満がありました。

きっかけは、ひむひむこと@eielhが作った社内ツールでした。 これは30行に満たないshでできており、httpiejqを使って内部用APIをCLIから叩くものでした。 しかしこの小さなツールは素晴らしく便利であり、テスト等で大活躍します。 着眼点の良さ、また大部分をhttpieに任せつつも違和感なく内部APIを操作できるI/Fデザインに感動しました。

私は思いました。これパクったろうと。 そしてできたのが、言わばツールの公開用APIバージョンである chatwork-cli です。

こだわったポイント

なぜGoを選んだか

シングルバイナリによるツール配布の容易性、及び組み込みライブラリの機能の豊富さからGoで作ることにしました。 Goは初めてでしたがTour-of-goなどを読みながら1ヶ月ほどで組み上げることができました。 goroutineは使いどころ(使って有効な勘所)が分からず全て同期で作っています。 おそらく他の言語で実装することも簡単でしょう。ボトルネックが分かったらgoroutine化してみたいと思います。

エンドポイントの情報は持たない

GoといえばPHPと違って静的型が嬉しい言語ですが、このツールはエンドポイントの情報をあえて持たないようにしています。 従って存在しないエンドポイントにも簡単にリクエストを送れます。

# tasksのtypo
$ cw get my task
# {"errors":["Invalid Endpoint or HTTP method"]}

それどころかHTTPのメソッドもチェックせずなんでも送れるようにしてしまいました。 なのでこういうこともできます。

$ cw rock you
# ===> HTTP ROCK https://api.chatwork.com/v2/you
# {"errors":["Invalid HTTP method"]}

なぜこうしたかというと、そもそもが開発・テスト用に自分が欲しいツールだからなんですが、 実際のプロダクション環境ではこういった不正なリクエストが送られてくる可能性は常にあるわけで そのような不正な使われ方をした時の検証にも役立つかな、という思いがありました。

あと実際のユーザが正しいエンドポイントを把握できるよう、 -endpoint オプションで ramlをパースして正しいエンドポイントを一覧表示する機能をつけています。

コマンドの挙動をテストする

小規模なツールなのでユニットテストはあまり書いていません。 その代わり作ったバイナリである cw コマンドの挙動(exit codeや表示内容)をテストしています。 ただコマンドの挙動テストの今時なやり方が分からず、困った挙句 Makefile に書いてしまいました。 (当該箇所

これでも一応用を足すことはできますが、より良い方法があれば教えて頂けると嬉しいです。

これから

chatwork-cliはMITライセンスのOSSです。 issue、P-Rも大歓迎です。

将来的にはOAuth2で認証して使えるようにしたいと思いつつ着手していません。 やる気を溜めて作っていきたいと思います。よろしくお願いしますf:id:cw-arai:20180305115527g:plain:h20:w20

github.com

オフィス作りにDIYを取り入れるメリット

f:id:cw-shinmen:20180223123346j:plain こんにちは。デザイン部の新免です。

11月にオフィスを移転し約3ヶ月が過ぎました。新しいオフィスにも慣れ快適に仕事をしています。 東京オフィス自慢の「椅子」紹介 の記事で、こだわりのデザイナーズ家具の椅子を紹介しましたが、こだわりはそれだけではありません!

今回の移転には「DIYを取り入れ自分たちでオフィスをアップデートする」というサブコンセプトがありました。DIYを取り入れた理由としては、自分たちでオフィスづくりをすることで愛着を持つことができ、より快適にオフィスで仕事ができるようになるのではと考えたからです。

今回はDIYした家具の紹介と、オフィスにDIYを取り入れることのメリットを紹介します。

続きを読む