Techvenience

Technology × Convenience - Vue / React / Next / Nuxt / ChatGPTなどのIT技術がもたらす便利さをお伝えします。最近はChatGPTなどのAI技術を使ってブログを書いています。

ビットコイン買いました

ビットコイン買いました

f:id:duo-taro100:20210427154744j:plain
btc


今までFXの経験しかないけど仮想通貨も面白そうなので買ってみました。
と言ってもギャンブルじゃないです。チャートで判断しました。
まあドル円とか為替のように仮想通貨のチャートも動くという前提ですが。


とりあえず10万円です。

【TensorFlow】TensorFlowを通してDeep Learningを学ぶ①【人工知能】

【TensorFlow】TensorFlowを通してDeep Learningを学ぶ【人工知能

f:id:duo-taro100:20160218004611p:plain

最近仕事が忙しく、ハイブリッドアプリを含めた記事の更新ができていない。
3月末には余裕が出てくると思うので、まとめて更新していく予定。

ハイブリッドアプリと並行して、TensorFlowの勉強もしていく。
今回はTensorFlowの導入だけ。

公式サイト
https://www.tensorflow.org/install/

ここを見れば説明はいらないと思うけど。
僕はMacOS
Macの人はここ
https://www.tensorflow.org/versions/master/get_started/os_setup

インストールの手順
■pip のインストール
■Virtualenv のインストール
■Virtualenv 環境の作成
■上記環境のアクティブ化
■TensorFlowのインストール

Mac以外ではやっていないので、Windowsでは手順が異なるかも?
Windowsは時間のあるときにやって追記予定(当分やらない)


TensorFlowのインストールまでできたとして話を進める。
まずはTensorFlowでHello, World!まで。
こちらを参考に
http://dev.classmethod.jp/machine-learning/tensorflow-hello-world/


Virtualenv 環境の作成で新たにディレクトリを作成したと思うが(僕の環境ではtensorflowというディレクトリを作成)、そのディレクトリ上で、テスト用のディレクトリを作成。

f:id:duo-taro100:20170315003021p:plain

今回はtestというディレクトリを作成した。
ここに適当なファイルを作って、Hello, World!を出力するためのコードを書いていく。

import tensorflow as tf
import multiprocessing as mp

num = mp.cpu_count()
con = tf.ConfigProto(inter_op_parallelism_threads=num,intra_op_parallelism_threads=num)
session = tf.Session(config=con)
hello = tf.constant('hello, world!')
print session.run(hello)

これでHello, World!と表示されるはず。
まずは、正しくTensorFlowがインストールできているかを確認するだけでもいいのでは。

次回以降で、上記の内容を説明します。

【OnsenUI ver.2】動的なリスト(ng-repeat)を作成して、詳細画面へ値を渡す【AngularJS】

【OnsenUI】動的なリストを作成して、詳細画面へ値やオブジェクトを渡す【AngularJS】

f:id:duo-taro100:20160218004611p:plain


【OnsenUI】動的なリストを作成して、詳細画面へ値やオブジェクトを渡す【AngularJS】

以前こんな記事を書いて、そのまま放置していた。

it-innovation.hatenablog.com

今回は、実装の本題に入る。

今回使うのはOnsenUIのnavigatorを使って、画面遷移とデータの受け渡しを行う。
OnsenUIのversionによって実装方法が異なるので、その辺りも詳しく。今回はOnsenUI ver.2での実装について。

■navigatorの定義

<ons-navigator var="myNavigator" page="list.html">
</ons-navigator>

■listの作成(ng-repeat)

<ons-list>
<ons-list-item ng-repeat="account in ctrl.accounts"
        ng-click="myNavigator.pushPage('accountDetail.html', {data: {account: account,index: $index}} )">
<span class="accountName">{{account.accountName}}{{account.amount | number}}円pushPage(遷移先ページ, {data : { 変数1: 値1 , 変数2: 値2} } )のようにすれば、遷移先の画面で変数1,変数2が使用できる。

ng-click="myNavigator.pushPage('accountDetail.html', {data: {account: account,index: $index}} )"

ここでは、ng-repeat="account in ctrl.accounts" で定義しているaccountとループ回数を表す$indexをaccountDetail.htmlに渡すことができる。

