ElectronでPC画面上にコメントが流せるデスクトップアプリを作ってみた - Qiita
はじめに PC画面上にコメントが流せるデスクトップアプリをElectronで作ってみました。 名前は、「wakaba」です。 コメントはTwitterから特定のキーワードを含むツイートを取得して流します。 イベントやライブコーディングの時に使うと面白いかもしれません。 コンポーネントの部分は、Reactではなく、Riotを使いました。 動作 PC画面上にコメントが流せるデスクトップアプリをElectronで作りました。 Twitterからツイートを取得して、コメントを流しています。 GitHub: https://t.co/v8OKRqf0It ダウンロード: https://t.co/ScVcy1HaLS pic.twitter.com/o6S3FBGZK3 — yuki540 (@eriri_jp) 2017年3月19日 使い方 ダウンロード ダウンロードしたものが動かない問題解決しま
ストレスフリーなGitHubのIssue生活 - クックパッド開発者ブログ
こんにちは。サービス開発部の丸山@h13i32maruです。 今日はGitHub/GHE(GitHub Enterprise)で快適なIssue生活をおくるために作ったJasperというツールと、それを実際にどうやって使っているかを紹介させていただきます。 ストレス GitHub/GHEを日々の業務の中心として使っていると、すごくたくさんのIssueやPull Request(以下PR)が流れてきます。 これらのIssueを処理する方法としては主に「メール」と「通知ページ(github.com/notifications)」の2つだと思います。 僕もこれらの方法を使っていたのですが、以下の点ですごく困っていました。 多すぎてメンションされたものやコメントしたものを見逃してしまう あとで見ようと思って、忘れる ブラウザのタブを大量に開いた状態になる 知らないところのIssueで議論が進んでい
Essential Electron : Electronの簡潔・平易な概要 | POSTD
Electronとは？ Electronは JavaScript、HTML、CSS を使ってデスクトップアプリケーションを作ることができる ライブラリ です。作ったアプリケーションはMac、Windows、Linuxで動かせます。 次は： なぜ重要？ 定義： JavaScript、HTML、CSS はWeb用の言語で、Webサイトの基本的な構成要素です。Chromeなどのブラウザは、コードをふだん目にするグラフィックに変えて表示します。 Electronはライブラリです Electronはコードですが、再利用でき、自分で書き起こす必要がありません。ユーザはその上にプロジェクトを構成します。 参考資料 Apps built on Electron Electron API Demos （Electronで何ができるかをみてください） なぜ重要？ 一般に、デスクトップアプリケーションは各オペレ
pdf.jsなPDFビューアアプリをElectronで作った
タイトルどおりですが、FirefoxのPDFビューアをスタンドアローン化したようなアプリを作りました。 azu/mu-pdf-viewer: PDF viewer on electron. 特徴は次の通りです。 PDF.jsベース J, Kでスクロールなどいじっています Drag and Dropをサポートしてます Install npm でインストールするか バイナリをダウンロードして使えます(OS Xのみ) https://github.com/azu/mu-pdf-viewer/releases/latest Travis CIとかでelectronを自動ビルドするのがかなり難しくなったので、自分用にOS X版のみバイナリを作ってます。 READMEにその他の環境のバイナリの作り方を書いてあります。 Usage npmでインストールした場合はCLIから起動できます。
TravisCI 上で Electron のアプリをビルドする - Qiita
TL;DR wine を入れる electron-packager を使って各OSのパッケージを作る https://docs.travis-ci.com/user/deployment からパッケージをアップロードしたいものに合わせて設定を書く 今回は、タグをつけたら Github Release にリリース作って、ビルドしたアプリのファイルをアップロードする before_deploy: - sudo add-apt-repository ppa:ubuntu-wine/ppa -y - sudo apt-get update -q - sudo apt-get install -y wine1.7 - npm run package deploy: provider: releases api_key: secure: 'xxxxxxxxx' file: - build/Releas
Essential Electron
Read this in Japanese. What is Electron? Electron is a library you can use to build desktop applications with JavaScript, HTML and CSS. These applications can be packaged to run on Mac, Windows and Linux computers as well as be placed in the Mac and Windows app stores. Next: Why is this important? Definitions: JavaScript, HTML and CSS Are web languages, meaning they are the building blocks of webs
Webデザイナーの仕事が広がる！ElectronとReactでデスクトップアプリ開発
WebデザインとJavaScriptの技術があれば、デスクトップアプリも自在に作れる時代です。ElectronとReactを使って、SoundCloudの音楽を自由に再生できるデスクトップアプリを作ってみました。 本記事はMark Brown、Dan Prince、Bruno Motaが査読を担当しています。最高のコンテンツに仕上げるために尽力してくれたSitePointの査読担当者のみなさんに感謝します。 GitHubが開発したElectronは、Webデザインのスキルを存分に活用し、クロスプラットホームで軽快に動くデスクトップアプリを作成できます。この記事では、ElectronをReact、ES6、SoundCloud APIと組み合わせて、デスクトップでお気に入りの曲を流せるスタイリッシュな音楽ストリーミングアプリを作る方法を紹介します。また、この音楽ストリーミングアプリをパッケージ
本を書くためのアウトラインエディタを作ってる - mizchi's blog
少し前からアウトラインエディタを作ってる。 こんなの (画面は開発中のものです) ファイルツリー 複数シート同時編集 ファイルツリーUIというのをスクラッチで初めて作ってみたんだけど、「当然こう動いて欲しいよな」というヒューリスティックな挙動をたくさん作るハメになってて学びがある。 なぜ作ったか 技術書を書いて Kindle Direct Publishing で販売しようと思って、Macで売れてるアウトラインエディタを一通り試したんだけど、惜しい物が多くて、個人的にしっくり馴染むものがなかった。なので、技術書を書く前に、自分が本を書くために必要なツールを作るところから始めることにした。 作家・藤井太洋に聞く 「小説を書くためのツール、Scrivener」 - DOTPLACE を読んで、その辺のアプリに対する感覚を自分でも意識して作ってる。Scrivener は wysysig なんで自
Electronの公式テストフレームワークSpectron入門 - ICS MEDIA
Spectron（スペクトロン）はElectronの為のテストフレームワークで、ElectronのAPIを使用したテストが可能になります。テストを取り入れることで、「想定していた動作と違う」「作成していた機能がいつの間にか動作しない」といったことを未然に防げます。 Spectronからは実際にElectronアプリを起動することができ、「ウィンドウのタイトル」「デベロッパーツールの表示状態」といったことをElectronのAPIにアクセスして取得できます。また、「ページの画像キャプチャー」機能でデザイン崩れが発生していないかのチェックや「ページのテキスト保存」でテストに失敗した時のHTMLテキストの取得、「console.log()で書きだした内容の取得」も可能です。これらのテストは手元の開発機だけでなくJenkinsなどCI（継続的インテグレーション）サービス上でも使用できます。 ▲ 本
Electronを勉強していただけなのに... @ Meguro.es #5
Presented in http://meguroes.connpass.com/event/35123/
GitHub、Electron APIのサンプルコードなどを収録した「Electron APIs」をMacAppStoreで公開。
GitHubがElectron APIのサンプルコードなどを収録した「Electron APIs」をMac App Storeで公開しています。詳細は以下から。 Electron APIsアプリはGitHubが今年5月に公開した「Electron API Demos」のMac App Store版で、JavaScript, HTML, CSS, Electronを用いてクロスプラットフォーム対応のデスクトップアプリを作成するためのチュートリアルなどが収録されています。 The new Electron API Demos app contains code snippets to help get your app started: https://t.co/Ow2xN2ponC pic.twitter.com/vt63MJ9wp7 — Electron (@electronjs) 201
ElectronアプリのXSSでrm -fr /を実行する - Qiita
Electronアプリでxssを発生させると任意のコードが実行できるらしいのでrm -fr /を試してみます。 想定 web版とelectron版のあるチャットアプリケーションという設定です。攻撃者が用意したリンクをクリックすると、PC内のすべてのファイルを消し去るというシチュエーションを考えてみます。 用意 環境はホストmac OSX、ゲストにubuntu14.04環境をvagrantを利用し用意しました。 expressでリストとフォームからなる脆弱性のあるチャットをつくります。エスケープ処理をしてないので、任意のコードが実行できる状況です。 'use strict'; const path = require('path'); const express = require('express'); const app = express(); const ejs = require(
Electron で Markdownプレゼン作成ツールを作って公開するまで - Qiita
Markdown でスライドを作るためのツールを漁っていたのですが、なかなか自分好みのものが無く、Electron の勉強を兼ねて作ってみた話です。 追記 (2018/12/10): その後の進捗はこちら Puppeteer & Carlo を Markdown スライド作成 CLI ツール (Marp CLI) で活用する - Qiita 成果物 今回作ったプレゼンツールは、以下にてプレリリース版を公開しています。 Marp - Markdown presentation writer https://yhatt.github.io/marp/ (旧称 mdSlide) 追記 (2016/07/13 19:42) ＿人人人人人人人人人人人人人人＿ ＞ 突然のGithubトレンド入り ＜ ￣Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y￣ Markdown スライドツール比較表 私の欲
ElectronなGitフロントエンド「GitKraken」を使ってみた - たけぞう瀕死ブログ
AxosoftがGitKrakenという新しいGitフロントエンドを開発しているようです。 www.gitkraken.com 最近のプロダクトらしくElectronで開発されており、NodeGitを使用しているようです。ベータテストをやっているようなので早速申し込んでみました。 メイン画面はこんな感じ。コミットグラフの見た目や操作性は非常にいい感じです。 機能はまだ不足している感はありますが、日常作業であれば問題なくこなせる程度のクオリティには達していますし、動作もなかなか軽快です。また、1ウィンドウで複数リポジトリを切り替えて扱うことができ、切り替えもプルダウンで簡単に行うことができます。 ただ、やはりGUIのGitフロントエンドには対話式でリベースする機能が欲しいところです。MacのGitクライアントで対話型のリベース機能を持っているSourceTreeは動作の重さもさることながらリ
electron を学べる workshopper である electronica を作ってみました。 - from scratch
ちょっと最近Fallout4でサンクチュアリを開発するのに忙しすぎてOSS界隈の仕事サボってしまっていたので、31日にして書かないといけない記事が2つほど残っていることに気づきました。 なので、一個をこの場で投下しておきます。 手短に言うと、electronicaというworkshopperを作りました。 github.com $ npm install electronica -g $ electronicaで起動します。最初はHello Electron から始まり、最終的に小さなブラウザを作るくらいまでの事をやります。 残念ながら、verifyは動かないので、終わったたら自己判断で次のexerciseをやらないといけないので、まだNodeSchoolで使えるまでは行かないのですが、暇な冬休みにやってみてください。 僕はこの冬休みにはverifyがちゃんと動くようにします。 では次の記
Electronでアプリを書く場合は、気合いと根性でXSSを発生させないようにしなければならない。 - 葉っぱ日記
そのうちもう少しきちんと書きますが、とりあえず時間がないので結論だけ書くと、タイトルが全てでElectronでアプリを書く場合は気合いと根性でXSSを発生させないようにしなければならない。 これまでWebアプリケーション上でXSSが存在したとしても、影響範囲はそのWebアプリケーションの中に留まるので、Webアプリケーションの提供側がそれを許容するのであればXSSの存在に目をつむることもできた。しかし、ElectronアプリでDOM-based XSSが一か所でも発生すると、(おそらく)確実に任意コード実行へとつながり、利用者のPCの(そのユーザー権限での)全機能が攻撃者によって利用できる。 そのため、Electronでアプリケーションを作成する開発者は気合いと根性でXSSを完全につぶさなければならない。 nodeIntegration:falseやContent-Security-Pol
Electronを探す日常 - Qiita
ごきげんよう皆様、精神が壊れてしまい休職中の erukiti ですが、第2のドワンゴ Advent Calendar 2015 - Qiita の第20日目を5日ほど遅れてお送りします。遅れてすみません。 erukiti/rize-filer 今回の記事は… さて、Electronの解説記事は割と多いですが、ちゃんと使えるアプリを作るために必要な情報は色々散らばっています。そこで今回はリゼ先輩＆シャロちゃんと一緒に一つ一つそれらを見ていきましょう。ごちうさ風味の書き方ですが内容は普通にElectronの記事です。 Electronに興味があるけれどよく知らない方は 第8羽 トランスペアレントプレイング・プレイヤーストーリー (ごちうさ Advent Calendar 2015) - Qiita をまずはお読みください。Electron でちょっとした動画プレイヤーを作ってみるという記事でし
Web Components と Electron でつくる Neovim フロントエンドの未来 - はやくプログラムになりたい
この記事は Vim Advent Calendar 2015 の20日目の記事です． まずはこちらのスクリーンショットをご覧ください． エディタの UI やカーソル移動は Vim っぽいですが，markdown ライブプレビューやカーソル位置での画像ポップアップ，組み込みブラウザなど謎の UI が見て取れます．本記事ではこれについてボトムアップで必要な知識から順を追って紹介します． 長い……三行で Neovim msgpack-rpc API を使って <canvas> と Node.js API で Neovim フロントエンドを作成し Web Component としてラップ して HTML アプリに簡単に組み込めるようにした上で UI プラグインをウェブ技術で構築できる NyaoVim という Neovim GUI エディタを Electron 使ってつくってます． 目次 Web C
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
DeNA Engineering - DeNAエンジニアのポータルサイト
[PDF] Electronの倒し方