November 2016 – Page 27 – ソフトウェアエンジニアの技術ブログ：Software engineer tech blog

Ada procedure

with Ada.Text_IO;
use Ada.Text_IO;
with Ada.Integer_Text_IO;
use Ada.Integer_Text_IO;

procedure MyApp is
  procedure SayHi(name: in String) is
  begin
   put_line("hi!" & name);
  end SayHi;
begin
   SayHi("tom");
   SayHi("bob");
end MyApp;

[vagrant@localhost ada_lessons]$ gnatmake myapp.adb
gcc -c myapp.adb
gnatbind -x myapp.ali
gnatlink myapp.ali
[vagrant@localhost ada_lessons]$ ./myapp
hi!tom
hi!bob

Adaのloopとexit

Adaのloopは永久ループなので、exitで処理を抜けます。

-- Float
--変数
with Ada.Text_IO;
use Ada.Text_IO;
with Ada.Integer_Text_IO;
use Ada.Integer_Text_IO;

procedure MyApp is
   count: integer;
   i: integer := 1;
begin
 get(count);
 loop
   put(i);
   new_line;
   i := i + 1;
   exit when i > count;
 end loop;
end MyApp;

[vagrant@localhost ada_lessons]$ gnatmake myapp.adb
gcc -c myapp.adb
gnatbind -x myapp.ali
gnatlink myapp.ali
[vagrant@localhost ada_lessons]$ ./myapp
4
          1
          2
          3
          4

Adaの条件分岐

-- Float
--変数
with Ada.Text_IO;
use Ada.Text_IO;
with Ada.Integer_Text_IO;
use Ada.Integer_Text_IO;

procedure MyApp is
 score: integer;
begin
 get(score);
 if score > 80 then
    put_line("great!");
 elsif score > 60 then
 put_line("good!");
 else
 put_line("...");
    end if;
end MyApp;

[vagrant@localhost ada_lessons]$ gnatmake myapp.adb
gcc -c myapp.adb
gnatbind -x myapp.ali
gnatlink myapp.ali
[vagrant@localhost ada_lessons]$ ./myapp
25
...

戦闘機開発　Adaの定数と変数、四則演算

--定数
--変数
with Ada.Text_IO;
use Ada.Text_IO;
with Ada.Integer_Text_IO;
use Ada.Integer_Text_IO;

procedure MyApp is
 x: Integer;
 y: constant Integer := 3;
begin
  x := 5;
  put(x);
  new_line;
  x := 10;
  put(x, 5);
  new_line;
  put(y);
  new_line;
end MyApp;

四則演算

--定数
--変数
with Ada.Text_IO;
use Ada.Text_IO;
with Ada.Integer_Text_IO;
use Ada.Integer_Text_IO;

procedure MyApp is
 x: Integer;
begin
 put("your number? ");
 get(x);

 put(x + 3);
 new_line;
 put(x - 3);
 new_line;
 put(x / 3);
 new_line;
 put(x rem 3);
 new_line;
 put(x * 3);
 new_line;
 put(x ** 3);
 new_line;
end MyApp;

25を入力してみます。

[vagrant@localhost ada_lessons]$ gnatmake myapp.adb
gcc -c myapp.adb
gnatbind -x myapp.ali
gnatlink myapp.ali
[vagrant@localhost ada_lessons]$ ./myapp
your number? 25
         28
         22
          8
          1
         75
      15625

戦闘機開発　Adaで”helloworld”

Adaの拡張子は、adbです。myapp.adbファイルをつくり、早速コードを書いてみましょう。

with Ada.Text_IO;
use Ada.Text_IO;

procedure MyApp is
begin
  put_line("hello world!");
end MyApp;

[vagrant@localhost ada_lessons]$ gnatmake myapp.adb
gcc -c myapp.adb
gnatbind -x myapp.ali
gnatlink myapp.ali
[vagrant@localhost ada_lessons]$ ls
myapp  myapp.adb  myapp.ali  myapp.o
[vagrant@localhost ada_lessons]$ ./myapp
hello world!

戦闘機開発 vagrantでAdaの開発環境

Adaとは米国防総省が中心となって開発されているプログラミング言語です。戦闘機の制御などに使われています。

Ada

Adaはコンパイルしなければなりませんので、開発環境にGNATをインストールしましょう。コマンドは以下の通りです。GNATはGCCに含まれるAdaのコンパイラです。

[vagrant@localhost ada_lessons]$ sudo yum install -y fedora-gnat-project-common