■遷移先ページでの記述

遷移先の画面では以下のように書くことで、データを使える。

myNavigator.topPage.data. 変数

topPageは現在のページ情報を取得する。
dataはpushPageで定義したdata: {account: account,index: $index}のこと。

例えば、accountオブジェクトにaccountNameやamountというプロパティがある場合は、以下のように書けばいい。

<p>口座名:{{myNavigator.topPage.data.account.accountName}}</p>
<p>貯蓄額:{{myNavigator.topPage.data.account.amount | number}}円</p>

こんな感じ。結構簡単。
OnsenUI ver.1ではpushPageでにoptionsの書き方や、遷移先画面での呼び出し方が違う。
それは次回。

【環境構築】TensorFlowでHello, World !

【環境構築】TensorFlowでHello, World !

f:id:duo-taro100:20160218004611p:plain

【環境構築】TensorFlowで”Hello, World !”を表示してみる!

参考にしたのはこの記事です。
d.hatena.ne.jp

参考に、というかここに書いてある通りにやれば環境構築できる。
IT業界に入りたてのころは、このブログを見ても環境構築できなかったんだろうな・・・
と思ったので、もう少し細かい部分まで解説。

公式サイトはこちら

【前提条件】
【ターミナル起動】

macのターミナルを起動します。
ターミナルを起動したら、以下の記事通りに進める。
d.hatena.ne.jp

インストールし終わると、ファイルを作って"Hello, World!"を表示させている。
ここの簡単なやり方をもう少し細かく説明。

ディレクトリの作成】

インストール後はおそらく

(tensorflow) user-no-MacBook-Air:~ duotaro$

のように表示されていると思う。
先ほどのブログ通り進めていれば、このディレクトリの直下に「tensolflow」ディレクトリができているはず。
そのディレクトリに移動

$ cd tensorflow

この中にテストをするためのディレクトリを作成する。

$ mkdir 作成するディレクトリ名

今回は「testdir」という名前にする。

$ mkdir testdir

【テストファイルの作成】

作成したディレクトリに移動し、その中でテスト用の新規ファイルを作成する。
まずは移動。

$ cd testdir

ここで、新規ファイルを作成。

$ vi 新規作成ファイル名

今回は「test.py」という名前にする。
tensorflowはPyhthonが使われているので、拡張子は「py」になっている。

$ vi test.py

すると、新規ファイルが作成されるので、編集していく。

【ファイルの編集】

画像は「test2.py」というファイルを作成したところ。
f:id:duo-taro100:20160720011204p:plain

この画面で「 i 」を押すと、編集モードになる。
f:id:duo-taro100:20160720011255p:plain

ここに、

import tensorflow as tf
import multiprocessing as mp

core_num = mp.cpu_count()
config = tf.ConfigProto(
inter_op_parallelism_threads=core_num,
intra_op_parallelism_threads=core_num )
sess = tf.Session(config=config)

hello = tf.constant('hello, tensorflow!')
print sess.run(hello)

を書いていく。
終わったら、「esc」で編集モードを終了させる。
「:w」で保存し、「:q」でファイルを閉じる。
これでファイルの完成。

【ファイルの実行】

ここでファイルを実行して、想定通りの結果になるか確認する。
testdirディレクトリ上で「test.py」を実行する。

$ python test.py

すると、結果は以下のようになる。

I tensorflow/core/common_runtime/local_device.cc:25] Local device intra op parallelism threads: 4
I tensorflow/core/common_runtime/local_session.cc:45] Local session inter op parallelism threads: 4
hello, tensorflow

これでTensorflowを使って「Hello, World ! 」の表示ができた。

次回以降は、チュートリアルを進めていく予定。

機械学習(ディープラーニング)のためのフレームワーク

機械学習ディープラーニング)のためのフレームワーク

f:id:duo-taro100:20160218004611p:plain

ディープラーニング機械学習の本質というか、背景にある理論を理解するのは難しい。
理解してからプログラムを組むとなると、いつまで経っても実装できない。
とにかく使ってみることが大事!
次回以降でそれぞれの環境構築まで説明できたらと思う。
今回はフレームワーク/ライブラリの概要説明。

