Webの技術でデスクトップアプリが作れるフレームワークといえばElectronが有名ですが、より手軽に使えるのがNW.jsです。デザイナーでもちょっとしたデスクトップアプリならすぐに作れちゃいますよ。 NW.jsは、HTML、JavaScript、CSSといったWeb技術を使ってネイティブアプリを作るフレームワークです。一番単純なケースだと、手慣れたワークフローでWebアプリを作り、最後にジェネレーターですべてをコンパイルして、ブラウザー同様にWebアプリを表示できるネイティブアプリを作ります。このようなアプリケーションは「ハイブリッドアプリ」と呼ばれます。 ハイブリッドアプリがすばらしいのは、単になじみのある言語（HTML、JavaScript、CSS）で書けるというだけでなく、本質的に次のような普通のWebアプリよりも優れた点があるからです。 ブラウザーの種類とバージョンをコントロール

Angular2を学ぶ目的から、最近はElectron + Angular2でプレゼンテーションツールを作っている。 とりあえず一通り動くところまでできたのでpublishした。 github.com 使い方はこんな感じ。 エレベーターの中の30秒でちゃんと相手に伝わるプレゼンをすることを意味するElevator Pitchという言葉があるんだけど、Cafe Pitchという名前はそこからきている。 素早くプレゼンを作るためのツールだけど、現実30秒でプレゼン作れないだろじゃあcafeかな、みたいな感じで、まとめるとそんなに深い意味はないです。 ちゃんと実行できるバイナリを用意しようとは思ってるけど、その辺の準備に必要なことがまだわかっていないのでnpmでglobalにinstallすれば使える、という感じ。 このあたりの記事を見ると分かりそうなので、追って対応していこうかなと思う。 あと

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でTwitterクライアント作る話良く聞くので何も考えずにツイート出来るまでやる。 事前準備 Node.js Twitterアプリ申請（キー4つ） ElectronでHello World! $ git clone https://github.com/atom/electron-quick-start $ cd electron-quick-start $ npm install && npm start const Twitter = require('twitter'); const twitterClient = new Twitter({ consumer_key: 'P', consumer_secret: 'I', access_token_key: 'Y', access_token_secret: 'O' }); ... ipc.on('tweet', f

以下自分のためにメモ。こちらも参照。 いろいろさまよったあげく、最終的にMac用のElectronスタンドアロンアプリにGoのhttpサーバーを仕込むことにした。 なぜ素直にJSでサーバーサイドを書かないのかというと、もうGoで作っちゃったからです。 GoのhttpサーバーバイナリをElectronアプリに仕込む そのためにはGoのhttpサーバーをElectronアプリに仕込み、以下のいずれかを実現する必要がある: A: Electron からGo httpサーバーを起動する B: Go httpサーバーからElectronを起動する どちらを選ぶにしても、Electronを終了したらGoサーバーもしゅっと終了して欲しい。当初Aにしようかと思ったけど、先にhttpが起動してGUIが後から起動するのが自然だろうということでBに決定。 GoからElectronを起動するには Electron

Earlier this year, Github released Atom-Shell, the core of its famous open-source editor Atom, and renamed it to Electron for the special occasion. Electron, unlike other competitors in the category of Node.js-based desktop applications, brings its own twist to this already well-established market by combining the power of Node.js (io.js until recent releases) with the Chromium Engine to bring us

無性に Electron をやってみたかったので触ってみました。環境は Windows 10 です。 触りたくなった理由 Visual Studio Code、Slack、Azure Storage Explorer (Cross-Platform) といった Electron 製を触っていて何かいいなーと思い、Electron 公式サイトに訪れてみたら、↓のようにアイコンが並んでいるのが素敵だな～と思って。 Visual Studio Code と Microsoft Storage Explorer でよく見るアラートが一緒で、何となく気になったり（デザインは自家製だろうけど）。 参考サイト TypeScript+Electronでデスクトップアプリを作ってみる - SourceChord ここで手順通りにしつつ、 tsd query github-electron-main -ros

