! This post is also available in the following language. 韓国語 この記事は、 LINE Engineering Blog 「夏休みの自由研究 -Summer Homework-」 の 12 日目の記事です。 こんにちは、LINE Ads Platformの開発チームに所属している新卒1年目の佐藤邦彦です。 本記事では、Pythonを使って任意のSignal-to-Noise比（SN比）の音声波形を作る方法を紹介します。なお、本記事の内容は、Clova等の弊社音声事業とは関係ありません。 音声のDeep Learning 画像処理分野においてDeep Learningが技術革新を起こしてから久しいですが、同様のことが音声処理の分野においても起きています。Deep Learningによって音声認識の精度は格段に上がり、Amazon Ec

require 'pycall/import' include PyCall::Import pyimport 'numpy', as: 'np' pyimport 'tensorflow', as: 'tf' # Create 100 phony x, y data points in NumPy, y = x * 0.1 + 0.3 x_data = np.random.rand.(100).astype.(np.float32) y_data = x_data * 0.1 + 0.3 # Try to find values for W and b that compute y_data = W * x_data + b # (We know that W should be 0.1 and b 0.3, but Tensorflow will # figure that out f

デジタル トランスフォーメーションを加速 お客様がデジタル トランスフォーメーションに乗り出したばかりでも、あるいはすでに進めている場合でも、Google Cloud は困難な課題の解決を支援します。

特定のDOM要素のみスクショする機能がChromeにあるってことをさっき知りました。 大変便利だったので書き留めます。 元ネタ: Chrome DevTools: Capture the screenshot of a specific element /dev tips 特定DOM要素をスクショする方法 例えばQiitaのあるコードブロックだけ撮影したいとします。 Command + Shift + i で開発者ツールを起動して自力で選択 または 右クリック → 検証 として開発者ツールのElementsタグを開き、DOMが選択されている状態にします。 この状態で Command + Shift + p を押すと文字入力欄が開くので、 node screenshotと打ち込むと、打ってる途中で Mobile Capture node screenshot という選択肢が絞りこめます。 ク

どうもfujiharaです。あつすぎて氷ばっかり食べちゃいます。 本日は社内ネットワークから特定のドメインへのアクセスが許可されていない状況を擬似的に作る方法をご紹介いたします。 背景 Webページに YouTubeの埋め込み動画を表示するサイトで、環境によってはYouTubeドメインへのアクセスが許可されていない場合が あるのでその場合はスライドショーを表示して欲しいという要望がありました。 発見 どうやってこの状況を作るかってときにネットを探すと hosts を書き換えればできるよってことでなるほどと思い書き換えました。 そうしたら、「あれ？つながってる」。。ブラウザを一旦閉じるとうまくいきました。 確認方法ですが、Chromeの開発ツールでネットワークタブを見てブロックしたいNameのstatusを確認していました。 何気なく右クリックしたら、なんとありました！ 赤枠部分が上の画像で