どんなフレームワークがあるのか

  • TensorFlow
  • Chainer
  • Caffe

など。

TensorFlow

Google製の機械学習ライブラリ。pythonが使われている。
Google音声認識、翻訳、画像認識などの機能でこのTensorFlowを使用しているらしい。
環境構築はかなり楽。

f:id:duo-taro100:20160218004753j:plain

Chainer

Preferred Networksが開発したニューラルネットワークを実装するためのライブラリ。
PythonとNumPyが必要。NumPyについては簡単な知識でOK。
様々なタイプのニューラルネットを実装できる。
ニューラルネットワークに関する知識が必要になることもあるのがネック。

f:id:duo-taro100:20160218004600p:plain

Caffe

C++で実装されGPUに対応した高速なディープラーニングのライブラリ。
とある画像認識のコンテストで優勝したことで、有名になった。
Pythonの基礎がわかっていれば使える。ディープラーニングなどの知識もあると尚良い。

それぞれ特徴があり、得意分野などもある。
次回以降で環境構築をやっていく。

人工知能のカテゴリ - 機械学習・データマイニング・画像認識など -

人工知能のカテゴリ

f:id:duo-taro100:20160218004611p:plain

- 機械学習データマイニング・画像認識など -

まず人工知能とはいっても範囲が広すぎる。
代表的なカテゴリを挙げる。


f:id:duo-taro100:20160705003415p:plain
人工知能のどのカテゴリに最も興味があるのかで方向性が異なってくる。
例えば、人工知能を作りたい!といっても画像を認識する人工知能を作りたいのか、学習してアウトプットできる人工知能を作りたいのか、膨大なデータから必要な情報を抽出してくれる人工知能を作りたいのか。
現在の技術では全ての範囲をカバーできる汎用的人工知能を作ることが難しい。
f:id:duo-taro100:20160214124138j:plain
当ブログでは、「機械学習」と「データマイニング」に注目し、それぞれに合ったフレームワークを利用するまでを紹介する。


他にもアプリ開発やanglarJSの連載もあるので、ゆっくり焦らずに更新していく予定。
以上。

人工知能について

人工知能について

f:id:duo-taro100:20160218004611p:plain

最近、本業が忙しくアプリ開発やそれに伴うブログ更新が全くできなかった。
少し落ち着いてきたところで、今回から人工知能についてもまとめていくことにする。



人工知能(現在は人工無能とも言われているが・・・)を使ってやりたいことはアプリの顧客の情報を分類して、何かしらのビジネスにつなげること。
そのためにまずは機械学習に関して勉強していく予定。
人工知能とはいっても様々な分野があるので、それも追い追い紹介できたらと思っている。

f:id:duo-taro100:20160705003415p:plain

僕は一家に一台、人工知能を持つ社会がそろそろ来ると思っている。
これからは人工知能の時代!

次回以降で人工知能の概要などをまとめていく。
以上。

1-2【UI開発】画面内スクロールの実装 - 【連載】ハイブリッドアプリ開発で貯金管理アプリを作る【Cordova・Monaca・OnsenUI・AngularJS】

【連載】ハイブリッドアプリ開発で貯金管理アプリを作る【Cordova・Monaca・OnsenUI・AngularJS】

f:id:duo-taro100:20160218004611p:plain

1章 UI開発

1-2【UI開発】OnsenUIを使った画面内スクロールの実装【ons-carousel】

前回はページ遷移の方法に関してまとめた。
it-innovation.hatenablog.com

今回は画面内でスクロールを実装する。
作りたいのはこれ↓
youtu.be

画面全体をスクロールで動かすのではなく、画面内の一部をスクロールさせる。


CSSの解説はしないといったけど、実はこの実装はOnsenUIではなく、CSSでやっている。

index.htmlの一部

<div id="top_accountList">
  <ons-list id="accountList">
      <ons-list-item ng-show="ctrl.accounts.length" ng-repeat="account in ctrl.accounts"><span id="top_accountName">        {{account.accountName}}</span><span id="top_amount">{{account.amount | number}}円</span></ons-list-item>
      <ons-list-item ng-show="!ctrl.accounts.length">口座が登録されていません</ons-list-item>
   </ons-list>
</div><!-- #top_accountList -->

account.cssの一部

