転職ナビのフロントエンドを担当しています、@sueshinです。 Livesense - 関 Advent Calendar 2017、22件目をお送りします。 どうぞ宜しくお願いします。 はじめに フロントエンドでよく注目されるJavaScriptではなく、 地味で渋いまるで関節技のような、Google Chrome Devtoolsを使った技術をtipsの形式でまとめました。 免責事項 ショートカットなどは全てMacのキーボード操作にしています。Windowsユーザーは適宜読みかえてください。 Chromeのバージョンは63系に基づいて紹介しています。 52の関節技！！ Elements 1.hover時のコンポーネントのCSSルールを表示 使い方 ①DOM要素を選択 ②Stylesペインを開く ③:hovをクリック ④hoverフィルタを適用 2.対応するCSSファイルを開く 使い方

後はcontent以下のディレクトリにMarkdown形式でファイルを置いていったりするだけです。 Themeも用意されており、簡単に導入できます。 hugoの導入は以下が詳しいです。 Hugo | Quick Start サイトを生成する hugo コマンドを実行することで、public以下に生成されます。 S3に設置する public以下に生成されたサイトを設置します。 パブリックアクセスを許可したS3 bucketを設置し、public以下をコピーします。 その後、プロパティからStatic website hostingを有効にします。 東京リージョンに設置した場合、以下のbucket名を置き換えることでアクセス出来るはずです。 https://[bucket_name].s3-website-ap-northeast-1.amazonaws.com CloudFrontを通す C

何を言っているのか 製作時間 30分ぐらい 内容 input要素のtypeがtextまたはsearchの要素、もしくはテキストエリア内におけるキャレットの位置を画面内の絶対値として取得し、その周辺に打鍵と同時に画像を散らかしています。 キャレット位置の取得方法 これの実現については今回は自前実装ではなく caretposition.jsという素晴らしいライブラリがあったので、使わせていただいてます。 http://d.akiroom.com/2012-06/jquery-textarea-caret-position-javascript-library/ 実装 'use strict'; document.onkeydown = function (e) { var current = document.activeElement; if (e.key === 'Backspace')

翻訳元: Oh shit, git! gitは使いにくい！ Gitは難しい: 中身を破壊にするのは簡単なのに、過去の過ちを修正する方法を見つけるのは極めて困難だ。ドキュメントには修正するコマンド名が書かれていても、その名前を知らなければ使いものにならない。これは「鶏が先か、卵が先か」というジレンマを抱えている！ だから私が陥った数々の問題をいかにして抜け出すかを書いた。 なんて事だ！私は大変な誤ちを犯した！タイムマシンを呼び出すにはどうすればいい！？ git reflog # you will see a list of every thing you've done in git, across all branches! # each one has an index HEAD@{index} # find the one before you broke everything git

TL;DR; Amazon AuroraはIn-Memory DBでもなくDisk-Oriented DBでもなく、In-KVS DBとでも呼ぶべき新地平に立っている。 その斬新さたるやマスターのメインメモリはキャッシュでありながらWrite-BackでもなくWrite-Throughでもないという驚天動地。 ついでに従来のチェックポイント処理も不要になったのでスループットも向上した。 詳細が気になる人はこの記事をチェキ！ Amazon AuroraはAWSの中で利用可能なマネージド(＝運用をAWSが面倒見てくれる)なデータベースサービス。 ユーザーからはただのMySQL、もしくはPostgreSQLとして扱う事ができるのでそれらに依存する既存のアプリケーション資産をそのまま利用する事ができて、落ちたら再起動したりセキュリティパッチをダウンタイムなしで(!?)適用したりなどなどセールストー

