これは2017年の11月から独りでWebサービスを作りはじめて、独りでリリースをして、独りで打ち上げをした、独身男性の備忘録です。 開発からリリースまでの4ヶ月間、自分が開発中に心がけていたことなどを忘れないように、次のサービスに活かせるように、Qiitaに投稿しておきます。 また『Webサービス作るぞ！』と、独りで考えている方の参考になればと思います。 作ったもの OFFICECLOCK - クラウド型の勤怠管理サービス トップ画面 登録画面 勤務表画面 打刻画面 OFFICECLOCKは何ができるのか？ ざっくり説明すると... Webブラウザで勤怠管理ができる 登録した勤務時間をエクセルで出力ができる HATARACLOCKとも連携しているため、LINEでの打刻、勤務表の確認もできる 【連携しているLINEアプリ】 ※このLINEbotとWebのサービスが連動している。 こだわり こ

はじめに なんか、ガチ素人って書くとAVみたいですね ディープラーニングの知識ゼロの素人でしたが、1ヶ月の勉強でディープラーニング　ジェネラリスト試験1に合格しました。 せっかくなので、自分の経験を踏まえつつ合格への（おそらく）最短ルートをまとめてみます。 これからチャレンジしてみようという方の参考になれば幸いです。 ちなみに、僕のスペックはこんな感じです。 数年前まで理系の大学院生だった。 専攻は機械工学だったので、ディープラーニングの知識はゼロ。行列の計算くらいはできる。 お仕事は上流という名のパワポ職人。 多分これが一番早いと思います Coursera 色々なところで紹介されているので、今更細かい解説はしません。 騙されたと思って、Andrew先生の機械学習講座を修了してください。 修了する頃には「何がわからないかがわかる」＝「次にどんな勉強をすれば良いかわかる」ようになっていると思

TL;DR プログラムのネーミングで迷ったら GitHub でキーワードを検索して、ヒットした件数が参考になるのでは？ 複数キーワードを検索して結果の一覧を表示する CLI 作りました https://github.com/kyoshidajp/ghkw ネーミング迷いますよね？ みなさん、コードを書いていて変数やメソッド名のネーミングって迷いますね。 こんな時に自分たちはチームを横断して「こういう名前考えたんだけど、これってどうかな？」という確認を Slack 上で行っています。先日、この Slack チャンネルを見ていて考えました。 「GitHub で検索すれば世の中のコードでどのぐらい使われているかざっくり分かるので参考になるのでは？説」 GitHub で検索できるという条件付きではありますが、コードの規模からするとある程度期待できそうです。 GitHub で検索 例えば「除外条件」

技術的な標準・規格 (TODO: IATA, Microsoft) tz database タイムゾーンに関する、ソフトウェア・エンジニアにとって最も標準的なデータが tz database (Wikipedia) でしょう。 "Asia/Tokyo" や "Europe/London" のようなタイムゾーンの名前は、この tz database のものです。 tz database のタイムゾーンは "/" の前の最初の部分に大陸名・海洋名を用い、続いて、典型的にはそのタイムゾーン内の著名な都市名・島名をその代表として名付けられています。21 国名は基本的に使われません。22 "America/Indiana/Indianapolis" のように3要素で構成されるタイムゾーンも少数ながら存在します。 tz database はボランティアによってメンテナンスされています。タイムゾーンの情

2018/2/6追記 Twitter等で質問を頂いたので、その回答などを末尾に補足として追記しました。 2018/2/9追記 ソースコードを公開しました。 https://github.com/coz-a/Audio-Effect-Replicator サマリ LSTMを使って、ギターアンプの音をシミュレートした。 はじめに 昨年の夏にCNNを使ったギター画像の分類にチャレンジしましたが、引き続きギター関連のネタです。今回は音で遊びます。 ご存知の方が多いかと思いますが、さまざまな音源で聞けるエレクトリック・ギターの音は、通常、ギターアンプから出た音です。ギターの出力を直接ミキサーやパソコンのオーディオIFに入力して録音しても、所謂「エレキギターの音」にはなりません。ギターの信号が、アンプの真空管やスピーカーを通して歪むことで、初めてエレキギターらしい音になるのです。 このアンプの歪みをシ

参考 @kidach1 さんの投稿をPythonに書き換えてるだけです。 @kidach1 さん、いつもありがとうございます。 https://qiita.com/kidach1/items/4b63de9ad5a97726c50c 概要 改めて基本を学ぶ。 参考「Rubyによるデザインパターン第1章」→この投稿はPython デザインパターンとは プログラミングにおいて繰り返し現れる問題に対する、適切解のパターン。 無駄無く設計されたオブジェクト指向プログラムの実現をサポート。 パターンとしてカタログ化されていることで 車輪の再発明を防ぐ デザインパターンの根底にある5つの考え 変わるものを変わらないものから分離する プログラムはインターフェイスに対して行う（実装に対して行わない） 継承より集約 委譲、委譲、委譲 必要になるまで作るな（YAGNI） 変わるものを変わらないものから分離する