#top_accountList{
    margin: 0 auto;
    width: 100%;
    height: 60%;
    border: 1px solid #CCC;
    border-radius: 10px;
    box-shadow: 1px 1px #ccc inset;
    box-shadow: 1px 1px #ccc;
    overflow:auto;
}

cssファイルの一番下に記した「overflow:auto」がこの機能の実装方法。
本来は「overflow:scroll」がスクロール機能を実現するが、自動で処理を決める「auto」も基本的にはスクロール処理をしてくれるので、ここでは「auto」を使っている。

f:id:duo-taro100:20160218004753j:plain

overflowというのは「画面・ブロック」からはみ出た部分の表示をどうするのかを決定するためのもの。
以下の4つの書き方がある。

■overflow:visible
■overflow:hidden
■overflow:scroll
■overflow:auto

overflow:visible

初期設定はこれになっていて、対象の領域からはみ出ている部分も表示する

overflow:hidden

対象の領域からはみ出ている部分は非表示
f:id:duo-taro100:20160505000001p:plain

口座1から口座10まで登録してあるが、口座7以降は領域からはみ出ているので表示されない。

overflow:scroll

対象の領域からはみ出ている部分はスクロールで表示

最初の動画と同じ動きをする。
youtu.be

overflow:visible

自動。基本的にはスクロールして表示してくれる。
同上。

まとめ

画面内の一部領域でスクロールを実装する場合は、「overflow:scroll」または「overflow:auto」を指定する
f:id:duo-taro100:20160218005810j:plain

以上。
次回は「1-3【UI開発】OnsenUIを使ったリストの実装」

3-2.【ng-show】条件に応じて表示を変化させる② - 【連載】AngularJSの基本操作

【連載】AngularJSの基本操作

f:id:duo-taro100:20160218004611p:plain

3-2.【ng-show】条件に応じて表示を変化させる②

前回は条件によって表示を変化させる「ng-if」についてまとめた。

it-innovation.hatenablog.com

今回は以下の観点で「ng-show」の動きを細かくまとめていく。

・空文字の表示

・nullの表示

・空配列の表示

・trueの表示

・falseの表示

もともと「ng-show」はtrueであれば表示、falseであれば非表示だけど、空文字などはどうなるのかを実験してみる。

f:id:duo-taro100:20160322234907p:plain

早速ソースコード

data.js

var myapp = angular.module('myApp',[]);
myapp.controller('MyCtrl',function(){

this.str = 'Hello World!';
this.arrs = [
 {
  name:"kobayashi",
  score:24
 },

 {
  name:"kikuchi",
  score:18
 },
 {
  name:"yamada",
  score:87
 }
];

this.emptyStr = '';

this.nullStr = null;

this.emptyArrs = [

];

this.tBool = true;

this.fBool = false;
});

index.html

<!DOCTYPE html>
<html ng-app="myApp">
<head>
 <meta charset="UTF-8">
 <title>ng-show</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
<script src="js/data.js"></script>
</head>
<body>
 <div ng-controller="MyCtrl as ctrl">
   <h3>ng-showの表示条件</h3>
     <p ng-show="ctrl.emptyStr">空文字emptyStrを表示<br></p>
     <p ng-show="!ctrl.emptyStr">空文字emptyStrを非表示<br></p>
     <p ng-show="ctrl.nullStr">null(nullStr)を表示<br></p>
     <p ng-show="!ctrl.nullStr">null(nullStr)を非表示<br></p>
     <p ng-show="ctrl.emptyArrs">空配列emptyArrsを表示<br></p>
     <p ng-show="!ctrl.emptyArrs">空配列emptyArrsを非表示<br></p>
     <p ng-show="ctrl.tBool">boolean「true」を表示<br></p>
     <p ng-show="!ctrl.tBool">boolean「true」を非表示<br></p>
     <p ng-show="ctrl.fBool">boolean「false」を表示<br></p>
     <p ng-show="!ctrl.fBool">boolean「false」を非表示<br></p>
  </div>
</body>
</html> 

これを表示すると結果は以下の通り

ng-showの表示条件

空文字emptyStrを非表示

null(nullStr)を非表示

空配列emptyArrsを表示

boolean「true」を表示

boolean「false」を非表示


