This domain may be for sale!
2016年5月 補足 この記事の内容は Electron v0.3x 時代の内容です。2016年5月最新の Electron v1.1.1 で確認したところ、開発者メニューは最初から表示された状態になっています。また、 Electron v1.0 より APIが刷新されたため、下記のコードは Electron v1.0 以降ではそのまま動作しません。 以下は当時の記事をそのまま残したものです。 はじめに この記事では、Electronに以下の開発者用メニューとショートカットを追加する方法を紹介します。 初期のElectronには上記のメニューとキーボードショートカットがデフォルトで設定されていたのですが、v0.25.2以降、削除されてしまいました。 現在ではQuick Startのmain.jsサンプルに従うと、Electronの起動直後に開発者メニューが自動で開きます。しかしUIのデバッ
ぼくはその日を善く生きたかどうかは AdSense の収益で決まると思っているので、以前にも AdSense のレポートを CLI で確認できるツール を書き、この記事にもあるように tmux のステータスバーに収益を表示していつでも確認できるようにカスタマイズしている。これは具合がよくてずっと使っていたのだけど、最近 tmux.conf をいじっていたらだんだん表示領域が手狭に感じられてきて、ターミナルから追い出したくなってしまった。くわえて、人にターミナルを見せると「ほうほう motemen さんの今月の収益は 9 円ですか……」といらぬ情報を人に与えてしまう問題もあり、ここはひとつ最近はやりの Electron を使ってメニューバーに表示してしまおうということしたのだ。 使用イメージはこちら。ここ7日分の収益を、日別に集計してメニューに表示している。アイコンの隣の数字はその合計(数字
New [Event] Building integrations is hard. Maintaining them is even harder. Register Now One API for email, calendar, and contacts Nylas saves engineering teams time so they can build secure and engaging communication experiences their customers love. Meet Nylas A developer-first solution for custom communication experiences Securely integrate with every email, calendar, and contacts provider usin
Electron を試すで残された課題を解決したので、その内容を記録しておく。 2015/10/5 追記 本記事のはてブにて id:Pasta-Kさんより .ico ファイルを反映させるために wine が必要との指摘があった。試してみたところ OS X 環境でもアイコンとバージョン情報変更を反映した Windows 向けパッケージを生成できたので追記した。 electron-packager の --icon オプションに .ico ファイルを指定すると OS X でエラーになる問題だが Windows 環境で実行したらパッケージ化に成功。一方、Windows 環境だと OS X 版のパッケージ化がスキップされる。Linux 版は特別なオプションがないためか OS X と Windows のどちらでもパッケージ化できた。 この状況から察するに、アイコンの埋め込み処理などでプラットフォーム
最近Electronでエディタをつくっており、最初はReact.jsを使いながらゆるいFlux風の設計でつくっていたのを、cycle.jsを使いながら一部をMVI風の設計に置き換えてみた。400行程度の一画面のコードだったので3時間ぐらいで置き換えられて、前よりも責務が適切に分割されるようになったので、本体部分も次の機能追加時に置き換えようと思っている。 とりあえずプレビュー画面だけ置き換えた 置き換えたのは、編集中のファイルを別画面でプレビューとして表示する画面で、ただプレビューするだけの機能のほかに連続したスライドとして表示するプレゼンテーション機能もある。1つ前のブログ記事を見てもらうとわかりやすいと思うけれど、次の画像のようなやつ。ボタンをクリックしてモードを切り替えたりキーボードを使って移動したり、またエディタ側でファイルの内容が書き換わったりと、それっぽく言えば幾らか動きのある
これまで NW.js を使ってきたが同じ Chromium + Node 系のフレームワークとして最近は Electron のほうが勢いあるようなので試したくなった。使用感を把握するため、まずは開発環境を構築してみる。 更新履歴 2015/11/5 npm-scripts を babelify 7.2 (Babel 6.x) を採用した内容へ更新。また最新 watchify の Windows 対応について追記した。これらの詳細については babelify v7.2 を試すを参照のこと。 2015/10/19 npm-scripts を最新へ更新、Main プロセスのビルド説明に Browserify の --node オプション解説を追加。 設計方針 package.json と npm だけを使用 AltCSS は Stylus を採用 ユニット テスト対応 コード ドキュメント対応
以前Nodeで作っていたものをElectronで作り直していて、同じ問題にまたハマったので書いておく。 所謂、UTF-8-MAC問題である。もう遥か昔にNodeでハマった時の記事がある。 node.jsでUTF-8-MACを扱う - joker1007の日記 Macのファイルシステムはファイル名に対してNFDとかいう正規化を行っていて、ファイルシステムにアクセスする時に勝手に変換しやがる仕組みになっている。 このせいで、濁点が入ると急に死ぬとか、本当辛い問題が起きる。何の嫌がらせなんだと……。この世界は文字が8ビットで済む様な国ばっかじゃねえんだよ! とりあえずMac NFDでググると辛いのは俺だけじゃない気持ちになれる。 で、昔は上で貼ったブログに書いたような方法で解決していたのだが、正直、この解決策は2015年にもなって面倒過ぎるだろと思っていた。 (マジかよーってググって自分の記事が
mainWindow = new BrowserWindow({ "width": 800, "height": 600, "title-bar-style": "hidden-inset" }); のようにtitle-bar-styleにhidden-insetを指定すると という用にYosemite風のウィンドウが表示できる。 electron-jpにて流れてきたFacebookメッセンジャーの https://github.com/sindresorhus/caprine/ で気が付き、調べたら、 https://github.com/atom/electron/issues/761 でも挙がっていた機能がv0.32.3からサポートされた模様。 関連記事 Electronで自分のIPアドレスをLAN内のiPhoneに通知するには Raspberry Piの温度をgRPCを使ってEle
僕が1日に1回ぐらいの頻度で見ているページの中の1つに GitHub の Trending repositories のページがあります.このページには言語ごとに日毎・週毎・月毎の単位で GitHub 上で人気のリポジトリがランキング形式で表示されます. 話題になっているライブラリやソフトウェアの一次ソースとして便利なのですが,微妙にアクセスが悪い位置にあり,言語ごとにしか見られません.また,ランキングには常に人気な「常連」リポジトリが多々いるので,新しく話題になっているリポジトリはその中に埋もれがちになってしまいます. そこで,今回はこれらの問題を解決すべく,GitHub のトレンドクライアント Trendy を Electron ベースでつくりました. Trendy - Menubar App to Keep You in the Trend Trendy は GitHub のトレンド
Electron で Live Dwango Reader(旧 Live Door Reader)クライアントを作ってみるJavaScriptNode.jsReactElectron まだまだ機能は乏しいし、既読化も実装していません(テストでフィードがなくなっちゃうと痛いので後回し)が、ぼく自身、常用しているショートカットまでを実装できたので、ご紹介。 レポジトリはこちら。 使っている npm パッケージ React:コンポーネントとかレンダリングとか react-modal:元記事表示用のモーダルを作る時に mousetrap:キーボードショートカットで request:API と通信 lodash:なんやかんやでいつも使う できること フィード一覧の取得、表示 選択されたフィードを読み込んで、記事一覧を表示 元記事の表示 最低限のキーボードショートカット (まだ)できないこと 認証 そ
;; Load Ceramic and our app (ql:quickload '(:ceramic :lucerne-utweet)) ;; Ensure Ceramic is set up (ceramic:setup) ;; Start our app (lucerne:start utweet.views:app :port 8000) ;; Open a browser window to it (defvar window (ceramic:make-window :url "http://localhost:8000/")) (ceramic:show-window window)
初めてElectronを使ってTwitterクライアント https://github.com/k0kubun/Nocturn を作ったときによくわからず時間を吸われたことについて、これからElectronを使いはじめる人のために残しておく。 トラックパッドでスクロールすると画面の外までひっぱれてしまう マウスホイールでスクロールしてると気づかないのだが、トラックパッドで画面の適当なところを引っ張ると画面の外側が見えてしまい、普通のブラウザっぽくなる。Electronの検索性が低くてなかなか情報にたどり着けなかったが、ChrominumベースなのでChromeについてググったら直し方がわかった。 http://stackoverflow.com/questions/12046315/prevent-overscrolling-of-web-page html, body { width:
最強のTwitterクライアント戦争 なんか戦争をやってる人たちがいたので乱入することにした。 日記書いた / 最強のTwitterクライアント作り始めた - 9mのブログ http://t.co/ecq7nT40qp— 友緒利奈 (@9m) August 22, 2015 最強のTwitterクライアント戦争参戦したい— 戦車 (@r7kamura) August 22, 2015 戦争だ…! / “最強のTwitterクライアント戦争に参戦 - ✘╹◡╹✘” http://t.co/iJ3BAgPvFI— 友緒利奈 (@9m) August 22, 2015 YoruFukurou風のTwitterクライアント 最近デスクトップでLinuxを使い始めたんだけど、YoruFukurouみたいな感じで使えるTwitterクライアントがなくて困っていた。 なので、YoruFukurouを再実
最近は、Mithrilのお陰で、シングルページアプリケーションが大分作りやすくなりました。仕事でも使ってます。あ、ドキュメントの日本語訳もありますよ。本もあります! http://mithril-ja.js.org/ http://www.oreilly.co.jp/books/9784873117447/ 社内ツールを作るのにMithrilとElectronで作ってみたのですが、ふつうのデスクトップアプリを作るのにちょっと手間が多いので(これはMithrilを使わなくても)、ふつうを実現するためのフレームワークについて考えて実装してみました。特にまだ名前はありません。 Electronとは? Electronはウェブ的なスキルがあれば、それが簡単にデスクトップで動くようになるという仕組みです。元々はatom-shellと呼ばれていました。類似のものに、NW.js(元node-webkit
先月ぐらいから Markdown プレビューアプリ Shiba をつくっています. rhysd.hatenablog.com 指定した markdown ドキュメント(または特定のディレクトリ下のすべてのドキュメント)をプレビューするアプリです.特定のファイルを監視し,ファイルに変更があった際は自動で更新します.lint 付きです. 会社でぼちぼち使い始めていて,ちょっと資料見せて話したい時は Markdown で資料を書いて Shiba で別画面に出して説明したりしてます.Markdown のドキュメントのままだとフォントサイズが均一だったり画像見せられなくて不便なので,それが解消されました.また,資料に間違いがあっても手元のエディタでサッと修正すれば大体バレません.以前は PowerPoint で資料作ったりしてたのですが,無駄にスライド式に囚われてしまって資料全体が見渡しづらかったり
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
以前書いたnode-webkitアプリをTravis CI経由でGitHub Releaseにバイナリ登録する | Web Scratchの更新版的な記事です。 この記事はNW.jsとElectronで書いたアプリをGitHub Releaseで公開するまでの流れやツールの紹介です。 この記事の目標としては”Travis CIからGitHub Releaseへ自動的にパッケージしたアプリをアップロードする”を目標にしてます。 つまり、git tagを付けてgit pushすれば、自動的にアプリのバイナリができあがるという感じです。 GitHub Release向けのzip GitHub Releaseにアップロードできるファイルの種類は決まっているので、 NW.js/Electronアプリのパッケージング(.exeや.appなど)をしたものをzipとしてまとめる必要があります。 NW.js
フローチャートやシーケンス図をマークダウンで記述が可能なエディタSunny Place Editorを公開しました。JavaScriptHTML5MarkdownElectron フローチャートやシーケンス図をマークダウンで記述が可能なエディタ Sunny Place Editor(Early Access版:0.1.0 Honolulu)を公開しました。 片手間でやっているので、まだまだ 残念なところだらけ なのですが、使えなくもないのでEarly Access版(Honolulu)を公開することにしました。現在はMac版のみです。 Windows版はもう少し待ってください。ただ、何ヶ月も待たせはしない予定。 0.使い方 アプリダウンロードは以下からどうぞ。 Sunny Place Editor ダウンロードしたファイルに同梱のREADME_ja.mdをエディタから開いてみてください。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く