はてなブックマーク

フォームでデータ送信後に別のページに遷移する際、遷移直後のみ完了メッセージを表示（flashメッセージ）するサンプルを作成しました。 ※Angular2の2.0.0版、TypeScriptを使って確認したものです。（デモはv4.4.3、v2.0.0で動作確認） ※目次をクリックすると目次の下部にコンテンツが表示されます。 １．サンプルの仕様 ２．サンプルコードの説明 ３．デモ ・”ホーム”（HomeComponent）と”次ページ”（PageComponent）の２ページ構成 ・メインのコンポーネント（AppComponent）でルーティング設定 ・flashメッセージを”FlashService”というサービスで保持。複数のコンポーネントから共用してアクセス。 ・”ホーム”でメッセージを登録 →”次ページ”に遷移し、flashメッセージ表示 →”ホーム”に遷移するとflashメッセージが

基本、仕組み Angular2のモジュール、コンポーネント、bootstrapの概要 ディレクティブ データバインディングの概要 プロパティバインディングとアトリビュートバインディング イベント処理 NgClass、NgStyle、クラスバインディング、スタイルバインディングを使ってcss設定 内挿（interpolation）、２Wayバインディングの概要 NgForを使ってリストやテーブルを作成 NgSwitchで内部にあるHTMLテンプレートの表示を切り替え NgIf、[style.display]、[hidden]を使って表示、非表示を切り替え inputs、@Inputを使ってディレクティブ間で値を受け渡し outputs、@Output、EventEmitterを使ってカスタムイベントを定義 カスタム構造ディレクティブ作成 フォーム NgForを使ってラジオボタン、select

Angular2でフォームのバリデーションチェック、動的にCSSの追加を行い、エラー時に色を変えたり、メッセージを表示する方法をまとめました。 ※Angular2の2.0.0版、TypeScriptを使って確認したものです。（デモはv4.4.3、v2.0.0で動作確認） ※目次をクリックすると目次の下部にコンテンツが表示されます。 １．FormsModuleのインポート ２．NgModelディレクティブを使ったシンプルなフォーム作成例（バリデーションチェックなし） ３．バリデーションチェック、動的にCSS追加 ４．フォームの作成方法 ５．デモ Angular2のフォームの機能を使用する場合、別途フォームのモジュールをインポートする必要があります。 一般的なAngular2のフォーム機能を使用する場合、FormsModuleをインポートします。 ※ダイナミックフォームを使用する場合は、Rea