つまり「ng-show」の表示条件は

空文字は非表示
nullは非表示
空配列は表示
trueは表示
falseは非表示

ということ。

f:id:duo-taro100:20160218005810j:plain

次回は「3-2.【ng-hide】条件に応じて表示を変化させる③ - 【連載】AngularJSの基本操作」
以上。


1-1【UI開発】OnsenUIを使ったページ遷移の実装 - 【連載】ハイブリッドアプリ開発で貯金管理アプリを作る【Cordova・Monaca・OnsenUI・AngularJS】

【連載】ハイブリッドアプリ開発で貯金管理アプリを作る【Cordova・Monaca・OnsenUI・AngularJS】

f:id:duo-taro100:20160218004611p:plain

1章 UI開発

1-1【UI開発】OnsenUIを使ったページ遷移の実装 【Navigation・tabbar】

2017年8月24日記事の最新化 移行

www.sky-limit-future.com

 

www.sky-limit-future.com

 

 

 

下記の内容は古くなっています。

上に貼ったリンクから最新の記事を見てください。

 

 

 

今回から「【連載】ハイブリッドアプリ開発で貯金管理アプリを作る【Cordova・Monaca・OnsenUI・AngularJS】」の実装について書いていく。

it-innovation.hatenablog.com

このページで今後の掲載予定を書いている通り、最初の数回はUIの実装について。今回は「OnsenUIを使ったページ遷移の実装」

 

OnsenUIを使ったページ遷移は大きく分けて次の4つがある。

■ナビゲーション型

■スライディングメニュー型

■タブバー型

■スプリットビュー型

 

それぞれの詳細はこちらから。

本連載で作成するアプリはタブバー型での遷移がメインなので、タブバー型画面遷移の実装を行う。タブバー以外にもナビゲーション型での遷移も使用しているので、それも解説していく。

 

ナビゲーション型画面遷移

以下、OnsenUIのドキュメントから引用

ページが親子関係を持つ場合に一般的に用いられるパターンです。子ページへは、ボタンのタップや、リスト要素の選択などからリンクされます。ナビゲーションパターンを実装するためには、<ons-navigator><ons-toolbar>を組み合わせます。

親子関係を持つ場合に用いられる画面遷移方法。

今回はアプリ作成時にあるテンプレートを使用していて、それがこのネビゲーション型画面遷移を取り入れていたため、そのまま使用している。

index.htmlを親ページにしており、navigator.htmlを通してaccount.htmlが表示される設定になっている。

navigator.html

<ons-navigator var="myNavigator" page="account.html">
</ons-navigator>

 

index.htmlは特に手を加えていないので省略。

f:id:duo-taro100:20160501004317p:plain

このページはaccount.htmlだが、アプリの最初にこのページが表示される。

 

f:id:duo-taro100:20160322234952p:plain

タブバー型画面遷移

以下、OnsenUIのドキュメントから引用

iPhoneやiPadアプリでよく見られ、ページの下部にタブバーを配置したパターンになります。通常、タブバーにはいくつかの項目(アイテム)が並び、アイコンとテキストで表現されます。複数の機能を提供したいような場合に用いられます。Onsen UIでタブバーを実装するには、<ons-tabbar>コンポーネントを使用します。

多くのアプリがこの方式を取り入れている。先ほどの画像でもすでに実装済み。

index.html

<!DOCTYPE HTML>
<html lang="ja" ng-app="myApp">
<head>
//省略
</head>
<body>
 <ons-tabbar var="tabbar">

  <ons-tabbar-item icon="home" label="トップ画面" page="navigator.html" active="true">

 </ons-tabbar-item>

  <ons-tabbar-item icon="fa fa-pencil-square-o" label="履歴" page="history.html">

 </ons-tabbar-item> 

  <ons-tabbar-item icon="ion-stats-bars" label="グラフ" page="graph.html">

 </ons-tabbar-item>

  <ons-tabbar-item icon="gear" label="設定" page="config.html">

 </ons-tabbar-item>
</ons-tabbar>
</body>
</html>

 

赤文字の「active="true"」は現在のページを教えてくれるものなので、実装時には最初に表示されるページの<ons-tabbar-item>につけておく。

