IT音痴オーバーフォーティーおやじのストック記事倉庫

[Boto3 Adv-Cal DAY9]Translateで、元フレーズの言語を自動推測させた上で日本語へ翻訳してみた : boto3 で楽しむ AWS PythonLife 一人AdventCalendarです。 boto3のドキュメントを通して、サービス別にどういった事が出来るのかを理解したり、管理コンソールを通さずにTerminalだけ […]

s3にCloudFrontからはアクセスさせて、開発拠点、開発VPC以外からアクセスさせないパケットポリシー : s3のバケットに CloudFrontからはアクセスさせる。 S3への直接アクセスは、開発拠点からのみアクセスできる S3にアップロードするEC2の所属するVPCからのみアクセスできる というポリシーが必要になった。 NotPrincipalの存在に気付かなかったので少しハマった。 別途VPCのエンドポイントを作成して、使用するＶＰＣからのアクセスを限定する必要がある。 qiita.rb { "Version": "2012-10-17", "Id": "IP-VPC-CloudFront-Policy", "Statement": [ { "Sid": "2", "Effect": "Allow", "Principal": { "AWS": "arn:aws:iam::cloudfront:user/CloudFront Origin Access Identity E233333eee" }, "Action": "s3:GetObject", "Resource": "arn:aws:s3:::production-s3/*" }, { "Sid": "Allow-from-specific-IP-and-VPC-only", "Effect": "Deny", "NotPr

バブリングしないイベントは親要素で検知できないとおもてた。できる。 : ずっと勘違いしてた。 DOMイベントのキャプチャ/バブリングを整理する 〜 JSおくのほそ道 #017 イベントフェーズとは これ読んで、バブリングしないイベントもキャプチャフェーズなら親要素で検知できること知った�� キャプチャフェーズのことちゃんと理解してなかった。 デモ // 検知できない document.addEventListener('focus', function (e) { var el = e.target.matches('input') ? e.target : e.target.closest('input'); if (el) { console.log('バブリングフェーズでinputのfocusイベントを検知'); } }, false); // 検知できる document.addEventListener('focus', function (e) { var el = e.target.matches('input') ? e.target : e.target.closest('input'); if (el) { console.log('キャプチャフェーズでinputのfocusイベントを検知'); } }, true);

順列組み合わせ JavaScript(ES2015) : https://qiita.com/higuma/items/5af4e62bdf4df42ce673 を参考にJavaScript(ES2015)での順列組み合わせ関数を作成したのでメモとして残しておく。 以下の コードの解説 の再帰処理の流れが非常に参考になった。 https://qiita.com/higuma/items/5af4e62bdf4df42ce673#%E3%82%B3%E3%83%BC%E3%83%89%E3%81%AE%E8%A7%A3%E8%AA%AC メイン // pre: 1st half of array // post: 2nd half of array const permutation = ({ result = [], pre = [], post, n = post.length }) => { if (n > 0) { post.forEach((_, i) => { const rest = [...post]; const elem = rest.splice(i, 1); permutation({ result, pre: [...pre, ...elem], post: rest, n: n - 1}); }); } else { result.push(pre); } return result; }; const array = [0, 1, 2, 3]; const results = permutation({ post: array }); console.log(results); const results2 = permutation({ post: array, n: 2 }); console.log(results2); 結果 [ [ 0, 1, 2, 3 ], [ 0, 1, 3, 2 ], [ 0, 2, 1, 3 ], [ 0, 2, 3, 1 ], [ 0, 3, 1, 2 ], [ 0, 3, 2, 1 ], [ 1, 0, 2,

【文系PMの作る】nuxt+netlify+firebaseで作る最高の睡眠を記録するwebアプリ（前編） : こんばんは、そしてはじめましてyou8といいます。普段はプロダクトマネージャーをしてて、趣味で休日にコードを書いています。 最近30代を迎えて体調管理をしたいなと思って色々調べてたらドハマリしてしまい、いろんな数値をログとって遊んでいます。ただいろんなログとっても一般的にいい数字と照らし合わせられるけど結局自分の体にどれくらいが適正かはよくわからないなと。例えば睡眠６−７時間がいいと言われていても実際は6時間ぐらいがちょうどーいいなーとか。 結局清々しい寝起きだったの？一日気分良かったなど100%主観的な体調を記録できたらいいな。それをグラフとかで見れたら最高だなと思って 簡単にログが取れて 簡単にグラフにできる webアプリを作ろうかなーと思って色々調べました。ちなみに僕は文系PMなんで本職エンジニアじゃない人間が趣味で作るときにどんなことを勉強して、どんなことを調査してプロダクト作っているかも書いていきます。 要件 簡単に日々の快眠度を10段階で送れる 勝手に日付もつけて送ってくれる それをいい感じのグラフに見せる 仕様 【PM観点】スケールなど将来のことを考える webアプリケーションは最初の設計で躓くと後々のスケールが非常に困難になったりします。（DB設計やフレームワークの選定など）PMはエンジニアとこのプロジェクトが将来的にどうなるのか？スケールを考慮したほうがいいのか？どういうDB絡むが追加される可能性があるのかを意識合わせできるとあとで困らないのかなと思います。 今回のプロジェクトで言うと最初googleスプレッドシートをDBかわりにしようと考えていました。（入力した数値をスプレッドシートで色々編集できると楽しそうなので）ただ調べていく中でgoogleスプレッドシートだと反映が遅そうなので複数人同時で使う場合不便そうだなと思いました。そもそもDB目的のものじゃないので後でメンテも大変そうだなと。将来似た形で公開サービスとしても出す可能性もあるなと思ったので今回はfirebaseに値を送り、DB代わりにして余力があればfirebaseからgoogleスプレッドシートにGASで値を送ることにしました。 今回

HTML5/CSS3のニュースやTIPSなどのまとめ (2018年12月9日) : 第三者が作ったスライドを初見でそれっぽくプレゼンする新種のゲーム「パワーポイントカラオケ」日本でもじわじわ広まっている様子 (Togetter) 内定貰った企業が炎上した女の話 (108 | note) 深セン訪問レポート - 2018年秋 (Nothing ventured, nothing gained.) 考える力がついた！超論理的になるおすすめ本11選 (コムテブログ) 若年層は検索前にフィードをスクロールする (yukiller | Twitter) ５年間ヒトヤスミしていたのに、なぜ「一休」は再成長したのか (ITmedia) 動画配信の広告は「一時停止のタイミングで表示」というスタイルへ変化？ (ギガジン) 無駄な広告代理店やベンダー叩きはやめませんか？ (MarkeZine) graph-cli - CSVからグラフの画像ファイルを生成 (MOONGIFT) シリコンバレーで働いて気付いた「技術力向上」だけに固執するエンジニアのダメさ (エンジニアtype) 詳細を読む

PHANTEK、2システムを内蔵可能な2in1キット同梱のミドルタワーケース : アイティーシーは12月5日、PHANTEK製のミドルタワー型PCケース「ENTHOO EVOLV X GLASS」を発売した。日本専用パックのみ、Mini-ITXマザーボードの固定キットとGPUライザーカードが付属。専用電源「REVOLT X」と併用することで、2システムを内蔵可能。

VS Code でなるべくマウスを触らない設定 - notebook : VS Code でなるべくマウスを触らない設定 - notebook はじめに この記事はVisual Studio Code Advent Calendar 2018 9 日目の記事です 動機 もともと Vim を開発サーバとローカルでも使っていました そろそろ違うエディターを使って見ようかなーという軽いノリで導入してみ見た感じです 使ってみるとちょっとしたことでマウスを使わないと行けなかったりするのが多少なりと...

ユーザーの声に振り回されないデザインの改善プロセス｜dely design : ユーザーの声に振り回されないデザインの改善プロセス｜dely design dely Advent Calendar 2018の9日目の投稿は、最近入社したプロダクトデザイナーのkassyが担当します。昨日は「jQueryへの依存を外す方法」という内容でフロントエンドエンジニアの @all__user が記事を書いてくれました。デザイナーが読んでも面白い内容なので、ぜひどうぞ。 いまはWeb版クラシルのUIやUX周りのカイゼン...

Mountain Dew、ゲームプレイをレベルアップさせるという初のゲーマー向けドリンクを発表 : Mountain Dewがゲーマーの意見を取り入れて開発したという、初のゲーマー向けドリンク「Mtn Dew Amp Game Fuel」を発表した( Mountain Dewのツイート 、 FOODBEASTの記事 、 Varietyの記事 )。 Mtn Dew Amp Game Fuelはホワイトグレープジュースをベースに、プレイ中の集中力や正確さを高めるカフェインとテアニンを配合。さらにビタミンAとBも配合されているという。16オンス(約473ml)入りの缶には飲み終えなくてもこぼさないよう蓋のできるResealable Techや、滑りにくいようテクスチャーの印刷されたTactile Gripが搭載されている。フレーバーは「Charged Cherry Burst」「Charged Berry Blast」「Charged Tropical Strike」「Charged Original Dew」の4種類が用意される。 Mtn Dew Amp Game Fuelは米国で来年1月14日に発売される。 Amazon.comでは既に予約を受け付け ており、12缶入りで19ドル99セント。ただし、米国外への発送は不可となっている。 米国ではさまざまなフレーバー が販売されているMountain Dewだが、サントリーが製造・販売する日本ではオリジナルフレーバーの 350ml缶 1種類のみが販売されている。そのため、Mtn Dew Amp Game Fuelもコンビニなどで手軽に入手することはできなそうだ。 すべて読む | idleセクション | idle | ゲーム | 関連ストーリー： ゲームプレイ中の心拍数や発汗状態を記録・表示できるマウス 2016年11月03日 ペプシ史上最強炭酸「ペプシストロング 5.0GV」発売 2016年06月21日 20代男性がカフェイン常用で中毒死、国内初の報告か 2015年12月21日 炭酸飲料を飲む5歳児は攻撃的になる 20

Logistic Regression(ロジスティック回帰) | Alteryx Predictive Tools 道場 Advent Calendar #09 : DI部プリセールスエンジニアの兼本です。 当エントリは『Alteyx Predictive Tools 道場 Advent Calendar』の09日目のエントリです。 クラスメソッド Alteryx Predictiv […]

#09 ： Alteryxサンプルワークフロー「凸凹した商圏エリアを作成」- Alteryx ＆ Tableau 連携 Advent Calendar 2018 : 当エントリは『Alteryx&Tableau連携 Advent Calendar 2018』シリーズの9本目のエントリです。 Alteryx & Tableau 連携 Advent Calendar 2018 - Qii […]

これでライセンス管理もバッチリ！Alteryxライセンスポータルのご紹介 #alteryx_ug : こんにちは。ソリューション営業の大場です。 『Alteryx User Group in Tokyo Advent Calendar 2018』8日目のエントリは、truestar大井さまによる『ワークフローのログをメー […]

データ指向プログラミング＆Unity ECS : はじめに こんにちは、カヤックSG事業部の 王 といいます。 この記事は カヤックUnityアドベントカレンダー2018 の9日目の記事です。 今日は最近話題のデータ指向プログラミングと、Unity 2018.1からプレビュー版として登場したUnity Entity Component System (略: Unity ECS)について紹介します。 データに集中する 名前の通り、データ指向プログラミング(data-oriented programming,略:DOP)はデータに基づくプログラミングです。このコンセプトがよく知られるようになったのは2009年以降です。現在広く利用されているオブジェクト指向プログラミング(object-oriented programming,略:OOP)に対してどこが違い、そしてどこにメリットがあるのかを紹介します。 現在、パフォーマンスに一番影響されるのはメモリの読み取りスピードです。この数十年CPUの性能が１万倍になるのに対して、メモリの性能は10倍未満しか達成していません。そしてCPUとメモリの差がだんだん増えています。 [参照] その差を埋めるためCPUに小さいけどすごく速いキャッシュメモリを使っています。 CPUは処理するデータをメモリからCacheに読み取ります。一個ではなく一列としてCacheに読み取ります。処理したあとはCPUは予想される次のデータのアドレスに移動します。もしCacheにデータが見つからないとCache Missが発生してもう一度メモリからデータの読み取りを行います。 また、メモリとして、連続したアドレスに配置してるデータを一気に読むのはバラバラに読むのに比べて遥かに速いです。だから、CacheのHit率を上げて、メモリのデータを読み取るプロセスをできるだけ少なくすることがパーフォマンスの鍵です。その鍵はメモリにおけるデータの並び方になります。 次はOOPとDOPを比べるため、簡単なデモを作ってみます。このデモではスペースを押すと下に向いて移動する1000個スペースシップを作ります( Asset Store )。一番下に移動すると位置を上に更新します。再生すると下の図のように動きます。 オブジェクト指向デザイン

Spring Boot + GraphQLでAPIを作成してみよう！ : GraphQLのAPIを実装してみました。本記事では、GraphQLの概要とAPIの作り方を紹介します。

【AWS】IAM ロールのパスをルート(/)以外にする : はじめに こちらのサイト を参考に Sagemaker を触ってみようとしたところ、 トレーニング部分で sagemaker unable to assume role という エラーが発生しました。 結論としては下の図のようにSagemakerにアタッチするロールのパスを /service-role/ に必要があったのですが、その設定がコンソール上から 出来ず、aws cli で行う必要がありました。 同じようなことがあったときに迷わないようにメモしておきます。 設定方法 今回作るのはSagemakerのサービスロールなので、こういうファイルを作成します。 $ cat sage.json { "Version": "2012-10-17", "Statement": [ { "Effect": "Allow", "Principal": { "Service": "sagemaker.amazonaws.com" }, "Action": "sts:AssumeRole" } ] } 以下のコマンドを実行すれば、パスが /service-role/ のロールが出来ます。 $ aws iam create-role --role-name [ロール名] --path /service-role/ --assume-role-policy-document file://sage.json { "Role": { "Path": "/service-role/", "RoleName": "[ロール名]",

obnizでもプラレールを動かしたい！ : これは Obniz Advent Calendar 2018 の9日目の記事です 2018年7月7,8日に金沢にて NT金沢 というイベントが開催されていました togetterにて雰囲気がまとめられています[ ここ ] 私もESP8266を複数台使用して子どもに大人気のプラレールを自動制御をしたものを展示していました クリックするとYoutubeへとびます↓ さて本題ですが、obnizでも簡単にプラレールハックができるのではいか？ということで、obnizを使ってプラレールを制御してみました 作ってみた ということで作ってみたものが以下の動画になります 車両は一方向のみ走行するようにし、駅は島式ホームにしてみました クリックするとYoutubeへとびます↓ 本当はNT金沢で展示したように立体交差させたかったのですが、レールを作るのに時間が要するのと制御が複雑化するので今回は単純なものにしました また自動でのプラレール制御は行っていません obnizはweb上でマイコンを制御できるところが長所だと思うため、自動化よりは自分で制御したほうが良いと判断しました 材料 最低限必要な材料です 下の材料の他にもレールの改造と短いレールを作るために3Dプリンタを必要とします R-01 直線レール 10本 R-03 曲線レール 11本 R-08 ストップレール 2本 R-11 ターンアウトレール L 2本 R-11 ターンアウトレール R 2本 J-14 ブロック橋脚 3個 (任意) J-17 ニュー踏切 1本 (直線レールでも代用可) デジタル・マイクロサーボ(SG90) 4個 obniz 1個 ブレッドボード ジャンパーワイヤ お好きな車両 レールの改造 ターンアウトレール サーボモータでターンアウトレールを制御できるように改造をします ターンアウトレールの裏側にペットボトルの切れ端を下記の画像のように接着剤等で貼り付けます こうすることでバネのようにポイントが切り替えが可能となります つぎにサーボモータをターンアウトレールに固定するために、3Dプリンタで固定するものを作ります githubにてモデルデータを公開しているため、ダウンロードして印刷

プレゼンにリアルタイム投票機能をつけてみた話 : 学生LTと名古屋なんとか専門学校のコラボ企画でやったプレゼンです。 作ったもの プレゼン中にリアルタイム投票ができるようにする仕組みを作りました 具体的には、 参加者が指定のURLにあらかじめアクセスしておく。 ↓ プレゼンと連動して参加者の端末に選択肢が表示される ↓ それをクリックするとリアルタイムで前の画面に結果が映る こんな感じ 参加者端末 スライド画面 - スライドはhtmlで作りました 技術的な話 node.jsとsocket.ioを用いて作りました。 プレゼン画面と投票画面が同じindex.htmlで、かつ、Ctr+Bで簡単にホストが取れるという、セキュリティ的にかなり危ない感じです。 また、誰かが投票するたびに、全員の端末にその結果が転送される仕組みなので、大人数で行う場合には向いていません。 デモとしては面白いですが、実用化にはもう少し改良が必要です。 サーバーサイド expressとsocket.ioの非常にシンプルなつくりです server.js var express=require('express'); var app = express(); var http = require('http').Server(app); var io = require('socket.io')(http); var port = process.env.PORT || 3000; app.use(express.static('public')); app.get('/', function(req, res){ res.sendFile(__dirname + '/index.html'); }); io.on('connection', function(socket){ socket.on('question', function(ch){ io.emit('question', ch); }); socket.on(

Highchartsで人口ピラミッドグラフをつくろう : AutoScale Advent Calendar 2018 9日目の担当の matamatak です。 学生インターンとして Twitterアカウントの統合運用ツール SocialDog の開発に携わっています。 JSでグラフを描画するときにオススメの Highchart について書かせていただきます。 Highchartとは 公式サイト JavaScript用のグラフライブラリ Free for Non-Commercial となっており商用利用には注意が必要 Open Sourceなので Github で公開されている 人口ピラミッドグラフとは 世代別の人口と男女比を表すグラフ 日本の人口統計 - Wikipedia 一度は目にしたことがあると思います。今回はこちらをHighchartで描画します。 デモを探す とりあえず公式のデモから似たようなグラフはないか探したところ Bar with negative stack がかなり目指したものと近いようです。 デモを見る限りソースコードも簡潔なので、すこし修正すれば解決！完！ としたいのですが 画像一枚目 のようにY軸、つまり年代を中央に移動させ共通化させたい。 しかし、ドキュメントを見る限り公式では対応していないらしい。 なんとかしてみたかった なんとか表現できないか試行錯誤した結果がこちらです。 （コードを簡潔にするために粗い部分もありますが） 一見すると問題ないグラフに仕上がったと思います。 デモ、ソースコード デモ（CodePen） See the Pen BGvrwm by matamatak ( @matamatak ) on CodePen . ソースコード HTML <script src="https://code.highcharts.com/highcharts.js"></script> <div id="cnt"> <div id="left"></div> <div id="right"