Terraform AWSのインフラ構成はTerraform管理してる. tfstateを分割する tfstateが1つのままだと、Terraformのresourceを増やしていったときに 頻繁に更新するresourceとそうでもないものがある 適応するのに時間が掛かる エラーの切り分けしずらくなる ということからtfstateを分割してる。 ただ分割しすぎると、適応漏れや適応順番が複雑になるので2つに分割してる。 . ├── environments │   ├── immutable │   │   ├── backend.tf │   │   ├── main.tf │   │   ├── provider.tf │   │   └── variable.tf │   └── mutable │   ├── backend.tf │   ├── main.tf │   ├── ou

今日からはじめるCI/CD ─ CircleCI + Deployerでテストとデプロイを自動化しよう！【休日個人開発】 プライベートでも何か作りたい！ そんなときの「今日からはじめる休日個人開発」シリーズ、今回はテストやデプロイをGitHubと連携し、自動化させてCI/CDに対応します。 皆さん、プライベートで何か開発していますか？ 「何か作りたい」という気持ちはあるものの、いまひとつ何から始めたらいいのか分からず、動けないままの人も多いと思います。 そんな皆さんのために、「仕事以外にも休日に個人で気軽に何かを作ってみよう！」という企画の第3回です。第1回で用意した開発環境と、第2回で作成した画像を加工するツールを用いて、テストとデプロイの自動化を行います。 これまでの休日個人開発シリーズでは、Webアプリケーションを動作させる本番環境にログインし、動作しているファイルを直接修正して開発

はじめに サーバーサイドプログラミングを勉強していると、自分でWebサービスを作りたいという気持ちがわいてくるものです（私はそうでした）。しかし、ここで大きな問題が立ちはだかります。どんなにすごい機能をつけても、いい感じのデザインのWebサービスでないとそもそも使ってもらえないのです。 試しに、QiitaのトップページのCSSを無効にしてみました。使える機能は変わらないはずなのに、全く使う気が起きなくなりますね。 しかしそうは言っても、フロントエンドの経験がほとんどないとどうすれば見た目をいい感じにできるかがわかりません。今回は、ちょっとでも見た目のいいWebサービスを作るために、そんな状況の私がやってみたことをまとめました。 (この記事は、あくまで私が試行錯誤した結果をまとめたものであり、その結果出来上がったサービスの見た目の良さを保証するものではありません) 書いている人のプロフィール

この記事について 「GoogleAnalyticsの設定、どうしたらいいんだっけ...」と迷ったときのためのレファレンスです。 新規のサイトを立ち上げる時・GAの再設計がしたくなった時に参照してください。 のちのちアクセス解析しつつ改善していくために、できるだけ汎用的にデータを拾っておく 可能な限り、非コーダーができる作業で完結させる というのをテーマにまとめました。 STEP 0: GTM・GAのアカウントを取得 Googleのアカウントがあれば、驚くほど簡単に取得できます。 GoogleAnalyticsのアカウントを作る GoogleTagManagerのアカウントを作る 基本的には、GoogleTagManager（以下、GTM）経由でGoogleAnalytics（以下、GA）を導入します。GTMの使い勝手がよいのはもちろん、GAをカスタマイズしたくなったときに、コーダーの手を借

海外のデザイナーのポートフォリオを見るのに便利なサイトの紹介です。 Bestfolios - UI/UX Design Portfolio Inspiration and Showcase ポートフォリオだけでなく、次の４カテゴリで情報がまとめられています。 Portfolios（ポートフォリオ） Resumes（履歴書） Resources（デザイン素材） Articles（投稿記事） オススメなページ順に、簡単に内容を紹介します。 Articles（投稿記事） ポートフォリオに関連した記事が読めます。 今のところ４記事しかありませんが、いずれもタイトルの魔力がすごい。 Google Designer Portfolio Collection 1 Facebook Product Designer Portfolio Collection 1 10 great fonts you may

🤔 前書き 稀によくある 、AWS を不正利用されちゃう話、 AWSで不正利用され80000ドルの請求が来た話 - Qiita 初心者がAWSでミスって不正利用されて$6,000請求、泣きそうになったお話。 - Qiita AWSが不正利用され300万円の請求が届いてから免除までの一部始終 - Qiita ブコメ等で GitHub にはアクセスキーを検索するBOTが常に動いていて、公開するとすぐに抜かれて不正利用される 的なコメントがつくのを何度か目にしたのですが、 本当にそんな BOT が動いているの？ どのくらいの時間でキーを抜かれて、不正利用が始まるの？ というのが気になったので、検証してみました。 GitHub にそれっぽいパブリックリポジトリを作成、権限が一つもついてない AWS のアクセスキー＆シークレットアクセスキーをうっかり公開、外部から利用されるまでの時間を計測します。

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

