開発・公開したサービス リポジトリ： https://github.com/ryo-ma/github-profile-trophy デモ 🏆 Github Profile Trophy Githubのプロフィールをイケイケにするのが最近流行っております。(github-readme-stats、GitHub Readme Stats を利用してGitHubプロフィールをカッコよくする、Qiitaコントリビューション数をGitHubのプロフィールに貼ってドヤれるサービスを作った) そこで今回はその流行に乗り、GitHubでの活動をゲームの実績、トロフィー、称号のような形で可視化したら便利だろうと思いサービス開発しました。（また、いくつか技術的に気になる部分があったので技術検証も兼ねて） こんな感じで表示されます：https://github.com/ryo-ma 是非こんな用途で使ってみ

ReactのConcurrent Modeが最初に発表されたのはもう1年近くも前のことです（記事執筆時点1）。Concurrent Modeはたいへん奥深い機能で正式版がたいへん待ち遠しいですが、Concurrent Modeの代名詞として多くのReactユーザーに知られているのはPromiseをthrowするというAPIデザインです。Concurrent Modeでは、コンポーネントがレンダリング時にPromiseをthrowすることで、レンダリングをサスペンドした（Promiseが解決されるまでレンダリングできない）ことを表します。 Concurrent Modeに関しては筆者の既存記事Concurrent Mode時代のReact設計論 (1) Concurrent Modeにおける非同期処理などをご参照いただきたいのですが、ここではPromiseをthrowするということ自体に焦点

概要 iOS/Androidのソフトウェアキーボードが出てきた時のイベントをaddEventListenerとかで検出したい 問題 色々調べたが、キーボードの出し入れに対するイベントは存在しないっぽい 代わりに 「キーボードが出てきた/引っ込んだ」というのは input="text"とかにフォーカスが当たったか否かによるので DOMFocusIn/DOMFocusOut http://help.dottoro.com/ljuoivsj.php というのが使えそうというのが調べてて分かった document.addEventListener("DOMFocusIn", function(event) { //キーボードが出現した時 }, false); document.addEventListener("DOMFocusOut", function(event) { //キーボードが引っ込

日立製作所OSSソリューションセンタの横井です。今回は、画像認識を行うNode-REDのTensorflow.jsノードの使い方をご紹介します。 Tensorflow.jsとNode-RED TensorFlow.jsとは、TensorFlowのJavaScript実装です。TensorFlow.jsを用いることで、ブラウザ上やサーバサイドのNode.jsで学習や推論処理をリアルタイムに実行できます。また、Node-REDは、主にIoT向けに開発されたピジュアルプログラミングツールです。InfoQの記事によると、2020年のトレンドとしてTensorlow.jsはEarly Majority、Node-REDはEarly Adoptersという流行っている/流行りつつあるOSSとして位置付けられています。 本記事では、これらトレンドの2つのOSSを組み合わせて何ができるか見てみましょう。

はじめに この記事では、メインフレームでは異常時の処理でどのようなことをやっているのか、また、Linuxの異常処理との違いなどについて話してみようと思います。 この記事を書くに至った直接的なきっかけは、とある人からリクエストがあったからです。が、日ごろからメインフレームの異常処理の考え方については、PCサーバーやクラウドによるシステムがメジャーになった現代であっても、参考になることは多いと感じていてはいました。 筆者は今でこそLinux Kernel周りの仕事をしていますが、20年ぐらい前のころはメインフレームのOS開発部隊に配属されていて、メインフレームのとあるコプロセッサのドライバを書いたりしていました。この際、その異常処理における考え方を体験する機会が多々あり、当時のその経験が20年後の現在でも大いに役にたっていると感じていたからです。 そもそもメインフレームは、これまで長年にわたっ

概要 Martin Fowler氏によってDependency Injection (以下DI) と DIコンテナについての概念が2004年に発表されて約16年。 Java だけでなく JS や Swift、C# と言った様々な言語に実装されてきて基本的な設計概念として定着してきた。 だが、DIコンテナの利点、なぜDIコンテナを使うのかという話になってくると テスト容易性をあげる、という話ばかりが多くそれ以外のメリットについて説明されることが少ないと感じてる。 Java開発を変える最新の設計思想「Dependency Injection（DI）」とは DI (依存性注入) って何のためにするのかわからない人向けに頑張って説明してみる そこでこの記事ではテスト容易性の向上以外のDIコンテナのメリットについて書いていきたいと思う。 まぁまぁ長いので面倒だったら結論を先に読むでいいと思う 当初、

