カテゴリー: angularJS

AngularJS WebSite作成 〜BootStrapThemeから作成する〜

JavaMEとWebsiteの作成を並行して進めていくので記事がJavaだったり。。。Angularだったりしますが、両方やります。

AngularJSでウェブサイトを作る

今回のウェブサイト作成に関しては、自分のレンタルサーバーでイマドキのウェブサイトを作成して行こうという企画です。
そもそもは、このようなものを作成したかったのですが、詳細部分が決まらずに、ここまで伸びできた次第です。。。

BootStrapテーマから作る

AngularJS + BootStrap + WebAPI(PHP使用)の形で作成したいと思います。
＜必要な環境＞

  1. AngularJS(HTMLで読み込む)
  2. BootStrap(HTMLで読み込む)
  3. レンタルサーバー上のPHP
  4. レンタルサーバーのDB

とりあえずは、テンプレートをコピーしてきます。
そして、今回はヘッダーと。。。下のようなテンプレートをコピーしてきました。

そして、左側のサイドバーに下のようなCSSを適用してスライド式のメニューバーを作成しました。以前に技術ポータルを作成しようとして作ったものです。しかし、「役に立つのか？」と疑問に思い却下したアイディアでした。。。

    /* for horizonal menu */
    div.scrollmenu {
      background-color: #333;
      overflow: auto;
      white-space: nowrap;
    }

    div.scrollmenu a {
      display: inline-block;
      color: white;
      text-align: center;
      padding: 14px;
      text-decoration: none;
    }

    div.scrollmenu a:hover {
      background-color: #777;
    }

作成中のサイト(ページ)は現状の出来はこちらのリンクにあります。(随時増築していきます。)

設計から入ります

今回の作成するもののイメージを大雑把に申し上げると以下のようになります。

  1. GoogoleMapにイベント情報を掲載
  2. GoogleMapへの登録にはログインが必要
  3. イベント情報は、「メールを受信したら」 or 「ログイン後の画面上で登録」
  4. ログインしない人は登録されているイベント情報(イベント場所、時間、日付)を閲覧することができます。

このような要件を満たすように実装を進めて行こうと考えていますが、まずは表示するべき情報を登録する仕組みから作成しなくてはならないので、ログインの実装から入ろうと思います。
ちなみにGoogleMapへの表示は確認済みです。

下の画面の「Login」を押下した時に、ログイン情報入力用のダイアログを表示することから始めて行こうと思います。

大まかな計画は以下の通りです。

実装計画(手順)

  1. Loginをクリックしたときにダイヤログを開く
  2. 開いたダイアログにログイン情報を入力
  3. ユーザー認証を行う
  4. ログイン画面で、新規ユーザー登録も行える
  5. 新規登録の場合は入力項目が増える
  6. ユーザー画面を開く
    6-1. ユーザー画面は考え中
    6-2. 画面からイベント情報の登録ができる
    6-3. イベントの開催場所を(ブックマーク的な)登録できる

とりあえずは上記のような機能を実装する予定です。

ちょっと実装したものをゆっくりと眺める必要があります。
でわでわ。。。



AngularJS チュートリアル7〜$http 外部画面(HTML)を取得する〜

今回は$httpオブジェクトを使用して自分のホームページ(サーバー)を起点として、外部にあるHTMLを取得、表示するためのチュートリアルをやろうと思います。

$httpオブジェクト

参考URLはこちらです。
単純にHTTPリクエストを送信して対象のURLからHTMLを取得するものです。

リクエストの種類

GET

今回使用するリクエストのメソッドです。よく「GETリクエスト」などと呼びます。このリクエストはhttp://XXXX,com/XXX.htmlなどのように対象のHTMLをダウンロードしようとします。ブラウザで表示しているのもこのリクエストになります。
こうして取得したHTMLをブラウザで表示、もしくは何かしらの処理を行う。。。などいろいろなことができます。

そして、パラメータをつけてJSONを取得するなどのWebAPIを使用する場合にも使用します。パラメータは下のようにつけてやります。
http://XXX.com/webapi/request/?param1=XXX¶m2=OOOOこんな感じで送信します。

POST

上のようにGETで用が足りてしまうのでPOSTメソッドはいらないだろう。。。そう思った方素晴らしい視点です。
しかし、上のようにパラメータを送信すると渡した値がURLで直接見えるため、セキュリティ的にアウトです。
例えば、URLに"XXX市XXX町2-1"などのように個人情報を含むような情報は送信できません。(情報漏洩です)
なのでPOSTメソッドの出番、となるわけです。