実際にコンパイルする際には gnat makeとしますが、インストールが終わったら、バージョンを確認してみましょう。

[vagrant@localhost ada_lessons]$ gnat make --version
GNATMAKE 4.4.7 20120313 (Red Hat 4.4.7-17)
Copyright (C) 1995-2008, Free Software Foundation, Inc.
This is free software; see the source for copying conditions.
There is NO warranty; not even for MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.

さあ、ミサイル開発のスタートです。

Angular.jsによるTwitter検索

var mainCtr = function($scope, $http){
 $scope.doSearch = function(){
 	var uri = "http://search.twitter.com/search.json?q="
 	+ $scope.query
 	+ '&callback=JSON_CALLBACK';
 	$http.jsonp(uri).success(function(data){
 		console.dir(data.results);
 		$scope.results = data.results;
 	});
 }

}

<!DOCTYPE html>
<html lang="ja" ng-app>
<head>
    <meta charset="UTF-8">
    <title>Angularの練習</title>
    <script src="http://code.angularjs.org/angular-1.0.1.min.js"></script>
    <script src="myscript.js"></script>
</head>
<body>
    <h1>Twitter Search</h1>
    <div ng-controller="mainCtrl">
    <form ng-submit="doSearch()" name="myForm">
    <input type="text" ng-model="query" required>
    <input type="submit" value="search" ng-disabled="myForm.$invalid">
    </form>
    <h2>Result</h2>
    <ul>
    <ul ng-show="results.length">
    <li ng-repeat="result in results">
    <img ng-src="{{result.profile_image_url}}">
    <a ng-href="http://twitter.com/{{result.from_user}}/status">{{result.text}}</a>
    ({{result.from_user}})
    </li>
    </ul>
    <p ng-hide="results.length">↑から検索してください</p>
    </div>
</body>
</html>

Angular.jsによるToDoList

Angular.jsによるToDoListをつくります。挙動はブラウザで確認ください。

var mainCtrl = function($scope, $http){
	$scope.tasks = [
	{"body":"do this 1", "done":false},
	{"body":"do this 2", "done":false},
	{"body":"do this 3", "done":true},
	{"body":"do this 4", "done":false},
	];
	$scope.addNew = function(){
		$scope.tasks.push({"body":$scope.newTaskBody,"done":false});
		$scope.newTaskBody = '';
	}
	$scope.getDoneCount = function(){
		var count = 0;
		angular.forEach($scope.tasks, function(task){
			count += task.done ? 1 : 0;
		});
		return count;
	}
	$scope.deleteDone = function(){
		var oldTasks = $scope.tasks;
		$scope.tasks = [];
		angular.forEach(oldTasks, function(task){
			if (!task.done) $scope.tasks.push(task);
		})
	}
}

index.html

<!DOCTYPE html>
<html lang="ja" ng-app>
<head>
    <meta charset="UTF-8">
    <title>Angularの練習</title>
    <script src="http://code.angularjs.org/angular-1.0.1.min.js"></script>
    <script src="myscript.js"></script>
    <style>
        .done-true{
            color:gray;
            text-decoration:line-through;
        }
    </style>
</head>
<body>
    <h1>Todo list</h1>
    <div ng-controller="mainCtrl">
    <p>Finished Task: {{getDoneCount()}} / {{tasks.length}}
    <button ng-click="deleteDone()">Delete finished</button>
    </p>
    <ul>
        <li ng-repeat="task in tasks">
        <input type="checkbox" ng-model="task.done">
        <span class="done-{{task.done}}">{{task.body}}<span>
        <a href ng-click="tasks.splice($index,1)">[x]</a>
        </li>
    </ul>
    <form ng-submit="addNew()">
    <input type="text" ng-model="newTaskBody">
    <input type="submit" value="add">
    </form>
    </div>
</body>
</html>

%e7%84%a1%e9%a1%8c

backbone.jsによるToDoアプリ

引き続き、todoアプリを作ります。