はじめに この記事は スマートスピーカー Advent Calendar 2017 10日目の記事です。 Google Homeを購入してからこの2ヶ月でやってきたことをまとめたいと思います。 が、ほとんどQiitaへ投稿した記事の紹介になってしまいました。 大体見たことあるという方はこちら以降をどうぞ。 なお記事の後半でコスト計算していますが、本記事で紹介した内容は最低6,000円あれば大体実現できます。 ※各所で本日までのGoogle Home半額セール前提。まだ購入されてない方はお急ぎを ※ツクモは25日までセール実施のようです 薬の服用ログ Google Home、IFTTT、Googleスプレッドシートを使って独自音声コマンドでログをとる（ついでにNode.jsやngrokやらも使ってLINEやGoogle Homeに通知する） Google Homeを買って最初に作ったのがこれ

フューチャーアーキテクト Advent Calendar 2017の2日目です。 はじめに システム設計が大好きで大嫌いな皆さん、こんにちは。 突然ですが、皆さんはどのようにシステム設計における ドキュメント腐る問題 に立ち向かっていますか？ ドキュメント腐る問題とは、設計時に作成した各種ドキュメントがGoogle Driveやファイルサーバ上で陳腐化してしまい、現状の正しい状態を指していないことです。せっかく新規参画者がキャッチアップしようとしてもドキュメントが真実を示していないという怖いやつですよね。 解決策としては、各種ドキュメントを、MarkdownやAsciiDoc、UMLはPlantUMLやmermaid、ERDはPlantUMLやerd、画面遷移図はUI Flow、REST-API設計はSwaggerなど、なるべくテキストベースで管理し、GitHubなどのリポジトリで管理する

はじめに 去年、2016年のN高アドベントカレンダーで、「高校生にWeb上でプログラミングを教え始めたエンジニアがこの8ヶ月間で得た気づき 」という長いポエムを書かせてもらった者です。あれから1年が経過し、自身が担当責任者となりプログラミング教育をはじめて1年と8ヶ月が経過しました。 今回も、今年一年の試行錯誤の結果や課題をここにまとめることで、今後高校生にプログラミングを教える可能性のある先生方や、エンジニアからプログラミング教育業界に転身する方に、何かしらの参考になればと考え、この記事を書くことにしました。 現在学習中の生徒の皆さんにも、これを見てこのようにカリキュラムや教育方針が練られているのだなということを知ってもらい、学びに活かしてもらえれば幸いです。 N高等学校とは もうご存知かもしれませんが、N高等学校 とは、2016年に作られた、やりたいことを徹底的にやりたい人のための新し

セッションIDやアクセストークン、はたまた業務上で使う一意の識別子など、いろんなところで一意のIDを生成しなきゃいけないケースが存在します。 そこで世間で使われているIDの生成方法について調べてみました。 選択基準 ID生成における要求として、以下の観点が上げられるかと思います。 生成の速度 大量にデータを短期間で処理し、それらにIDを付与する場合、ID生成そのものがボトルネックとなることがあります。 推測困難性 IDを機密情報と結びつける場合、IDを改ざんされても、機密データが見れないようにできている必要があります。 順序性 採番した順にデータをソートする必要がある場合は、IDがソートキーとして使えないといけません。 それぞれについて各生成手段を評価します。 ID生成の手段 データベースの採番テーブル 採番用のテーブルを作り、そこで番号をUPDATEしながら取得していくやりかたです。古い

ちまたで阿部寛のサイトが早いと話題になってます。 dev.toと阿部寛のホームページどっちが速いですか？ dev.toと阿部寛のホームページについてちゃんと計測させてくれ 阿部寛のサイトはベストを尽くしてるのか？ それを調べるために、阿部寛のサイトを高速化させてみたいと思います。 目指すべきスピード 最速はローカルのファイルへのアクセスだと思うのでこれを目指したいと思います。 file:///C:/abe_hiroshi/index.html ChromeのDeveloper Toolでレンダリング完了が「173ms」でした。 まぁここまでは無理だな… 阿部寛のサイトはどんなもん？ 速度はwebpagetest.orgで測ってみます。 レンダリング完了時間は「359ms」です。はえーな S3でホスティングしてみる サーバーを立てるほどでもないので、S3でWebホスティングしてそこにhtml

