Electron で外部アプリの起動・停止を行う - Qiita
ElectronのGUIに起動・停止ボタンをつけて，外部アプリの起動・停止をしてみた． 検証環境 macOS Sierra 10.12.1 electron: ^1.4.8 起動＆停止 execFile で .app を実行し，ps aux でプロセス番号を取得する方法を試した． execFile と exec を同期的に実行すると，後者でプロセス番号が取得できない時があったので， child-process-promise をつかっている． const {exec, execFile} = require('child-process-promise'); const kill = require('tree-kill'); const APP_PATH = 'path/to/app/test.app' // ※ APP_NAMEの場合、同じ名前が含まれるプロセスが他に存在するとプロセス
JavaScriptで人工知能を活用した画像解析ができる「Kairos」で顔認識をやってみた！ -
どうも、まさとらん（@0310lan）です！ 今回は、人工知能を活用した高度な画像解析を、簡単なJavaScriptコードで実現できるWebサービスをご紹介します！ 画像に写っている「顔」を認識させて、その人物の「感情」を読み取ったり、顔の座標データを取得するようなことが簡単にできるのでオススメです。 【 Kairos 】 ■「Kairos」の使い方！ それでは、実際に「Kairos」を使いながら、どのような画像解析ができるのかを見ていきましょう！ まず最初に、以下のリンクからユーザー登録を済ませておきます。 【 ユーザー登録ページ｜Kairos 】 メルアドやパスワードなどを登録するだけで、誰でも利用可能です。（登録したメルアドにリンクが送られてくるので、それをクリックしてログインします） ログインしたら、自分専用の「ダッシュボード」が表示されます。 画面下に、「App ID」と「Key
Google App Scriptをモダンな開発っぽくする環境を作ってみた(ES6, browserify, eslint, mocha) - nagashigaki
お前は今更何を言ってるんだ？というテーマですが整理するために。 Google App Script(以下GAS)とはjavascriptでGoogle App(今ではG suite？)の豊富な機能を堪能でき、ある程度の作業を自動化することができます。しかも無料で！指定時間に勝手にスクリプトを起動することもできちゃいます。 例えば、複数のcsvをDriveにアップしてボタンをポチっとするだけで目的のデータが揃い、そのデータをメールで飛ばしたりできるのは非常にありがたいです。 導入する環境 環境を整える npmとgitの初期化 babel gulpまわり browserify テストツール eslint ファイル構成 gulpfileの作成 お疲れさまでした 開発する 雑談 導入する環境 このGASの機能をもっと使いこなしたい。具体的には npmで管理 es6 gulp browserifyで
React Componentのスタイルガイドを自動生成してパーツの再利用をしやすくする - KAYAC Engineers' Blog
こんにちは。カヤックのReactおじさんこと島津です。 最近はVue.jsにも浮気し始めましたが、Reactについての記事を書きます。 Reactのコンポーネントが増えてきて管理が大変 Reactを使うとコンポーネントの部品化が捗りますが、 開発規模が大きくなってくるとその数も増えてきて管理が大変になってきます。 スタイルガイドを導入 スタイルガイドとは、UIパーツの用例と実表示例をまとめたドキュメントのことです。 これがあるとパーツの再利用性が高まります。 例：Codepenのスタイルガイド 人力で手書きしていっても良いのですが、更新が追いつかなかったりするので自動生成する仕組み化ができるツールを使いましょう。 代表的なものとしては、CSSのコメントからドキュメントを自動生成してくれるkss-node などがあります。 今回はCSSだけではなく、Reactのコンポーネント単位でドキュメン
[Node.js] Socket.ioで双方向通信チャットアプリを構築 〜 JSおくのほそ道 #005 - Qiita
// 1.モジュールオブジェクトの初期化 var fs = require("fs"); var server = require("http").createServer(function(req, res) { res.writeHead(200, {"Content-Type":"text/html"}); var output = fs.readFileSync("./index.html", "utf-8"); res.end(output); }).listen(8080); var io = require("socket.io").listen(server); // ユーザ管理ハッシュ var userHash = {}; // 2.イベントの定義 io.sockets.on("connection", function (socket) { // 接続開始カスタムイベン
![[Node.js] Socket.ioで双方向通信チャットアプリを構築 〜 JSおくのほそ道 #005 - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/09dd38f9be21daf39b9c8f9c34593799cbd5f647/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fqiita-user-contents.imgix.net%252Fhttps%25253A%25252F%25252Fcdn.qiita.com%25252Fassets%25252Fpublic%25252Farticle-ogp-background-afbab5eb44e0b055cce1258705637a91.png%253Fixlib%253Drb-4.0.0%2526w%253D1200%2526blend64%253DaHR0cHM6Ly9xaWl0YS11c2VyLXByb2ZpbGUtaW1hZ2VzLmltZ2l4Lm5ldC9odHRwcyUzQSUyRiUyRnFpaXRhLWltYWdlLXN0b3JlLnMzLmFtYXpvbmF3cy5jb20lMkYwJTJGMzkzMzAlMkZwcm9maWxlLWltYWdlcyUyRjE1MjY4ODU0NDY_aXhsaWI9cmItNC4wLjAmYXI9MSUzQTEmZml0PWNyb3AmbWFzaz1lbGxpcHNlJmZtPXBuZzMyJnM9ZWJkYzFhZTg1MDg3M2QwOTZmMzExNDA0MDhlZjA4Yjc%2526blend-x%253D120%2526blend-y%253D467%2526blend-w%253D82%2526blend-h%253D82%2526blend-mode%253Dnormal%2526s%253D5126823b99606645c55a20cd5c84b61e%3Fixlib%3Drb-4.0.0%26w%3D1200%26fm%3Djpg%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk2MCZoPTMyNCZ0eHQ9JTVCTm9kZS5qcyU1RCUyMFNvY2tldC5pbyVFMyU4MSVBNyVFNSU4RiU4QyVFNiU5NiVCOSVFNSU5MCU5MSVFOSU4MCU5QSVFNCVCRiVBMSVFMyU4MyU4MSVFMyU4MyVBMyVFMyU4MyU4MyVFMyU4MyU4OCVFMyU4MiVBMiVFMyU4MyU5NyVFMyU4MyVBQSVFMyU4MiU5MiVFNiVBNyU4QiVFNyVBRiU4OSUyMCVFMyU4MCU5QyUyMEpTJUUzJTgxJThBJUUzJTgxJThGJUUzJTgxJUFFJUUzJTgxJUJCJUUzJTgxJTlEJUU5JTgxJTkzJTIwJTIzMDA1JTIwJnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnR4dC1jb2xvcj0lMjMxRTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmdHh0LXBhZD0wJnM9OTU1MDNhYWNlODBlMzg3YTk4ZmVkODdjNGJhNjMwYWE%26mark-x%3D120%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTgzOCZoPTU4JnR4dD0lNDBob3NvbWljaGkmdHh0LWNvbG9yPSUyMzFFMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtcGFkPTAmcz1jZDVlMGZjYWRlYjFlZWZkOTc3ZDg1NjBkOTFmYTM4Nw%26blend-x%3D242%26blend-y%3D454%26blend-w%3D838%26blend-h%3D46%26blend-fit%3Dcrop%26blend-crop%3Dleft%252Cbottom%26blend-mode%3Dnormal%26txt64%3DaW4gVW5pcG9z5qCq5byP5Lya56S-%26txt-x%3D242%26txt-y%3D539%26txt-width%3D838%26txt-clip%3Dend%252Cellipsis%26txt-color%3D%25231E2121%26txt-font%3DHiragino%2520Sans%2520W6%26txt-size%3D28%26s%3D28ec0142f197664cbe436a813d3b56c4)
[Javascript] イベント駆動型の設計ができるEventEmitterに入門 - YoheiM .NET
こんにちは、@yoheiMuneです。 今日はNodeJSやフロントJSで利用可能な、EventEmitterを使った、イベント駆動な実装方法をブログに書きたいと思います。 目次 本記事を試すための環境 この記事の内容は、nodejsで動作します。新し目のバージョンでお試しください（僕の環境ではv6.2.2で動作確認しています）。 また、BabelでフロントエンドビルドやWebpackでフロントエンドビルドを使えば、フロントエンドでもEventEmitterを利用可能です（いくつかのプロジェクトで利用されているのを見かけたことがあります）。 EventEmitterとは EventEmitterは直訳の通り、イベントを発火することができる機能で、主に「イベントを発火する人」と「イベントを受け取る人」の大きく2つに使い方が分かれます。具体的には、 イベントを発火する人 関数名 説明 という感
![[Javascript] イベント駆動型の設計ができるEventEmitterに入門 - YoheiM .NET](https://cdn-ak-scissors.b.st-hatena.com/image/square/ebe6155d1a3add398b3612821db040e9cb671b95/height=288;version=1;width=512/https%3A%2F%2Fwww.yoheim.net%2Fimage%2F474.jpg)
JavaScriptの深層学習ライブラリを使って「肥満判定プログラム」を作ってみよう
JavaScriptの深層学習ライブラリを使って「肥満判定プログラム」を作ってみよう JavaScriptで簡単に実践できる深層学習（2） 近年、第三次人工知能ブームが巻き起こっています。特に、深層学習（ディープラーニング）と呼ばれる技術で目覚ましい成果を上げています。本稿では、難しいと思われている機械学習（深層学習）を、お手軽プログラミング言語JavaScriptで実践してみます。難しい数式や理論は後回しにして、まずは、気軽に機械学習に触れてみましょう。 前回は、深層学習とは何かを概観してみました。なんとなく、雰囲気がつかめたでしょうか。今回は、実際にニューラルネットワークのライブラリを利用して、肥満かどうかを判定させてみましょう。 Node.jsとsynaptic.jsをセットアップしよう 深層学習ブームのおかげで、ゼロから深層学習を実装する必要はなくなっています。便利なライブラリやフ
now: リアルタイム・グルーバル・デプロイメント - Qiita
https://zeit.co/now の翻訳です。 nowとは? △now は、JavaScript (Node.js)もしくはDockerで動作するウェブサイトや、アプリケーション、サービスを素早く、簡単、確実にクラウド化することができます。 実際的な言い方をするなら、package.jsonもしくはDockerfileを含む任意のディレクトリが、nowコマンド一つでクラウドに送られます。 プロジェクトをデプロイする毎に、△now は固有のURLを与えます（ビルドが完了する前に！）。URLは次のようになります。my-app-erkgfjtrna.now.sh 本番環境へデプロイするときには、単に適切なエイリアスを選ぶだけです。 △nowは動的なコード（マイクロサービスおよびバックエンド）のためのCDNと考えることができます。 はじめに インストール nowを使い始めるには、次のようにn
step by stepで始めるwebpack - Qiita
※webpack1系の記事です。 1→2への移行ガイドを見る限り破壊的な変更点はそんなにありませんが、preLoadersやpostLoadersがなくなっていたり、差が出ていますのでご注意ください。 https://webpack.js.org/guides/migrating/ webpackを手を動かしつつ学べる初学者向け資料を作成しました。 公式のチュートリアルもあるのですが、webpackが使用されているOSSのボイラープレートを見る限り、世の中の使われ方に沿ってないかも？と思い書きました。 これから始める人の手助けになれば幸いです。 また最終形のソースをupしてあるので詰まったら見てください。 webpackとは webpack で始めるイマドキのフロントエンド開発の説明が良かったので引用させていただきます。m(_ _)m webpack は WebApp に必要なリソースの依
Facebook公式のcreate-react-appコマンドを使ってReact.jsアプリを爆速で作成する - Qiita
新規に作るReact.jsプロジェクトの、新しい始め方について書きます。スターターキットの代わりにどうぞ。 React.jsのひな形を簡単に作れるcreate-react-appが公開されました (2016/07/22) Launching create-react-app, a no config getting started experience, #nomorejsfatigue https://t.co/fqVWgn7w5t — React (@reactjs) July 22, 2016 Facebook(React.js開発元)がきょう、React.jsアプリを素早く作成するコマンドラインツール、create-react-appを公開しました。 公式ブログ記事: "Create Apps with No Configuration" GitHub: facebookincub
Riot.jsの落とし穴まとめ - Qiita
はじめに 軽量かつ学習コストも低めで書きやすいライブラリのRiot.jsですが、いわゆる落とし穴がいろいろあります。が、このライブラリに関する__日本語の__記事があまり多くなく、コード書いていると突然「あれっ！？」となることがたまにあるので、自分が知っているものを書いていきます。 ※執筆現時点でのバージョンは2.4.1です。 ※2016/11/10追記 既に3.0.0-alpha.13がリリースされた今、2.4.1なんて古いバージョンを使っている方はいないと思いますので、今の時点での2系の最新である2.6.7でも確認しました。 親タグマウント時に子タグもマウントされる タグ(.tagのこと)がネストしていると、親タグをマウントすると子タグも一緒にマウントされます。 例えば以下の様な場合、親タグ（appタグ）で何か処理する必要があって、その結果でマウントする子タグを決めたい場合、子タグ（c
Pebbleのアプリを自分で作っちゃおう：Pebble実機レポート後編 - 週刊アスキー
前編（関連記事）で紹介した通り、Pebbleは開発ツール（SDK）が公開されており、作成したアプリケーションはPebble Appstoreから配布することができる。これらはすべて無料であるので誰でも気軽にPebbleのアプリケーションの開発に参加することができる。 ・Develop for Pebble（外部サイト：開発者向けの公式ポータルサイト） そこで後編では、開発者の視点でPebbleではどんなことができるのか、またどのようにしてアプリケーションを開発するのかについて紹介する。 ■アプリケーションの形態 まずアプリケーションの形態としては以下の種類があり、開発者は作成するアプリケーションの目的に合わせて選択することができる。 ・Watch App / Watchface ・Watch App ＋ JavaScriptフレームワーク ・Watch App ＋ コンパニオンアプリケーシ
Web Audio APIを恐ろしく簡単にする「Tone.js」で音楽プログラミングを試してみた！ : うえぶはっく
「Web Audio API」を使うと音声の「再生」だけでなく、音の「生成」や「加工」などもJavaScriptだけで手軽にプログラミングすることが出来るようになります。 ただ、ちょっとクセがあるので「扱いにくい…」と感じる人も少なくないでしょう。 そこで、誰でも簡単に「Web Audio API」を活用できるJavaScriptライブラリ「Tone.js」について、今回は簡単なサンプルと共にご紹介しようと思います！ ファイルを準備しよう！ まずは、「Tone.js」を使ったサンプルを作るのに必要な「index.html」と「app.js」を用意しましょう。 「Tone.js」自体は、GitHubからダウンロードするか、以下のURLから利用可能です。 https://tonejs.github.io/build/Tone.min.js ひとまず、「index.html」はこんな感じでOKで
Web制作のクオリティを飛躍的に高めるJavaScriptライブラリ10選を一挙公開！ - paiza times
どうも、まさとらん（@0310lan）です。 みなさんは、「JavaScriptライブラリ」を活用しているでしょうか？ Webサイト制作はもちろんのこと、さまざまなWebアプリやサービスなどを開発する時に、大幅な時間短縮やクオリティを飛躍的にアップすることが出来るようになります。 そこで今回は、国内外で人気が高くて誰でも簡単に扱える「JavaScriptライブラリ」を厳選してご紹介しようと思います！ ■多機能な「写真ギャラリー」を組み込めるライブラリ！ ◆1.Viewer.js 複数の画像を表示する際に、オシャレな「ギャラリー風」に変換してくれるライブラリです。 類似のライブラリはいくつか存在しますが、「Viewer.js」は使い方が非常にシンプルで扱いやすいのに、多機能性も備えているスグレモノとなっています。 基本的な使い方としては、HTMLファイルに表示させたい画像を「リスト要素」で指
WebGLとWebSocketによる3Dオンラインレースゲーム「JS-Racing」の全て！（後編）
WebGLとWebSocketによる3Dオンラインレースゲーム「JS-Racing」の全て！（後編） 西田慎吾（株式会社アイ・エム・ジェイ） WebGLとWebSocketによる3Dオンラインレースゲーム「JS-Racing」の全て！（後編） 前回に引き続きHTML5 Japan Cup 2014にてWebGL賞と優秀賞をいただいたオンラインレースゲーム、JS-Racingの技術解説をさせていただきます。 サーバサイドの使用技術 サーバサイドの技術としてNode.jsを使用しています。Node.jsはサーバーサイドで動作するJavaScriptで、ノンブロッキングI/Oというモデルを採用しています。非同期処理でデータベースへのアクセスとWebページの表示を別々に行ってくれるので、ストレスなく大量のページの表示が出来ます。また、Socket.ioというライブラリを扱うことで、WebSocke
Electronでデスクトップウィジェットを作るまで - Qiita
はじめに HTML/CSS/JSを使ってデスクトップアプリケーションが作成できるElectron。 本記事ではデスクトップウィジェット作成するまでの流れを、簡単な時計アプリを題材として解説します。 ※ この時計アプリのソースコードとパッケージは、GitHubにて公開しています。 GitHub: SallyAcolyte/tutorial_clock 対象読者 HTML/CSS/JSで簡単なアプリは作れるが、Electronは初心者な方 Electronで透過ウィンドウ/フレームレスウィンドウを扱う際のポイントが知りたい方 自分好みなデザイン/機能を持つウィジェットを作成したい方 ※ Windows環境を前提としていますが、基本的な流れは他環境でも同様です。 チュートリアル Electronの入手 Electronの本体は、以下からダウンロードできます。 Releases · atom/el
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - storybookjs/storybook: Storybook is the industry standard workshop for building, documenting, and testing UI components in isolation
Riot.js入門 なるべく簡単に とはいえ 少し実用的に - Qiita
現在（2.2.4）のRiot.jsのifステートメントはfalseでも実行されてしまう件とその回避法 - Qiita
electronでbabel + reactを直接使えるようにするまで - Qiita
