Electron入門 開発環境の構築と最初のプログラム作成｜スズシンラボ オフィシャルブログ
最近気になっているHTML5関連の技術。 特に、「Electron」にずっと関心があったのですが…。 今まで手を付けていませんでした。 今日は、何となくElectronの事が特に気になりましたので…。 せっかくの機会なので、Electron入門をしてみようと思い立ちました。 そこで、私はElectron開発のための環境を揃えて、最初のプログラムを作成するところまでをやってみました。 実際やってみると、そこまで難しいということはありませんでしたよ。 大体30分くらいで動作するところまでいけましたね。 今回の記事は、Electronの開発環境の構築方法と、最初のプログラムを書いて動作させる方法をまとめます。 Electronとは？ Electronというのは、GitHub社が開発したオープンソースのソフトウェアフレームワークです。 主な特徴としては、「Windows/Mac/Linuxのクロス
Electron: Context Isolationの欠如を利用した任意コード実行 / Electron: Abusing the lack of context isolation - CureCon(ja)
ベルリンで開催されたCure53のイベント、CureConの資料です。
Vue.js + Electron でマークダウンエディタをサクッとつくってみた - dev.kokushin
最近話題の軽量フレームワーク「Vue.js」と簡単にアプリ化できる「Electron」を組み合わせて、練習がてらマークダウンエディタをつくってみました。 Vue.js + marked.js でマークダウンエディタ本体を作る 公式サイトのサンプルをそのまま引用します。 アプリ名は「MarkDown Visual Editor」にします。 jp.vuejs.org せっかくなので webpack を使ってみる せっかく覚えたので積極的に使っていくスタイル。 以下、現時点でのディレクトリ構造です。 mdve/ ├ app/ │ ├ app.js │ └ index.html ├ package.json └ webpack.config.js app.jsに「Vue.js」の処理を書きます。 Vue.js インストール $ npm install vue --save marked.js イン
ゼロから始めるElectron - 2週目 「ReactとRedux」 - Qiita
はじめに Electronの学習を始めて2週目が過ぎましたので、情報をまとめたいと思います。 使う技術については、スクリプト言語をES2015(ES6)、フレームワークにReact、 Flux実装はReduxにしました。 理由は早くリッチな画面コンポーネントを使いたいからです。 今回のまとめは、ほとんどがReactとReduxになります。 ゼロからという割に、少し難しく感じるかもしれませんがよろしくお願いします。 今の理解を整理するために書いています。 どんな画面コンポーネントがあるかは下の図も参照ください。 これまでの記事 1．ゼロから始めるElectron - 1週目 サマリ Reactの使い方に慣れ、リッチなコンポーネントを使ってElectronアプリケーションをよりモダンにしようというテーマです。 レトロなElectronアプリケーションを前提知識の少ない状態からReact+Red
React + Redux + Electronのプロジェクトを作成する。 - Qiita
前書き 前回、ReactのプロジェクトにReduxを導入する記事を作成しました。 今回では、そのプロジェクトをElectronを使ってデスクトップアプリ化する方法を記述します。 正直、前々回でやった「ReactのプロジェクトをElectron化する」で紹介した方法とほとんど似ています。 リポジトリ いつものReactTodoのリポジトリになります。 ブランチで分けていますので、差分等をみても参考になると思います！ react-todo-reduxが前回作成したReactTodoにReduxを導入したブランチ react-redux-electronが上記をElectron化したブランチになります。 ReactTodo 1. ディレクトリ変更 前々回でElectron化した時は、electronフォルダとreactフォルダを作成しました。 今回は、もっと分かりやすくディレクトリを変更します。
Electron+React+Reduxで作るレトロなエクスプローラのハンズオン(チュートリアル) - Qiita
はじめに 前提知識ゼロからReact、Redux、Electronの組み合わせでレトロなエクスプローラーを作って、その仕組みを知るハンズオンです。 プロジェクト作成から、モジュールのフォルダ構成の決定、実際のコードを書き、ビルドして実行するまでを長々と解説します。 目的 ReactやReduxって何？、Fluxとか敷居高そう、解説記事を読んでもよくわからないし、難しいアプリケーションやそのソースコードは重たい。 手っ取り早く動く簡単なサンプル作って動きや書き方を知りたい！という方に向けて作ったものです。 あらかじめお断りしますが、記事単体で完結させたいため長いです。しかしほとんどコードです。 解説は、今回の範囲だけで別の記事がたくさん書けそうなので、整理が終わってから（来週中には）作成したいと思います。 あいさつ 01、02、03は犠牲となったのだ。04以降の犠牲にな。 この記事を読んでで
ゼロから始めるElectron - 1週目 - Qiita
はじめに これはElectronを使ったアプリケーション開発の学習記録のためのものです。ゼロから初めて1週間たったので、記録します。 今回は、情報の洪水の整理と、参考サイトのまとめです。 Electronとは テキストエディタであるAtomエディタ(*1)の開発元(GitHubの創業者)が開発した、マルチプラットフォームで動作するディスクトップアプリケーションをWeb技術(with JavaScript, HTML, and CSS)で開発できるフレームワーク(*2)です。 *1 https://blog.codecamp.jp/atom_utility *2 http://www.buildinsider.net/enterprise/electron/01 ちなみに、Atom（原子）→Electron（電子）です。またElectronのテストツールの名前はSpectron（分光法）です
Electron + React + Redux - KAYAC engineers' blog
JSで書くデスクトップアプリが熱い Electron 熱いです。 Atom を始め、Qiita の Kobito や Slack など、 十分に実用できるアプリケーションが登場しはじめています。 なにかと話題のRPGツクールMVは、NW.js（旧node-webkit）ですが、これもJSで書かれていますね。 NW.js は、その他、女の子といちゃこらする系のゲームでも使われています。 JS でデスクトップアプリを書いて、うん千万売り上げるのも、もはや絵空事ではありません。 今回は、Electron と Redux、React の組み合わせで、 デスクトップアプリを作るまでの、簡単なチュートリアルを書きます。 登場人物紹介 Electron Github が開発してる、JS でデスクトップアプリが書けるすごいやつ NW.js より活発そうですごい React Facebook 製のすごいやつ
超簡単にcreate-react-appでReact + Redux + Electronの開発環境をつくる方法 - Qiita
Electronの開発環境を、create-react-appで作りたかったので調べてたら、ドンピシャのやつを発見した。 How to build an Electron app using create-react-app. No webpack configuration or “ejecting” necessary. この通りにやったらできた。create-react-appのreactの部分には一切手を加えず、webpackの設定なども不要で、コードを変えたらすぐにElectronのアプリに反映される。超お手軽で便利です。やり方は下記ですが、electron-with-create-react-appに下記修正後のコードがあります。 やり方 1. アプリ作成、インストール create-react-appでアプリを作って、electronとnode-foremanをインストールす
ElectronとPythonによるマルチプラットフォーム開発の続き - Qiita
Pythonの勉強になる、と言ったな。 しかも、HTML5は勉強しなくても良さげ、とも言ったな。 あれは うそ だ。 色々試した結果 正確にはうそではないんですが、中身を調査してわかったことは、Pythonの機能とFlask(jinja2)という機能を使って実現されています。 実際に試したコード 試しに下記のようなFlaskのみを使った記述を行い、electron .とやって見ましたが、きちんと動作しております。 $ cat index.py #!/usr/bin/env python3 # -*- coding: utf-8 -*- from __future__ import print_function import time from flask import Flask app = Flask(__name__) @app.route('/') def index(): retu
8a11b3e6fb6ead0cd257
Python界隈を後から追従しようとして、ドツボにはまったアカウントがこちらです。 色々調べて回っていたら、QiitaにPythonでデスクトップアプリを作る with Electronという記事が上がっていたので、試してみることにしました。 ほぼ全てがbrewとpipで片が付くので、オススメです。 素直にElectron、HTML5、JavaScriptをやってもいいのでしょうけど、Pythonを使って何か作りたい、勉強したい並びに業務の改善効率に役立てたいという気持ちがありました。 なお、HTML5やCSS3はHTML3から追従できなくなったので、どうせやるならpythonでやろうかな、とか考えたわけです。(pythonの勉強にもなる) Python界隈のマルチプラットフォーム開発環境の状況 2017年2月21日現在 腐ってやがる…早すぎたんだ。 もうPython周りの情報に振り回され
Electron as GUI of Python Applications (Updated) · Fleeting Years
Electron as GUI of Python Applications (Updated) 14 Feb 2017 tl;dr This post shows how to use Electron as the GUI component of Python applications. (Updated version of one of my previous posts.) The frontend and backend communicate with each other using zerorpc. The complete code is on GitHub repo. important notice This post and README.md on GitHub repo should be the same. If there are inconsisten
Electron + vue + neDBでプロジェクト管理ツール作成 - Qiita
昨年のあまりにも無計画な開発を省みて正月にプロジェクト管理のツールを作ることにしました。 ミニマムでコンパクトなものを目指した単体アプリです。 一部ライセンス的にまずいものを使用しているため引き剥がした後gitにアップさせて頂きます。 フレームワークと選定理由やメリット等は以下。 どれも大きなプロジェクトでは採用は見送られそうなものばかりですが パーソナルユースで小規模なものであれば使えるかと思います。 仕様について 下の説明で必要になるためザックリと仕様説明。 プロジェクトを、 プロジェクト >> プロセス >> アクティビティ >> タスク の順に階層化、詳細化します。本来タスクの下にリストがぶら下がりますが タスクまでの管理とします。 WBSをCRUDアプリケーション化したようなものです。 各項目はIPAの記載を参考にしてプロジェクト登録時自動で挿入します。 例えばプロジェクトを新規
そのReactほんとに必要ですか？～もうすぐElectronで使えるようになるWeb Componentsの世界～ - SourceChord
この記事はelectronアドベントカレンダー 2016 21日目の記事です。 遅くなってしまい申し訳ありません。。。 ※アドベントカレンダーのリンクが間違っていたので修正しました・・・汗 前置き ↓去年はこんな記事を書いていました。 このCSS Grid Layout Module Level1ですが、少しずつ仕様の策定が進み、とうとう勧告候補の段階まできました。 CSS Grid Layout Module Level 1 CSS Grid Layout Module Level 1 （日本語訳） CanIUseを見ると、もうすぐFirefoxとChromeでの対応が行われるようです。 http://caniuse.com/#search=grid https://developer.mozilla.org/ja/Firefox/Releases/52 未来は意外と早く来るもんですね。
Re:ゼロから始めるElectron開発生活 - Qiita
この記事は ドワンゴ Advent Calendar 10日目の記事です。 こんにちは。ニコニコ静画でフロントエンドで開発を行っている @nagisio です。 去年に引き続き、今年も冬コミに落ちて時間があるのでアドベントカレンダーに参加させていただきます。去年の記事は「新卒でもモダンなフロント開発がしたい！」でした。 今年一年の所感ですが、Reactの採用プロダクトが非常に増えてきている印象です。「You Don't Need jQuery」といった記事や、「Reactを使うとなぜjQueryが要らなくなるのか」といった記事が出てきたりと、Reactの勢いの強さが伺えます 本記事はますますモダン化が進むフロントエンド界隈において、今もっとも熱い（であろう）フレームワークReactとその他色々なあれこれを駆使して簡単なElectronアプリをゼロから開発（未完）しましたので、ご紹介します1
Electron アプリをつくる時に便利なパッケージ - はやくプログラムになりたい
この記事は Electron アドベントカレンダー2016 の13日目の記事です． 本記事では，僕が Electron アプリをつくる上で便利だったり，ほしかったのでつくったりしたパッケージを7つほど紹介します． electron-about-window electron-dl electron-in-page-search electron-window-state menubar node-auto-launch electron-mocha electron-about-window electron-about-window は 'このアプリについて' ウィンドウを簡単にクロスプラットフォームにつくるためのパッケージです．下記のように関数を1つインポートして呼び出すだけで「このアプリについて」ウィンドウを生成することができます．（example） import openAbout
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で何ができるかをみてください） なぜ重要？ 一般に、デスクトップアプリケーションは各オペレ
electron + webpack + react + sass | shimar's blog
以前、electron + webpack + sassという記事を書きました。今回はその続編で、electron + webpack + react + sassの開発環境を整えてみた、という話です。 electronアプリを作る際に、 rendererプロセス browserプロセス(Mainプロセス) を意識することになると思います。 electron + reactと謳う場合は、rendererプロセス側でreactを使う、という意味になると思っていて、この記事でもその文脈に則ってます。 electronアプリケーションを作る方法として正しいのかそうでないかはわからないのですが、やってみたかったこととしては、 webpackを使う webpackで、browserプロセスとrendererプロセスそれぞれのjsファイルを作る 画面(renderer側のhtml)で利用するstyle
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Electron で Evernote クライアントを作ってみた
Pythonでデスクトップアプリを作る with Electron - Qiita