ReactStudioを使ったアプリの作り方はこちら React Studioを使ってQiitaの記事一覧アプリを作成してみる はじめに reactというとJSXの書き方、props、stateの挙動等を覚える必要があるため、 学習コストが割りと高めであったり、環境を構築するのに一手間かかったり等、 まだまだとっつきにくさが否めないライブラリです。 しかし、今回は、そんなReactをドラッグ&ドロップでアプリが 作れてしまうツールがあったので紹介したいと思います。 ※尚、Windowsはなく、Macのみで使用できるツールでございますので、予めご了承下さい。 公式サイト 公式サイトへのURLはこちら。 React Studio https://reactstudio.com/ ツールの使い方 ReactStudioでコンポーネントをデザインします。 その後、コードが自動生成されます。 無料で

vim以外のエディタでコード書くと私の手は産まれたての子鹿みたいになります。 効率よくコーディングをしてもらうために、新人やvimを学びたい人にvimの研修を実施しています。今回は研修で非常に有効だった内容についてまとめておきます。 ※ なんだか誤解を生んでしまっているようなので追記しておきます。vimの研修は新人研修の一環として行ったわけではなく、vimを使って開発をしたがっていた新人へテスト駆動開発の研修を実施した際に並行して盛り込んだだけです。会社がvim強制とかではないのでご安心ください。言葉足らずで申し訳ありません。 2つの繰り返しキーの存在を認識させる vimは一度実行したコマンドの組み合わせを記憶する.(ドット)とfを使った移動の際のキーストロークを記憶しておく;(セミコロン)があります。これらを駆使することで他のエディタよりも高速な編集作業を行えます。 セミコロンはus配列

2018/1/1時点で利用可能な、オープンデータの主要取得先を記載します。 1. 世界中の国や都市の情報 EUとイギリス Public Data EU http://publicdata.eu Open Data Europe http://data.europa.eu/euodp/en/home UK Government Data https://data.gov.uk アフリカ Africa Open Data https://africaopendata.org Code for South Africa http://code4sa.org Code for Africa https://codeforafrica.org アジア Open Cities Project http://www.opencitiesproject.org Open Nepal http://data