Observableを使ってhttpリクエストを複数実行する方法を確認しました。 ※Angular2の2.0.0版、TypeScriptを使って確認したものです。（デモはv4.4.3、v2.0.0で動作確認） ※目次をクリックすると目次の下部にコンテンツが表示されます。 １．3つのhttpリクエストをチェインして実行 ２．3つのhttpリクエストをパラレルに実行 ３．デモ １）ライブラリ、サービス、依存性の指定 こちらの記事参照　Angular2でHTTPでサーバーからJSONデータ取得 Angular2のHTTPクライアントはObservableをリターンします。ObservableのflatMapメソッドを使ってHTTPクライアントをチェーンして実行しています。 ※ObservableのflatMapメソッド 例）３つのhttpリクエストを順番に実行 chain() { this._h

yumのリポジトリ内には存在しないRPMパッケージ、古いバージョンのRPMパッケージを個別に自分で入手し、インストールしたい場合があります。 rpmコマンドでもローカルにあるパッケージをインストールすることは出来ますが、依存性は解決してくれません。 yumコマンドの”localinstall”オプションを使うと自分でダウンロードして入手したRPMパッケージを依存性を解決しながらインストールする事が出来ます。 yum –nogpgcheck localinstall RPMパッケージ名 ・”localinstall”オプション 引数で指定したローカルにあるRPMファイルを設定で有効にしてあるリポジトリで依存性を解決しながらインストールします。 ・”–nogpgcheck”オプション GPG署名チェックでエラーになってしまう場合は指定します。自分で責任もって正当なパッケージを入手する必要があり

MySQLの文字コード設定は、テーブルやカラムに指定する文字コード設定とクライアントからサーバーに接続する文字コード設定があります。全体を通して整理してまとめました。 ※目次をクリックすると目次の下部にコンテンツが表示されます。 １．文字コード（CHARSET）と照合順序（COLLATE） ２．テーブル、カラムに指定する文字コード設定 ３．クライアントからサーバー接続時の文字コード設定 MySQLでは、文字コードと照合順序を設定できます。照合順序は複数の値を比較する時に、どのように比較するのかを定義しているものです。 １）指定可能な文字コードを確認 mysql> SHOW CHARACTER SET; +----------+-----------------------------+---------------------+--------+ | Charset | Descripti

AngularJSの$resourceサービスを使ってRESTfulなクライアントを作成する事が出来ます。$resourceサービスの使用方法、使用例をまとめました。 デモとコードサンプルはこちら。 ※目次をクリックすると目次の下部にコンテンツが表示されます。 １．$resourceサービスの概要 ２．$resourceサービスの使用方法 ３．サンプルコード $resourceサービスは内部でAngularJSの$httpサービスを使用していて、サーバーに対してHTTPの送受信を行う事ができ、RESTfulにサーバーサイドのデータソースとやり取りできます。 例えば、下記のようなURLの構成でサーバーとユーザー情報のやり取りを行うクライアントを作成する際に有用です。 URL HTTPメソッド 処理内容 /users GET ユーザー一覧取得 /users POST 新規ユーザー登録 /use

ディスク使用量が増えてきた場合、どのディレクトリが増えているのかまず調べる必要があります。調査方法の一例を紹介します。 ※以下の記事も参照。 Linuxでディスク使用量が多いディレクトリを調べる方法 １）dfコマンドで現在のディスク使用量を表示 例） # df -h Filesystem Size Used Avail Use% Mounted on /dev/mapper/VolGroup-lv_root 18G 6.0G 11G 37% / tmpfs 1004M 512K 1003M 1% /dev/shm /dev/vda1 485M 73M 387M 16% /boot /dev/vdb 178G 188M 168G 1% /data ２）duコマンドでディレクトリ単位に調査 下記コマンドで、調べたいディレクトリ内のサブディレクトリの使用量を表示し、多い順に表示します。 du -

サンプルコードを使ってAngularJSの基本的なカスタムディレクティブの作成方法をまとめてみました。 デモとコードサンプルはこちら。 （１）サンプルコードの仕様 商品リストを表示する下記内容を”productsList”という名前でカスタムディレクティブを使って書き換えてみます。 （カスタムディレクティブ未使用） <div ng-controller="cus1Ctrl"> <ol> <li ng-repeat='item in products'> {{item.product_name}}　：　{{item.price | number:0}}円 </li> </ol> </div> （カスタムディレクティブ使用） <div ng-controller="cus1Ctrl"> <div products-list="products"></div> </div> （２）カスタムディレ

AngularJSとBootstrap3を使って一覧データをページングで表示するサンプルコードを作成しました。 デモとコードサンプルはこちら。 Bootstrap3によるCSS設定、AngularJSのビルトインフィルター、カスタムフィルターなど様々な機能を使用していてコードが少し長くなっているので、３段階のステップに分けて作成しています。 ※目次をクリックすると目次の下部にコンテンツが表示されます。 １．配列データをオフセットと表示個数を指定して表示 ２．配列データをページングで表示 ３．ページリンクのCSS設定 一覧情報をページ化して表示するには、オフセット（配列内のどのデータから表示するか）と表示個数を制御する必要があります。 まず、AngularJSのフィルターを使って、配列内のデータからオフセットと表示個数を指定して表示するサンプルを作成します。 表示個数は、下記のようにビルトイ

CentOS6.5ではデフォルトでdbus-daemonというデーモンプロセスが実行されています。このプロセスの概要についてまとめました。 ※目次をクリックすると目次の下部にコンテンツが表示されます。 １．dbus-daemonとは？ ２．dbus-daemonコマンド ３．dbus-daemonの設定ファイル １）psコマンドの出力内容は？ $ ps -ef dbus 1324 1 0 May19 ? 00:00:00 dbus-daemon --system ２）実行ファイルのPathは？ $ which dbus-daemon /bin/dbus-daemon ３）どのパッケージに属する？ 実行ファイルのパスが分かったのでどのパッケージに属するかみてみます。 $ rpm -qf /bin/dbus-daemon dbus-1.2.24-7.el6_3.x86_64 ４）dbusパッケ

psコマンドでプロセスツリーを表示し、プロセスグループ、セッション情報を確認する方法をまとめました。プロセスグループ、セッションとは何か？についてもコマンドの説明の後にまとめました。 ※目次をクリックすると目次の下部にコンテンツが表示されます。 １．psコマンドのオプション、表示される項目 ２．プロセスグループ、セッションとは？ ３．出力例 ●オプション psコマンドに下記オプションを指定します。 ps -ejH ※オプションの説明 -e 全てのプロセスを選択する。-Aと等しい。 -j jobsフォーマット。 -H プロセスを階層表示する ●表示される項目 PID：プロセスのプロセスID番号 PGID：プロセスグループID。（プロセスグループリーダのプロセスIDと等しい。） SID：セッションID。（セッションリーダのプロセスID と等しい。） TTY：制御端末(tty) TIME：累積し

-e 全てのプロセスを選択する。-Aと等しい。 -f 完全なフォーマットでリストする -F 特別に完全なフォーマット -l 長いフォーマット -y １）ps -e ・出力項目（出力項目の説明は（３）参照） PID,TTY,TIME,CMD ・出力例 $ ps -e | grep init 1 ? 00:00:00 init ２）ps -ef ・出力項目 UID,PID,PPID,C,STIME,TTY,TIME,CMD ・出力例 $ ps -ef | grep init root 1 0 0 Aug10 ? 00:00:00 /sbin/init ３）ps -eF ・出力項目 UID,PID,PPID,C,SZ,RSS,PSR,STIME,TTY,TIME,CMD ・出力例 $ ps -eF | grep init root 1 0 0 4835 820 0 Aug10 ? 00:00:0

AngularJSのサービスの概要とfactory、service、providerの使い分けについてまとめました。 デモとコードサンプルはこちら。 ※目次をクリックすると目次の下部にコンテンツが表示されます。 １．AngularJSのサービスの概要 ２．factory、service、providorメソッドの使い分け ３．サンプルコード １）全体の概要 ・AngularJSのサービスは、アプリケーション全体で利用する”状態”や”振る舞い”を保持することが出来る関数やオプジェクト。 何度も利用される”振る舞い”、共有する”状態”、キャッシュなどをサービスを使って実現出来る。 ・サービスは一度だけインスタンス化され、アプリケーション内でコントローラなどがサービスにアクセスする際は、どれも同一のサービスインスタンスにアクセスする事が出来る。 ・サービスがインスタンス化されるのはそのサービスに

<strong>１）Wayデータバインディング</strong> <div>１）二重波括弧：私は{{country}}在住です。</div> <div>２）ng-bind：私は<span ng-bind="country"></span>在住です。</div> <div>３）二重波括弧：私は{{country}}在住の{{gender}}です。</div> <div>４）ng-bind-template：私は{{country}}在住の{{gender}}です。</div> <div ng-non-bindable>二重波括弧{{....}}を表示するには、ng-non-bindableを使用。</div> <strong>２）２Wayデータバインディング</strong> <div>私の名前は{{name}}です。</div> 名前:<input ng-model="name" />

スクリプト内にラジオボタンに表示するラベル名と値を定義し、ng-repeatを使ってラジオボタンを作成する方法をまとめました。 デモとコードサンプルはこちら。 ※目次をクリックすると目次の下部にコンテンツが表示されます。 １．$parent属性を使用する方法 ２．JavaScriptのプロトタイプ継承使って設定 ３．ラジオボタンのng-change属性の使用例 スクリプト内に定義した$scope.prefsの配列データをng-repeatを使ってラジオボタンを生成する例を下記に示します。 <div class="radio" ng-repeat="item in prefs"> <label> <input type="radio" ng-model="$parent.selectedPref" value="{{item.id}}">{{item.name}} </label> </di

指定したディレクトリ内のファイルのパス一覧とディレクトリのパス一覧を出力するスクリプトを作成しました。 このスクリプトでは、①指定したディレクトリ内のファイル（ディレクトリ）一覧取得、②ファイルとディレクトリの判定、③配列への代入、④配列の表示を行っています。 ①ファイル一覧を取得 “/home/user/”というディレクトリ配下のファイル一覧を表示する例です。 files="/home/user/*" for filepath in $files; do echo $filepath done ②ファイルとディレクトリの判定 ・通常のファイルであるか判定 if [ -f $filepath ] ・ディレクトリであるか判定 if [ -d $filepath ] ③配列への代入 ・空の配列を作成 fileary=() ・配列に要素を追加 変数$filepathの中身をfileary配列に追

MySQLサーバーに接続する際にはMySQLのユーザー名とパスワードが必要になります。MySQLインストール時にデフォルトで匿名ユーザーが作られているので、MySQLユーザーを作成しなくてもその匿名ユーザーを使ってすぐに作業することもできます。 しかし、この匿名ユーザーのパスワードは設定されていなく、誰でもログインできてしまう状態で、セキュリティ上問題があります。匿名ユーザーのパスワードを設定するか、匿名ユーザーが不要ならば削除する事が推奨されています。 以下、MySQL5.1の環境での確認、対応例を示します。 １）匿名ユーザーにパスワードが設定されていないと・・・ 匿名ユーザーは、ユーザー名が空で名前がないユーザーで、パスワードが設定されていないと、下記のようにユーザー名、パスワードを入力しなくてもMySQLサーバーに接続できてしまいます。 $ mysql Welcome to the

○ファイルの所有者、グループ ・上記のlsコマンド表示例の”rails rails”の部分は、そのファイルの所有者と所有者のグループ ２）パーミッションの設定方法 chmodコマンドで設定します。 “testfile”というファイルに対して下記権限を付与する場合を例に示します。 所有者：読み(4)、書き(2)、実行(1) グループ：読み(4)、書き(2)、実行(1) 他ユーザ：読み(4)、実行(1) 各権限に与えられている数値を足し合わせて下記コマンドで設定します。 $ chmod 775 testfile $ ls -al testfile -rwxrwxr-x 1 rails rails 0 9月 17 11:06 2013 testfile ３）誤解し易いディレクトリのパーミッション ファイルのパーミッションについては、すぐにイメージできるかと思いますが、ディレクトリについては少し分

yumコマンドでは、過去に実施したインストール、アップデートなどの作業を取り消して作業前の状態に戻す事ができます。 ※目次をクリックすると目次の下部にコンテンツが表示されます。 １．ある特定の作業を取り消して元に戻すには？ ２．ある特定の時点まで複数のパッケージをまとめて元に戻す ある特定の作業に該当するトランザクションIDを指定して下記コマンドを実行すると元に戻す事が出来ます。 yum history undo トランザクションID 例）”bind”のパッケージに関する作業を元に戻す場合 ①トランザクションIDを確認する # yum list history packeaages-list bind* Loaded plugins: fastestmirror ID | Action(s) | Package ---------------------------------------

yumによるパッケージ操作は、yumで過去に実施した操作の履歴も確認する事が出来ます。 ※目次をクリックすると目次の下部にコンテンツが表示されます。 １．実施時期などを基に過去の履歴を調べる ２．すでにインストール済みのパッケージのリストを表示 １）過去にyumで実施した全作業のリストを表示する “yum history list all”で表示できます。 例） # yum history list all ID | Login user | Date and time | Action(s) | Altered ------------------------------------------------------------------------------- 33 | <rails> | 2013-03-05 17:55 | Install | 2 32 | <rails> |

CentOSでは、ユーザー環境変数やアカウント環境を設定するファイルがいくつかありますが、それぞれのファイルの特長、処理内容などについてまとめてみました。 ※目次をクリックすると目次の下部にコンテンツが表示されます。 １．ユーザー環境設定ファイルの概要 ２．各設定ファイルのデフォルトの内容 ３．設定変更時の注意 １）各ユーザーアカウント固有の設定ファイル ○.bash_profile ・システムへログインする際に、ログインシェルがこのファイルを読み込んで実行する。 ○.bashrc ・コマンドラインから”bash”と入力して、新しいサブシェルを起動する際に、.bashrcを読み込んで実行する。 ○.bash_logout ・ログインシェルが終了するたびに読み込まれて実行される。 ２）全ユーザー共通に使われる設定ファイル ○/etc/profile ・全ユーザー共通のログイン時に実行される

別の記事（パーマリンク、FTP接続情報）に記載したようにテーマやプラグインのインストール時に”FTP接続情報”が表示されしまう、.htaccessファイルの自動更新ができないといった事象を回避するために、WordPressディレクトリとファイルの所有者をWebサーバ実行ユーザである”apache”にする、という方法があります。 しかし、オンラインマニュアルを見るとセキュリティ的にあまり望ましくないようです。オンラインマニュアルの推奨設定に従って設定した例を示します。 ※目次をクリックすると目次の下部にコンテンツが表示されます。 １．パーミッション設定の指針 ２．Webサーバー実行ユーザーの書込み権限が必要なディレクトリ、ファイル ３．設定変更手順 下記参考情報を基にパーミッション設定の指針をまとめました。 『Hardening WordPress　File Permissions』 『Ch

NessusでCentOS6.2のVPSサーバーに脆弱性診断を行った際、ICMPタイムスタンプリクエストの脆弱性がレポートされました。 重要度は”info”ですが、内容を調べ対策を施しました。 ●ICMPタイムスタンプリクエストとは？ PINGと同じICMP（Internet Control Message Protocol）というプロトコルの通信で、PINGは、ICMPのタイプ8でエコー要求し、タイプ0のエコー応答を受け取っています。 一方、ICMPタイムスタンプリクエストは、ICMPのタイプ13を使用し、タイプ14のタイムスタンプ応答を受け取り、リモートシステムから現在の時間を受け取ります。 ●ICMPタイプスタンプリクエストの脆弱性 下記サイトの情報によると、下記懸念があるようです。 ICMP time stamp request (ICMP_Timestamp_Request) ・

“yum list”コマンドで、現在インストールされているパッケージのリスト、バージョン、アップデート可能なパッケージのリスト・バージョン、これからインストールしたいパッケージのバージョンを調べたりする事ができます。 ※目次をクリックすると目次の下部にコンテンツが表示されます。 １．”yum list”コマンドの出力形式 ２．すでにインストール済みのパッケージのリストを表示 ３．アップデート可能なパッケージのリストを表示 ４．リポジトリより古くなっているパッケージのリストを表示 ５．これからインストールしたいパッケージを調べる場合 ６．ある特定のパッケージを調べたい場合 ○出力形式 name.arch [epoch:]version-release repo or @installed-from-repo 左から、”パッケージ名.アーキテクチャー”、”リリース番号”、”どのリポジトリからイ