はてなブックマーク

これは、Nuxt.js Advent Calendar 2019 1日目の記事です。 今の職場では、Vue Fes 2018で発表した 1年間単体テストを書き続けた現場から送る Vue Component のテスト の通り、Storybook + reg-suit を利用したVisual Regression Testingを今でも継続してやっています。 Storybookの本来の用途である、いわゆるcomponentのカタログとして使うよりも、pageなど大きな粒度のcomponentの見た目のテストのためにStroybookを利用しています。これはテストに利用するということを考えると、設計の可動域を確保し今後のリファクタリングなど変更のしやすさを考えると、より大きな粒度のテストにしておいたほうがよいだろうという判断をしています。(もちろん、それだけで全てのテストケースを網羅するのではな

これは Vue.js #3 Advent Calendar 2017 - Qiita 1日目の記事です。 最近、お仕事でVue.js x SSRを使って開発を進めていた カラーミーリピート というサービスをリリースすることが出来ました。このサービスの開発を進めていく上で、とあるcssの修正が想定外の場所にも反映されてしまい、スタイルが崩れてしまう。という問題が時々発生していました。リリース前まではそれほど問題視してきませんでしたが、今後スタイル崩れに気付かずにリリースしてしまうのは非常に問題で、なんとか防ぐ方法を探していました。 先週末に東京Node学園祭2017が開催されましたが、そこで@QuramyさんのIntroduction to Visual Regression Testing の発表資料を拝見してreg-suitの存在を知り、これは求めていたものではないか！？ということで、V

jQueryのその先へ〜Webフロントエンドの全体感をつかもう〜 from Kazuyoshi Tsuchiya ペパボでは、新卒エンジニア向けにメインとなる研修とは別に、週２回に1時間ほどエンジニアでも、デザイナでも、ディレクターでも誰でもいいから、自分が教えたいものを教える。という時間があります。そこで、Webフロントエンドの話をしたので、その資料を公開します。 GoogleMapが登場したときの衝撃（本当に当時は感動したなぁ…）から始まり、jQueryの登場。そして、その後の複雑化していくフロントエンドについて 言語(ES, AltJS) ツール(タスクランナー, パッケージマネージャ) アーキテクチャ(MVC/MVVM/Component指向) の3つにわけて、登場する背景や進化していく過程を伝えるようにしました。それぞれを詳しく。というよりは、ざっくりと全体感を伝える気持ちで。

今頃ではありますが、このブログをLet's Encryptの証明書を使って、https化してみました。 Let's Encryptとか、ACMEプロトコルってなに？ Let's Encryptは、無料で証明書を発行してくれるCA(Certificate Authority:認証局)です。日本で有名なCAといえば、GlobalSignやシマンテック(旧ベリサイン)でしょうか。 CAが発行する証明書の種類として、以下の3つがあります。 DV (Domain Validation) ドメインの所有を確認して発行 OV (Organization Validation) 組織の実在の確認をして発行 EV (Extended Validation) より厳密な実在確認をして発行 Let's Encryptが発行できる証明書は、DVの証明書のみです。これは、証明書を発行したい人が、本当にそのドメインの

去る1/9は一休さんにちなんで、クイズの日と呼ばれているようです。そんなクイズの日に9is（クイズ） - みんなでもっとおもしろくできるというサービスをリリースしました。これはペパボで毎年開催している、お産合宿という名の開発合宿で開発したものです。お産合宿後も、誰かがやる気が高まった時にイイ感じに進める。というゆるい感じで開発を進めていましたが、晴れて1/9に正式リリースということにしました。 リリースといっても、特別何もしてないんですが、これを機にサービスの紹介をします。 9isとは 某感謝祭風のクイズができるサービスです。自分でクイズを自由に作れて、参加者を集いリアルタイムに回答・早押しランキングを表示することが出来ます。 なぜWebアプリ？ 今なぜ、ネイティブアプリではなく、Webアプリを作ったのかというと、ブラウザやフロントエンド周りの技術の進化によって、ネイティブにWebが近づこ

この前1月が終わったと思ったら、もう2月が終わってしまいました。今年の進むスピードは、近年でもNo.1な感じがしています。 さて、私の独断と偏見による2月のJavaScriptトピックを紹介します。 React Canvas FlipboadがReact Canvasを発表しました。Canvasに描画することによって、60fpsでいい感じにアニメーションするスクロールを実現したそうです。 一覧表示はもちろんすごいのですが、個人的には画面遷移であるとか、メニューボタンやメール送信ボタンなどを押した時の動きが、まるでネイティブアプリのようになっていることに、ものすごい衝撃を受けました。 ReactやAngularや、その他もろもろJS界は動きが激しくなっていますが、それらが目指すものの一つが、このようなネイティブアプリのようなUIのなのかなーと思っています。railsなどが得意としている古き良

昨年のAdvent Calendarを眺めたり、JS周りの記事を見ていると、RequireJSとか、CommonJSとか、AMD、Browserify、webpackあたりが、同じような文脈で登場するんですが、それぞれ何を指しているのかよくわからなかったため、今更ながらまとめてみます。 前提 小規模にしかJavaScriptを使っていないWebサイトでは、jQueryを使ってDomイベントで色んな処理をして、Domに反映させる。というような処理が、ごちゃっとまとめて書くことが多いかと思います。ごちゃっととは、特にDomにしか情報を保持していない状態を指していて、イメージとしてはこのようなコードです。 $(function() { # イベントハンドラ $("#btn").on("click", function(){ $.ajax({ url: "api/resources", dataT

JavaScriptの単体テストやE2Eテスト。書いてますかー？ それらのテストをCIで実行するとき、Headless ブラウザとしてPhantomJSを使っている人が多いと思います。私もそのうちの一人で、仕事でも使っています。 PhantomJSとは、Scriptable Headless WebKitと説明されており、WebKitベースのブラウザです。 WebKitはただのレンダリングエンジン。という認識だったため、PhantomJSのJavaScriptエンジンはなんだろう？なんでJavaScriptが動いているんだろう？という疑問が沸き起こり、色々調べてみたのでまとめてみます。 JavaScriptエンジンとは？ JavaScriptエンジンの役割は、JavaScirptを解釈して実行することです。 例えば、ECMAScript6の機能が使えるブラウザがある。ということは、そのブラ

フロントエンド周りの技術は色々ありすぎて、どこから手をつけていいかわかりません。 Advent Calendarで人気の記事を見れば、今何が人気なのかがわかるかなと思い、まとめてみました。 2014年のAdvent Calendar一覧 - Qiitaから、フロントエンド周りに関係ありそうなものをピックアップし、総はてブ数でソートしました。(総はてブ数は 2015/01/03 15:00 時点)。それぞれで、人気トップ5の記事のリンクも貼っています。 ピックアップは、手動で適当にしたので、抜け漏れあるかもしれませが、ご了承ください。下に参考までに2013のAdvent Calendarも記載しています。 2014のAdvent Calendar VirtualDOM Advent Calendar 2014 (1388 users) 仮想 DOM が素晴らしいのはわかってるけどリアルDOM

これはPepabo Advent Calendar 2014の21日目の記事です。 昨日は@getsukikyuさんの野菜 - ロマネスコに見る幾何学でした。 明日はnezumi650さんです。 もう年末で、みなさん1年を振り返り、評価の面談などが実施されている時期ではないでしょうか。 今日は、Pepabo Advent Calendarに書くことではないかもしれませんが、個人的な反省点と来年に向けてやっていきたいことをまとめていきたいと思います。 ペパボのエンジニア評価制度について、おいちゃんがAdvent Calendarに書かれていて(ペパボのエンジニア評価制度を、社内の一般エンジニアはどうみているのか？ - 彼女からは、おいちゃんと呼ばれています) この記事でいう一般エンジニアでの視点になります。2年半前に新卒で入ったSIerからペパボに転職し、3月で30歳になります。 反省するこ

この記事は、AngularJS Advent Calendar 2014 - Adventar の19日目の記事となります。前日は、@albatrosaryさんのYEOMANにあるAngularJS関連ジェネレータをご紹介します - albatrosary's blogです。YEOMANのジェネレータしか使ってこなかったので、他のも触って違いを感じてみたいです。 今日は、AngularJSの基本的なバリデーションの話です。AngularJSの初心者向けの記事になります。最近、仕事でもAngularJSを触り始めているので、少しずつノウハウを公開していきたいと思います。 AngularJSはバリデーション周りで便利な仕組みが色々と用意されていますが、それを拾い集めるのがなかなか大変なため、基本的なことをまとめてみました。 前提 環境 AngularJS 1.3 やりたいこと メールアドレスが

今月の13、14日にペパボのお産合宿で音楽位置情報アプリ「Limu」を開発しました。というか、まだ完成していないので開発しています。 iPhoneアプリの本格的な開発は今回が初めてでわからないことばかりでしたが、@nakajijapanに色々教えてもらって、アプリの作り方がわかってきた今日このごろです。 LimuはSwiftで開発しており、その中で作った一部をライブラリに切り出したりしてるうちに(tsuchikazu/iTunesSwift)、 Swiftの暗黙的な名前空間(namespace)ってこういうことだったのか、と実感できたのでそれをまとめました。 ここでいう名前空間とは 名前空間はソースコード上で冗長な命名規則を用いなくても名前の衝突が起こらないようにし、しかもそれを容易に記述できるようにするためだけの概念 のことを指しています。特にクラス名の衝突について触れていきます。 Ob

今月のはじめにXCode6 beta3がリリースされ、それ以降お布施をしなくても、Swiftが試せるようになりました。今週もbeta4がリリースされ、日々進化していっているSwiftです。 これを機会にSwiftでiPhoneアプリデビューをしたい人も多いのではないでしょうか。自分もその一人で、Swiftのドキュメントを読んだり、Swift Cheat Sheet and Quick Reference | Ray Wenderlichを張り出して、勉強していますが、いざアプリを作ろうとなると、Objective-C時代のiPhoneアプリ開発の知識もないため、なかなか難しいものです。 そこで、GitHubなどに公開されているSwiftで書かれているiPhoneアプリを集めてみました。これを見て、触って、いじって、少しずつアプリが作れるようにしていきたいです。 Apple公式のサンプルコー

最近、DeNAさんでのiOSライブラリのランキングが公開されていました。 DeNAのiOSエンジニア内で利用頻度の高いライブラリをランキング化してみました #iOS #DeNA｜CodeIQ MAGAZINE 便利そうなライブラリがいっぱいあるんですね…初心者の自分には知らないものばかりで、勉強になりました。 さて、こういうライブラリを使いたいけど、どうやって使えばいいんだろう？ と思ってくれる初心者向けの記事です。 紹介されているような外部ライブラリは、CocoaPodsを使うことで、簡単に利用出来ます。 CocoaPodsとは、rubyでいうbundlerのようなもので、テキストファイルに必要なライブラリを書いてコマンドを打つだけで、 インストールされて使えるようになる。というものです。 さて、それでは実際に使ってみます。まずは、cocoapodsのインストールから。 $ sudo g

自分は大学時代の4年間+SIer時代の5年間、Javaのみを書いてきました。 ここでいうJavaを書いてきたというのは、J2EEの世界でStrutsとかHibernateとかSeasar2とかSpringとかのFWを使って、業務系Webアプリの開発をしてきたということ。 そして今年転職して、Rubyの会社になりたい会社（つまりPHPも結構やってる）ペパボに入りました。そこで感じているJavaの世界とRubyの世界の違いについて書いていきます。とは言っても、Rubyの世界の入り口からちょっと覗き見したぐらいの立ち位置ですが。 今、自分が1番感じているのは、Rubyの世界は_ライブラリの開発スピードが速過ぎる_ということ。 開発スピードが速過ぎるとは railsで開発している時に色々なgemを使いますが、そのアップデートがめちゃくちゃ頻繁に起きます。メジャーなライブラリを使っていても、1週間に

最近、非エンジニアのMacにRails環境を、ゼロから構築する機会がありましたので、手順を残しておきます。かなり王道な方法だと思いますので、これからMacで開発したいという人は参考になるかと思います。 Homebrewをインストール Homebrewというのは、デフォルトでは利用できない便利なツールを、インストールしたりアンインストールしたり管理するツールです。 これがないとMacでの開発は何も出来ません。 これをインストールするためには、Command Line Tools for Xcodeを先にインストールする必要があります。 Command Line Tools for Xcodeのインストール Command Line Toolsをインストールすると、Homebrew内で使用されているコンパイラやgitなど、基本的なツールを使うことが出来ます。 以前まではXcodeをインストール

Chef Soloの正しい始め方 | tsuchikazu blogがどういうわけかgoogleさんに好かれているので、続編を書きました。入門Chef Soloと正しい始め方を読んで、じゃあ実際に色々やってみようかな。とはいえ、チュートリアル的なことでなく、もうちょっと実践的なことをして理解を深めたい。このような人を対象に、さくらVPSの初期設定を題材に、Chef Soloを説明していきます。 この記事でやることは以下のとおりです 一般ユーザの作成 鍵認証の設定 sudo有効化 sshの設定 iptablesの設定 さくらVPSでよく行われる初期設定で、これを実施すればrootが乗っ取られてヤバイことになった。とかそういう事態は防げるはずです。AWSのEC2ですと、デフォルトで設定される内容になっていますので、さくらVPSをEC2レベルまでセキュリティ向上させるのを目標にします。 前提 自

この間、LLまつりに参加してみて、JSがとても奥深そうで一番興味が惹かれました。Node.jsは、これまで一度も触ったことがなかったので、とりあえず、はじめてのNode.jsを読みながら、色々試してみようかと思います。 この記事では、nvmでNode.jsをインストールして、HelloWorldを表示するまでをまとめました。 node.jsのインストール 公式サイトnode.jsに行くと、Mac OS用のInstallerやBinaryがすでに用意されています。 しかし、Node.jsの更新頻度が高いこともあり、nodeバージョン管理を利用するほうがいいでしょう。 | Node version manager | stars | | --- | --- | | creationix/nvm | ★2,247 | | isaacs/nave | ★488 | | hokaccha/nodeb

YAPCの１日目と２日目に参加してきました。（書くのが遅れてしまいました。ようやく私のYAPCも終わりそうです） 私はPerlを今まで一切書いたことがありませんでしたし、書きたいとも思いませんし、今後書く予定もありません。こんな自分でも、とても楽しめた二日間でした。 なぜ行こうかと思ったか 私は去年まで仕事でずっとJavaを書いてきたし、最近の仕事はPHPを書いているし、プライベートではRubyを書いています。全くPerlに縁はありません。周りの人にもなんでYAPC行くのって何度か聞かれたので、その理由を最初に書いておきます。 今回なぜYAPCに行こうかと思ったかというと、言語の違いはあるとはいえ、私達がやっていることには大して違いはないからです。私達がやっているのは、作った瞬間からレガシー化が進むシステムと付き合いながら、いかに早く便利なサービスを世の中に提供し続けていくか。ということで

久しぶりに放置していたVPSでsudo yum updateやyum listなど実行してみると、以下のエラーが発生した。 Loaded plugins: downloadonly, fastestmirror Determining fastest mirrors epel/metalink Could not retrieve mirrorlist http://nodejs.tchol.org/mirrors/nodejs-stable-el6 error was 14: PYCURL ERROR 6 - "Couldn't resolve host 'nodejs.tchol.org'" Error: Cannot find a valid baseurl for repo: nodejs-stable http://nodejs.tchol.org/mirrors/nodejs-

先日、WordPressでMarkdown + Syntaxハイライトするにはという記事で、 WordPressにMarkdownプラグインをインストールしてMarkdownで投稿できるようにしましたが、 やはり自分の気に入ったエディタで記事を編集したいものです。 自分は普段のエディタはVimを使っているので、Vimを使用してMarkdown形式でWordPressに投稿してみます。 VimRepressとは、VimのプラグインでWordPressの記事一覧を見れたり、投稿できるものです。 さらにはMarkdown形式にも対応しているという優れものです。 VimへVimRepressをインストールしてみる 自分はVimのプラグインマネージャにvundleを使っているので、~/.vimrcに " wordpress 投稿 Bundle "vim-scripts/VimRepress" を追加

開発環境をMacにする人が最近はだいぶ増えてきました。MacでRuby on Railsをインストールするという記事は、探せばいくらでも出てくるので、今回はLinux上でインストールしてみます。VPS等で試してみてください。（Macもほとんど変わらないんですが） 環境 CentOS 6.3 Rails 3.2.8 gitをインストール rbenvのインストールにも使うし、いまどきgit入ってないとかなんなの。という感じなので、入れておきましょう。 $ sudo yum install git $ git --version git version 1.7.1 rbenvのインストール rbenvは、簡単にrubyのバージョンを切り替えられるコマンドです。 Macの場合は、homebrewでインストールできてすごく楽です。今回はMacOSではないので、gitからcloneしてインストールしま

伊藤直也さんのブログ（開発メモ#5 : Amazon Linux で knife-solo を使って chef-solo 実行 - naoyaのはてなダイアリー ）でchef-soloが紹介され、Vagrantと一緒にちょっとしたビッグウェーブが巻き起こりました。 さらに昨日、入門Chef Solo - Infrastructure as Codeが達人出版からも発売開始。本が出版される前に一度挫折したchef-soloですが、この本のお陰でchef-solo童貞を卒業することができました。 続編も書きましたので、よろしければこちらもどうぞ 続編：さくらVPSの初期設定をChef Soloでやってみた〜サードパーティcookbookの使い方〜 | tsuchikazu blog なぜ挫折したかというと、Chefの公式ドキュメントが、量が多くてめちゃくちゃわかりにくいんです。naoyaさんの

みなさんはどのようなエディタでどのような記法で文章を書いていますか？最近、エンジニアの中で一番人気な記法はMarkdownではないでしょうか。GitHubでのwikiやREADMEの形式に採用されて火がつき、最近だとはてなブログもMarkdown記法に対応してくれました。 このブログもMarkdown記法で書いています。さらに当然なことながら、ソースコードなどを掲載した場合には、Syntaxハイライトして欲しいわけです。 その際に使用したプラグインをご紹介します。 Markdown プラグイン Markdown on Save Improvedを使っています。インストールすると投稿画面の右上に、ウィジェットが表示されます。 チェックを外した状態でMarkdown記法で記事を登録すると、HTMLへ変換して投稿されます。簡単、便利。 Syntaxハイライト プラグイン 2016/02/21 追

自社のECサイトを持ちたいと思った場合、ショッピングカートのサービスを利用するか、オープンソースを使ってサイトを構築するか、選択肢は様々です。 高いカスタマイズ性を求めると、オープンソースを使ったサイト構築は有力な選択肢となります。 今、「EC オープンソース」でググると、以下のサイトがヒットしました。 ECサイトが無料で作成できるオープンソースのCMS 19個 ECサイトを無料で作るオープンソース5選＋3！ 自社ECサイト制作に必要なパッケージまとめ 代表的なものはやはりEC-CUBEでしょう。EC-CUBE以外にも上のサイトでは色々紹介されていますが、それらはほとんどPHPで作られています。なぜPHPに占領されているか考えると、簡単に設置出来るっていう点が大きな理由です。(これは別にECに限った話ではなく、Webサイト全体的になんですが) 制作会社など開発に精通していない人からみたら、

最近、色々な数値を社内のIRCに自動投稿するツールを作るのにハマっています。投稿している数値とは、前日の売上とか、契約数とかですね。メールでも送信はされていますが、読んでくださいと言われても、埋もれて読まないことも多く、みんなが気軽に読める場所へアウトプットするのは結構便利です。さらに今回Google Analyticsからも数値を拾ってみましたので、その紹介です。 Google Analytics API用のgemとして、「Garb」があります。RubyGemsに登録されている本家のGarbはvigetlabs/garbなんですが、残念ながら2011年12月のversion 0.9.1を最後に更新が止まってしまっていて、今(2012/11)は動きません。issueを見ると、俺のを使えよ！というコメントがありますので、Sija/garbversion 0.9.7を使います。 普通に $ g