作成：2016/12/26 更新：2016/12/26 Webデザイン > ページを消した時やリンク切れなんかで、味気ない404ページが表示されると悲しくなりませんか。というよりもユーザーは確実に離脱してしまうでしょう。あまり目立たないページだからこそ、手が込んだレイアウトになっていると感動します。 デザインが普通でも、検索窓や内部リンクがあると好印象。今回は404ページを作る時に参考になりそうなギャラリーやエフェクトをまとめました。 エンジニア速報は Twitter の@commteで配信しています。 404ページとは 404ページとは、ページが存在しない旨を伝えるエラーページのことです。ステータスコード200 OKは「リソースが正常」という意味で、ページが正常に表示されていることを示し、300番台はリダイレクト、400~500番台はエラーであり、404は「リソースが存在しない、探したけ

ﾃﾞｰﾌﾟﾗｰﾆﾝｸﾞはコモディティ化していてハンダ付けの方が付加価値高いといわれるﾋﾟ-FNで主に工作担当のtai2anです。 NHKで全国放送されたAmazon Picking Challengeでガムテべったべたのハンドやロボコン感満載の滑り台とかを工作してました。 とはいえ、やっぱりちょっとディープラーニングしてみたいので1,2か月前からchainerを勉強し始めました。 せっかくなので線画の着色をしたいなーと思って色々試してみました。 線画の着色は教師あり学習なので線画と着色済みの画像のデータセットが(できれば大量に)必要です。 今回はOpenCVでカラーの画像から線画を適当に抽出しています。 抽出例 → カラーの画像を集めて線画を作ればデータセットの完成です。（今回は６０万枚くらい使っています） ネットワークの形ですが、U-netという最初の方でコンボリューションする時の層の出

今年の 7 月にcreate-react-appがリリースされ、僕の観測範囲内ではかなり話題となりました。 昨晩、React コンポーネントの素振りを目的として初めて使ってみたのですが、なかなか便利だったので、素振り+GitHub Pages へデプロイするまでの作業メモです。 前提 あくまでcreate-react-appを Web アプリの開発用途としてではなく、React コンポーネントの素振りを目的として使います。そのため、詳しい使い方については触れません。 詳しい使い方については以下が参考になるかなと思います。 create-react-app Facebook 公式の create-react-app コマンドを使って React.js アプリを爆速で作成する - Qiita また、公式のドキュメントには GitHub Pages へのデプロイの他に Heroku なんかも記載

これまでGitHub Pagesの存在は知っていましたが、特に使うまでには至っていませんでした。プロジェクトのデモページなどもjsdo.itなどを使ったりしていましたが、最近になってやっとGitHub Pagesが使えるじゃないかということに気づき、今更ですがGitHub Pagesについて調べることにしました。いろいろドキュメントなどを見てみると、なかなかGitHub Pagesは面白い機能がてんこ盛りだなということがわかりました。今回はその辺りをまとめてみました。 GitHub PagesとはGitHub PagesはGitHubのサービスのひとつで、GitHub上のリポジトリにアップされたコンテンツを利用してWebページとして公開することができるホスティングサービスです。開発者自身やプロジェクトのためのページ（静的ページのみ）を作ることができます。 GitHub Pages – Gi

※ 本記事は自分が運営するブログに転載しています 株式会社LITALICOでWebエンジニア（Rails）を担当しています、@YudaiTsukamotoです。 この記事は『LITALICO Advent Calendar 2016』16日目の記事です。 はじめに 私は学生時代は情報工学の専攻でもなければ、趣味でプログラミングをやっていたわけでもなく、 社会人になってWebエンジニアとして初めてまともにプログラミングを勉強し始めました。 入社するまでに独学で勉強の真似事をしてはいましたが、そもそもどうやって勉強していいのか全然わからず、 本を読んで写経をして何故だか理由はよくわからないが動作してしまうミニブログを眺めては、ため息を付いて挫折を繰り返しておりました。 そんな初心者だった自分が、Webエンジニアとして食べていくために本気で努力して身につけたノウハウを、 「プログラミング勉強を加

ピクシブ株式会社 Advent Calendar 2016 @8日目の記事です。 こんにちは、エンジニアのdo7beです。pixivFANBOXの開発などに携わっています。 さて、今回は新規開発プロジェクトに「割れ窓理論」を導入してサービスのクオリティ向上に繋がった話をご紹介したいと思います。 割れ窓理論とは 「割れ窓理論」とは、アメリカの犯罪学者ジョージ・ケリング氏が提唱した「建物の窓ガラスが割れたまま放置されると住民もゴミを捨てるようになり、治安が悪化し、より重大な犯罪が発生してしまう」という理論です。 つまり軽犯罪を取り締まることこそが、重大な犯罪を防ぐために重要であることを指しています。 私たちのチームではこれをWebサービスの新規開発プロジェクトに取り入れています。 WEBサービスにおける割れ窓は「軽度のデザイン崩れ」や「表記ゆれ」に、重大な犯罪は「バグ」や「全体のクオリティ低下

