サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
大谷翔平
system.blog.uuum.jp
おはこんばんちは!! 尾藤 a.k.a. BTOです。 UUUMでは業務の効率改善に kintone を導入しようとしているのですが、kintone の機能を拡張するには Javascript でプログラムを書く必要があります。 そこで、Javascript の開発環境を構築したので、何をやったのかをまとめてみました。 具体的には、 BabelでES6で書いて、webpackでビルドして、mochaでテスト書いて、power-assertでassertの出力を見やすくして、karmaで複数ブラウザのテストを自動化して、カバレッジを出力するようにしました。 お前は何を言っているんだと思うかもしれませんが、僕も何を言っているのかわかりません。 Babel 言わずと知れた ES6 用のトランスパイルツールです。 ご存知の方も多いと思うので、詳細は割愛しますね。 Babel の導入は npm でイ
nazoです。 Elasticsearchを運用する際に、マスタデータはMySQLで持ちたいという場合にどうやって同期をするかというのが問題になります。また、Elasticsearchはバージョンの互換性が厳しく、別バージョンをクラスタに混ぜることは基本的にできず、さらに辞書の更新などを行う場合はインデックスを全て更新しなくてはいけないなどの運用上の課題があります。 今回は社内向けに使っているElasticsearchを、これらの問題を解決しつつどのように運用するかを考えてみましたので、紹介したいと思います。 簡単に MySQLとElasitcsearchの同期は go-mysql-elasticsearch を使います。 無停止のためのデータコピーは elasticsearch-dump を使います。 MySQLとElasitcsearchの同期 go-mysql-elasticsear
設計と実装で 抑えておきたい サービスクラスと例外 from Takuya Sato nazoです。 最近はUUUMもエンジニアを含む開発チームもメンバーが増えてきました。メンバーが増えてきた時に、どうしても技術力にムラがある(単純に高い低いという話ではなく、得意な点や考え方が個人により異なるということ)という問題が生じます。 個別の細かい技術についてはその場で説明すれば良いのですが、「設計」と言うと単純に説明するのは難しく、そもそも人によって考え方にも違いがあります。とはいえここは抑えておいてほしいというところはあるので、社内で勉強会を開催して説明した内容を社内向け文書も兼ねて公開したいと思います。 今回は「サービスクラス」の作り方について紹介したいと思います。サービスクラスという概念はバックエンドに限らず、フロントエンドやその他様々なアプリケーションで応用できる概念かと思います。資料に
おはこんばんちは!! 尾藤 a.k.a. BTOでっす UUUM では僭越ながら CTO をさせてもらってマッスル。 なので UUUM でのエンジニアの面接は僕がやっているんですが、面接の時に気をつけていること、やっていることをご紹介したいと思います。 最初に会社の紹介をする 何はなくともまずはこれ。 転職活動中の方に、UUUM を選んでもらわなければ来てもらえません。 特に UUUM は YouTuber のプロダクションとしてのイメージが強く、エンジニアには馴染みがありません。 システム開発や、新規事業の立ち上げをしていることも知らない方が多いかなと思います。 なので、最初に会社に紹介をして、UUUM に入社することの魅力を感じてもらう努力をします。 実は最初の頃は技術面接をメインにやってて、会社の紹介をあまりやってこなかったために、最終選考に残るものの、最終的に別会社に転職されるケー
こんにちは!エンジニア(仮)のめる(@c5meru)です。 最近はもっぱらバックエンドエンジニアとしてお仕事しているのですが、一方でVue.js 日本ユーザー会のスタッフとしてVue Fes JapanやVue.js Meetupのお手伝いに参加しているので、もうちょっとVueのキャッチアップをやったほうがいいかも😨...と思い、今回は表題のテーマで発表しました。 Vue CLI とは Vue.jsプロジェクトのひな形を作成するための、コマンドラインツールです。 Node.js をインストールした状態で、以下のコマンドを実行すると動かせるようになります。 $ npm install -g @vue/cli 爆速でプロジェクトを作る vue create <プロジェクト名> でプロジェクトを作成できます。 presetで、 default (babel, eslint) を選択すると爆速で
おはこんばんちは。 尾藤 a.k.a. BTOです。 普段我々開発者は、プログラミング言語を使ってシステムを開発しています。 しかし、プログラミング言語も人によって開発されたコンピュータプログラムです。 先日社内勉強会で、普段使っているプログラミング言語が、どういう仕組みで成り立っているのかを発表しました。 それで実際に簡単な四則演算を計算する簡単な電卓を実装してみました。 ソースコードを公開していますので、最初のとっかかりの参考程度にはなるかと思います。 github.com 正規文法・文脈自由文法 ノーム・チョムスキーという有名な言語学者が形式言語の生成文法を定式化しました(チョムスキー階層)。 彼は生成規則の制限の強さによって、階層を分けました。 制限は緩ければ緩いほど、言語としての表現力は上がりますが、解析は難しくなります。 このチョムスキー階層の中で、我々が慣れ親しんでいるのが、
入社してから肉ばかり食べている佐藤 a.k.a. nazoです。 UUUMでは持ち回りでエンジニア勉強会を開催しているのですが、最近Vue.jsについて私が社内で紹介したので、そのスライドを社外向けに手直ししたものを紹介したいと思います。 Vue.js入門 from Takuya Sato ちょうどいいタイミングで1.0.0 ( コードネーム Evangelion! )がリリースされたので、それらの内容も(全ては網羅していませんが)急ぎで足してみました。気になる修正が多いですが、複数checkboxが使えるようになったのは便利かと思います。記法も結構変わっているので、注意したいところですね。 また、昨今のJavaScript業界は変化が激しく、どのライブラリを使うかは悩ましい問題ですが、Vue.jsは開発が継続しているのと、ほどほどの使いやすさというところで選んでいます。もちろん、常に他の
こんにちは、タナカです。 ここ数年で、リアクティブプログラミングというキーワードをよく目にするようになりました。 僕も記事を読んだり、FRPのライブラリをいろいろ試したりはしているのですが、リアクティブプログラミング自体への理解がイマイチな状態でした。 本日は勉強会で発表するといういい機会がありましたので、今回リアクティブプログラミングについてまとめてみました。(内容等に間違えがあればご指摘いただけると助かります・・・。) リアクティブプログラミングについて wikipediaでは以下のように説明されています。 値の変更を伝播させるデータフロー指向のプログラミングパラダイム 値の関係性を記述してプログラミングする これらについて実際の例を使って説明していきたいと思います。 リアクティブプログラミングの例 リアクティブプログラミングを説明するのにExcelの例がよく利用されます。 こちらの例
nazoです。 弊社は業務内容上、Google API、特にYouTube APIを叩くことが多いのですが、PHPクライアントであるgoogle-api-php-clientは、非同期処理を書くのは簡単ではありません。 しかし、近日リリース予定である2.0では、通信部分がGuzzleになり、そこそこ簡単に非同期処理を書けるようになりました。(最近までGuzzleのバージョンが5でしたが、6でも動かせるパッチがmergeされたようです。2016/01/20現在ではv2.0.0-RC4を利用します) ここでは最新のgoogle-api-php-clientを使用し、YouTube APIを並列実行する方法について解説します。 試してみる composerでgoogle-api-php-clientの2.0.0-RC4とGuzzleを入れた上で、以下のスクリプトを実行します。(CLI用です) G
こんにちは、タナカです。 先日Angularのカンファレンスに参加させていただきました。 Angular2はもちろんですが、JavaScriptの進化についても興味深かったです。 本日の社内勉強会ではカンファレンスで得た情報を含めたいまどきのJavaScipt事情について共有させていただきました。 フレームワークはMVCからコンポーネント指向へ 一昨年リリースされたReat+Fluxが人気となり、フレームワークの注目はMVCからコンポーネント指向に変わってきました。 W3C標準化を進めているWeb Componetsにも追い風になっています。 また、昨今話題のマイクロサービスアーキテクチャーとも相性がいいです。 Web Comonentsのイメージ、各画面部品がコンポーネントとなる 引用元 Virtual DOMが流行 こちらもReactの影響ですがVirtual DOMが流行しています。
エンジニアのタナカです。 4月から新しくサイト開発に携わる方も多いのではないでしょうか? サイト開発では殆どの場合、CMS機能を用意する必要がありますが、このCMS機能をどう実現するのかというのが最初に検討することだと思います。 CMSといえばWordPressが有名ですが、WordPressも一長一短なので、 様々な理由によりCMSのスクラッチ開発を行う場合も多いと思います。 とはいえスクラッチ開発となると開発コスト等が問題になる場合もあります。 けれども、Railsを以ってすればWordPressと同等以上のCMSを効率よく開発する事も可能です。 ということで、Rails5でのCMS開発に役立つgemを紹介したいと思いますが、 その前にまずはCMSに必要な機能を定義してみます。 CMSと言っても様々なタイプがありますが、今回はニュース・メディア系のCMSを想定しています。 ニュース・メ
こんにちは、村上です。 今回紹介するHugoは静的サイトジェネレータ(static site generator)と呼ばれるフレームワークの一種です。 静的サイトジェネレータとは 1リクエスト毎にサーバサイドスクリプト(ruby/perl/phpなど)でHTMLを生成する仕組みを動的サイトと呼びますが、 サーバサイドスクリプトを介さずに予め設置されたHTMLをWebサーバが直接クライアントへ返却する仕組みを静的サイトと呼びます。 一般的に、ホームページと呼ばれるものですね。 昔からHTMLなどをFTPなどでアップロードし、無料で使えるレンタルサーバのサービスが存在しています。 静的サイトジェネレータのメリット テンプレートエンジンによりヘッダー/フッターなどの共通部分をコンポーネント化出来るため、HTMLをのそまま記述するよりも効率が上がる CMSと違いDBとサーバサイドスクリプトが存在し
おはこんばんちは!! 尾藤 a.k.a. BTO です。 最近の若い人で Makefile を書く人が増えているそうじゃないですか。 そしたらもう、ウホ、これはオサーンの出番ってなるわけですよ。 僕みたいな老害はこんな場面でしか幅を利かせられないってことで、ええ、やりましたよ make 入門を社内勉強会で。 makeとは 様々な実装 サンプル ルール やってみる ファイルを一部だけ更新してみる 変数 自動変数 Suffix Rule(古い) Pattern Rule Phony Target まとめ makeとは 最近はタスクツールとしても使われることの多い make ですが、元々はビルドツールで、ライブラリや実行ファイルのビルドに使われるツールです。 UNIX環境で使われることが多く、調べてみると最初のリリースは 1976年4月で、 Stuart Feldman というベル研の方によって
こんにちは、エンジニアのナカハシです。 最近は、しばらくRailsでのWebアプリ開発に勤しんでいる毎日です。 開発中にStrategyとRackミドルウェアを復習したので、軽くまとめてみました。 Strategyってなんだっけ? 今私が開発に参加しているファンクラブサイトは、複数種類のファンクラブサイトを1つのアカウントでログインできるようにしています。 各ファンクラブサイトのアクセス許可は、共通アカウント基盤に対してOAuth2で行うようにしています。Railsでのこの手のログイン認証を得る場合、対応するomniauth-xxxというgem(omniauth-twitterとかomniauth-facebookなど)を利用すると手軽に実現できるわけですが、それらのライブラリは以下のようなモジュール構造(名前空間)を持っています。 module OmniAuth module Strat
UUUMに入社して1年が経ったエンジニアの北畠です。 Railsも使い始めてもう半年経ちました。 そこで、Railsのジョブキューのgemで有名なSidekiq。 UUUMのプロダクトでもかなり使っているんですが、 どのように動いているかよくわかっていないので調べてみました。 基本的な使い方は Getting Started · mperham/sidekiq Wiki · GitHub から まずはエンキュー ActibeJob.perform_later キューに入れたい処理はActiveJob::Baseを拡張したクラスのperformメソッドに実装し、 perform_laterを呼び出すと、エンキューの処理が走る。 Class SampleJob < ActiveJob::Base def perform p "Hello!" end end ... SampleJob.perf
nazoです。 今回はMySQL 5.7の新機能であるGenerated Columnsについて紹介したいと思います。 Generated Columnsとは? 簡単に言うと、トリガーで特定のカラムにデータを入れるのを簡単に定義する方法みたいなもので、カラム定義時にAS 計算式と書くことで、そのカラムの値が該当の計算結果になります。 この機能はMySQL 5.7.6から追加されました。日本語では「生成列」と呼ぶこともあるようです。 基本的な使い方 リファレンスに書いてあるクエリを実行してみましょう。 mysql> CREATE TABLE triangle ( -> sidea DOUBLE, -> sideb DOUBLE, -> sidec DOUBLE AS (SQRT(sidea * sidea + sideb * sideb)) -> ); Query OK, 0 rows af
nazoです。 弊社のサービスの1つである おしゃべりマルチ のインフラを、Consul + Packer + Terraformで Auto Scaling できる環境にしましたので紹介します。 なぜその組み合わせ? AWS の Auto Scaling 機能は、指定した条件時に指定の AMI を元にインスタンスを増やす、というものです。この元となる AMI のことをゴールデンイメージと呼ぶのですが、AMI である以上事前に作成しないといけません。 インスタンスを用意する方法としてはいくつかありますが、 初期状態の AMI を起動させて、起動後に provisioning する 起動にあまりに時間がかかってしまい、負荷増大時に間に合わない可能性が高くなる アプリケーションまで含めた AMI を作って、起動したらすぐ立ち上がるようにする アプリケーションコードの書き換えで毎回イメージを作ら
おはこんばんちは!! 尾藤 a.k.a BTO です おかげさまで UUUM のエンジニアも増えて賑やかになってきて、なんとアドベントカレンダーも始められるようになってきました!! そこで初日の今日は UUUM の開発部隊であるシステムユニット(社内では通称攻殻機動隊)の紹介をしてみようと思います おっと、申し遅れましたが、UUUM 攻殻機動隊ではバトーを担当しております。 UUUMって? UUUM は Hikakin、はじめしゃちょー、Fischer's のようなトップ YouTuber が所属する事務所です。事業はそれだけに留まらず Instagram, Twitter のような他の SNS プラットフォームへの展開や、イベント、グッズ販売、動画制作など多岐にわたっています。 2017年8月31日に東証マザーズに上場。おかげさまで業績も好調で売上も100億円を超え、営業利益も7億円を超
nazoです。 kubernetesの勢いが強い昨今ですが、AWSではやはりECSが便利です。 ECSは簡単に使えるものの、より便利に使うにはいくつか抑えておくポイントがあります。今回はその点をいくつか紹介したいと思います。 前提知識 ECS ECSには「クラスタ」「サービス」「タスク定義」という概念があります。 1つの「クラスタ」には複数の「サービス」が入り、「サービス」は「タスク定義」で定義されたタスクが起動、常駐します。 「クラスタ」には複数のEC2インスタンスが登録され、登録されているEC2インスタンスの中でサービスは起動します。どのEC2インスタンスがどのクラスタに登録されるかは、EC2内にいるecs-agentコンテナがクラスタに通知する仕組みになっています。通常はEC2のユーザーデータでクラスタ名を指定します。 ALB ALBは、リスナーポートをターゲットグループに割り当てる
コンピューターが賢くなって、人間がやる仕事が減るといいなと思っているkitabatakeです。 今流行りのニューラルネットワークについて説明したいと思います。 ニューラルネットワークとは 脳神経系をモデルにした情報処理システムで、 文字認識や、音声認識など、コンピュータが苦手とされている処理に対して有効です。 脳の中には多数のニューロン(神経細胞)が存在していて、 各ニューロンは多数の他のニューロンから信号を受け取り、他の多数のニューロンへ信号を受け渡していて、 信号の伝搬によって、様々な情報処理を行っています。 こういった脳内の情報処理の仕組みを真似することで、複雑な情報処理を行おうというものです。 神経細胞の仕組み 神経細胞は下記の画像になっています。 ニューラルネットワーク入門 1.1 神経細胞より参照 http://www-ailab.elcom.nitech.ac.jp/lect
nazoです。 Graceful RestartによるRailsアプリのデプロイ を行っていたのですが、もっと手軽に環境ごとデプロイをしたいという需要もあって、Dockerを採用したデプロイも行っています。 CircleCI(1.0)では辛うじてDockerのサポートがありますが、いくつか癖があるので、ECSと含めて運用まで踏まえた手順について紹介したいと思います。 目的 AWS EC2 Container Service(以下 ECS )を使用し、DockerコンテナをEC2にデプロイします。github.comにコードをpushしたら CircleCI 上で自動でビルド・テスト・デプロイが行われるようにします。 ECSを使う理由は、AWSへの依存をぎりぎり少ないところで手軽にDockerコンテナのデプロイを行いたかったというところです。ECSを使用することにより、簡単にDockerコン
どうもエンジニアのやまぐちです。 年末はビルドツールを触る機会が多かったため寝ても覚めてもWebpackな感じでした。 そんな中で単一ファイルコンポーネントでSCSS共通の変数やmixinを使う場合に少し悩んだので、 同じように苦労している方がいれば参考にしていただけたら幸いです。 https://github.com/webpack-contrib/sass-loader ディレクトリ構成 ディレクトリ構成は以下で進めていきます。 /example ├ webpack.config.js ├ dist │ ├ app.js │ └ index.html └ src └ assets ├ script │ ├ app.js │ └ App.vue └ style ├ global.scss ├ _mixins.scss └ _variables.scss /src/assets/style
ロードバランサーってあれでしょ? いい感じに通信を分散してくれるんでしょ? くらいの知識しかなかった執筆者、ハトネコエです。 ふわっとしすぎている知識から一歩進んで、もうちょっと詳細を知りたくなったので、 以前から気になっていた部分を調べ、社内勉強会で発表してみました。 〜〜お品書き(ここが謎だよロードバランサー)〜〜 1. ロードってなに? 道? 2. どんな仕組みで振り分ける先を決めるの? 2-1. DNSラウンドロビン 2-2. RFC 3484 に従ったクライアントに対して従来のDNSラウンドロビンは使えない 2-3. コマンドで確認 2-4. AWSのELBはどの仕組み? 3. 複数のロードバランサを立てたとき、それらへの振り分けは誰がするの? 4. データはどんな道のりでサーバーからクライアントに渡されるの? 5. 専用の機械を使わなくてもロードバランサーって立てられるの? お
おはこんばんちは!! 尾藤 a.k.a. BTO です。 みなさん、Google Apps Script 書いてますか〜。 Cybozu の Kintone 使ってますか〜。 Cybozu の Kintone ってちょっとした業務アプリを手軽に作るのに便利なんですよね。 弊社でも社内の情報を管理するのに Kintone 使ってます。 一方で、 Kintone ってプログラミングは必要ないんだけど、やっぱりシステムの知識がある程度ないと使いこなすのは難しいですよね。 なので、情シスで対応できないところは Google Spreadsheet でデータの管理をしていたりします。 そうすると欲しくなりますよね。 Kintone とデータ連携するためのツールが!! というわけで、Google Apps Script で Kintone API 用のライブラリを作りました〜!!(パチパチパチパチ G
おはこんばんちは!! 尾藤 a.k.a. BTO です。 みなさんターミナルで作業してますか? ターミナルの環境設定はどうやってますか? dotfiles の環境構築は人それぞれ好みがあるとは思いますが、自動化するのは大前提として、汎用性・拡張性が高いものにしたいですよね。 汎用性が高ければいろんな環境で変更無しで対応できますし、拡張性が高ければ追加や編集がやりやすくなります。 今日は僕が普段使っている dotfiles について紹介します。 僕が普段使っている dotfiles は github で公開しています。 GitHub - bto/dotfiles このリポジトリで具体的にどのような工夫をしているのかを説明していきます。 使い方 git clone して、make を実行するだけです。 必要なツールのインストールとセットアップを自動でやってくれます。 git clone git
nazoです。 UUUMでは2017年3月時点で4000チャンネルを抱えており、日本最大のマルチチャンネルネットワーク(MCN)となっております。 これだけのチャンネル数があり、さらに多くのチャンネルは毎日のように動画を投稿しており、1日に増える動画の数だけでも相当な数になっています。 以前はこれらのデータの取得をPHPで行っていたのですが、最近Goによる新システムの運用を少しずつ始めており、大きな変化が生まれています。 今回はそのあたりについて解説したいと思います。 現在の構成 それまで動いていたPHPによる解析システム(こちらは今回は話しません)があるのですが、これはUIとデータ取得部分が、そもそも他のシステムと同居しており、改修が難しくなっていました。また、PHPは並列処理が苦手で、やろうと思えばいくつか手段はありますが、並列化に対して大きくリソースを割いていませんでした。そのため、
こんにちは、Railsエンジニア見習い補佐のナカハシです。 新しくRailsアプリ開発環境を立ち上げるに辺り、Ruby層まで含めたDocker化をしてみたときのあれこれを残しておきます。 今回の構成 新しく作るRailsアプリは、他のUUUMのRailsアプリのよくある構成と同様、Rails + MySQL + Redis(主にセッション用)の構成にしました。 こういった複数のミドルウェアと組み合わせた動作環境を作る場合、それぞれのDockerコンテナをいい感じに動かすためにDocker Composeを使います。公式ページに Quickstart: Compose and Rails というサンプルがあるので、これを元に設定ファイルを書きました。( rails new までの手順もここの通りに実施していますので、主な手順もこちらを参照して下さい) MySQLコンテナとの接続 (ほとんどコ
おはこんばんちは!! 尾藤 a.k.a. BTO です!! スギ花粉の脅威に毎日怯えている皆様、ご機嫌いかがでしょうか。 最近は Google Spreadsheet や GAS(Google Apps Script) を使って社内業務の改善などをしております。 だって会社がどんどん大きくなってるから、業務の効率化を進めないと回らないんだもん!! Google Spreadsheet のデータを Google Calendar に追加したい!! 弊社では営業管理ツールに Salesforce 使っていて、他部署とのデータ連携のために、Salesforce のデータを Google Spreadsheet に同期しています。 ここに動画の公開日の情報があるので、Google Calendar にイベントを追加したいのが今回の目的です。 以前は、全て人が手作業で入力していたため非常にコストのか
こんにちは!エンジニア(仮)のめるです。 今回は社内勉強会にて、表題のテーマで発表したのでブログに書きたいと思います。 Firebase とは firebase.google.com モバイルとウェブ開発に特化した、クラウドプラットフォームです。 Googleが2014年に買収しました。そして、機能がいっぱいあります! 今回は、Authentication と Realtime Database を使いました。 Authentication FirebaseのAuthenticationの特徴は、ユーザーが各種アカウントで簡単にログインできることです。 対応しているログインプロバイダも、さまざま。 こちらの記事を参考に、メールアドレスとパスワードでを用いたログインを実装してみましたが、とても簡単でした。 qiita.com 以下は、Vue.js内のログイン処理の抜粋です。 import f
次のページ
このページを最初にブックマークしてみませんか?
『UUUMエンジニアブログ』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く