Electron入門 開発環境の構築と最初のプログラム作成｜スズシンラボ オフィシャルブログ
最近気になっているHTML5関連の技術。 特に、「Electron」にずっと関心があったのですが…。 今まで手を付けていませんでした。 今日は、何となくElectronの事が特に気になりましたので…。 せっかくの機会なので、Electron入門をしてみようと思い立ちました。 そこで、私はElectron開発のための環境を揃えて、最初のプログラムを作成するところまでをやってみました。 実際やってみると、そこまで難しいということはありませんでしたよ。 大体30分くらいで動作するところまでいけましたね。 今回の記事は、Electronの開発環境の構築方法と、最初のプログラムを書いて動作させる方法をまとめます。 Electronとは？ Electronというのは、GitHub社が開発したオープンソースのソフトウェアフレームワークです。 主な特徴としては、「Windows/Mac/Linuxのクロス
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
Electronでニコ動のコメントみたいにTweetを表示するアプリつくった - c-bata web
知り合いのエンジニア(rayさん)がGTK3で作っていた nsd というのがあるんですが、結構いい感じなのでMacでも動くものが欲しかった。 Electronで似たようなことが出来ないか調べてみると、GTK3とかに比べて簡単にできそうだったので作ってみた。 ポイントは： 常に最前面にtweetが表示される マウスのイベントが後ろに透過する コーディングだったり他の作業が問題なく出来る 今度、カンファレンスや勉強会で話す時にハッシュタグ表示してみます。 ロゴも描いてみた マウスのイベントの透過について rayさんのnsdとかの場合、tweetのテキストを囲うだけのとても小さくて透明なウィンドウを用意していたらしい。こうすることで文字以外のところをクリックすると後ろにマウスのクリックイベントとかが通る仕組み。 透明なウィンドウを作れるGUIツールキットはたくさんあるみたいなのですが、Elect
Electronプログラミング入門 — インストールからミニブラウザ構築まで
Electronプログラミング入門 — インストールからミニブラウザ構築まで 古川陽介 Electronとは、デスクトップクライアントを作るためのフレームワークです。クロスプラットフォームで動作することをサポートしているため、Electronで作ったアプリケーションはMac、Windows、Linuxの環境でも動作します。Atomと呼ばれる GitHub社製のエディタがあります。 ElectronはAtomを作る際にフレームワークとして作られました。以前はAtomShellと呼ばれていましたが、Electronとして名前を変更し、2016年にはversion 1.0がリリースされるまでに成長しました。 ElectronはJavaScript / HTML / CSSを使ってクライアントアプリケーションを作成します。中のアーキテクチャはChromiumとNode.jsで作られており、Web開
Electron アプリを Mac App Store に登録する手順 - Qiita
必要な要件 Mac OS X 最新の Xcode Apple Developer Program（$100 per year） 有用なドキュメント Electron Mac App Store Submission Guide Mac App Store (MAS) Submission Guideline · nwjs/nw.js Wiki Enabling App Sandbox Electron 公式の Submission Guideline はコードサイニングについてしか書いていないので、nw.js の wiki を参考にしてアプリを登録していきます。この２つのドキュメントを読むだけでもゴールには到達できますが、つまずきポイントもなかなかあるので手順を解説していきます。 証明書を作成 iTunes Connect でアプリを作成 アプリを asar にアーカイブ MASディストリ
Atom Flight Manual
CompanyEngineeringProductSunsetting AtomWe are archiving Atom and all projects under the Atom organization for an official sunset on December 15, 2022. January 30, 2023 Update: Update to the previous version of Atom before February 2 On December 7, 2022, GitHub detected unauthorized access to a set of repositories used in the planning and development of Atom. After a thorough investigation, we hav
ElectronでWebviewの簡易ブラウザをつくってみたメモ - Qiita
Electronの基本的な挙動が知りたかったので、HTML/CSS/JavaScriptを使ってElectronで簡易ブラウザをつくってみました。 1. 制作物 URLを入力するとWebviewでロードしてくれる ただしボタンを押さないとロードしてくれないしょぼい仕様!! Open Dev Toolを押すと、Webview内のDeveloper Toolが開く セットアップ npm installの仕組みとかnpm initしてプロジェクトをつくるができる方であれば セットアップは3分ぐらいで終わると思います。簡単!! 参考 : ElectronとHTML/CSS/JavaScriptでデスクトップアプリを作ろう【入門編】 ファイル構成 Ligさんのサンプルコードを改造する形で3ファイルでつくりました。 var app = require('app'); var BrowserWindow
Electron を試す - 開発環境の構築 - アカベコマイリ
これまで 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 を採用 ユニット テスト対応 コード ドキュメント対応
Electronでデスクトップアプリを簡単構築
全国5000人のエンジニアをやめて寿司職人になろうと思っているみなさんこんばんは。 前回までスライド共有用のアプリケーションを趣味(リハビリ)で作っていたのですが、折角なのでデスクトップクライアントも作ってみました。 構築にはElectronを使ったのですが、結構簡単にできたので記録としてまとめておきます。 Electronって何？GitHubが開発するクロスプラットフォームで動作するアプリケーションを開発するためのフレームワーク。コードの記述はHTML5とNode.js。その範囲であれば既存のWeb開発技術が使いまわせる。例えばjQueryとかAngularなんかを使うのも可能Chromeブラウザのオープンソース版のChroniumのエンジンを内蔵例えばAtom・Visual Studio Code・Slackクライアントや、日本だとKobitoあたりがメジャー作り方あちこちに記事があが
Electronでアプリケーションを作ってみよう - Qiita
はじめに Electronをご存知でしょうか. Electron(旧称: Atom-Shell)は, Atomエディタを開発するために生まれたクロスプラットフォームデスクトップアプリケーションエンジンです. Node.js + Chromiumをランタイムとしており, Atomだけでなく, Slackや先日のBuildで発表されて話題となったVisualStudio CodeもElectronで実装されています. いわゆるWeb系の技術, Node.js + HTML + CSSでアプリケーションを作成できるのが特徴です. 類似した思想のフレームワークとして, node-webkit(NW.js)もありますが, アプリケーションのエントリポイントの考え方等が異なります. このエントリでは, Electronの使い方をサンプルアプリを実装しながら説明していきます. お題 このエントリのお題と
HTML5でクロスプラットフォームなデスクトップアプリを開発できる「Electron」とは
Electron（旧Atom-Shell）とは、Web開発者がHTML5とNode.jsでMac、Windows、Linuxのデスクトップアプリを作れるクロスプラットフォーム実行環境です。Electronはオープンソースで無料で使える上に、MITライセンスであるため、商用利用も可能です。開発元はGitHub社です。 最近はJavaScript、HTML5の進化によって、多機能なWebアプリケーションが増えてきました。それに伴い、モバイルでは、WebViewやApache Cordovaなどを使ったハイブリッドアプリも注目されています。Electronはその流れの中から生まれた新しい実行環境です。 ElectronはChromiumブラウザを内蔵しているのが一番の特徴です。Chromiumブラウザは、Google製のChromeブラウザのオープンソース版にあたります。ウェブ開発者がChrom
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