【ドキュメントが書きたくなる】Markdownライブプレビュー + インライン数式/UML/図表 + 綺麗にPDF/WordエクスポートまでPandocATOMumlPlantUML これはなに インライン数式、UML、図表をライブプレビューしながらMarkdown+αで記述でき、PDF/Word/HTMLなどへのエクスポート機能をもつAtomプラグインmarkdown-preview-enhancedを紹介します。 これを使うと、ドキュメント作成が捗ること間違いなし。 Github上では、Packageは2016年3月に開発スタートし、継続して成長しています。 (16.9.23追記) 図表を含めたexportは、pdf, html exportでは使えるが、pandoc では未対応(Issue #138, pandoc export機能詳細)。word形式を使いたい時に課題あり。取り込み

2017年ももう終わりなので、自分用のメモも兼ねて今年触った技術をざっとメモしてみる。 フロントエンドに対しては大凡モダンなものを使っているけれど、他についてはその限りではないので、自分が古いと感じるものについては来年以降移行したいもの、手をつけたいものもあわせてまとめる。 ちなみに今年のGitHubで見えるだけのアクティビティとしてはこんな感じ。そこそこコードは書いた。 技術の分類 とりあえず以下でカテゴライズしておく。そこそこその他はありそう。 Webフロントエンド Webバックエンド その他Node周り インフラ / ミドルウェア Webサービス(クラウド周り) まとめ Webフロントエンド フレームワーク周り 基本的に去年に続きVue.jsが中心でコードを書く機会が多かった。体感Vue:React:Angularが7:2:1くらい。他もちょこちょこというところ。一定以上有名なもので

PySpa統合思念体です。これからJavaScriptを覚えるなら、「この書き方はもう覚えなくていい」（よりよい代替がある）というものを集めてみました。 ES6以降の難しさは、旧来の書き方にプラスが増えただけではなく、大量の「旧来の書き方は間違いを誘発しやすいから非推奨」というものを作り出した点にあります。5年前、10年前の本やウェブがあまり役に立たちません。なお、書き方が複数あるものは、好き嫌いは当然あると思いますが、あえて過激に1つに絞っているところもあります。なお、これはこれから新規に学ぶ人が、過去のドキュメントやコードを見た時に古い情報を選別するためのまとめです。残念ながら、今時の書き方のみで構成された書籍などが存在しないからです。 たぶん明示的に書いていても読み飛ばす人はいると思いますが、すでに書いている人向けではありません。これから書くコードをこのスタイルにしていくのは別にいい

転職ナビのフロントエンドを担当しています、@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ファイルを開く 使い方

この記事はVim2 Advent Calendar 2017の19日の記事（代打）です。 この記事ではmacOS High Sierraでvimの挿入モードに入ったり、挿入モードから出た時にIMEの状態を自動で切り替える方法を説明します。 私はATOKを使っていますが、標準の日本語入力やGoogle IMEを使っていても少しの修正で使えると思います。 挙動としては、挿入モードを抜けた時にIMEの状態を記憶して、挿入モードに入ったときに復元する感じです。 まず最初に、環境設定＞キーボード＞入力ソースでお好みの英語の入力用ソースを追加します。私の場合はU.S.を追加しました。 結果として入力ソースは以下の画像のようになります。 そして、macOSのIMEをcliで切り替えたりできる、swim を入れます。 IMEを切り替えながら swim list --current を使って、日本語と英語の

どうも。フロントエンドエンジニアの @Quramy です。 さて、前回、1日10万枚の画像を検証するためにやったことで書いているとおり、reg-suitという画像に特化した回帰テストツールをメンテしています。 画像回帰テストという文脈において、差分の可視化方法はとても重要なファクターです。なぜなら、画像(=スナップショット)に差分が発生したからといって、それすなわち棄却、というわけではなく、その差分の内容を判断して、意図せぬ変更であれば棄却、意図した変更であればexpectedを更新する必要があります。すなわち、ワークフローに目視による差分のレビューが発生するのです。 そこで、少しだけ異なる2枚の画像について差分を効果的に可視化する、というテーマに向き合ってみました。 主にC++とOpenCVでの実装ですが、これらの知識が無くとも読めるよう、コードやAPIへの言及を少なくして、中間画像で説

前提 Mac,Java,Junit5 Windowsのショートカットキーも分かる範囲で記載しています。 はじめに 現在、2017年10月に和訳版が発売された「テスト駆動開発(https://www.amazon.co.jp/dp/B077D2L69C/)」を読んでいます。 本書の中に出てくるソースコードを写経することでより実践的に学べるということで、IntelliJ Ideaを使って写経しています。 写経の中で私が学んだ、IntelliJ Ideaでテスト駆動開発を進めるために使えるショートカットを紹介したいと思います。 ※ほとんどIntelliJ Ideaの公式チュートリアルの内容です。詳細は公式チュートリアルを参照してください。（https://www.jetbrains.com/help/idea/tutorial-test-driven-development.html) テスト駆

この記事は「WACUL Advent Calendar 2017」の18日目です。 WACULでフロントエンドエンジニアをしている@bokuwebと申します。 本記事ではファミコンのエミュレータの実装について解説していきたいと思います。 2018/11/21 追記 重複しますが以前発表した資料も合わせて参照してください。 はじめに 以前ファミコンエミュレータをJSで実装した記事を書きました。 開発過程の雰囲気はこちらを参照していただけると掴めるかと思います。 上記の記事では技術的な内容にはほぼ触れなかったため順に解説していこうと思います。 今回はまずはHello, World!までに焦点をあてて解説してみたいと思います。ファミコン関連の解説は検索すると結構ヒットはするのですが、ファミコン本体の解説が多く、エミュレータを実装するにあたり、どのような手順で進めてくのが、どのような点に気をつける

本記事はU-TOKYO AP Advent Calendar 2017の17日目です. はじめに 年の瀬が近づき何かと出費がかさむ季節になりましたね. 財布の中も真冬です. 実は2ヶ月ほど前から年越しに備えて仮想通貨で資産運用をしています. 他の資産運用と比べたときの仮想通貨取引のメリットは「少額でも大きな利益を得るチャンスがあること」と「24時間365日取引ができること」でしょうか. ということで, その時に自動取引についていろいろと試行錯誤をしたので, 勉強したことをまとめて記事にしたいと思います. 具体的には, PythonでbitFlyerのAPIを叩いてチャートを描画し, 決められたアルゴリズムに従って自動でビットコインの売買をする, という一連の流れを紹介します. ごく簡単な紹介にとどめるので, その先は各々で試して自分なりのやり方を考えてほしいです. *僕は仮想通貨に関しても

このエントリは、ex-mixi Advent Calendar 2017の16日向けに書いたものです。 ex-mixi Advent Calendar 2017は、ミクシィを卒業したメンバーが次々と近況などを書いているカレンダーです。僕はミクシィに2009年に入社して2013年まで在籍していました。もう少しで4年間ってところの手前で離れた感じです。その後、LINEに移って、mixi Platformの経験を活かして、LINE Platformの構築を3年ほどやってました。未だに「あ、OpenSocialの人だ」って指をさされることも多いですが、そんな感じです。 前の日、つまり15日分の投稿は、エンジニアを辞めて1年が経ちました ~ ex-mixi Advent Calendar 15日目でしたが、僕のIDが3回も登場していて、朝読んだんですけど笑ってしまいました。ソフトウェアエンジニアとし

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