tag:blogger.com,1999:blog-7146259454105695352024-03-13T08:17:50.991+09:00Black Everyday Companyブラック企業からの脱出B.C.Rikkohttp://www.blogger.com/profile/16356457343247420696noreply@blogger.comBlogger355125tag:blogger.com,1999:blog-714625945410569535.post-66457133978005713452024-02-13T08:30:00.001+09:002024-02-13T08:37:22.064+09:00「フロントエンドのモデル駆動設計」の見解(場外編)<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgP80alLQtXn-drKey-qTSVngRO9VSCONQ_62lMZqwiPA8lk2vetnpEK64SQ5QQRJbQM0rDb5Xrs2-yji0veNHQxb1EmYxwIp585l1caUYvKgZMQxoYbL2d0B_-Pn-w0OrRKq5HicGIzUt1zQsrTmSAWExeDsDVY8mXF_Sa1kiXvL4Iq4nu31pGYve784UR/s1036/frontend.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="568" data-original-width="1036" height="349" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgP80alLQtXn-drKey-qTSVngRO9VSCONQ_62lMZqwiPA8lk2vetnpEK64SQ5QQRJbQM0rDb5Xrs2-yji0veNHQxb1EmYxwIp585l1caUYvKgZMQxoYbL2d0B_-Pn-w0OrRKq5HicGIzUt1zQsrTmSAWExeDsDVY8mXF_Sa1kiXvL4Iq4nu31pGYve784UR/w640-h349/frontend.png" width="640"></a></div><br>
<h2 class="selector02">背景</h2>
<p>
2023年12月、さくらのテックランチというイベントで「<a href="https://speakerdeck.com/bcrikko/tackling-complexity-of-front-end-software-with-ddd-and-clean-architecture" rel="nofollow" target="_blank">フロントエンドの複雑さに立ち向かう 〜 DDD と Clean Architecture を携えて
〜</a>」という発表をした。ありがたいことに多くの人に見ていただき、(観測範囲では)好意的な意見をいただいた。その影響は大きく「<a href="https://modeling-how-to-learn.connpass.com/event/308018/" rel="nofollow" target="_blank">現場から学ぶモデル駆動の設計</a>」という勉強会を主催されている方の目にとまり、座談会メンバーとしてオファーをいただき2024年2月1日に参加してきた。
</p>
<p>
がっつりカンペを用意したのだが、時間の都合や流れ的に話せなかったことがあるので、4年ぶりにブログを更新しようと思う。
</p>
<p>
座談会は<b>「バックエンドエンジニアがフロントエンド開発するときの悩み」</b>というテーマで、以下のようなトピックがあった。
</p>
<p></p>
<ul>
<li>フロントエンドの学び方</li>
<li>バックエンドの知識をフロントエンドに応用できるか</li>
<li>UIコンポーネントの設計方法</li>
<li>ステートレスとステートフル</li>
<li>テストの手法</li>
<li>質疑応答</li>
</ul>
<span></span><a href="https://kuroeveryday.blogspot.com/2024/02/frontend-for-backend-engineer.html#more">続きを読む »</a>B.C.Rikkohttp://www.blogger.com/profile/16356457343247420696noreply@blogger.com0tag:blogger.com,1999:blog-714625945410569535.post-5065539508170723572020-01-17T08:30:00.000+09:002020-01-23T17:56:44.119+09:002019年活動報告と2020年行動指針<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEig29EPmnG38QLG5vFKUXrgqZwxvz4tpo0h5Gzrt2r7lhZFKYNAMOVgm2of7NrAfdUKWptArZd1Rg0XLUDlKvTC1CCLRwmu6jDlkzyKqh9W8557SbFWqYbX2QSs2dTVzO2mj0fCb3PpZGB2/s1600/2019to2020.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="426" data-original-width="640" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEig29EPmnG38QLG5vFKUXrgqZwxvz4tpo0h5Gzrt2r7lhZFKYNAMOVgm2of7NrAfdUKWptArZd1Rg0XLUDlKvTC1CCLRwmu6jDlkzyKqh9W8557SbFWqYbX2QSs2dTVzO2mj0fCb3PpZGB2/s1600/2019to2020.png"></a></div>
2019年はお世話になりました。<br>
2020年もひきつづき<a href="https://twitter.com/bc_rikko" target="_blank">ダーシノ</a>、当ブログともによろしくお願いします。<br>
<br>
<b>過去の記事</b>
<br>
<ul>
<li><a href="https://kuroeveryday.blogspot.com/2014/01/2013to2014.html">2013年活動報告と2014年行動指針</a></li>
<li><a href="https://kuroeveryday.blogspot.com/2015/01/2014to2015.html">2014年活動報告と2015年行動指針</a></li>
<li><a href="https://kuroeveryday.blogspot.com/2016/01/2015to2016.html">2015年活動報告と2016年行動指針</a></li>
<li><a href="https://kuroeveryday.blogspot.com/2017/01/2016to2017.html">2016年活動報告と2017年行動指針</a></li>
<li><a href="https://kuroeveryday.blogspot.com/2018/01/2017to2018.html">2017年活動報告と2018年行動指針</a></li>
<li><a href="https://kuroeveryday.blogspot.com/2019/01/2018to2019.html">2018年活動報告と2019年行動指針</a></li>
</ul>
<br>
<a href="https://kuroeveryday.blogspot.com/2020/01/2019to2020.html#more">続きを読む »</a>B.C.Rikkohttp://www.blogger.com/profile/16356457343247420696noreply@blogger.com0tag:blogger.com,1999:blog-714625945410569535.post-5809894817730472882019-12-17T07:00:00.000+09:002019-12-17T18:24:50.563+09:00rsyncの悲劇 〜本番環境を消し飛ばす前に覚えておきたいこと〜<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGVnup3RFffPF-8-b64QQgP-Gkh39PjVhEdkYImjyYt-ylipcA-8hxwjN4oHtEdwJtnZfBPYDEGrr3DB4YZaFunu-nV84lr7ZowKMy58cI823IpXLX0u4cIiqPlaFMXVP-Zoex8aHubqmB/s1600/good-bye-production-environment.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="900" data-original-width="1440" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGVnup3RFffPF-8-b64QQgP-Gkh39PjVhEdkYImjyYt-ylipcA-8hxwjN4oHtEdwJtnZfBPYDEGrr3DB4YZaFunu-nV84lr7ZowKMy58cI823IpXLX0u4cIiqPlaFMXVP-Zoex8aHubqmB/s640/good-bye-production-environment.png" width="640"></a></div>
<hr>
この記事は<a href="https://qiita.com/advent-calendar/2019/yarakashi-production" rel="nofollow" target="_blank">本番環境でやらかしちゃった人 Advent Calendar 2019</a> 17日目の記事です。<br>
<hr>
<br>
はじめまして、<a href="https://twitter.com/bc_rikko" target="_blank">ダーシノ(@bc_rikko)</a>です。<br>
<br>
突然ですが、懺悔します。<br>
私は転職して10ヶ月で2回も本番環境をぶっ飛ばしました。お客様をはじめ、関係各位には多大なるご迷惑をおかけしたことを、ここでお詫び申し上げます。<br>
<br>
<br>
1回目は2015年11月27日、入社27日目のこと。<br>
gitの設定ミスにより壊れたブランチをmasterにforce pushしてしまい、CIが流れて本番環境が壊れた。原因は<code>push.default</code>なのだが、詳しくはすでに記事を書いているのでそちらを読んでほしい。
<iframe frameborder="0" height="150" scrolling="no" src="https://hatenablog-parts.com/embed?url=https://kuroeveryday.blogspot.com/2015/12/git-push-default.html" style="display: block; height: 155px; margin: 0 0 1.7rem; max-width: 100%; width: 100%;" title="初心者必見!Gitでやらかす前に設定しておきたいpush.default | Black Everyday Company" width="300"></iframe>
<br>
2回目は翌年9月1日、入社してちょうど10ヶ月たった日のことだ。<br>
またしても本番環境をぶっ飛ばした。しかも、前回より盛大に……。<br>
<br>
タイトルにもあるようにrsyncコマンドが原因だ。<br>
当記事では、この「rsyncの悲劇」を二度と繰り返さないために原因・対策を共有したい。<br>
<br>
<br>
勘の鋭い方は「rsync」と「本番環境でやらかしちゃった」という組み合わせでオチにお気づきと思いますが、しばらくの間お付き合いください。<br>
<a href="https://kuroeveryday.blogspot.com/2019/12/how-to-delete-all-in-the-production-environment.html#more">続きを読む »</a>B.C.Rikkohttp://www.blogger.com/profile/16356457343247420696noreply@blogger.com2tag:blogger.com,1999:blog-714625945410569535.post-13924755361489573492019-12-09T07:30:00.000+09:002019-12-09T08:33:01.263+09:00CSS Custom Propertiesと良好な関係を築くための戦略<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrh255wjSMYo3WaZp85tw_yQxnpK5uSUfftQ7kUf2fGEDUhLOkqGoGMAXDErq-mll7RIBzIJsdJnZuTZoCM8crxRvw0SFwSJqr3yjJdhHTeE1_VV5Jm1jy_Z9qmzqoYtQfbCWLThurM5h4/s1600/shake-hands-with-css.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="400" data-original-width="640" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrh255wjSMYo3WaZp85tw_yQxnpK5uSUfftQ7kUf2fGEDUhLOkqGoGMAXDErq-mll7RIBzIJsdJnZuTZoCM8crxRvw0SFwSJqr3yjJdhHTeE1_VV5Jm1jy_Z9qmzqoYtQfbCWLThurM5h4/s1600/shake-hands-with-css.png"></a></div>
<hr>
この記事は<a href="https://qiita.com/advent-calendar/2019/css" rel="nofollow" target="_blank">CSS Advent Calendar 2019</a> 9日目の記事です。
<br>
<hr>
<a href="https://developer.mozilla.org/ja/docs/Web/CSS/--*" rel="nofollow" target="_blank">CSS Custom Properties</a>、ときにCSS変数やCSS Variablesとも呼ばれているプロパティがある。昨今のダークモード等のテーマ変更の需要の高まりとともに、多くのウェブサイトで使われるようになった。<br>
<br>
たとえば、CSS Custom Propertiesを使うと以下のようにCSSだけでOSのテーマを判別し、ダークモード表示ができる。<br>
<pre><code class="css">/* Default / Light Theme */
:root {
--color: black;
--background-color: white;
}
/* Dark Theme */
@media (prefers-color-scheme: dark) {
:root {
--color: white;
--background-color: black;
}
}
body {
color: var(--color);
background-color: var(--background-color);
}</code></pre>
<br>
他にも以下のようにスタイルの管理がしやすくなる。<br>
<pre><code class="css">/* Before */
a {
color: #0000EE;
}
a:visited {
color: #800080;
}
a:active {
color: #FF0000;
}
a.grayscale {
color: LightSlateGray;
}
a.grayscale:visited {
color: Silver;
}
a.grayscale:active {
color: LightSteelBlue;
}</code></pre>
<pre><code class="css">/* After */
a {
--link: #0000EE;
--link-visited: #800080;
--link-active: #FF0000;
}
a.grayscale {
--link: LightSlateGray;
--link-visited: Silver;
--link-active: LightSteelBlue;
}
a {
color: var(--link);
}
a:visited {
color: var(--link-visited);
}
a:active {
color: var(--link-active);
}</code></pre>
参考: <a href="https://css-tricks.com/patterns-for-practical-css-custom-properties-use/#article-header-id-4" rel="nofollow" target="_blank">Patterns for Practical CSS Custom Properties Use | CSS Tricks</a><br>
<br>
<br>
<b>すごい、、、すごく便利そう!!</b><br>
<br>
<br>
しかし、一見便利そうなCSS Custom Propertiesも<b>使い方によっては闇を生み出してしまう。</b><br>
ということで、当記事では<a href="https://github.com/nostalgic-css/NES.css" target="_blank"><b>NES.css(CSSフレームワーク)</b></a>開発で得た<a href="https://github.com/nostalgic-css/NES.css/issues/331" target="_blank"><b><知見></b></a>を元に、CSS Custom Propertiesのメリット・デメリットを理解し良好な関係を築く方法を紹介する。<br>
<br>
<a href="https://kuroeveryday.blogspot.com/2019/12/shake-hands-with-css-custom-properties.html#more">続きを読む »</a>B.C.Rikkohttp://www.blogger.com/profile/16356457343247420696noreply@blogger.com0tag:blogger.com,1999:blog-714625945410569535.post-84077094193083460502019-09-12T08:30:00.000+09:002019-09-12T14:02:52.131+09:00GitHub Actionsの使い方まとめ<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYOJeLtuM_npp49TW6m15PTZJze3Fm_6NerccfvlYhSfhYwDR3GEyae1ibHOwdd8Aeap6uEiJS9-HUn7cW8904pnKyh_R8dkhiCnR5lXB51iKNX8RbwKGdvC4a3WxQ1xbEvuHAXBr-SVxr/s1600/githubactions.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="358" data-original-width="640" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYOJeLtuM_npp49TW6m15PTZJze3Fm_6NerccfvlYhSfhYwDR3GEyae1ibHOwdd8Aeap6uEiJS9-HUn7cW8904pnKyh_R8dkhiCnR5lXB51iKNX8RbwKGdvC4a3WxQ1xbEvuHAXBr-SVxr/s1600/githubactions.jpg"></a></div>
9月上旬にGitHubから「You're in! Get started with GitHub Actions beta」というメールが届いた。どうやら以前した利用申請が通り、個人アカウントでGitHub Actionsのベータ版が利用できるようになったらしい。<br>
<br>
ちょうどJSライブラリを開発していたので、そのリポジトリでGitHub Actionsを使ってCI(継続的インテグレーション)の設定をしてみたので、その使い方や解説をする。<br>
<br>
<br>
<h3 class="selector02">
GitHub Actionsとは
</h3>
<br>
一言でいうと、GitHub上で完結するCI/CDサービス。<br>
いままでCircleCIやTravisCI、Drone CIなど外部のサービスを使っていたところを、GitHub上で実行できるサービスだ。<br>
<br>
昔はTerraformなどで使われているHCL(HashiCorp Configration Language)を用いて設定ファイルを書いていたらしいが、2019年9月30日に廃止されYAML構文に一本化される。そのため、CircleCIやTravisCIなどからも比較的簡単に移行することができる。<br>
<br>
詳しくは公式ドキュメント参照。<br>
▶ <a href="https://help.github.com/ja/articles/about-github-actions#migrating-github-actions-from-hcl-to-yaml-syntax" rel="nofollow" target="_blank">GitHub Actionsについて - GitHub ヘルプ</a><br>
<br>
<a href="https://kuroeveryday.blogspot.com/2019/09/how-to-use-github-actions.html#more">続きを読む »</a>B.C.Rikkohttp://www.blogger.com/profile/16356457343247420696noreply@blogger.com0tag:blogger.com,1999:blog-714625945410569535.post-79257327584425139452019-09-10T08:30:00.000+09:002019-09-10T08:30:01.566+09:00TypeScriptの似ているようで違うvoid/never型とany/unknown型の比較<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7viuW2deniDqhpsPgjLBUnqXuw6R2ifxntch5C3wT2EZrNIAs9tNGolEYP7YyUIHHT2XaXR8-p-vCyTwL7ntLALXKyBt-FxrwZ3MhAg9Q7O8DF4ICvqrJGdznjyKDHQWFaeu-WDzqv8lI/s1600/difference-between-void-and-never-any-and-unknown.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="358" data-original-width="640" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7viuW2deniDqhpsPgjLBUnqXuw6R2ifxntch5C3wT2EZrNIAs9tNGolEYP7YyUIHHT2XaXR8-p-vCyTwL7ntLALXKyBt-FxrwZ3MhAg9Q7O8DF4ICvqrJGdznjyKDHQWFaeu-WDzqv8lI/s1600/difference-between-void-and-never-any-and-unknown.jpg"></a></div>
TypeScriptは業務で使っているが、脳内バージョンは2.x系で最新情報を追ってこなかった。その弊害として、never型とunknown型の意味がわからず、void/anyと何が違うの?状態だった。<br>
<br>
そこで当記事ではvoidとnever、anyとunknownのそれぞれの型の特徴を一言、二言で表し比較する。<br>
<a href="https://kuroeveryday.blogspot.com/2019/09/difference-between-void-and-never-any-and-unknown.html#more">続きを読む »</a>B.C.Rikkohttp://www.blogger.com/profile/16356457343247420696noreply@blogger.com0tag:blogger.com,1999:blog-714625945410569535.post-47112893658982802462019-08-19T08:30:00.000+09:002019-08-19T08:38:00.295+09:00情報特化型ツイートがフォロワー数に及ぼす影響と共感型ツイートの展望<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguFJ2eU1ybFn2xivofWO82dhQeliSPpHZ1sOR3f-2pfThFs8upze3ERZPQGjVXTfOnB3Q5p1jgt_veVwk7bdDq6uabbSmXwWsw2_r8eASno1V-cUs8U28d4Wax7_cXZdj9wNfgVAmc0P7c/s1600/how-to-get-more-followers-on-twitter.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="358" data-original-width="640" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguFJ2eU1ybFn2xivofWO82dhQeliSPpHZ1sOR3f-2pfThFs8upze3ERZPQGjVXTfOnB3Q5p1jgt_veVwk7bdDq6uabbSmXwWsw2_r8eASno1V-cUs8U28d4Wax7_cXZdj9wNfgVAmc0P7c/s1600/how-to-get-more-followers-on-twitter.jpg"></a></div>
<h3 class="selector02">
概要</h3>
<br>
夏休みの自由研究として本研究を行った。<br>
先行研究(※1)よりTwitterのフォロワー数を増やす初期段階は、ユーザーに価値(情報)を提供するツイート(以下、「Information特化型ツイート」という)が効果的だと言われている。本研究では、2019年8月12日〜15日の4日間、Information特化型ツイートをすることでフォロワー数がどれくらい増加するか実験を行った。<br>
<br>
<br>
<h3 class="selector02">
第1章 はじめに</h3>
<h4 class="selector01">
1.1. 研究背景
</h4>
「何者かになりたい!」誰もが一度は考えたことがあるだろう。SNS映えやバイトテロ、炎上商法と呼ばれるSNS上で注目を浴びるための行動からも言えるように、自己顕示欲は暴走しやすい側面を持っており問題視されている。<br>
たしかにこれらの行為は一時的に注目を浴びることができるかもしれないが、「炎上行為をした」という印象を変えるのは困難だ。そこで本研究ではSNS上で正攻法で信頼を勝ち取りつつ、影響力を高めフォロワー数を増やすにはInformation特化型ツイートは有用かを検証した。<br>
<a href="https://kuroeveryday.blogspot.com/2019/08/how-to-get-more-followers-on-twitter.html#more">続きを読む »</a>B.C.Rikkohttp://www.blogger.com/profile/16356457343247420696noreply@blogger.com0tag:blogger.com,1999:blog-714625945410569535.post-83706052264992388882019-07-31T08:30:00.000+09:002019-07-31T13:17:34.285+09:00本気でCSS芸やりたい人のためのbox-shadow講座<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYzL1Z-3N-tp5trMoB4YdULYHhLA7O5KFxXT5NJ4XxALwmn2KsUwoIILKpTiwxOHUdI_aZgjC3CUdDi_stq04NeUUUVaZNrpfUa3ntI9HaI29cDN7wzAByj9HSZ6QD1rSCWnll2SH_9mMe/s1600/%25E6%259C%25AC%25E6%25B0%2597%25E3%2581%25A6%25E3%2582%2599CSS%25E8%258A%25B8%25E3%2582%2584%25E3%2582%258A%25E3%2581%259F%25E3%2581%2584%25E4%25BA%25BA%25E3%2581%25AE%25E3%2581%259F%25E3%2582%2581%25E3%2581%25AEbox-shadow%25E8%25AC%259B%25E5%25BA%25A7.001.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="756" data-original-width="1344" height="360" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYzL1Z-3N-tp5trMoB4YdULYHhLA7O5KFxXT5NJ4XxALwmn2KsUwoIILKpTiwxOHUdI_aZgjC3CUdDi_stq04NeUUUVaZNrpfUa3ntI9HaI29cDN7wzAByj9HSZ6QD1rSCWnll2SH_9mMe/s640/%25E6%259C%25AC%25E6%25B0%2597%25E3%2581%25A6%25E3%2582%2599CSS%25E8%258A%25B8%25E3%2582%2584%25E3%2582%258A%25E3%2581%259F%25E3%2581%2584%25E4%25BA%25BA%25E3%2581%25AE%25E3%2581%259F%25E3%2582%2581%25E3%2581%25AEbox-shadow%25E8%25AC%259B%25E5%25BA%25A7.001.jpg" width="640"></a></div>
2019年7月24日に<a href="https://uit.connpass.com/event/138084/" rel="nofollow" target="_blank">UIT meetup vol.7 - 集まれ!(タブン)実務では使わないフロントエンド芸発表会</a>に、CSS芸人として登壇した。<br>
<br>
<a href="https://uit.connpass.com/" rel="nofollow" target="_blank">UIT meetup</a>とは、ReactやVue.js、BFFなどのフロントエンド技術を扱った至ってマジメなイベントだ。そんな中、主催者から「次はテーマをかえてフロントエンド芸人を集めたイベントがしたい」とお誘いがあり、CSS芸人として参戦してきた。<br>
<br>
<br>
当記事は、UIT meetupで発表した内容をスライドと共に文字起こししたものである。<br>
<br>
<script async="" class="speakerdeck-embed" data-id="250d4081448f4eaea9e3b48983a67bfa" data-ratio="1.77777777777778" src="//speakerdeck.com/assets/embed.js"></script>
※ 当記事には多くの画像が貼られているため、読み込みに時間がかかる可能性があります。<br>
<br>
公式レポート記事: <a href="https://engineering.linecorp.com/ja/blog/uit-meetup-vol7/">https://engineering.linecorp.com/ja/blog/uit-meetup-vol7/</a><br>
<a href="https://kuroeveryday.blogspot.com/2019/07/mastering-box-shadow.html#more">続きを読む »</a>B.C.Rikkohttp://www.blogger.com/profile/16356457343247420696noreply@blogger.com0tag:blogger.com,1999:blog-714625945410569535.post-18824066577695258772019-04-16T08:00:00.000+09:002019-04-16T08:03:55.109+09:00Canvas上のオブジェクトがクリックされたか検知する<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzoR_b5Rm3NNcAGVtSKJ4fiI_ZDKejhkWWl55y3DqMQ80Qg0Q97hl5R5NZ-Lmg82bUU-q1djcJ-OXgn35mi_qEVKHUn_imzoPWJ3JHyGsfn2rSmh9HgWOZm8MnpQLd6oWcpjYxn5K5L45A/s1600/click-object.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="433" data-original-width="616" height="448" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzoR_b5Rm3NNcAGVtSKJ4fiI_ZDKejhkWWl55y3DqMQ80Qg0Q97hl5R5NZ-Lmg82bUU-q1djcJ-OXgn35mi_qEVKHUn_imzoPWJ3JHyGsfn2rSmh9HgWOZm8MnpQLd6oWcpjYxn5K5L45A/s640/click-object.gif" width="640"></a></div>
ブラウザゲームなどを開発するとき、Canvas上に描画されたオブジェクト(図形など)をクリックしたいときがある。ただ<code>EventTarget.addEventListener('click', listener)</code>のように簡単に処理を追加できるわけではない。<br>
<br>
そこで当記事では、「Canvas上にある四角と丸のオブジェクトをクリックしたら色がかわる」というサンプルを元に、オブジェクトのクリック判定やクリックされたときに処理を実行する方法について解説する。<br>
<br>
<a href="https://kuroeveryday.blogspot.com/2019/04/how-to-detect-click-on-shape-on-canvas.html#more">続きを読む »</a>B.C.Rikkohttp://www.blogger.com/profile/16356457343247420696noreply@blogger.com0tag:blogger.com,1999:blog-714625945410569535.post-13363306629626731652019-04-15T08:00:00.000+09:002019-04-15T08:03:55.519+09:00Nuxt.js+TypeScriptでプラグインの型定義を作成する<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkXhHSn0xZJQCH2CrPZ797FucbejwDFCpud91PS-Yu1HpUaeFCpf11Ngz9VEwtVtU38rAMazJIT4rJJoXaG_Ap6HzXMf_806Es2-MLNbgIu-YsGwmgTuRstpqSKRgQo0fIh3M5alqeGJea/s1600/nuxt-typescript.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="359" data-original-width="640" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkXhHSn0xZJQCH2CrPZ797FucbejwDFCpud91PS-Yu1HpUaeFCpf11Ngz9VEwtVtU38rAMazJIT4rJJoXaG_Ap6HzXMf_806Es2-MLNbgIu-YsGwmgTuRstpqSKRgQo0fIh3M5alqeGJea/s1600/nuxt-typescript.png"></a></div>
Nuxt.jsには簡単にプラグインを追加できる仕組みがある。createdやmothodsなどを拡張するmixinタイプや、ElementUIなどコンポーネントタイプ、vueインスタンスにコンテキストを注入してthisを拡張するタイプなどがあるのだが、TypeScriptと併用すると<code>Property $logger does not exist on type 'Store<RootState>'</code>のようなエラーが発生する。<br>
<br>
今回はvueインスタンスを拡張し、vueファイル(SFC)とstore内で<code>this.$xxx</code>にアクセスするための型定義の作り方について紹介する。<br>
<a href="https://kuroeveryday.blogspot.com/2019/04/how-to-define-type-of-plugins-on-nuxtjs.html#more">続きを読む »</a>B.C.Rikkohttp://www.blogger.com/profile/16356457343247420696noreply@blogger.com0tag:blogger.com,1999:blog-714625945410569535.post-87083570789063253382019-03-27T08:00:00.000+09:002019-03-27T08:00:10.755+09:00手を動かして学ぶ Redis 入門<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh18KWv-zWOaAx1xv3z5Vw7OFkkR-crCJ7n99EWUtVqmWtNGfcVvPbAogpqsD66bRWpJwRzRFXZ10p5ckranYMWDcbMIqNMWMvAfaf9pY2uejbb-hHa_LCJwwELFLxnz8QOlxC3uza7iLky/s1600/redis.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="283" data-original-width="640" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh18KWv-zWOaAx1xv3z5Vw7OFkkR-crCJ7n99EWUtVqmWtNGfcVvPbAogpqsD66bRWpJwRzRFXZ10p5ckranYMWDcbMIqNMWMvAfaf9pY2uejbb-hHa_LCJwwELFLxnz8QOlxC3uza7iLky/s1600/redis.png"></a></div>
会社でRedisを使っているサービスがあり、そのメンテナーになった。RedisがIn-Memory Databaseということは知っていたのだが、その他の特徴や操作方法などまったくわからないので、チュートリアルを中心に手を動かしながら学んだことをまとめていく。またNode.jsからRedisにアクセスする方法もあわせて紹介する。<br>
<br>
<br>
<h3 class="selector02">
Redis の特徴</h3>
<br>
Redisはメモリー上にデータを保存するKey-Value型のNoSQLデータベースのひとつ。用途はデータベースだけにとどまらず、キャッシュやメッセージブローカーとしても利用される。<br>
<a href="https://kuroeveryday.blogspot.com/2019/03/redis-get-started-quickly.html#more">続きを読む »</a>B.C.Rikkohttp://www.blogger.com/profile/16356457343247420696noreply@blogger.com0tag:blogger.com,1999:blog-714625945410569535.post-76786306816213797582019-03-26T08:00:00.000+09:002019-03-26T08:00:01.684+09:00details要素を使ってHTML/CSSのみでドロップダウンメニューを実装する<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXZm-XCH-4c-cH5HqgYDeZLPeGfodRz6CyJbDXyyqvy0JNggynXEG8ro9CPriol5W6LSgYJUwYOfPqHyWF2jOprXEf2rRhnnt688ufJfkgv7HFgG3TcdZUONIBXfIpEl2K5AD_XWS-WkzH/s1600/details.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="275" data-original-width="640" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXZm-XCH-4c-cH5HqgYDeZLPeGfodRz6CyJbDXyyqvy0JNggynXEG8ro9CPriol5W6LSgYJUwYOfPqHyWF2jOprXEf2rRhnnt688ufJfkgv7HFgG3TcdZUONIBXfIpEl2K5AD_XWS-WkzH/s1600/details.png"></a></div>
HTML5からdetails要素が追加された。この要素は折りたたみ可能なウィジェットを作成するもので、open状態になったときだけ子要素(summary要素など)を表示することができる。<br>
このdetails要素を使えばHTMLだけでアコーディオンメニューが簡単につくれるようになる。<br>
<br>
今回はこのdetails要素に手を加え、JavaScriptを使わず、HTML/CSSのみでドロップダウンメニューを実装する方法を紹介する。<br>
<br>
<div style="text-align: center;">
<b>完成予想図</b></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEif54lD4A6L_3ZM502boQy2Pe2LAqgmXjsP_FcIiRCRiPgYrmnk-XjF3CIG6CXin-5vN8LhNmSLzPhgT12p_9luqK_5g47_M3k9461pknENlmAS6dVnstWoMfrJYUpknMZ1x4c1GxtedX3e/s1600/dropdown.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="185" data-original-width="429" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEif54lD4A6L_3ZM502boQy2Pe2LAqgmXjsP_FcIiRCRiPgYrmnk-XjF3CIG6CXin-5vN8LhNmSLzPhgT12p_9luqK_5g47_M3k9461pknENlmAS6dVnstWoMfrJYUpknMZ1x4c1GxtedX3e/s1600/dropdown.gif"></a></div>
<a href="https://kuroeveryday.blogspot.com/2019/03/dropdown-men-without-javascript-using-details-element.html#more">続きを読む »</a>B.C.Rikkohttp://www.blogger.com/profile/16356457343247420696noreply@blogger.com0tag:blogger.com,1999:blog-714625945410569535.post-75936439514540292942019-03-19T08:00:00.000+09:002019-03-19T08:00:10.652+09:00Transifexとvue-i18nで国際化対応のコラボレーション環境を構築する<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvI6K91diWyGo225BKJcIVqFO9Chdwn1WJmKhKYx7eeGp6nsa1FSiZsl9DwDX3OHoBZwliWjK8SpGJf8z-QrTHrZM7N8qre4crjFMXiPxnIcYtPqPXTzdFRW7qwIF-nzQrRCF2lwjYKACu/s1600/i18n.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="331" data-original-width="640" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvI6K91diWyGo225BKJcIVqFO9Chdwn1WJmKhKYx7eeGp6nsa1FSiZsl9DwDX3OHoBZwliWjK8SpGJf8z-QrTHrZM7N8qre4crjFMXiPxnIcYtPqPXTzdFRW7qwIF-nzQrRCF2lwjYKACu/s1600/i18n.png"></a></div>
国内向けのサービスであっても在日外国人が使うこともある。そういった背景から昨今、国際化対応(多言語化対応)の重要度が増している。とはいえフロントエンドエンジニアがウェブアプリケーションを開発しながらメッセージ翻訳を行うには限界がある。できれば翻訳作業はローカリゼーションチームに任せたい。<br>
<br>
しかし、ローカリゼーションチーム(非エンジニア)にgitを使って言語ファイルをダウンロード、JSONやYamlファイルを見ながら翻訳、終わったらPull Requestを作ってもらうというのは少し酷だろう。もちろんJSON→Excel→翻訳→JSONなんてことはしたくない。<br>
<br>
そこで当記事ではTransifexとvue-i18nを使って、国際化対応におけるフロントエンドチームとローカリゼーションチームのコラボレーション環境の構築方法について紹介する。あわせて実運用で得たノウハウを共有しようと思う。<br>
また、当記事ではNuxt.jsをメインに紹介するが、Vue.jsでも同様のことはできるので読み替えてほしい。<br>
<br>
環境は以下の通り。<br>
<ul>
<li>macOS Mojave</li>
<li>Nuxt.js@2.4.5 / Vue.js@2.6.8</li>
<li>vue-i18n@8.8.2</li>
<li>transifex-client@0.13.6</li>
</ul>
<a href="https://kuroeveryday.blogspot.com/2019/03/using-vue-i18n-and-transifex-for-internationalization-collaboration.html#more">続きを読む »</a>B.C.Rikkohttp://www.blogger.com/profile/16356457343247420696noreply@blogger.com1tag:blogger.com,1999:blog-714625945410569535.post-58296378026723320062019-03-15T08:00:00.000+09:002019-03-15T08:00:08.176+09:00Nginxのlocationとproxy_passの末尾スラッシュによる挙動の違いを理解する<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgynxcxYy7KV3TPPF5XoPV6XFhyphenhyphenfI3TiTKYAb6YxiIvthafVWBoy5rHAkWc4HtnRweKqGcMkUgYUi1L4jUgKW8GsaHWen6xVHInsOpucbIX5m9A0znD6CEnSoAZa3GisS-2P__ZJWW1jSRB/s1600/nginx-trailing-slash.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="315" data-original-width="640" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgynxcxYy7KV3TPPF5XoPV6XFhyphenhyphenfI3TiTKYAb6YxiIvthafVWBoy5rHAkWc4HtnRweKqGcMkUgYUi1L4jUgKW8GsaHWen6xVHInsOpucbIX5m9A0znD6CEnSoAZa3GisS-2P__ZJWW1jSRB/s1600/nginx-trailing-slash.png"></a></div>
Nginxでリバースプロキシの設定をするとき、いつもlocationとproxy_passの末尾スラッシュ(Trailing Slash、トレイリングスラッシュ)による挙動の違いを忘れてしまう。ということで、locationとproxy_passのURIに末尾スラッシュをつけた場合、つけない場合でどのような挙動になるか実験した。その結果についてまとめる。<br>
<br>
Nginxのリバースプロキシ設定は以下の4パターンになる。<br>
<div class="table-wrapper">
<table border="1" class="table-01" style="width: 100%px;">
<tbody>
<tr valign="middle"><th>パターン</th><th>location</th><th>proxy_pass</th></tr>
<tr valign="middle"><td>1</td><td>/path</td><td>/reverse-path</td></tr>
<tr valign="middle"><td>2</td><td>/path</td><td>/reverse-path/</td></tr>
<tr valign="middle"><td>3</td><td>/path/</td><td>/reverse-path</td></tr>
<tr valign="middle"><td>4</td><td>/path/</td><td>/reverse-path/</td></tr>
</tbody></table>
</div>
<br>
<br>
これに対し、4パターンのリクエストを投げて実験を行った。<br>
<ol>
<li>http://example.com<b>/path</b></li>
<li>http://example.com<b>/path/</b></li>
<li>http://example.com<b>/path-test</b></li>
<li>http://example.com<b>/path/test</b></li>
</ol>
<a href="https://kuroeveryday.blogspot.com/2019/03/effect-of-trailing-slash-on-nginx-reverse-proxy.html#more">続きを読む »</a>B.C.Rikkohttp://www.blogger.com/profile/16356457343247420696noreply@blogger.com0tag:blogger.com,1999:blog-714625945410569535.post-86888812632465870332019-02-25T08:30:00.000+09:002019-02-26T13:10:11.419+09:00ドメイン駆動設計の用語と解説(DDD入門ガイド)中〜大規模アプリケーションを開発するノウハウを持っておらず、どのようにシステム設計するのが良いのかわからなかった。そのため、1週間ほどドメイン駆動設計(Domain-Driven Design)について勉強した。<br>
<br>
当記事では、勉強中に得たドメイン駆動設計をわかった気になれるのに必要な用語のまとめや、実装でどのように使われるかをまとめる。<br>
<br>
筆者は「実践ドメイン駆動設計」を読んだわけでも、完全に理解したわけでもない。しかし、雰囲気を掴むための情報はわかっている状況なので、間違っている箇所があったら指摘していただきたい。<br>
<br>
<br>
<h3 class="selector02">
ドメイン駆動設計とは?
</h3>
<br>
ドメイン駆動設計(DDD、Domain-Driven Design)を一言で説明すると<b>「現実世界の業務をドメインモデルに詰め込んでソフトウェアに深く反映させる設計手法」</b>だ。<br>
<br>
詳しい説明は後述するが、ドメイン駆動設計の全体図は下図のような感じだ。<br>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9W5Ej563kqD_dP4P509oiQPpBIBxu-mr0bDbteFuGRpydYyxaOKS7hF7SM6cHa9MTflcYTxSCDi_8_6ltgND_GzJv2R2rGw8T7Kl9uMnrQfxWyPcPC9SCqt4YRlVCou4G4lfBlxkalsbj/s1600/ddd.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="980" data-original-width="1270" height="492" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9W5Ej563kqD_dP4P509oiQPpBIBxu-mr0bDbteFuGRpydYyxaOKS7hF7SM6cHa9MTflcYTxSCDi_8_6ltgND_GzJv2R2rGw8T7Kl9uMnrQfxWyPcPC9SCqt4YRlVCou4G4lfBlxkalsbj/s640/ddd.png" width="640"></a></div>
<a href="https://kuroeveryday.blogspot.com/2019/02/learn-domain-driven-design-quickly.html#more">続きを読む »</a>B.C.Rikkohttp://www.blogger.com/profile/16356457343247420696noreply@blogger.com0tag:blogger.com,1999:blog-714625945410569535.post-4099801039653766192019-02-21T08:00:00.000+09:002019-02-21T08:17:38.866+09:00transform: scale()で要素が重なってしまったときのmarginのとり方<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLDoc-XU9qrkeOdVG8ORezw14iBgrWrrLcwXyzYlokQjZ_goCKlq1fmQgRNu0TppSVWZxF7iQZxUZ0TnJm_oDSQ3bsverQUcq9SIhZa5M7SduoJnKi0Ionrk2mbxX25tjvM0e7kDLAsRWe/s1600/margin-around-elements.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="355" data-original-width="640" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLDoc-XU9qrkeOdVG8ORezw14iBgrWrrLcwXyzYlokQjZ_goCKlq1fmQgRNu0TppSVWZxF7iQZxUZ0TnJm_oDSQ3bsverQUcq9SIhZa5M7SduoJnKi0Ionrk2mbxX25tjvM0e7kDLAsRWe/s1600/margin-around-elements.png"></a></div>
Chromeでは10px未満のときに<code>font-size</code>が適用されなくなる事象が発生する。<br>
※ ユーザ環境設定に依存するのですべてのChromeではない<br>
<br>
そのときの対処法として<code>transform: scale()</code>を使うことがある。しかし、そこには落とし穴がある。下図のように並べた要素のボックスサイズが拡大/縮小されずに要素が重なってしまうのだ。<br>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhctJSQcqGHRvj4DYcI8z7L4FzTo6Uw4mtH8yXtkgI-LxhKFnFjGfCUDjhBg5lolHi_08JOMwguCV-ETIqufRFA8tiYHBBYGbfluFcUJP6ioMDsVggjMTAu_9dsW0ZaZv4kggGbJq5zu8zC/s1600/scale.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="351" data-original-width="586" height="382" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhctJSQcqGHRvj4DYcI8z7L4FzTo6Uw4mtH8yXtkgI-LxhKFnFjGfCUDjhBg5lolHi_08JOMwguCV-ETIqufRFA8tiYHBBYGbfluFcUJP6ioMDsVggjMTAu_9dsW0ZaZv4kggGbJq5zu8zC/s640/scale.png" width="640"></a></div>
<br>
対処法は以下のとおり。<br>
<a href="https://kuroeveryday.blogspot.com/2019/02/margin-of-elements-resized-by-transform.html#more">続きを読む »</a>B.C.Rikkohttp://www.blogger.com/profile/16356457343247420696noreply@blogger.com0tag:blogger.com,1999:blog-714625945410569535.post-69686436251928327382019-02-18T08:00:00.000+09:002019-02-18T08:00:03.647+09:00指定範囲からランダムで重複なしのn個の値を取得する(JavaScript)<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0aRRy3O73Nm0BgDzIYEaN8Upd2-7i3Dwj6yw1VVDAZjaYBgDCYtWOcj-T7ChzNxmZUcWKv8OxSxr7QdgJl2wjS4gU4ndEonqCqauaKU8LjgXNAa0_qaEEmiKpACr3buyE5eW9NL-lzzYI/s1600/grouping.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="426" data-original-width="640" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0aRRy3O73Nm0BgDzIYEaN8Upd2-7i3Dwj6yw1VVDAZjaYBgDCYtWOcj-T7ChzNxmZUcWKv8OxSxr7QdgJl2wjS4gU4ndEonqCqauaKU8LjgXNAa0_qaEEmiKpACr3buyE5eW9NL-lzzYI/s1600/grouping.png"></a></div>
JavaScriptで指定範囲からランダムな値を任意の個数取得する方法を通常とワンライナーの2種類紹介する。たとえば、「1〜100からランダムかつ重複なく50個の値を取得する」ようなことだ。<br>
<br>
<br>
<h3 class="selector02">
指定範囲からランダムで一意なn個の値を取得する
</h3>
<br>
<pre><code class="js">const pickN = (min, max, n) => {
const list = new Array(max-min+1).fill().map((_, i) => i + min);
const ret = [];
while(n--) {
const rand = Math.floor(Math.random() * (list.length + 1)) - 1;
ret.push(...list.splice(rand, 1))
}
return ret;
}
const list1 = pickN(1, 100, 30);
console.log(list1);
// [47, 69, 19, 73, 27, 35, 68, 21, 88, 41, 86, 14, 50, 42, 94, 26, 2, 43, 83, 76, 57, 31, 97, 45, 84, 99, 46, 22, 9, 81]
const list2 = pickN(500, 800, 10);
console.log(list2);
// [714, 557, 523, 760, 750, 677, 632, 566, 798, 587]</code></pre>
<br>
<code>new Array(max - min + 1).fill().map((_, i) => i + min)</code>は、min〜mixまでの値が入った配列を生成している。そして、<code>ret.push(...list.splice(rand, 1))</code>でさきほどの配列からランダムな位置の1つの値を取得し、結果用の配列に追加している。<br>
<br>
<a href="https://kuroeveryday.blogspot.com/2019/02/pickup-n-random-and-unique-values-from-any-range.html#more">続きを読む »</a>B.C.Rikkohttp://www.blogger.com/profile/16356457343247420696noreply@blogger.com0tag:blogger.com,1999:blog-714625945410569535.post-17107019932541374242019-02-12T08:00:00.000+09:002019-02-12T08:00:02.390+09:00position:stickyでスクロール可能なテーブルの行・列ヘッダを固定する<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWI9i0cLfzQO53ECVZC23zhydCwWd6F1c_yjGBqZlcPcUfXE8JzpRrwoOkJ-jHTfhf4ol1VbM98hTPvgbawT_J0L-I6e8LoEOSONXP_4gwp5NTmSQQjH7aZNDKEuSiTizn1UFV_eCZU-h2/s1600/fixed-title-headers.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="353" data-original-width="640" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWI9i0cLfzQO53ECVZC23zhydCwWd6F1c_yjGBqZlcPcUfXE8JzpRrwoOkJ-jHTfhf4ol1VbM98hTPvgbawT_J0L-I6e8LoEOSONXP_4gwp5NTmSQQjH7aZNDKEuSiTizn1UFV_eCZU-h2/s1600/fixed-title-headers.png"></a></div>
テーブルに表示する情報が多いとき、行ヘッダや列ヘッダを固定して表示したいときがある。そんなときには<code>position: sticky</code>を使うと簡単に実装できる。<br>
ただしIEは対応していないため、ポリフィルが必要となる。<br>
<br>
完成予想イメージは以下のとおり。<br>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHM6bSYprIQ11kNh48QqiALcrCfDojEqz7yb0QEqM3XR5go5MVSvxXsCuA2UDAoieINOoAsVVBRcd6dfS-Ub1VfgVdZsk8pP-Wv-nY8wYF-CR0OtZDT8Xm7RdkRQA-aNtTioNswZlmVLAU/s1600/sticky.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="309" data-original-width="510" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHM6bSYprIQ11kNh48QqiALcrCfDojEqz7yb0QEqM3XR5go5MVSvxXsCuA2UDAoieINOoAsVVBRcd6dfS-Ub1VfgVdZsk8pP-Wv-nY8wYF-CR0OtZDT8Xm7RdkRQA-aNtTioNswZlmVLAU/s1600/sticky.gif"></a></div>
<br>
<a href="https://kuroeveryday.blogspot.com/2019/02/fixed-table-headers-using-position-sticky.html#more">続きを読む »</a>B.C.Rikkohttp://www.blogger.com/profile/16356457343247420696noreply@blogger.com0tag:blogger.com,1999:blog-714625945410569535.post-49765385052427412392019-02-04T08:00:00.000+09:002019-02-04T08:00:03.559+09:00Firefoxでbackground-imageなどに指定したInline SVGで色が反映されない<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgL-S-DVxcjOpZYSrWEK-Z0JvTaWYJUI-gCJW0OfBAy_XfNHXwl0YJuYHnoQfy7Urio6RWbACdovUAljos5-uGONImqtWdXcaKyOR_z6rm0Zl3l3uFMNFCVpaUqqmYBTqboGYbPgD-gi_Cb/s1600/fetch-image.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="402" data-original-width="640" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgL-S-DVxcjOpZYSrWEK-Z0JvTaWYJUI-gCJW0OfBAy_XfNHXwl0YJuYHnoQfy7Urio6RWbACdovUAljos5-uGONImqtWdXcaKyOR_z6rm0Zl3l3uFMNFCVpaUqqmYBTqboGYbPgD-gi_Cb/s1600/fetch-image.png"></a></div>
NES.cssの開発をしているときに、特定のブラウザ(Firefox)だけSVGの色が反映されないバグを発見した。IE、Safari、Chromeでは再現しない。<br>
<iframe frameborder="0" height="150" scrolling="no" src="https://hatenablog-parts.com/embed?url=https://github.com/nostalgic-css/NES.css/issues/250" style="display: block; height: 155px; margin: 0 0 1.7rem; max-width: 100%; width: 100%;" title="Bug: Borders are not working in Firefox · Issue #250 · nostalgic-css/NES.css" width="300"></iframe>
<code>background-image</code>や<code>border-image</code>にInline SVGを指定したときに発生する。Inline SVGとは以下のように、<code>url("data:image/svg+xml;...")</code>で指定する方法を指す。<br>
<pre><code class="css">.item {
/* 色が反映されない */
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><path d='M10 10 H 80 V 80 H 10 L 10 10' fill='#ff0000'/></svg>");
}</code></pre>
<br>
<a href="https://kuroeveryday.blogspot.com/2019/02/inline-svg-does-not-work-on-firefox.html#more">続きを読む »</a>B.C.Rikkohttp://www.blogger.com/profile/16356457343247420696noreply@blogger.com0tag:blogger.com,1999:blog-714625945410569535.post-75910172794103333522019-01-25T08:00:00.000+09:002019-01-25T08:00:01.155+09:00Canvasで任意の色に近い色をカラーパレットから取得し画像を減色する<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgL-S-DVxcjOpZYSrWEK-Z0JvTaWYJUI-gCJW0OfBAy_XfNHXwl0YJuYHnoQfy7Urio6RWbACdovUAljos5-uGONImqtWdXcaKyOR_z6rm0Zl3l3uFMNFCVpaUqqmYBTqboGYbPgD-gi_Cb/s1600/fetch-image.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="402" data-original-width="640" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgL-S-DVxcjOpZYSrWEK-Z0JvTaWYJUI-gCJW0OfBAy_XfNHXwl0YJuYHnoQfy7Urio6RWbACdovUAljos5-uGONImqtWdXcaKyOR_z6rm0Zl3l3uFMNFCVpaUqqmYBTqboGYbPgD-gi_Cb/s1600/fetch-image.png"></a></div>
Canvasで表現できる色は、RGBがそれぞれ0〜255の値を取るので、256*256*256の16,777,216種類ある。(※Alphaについては考えない)<br>
そのまま表示すれば実物に近い画像になるのだが、減色したいときもある。(レトロ感をだす画像処理フィルターとか)<br>
<br>
そこで、任意の色に近い色をカラーパレットから取得し画像を減色する方法をまとめる。<br>
<a href="https://kuroeveryday.blogspot.com/2019/01/finding-nearest-colors-using-euclidean-distance.html#more">続きを読む »</a>B.C.Rikkohttp://www.blogger.com/profile/16356457343247420696noreply@blogger.com0tag:blogger.com,1999:blog-714625945410569535.post-22356760728388162162019-01-16T08:00:00.000+09:002019-01-16T08:00:07.758+09:00Canvasでカメラの映像に画像処理フィルターをかけて表示する方法<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQ-ui2iMlNCr-T73F-UJ52fQoDgUiVwgNssOeKHbETbRDXG3qw6RwK3aW_dDpAgYusmROGp927l5Z9sEKi6P6YBQ86hNfZJpYAB0q9Kvf5EqT7volf9ePtbbyCTKsSCr8FC9Lj_5G_-F3_/s1600/filters.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="611" data-original-width="640" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQ-ui2iMlNCr-T73F-UJ52fQoDgUiVwgNssOeKHbETbRDXG3qw6RwK3aW_dDpAgYusmROGp927l5Z9sEKi6P6YBQ86hNfZJpYAB0q9Kvf5EqT7volf9ePtbbyCTKsSCr8FC9Lj_5G_-F3_/s1600/filters.png"></a></div>
カメラの映像をリアルタイムに処理しドット絵っぽくしたくて、年末から画像処理学んでいき欲が再燃した。<br>
今回はWebカメラやラップトップパソコンのカメラを使って映像を取得し、適当な画像処理フィルターをかけ、ブラウザに表示する方法をまとめる。(筆者環境はMBP)<br>
<br>
<br>
<h3 class="selector02">
基本: カメラの映像をブラウザに表示する
</h3>
<br>
単純に表示するだけの場合は、<a href="https://developer.mozilla.org/ja/docs/Web/API/HTMLMediaElement" rel="nofollow" target="_blank">video要素(HTMLMediaElement)</a>と<a href="https://developer.mozilla.org/ja/docs/Web/API/Media_Streams_API" rel="nofollow" target="_blank">MediaStream</a>を使う。<br>
<pre><code class="html"><video id="camera"></video></code></pre>
<pre><code class="js">async function main() {
const video = document.querySelector("video#camera");
// MediaStreamを取得する(Promiseが返る)
const stream = await navigator.mediaDevices.getUserMedia({ video: true });
video.srcObject = stream;
// MediaStreamが取得できたら再生する
video.onloadedmetadata = () => video.play();
}
main();</code></pre>
今回は映像だけを使いたいので、<code>mediaDevices.getUserMedia</code>に<code>{video: true}</code>を指定したが、音声も使いたい場合は<code>{video: true, audio: true}</code>のように指定する。<br>
<br>
詳細は<a href="https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia" rel="nofollow" target="_blank">MediaDevices.getUserMedia</a>を参照してください。<br>
※ 執筆時点では日本語ドキュメントが古いため、英語ドキュメントを読んだほうが良い。<br>
<a href="https://kuroeveryday.blogspot.com/2019/01/real-time-video-filter-with-canvas.html#more">続きを読む »</a>B.C.Rikkohttp://www.blogger.com/profile/16356457343247420696noreply@blogger.com0tag:blogger.com,1999:blog-714625945410569535.post-77242350971926512442019-01-10T08:00:00.000+09:002019-01-16T08:09:53.379+09:00[golang]任意の値、要素数で配列を初期化する方法<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEif_asBgBoAxS1bODj9NW0bCQqJwbDClWUIy_GcjJbhqJaYd4UiAwobSSqi3krKpD6gZClYDec6VQJjN3hJ8uiRQe5ng6A1p9r63Eww1w0MPGXTKKyirAb203vWXffVn_7ArAnlGx5gvfNw/s1600/hello-gopher.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="358" data-original-width="640" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEif_asBgBoAxS1bODj9NW0bCQqJwbDClWUIy_GcjJbhqJaYd4UiAwobSSqi3krKpD6gZClYDec6VQJjN3hJ8uiRQe5ng6A1p9r63Eww1w0MPGXTKKyirAb203vWXffVn_7ArAnlGx5gvfNw/s1600/hello-gopher.png"></a></div>
Go言語の練習がてら「<a href="https://amzn.to/2C50TAs" rel="nofollow" target="_blank"><b>プログラマ脳を鍛える 数学パズル</b></a>」をやっていた。<br>
<br>
そこでひとつの疑問が生まれた。<br>
一発で任意の値、要素数で配列を初期化できないのか?<br>
<br>
そんなことをツイートしたらリプライをいただいたので実際に試してみた。<br>
<blockquote class="twitter-tweet" data-cards="hidden" data-lang="ja">
<div dir="ltr" lang="ja">
それくらいしかないですね〜〜〜<br>
効率的にやりたいという話になるとこの辺が参考になるかと👀<a href="https://t.co/3QiQKVbzk1">https://t.co/3QiQKVbzk1</a></div>
— しょっさん@ʕ ◔ϖ◔ʔ (@syossan27) <a href="https://twitter.com/syossan27/status/1077780276573433856?ref_src=twsrc%5Etfw">2018年12月26日</a></blockquote>
<script async="" charset="utf-8" src="https://platform.twitter.com/widgets.js"></script>
<br>
<br>
<h3 class="selector02">
任意の要素数の配列を生成する
</h3>
<br>
make関数を使って配列(正確にはslice)を生成する。<br>
<pre><code class="go">// すべてfalseの配列ができる
list := make([]bool, 1000)
// すべて0の配列ができる
list := make([]int, 1000)</code></pre>
<br>
<code>make(型, 要素数, 容量)</code>で任意の型と要素数でsliceを生成する。しかし型がboolならすべてfalse、intならすべで0のスライスができる。<br>
<a href="https://kuroeveryday.blogspot.com/2019/01/golang-array-initialization.html#more">続きを読む »</a>B.C.Rikkohttp://www.blogger.com/profile/16356457343247420696noreply@blogger.com0tag:blogger.com,1999:blog-714625945410569535.post-27091022821643577252019-01-09T08:00:00.000+09:002019-01-09T08:02:02.525+09:00Chromeでボタンの背景色を白(fff)にできないときの対処法<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvF5j7hHeV22co0HwiUE8NGLhng0lbvdak0An1KUGMzCDEQOydHKQv94Quz9uf_NZkHb7pIqQd55XgBRPmmVXgP3G5tawjUnUevp3CnNLS2YLVo5OxR2vHB5Ko7PNsFFwFqDgagqQzvR45/s1600/css.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="383" data-original-width="640" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvF5j7hHeV22co0HwiUE8NGLhng0lbvdak0An1KUGMzCDEQOydHKQv94Quz9uf_NZkHb7pIqQd55XgBRPmmVXgP3G5tawjUnUevp3CnNLS2YLVo5OxR2vHB5Ko7PNsFFwFqDgagqQzvR45/s1600/css.png"></a></div>
NES.cssを開発しているときに、Chromeだけなぜかボタンの背景色(background-color)に白(#fff)が指定できないことに気づいた。FirefoxやSafariだと問題ない。<br>
<blockquote class="twitter-tweet" data-lang="ja">
<div dir="ltr" lang="ja">
ボタンのbackground-colorに色を指定しているのになぜか#fffのときだけ他の色(グレー)になる謎現象に悩まされてる。reset.css使ったときは問題なかったんだけどなんでだろ? <a href="https://t.co/17WuDz18lb">pic.twitter.com/17WuDz18lb</a></div>
— ダーシノ (@bc_rikko) <a href="https://twitter.com/bc_rikko/status/1066635771619098624?ref_src=twsrc%5Etfw">2018年11月25日</a></blockquote>
<script async="" charset="utf-8" src="https://platform.twitter.com/widgets.js"></script>
いろいろ実験したので、ボタンの背景色を白するための対処法をまとめる。<br>
<br>
<br>
<a href="https://kuroeveryday.blogspot.com/2019/01/change-background-color-of-button-to-white-on-chrome.html#more">続きを読む »</a>B.C.Rikkohttp://www.blogger.com/profile/16356457343247420696noreply@blogger.com0tag:blogger.com,1999:blog-714625945410569535.post-32670437040737041122019-01-08T08:00:00.000+09:002019-01-08T08:20:47.235+09:002018年活動報告と2019年行動指針<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCZaairQ6hgTVK1DqKlh5oA46qeTMONj2k8ENgGOMaWIRYih-9Hr3bSvo0O_H8SP_E_3uHrA0Z7v4rFWdBLBMgZ2ELc6RRPioel3xnjH-iT_eI3rgiJwGNQDyJjAKhF_B1cxneDQdYy3F1/s1600/2018to2019.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="426" data-original-width="640" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCZaairQ6hgTVK1DqKlh5oA46qeTMONj2k8ENgGOMaWIRYih-9Hr3bSvo0O_H8SP_E_3uHrA0Z7v4rFWdBLBMgZ2ELc6RRPioel3xnjH-iT_eI3rgiJwGNQDyJjAKhF_B1cxneDQdYy3F1/s1600/2018to2019.png"></a></div>
2018年はお世話になりました。<br>
2019年もひきつづき<a href="https://twitter.com/bc_rikko" rel="nofollow" target="_blank">ダーシノ</a>、当ブログともによろしくお願いします。<br>
<br>
<b>過去の記事</b>
<br>
<ul>
<li><a href="https://kuroeveryday.blogspot.com/2014/01/2013to2014.html" target="_blank">2013年活動報告と2014年行動指針</a></li>
<li><a href="https://kuroeveryday.blogspot.com/2015/01/2014to2015.html" target="_blank">2014年活動報告と2015年行動指針</a></li>
<li><a href="https://kuroeveryday.blogspot.com/2016/01/2015to2016.html" target="_blank">2015年活動報告と2016年行動指針</a></li>
<li><a href="https://kuroeveryday.blogspot.com/2017/01/2016to2017.html" target="_blank">2016年活動報告と2017年行動指針</a></li>
<li><a href="https://kuroeveryday.blogspot.com/2018/01/2017to2018.html" target="_blank">2017年活動報告と2018年行動指針</a></li>
</ul>
<br>
<br>
<h3 class="selector02">
2018年のBlack Everyday Company
</h3>
<br>
まずは当ブログについての総括を。<br>
<br>
<h4 class="selector01">
ブログ 96.6万PV
</h4>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRdK1qz_5tUS30g_FHYgvUTJruHqth1P_oHvOyAGvN9T3W-LdK0P92uZqEZQbfb-nAV-AaF-aASiGUlaslgn4L4xUuFj8-X0MVNdLWOCdwm1nygoF0dWLVy1krlf0rQ9dWE6qJ7I1RDI9a/s1600/analytics.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="513" data-original-width="1216" height="270" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRdK1qz_5tUS30g_FHYgvUTJruHqth1P_oHvOyAGvN9T3W-LdK0P92uZqEZQbfb-nAV-AaF-aASiGUlaslgn4L4xUuFj8-X0MVNdLWOCdwm1nygoF0dWLVy1krlf0rQ9dWE6qJ7I1RDI9a/s640/analytics.png" width="640"></a></div>
<b>2018年の1年間で、966,291PVあった。</b><br>
<br>
前半は副業、後半はOSS活動などで忙しかったため投稿数は過去最少の33記事。PVはほぼ横ばいだ。ありがたいことに書いた記事がバズることが数回あり、3月、10月、11月は 約8.9万PV/月まで伸びた。<br>
<a href="https://kuroeveryday.blogspot.com/2019/01/2018to2019.html#more">続きを読む »</a>B.C.Rikkohttp://www.blogger.com/profile/16356457343247420696noreply@blogger.com0tag:blogger.com,1999:blog-714625945410569535.post-29603340332179869922018-12-31T12:00:00.000+09:002019-01-18T08:52:07.070+09:00ファミコン風CSSフレームワーク「NES.css」をリリースしました<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjNNtDTJP83CwY0gM1qmQZYCYHo51eEQa4AL1Ytgk2-MOUXNPkl_HJIqVvdVTEXENKffAvrLgf-aDsVrEgMI2y-_jjUyn4ZwFhogcDpXTv_7yoIt-Okf_1PC08PyEMYqFO9FmDXhH9F2fy/s1600/nescss.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="653" data-original-width="1558" height="268" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjNNtDTJP83CwY0gM1qmQZYCYHo51eEQa4AL1Ytgk2-MOUXNPkl_HJIqVvdVTEXENKffAvrLgf-aDsVrEgMI2y-_jjUyn4ZwFhogcDpXTv_7yoIt-Okf_1PC08PyEMYqFO9FmDXhH9F2fy/s640/nescss.png" width="640"></a></div>
<br>
ファミコン風(8bitライク)なCSSフレームワーク「<a href="https://github.com/nostalgic-css/NES.css" rel="nofollow" target="_blank">NES.css</a>」を、2018年12月19日に正式リリースした。開発した経緯や、タイムライン、OSS活動の感想、「そのロゴ、SNESじゃね?」の反論を書こうと思う。<br>
<br>
<br>
<h3 class="selector02">
つくったもの
</h3>
<br>
ウェブサイトを懐かしいファミコンテイストにしてくれるCSSフレームワークを開発した。口で説明するより、実際にデモサイトを見ていただいたほうがわかりやすいだろう。<br>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEii-A2mEqtSkl-sbe-B16Fs5Wemu7KRM7AracL0q3Kg6iwTiTL76SgWCy-vkKFu-wOOQCUcigr0G1J7kRsMw_YyMV5frAGEIZHt2VMjZTaCar6OTX_2J4nu7cjFKZY5IUt2MTYG76gkfvHQ/s1600/nes.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="1289" data-original-width="1600" height="515" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEii-A2mEqtSkl-sbe-B16Fs5Wemu7KRM7AracL0q3Kg6iwTiTL76SgWCy-vkKFu-wOOQCUcigr0G1J7kRsMw_YyMV5frAGEIZHt2VMjZTaCar6OTX_2J4nu7cjFKZY5IUt2MTYG76gkfvHQ/s640/nes.png" width="640"></a></div>
<div style="text-align: center;">
<a href="https://nostalgic-css.github.io/NES.css/">https://nostalgic-css.github.io/NES.css/</a></div>
<br>
<a href="https://kuroeveryday.blogspot.com/2018/12/nescss-released.html#more">続きを読む »</a>B.C.Rikkohttp://www.blogger.com/profile/16356457343247420696noreply@blogger.com0