Sierですが何か?

仕事、趣味などで興味を持った技術など(ブログタイトル迷走中)

【Aurelia】MacでAureliaのインストールからUnitテストまで

プログラミング Aurelia JavaScript

f:id:shinji-fsi-5761:20161008022107j:plain

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をカスタマイズするか
    • 1-1.タスクランナーがBabelで､他はデフォルト(3.へ)
    • 1-2.タスクランナーがTypeScriptで､他はデフォルト(3.へ)
    • 1-3.すべてカスタマイズする
  • 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'が画面に出てくるはずです｡
f:id:shinji-fsi-5761:20161014013419p:plain
また､実行時に'--watch'オプションを付けることで､ソースコードの修正を行ったとき､サーバーを再起動する必要なく最新のソースコードで再表示してくれます｡

Unitテスト

最後にUnitテストを実行します｡プロジェクトのカレントディレクトリで以下のコマンドを実行します｡

$ au test

コンソール上にkarmaが実行されたことを確認できればOKです｡

まとめ

Aureliaの導入からUnitテストの実行までを記載していきました｡自分はcliと言うものを初めて触ったため､ここまで便利なものだとは思いませんでした｡

ただ､Aureliaは入門こそ記事などは多いのですが､詳細なドキュメントは公式だけしか見つからず､それ以降の解説サイトもほぼ見つかりませんでした｡

これから人気が出るかは微妙ですが､個人的にはAngularに似ていて好きだったためこちらの方もブログで扱っていこうと思います｡

次回はルーティング周りなどを記載しようかと｡では｡

参考

Aurelia 公式HOME
AngularJSはもう古い？未来志向フレームワークAurelia.JSを試してみた！


にほんブログ村 IT技術ブログへ
にほんブログ村

【Node.js】ERRNO -4058が起きたときの対処

日記 その他

10cmです。こんにちは。
仕事場でNode.jsを使っていたのですが、久しぶりに環境の整備をしたときにエラーが出てきました。

今回の記事は、そのときの現象と対処法を示します。

っと言っても、ログファイルとかはないです。（さすがに会社のPC4で記事を書くわけにもいかないため。。）


現象をざっくり書くと下記のような感じです。

  • package.jsonを他のプロジェクトを流用してinstallしようとした
  • 管理者権限で実行せよと怒られた
  • 管理者でコンソールを実行して再びinstall
  • よくわからないエラー発生

よくわからないって言うのも、エラーメッセージが「時間をおいてもう一度実行してください」的な曖昧なメッセージ。

ERRNOを頼りに検索してみるも、だいたい番号違いの記事。やっと見つかるもそこは英語の質問サイトでした。

書いてあることは、不要なファイル消して、フォルダの場所移動してpath変えて実行してみろ！って感じ（多分。。。）

そこまでしないといけないのかと思いつつ、自分がとった行動は

とりあえず再インストールするか

結果はうまくいったんですが、、、なんなんですかね？

このてのツールのエラーナンバーとかってどこかにドキュメントないんでしょうか？

とまぁ、愚痴でしたf(^_^;

【AngularJS】angular-ui-routerを使ってメニューから表示する内容を切り替える

プログラミング AngularJS JavaScript

f:id:shinji-fsi-5761:20161008022107j:plain

10cmです｡こんにちは｡今回は､AngularJSの"angular-ui-router"(以下､ui-router)を用いて､メニューバーから表示する内容を切り替える処理を記載していきます｡

はじめに､完成イメージです｡ "コンテンツA"と"コンテンツB"のリンクがあり､それぞれ専用の画面を表示します｡今回の例では､"コンテンツA"は赤い四角を､"コンテンツB"は緑の四角を表示します｡

コンテンツA
f:id:shinji-fsi-5761:20161009194843p:plain

コンテンツB
f:id:shinji-fsi-5761:20161009194906p:plain

以下に､今回のディレクトリ構成を示します｡

ディレクトリ構成
----------------------

カレントディレクトリ
 ├ 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)

まず､メニューの作成を行います｡以下にソースコードを示します｡

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)

ここでメニューと作ったコンテンツの紐付けを行います｡その前に､表示切り替えのイメージの説明をしたいと思います｡

f:id:shinji-fsi-5761:20161009195555p:plain

メニューが選択されたとき､設定されていた"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 Reference

俺得ブログの書き方について

その他 自己啓発

この記事は､"俺が"得するためのブログの書き方について記載していきます｡
･･･ん?俺得?見に来たみなさんやないのかって?
この記事は､あくまで自分なりに調べまとめたものです｡

この記事は､みなさまからビシバシとご指摘頂いて､より良いものにどんどん更新していくことが目的です｡

