背景 AWSでVPC作ったりしたことあるけど、GCPやったことないって人は色々違いに戸惑う アカウントの関係性、ネットワークの概念の違いなどを理解したのでまとめた AWSとGCPのアカウントの考え方の違い AWSの場合、ある人間に対して色々なAWSアカウントが付与される。 (人間) -> 個人で発行されたアカウント -> 会社で発行されたアカウント GCPの場合、ある人間は色々なプロジェクトというものに属することができる。 そして、その人間が使うアカウントはGmailとかで使ってるようなGoogleアカウントである。 (人間 with Googleアカウント) -> プロジェクト 会社のやつ -> プロジェクト 何の関係もない個人のやつ GCPの方が始めるのはすごく簡単な気がする。アカウント管理もGoogleアカウントさえやっときゃいいみたいな感じなので、Googleにロックインされる感は

CDN in Mercari/CDNの使い方 in Mercari Fastly Yamagoya Meetup 2017

Kubernetesは、Dockerに依存しない軽量コンテナランタイム「cri-o」正式版1.0リリースした。cri-oはコンテナランタイムとしてはDockerに競合するが、コンテナイメージなどを作る機能などは備えていない。 cri-oは、Kubernetesの育成プロジェクト（Kubernetes Incubator Project）として開発されています。 Red Hatに所属するcri-oエンジニアリングチームのDaniel Walsh氏は、cri-oのオフィシャルブログに投稿された記事「CRI-O 1.0 is here」で、Dockerに依存しないコンテナランタイムであるcri-oの開発動機について次のように説明しています。 We felt at the time that the upstream Docker project was changing too quickly

前回ここでリスニングの学習法を書いたところ思いのほか反響を得ることが出来た。 http://anond.hatelabo.jp/20170522214348 今回は実際のところどうやってリスニングしているかをまとめてみようと思う。 人はどうやって音を聞いて言葉として理解しているのかリスニングは無意識下で行われる実に精妙なプロセスで、自分でもどうやっているのか正確にはわからないが、注意して観察すれば大まかなところは分かってくる。 まず単語について。日本語は「交渉、高尚、考証、公傷、公称」のように同音異義語が多い言語だ。「こうしょう」は広辞苑で50の見出し語を持っているという。対して英語は単語の意味が時代とともに付け加わり多義的になっている。Random HouseでTakeを引くと126の意味が登録されている。 どちらにしても、音を聞いただけでは単語の意味を特定することは出来ず、文脈から単語

ChatWork社内勉強会で発表した際の資料

大人気TBSドラマ、「逃げるは恥だが役に立つ」でも話題になったインフラエンジニアという言葉ですが、今ではインターネットインフラを知らないまま開発をするのも難しい状況になっています。クラウドが一般化されたからといって単にリソースの調達が簡単になっただけで、つまりハードウェアの知識が無くても何とかやっていけるようになっただけであり、インフラの知識が要らなくなったなどということは全くなく、むしろdevopsの掛け声とともに、ソフトウェア開発者にインフラを見なければならない新たな責務が課せられたという、なかなか痺れる状況なのだろうと思います。 そういった中で、先日のさくらインターネットのAdvent Calendar最終日に「いまさら聞けないLinuxとメモリの基礎＆vmstatの詳しい使い方」という記事を書かせて頂きましたが、今回はLinuxサーバの「負荷」と、ロードアベレージに関して、掘り下げ

DMM inside（ディーエムエムインサイド）は、DMM.com Groupが運営する公式オウンドメディア（ブログ）です。 DMM.com Group の今を、人、プロジェクト、技術という切り口でお伝えします。記事を通して、DMM.com Groupの一番深くておもしろいトコロをぜひ感じてください。