時は遡ること1年前… 以前、こんな記事を書きました。 会社が休みになるボタンを作ってみた [Amazon Dash Button] しかし、この Amazon Dash Button をハックした方式では以下の問題点がありました。 同ネットワーク内にサーバを立てておく必要がある ハック的な使い方をしているため、動作不安定 目を開ける必要がある ボタンを押す動作すら面倒くさい ノールックでボタンを押そうとするとボタン(半休/全休)を間違える そのくらい我慢しろや！という項目もありますが、 やはり運用していく上で一番面倒だったのは、自サーバをローカルに立てておく必要がある点でした。 ネットワークに流れる ARP パケットをイベントのトリガーにする仕組みなので、 サーバをクラウドへ持っていくことができなかったのです。 (あくまで、一般向けの Amazon Dash Button をハックして利用

初めに LinusによるGitのinitial commitのREADMEの訳です。 社内のSVNからの移行を促すために資料を整備していたのですが、SVNでやっていたことを移し替えたりコマンドを覚えたりするより内部構造を知ったほうが早いことに気づきました。 それで、gitの内部構造についての解説資料を色々見ていたのですが、データ構造については原作者のこのREADMEに言い尽くされている気がします。のみならず、gitを使うものが抱くべき精神性のようなものが示されており、深い感銘を覚えました（ヒャッハー）。 README: ”GIT - 馬鹿コンテンツトラッカー” コミットメッセージ：git, 地獄からきたインフォメーションマネージャ gitの意味 "git" は何を意味することも出来る、お前の気分次第だ。 3文字で、発音可能で、実際のUNIXシステムで共通コマンドとして使われていないものであ

はじめに この記事はGoodpatch Advent Calendar2日目の記事です。 今日は12/18ですが、2日目の記事を書く人が色々あって急遽書けなくなってしまったので、僕が代打で書く事にしました。 今回はGoodpatchのエンジニアが隔週で行なっている社内勉強会（その名もテクみ勉強会）で発表した内容ですが、「群れ」について書きたいと思います。 そもそも「群れ」とは一体何なのか 「群れ」についてWikipediaには以下のように書かれています。 群れは集団と言う数で淘汰（自然選択）の圧力に対抗しようとした生存戦略の一つ（個体ではすぐに天敵に食べられてしまうが、集まることで天敵を寄せ付けないなど）であると考えられる一方、群れで行動することで、生殖の面でも有利に働くと考えられている。 集団的自衛権然り渋谷のハロウィン然り、群れを成す事で他を圧倒し、自らが生き残るための生存戦略なのです

みなさまへのお願いごと 間違いなどの指摘は、編集リクエストでお願いします。 コメントの記載はページが長いこともあり、お控えください。 TOEIC900でも英語が話せない日本人へ ITエンジニアの私がなぜ令和の今、中国語を学ぶのか？ 名詞/イディオム gotcha はまりポイント。注意すべきこと。引っ掛け。 Got you のくだけた表現。捕まえた、誰かをトラップに引っ掛ける、という意味から。 注) 一般的には、Got itやYup、I seeのような、同意の返事でよく使われる。 類) caveat, pitfall There are many gotchas in this application. sought-after (スキル、人材、機能、アプリが) 人気の、需要がある、求められてる、引っ張りだこ Python is a sought-after language. c-suit

はじめに あなたが作成したアプリを多くのユーザーに利用してもらうにはモバイル・アプリ・ストア (Apple の App Store や Google Play など) を通じてアプリを配布することが最適な方法です。 しかし、App Store にアプリを公開するためには、Apple のレビューを避けて通ることはできません。Apple のレビューは彼らが自ら定め、公開されているガイドラインにもとづき、評価が下されます。 ほとんどの場合において、彼らのレビューは適切に行われていると言えますが、ごく僅かなケースにおいては理不尽な評価が下される場合もあります。アプリに対して理不尽な評価が下されると、それを覆すことは難しく、最悪の場合アプリの公開を断念しなくてはなりません。 この記事では、理不尽なリジェクトを受けたあるアプリが、AppStore へ公開されるまでの経緯を説明しています。 アプリの開発