(function(){

var Task = Backbone.Model.extend({
 defaults: {
 	title: 'do something',
 	completed: false
 },
validate: function(attrs){
	if ( _.isEmpty(attrs.title)){
		return 'title must not be empty';
	}
},
initialize: function(){
	this.on('invalid', function(model, error){
		$('#error').html(error);
	})
}
});

var Tasks = Backbone.Collection.extend({ model: Task });

var TaskView = Backbone.View.extend({
	tagName: 'li',
	initialize: function(){
		this.model.on('destroy', this.remove, this);
		this.model.on('change', this.render, this);
	},
	events: {
		'click .delete': 'destroy',
		'click .toggle': 'toggle'
	},
	toggle: function(){
		this.model.set('completed', !this.model.get('completed'));
	},
	destroy: function(){
		if (confirm('are you shure?')){
			this.model.destroy();
		}
	},
	remove: function(){
		this.$el.remove();
	},
	template: _.template($('#task-template').html()),
	render: function(){
		var template = this.template(this.model.toJSON());
		this.$el.html(template);
		return this;
	}
});
var TasksView = Backbone.View.extend({
	tagName: 'ul',
	initialize: function(){
		this.collection.on('add', this.addNew, this);
		this.collection.on('change', this.updateCount, this);
		this.collection.on('destroy', this.updateCount, this);
	},
	addNew: function(task){
		var taskView = new TaskView({model: task});
		this.$el.append(taskView.render().el);
		$('#title').val('').focus();
		this.updateCount();
	},
	updateCount: function(){
		var uncompletedTasks = this.collection.filter(function(task){
			return !task.get('completed');
		});
		$('#count').html(uncompletedTasks.length);
	},
	render: function(){
		this.collection.each(function(task){
			var taskView = new TaskView({model: task});
			this.$el.append(taskView.render().el);
		}, this);
		this.updateCount();
		return this;
	}
});


var AddTaskView = Backbone.View.extend({
	el: '#addTask',
	events: {
		'submit': 'submit'
	},
	submit: function(e){
		e.preventDefault();
		// var task = new Task({title: $('#title').val()});
		var task = new Task();
		if (task.set({title: $('#title').val()}, {validate: true})){
			this.collection.add(task);
			$('#error').empty();
		}
	}
});

var tasks = new Tasks([
{
	title: 'task1',
	completed: true
},
{
	title: 'task2'
},
{
	title: 'task3'
}
]);

var tasksView = new TasksView({collection: tasks});
var addTaskView = new AddTaskView({collection: tasks});
$('#tasks').html(tasksView.render().el);

})();

htmlです。

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="utf-8">
	<title>Backbone.js</title>
	<style>
	.completed{
		text-decoration: line-through;
		color: gray;
	}
	</style>
</head>
<body>

<h1>Tasks</h1>

<form id="addTask">
	<input type="text" id="title">
	<input type="submit" value="add">
	<span id="error"></span>
</form>
<div id="tasks">
</div>
<p>Tasks left: <span id="count"></span></p>
	


<script type="text/template" id="task-template">
<input type="checkbox" class="toggle" <%= completed ? 'checked': '' %>>
<span class="<%= completed ? 'completed' : '' %>">
<%- title %>
</span>
<span class="delete">[x]</span>
</script>
<script src="js/underscore.js"></script>
<script src="js/jquery.js"></script>
<script src="js/backbone.js"></script>
<script src="js/app.js"></script>
</body>
</html>

ブラウザでの表示です。
task

backbone.jsの準備

JavaScriptで大規模なアプリケーションを効率的に開発するためのフレームワークです。

banckbon-jsのファイルをgithubからダウンロードして展開していきます。
banckbon-js

model, view, collection

(function() {

// Model

var Task = Backbone.Model.extend({
	defaults: {
		title: "do something!",
		completed: false
	}
});

var task = new Task();

// view

var TaskView = Backbone.View.extend({
	tagName: 'li',

	template: _.template( $('#task-template').html() ),
	render: function(){
		var template = this.template( this.model.toJSON());
		this.$el.html(template);
		return this;
	}
});

// collection

var Tasks = Backbone.Collection.extend({
	model: Task
});
var TasksView = Backbone.View.extend({
	tagName: 'ul',
	render: function(){
		this.collection.each(function(task){
			var taskView = new TaskView({model: task});
			this.$el.append(taskView.render().el);
		}, this);
		return this;
	}
});
var tasks = new Tasks([
		{
			title: 'task1',
			completed: true
		},
		{
			title: 'task2'
		},
		{
			title: 'task3'
		}
	]);
// console.log(tasks.toJSON());
var tasksView = new TasksView({collection: tasks});
$('#tasks').html(tasksView.render().el);
})();

続いて、htmlです。

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="utf-8">
	<title>Backbone.js</title>
</head>
<body>

<div id="tasks"></div>

<script type="text/template" id="task-template">
	<%- title %>
	</script>
<script src="js/underscore.js"></script>
<script src="js/jquery.js"></script>
<script src="js/backbone.js"></script>
<script src="js/app.js"></script>
</body>
</html>