Server Side Renderingについて知るべきこと。Server Side Renderingとは何か？ それによって何が改善されるのか？（前編） ng-japan 2017
Server Side Renderingについて知るべきこと。Server Side Renderingとは何か？ それによって何が改善されるのか？（前編） ng-japan 2017 JavaScriptフレームワークとして知られるAngularのイベント「ng-japan 2017」がAngular Japan User Group主催で6月17日に都内で開催されました。 Angularは基本的にWebブラウザで実行されるJavaScriptアプリケーションのフレームワークですが、一方でサーバサイドでAngularが備えるHTML構成機能を実現する、いわゆるServer Side Rendering機能の開発も「Angular Universal」として進んでいます。 そのため、Server Side Renderingに興味を持つAngularデベロッパーも増えてきました。 ng-
更新が必要なnpmパッケージを可視化する - Hatena Developer Blog
こんにちは。ウェブアプリケーションエンジニアのid:masawadaです。普段は、はてなブログチームで開発を行なっています。 今回は、日々の開発で生まれた困りごとを解消するために作ったyarn-outdated-formatterというツールを紹介します。 経緯 以前id:amagitakayosiが「フロントエンドPodcastはじめました - Hatena Developer Blog」にて書いたとおり、はてなには現在「フロントエンドエンジニア」という肩書きのメンバーはいません。はてなブログチームでも全員がバックエンド(Perl)とフロントエンド(JavaScript)両方のコードを書いており、どちらかというとバックエンドがメインのためクライアントサイドは片手間になりがちという問題がありました。 そこで、チーム内でFWG(フロントエンド・ワーキング・グループ)という会を組織しました。F
Node.js + Express で HTTPS サーバー を 作る
Node.js + Express の環境で HTTPS 通信できるようにする方法を整理しました。 あまり複雑な要素は含めずできるだけシンプルなサンプルコードを掲載します。 HTTPS サーバー 構築 Windows の IIS で自己署名入り証明書 をエクスポートすると PKCS#12 の証明書 (拡張子 pfx のファイル) になっているので、 今回は pfx を指定してHTTPSサーバーを構築してみます。 IIS で 自己署名入り証明書 を作成、エクスポートする方法は以下の「自己署名証明書の作成」を参照してください。 var express = require("express"); var fs = require("fs"); var https = require("https"); var app = express(); var options = { pfx: fs.re
ElasticsearchとNode.jsで全文検索エンジンを作ろう（後編）
「全文検索エンジンってどれがいい？→ElasticsearchとNode.jsで作るといい感じ」に続き、サイト内検索などに使える全文検索エンジンをElasticsearchとNode.jsで作ります。 検索エンジンの構築 データがインデックス付けされると、検索エンジンを実装する準備が整います。Elasticsearchはクエリを定義するために、Query DSLというJSONに基づいた直感的で完全な検索クエリ構造を提供しています。利用できる検索クエリの種類はたくさんありますが、本記事ではより一般的なものについて触れます。Query DSLの完全なマニュアルはここにあります。 例として説明したすべてのソースコードへのリンクを提供しています。環境を設定し、テストデータをインデックスして、リポジトリをコピーすれば、ローカルマシンのコマンドラインからnode filename.jsとするだけでサン
サーバサイドレンダリング、してますか?
サーバサイドレンダリング、してますか? ~ 憧れのIsomorphic JavaScript ~ Meguro.es #6 2016/10/13 http://meguroes.connpass.com/event/39081/
npmに代わるNodeパッケージマネージャーyarn - 文系プログラマー
yarn https://yarnpkg.com/ FacebookとExponent, Google, Tildeとの共同チームによって生まれた新しいパッケージマネージャー Yarn pulls packages from registry.yarnpkg.com, which allows them to run experiments with the Yarn client. This is a proxy that pulls packages from the official npm registry, much like npmjs.cf. http://blog.npmjs.org/post/151660845210/hello-yarn 新しいレジストリも作るのかと一瞬思ったけど、どうやらそうではなく、npmレジストリを利用するための新しいクライアントのようだ。よかった
node.jsによるデータ送受信
OpenBlocks IoT BX1とインテルEdison Kitでnode.jsを使用してリアルタイムデータ送受信を行うためにMQTTを使用します。 MQTTを使用することでデータ送信側がpublisher（パブリッシャ）、データ受信側がsubscriber（サブスクライバ）となり、データはTopic（トピック）として送受信されます。 publisherはデータをTopicを指定して送信します。subscriberは自信が受信したいデータのTopicを予めsubscribe（サブスクライブ）しておくことで、送信されたタイミングでリアルタイムで受信できます。 データ本体のPayloadのフォーマットはMQTTでは規定されていませんが、データ量を最適化するためにはバイナリでデータ送信が出来るMessagePackを使用します。MessagePackは様々な言語・デバイスで動作できるようにここ
TypeScript 2.0+NodeJSツールを開発するときのプロジェクト構成- Islands in the byte stream
npm dependenciesを更新してGitHub Compare Viewのリンク付きでPRするツールを定期実行する - Islands in the byte stream このci-npm-updateはTypeScript 2.0 (beta) で書いたので、TypeScript+NodeJSツールを開発するときのプロジェクト構成の一例としてざっと解説しておきます。 最近はRailsなどのウェブアプリのJSもnpmで管理するようになったため、そういう条件でNodeJSツールを開発することも増えてくることでしょう。 Table of Contents Table of Contents エディタ tsconfig.json TSLint Task Runner Visual Studio Code Tasks shrinkwrap 所感 See Also エディタ Visual
Jadeテンプレートをクライアントサイドとサーバサイドで共有する
Jadeテンプレートをクライアントサイドとサーバサイドで共有する今ちょうど、Node を使ったあるプロジェクトで、Express 上でテンプレートエンジンとして Jade を使ってWebサービスを作っているんだけど、サーバサイドとクライアントサイドでテンプレートを共有させる必要がでてきた。 サーバサイドとクライアントサイドでテンプレートの共有というと、ここ のような requires.js を使って動的に生成したものを共有したりなど、いろいろ素敵な方法がある。 こんなそんな風に既にあるものを使って共有してみてもいいんだけど、Jade のプリコンパイル機能で Javascript コードとして生成したものを static な .js ファイルとして配信する方法で十分なので、それでやってみた。 共有するテンプレート共有するテンプレートのサンプルとしてはこんな感じ。 mixin person(n
いまアツいJavaScript！ゼロから始めるNode.js入門〜5分で環境構築編〜
こんにちは、エンジニアなのにダンクができないのびすけです。今月から記事を書かせていただきます。 さてみなさん「Node.js」って知っていますか？ 僕も最近Node.jsの勉強を始めたので「Node.jsを使ったことがないけど使ってみたい」と思っている人に向けて、Node.jsの入門的な内容を紹介したいと思います。 ▼2020年最新版はこちら！ Node.jsとは 一言で言うとアツいJavaScriptです。 通常、JavaScriptはユーザーのブラウザで動作するプログラミング言語ですが、Node.jsはサーバー側で動作するJavaScriptであり、Web業界ではかなり注目されています。大量の処理に対応するために、ノンブロッキングI/Oというモデルを採用しています。 例えば、データベースから大量の情報を取得してWebページ上に表示をする処理をおこなう場合、通常はデータベースへアクセスし
AsyncとAwait : コールバック地獄を避けるための最新のやり方、そしてその未来 | POSTD
(2016/7/7、いただいたフィードバックを元に記事を修正いたしました。) JavaScript、特にNode.jsといえば、 コールバック地獄 がよく連想されます ^(1) 。たくさんの非同期I/Oを扱うコードを書いたことがある方には、おそらく以下のようなパターンはおなじみでしょう。 export default function getLikes () { getUsers((err, users) => { if (err) return fn(err); filterUsersWithFriends((err, usersWithFriends) => { if (err) return fn(err); getUsersLikes(usersWithFriends, (err, likes) => { if (err) return fn (err); fn(null, lik
Node.jsでWebサイトの更新チェックを自動化する - ほんじゃらねっと
特定のWebサイトを定期的にチェックして特定のキーワードが含まれていたら 通知してくれる仕組みを1つ覚えておくと色々重宝する。 例えば 会社に社員用Webサイトがあるなら、 （そしてそのサイトがRSSもメール通知も提供してないなら） そこに「重要」とか「人事」とかのキーワードを含む記事が投稿された時に 通知を受け取れるようにしておけば、 いちいちサイトをチェックしにいかなくても 逃さず確認できる。 また、Webスクレイピングする方法を覚えておけば、 通知を受け取る以外にも、 画面キャプチャの撮影や画像やテキストの収集を 自動化したり、作成したWebシステムの画面テストを行う、 等の応用もしやすくなる。 今回は Node.js + Grunt + cheerio-httpcli を使用して 手軽にWebサイトのデータをチェックする方法を紹介する。 今週の「世界の果てまでイッテＱ！」で「QTu
gulpで手軽にEJSテンプレートをHTMLに変換 - Qiita
gulpを使ってEJSテンプレートをHTMLに書き出す方法を試してみたので、その導入手順などをまとめてみました。 EJSについて HTMLを生成するテンプレートエンジンのひとつ Node.js環境で動作し、テンプレートタグ中の処理はJavaScriptで記述できる HTMLにテンプレートタグを埋め込む形なので学習コストが低い → PHPみたいな事をJavaScriptでやるイメージ Webサーバ上で動的ページとして出力する使い方を想定しているっぽい けど、ローカル環境で静的ページとしての出力も可能（gulp/Gruntなどと連携すると簡単そう） よく比較に挙げられているJadeの場合はRubyのテンプレートエンジンHamlに影響を受けているらしく、テンプレートタグ以外のHTMLの記述も通常とは異なります（いわゆる短縮文法）。 Jadeの方がコードの記述量は抑えられて便利そうですが、学習コス
npmの使い方の勉強メモ1(node.js=v0.11.16, npm=2.3.0) - msakamoto-sfのはてなブログ
2015-03-22 npmの使い方の勉強メモ1(node.js=v0.11.16, npm=2.3.0) Node.js npm npmの使い方の勉強メモ。 勉強環境： $ node --version v0.11.16 $ npm --version 2.3.0 参考： https://docs.npmjs.com/ https://docs.npmjs.com/misc/faq npm help install npm help root npm help bin npm help 5 folders npm help 7 config パッケージインストールの考え方： ローカルインストール カレントディレクトリの node_modules 以下にパッケージをインストール。 開発プロジェクト固有で依存するパッケージをインストールしたい時に使いやすそう。 グローバルインストール システ
node.jsから非公開のGoogle Spreadsheetを操作するnpm | クロジカ
ホーム / ハック / node.jsから非公開のGoogle Spreadsheetを操作するnpm
RailsのAsset PipelineとPrecompileをNode.jsのみで処理できるgulp-sprocketsを作った - yo_waka's blog
RailsのAsset PipelineとPrecompileをNode.jsのみで処理できるgulp-sprocketsを作った 仕事ではRailsアプリを書いていて、JSやCSSなどのフロントエンドはRailsのAsset Pipelineの仕組みに則ってビルドしてる。 普通にRailsアプリ作ってると普段Sprocketsについて特に意識しないと思う。 Sprocketsはそこが凄くて、あまり考えなくてもドキュメント通りにやってれば、必要なAssetを結合できて、リリース時は変更がなければブラウザキャッシュから、変更があれば 新しく読み込まれるみたいなことをやってくれる。 なんだけど、もうそろそろ新しい機能はES2015で書きたいよねという人が増えてきた。 とはいえSprocketsは独自のディレクティブ以外は使えなくて、SprocketsWayから外れると途端に脆い。 ES2015
Node.js＋Socket.IOで作る、通信対戦ができるHTML5ゲームシステムの作り方
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog はじめまして、Yahoo!きっず開発担当です。 昨年Yahoo!きっずにてブラウザオンラインゲーム「おしゃべりリバーシ」をリリースしました。 ※おしゃべりリバーシは2015年10月をもってサービス終了しました。ご利用いただきまして、ありがとうございました。 このゲームは、通信対戦部分の通信プロトコルWebSocketを採用し、サーバミドルウェアにNode.js＋Socket.IOを採用しました。この結果、ブラウザゲームでありながらマルチデバイスでの対戦を実現しました。 今回は、Node.js＋Socket.IOによるWebSocketサーバのシステム構築方法について考慮すべきポイントを、「おしゃべりリバーシ」の実例を紹介しながら説
API設計での開発でのジレンマと、フロントエンジニアのサーバー側を実装について - Qiita
はじめに API設計での開発を友人の @otukutun としていたときの話です。 予め言っておきますが、 今回の話は割と主観な部分が多いです http://qiita.com/otukutun ←岩手県立大学出身 (このアドベントカレンダー続くと良いですね笑) API設計時のジレンマ API設計にしておくと * HTMLのコーディングデータのサーバーへの組み込みが発生しない * フロント側とサーバー側の作業範囲が明確に分類されるためタスク割り振りが行いやすい * 自分の実装範囲が明確になるので遠隔作業がしやすい などのメリットがあると個人的には感じています。 (ただ、フロント側の実装量は一気に跳ね上がるイメージもあります苦笑) 今回は、私がフロント開発(Angular.js)、@otukutunがサーバー側開発(Rails)という分担になり、API設計で開発をすることにしました。 接続部
Grunt: The JavaScript Task Runner
Why use a task runner?In one word: automation. The less work you have to do when performing repetitive tasks like minification, compilation, unit testing, linting, etc, the easier your job becomes. After you've configured it through a Gruntfile, a task runner can do most of that mundane work for you—and your team—with basically zero effort. Why use Grunt?The Grunt ecosystem is huge and it's growin
Moment.js | Parse, validate, manipulate, and display dates in javascript.
Moment.js 2.30.1 Parse, validate, manipulate, and display dates and times in JavaScript. Install npm install moment --save # npm yarn add moment # Yarn Install-Package Moment.js # NuGet spm install moment --save # spm meteor add momentjs:moment # meteor bower install moment --save # bower (deprecated) Format Dates moment().format('MMMM Do YYYY, h:mm:ss a'); moment().format('dddd'); moment().format
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