GitHub上の実際のコミットメッセージやIssueのやりとりをみて、チートシート作りました。 共通的なこと コミットメッセージやIssueのタイトルは、主語省略し、1文で書き行末ピリオドは付けない 動詞は現在形・過去形のどちらも同じくらいの頻度で見られるが、どちらかに揃える。 コミットメッセージを書く Japanese English

画像処理は難しい。 Instagramのキレイなフィルタ、GoogleのPhoto Sphere、そうしたサービスを見て画像は面白そうだ！と心躍らせて開いた画像処理の本。そこに山と羅列される数式を前に石化せざるを得なかった俺たちが、耳にささやかれる「難しいことはOpenCVがやってくれるわ。そうでしょ？」という声に身をゆだねる以外に何ができただろう。 本稿は石化せざるを得なかったあの頃を克服し、OpenCVを使いながらも基礎的な理論を理解したいと願う方へ、その道筋(アイテム的には金の針)を示すものになればと思います。 扱う範囲としては、あらゆる処理の基礎となる「画像の特徴点検出」を対象とします(実践 コンピュータビジョンの2章に相当)。なお、本記事自体、初心者である私が理解しながら書いているため、上級画像処理冒険者の方は誤りなどあれば指摘していただければ幸いです。 画像の特徴点とは 人間が

おしっこセンサーできました ウチの小学生の息子が家のトイレでたびたびおしっこをこぼしてしまう。俺がくどくど注意してもあんまり効果ない。そこで、代わりにAIに怒ってもらうことにした。こんな感じである。 おしっこセンサーのデモ（動画）。水を数滴床にたらすとブザーが鳴り、床を拭くと止まる。 ディープラーニングの画像認識を使い、床の上に落ちた水滴をカメラで検出してブザーが鳴る仕組みだ。夏休みの自由工作に過ぎないので精度は期待していなかったけど、意外にきちんと動いてくれて、カメラに映る範囲に水滴を数滴たらすとピッピと鳴り、床を拭くとブザーも止まる。「お父さんだってAIくらい作れるぞ」と息子に自慢したいがための工作なのだ。 でも、これ作るのはそんなに難しくなくて、休み中の3日くらいで完成した。かかったお金は、RasPiやカメラ、周辺デバイスが2万円弱、画像認識のモデル作成に使ったクラウドの料金が数10

はじめに 過去三年間、技術者ではない方々に OAuth（オーオース）の説明を繰り返してきました※1,※2。その結果、OAuth をかなり分かりやすく説明することができるようになりました。この記事では、その説明手順をご紹介します。 ※1：Authlete 社の創業者として資金調達のため投資家巡りをしていました（TechCrunch Japan：『APIエコノミー立ち上がりのカギ、OAuth技術のAUTHLETEが500 Startups Japanらから1.4億円を調達』）。Authlete アカウント登録はこちら！ ※2：そして２回目の資金調達！→『AUTHLETE　凸版・NTTドコモベンチャーズ・MTIからプレシリーズA資金調達』(2018 年 2 月 15 日発表) 説明手順 （１）ユーザーのデータがあります。 （２）ユーザーのデータを管理するサーバーがあります。これを『リソースサーバ

この記事はなんなの プログラミングを始めたばかりで高速化の大枠が全くわからず意味不明なことをしていた在学時、こんな資料があったら良かったのになあ、と思って書いたもの。 書いて、在学時研究室に押し付けた後紛失したと思われていたものが発掘されたもの。 要約 ライブラリがあるならそれを使う。 ライブラリが無ければ、ボトルネック部分を探してそこだけ高速な言語で書きなおすか、可能なら事前コンパイルする。 最初から全てを Low-Level な言語で書くと大変、でも結果のプログラムは速い。 以下の時間の計測ではインポートにかかる時間は除いています。 使用するもの Python（3系） Numba Scipy Line Profiler Fortran（gfortran） QUADPACK QUADPACK以外の導入方法の説明は色んな所にあるので各自でお願いします。上3つに関しては、個人的にはAnaco