■ クリーンアーキテクチャって難しい。 クリーンアーキテクチャって難しいですよね。 この有名な同心円状の図、何度見てもよくわかりません。右下にある矢印もよくわかりません。 様々な記事を見ても、やっぱり分かるような分からないような... プロダクトに COM 通信が必要になったので勇んでクリーンアーキテクチャを採用したはいいものの、 どうにも理解しきれず泣きながら必死に試行錯誤をしていたところ、 ふと クリーンアーキテクチャは『鎖国』に例えると分かりやすい という事に気が付きました。 本記事では初心者なりにその言語化にチャレンジしてみたいと思います。 ※ なお考え方そのものに着目するため、コードは全く取り扱いません。その点ご了承ください。 またクリーンアーキテクチャは、表面的なメリット(ユニットテストしやすい等)　だけを見て批判されてしまうことも有るようです。 その辺りについても少し触れてみ

tl;dr JavaScriptに参照渡し/値渡しなど存在しない 存在するのは変数に入る値の参照のみ 変数に値を代入すると参照が切り替わる という様に考えれば不毛な議論を避けられるのではないかという妄想 そしてタイトルは明らかな誇張表現 はじめに よくJavaScript界隈で見られる変数に関する話題として、「値渡し/参照渡し」が上がりますが、そもそもJavaScriptにはC++のような参照渡しなど存在しないです。それなのにわざわざ値渡し、参照渡しと分類することで、勝手が違うC++の参照渡しと混同しかねないです。実際にそのような話題が人目に付く程度盛り上がったときには、大抵「それはC++の参照渡しと違う」などと指摘が入り、JavaScriptでの参照渡しと呼ばれていたものが「参照渡しのようなもの」で片付けられるのを何度も見たことがあります。 ここまでの自分はJavaScriptにはJav

大事な言葉・HRT～「Humility（謙虚）」、「Respect（尊敬）」、「Trust（信頼）」。ああなんて難しいポエム新人プログラマ応援HRT はじめに～HRTは本当に大事。でも意識しすぎて失敗することも 最近バズった記事からHRTに関わる記事やコメントを見る機会が増え、HRTが大事と改めて意識しました。 それとともに、HRTを実践するのは難しいなと改めて感じたのでまとめてみました。 まずはHRTについてQiitaガイドラインから HRTとは、書籍『Team Geek――Googleのギークたちはいかにしてチームを作るのか』で紹介されている「Humility（謙虚）」、「Respect（尊敬）」、「Trust（信頼）」を示す言葉です。書籍では“あらゆる人間関係の衝突は、謙虚・尊敬・信頼の欠如によるものだ”と述べられています。 Qiitaを利用する際には、このHRTを意識するよう心がけ

SPAのログイン認証のベストプラクティスがわからなかったのでわりと網羅的に研究してみた〜JWT or Session どっち？〜JavaScriptRailsJWT認証React SPAのログイン周りについて、「これがベストプラクティスだ！」という情報があまり見当たらないので、様々な可能性を模索してみました。 いろいろな状況が想定され、今回記載する内容に考慮の漏れや不備などがありましたら是非コメントでご指摘いただきたいです！特に「おすすめ度：○」と記載しているものに対しての批判をどしどしお待ちしております！ この記事でおすすめしているものであっても、ご自身の責任で十分な検討・検証の上で選択されてください。 前提 想定しているAPIは、 ログイン外のAPIにはPOST/PUT/DELETEのものがなく、GETのみ GETのAPIにはDBを更新するなどの操作がない とし、そのためログイン外では

この投稿では、値としては「文字列」なんだけど、単なる文字列ではなく「電話番号型」という意味を持たせた文字列型を定義し、それ使用する方法を紹介します。 TypeScriptで「電話番号型」みたいな、正規表現でバリデーションされるような型は作れるんかな？ ElmだとOpaque Typeなんてやり方があったけど。。。 用は型をexportしないで、その型の値を作る方法だけをexportすればええんかな。 — 無職やめ太郎（本名） (@Yametaro1983) April 23, 2020 ↑上のような疑問に対する答えです。 実現方針 方針としては、以下のテクニックの組み合わせです。 公称型で、「電話番号型」を定義する ユーザ定義タイプガードで、文字列型を電話番号型としてコンパイラに認識してもらう 公称型とその実装方法についての基本は下記投稿をご覧ください。 TypeScript: 異なる2つ

PIFuとは 画像引用(左)：上坂すみれ　オフィシャルブログ　猫森集会 PIFu: Pixel-Aligned Implicit Function for High-Resolution Clothed Human Digitization ざっくりと説明しますと、 1枚の画像から衣服付きの人物の3Dモデルを生成する機械学習のモデル です。 We introduce Pixel-aligned Implicit Function (PIFu), a highly effective implicit representation that locally aligns pixels of 2D images with the global context of their corresponding 3D object. Using PIFu, we propose an end-to-e

https://zeit.co/blog/next の翻訳です。 > Naoyuki Kanezawa (@nkzawa), Guillermo Rauch (@rauchg) and Tony Kovanen (@tonykovanen) > 2016年10月26日 私たちは、サーバレンダリングされるユニバーサルなJavaScriptウェブアプリのための小さなフレームワークであり、ReactやWebpack、Babel上に構築され、このサイト（訳注: https://zeit.co ）を動作させているNext.jsをオープンソース化することをとても嬉しく思います！ (Next.jsの"Hello World") Next.jsを使い始めるには、package.jsonを含む新しいディレクトリ内で次のように実行してください。

