WebPackを使ってJavaScriptを効率的に書くチュートリアル【入門編】 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
先日Developers Summitデビューしました。こんにちは、先生です。 前回公開した記事「エンジニアがいい感じにフロントエンド開発を爆速化できる環境構築の手順」の反響が大きかったので、そこで使われているWebPackというModule Bundlerをもう少し深く掘り下げていきたいと思います。 WebPackとは WebPackは静的なファイルの依存関係を解決しつつ結合したり分割したりするツールです。非常に多機能でカスタマイズの幅が広いのが特徴です。 http://webpack.github.io/docs/ 個人的な経緯ですが、require.js -> Browserifyを経てWebPackに落ち着いたところです。 WebPackはnpmを使ってインストールします。 npm install webpack -g ※ npmが使えない方はまずNode.jsをインストールしてく
Gulp.js入門 - コーディングを10倍速くする環境を作る方法まとめ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
普通に使う分には全く困らないほどの数のプラグインがGulpにはあります。 Githubでのstar数からも明らかなように、GoogleのWenStarterKitでもGulpが採用されるなど、注目度はますます高くなっています。 Gruntとの比較 Gruntと比較してのメリット・デメリットは以下のようになります。 メリット Gruntより設定ファイルが記述しやすい StreamAPIを利用することでファイルを毎回書き出すGruntより高速でエコ デメリット 記述がよりNodeに近くなるため、複雑なことは敷居がやや高め プラグイン開発のためのドキュメントが少ない 今日のゴール Gulp.jsを使ってコーディング作業を10倍速くする！ そんな環境を作りたいと思います。 1. Node.jsをインストール まずはNode.jsをインストールしましょう。 Node.js http://nodejs
週刊「しょうもないWebアプリをつくる」創刊号 – アクセスカウンター | CreativeStyle
突然ですが、新しい企画を始めます。 創刊のご挨拶 週刊「しょうもないWebアプリをつくる」は、僕@kadoppe が（ほぼ）毎週「しょうもないWebアプリ」をつくって公開するという、比較的どうでもいい企画になります。 Webアプリケーション開発の世界には、新しいワクワクするような技術やツールが、毎日たくさん登場しています。そんな技術に少しでもキャッチアップするために、何かしらのWebアプリを開発するきっかけがほしいと思ったので、なんとなく始めてみました。 「しょうもないWebアプリ」の定義はあいまいですが、 あまり役に立たない 結構すぐにつくれる みたいなものをイメージしています。また、 ソースコードを公開する だれでもDeployできるよう「Deploy to Heroku」ボタンを用意する（後述） ことはちゃんとやっていこうと思います。 もしかしたら、たまに役に立つWebアプリをつくる
UIテストの自動化！Node.jsとSeleniumでWebアプリのUIテスト環境構築 – ICS MEDIA
Webアプリケーションを開発する際、みなさんはどのようにテストを行っていますか？ Webアプリケーションは、ユーザーごとに異なるブラウザを使用しており、ユーザー操作も必要となるため、手作業でテストをされている方も多いと思います。また、機能改修やバグフィクス後に、リグレッションテスト（改修により既存機能への影響がないかを確認する回帰テスト）が必要となりますが、時間が取れずしっかりとテストができていない方も多いのではないでしょうか。 本記事では、これらのテストを自動化することのできる「Selenium Webdriver」（セレニウム ウェブドライバー）について紹介します。 入力フォームのバリデーション機能をチェックするデモ 簡単な入力フォームのバリデーション機能をチェックするデモを動画で紹介しましょう。入力値に対して期待するエラー文言が表示されているかのテストを実施しています。Seleniu
リアルタイムWebを極める 記事一覧 | gihyo.jp
第3回node.jsを利用した開発とWebサイトへのデプロイ 芝村達郎 2013-01-31
Node.jsのStream APIで大量プッシュ通知を高速化するテクニック
連載目次 プッシュ通知を秒間1万4000ほど送るには 前回の「大量データ処理時に知っておきたいAmazonDyamoDB活用テクニック4選」では、Pusna－RSのデータ永続化に使っているDynamoDBの活用テクニックについて解説しました。今回は、そのDynamoDBからAPNs／GCMへのデータ送信までを高速化させた方法を紹介します。 Pusna-RSの配信機能とは 連載第1回「プッシュ通知の基礎知識＆秒間1万を超えるプッシュ通知基盤のアーキテクチャと仕組みとは」の際に概要をお伝えしましたが、配信機能はPusna-RSの中で実際にプッシュ通知を行うための機能で、以下の【3】に当たる箇所です。 Pusna-RSではこの一連の流れを最適化させるためにNode.jsのStream APIを活用しています。今回は、このStream APIの活用について紹介していきます。 あらためてNode.j
大学でフロントエンドエンジニアは評価されない | Kimamass News
大学の課題で milkcocoa を使って、マウスカーソル共有協力プレイ Web サイトを制作しました。 Endless Doors そして、そこで発表したプレゼン資料がこちらになります。 その授業でちょっと思うことがあったので、書いていこうと思います。 まず、その講義について。 基本的にその講義は HTML をほとんど書いたことがない人が半数以上受講します。 WWW とは何かの解説から始まり、Unix コマンドについて、HTML について、そして PHP, MySQL と続いていきます。CSS, JavaScript に軽く触れたりするものの、授業の大半が PHP, MySQL となっていて、Web がサーバーサイドとデータベースで成り立っているということを認識させる授業です。 ところで私は生粋のフロントエンドエンジニアです。デザイナーでもなければ、バックエンドもやっとここ最近
オープンソースのTrelloクローン Libreboard | Ryuzee.com
Trelloは、https://www.trello.com で提供されているオンラインのタスク管理サービスで、利用している人も多いと思います。僕自身も以前書いたSCRUM BOOT CAMP THE BOOKの執筆の進捗管理や、Regional Scrum Gathering Tokyoのタスク管理などで使っていました。 このTrelloのオープンソース版のクローンが登場したので紹介します。 LibreboardLibreboardは、こちらで開発が進められているオープンソースソフトウェアでMITライセンスで提供されています。2014年の頭に開発が始まり、最初の開発ペースは早くありませんでしたが、昨年末くらいから急激に開発速度が上がってきているようです。 技術的には、NodejsのフレームワークであるMeteor(メテオ)を利用しています。 Meteorの詳細については以下を参照すると良
第5回 Node.jsアプリケーションをHerokuで動かす | gihyo.jp
はじめに 前回までで、Node.jsによる簡単なWebアプリケーションが一通り完成しました。今回はこの構築したアプリケーションを、クラウドベースのアプリケーションホスティングサービスであるHeroku上で、動かしてみたいと思います。HerokuはNode.js以外にもJava, Ruby, Pythonなどのアプリケーションをデプロイすることができます。 Herokuのセットアップ まず、Herokuのサイトから、「Sign up」ボタンよりアカウントを登録してください。 図1 Herokuのサイト さらに、heroku toolbeltというHeroku用コマンドラインツールや開発およびデプロイに使うアプリケーション一式が提供されています。こちらを各々の環境に合わせてインストールします。 インストールが終わったら、コマンドラインからherokuに対する認証処理を行っておきましょう。 $
最近のWEBサービス/アプリ作ってみた記事まとめ - undefined
最近のものをまとめています。 ３２歳無職が３ヵ月でSNSサービスを作ってみた ３２歳無職が３ヵ月でSNSサービスを作ってみた - 無職の流儀 つくったもの FLGMAP FLGMAPは行った場所を記録するWebサービス どんなもの? 「ワンタッチで行った場所を記録できるサービスがあれば良いなぁ」と思った経験を思い出して開発に着手しました。 使用技術 サーバ さくらVPS ２Gプラン 1580円 CentOS 言語等 PHP、JavaScript、jQuery、MySQL(mroonga) メール Postfix フレームワーク 自作MVC アクセス数 約350UU PVが約2000PV(14/12/23) 性の悩みを解決する為のWebサービスをつくってみました 趣味でWebサービスをつくってみました - 今日学んだこと つくったもの Love Points どんなもの? 異性含めた友達達と
第1回 クラウドとリアルタイムWeb | gihyo.jp
近年、HTML5やJavaScriptを活用したWebアプリケーションが増えるのと同時に、今まではネイティブなアプリケーションが常識であったデスクトップアプリケーションにもHTML5の波がやってきました。 具体的な例としてはWindows 8で追加されたWindowsストア アプリでは、HTML5とJavaScriptを利用したアプリケーションの開発がサポートされています。 HTML5で開発できる領域は広がっていますが、切っても切れない関係なのがサーバとの通信です。そして、その通信を見ていくと、最近ではユーザが能動的に情報を取りに行くスタイルではなく、FacebookやTwitterに見られるようなサービス提供側から情報がリアルタイムで配信されるスタイルが増えつつあります。 図1 Facebookメッセンジャーの入力中表示 これらのリアルタイム通信はサーバとの接続を常時行っておく必要がある
LAMPに代わる構成として注目のMEANスタックの基礎知識とインストール、ひな型作成
LAMPに代わる構成として注目のMEANスタックの基礎知識とインストール、ひな型作成：MEANスタックで始めるWebアプリ開発入門（1）（1/3 ページ） MEANスタックを用いたWebアプリの開発方法について紹介していく連載。初回はMEANスタックの特徴と構成要素MongoDB、Express、AngularJS、Node.jsの概要、インストールの仕方とひな型の作成方法を解説。 連載目次 今でもよく使用されていますが、以前からWebアプリ開発ではLAMP環境がよく使用されていました。LAMPとは、一般的なWebアプリを開発するのに人気の高いオープンソースソフトウェアを組み合わせたもので、以下を用いたシステムのことです。それぞれの頭文字を取って「LAMP」と呼ばれています（参考）。 OS：Linux Webサーバー：Apache HTTP Server データベース：MySQL プログラ
第3回 Express.jsを使ったWebアプリケーションを構築 | gihyo.jp
はじめに 前回までは、Node.jsについての基礎的な説明からnpmによるパッケージ管理まで、紹介してきました。今回から、いよいよNode.jsを使ったWebアプリケーションを実装していきます。前々回に単純なHTTPサーバの実装についてコードとともに紹介しました。あれをみるとわかるとおり、nodeが提供するHTTPサーバの機能はプロトコルに沿ったローレベルなものになっています。例えば、リクエストが来たら、そのURLパスに従った処理を実行するために、リクエストURIの解析から実装していかなくてはなりません。そういったことが簡単に定義して処理を書けるWebアプリケーションフレームワークがnodeにも存在します。本連載では、その代表格のExpressを使って実装してみたいと思います。 Expressのインストール Express（Express.jsと表記されることが多い）は、非常に手軽にnod
第12回 ［最終回］Meteorが指し示すWebアプリ開発の未来 | gihyo.jp
さて、これまで10回以上に渡って続けさせていただいたこの「Meteor完全解説」ですが、今回が最終回となります。「完全解説」を銘打っておきながら、説明できていない機能を残していることが大変心苦しいのですが、どうかご容赦ください。 ただ前回までの連載により、Meteorのエッセンスとも言える部分についてはほとんど説明を終えたといっても良いかと思います。これまでの記事を振り返ってみても、やはりMeteorは非常に先進的なフレームワークです。Webアプリ開発にかつてないような生産性をもたらすだけでなく、「リアルタイムWeb」の時代をぐっと手元に引き寄せるような手応えを感じます。 今回は最終回ということで、Meteorのさまざまな機能を振り返りつつ、Meteorという先進的なフレームワークが指し示す、Webアプリケーションの未来を探ってみたいと思います。 Nodeを利用した「フルスタックフレー
Meteor
Why Meteor.js?Stop fighting with frameworks and ship real products to production. Front-end Agnostic Choose your preferred front-end framework like React, VueJS, Blaze, Svelte, or Solid. Apps for Any Device Create apps for Mobile with React Native or Cordova, or Desktop with Electron with the same code base.
「リアルタイムWEBを実現する技術」の触りを知っておく為のまとめ - Qiita
概要 socket.ioについて周辺技術の触りをまとめておく これだけ知ってれば後から調べやすいはず 覚えること Socket.io Websocket ノンブロッキングI/O node.js Socket.ioって何？ Socket.ioのページを参照 「Socket.IOは、リアルタイム双方向イベントベースの通信を可能にします。」 「これは、信頼性とスピードに均等に焦点を当て、すべてのプラットフォーム、ブラウザやデバイス上で動作します。」 解りにくいので簡単に書くと 幾つかの通信方式とサーバー、ブラウザ、デバイス間の通信を抽象化してくれるライブラリでいいはず Socket.ioが対応している通信方式 Socket.IO protocol xhr-polling xhr-multipart htmlfile websocket flashsocket jsonp-polling 抽象化し
RubyとNode.jsでIFTTTみたいなものをつくる - Qiita
今、個人でmupsというIFTTTみたいなサービスを作っています。 IFTTTは便利なんだけど、あまり国内のサービスには対応しておらず、その点が個人的には不満だった。 その課題を解決すべく、RubyとNode.jsでIFTTTみたいなものをつくってみることにした。 あと、ここ最近ずっとAndroidアプリ開発ばかりだったので、最近のWeb周辺技術を勉強したかったという目的もあった（Rubyをちゃんと触るのは初めてだった）。 システム構成 ↑は理想図です。実際のところアプリなんてできてないし、サーバもさくらVPS一台のみ。 mups-web Nginx + Unicorn + Sinatraで動く普通のRuby製Webアプリケーション。 最初はRailsを使おうかと思ったけど、今までWeb開発はPHPばかりでRuby自体ちゃんと触るのは初めてだったし、それに加えて学習コストが高いと噂のRai
WebRTCについての話を社内勉強会でしてきた - from scratch
ずっと興味はあったし、追っていたんですが手は出せていなかったWebRTCについてやっと学ぶことが出来ました。 ハイパフォーマンス ブラウザネットワーキング ―ネットワークアプリケーションのためのパフォーマンス最適化 作者: Ilya Grigorik,和田祐一郎,株式会社プログラミングシステム社出版社/メーカー: オライリージャパン発売日: 2014/05/16メディア: 大型本この商品を含むブログ (2件) を見る ハイパフォーマンスブラウザネットワーキングという本(以下、HPBN)がありまして、会社の中で輪読会していました。みんなで一つの章を担当しながら話すというスタイルでやっていました。 そこで僕が紹介したWebRTCの話です。 基本的にWebRTCの中でやっていることを深く説明した資料になっています。 HPBNの資料だけで分からなかったところはWebRTCミートアップの資料や先人た
Express - Node.js web application framework
Express 5.0 beta documentation is now available. The beta API documentation is a work in progress. For information on what’s in the release, see the Express release history. Web Applications Express is a minimal and flexible Node.js web application framework that provides a robust set of features for web and mobile applications. APIs With a myriad of HTTP utility methods and middleware at your dis
MEAN(MongoDB, Express, AngularJS, Node.js)スタックが優れている理由 - Mozilla Open Web Day in Tokyoを終えて - albatrosary's blog
MEANとは、LAMP(Linux, Apache, MySQL, PHP)に変わる技術としてじわじわと注目されはじめているアーキテクチャです。このアーキテクチャMEAN(MongoDB, Express, AngularJS, Node.js)は、シンプルでかつ強力なアーキテクチャで、現在のJavaを利用したアプリケーション開発とは一線を画すところです。HTML5開発にとってJavaの役割が殆どなくなるというのも注目すべき点だと考えます。MEANで一般的に言われる注目すべき事項は次のところです： JavaScriptフルスタックである データモデルとしてクライアントからデータベースに至までJSON そして、この記事を書こうと思ったきっかけですが、2014/10/5(日) Mozilla Open Web Day in Tokyo | Mozilla Japan でのMEAN解説展示で、様
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