POSTメソッドは、単純にURLに値を渡さない方法です。
送信するURL(リクエスト)はhttp://XXX.comで良いのですが、ここでパラメータ(ユーザー名など)をサーバー側に送信したい場合はフォームに値を設定して送信します。
このようなリクエストをPOSTリクエストと呼びます。

本題

今回のように、HTMLをダウンロードするなどしてファイルを参照するときは、Webサーバーを起動してからAngularを実行する必要があります。
最近のブラウザはセキュリティがかかっているのでサーバーを解さないとエラーで対象のHTMLが取得できません。

実行する

参考サイトのコードをコピって(ちょいと修正して)起動してみると下のように表示できます。

コードは下のようになっています。HTMLとJSを１つのファイルに書いています。(チュートリアルなので、わかりやすいようにしています)、そして実行結果はこちらで確認できます。取得している「test.html」は、ブラウザで表示すれば、ただのテキストですが、取得したものは <div>タグがついています。。。

<!DOCTYPE html>
<html lang="ja">
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
    </head>
    <body>
        <div ng-app="myApp" ng-controller="myCtrl">

        <p>Today's welcome message is:</p>
        <h1>{{myWelcome}}</h1>

        </div>

        <script>
        var app = angular.module('myApp', []);
        app.controller('myCtrl', function($scope, $http) {
        $http.get("test.html")
          .then(function(response) {
            $scope.myWelcome = response.data;
          });
        });
        </script>
    </body>
</html>

コードについて

