RustのWebフロントエンドフレームワーク「Kagura」をElectron上で動かしてみる - Qiita
RustでもWebAssembly出力ができるようになっているんですが、いつか触ろうと思いつつずっと触る機会がありませんでした。 ちょうど自身の周りでもElectronの利用事案が増えて来て(例えばPostludium/Peridotでパイプラインの設計エディタのためにElectron使おうと思ったこともありました......)、良い機会なので入門として件名のライブラリを触ってみることにしました。 Kaguraとは Rust製のWebフロントエンドフレームワークです。端的に言ってしまえばReactやVueなどの仲間です。 仮想DOMを用いて差分レンダリングを行う点は既存のフレームワーク同様ですが、アーキテクチャ的にはHalogenやElmが近いです (いわゆるTEAの形をとっています)。 RustでWebAssemblyを出力する、動かす Rustにはwasm-bindgenという便利ツー
AVAをブラウザ上で実行するAvaronを作った - Qiita
この記事は「WACUL Advent Calendar 2017」の20日目です。 WACULでフロントエンドエンジニアをしている@bokuwebと申します。 はじめに みなさんはお気に入りのテスト構成はあるでしょうか。よく耳にするのはjest、AVA、karmaを用いた構成でしょうか。個人的には最近はAVAを使用することが多いのですが、その際の不満を解消するためにモジュールを作った話しを書きたいと思います。 つくったもの AVAとは avajs/ava: Futuristic JavaScript test runner 紹介記事は他にも色々ありますので多くは書きませんが、sindresorhus氏作の、曰く未来型のテストランナーです。若干古いですが以下に日本語での記述もあり、なぜAVAなのか?に特徴が記載してあります。 例えばPromiseを使用したテストは以下のように記述できます。同
Electronアプリをリリースするまでにあった知見 - Qiita
はじめに こんにちは、@tsuwatchです。普段はRubyを書くのですが、仕事の幅も広がりつつあり、フロントエンドも本格的にやっていこうということで、 Kaizokuというニコニコ生放送のデスクトップアプリをリリースしました。 人生の大半の時間がニコ生に溶けているわけですが、かねてからコメントビューワを作ろうと思っていたので、この機会に作ってみました。 しかし、Mac版のコメントビューワにはHakumaiという大変素晴らしいコメントビューワが存在するので、少し違う方向を向いた生放送ビューワをかねたアプリにしました。 Hakumaiはコメントビューワとしては数少ないオープンソースなので、実装やコメントサーバの仕様など大変参考にさせて頂きました。この場をお借りして、お礼を申し上げます。 アプリの機能や今後についての紹介はまた別途ブログで書くと思います。 ご興味がありましたら、ぜひ使ってみてい
導入 · electron-vue
vue で構築された electron アプリケーションを作成するためのボイラープレートです(名前から分かるように)。 概要 このプロジェクトは vue を使用した electron アプリケーションの手動セットアップをなくすことを目標としています。electron-vue はスキャフォールディングのために vue-cli 、 vue-loader と webpack、 electron-packager または electron-builder、 vue-router や vuex などの最も使われているプラグインを使用します。 ドキュメントは こちらを確認してください。 このボイラープレートで見つけることができるもの... 単一の package.json セットアップによる基本的なプロジェクト構造 詳細なドキュメント vue-cli を使用したプロジェクトスキャフォールディング Vu
Vue.js + ElectronでTwitterクライアントを作った - razokulover publog
Vue.jsとElectronでシンプルなTwitterクライアントを作った。 vue-twitter-client きっかけとしては一言で言うとフロントエンド周りの勉強。 2017年1~3月の振り返りにも書いた通り。 自分はモダンなフロントエンドの開発に疎かったので重い腰を上げてそろそろやるかという気持ちになって3月中頃くらいからはじめた。 Vue.jsについては2,3週間前くらいから触りはじめている。 Vue.jsはちゃんとしたSPAからフォームにちょいと味付けみたいな使い方もできたり小回りがきく。 個人的にはReactでの開発よりやりたいことが直感的に書ける気がしてるので使いやすいという印象。 とりあえず最初はTODOアプリやAPIを叩く小さなフィードを作って、次にNuxt.jsでSSRできるミニサイトを作ったりで大体使い方は覚えてきたというステータス。 ライブラリでいうとvuex,
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開
Coffee, jQueryで書いていたElectronアプリをES6, React, Reduxで書き直した - k0kubun's blog
ElectronベースのTwitterクライアント: Nocturn ElectronでYoruFukurou風のTwitterクライアントを作った - k0kubun's blog の時にCoffeeScriptとjQueryで作っていたNocturnというTwitterクライアントがあり、これをES6, React, Reduxを使って書き直した。この記事ではその時に得た知見、感じた事を書いておく。 移行したスタックと移行時に感じたこと あらかじめお断りしておくと、僕は普段はRubyでサーバサイドの実装や運用をやっている人であり、JavaScriptに関してはほぼ素人の意見なので、以下はReactとかRedux興味あるけどまだ触ったことないですみたいな人向けの内容になると思う。 CoffeeScript → ES6 移行 参考: 春からはじめるモダンJavaScript / ES201
Nightmare v2(Electron) でブラウザ上でES2015のコードを個別にrequireしてユニットテストを書く - Qiita
Nightmare v2(Electron) でブラウザ上でES2015のコードを個別にrequireしてユニットテストを書くNightmareElectron 自分の開発環境では, nodeで単体テストと分離してモデル層を抽出出来たが、e2eほどではないがブラウザ上でテストしたいコードというのは結構ある。モーダル制御とか、ブラウザ上のイベントに依存する奴とか。 それらを Nightmare でテストするアプローチを紹介する。 概要 Nightmare はヘッドレステストランナーとそのDSLを提供する。v2でランナーがphontomjsから Electronになった。 コードはbabel/commonjsで書かれており、本番環境でJSは1つにまとまっているが、Electron の nodeIntegration を有効化して走らせることで、ビルド前のコードを個別にrequireできる。グロ
働クリッカーという JS を学べるゲームを作りました。
どんなゲームなの？ 働クリッカーは、身も蓋もない言い方をすればクッキークリッカーがつまんなくなったやつです。 画面左側の『働く』ボタンを連打してお金をためて、資格やプログラミングスキルを買って一働きの単価を上げ、アフィリエイトや土地、株を買って不労所得(働くを押さなくても入ってくる金)を増やしていくというゲームなのですが、このゲームの肝はそこではなく、どれだけ高速にゲームクリア実績や全実績解除を達成できるか、というプログラミングによる攻略が本質的な所です。 俺が、俺達が TAS さんだ Tool Asisted Speedrun(or Superplay) という、ツールによる補助を受けたスーパープレイの動画は、多分見たことがあると思います。あれはエミュレーターそのものにそういう機能があったりするんですが、このゲーム、働クリッカーの場合は、ゲームそのものにツール機能が組み込まれています。と
Electronのwebview要素ではallowpopups属性をつけてはいけない - 葉っぱ日記
Electronを使ってブラウザのようなアプリケーションを作る場合には webviewタグが使用される。例えば、アプリケーション内にexample.jpのサイトを表示するには以下のようにHTMLに記述する。 <webview src="http://example.jp/"></webview> ここで、webviewタグにallowpopups属性を付与すると、example.jpサイト内のコードからwindow.open等を使って新たにウィンドウを開くことができるようになる。このとき、example.jpに悪意があり以下のようなコードが含まれているとする。 if( typeof require === "undefined" ) window.open( 'http://example.jp/', '', 'nodeIntegration=1'); else require( "chi
Electron, Reactでタブブラウザを作ってみた - Qiita
知人がesaのデスクトップクライアントを使わなくなった理由が、複数タブが開けなくて不便だったと聞いた。 確かに「Electronのアプリでも複数タブが使えるといいな」と思ったのでさくっと作ってみました。 作ったもの タブ周りの処理を中心に書いた。ブラウザというよりただのQiitaリーダ。 環境 MacOS X 10.10.4 Node.js v.4.1.1 electron v.0.34.3 準備 Electron環境の導入が必須。 30分で出来る、JavaScript (Electron) でデスクトップアプリを作って配布するまでがとても参考になります。 今回はReactをES6で書くのでbabel+webpack+gulpの設定を書いておきます。 gulpfile.js webpack.config.js npmで必要なパッケージをインストールし、gulpでビルド用のタスクを起動すると
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 製のすごいやつ
NightmareJS+Dockerによる環境非依存なUIテストの導入 - Alpaca技術ブログ
Alpacaで主にフロントエンドを担当している北山(@gamella, blog)です。 フロントエンドを開発していると、「ログインして、これをクリックしたら、この表示が行われていること」みたいなUIテストを環境非依存で簡単に行いたいと思うことがありますよね？僕はあります。 Alpacaでは開発にDockerを全面採用しているということもあり、最近ちょくちょく目にするNightmareJSをDocker上で動かして簡単にUIテストを導入できたので、その知見を共有したいとおもいます。 Nightmare まず、どうしてDockerを利用したいかということですがAlpacaでは、すべての機能をDocker上で動作させているため、それに倣っているいうこともありますがUIテストをローカルでもCircleCIでも、Dockerが動作する環境であればどこでもコードの改変なしで実施できるというのは大きな
Electron を試す 3 - 簡易音楽プレーヤー - アカベコマイリ
これまでのシリーズで Electron の開発環境が固まってきので実際にアプリを作成してみたい。サンプルとしてある程度の複雑さがほしいから以前に nw.js を使ってみる 5 - 簡易音楽プレーヤーで実装したものを移植することにした。 設計方針 移植にあたり単純に動かすだけなら NW.js 版の実装を Renderer プロセス部分へまるごとコピーするだけでよい。 しかし今回は Electron らしく Main/Rendrer を分割、ダイアログ表示や音楽ファイルのメタデータ読み込みは Main プロセスで実行させて Main/Rendrer 間の連携は IPC に限定する。 remote を利用すれば Main プロセス部分の機能を Renderer プロセスから簡単に呼び出せるけれど却下。便利な反面 Main/Renderer が密結合になりやすい。特に双方の Object を参照し
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 for the Mac App Store
SASCHA WISE Electron for the Mac App Store August 12, 2015 Before you go any further it is important to know that this blog post is out of date. The technique used here has been integrated into the offical Electron project. Look here for more info. Electron and the Mac App Store are 2 things that are difficult to pair, like fine wine and McDonalds. Chromium, the rendering engine for Electron, uses
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の
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - electron/forge: :electron: A complete tool for building and publishing Electron applications
[PDF] Electronの倒し方
Electron, Flux + React
