30分で出来る、JavaScript (Electron) でデスクトップアプリを作って配布するまで - Qiita
概要 Electronとは、JavaScriptでデスクトップアプリケーションが作成できるツールです。 MITライセンスなので無料で使える上に商用利用も可能です。 最近ではAtomやSlackのアプリもElectronで作られたとのこと。 今かなりノっているツールの1つです。 以下、簡単な特徴。 Node.js + HTML + CSS という、WEBの技術でアプリが作れる。 Chromiumブラウザ(Chromeのオープンソース版)を内蔵しているので、普段の書き味と変わらない これ1つで Windows, Mac, Linux 向けのアプリが作れる 超簡単 ここではElectronのインストールからアプリの配布までを紹介します。 以下、「Hello World」を出すだけのアプリですが、ゼロからはじめて30分でここまで出来ます。 インストール まずは必要なものをインストール。 nodeの
JavaScript (Electron) を使ってアプリの見栄えを整える - Qiita
Electronを使って見栄えを整えてみる ElectronはJavaScriptでデスクトップアプリケーションが作れるツールです。 前回「30分で出来る、JavaScript (Electron) でデスクトップアプリを作って配布するまで」では簡単なアプリを作って配布するところまでやりました。 あとはいつも通りの JS + HTML + CSS でガリガリ書いていけばいいのですが、まずは見た目から入ろうということで、もう少しアプリっぽい見栄えにしてみましょう。 ちなみに、Macではいろいろ動作を確認しましたが、Windowsは知りません。 大体同じように動くはずですが、もしダメだったらWindows版の記述を教えて頂けると助かります。 基本設定は browser-window APIで browser-windowはアプリのウィンドウを表示するためのAPIです。 例えば、以下は単なるin
uu59のメモ | React.js/Fluxxorでatom-shellで動くTwitterクライアントを作ってる
https://github.com/uu59/atom-twitter-client mikutter使ってたけどどうも複数アカウントだと不安定でしょっちゅう落ちるので作った。以下は日記なので有益なことは書いていません。 ツールとライブラリの選定あるいはyak shavingの軌跡 前に書いたようにnpm run-script用にCoffeeScriptも使ってるけど、アプリのコードはECMAScript6 with Babelに統一した。単にES6書いて知見を得たいというだけの理由でES6にしていて、traceur-compilerじゃなくbabelにしたのも「JSXの面倒も見てくれるしなんとなく」くらいの弱い理由でしかない。 フレームワークはReactとFluxxorを使った。当初はmercuryを参考にしながらMatt-Esch/virtual-domを使おうとしてたけど、babe
WebアプリをElectronに乗せる
The document discusses an Electron (formerly Atom Shell) meetup. It provides links to documentation on the differences between Electron and Node-webkit. If time permits, an Electron demo may be shown. Electron allows building cross-platform desktop apps using JavaScript, HTML, and CSS by embedding Chromium and io.js. It also references a presentation on embedding Node.js into the Atom editor.
ツールバーから直近のGyazoった画像にシュッとアクセス出来るアプリをElectronで書いた - Pastalablog in はてな
追記 2015/06/19 Windows向けのBuildを作ってみた。 https://www.dropbox.com/s/qbrzdyh8ggkw1wc/Gyazo-Menubar-win32.zip?dl=0 作ってはみたものの実際に動くか試していないので、何か情報がありましたら https://github.com/pastak/gyazo-menubar/issues/2 にてお知らせください。 これでWindowsがサポートされたって書いてあるから動くと期待しています。よろしくお願いします。 概要 LTの資料を作ったり、Qiitaやブログに記事を書いたりするときにスクショをパッとGyazoで撮り溜めておいてあとでパパパッと記事に貼りたいみたいな場合があると思うのですが、多分そういう時に便利なアプリケーションなのではないかと思って作ってみた。 今日もLTをすることになってたのだけ
ElectronにNodeGitをインストールしようとしてハマった - amberfrog.log
Electronっていうのは、もともとAtomエディタを開発するために作られたクロスプラットフォームの開発環境で、ランタイムにNode.jsとChromiumを使います。 上の記事にあるようにKobito for Windowsのほか、SlackとかVisual Studio Codeでも使用されているようなので、アツいといえばアツいのですが、クロスプラットフォーム開発環境っていうところがかなりきな臭い気はします。 Electronのインストールnpmを使ってインストールします。 $ npm install electron-prebuilt -g NodeGitのインストールElectronを使えば、ほとんどがWebで実現できるんだけど、どうしてもクライアント側でローカルファイル等の処理が必要なアプリが、わりと簡単に作れるんじゃないか、と思っているので、ローカルファイルの処理代表であるg
Kobito for Windows をリリース + 技術的な補足, package.json の公開 - Qiita Blog
Kobito for Windows をリリース + 技術的な補足, package.json の公開 Kobito for Windows開発の @mizchi です。 開発開始から約半年、ソロ作業の期間も長かったのですが、ようやくリリースできました。 Kobito for Windows – ソフトウェア開発者のためのMarkdownによる情報記録・共有ソフト というわけで、今日はKobito for Windowsの開発コンセプトとElectronやReactを採用した理由について書いていこうと思います。Rails界隈ではGemfileを公開する文化があるようですが、今回はnode.js / npmのそれであるpackage.jsonを公開します。 Kobito on Electronの開発コンセプトWeb技術でKobitoを実装してWin/Macでソースを一本化既存のKobitoの
ElectronでGyazoっぽいUIを実現する - Qiita
Electron (旧atom-shell)を使えば、JSやモダンなWeb技術を活かしてクロスプラットフォームなPCアプリを作ることができる。 APIが充実していて、Webページをただ移植しただけの単純なアプリだけでなく、割と手の込んだUIも実現できるかもしれない。 たとえば、Gyazoのようなスクリーンショットを撮るための領域選択のUIを作ることができる。 実装方法 画面の全体に透明なウィンドウを作って、その上の透明なWebページでmousedownなどのイベントにあわせて必要なUI要素を描画する。 https://github.com/uiureo/electron-crop-rect/blob/master/main.js app.on('ready', function () { const Screen = require('screen') const size = Scree
Electron 勉強会 #1にてElectronでFluxを動かす話をした #atom_shell - スクールアイドルです
atom-shell.connpass.com speakerdeck.com github.com 月曜あたりに着想を得たアプリケーションを２日ぐらいで実装して、ある程度まとまった知見を得たから話してきた。 LT枠でやるべきではない内容をLT枠に無理やりねじ込んだ結果、Fluxの説明を省略してもなお時間が足りないという致命的な欠陥を抱えることになった。 同日にReact.js meetupも開催されていてかなりアウェイになるだろうなとは思っていた。というかReact.js meetup参加しててFluxをElectron上で動かす的な話に興味ある方は是非とも意見交換お願いします。 スライドの具体的な解説とユースケースについては後日改めて書く。 全く面識ない状態で勉強会前々日あたりに突然LT申し込んだのに、発表の機会をくださりありがとうございました。Electronの動向はこれからも注視し
Electron(旧Atom-Shell)勉強会 #1 を主催＆話してきた #atom_shell - Happy New World
帰ってからブログを書くまでが勉強会です。 というわけで、Electron(旧:Atom-Shell)勉強会 #1で、私の方からはElectron(旧Atom-Shell)基礎+入門を話しました。 Electron(旧Atom-Shell)基礎+入門 経緯 vvakameさんにムチャぶりされて、ngJapanのイベント中に頑張ってAngular2をAtom-Shell上で動かすデモを作って、デモアプリ完成の10分後に飛び入りLTして発表したものの、TODOデモアプリ上をスライド代わりに使ってLTをするという暴挙にでるしかなかったので、もっとちゃんとAtom-Shellについて話したいと思ったので主催してみた。 勢いでガッとconnpassにイベントを建てたのはいいものの、Atom-Shellなんて誰も触ってないし、発表者は自分1人だと思っていたら、勉強会の1週間前にAtom-ShellからE
Electron(旧atom shell)基礎+入門
Who Electronとは Electronの特徴 Electronの基礎 Electronの内部構造 Electronの問題 まとめ
atom-shellで開発ツールをオンオフする - レガシーコード生産ガイド
2014-12-28 atom-shellで開発ツールをオンオフする JavaScript いろいろなツールを作るのにatom-shellが便利そうなので使ってみることにした。 node-webkitだと再生できないmp3も再生できるみたいなのでatom-shellを選んだ。 まずはクイックスタートを見ながらファイルを構成する。 atom-shell/quick-start.md at master · atom/atom-shell · GitHub 設定がどこかにあるんだろうけど、node-webkitと違ってツールバーなどが何もない、まっさらなウインドウが開かれる。 コンソールなど開発ツールを表示したいので、開発ツールを開くボタンを作ってみよう。 まずmain.jsで開発ツールを開いてみる。 mainWindow = new BrowserWindow({width: 800, he
Atom Shellで俺の役に立ったIssue達 2015年春版 - Qiita
はじめに 最近はhttp2やmruby関連でAtom ShellのIssueウォッチが今まで以上に雑になっている。 特に今季はLinux関連は追えていない。 atom-shell - Atom Shellで俺の役に立ったIssue達 - Qiita Mac App Store Mac App Storeに出せるかに関して まだ誰も結果報告を挙げていない模様 app.restart() Atom Shellの再起動方法 Windows: Support for the equivalent of the OS X Dock bounce (FlashWindow) Having multiple JavaScript contexts causes a race condition in uv event loop handling デバッグの参考になるかも Pressing "Delete
日本語訳 Electron(旧atom-shell) Quick start - Qiita
HTML5でクロスプラットフォームなデスクトップアプリケーションができてしまう、Electron(atom-shell)。 SlackのWindows版なんかでも使われているという噂のElectron。 Quick stratを日本語訳してみました。Have Fun!! イントロダクション ElectronではリッチなネイティブAPIを持ったランタイムを提供することでピュアなJavaScriptでデスクトップアプリケーションの開発を可能にします。Webサーバーの代わりにデスクトップアプリケーションにフォーカスしたio.jsランタイムであるといえばおわかりになるかもしれません。 ElectronはJavaScriptをGUIライブラリにバインディングするものではなく、ElectronはWebページをGUIとして使用します。ですので、ElectronはJavaScriptによってコントロールさ
Atom ShellでCocoa APIが叩けるようになった: misc
おはようございます。奥さんの出張から帰って来て、久しぶりに我が家で、 ダンボール滑り台を出して、兄弟仲良く遊びました。kjunichiです。 背景 NodObjCというモジュールを使うと、Node.jsでCocoa APIを叩けるようになる。しかし、内部で使用しているネイティブモジュールのnode-ffiが0.11系のnodeに対応していなかった。 つまり、Atom ShellではNode.jsの0.11系を使っており、NodObjCモジュールが使えない状態だった。node-webkitは0.8系がNode.jsの0.10系をサポートしているのでこっちを使えば動かせた 先日、そんな状況の中、神が登場して、この状況が変わった。 事前準備 nvm,nodebrewなど、Node.jsのバージョンを切り替えることが容易なツールで予め、0.10系、0.11系の2系統のnodeを入れておく。 Ato
Atom Shell vs Node-Webkit - 牛角堂
仅供参考，因为在使用node-webkit的过程当中发现一些问题理解有非常大的差异，因此极有可能导致结论不正确，由于没有给出testcase方便验证，我将给出一些修正并重写该文。 历史 官方版本的差异比较及其对使用者产生的影响 关于入口的影响（重要） 关于 Build system 差异的影响 关于Node集成方式的影响 关于Multi-context的影响（非常重要） 官方没有说的一些影响 API全面借鉴 Node-Webkit，但不完整 入口书写方案更加熟悉 Render Process 隔离与通信 child_process.fork 终于可以使用 protocol 统一的模块管理 (原标题 APM) 技术角度的总结 尝试用过 Node-Webkit 做过东西的，或多或少会关注到 Atom Shell。但是中文社区里面讨论两者之间的差异的文档大部分都集中在对官方提供的技术细节上面。当
俺が雑にAtom ShellをWebCLに対応させた件: misc
はじめに この記事は、@kjunichiの2014年パーソナルアドベントカレンダーの12日目の記事です。 必要なもの https://github.com/kjunichi/node-image https://github.com/kjunichi/node-glfw https://github.com/kjunichi/node-webgl https://github.com/kjunichi/node-webcl Atom Shell向けに各モジュールをビルド node-gypがない場合 0.10.33でも、0.11系でも良さげ。 npm install -g node-gyp HOME=~/.atom-shell-gyp node-gyp rebuild --target=0.19.5 --arch=x64 --dist-url=https://gh-contractor-zc
祝: Atom の Web Components 導入、ついでに Atom Shell の話。 - steps to phantasien
GitHub 謹製 Atom エディタが Shadow DOM を使い始めたという。 めでたい。せっかくだから私も Atom を使ってみよう。 起動してテキスト書きもそこそこにインスペクタで DOM を眺める。 するとあら素敵。Shadow DOM のみならず Custom Elements もばりばり使われているじゃありませんか。 ためしにステータスバーをつついてみるとわかる。 Atom は UI を React に書き直したものと思いこんでいたけれど、 React になったのはテキスト編集領域だけの様子。周辺の UI は Custom Elements ベースになりつつあるらしい。 もともと space-pen という jQuery ベースの内製フレームワークで書いていたものを、 徐々に Custom Elements 化していくという。 Atom, 意外と Web Component
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Being Flux on Electron
Atom Shell さわってみた