デザインとHTMLのズレを検出！ Node.jsとPuppeteer活用のビジュアル校正テストで実装時のケアレスミスを防ぐ ウェブ制作において、デザインとHTML実装の一致はエンジニアとして当然求められるものです。とはいえ、デザインツールとブラウザ画面をにらめっこしながら確認するのも大変です。本記事ではNode.jsで動くヘッドレスブラウザのPuppeteerパペティアーを使ってデザインとのズレを検知するビジュアル校正テストの方法を紹介します。 ウェブ業界ではデザイン制作とHTML制作が分業である場合がほとんどです。ビジュアル校正テストを導入することで、HTML制作の品質向上に役立てられます。デザインとHTML実装が別の会社のようなプロジェクトでは、HTML実装時の品質保証の担保になりますし、デザイナーとフロントエンドエンジニアが近い組織でもコミュニケーション円滑化に役立つでしょう。ICS

ウェブサイト制作には煩雑な処理を自動化する「タスクランナー」や「ビルドシステム」というツールがあります。この記事では、タスクランナー「Gulp.jsガルプ」の導入手順を解説します。 導入は簡単で、本記事の手順では5分程度でセットアップできます。Gulpはコマンドラインで使うのが一般的ですが苦手な人でも安心して学べるよう、ビデオでも解説します。 この記事で学べること イマドキのGulpの導入手順 Gulp 5に対応した書き方 Sassサスの導入手順 GulpやSassの導入や使い方にはいろんな方法がありますが、この記事では現場で使われている方法を紹介します。Gulpの入門記事は他のサイトにもありますが、対象バージョンが古くて使えなかったりします。本記事は最新版に対応させているので、安心して読み進めてください。 ※この記事では、Node.js v18〜v20で動作検証をしています。 ※Gulp

Ryan Dahl は Node.js の original author ですが、彼の作ったプロダクト deno に関するトークが jsconf.eu 2018 でありました。 Node.js にずっと関わってきた僕が見て非常に興奮するような話だったので、しばらくぶりにブログに書き起こすことにしました。 背景 Ryan Dahl は2009年に Node.js の話を初めて公の場に公開しました。その時の「公の場」というのが「jsconf.eu 2009」です。 www.youtube.com Video: Node.js by Ryan Dahl - JSConf.eu - 2009 この発表から Node.js が広まり、今やサーバのみならず、IoTデバイス、デスクトップアプリなど、様々なところで動作しています。 で、今回はその発表から9年の歳月が経過し、Node.jsに対しての設計不

bonfire frontendで発表した今後のフロントエンドの話です。

もはや自前鯖はいらない！Node.jsで作ったシンプルなチャットを開発～デプロイまでをブラウザだけでやるNode.jsHerokuSocket.ioExpresscloud9 どうも、久しぶりの投稿になります。今回は最近はまっているNode.jsについて書こうと思います。 昔からリアルタイムチャットアプリを作るのは夢だったので、今回はそれをお題にしてみます。 どんなものを、どうやって作るか 今回はこんなものを作ります。 ルーム機能や、アカウント機能などない、シンプルなチャットです。ソケットの練習のために作ったみたいなものです。実際にデプロイしたものをこちらに公開しています。 どうやって作るの？ 今回の開発では、リアルタイム通信機能が不可欠です。そのため、Socket.ioというパッケージを使います。Socket.ioと言ってしまったのでもうお分かりかもしれませんが、バックエンドはNode.

Vue.js は JavaScript フレームワークです。 ウェブアプリケーションのユーザーインターフェイス開発を支援する様々な仕組みを提供します。 管理画面はもちろん、HTMLエディタのようにユーザの入力に対して即応性が必要なアプリケーションを簡単に作ることができます。 例えば、テキストエリアに文字を入力すると、 デザインしたページの特定のDIV要素がリアルタイムに更新されるといったデータ反映の仕組みを備えています。 また、JavaScript で大規模なユーザーインターフェイスの開発を行う場合、HTMLファイルのテンプレート化、 JSファイルの依存関係、グローバル変数汚染など様々な課題に直面します。 Vue.js は、コンポーネントという仕組みと Webpack というモジュール管理ツールと組み合わせることで、 これらの課題にうまく対処できるようになっています。 今まで jQuery

Node.js の管理を「nodebrew」から「anyenv」に変更。 Ruby も Node.js でプロジェクトごとに使うバージョンを切り替える環境にしてみた Node.js のバージョン切り替えを、これまで nodebrew にお世話になっていました。これまでは特に不自由を感じることもなく使っていたのですが、ある時から、同時進行のプロジェクトが増えたり、過去のプロジェクトの修正などが入ったりして、バージョンを切り替えることが何度遭遇。その度に切り替えていると、バージョンの切り替え間違いでエラーで止まったりが発生。 なんとかプロジェクトごとに切り替えられないものかと他のツールを探してみると、 ndenv というのが！ Ruby は rbenv を利用して切り替えしていたので、それと同じ感じに！ これは早速導入してみようと思いインストールを進めようと、イベント参加のために仙台にきている

