サクサク読めて、
アプリ限定の機能も多数！
アプリで開く
デザインと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について書こうと思います。 昔からリアルタイムチャットアプリを作るのは夢だったので、今回はそれをお題にしてみます。 どんなものを、どうやって作るか 今回はこんなものを作ります。 ルーム機能や、アカウント機能などない、シンプルなチャットです。ソケットの練習のために作ったみたいなものです。実際にデプロイしたものをこちらに公開しています。 どうやって作るの？ 今回の開発では、リアルタイム通信機能が不可欠です。そのため、Socket.ioというパッケージを使います。Socket.ioと言ってしまったのでもうお分かりかもしれませんが、バックエンドはNode.jsを使います。オールJSで開発だ！いぇい ということで、今回の開発プランはこうです。 Cloud9でBlankなワークスペースを作る Node.jsで鯖を立てる Socket
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 theAlexa Skills Kit for Node.jsAlexaのSkill開発では、「セ
![[日本語Alexa] Alexa Skills Kit for Node.js はじめの一歩 | DevelopersIO](/image.pl?url=https%3a%2f%2fcdn-ak-scissors.b.st-hatena.com%2fimage%2fsquare%2f75df47637fb71b53004a1b41531855e07faeff1d%2fheight%3d288%3bversion%3d1%3bwidth%3d512%2fhttps%253A%252F%252Fdevio2023-media.developers.io%252Fwp-content%252Fuploads%252F2017%252F07%252Falexa-eyecatch.png&f=jpg&w=240)
先日結婚式を挙げました。式中ご参列いただいた方と簡単に写真を共有したいなと思い、そういうマイクロサービスを作ってみました。ここではどのように実装していったのかを記憶が薄れぬうちに書いていこうと思います。 着想と仕様 自分が結婚式に参列する時、写真を撮るものの、主賓に送りそびれることがよくあって、だったらそのままさくさく送れたら楽じゃんねーと思っていました。で送りっぱなしだとグルーブ感がないので、出来たらその場でシェア出来たらよいかもと考えていました。それを踏まえて仕様としては、 その場でサクサク送れる 送った写真をリアルタイムに共有できる ことを目指しました。 全体構成 全体構成は以下のようになっています。LINE MessageAPIを使って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 Serverless Frameworkは簡単に言うと、yamlで記述した設定ファイルを元に、CloudFormation経由でAWS上のサーバレスアーキテクチャを構築管理してくれるAWSLambdaを中心としたインフラまわりのフレームワークです。 フレームワークと聞くとRuby onRailsやCakePHPなどを思い浮かべてしまいますが、そういったアプリケーション的な機能は薄く、少し意味合いが違った印象です。 10月にv1.0になり、すでに現在v1.4.0になってます。 それ以前のバージョンとはかなり変わっているので注意 お天気チャンネル forLINELINEで「天気教えて」ってメッセージを送ると、 現在の渋谷の天気情報とスクランブル交差点のウェブカメラの画像を返してくれるChatBotをつくりました。 https://line.me
ViewTransitionsAPI入門 - 連続性のある画面遷移アニメーションを実現するウェブの新技術 10月15日更新池田 泰延♥ 142
![ブラウザからBluetoothが使える！ JSでWeb Bluetooth APIを使ってBLE機器を操作する方法[Lチカ・温湿度センサー編] - ICS MEDIA](/image.pl?url=https%3a%2f%2fcdn-ak-scissors.b.st-hatena.com%2fimage%2fsquare%2f4d4be16a8cc16d13f108d2cd40431babfbd134d7%2fheight%3d288%3bversion%3d1%3bwidth%3d512%2fhttps%253A%252F%252Fics.media%252F_assets%252Ftop%252Ffacebook_opg_image.png&f=jpg&w=240)
LINE株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフーTechBlog こんにちは、LINEの古田です。主としてLINE Beaconを担当するエンジニアです。 このたびオープンなLINE Beaconデバイスの仕様である、「LINESimple Beacon」を公開しましたので、当エントリで紹介します。 なぜ作ったかLINEは、スマートフォンの外の世界と連動したユーザ体験を提供することを目的に「LINE Beacon」というサービスを展開してきました。これまで公式アカウントとBot開発者向けに提供していたLINE Beaconは、当初ビジネス用途を想定して開発されたため、セキュリティを高める技術を導入した専用デバイスを用いるものでした。しかし、色々なハッカソン等を通じ、ビーコンデバイス自体を
やりたいこと 最近娘が生まれて二ヶ月経過し、そろそろ笑ったりするようになりました。今回のテーマは娘が笑った瞬間を逃さずにカメラで撮影する事です。ちなみにこういう子どもをネタにして行うハック、僕はこれを『親バカハック』と呼んでます。 TL; DR Intel Edison でカメラをセット、一定のタイミングで撮影しつつOpenCV で粗く笑顔認識させてからGoogle Cloud VisionAPI で表情解析 笑顔だと判定された画像をSlack で飛ばして画像をいつでも見れるようにする。 かわいい笑顔が撮れたので最高でした。 ハードウェアセットアップ Intel Edisonを手に入れたのでそれを使って作ります。Edison は Arduino 拡張ボードなら普通のUSB web camera 対応しているので、それをただぶっさして使います。 Intel Edison はSDカード
目次 初めに 極小理論 ステップ1. 問題の再現と確認 ステップ2. 最低3回のヒートダンプ採取 ステップ3. 問題の発見 ステップ4. 問題解決の確認 他のリソースへのリンク まとめ Something you might want to bookmark:SimpleGuide to Finding aJavaScript Memory Leak in Node.js by @akras14 https://t.co/oRyQboa8Uw — Node.js (@nodejs) January 6, 2016 注釈：お気に入りに登録してください。SimpleGuide to Finding aJavaScript Memory Leak in Node.js （Node.jsでのJavaScriptメモリリーク発見簡単ガイド） @akras14 http://www.ale
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
