プログラマの仕事は、人が行う作業を代わりに行なってくれるプログラムを書くことであり、それはつまるところ「作業を自動化」することだ。 長くプログラマをやってると忘れちゃうけど、 コマンドプロンプトを開いてコマンドを実行するのは、 プログラマ以外にとってはとてもハードルが高い。 作業を自動化するためのツールをGUI化するメリットについて考えてみた。 後半でNode.jsでのGUI化の方法についても紹介する。 GUI化するとメインの処理とは別で画面の作成や入力処理を実装する必要があり、 単純に開発時の作業が増えるのだけど、CLIと比較してそれだけのメリットがあるのか? まず思いつくことで、一番重要なのは GUI化することで作成したツールを プログラマ以外の人が抵抗なく使えるようになるので、 対象ユーザーがグンと増える、ということ。 自動化ツールを必要としているのはむしろプログラマ以外の人たちであ
最近気になっているHTML5関連の技術。 特に、「Electron」にずっと関心があったのですが…。 今まで手を付けていませんでした。 今日は、何となくElectronの事が特に気になりましたので…。 せっかくの機会なので、Electron入門をしてみようと思い立ちました。 そこで、私はElectron開発のための環境を揃えて、最初のプログラムを作成するところまでをやってみました。 実際やってみると、そこまで難しいということはありませんでしたよ。 大体30分くらいで動作するところまでいけましたね。 今回の記事は、Electronの開発環境の構築方法と、最初のプログラムを書いて動作させる方法をまとめます。 Electronとは? Electronというのは、GitHub社が開発したオープンソースのソフトウェアフレームワークです。 主な特徴としては、「Windows/Mac/Linuxのクロス
Electron&Vue.js製でクロスプラットフォームに対応し、Gistsとも同期可能なコード用スニペットアプリ「Code Notes」がリリースされています。詳細は以下から。 Code Notesはフランスのアウトドア用品メーカーDecathlonのエンジニアLaurent Thiebaultさんが2018年01月にリリースしたコード用スニペットアプリで、ElectronとVue.jsを利用し、クロスプラットフォームに対応しています。 Today is a special day… I have just published my first open-source app : Code Notes, the snippet manager for developers built with @electronjs & @vuejs : https://t.co/LdxwFlJp9X
米マイクロソフトの「Skype for Windows」や米スラックの「Slack」といった多くのアプリに深刻な脆弱性が見つかった。2018年1月18日に報告された「CVE-2018-1000006」だ。この脆弱性を悪用すると、ユーザーが特定のURLにアクセスするだけで、攻撃者が指定した任意のプログラムが実行されてしまう。 なぜ、多くのアプリに同時に脆弱性が発生したのか。理由は、これらのアプリが共通して「Electron」というフレームワークを利用していたためだ。Electronに脆弱性があり、Electronを利用している複数のアプリにも脆弱性が発生した。 Electronは、米ギットハブが開発したオープンソースのアプリ開発用フレームワーク。同社がテキストエディタ「Atom」を開発する過程で生まれたものだ。Electronを利用すると、HTMLやCSS、JavaScriptといったWeb
最近話題の軽量フレームワーク「Vue.js」と簡単にアプリ化できる「Electron」を組み合わせて、練習がてらマークダウンエディタをつくってみました。 Vue.js + marked.js でマークダウンエディタ本体を作る 公式サイトのサンプルをそのまま引用します。 アプリ名は「MarkDown Visual Editor」にします。 jp.vuejs.org せっかくなので webpack を使ってみる せっかく覚えたので積極的に使っていくスタイル。 以下、現時点でのディレクトリ構造です。 mdve/ ├ app/ │ ├ app.js │ └ index.html ├ package.json └ webpack.config.js app.jsに「Vue.js」の処理を書きます。 Vue.js インストール $ npm install vue --save marked.js イン
vue で構築された electron アプリケーションを作成するためのボイラープレートです(名前から分かるように)。 概要 このプロジェクトは vue を使用した electron アプリケーションの手動セットアップをなくすことを目標としています。electron-vue はスキャフォールディングのために vue-cli 、 vue-loader と webpack、 electron-packager または electron-builder、 vue-router や vuex などの最も使われているプラグインを使用します。 ドキュメントは こちらを確認してください。 このボイラープレートで見つけることができるもの... 単一の package.json セットアップによる基本的なプロジェクト構造 詳細なドキュメント vue-cli を使用したプロジェクトスキャフォールディング Vu
Electronプログラミング入門 — インストールからミニブラウザ構築まで 古川陽介 Electronとは、デスクトップクライアントを作るためのフレームワークです。クロスプラットフォームで動作することをサポートしているため、Electronで作ったアプリケーションはMac、Windows、Linuxの環境でも動作します。Atomと呼ばれる GitHub社製のエディタがあります。 ElectronはAtomを作る際にフレームワークとして作られました。以前はAtomShellと呼ばれていましたが、Electronとして名前を変更し、2016年にはversion 1.0がリリースされるまでに成長しました。 ElectronはJavaScript / HTML / CSSを使ってクライアントアプリケーションを作成します。中のアーキテクチャはChromiumとNode.jsで作られており、Web開
Windows/macOS/Linuxで実行できるデスクトップアプリをWeb技術で作ろう! Electronの概要から開発を始めて動かすところまでを解説する。 連載 INDEX 次回 → Electronとは Electronとは、Windows/macOS/Linuxで実行できるデスクトップアプリをHTML+CSS+JavaScriptといったWeb技術で開発できるフレームワークである。 「Web技術でできる」と書くと、制限が多いのではないか、さまざまなプラットフォームで実行するためには、ブラウザーハックのように面倒な記述が必要になるのではないかなど、ネガティブな印象を持つ人もいるだろうが、心配は不要だ。JavaScriptの実行エンジンはV8であるため、ES2015の新しい記法でJavaScriptを利用でき、さらにその上にNode.jsが組み込まれているため、npmで提供されている豊
Electron (エレクトロン)はウェブの技術でデスクトップアプリケーションを開発できる人気のフレームワーク。HTML5とCSS3とJavaScriptで開発できるため、ウェブ開発者であれば手軽に導入できます。それもクロスプラットフォームなので、ワンソースでWindowsとmacOS向けのソフトウェアが作れることが利点です。 GitHub社の「Atom」やMicrosoft社の「Visual Studio Code」もこのElectronを使って開発されているなど、大手企業が採用していることでも人気の高さがうかがえます。この入門サイトでは、開発環境のセットアップからサンプル・アプリケーションの作り方を解説します。 Electron入門編 最新版で学ぶElectron入門 - ウェブ技術でPCアプリを開発しよう Electronの導入手順を解説。ゼロからアプリケーションのビルドまでの手順を
Electron(エレクトロン)とは、ウェブ技術でデスクトップアプリケーションを作成できるテクノロジーです。HTMLとCSS、JavaScriptを使って開発し、WindowsとmacOSの両OSのアプリケーションを1つのコードから作ることができます。近年、注目度が高まっておりマイクロソフトやGitHubなど、有名企業も採用しています。 Electronエレクトロン製のアプリケーションはChromiumクロミウム(Chromeブラウザの元となるもの)とNode.jsノードジェイエスがランタイムとなっています。ウェブコンテンツをそのままアプリケーションとして動かしたり、デスクトップアプリケーションとしてブラウザだけで実現できない機能を組み込めるのが特徴です。 利用用途として、テキストエディターやユーティリティーソフト、デザインツールなどの小規模な使い方から、イントラネット内のクライアントツー
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,
この一か月分の学習成果を整理したリポジトリを作ったので、その成果についてまとめておく。 作ったサンプルプロジェクトだけを手軽に欲しければ、このリポジトリを clone してほしい。 taichi/js-boilerplatemaster ブランチには、ミニマムな JavaScript 開発環境がサンプルコード付きで入っているfrontend ブランチには、React/Redux/webpackなウェブアプリケーション用の開発環境が入っているデフォルトブランチにしてある electron ブランチには、frontend ブランチの内容に加えてElectronでアプリケーションを開発するための環境が入っているはじめに#最近の JavaScript について#僕は仕事として JavaScript を書いている訳ではないけども、この半年くらいの間にちょっとしたツールならいくつか作った。どちらも便利
Webの技術でデスクトップアプリが作れるフレームワークといえばElectronが有名ですが、より手軽に使えるのがNW.jsです。デザイナーでもちょっとしたデスクトップアプリならすぐに作れちゃいますよ。 NW.jsは、HTML、JavaScript、CSSといったWeb技術を使ってネイティブアプリを作るフレームワークです。一番単純なケースだと、手慣れたワークフローでWebアプリを作り、最後にジェネレーターですべてをコンパイルして、ブラウザー同様にWebアプリを表示できるネイティブアプリを作ります。このようなアプリケーションは「ハイブリッドアプリ」と呼ばれます。 ハイブリッドアプリがすばらしいのは、単になじみのある言語(HTML、JavaScript、CSS)で書けるというだけでなく、本質的に次のような普通のWebアプリよりも優れた点があるからです。 ブラウザーの種類とバージョンをコントロール
いまさら聞けないElectronとは Electronは、クロスプラットフォーム向けのデスクトップアプリを開発できる、オープンソースソフトウェア(OSS)の開発プラットフォームです。HTML、CSS、JavaScriptといったWebフロントエンド技術を使って開発できるという特徴があり、Node.jsとChroniumで動作する、WindowsやMac(OS X)、Linuxなどのデスクトップ向けアプリを開発できます。 Electronは米GitHubが開発しており、「Atom」「Slack」「Visual Studio Code」などメジャーなデスクトップアプリで使われています。 2016年5月11日、Electronのメジャーバージョン「1.0」が公開されました。また、Electron製アプリの検証やデバッグなどを行うことができる「Devtron」のメジャーバージョン「1.0」、テステ
そのうちもう少しきちんと書きますが、とりあえず時間がないので結論だけ書くと、タイトルが全てでElectronでアプリを書く場合は気合いと根性でXSSを発生させないようにしなければならない。 これまでWebアプリケーション上でXSSが存在したとしても、影響範囲はそのWebアプリケーションの中に留まるので、Webアプリケーションの提供側がそれを許容するのであればXSSの存在に目をつむることもできた。しかし、ElectronアプリでDOM-based XSSが一か所でも発生すると、(おそらく)確実に任意コード実行へとつながり、利用者のPCの(そのユーザー権限での)全機能が攻撃者によって利用できる。 そのため、Electronでアプリケーションを作成する開発者は気合いと根性でXSSを完全につぶさなければならない。 nodeIntegration:falseやContent-Security-Pol
Electronで動作する動画ファイル及びJPG in Zip向けのファイルブラウザを作ってみました。 構成としてはElectron+React+Reduxで、gulpfile以外はbabelを使って書いてます。 そこそこ今風な感じを目指して、一部flowtypeとかも取り入れてますが、割と適当な感じで使ってます。 実は以前Node.jsで同じもの作ってたんだけど、せっかくちゃんとデスクトップアプリとして作れるようになったしReactにも慣れたのでElectronと今の技術で作り直してみたのがこれです。名前も同じだったりする。 https://github.com/joker1007/blackalbum https://github.com/joker1007/blackalbum/releases/download/v0.2.0/BlackAlbum-darwin-x64-0.2.0.
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く