こうすることで、タブバーを利用して以下のような画面遷移が可能。

f:id:duo-taro100:20160501011055p:plain

ここまでで大きな画面遷移は完了。

最後に、それ以外の画面遷移について。

f:id:duo-taro100:20160218004753j:plain

pushPage( )とpopPage( )を利用した画面遷移

account.html

<div class="content" ng-app="myApp">
<div class="main" ng-controller="accountCtrl as ctrl">

<div id="top_add_account" >
<ons-button onclick="myNavigator.pushPage('add_account.html', { animation : 'slide' } )">口座を追加する</ons-button>
</div>
// 省略
</div><!-- .main -->

add_account.html

<ons-toolbar class="top_bar">
<div class="left">
<ons-back-button onclick="myNavigator.popPage({ animation : 'slide' } )">Back</ons-back-button>
</div>
<div class="center">口座追加</div>
</ons-toolbar>
<div class="main">
// 省略
</div><!-- .main -->

実はこれもナビゲーション型画面遷移だけど、ちょっと勝手が違うので分けて紹介してる。myNavigatorというのはnavigator.htmlで定義した名前。

navigator.html

<ons-navigator var="myNavigator" page="account.html">
</ons-navigator>

 

pushPage()は遷移させたいページを指定する。popPageは遷移してきた元のページに戻る。どちらもオプションで、遷移する際のアニメーションを設定できる。その種類はslide、lift、fade、noneの4つ。

以下のような画面遷移が可能。

f:id:duo-taro100:20160501012423p:plain

 

画面遷移については以上。

ここら辺はドキュメントをみれば難なくできるはず。

 

f:id:duo-taro100:20160218004600p:plain

 

以上。

【ng-if】空文字、空配列、nullの表示・非表示について -【付録】AngularJSの基本操作

【付録】AngularJSの基本操作

f:id:duo-taro100:20160218004611p:plain

【ng-if】空文字、空配列、nullの表示・非表示について

 

前回の記事が少し物足りなかったので、付録と言う形で追記。

it-innovation.hatenablog.com

ng-ifがどのような条件かで表示を行うのかを、もうちょっと細かくまとめてみた。

 

data.js

var myapp = angular.module('myApp',[]);
myapp.controller('MyCtrl',function(){
// 文字列
this.str = 'Hello World!';

// 配列
this.arrs = [
  {
    name:"kobayashi",
    score:24
  },

  {
    name:"kikuchi",
    score:18
  },
  {
    name:"yamada",
    score:87
  }
];


// 空文字

this.emptyStr = '';


// null
this.nullStr = null;

 

// 空配列

this.emptyArrs = [

];


});

 index.html

<!DOCTYPE html>
<html ng-app="myApp">
<head>
 <meta charset="UTF-8">
 <title>ループ文</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
<script src="js/data.js"></script>
</head>
<body>
 <div ng-controller="MyCtrl as ctrl">
 <p ng-if="ctrl.emptyStr">空文字emptyStrを表示<br></p>
 <p ng-if="!ctrl.emptyStr">空文字emptyStrを非表示<br></p>
 <p ng-if="ctrl.nullStr">null(nullStr)を表示<br></p>
 <p ng-if="!ctrl.nullStr">null(nullStr)を非表示<br></p>
 <p ng-if="ctrl.emptyArrs">空配列emptyArrsを表示<br></p>
 <p ng-if="!ctrl.emptyArrs">空配列emptyArrsを非表示<br></p>
</div>
</body>
</html>

f:id:duo-taro100:20160322234907p:plain

index.htmlでは空文字、null、空配列をng-ifの後ろに指定した場合の表示について調べている。ブラウザで開いた結果は以下の通り。

 

空文字emptyStrを非表示

null(nullStr)を非表示

空配列emptyArrsは表示

 

表示結果が結論を表しているが、まとめると以下のようになる。

 

■空文字の場合は非表示(!ctrl.emptyStrのように「!」をつければ表示)

■nullの場合は非表示(!ctrl.nullStrのように「!」をつければ表示)

■空配列の場合は表示(!ctrl.emptyArrsのように「!」をつければ非表示)

f:id:duo-taro100:20160218005701p:plain

以上

3-1.【ng-if】条件に応じて表示を変化させる① - 【連載】AngularJSの基本操作

