Vue.js + ElectronでTwitterクライアントを作った - razokulover publog
Vue.jsとElectronでシンプルなTwitterクライアントを作った。 vue-twitter-client きっかけとしては一言で言うとフロントエンド周りの勉強。 2017年1~3月の振り返りにも書いた通り。 自分はモダンなフロントエンドの開発に疎かったので重い腰を上げてそろそろやるかという気持ちになって3月中頃くらいからはじめた。 Vue.jsについては2,3週間前くらいから触りはじめている。 Vue.jsはちゃんとしたSPAからフォームにちょいと味付けみたいな使い方もできたり小回りがきく。 個人的にはReactでの開発よりやりたいことが直感的に書ける気がしてるので使いやすいという印象。 とりあえず最初はTODOアプリやAPIを叩く小さなフィードを作って、次にNuxt.jsでSSRできるミニサイトを作ったりで大体使い方は覚えてきたというステータス。 ライブラリでいうとvuex,
Essential Electron : Electronの簡潔・平易な概要 | POSTD
Electronとは？ Electronは JavaScript、HTML、CSS を使ってデスクトップアプリケーションを作ることができる ライブラリ です。作ったアプリケーションはMac、Windows、Linuxで動かせます。 次は： なぜ重要？ 定義： JavaScript、HTML、CSS はWeb用の言語で、Webサイトの基本的な構成要素です。Chromeなどのブラウザは、コードをふだん目にするグラフィックに変えて表示します。 Electronはライブラリです Electronはコードですが、再利用でき、自分で書き起こす必要がありません。ユーザはその上にプロジェクトを構成します。 参考資料 Apps built on Electron Electron API Demos （Electronで何ができるかをみてください） なぜ重要？ 一般に、デスクトップアプリケーションは各オペレ
【Electron + react + flowtype】TweetDeckライクなpixivクライアントPixivDeckをつくった - Qiita
electron + react + flowtype + styled-components + webpackでpixivのデスクトップアプリを書いた。 前半にアプリについて、後半に技術的なことを書くので、どんな技術を使ったかのみ知りたい人は前半飛ばしてください。 GitHub - akameco/PixivDeck: TweetDeck like pixiv client for desktop ダウンロードページ スクリーンショット TweetDeckライクなpixivイラストビューア スクロール(IntersectionObserverで画像の遅延読み込み) カラムの移動(react-sortable-pane bokuwebさんに感謝) タグをクリックで新しいカラムの追加 Lightbox ドロワー その他機能 検索+◯◯users入りを自動表示 履歴機能 コンテキストメニュー
Electronでwebfont変換ツールを作ってみた話 - Qiita
Electronさわってみました アイコンフォントを作り直す案件があり、位置調整やサイズ感の確認のたびにコマンド叩くのも、（リモートの）デザイナーさんとやりとりするのも大変だなということで、デザイナーさん向けの検証用のツールを作りました。 ゴール: GUIでSVGからwebfontに変換できるようにする github: svg2webfont に置いてます。 ツールとしては、ブラウザ上で使えるIcoMoon や fontello に近いものです。 もちろんこれで不便なければこちらを使えば良いのですが、 unicodeとアイコン名が対応しているjsonファイルが欲しい web上のサービスに依存するのが怖い（手元でやりたい） 一度作ってしまえばどのプロジェクトでも使いまわせそう Electronで何か作ってみたかった（重要） ということで、お試しでつくってみました。 Electronを使う利点
本を書くためのアウトラインエディタを作ってる - mizchi's blog
少し前からアウトラインエディタを作ってる。 こんなの (画面は開発中のものです) ファイルツリー 複数シート同時編集 ファイルツリーUIというのをスクラッチで初めて作ってみたんだけど、「当然こう動いて欲しいよな」というヒューリスティックな挙動をたくさん作るハメになってて学びがある。 なぜ作ったか 技術書を書いて Kindle Direct Publishing で販売しようと思って、Macで売れてるアウトラインエディタを一通り試したんだけど、惜しい物が多くて、個人的にしっくり馴染むものがなかった。なので、技術書を書く前に、自分が本を書くために必要なツールを作るところから始めることにした。 作家・藤井太洋に聞く 「小説を書くためのツール、Scrivener」 - DOTPLACE を読んで、その辺のアプリに対する感覚を自分でも意識して作ってる。Scrivener は wysysig なんで自
https://www.prakard.com/viewtopic.php?f=1004&t=1884764
VersatileTerminal emulation programs with the versatility to communicate with a wide variety of systems and devices. HyperACCESSSave Time with Scripting Automation & CustomizationAdvanced terminal emulationMany file transfer optionsAutomate tasks with our powerful scripting APIRecord simple scripts with the HyperACCESS Script RecorderCustomizable interface SecureSecurely and reliably communicate w
JasperというGitHub Issue Readerを作りました - maru source
先にまとめを書いておきます GitHubの大量のIssue/PRを効率的に閲覧できるJasperというソフトウェアを作りました 閲覧したいIssueのStream(RSSフィードみたいなもの)を好きな条件で作成することができます 条件はメンションされた、作成した、特定のリポジトリなど、かなり柔軟に設定できます Mac/Windowsの両方に対応しており、$12で販売中です無料で使えます 30日間のフリートライアル版もあります 背景 ソフトウェアエンジニアとして仕事や個人で活動をしていると、GitHubやGitHub Enterprise(GHE)を使うことが多いと思います。 僕も仕事ではGHEを使っており、個人ではOSSを作っているのでプライベートな活動でもGitHubをよく使っています。 そんなGitHubですが、一つ大きな不満があります。 それはIssueやPull Request(P
Electron を試す 7 - Electron v1.0 対応
ねんがんの Electron 1.0 をてにいれたぞ！というわけで akabekobeko/examples-electron のプロジェクトを対応させてみた。その過程で得られた知見を記録しておく。 2016/5/16 補足 v1.0 からわずか数日で v1.1 がリリースされた。この記事に関係する変更点は Devtron の読み込み改善ぐらいである。examples-electron のプロジェクトは既に v1.1 を参照するように修正済み。 モジュール参照の変更 従来の Electron ではアプリケーション情報となる app やシェル操作に必要な shell などは直に参照していた。 import App from 'app'; console.log( App.getName() ); これらは非推奨モジュールとなっており v1.0 でまとめて削除された。詳しくは Remove d
Electronハマりメモ[随時更新] - Qiita
最初に ElectronでTwitterクライアントを開発しているときにハマった所をメモしていきます。 と、メモしていたらElectronがついにVer 1に到達しました。 早速アップデートしたので その際に遭遇したエラーもメモしていきます。 追記：Ver1に到達したあと、日替わりでElectron周りのバージョンアップが日替わりリリース状態です。 npm outdated すると古いモジュールを洗い出してくれるので便利です。 環境 Electron 0.37.8 => 1.0.2 Typescript 1.8.0 なので、本文中のコードは全てTypescriptです。 本文 BrowserWindowのクッキーを消したい var loginWindow:Electron.BrowserWindow = new BrowserWindow({width: 800, height: 600}
![Electronハマりメモ[随時更新] - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/7604fc89dad3eacbc028a720520e01013ef363d2/backend=imagemagick;height=288;version=1;width=512/https%3A%2F%2Fcdn.qiita.com%2Fassets%2Fqiita-fb-fe28c64039d925349e620ba55091e078.png)
マルチプラットフォームで動く「Electron」は本当に使える技術なのか？｜CodeIQ MAGAZINE
2018年4月25日をもちまして、 『CodeIQ』のプログラミング腕試しサービス、年収確約スカウトサービスは、 ITエンジニアのための年収確約スカウトサービス『moffers by CodeIQ』https://moffers.jp/ へ一本化いたしました。 これまで多くのITエンジニアの方に『CodeIQ』をご利用いただきまして、 改めて心より深く御礼申し上げます。 また、エンジニアのためのWebマガジン「CodeIQ MAGAZINE」は、 リクナビNEXTジャーナル( https://next.rikunabi.com/journal/ )に一部の記事の移行を予定しております。 今後は『moffers by CodeIQ』にて、 ITエンジニアの皆様のより良い転職をサポートするために、より一層努めてまいりますので、 引き続きご愛顧のほど何卒よろしくお願い申し上げます。 また、Cod
Electronで設定ファイルを保存する - Qiita
Electronを使ってアプリを開発を行っている時にPC上に設定ファイルなどを配置して読み込めるようにしたいケースがあると思います。 一般的にはappからOSごとの差分をなくすためのgetPathを利用してアプリの設定フォルダを取得し、fsを利用して設定ファイルを保存することを考えることが多いと思います。 そこで今回はelectron-json-storageを紹介したいと思います。 electron-json-storageとは electron-json-storageはapp.getPath('userData')で取得できるPathに対してelectron-json-storageで指定するJSONファイルを生成、キーバリューによるデータを保存、取得が簡単にできるようにしたものになります。 使い方 インストール コマンドラインでプロジェクトフォルダ内に移動し、下記のコマンドを実行す
OS X用Electronアプリで，closeボタン処理と終了処理を区別する - Qiita
注意 この記事はElectron v0.31.0 仕様です． 2016/5/25現在，Electronのバージョンが1.1.3になり以下のコードは動きません． OS X用Electronアプリで，closeボタン処理と終了処理を区別する（Electron v1.1）を参考にしてください． はじめに Electronとは，Atomエディタを開発するために生まれたCross Platform Desktop Application Engineです. Node.js + HTML + CSSでアプリケーションを作成でき，同じコードでWindows，Linux，OS X用のアプリケーションを生成することができます．Electronを使ったアプリケーションの作り方は，すでに様々なサイトで紹介されていますのでそちらを参考にしてください． 本エントリーでは，Electronアプリの終了処理について紹介
働クリッカーという JS を学べるゲームを作りました。
どんなゲームなの？ 働クリッカーは、身も蓋もない言い方をすればクッキークリッカーがつまんなくなったやつです。 画面左側の『働く』ボタンを連打してお金をためて、資格やプログラミングスキルを買って一働きの単価を上げ、アフィリエイトや土地、株を買って不労所得(働くを押さなくても入ってくる金)を増やしていくというゲームなのですが、このゲームの肝はそこではなく、どれだけ高速にゲームクリア実績や全実績解除を達成できるか、というプログラミングによる攻略が本質的な所です。 俺が、俺達が TAS さんだ Tool Asisted Speedrun(or Superplay) という、ツールによる補助を受けたスーパープレイの動画は、多分見たことがあると思います。あれはエミュレーターそのものにそういう機能があったりするんですが、このゲーム、働クリッカーの場合は、ゲームそのものにツール機能が組み込まれています。と
ChromiumからElectronを眺める - Qiita
はじめに Electronいいわー ChromiumとかNode.jsの知見もあるといいらしい *1 でもChromiumとかようわからんぜ この際勉強しちまえばいいじゃん！ 本エントリはElectronを構成する要素の一つ、Chromiumのアーキテクチャについて初心者が入門してみたものです。 Chromiumドキュメントを読む Chromiumの仕組みを優しく解説した本やエントリはざっと探した限りはありません。 そういうのが必要な人がふれる領域の話ではないのでしょう。 必然的に英語で書かれたドキュメントを読むことになります。 Chromiumプロジェクトはリンクの樹海のようになっていて迷いそうです。 Developer向けドキュメントは以下のリンクを辿って行くとみつかります。 For Developers > Design Documents - Engineering design
東京Node学園祭 2015 で Electron について話した - はやくプログラムになりたい
画像は公式サイトから 発表について 11/7 にあった 東京 Node 学園祭 2015 で Electron の発表した． 周りすごい人達ばかりで，明らかに今年の6月ぐらいに初めた自分よりも，JavaScript も Node.js もフロントエンドも書ける人達に囲まれての発表だったので，正直どうしようかなと思ったけれど，自分が Electron で Web フロントエンド&Node.js に入門することになった経緯と，その過程で得た知見を共有する感じにしようとなってこんな感じの資料になった． 色々詰め込もうとして25分に対して42ページになったものの，一応発表練習しておいたのもあって，時間通り喋れてよかった．ただ，スライド内で紹介した僕が書いたアプリのコードはまだかなり汚くて設計もいけてないと思うので，awesome-electron にある他のアプリのほうが参考になるかもしれない…
RailsエンジニアがElectronを触ってみた - Qiita
最近流行り（？）の、HTML + JavaScriptでクロスプラットフォームなデスクトップアプリを作成できるフレームワーク、 Electron を触ってみた。 Electron Electronとは GitHubが開発しているオープンソース 旧名Atom-Shell リッチなAPIを持ったランタイムを提供、ユーザーはHTML, JavaScriptといった普段使っているWeb技術でデスクトップアプリを作成可能 Mac、Windows、Linux対応 以下の2つの要素がベースとなっている Chromiumブラウザ Chromeブラウザのオープンソース版 io.js ランタイム Electron uses web pages as its GUI, so you could also see it as a minimal Chromium browser, controlled by Ja
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の使い方をサンプルアプリを実装しながら説明していきます. お題 このエントリのお題と
Real World Electron Development - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? ~ 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 n
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Electron で Markdownプレゼン作成ツールを作って公開するまで - Qiita
[PDF] Electronの倒し方