『こいつ何いってんの?』とか『うっはwwwwダメだこいつwwww』ってなった方はどうかアドバイスをお願い致します｡

また､HOWTOを求めてやってきた方は､いいね的だけでも押して行ってください｡よろしくお願いいたします｡

ブログ(記事)の書き方について (Re.2016/10/08)

f:id:shinji-fsi-5761:20161008022107j:plain

はじめまして｡自分はSierとして働いているものです｡まだ2年目のひよっこですが､プログラミングなどはそれなりにかけるつもりです｡しかし､社会人になり設計書などプログラミング以外の仕事に携わる機会があるのですが､国語力0の自分はいつも上司に怒られています｡

そんな状況を打破するべく､技術ブログを始めたのはいいのですが､PVがぜんぜん上がりません｡特定のユーザーにしか見られないとは言え､ここでも国語力0が響いています｡そんな自分がまず学ばなければいけないのは､技術力ではなく国語力なのだとここでようやく気が付きました｡(今頃)

この記事は､そんな自分が2日ほどで調べて得たノウハウをまとめたものです｡

1.ゴールを決める

f:id:shinji-fsi-5761:20161008022138j:plain
まず､この記事で何を伝えたいのかを､何を発信したいのかを決めます｡ゴールとは､この記事を読んだときに何ができるようになるのか｡何を得られるのか｡

ブログを見にくる人は､キーワードで検索したり､まとめサイトなどから来ていると考えられます｡そんな人がはじめに何を見るのかというと､記事のタイトルです｡タイトルは､この記事を見たときに何が記載されているのかを短く簡潔に書く必要があります｡

そのためには､まずこの記事で何を伝えたいのか(ゴール)を明確にしなければなりません｡ゴールを設定する上で気をつけるべきことは曖昧にしないことです｡

例えば､この記事はどこに向けて発信したいのか｡ターゲットは初心者なのか､上級者なのか｡一般向けなのか特定の人向けなのか｡

『初心者のための○○』や『入社3年目からの○○』では､記事の内容などが違うことがはっきりします｡また､こうやって絞ったゴールにすることで､そのままタイトルとしても使えるようになります｡

2.見出しを決める

f:id:shinji-fsi-5761:20161008022155j:plain
設定したゴールに対して､どのような順で説明していくかを考えます｡
このとき､決めたゴールによってスタートの位置を決めると良いでしょう｡

例えば､『入社3年目からの○○』であれば､この記事を見に来る人は『入社3年目』前後の人でしょう｡そういった人はどの程度知識を持っているのかを考えてれば､スタートを決められると思います｡

また､スタートからゴールまでの距離も意識しましょう｡書きたいのはあくまで1ブログの記事です｡長くなりそうなのであれば､タイトルに(その1)など､細かく分けることも考えましょう｡

上記を踏まえた上で､細かい見出しを設定していきます｡見出しは大まかにどのようなことを行うのかを書いていきます｡もし､一つの見出しに記載しなければいけないことが多いのであれば､中､小見出しで更に細分化しましょう｡

3.見出しごとに記載する内容を決める

f:id:shinji-fsi-5761:20161008022211j:plain
今度は見出しの中身を記載していきます｡見出しを先に決めておくことで､記載すべき内容は明らかになっているため､スラスラと書けると思います｡

しかし､書いていくと思っていたより説明が長くなったり､見出しに書いている内容から外れたりしてきます｡そうなったときは一度手を止めて､『2.見出しを決める』に戻ってみると良いかもしれません｡

まずは全体の構成をもう一度見直し､大見出しで分ける必要があるのか｡小見出しで分けたほうが良いのか｡一度離れてみると良いかもしれません｡

4.完成後の見直し

f:id:shinji-fsi-5761:20161008022228j:plain
記事の内容を一通り書いたら､体裁を見直しましょう｡
注目してほしいワードに使っているフォントサイズや色､画像の差し込み位置､文と文の改行などをチェックしていきます｡

また､これらのチェックは日をまたいでからやると良いかもしれません｡実際に書いている最中というのは気が付きにくいもので､数日後に見直してみると､何が言いたいのかよくわからなかったりするものです｡

こういった見直しは客観的に見る必要性があるため､環境を変えて行うのも一つです｡いつものカフェで記事を書いていたなら､見直すのは家の中で読んだり､通勤中の電車を待っている間などで読んでみるのがよいでしょう｡

ある記事では､以下のように書かれています｡

ブログ記事は修正作業に一番時間をかけよう

ライター初心者が知っておきたい良いブログ記事の書き方まとめ


それぐらい見直し､修正は大事だということですね｡

まとめ

いかがでしたでしょうか?まだまだ勉強したてなため､ご指摘したいことがたくさんあったと思います｡でも､その声がないと自分は学べない気がしたため､『俺得』という形で記事を書かせて頂きました｡