【ターゲット別】入門から始める！Node.jsが学習できるサイト10選 入門から始めるのにおすすめなNode.jsの学習サイトをまとめて紹介しています。他の言語の経験がある人、Node.jsに全く触れたことがない人など様々いると思いますが、文字や動画、そしてコーディングしながら学習と好きな学習スタイルに合わせて習得しましょう。 テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社　調査期間：2021年8月12日～8月16日　 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名　 調査手法：インターネット調査 今回は、Node.js入門として、Node.jsを習得できる学習サ

0 リプレイスについて Alexaは、昨年（2017年）11月に日本語対応となりました。ここDevelopers.IOでは、英語でしか利用できない頃から色々Blogに書いてきたのですが、更新された情報も含めて日本語で利用するAlexaについて纏め直してみたいと思います。 この記事は、下記の記事のリプレイス版です。 Alexa Skills Kit for Node.js はじめの一歩 2018/03/26 @zono_0 さまからご連絡頂き、:askに関する記述を修正させて頂きました。 1 はじめに Alexa Skills Kit for Node.js (以下、Alexa SDK) は、Amazon のAlexaチームによって作成されたスキル作成用のSDKです。 Announcing the Alexa Skills Kit for Node.js AlexaのSkill開発では、「セ

最初にいっておく。これは負け惜しみだ。 SPAとPWAの現状 自分は日本でReactの勝手エヴァンジェリストみたいなことをやっていて、SPAの重めのコンテンツをよく作ってるからか、「お前らフロントエンドを物事をややこしくして、重いページを量産してウェブを劣化させてるじゃないか！」みたいな批判を、名指しでよく受ける。なんで僕にいうかわからないけど、React = SPA みたいなイメージでスケープゴートにされてるんだろう。それはまあいい。 自分の仕事でSPA技術を使うところは、ちゃんと必要性もあるし理由も説明できる。ただ、やはり近年の複雑化/重量化について思うところはあるので、逆に振って AMP/PWA という選択肢を持っておきたくて、正直言うと依頼されたR&Dの仕事でもあったんだけど、一通り覚えた。なんだけど、今のところ仕事で使うタイミングがない。 PWA技術を仕事で使えなかった理由として

先日結婚式を挙げました。式中ご参列いただいた方と簡単に写真を共有したいなと思い、そういうマイクロサービスを作ってみました。ここではどのように実装していったのかを記憶が薄れぬうちに書いていこうと思います。 着想と仕様 自分が結婚式に参列する時、写真を撮るものの、主賓に送りそびれることがよくあって、だったらそのままさくさく送れたら楽じゃんねーと思っていました。で送りっぱなしだとグルーブ感がないので、出来たらその場でシェア出来たらよいかもと考えていました。それを踏まえて仕様としては、 その場でサクサク送れる 送った写真をリアルタイムに共有できる ことを目指しました。 全体構成 全体構成は以下のようになっています。 LINE Message APIを使ってLINEのチャンネルを参列者に登録してもらい、そこから写真を投稿してもらいます。webhookを介して画像データをサーバーに渡し、CDNに保存し

