サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
掃除・片付け
kuroeveryday.blogspot.com
masterブランチ、ぶっ壊しました!! 転職して1ヶ月たたないくらいのできごと。 しかも、masterブランチが変更されると自動デプロイが走って本番環境にリリースされてしまうため、直すまで生きた心地がしなかった。 こんな怖い目にあってほしくないので、ぜひgitを使う前に設定していただきたい。 何をやらかしたか? コンフリクトをおこしたfeatureブランチをrebaseしてPullRequestを作りたかった。 その際、以下のコマンドを実行してmasterブランチを壊してしまった。 $ git push -f 具体的に何をしたのか? 1. 開発ブランチをチェックアウトし、最新化する [master]$ git checkout develop [develop]$ git pull --ff ※ コマンド先頭の[]で囲っているのはカレントブランチ 2. featureブランチをrebas
この記事は本番環境でやらかしちゃった人 Advent Calendar 2019 17日目の記事です。 はじめまして、ダーシノ(@bc_rikko)です。 突然ですが、懺悔します。 私は転職して10ヶ月で2回も本番環境をぶっ飛ばしました。お客様をはじめ、関係各位には多大なるご迷惑をおかけしたことを、ここでお詫び申し上げます。 1回目は2015年11月27日、入社27日目のこと。 gitの設定ミスにより壊れたブランチをmasterにforce pushしてしまい、CIが流れて本番環境が壊れた。原因はpush.defaultなのだが、詳しくはすでに記事を書いているのでそちらを読んでほしい。 2回目は翌年9月1日、入社してちょうど10ヶ月たった日のことだ。 またしても本番環境をぶっ飛ばした。しかも、前回より盛大に……。 タイトルにもあるようにrsyncコマンドが原因だ。 当記事では、この「rsy
この記事はCSS Advent Calendar 2019 9日目の記事です。 CSS Custom Properties、ときにCSS変数やCSS Variablesとも呼ばれているプロパティがある。昨今のダークモード等のテーマ変更の需要の高まりとともに、多くのウェブサイトで使われるようになった。 たとえば、CSS Custom Propertiesを使うと以下のようにCSSだけでOSのテーマを判別し、ダークモード表示ができる。 /* Default / Light Theme */ :root { --color: black; --background-color: white; } /* Dark Theme */ @media (prefers-color-scheme: dark) { :root { --color: white; --background-color: bl
9月上旬にGitHubから「You're in! Get started with GitHub Actions beta」というメールが届いた。どうやら以前した利用申請が通り、個人アカウントでGitHub Actionsのベータ版が利用できるようになったらしい。 ちょうどJSライブラリを開発していたので、そのリポジトリでGitHub Actionsを使ってCI(継続的インテグレーション)の設定をしてみたので、その使い方や解説をする。 GitHub Actionsとは 一言でいうと、GitHub上で完結するCI/CDサービス。 いままでCircleCIやTravisCI、Drone CIなど外部のサービスを使っていたところを、GitHub上で実行できるサービスだ。 昔はTerraformなどで使われているHCL(HashiCorp Configration Language)を用いて設定フ
2019年7月24日にUIT meetup vol.7 - 集まれ!(タブン)実務では使わないフロントエンド芸発表会に、CSS芸人として登壇した。 UIT meetupとは、ReactやVue.js、BFFなどのフロントエンド技術を扱った至ってマジメなイベントだ。そんな中、主催者から「次はテーマをかえてフロントエンド芸人を集めたイベントがしたい」とお誘いがあり、CSS芸人として参戦してきた。 当記事は、UIT meetupで発表した内容をスライドと共に文字起こししたものである。 ※ 当記事には多くの画像が貼られているため、読み込みに時間がかかる可能性があります。 公式レポート記事: https://engineering.linecorp.com/ja/blog/uit-meetup-vol7/ 本気でCSS芸やりたい人のためのbox-shadow講座 CSS芸人、あらためbox-shad
これに対し、4パターンのリクエストを投げて実験を行った。 http://example.com/path http://example.com/path/ http://example.com/path-test http://example.com/path/test 末尾スラッシュ(Trailing Slash)による挙動の違い 結論から先にまとめる。 location locationの末尾スラッシュがない場合は前方一致、ある場合はURIの完全一致になる。 結果は以下のとおり。 location /path http://example.com/path → OK http://example.com/path/ → OK http://example.com/path-test → OK location /path/ http://example.com/path → 301 M
Nuxt.jsには簡単にプラグインを追加できる仕組みがある。createdやmothodsなどを拡張するmixinタイプや、ElementUIなどコンポーネントタイプ、vueインスタンスにコンテキストを注入してthisを拡張するタイプなどがあるのだが、TypeScriptと併用するとProperty $logger does not exist on type 'Store<RootState>'のようなエラーが発生する。 今回はvueインスタンスを拡張し、vueファイル(SFC)とstore内でthis.$xxxにアクセスするための型定義の作り方について紹介する。 プラグインを実装する サンプルのためLoggerプラグインを実装する。 // /plugins/logger.ts export class Logger { private readonly isDev: boolean c
会社でRedisを使っているサービスがあり、そのメンテナーになった。RedisがIn-Memory Databaseということは知っていたのだが、その他の特徴や操作方法などまったくわからないので、チュートリアルを中心に手を動かしながら学んだことをまとめていく。またNode.jsからRedisにアクセスする方法もあわせて紹介する。 Redis の特徴 Redisはメモリー上にデータを保存するKey-Value型のNoSQLデータベースのひとつ。用途はデータベースだけにとどまらず、キャッシュやメッセージブローカーとしても利用される。 In-Memory Database RedisはIn-Memory Databaseなので、On-Disk Databaseと比べ非常に高速に動作する。ちなみにIn-Memory DatabaseとOn-Disk Databaseの違いは以下のとおり。 インメモ
国内向けのサービスであっても在日外国人が使うこともある。そういった背景から昨今、国際化対応(多言語化対応)の重要度が増している。とはいえフロントエンドエンジニアがウェブアプリケーションを開発しながらメッセージ翻訳を行うには限界がある。できれば翻訳作業はローカリゼーションチームに任せたい。 しかし、ローカリゼーションチーム(非エンジニア)にgitを使って言語ファイルをダウンロード、JSONやYamlファイルを見ながら翻訳、終わったらPull Requestを作ってもらうというのは少し酷だろう。もちろんJSON→Excel→翻訳→JSONなんてことはしたくない。 そこで当記事ではTransifexとvue-i18nを使って、国際化対応におけるフロントエンドチームとローカリゼーションチームのコラボレーション環境の構築方法について紹介する。あわせて実運用で得たノウハウを共有しようと思う。 また、当
スライドショーみたいに1ページずつスクロールするウェブサイトをつくりたく、いろいろ調べた結果、One Page ScrollというjQueryのプラグインを使うことにした。 いまならfullPage.jsだろ?というツッコミを受けそうだけど、そこまで多機能でなくて良いし、なにより軽量でシンプルなほうが良いという人にオススメだ。 One Page ScrollとfullPage.js One Page Scrollは、iPhone5sのようなウェブサイトをつくるために開発されたjQueryプラグインだ。iPhone5sという時点で時代を感じる。 そしてより多機能に、より使いやすくしたのがfullPage.js。 ただ、「スライドショーみたいなウェブサイトがつくりたい」という目的を果たすためだけなら、OnePageScrollで十分だろう。 jquery.fullPage.min.jsが29.
中〜大規模アプリケーションを開発するノウハウを持っておらず、どのようにシステム設計するのが良いのかわからなかった。そのため、1週間ほどドメイン駆動設計(Domain-Driven Design)について勉強した。 当記事では、勉強中に得たドメイン駆動設計をわかった気になれるのに必要な用語のまとめや、実装でどのように使われるかをまとめる。 筆者は「実践ドメイン駆動設計」を読んだわけでも、完全に理解したわけでもない。しかし、雰囲気を掴むための情報はわかっている状況なので、間違っている箇所があったら指摘していただきたい。 ドメイン駆動設計とは? ドメイン駆動設計(DDD、Domain-Driven Design)を一言で説明すると「現実世界の業務をドメインモデルに詰め込んでソフトウェアに深く反映させる設計手法」だ。 詳しい説明は後述するが、ドメイン駆動設計の全体図は下図のような感じだ。 ドメイン
ファミコン風(8bitライク)なCSSフレームワーク「NES.css」を、2018年12月19日に正式リリースした。開発した経緯や、タイムライン、OSS活動の感想、「そのロゴ、SNESじゃね?」の反論を書こうと思う。 つくったもの ウェブサイトを懐かしいファミコンテイストにしてくれるCSSフレームワークを開発した。口で説明するより、実際にデモサイトを見ていただいたほうがわかりやすいだろう。 GitHub Trending Developers、RepositoriesでWeekly1位獲得! タイムライン 9月22日: 8bit.cssを開発(NES.cssの前身) 9月24日: NES.cssアルファ版開発開始 11月15日: Vue.jsコアメンバーのkazuponさんにStarをいただく Starをいただいたときはまだ5つくらい これを期にアジア勢にNES.cssが広がる 11月18
頭の体操のためにCanvasを用いたフィルタリングを学びはじめた。 当記事では、画像フィルターの中でも(独断と偏見で選んだ)代表的な9つの画像処理アルゴリズムを解説する。 グレースケール 色調反転(ネガポジ変換) 二値化 ガンマ補正 ブラー(ぼかし) シャープ化(輪郭強調) メディアンフィルタ エンボス モザイク たたみ込み演算を知らなくても、理解していただけると思う。 Canvasを用いた画像処理の基礎 当記事では、HTML5で導入されたCanvas要素を用いて画像処理(フィルタリング)を行う。 まずはCanvasに画像(フィルタをかける対象)を表示する。 // Canvas要素の作成 const canvas = document.createElement('canvas'); document.body.appendChild(canvas); // 描画するための2Dコンテキスト
仮想DOMのフレームワークを開発しその解説記事を書いているときに、自分がDOM、Node、Elementの違いを正確に理解していないことに気づいた。頭の中でふんわりとDOM≒Node≒Elementという理解になっていたのだ。 ということで、この3つの違いについて調べた。 DOM とは Document Object Model は HTML と XML ドキュメントへの API です。これは、ドキュメントの構造的な表現、その内容を変更可能にすること、そして視覚的なプレゼンテーションを提供します。本質的には、ウェブページをスクリプト又はプログラミング言語と結合します。 DOM (Document Object Model) について - DOM | MDN JavaScriptからHTMLドキュメントを操作するためのインターフェース、およびデータ構造のこと。JavaScriptからHTML
昨今の代表的なJavaScriptフレームワーク(React、Vue.jsなど)には「仮想DOM(Virtual DOM)」という概念が採用されているので、フロントエンド界隈の人は一度は耳にしたことがあるだろう。ただ、仮想DOMについて学ぼうと検索してもヒットするのは「フレームワークの使い方」ばかり。踏み込んでいても概念の説明どまりで、仮想DOMがどのように実装されているか解説した記事はすくない。 ということで、当記事では理解を深めるために仮想DOMを使ったフレームワークを自作し、仮想DOMに入門する! そして、ReactやVue.jsを単なるブラックボックスのフレームワークではなく、中身を理解して使えるようになることを、当記事の目標とする。 フレームワークが完成すると以下のようなWebアプリケーションがつくれるようになる。 TOC 記事が長くなりそうなのでも目次 そもそもDOMとは? D
ファミコン風CSSフレームワーク(NES.css)を開発するために、Sassの開発環境を整えたので共有したい。 ウェブページをスタイリングするためにはCSSを使うのだが、崩壊しやすい性質を持っている。詳細度による優先付け、スタイルの上書きなど要因はさまざま。そんな脆いCSSをちょっとでもメンテしやすくするために「Sass」というCSSを拡張したメタ言語が使われる。簡単に階層構造を作れたり、ループや関数などプログラムっぽいものが書けたりと、大きなウェブページをつくるなら必須だ。 しかし、Sassを使う上で避けては通れないものがある。 SassからCSSに変換する「コンパイル」だ。 フロントエンドエンジニアならNode.jsやwebpackを使ってできてしまうだろうが、デザイナーが手を出したら「Node.jsこわい」「webpackこわい」となりかねない。以降、コマンドラインから扱う便利ツール
CSSだけでドット絵(Pixel Art)を描く・アニメーションさせる方法を紹介する。ただ、バニラCSSだけでも大丈夫なのだが、よりメンテナブルにするためSassで描く方法も併せて紹介する。 ちなみに下図のようなドット絵がつくれる。 マリオとMinecraftの土ブロックは、CSSアニメーションをつかって動かしている。もちろんJavaScriptは使っていない。 box-shadowプロパティについて ドット絵を描くためには、CSSのbox-shadowプロパティを使う。 そもそもbox-shadowプロパティは、要素にドロップシャドウ効果(影をつける)を与えるのが本来の使い方なので、まずは基本的な使い方からまとめる。 いくつかの構文がある。 box-shadow: offset-x offset-y color box-shadow: offset-x offset-y blur-rad
Mac Book Proのインカメラを使ってバーコード(QRコードではない)を読み取れないか考えていたところ、Quagga.jsというライブラリを見つけた。 このライブラリは、画像ファイルだけでなくカメラを使ってリアルタイムでバーコードを読み取ることもできる。 今回はQuagga.jsを使って画像ファイルからバーコードを読み取れるようにする。 ※ MBPのカメラだと認識率が悪いのでどうにかしたい。 Quagga.jsでバーコードを読み取る <fieldset> <label>バーコードの画像</label> <input type="file" id="barcode"> </fieldset> <div id="preview"> </div> <fieldset> <label>結果</label> <input type="text" id="result" readonly> </
Vue CLIで生成したNuxt.jsのプロジェクトをnpm run devでそのまま実行するとhttp://localhost:3000でサーバーが起動する。Nuxt.js単体で開発する分にはこれで問題ないのだが、他サービスが関わってくるとできればhttpsでアクセスできるようにしたい。 ということで、Vue CLIで生成したNuxt.jsプロジェクトをhttps化して起動する方法をまとめる。 環境は以下の通り。 macOS High Sierra vue-cli@3.0.1 nuxt.js@1.4.2 Nuxt.jsプロジェクトをhttps化して起動する とりあえずNuxt.jsプロジェクトをそのまま起動してみる。 # vue-cliをグローバルにインストール $ npm i -g vue-cli # テンプレートを生成する $ vue init nuxt-community/star
この記事は、2018年6月29日にさくらインターネットで行われた「さくらの勉強会 フロントエンドナイト」で発表した内容を文字起こししたものの「後編」です。 発表スライド(SpeakerDeck) 前編: ゲーム開発初心者が教えるブラウザゲームのつくり方 後編: この記事 ※ [ディレクターズ・カット版]と書かれたスライドが、この記事を公開するにあたり追加したものです。 ※ この記事には多くの画像が貼れれているため、読み込みに時間がかかる可能性があります
この記事は、2018年6月29日にさくらインターネットで行われた「さくらの勉強会 フロントエンドナイト」で発表した内容を文字起こししたものの「前編」です。 発表スライド(SpeakerDeck) 前編: この記事 後編: ゲーム開発初心者が教えるブラウザゲームのつくり方 ※ [ディレクターズ・カット版]と書かれたスライドが、この記事を公開するにあたり追加したものです。 ※ この記事には多くの画像が貼れれているため、読み込みに時間がかかる可能性があります ゲーム開発初心者が教えるブラウザゲームのつくり方 まずは、自己紹介からさせていただきます。 2015年末にSIerからフロントエンドエンジニアにジョブチェンジして、さくらインターネットに入社しました。 いまは、さくらのクラウドのネタ機能開発や、自社サービスのエゴサを主な業務としています。ですので、みなさんがツイートされた
クリスマスも近いし、雰囲気だけでもとりあえずキラキラさせとけと思い、JavaScriptとCSSだけで星の煌めきみたいなエフェクトを実装した。ライブラリは何も使っておらず、IE11、MS Edge、Fireox、Chrome、Safariで動作確認済みだ。 タイトルにはソシャゲだのガチャだの書いてあるが、実際ソシャゲをやったこともないし、どんなものなのか見たこともない。ガチャなんて幼少期に100円のカードダスをやったくらいしか経験がない。 なので、自分が思うキラキラエフェクトをつくった。 イメージはこんな感じ。 キラキラ光る星っぽいエフェクトをつくる 今回は星のイメージは、ICOOON MONOの「アスタリスクの記号」をお借りした。 文字の「*」でも問題ない。 <div id="app"> <img class="character" src="https://pbs.twimg.com/
golangでAPIサーバーを開発したい!でも、何からやっていいかわからない。そんなときにはgoaがオススメだ。 goaの特徴 goaの最大の特徴はAPIデザインを書くとモック、クライアントツール、ドキュメントなどを自動生成できるところだ。 開発は以下のような手順になる。 DSLでAPIデザインを書く goagen(コードジェネレーター)で自動生成する クライアントのスケルトン テストコード CLIツール OpenAPI仕様のドキュメント APIを実装する ビルドして実行する このように人の手が入るのは「1.DLSでAPIデザインを書く」と「3.APIを実装する」だけだ。それ以外はgoagenというコードジェネレーターが自動的にやってくれる。 golang初心者の私でも、はじめて触ってから3時間くらいで動くAPIサーバーをつくることができた。 以下にgoaを使ってAPIサーバーを開発する手
仕事でRabbitMQまわりの一部システムを担当することになった。フロントエンド畑の人なので、Node.jsをつかってRabbitMQのチュートリアルをテキトーに和訳し、他で得た知識で補足しながら勉強した内容をまとめていこうと思う。 今回はチュートリアル1「Hello World!」を学ぶ。 関連記事 CentOS7.3にRabbitMQをインストールしてGUIで管理できるようにする チュートリアル1「Hello World」 ←いまここ チュートリアル2「Work queues」 チュートリアル3「Publish/Subscribe」 チュートリアル4「Routing」 チュートリアル5「Topics」 チュートリアル6「RPC」 今回学ぶこと RabbitMQの導入方法 Node.jsの導入方法 基本的なメッセージのやりとり RabbitMQを導入する 詳しくは以下の記事を参照してくだ
昼食を完全食COMPにかえて1ヶ月たったので、経緯や感想を綴ろうと思う。 完全食COMPパウダー、グミだけでなく、Natural Healthy Standard.、SAVASホエイプロテインとの組み合わせについても書く。 栄養がほしい。 バランスのとれた食事がしたい。 結婚したい。 IT業界に従事するエンジニアたちの多くは、このような悩みを抱えながら不健康な生活を送っている。 私もその中の1人だ。 ランチ問題を改善したい 不健康な生活の要因には、長時間労働や精神的ストレスの他に「食事」がある。 IT業界に身を置く人は基本非モテで独身なので不摂生な人が多い。 私の場合は、会社にいるときの「昼食」に問題があった。 ランチメイト症候群、昼休みの時間、栄養バランス……。 意識が高かったころは、毎日手作りお弁当を持参していた。 ランチに出かけたり、社内販売のお弁当を買ったりしていた。 しかし、栄養
和風サイトを開発しようと思い立ち、「もちろん“和風”なんだから縦書きでしょ!」と安易な気持ちで始めたのだが、かなり苦労したのでここにまとめておく。 heading(h1タグやh2タグ)やparagraph(pタグ)などの通常のテキストは、writing-modeプロパティにvertical-rlを指定するたけで簡単に縦書きにできる。 しかし、入力フォーム(inputやtextarea、select、button)はwriting-modeプロパティの指定だけでは縦書きにできなかった。 そこで、HTMLとCSSだけで縦書きの入力フォームをつくる方法をまとめる。(かなり脳筋なやり方だけど) writing-mode とは まずは縦書きにするもっとも簡単な方法であるwriting-modeプロパティについて。 writing-mode プロパティは、テキストの行のレイアウトを水平または垂直に、ブ
サーバサイドではグリニッジ標準時を使っていて、クライアントサイドではローカル時刻(日本なら+09:00)を表示したいときに、どうやって相互変換するか考えているときにハマりかけた。 いろいろ考えた結果、getTimezoneOffsetで時差を求めて、その分時間を進めたり、戻したりすればいいのかという結論にたどり着いたのだが、もっと簡単な方法を見つけたのでまとめておく。 ローカル時刻 から グリニッジ標準時(GMT)や協定世界時(UTC) に変換する var date = new Date('2016-04-01 05:00:00+09:00'); date.toUTCString(); // → "Thu, 31 Mar 2016 20:00:00 GMT" // 年: 2016 date.getUTCFullYear(); // 月: 3 date.getUTCMonth() + 1;
某サービスのフロントエンド開発に携わるようになってからずっと考えていることがある。 TypeScriptに移行して、型に守られたい! ただ稼働しているサービスをいっきにTypeScriptに移行するのは危険で膨大な工数がかかるため、段階的に移行できないかと考えた。 ということでJavaScriptとTypeScriptを共存させる方法をまとめる。 環境は以下のとおり。 webpack@4.0.1 webpack-cli@2.0.9 webpack v3系の場合は不要 typescript@2.7.2 ts-loader@4.0.0 ※ あとでbabel-loaderについて追記予定です! → 2018/03/23 追記しました 移行前の状態 極小サンプルを使って紹介する。 // src/main.js import { add } from './module' const result
inputやtextarea、buttonなどにfont-familyやfont-sizeが適用されないときの対処法 ウェブサイトを開発しているとき、なぜかinputタグやbuttonタグにfont-familyやfont-sizeで指定したスタイルが適用されなかった。他にもtextareaタグやselectタグ(ドロップダウンリスト)にも適用されなかった。 調べてみたところ、MDNに答えが載っていた。 フォントとテキスト CSS のフォントやテキストの機能は、任意のウィジェットで容易に使用できます (また、フォームウィジェットで @font-face も使用できます)。ただし、ブラウザの動作にしばしば矛盾があります。デフォルトで、一部のブラウザは親から font-family や font-size を継承しません。代わりに多くのブラウザでは、システムのデフォルトの体裁を使用します。 H
次のページ
このページを最初にブックマークしてみませんか?
『Black Everyday Company』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く