はてなブックマーク

こんにちは、クレイの正岡です。 コロナ禍が始まってから小学生時代以来のゲーム生活を送っています。ゲームボーイと呼んでください。 さて、今回は React × Typescript でコードを書いている人／書こうとしている人に向けて、Reactコンポーネントの型定義について頭の片隅に置いておいて欲しい情報を共有したいと思います。 寝ながら使えてしまうReactコンポーネントの3つの型 () => JSX.Element 型 interface Props { text: string } const Hoge = ({ text }: Props) => { return ( <p>{ text }</p> ) } 上記のように返り値の型を特に指定していない場合、 このコンポーネントは JSX.Element型 を返す関数（ () => JSX.Element ）として返ります。 React

こんにちは！ クレイのasachunです。 ここ1年ほど DocBase はフロントエンドのフルリプレイスを行っており、てんやわんやの日々を送っておりました。 フロントエンドの改修にあたり、Figma + Atomic Design でUIコンポーネント集を制作しました。今回はその作業の経緯、どのように進めていったか、よかったことや大変だったことを書いていきたいと思います！ この記事の前提として必要そうなので、私のスキルはこちら↓ HTML(Haml, Slim), CSS(Sass) でのマークアップ経験7年ほど Photoshop, Illustrator, XD, Figma は一通り使える メインのデザイナーとして1からデザインカンプを作った経験はなし ここ数年は DocBase のUIデザインをちょこちょこやっています Webとは関係ないけど似顔絵が得意です ガッツリ実装はできな

はじめに はじめまして。 2019年3月に入社した正岡です。 平均週に4回、大分県中津のから揚げ弁当を食べている大の鶏好きです。からあげクンと呼んでください。 主に Rails × Typescript のプロジェクトにフロント／バックエンドエンジニアとして参加しています。今後ともよろしくおねがいします。 本記事の内容 およそ１年前、弊社ではDocBaseのユーザーの皆様により良いユーザー体験をしていただくために何ができるかを検討しました。結果、フロントエンドを改修して SPA（Single Page Application） に移行することで、従来よりも速く、快適にご利用いただけるのではないかという結論に至り、ご存知の通り先日リリースいたしました。 フレームワークどれを使うか問題 既存サービスのSPA化などのフロントエンド改修を検討する際、「フレームワークどれ使う？」問題にぶち当たります

こんにちは。クレイの浅海です。最近の休日は3歳児とマイクラをしています。 さて、業務ではここ1年ぐらい、DocBaseのフロントエンドのフレームワークをBackbone.jsからReact.jsに変更する作業をしていました。 完全に作り直しです。2万行を超えるBackboneのコードとお別れをしました。バイバイバックボーン。 詳細 → DocBaseのフロントエンド改修をどのように進めたか Reactで実装する上で苦労した点 DocBaseにはReactとマッチしない機能もいくつかあり、Reactで実装する上で苦労しました。その一つが、メモの表示です。「メモ」というのは、DocBaseの投稿の単位です。メモは例えばこのような投稿 メモの内容は、ユーザが投稿したmarkdownをサーバでHTMLに変換しデータベースに保存、それを表示時にサーバから受け取ったHTMLをReactが表示することに

こんにちは、クレイの阪本です。 もともと外部委託パートナーとしてクレイ案件のお手伝いをしていましたが、気づけば中の人となっていました。 よろしくお願いいたします。 先日、DocBaseはフロントエンド構成を Backbone.js+Coffeescript から React.js+TypeScript へ移行しました。大改修です。 どれくらい大きな変更だったかというと、10万行(2500ファイル)もの変更が行われ、それまでRubyだったはずのリポジトリ代表言語がTypeScriptに替わってしまったほどでした。 なお、2021/3/31のリリースでリニューアルすべてが終了したわけではありません。今後、機能拡張やUI改善をしやすくするための足がかりという位置づけです。 安全にリリースするためテスト期間を多めに取ったこともあり、期間としては1年ほどかかってしまいました。 今回はどのようにリニュ