スマホサイトが優勢な昨今、要素をよこ並びにする機会は減ってきているのかもしれないけれど、大きい画面で見るサイトでは、ナビゲーションやタブや、商品一覧など、よこ並びにレイアウトする機会はまだまだあるんじゃないでしょうか。そんな「よこ並びにするためのCSS」も、やり方はさまざま。お馴染みのやつから、新参者まで、順番に見ていくことにします:)。 よこ並び？ そう、よこ並び。 例えばボタンを横一列に並べたり。商品の情報なんかだと、横に3つずつ並べて改行して、多段に並べる場合もありますね。偏（ひとえ）に「よこ並び」と言えど、CSSにはそのやり方がたくさんあるんです:o。 導入 この記事で紹介するよこ並びの方法は以下の通り。 CSSの歴史的な背景から、最初はfloatプロパティを使った方法を紹介します。 float（フロート） 要素を左右へ寄せるためのプロパティ。 後続する文章（テキスト）などのインラ

あけましておめでとうございます(もう遅い？） rockdです。 突然ですが皆さん、CSSで横並びのレイアウトを作るときはどんな方法でやってますか？ ちょっと前だとfloatや、display:inline-block、display:tableなどを駆使した方法が思いつきますが、ここ最近ではFlexboxを使った新しいレイアウト方法が目につくようになってきました。 Flexbox自体は前からあり、仕様が色々と変わったりと不安定な時期が続いていましたが、それも最近やっと安定してきました。 IE以外のモダンブラウザでは対応が進んでいるので、実務でも使えるようになってきています。 今回はCSSのFlexboxでどういったことが出来るのかを説明していきたいと思います。 Flexboxとは 正しくは「CSS Flexible Box Layout Module」といいます。 CSS3から導入され、文

一度は見かけたことがあると思う、スクロールしたらヘッダーやナビゲーションを固定表示させたり見栄えを変化させたりする動きをjQueryで実装するサンプルです。 途中から要素を固定させたり、スクロールした方向によって表示・非表示を切り替えたりなど全5種類です。 使用HTML 特にこのようにしなければいけないというものではないですが、今回のサンプルで使用しているHTMLはいずれも下記のようなもの（サンプルによってはnav要素がないものもあります）になっており、このHTMLにあるheaderやnav要素に対してjQueryで処理していくといった感じになります。 <header> ...</header> <nav> ... </nav> <main> ... </main> <footer> ... </footer>

みなさんこんにちは。都内のクラフトビール専門店で店長を務めておりましたまるじです。 僕ね。日本酒だけじゃなくってクラフトビールにも興味があるんですよ。 まぁ元をたどると【発酵】という技術に興味があるといいますか。菌の世界ってとっても面白いなぁと思うわけです。 「クラフトビール」ってみなさんご存知ですか？ 飲食店を離れてから痛感してるんですけど、大半の人が日本酒のことについても、クラフトビールのことについても全っっっっっっ然知らないし、あんまり興味ないのね。 都内ならまだ触れる機会はあるかもしれないけど、少し田舎に行くと買う手段が全くないので、仕方ないのかなぁと。 最近はコンビニなんかでも少しづつ展開されるようになったり、大手のビールメーカーがこぞって参入したりしてて、じわじわとその波は来ている感はあります。 そんなこれからもっと普及していくであろうクラフトビールについて解説していきます。

日本の法規制がわかりにくい。 理由は、これにつきます。 訪日外国人の方が、日本国内でドローンを飛ばす際、法令・規制に反する形となって注意を受けるケースがあります。現状は、そうなっても仕方が無い状況です。 「そんなもん、日本に来る前に検索して、ルールを調べておけばいいじゃん」 と思っていたのですが、実際に検索してみると、さっぱりわからない。 日本の法規制はわかりにくい、と書きましたが、航空法をはじめとする法令・条例がわかりにくい、ということではありません。実際にどのようなレギュレーションとなっていて、どう運用すればいいか、が非常にわかりにくい形になっています。 日本のルールのわかりにくさ1. 検索に引っかからないあなたが外国人だとして「今度、旅行で日本へ行くついでに、ドローンを飛ばして景色を撮影してみようかな～」と思ったとします。 その際、まず最初に、どういう法規制になっていて、ルールに違反

どうも、まさとらん（@0310lan）です。 今回は、ブラウザ上からWeb制作などで便利に使えるミニツールを190以上も搭載した異色のWebサービスをご紹介しようと思います！ 特に、ファイル関連のジェネレーターやコンバーターが豊富に揃っているのが特徴で、コンソールからタスクランナーなどを起動する必要もなく、フロントエンド側だけでちょっとした制作を行うのに最適だと思います。 【 BeautifyConverter 】 「BeautifyConverter」は、主にファイルの「圧縮」「整形」「変換」などから「構文チェック」「画像変換」「各種ジェネレーター」…など、多種多様な便利ツールが揃っています。 登録不要で、誰でも今すぐブラウザから利用できるので、ブックマークしておいて損はないでしょう！ ■基本的な使い方！ 「BeautifyConverter」の基本的な使い方を実際に試しながら、どのよう

どうも、まさとらん（@0310lan）です。 みなさんは、「CSSフレームワーク」を活用しているでしょうか？ いきなりフレームワークと聞くと、「なんだか難しそう…」と思ってしまうかもしれませんが、最近は誰でも利用できるようにシンプルな設計で公開されているモノが増えています。 そこで今回は、多機能でありながらも学習コストが低い「CSSフレームワーク」を厳選し、レスポンシブ対応でモバイルに優しいものをいくつかご紹介しようと思います！ ■CSSだけで多彩なサイトを構築できるフレームワーク！ 【 Picnic CSS 】 Web制作に必要なコンテンツを、とにかく簡単な手順で手っ取り早く構築できるように設計されているのが「Picnic CSS」です！ 特に、Flexboxを活用した非常に柔軟なグリッドレイアウトや、JavaScript不要でインタラクティブな要素を構築できる機能などはとても便利だと思

バックアップと障害復旧から考えるOracle Database, MySQL, PostgreSQLの違いRyota Watabe

【Angular2入門】TypeScriptをコンパイルからのWatchifyでファイル結合、ブラウザで動作確認するところまで - Gulpで作るwebフロントエンド開発環境 wakamsha 2016.10.03 70 15101629 正式版もリリースされたことだし、そろそろ Angular2 を始めてみませんか？ 2016年9月15日に Angular2 の正式版がしれっとリリースされました。前バージョンの AngularJS 1.x は独自の路線で HTML や Web フロントエンドを拡張するといった志向のフレームワークでしたが、2系は 1.x系の魅力でもある豊富な機能は引き継ぎつつ、より web 標準に寄り添った実装となっているのが特徴です。 One framework. - Angular これまでは β版の期間が続いていたためになかなか手を出せずにいましたが、ここにきてよう

React.js（以下、React）は、Facebookが作ったJavaScriptのビュー・ライブラリです。最近よく耳にするけどあまり理解していないという人も多いのではないでしょうか。 そこで今回は、 「Reactって最近よく聞くけど一体何？」 「jQueryと何が違うの？」 といった疑問にこたえてくれる初心者向けのスライドを厳選して紹介します。JavaScriptは苦手だけど概念だけは理解したいといった人のために、なるべくわかりやすいものを選んでいます。 ＊もし、「このスライドもおすすめ」というものがあったら教えてください。 Reactとは？ なぜ人は必死でjQueryを捨てようとしているのか なぜjQueryを捨て、Reactを採用しようとするのかについて説明してくれるスライドです。ページ遷移のないシングルページアプリケーション（SPA）への需要が増えてきているといった最近のトレンド

HTTPステータスコードを返すというのはとても単純なことです。ページがレンダリングできた？よし、それなら 200 を返しましょう。ページが存在しない？それなら 404 です。他のページにユーザをリダイレクトしたい？ 302 、あるいは 301 かもしれません。 I like to imagine that HTTP status codes are like CB 10 codes. "Breaker breaker, this is White Chocolate Thunder. We've got a 200 OK here." — Aaron Patterson (@tenderlove) 2015, 10月 7 訳：HTTPのステータスコードのことは、市民ラジオの10コードみたいなものだと考えるのが好きです。「ブレーカー、ブレーカー、こちらホワイト・チョコレート・サンダー。200