Schema directives | GraphQL Tools によると graphql-tools の makeExecutableSchema で Directive を実装できるようなので 簡易的な認可ロジックを実装してみます。 あくまで Directive のハンズオンなので認可ロジックはとても簡単なものです。 認証情報は context 経由で処理の部分に渡すことにします。 「タイトルは自由に取得できるけど本文は許された人にしか閲覧できないドキュメント」を取得するためのクエリを定義していきます。 import { graphql } from 'graphql' import { makeExecutableSchema } from 'graphql-tools' const typeDefs = ` directive @auth(permitted: [String!]

2021年12月18日 CSS, ダウンロード FlexboxとはFlexible Box Layout Moduleのことで、その名の通りフレキシブルで簡単にレイアウトが組めちゃう素敵ボックスです。現在ほとんどすべての最新ブラウザーでFlexboxをサポートしており、Flexboxを使ったレイアウト組みが今後のWebデザインのスタンダードとなるでしょう。Webクリエイターボックスでは以前からFlexboxの使い方について紹介してきたのですが、最近Flexboxが浸透してきたこともあってか各プロパティの使い方について質問される機会が増えてきたので、チートシートとしてまとめてみました。この記事ではなるべく画像メインでプロパティーの使い方を紹介したいと思います！ ↑私が10年以上利用している会計ソフト！ 動画で学ぶCSS Flexbox この記事はYouTube動画でも解説しています。動画派の

本文書は、 Kibela Web API の実装についてのスタイルガイドです。 実装の原則 GraphQL official site に従う GraphQLに足りない部分は Relay server specに従う 実例としてはGraphQL+Relayで構築されているGitHub API v4を参考にする Naming フィールド名 ※ graphql-ruby 1.8 以降は自動的にcamelizeされるようになっているので、任せましょう。 camelCase にしてください。 定義の際にmodel本来の名前と変える必要がありますが、クライアントサイド言語（JS, Swift, Java）はcamel caseが基本なので、そのまま使えるというメリットがあります。 なお camel case はいくつかのバリエーションがありますが ActiveSupport の　String#cam

$ irb irb(main):001:0> require 'securerandom' => true irb(main):002:0> SecureRandom.hex(64) => "string------------------------" SecureRandomの使い方 base64(n=nil) nはbase64文字列の長さのバイト数 ** 実際に出力される文字列の長さはnの4/3程度 生成される文字列に含まれる文字: A-Z, a-z, 0-9, “+”, “/” and “=”

こんにちは。バジルと海鮮の和物をたべました、きたけーです。 ActionController::APIを継承したコントローラで暗黙的にテンプレートの描画をおこなう方法を知ったのでメモ(具体的にどこで必要になったかというとJSONを生成する手段をActiveModelSerializersからjbuilderに切り替えたときです)。 通常のRailsアプリ(コントローラについて言うとActionController::Baseを継承している場合)だと必ずしもコントローラのアクション内でrenderメソッドを呼ぶ必要はなく、呼ばない場合、暗黙的にテンプレートを描画してくれます。 これがRailsAPI、ActionController::APIを継承したコントローラのアクションの場合、明示的にrenderメソッドを呼んであげないといけません。 必ずしも明示的に呼ぶ必要がなく、アクションに基づい

これは 6/28 に開催される GraphQL ナイト のための資料です ここまでで分かること クエリは独自言語みたい クエリを変えることで柔軟にデータをとってこれそう クエリと結果の見た目が似てるのは分かりやすそう（主観） でも facebook はなんで作ったの？ facebook の事情 数十億ユーザから膨大なリクエストがくる 新興国の低速なネットワークからのモバイル接続も多い アップデートされないモバイルアプリもサポートする つまり リクエスト回数は可能な限り減らしたい 後方互換を維持しながら API を開発したい 無駄なデータを送りたくない （大規模開発なので型安全も欲しい） 規模は違えど我々も同じような問題を抱えているのでは？ なぜ既存のものではダメだったのか？ より詳しくは昔の graphql.org のページを参照（internet archive） v.s. REST 複

GraphQL is better than REST for developing and consuming APIs. It lets you query the exact data you need without having to create many overspecific API endpoints. This article describes how to get GraphQL server running on Google App Engine with a "simple social network" data model. This tutorial uses the following technologies: Google Cloud SDK 173.0.0 (Installation instructions, also install goo

フロントエンドはツールチェイン多くて大変ですね。何から初めていいかわからないと思います。 というわけで、 babel や webpack, というかもはや node の インストールすら不要でフロントエンドを始めることができるプロジェクトを作りました。 git clone git@github.com:mizchi/frontend-starter.git --depth 1 --single-branch master cd frontend-starter ruby -run -e httpd . -p 8000 # 好きな静的サーバー This is App を何か書き換えてリロードしてみてください。適用されるはずです。 最後に一つ注意。裏側はとても富豪的に動いているので、本番環境では使わないでください ここで動くコードはちょっと微調整を加えると webpack でビルドできます。

Node@10.5.0で入った worker の話です。 この記事は、Roppongi.js #4の登壇資料です。 5min で話しきれないので記事にまとめました。 実は、自分が Node.js に関わって、最初から最後(今現在)までずっと追っている珍しいモジュールです。 worker_threads とは？ worker: initial implementation by addaleax · Pull Request #20876 · nodejs/node Hi everyone! 👋 This PR adds threading support for to Node.js. I realize that this is not exactly a ... 実装著者は Anna (この PR は io.js 時代に petkaantonov が実装したのをベースに現環境へ移した

使い方 HTMLとCSSの編集方法をご存知の方は読み飛ばしてくださいませ。 スキップ 手順1：CSSをコピペ のちほど紹介するボックスデザインのうち、気に入ったものがあればCSSをコピーします。これをブログやWebサイトのCSSファイルに貼り付けます。貼付け先はブログサービス別に以下のようになります。 link rel〜を貼る場所 WordPress[ダッシュボード][外観][テーマエディター]右側のバーの[style.css]※もちろんFTPソフトを使ってもOK はてなブログ[デザイン][][デザインCSS]スマホ用はの[フッタ]に<style></style>と入力、この中に貼付け アメブロ[マイページ][デザインの変更][CSSの編集] Livedoorブログ[ブログ設定][PC][カスタマイズ][CSS] FC2ブログ[設定][テンプレートの設定][スタイルシートの編集] Blog

サイト改修の中でposition:stickyのpolyfillを使用する機会がありました。 今回はpolyfillの内部実装と利用する際に注意すべきことを紹介したいと思います。 position:stickyとは まず始めにposition: stickyの簡単な紹介から。 position: stickyは、画面からスクロールアウトする際に、画面の上下左右、指定した位置で要素の固定し、スクロールに追従してくるような配置を可能にするcssの記述です。 下記の場合、.sampleの要素が画面に現れたら、topが0の位置で追従します。 このcssを用いるとサイドバーとを特定の位置までスクロールさせたら追従させたり、スクロールが発生するtableの組んだ時に、thのみ追従させることが可能になり便利です。 position:stickyのサポート状況 上記で紹介したとおり、position:st

短いCSSを書くだけで要素を特定の位置に固定できるCSSの「position: sticky」。ちょっとした工夫で実現できるおもしろい使い方をデモで解説します。 スクロールに応じてページ要素を固定表示できるposition: stickyが便利で面白い使い方ができそうなので実験してみました。仕様がまだ草案（Working Draft）の段階で、将来、細かい部分に変更がないとは言い切れませんが、Edgeを含めた最新のブラウザで、ほぼサポートされています。 position: stickyの仕様 ブラウザ・サポート状況（Can I use…） フィーチャー・クエリ（@supports） と一緒に使えば、position: stickyに対応していないブラウザにも考慮した実装が可能なので、注意は必要ですがちょっとしたエンハンスメントとして使うのに良さそうです。 まずは「こんなのが簡単にできちゃい

今週お話しするのは、誤りの検知についてと、さらに誤りの訂正についてです。 我々が住んでいる世界は完璧ではなく、デジタルの信号(on/off)を扱う時でさえ誤りが生じます。電力の異常によりビットが反転することがあるのです。ハードウェアも失敗を起こすことがあり、信号が歪められることもあります。 デジタル信号に生じた誤りを検知する方法については既に過去に書いたことがあります。もっとも一般的なやり方は、ある種のパリティビット(ご存知なくともご心配なく。以下でパリティの意味を説明します)です。ある長さの単語に対し、シンプルなパリティビットをたった1つ加えることで、単語中のビットが1つ反転した場合にそれを検知することができます。「エラーが起こったことがわかる」ということは有益ですが、1個のパリティビットだけではその誤った信号を修復することができません。また、信号中に2個以上の誤りがあった場合、その誤り

Discussion 1. CommonJS は tree shaking されない ※追記、修正あり すべてのモジュールバンドラーが、 import { isEqual } from 'lodash'; を tree shaking できませんでした。これは、 CommonJS は静的に解析することができない困難または不可能（2018/06/15 修正）なためです。 例えば、 ES Modules の import, export に対応する CommonJS の require、 exports は、それぞれ以下のように動的に書くことが許容されています。 require const fooOrBar = require(Math.random() < 0.5 ? 'foo' : 'bar'); exports for(const name of ['foo', 'bar']) { ex