Markdown スライド作成ツール『Marp』の開発経緯裏話 - Speee DEVELOPER BLOG
2019/08/03 追記: 2019年現在、デスクトップアプリ版の Marp はすでに開発を中止しており、次世代版である Marp Next の開発に注力しています。デスクトップアプリはまだ使用可能ですが、すでにメンテナンスが中止されており、セキュリティに関する一部懸念も指摘されているため、デスクトップアプリ版をこれから使い始めるのは決して推奨されません。 移行先として、Marp Next の公式ツールの1つとして提供されている Visual Studio Code の拡張機能、Marp for VS Code をお勧めしています。クロスプラットフォーム・オフライン対応・ライブプレビュー・PDF出力はもちろん、新しい Marpit フレームワーク をベースとした Markdown 構文、HTML 形式や PowerPoint 形式での出力、カスタムテーマ CSS の対応など、スライド作成
ReactのプロジェクトをElectron化する。 - Qiita
前書き Reactが登場したおかげで、フロント業界に革命が起きました。 Webだけでなく、アプリもReactでかける時代です。 そして、Electronの登場により、Webのアプリをそのままデスクトップ化することが可能になりました！ 今回は、Reactで作ったプロジェクトをElectron化する方法について解説して行きます。 利用技術 React v15.4.2 Electron v1.6.2 webpack v2.3.3 ReactTodo 今回は、Reactの勉強で作成したReactTodoをElectron化して デスクトップ上で動かせるようにしてゆきます。 (Semanticで作った、とてもシンプルなTodoです。) 以下からCloneできますので、よければお試しください。 https://github.com/gcmae/react-todo.git 手順 今回の、設定の肝として
Electron/Node.js初心者がマテリアルデザインなMarkdownエディタを作ってみた - Qiita
はじめに VB6が全盛の時代、Webは何もできないなんて言われた時代もありましたが、今やひと通りのことができる時代にGoogle？がChromeやV8など、JavaScriptを爆速にして連れて来てくれました。 そんなこんなで、今年、みんな大好きGithubがAtomエディタを作るために開発した実行環境が Electron （旧Atom-Shell)です。 Web開発スキル（HTML5、CSS、JavaScript）とNode.jsの知識があれば、Mac、Windows、Linuxのデスクトップアプリを作れるのが特徴のクロスプラットフォーム実行環境ですね。 動機とコンセプト Githubをはじめとして、最近はちょっとしたドキュメントは全てMarkdownで書くようになりました。仕事・プライベートともに、Atomや専用Markdownエディタをはじめとして、色々と試してはいますが、帯に短し襷
Modern JavaScript概観、そしてElectronへ | さにあらず
この一か月分の学習成果を整理したリポジトリを作ったので、その成果についてまとめておく。 作ったサンプルプロジェクトだけを手軽に欲しければ、このリポジトリを clone してほしい。 taichi/js-boilerplatemaster ブランチには、ミニマムな JavaScript 開発環境がサンプルコード付きで入っているfrontend ブランチには、React/Redux/webpackなウェブアプリケーション用の開発環境が入っているデフォルトブランチにしてある electron ブランチには、frontend ブランチの内容に加えてElectronでアプリケーションを開発するための環境が入っているはじめに#最近の JavaScript について#僕は仕事として JavaScript を書いている訳ではないけども、この半年くらいの間にちょっとしたツールならいくつか作った。どちらも便利
Electron製アプリでアイコンバッジを実装する(Mac,Windows対応版) - Qiita
アイコンバッジ Electronでアプリを作っていると、新着のお知らせなどがあった場合にアプリアイコンにバッジを付けたくなります。 Electronにはそれを実現するAPIが用意されているので、基本的には簡単なのですがWindowsでは非常に面倒だったのでまとめておきます。 ちなみにバッジには任意の数値を出すことを想定しています。 Linuxはデスクトップ環境を用意したことがないので対象外です。 Mac とても簡単です。 mainプロセス内で app.setBadgeCount(X)を呼ぶだけです。 const electron = require('electron') const app = electron.app const BrowserWindow = electron.BrowserWindow const path = require('path') const url =
Electron + vue + neDBでプロジェクト管理ツール作成 - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 昨年のあまりにも無計画な開発を省みて正月にプロジェクト管理のツールを作ることにしました。 ミニマムでコンパクトなものを目指した単体アプリです。 一部ライセンス的にまずいものを使用しているため引き剥がした後gitにアップさせて頂きます。 フレームワークと選定理由やメリット等は以下。 どれも大きなプロジェクトでは採用は見送られそうなものばかりですが パーソナルユースで小規模なものであれば使えるかと思います。 #仕様について 下の説明で必要になるためザックリと仕様説明。 プロジェクトを、 プロジェクト >> プロセス >> アクティビティ >
Electron アプリで起動時に真っ白なウィンドウが一瞬出てしまうのを避ける - Qiita
let win = new BrowserWindow({ width: 600, height: 800, }); win.loadURL(path_to_html_file); このようにすると，アプリのサイズが大きい場合に HTML の読み込みが終わるまでウィンドウが真っ白になってしまいます．画面が真っ白になってしまうと見栄えも悪いですし，目にも良くなさそうです．Electron ではこれを抑制する方法があるのですが，ちょっとぐぐった感じあまり知られていなかったようなのでメモしておきます． これを抑制するために ready-to-show というイベントが BrowserWindow にあります． これは HTML の描画が終わり，画面が真っ白でなくなったタイミングで起こるイベントで， dom-ready よりも後に発火します．下記のように使います． let win = new Br
Electron APIの内部を覗いてみる - Qiita
クロスプラットフォームなデスクトップアプリ開発ができるElectronですが、よりデスクトップアプリらしさを追求していくとクロスプラットフォームなどというものはやはり幻想だったということ思い出します。 プラットフォームごとにアプリに一般的に期待される挙動が違う プラットフォームごとにElectronの挙動が微妙に違う 機能の実現にそもそものElectronのAPIが足りない そんなことがあってAPIを追加したいと思っていたことがあり、ネイティブのAPIを呼び出すべくElectronのソースコードを調べた時のことを書き並べたいと思います。なお、この記事ではElectron 1.4.12を扱います。 知っていると役に立つもの native addonの作成方法とパターン https://nodejs.org/api/addons.html Electronのデバッグ方法 http://elec
Electronアプリケーションの環境設定画面を超簡単に実装するモジュール electron-preference を作った - Qiita
[ { "name":"Tab1", "items":[ { "name":"checkbox1", "text":"checkbox1", "description":"Please check if you are lucky!", "type":"checkbox", "default":"true" }, { "name":"text1", "text": "first name", "description":"Your First Name", "type": "text", "default":"takuya" }, { "name":"text2", "text":"last name", "description":"Your Last Name", "type": "text", "default":"takahashi" }] },{ "name":"Tab2", "
趣味Electronアプリの(?:dev)?Dependenciesを晒してみる - Qiita
趣味Electronアプリ．ざっくり構成はこんなかんじ: JS ViewはReact データの取り回しはImmutable.js + promised-reducer つなぎにreact-dispatcher-decorator CSS PostCSS module bundler Webpack(v2) testing mocha power-assert E2Eはまだやってない がんばってHMRできる環境つくったけどいらんかった説が根強い． package.json { "dependencies": { "axios": "^0.15.3", "babel-polyfill": "^6.16.0", "dexie": "^1.5.1", "font-awesome": "^4.7.0", "fuse.js": "^2.6.1", "immutable": "^3.8.1", "men
【Electron + React + Flux】マークアップエディタを作ってこと細かく解説してみた - Qiita
この記事はtokyoSWアドベントカレンダーの22日目の記事です。 おはこんばんちわ。 株式会社Gizumoという会社で新人教育しながらフロントエンドエンジニアをやっているゆーひです。 ちょっと前からElectronに対して興味があったんで、業務の合間にこそこそ勉強してました。 実際にできあがったものを見ていただきながら完成に至るまでの流れを書いていきますー。 ※Reactの知見がない人が見ることを前提として書いているので割と細かく書いています。ご了承を。 できあがったもの GitHubのurlも置いておきます。 https://github.com/yuyake0084/code_hack まぁ、あれですね。 某JS○iddleとか某Code◯en的なかんじのサービスをデスクトップアプリとして作ってみたみたいなかんじです。 gifだとちょっと見づらいですが、右側のエディタの値の変更を観測
Re:ゼロから始めるElectron開発生活 - Qiita
この記事は ドワンゴ Advent Calendar 10日目の記事です。 こんにちは。ニコニコ静画でフロントエンドで開発を行っている @nagisio です。 去年に引き続き、今年も冬コミに落ちて時間があるのでアドベントカレンダーに参加させていただきます。去年の記事は「新卒でもモダンなフロント開発がしたい！」でした。 今年一年の所感ですが、Reactの採用プロダクトが非常に増えてきている印象です。「You Don't Need jQuery」といった記事や、「Reactを使うとなぜjQueryが要らなくなるのか」といった記事が出てきたりと、Reactの勢いの強さが伺えます 本記事はますますモダン化が進むフロントエンド界隈において、今もっとも熱い（であろう）フレームワークReactとその他色々なあれこれを駆使して簡単なElectronアプリをゼロから開発（未完）しましたので、ご紹介します1
ElectronでDiffツールを作ってみた - Qiita
この記事は アイスタイルアドベントカレンダー2016の11日目の記事です。 10月入社の@romiogakuが書きます。（@fagaiさんと順番かわりました） git不要のテキストdiffツールが欲しかったので、勉強がてらElectron+react+reduxで作ってみました。 できたもの Difftron 名前はDifftronにしました。 意外と◯◯tronという名前空間空いてるので早い者勝ちですよ！ gifアニメにあるようにQiitaのmarkdownはdiffフォーマットも対応してるんです。知ってました？ 利用ライブラリ diff diffのjavascript実装です。 diff2html diffからgithubのような差分表示HTMLを出力してくれます。 react-ace コードエディタAceのreact版です。 redux-saga 副作用を扱うためのライブラリです。
React Tutorial Example (Electron) - Qiita
React や Redux は 主に Webアプリケーション のライブラリなのですが Electron を利用すると ディスクトップ アプリケーション を作成することができます。 前回 のアプリケーションを ディスクトップ アプリケーション にしましょう。 Learning Electron で ディスクトップ アプリケーション を作成する。 Electron の メニュー と IPC(プロセス間通信) を利用する。 Environment node: v6.9.2 npm: v4.0.5 yarn: v0.18.0 Comment Box Form 完成される Source Code のファイルリストです。 main.js と server.js の２ファイルが追加されます。 $ tree -a -I node_modules . ├── .babelrc ├── app │ ├──
ElectronでVue.jsを始める - Qiita
今回は、EletronをVue.jsでどうやって使うか、セットアップをするかを記事に書いていきたいと思います。 このアドベントカレンダーの23日目の、@nakajmgさんと内容が少し被ってしまいそうで申し訳ない気持ちでこの記事を書かせていただきます！ 最新のやり方 2017年度版の記事を、 @1ntegrale9 さんが書いてくださったので是非ご覧ください！ 2017年度版 electron-vueで始めるVue.js 前提 Node.jsが入っていることを前提にかいています！ インストール まずは、npmから vue-cli をインストールします。インストール後、 vue コマンドが使えれば成功です。 vue-cliは、Vue.jsの公式のCLIでいい感じのテンプレートを使用してプロジェクトを始めることができます。 プロジェクトの作成 今回は electron-vue（日本語ドキュメント
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の使い方をサンプルアプリを実装しながら説明していきます. お題 このエントリのお題と
WebGLを使ったElectronアプリをTravis CIで動かすまで - non vorrei lavorare
こんにちは、iPhone 7 Plusで息子たちの写真をまた撮る回数が増えた気がしています。kjunichiです。 背景 WebGLを使ったデスクトップマスコットアプリのGopheronを開発しており、これまでノーテストだったのだけど、 さすがに2年連続で東京Node学園祭で@t_wadaさんのセッションを聞いたら、テスト書かずにはいられなくなった。 実は CI環境のNightmareでWebGLを動かす方法や、NightmareでWebGL 2.0を動かす方法 なる記事もすでに書いており、今回は実際にうごかすだけ、楽勝のはずだった。。。 必要な物たち Xvfb これは、「Electronアプリ」、 「Travis CI」程度のキーワードでググれば出てる。 Electron公式にも electron/testing-on-headless-ci.md at master · electro
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Electronデスクトップアプリ開発入門 - Build Insider
ようこそ！Electron入門 - Qiita
404 when trying to install v0.31.0 via electron-prebuilt · Issue #2590 · electron/electron