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

meetup app tokyo での紹介記事です

Typetalkデスクトップアプリ 先日、弊社チャットサービスTypetalkのデスクトップアプリをリリースしました。おそらくTypetalk.appのパッケージを覗いてElectronの痕跡を見つけ出した方もいらっしゃると思いますが、その通りElectronをベースに実装しています。 ElectronはHTML、JavaScript、CSSなどWebの技術を使用してデスクトップアプリを開発できます。GitHub社のAtomエディタをはじめとして、今では非常に多くのアプリがElectronベースで公開されており、実装方法についても既に多くの記事が書かれています。 ただし、正式にアプリを公開する場合には、コードサイニングなどを行うなど、考慮が必要なポイントがいくつかあります。そこで本記事では正式にElectronアプリをWindows/Mac向けにリリースするにあたって必要だった3つのことを

もともと nw.js で作っていたのですが、久々に Electron を見てみたらトレイ周りがかっちょよくなっていたので、書きなおしてみました（昔ぼくが見た時はトレイを表示させるとベコベコ感が気に入らなくて、nw.js だったのですが勘違したのかも？）。 レポジトリはこちら 使った npm パッケージ { "dependencies": { "lodash": "^3.10.1", "moment": "^2.10.6", "q": "^1.4.1", "react": "^0.13.3", "request": "^2.61.0" }, "devDependencies": { "electron-packager": "^5.0.2", "electron-prebuilt": "^0.31.0", "gulp": "^3.9.0", "gulp-babel": "^5.2.1", "

Electron で Live Dwango Reader（旧 Live Door Reader）クライアントを作ってみるJavaScriptNode.jsReactElectron まだまだ機能は乏しいし、既読化も実装していません（テストでフィードがなくなっちゃうと痛いので後回し）が、ぼく自身、常用しているショートカットまでを実装できたので、ご紹介。 レポジトリはこちら。 使っている npm パッケージ React：コンポーネントとかレンダリングとか react-modal：元記事表示用のモーダルを作る時に mousetrap：キーボードショートカットで request：API と通信 lodash：なんやかんやでいつも使う できること フィード一覧の取得、表示 選択されたフィードを読み込んで、記事一覧を表示 元記事の表示 最低限のキーボードショートカット （まだ）できないこと 認証 そ

Who Electronとは Electronの特徴 Electronの基礎 Electronの内部構造 Electronの問題 まとめ

Electron(旧:Atom-Shell)勉強会 #1 LT したものです。ちょっと加筆。

Electronからtwitter APIを叩こうとして少しハマったのでメモ. ElectronにおけるOAuthのログイン処理関連の話なので, 別にTwitterだけに限った話ではないはず。 ハマった内容 遭遇した問題としては, ElectronからTwitterのAPIを叩こうとしたのだけど, oauth_verifierが上手く取得できない, という内容だ. 最初, oauthのcallbackに 'file://' + __dirname + 'redirect.html'のようにファイルスキーマのURLを指定してみたのだけど, 下記のようにエラーが表示されてしまった. Not allowed to load local resource: file:///(中略)/redirect.html?oauth_token=...&oauth_verifier=... ログから, oau

Electronを使って見栄えを整えてみる ElectronはJavaScriptでデスクトップアプリケーションが作れるツールです。 前回「30分で出来る、JavaScript (Electron) でデスクトップアプリを作って配布するまで」では簡単なアプリを作って配布するところまでやりました。 あとはいつも通りの JS + HTML + CSS でガリガリ書いていけばいいのですが、まずは見た目から入ろうということで、もう少しアプリっぽい見栄えにしてみましょう。 ちなみに、Macではいろいろ動作を確認しましたが、Windowsは知りません。 大体同じように動くはずですが、もしダメだったらWindows版の記述を教えて頂けると助かります。 基本設定は browser-window APIで browser-windowはアプリのウィンドウを表示するためのAPIです。 例えば、以下は単なるin

概要 Electronとは、JavaScriptでデスクトップアプリケーションが作成できるツールです。 MITライセンスなので無料で使える上に商用利用も可能です。 最近ではAtomやSlackのアプリもElectronで作られたとのこと。 今かなりノっているツールの1つです。 以下、簡単な特徴。 Node.js + HTML + CSS という、WEBの技術でアプリが作れる。 Chromiumブラウザ(Chromeのオープンソース版)を内蔵しているので、普段の書き味と変わらない これ1つで Windows, Mac, Linux 向けのアプリが作れる 超簡単 ここではElectronのインストールからアプリの配布までを紹介します。 以下、「Hello World」を出すだけのアプリですが、ゼロからはじめて30分でここまで出来ます。 インストール まずは必要なものをインストール。 nodeの

kkosuge 最強のTwitterクライアント作り始めた - 9mのブログ kkosuge/slack-like-twitter-client r7kamura 最強のTwitterクライアント戦争に参戦 - ✘╹◡╹✘ r7kamura/retro-twitter-client k0kubun ElectronでYoruFukurou風のTwitterクライアントを作った - k0kubun's blog k0kubun/Nocturn airtoxin 最高のツイッタークライアントを求めて airtoxin/twitter-client rhysd rhysd/Stream khrtz ツイッタークライアント「light」を作り始めた - インターネットの人になりたい khrtz/light-twitter-client bokuweb 最強のTwitterクライアント戦争にこっそり

はじめに Electronをご存知でしょうか. Electron(旧称: Atom-Shell)は, Atomエディタを開発するために生まれたクロスプラットフォームデスクトップアプリケーションエンジンです. Node.js + Chromiumをランタイムとしており, Atomだけでなく, Slackや先日のBuildで発表されて話題となったVisualStudio CodeもElectronで実装されています. いわゆるWeb系の技術, Node.js + HTML + CSSでアプリケーションを作成できるのが特徴です. 類似した思想のフレームワークとして, node-webkit(NW.js)もありますが, アプリケーションのエントリポイントの考え方等が異なります. このエントリでは, Electronの使い方をサンプルアプリを実装しながら説明していきます. お題 このエントリのお題と

最近は、Mithrilのお陰で、シングルページアプリケーションが大分作りやすくなりました。仕事でも使ってます。あ、ドキュメントの日本語訳もありますよ。本もあります！ http://mithril-ja.js.org/ http://www.oreilly.co.jp/books/9784873117447/ 社内ツールを作るのにMithrilとElectronで作ってみたのですが、ふつうのデスクトップアプリを作るのにちょっと手間が多いので(これはMithrilを使わなくても)、ふつうを実現するためのフレームワークについて考えて実装してみました。特にまだ名前はありません。 Electronとは？ Electronはウェブ的なスキルがあれば、それが簡単にデスクトップで動くようになるという仕組みです。元々はatom-shellと呼ばれていました。類似のものに、NW.js(元node-webkit

前回の記事「Electron入門」では、ElectronというHTML/JavaScriptのフレームワークを使って、デスクトップアプリケーションを作成するまでの手順を紹介しました。 今回は応用サンプルとしてテキストエディターの作り方を解説します。テキストエディターを作成することで、Node.jsのファイルの読み込み/書き込みや、ダイアログモジュールなどアプリケーション開発で必須となるElectronの技術を習得できます。30分程度で試せる内容になってますので、ぜひご覧ください。 ※本記事はElectron v18を使用し、macOS 12.3 MontereyおよびWindows 10にて動作検証を行いました。 完成デモの紹介 今回のサンプルのテキストエディターのデモをご覧ください。このオリジナルのテキストエディターではテキストの編集ができ、ファイルの読み書きができます。このテキストエデ

~ Case of the Kobito, Markdown Editor for YAPC Hackathon! @mizchi / Koutaro Chikuba, Increments Inc About Node.js / Frontend Engineer Single Page Application Specialist Kobito for Windows Developper Increments Inc (Providing qiita.com / Qiita:Team) Sorry, my English is not so good. YAPC::Asia 2015 Hackathon | Peatix の発表資料 ここで喋ることは一昨日急に決まったので(YAPC回るし)スライド作る時間なかった。ゆるして。 発表中に @benogle 氏に何度か質問しながら進行しま