Typetalk チームフロントエンドエンジニアの岡藤（@johnykei）です。先日 Typetalk Webサイトリニューアルに伴い、フロントエンドの技術を jQuery から React + styled-components に刷新しました。本記事では、React を用いた Web サイト制作についてお伝えします。 はじめに タイトルにもあるように、僕は今まで JavaScript を書く必要がある時は使い慣れた jQuery を使っていました。 フロントエンドエンジニアという肩書きではありますが、フロントエンドエンジニアという職種は幅広く、僕はどちらかというとページやUIのスタイリングが主な業務で、普段 JavaScript を書く頻度もそんなに高くありませんでした。 最近海外ではそのような業種の人をフロントエンドデザイナーと呼ぶ動きも出てきていますが、jQuery しか使ってい
注意 HTML5 からは 見た目は CSS に任せ、HTML は文書の構造（セマンティック）を表すことのみに重点を置かれるようになりました。例えば箇条書きリストを作るのに div と display: list-item; を使って構築するより、箇条書きリストを表す ul li を使ったほうがよりセマンティックです。このように目的にあった HTML 要素を使うようにしてください。 ボックスモデルとは CSS でレイアウトをする際には、 ボックスモデル を理解する必要があります。 CSS の定義するボックスモデルは以下の図のように 4つの領域で構成されています。 ボックスモデル解説図 content（コンテンツ） テキストや画像など、要素そのものの内容が表示される領域です。この領域のサイズは width（幅） と height（高さ）プロパティで指定することができます。 padding（パデ
Typetalkデスクトップアプリ 先日、弊社チャットサービスTypetalkのデスクトップアプリをリリースしました。おそらくTypetalk.appのパッケージを覗いてElectronの痕跡を見つけ出した方もいらっしゃると思いますが、その通りElectronをベースに実装しています。 ElectronはHTML、JavaScript、CSSなどWebの技術を使用してデスクトップアプリを開発できます。GitHub社のAtomエディタをはじめとして、今では非常に多くのアプリがElectronベースで公開されており、実装方法についても既に多くの記事が書かれています。 ただし、正式にアプリを公開する場合には、コードサイニングなどを行うなど、考慮が必要なポイントがいくつかあります。そこで本記事では正式にElectronアプリをWindows/Mac向けにリリースするにあたって必要だった3つのことを
こんにちは。Typetalkチームの永江です。今回は4月にリリースした、BacklogとTypetalkの連携機能である「Backlogカード」の実装の際に行った クリックジャッキング対策 について説明します。 Backlogカードとは Backlogカードは、Typetalkのトピック内にBacklogの課題やコメントをカード形式にして表示する機能です。Backlogの課題キーや課題のURLを貼り付けるだけで、以下の画像のように表示できます（※詳しいご利用方法についてはこちらの「Typetalkのトピック上で課題の詳細を見られる Backlogカード をリリースしました！」をご参照ください）。 Backlogカードの実装は、TypetalkからBacklogに用意した埋め込み用の課題ページを<iframe>で表示するというものです。このような実装にしたのは、もともとBacklogに<if
Java 9の起動パラメータ java.locale.providers に Java 8 と同じ優先度で国際化を行う指定をします。 java -Djava.locale.providers=COMPAT,SPI この設定で日付のフォーマットが Java 8 と同じように動作するようになり、自動テストが成功しました。 以上で 750 個のテストがすべて成功するようになりました。次はいよいよJava 9で既存のソースコードをコンパイルします。 Java 9でコンパイルして Java 9で動かす ヌーラボのアカウント基盤には Java のコンパイル対象が約 1,360 ファイルあります。目標は 1,360 のソースコードがJava 9 ですべてコンパイルできることです。 コンパイラの設定を Java 9に切り替える コンパイラを Java 9に切り替えます。Java 9のバージョン指定には注意
以下の3コマンド、これだけでプロジェクトに必要な開発環境ができあがる。そんな環境を Docker で作ってみませんか？ $ git clone https://github.com/dataich/sample-docker.git $ cd sample-docker $ docker-compose up こんにちは、Typetalkチームのエンジニアの吉田です！ 新しいエンジニアがチームに入ってきてまずやることは、DBやWebサーバなどの開発環境を構築することでしょう（9月に新しい人がチームに入ります、やったね！）。 Typetalkチームでも以前はREADMEに記述された手順に従って、開発者が個別に構築していました。その際READMEに書かれたミドルウェアのバージョンが古かったり、実は手順そのものが変わっていたりすることもあり、ハマることもありました。また、複数のプロジェクトで違う
このエントリは前後編に分かれています。前編は主に運用フローやそこでの工夫点、後編は実際の運用から得た知見や今後の課題といった内容です。 ヌーラボのインフラ運用最前線 〜イミュータブルを目指して〜 (前編) ヌーラボのインフラ運用最前線 〜イミュータブルを目指して〜 (後編) 最近はインフラ運用・DevOPS関連のトピックとして目にしないことはないくらい、「イミュータブルインフラストラクチャー」について様々な議論がなされています。私たちも昨年、継続的デリバリという文脈で、@IT の連載にてその基本的な考え方について紹介させていただきました。 さて、今年の二月にローンチをしたばかりのヌーラボのシングルサインオンサービス「ヌーラボアカウント」では、イミュータブルインフラストラクチャの一歩手前として、特定の変更を加える場合のみ、ごっそり環境ごと入れ替えるというやり方にてその運用をスタートしました。
このエントリは 達人出版会から昨年出版された電子書籍「開発現場に伝えたい10のこと」のうち、私がヌーラボの開発の進め方について紹介させていただいた章を出版社の許可を得て転記したものです。その他の章も関西を中心に活躍しているエンジニアの経験にもとづく知見にあふれたものになっておりますので、本エントリを読んで興味をもたれたらお手に取って頂ければ幸いです。 では、少し長文になりますがおつきあいください。はじまりはじまり！ 「どうすれば価値を生み出すか」を知るためにヌーラボで行っていること 私が所属する株式会社ヌーラボは20名ほどの小さなソフトウェア開発会社です。私たちが自社で開発、運営しているウェブサービスには以下があります。 プロジェクト管理ツール Backlog オンラインドローツール Cacoo これらのサービスは、国内だけでなく海外でも沢山のユーザに利用いただき「使いやすい、楽しい」とい
“このチームで一緒に仕事できてよかった” を世界中に生み出していく。 仕事が少しでも楽しくなることを目指し、コラボレーションツールを開発・提供しています。 すべてのチームが使える プロジェクト管理ツール Backlog はチームで働くすべての人が使えるプロジェクト管理ツールです。マイルストーンやガントチャートなどを用いて、課題の優先付けや期限管理が簡単にできます。ソースコードの管理にも最適です。 もっと詳しく アイデアを形にする ビジュアルコラボレーションツール Cacoo はウェブブラウザで使える作図共有ツールです。難しい操作は不要でアイデアをすぐに可視化できます。ワイヤフレームなどの基本的な図からベン図やマインドマップなどの特殊図のテンプレートをご自由にお使い頂けます。 もっと詳しく チームワークのための チャットツール Typetalk は雑談を成果に変えるチャットツールです。スピー
Photo via Visual hunt Backlog の一部のスペースにて Amazon Aurora へと移行しました。ここでは、その経緯と実際に実施した作業を簡単にご紹介させていただきます。 移行の経緯 昨年末データベース障害が発生しユーザー様には多大なご迷惑をお掛けしてしまいました。 Backlog には Terraform をどう使っているかを紹介したブログ にあるように複数の運用環境があります。 その各々の環境の構築時期によって EC2 上で自前運用していた MySQL もあれば、RDS for MySQL もある、といった統一されていない状況でした。また EC2 上ではまだ MySQL 5.1 も稼働していました。 移行を検討するにあたり、優先したのは障害時の復旧が素早く出来ることと、少しでも運用の管理コストを下げることでした。Backlog のサーバは 100 台以上で
CDNが単一障害点にならないようにするために ヌーラボでは 2010 年 Cacoo の商用サービスの開始に合わせて AWS における運用を開始しました。当時、運用環境として AWS を採択する決め手の一つになったのが CloudFront でした。その後も着々とエッジロケーションは増え、独自ドメインのサポートなど魅力的な機能も提供され、今ではヌーラボの全サービスの静的ファイルの配信で利用している、無くてはならないサービスとなっています。 その魅力の反面、CloudFront の障害は、アプリケーションそのものに問題がなくても、以下のような表示が崩れた画面が表示されて、ユーザが全くサービスを使えなくなるという、その影響が非常に大きいものです。また障害の原因が DNS やネットワークの経路における問題といった、私たちが直接解決しにくい領域にあることもしばしばです。 ただ、どんな事情であれ、障
初めに こんにちは。ビジネスチャットサービスTypetalkを開発・運用している吉田です。Typetalkではデータの永続化ストレージとしてPostgreSQLを利用しています。扱うデータ量は多く、チャットというサービスの性質上書込み頻度はとても高いです。PostgreSQLを使い日々開発を進めていると、追加する機能によってはスキーマを変更する必要があります。メンテナンスを計画・告知してサービスを止めてしまえば、時間はかかるかもしれませんがスキーマの変更はそう難しくありません。しかしTypetalkはユーザーが日々の業務を進めるために利用しており、サービスが止まるとコミュニケーションが取れなくなります。業務を円滑に進めるためのビジネスチャットツールですので、極力サービスは止めたくありません（最後の計画メンテナンスは2019年6月30日で1年以上前となっています。）。本記事では以下の3つのケ
こんにちは！ Cacoo チームの中原です。現在CacooチームはFlashで作られている図の編集画面(以下エディタと表現します)を* HTML5 で置き換える開発を進めています。このブログでは、 HTML5 版 Cacoo で図形の描画に使用される、SVGを選択した理由と経緯について説明したいと思います。 （*置き換える理由については「Good-Bye Flash ~ CacooはHTML5で生まれ変わります」をご覧ください） どの技術を使って図形を描く?重視したのは「パフォーマンス」 図形の描画にどんな技術を使うか。いくつか候補を上げました。 2D Canvas 3D Canvas (WebGL) SVG (これ以外に、Unityという意見もありましたが今回はWeb標準技術を使うことを前提にしました。) さて、どれを使おう。私たちがどの技術を選択するのか、基準を決める必要があります。そ
Rust + Yew = WebAssembly でかんばんライクなタスク管理アプリを作ってみました。 YewはRustで書かれたフロントエンド向けのフレームワークです。 書かれたコードはWebAssemblyに変換されて、ブラウザ上で実行することができます。プロジェクトのREADMEに「ElmとReactに影響を受けた」と書かれているように、JSX風のHTMLを書けるようなマクロが用意されていて、Rustのコード内にHTMLっぽく表現でビューを書くことができます。 また、Elmアーキテクチャのように、モデルとビューがあり、メッセージによって状態の更新がされるようになっています。 というわけで、以前、このブログでsakiが書いた「Vue.js でかんばんライクなタスク管理アプリを作ってみました。」という記事を参考に、見ためがほとんど同じようなかんばんライクなタスク管理アプリ (タスクボード
こんにちは。Cacooチームのイニエスタこと、とおのぶです。CacooはデータベースのPostgreSQLのバージョンアップを実施しました。基本的には公式のpg_upgradeの手順に従っています。ここではドキュメントには記載の少ない具体的な作業内容の流れを紹介したいと思います。 理由 ユーザアンケートからみる Cacoo のコア・バリューで記されたとおり、全体的なパフォーマンスの向上については重要度の高い課題の一つです。PostgreSQL 9.5ではソート性能の大幅な改善が強化点の一つで、パフォーマンスの改善が見込まれます。またフェイルオーバ後、新しいマスターに追従するスタンバイとして、古いマスターサーバをオンラインに戻すことができるpg_rewindも、PostgreSQL 9.5の魅力の一つです。 バージョンアップ前の構成 構成は、マスタとスレーブのストリーミング・レプリケーション
Docker 社のユースケースでもあげられているように、CI/CD で Docker を使うというのは、プロダクションシステム以外で Docker の特性を活用できる良い場所だと考えています。ヌーラボではBacklog でのプルリクエストの提供以降、CI のジョブの実行のために Docker を利用しています。ここではその運用から学んだ５つの Tips を紹介したいと思います。 ヌーラボの CI 環境の全体図 これがヌーラボの CI 環境の全体図です。 CI には Jenkins を利用しており、Jenkins のジョブのトリガーとなるのは左側の Backlog や Typetalk です。実際には Jenkins Backlog Plugin や Jenkins Typetalk Plugin を利用してジョブを処理しています。これらのプラグインの詳細については本ブログ末に参照先をのせて
Cacooチームエンジニアの川端です。普段はCacooのエディター(編集画面)のフロントエンドの開発をしております。最近パパになったので娘の写真を親に共有するアプリを作ってみました。その際に、Web Componentsなる機能を使ってみました。JSフレームワーク群雄割拠の昨今、ライブラリを使わずWeb Componentsだけでどこまでできるのかご紹介したいと思います。 Web Componentsとは？ Web Componentsとは、HTMLの要素をカプセル化して再利用可能なパーツにするためのブラウザのAPI群です。ReactやVueやRiotでいうところのコンポーネントをライブラリを使うことなく素のJSだけで作ることができる技術になります。 Web Components | MDNによると次のように記されています。 Web Components は、オープンなウェブテクノロジーを
Backlog 開発チームの saki です。仕事は Scala と Java ですが、Ruby や JavaScript などのいわゆる動的型付け言語も好きです。最近はフロントエンドに興味がありプライベートで Vue.js を触っています。 Vue はプログレッシブフレームワークを謳っており、その名の通り最初は小さく導入でき、ソフトウェアの成長に合わせて他のライブラリを組み合わせることで規模の大きい開発にも利用できる柔軟さが気に入りました。ドキュメントも充実しており学びやすいと思います。どのライブラリも自分が一番と宣伝する中で、他のフレームワークとの比較 のページには誠意を感じました。 今回はそんな Vue を使って、かんばんライクなタスク管理アプリの簡単な作り方を紹介します。アウトラインは以下です。 基礎の作成 状態別にタスクを抽出する処理を作成 task-card コンポーネントの作
BacklogにmacOSの指紋認証でログインする様子 ヌーラボでは2019年3月にW3Cで標準化されたパスワードレス認証の「Web Authentication API」（WebAuthn: ウェブオースン）と、「FIDO2」（Fast IDentity Online: ファイド）対応のサーバを実装することで、Backlog / Cacoo / Typetalk上でのパスワードを使わない新しい認証に対応しました。 WebAuthn / FIDO2を使用した生体認証ログインのメリットは次のとおりです。 生体認証でログインが素早く簡単になります 生体情報はネットワーク上には流れず、ローカルのセキュリティ デバイスに保存されるため安全です 2要素認証※2のため安全です サーバに登録する認証情報は公開鍵のため、パスワードリスト型攻撃や情報漏洩のリスクがありません ドメインが検証されるため、フィッ
2015年3月25日に、株式会社ロフトワークさま主催の『ビジネスを躍進させる創造的チームの作り方』にて、千葉県の柏にある柏の葉オープンイノベーションラボ（KOIL）にて、「小さなままで世界を相手に冒険できる自己組織化したチーム」というタイトルでお話をさせていただきました。また、最近ではないですが、2012年9月には、Movida School にて「スタートアップは自己組織型であるべき」といったタイトルでスタートアップの起業家に向けてお話させていただきました。 いづれも、「チームの作り方」に触れるような内容でした。 また、同様の内容で、台湾のお客様の社内セミナーや、その他多くの場所でお話させて頂いてます。 自分自身もまだまだ勉強中だということもありますが、このような題材は、「こうすることが正解」というケースは無いと思います。なので、いずれも「会社の文化や、背景、業務内容などにあわせて、良さ
Photo via Visual hunt ヌーラボアカウントではつい先日、Amazon RDS for MySQL から Amazon Aurora へと移行しました。ここでは、その経緯と実際に実施した作業を簡単にご紹介させていただきます。 移行の経緯 ヌーラボアカウントは Backlog や Cacoo、Typetalk といったヌーラボのサービスへの認証機能を提供しています。もし認証機能が使えないとすべてのサービスを利用できなくなってしまいます。そのため、ヌーラボアカウントには常に認証機能を提供し続けられるような、高いアベイラビリティが求められています。 ヌーラボアカウントではこれまで RDS for MySQL を利用していましたので、MySQL 互換を掲げる Amazon Aurora は、リリースされたときから移行の可能性を検討をしてきました。Aurora のメリットについては
【WebAssembly初心者必読】バイナリコードを使って「 WebAssembly 」の基礎を徹底解説してみた！ WebAssembly はウェブ上での利用に適した軽量でポータブルなデータフォーマットです。ゲームなどの実行速度が求められる分野で使えるように、JavaScript よりも読み込み速度や実行速度を早くすることを念頭に設計されています。それを実現するために、WebAssembly では機械語のようなバイナリコードをブラウザ上で使うようにしています。 JavaScript の生みの親であるブレンダン・アイクが 2015 年 6 月に WebAssemblyを発表してから 2 年が経ち、多くのブラウザで使えるような状況が整いつつあります。 そこで、この記事では WebAssembly のバイナリコードを使ったサンプルのコードを通して、WebAssembly を簡単に紹介したいと思い
こんにちは Backlog 開発チームの下川です。現在、Backlogは日本語版と英語版で分けていたドメインをbacklog.comに統合するプロジェクトを進めています。その一環で内部的に使用するAPIサーバーの実装に Go言語 を利用することになりました。過去に Go言語 を少しだけ使っていた筆者ですが、今回本格的に使ってみて引っかかった点とその対策を列挙してみました。 要約 開発は基本的にワークスペースの下でする インターフェイスをポインタ渡ししない 標準のerrorsパッケージが物足りなければgithub.com/pkg/errorsを使ってみる エラーの種類で分岐する方法はいろいろあるが、唯一の解はない for文の入力に飽きたらIDEのテンプレート機能を活用してみる 必ずワークスペースの下で開発するものなのか Goにはワークスペースというものがあります。ワークスペースはディレクトリ
こんにちは、江口です。 2月21日(土)に「実戦での Scala 〜 6つの事例から知る Scala の勘所〜」をスマートニュース株式会社さんと共同で開催いたしましたので、その様子と発表内容を公開された資料とともに簡単に紹介します。 場所は渋谷にあるスマートニュースさんの新オフィスで行われました。Scalaへの注目度の高さもあってか、当日は広いスペースに用意された座席がほぼ満席という盛況具合でした。 ビズリーチの新サービスをScalaで作ってみた ～マイクロサービスの裏側 (株式会社ビズリーチ 竹添さん) 最初に、株式会社ビズリーチの竹添さんから、新サービスであるスタンバイという求人検索エンジンの開発についての発表が行われました。 サービス全体のアーキテクチャにマイクロサービスを採用し、各サービスの実装にはScalaを採用したというような内容でした。 Scalaを採用した理由として、並列処
サービス環境での事例も耳にすることが多くなった Docker ですが、皆さんの現場でも活用されてますでしょうか？ヌーラボでは2014年の夏にローンチした開発者向けのウェブサイトである Nulab Developers にて Docker を利用したブルーグリーン・デプロイメントを行っています。本エントリではサイト更新時のワークフローなども含めその全体像を紹介します。 ミドルウェアの構成 上図にあるとおり EC2 インスタンス上にブルーとグリーンの Docker コンテナを常時二つ上げており、同じインスタンス上に nginx がリバースプロキシとして動いています。ウェブサイトの構築には Drupal を利用しており、ブルーとグリーン環境内の Drupal が利用する MySQL のデータベースをおのおの用意しています。Docker のイメージは baseimage-docker に Apac
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
jQueryを卒業したかった僕がReact StaticでReactをイチから学んでWebサイトを作った話 | 株式会社ヌーラボ(Nulab inc.)
今更聞けない！エンジニアのための CSS の基礎講座 〜ボックスモデル編〜 | 株式会社ヌーラボ(Nulab inc.)
Electronアプリをプロダクトとして「正しく」リリースするために必要な3つのこと | 株式会社ヌーラボ(Nulab inc.)
Webエンジニアだったら当然知っておきたい「 クリックジャッキング対策 」とは？ | 株式会社ヌーラボ(Nulab inc.)
ヌーラボのアカウント基盤を Java 9 にマイグレーションして起きた問題と解決法 | 株式会社ヌーラボ(Nulab inc.)
1ファイル・3コマンドで実現！Dockerでチーム全員の開発環境の構築を始めてみませんか？ | 株式会社ヌーラボ(Nulab inc.)
ヌーラボのインフラ運用最前線 〜イミュータブルを目指して〜 (前編) | 株式会社ヌーラボ(Nulab inc.)
「どうすれば価値を生み出すか」を知るためにヌーラボ で行っていること | 株式会社ヌーラボ(Nulab inc.)
株式会社ヌーラボ（Nulab Inc.）
密着 24時！ MySQL 5.1 から Aurora への移行100日間 〜 Backlog 編 | 株式会社ヌーラボ(Nulab inc.)
実践！ヌーラボサービスでの CloudFront の障害対策 | 株式会社ヌーラボ(Nulab inc.)
運用中のPostgreSQLのスキーマを無停止で安全に変更する | 株式会社ヌーラボ(Nulab inc.)
目指すのはぶっちぎりの速さ! なぜ HTML5 版CacooはSVGを採用するのか | 株式会社ヌーラボ(Nulab inc.)
Rust + Yew = WebAssembly でかんばんライクなタスク管理アプリを作ってみました。 | 株式会社ヌーラボ(Nulab inc.)
3TB超のCacooのPostgreSQL 9.3を9.5にアップグレードした話 | 株式会社ヌーラボ(Nulab inc.)
Docker で「速くてウマイ」な CI 環境を構築するための 5 つの Tips | 株式会社ヌーラボ(Nulab inc.)
ライブラリを使わずここまでできる！Web Componentsで近未来のフロントエンド開発 | 株式会社ヌーラボ(Nulab inc.)
Vue.js でかんばんライクなタスク管理アプリを作ってみました。 | 株式会社ヌーラボ(Nulab inc.)
さよならパスワード！WebAuthnに対応したBacklog / Cacoo / Typetalkで指紋を使って安全ログイン | 株式会社ヌーラボ(Nulab inc.)
僕がお話しているプロジェクト管理とチームの作り方などについて | 株式会社ヌーラボ(Nulab inc.)
実録！サービスを止めずに Amazon Aurora へ移行した話 | 株式会社ヌーラボ(Nulab inc.)
【WebAssembly初心者必読】バイナリコードを使って「 WebAssembly 」の基礎を徹底解説してみた！ | 株式会社ヌーラボ(Nulab inc.)
Go言語を使ってみて、個人的に引っかかったところと対処法。 | 株式会社ヌーラボ(Nulab inc.)
「実戦での Scala 〜 6つの事例から知る Scala の勘所〜」を開催しました！ | 株式会社ヌーラボ(Nulab inc.)
Docker を利用した Drupal サイトのブルーグリーン・デプロイメント | 株式会社ヌーラボ(Nulab inc.)