Mozillaの共同創業者でJavaScriptを考案したBrendan Eich氏は1月20日、Chromiumベースの独自Webブラウザ「Brave」を発表した。閲覧しようとするサイトに対し可能な限りHTTPSを利用した接続を試みる「HTTPS Everywhere」機能を内蔵するなど、プライバシを重視している点が特徴。WindowsおよびMac OS X、Linuxとモバイル（iOSとAndroid）版がリリース予定で、ベータ版の事前登録を受け付けている。 Braveを開発するBrave Softwareは、2014年春にMozillaを退社した後にEich氏らが立ち上げた企業。Eich氏は現在、Braveのプレジデント兼CEOに就任している。 BraveはChromiumをベースとするオープンソースのWebブラウザで、Electronフレームワークを利用して開発されている。HTTP

Boostnoteを使用してみた 最近話題になっているBoostnoteを使ってみました。しかし今日、Boostnoteについて書かれたブログ記事がまだ少なかったため、今回は設定法や簡単な使用例の説明、使ってみた感想について記していこうと思います。 (この記事は随時更新予定です。) Boostnoteとは？ boostnote.io 簡単に言ってしまうとプログラマのための"メモ帳"アプリです。使い方としては、 簡単なメモを取る よく使うコードをメモしておく この2種類が挙げられます。前者について、Boostnoteは他のテキストエディタに比べて起動が早くMarkdownにも対応しているので簡単に綺麗なメモをとることができます。また、後者が特にこのアプリの良い所だと思うのですが、後述するFinderを使うことで簡単にソースコードの使い回しができるようになります！よく使うソースコードや忘れてし

注意(2016/01/29追記) Parseサービスの終了が発表されました。 利用できるのは2017/01/28までだということです。 Facebook Shutters Its Parse Developer Platform | TechCrunch http://techcrunch.com/2016/01/28/facebook-shutters-its-parse-developer-platform/ Moving On http://blog.parse.com/announcements/moving-on/ こんなに便利なサービスが終了してしまうのは残念でなりません。。 (一応ParseサーバーとMongoDBのマイグレーションツールが公開されるということなので 自前サーバーで管理すればParseと同じようなものを動作させることは可能かもしれません。) 背景 最近個人で掲

ちょっと最近Fallout4でサンクチュアリを開発するのに忙しすぎてOSS界隈の仕事サボってしまっていたので、31日にして書かないといけない記事が2つほど残っていることに気づきました。 なので、一個をこの場で投下しておきます。 手短に言うと、electronicaというworkshopperを作りました。 github.com $ npm install electronica -g $ electronicaで起動します。最初はHello Electron から始まり、最終的に小さなブラウザを作るくらいまでの事をやります。 残念ながら、verifyは動かないので、終わったたら自己判断で次のexerciseをやらないといけないので、まだNodeSchoolで使えるまでは行かないのですが、暇な冬休みにやってみてください。 僕はこの冬休みにはverifyがちゃんと動くようにします。 では次の記

そのうちもう少しきちんと書きますが、とりあえず時間がないので結論だけ書くと、タイトルが全てでElectronでアプリを書く場合は気合いと根性でXSSを発生させないようにしなければならない。 これまでWebアプリケーション上でXSSが存在したとしても、影響範囲はそのWebアプリケーションの中に留まるので、Webアプリケーションの提供側がそれを許容するのであればXSSの存在に目をつむることもできた。しかし、ElectronアプリでDOM-based XSSが一か所でも発生すると、(おそらく)確実に任意コード実行へとつながり、利用者のPCの(そのユーザー権限での)全機能が攻撃者によって利用できる。 そのため、Electronでアプリケーションを作成する開発者は気合いと根性でXSSを完全につぶさなければならない。 nodeIntegration:falseやContent-Security-Pol

手軽にデスクトップ（or ウィンドウ）を録画できるアプリが欲しかった Photon を使ってみたかった Electron 楽しい 以上の動機で書いてみました。Rec って名前です（てきとー）。レポジトリはこちら。Mac であればバイナリを置いてあります。Windows は試していないです。 使い方 アプリを起動するとデスクトップとウィンドウの一覧がサイドバーに並ぶので、録画したいものをクリックしてから、カメラアイコンをクリックで録画開始です。止めるときは停止アイコンですね。仮想デスクトップをお使いの場合は、対象のデスクトップにアプリを移動して、右上のリフレッシュボタンをクリックです。 停止アイコンをクリックで録画された webm がダウンロードできますので、あとはご自由にどうぞ。 中身 Electron v0.36.0 から desktopCapturer モジュールが使えるようになりまし

