先日、GoogleがCarloというライブラリをリリースしました。 少し気になったので、軽くメモを残しておきます。 Carlo is 何 CarloはChromiumを画面描画エンジンとして動作するNode.js アプリケーションフレームワークです。 Node.js、ChromiumともにV8が動作するため、JavaScriptのみでデスクトップアプリが作れるよ、というわけです。 公式のサンプルとほぼ一緒ですが、次のようにコードを書くと、index.htmlがデスクトップアプリ風に立ち上がります。 const carlo = require('carlo'); (async () => { const app = await carlo.launch(); // html/CSS/JavaScriptを配置しているフォルダを教える app.serveFolder(__dirname); /
More quality, less noiseExport as GIF, MP4, WebM, or APNG with optional audio, highlight clicks and trimming. How Kap was built The power of open-sourceThe ease of use and speed you’ve been looking for – the functionality and extensibility you didn’t know you needed.
Alpacaで主にフロントエンドを担当している北山(@gamella, blog)です。 フロントエンドを開発していると、「ログインして、これをクリックしたら、この表示が行われていること」みたいなUIテストを環境非依存で簡単に行いたいと思うことがありますよね？僕はあります。 Alpacaでは開発にDockerを全面採用しているということもあり、最近ちょくちょく目にするNightmareJSをDocker上で動かして簡単にUIテストを導入できたので、その知見を共有したいとおもいます。 Nightmare まず、どうしてDockerを利用したいかということですがAlpacaでは、すべての機能をDocker上で動作させているため、それに倣っているいうこともありますがUIテストをローカルでもCircleCIでも、Dockerが動作する環境であればどこでもコードの改変なしで実施できるというのは大きな
React+Electronアプリを作ってみよう
こんにちは。前置きは抜きにすぐ作ります。 Create Application 01: create-react-app まずはcreate-react-appです。なかったらnpm install -g create-react-appしてください。 うまくいったらyarn startで起動しましょう。しましたか？うまくいってるのを確認したら即刻ジョブ止めましょう。もう二度とyarn startを実行することはありません。 02: install Some Package 以下のパッケージをインストールしてください。最新ので問題はないはずです。すべてインストール時に--dev-dependenciesを付けることを忘れないでください。まあ忘れてもいいです。 electron npm-run-all 03: setting up Electron こちらのgistを参照してください。 次に
追記(2020-12-16): 公式で再実装されたようです。 「タグの一括編集機能」をPCのブラウザで再提供いたします - はてなブックマーク開発ブログ はてなブックマークで自分のブックマークの既存のタグ名を変更した時に一括置換したいことがあります。 以前は公式のタグの一括置換/削除機能の追加がありましたが、ブックマーク一覧ページのリニューアル時に消えてしまったようです。 ユーザーのブックマーク一覧ページのシステムリニューアルを行いました - はてなブックマーク開発ブログ Firefoxのアドオン版でも同様の機能がありましたが、もう動かなくなっているので、はてなブックマークのタグを一括置換するコマンドラインツールを書きました。 azu/hatenabookmark-rename-tags: A CLI that replace all hatena bookmark tags. haten
ビジネスシーンで使えるメッセージングサービスSyncをローンチしました。 その開発の舞台裏をiOSを中心に紹介します。開発のスケジュール、リソース、アプリの規模や進め方など参考になれば幸いです。 サービスについて Syncは社内・社外を問わずプロジェクトやビジネスコミュニケーションがより良い体験なることをゴールに開発しました。以下のURLよりご利用頂けます。 Web版 , Desktop版(OnlyOSX) , iPhone , Andorid アーキテクチャ サーバ 既存のWantedlyサーバに並列して、Syncのサービスをマイクロサービスアーキテクチャ風に構築しています。要素技術や構成はサービスの初期フェイズにおけるスピディーな開発とスモールな運用に適しているものを選定しています。 AccountServerが認証やユーザ情報管理を、APIServerが主要なデータのやり取りをRES
必要な要件 Mac OS X 最新の Xcode Apple Developer Program（$100 per year） 有用なドキュメント Electron Mac App Store Submission Guide Mac App Store (MAS) Submission Guideline · nwjs/nw.js Wiki Enabling App Sandbox Electron 公式の Submission Guideline はコードサイニングについてしか書いていないので、nw.js の wiki を参考にしてアプリを登録していきます。この２つのドキュメントを読むだけでもゴールには到達できますが、つまずきポイントもなかなかあるので手順を解説していきます。 証明書を作成 iTunes Connect でアプリを作成 アプリを asar にアーカイブ MASディストリ
はじめに PC画面上にコメントが流せるデスクトップアプリをElectronで作ってみました。 名前は、「wakaba」です。 コメントはTwitterから特定のキーワードを含むツイートを取得して流します。 イベントやライブコーディングの時に使うと面白いかもしれません。 コンポーネントの部分は、Reactではなく、Riotを使いました。 動作 PC画面上にコメントが流せるデスクトップアプリをElectronで作りました。 Twitterからツイートを取得して、コメントを流しています。 GitHub: https://t.co/v8OKRqf0It ダウンロード: https://t.co/ScVcy1HaLS pic.twitter.com/o6S3FBGZK3 — yuki540 (@eriri_jp) 2017年3月19日 使い方 ダウンロード ダウンロードしたものが動かない問題解決しま
GitHub - sindresorhus/awesome-electron: Useful resources for creating apps with Electron
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
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
仕事中に閲覧できるTwitterクライアント「Worc」を作った - The future starts today
この記事は Electron Advent Calendar 2016 の9日目の記事です。 作ったもの github.com GitHubで公開しています。Releaseページから最新バージョンの「worc-darwin-x64.zip」というリンクからダウンロード可能です。 以下のランディングページからダウンロードできます。（追記：2017/2/17） shibe97.github.io ※未署名のため、ダウンロード後は「右クリック」→「開く」という手順で開く必要があります。 動機 Twitterは情報収集のツールとして非常に優秀だと思っていて、特にTech系の情報はTwitter経由が一番速くつかみやすいです。 界隈で強い方々はよくTwitter使って発信しているイメージがあります。 世の中には非常に多くのTwitterクライアントが存在しているのですが、個人的にしっくりくる物がない
Denoの作者ライアン・ダール氏らが「Deno Company」を立ち上げ。Denoの開発推進と商用サービスの実現へ
Denoの作者ライアン・ダール氏らが「Deno Company」を立ち上げ。Denoの開発推進と商用サービスの実現へ 2009年に登場したNode.jsは、サーバサイドにおけるJavaScriptの利用や非同期処理によるイベントドリブンなアプリケーションアーキテクチャという新しい分野を確立した、画期的なプラットフォームです。 Node.jsの登場により、AWS Lambdaをはじめとするサーバレスコンピューティングや、ElectronのようなWebテクノロジーを基盤としたアプリケーションフレームワークをはじめとする、さまざまなJavaScriptエコシステムが飛躍的に発展したと言ってもいいでしょう。 このNode.jsの作者であるライアン・ダール（Ryan Dahl）氏は、2012年にNode.jsの開発リーダーを退任すると、2018年に「Node.jsに関する10の反省点」を発表。これに
【Electron + react + flowtype】TweetDeckライクなpixivクライアントPixivDeckをつくった - Qiita
【Electron + react + flowtype】TweetDeckライクなpixivクライアントPixivDeckをつくったflowpixivReactElectronredux electron + react + flowtype + styled-components + webpackでpixivのデスクトップアプリを書いた。 前半にアプリについて、後半に技術的なことを書くので、どんな技術を使ったかのみ知りたい人は前半飛ばしてください。 GitHub - akameco/PixivDeck: TweetDeck like pixiv client for desktop ダウンロードページ スクリーンショット TweetDeckライクなpixivイラストビューア スクロール(IntersectionObserverで画像の遅延読み込み) カラムの移動(react-sort
The Call for Presentations is now OPEN for the 2024 TheiaCon! (Virtual Event | 13 - 14 November, 2024) Submit your proposal today to be a speaker and get registered! The Eclipse Theia PlatformAn Open, Flexible and Extensible Platform to efficiently develop and deliver Cloud & Desktop IDEs and tools with modern web technologies. The Theia IDE is a standard IDE built on the Theia Platform.
手軽にデスクトップ（or ウィンドウ）を録画できるアプリが欲しかった Photon を使ってみたかった Electron 楽しい 以上の動機で書いてみました。Rec って名前です（てきとー）。レポジトリはこちら。Mac であればバイナリを置いてあります。Windows は試していないです。 使い方 アプリを起動するとデスクトップとウィンドウの一覧がサイドバーに並ぶので、録画したいものをクリックしてから、カメラアイコンをクリックで録画開始です。止めるときは停止アイコンですね。仮想デスクトップをお使いの場合は、対象のデスクトップにアプリを移動して、右上のリフレッシュボタンをクリックです。 停止アイコンをクリックで録画された webm がダウンロードできますので、あとはご自由にどうぞ。 中身 Electron v0.36.0 から desktopCapturer モジュールが使えるようになりまし
Microsoftエンジニア、「Officeを完全にJavaScriptで書き直した」とツイートして炎上 | ソフトアンテナ
Microsoftの開発者が、Officeを完全にJavaScriptで書き直したとツイートしたことから騒動が巻き起こっていることが判明しました(MSPoweruser)。 問題の発言を行ったのは、Microsoft Web PlatformのTechnical Program ManagerであるSean Thomas Larkin氏で、「Office 365の全ては、JavaSriptと呼ばれる小さなスクリプト言語で完全に書き直されました」と以下のようにツイートしています。 (Ive never been able to say this yet) 🙋Well Actually!🙋 All of Office 365 is (almost finished) being completely rewritten in this little scripting language c
はじめに こんにちは、@tsuwatchです。普段はRubyを書くのですが、仕事の幅も広がりつつあり、フロントエンドも本格的にやっていこうということで、 Kaizokuというニコニコ生放送のデスクトップアプリをリリースしました。 人生の大半の時間がニコ生に溶けているわけですが、かねてからコメントビューワを作ろうと思っていたので、この機会に作ってみました。 しかし、Mac版のコメントビューワにはHakumaiという大変素晴らしいコメントビューワが存在するので、少し違う方向を向いた生放送ビューワをかねたアプリにしました。 Hakumaiはコメントビューワとしては数少ないオープンソースなので、実装やコメントサーバの仕様など大変参考にさせて頂きました。この場をお借りして、お礼を申し上げます。 アプリの機能や今後についての紹介はまた別途ブログで書くと思います。 ご興味がありましたら、ぜひ使ってみてい
初めてElectronを使ってTwitterクライアント https://github.com/k0kubun/Nocturn を作ったときによくわからず時間を吸われたことについて、これからElectronを使いはじめる人のために残しておく。 トラックパッドでスクロールすると画面の外までひっぱれてしまう マウスホイールでスクロールしてると気づかないのだが、トラックパッドで画面の適当なところを引っ張ると画面の外側が見えてしまい、普通のブラウザっぽくなる。Electronの検索性が低くてなかなか情報にたどり着けなかったが、ChrominumベースなのでChromeについてググったら直し方がわかった。 http://stackoverflow.com/questions/12046315/prevent-overscrolling-of-web-page html, body { width:
すでに幾つかのメディアに取り上げられているどころかMac App Storeの有料アプリランキング１位になっていますが、最強のTwitterクライアント戦争の成果物と言えるTwitterクライアントをリリースしました。Mac App Storeからダウンロードできます。 アプリリリースにともなってインターネット上にページができています。 ホームページ https://tweetman.kksg.net/ ホームページ(English) https://tweetman.kksg.net/en Mac App Store https://itunes.apple.com/us/app/tweetman-for-twitter/id1063031541?l=ja&ls=1&mt=12 公式 Twitter アカウント @tweetman_app 開発状況 https://trello.com/
フロントエンドのパラダイムを参考にバックエンド開発を再考する / TypeScript による GraphQL バックエンド開発
Freeware Place
Freeware Place では、Windows 用のフリーソフトウェアを公開しています。 動作確認は Windows XP / 7 で行っています。 その他の Windows でも動作するかもしれませんが、動作確認できませんのでサポートできない場合があります。 インストーラー付きをダウンロードし、zipファイル内のmsiファイルを開けばインストーラーが起動します。 インストーラーのファイル名に64と付いているものがある場合、それは64ビットバージョンです。 64ビット版のWindowsにのみインストールすることができます。 インストーラーなしの場合は、zipファイルをお好きな場所（デスクトップなど）に解凍し、 フォルダ内のアプリケーションファイルを開くと起動します。 ただし、Windows標準の圧縮フォルダで解凍した場合、ファイルがブロックされた状態となり、 ヘルプファイルなどが正常に
小説推敲補助ソフト「Novel Supporter」
小説のテキストファイルを加工して、小説推敲の補助とする。 収録している各種ツール。 単語近傍探索 こそあど確認 文末重複確認 段落先頭重複確認 文章警告 画数ヒートマップ 文長ヒートマップ ルビ追加 文字種表示 指定文字数改行 音声読み上げ（SAPI5） センチメント分析 使用単語集計 正字略字切り替え 章ボリューム表示 言い回し確認 表記ゆれ確認 時系列分析 →詳細はマニュアルを確認してください。 ツールは、プラグイン方式で追加可能。 テキストファイルの検索機能や、各種Webサイトでの検索に対応。 本ページのダウンロード欄にある以下の2ファイルをダウンロードして解凍する。 Mac実行用のElectron Electronなし版『Novel Supporter』 コマンドライン環境（ターミナル）で以下の操作をする。 解凍した『Novel Supporter』の「asar」ディレクトリを、カ
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という便利ツー
GitHub - atom-archive/xray: An experimental next-generation Electron-based text editor
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
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 製のすごいやつ
Rust+Webフロントの最前線！tauriを試してみた
@Pctg_x8です。 Deno 1.0の登場でRustとWeb関連技術の繋がりがより高まっていく中で、Electronライクな新しいアプリケーションフレームワークである「tauri」を見つけましたのでちょっと触ってみようと思います。 tauriについて 公式サイト: https://tauri.studio/ ※この記事ではv0.9.2をベースに解説しています。 tauriはまだメジャーバージョンが1になっていないため、頻繁にAPIの変更が起こる可能性があります。 概要 フロントはElectronと同じくWebViewですが、ベースの起動プログラム（Main Process）をRustで書くことができるものです。 ElectronではMain ProcessもJavaScript（Node.js）なので、例えば大量のデータを並行してバッと読むとか解析するとかの処理をさせようとすると マル
Presented in http://meguroes.connpass.com/event/35123/
Electron 1.0 is here
ProductElectron 1.0 is hereFor two years, Electron has lowered the barrier to developing desktop applications—making it possible for developers to build cross-platform apps using HTML, CSS, and JavaScript. Now we’re excited to share… For two years, Electron has lowered the barrier to developing desktop applications—making it possible for developers to build cross-platform apps using HTML, CSS, and
Docker社、Appleシリコン搭載Mac用の「Docker Desktop」を開発中と表明。Rosetta 2による変換では十分に動かない模様
Docker社、Appleシリコン搭載Mac用の「Docker Desktop」を開発中と表明。Rosetta 2による変換では十分に動かない模様 Docker社がオープンソースで開発しているDocker Desktopは、WindowsやMacで手軽にDockerコンテナ環境を構築できるツールです。 11月16日付で同社ブログに投稿された記事「Apple Silicon M1 Chips and Docker」で、同社はAppleの新製品、AppleシリコンのM1搭載Macについて、Docker Desktopの対応を進めていることを明らかにしました。 ただし完成までには少し時間がかかりそうです。 Here's our update on Apple silicon M1 chips and Docker https://t.co/YNdG8DxJbf #Docker #Containe
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
Atom Is Now Open Source | Atom Blogによると，Atom開発のためにNode-Webkitを試してみたが利用はせず，別途フレームワーク(Atom Shell)を作成したとのこと． We experimented briefly with Node-Webkit, but decided instead to hire @zcbenz to build the exact framework we were imagining. Node-Webkitを採用しなかった理由を開発者に質問したところ以下の回答が得られた． 技術選定のタイミングではNode-Webkitは安定していなかった&分離されたコンテキスト(nodeのコンテキストとwebのコンテキスト)があった 他のプロジェクトに依存しない，完全に自由な状態でzcbenz(Atom Shellの中心開発者)に
▶多彩な決済方法（代引き、コンビニ決済） ▶マルツ店頭、大学生協受け取り ▶国内送料のみでお届けします ▶3,000円以上のご購入で送料無料
Spectron（スペクトロン）はElectronの為のテストフレームワークで、ElectronのAPIを使用したテストが可能になります。テストを取り入れることで、「想定していた動作と違う」「作成していた機能がいつの間にか動作しない」といったことを未然に防げます。 Spectronからは実際にElectronアプリを起動することができ、「ウィンドウのタイトル」「デベロッパーツールの表示状態」といったことをElectronのAPIにアクセスして取得できます。また、「ページの画像キャプチャー」機能でデザイン崩れが発生していないかのチェックや「ページのテキスト保存」でテストに失敗した時のHTMLテキストの取得、「console.log()で書きだした内容の取得」も可能です。これらのテストは手元の開発機だけでなくJenkinsなどCI（継続的インテグレーション）サービス上でも使用できます。 ▲ 本
Local
Empowering developers with advanced workflow features Stop debugging local environments and spend more time launching WordPress sites. Automatic WordPress installation Local sets up WordPress for you. One click and your site is ready to go, SSL included!
Build smaller, faster, and more secure desktop applications with a web frontend | Tauri Apps
Build an optimized, secure, and frontend-independent application for multi-platform deployment.
The document discusses an Electron (formerly Atom Shell) meetup. It provides links to documentation on the differences between Electron and Node-webkit. If time permits, an Electron demo may be shown. Electron allows building cross-platform desktop apps using JavaScript, HTML, and CSS by embedding Chromium and io.js. It also references a presentation on embedding Node.js into the Atom editor.
GitHub - gabrielbull/react-desktop: React UI Components for macOS High Sierra and Windows 10
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
#html5jplat で発表したElectorn App の話です。
Photon - ElectronアプリをMac OSX風アプリに仕上げるデザインフレームワーク MOONGIFT
Electronを使えばHTML5/JavaScript/CSSを使ってデスクトップアプリが開発できます。それは知っていても、UIがなんとなくWebっぽい感じを残していると、それはやはりWebアプリケーションをラッピングしただけのものだと感じてしまいます。 そこで使ってみて欲しいのがPhotonです。Mac OSX用のツールであれば、まさにMac OSXっぽいUIに仕上げられるでしょう。 Photonの使い方 コンポーネントは多数用意されています。まずはバー。 アクション付きのバー。 タブ付きのバー。 ナビゲーション。 リスト。 ボタン。 フォーム。 テーブル。 アイコン。 PhotonはまさにMac OSXアプリで必要とされるようなUIコンポーネントを多数用意しており、デスクトップのネイティブUIと殆ど変わらない仕上がりにしてくれるのではないでしょうか。同様にWindowsやLinux版
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CarloでNode.jsのツールにUIをもたせる - Qiita
Kap - Capture your screen
NightmareJS+Dockerによる環境非依存なUIテストの導入 - Alpaca技術ブログ
はてなブックマークのタグを一括置換するコマンドラインツールを書いた
メッセージングアプリSync開発の舞台裏(iOS) - Qiita
Electron アプリを Mac App Store に登録する手順 - Qiita
ElectronでPC画面上にコメントが流せるデスクトップアプリを作ってみた - Qiita
Building a desktop application with Electron
Theia - Cloud and Desktop IDE Platform
デスクトップを録画するアプリを書いた - Qiita
Electronアプリをリリースするまでにあった知見 - Qiita
Electronを初めて触った時にハマった5つのこと - Qiita
最強Twitterクライアント「Tweetman」をリリースしました
HBFav for Desktop 開発進捗
Electron + React + Redux - KAYAC engineers' blog
Electronを勉強していただけなのに... @ Meguro.es #5
AtomではなぜNode Webkitを採用しなかったのか - Qiita
電子部品・半導体パーツの通販 販売 | マルツオンライン
Electronの公式テストフレームワークSpectron入門 - ICS MEDIA
WebアプリをElectronに乗せる
GitHub、無償コードエディター「Atom」v1.19を正式公開／「Electron」のアップグレードとアーキテクチャーの刷新により性能と応答性を改善
Electron App の作り方