【Angular2】簡単なWebアプリ制作(その3)
10cmです｡こんにちは｡今回は､WebSQLを用いて購入物の管理を行います｡
GitHabはこちらになります｡
以下のような機能を実装しました｡
- 購入物をDBから取得
- 購入物をDBに追加
- 購入物をDBから削除
Angular2でWebSQLを使うようにするのは別記事で説明いたします｡
データを追加
まずはデータのを追加するための機能です｡ComponentがWebSQL用のServiceのメソッドを実行しています｡
public runInsertPurchases(purchases:Purchases): Promise<any> { return new Promise(function(resolve,reject){ this.db.transaction( function(trans){ // 購入物の追加 trans.executeSql(SQL_TEXT.INSERT_PURCHASES,[purchases.category, purchases.price, purchases.num, purchases.date], // 追加成功 function(trans,res){ resolve(res); }, // 追加失敗 function(trans,error){ console.log('execSqlCustom error ' + error.message); reject(error); } ) } )}.bind(this)); }
"trans.executeSql"で渡している引数のSQLが実行されます｡
引数は以下のようになっています｡
- SQL文
- パラメータ
- 成功時のコールバック関数
- 失敗時のコールバック関数
コールバック関数でComponentに通知(resolve, reject)を行い､必要な処理を行わせます｡
追加では､結果をalertで表示させるようにしています｡
データを取得､表示
DBに追加したデータを表示します｡今回は､前に作成していたリスト表示のMockの部分を修正していきます｡
public runGetPurchases(from, to): Promise<Purchases[]> { var array:Array<string> = [from, to]; // DBにアクセスする return new Promise(function(resolve, reject) { this.db.transaction( function(trans) { // 購入物の取得を行う trans.executeSql(SQL_TEXT.SELECT_PURCHASES_OF_DAILY, array, success); // 取得成功 function success(trans, res) { // 配列の中身がからの場合 if( res.rows.length ) { resolve(res.rows); } else { reject("取得結果は0件です") } } } ) }.bind(this)); }
この関数では､FromとToを取得してその間にある購入物を取得します｡
取得後､row.rowsが実際の結果になります｡
また､件数が0件の場合は､エラーとして通知します｡
データを削除
追加したデータの削除を行います｡リスト表示画面において､購入物ごとに削除ボタン(☓ボタン)を表示しています｡選択された購入物のIDを用いて削除を行っています｡
public runDeletePurchases(id: number): Promise<any> { return new Promise<any>(function(resolve, reject){ this.db.transaction( function(trans) { // 購入物の削除 trans.executeSql(SQL_TEXT.DELETE_PURCHASES, [id], // 削除成功 function(trans, res) { resolve(res); }, // 削除失敗 function(trans, error) { resolve(error); } ) } ) }.bind(this)); }
作りは追加と同じです｡削除の成功､失敗を通知して後処理はComponentが行います｡
削除の結果をalertで表示させています｡
また､削除に成功した場合は､再度DBから取得を行い､最新の状態を表示するようにしています｡
まとめ
angular-cliのプロジェクトでWebSQLを利用したデータの管理を行った｡今後は､チャート表示の方に手をつけていこうかなと｡
チャートは何使おうかな｡google-chartくらいしか使ったことないけど｡
【Angular2】簡単なWebアプリ制作(その2)
10cmです｡こんにちは｡
前回に続きとなります｡
GitHabはこちらになります｡
開発環境は以下の用になっています
今回は､追加する画面を作成しました｡以下のような感じになっています｡
ではでは､上記の画面でちょっと手こずったところを記載していきます｡
チェック処理
この追加画面では､2つのチェックを行っています｡1つはバリデーションチェック､もう1つはnullなどの空のチェックです｡バリデーションは'min'と'max'属性でやれないかなって思ったんですが､なんかうまくできなかったため渋々スクリプトで更新しています｡
空チェックは､入力項目がすべて入力､選択された場合に追加ボタンを謳歌できるようにしています｡
Templateは以下のようになりました｡
<!-- カテゴリ --> <div class="btn-group input-span"> <button class="btn btn-default" [ngClass]="{active: category.active}" *ngFor="let category of categoryList" (click)="categoryClickEvent(category)">{{category.name}}</button> </div> <!-- 金額 個数 日付 --> <div class="input-group input-span" *ngFor="let input of inputList"> <span class="input-group-addon">{{input.label}}</span> <input class="form-control" [type]="input.type" [placeholder]="input.placeholder" [(ngModel)]="input.value" (blur)="updateInputValue(input)"> </div> <!-- 追加ボタン --> <div style="float: right"> <button class="btn btn-primary" (click)="submitButtonClickEvent()" [disabled]="checkInputValue()" >追加</button> </div>
バリデーションチェック
バリデーションチェックは､各inputタグの(blur)のタイミングで行っています｡(blur)は､入力エリアからフォーカスアウトすると､設定しているメソッドなどを実行してくれます｡今回の場合は､"updateInputValue(input)"が実行されます｡
"updateInputValue"は以下のようになっています｡
updateInputValue(input):void { // 入力値が､設定値より小さい場合 if(input.value < input.min) input.value = input.min; // 入力値が､設定値より大きい場合 if(input.value > input.max) input.value = input.max; }
inputオブジェクトごとにあらかじめ"min"と"max"を設けており､それを超えたら丸める､っといった流れです｡
追加ボタン押下OKチェック
追加ボタンには､すべての入力項目のチェックを行い､入力漏れがない場合のみ押下できるようにします｡[disabled]に対して"checkInputValue()"を設定しています｡
こういったイベントの発火タイミングとかはキチンと決まっているんでしょうかね?(Componentに関する値が更新されたら軒並み動くのかな?)
以下､チェック処理です｡
checkInputValue():boolean { var disabled = ( !this.selectedCategory || !this.inputList[0].value || !this.inputList[1].value || !this.inputList[2].value ) return disabled; }
まぁ､解説するまでもないですね｡すべての値がnullや空文字でなければdisabledをtrueにして押下できなくなるようにします｡
【Angular2】Chromeでangular-cliのプロジェクトをデバッグする方法
10cmです｡こんにちは｡
今日は､angular-cliのプロジェクトをChrome上でデバック実行する方法をご紹介します｡
自分は開発環境として"VisualStudioCode"を使っているのですがどうにもデバッグ方法がわからず､行き着いた結果がChrome上でデバッグをする方法でした｡
もし､"VisualStudioCode"でデバッグできるやり方を知っていたら教えて欲しいです｡｡｡｡
前提条件
自分の開発環境は､ざっと以下の通りです｡Macを使用しているため､説明が"command"などになっています｡Winの方は"Ctrl"などに置き換えてください｡また､"angular-cli"で生成したプロジェクトを使用しています｡
他の環境では自分は実施していませんのでご了承ください｡(TypeScriptのビルドで生成してたら同じかな?)
デバッグ方法
1.Chromeのデベロッパーツールを開きます｡デベロッパーツールは､以下のショートカットキーで開けます｡command + option + i
2.Sourcesタブを選択します｡更にその下にあるSourcesタブを選択します｡
3."command + p"を押下します｡すると､ファイル名を入力する欄が出てきます｡そこに､ステップ実行などを行いたいTypeScriptのファイル名を入力します｡
4.TypeScriptのファイルが開かれます｡あとは､JavaScriptと同様にブレークポイントを設定します｡
5.リロード!
ブレークポイントで処理が中断してくれました!メンバの内容もきちんと確認できます｡
【Angular2】簡単なWebアプリ制作日記(その1)
10cmです｡こんにちは｡
今回から､Angular2の練習がてら､Webアプリ制作を行いたいとおもいます｡
ざっくりではありますが､以下の点について記載していこうと思います｡
GitHabはこちらになります｡
環境など
開発環境は以下の用になっています
angular-cliについては､以下の記事を参照してみてください｡
10cmです｡こんにちは｡今回は､MacにAngular2の開発環境を構築してみました｡PCの環境と導入するものをは以下となります。■PCの環境
macOS ...
進捗など
今回は､現状報告のみを行います｡
werningとdangerに対してそれぞれ入力すると､リストに表示されている購入物の金額*数と比較して大きい場合は色を変えるようにしています｡
ToDo
- レイアウトの修正
- 各項目の検索機能
- 購入物をDBに移行
- 購入物の追加と削除
上記を中心に進捗を記事にしたいと思います｡
では｡
【Aurelia】MacでAureliaのインストールからUnitテストまで
10cmです｡こんにちは｡今回は､AureliaというJavaScriptのフレームワークについて､インストールの仕方からUnitテストの実行までを記載していきます｡
まず､『Aureliaってなに?』という方は､『参考』にホームページを記載しておきますので詳しくはそちらを｡
ざっくり言ってしまえばAngularJSと同じような特徴を持っており､ES6/7を取り込むフレームワークということです｡
Aurelia-cliのインストール
前準備
それではAureliaのインストールを行います｡Aureliaは､Node.js､NPMの環境が必要です｡Macであれば､公式にあるLTSをpkgでダウンロードできるためここでは割愛します｡インストールができていれば､ターミナルで下記のコマンドを入力して確認してください｡(･･･ は自分の環境のバージョンです)
$ npm --version ･･･ 2.15.9 $ node --version ･･･ 4.6.0
インストール
Aureliaを使うためのcli(コマンドラインインターフェース)､をインストールします｡以下のコマンドを実行します｡$ npm install aurelia-cli -g
"aurelia-cli"が､Aureliaのプロジェクト管理ツール(でいいのかな?)となります｡インストールが完了すると以下のコマンドが実行できるようになります｡
$ au
実行するとヘルプが表示されます｡表示されない方はコマンドの確認やNode.js､NPM周りがどうか確認をお願い致します｡
また､aurelia-cliとは別に､gitのインストール､config設定もしておいてください｡(ここでは､詳細は書きません｡)
なぜgitが必要かというと､プロジェクトの生成途中でエラーとなります｡生成する際に裏で使っているっぽいです｡なので用意をしておいてください｡
プロジェクトの生成
Aureliaのプロジェクト生成を行います｡以下のコマンドを実行すると､プロジェクトに関する質問があります｡$ au new プロジェクト名 (--here)
質問内容は以下となっています｡
- 1.Setupをカスタマイズするか
- 2.(1-3.を選択した場合)
- 2-1.タスクランナーの設定
- Babel
- TypeScript
- 2-2CSSプロセッサの設定
- なし
- Less
- Sass
- PortCSS
- 2-3.Unitテストの設定
- karma, jasmine
- なし
- 2-4.エディターの設定
- 3.プロジェクトの生成を行います｡よろしいですか?
- 1.はい
- 2.もう一度設定する
- 3.キャンセル
- 4.ツールの依存関係で必要があればインストールするか
- 1.はい
- 2.いいえ
(3.)で『はい』を選択するとプロジェクト名のディレクトリが生成されます｡
また､オプションで"--here"を付加すると､ディレクトリの作成は行われず､カレントディレクトリ直下にファイルの生成が行われます｡
(4.)については『はい』でよいかと｡中で生成されたpackage.jsonのモジュール(karmaとかgulpとか)をインストールしているはずです｡
これがないと後述の『実行』と『テスト』ができなくなってしまいます｡｡｡(あとで(4.)をいいえで実行してから'npm install'してみたんですが､実行時にエラーになってしまいました｡｡｡)
実行
では動作テストをします｡以下のコマンドをプロジェクトフォルダに移動してから実行してください｡$ au run (--watch)
最後に以下のメッセージが出ていれば､成功です｡
Application Avaliable At: http://localhost:9000 BrowserSync Avaliable At: http://localhost:3001
では､ブラウザでlocalhost:9000に繋いでみましょう｡'HelloWorld'が画面に出てくるはずです｡
また､実行時に'--watch'オプションを付けることで､ソースコードの修正を行ったとき､サーバーを再起動する必要なく最新のソースコードで再表示してくれます｡
Unitテスト
最後にUnitテストを実行します｡プロジェクトのカレントディレクトリで以下のコマンドを実行します｡$ au test
コンソール上にkarmaが実行されたことを確認できればOKです｡
まとめ
Aureliaの導入からUnitテストの実行までを記載していきました｡自分はcliと言うものを初めて触ったため､ここまで便利なものだとは思いませんでした｡ただ､Aureliaは入門こそ記事などは多いのですが､詳細なドキュメントは公式だけしか見つからず､それ以降の解説サイトもほぼ見つかりませんでした｡
これから人気が出るかは微妙ですが､個人的にはAngularに似ていて好きだったためこちらの方もブログで扱っていこうと思います｡
次回はルーティング周りなどを記載しようかと｡では｡
参考
Aurelia 公式HOMEAngularJSはもう古い？未来志向フレームワークAurelia.JSを試してみた！
【AngularJS】angular-ui-routerを使ってメニューから表示する内容を切り替える
10cmです｡こんにちは｡今回は､AngularJSの"angular-ui-router"(以下､ui-router)を用いて､メニューバーから表示する内容を切り替える処理を記載していきます｡
はじめに､完成イメージです｡ "コンテンツA"と"コンテンツB"のリンクがあり､それぞれ専用の画面を表示します｡今回の例では､"コンテンツA"は赤い四角を､"コンテンツB"は緑の四角を表示します｡
コンテンツA
コンテンツB
以下に､今回のディレクトリ構成を示します｡
ディレクトリ構成
----------------------
カレントディレクトリ
├ index.html
├ app.js
├ controller
│ └ header.js
├ view
│ ├ main.html
│ ├ header.html
│ ├ contentA.html
│ └ contentB.html
└ node_modules
├ angular
└ angular-ui-router - メニューの作成 (header.html, header.js)
- コンテンツの作成 (contentA.html, contentB.html)
- メニューとコンテンツの紐付け (index.html, main.html, app.js)
- まとめ
- 参考
メニューの作成 (header.html, header.js)
まず､メニューの作成を行います｡以下にソースコードを示します｡header.html ---------------------- <header> <ul ng-repeat="l in HeaderCtrl.list"> <a ui-sref="main.{{l.link}}"><li>{{l.name}}</li></a> </ul> </header>
header.js ---------------------- var HeaderCtrl = function($scope) { this.list = [ { 'link': 'contentA', 'name': 'コンテンツA' }, { 'link': 'contentB', 'name': 'コンテンツB' } ]; }; app.controller('HeaderController', HeaderCtrl);
"a"タグの中に書かれている"ui-sref"ですが､詳しくは後ろで解説します｡ここでは"href"のように､飛ぶ先を示しているのだと認識してください｡つまり､『"main.{{l.link}}という場所が設定されていて､リンクを押すとそこに飛ぶんだな｡』ということです｡
l.linkは､"header.js"に書いてある"list"の中身を､1つずつ取り出しています｡この例では､"コンテンツA"と画面上に表示されていて､そのリンク先は"main.contentA"となります｡
コンテンツの作成 (contentA.html, contentB.html)
次に､メニューを押下した時に表示するコンテンツを作成します｡といっても､ここでは四角を表示するHTMLファイルを書くだけです｡一応ソースコードは以下のようになります｡
contentA.html ---------------------- <div style="height:100px; width:100px; background-color:#ff0000"> <p style="color: #ffffff">ContentA</p> </div>
contentB.html ---------------------- <div style="height:100px; width:100px; background-color:#00ff00"> <p style="color: #000000">ContentB</p> </div>
メニューとコンテンツの紐付け (index.html, main.html, app.js)
ここでメニューと作ったコンテンツの紐付けを行います｡その前に､表示切り替えのイメージの説明をしたいと思います｡
メニューが選択されたとき､設定されていた"ui-sref"の値を表示しろと"app.js"に通知します｡"app.js"は､その値に紐づくHTMLファイルを"main.html"に表示させます｡
そのため､メニューに設定している"ui-sref"の値と､"app.js"に記載する値を一致させる必要があります｡それでは､実際のソースコードを見てみましょう｡
index.html ---------------------- <body ng-app="MyApp"> <!-- UI-Routerの設定 --> <ui-view name="header"></ui-view> <ui-view name="main"></ui-view> </body>
main.html ---------------------- <ui-view name="content"></ui-view>
app.js ---------------------- var app = angular.module('MyApp', ['ui.router']); app.config(function($stateProvider, $urlRouterProvider){ $stateProvider.state('main',{ 'url': '/', 'views': { // Header 'header': { 'templateUrl': './view/header.html', 'controller': 'HeaderController', 'controllerAs': 'HeaderCtrl' }, 'main': { 'templateUrl': './view/main.html', } //ContentA }}).state('main.contentA', { 'url': 'contentA', 'views': { 'content': { 'templateUrl': './view/contentA.html', } //ContentB }}).state('main.contentB', { 'url': 'contentB', 'views': { 'content': { 'templateUrl': './view/contentB.html', } }}); $urlRouterProvider.otherwise('/'); });
"index.html"には､メニューと､ コンテンツを表示するための"ui-view"があります｡メニューには"header.html"を､コンテンツには"main.html"をapp.jsで指定しています｡
"main.html"には､"content"を表示するための"ui-view"が設定されています｡ここに対して､"contentA"か"contentB"のHTMLファイルを表示します｡
では､どうやって表示するものを決定するかですが､"app.js"の"state"に書かれています｡"contentA"の場合は"main.contentA"が設定されています｡これは､"header.html"のui-sref"と同じ値が設定されています｡
つまり､コンテンツAを押下したとき､"ui-sref"に設定されている"state"と同じものを表示させます｡では何を表示させるのか｡"content"の"templateUrl"に設定されているHTMLを表示させます｡今回の例では､"./view/contentA.html"が表示されます｡
まとめ
"ui-view"を階層化することで､表示するものを切り替えることができるようになりました｡"ui-view"や"ui-sref"､"app.js"に記述する"state"など色々出てきましたが､それぞれの関連性について理解できたでしょうか?ここで言うのもなんですが､自分はまだ理解できていないと思います(汗)｡
参考
UI-Router API ReferenceCentOS7.0にNode.jsを導入しサーバーを実行してWebブラウザで接続するまで
shinjiです｡こんにちは｡
今回は仮想サーバーのCentOS7.0でNode.jsをインストールしてServerを実行､ port80にアクセスしてWebブラウザから確認するまでを記載いたします｡
Node.jsのインストール
まず､仮想サーバーのCentOSにNode.jsの環境をインストールします｡以下のコマンドを実行します｡
$ sudo yum install -y epel-release ･･･ ① $ sudo yum install -y nodejs npm
①のepel-releaseとは
EPEL
エンタープライズ Linux 用の拡張パッケージ(EPEL) は、 Red Hat Enterprise Linux (RHEL) 向けの高品質なアドオンパッケージであり、CentOS や Scientific Linux (SL) のような RHEL からスピンオフしたディストリビューションと互換性のある、Fedora プロジェクトで有志によって作成されたパッケージになります。Fedora は RHEL のアップストリームであり、EPEL のアドオンパッケージは主に RHEL 向けにビルドされた Fedora リポジトリをソースとしています。
https://fedoraproject.org/wiki/EPEL/ja
とのことです｡
まぁ､EPELをインストールしておかないと､その中にあるNode.jsやNPMがインストールできないということです｡(違うと思うけど)
ともあれ､これで無事にCentOS7.0の中にNode.jsの環境をインストールできました｡
port80のFireWallを開放
タイトルで表現あってるかわかりませんが､port80の通信でFireWallに引っかからないようにします｡以下のコマンドを実行する｡
$ sudo firewall-cmd --add-service=http --zone=public --permanent ･･･ ① success $ sudo firewall-cmd --reload ･･･ ② success $ sudo systemctl restart firewalld ･･･ ③
①のコマンドに対して成功したら"success"と表示されます｡
逆に､コマンドの記述ミスなどをしていればエラーメッセージなどが表示されるはずです｡
②は､①で設定を変更したため､それをリロードして設定を反映させます｡
③も同様です｡
Server.jsの作成
では､実際にNode.jsでサーバーを立ち上げて､ホストOSのブラウザで接続するようにしたいです｡今回は､Expressを使用してServer.jsというファイルを作成し､port80に対して通信があった場合､レスポンスを返すようにします｡
まず､Expressをインストール(取得)しましょう｡
好きなディレクトリで､以下のコマンドを実行します｡
$ sudo npm install express ･･･ ①
①を実行すると､http通信が行わているのがわかります｡
①の実行終了後､"lsコマンド"を実行してみましょう｡
"node_modules"というディレクトリが作成されているのが分かります
更に､その下のディレクトリに対して"lsコマンド"を実行してみると､先程インストールした"express"のディレクトリがあると思います｡
なければ､エラーログやメッセージが出ているはずなので確認しましょう｡
インストールされていることを確認したら､server.jsの作成を行います｡
以下のようにserver.jsを記述します｡
var express = require('express'); var app = express(); app.get('/', function(req, res) { ･･･ ② res.send('はじめまして!<br>『技術ときどき雑学』のブログへようこそ!'); }); app.listen(80, function() { ... ③ console.log('Express Listen port 80'); })
エディターはなんでも良いです｡ローカルで書いてから通信ソフトなどで送ってもOKです｡
②は､仮想サーバーの"/"(ルート)にアクセスした際の処理を書きます｡
ここでは､『はじめまして! 『技術ときどき雑学』のブログへようこそ!』と返答しています｡
ブラウザで､上記の文が出力されて入れば通信は成功していることを表します｡
③では､どのportの通信に対して反応するかを指定します｡
ここでは､port80に設定しています｡
Server.jsの実行とアクセス
では､サーバーを実行して､Webブラウザで表示されるか確認してみましょう｡以下のコマンドで､サーバーを実行します｡
$ sudo node server.js ･･･ ①
①を実行すると､"Express Listen port 80"と表示されます｡
表示されれば成功です｡仮想サーバーにブラウザからアクセスしてみましょう｡
期待通りの出力ができていればOKです｡
