[ Electron + React ] 5分で作るMarkdown Editor - Qiita
自己紹介 じゅんじゅんというニックネームで、関西を拠点に活動しているフロントエンドエンジニアです。 HAL大阪の2回生です👍 (2016.9.9現在) よくstart up系イベントに行くので、大阪らへんの方は会いましょう！ 作ったもの 今回は ElectronとReactで作ること しか決まってないので、リアルタイムプレビューの機能だけしかつけていません。 できたもの。 今回作った経緯 今回は、いつもREADMEとかを書くときにsublime textのOmniMarkupPreviewerを使っていたんですが、全然動かない。。 なぜか分からないので、勉強を兼ねて作ることにしました。 今回使う技術は Electron React ぐらいです。 Editor部分はAceを使いました。 Markdownのpreviewには、markedを使いました。 Electronに関しては、ほぼサンプ
![[ Electron + React ] 5分で作るMarkdown Editor - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/3994ded5d5fc401e69bb2ad5d915a5e64bd6dbc2/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-9f5428127621718a910c8b63951390ad.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTkxNiZoPTMzNiZ0eHQ9JTVCJTIwRWxlY3Ryb24lMjAlMkIlMjBSZWFjdCUyMCU1RCUyMDUlRTUlODglODYlRTMlODElQTclRTQlQkQlOUMlRTMlODIlOEJNYXJrZG93biUyMEVkaXRvciZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTU2JnR4dC1jbGlwPWVsbGlwc2lzJnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9MWE5MDgxNDZhYzc5MDZhN2MzZjUwYmUxYTgyOTkzMjA%26mark-x%3D142%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTYxNiZ0eHQ9JTQwa29ub2p1bnlhJnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9MzYmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz04OTI1NGVmZGVmMzBhNDJmODYwOWJkOTY0OWJlYjAxMQ%26blend-x%3D142%26blend-y%3D491%26blend-mode%3Dnormal%26s%3Dab96b4e71faa491a79bab2ffff5e7a4e)
electron-viz - GUIのGraphvizチャートエディタ&ビューワー
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Graphvizを使うとノードを使ったフローチャート、クラス図をはじめ様々なチャートを画像にすることができます。ただし最初に環境を整えるのが手間であったり、dotファイルを書いた後にコマンドで変換しなければなりません。 そんな手間暇を軽減してくれるのがelectron-vizです。Electronで開発されており、GUIでGraphvizを編集できます。 electron-vizの使い方 electron-vizのメイン画面です。左側がエディタ、右側にチャートが描かれます。 例えばこのような図を描きました。オートプレビューが有効になっていれば編集した直後にチャートが描かれます。チャートの内容はGraphviz チュートリアルよりお借りしました。 二つに分かれるサンプル。 さらに複雑
Electron製Markdownプレビュー＆コンバートツール制作中の続き - arinoth's memo
前回に引き続きツール制作を進め、何とか必要最低限の作業はできるようにしました。 後は実戦でテストしながら仕上げていくつもりです。 github.com ざっくりとした使い方 GitHubリポジトリ内のpackagesディレクトリの中から対応するバージョンのzipファイルをダウンロードします（Mac版はdarwin）。 zipを解凍して、Winならmdpreview.exe、Macならmdpreview.appをダブルクリックして起動します。他のファイルも必須なので、実行ファイルの場所は移動せず、ショートカットなどを適宜作成してください。 vivliostyle.jsをダウンロードして解凍し、中のviewerフォルダを、プレビューしたいMarkdownファイルと同じ場所に配置してください。 template.htmlやpostReplaceList.json、_template.htmlで読
Rec - Eletron製のスクリーンキャスト
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました ソフトウェアを紹介する際にデスクトップの操作を記録することは多々あります。最近はアニメーションGIFをよく使うのですが、YouTubeにアップロードする場合は動画で録画する方が良いでしょう。 今回紹介するオープンソース・ソフトウェアはRec、Electron製のデスクトップレコーダーです。 Recの使い方 Recを実行したところです。ウィンドウごとに録画を行うようになっています。 録画した動画を保存します。形式はWebMです。 撮影した動画です。アニメーションGIF化しているのでぎこちないですが、実際にはスムーズです。 RecはCanvasタグを使ってウィンドウのスクリーンショットを撮り続け、それをWebMとして出力しています。JavaScriptで行っているようです。かなり強引に
ElectronアプリがGecko上で動く未来 - Mozilla Flux
Mozillaは、Electron APIをGecko上で動作させるためのラッパを開発中で、その開発プロジェクトはElectron（電子）を踏まえてPositron（陽電子）と呼ばれている。今のところまだElectronベースのアプリを走らせることができるまでには至っていない。 ElectronはChromiumとNode.jsを利用しているが、ChromiumのところにGeckoを代入するとして、Node.jsはどうするのか。その回答がSpiderNodeで、こちらはMozilla製JavaScriptエンジンであるSpiderMonkey上でNode.jsを動作させることを目的としたプロジェクトである。 V8以外のJavaScriptエンジンにNode.jsを移植するといえば、MicrosoftのChakraCoreが有名だ。2016年1月に取り組みが発表され、注目を集めた。Spide
Building a desktop application with Electron
A detailed guide on building your very own sound machine using JavaScript, Node.js and Electron The how and what of JavaScript desktop applicationsDesktop applications always had a special place in my heart. Ever since browsers and mobile devices got powerful, there’s been a steady decline of desktop applications which are getting replaced by mobile and web applications. Still, there’s are a lot o
markn - Electron製のMarkdownビューワー
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Markdownで文書を書くことが増えています。慣れた人にとっては書いている時点で結果の予想がつくのですが、不慣れな場合、やはりできあがりを確認しつつ書いてみたいと思うのではないでしょうか。 Markdown専用エディタを使うのも良いのですが、2画面分割が好きでなかったり、リアルタイムプレビューまではいらないと思うこともあるでしょう。そこで使ってみたいのがmarknです。 marknの使い方 marknはElectronでできていて、Windows/Mac OSX/Linuxで動作します。起動するとデモのMarkdownファイルが開きます。 例えばこんな感じ。 画像もちゃんと表示されます。 普段使い慣れたテキストエディタでMarkdownを書きつつ、気になったタイミングで描画してみ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
LightGallery
正式版となるコードエディター「Visual Studio Code 1.0」が公開 
GitHub - hainproject/hain: An 'alt+space' launcher for Windows, built with Electron