なので､遠慮なく『ビシバシ』とアドバイスくださるとありがたいです｡そして､今後の記事作り､仕事でのドキュメント作りの役に立てるよう日々精進していきます｡どうか冷たい目で見守っていてください｡

CentOS7.0にNode.jsを導入しサーバーを実行してWebブラウザで接続するまで

JavaScript プログラミング

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"と表示されます｡
表示されれば成功です｡仮想サーバーにブラウザからアクセスしてみましょう｡

f:id:shinji-fsi-5761:20161005001537p:plain

期待通りの出力ができていればOKです｡

まとめ

CentOS7.0上にNode.js､NPMの環境を構築し､サーバーを立ててブラウザから表示するまで｡

報連相と職場の空気について

その他 日記

先日、弊社の研修を受けてきた。内容は社会人ならよく聞くほうれんそうについてである。

えっ？ほうれん草？
違います。報連相です。（茶番乙）

ツッコミどころ満載のPVをみて、何がおかしいか答える、ありきたりな研修である。

そんな中、ふとこんな話が出てきた。

『職場の空気＝報連相の質』

この2つがイコールになるのはなんとなくわかる。
では、『職場の空気が悪いから報連相の質が下がる』のか、『質の悪い報連相が続くから職場の空気が悪くなる』のか。
自分は、前者だと思う。職場の空気が悪かったり重かったりすると、報連相に限らず話すだけでも辛いものがある。
（今、話しかけて大丈夫なのかな....？）なんて思うことも多々ある。

これは、自分が報連相をする立場だからだろうか？
上司は逆で、自分のような報連相が下手くそな人と接すると期限が悪くなり、その結果、職場の雰囲気が悪くなると言うのだろうか。

仮にそうだとすると、部下である自分がしっかりすれば良くなるだろうか？
しかし、上司によって報連相のやり方、頻度は異なるものである。
ある上司への報連相は100％でも、他の上司も同じように報連相をしても納得はいかない。

では、部下である自分はどうするべきなのか？
もちろん、『報連相する上司に合わせて行動する。』が一番良い答えなのだろう。
それを完璧にこなせば、職場の空気は保たれるかもしれない。
しかし、タイミングだけの話なら良いが、話す内容の粒度を上司によって合わせていたら、ストレスがやばそうです。

今30代、40代の皆さんはどうやって過ごされていたのでしょうか？


まとめ。
まぁ、報連相の質だけで職場の空気は決まりませんが。。、

【AngularJS】ng-appとモジュールについて

プログラミング AngularJS JavaScript

この記事は､以下の開発環境のもと行っています｡
AngularJSの記事を書いていく上での開発環境

ng-appとは

AngularJSの機能を有効/無効の切り替えを行うためのもの。

以下に、"ng-app"を記述しているとしていない場合のソースコードと結果を示す。

記述していない

ソースコード:

<body>
	<p>{{ 3 + 4}}</p>
</body>

出力結果:
f:id:shinji-fsi-5761:20161002173038p:plain

記述している

ソースコード:

<body ng-app>
	<p>{{ 3 + 4}}</p>
</body>

出力結果:
f:id:shinji-fsi-5761:20161002173045p:plain
{{…}}は"Angular式"と呼ばれる。
式の中に記述された結果を出力してくれる。
式には、単純な数式の他に、"ng-bind"で設定した値なども入力することができる。("ng-bind"については後日)
今回の例では、"ng-app"が無効になっている方は、『{{ 3 + 4 }}』と､文字列で表示されているが､有効になっている方は『7』と出力されていることがわかる｡
以上が､"ng-app"の有効／無効の違いである｡

モジュールについて

プログラミングにおいて､コードを機能ごとにモジュールやパッケージとして管理することがある｡AngularJSでは"mojuleメソッド"が提供されており､アプリケーションを構成する要素を､モジュール配下に置く｡

モジュールは以下のように作成する｡

HTML

<body ng-app="モジュール名">

JavaScript

var app = angular.module('モジュール名', ['依存モジュール']);

angular.moduleはグローバルAPIと定義されており､モジュールの作成を行ってくれる｡
モジュール名は､"ng-app"に対して属性値を設定したものがそれになる｡
JavaScriptで定義した"app"はModuleオブジェクトとなり､以下のような機能が付与される｡

  • animation
  • config
  • constant
  • controller
  • directive
  • factory
  • fillter
  • provider
  • run
  • service
  • value
  • name
  • require

詳しくは各々の記事を記載する予定です｡(自分はまだ"controllerとservice,configくらいしか使ったことないですが...)

参考

js STUDIO
My Web Tutorial