トレタ アドベントカレンダー3日目担当の増井です。 最近、新しいサービスリリースに少し関わることがあり、そこに向けてオススメした開発で役に立つサービスをここでもまとめてみることにしました。 私が、実際にトレタやキタヨンを作るときに使ったサービスを中心に上げています。特に使った方がいいサービスには [必須]を書いてみました。 他にもオススメのサービスがあったら、コメントで教えていただけると嬉しいです！ BrowserStack [必須] https://www.browserstack.com http://qiita.com/tags/BrowserStack 言うなら"Browser as a service"。色々なブラウザをリモートで操作してWebの動作確認をしたり、指定したURLのスクリーンショットを多種多様なブラウザで撮ってきてくれるサービス。 Chrome Extensionを

webサイトやアプリなどのUIデザインに悩んだときに参考になるデザインギャラリーを全20サイト紹介します。 よくあるコンポーネントのデザインや配置の仕方、カラーの組み合わせ方を眺めるだけでなく、ギャラリーによってはクールなものからユニークなものまである様々なアニメーションをまとめているところもあるので、デザイン以外の部分でも参考になるギャラリーもいくつかあります。 また、悩んだ・困ったときに見るだけでなく、お気に入りのギャラリーがあればブックマークやフィード登録などして普段から空いた時間に目を通すことでデザインの引き出しも増やせますね。 Calltoidea 細かいコンポーネントからページ全体のレベルまで様々なデザインがまとめられています。 カテゴリーを表すアイコンもわかりやすく参考デザインのキャプチャも大きくて見やすいので、個人的によく見るギャラリーサイトのひとつです。 Collect

iPhoneアプリを個人で作り始めてから5年ほどになるけど、アプリ開発や運用でかかせないサービスをまとめてみた。 それぞれに競合サービスがあったりするけど、いくつか使ってみて、最終的に本当に使うようになったものだけ書いてみる。プログラミングする時に使うツールというより、アプリを作った後の運用とか、分析とか、そっち系のサービスがメインのランキング。 iOSアプリにしか使ってないけど、Androidで使えるものも多い。 10位 Iconfinder（無料+有料） https://www.iconfinder.com/ アプリはWebサービスに比べて画面が小さいのでビジュアルデザインが楽。実質、フリーのアイコンとか有料のアイコンを利用するだけで事足りることが多い。僕はまず有料のアイコン集を買って、それでカバーできない時はこのサイトから検索してます。 例えば、フラットデザインのリロードアイコンを検

今回はひたすら配色パターンを紹介していく。探しやすいように色ごとに分け、使いやすいように解説とWebコードも合わせて紹介する。プレゼン資料、Webデザインなどで目的に合った配色をそのままコピペして使って頂ければと思う。 ▼ 目次 カラフルな配色パターン 橙系の配色パターン 青系の配色パターン 緑系の配色パターン 黄色系の配色パターン 赤系の配色パターン 高級感を表現する配色 わび・さびを表現する和風配色 シンプルに格好良いグレーの配色 カラフルな配色パターン 1. 淡い「カラフル」 ■ #FF7D7D ■ #FFD580 ■ #B3E2B4 ■ #ABE7FF ■ #B8B2EA ■ #DBDBDB 淡いカラフルな配色は、白の背景に合わせると「透明感」を出すのに効果的。カラフル系の配色は扱いづらいので、上のコードをそのままコピペして使って頂くのが良いかと思う。 2. 力強い「カラフル」 ■

１．うずらフォント（手書きフォント系） ▼ぜんぶうずらフォントです。 手書きフリー日本語フォントはたくさんありますが、最近はこれがお気に入りです。 ゆるい感じが可愛らしい。 ちょうど下手すぎず、上手すぎずがちょうどいいんですよね！ このフォントの使いみち ダウンロードはこちらから ２．Noto Sans Japanese /a 源ノ角ゴシック（ゴシック太さ多数） GoogleとAdobeからこのフォントが発表された時、デザイナーは沸きました。 しかし思いません？ winならメイリオとかmacヒラギノとか最初から入っているフォントでいいよ！ ぼくも、そう思います！ あーでも、しかし１つだけこのフォントが便利な点があるんです。 それは 文字の太さの種類がある これが大事なんです。デザインを作る時に便利！ OSに最初に入ってるフォントは、太さの種類が２、３種類だと思います。 ボールドボタンで太く