Electron, Reactでタブブラウザを作ってみた - Qiita
知人がesaのデスクトップクライアントを使わなくなった理由が、複数タブが開けなくて不便だったと聞いた。 確かに「Electronのアプリでも複数タブが使えるといいな」と思ったのでさくっと作ってみました。 作ったもの タブ周りの処理を中心に書いた。ブラウザというよりただのQiitaリーダ。 環境 MacOS X 10.10.4 Node.js v.4.1.1 electron v.0.34.3 準備 Electron環境の導入が必須。 30分で出来る、JavaScript (Electron) でデスクトップアプリを作って配布するまでがとても参考になります。 今回はReactをES6で書くのでbabel+webpack+gulpの設定を書いておきます。 gulpfile.js webpack.config.js npmで必要なパッケージをインストールし、gulpでビルド用のタスクを起動すると
React.js の 公式Tutorial を gulp を利用して簡単に実行できる環境を作って、ES6も試した - Qiita
React.js の 公式Tutorial を gulp を利用して簡単に実行できる環境を作って、ES6も試したJavaScriptReactbabel 前回 QiitaにReact.js をgulp で Babel + Browserify を利用して動作させるシンプルな環境を作ったで guip を利用した React.js を試す環境を作成しました。 次に React.js の 公式Tutorial をやってみようかと思ったのですが、公式Tutorial 中で Ajax を利用したサーバー環境を動作させる必要があり、ちょっと大変な感じがしたので、今回 React.js の 公式Tutorial を簡単に実行できる環境を gulp で作成しました。この環境を使えば、Ajax のサーバー環境まで含んでいるので、ダウンロードして、いくつかコマンドを実行するだけで、すぐに学習を始めることが可能
React・Reduxを使ったElectronアプリのboilerplateを作ってみました - DJ lemon-Sour's diary (prod.hisasann)
hisasann/electron-react-redux-boilerplate はじめに Node.js + Babel 6 + React + Redux + Webpack + Gulp + Electron Electronを母体として、React・Reduxを使ったフロントエンドのアーキテクチャについて試したことをメモメモ Webpackはbrowserifyとしか使っていません Electron 最近はやりのElectron（MacやWindowsのアプリ化）を使った場合の開発の仕方や、どうやるのが効率的かを少しずつメモしていきます 現時点では、Electronでビルドしたアプリのリリースやアップデートに関しては未調査になります Livereload まずは Livereload これがないとはじまりません 以下の記事を参考に、gulpのタスクを作ってみました ぼくのかんがえ
gulp ありの Web フロントエンド開発 - アカベコマイリ
gulp なしの Web フロントエンド開発 の追補編として gulp を利用するケースもまとめておく。元記事と同じプロジェクトと機能を gulp で実装した。記事の構成は「gulp なしの〜」を踏襲。各項の説明は package.json の scripts に代わって gulp タスクとしている。 設計方針 はじめに設計方針を決めておく。 AltJS から JavaScript へのコンパイルに対応する AltCSS から CSS へのコンパイルに対応する ファイル監視による AltJS/AltCSS の自動コンパイルに対応する ユニット テストに対応する コードド キュメント生成に対応する Windows 環境を考慮する 単体 gulpfile.js のみで実装する 方針 1 〜 6 までは「gulp なしの〜」と一緒。方針 7 は環境に関する設定を package.json と g
ReactでSPAを作るときのひな形を考えた - Qiita
問題提起 React.jsでSingle-Page-Applicationを作るときに、どんな構成にしたら捗るのか？を考えてみました。 ReactでSPAといったときにざっと問題として考えられそうなのは、 サーバーサイドを実装しなくても、クライアントだけで動作確認したい。 再利用できそうなコンポーネントと、そのページでしか使わないコンポーネントを分けたい。 コンポーネントは独立しているべき（グローバル依存しない） Reactコンポーネントだけじゃ足りないので、古いライブラリやCSSも扱いたい。 開発時のビルドが遅いのはイヤだ。（差分ビルド欲しい） 全体をテストするのは重たいから部分的にテストしたい。 設定ファイルがあちこちに散らばるのはイヤだ。 ES6のフィーチャーを使いたいが、下位互換性も担保しないと。 あたりでしょうか。 今回は、この辺の問題をある程度汎用的に解決する案を考えてみました
Babelを6系にアップデートしたらgulpでこける - Qiita
gulpの3.9.0からES6でタスクを記述できるようになったので使っていたけど、 Babelの6系にアップデートしたら動かなくなった。 ※ぼーっとしてたら最近いろいろアップデートされてていろいろ動かなくなっているので下の方に追記(2016/01/26) 現象 gulp: 3.9.0 babel-core: 6.0.14 以下のようにgulpコマンドでdefaultタスクを実行しようとしたところ importなんてしらない！と怒られる。。 [sawapi: ~/dev/git/sawapi/mw]$ gulp [17:11:48] Requiring external module babel-core/register /home/sawapi/dev/git/sawapi/mw/gulpfile.babel.js:3 import requireDir from 'require-di
ES6 In Your Gulp Tasks
Gulp recently implemented ES6 within gulpfiles and I'm kinda in love. All you have to do get started is: Upgrade your local and global Gulp installations to 3.9.0 (npm upgrade gulp && npm upgrade -g gulp) Add babel to package.json (npm install -D babel) Rename your gulpfile to "gulpfile.babel.js" You're done! Start writing ES6 in your Gulp configuration An example is below.
gulpでファイルを監視してocamlのインタプリタで走らせる - Qiita
おつかれさまです無職です。仕事はまだ決まっていません。暇にまかせてDDD本マラソン（エヴァンス本->ヴァヴァ本->エヴァンス本）しましたけど、ヴァヴァ本先に読んでたらエヴァンス本2周しなくてよかったのではという感じです。 というわけで有職期に手をつけられなかったのをどんどんやってます。次は「プログラミングの基礎」です。どうでもいい近況でした。 さて とにかくmlファイル編集の度に勝手に走ってほしい！ ocamlをインタプリタで実行すると、関数の返り値などの型情報が詳細に返ってきてこれって学習のために結構重要な要素が気がする！ですが、ocamlコマンドにファイルを直接渡すと、ただただ結果が返ってきます。 というか（おれが）それしか方法を知りません。 expectという対話型インターフェースと戦うコマンドがある
いい感じにコーディングを爆速化できるフロントエンド開発環境をリニューアル | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
最近は少しずつCTO業務に取りかかれるようになってきました。やっぱり夏は忙しくなりそうです。こんにちは、先生です。 以前「エンジニアがいい感じにフロントエンド開発を爆速化できる環境構築の手順」という記事でフロントエンドの開発環境を作ったものを紹介しましたが、やはり変化の流れが激しく、この環境も少しずつ変化していきました。 今日は新しくなった環境をご紹介します。このまま使ってもいいですし、一部を取り入れてもいいと思います。 おさらい「爆速化できる環境」とは？ フロントエンド開発（コーディング）を早く終えるための環境で、以下のような機能を持ったテンプレートです。 外部テンプレート（EJS） SASS HTMLバリデーション ユニットテスト スプライト画像&SCSS生成 スタイルガイド生成 JS/CSSの圧縮 ES5で書ける（ES5非対応ブラウザへの自動対応） LiveReload（ファイルを更
phiary
css の vendor prefix ですが, 今までは gulp-autoprefixer で自動付与してました. ただまぁ, CSS って後方互換対応や minify といった他にもやることがありまして... その辺一括でやってくれるのないかなぁと探してたところ pleeease とかいうとても便利な module があったので紹介します. pleeease とは？ pleeease とは, CSS を簡単に最適化できる Node.js アプリケーションです. pleeease を使うことで過去のブラウザもサポートしつつ, クリーンな CSS を作ることができます. やってくれること一覧 CSS の事前処理 ベンダープレフィックスの付与( Autoprefixer ) rem をピクセルに変換した値も指定. rem をサポートしていないブラウザでも安心♪ IE8 のための opaci
gulp-typescript で --target es6 から babel に通しつつ Incremental Buildする - Qiita
gulp-typescript で --target es6 から babel に通しつつ Incremental BuildするTypeScriptgulp ivogabe/gulp-typescript 元々typescriptなんてtscを生で叩けばいいじゃん派だったのだが、--target es6 で吐いたのをさらにbabelに通す必要があって、一旦書きだしたものをさらにbabelを通そうとすると、tmpなディレクトリが必要になるし、ファイルIOに負荷がかかるので、gulpのストリームの中で変換したかった。 やりたいこと node / electron で走らせたかったので browserify せずに src -> lib に書き出す。lib は es5 仕様。 ブラウザ用に書き出すときは必要に応じてbrowserifyする。debug中はElectronで走らせることでbrow
gulp なしの Web フロントエンド開発 - アカベコマイリ
Web フロントエンド開発において gulp は非常に便利だ。しかしあまりにも gulp に依存しすぎており、これなしで開発できるだろうか？という不安もある。というわけで gulp を利用せず package.json と npm だけで同等の機能を実現する方法を検討してみた。 2015/11/4 追記 babelify v7.2 を試すで babelyfy 7.2 ( とその中の Babel 6.x ) について調べ、npm-scripts の変更が必要なことを確認したので追記。また Windows 環境の動作検証をおこなったところ、最新の watchify なら -o オプションが通ることを確認できた。よって本記事の最後の課題が解決したことになる。 2015/9/23 追記 cpx と rimraf を試すの内容をファイル処理に反映して簡略化。 2015/9/15 修正 Stylus
GulpでSVGスプライトとアイコン一覧を一発生成 - Bit Journey's Tech Blog
出口 (@dex1t) です。 ベクター素材をSVGスプライト化し、インラインSVGとして利用する仕組みを作ったので紹介します。 アイコンフォントかSVGか アイコンフォントとSVGの違いは、ググるとたくさん出てくると思うのですが、 現在開発中のサービスはモダンブラウザのみ対象にしている SVGのまま利用すれば、フォント化する手間がなく管理もしやすい 多色にも対応できる という点から、今回はSVGを利用することにしました。 SVGを利用する方法もいくつかありますが、今回はSVGをスプライト化し、Inline SVGとしてHTMLに埋め込む形を取ることにしました。 デザイナーにSVGを追加更新してもらいたい いまはサービスをガンガン開発してる段階なので、素材の追加や変更も多く発生します。 ベクター素材は、デザイナーがイラレ上で作っているので、書き出しからSVGスプライト化まで一貫してお願いで
静的サイト開発でよく使うgulpfileスニペット（初心者向け） - Qiita
はじめに もはやgulpのコードなんて巷にあふれているかと思いますが、 個人的によく使うものをスニペットとしてまとめてみました。 現在私は中小規模の静的サイト、いわゆる普通のコーポレートサイトや動的サイトのモックなどを制作することが多く今回はそういったシンプルな案件で、よく使っているものになります。 対象となるかもしれない方 個人的なメモではありますが、まだまだ不慣れな方にも役立つかもと思い投稿しました。 私が独学でタスクランナーの勉強を始めた時に一番困ったのが、やりたいことに対してオーバースペックな情報が多く（最低限理解して）実際に動作させるまでに、かなり時間が掛かってしまったことでした。 これらのスニペットでとりあえず動作はするかとは思いますので、色々と試すきっかけにでもなれば幸いです。 gulpのインストールや基本的な使い方は、既に良い記事がたくさんありますのでここでは割愛します。
Electron の開発環境を gulp + babel で整える - Qiita
概要 Electronとは、JavaScriptでデスクトップアプリが作れるツールです。 詳しくは前回の記事「30分で出来る、JavaScript (Electron) でデスクトップアプリを作って配布するまで」をご覧くだい。 これまではElectronを使ったアプリ開発方法について書いてきました。 今回はコードをガリガリ書いていく前に、開発環境を整えたいと思います。 今回はElectronの開発を ES6 + React でしたいと思いました。 そのための開発環境を gulp + babel を使って整えていきます。 この辺りは他の記事をかなり参考にしました。既に同じようなことをやっている方がたくさんいらっしゃいますが、個人的なメモも兼ねてまとめます。 参考記事 * ぼくのかんがえたさいきょうのElectron 何がしたいか まずは何がしたいか、というところから話します。 JavaScr
gulp本の紹介 - Qiita
gulpとわたし gulpの前はGruntを使っていた。gulp歴1年ほどで過去に30プロジェクトくらいのscaffold用のgulpファイルを書いたり、Brunchからgulpへ移行したり。gulp-iconvなど幾つかのgulpプラグインをメンテしてる。 gulp本とは Bleeding Edge Press から出版されている Developing a gulp Edge を献本して頂いた。Bleeding Edge Press は複数人のチームでコラボレートして旬な技術のEBookを発行している出版社。O'Reilly Media でも取り扱いがある。 おそらく現時点では唯一のgulp本ではなかろうか。 gulp本が対象としている読者 nodeのインストールからプラグインの作成方法まで取り扱っていて、gulpを使ったことのないユーザーからgulpのヘビーユーザーまで全gulpユーザ
高品質な CSS を書く助けになるツール「Nozomi」を作った - I'm kubosho_
2015-06-29 高品質な CSS を書く助けになるツール「Nozomi」を作った CSS Gulp 登壇 リポジトリは kubosho/nozomi です。 JSオジサン「俺の話を聞け、5分だけでもいい」 #5でも、この「Nozomi」について話してきました。 その時のスライドが以下になります。JSオジサンなのに CSS の話をしてしまったのはご愛嬌です。 どんなツールか 書いた CSS をより良くするツールを集めて、npm の run-script (もしくは Visual Studio の拡張機能 Task Runner Explorer)で簡単に実行できるようにしたものです。 具体的には以下のツールが現時点(2015/6/29)で使えるようになっています。 Autoprefixer ベンダープレフィックスを自動的に追加 CSSComb プロパティの順番を設定ファイルをもとに並び
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - este/este: This repo is suspended.
babel6での変更点 Gulp・Webpackの設定 - Qiita
http://www.jstarted.com/article/000285.shtml
