GCPとAWSのマルチクラウドで構築する、大規模解析サービスのシステム全体像
大規模解析サービスの構成要素 大規模解析サービスは一般的に、以下の要素から構成されます。 ログ情報等のデータの送信 データの受信 データの保存 保存したデータの解析 解析データの閲覧などができる管理画面の提供 KARTEはユーザのWebアクセスデータをリアルタイムに解析し、アクションまでつなげることができるサービスであり、先ほど説明した5要素は、以下の5種類のコンポーネントによって実現しています。 trackerコンポーネント：エンドユーザで実行されるtracker[1]をエンドユーザに配布するためのコンポーネント trackコンポーネント：エンドユーザからデータを受信するコンポーネント。とくにKARTEでは解析データに基づいてエンドユーザへのアクションを返す役割も持つ dbコンポーネント：解析データなどのさまざまなデータを格納するコンポーネント analyzeコンポーネント：エンドユーザ
【新刊紹介】『Angularアプリケーションプログラミング』8月4日発売、定番JavaScriptのフレームワークを徹底解説
本書は、JavaScriptフレームワーク「Angular」の解説書です。データバインディング、コンポーネント、依存性注入などの基本から、ディレクティブ／パイプ／サービスの自作やテスト、さらに、Angular CLIやngx-bootstrapなど関連ツール、ライブラリといった応用分野まで網羅しています。 最新Angular 4に対応し、今後のアップグレードも考慮した内容になっており、これまでになく広い領域をカバーしています。これから始める方も、新しくなったAngularが気になる方も、必見の一冊です。 担当編集者からのコメント Google開発のJavaScriptアプリケーションフレームワーク「AngularJS」は、バージョン2で「Angular」と名称変更し、さらに高機能なフルスタックフレームワークへと生まれ変わりました。本書は、その「Angular」を初めて利用する入門者向けの書
Webベース監視制御システムにおける状態同期の信頼性評価とその検証
社会人エンジニア向けの教育プログラム「トップエスイー」での講義や制作結果などからエンジニアの皆さんに対して有用な情報をお届けするコーナーです。今回も、受講生による修了制作での取り組みを紹介します。監視制御を行うWebアプリケーションに対し、Spinを用いてモデル検査を行った結果、開発環境でのテストでは検出できなかった問題点が見つかり品質向上に貢献できたという内容です。モデル検査自体は古くから行われていて、分野によっては広く使用されていますが、一般には導入コストがかかることもあって、普及しているとは言えません。しかし、さまざまな機器がネットワークでつながる今、安定したソフトウェアを作るための難度は上がる傾向にあり、適材適所でモデル検査も活用していくことが求められています。 監視制御を行うWebアプリケーションの基本構造 変電所や高速道路、気象レーダーなどの社会のインフラを担うシステムから、家
「TypeScript 2.3」がリリース
米Microsoftは、JavaScriptのスーパーセットに位置づけられるプログラミング言語「TypeScript 2.3」を、4月27日（現地時間）にリリースした。Update 3適用済みのVisual Studio 2015、またはUpdate 2 Preview適用済みのVisual Studio 2017で利用可能で、他のエディタについても近日中にサポートされる。 TypeScriptは、従来よりJavaScriptからTypeScriptへの移行時に型チェックを行う「--allowJs」フラグを用意しているが、JavaScriptコードベースのTypeScriptへの移行は難しい、との声もあった。 そこで「TypeScript 2.3」では、読み込んだコード中で使われているJavaScript固有の型をコメントの形式で指摘する「@ts-check」オプションが試験的に追加されて
JavaScriptフレームワーク「Angular」新バージョン4の変更点と今後の展望
本連載では、Webアプリケーションフレームワーク「Angular」の活用方法をサンプルとともに紹介しています。前回は、Angularが提供するアニメーション機能について解説しました。今回は、2017年3月にリリースされたAngularバージョン4の変更点や新機能と、今後のバージョンアップの見通しを紹介します。 はじめに Angularは、Googleとオープンソースコミュニティで開発されているJavaScriptフレームワークです。AngularJSと呼ばれていたバージョン1（AngularJS 1）から、バージョン2で大きく変更されて、以降はAngularと呼ばれています。バージョン2時点では「Angular 2」と呼ばれることもありましたが、現在はAngularが正式名称です。 Angularは2017年3月にバージョンアップされて、バージョン4になりました。Angularは今後、おお
「Angular 2」コンポーネントのライフサイクルを知って使いこなす
はじめに Angular 2はGoogleとオープンソースコミュニティで開発されているJavaScriptフレームワークで、従来のAngularJS（AngularJS 1）の次期バージョンです。 Angular 2で作成したWebページを構成するコンポーネントは、表示時に生成され、画面の入力や表示などで状態が変更されて、非表示時に破棄されるといったライフサイクルが定義されています。開発者は、ライフサイクルの変化ごとに呼び出されるメソッド（ライフサイクルフック）を実装して、ライフサイクルに対応した処理を実行できます。 本記事では、Angular 2のライフサイクルとライフサイクルフックについて、サンプルを使って説明していきます。 対象読者 Angular 2をより深く使いこなしていきたい方 最新のフレームワークを活用したい方 Angular 2が裏でどう動いているか気になる方 必要な環境
JavaScriptフレームワーク「Angular 4.0.0」がリリース
JavaScriptフレームワークAngularJSの最新メジャーリリースとなる「Angular 4.0.0」が、GoogleをはじめとするAngularJS開発チームによって、3月23日（現地時間）に公開された。同バージョンは、バージョン2.x.xとの後方互換性を備えている。 「Angular 4.0.0」では、AOTコンパイラの改良によって生成されるコードのサイズを60％程度削減するとともに、アニメーション関連機能をコアパッケージから分離したため、アニメーション機能を利用しない場合はさらなるサイズ削減が期待できる。 新機能としては、*ngIfおよび*ngForが改良され、if／else形式の記述とローカル変数の使用が可能になった。さらに、これまではコミュニティベースのプロジェクトだった、サーバサイドでの実行環境であるUniversalとの統合や、TypeScript 2.1／2.2との
「Angular 2」のHTTPクライアント機能で非同期HTTP通信を使いこなす
はじめに Angular 2はGoogleとオープンソースコミュニティで開発されているJavaScriptフレームワークで、従来のAngularJS（AngularJS 1）の次期バージョンです。 最近のWebページでは、画面の内容を動的に更新するなどの目的で、JavaScriptの処理で非同期にWebサーバーとHTTP通信する処理が多用されます。Angular 2では、この非同期HTTP通信の実装をより簡単に行うためのライブラリが提供されます。 本記事では、HTTP通信を提供するAngular 2のHTTPクライアント機能について、サンプルとともに説明していきます。 対象読者 Angular 2をより深く使いこなしていきたい方 最新のフレームワークを活用したい方 WebAPIと連携してこそモダンなWebサイトだと思う方 必要な環境 Angular 2はJavaScriptのフレームワーク
20代後半からJavaScriptを学び、Node.jsのコラボレーターに。古川陽介氏に聞く、エンジニアとして急成長する方法
サーバサイドJavaScript環境 Node.jsにおいて、日本で二人いるコラボレーターのうちの一人である古川陽介さん。新卒で入社した企業では、主にJavaとデータベースといったフロントエンドとは遠い技術を扱っていた。仕事にも慣れた20代後半のころ、これまでやってきたこと以外に新たに「プラスα」を学びたいという気持ちから、JavaScriptの勉強を始め、34歳となった現在は、Node.js 日本ユーザーグループの代表を務めるほどに技術を極めている。そこまで技術を研鑽できるモチベーションはどこから生まれているのか。古川さんのキャリアと、コミュニティ活動やOSSへの貢献について話を聞いた。 リクルートテクノロジーズ ITソリューション統括部 インフラソリューション2部 APソリューショングループ 古川陽介氏 Node.jsコミュニティの会長、JavaScriptは20代後半から学んだ ――
最新フレームワーク「Angular 2」と組み合わせて「Wijmo（ウィジモ） 5」を使おう
はじめに Wijmo（ウィジモ）は、グレープシティがHTML/JavaScript環境に向けて提供しているJavaScriptライブラリで、WebサイトやWebアプリケーションで活用できるUI部品を利用者に提供します。現行版はECMAScript 5に対応した「Wijmo 5」です。 一方、Angular 2は、Googleとオープンソースコミュニティが開発しているJavaScriptフレームワーク「AngularJS」の新バージョンです。Wijmo 5はもともと、AngularJSの従来バージョン（AngularJS 1）での利用をサポートしていましたが、Wijmo 5の現行バージョン「2016J v2」に対するアップデート（5.20162.231）で、Angular 2（2.0.0）での利用をサポートしました。 本記事では、Wijmo 5をAngular 2と組み合わせて利用する設定や
Reactの概要と基礎技術要素を理解する
対象読者 JavaScriptとWeb開発の基礎に理解がある方 Reactに興味／関心があり、これから学び始める方 前提環境 筆者の検証環境は以下の通りです。 macOS Sierra 10.12 Node.js v6.6.0／npm 3.10.3 React 15.4.0 Node環境が準備できていない方は別途インストールしてください。Mac環境であればnodebrew、Windows環境であればnodist等のバージョン管理ツールの利用をおすすめします。 Reactの主な特徴 ReactはUIを構築するためのFacebook製オープンソースJavaScriptライブラリです。 2011年にFacebookのニュースフィードにデプロイされて以来、Instagram、Airbnb、Netflix、Paypal、Uberなど数々のアプリケーションで活用されています。Reactの公式サイトには
JSフレームワークを使ったHTMLテンプレート利用のススメ
前回、Webシステムの運用現場では「HTMLの文言、デザインの修正がすぐにできない」「サーバサイドの技術がわからないとHTMLが修正できない」といった問題が生じていることを紹介しました。そして、それらの問題の原因の一つに、PHPでのSmartyやRubyのERBといったサーバサイドテンプレートがある、これらの問題はクライアントサイドでのHTMLテンプレートを使うと解決しやすくなることを説明しました。もっとも、現在フロントエンドエンジニアがチーム内にいない場合には、具体的にはどのような方法がとれるのかがイメージつきにくいと思います。今回は、クライアントサイドでのHTMLテンプレートを使って具体的な方法を紹介します。 対象読者 サーバサイド開発者 フロントエンド開発者 Webアプリ・システム開発に参加する方全般 クライアント側でのHTML生成することの懸念点について 前回、サーバサイドHTML
ロジックを画面から分離できる「Angular 2」のサービスと依存性注入
はじめに Angular 2はGoogleとオープンソースコミュニティで開発されているJavaScriptフレームワークで、従来のAngularJS（AngularJS 1）の次期バージョンです。2016年9月に正式版がリリースされ、本格的に利用できる環境が整いました。Angular 2はAngularJS 1に対して多くの変更点があり、コードの記述法も基本的に異なります。 前回記事では、Angular 2のWebページを構成する要素である、コンポーネントやモジュールについて説明しました。これらを利用すると、実装を分割して互いの影響範囲を限定することができます。 しかし、ログ出力のようにさまざまな箇所で使われる処理や、ビジネスロジックのような画面から独立した処理は、独立して実装した処理を、後から追加できれば便利です。Angular 2ではこのような機能として、独立した処理を実装する「サービ
Google、Webアプリケーション用のフレームワーク「Angular 2」正式版をリリース
「Angular 2」は、Router、FormsをはじめとするコアAPIをより使いやすくしたほか、Angular CLIおよびstyleguideの生産性を高めるなど、さまざまな機能向上を果たしている。 なお、これまで開発者に混乱を生じさせてきた、バージョン表記における「RC」ラベルは、安定リリースにおける依存性の管理を目的としていたが、「Angular 2.0.0」からはセマンティックバージョニングに移行する。 新たに導入したバージョンルールでは、非互換APIが導入される場合がメジャーアップデート、後方互換性を維持した機能追加がマイナーアップデート、後方互換性を維持したバグフィックスがパッチとなる。 今後は、APIのバグフィックスおよび互換性を維持した機能追加が行われるほか、ガイドや例示機能の拡充、アニメーション機能の向上、「Angular Material」のアップデート、「WebW
「Angular 2」の構成単位「コンポーネント」「モジュール」を使いこなそう
はじめに Angular 2はGoogleとオープンソースコミュニティで開発されているJavaScriptフレームワークで、現行AngularJS（AngularJS 1)の次期バージョンです。リリース候補版の状態が長く続いていましたが、2016年9月時点に正式版（2.0.0）がリリースされました。Angular 2はAngularJS 1に対して多くの変更点があり、コードの記述法も基本的に異なります。 Angular 2はコンポーネントやモジュールと呼ばれる、Webサイトの実装を分割する仕組みを備えており、Angular 2自体も複数のモジュールから構成されています。これらの仕組みを活用して、実装を分割して見通しの良いソースコードを書いたり、ソフトウェア部品として別のWebサイトに移植したりできます。 本記事では、Angular 2のコンポーネントやモジュールについて紹介します。まずコン
AngularJSアプリに役立つ小粒なライブラリ ～ 可変パネル／CSV生成／カウントダウン機能
なお、本連載ではAngularJSそのものに関しては解説しませんので、専門書として『AngularJSアプリケーションプログラミング』、姉妹連載「AngularJSではじめるJavaScriptフレームワーク開発スタイル」などを併せて参照してください。 はじめに 本稿は、第10回に続いての小ネタ編。これまでの回で取りこぼした小粒なライブラリとして、以下のものを紹介します。 UI Layout：マウスドラッグでサイズ変更できる可変パネルを実装 ngCSV：オブジェクト配列をCSV形式のファイルに変換 Angular Count-to：カウントダウン／アップ機能を実装 対象読者 AngularJSについて基本的な概念を理解している方 AngularJSで利用できる拡張モジュールに興味がある方 検証環境 この記事では、以下の環境でサンプルの動作を確認しています。 AngularJS 1.5.7
「Angular 2」のデータバインディングとディレクティブ記述法
はじめに Angular 2はGoogleとオープンソースコミュニティで開発されているJavaScriptフレームワークで、現行AngularJS（AngularJS 1)の次期バージョンです。2016年8月時点のバージョンは2.0.0-rc.5で、まもなく正式リリースという状況になっています。Angular 2はAngularJS 1に対して多くの変更点があり、コードの記述法も基本的に異なります。 AngularJS 1ではビューとデータモデルを関連付けるデータバインディングや、ディレクティブと呼ばれる独自のHTML記述が利用できました。これらはAngularJSの特徴として真っ先に言及される機能で、Angular 2でももちろん利用できます。しかし記述方法が微妙に異なっており、最初は違和感を感じるかもしれません。 そこで本記事では、Angular 2でデータバインディングやディレクティ
AngularJSアプリの入力生産性を向上する3種のライブラリ
<!DOCTYPE html> <html ng-app="myApp"> <head> <meta charset="UTF-8" /> <title>AngularJS</title> <!-- （1）Angular Wizard本体とスタイルシートをインポート --> <link rel="stylesheet" href="bower_components/angular-wizard/dist/angular-wizard.css" /> <script src="bower_components/angular/angular.min.js"></script> <script src="bower_components/angular-wizard/dist/angular-wizard.min.js"></script> <script src="scripts/wizar
最新トレンドを取り込んで進化する次世代AngularJS「Angular 2」最初の一歩
はじめに AngularJSはGoogleとオープンソースコミュニティで開発されているJavaScriptフレームワークです。データバインディング機能によるビューとモデルの分離や、ディレクティブ（独自タグ）によるシンプルな記述など、HTML／JavaScriptでWebページを構築するための様々な機能を提供しています。 バージョン1といえる現行AngularJS（以降「AngularJS 1」と記述）に対して、次世代版のAngularである「Angular 2」が開発中です。2016年6月時点のバージョンは2.0.0-rc2で、正式リリースが間近に迫っています。 図1 次世代版のAngular 2が開発中（公式Webページより） Angular 2はデータバインディングやディレクティブといったAngularJS 1の特徴を引き継ぎつつ、最新JavaScript規格への対応などの進歩を果たし
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
AngularJSではじめるJavaScriptフレームワーク開発スタイル一覧