こんなの見つけたよ 100円ショップで物色していたら、こんなものを見つけたよ。100円ショップなのに300円※だったけど、いろいろ遊べそうなので思わず衝動買いしてしまったよ。 (※あとでAmazonをみてみたら1円から売ってました） Bluetoothでスマホにコマンドを送れるってことは、スマホではなくラズパイとBluetoothでつなげられれば、物理ボタンとWebを連携させるIoTっぽいことができそうだね。例えばボタンを押すとAmazonで注文できるなんちゃってDashボタンとか。今回は、LINEにメッセージをPush通知するLINEボタンをつくってみるよ。 準備するもの Raspberry-Pi3 (BluetoothがついてればOK) リモートシャッター (AB Shutter 3) つくりかた ラズパイとリモートシャッターとの接続 まずはラズパイとリモートシャッターをBluetoo

かくかくしかじか 賃貸マンションの上の階の人がうるさい。 野球の硬式ボールを落としたような「ドン」、「ゴン」という音が朝と夜に聞こえてくる。上の階の人は野球選手？ 管理会社に相談すると、記録をとって欲しいとのこと。 目的 ということで、上の階の人の騒音をなんとかしたい。 というか、管理会社になんとかして欲しい。 管理会社に連絡したところ、「騒音の日時を記録してもらえますか？」と言われた。 なんとなく「はいはい、とりあえず記録してください。話はそれからです。」的な雰囲気を感じたので、「どうですか、見てくださいよこの状況。」と自信を持って伝えたい。 記録する情報 時刻 回数(断続的に騒音が続く場合があるので、その回数) まずは紙とペンで 手っ取り早く、紙とペンで時刻と回数を記録。 こんな感じ。「ドン」は音の感じ。お察しください。 集計して報告 紙に記載された記録をExcelに転記し、グラフ付き

Serverless Frameworkは簡単に言うと、yamlで記述した設定ファイルを元に、CloudFormation経由でAWS上のサーバレスアーキテクチャを構築管理してくれるAWS Lambdaを中心としたインフラまわりのフレームワークです。 フレームワークと聞くとRuby on RailsやCakePHPなどを思い浮かべてしまいますが、そういったアプリケーション的な機能は薄く、少し意味合いが違った印象です。 10月にv1.0になり、すでに現在v1.4.0になってます。 それ以前のバージョンとはかなり変わっているので注意 お天気チャンネル for LINE LINEで「天気教えて」ってメッセージを送ると、 現在の渋谷の天気情報とスクランブル交差点のウェブカメラの画像を返してくれるChatBotをつくりました。 https://line.me/R/ti/p/%40wra7063k 地

最新版！ Lottieアニメーションの実装方法 - Lottie-Player編 4月5日公開澤田 悠♥ 35

LINE株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。 LINEヤフー Tech Blog こんにちは、LINEの古田です。主としてLINE Beaconを担当するエンジニアです。 このたびオープンなLINE Beaconデバイスの仕様である、「LINE Simple Beacon」を公開しましたので、当エントリで紹介します。 なぜ作ったか LINEは、スマートフォンの外の世界と連動したユーザ体験を提供することを目的に「LINE Beacon」というサービスを展開してきました。これまで公式アカウントとBot開発者向けに提供していたLINE Beaconは、当初ビジネス用途を想定して開発されたため、セキュリティを高める技術を導入した専用デバイスを用いるものでした。しかし、色々なハッカソン等を通じ、ビーコンデバイス自体を

はじめに ここではJavaScriptの配列である、Arrayの基本的な使い方をまとめました。主な内容としては、要素の追加、結合、取得、削除となります。 JavaScriptの最新情報などの技術系のみをつぶやくTwitterをはじめました。 Twitter: @takeharumikami RSSはこちら RSS: http://qiita.com/takeharu/feed Feedly: フォロー

（ゆるいスキルアップ的な意味で）フロントエンドエンジニアが暇なときにやると良いかもしれないこと。 主観です。「これが良いよ！」というのがありましたら、ぜひ教えて下さい🙇 W3Cを読む whatwgを眺める。 ↑のissueを見る MDNを読む JavaScript CSS Web API NodeのAPIを読む caniuseを見る npmパッケージを眺める starが多い順 パッケージ一覧 ↑で１位のexpressが使っているパッケージ スライドを読む node学園 React.js Meetup Mediumを読む JavaScriptタグの記事 FrontEndタグの記事 Twitterで著名人をフォローする TBD @addyosmani @LeaVerou @paul_irish @BrendanEich Podcastを聞く Mozaic.fm Front-end Five

やりたいこと 最近娘が生まれて二ヶ月経過し、そろそろ笑ったりするようになりました。今回のテーマは娘が笑った瞬間を逃さずにカメラで撮影する事です。ちなみにこういう子どもをネタにして行うハック、僕はこれを『親バカハック』と呼んでます。 TL; DR Intel Edison でカメラをセット、一定のタイミングで撮影しつつ OpenCV で粗く笑顔認識させてから Google Cloud Vision API で表情解析 笑顔だと判定された画像を Slack で飛ばして画像をいつでも見れるようにする。 かわいい笑顔が撮れたので最高でした。 ハードウェアセットアップ Intel Edisonを手に入れたのでそれを使って作ります。Edison は Arduino 拡張ボードなら普通のUSB web camera 対応しているので、それをただぶっさして使います。 Intel Edison はSDカード

目次 初めに 極小理論 ステップ1. 問題の再現と確認 ステップ2. 最低3回のヒートダンプ採取 ステップ3. 問題の発見 ステップ4. 問題解決の確認 他のリソースへのリンク まとめ Something you might want to bookmark: Simple Guide to Finding a JavaScript Memory Leak in Node.js by @akras14 https://t.co/oRyQboa8Uw — Node.js (@nodejs) January 6, 2016 注釈：お気に入りに登録してください。 Simple Guide to Finding a JavaScript Memory Leak in Node.js （Node.jsでのJavaScriptメモリリーク発見簡単ガイド） @akras14 http://www.ale