初めにJSが起動します。
var app = angular.module('myApp', []);でアングラーモジュールを作成。
app.controller('myCtrl', function($scope, $http) {でコントローラーを作成します。controller()の第一引数はコントローラー名、第二引数はコントローラーの処理(function)です。
ここで$scopeに設定している変数がHTML側で{{}}で囲っている部分にバインドされます。
なので、上のコード$scope.myWelcomeの値を表示するときは{{myWelcome}}を書けば良いです。

でわでわ。。。



AngularJS カスタム〜BootStrapと合わせて画面の調節をする〜

今回は、BootSrapとAngularJSを併用して画面をカスタムしてみようと思います。目的はのちに、「$http」オブジェクトを使用してデータなどを表示するためです。「$hhtp」オブジェクトの主な用途としては、以下のようなことです。

  1. 他のHTMLとかページを取得する。
  2. WebAPIでオープン・データを取得する。
  3. postリクエストでサーバー側のAP(Loginなど)を起動する。

参考サイトはこちらです。

上のことを実現するために、まずは表示方法を変えなくてはいけないのでそちらの方を先にやります。
そして、今回作成するものは「技術ポータル」サイトを作成したいと思っております。のんびりやるつもりです。

作成したもの

現状のやること

  1. 画面の左サイドバーを横スクロールメニューにする
  2. それに合わせて右サイドバーの幅を広げる
  3. AngularJSでコントロールしたいので変数で調節

なので以下のような修正を加えました。
＜HTMLの修正＞

        <div class="scrollmenu" style="display:{{leftSideBar_disp}}">
      <a ng-repeat="categ in techCategories" href="#">{{categ}}</a>
    </div>

      <div class="col-sm-3 text-left panel panel-default">
        {{secondMessage}}
      </div>
      <div class="col-sm-3 text-left panel panel-default">
          {{thirdMessage}}
      </div>
      <div class="col-sm-3 text-left panel panel-default">
          {{fourthMessage}}
      </div>

＜JSの修正＞

    // 左のサイドバー
    $scope.leftSideBar_disp = "block";
    $scope.leftSideBar_size = 2;
    // 右のサイドバー
    $scope.rightSideBar_disp = "block";
    $scope.rightSideBar_size = 3;
    var messArray = [];
    // メッセージテキスト設定する
    if (docLang == 'ja') {
        messArray = JAPANESE_MESSAGE;
        $scope.techCategories = JAPANESE_CATEGORIES;
    } else {
        messArray = ENGLISH_MESSAGE;
        $scope.techCategories = ENGLISH_CATEGORIES;
    }

見た目は下のようになりました。

エラーが出たところ

表示するデータ(日本語、英語など)を別のJSファイルに分けたのですが、従来のように「var」で宣言した変数は定数として認識されないようなので「const」で宣言したら直りました。

カスタムの結果

ヘッダメニューの下にカテゴリを選択するような横スライド式のカテゴリ選択する部分を作成しました。
今後はこれらを押下すると、それぞれに対応する画面をメイン部分に表示する。。。というイメージです。

でわでわ。。。



AngularJS チュートリアル6〜モジュールの扱い in W3schooles〜

今回はAngularモジュールの扱いを学習します。
参考ページはこちらです。
前回までに、おぼろげながら理解できた「モジュール」について学習します。

モジュール

早い話がvar app = angular.module('myApp', []);の部分です。
これを変数に取り出しているので「app」j変数を操作することがモジュールの操作になります。
今までは下の様にとりあえずでコントローラーを追加していました。
app.controller('myCtrl', function($scope) {このコントローラーで使用する変数などを画面のHTML部分とバインドして表示・非表示をコントロールできます。

ディレクティブ

今まではng-XXXの部分のみをさしていましたが、今回からは下の様なものもディレクティブと呼びます。というかこちらが正しいのかも？
<ディレクティブ名></ディレクティブ名>
実装の仕方としては以下の様になります。

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="myCtrl">

    First Name: <input type="text" ng-model="firstName"><br>
    Last Name: <input type="text" ng-model="lastName"><br>
    <br>
    Full Name: {{firstName + " " + lastName}}
    <br/>
    <h3>ディレクティブ</h3>
    <w3-test-directive></w3-test-directive>
</div>

<script>
// モジュール
var app = angular.module('myApp', []);
// コントローラー
app.controller('myCtrl', function($scope) {
  $scope.firstName= "John";
  $scope.lastName= "Doe";
});
// ディレクティブ
app.directive("w3TestDirective", function() {
  return {
    template : "I was made in a directive constructor!"
  }
});

</script>
</body>
</html>

こんな感じで、HTMLに外部のHTMLを読み込むことができます。このtemplate: XXXXで指定して入る部分に、HTMLファイルを指定することもできます。
ただし、HTMLファイルを指定するときはtemplateUrl: を使用する様です。
まとめると以下の様になります。

// ディレクティブ
app.directive("w3TestDirective", function() {
  return {
//    template : "<h1>Hello World</h1>" -> html記述
    restrict: 'E',
    templateUrl: './tutorial1.html' // htmlファイル指定
  }
});

実行結果

チュートリアルの初めの方にやったものをディレクティブとして読み込んでいます。

今回は、この辺りで失礼します。

でわでわ。。。



AngularJS チュートリアル5〜変数の操作 in W3schooles〜

今回は、AngularJSのコントローラでの変数とHTML(テンプレート)の変数型に着目してみようと思います。
参考サイトはこちらです。

Number型

単純に数値型の扱い方です。しかし、JSでのデータ型はコード上では、とても曖昧なので注意しながらやります。
とりあえずはコードを見ます。

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>

<h3>数値の扱い</h3>
<div ng-app="" ng-init="quantity=1;cost=5">

<p>Total in dollar: {{ quantity * cost }}</p>

</div>

</body>
</html>

実行結果は下の様になりました。

しかし、これではいまいちよくわからないので、前回作成したものをカスタムして下の様に作って見ました。

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="myCtrl">

quantity: <input type="text" ng-model="quantity"><br>
cost: <input type="text" ng-model="cost"><br>
label color: <input type="text" ng-model="myCol"><br/>
<br>
<label style="background-color:{{myCol}}">
Full Name: {{firstName + " " + lastName}}
</label>

<h3>数値の扱い</h3>
<p>{{quantity}} * {{cost}} = {{ quantity * cost }}</p>

</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.firstName= "John";
  $scope.lastName= "Doe";
  $scope.myCol = "lightblue";
  // 数値の扱い
  $scope.quantity = 1;
  $scope.cost = 1;
});
</script>
</body>
</html>

やっぱり$scope.XXXの様に変数を用意してその中に数値を代入してやるということです。これを文字列にすると。。。

文字列の扱い

文字列の場合は、初めの方にやりました。実行結果は下のものになります。

コードは下の様になります。

<div ng-app="myApp" ng-controller="myCtrl">

First Name: <input type="text" ng-model="firstName"><br>
Last Name: <input type="text" ng-model="lastName"><br>
<br>
Full Name: {{firstName + " " + lastName}}
</div>

結局は変数に文字列を代入するか、数値を代入するかで扱い方が変わってくるということです。

JSの基本

数値は計算することができます。

var num = 2;
var result = 1 + num;

文字列は計算できません。

var num = 'moji';
var result 1 + 'moji'; // "1moji"と表示

下のはchromeの開発ツールでテストしたものです。
![](http://zenryokuservice.com/wp/wp-content/uploads/2019/10/スクリーンショット-2019-10-12-11.43.56.png)

こんな感じで、実装ができます。Angularのポイントが少しずつわかってきました。
## 今迄のまとめ
主要な部品(Angularを使うためのもの)には以下のものがある
1. モジュールvar app = angular.module('myApp', []);
2. コントローラーapp.controller('myCtrl', function($scope) { // 処理内容 }

そして、「$scope」のプロパティ$scope.XXXのXXXがHTMLでの変数名に使用できる({{XXX}})というところがわかってきました。

でわでわ。。。