Electron、React Native、Cordova…Web技術でネイティブアプリ開発する方法を、アシアル田中さんに聞いた
Electron、React Native、Cordova…Web技術でネイティブアプリ開発する方法を、アシアル田中さんに聞いた 白石 俊平（HTML5 Experts.jp編集長） こんにちは、編集長の白石です。 この記事は、9月24日に開催されるHTML5 Conference 2017に登壇するエキスパートに、予定しているセッションのトピックを中心に、様々な技術的なお話を伺おうというものです。セッションの内容をより深く理解する手助けになるだけでなく、本記事単体でも面白く読んでいただけることを目指しています。 今回お話を伺ったのは、アシアル株式会社 代表取締役社長の田中正裕さんです。 田中さんのセッションは「Web技術でネイティブアプリを開発する話」（ホール 14:20-15:00）です。 （現在HTML5 Conferenceは定員オーバーの状態ですが、無料イベントということもあって
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 アプリをつくる時に便利なパッケージ - はやくプログラムになりたい
この記事は 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
Spectron で Electron アプリのテストをする - Qiita
Electron と Spectron のマイナーバージョンを揃える必要があります (Electron 1.0.x であれば Spectron 3.0.y)。package.json を必ず編集してバージョン指定に ~ を使いましょう。 実装 Spectron の README.md に書かれているサンプルをどうぞ。 var Application = require('spectron').Application var assert = require('assert') describe('application launch', function () { this.timeout(10000) beforeEach(function () { this.app = new Application({ path: '/Applications/MyApp.app/Contents/
Electronの公式テストフレームワークSpectron入門 - ICS MEDIA
Spectron（スペクトロン）はElectronの為のテストフレームワークで、ElectronのAPIを使用したテストが可能になります。テストを取り入れることで、「想定していた動作と違う」「作成していた機能がいつの間にか動作しない」といったことを未然に防げます。 Spectronからは実際にElectronアプリを起動することができ、「ウィンドウのタイトル」「デベロッパーツールの表示状態」といったことをElectronのAPIにアクセスして取得できます。また、「ページの画像キャプチャー」機能でデザイン崩れが発生していないかのチェックや「ページのテキスト保存」でテストに失敗した時のHTMLテキストの取得、「console.log()で書きだした内容の取得」も可能です。これらのテストは手元の開発機だけでなくJenkinsなどCI（継続的インテグレーション）サービス上でも使用できます。 ▲ 本
Electron + Express.js のミニマム構成の Web アプリを作る - Qiita
Electron ＋ Express.js を使ってローカルで HTTP サーバを動かして、.dmg ディスクイメージで配布可能な Mac 用の Web ベースのデスクトップアプリを、ミニマム構成で作成してみます。 こんな用途がターゲットです： Node.js / Express.js ベースの Web サーバアプリを作っている Browserify とかを使った Web クライアントアプリを作っている EC2 とかの外部サーバを使わずに、ローカルの Mac 上で動くデスクトップアプリとして配布してみたい こんな用途はターゲットではありません： Electron の詳しい仕組みを知りたい場合 Atom みたいな本格的なデスクトップアプリを作りたい場合 Windows でも動くマルチプラットフォームなアプリを作りたい場合 （１）フォルダを作る
Web Components と Electron でつくる Neovim フロントエンドの未来 - はやくプログラムになりたい
この記事は Vim Advent Calendar 2015 の20日目の記事です． まずはこちらのスクリーンショットをご覧ください． エディタの UI やカーソル移動は Vim っぽいですが，markdown ライブプレビューやカーソル位置での画像ポップアップ，組み込みブラウザなど謎の UI が見て取れます．本記事ではこれについてボトムアップで必要な知識から順を追って紹介します． 長い……三行で Neovim msgpack-rpc API を使って <canvas> と Node.js API で Neovim フロントエンドを作成し Web Component としてラップ して HTML アプリに簡単に組み込めるようにした上で UI プラグインをウェブ技術で構築できる NyaoVim という Neovim GUI エディタを Electron 使ってつくってます． 目次 Web C
Electron アプリを Travis CI でテストする - Qiita
npm test は node で JS のコードを実行するように package.json で設定し，そのスクリプトの中でテスト用の小さな Electron アプリを実行するようにします． var electron = require('electron-prebuilt'); // ... var finished = child_process.spawnSync( electron, ['path/to/test-app', 'test-file1.js', 'test-file2.js'], {stdio: 'inherit'} ); process.exit(finished.status); テストは Electron アプリ上で実行するため，Electron アプリの stdio を引き継ぐようにします．実行する Electron アプリはエントリポイントとなっている JS
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
