UIデザイン用にフォントやアイコンのサイズ、スペース、角丸、シャドウ、パディング、コンポーネントなどで比例スケールを使用したバリエーションを簡単に作成できるオンラインツール（ローカルも可）を紹介します。 たとえば、黄金比でフォントサイズを設計したり、白銀比でコンポーネントを設計したり、ということができます。また、作成した比例スケールは、CSSで書き出されるのですぐに使用できます。 Proportio Proportio -GitHub Proportioの特徴 Proportioの使い方 Proportioの特徴 Proportioはデザインシステムに必要となるタイポグラフィ、スペースや角丸やシャドウなどのシェイプ、コンポーネントに使用する比例スケールを簡単に作成するためのツールです。 パラメトリックデザイン（変数を基準としてサイズを決める形状作成方法）を採用しているので、体系的なデザイン

JMDCでアプリのデザインを5月から担当しているはんざわです。 Webやアプリのフロント開発者のみなさんはデザインツール Figmaをご存知でしょうか？ JMDCではこれまでAdobe XDをメインで使用していました、今年からFigmaに乗り換えました。 乗り換えに伴い、デザイナー以外のメンバーにもFigmaを操作できるようになるべく、勉強会を開催しました。 勉強会はオンラインで開催。Figmaで資料を作成、参加者に資料を開きながらGoogle Meetを繋げて詳細を説明していきました。 勉強会で使用した資料はFigmaのCommunityにアップしているのでぜひ見てみてくださいね。 www.figma.com エンジニアがFigmaを触れるようになることのメリット 基本知識と基本操作 実装するために使う デザインシステムについて そのほか便利な機能 さいごに エンジニアがFigmaを触れ

アプリケーションのテストなどで利用できる、リアルな架空の個人情報データ（疑似データ）を生成するツールです。

楽曲を最大5トラック（ヴォーカル／ドラム／ベース／ピアノ／その他）に分離できる、高速かつ無料のオーディオ分離ツール「Spleeter」が公開。音楽ストリーミングサービス「Deezer」のエンジニアリングチームが開発。機械学習によって楽曲を分離するツールです。 「Spleeter」には、3つの事前トレーニングモデルが付属されており、以下の3タイプへの分離が可能になっています。 2つ（ヴォーカル／その他の伴奏） 4つ（ヴォーカル／ドラム／ベース／その他） 5つ（ヴォーカル／ドラム／ベース／ピアノ／その他） 実行例： https://waxy.org/2019/11/fast-and-free-music-separation-with-deezers-machine-learning-library/ 「Deezer」内の紹介文 https://deezer.io/releasing-sple

モバイルアプリサービス部の五十嵐です。 Dockerは軽量でポータビリティに優れ、環境を汚さないので開発環境には無くてはならない存在ですよね！今回はまだDockerを使っていない人向けに、私が自分が辿ってきた経験を元に、『こういうシーンでDockerを使うと便利』というのをステップ・バイ・ステップで説明していきます。 対象読者 Dockerはなんとなく知っていて興味はあるけど、使い所や導入するメリットが分からないという人を対象にしています。 環境 Docker for Mac（Docker 1.12.3） Dockerについて Dockerは複数のコンポーネントからなるプラットフォームですが、本記事では主にDocker EngineのことをDockerと呼びます。 Dockerはコンテナと呼ばれる仮想化技術を用いています。従来の仮想化技術と異なる点は、ホストのカーネルをコンテナと共有し、ホ

Speeeアドベントカレンダー 2日目の記事です。 前日の記事は@hiragramのTravisCIでiOSの依存ライブラリの更新を自動化する - TECHNICA Speee engineer blog エンジニアの@hatappiです。 前年度のアドベントカレンダーでこんな記事書いてました。 hatappi.hatenablog.com 要するに定期処理をうまいこと実現したい！そのためにAirflowを使ってはどうかっていう記事です ※ Airflowはデータパイプラインのスケジュールとかモニタリングできるツールです。簡単にいうとジョブ管理ができるシステム Airflowを使うと 定期実行したい 成功、失敗において通知したい 画面上から再実行したい logを画面からおいたい といった定期処理でやりたいことを実現できるので、あれから実際に会社でも導入して 現在稼働しておりディレクターの方

こんにちは、中島 (@nazomikan)です。 ※この記事は2016年に書かれた記事でver2系を対象に書いています。 ver3,4-betaで色々変わってるのでその辺についてのキャッチアップはこちらの記事をご利用ください 最近のselenium-webdriverの話 本記事は株式会社ネクスト(Lifull) Advent Calendar 2016の1日目の投稿です。 ブラウザベースのテストツールのseleniumをコードから実行するselenium-webdriverのnode版について導入からAPI紹介までしていきます。 あと手元で作業するにあたってAPIの翻訳(ソース上にうまってるdocsの翻訳)をしてたのでそれも載せておきます(むしろそっちメイン) 導入 webdriverのテスティングについて テストの書き方 よくある使い方 API翻訳 driverのAPI navigat

Redash (re:dash) 流行ってますね。 redash.io 最近 Github をにわかに賑わせている OSS が superset です。 github.com superset とは 公式説明によると data exploration platform とのことですが、僕の感覚的にはこれはつまり、いわゆる Business Intelligence (以下 BI) Tool です。そう、Tableau のような。 OSS (Apache 2.0) サーバーサイドは Python で書かれている Flask や pandas、SQLAlchemy などを利用 さまざまなデータソースに対応 (MySQL, Redshift、SparkSQL など) グラフ描画の種類が豊富 Role や Permission についてある程度細かく設定可能 Airbnb Engineering

