Electron + Travis で楽々ビルド・リリースする最強のデスクトップアプリ開発 - Qiita
この記事は古いです。 ぼくが考えた最強のデスクトップアプリ開発環境 Web技術でデスクトップアプリ書いて push するだけの環境を作る。 主に利用するのは Electron + Travis + GitHub の3つ。 Electron でデスクトップアプリ書いて、push するだけでビルドしてリリースまで完結するデスクトップアプリ開発ができる。 もっと簡単に言うと 「ローカルで開発→push」 だけで GitHub Release に自動でリリースできる。 アプリのビルド自体もTravis内で行えるため、開発環境のOSに依存しない開発が可能。 以下は OS X 環境を前提として説明するが、クロスプラットフォームのためのビルドはTravis内で行うため OS は何でも良い。 念のため各種サービス・フレームワークの説明 簡単に説明すると以下。どれもすごく便利。 Electron: みんな大
Electron 開発で得た知見まとめ - Qiita
はじめに Electron + Riot + Redux でアプリケーションを作って得た知見まとめです。 制作物は Twitter の収録再生プレイヤー。 録画や録音しておいた Twitter 連動番組などを再生する際、放送当時のツイートをリアルタイムっぽく表示させる品です。 midnightSuyama/tweet-rec 実装 electron atom/electron Twitter の収録はウインドウ有無に依存しないよう main プロセスで行い、renderer プロセスでは表示に専念する方針とした。 ウインドウを閉じても常駐するタイプのアプリケーション。 ウインドウの表示 BrowserWindow を使用。 ウインドウサイズについて、大概の場合はコンテンツ領域を基準に考えるはずなので useContentSize は忘れずに。 ウインドウを閉じた際には解放しておきたいので
Electronの手習い〜Electron環境からパッケージ化まで〜 - Qiita
Electronってどういうことができるのか全く知らない状態からスタートです。 Electronとは？についての参考資料 Electron 本家サイト HTML5でクロスプラットフォームなデスクトップアプリを開発できる「Electron」とは Electron 1.0でデスクトップアプリ開発超入門――動作の仕組み、基本的な使い方、セキュリティの懸念点 本家サイトを翻訳してくれているページ発見 助かる。。 ★ 本家サイトからのデモファイルDL時に混乱したこと http://electron.atom.io/#get-started に「Downlode for mac」があったのでそれをDLして中身を確認しようとしました。 しかし、これは**「Electronで開発したアプリでは、どのようなことが行えるか」**がわかるappであり、期待しているソースファイルはありませんでした。 自分でつくっ
Electronアプリをリリースするまでにあった知見 - Qiita
はじめに こんにちは、@tsuwatchです。普段はRubyを書くのですが、仕事の幅も広がりつつあり、フロントエンドも本格的にやっていこうということで、 Kaizokuというニコニコ生放送のデスクトップアプリをリリースしました。 人生の大半の時間がニコ生に溶けているわけですが、かねてからコメントビューワを作ろうと思っていたので、この機会に作ってみました。 しかし、Mac版のコメントビューワにはHakumaiという大変素晴らしいコメントビューワが存在するので、少し違う方向を向いた生放送ビューワをかねたアプリにしました。 Hakumaiはコメントビューワとしては数少ないオープンソースなので、実装やコメントサーバの仕様など大変参考にさせて頂きました。この場をお借りして、お礼を申し上げます。 アプリの機能や今後についての紹介はまた別途ブログで書くと思います。 ご興味がありましたら、ぜひ使ってみてい
Electron + Vue + flowtypeで最高の画像を収集するためのTwitterクライアントを作った - Qiita
Electron + Vue2 + Vuex + Flow + BootStrap4 + AWS RekognitionのスタックでTwitterクライアント書きました。 本アプリは【Electron + react + flowtype】TweetDeckライクなpixivクライアントPixivDeckをつくった - Qiita に思想・設計共に大きく影響を受けて作りました。本当にありがとうございます。 Github - yuki-ycino/imecoletter: 最高の画像を集めるためのTwitterクライアント 諸事情（というか実装の都合上AWSの請求が大変なことになるため）バイナリの配布はできません。 簡単にビルドできるようにはしてあるのでもし興味がある方がいれば使ってみてください。 スクリーンショット TwitterのTLから画像ツイートのみを表示 Twitterから画像ツイ
ElectronでVue.jsを始める - Qiita
プロジェクトの作成 今回は electron-vue（日本語ドキュメント）を使ってプロジェクトを作成しようと思います。 ドキュメントがすごい充実して驚きました。 また、最初からすでに vue-resource,vue-router,vuexを備えていることもいい点と言えるでしょう。 しかし、vue-resourceについては、公式がこういう記事を出しているので参考にするといいかもしれません。 vue-resource の引退について https://jp.vuejs.org/2016/11/03/retiring-vue-resource/ vue init まずはelectron-vueのREADMEにかかれているGetting Startedに沿って進めて行こうと思います。 基本的にはENTER押して行けば作れます。 vue init simulatedgreg/electron-v
Electron入門（インストールからHello Worldまで） - Qiita
Electronとは？ Electon は Github社がテキストエディタの [Atom] (https://atom.io/) を作成するために作ったオープンソースのソフトウェアフレームワークです。 特徴として ・Windows, Mac OS, Linux のクロスプラットフォーム対応のデスクトップアプリを作成可能 ・HTML, CSS, JavaScript といったWebアプリケーションの技術で動く でしょうか。 非常に簡単に書けて、かつ色々な場所で柔軟に動くアプリケーションを作ることができるということで、やらない手はない！といったところです。 Electronのインストール Electronのインストールや、Qiitaの記事を参考にコードを書いても動かないといったバージョン変更で結構ハマったので、ここに手順を書いておきます 開発環境 ・OS: Mac OS X EI Capit
Electron v1.1.0でMenuの実装をするお話 - Qiita
##はじめに Electron v1.1.0を使ってみたところ 以前のバージョンとの変更点で詰まったのでメモしておきます。 ##Electronとは webの技術+αでOS Xやwindowsのデスクトップアプリが作れる開発プラットフォームです。 最近(2016/5/9に)v1.0.0がリリースされました。 インストールやHello Worldから配布までは [Electronでアプリケーションを作ってみよう] http://qiita.com/Quramy/items/a4be32769366cfe55778 などの記事を参考にしました。 ##今回作るもの 入力したテキストを形態素解析してcsvでダウンロードできるアプリを作ります。 実際にはkuromoji.jsのデモをほぼまるごと移植したものになります。 [ブラウザで自然言語処理 - JavaScriptの形態素解析器kuromoji
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の使い方をサンプルアプリを実装しながら説明していきます. お題 このエントリのお題と
ElectronでSocket.ioを導入してみる [テスト編] - Qiita
ElectronでSocket.ioを導入するテスト編です。 参考にしたところ Node.jsとSocket.IOによるPCとスマホブラウザのペアリングデモ Electron で jQuery をスマートに読み込む方法 やりたいこと スマホでリモート操作 Electronアプリと連動すること とりあえず、動かしてみる 前提条件: Node.jsやElectronのあれこれが済んでいること。 まだの場合は、コチラを参照するといいでしょう。 さっそく、Node.jsとSocket.IOによるPCとスマホブラウザのペアリングデモのコードをダウンロードし、適当な箇所に解凍します。 組み込み予定のElectron内に、先ほど解凍したコード全部コピーし、Electronのメインファイルへ「server.js → index.js」へ移植します。 ... // ここから // サーバー構築 var ht
![ElectronでSocket.ioを導入してみる [テスト編] - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/f2b4a57638c2e457ebc04e2e6697e27b99693ef5/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fqiita-user-contents.imgix.net%252Fhttps%25253A%25252F%25252Fcdn.qiita.com%25252Fassets%25252Fpublic%25252Farticle-ogp-background-afbab5eb44e0b055cce1258705637a91.png%253Fixlib%253Drb-4.0.0%2526w%253D1200%2526blend64%253DaHR0cHM6Ly9xaWl0YS11c2VyLXByb2ZpbGUtaW1hZ2VzLmltZ2l4Lm5ldC9odHRwcyUzQSUyRiUyRnFpaXRhLWltYWdlLXN0b3JlLnMzLmFwLW5vcnRoZWFzdC0xLmFtYXpvbmF3cy5jb20lMkYwJTJGMTIwMDclMkZwcm9maWxlLWltYWdlcyUyRjE2NzQ3NTk2MDE_aXhsaWI9cmItNC4wLjAmYXI9MSUzQTEmZml0PWNyb3AmbWFzaz1lbGxpcHNlJmZtPXBuZzMyJnM9MjAzMWRhOTRhYTRmMjQyNzE0MjJkZjkzYzQzNDI2ZjY%2526blend-x%253D120%2526blend-y%253D467%2526blend-w%253D82%2526blend-h%253D82%2526blend-mode%253Dnormal%2526s%253D9ca36d1c40548f9e5dd70f459f63a23c%3Fixlib%3Drb-4.0.0%26w%3D1200%26fm%3Djpg%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk2MCZoPTMyNCZ0eHQ9RWxlY3Ryb24lRTMlODElQTdTb2NrZXQuaW8lRTMlODIlOTIlRTUlQjAlOEUlRTUlODUlQTUlRTMlODElOTclRTMlODElQTYlRTMlODElQkYlRTMlODIlOEIlMjAlNUIlRTMlODMlODYlRTMlODIlQjklRTMlODMlODglRTclQjclQTglNUQmdHh0LWFsaWduPWxlZnQlMkN0b3AmdHh0LWNvbG9yPSUyMzFFMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT01NiZ0eHQtcGFkPTAmcz1hOGJlY2Q4NmIxNGI0ZTFhMWFkM2M5NDBiNDVmNGMwOA%26mark-x%3D120%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTgzOCZoPTU4JnR4dD0lNDBqYWNrLWxvdyZ0eHQtY29sb3I9JTIzMUUyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTM2JnR4dC1wYWQ9MCZzPWJlMWEyNTA0YjAzZDhiY2U1YjU4OWU0OTE5ZTVjZGJk%26blend-x%3D242%26blend-y%3D480%26blend-w%3D838%26blend-h%3D46%26blend-fit%3Dcrop%26blend-crop%3Dleft%252Cbottom%26blend-mode%3Dnormal%26s%3D179768019a93eccdfc1925504543451c)
Electron + React.js でちょっとした Markdown Viewer を作成して少し知見が溜まったので宣伝とハマりどころなどまとめた (Electron編) - Qiita
色々ネタがあるので分けて作成していきます。今回は Electron 編です。 前回は gulpfile でのポイントを以下で紹介しています。 Electron + React.js でちょっとした Markdown Viewer を作成して少し知見が溜まったので宣伝とハマりどころなどまとめた (gulpfile編) よろしければこちらも見ていただけると幸いです。 再び宣伝するのは、くどい気もしたのですが 前回の記事を見ていない人のほうが圧倒的に多いと思いますので再び少し宣伝。 作成したもの markcat Electron製の Markdown Viewer 機能的な特徴 Intellij IDEA の Darcula 風の表示テーマも用意 表示テーマの変更も可能 Github Flavored Markdown コードハイライト表示 編集時の自動更新 ドラッグ＆ドロップからの Markd
Electronでツイートするところまで最速でやる - Qiita
const Twitter = require('twitter'); const twitterClient = new Twitter({ consumer_key: 'P', consumer_secret: 'I', access_token_key: 'Y', access_token_secret: 'O' }); ... ipc.on('tweet', function(event, arg){ twitterClient.post('statuses/update', {status: arg}, function(error, tweet, response){ if(error) return mainWindow.webContents.send('tweet-res', '失敗'); mainWindow.webContents.send('tweet-res',
Electronで設定ファイルを保存する - Qiita
Electronを使ってアプリを開発を行っている時にPC上に設定ファイルなどを配置して読み込めるようにしたいケースがあると思います。 一般的にはappからOSごとの差分をなくすためのgetPathを利用してアプリの設定フォルダを取得し、fsを利用して設定ファイルを保存することを考えることが多いと思います。 そこで今回はelectron-json-storageを紹介したいと思います。 electron-json-storageとは electron-json-storageはapp.getPath('userData')で取得できるPathに対してelectron-json-storageで指定するJSONファイルを生成、キーバリューによるデータを保存、取得が簡単にできるようにしたものになります。 使い方 インストール コマンドラインでプロジェクトフォルダ内に移動し、下記のコマンドを実行す
Electronが作成・保存するlocalStorageなどのキャッシュディレクトリ - Qiita
保存場所(Windows7の場合) C:\Users%USERNAME%\AppData\Roaming\package.jsonのnameフィールド\ 検証環境 Windows7 Professional 64bit electron-prebuilt 0.36.4 node v5.2.0 Electronを触ることは簡単ですが、余計なゴミ1をできるだけ出したくない。 そこで、ローカルに値を保存できるlocalStorageを使うときは場所を調べておこうと思ったが、検索にうまくひっかからなかった。 しかたがないのでファイルモニターを使って書き込みを監視した。 調べると、localStorage以外にもキャッシュやCookieも同ディレクトリに保存していた。 localStorageを使わないから余計なファイルが残らないわけではないようだ。 同じアプリでもpackage.jsonのname
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Mac環境でElectronのWindows用パッケージングをしたら大変だった話 - Qiita
React + TypeScript (+ Electron)でアプリを書き始めるときにやってること - Qiita
electron 上で vue.js を動かす - Qiita
Electron+Node.js+jQueryで最小構成チャット - Qiita
Webページをデスクトップアプリ化 - nativefierを使ってみる - Qiita
Electron+TypeScript+Express.jsでweb-apiを作る - Qiita