初めに こんにちは。クレイの浅海です。普段はRuby on Railsを書いていますが、最近はElixirのPhoenixも勉強しています。 なぜなら、弊社で開発、運営しているDocBaseは、主となる部分はRuby on Railsで作られていますが、同時編集に使うサーバにはPhoenixを使用しているためです。 Phoenix Frameworkとは Phoenixは、Railsを意識して開発されているWeb Frameworkです。とはいっても、その設計思想には大きく違う部分があります。PhoenixはRailsのように暗黙的に様々なことをやってはくれません。いえ、やってはくれないというより、やりません。見えるコード以上のことをやってしまうと、明解さが損なわれるということのようです。たしかに、Railsはrailに乗りさえすればコードの量は最小になりますが、実際には何が起きているかと

お久しぶりです、亀井です。相変わらず赤いプロ野球球団の動向を追いかけ続けています。一眼レフカメラと超望遠レンズも買ってしまいました。いい瞬間を捉えられたときはテンションが上りますね。 今回はGitをはじめたばかりのときにつまづきがちな「ステージング」について絵を交えて説明してみようと思います。 ※ この記事は和み系記事です。 ステージングとは git の作業スペースには「ワーキングツリー」と「インデックス」があります。 （以前に書いた記事 git pull と git pull –rebase の違いって？図を交えて説明します！から引用） ワーキングツリーは作業している最中のスペース、インデックスはコミットするためのファイルを登録しておくためのスペースです。ステージングとは、「インデックスにコミットするファイルを登録する」ということです。 でも、私は始めのうちは「なんで git add が

はじめに 皆さんはGoogleドキュメントやHackMDを使ったことはあるでしょうか。これらのツールは「ネット越しに同時に複数の人で1つのドキュメントを編集できる」という特徴を持っています。お互いの編集がリアルタイムに反映されるので、相手が何を書くのかを意識することなく、簡単にドキュメントを複数人で編集することができます。これを実現するためには、同時編集に参加しているユーザ全員の編集内容がネットワークの延滞に影響されることなく、それぞれの編集内容をうまい具合にマージして反映してくれるような賢いアルゴリズムが必要になります。今回はこのアルゴリズムに関して書きます。 編集内容のマージとは 編集内容をうまい具合にマージしなければいけないケースを考えてみます。 AさんとBさんが次のドキュメントを同時編集するとします。最初は、お互いブラウザ上では次のように見えています。当然、この状態ではお互いに見え

こんにちは、浅海です。 日頃開発をしている中で、設計や実装内容を他の人と共有するためにUMLを使いたい時があります。 そんなとき、紙とペンを使って書くのが一番手っ取り早いですが、綺麗なものをデータとして作成する場合はPlantUMLを使うのがおすすめです。 PlantUMLは特別な記法で書いたテキストをUMLが描画されている画像ファイルとして変換してくれるJava製のツールで、とても簡単に様々なUMLを作成することができます。 PlantUMLの実行方法 変換する方法は２つあり、１つは変換する都度jarファイルを実行する方法があります。 ただ、この方法だと実行時のオーバーヘッドが気になるので、今回はもう１つの方法を使います。PlantUMLが公式で提供しているWebサーバを利用する方法です。このWebサーバを立てると、HTTPのGETリクエストによりPlantUMLの記法を画像ファイルとし

ギルドワークスの市谷さんと中村さんに仮説キャンバスを作るワークショップをしていただきました。DocBaseをリリースして1年過ぎて、何となくモヤモヤしているところをスッキリしたいというのと、社内全員でサービス事業を見直してみる良い機会になるのではと思い、お願いしました。 ギルドワークス https://guildworks.jp/ 仮説キャンバス 仮説キャンバスとは事業を整理し、検証するためのツールです。ギルドワークスが様々な企業と一緒に仮説検証を繰り返す中でリーンキャンバスを参考に作ってきたものだそうです。 ワークショップ 緊張気味の弊社スタッフをギルドワークスの中村さん（写真右から２番目）がうまくいい雰囲気に持っていきます。個人的に中村さんの問いかける進め方がとても勉強になりました。今度絶対真似します。 まずは課題から 顕在課題から考え始めるとやりやすいとのことです。もちろんこれまで何

こんにちは、にわかカープファンの亀井です。先日マツダスタジアムに観戦に行ったら私の応援がうるさすぎたのか隣に座ったおじいさんがいつのまにか移動していました。 最近はIE8以下の対応も減り、気軽にSVG画像を使えるようになってきたのではないでしょうか？クレイでも出来る限りアイコンなどはSVG画像にしているので、今回はRailsでの使い方をご紹介します。※弊社では主にテンプレートエンジンにHaml, Sassを使っているので、説明でもHaml, Sassを使います。 SVGの読み込み方 SVGは様々な読み込み方がありますが、最近は私はほぼインラインSVGです。 理由としては CSSで色や線などのスタイルを変更できる 使い回しが容易 Sourceの読み込み数が減るのでサイトが軽くなる 特に 1. の理由が大きいです。PNGの場合、同じ形でも色が違えば違う画像として書き出す必要がありますが、SVG

