Pugと仲良くする方法 - Qiita
この記事は J2complexed Advent Calendar 2016 の14日目の記事です。 みなさんはパグと仲良くできていますか？ パグはかわいいですね。なによりもマークアップの効率が良くなります！ Pugは以前までJadeと名乗っていましたが、Pugの方がいいですね。いいセンスをしてます。 詳しくは公式を見ていただいたほうが、いいと思います！ Getting Started - Pug Pugの簡単な紹介 PugはJST (JavaScript Templates)って言われてるJavaScriptで動くテンプレートエンジンです。 Expressでも動かすことができます。（動かしたことはありませんが） Express でのテンプレート・エンジンの使用 Githubに載っている例を見てみると、書き方がわかると思います。 doctype html html(lang="en") h
古くなったgulpのdevDependenciesを一気に更新する方法
1年前に作ったgulpのタスクを久々に触ったら、package.jsonにあるdevDependenciesがかなり古くなっていました。そこで、これらを一気にアップデートする方法を探していたら、やっぱりありました。 npm-check-updates というツールが。 このツールを使うと、package.jsonにあるdevDependenciesのバージョンと最新のものを比較して見せてくれます。そして、コマンドを叩くだけで、古くなったすべてのdevDependenciesをアップデートしてくれます。 やり方は簡単で、まずはnpm-check-updatesをインストール： % npm install npm-check-updates -g npm-check-updatesを走らせる： % ncu すると以下のように古くなっているものを教えてくれます： % ncu gulp-newer
開発しやすい環境の作り方~Web系~ - Qiita
はじめに 何か記述等にミスやこうした方がいいとのことがあればコメントで教えてくださると幸いです。 目的 開発を円滑するために行ったら良いと思われることについての紹介 概要 タスクランナーのGulpを用いて開発の効率化を図る。 内容は、SassやPugで書いた内容を変換し、ファイルの内容が変更された場合は自動的にブラウザのリロードを行う流れを作成する。 Windows 8.1 npm 2.15.1 node 4.4.3 gulp 3.9.1 環境構築 フォルダ構成 まず初めに、フォルダ構成を作成します。今回の場合私はポートフォリオサイト作ろうと思っていたので以下のようにしました。 今回はこのフォルダ構成で説明していきます。 root/ ├ js/ | └ index.js ├ css/ | └ style.css ├ img/ | └ hoge.png ├ sass/ | └ style.s
npmからkikとその他諸々が消されたまとめ
npmとは、node.jsにおけるパッケージシステムのことだ。npmを使えば、他人の書いたnode.jsベースのプログラムとライブラリの入手と利用がとても簡単になる。 そのnpm界隈が混乱している。発端は以下のURLだ。 I’ve Just Liberated My Modules — Medium Azer Koçuluはkikという名前のnpmパッケージを公開していた。このkikというソフトウェアの中身についてはここでは関係がない。 さて、それとは別に、kik.comというスマフォ用のチャットアプリを出しているKik Interactive社がいて、kikという名前のパッケージをnpmで出したいので、名前を明け渡すように要求した。 Azerはこの要求を拒否した。すると、Kik Interactive社はnpmの管理者に片っ端からメールを投げまくり、そのうちの一人が反応して、Azerの意
GoogleがAWS Lambda対抗「Google Cloud Functions」を公開。Node.jsによるイベントベースのJavaScript環境。サーバレスアーキテクチャ普及へはずみ
Amazonクラウド上での、イベントドリブンかつ非同期なJavaScriptの実行環境として「AWS Lambda」が発表されたのは、2014年11月に行われたイベント「AWS re:Invent 2014」においてでした。 AWS Lambdaはマネージドサービスとして提供されるため、利用者はサーバのスケーラビリティや運用管理などを気にする必要がなく、何らかのトリガーに基づく処理をクラウドで容易に実行するシステムを構築できるようになりました。 AWS Labmdaの登場は、「サーバレスアーキテクチャ」と呼ばれる、サーバの保有や運用を考える必要のない新しいクラウド活用のトレンドを生み出そうとしています。 Google Cloud Functionsの登場 そのAWS Lambdaに対抗するような新機能がGoogle Cloud Platfromに追加されたことが明らかになりました。「Goo
ノンプログラマでもコピペでOK！JavaScriptを使ってDroneを飛ばそう | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、エンジニアののびすけです。 さて、今回はDrone（ドローン）の話です。注目されてますよね〜。 以前、株式会社フォークの石射さんにParrot DroneをNode.jsで制御するやり方を教わりました。その後、自分で購入して少しずつ触っています。 そして、初めてDroneを飛ばしたときに感動したので、その勢いで社内勉強会も実施しました。 参加者はディレクターやデザイナーといったエンジニア以外の職種の人のほうが多かったのですが、Droneを問題なくプログラム制御することができました。 今回は、社内勉強会でやった内容をもとに、 ノンプログラマな読者のみなさんもDroneをプログラムで制御できるようになる7つのステップを紹介してみたいと思います。 ▼ テクノロジーをおもしろがれ！
npm とか bower とか一体何なんだよ！Javascript 界隈の文脈を理解しよう - Qiita
背景 Javascript で Web アプリを作ろうとすると、よくわからないことだらけで超混乱します。 npm と bower の違いは？ npm はサーバーサイド用、bower はクライアントサイド用らしいよ えっ、でもなんで bower のインストールに npm が必要なの？ サーバーサイドは Rails で書きたいから npm 要らないと思うんだけど・・・ ていうかサーバーサイドJSとか node.js って何？ よく見る browserify って何？ こういった疑問が沸き上がるのは、各ツールが生まれた文脈がよくわかっていないからです。いろいろ調べてやっとちょっとわかってきたのでメモします。間違いがあったらご指摘ください。 「CommonJS」誕生 - Javascript は汎用プログラミング言語へ その昔、Javascript 大好きおじさんは言いました。 Javascrip
クローラー／スクレイピング本がざくざく - プログラマでありたい
2015年8月末に、クローラー／スクレイピング本が2冊同時に発売です。Python版メインのものとJavaScript版メインのものです。なかなか市場のニーズ突いてきていますね。 実践 Webスクレイピング&クローリング-オープンデータ時代の収集・整形テクニック 作者: nezuq,東京スクラッパー(協力)出版社/メーカー: マイナビ発売日: 2015/08/28メディア: 単行本（ソフトカバー）この商品を含むブログを見るJS+Node.jsによるWebクローラー/ネットエージェント開発テクニック 作者: クジラ飛行机出版社/メーカー: ソシム発売日: 2015/08/31メディア: 単行本この商品を含むブログを見る 実践 Webスクレイピング&クローリング-オープンデータ時代の収集・整形テクニック 実践 Webスクレイピング&クローリング-オープンデータ時代の収集・整形テクニックは、Py
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
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の使い方をサンプルアプリを実装しながら説明していきます. お題 このエントリのお題と
HTML5でクロスプラットフォームなデスクトップアプリを開発できる「Electron」とは
Electron（旧Atom-Shell）とは、Web開発者がHTML5とNode.jsでMac、Windows、Linuxのデスクトップアプリを作れるクロスプラットフォーム実行環境です。Electronはオープンソースで無料で使える上に、MITライセンスであるため、商用利用も可能です。開発元はGitHub社です。 最近はJavaScript、HTML5の進化によって、多機能なWebアプリケーションが増えてきました。それに伴い、モバイルでは、WebViewやApache Cordovaなどを使ったハイブリッドアプリも注目されています。Electronはその流れの中から生まれた新しい実行環境です。 ElectronはChromiumブラウザを内蔵しているのが一番の特徴です。Chromiumブラウザは、Google製のChromeブラウザのオープンソース版にあたります。ウェブ開発者がChrom
Kobito for Windows をリリース + 技術的な補足, package.json の公開 - Qiita Blog
Kobito for Windows をリリース + 技術的な補足, package.json の公開 Kobito for Windows開発の @mizchi です。 開発開始から約半年、ソロ作業の期間も長かったのですが、ようやくリリースできました。 Kobito for Windows – ソフトウェア開発者のためのMarkdownによる情報記録・共有ソフト というわけで、今日はKobito for Windowsの開発コンセプトとElectronやReactを採用した理由について書いていこうと思います。Rails界隈ではGemfileを公開する文化があるようですが、今回はnode.js / npmのそれであるpackage.jsonを公開します。 Kobito on Electronの開発コンセプトWeb技術でKobitoを実装してWin/Macでソースを一本化既存のKobitoの
webpack で始めるイマドキのフロントエンド開発 - Qiita
webpack とは webpack は WebApp に必要なリソースの依存関係を解決し、アセット（配布物）を生成するビルドツール（要するにコンパイラ）です。JavaScript だけでなく、CoffeeScript や TypeScript、CSS 系、画像ファイルなどを扱うことができます。 WebApp のビルドツールは Grunt や Gulp が有名です。これらは基本的に、ビルド手順をタスクという形で自ら定義する必要があり、フロントエンド開発に馴染みのない開発者にとっては敷居が高いものでした（少なくとも、自分はそうでした）。 webpack を使えば、Grunt も Gulp も必要ありません！覚えるべきことはほとんどありません。（必要なら）簡単な設定ファイルを書いて webpack コマンドを実行するだけです。 以下では基本的な使い方を見ていきます。 ※もちろん Grunt/G
週刊「しょうもないWebアプリをつくる」創刊号 – アクセスカウンター | CreativeStyle
突然ですが、新しい企画を始めます。 創刊のご挨拶 週刊「しょうもないWebアプリをつくる」は、僕@kadoppe が（ほぼ）毎週「しょうもないWebアプリ」をつくって公開するという、比較的どうでもいい企画になります。 Webアプリケーション開発の世界には、新しいワクワクするような技術やツールが、毎日たくさん登場しています。そんな技術に少しでもキャッチアップするために、何かしらのWebアプリを開発するきっかけがほしいと思ったので、なんとなく始めてみました。 「しょうもないWebアプリ」の定義はあいまいですが、 あまり役に立たない 結構すぐにつくれる みたいなものをイメージしています。また、 ソースコードを公開する だれでもDeployできるよう「Deploy to Heroku」ボタンを用意する（後述） ことはちゃんとやっていこうと思います。 もしかしたら、たまに役に立つWebアプリをつくる
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://blog.mismithportfolio.com/web/20160326pugbegin
Gulp Sips: New Command Line Interface
GitHub - RSATom/WebChimera.js: [ABANDONED] libvlc binding for Electron![GitHub - RSATom/WebChimera.js: [ABANDONED] libvlc binding for Electron](https://cdn-ak-scissors.b.st-hatena.com/image/square/bc06ba832364881768a4edf3a6f1b4910be8414b/height=288;version=1;width=512/https%3A%2F%2Fopengraph.githubassets.com%2Fb0166c525403e90dd61b1abaf11e7326eb895e19a3fe37d33fda7ead788b1e30%2FRSATom%2FWebChimera.js)
イマドキのコーダー環境構築2016
gitbook-plugin-japanese-support
Build cross-platform desktop apps with JavaScript, HTML, and CSS | Electron