const __BASE_PROTO__ = { // '@': elem, '@parse' : { value (arr) {return arr.filter(v => null != v).map(v => '@' in v ? v['@'] : v)} }, _ : { value () {return this['@'];}, }, has: { value (prop) {return prop in this["@"];} }, $: { value(...child) { // 略 return this; }, }, // 略 } const _ = function(el, custom = '') { return Object.create( { '@': el }, custom instanceof Object ? Object.assign({}, __B
security rulesとindexesも含めたら思ったより時間がかかってしまったのでメモ やりたいこと メッセージの公開/非公開を設定できるメッセージ投稿アプリを考える 公開されたメッセージの一覧を表示したい Firestoreの構造は以下のようにする user/{uid}/posts/{docId} { body: string, timestamp: timestamp, isPublic: boolean } rules_version = '2'; service cloud.firestore { match /databases/{database}/documents { function published() { return resource.data.isPublic == true } match /user/{uid} { match /posts/{doc
ニューラルスタイル変換とは ニューラルスタイル変換とはあるターゲット画像を、他の画像のスタイル(質感)に変換して新たな画像を生成する機械学習のテクニックの一つです。街や人の画像をゴッホ風に変えたりするアプリで使われている技術ですね。 ではこの技術を使って今回は本物の、今にも人を食べてしまいそうな凶暴なワニ画像を、100日後に死ぬワニ風にスタイル変換して優しいにこにこワニに変換できるか試してみたいと思います。 (それにしてもこの画像のにいちゃん大丈夫か、、、気をつけないと死んじゃうよ!) やることは基本的には元の画像のコンテンツ(画像の骨組みといったマクロな構造)を維持した上で、100ワニ風の漫画タッチのスタイル(質感)を取り入れます。ディープラーニングでは常にある達成したいことを指定する損失関数を定義して、その損失関数を最小化することで目的の達成を目指します。今回の例の物凄くざっくりした最
Web技術でモバイルネイティブなユーザインタフェースデザインを提供するIonic Frameworkですが、Webで配信するとユーザのデバイスはモバイルだけということはなく、ユーザはデスクトップで閲覧する可能性もあります。そこで、デスクトップに対応させるいくつかのレイアウトのヒントをご紹介します。 1. SideMenuレイアウト まず一番ベーシックなデスクトップ対応はSideMenuを利用することです。TechFeed Proなど広く採用されています。 ポイントとしてはモバイルレイアウトではハンバーガーメニューをSideMenuをあくまでメニューの配置だけに利用することが多いですが、デスクトップではSideMenu上部(左上)にロゴを配置することが重要です。 デスクトップレイアウトでは左上もしくは上部中央にロゴがあることが多く、ロゴさえあればそれっぽく見えます。(暴論 もっとシンプルに配
背景 Electronを用いたアプリ開発の記事を探していたところ、Mediumで@codedrakenさんのBuild a Todo App with Electronという記事に出会いました。 この記事ではToDoアプリ(メモ帳)の実装方法がチュートリアル形式で掲載されており、とても勉強になったので、ぜひこの記事を紹介(和訳)したいと思います。 自分が実装する上でつまづいた点や、気づいた点などを補足しながら、実装の流れをみていきたいと思います。 環境 機種: Mac Book Air 2017 OS : MacOS Mojave ver 10.14.5 node.js : v12.13.0 npm : 6.13.4 electron : 8.1.1 開発する上での前提条件 PCにNode.jsとnpmがインストール済み 読者に要求する前提知識 javascriptに関する基礎知識 Ele
【2020/10/09】 QiitaのLGTMをSUSHIにするユーザースタイルシート - Qiita ユーザースタイルシートを用いた改良版を作りました。合わせてご覧ください。 概要 QiitaのいいねがLGTMに変わりましたから、当然の流れとしてSushiにしました。 記事のLGTMボタンの他、トレンドやマイページ、コメントなどに表示されるLGTMもSushiに置換します。 Greasemonkey/Tampermonkeyなどで実行できるユーザースクリプトとして実装しており、Greasy Forkからインストール可能です。 実装 偉大なる先人はユーザースタイルシートで実装していましたが、筆者としてはユーザースクリプトのほうが慣れてるのでそっちで実装することにします。 アイコンの置換 SVG要素の置換 新しいLGTMアイコンはSVG要素で描かれていますから、まずはそれら全てをqueryS
この記事の内容は古くて、例えば ARM Mac (Apple Silicon) ではうまくいかなかったりします。とはいえ Docker コンテナをビルドしたり起動したりする際に platform オプションを指定すれば出来るとは思いますが、未確認です。 AWS Lambda の Python ランタイムでよく使うモジュールを Lambda Layers に登録しようと思ったが、EC2 インスタンスを立ち上げてパッケージを作るのが面倒なので Docker でできるようにした。 Lambda Layers とは何か ファイルを zip で固めたものをアップロードして「レイヤー」として登録することができる Lambda Function にレイヤーを追加すると、ランタイムの /opt 以下に固めたファイルが展開されて実行時に利用できるになる 言語ごとに指定された名前のディレクトリの中にモジュール
下記サイトを参考してyamlを作成、docker-compose upしたが、MySQLへの接続ができない(Refuse)というエラーで起動しませんでした。情報が古かったようです。 http://tech.innovation.co.jp/2017/11/13/Mautic-Docker-Kohe.html https://qiita.com/kooooooooooooooooohe/items/43f9452acc539dbd3083 Dockerhub公式サイト(https://hub.docker.com/r/mautic/mautic/)にあるYAMLファイルをコピペして実行したらうまくいった version: '2' services: mauticdb: image: percona/percona-server:5.7 container_name: mauticdb vol
はじめに JWTはFirebaseなどで利用される、改竄防止の署名やメッセージ認証コードを付与したJSONをBase64エンコードしたうえでヘッダーを付けたデータ構造である。通常署名やメッセージ認証コードの検証は専用のSDKやライブラリーで行うことがほとんどであり、検証ロジックを安易に自作するべきではないが、デバッグ目的ではコマンドラインツールで検証できると役に立つことがある。この記事ではFirebaseの認証において発行されるJWTを例として、Pythonなどのプログラム言語を利用せずにOpenSSLやbase64などのコマンドラインツールのみを使って気合で署名を検証する方法を紹介する。 使ったOpenSSLのバージョン情報 FirebaseのJWTの取得 実際に手元にFirebaseのアカウントなどがなくても、https://github.com/firebase/firebaseui
Google Cloud Platform (GCP)のサービスで正式名称や略称はともかく、読み方がわからずに困ることがよくあるのでまとめてみました。 クラウド コンピューティング サービス | Google Cloud https://cloud.google.com/?hl=ja まとめルール まとめルールについては下記を参考ください。 Google Cloud Platform (GCP)サービスの正式名称・略称・読み方まとめ#1(AI と機械学習/AI ビルディング ブロック) - Qiita https://qiita.com/kai_kou/items/fa930eef23470c2f8f0b Amazon Web Services (AWS)のまとめはこちら! Amazon Web Services (AWS)サービスの正式名称・略称・読み方チートシート - Qiita
コンポーネントの再レンダリングを適切に抑制していくことが、React アプリのパフォーマンス改善の基本。 コンポーネントの再レンダリングが発生する要因はいくつかあるが、「親の再レンダリングによって発生する子の再レンダリング」については、以下の記事にまとめてある。 numb86-tech.hatenablog.com この記事では「状態の更新」によって発生する再レンダリングについて見ていく。 また、この記事で「コンポーネント」という言葉を使う場合、特に断りがない限り関数コンポーネントを指す。 動作確認に使用したライブラリのバージョンは以下の通り。 react@16.13.1 redux@4.0.5 react-redux@7.2.0 基本的な考え方 再レンダリングが行われるということは、そのコンポーネントを再び実行するということ。そのため、再レンダリングが行われれば行われるほど、処理は重くな
SecretlintはAPIトークンや秘密鍵のようなリポジトリにコミットしてはいけないデータを含んだファイルがないかをチェックするツールです。 Secretlintが見つけられるCredentials(秘匿情報)はプラグインで拡張できるようになっていて、npm、AWS、GCP、Slack、SSH秘密鍵、ベーシック認証などの検知に対応しています。 Gitのpre-commit hookやCIサービス上でSecretlintを使ってファイルの中身をチェックすることで、 リポジトリにうっかりCredentialsをコミットしてしまうことを防止する目的のLintツールです。 Credentials(秘匿情報)のチェックに特化したESLintやtextlintのようなLintツールです。 まずチェックしてみよう SecretlintはDockerかNode.jsが入っている環境なら次のコマンドで、現
How to test custom React hooksMarch 22nd, 2020 — 10 min read If you're using react@>=16.8, then you can use hooks and you've probably written several custom ones yourself. You may have wondered how to be confident that your hook continues to work over the lifetime of your application. And I'm not talking about the one-off custom hook you pull out just to make your component body smaller and organi
はじめに 基本統計量の算出は、ExcelやSPSSのようなツールや、あるいはRのような言語を使って求めることが多いと思います。 そのため、DB内のデータについて基本統計量を求める場合、一旦DBからデータを抽出してエクスポートするような形になるケースが多いのではないかと思います。 SQLには加減乗除の計算だけでなく、SUMやAVGなどの集計関数も揃っているので、今回は初歩的な集計関数を使ってSQLで基本統計量を求める方法を探ってみました。 使用した環境 OS CentOS7.7(1908) RDBMS MySQL8.0.19 テストデータ テストデータとして、Wikipediaに掲載されている八ヶ岳の標高データを利用しました。 テーブル -- 山情報テーブルの作成。 CREATE TABLE `nkojima`.`mountain` ( `id` INT AUTO_INCREMENT com
はじめに 今回はOpenCVを用いて、顔か検出をやってみたいと思います。顔検出の手法は色々あるのですが、今回はHaar cascadeを用います。 環境 MacOS Mojave Python 3.7 Haar Casecade? 顔っぽさを表す特徴量 (Haar特徴量) から、これは顔であるかないかを判断する分類器のことです。この分類器は、高速化の為に複数の分類器が結合してできていることから、Cascade (結合) 分類器と呼ばれます。Haar特徴量は以下のような白黒の特徴量が用いられます。 図. Haar特徴量 (画像引用元:http://labs.eecs.tottori-u.ac.jp/sd/Member/oyamada/OpenCV/html/py_tutorials/py_objdetect/py_face_detection/py_face_detection.html)
Scala の trait と Rust の trait は微妙に使い方が異なる、とよく質問を受けます。たしかに、使い心地は微妙に異なるかもしれません。Scala はオブジェクト指向を中心に設計された言語ですが、Rust はそれを中心に設計されているとは言えません*1。こういった言語設計の差が、trait の使い心地の違いを生み出していると私は思っています。 両者の trait には、共通した特徴もあります。共通した処理をまとめあげるという意味では同じ目的をもっているといえますし、また、「犬は動物である」「猫は動物である」の共通性を示すことで、共通したものをひとまとめに処理しきることもまた可能です。 Scala には implicit という強力な機能が存在します。これは柔軟でスケーラブルなソフトウェアデザインを可能にする Scala の特徴のひとつです。非常にすばらしい機能です。この機能
2020年4月16日紙版発売 2020年4月16日電子版発売 Ruslan Osipov 著,大倉雅史 訳 B5変形判/344ページ 定価3,608円(本体3,280円+税10%) ISBN 978-4-297-11169-4 Gihyo Direct Amazon 楽天ブックス ヨドバシ.com 電子版 Gihyo Digital Publishing Amazon Kindle ブックライブ 楽天kobo honto 本書のサポートページサンプルファイルのダウンロードや正誤表など この本の概要 Googleの現役エンジニアが書いた,テキストエディタ「Vim」の解説書です。OSごとのインストールや基本操作といった入門的内容も押さえつつ,リファクタリング,デバッグ,実行,テスト,バージョン管理システムとの連携,プラグインの作成と管理といったソフトウェア開発に便利な機能を,Pythonのコー
この記事のまとめ: OpenAirInterface と Open5GS を使って一般家庭で LTE 網を構築するレシピを紹介します。 背景: 最近、テレコム周りでも OSS 界隈が面白くなってきたのと、RF デバイスは基本的に高価なイメージがあったんですが、LimeSDR mini などの安価な Software Defined Radio (SDR) ボードが手に入るようになったり、Alibaba から安い RF デバイスが入手できるようになったりしてきていて、家で十分遊べるだけのものが揃うようになってきました。そんなわけで勉強を兼ねつつ、OSS を使った LTE の構築をしてみます。 なお、RF を扱いますが電波法に触れないようにすべて有線系かつ RF デバイスはシールド対策をして構築しています。 もくじ 全体概要 材料 下準備 SIM カードの書き込み RF デバイスのシールド O
概要 この記事では、WebRTCとTensorflow.jsを用いた感情認識ビデオチャットの紹介をします。このアプリケーションは2018年11月に行われたWebRTCハッカソンをきっかけに開発をはじめました。現在はUIやインフラなどさらなる改良をし、こちらでAWSを使って公開しています。今回は使い方と全体のアーキテクチャまでに留めますが、ゆくゆくはシリーズ化して内部の詳細な設計に迫っていければと思います。また、この記事の最後にはアプリケーションの制作意図と、公開した経緯について触れさせていただきます。 使い方 文字で仕組みを紹介するよりまずは触れていただいた方が良いと思いますので、早速使い方の紹介いたします。 1. サイトへアクセス まずは通話する二人(A,Bとする)のどちらもこちらにアクセスします。 (サーバー改修のため現在アクセスできません) 注意点ですが、PCからはChromeで、i
追記 (2021/12/08) この記事は今から 1年半以上前に書かれたものです。(2020/03/25 に書かれた) なので一部情報が古い (たとえば Azure ポータル画面のスクショが古いものだったり) なので、 現在の最新版をこちらに載せます。こちらの最新版も完全無料で作るものです。 前編(バックエンド構築) 後編(クライアント側の開発) また、この記事は「お手軽に 1 時間で(お試しで)動かしてみる」ことにフォーカスをあてて書いたもの(例えばデプロイ先にくっついている機能であるオンラインエディタを使っているのでデバッグがかなり難しい(ローカルの開発環境で開発できたほうがよい))なので、 実際に運用することを考えても、上にリダイレクト先として貼った最新版の記事をご覧ください。 記事本編 今回は、すべて無料の範囲内で Microsoft Teams bot を作成します。 Teams
シェアフル株式会社では、翁さん(@kahirokunn)、上田さん(@tenntenn)、長澤さん(@taro.nagasawa)が3月5日(木)に正式に技術顧問として就任されました。今回はその3名とCIOの松尾さんによる対談を実施。Vue.js、Go、Kotlinのエキスパートたちが技術顧問としてジョインするまでの経緯やチームへの関わり方、著名なスペシャリスト3名が社内のメンバーにどのような変化を生んだのかといったことを語り合っていただきました。 シェアフル株式会社のプレスリリースはこちら 短時間のお仕事紹介プラットフォーム「シェアフル」翁 華宏氏、上田 拓也氏、長澤 太郎氏が技術顧問に就任 組織として新たな領域へ踏み出したい!技術顧問が持つ経験・知見を頼りにできる環境を社内に ―― 本日は、シェアフル株式会社のCIOの松尾さんと新たに技術顧問として就任されたVue.js、Kotlin、
Microsoft、「Visual Studio Code」の「February 2020」リリースを公開:TypeScriptの呼び出し階層に対応 Microsoftは、クロスプラットフォームエディタ「Visual Studio Code」の最新版「February 2020」リリース(バージョン1.43)を公開した。ワークベンチで検索エディタ機能を正式に搭載した他、言語対応などに改良を施した。
私の書くQiita記事の中で,英語に関する記事は,いいね改めLGTMを得やすいようですね。次の3つの記事はどれもLGTMが100を超えました。 parcel に Pull Request を送って merge されるまでの顛末記〜生まれてはじめて国際的に OSS への貢献をしてみたら,とても歓待された ソフトウェア技術者のための英語習得法の案 続・ソフトウェア技術者のための英語習得法の案 今回私が書く記事は,そこまでたどり着かない人向けの記事です。 前提としては,4技能の傾向が,reading > writing > speaking > listening という感じなんだけど,reading, writing にも大して自信がない,という人が当てはまります。 基本的な考え方 まず,reading, writing に自信をつけるところから始めるのが良いと思います。目標としては次のような
はじめに 高階関数を書いたら、中級者になれた気がした。という記事を読んだのち、高階関数を書いたら、中級者になれた気がした。を批判したら上級者になれた気がした。まで読んだところ、非常にもやもやする部分があったので批判をしてみる、という趣旨の記事になります。 非情に底辺(某記事で言う格下目線)の内容になっていますので、こういう場所もあるんだというネタとしてお読みください。 結論 高階関数にする前のべた書きコードが要件を満たせて安全なほぼ最適解! const setHeight = (element, toRed, width) => { element.style.height = '100px'; if(toRed){ element.style.backgroundColor = 'red'; } // 第三引数のwidthがあったら、要素の横幅を変更する if(width){ eleme
javascriptの標準ライブラリで悪名高いDateクラス。 通常はmoment.jsなどのラッパーライブラリを使って安全に作りますが、ちょっとしたスクリプトくらいだとライブラリは使わずにスクラッチで書きます。 そんな時に使える日付操作周りのTipsを列挙して解説していきます。 日付操作の解説の中でいくつか落とし穴があるので、それについても解説します。 紹介する日付操作一覧 今日の日付を取得する 明日の日付を取得する 今週の火曜日を取得する 先月末を取得する 今月末を取得する 今日の日付を取得する Dateは日付と時刻を両方含んだクラスです。 そこから時刻を削り、日付のみを抽出します。 new Date(new Date().toLocaleDateString()) 解説 Dateのコンストラクタ まずはDateのコンストラクタから解説します。 コンストラクタにはざっくり2種類あります
TypeScriptのタイプガードは、タイプガード関数が問題なく実装されていれば、asで型アサーションするよりは、安全に型を狭めることができて、とても役に立つものです。 しかし、タイプガード関数自体が安全かどうかは、その実装次第なところがあります。 とりわけ、object型から具体的な型に狭めるタイプガード関数を作る場合は、型の安全性に不安が残りがちです。 たとえば、次のFooのような型があったとき、
トランジスタ(英: transistor)とは、電子回路において、信号を増幅またはスイッチングすることができる半導体素子である。 1940年代末に実用化されると、真空管に代わってエレクトロニクスの主役となった。論理回路を構成するための電子部品としては最も普及しており、集積回路(IC)の多くは微細なトランジスタの集合体である。1965年にムーアの法則で予言された通り、CPUやMPUに内蔵されているトランジスタの数は増え続け、今ではひとつのチップに700億個以上[1]のトランジスタが搭載されている製品もある。CPUやMPUは、それらの膨大な数のトランジスタが高速でスイッチングを行うことで動作しており、スマートフォンやパソコン、コンピュータネットワーク、テレビ、自動車などのあらゆる機器や装置の動作においてトランジスタが関与している。なお、この名称はtransfer(伝達)とresistor(抵抗
名古屋・大須の万松寺では、新型コロナウイルスの感染拡大の影響で企業から内定を取り消された学生を対象に採用活動を始めている=名古屋市中区 (朝日新聞) 約500年の歴史を持つ名古屋・大須の万松寺は、新型コロナウイルスの感染拡大の影響で企業から内定を取り消された学生を対象に採用活動を始めている。3人の採用を予定し、31日まで募集する。 対象は今春卒業予定の大学院生、大学生、専門学生、短大生、高校生で、ホームページから受け付ける。入社後はグループ会社に配属され、不動産の管理や、骨つぼを納める納骨壇の販売を担当する。僧侶になりたい場合は入社後から修行に入り、お経の練習などをするという。勤務地はいずれも大須で転勤はない。 寺は2019年から新卒採用を見送ってきたが、新型コロナの影響で学生の内定が取り消されるケースが出ている報道を見て、住職が臨時採用を決めた。広報担当者は「リーマン・ショックの時と同じ
クラス図(Class Diagram) クラス図はUMLの基本となる図のひとつで、システムを構成するクラスとそれらの関係を表現します。また、各クラスが保持する属性(プロパティ)や操作(メソッド)も表現します。 クラスの表現 クラス図は次の要素で構成されます。 ■クラス名称 クラス名を記述します。抽象クラスの場合はイタリックで記述します。 パッケージ:クラス名 ※パッケージは省略可能 また、クラス種別(ステレオタイプ)を表示するには、<<ステレオタイプ>>の形式でクラス名の上部に記述します。 例 : <<interface>> ■属性 属性は次の形式で記述します。 可視性 名前 : 型 = 初期値 { 制約条件 } ※名前以外は省略可能
新型コロナウイルス(COVID-19)の感染の震源地がアジアから欧州に移行し、中国はすでに感染爆発期をやり過ごしてビジネスの復興段階に入ったように見える。だが、複数の研究機関や専門家がアウトブレイク「再発」の危険性を懸念している。 工場が新たな「感染源」になりうる 新型コロナウイルス(COVID-19)のアウトブレイクが、中国を再び津波のように襲うかもしれない。 3月16日、英インペリアル・カレッジ・ロンドンの新型コロナ対策チームが、英米の公衆衛生対策が感染拡大の防止に与える効果を検証。報告書のなかで、自宅隔離や個人間で一定の距離を保つソーシャル・ディスタンス(社会的距離)などの対策によって死者数が半減する可能性を指摘した。 だがその一方、収束の兆しを見せてもすぐに「再発」する危険性もあるとして、次のように述べている。 「(公衆衛生対策を実施する上での)最大の課題は、自宅隔離や社会的距離、
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く