はじめに ソフトウェアに限らず、開発を事業にする組織は競争力強化のためにコア技術を持つ必要があります。一方、エンジニアは自分の市場価値を保ち高めるために、常に新しい知識をつけスキルを磨かなければなりません。本エントリではこの両者の関係を整理し、組織の競争力強化とエンジニアのスキルアップに対するKRAYの取り組みを紹介します。 コア技術 コア技術とは、複数の商品に利用できる、組織の構成員に蓄積されたある分野の知識のことです。例えば、ある家具工房に曲げ木細工のできる職人さんがいて、様々な曲げ木の家具を販売していたら、その工房にとって「曲げ木」はコア技術です。まずコア技術について少し説明します。 企業の競争力 企業が存続するには、顧客に価値を提供し、代金や報酬を得なければなりません。さらに、殆どの場合は競合する企業がいますので、その中から選ばれる必要があります。つまり競争力を持たなければならない

はじめに AWS を使った開発をしていて、こんな困ったことがありました。 ○○を操作する権限が欲しいのに、IAM を操作できる担当者が捕まらなくて開発が進められない 特定のプロジェクトに関するリソースだけアクセス許可したいけど、○○にはリソースによる制限ができない マネジメントコンソールを使えるようにしようと思うと、あまり権限を絞れない これらによって、開発スピードが上がらないというのが大きな問題になりました。 さて、原因はなんでしょうか。 ○○を操作する権限が欲しいのに、IAM を操作できる担当者が捕まらなくて開発が進められない ⇒ 開発者に権限が与えられていないから、権限を持った人に頼らなければならない 特定のプロジェクトに関するリソースだけアクセス許可したいけど、○○にはリソースによる制限ができない ⇒ 開発者にアクセスさせられないリソースがあるから、開発者の権限を絞らなければならな

はじめに ようやく待望の冬！なんですが、先日20℃を超える気温を記録しましたね。季節外れの熱気に驚きました。それに今シーズンは暖冬になりそうということで雪不足も懸念されます。まだスキーの予定も立てられてないんですけど。 さて、最近のWebサービスではAPIを公開することも珍しくないと思います。参考になるRESTfulなAPI設計もよく見られるようになりました。ただ、そのなかで分かりやすい資料、APIの実行を試しやすい環境を提供できているケースはそう多くないように思います。開発者の立場でいえば、ドキュメント整備にそこまで気を遣う余裕なんてないことが大半かもしれません。一方で、APIを利用する側からすれば最初に目を通すのはドキュメントですから、その出来不出来はAPIに対する評価にもつながります。 そういうわけで、今回はWeb APIのドキュメント環境である Apiary を使って、時間をかけず

はじめに DocBaseでは新機能追加以外にも、日々いろいろな改善を行ってます。 今回はセキュリティ周りの改善として、IAM ロールに移行した話を書きます。 IAM ロールに移行した理由 IAM ロールを使うことでアプリケーション側で、認証情報を管理をする必要がなくなるのでセキュリティを高めることができます。 Amazon EC2 の IAM ロール http://docs.aws.amazon.com/ja_jp/AWSEC2/latest/UserGuide/iam-roles-for-amazon-ec2.html 方針 IAM ロールに移行前の状態でDocBaseでは、AWS API を利用するための gem として、 aws-sdk-ruby v1 carrierwaveでS3に画像をアップロードするのにfog を使ってました。 aws-sdk-rubyはAWSが提供してるAWS

はじめに こんにちは。デスクトップアプリケーションを手軽に作りたいと思ったことはないでしょうか？ 普段Webアプリケーションを開発している場合、 デスクトップアプリケーションを作ろうとすると、開発言語やライブラリがWebアプリケーションとは違うので、別な知識が必要になるのと複数のプラットフォームで動くものを作ろうとすると大変ですね。 そこで、今回はWebアプリケーションのKPTBoardのJavaScriptとCSSのコードを一部流用と修正して、Electronで動かしてみました。 Webアプリケーション版のKPTBoardと違う点 今回はWebアプリのデスクトップクライアントアプリではなくて、単体で動くデスクトップアプリとして作ってます。 複数人には対応してないです。 投稿した内容は、データーベースではなくてアプリのlocalStorageに保存されます。 Electronとは http