【連載】AngularJSの基本操作

f:id:duo-taro100:20160218004611p:plain

3-1.【ng-if】条件に応じて表示を変化させる①


前回は「ng-Repeat」を使って、配列の中身をループさせて表示させる方法についてまとめた。

it-innovation.hatenablog.com

今回は「ng-if」を使って条件に応じた表示変化についてまとめていく。
ファイル構造は前回通り。

早速サンプルコード

data.js

var myapp = angular.module('myApp',[]);
myapp.controller('MyCtrl',function(){

  this.str = 'Hello World!';
  this.arrs = [
    {
      name:"kobayashi",
      score:24
    },

    {
      name:"kikuchi",
      score:18
    },
    {
      name:"yamada",
      score:87
    }
  ];
});

 

 data.jsについては前回と同様のものを利用。文字列「str」と配列「arrs」を持つコントローラを定義している。

f:id:duo-taro100:20160322234907p:plain

index.html

<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>ループ文</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
<script src="js/data.js"></script>
</head>
<body>
<div ng-controller="MyCtrl as ctrl">
<p ng-Repeat="arr in ctrl.arrs" ng-if="arr.score < 50">名前:{{arr.name}}<br>点数:{{arr.score}}<br></p>
</div>
</body>
</html>

 

今回の本題は以下の部分。

<p ng-Repeat="arr in ctrl.arrs" ng-if="arr.score < 50">名前:{{arr.name}}<br>点数:{{arr.score}}<br></p>

「ng-Repeat」については前回説明したので割愛。

2.【ng-Repeat】データをループさせて表示する - 【連載】AngularJSの基本操作 - The sky is the limit

 

ng-if="arr.score < 50"

この部分がなければ上記リンクでやったように、以下の内容が表示される。

 

名前:kobayashi
点数:24

名前:kikuchi
点数:18

名前:yamada
点数:87

 

「ng-if="arr.score < 50"」の箇所を加えることで表示を変えている。結果は以下の通り。

 

名前:kobayashi
点数:24

名前:kikuchi
点数:18

 

今回でいうと配列が持つscoreプロパティの値が50よりも低いものだけを表示させるという条件になっているので

 

名前:yamada
点数:87

 

の部分は表示されていない。このようにng-ifの後ろに書いた条件を満たせば表示、満たさないものは表示しない、というようになっている。

以下のリンクでng-ifについてもう少し掘り下げているので、興味があればどうぞ。

it-innovation.hatenablog.com

 

f:id:duo-taro100:20160218004600p:plain

以上。

 

2.【ng-Repeat】データをループさせて表示する - 【連載】AngularJSの基本操作

【連載】AngularJSの基本操作

f:id:duo-taro100:20160218004611p:plain

2.【ng-Repeat】データをループさせて表示する

前回はデータモデルをビューへ表示する方法をまとめた。今回はデータが配列などの場合に、それをループさせて表示させる方法をまとめる。

使うのは「ng-Repeat」

 

<前回までの記事>

it-innovation.hatenablog.com


準備するファイル構造については前回までと同様なので、わからない場合はこちらを参照。

 

■配列をループさせないで表示させた場合の実験

まずは実験で、配列を持つプロパティをそのまま表示させるとどうなるか。

index.html

<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
<script src="js/data.js"></script>
</head>
<body>
<div ng-controller="MyCtrl as ctrl">
<p>{{ctrl.arrs}}</p>
</div>
</body>
</html>

data.js

var myapp = angular.module('myApp',[]);
myapp.controller('MyCtrl',function(){

this.str = 'Hello World!';
this.arrs = [
  {
    name:"kobayashi",
    score:24
  },

  {
    name:"kikuchi",
    score:18
  },
  {
    name:"yamada",
    score:87
  }
];
});

 data.js内で「arrs」は配列を持っている。

上記のindex.htmlだと、以下のように配列がそのまま表示されてしまう。

 

[{"name":"kobayashi","score":24},{"name":"kikuchi","score":18},{"name":"yamada","score":87}]

 

実際に使う場合には、この配列をループの中で扱って表示する、と言ったことが多いと思う。

f:id:duo-taro100:20160322234907p:plain

■ループ処理の実装