それで、「そんなにいいのかな？」と半信半疑でインストールして、使ってみた瞬間、惚れました。 プログラミングをする人にとって、Sublime Textは、「恋に落ちるエディター」とよく言われていますけど、WEB開発者にとってBliskは「恋に落ちるブラウザ」といっても過言はないのではないかと思います。 以下では、そう思うに至った理由について述べたいと思います。 この記事は、2016年7月9日に書いたものです。2016年11月1日にversion 1.0.125.166が出たことにより、機能の一部が有償プランに加入しないと利用できなくなりました。ですので、無料で利用する場合は、30分で機能制限がかかったりするようになったのでご了承ください。 Blisk（ブリスク）とは Bliskは、WEB制作者がサイトの動作確認をする上で、便利な機能がデフォルトで備わっているWEBブラウザです。 現在は、Wi

追記 私の作ったプラグインよりも、かなり出来がよさそうなものがリリースされています。 そちらを使ったほうが幸せそうです。 marketplace.visualstudio.com 本文 先日PlantUMLというテキストでUMLを描くためのツールのVisual Studio Codeのプラグインを作りました。 テキストをぱちぱち書きながら、プレビューを確認できるツールです。 ということで、PlantUML + Visual Studio CodeでUMLを描く方法を書いていきたいと思います。 インストール PlantUML PlantUMLのサイトからplantuml.jarをダウンロードして任意の場所においてください。 plantuml.com Graphviz PlantUMLが内部で使ってるツールです。 Graphviz - Graph Visualization Software

CSS、HTMLなどの修正をした場合に、前回との比較をして何が修正されたのか確認するケースがあります。 Subversionなどでバージョン管理をしている場合はSubversionの機能で差分を確認することができますが、使い勝手や見やすさという点では物足りない機能です。 そこで今回はWeb上で簡単にテキストの差分比較ができるdifffの使い方をご紹介します。 difff difffの使い方 左と右の欄に比較したいテキストの文章を入力、またはコピー＆ペーストします。 「比較する」ボタンをクリックすると差分がマーカーのような色付きで表示されます。色を変えたい場合は、「カラー１」「カラー２」「モノクロ」を選択して変更することができます。文字数、空白行、改行数、単語数もわかります。 印刷用のページとして、不要な画面の表示部分を表示せずに比較した差分の結果のみ表示したい場合は「結果のみ表示（印刷用）

B! 251 0 0 0 GitHubで面白そうなシェルスクリプトを探してる時に見つけた Spark by holman について。 数値を棒グラフ上に表示してくれるスクリプトです。 Spark 使用例 Spark Spark は数値群を引数に与えるか標準入力で与えてあげると その数値群を棒グラフに変換してくれるシェルスクリプトです。 インストールはGitHubのレポジトリ から直接sparkというスクリプトファイルを取ってきてPATHの通った所に入れるか、 MacであればHomebrewで $ brew install spark でsparkコマンドが使えるようになります。 使い方は非常にシンプルで $ spark 0 20 40 60 80 100 ▁▂▃▅▆█ こんな感じで数値を与えるとそれを棒グラフにしてくれます。 インプットに使える数字は少数も使えますが、 実際に使われる際には

Presenting Bootstrap Studio, a revolutionary tool that developers and designers use to create beautiful interfaces using the Bootstrap Framework. Learn more What is it? Bootstrap Studio is a desktop application which you can use to build beautiful interfaces and websites by only using drag & drop. It comes with a large collection of components like charts, maps, data tables, forms, menus, lists,

美雲このはとは？ 座敷童子一族の末裔として生まれ、栃木の由緒正しい某神社で暮らしていたんだけど、昔からのしきたりで一人前の座敷童子になるため東京で修行を開始！ 紆余曲折あって、ConoHaの応援団長に就任することになりConoHaを使っているみんなを応援するとともに、このはも一人前の座敷童子ではなく、「神様」になるために日々頑張っているよ！ プロフィール 名前：美雲 このは （みくも このは） 年齢：年齢という概念はないが、人間でいうと13歳くらい？ 身長：150cm＋α 体重：ひみつ 長所：勉強熱心・わりと機転がきく 短所：いじわると勘違いされる振る舞いをしがち 好きなこと：アニメを見たりゲームしながらのごろごろ

どうも。 1月に入社したばかりの、データ分析担当のn_maoです。 と言いながら、最近はHTMLとjsばかりいじっております。 それはそれで楽しいです。 さて今回はデータ分析のざっくりとした仕事内容と、その分析にかかる手間を省くツールをご紹介します。 データ分析の仕事 まずは私の行っているデータ分析という仕事の内容をご紹介します。 私の主な仕事は大きく分けて４つです。 売上げ、会員登録数などの簡単な集計&自動レポーティング データベースからの知識発見（いわゆるデータ分析） 分析結果をもとにした企画立案 実施された企画の効果検証 あくまで私個人の仕事内容であり、データ分析者全員に当てはまるわけではありません。 アルゴリズムの研究開発の方や、インフラ寄りの方もいらっしゃるでしょう。 ですが、同じ職種の方で業務範囲が被っている方も少なからずいらっしゃると思います。 これら４つの業務の中で一番時間

2015 新春 JJUG 特別企画 Jenkins まつりにて発表した資料です。 #Jenkinsja #jjug #JenkinsRead less