はじめに こんにちは。皆さんはReact使われてますでしょうか？ 今回はReactとFluxについて書きます。 MVCの問題点 詳しくはこちらに書いていますが、MVCでアプリを作った場合は、ModelとViewの間で双方向のデーターフローが作られる可能性があるので理解したりデバックするのが難しくなります。 React単体で使った場合の問題点 子のViewでなにかアクションを起こした結果、親のViewにも変更を伝えてなににかをする場合、子のViewに親のViewのコールバック関数を渡す必要があります。 子のViewの下にさらに、子のViewがあって、アクションが起こった時に親のViewに伝えようとするとコールバックが深くなって複雑になってしまいます。 Flux それを解決できる方法としてFluxです。 Fluxを使うとデーターフローが一方向になります。 やってることはObserverパターン

こんにちは、クレイの亀井です。もうすっかり秋ですね！コンビニやケーキ屋さんに芋栗南瓜のスイーツがもりだくさんでテンション上がりっぱなしです さて本題に入ります。先日9月30日にクレイ社内で Sass 勉強会を開催し、CSS 設計について発表しました。そのことについて今回はブログに書こうと思います。 開催することになった経緯 数ヶ月前から社員のキャリアアップのため、『クレイ社員補完計画』が開始しました。週に4時間まで自分の好きなことを勉強する時間をとれ、2ヶ月に一度ブログや勉強会などの場で成果を発表します。 私ははじめ別のテーマにしていたのですが、いまいちモチベーションが上がらず、相談した結果 Sass をテーマに勉強会を開催することになりました。 社会人になってから2年半、スライドを制作して発表をするという経験がなかったのですが、いつか外部の勉強会で LT などしてみたいと思っていたためい

はじめに こんにちは、クレイの亀井です。ここ最近一気に気温が上がりましたね。顔に重点的に汗をかくタイプの私には憂鬱な季節がやってまいりました さて、今月正式リリースしました(！) DocBase プロジェクトではクレイ外部のデザイナーの方と一緒に開発しています。SourceTree で Git を使っている方で、軽いデザイン修正などは弊社の Rails プロジェクトに直接手を加えてプルリクエストを送ってくれます。 こちらのデザイナーさんに「プルリクエストを送る際は、作業ブランチで git pull --rebase origin master してから送ってもらえますか？」とお願いすると「pull はわかるんですけど、この --rebase ってなんですか？これつけると何が変わるんですか？」と質問がきたのです。 作業ブランチで git pull --rebase origin master

はじめに Raspberry Piとは こんにちは。皆さんは Raspberry Pi をご存じでしょうか。簡単に説明すると、イギリス発の教育向けワンボードマイコンです。 Raspberry Pi クレジットカードサイズでたったの$35(日本だと送料込みで¥5000程度)。それでもれっきとしたLinuxが動作するRaspberry Piは、発売以来3年で通算500万台以上を売上げ、イギリスのコンピュータメーカーとして最大の出荷数を誇っているそうです。 Raspberry Piの売上が500万台を突破…イギリスのコンピュータメーカーとして新記録 – TechCrunch 本体以外に最低限必要なものは、USBコネクタ経由の電源(PCの500mAだとちょっと足りないかも)とMicroSDカードです。電源はスマートフォンの充電用が大抵使えますし、MicroSDカードの8GBでClass10以上とい

はじめに ローカルで開発してる時にMacに直接環境を作って開発してる方が多いかと思います。 自分も前はそうしてたのですが、特定のバージョンじゃないとうまくビルドできないライブラリや特定の条件の動作環境を用意したりするのがやりずらかったので、VMのLinux上で開発するようになりました。 それに加えて最近はDocker使って複数のマシンで同じ開発環境をすぐ用意したり壊したりできる仕組みにしています。 今回はその辺のことを書きます。 CoreOSとは https://coreos.com Dockerのコンテナを動かす用途に特化したOSです。 なので、余計な機能があまり入ってなくて良いです。 VirtualBoxのインストール まず、CoreOSを動かすのにVirtualBoxをインストールします。 ここからダウンロードしてインストールします。 https://www.virtualbox.o