index.html修正後

<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>ループ文</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
<script src="js/data.js"></script>
</head>
<body>
<div ng-controller="MyCtrl as ctrl">
<p ng-Repeat="arr in ctrl.arrs">名前:{{arr.name}}<br>点数:{{arr.score}}<br></p>
</div>
</body>
</html>

 

これで、画面を表示させると以下のようになる。(data.jsは変更しない)

名前:kobayashi
点数:24

名前:kikuchi
点数:18

名前:yamada
点数:87

 

f:id:duo-taro100:20160218005810j:plain

■修正箇所の説明

修正箇所は3つ。青色の 

<meta charset="UTF-8">
<title>ループ文</title>

 に関しては、文字化け防止などのために追加したので、本題とは無関係。

<p ng-Repeat="arr in ctrl.arrs">名前:{{arr.name}}<br>点数:{{arr.score}}<br></p>

 上記の部分が、今回のメインで配列の中身をループさせて表示を行っている。以下に詳しい説明を書いていく。

 

ng-Repeat="arr in ctrl.arrs"

 ここは、data.jsで定義したarrsという配列がなくなるまで、一つずつarrに入れて処理を行う、という意味。元のデータ(今回は「arrs」)の前にはコントローラ名(「MyCtrl as ctrl」の「ctrl」)をつけるのを忘れずに。

 

名前:{{arr.name}}<br>点数:{{arr.score}}<br>

 

ここでは、arrに入っているデータを表示している。これは前回までの連載で説明したことなので、大丈夫だと思う。arrは(arrsのデータを一つずつ入れているので、)以下のようなデータを持っていることになる。

 

ループ1回目

 arr = 

{
   name:"kobayashi",
   score:24
}

 

ループ2回目

arr = 

{
   name:"kikuchi",
   score:18
}

 

ループ3回目

arr = 

{
   name:"yamada",
   score:87
}

なので、「arr.name」や「arr.score」でそれぞれの値にアクセスできる。

 

配列のデータをループさせて表示する方法についてはここまで。次回は、「ng-if」「ng-show」「ng-hide」などを使って条件分岐の実装をまとめる。

 

f:id:duo-taro100:20160214124138j:plain

以上!
 

0.5章 アプリの設計 -【連載】ハイブリッドアプリ開発で貯金管理アプリを作る【Cordova・Monaca・OnsenUI・AngularJS】

【連載】ハイブリッドアプリ開発で貯金管理アプリを作る【Cordova・Monaca・OnsenUI・Angular】

f:id:duo-taro100:20160218004611p:plain

0.5章 アプリの設計

 

前回の記事ではアプリ開発に関する今後の連載予定についてまとめた。

it-innovation.hatenablog.com

今回は、【連載】ハイブリッドアプリ開発で貯金管理アプリを作る【Cordova・Monaca・OnsenUI・Angular】の前段階として、簡単な設計をする。(最初に書き出した設計書)

<画面ごとの機能設計>

仕様変更で、実際とは違う箇所もあるけど、だいたいこんな感じ。

f:id:duo-taro100:20160423004512p:plain

f:id:duo-taro100:20160218005701p:plain

<実装方針>

・画面に対してコントローラは1つ用意

・口座情報などの保存にはローカルストレージを使用

・主にOnsenUI、Angularの組み合わせで実装

・グラフはChart.jsを使用

 

Angularを使っての本格的なアプリ開発は初めてなので、コントローラやサービスなどをどの程度分けるべきか迷ったので、とりあえず上記のような方針で開発を行った。

f:id:duo-taro100:20160322234907p:plain

<実装手順>

1、UIテンプレート(Mock)の作成

2、スタイル実装

3、機能実装

 

まずは部品を配置して、それにスタイルをあてる。

それが終了してから機能の実装に入った。

f:id:duo-taro100:20160214124138j:plain

 

改めて設計は重要だと気が付いた!!

(設計をしないで作成したアプリは作り直しがよく出てくる)

 

次回からは実装に入っていく。1章は「UI設計」に関してで、主にOnsenUIでの実装方法をまとめる。

次回、「1-1【UI開発】OnsenUIを使ったページ遷移の実装1【tabbar編】」

www.sky-limit-future.com

 

以上!!