Electron (エレクトロン)はウェブの技術でデスクトップアプリケーションを開発できる人気のフレームワーク。HTML5とCSS3とJavaScriptで開発できるため、ウェブ開発者であれば手軽に導入できます。それもクロスプラットフォームなので、ワンソースでWindowsとmacOS向けのソフトウェアが作れることが利点です。 GitHub社の「Atom」やMicrosoft社の「Visual Studio Code」もこのElectronを使って開発されているなど、大手企業が採用していることでも人気の高さがうかがえます。この入門サイトでは、開発環境のセットアップからサンプル・アプリケーションの作り方を解説します。 Electron入門編 最新版で学ぶElectron入門 - ウェブ技術でPCアプリを開発しよう Electronの導入手順を解説。ゼロからアプリケーションのビルドまでの手順を

はじめに HTML/CSS/JSを使ってデスクトップアプリケーションが作成できるElectron。 本記事ではデスクトップウィジェット作成するまでの流れを、簡単な時計アプリを題材として解説します。 ※ この時計アプリのソースコードとパッケージは、GitHubにて公開しています。 GitHub: SallyAcolyte/tutorial_clock 対象読者 - HTML/CSS/JSで簡単なアプリは作れるが、Electronは初心者な方 - Electronで透過ウィンドウ/フレームレスウィンドウを扱う際のポイントが知りたい方 - 自分好みなデザイン/機能を持つウィジェットを作成したい方 ※ Windows環境を前提としていますが、基本的な流れは他環境でも同様です。 チュートリアル Electronの入手 Electronの本体は、以下からダウンロードできます。 Releases · a

Slide at #nodefest

この記事を書いた背景 electronのwebviewを使って、他のサイトのページを表示させることができます。 開発していくなかで、webview内のHTMLデータなどを引っ張り出して、違うところで使いたいというシーンが出てきます。 たとえば、 qiitaページ内の未読数を取得してみたい ページ内からスケジュールを取り出して、リマインダーを作ってみたい などとかがその例にあたります。 ただ、解決にまたまた時間がかかってしまったので、備忘録がてらに解決法を記載します。 前提環境 windows 7 NodeJS v0.12.5 electron v0.33.1 本題 ここでは、「qiitaページ内の未読数を取得してみたい」を例にやってみます。 まずは、qiita-sampleフォルダを作って、package.jsonを生成します。

僕が1日に1回ぐらいの頻度で見ているページの中の1つに GitHub の Trending repositories のページがあります．このページには言語ごとに日毎・週毎・月毎の単位で GitHub 上で人気のリポジトリがランキング形式で表示されます． 話題になっているライブラリやソフトウェアの一次ソースとして便利なのですが，微妙にアクセスが悪い位置にあり，言語ごとにしか見られません．また，ランキングには常に人気な「常連」リポジトリが多々いるので，新しく話題になっているリポジトリはその中に埋もれがちになってしまいます． そこで，今回はこれらの問題を解決すべく，GitHub のトレンドクライアント Trendy を Electron ベースでつくりました． Trendy - Menubar App to Keep You in the Trend Trendy は GitHub のトレンド

全国5000人のエンジニアをやめて寿司職人になろうと思っているみなさんこんばんは。 前回までスライド共有用のアプリケーションを趣味(リハビリ)で作っていたのですが、折角なのでデスクトップクライアントも作ってみました。 構築にはElectronを使ったのですが、結構簡単にできたので記録としてまとめておきます。 Electronって何？GitHubが開発するクロスプラットフォームで動作するアプリケーションを開発するためのフレームワーク。コードの記述はHTML5とNode.js。その範囲であれば既存のWeb開発技術が使いまわせる。例えばjQueryとかAngularなんかを使うのも可能Chromeブラウザのオープンソース版のChroniumのエンジンを内蔵例えばAtom・Visual Studio Code・Slackクライアントや、日本だとKobitoあたりがメジャー作り方あちこちに記事があが

初めてElectronを使ってTwitterクライアント https://github.com/k0kubun/Nocturn を作ったときによくわからず時間を吸われたことについて、これからElectronを使いはじめる人のために残しておく。 トラックパッドでスクロールすると画面の外までひっぱれてしまう マウスホイールでスクロールしてると気づかないのだが、トラックパッドで画面の適当なところを引っ張ると画面の外側が見えてしまい、普通のブラウザっぽくなる。Electronの検索性が低くてなかなか情報にたどり着けなかったが、ChrominumベースなのでChromeについてググったら直し方がわかった。 http://stackoverflow.com/questions/12046315/prevent-overscrolling-of-web-page html, body { width: