By Tzahi Vidas This article is a step-by-step tutorial on how to create a basic markdown application using Electron and React. I’ll describe why, how, and what I used to create the markdown app, which I call Mook. The source code for Mook can be found on GitHub. Motivation There are a couple of reasons I started this project. Recently, I’ve been seeing more impressive and interesting things that y
Updated for Elm 0.17.1: Thanks to Tony Onodi and others for calling out the necessary changes. And if you have trouble in Windows check out Lourens Rolograaf’s comment below. I’m going to walk you through the steps of setting up an Electron App that uses Elm. If at any point you have trouble, let me know. By the End of this tutorial you should have a desktop application running on your system disp
var app = require('app'); var BrowserWindow = require('browser-window'); var mainWindow = null; app.on('window-all-closed', function() { app.quit(); }); app.on('ready', function() { mainWindow = new BrowserWindow({width: 800, height: 600}); mainWindow.loadUrl('file://' + __dirname + '/app.html'); mainWindow.on('closed', function() { mainWindow = null; }); }); 上記のように基本的にはメインプロセスはjsで あとはレンダラープロセスで描画
この記事は ドワンゴ Advent Calendar 10日目の記事です。 こんにちは。ニコニコ静画でフロントエンドで開発を行っている @nagisio です。 去年に引き続き、今年も冬コミに落ちて時間があるのでアドベントカレンダーに参加させていただきます。去年の記事は「新卒でもモダンなフロント開発がしたい！」でした。 今年一年の所感ですが、Reactの採用プロダクトが非常に増えてきている印象です。「You Don't Need jQuery」といった記事や、「Reactを使うとなぜjQueryが要らなくなるのか」といった記事が出てきたりと、Reactの勢いの強さが伺えます 本記事はますますモダン化が進むフロントエンド界隈において、今もっとも熱い（であろう）フレームワークReactとその他色々なあれこれを駆使して簡単なElectronアプリをゼロから開発（未完）しましたので、ご紹介します1
Electron製のマークダウンビュワーアプリ Markn v0.1.1 をリリース。リアルタイムプレビューのCPUコストが低めなのが特徴。とりあえずビュワーとして最低限ぽい機能を実装したのでマイナーバージョンを上げてリリースした。 こういうアイコン -> 作ったきっかけ @minodisk Atom最低のマークダウンビュワーだった pic.twitter.com/qitOXRi0X8 — 炭水化物 (@minodisk) 2015, 7月 1 この四日間に何があったのか？ 5000行オーバーのマークダウンを編集しようとしたらフリーズした。Atomのマークダウンプレビューはファイルに変更がある度にマークダウンをHTMLにコンパイルし全要素を再レンダリングするのでそのコストが半端無く、CPU使用率が激増した模様。1 目指してるところ 大きなマークダウンを編集しながらプレビューできる 大きなマ
electron の clipboard API 使ってクリップボードを監視するアプリ作りました クリップボード監視先輩 zaftzaft/cbsnpi 使ったもの ビルドツールには webpack タスクランナーは gulp プリプロセッサ類は CoffeeScript, Jade, Stylus それらに Vue.js を加えてモダンな感じにしました。 ディレクトリ構成 release ディレクトリは、win32-x64.zip など配布物の出力先に使用します 一応バージョンごとに切っておきます 全体の流れ インストール electron の動作環境を作る http://electron.atom.io/docs/v0.31.0/tutorial/quick-start/ の main.js を丸コピペで保存 gulp, webpack, etc を入れる 開発 gulp で watc
##はじめに React.js, JSX, ElectronでPomodoro Technique（ポモドーロテクニック）を実践できるタイマーアプリを作ってみました。 https://github.com/massa142/pomodoro ##作った理由 PHPカンファレンス2015でのKenji Akiyamaさんの発表資料を見て、「Electron面白そう！ちょっと試してみよ」となったためです。 Electronからクロスプラットフォーム・アプリケーションの歴史を考える ただ作りたいものがパッと思いつかなかったので、Akiyamaさんと同じPomodoro Technique用のタイマーアプリをReact.jsで作ってみることにしました。 ##Pomodoro Techniqueとは 1.達成しようとするタスクを選ぶ 2.キッチンタイマーで25分を設定する 3.タイマーが鳴るまでタス
はじめに ElectronはNode.js + HTML5フロントエンドのいいとこ取りな開発が行えるのが特徴です。その分、開発環境もElectronならではの考慮・工夫が必要になります. 今回のエントリでは, Electronアプリを快適に開発するための開発環境Tipsを書いていきます. そもそも「Elecronってなんぞや？」とか「どういう風にアプリを作るの？」という方については, 手前味噌で恐縮ではありますが, Electronでアプリケーションを作ってみよう を目を通すことをオススメします. また, 今回のエントリの元として、Quramy/electron-jsx-babel-boilerplate のレポジトリが出来上がっています. React + Bable + Sass + Livereload + Platform用Packaging 入りのBoilerplateですので,
はじめに Electronをご存知でしょうか. Electron(旧称: Atom-Shell)は, Atomエディタを開発するために生まれたクロスプラットフォームデスクトップアプリケーションエンジンです. Node.js + Chromiumをランタイムとしており, Atomだけでなく, Slackや先日のBuildで発表されて話題となったVisualStudio CodeもElectronで実装されています. いわゆるWeb系の技術, Node.js + HTML + CSSでアプリケーションを作成できるのが特徴です. 類似した思想のフレームワークとして, node-webkit(NW.js)もありますが, アプリケーションのエントリポイントの考え方等が異なります. このエントリでは, Electronの使い方をサンプルアプリを実装しながら説明していきます. お題 このエントリのお題と
はじめに 極ライトにAtom Shellの追いかけやってます なんで、そんなことやってるかとかのエモイことは、気が向いたらブログに書くかもしれないので、 Feedlyなどで、購読をオネシャス！ atom-shell - Atom Shellで俺の役に立ったIssue達 2015年春版 - Qiita 勉強になるもの つまり、あとで読もう状態のもの Error building in Linux (undefined reference to symbol 'XConvertSelection') · Issue #500 · atom/atom-shell もともと12.04LTS向けにいろいろ作っているから、Ubuntu14.04ではビルドに工夫が必要らしい。 Support to choose clipboard in clipboard operations (to support
これまで 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 を採用 ユニット テスト対応 コード ドキュメント対応
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
