Node.jsとwebshotパッケージでWebサイトのスクリーンショットリスト作成を自動化する - ほんじゃらねっと
Web開発を仕事にしていると 「マニュアルやプレゼンに使うのでWebアプリのスクリーンショットをくれ」 と依頼されることがよくある。 ChromeのFireshotのようなブラウザの拡張機能を使ったりすれば 1画面ずつ撮っていけるのだけど、 chrome.google.com たくさんのページのスクリーンショットを、 変更がある度に撮り直すのは面倒なのでなんとか自動化したい。 「node-webshot」モジュールを使う 探してみると、 Node.jsの「node-webshot」パッケージを使えば 手軽にスクリーンショット撮影スクリプトが作れそうだ。 www.npmjs.com Node.jsでWebKitブラウザの機能を利用可能にするPhantomJSの スクリーンキャプチャ機能をラップしたものらしい。 PhantomJS | PhantomJS PhantomJSはブラウザで行ってい
全部知ってる？ npmを使いこなすために絶対知っておきたい10のこと
知っておくと便利なnpm（Node Packaged Modules）のコマンドとTipsを全部で10本まとめました。 Facebookの新しいYarn projectには興奮を覚える一方で、Node.jsの躍進にはオリジナルパッケージであるnpmの存在が大きく貢献しています。 少ないnpmのコマンドで、初期化したり（npm init）、パッケージをダウンロードしたり（npm install）、テスト（npm test）したり、プロジェクト内でカスタムスクリプト（npm run）を作ったりできます。少し詳しく調べていけば、日々の開発を劇的に変えてくれるさまざまなコマンドがnpmには用意されています。 注意：もしnpmの手引きが必要なら『A Beginner’s Guide to npm — the Node Package Manager』をチェックしてください。npmとYarnの違いにつ
BOSCH社 温湿度・気圧センサBME280用node.jsパッケージnpmに出来 - M.C.P.C. (Mamesibori Creation Plus Communication)
オシゴトでは10年前のロートルなWeb制作環境にぶっこまれてセッションも知らないとか言いだしたのでさすがに黙っていられずいろいろ口出していたら技術力底上げの担当みたいなのになって言わなきゃよかった的なことになっていて、このままじゃ全然自分の技術つかんのよなーとか思って「わたし何でもできます」だと東京だとほんとに転職できねえのなとか実感しつつしこしこ実家のほうで使うIoT機器でも作んべかなと思っていまして、 秋月電子で売っている温湿度・気圧センサっていうのが、¥1,080 なのに3種類のセンシングできて便利ってんで、買ってみたわけですよ。 秋月電子の。1,080円 akizukidenshi-ogp-injector.dtpwiki.jp スイッチサイエンスの。1,620円 www.switch-science.com このセンサ、ガリレオ７でもストロベリーリナックスでも売っていますね。 そ
CoffeeScriptでNode.jsアプリを書いてみる - ぱろっと・すたじお
すでにCoffeeScriptについてはいろいろ調べていて、 書いてみたりしたこともあったのですが、 Node.js自体はほぼノータッチでした いろいろすばらしいことはわかっていたものの、 なかなか触る機会がなくて・・・(´-ω-) 皆さんご存じだと思いますが、 「Node.js」は話題のサーバサイドJSの一つです ちょうど同時期に二大雑誌が特集してます WEB+DB PRESS Vol.64 作者: 柏木泰幸,松野紘明,林聖高,杉義宏,飯塚直,高橋征義,徳永拓之,Tehu（張惺）,中島聡,おにたま出版社/メーカー: 技術評論社発売日: 2011/08/24メディア: 大型本購入: 17人 クリック: 714回この商品を含むブログ (16件) を見る Software Design (ソフトウェア デザイン) 2011年 09月号 [雑誌] 出版社/メーカー: 技術評論社発売日: 2011
Node.jsユーザーなら押さえておきたいnpm-scriptsのタスク実行方法まとめ - ICS MEDIA
ウェブ制作の現場では作業の自動化を行うことが多いです。Node.jsインストール時に付属するnpm (Node Package Manager)を使用すれば、タスク処理が実現できます。 npmとはNode.jsのモジュールを管理するためのツールであり、タスク処理にはnpmの機能のnpm-scriptsを使用します。本記事はnpm-scriptsを使ったタスク実行環境が構築できることを目標に解説します。 そもそもnpm-scriptsとは何か？ npm-scriptsとは、package.jsonファイルに記述可能なシェルスクリプトのエイリアスです。エイリアスとはコマンド名を別のコマンド名に置き換えることです。以下のnpm-scriptsはHello world!!を表示させるコマンドのエイリアスを作成する例です。 ▼package.jsonファイル { "scripts": { "say"
Reactコンポーネントをnpmパッケージとして開発する - Hatena Developer Blog
こんにちは！ブログチームの id:amagitakayosi です。 今回は、業務で書いた小さなReactコンポーネントをnpmパッケージとして分離した話をします。 今回公開するパッケージ 実装方針 なぜnpmパッケージにするのか 他のコンポーネントの影響で壊れることを防げる アドホックな修正の積み重ねで複雑になることを防げる 本体プロジェクトのコードを削減できる デメリット Babelなパッケージのディレクトリ構成 実装 npmの注意点 reactはpeerDependenciesに入れる npm link を用いてローカル開発する場合、npmはpeerDependenciesを解決できない browserify-shimを利用する場合 npm publish 次回予告 追記 今回公開するパッケージ www.npmjs.com 今回は「無限スクロール」のためのReactコンポーネントを作
npm icon-gen v1.0.0 release - アカベコマイリ
Web フロントエンド開発で npm の世界に触れ、いつか自分も作成してみたいと考えてた。 そんな折 Electron アプリ用にプラットフォームごとにアイコンを用意するのが面倒に感じていた。SVG から PNG を生成してそれを個別のツールでアイコン化。それほど頻繁に発生する作業ではないが、ファイル形式さえ満たせればクロス プラットフォームにできそうな処理だ。これは npm の題材としてちょうどよいのでは？ということで、そういう npm を作成してみた。 akabekobeko/npm-icon-gen icon-gen せっかくなので開発の過程に得られた知見を記録しておく。今後、新たに npm 開発するとき役立つかもしれない。 機能と設計方針 はじめに npm が実現する機能と設計方針を明確にしておく。 対象とするアイコン種別は以下 ICO ICNS Favicon 単一の SVG フ
phiary
Electron 入門です. 説明うんぬんよりもとりあえず触ってみたいって方向けの入門エントリー. 最短でインストールから実行, 配布用ファイルの作成までやる方法です. 「これ何やってんの？」 とか 「どういう意図で？？」 などありましたら 気軽に下のコメントや Twitter にて質問してください. Setup ディレクトリを作成 $ mkdir electron-app $ cd electron-app package.json を作る 色々聞かれるので適当に enter 押す $ npm init 出力された package.json の中身 { "name": "electron-app", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error:
npm でコマンドラインツール開発事始め - Qiita
node.js で Gmail API を叩きたい (https://github.com/takayukioda/cmail) 軌跡その2 Gmail をコマンドラインで確認できるツールを作りたい． 開発言語は興味あるけど中々手が出せてなかった node.js で作りたい． そんなわけで node.js の簡単な使い方を勉強 node.js のインストール node.js のインストール方法は色々ある 公式ホームページからダウンロードしてインストール Homebrew 等のパッケージ管理ツールからインストール nvm 等の node 用のバージョン管理ツールを利用してインストール などなど． 自分はバージョンが頻繁に変わるらしいという事で nvm をインストールして，そこから最新版をインストールした． プロジェクトの作成 Node でプロジェクト情報を package.json に書くの
Electron を試す 2 - パッケージ化におけるプラットフォーム固有処理とコンパイル分岐 - アカベコマイリ
Electron を試すで残された課題を解決したので、その内容を記録しておく。 2015/10/5 追記 本記事のはてブにて id:Pasta-Kさんより .ico ファイルを反映させるために wine が必要との指摘があった。試してみたところ OS X 環境でもアイコンとバージョン情報変更を反映した Windows 向けパッケージを生成できたので追記した。 electron-packager の --icon オプションに .ico ファイルを指定すると OS X でエラーになる問題だが Windows 環境で実行したらパッケージ化に成功。一方、Windows 環境だと OS X 版のパッケージ化がスキップされる。Linux 版は特別なオプションがないためか OS X と Windows のどちらでもパッケージ化できた。 この状況から察するに、アイコンの埋め込み処理などでプラットフォーム
Electron を試す - 開発環境の構築 - アカベコマイリ
これまで NW.js を使ってきたが同じ Chromium + Node 系のフレームワークとして最近は Electron のほうが勢いあるようなので試したくなった。使用感を把握するため、まずは開発環境を構築してみる。 更新履歴 2015/11/5 npm-scripts を babelify 7.2 (Babel 6.x) を採用した内容へ更新。また最新 watchify の Windows 対応について追記した。これらの詳細については babelify v7.2 を試すを参照のこと。 2015/10/19 npm-scripts を最新へ更新、Main プロセスのビルド説明に Browserify の --node オプション解説を追加。 設計方針 package.json と npm だけを使用 AltCSS は Stylus を採用 ユニット テスト対応 コード ドキュメント対応
npm とか bower とか一体何なんだよ！Javascript 界隈の文脈を理解しよう - Qiita
背景 Javascript で Web アプリを作ろうとすると、よくわからないことだらけで超混乱します。 npm と bower の違いは？ npm はサーバーサイド用、bower はクライアントサイド用らしいよ えっ、でもなんで bower のインストールに npm が必要なの？ サーバーサイドは Rails で書きたいから npm 要らないと思うんだけど・・・ ていうかサーバーサイドJSとか node.js って何？ よく見る browserify って何？ こういった疑問が沸き上がるのは、各ツールが生まれた文脈がよくわかっていないからです。いろいろ調べてやっとちょっとわかってきたのでメモします。間違いがあったらご指摘ください。 「CommonJS」誕生 - Javascript は汎用プログラミング言語へ その昔、Javascript 大好きおじさんは言いました。 Javascrip
Gulp.js入門 - コーディングを10倍速くする環境を作る方法まとめ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
普通に使う分には全く困らないほどの数のプラグインがGulpにはあります。 Githubでのstar数からも明らかなように、GoogleのWenStarterKitでもGulpが採用されるなど、注目度はますます高くなっています。 Gruntとの比較 Gruntと比較してのメリット・デメリットは以下のようになります。 メリット Gruntより設定ファイルが記述しやすい StreamAPIを利用することでファイルを毎回書き出すGruntより高速でエコ デメリット 記述がよりNodeに近くなるため、複雑なことは敷居がやや高め プラグイン開発のためのドキュメントが少ない 今日のゴール Gulp.jsを使ってコーディング作業を10倍速くする！ そんな環境を作りたいと思います。 1. Node.jsをインストール まずはNode.jsをインストールしましょう。 Node.js http://nodejs
npmパッケージをExampleテストしよう
自分がそう呼んでいるだけなので、正式名称があるのかよくわかりませんが、 あるライブラリを公開する際に、exampleディレクトリにそのライブラリを使って実際に動くサンプルコードを作って、それを実行するテスト というのを示しています。 Go言語のExampleと近いような気がします。 testing - The Go Programming Language 以下のスライドでも簡単に解説してますが、この記事はExampleテストのメリットやNodeモジュールでのやり方について書いていきます。 ロジック、E2E、描画、音、動画、Example、文章 - 色々なJSテスト Exampleテストの利点 以下は思いついたExampleテストの良いところですが、これについて簡単に解説します。 始めるのが簡単 実際に動くサンプルコードが作成できる ドキュメントの一部になる package.jsonの設定
フロントエンド開発の３ステップ（npmことはじめ） - Qiita
スライド 当記事は以前勉強会でLTしたものです。 スライドは下記にあります。 フロントエンド覚えること多すぎ問題 モダンなフロントエンド開発で、入門記事を探そうとすると、 まずwebpackやTypeScript, Babelによるビルド環境構築から始まる記事が多くヒットします。 ですが、Node.jsの初心者がいきなり複数のツールを習得しようとすることが 挫折の原因になっていると感じています。 ですので、まずNode.jsをインストールした直後から、必ず使うことになる、 npmの機能をまず覚えておきましょう。 フロントエンド開発で覚えるべき３つのコマンド 以下の3つだけ覚えておきましょう。 npm init npm install npm run これだけ覚えれば、ひとまずフロントエンド開発を進めることができます。 完璧なワークフローを構築するのは、書いているアプリが大きくなってきてから
Node.jsで社内日報メールを取得してFacebookページに自動投稿する仕組みを実装したので解説します。 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
Node.jsで社内日報メールを取得してFacebookページに自動投稿する仕組みを実装したので解説します。 こんにちは、エンジニアののびすけです。今度ジーズアカデミーという学校でメンターを務めることになりました。 さて、うちのチームリーダーのウラカワさんがのびすけをテーマにしたネタを最近投稿しているのですが、最近では社内の日報やFacebookページと投稿先を拡大し始めました。チームリーダーでただでさえ忙しいのに色々と投稿するのは大変だと思い、作業を自動化した話をしたいと思います。 Node.jsで実装したので、この辺のことを調べているエンジニアの参考になれば幸いです。 きっかけ 今回の取り組みのきっかけです。 LIGの日報 大前提としてLIGの日報システムを紹介します。LIGでは退勤時に社内システムから今日の日報を書いて提出するルールがあります。これに「今日の一言／思ったこと」 を書く
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
TechCrunch
npmコマンドの使い方 - Qiita