ブログパーツなどでよく使われる、HTMLタグをコピペするだけでサードパーティーのコンテンツを表示させることができるウィジェット。 TwitterやFacebook、はてなブログ等いろいろなサービスがウィジェットを提供していたり、表示をサポートしていたりしますね。 先日GitHubのコントリビューションチャートを任意のページに貼り付けられるウィジェットYourcontributionsを作ったので、これを例にしてiframeを使ったウィジェットのベーシックな作り方をメモ。 GitHubのcontributionを見られるウィジェットを作った : Query OK. http://queryok.ikuwow.com/entry/github-widget-released/ こんなウィジェットです。 Yourcontributions: GitHub Contribution widget

PlantUML は DSL(ドメイン特化言語) で UML の図を描きます。 テキストで記述するので Git で差分を確認したり Git Flow で関係者とコラボレーションをして図が描けるので便利です。 PlantUML は多くの UML に対応していますが、よく使うものを チートシート にまとめました。 Diagram UML は大きく 振る舞い図 と 構造図 に分類されます。 Behavior 振る舞い図は、振る舞いに関する機能を表現します。 Diagram PlantUML 説明

概要 Google Chrome に実装された --headless モード の Node.js API を提供してくれる npm パッケージの puppeteer を使ってJSONで指定したウェブサイトのスクリーンショットを撮影するスクリプトを書いた。一通り動きそうなことを確認したので、どうせならとおもってこのスクリプトを Docker 化していると、ある特定のウェブサイトを撮影した時に以下のようなエラーが出るようになった。 (node:16) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 1): Error: Page crashed! (node:16) [DEP0018] DeprecationWarning: Unhandled promise rejections are

いきなり結論を書くと、idやclassはスタイルのためのものなので、テストでそれを使うのはやめましょう。そして、カスタムデータ属性を使いましょう。(idやclassはスタイルのためだけではないという意見はごもっともです！しかし、主にとしてスタイルに使われるということでご了承頂いて以下の駄文に付き合って頂けると幸いです🙇) 先に断っておくと主にreactについての話で、JSXを前提とします。(手法はReactに限りませんが理由は後述) 2020/03/23 追記 この記事は1年以上前に書かれた記事なのでテストフレームワークとしてenzymeを使っていますが、現時点ではTesting Libraryの使用をオススメします。data-testid に対応するクエリを備えています。 React Testing Library · Testing Library はじめに ご存知の通り、ロジックと

物事の普遍性への追求は人類のテーマです。 時代と共に変わりゆくソフトウェア分野の技術の中で普遍的に存在しているのか、共通して存在する中核的な技術はあるのだろうかということを考えたいです。 新しいもの、古くからあるもの 近年、マイクロサービス、クリーンアーキテクチャなどの○○○アーキテクチャ、Reactを始めとするの宣言的UIなどがそれぞれ分野違えど注目を集めてるように思います。また時代にとらわらずUNIX哲学に代表されるコマンドが活用されています。 決して、新しく登場した技術だから良いという考えているわけではなく、新しいものは、古い技術の問題点を克服に作られていることが多いため、優れているものが多いと考えています。 それは分割統治なのではないか？ ソフトウェア技術の分野も広いのでいろんな視点があるとは思うのですが、分割統治は普遍的な技術の候補になるのではないかと思います。 ここでの分割統治

MakerDAOが運営しているステーブルコイン発行のDeFiであるDaiについて、400万ドル余りの損失がネットワーク全体で発生したとの情報がありました。 今回はとりあえずそれについてまとめてみます。 参照: https://forum.makerdao.com/t/black-thursday-response-thread/1433 概要 まず、昨日、Ethereumの価格が暴落しました。すると、送金が活発になったり、DeFiの担保が清算される前に取り除きたいとの思惑からネットワークが混雑します。普段は10Gwei程度がせいぜいのGas代も100Gweiを余裕で超えるまでネットワークが混雑します。 ネットワークが混雑すると何が問題かというと、自分のトランザクションが取り込まれるのがいつになるのかわからなくなります。 一方、MakerDAOでは価格が下落するとCDPと呼ばれる担保が清算さ

GAEでアプリケーションを作成する際、ストレージとしてDatastoreを利用するケースが多いと思う。 高いスケーラビリティとリーズナブルな料金設定でとても使いやすいデータベースなのだが、複雑な検索を行うことはできないし、LIKE検索やIN検索などもできない。 しかしながら、このような欠点も実装の工夫次第である程度カバーすることが可能なわけで、「Datastoreでもこんなことできるんだよ！」的なSomethingを伝えてみたいと思う。 今回は下記のようのデータ構造を持つエンティティをサンプルとして作成し、Datastoreを利用したいろいろな検索方法を実装してみる。