Code Log

プログラミングの勉強メモを残していきます。

MacにTomcatをインストールしてEclipseから動かしてみる。


Homebrewでインストールできます。

``
$ brew install tomcat

==> Using the sandbox
==> Downloading https://www.apache.org/dyn/closer.cgi?path=tomcat/tomcat-8/v8.5.9/bin/apache-tomcat-8.5.9.tar.gz
==> Best Mirror http://ftp.jaist.ac.jp/pub/apache/tomcat/tomcat-8/v8.5.9/bin/apache-tomcat-8.5.9.tar.gz
######################################################################## 100.0%
🍺 /usr/local/Cellar/tomcat/8.5.9: 634 files, 12.5M, built in 6 seconds
``

以下のコマンドでTomcatを起動させることができます。

``
/usr/local/Cellar/tomcat/8.5.9/bin/catalina start
``

localhost:8080

でTomcatのホーム画面を見ることができます。


CATALINA_HOMEですが、以下にあります。

``
$ pwd
/usr/local/Cellar/tomcat/8.5.9/libexec
```

Eclipseの「環境設定」でTomcat > で、Tomcatホームに設定するのも上記のディレクトリです。
Macの場合、左上の「Eclipse」というところをクリックすると、環境設定画面に飛ぶことができます。

環境設定でTomcatを設定したあとに、パッケージエクスプローラーのプロジェクト名を右クリックします。
そこで、Properties > ServerでTomcatを選択し、

「Run As」 > 「Run on Server」

でEclipseのTomcatアプリをTomcatで起動させることができます。

f:id:sho322:20161210181138p:plain

SCSSで変数を定義したり、@mixinを使ってみる

変数を定義する

変数を定義するのは簡単です。 [$変数名]を[:]で区切って、値を入れます。

後は、変数名をプロパティに指定すれば、その値が反映されます。

@charset 'utf-8';

$mainColor : #2576E5;

header {
  background-color: $mainColor;
}

.main {
  p {
    color : $mainColor;
  }
}

CSSには以下のように出力されます

header {
  background-color: #2576E5; }

.main p {
  color: #2576E5; }

mixin

mixinを使えば、定義の塊を作ることができます。

@charset 'utf-8';

@mixin blueText {
  color:blue;
  font-size:20px;
}

@mixin redText {
  color:red;
  font-size:30px;
}

.textBlue {
  @include blueText;
}


.textRed {
  @include redText;
}

.textRed2 {
  @include redText;
}

@mixinと書いて、そこにそこにCSSのかたまりを定義します。 それを、@includeとすることで、取り込むことができます。

XCodeがUpdateされたときは、Swiftのバージョンを確認する方法

以下のコマンドで確認できる。

$ /Applications/Xcode.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain/usr/bin/swift -v

Apple Swift version 3.0 (swiftlang-800.0.46.2 clang-800.0.38)
Target: x86_64-apple-macosx10.9
/Applications/Xcode.app/Contents/Developer/usr/bin/lldb "--repl=-target x86_64-apple-macosx10.9 -enable-objc-interop -sdk /Applications/Xcode.app/Contents/Developer/Platforms/MacOSX.platform/Developer/SDKs/MacOSX10.12.sdk -color-diagnostics"

Swift3にアップデートしたらCGRectMakeが使えず、'CGRectMake' is unavailable in Swiftとエラーが出るようになった。

XCodeをUpdateしてから、本に書いてあるサンプルのほとんどが陳腐化してしまった。
CGRectMakeという、座標を指定する関数が使えなくなっていた。

「'CGRectMake' is unavailable in Swift」というエラーが出るようになってしまったのだ。
このエラーに対応するには、CGRectをWrapする関数を作ればよい。


http://stackoverflow.com/questions/30692096/using-variables-in-cgrectmake-swift-uikit

func CGRectMake(_ x: CGFloat, _ y: CGFloat, _ width: CGFloat, _ height: CGFloat) -> CGRect {
    return CGRect(x: x, y: y, width: width, height: height)
}

これを使って、Labelを移動させたりLabelを作る処理を買いてみる。

//関数名は変になったすまん。clickMoveが適切
@IBAction func clickMake(_ sender: AnyObject) {

    let rect = CGRectMake(
        labelMove.frame.origin.x,
        labelMove.frame.origin.y + 30,
        labelMove.frame.width + 50,
        labelMove.frame.height + 30)
    labelMove.frame = rect
    labelMove.text = "move label"
    
}

@IBAction func clickCreate(_ sender: AnyObject) {
    let label = UILabel()
    let rect = CGRectMake(
        100,
        100,
        150,
        30)
    label.frame = rect
    label.text = "create label"
    self.view.addSubview(label)
}

func CGRectMake(_ x: CGFloat, _ y: CGFloat, _ width: CGFloat, _ height: CGFloat) -> CGRect {
    return CGRect(x: x, y: y, width: width, height: height)
}
    

Xcodeではじめる 簡単iPhoneアプリ開発[Xcode 8 & Swift 3対応]

Xcodeではじめる 簡単iPhoneアプリ開発[Xcode 8 & Swift 3対応]

Node.jsでWebページをダウンロードする


Node.jsでWebページをダウンロードするサンプルを写経してみました。

download(
  "http://www.google.co.jp",
  "google.html",
  function(){console.log("ok, google");});

download(
  "http://www.yahoo.co.jp",
  "yahoo.html",
  function(){console.log("ok, yahoo");});

function download(url, savepath, callback) {
	var http = require('http');
	var fs = require('fs');
	var outfile = fs.createWriteStream(savepath);
	var req = http.get(url, function(res) {
		res.pipe(outfile);
		res.on('end', function() {
			outfile.close();
			callback();
		});
	});
}

JS+Node.jsによるWebクローラー/ネットエージェント開発テクニック

JS+Node.jsによるWebクローラー/ネットエージェント開発テクニック

npm -g でグローバルインストールしたときに、モジュールがインストールされるパスを調べる


npmとは、Node.jsのモジュールを管理するためのパッケージマネージャーです。
モジュールがインストールされる場所ですが、「npm install」を実行すると、このコマンドを実行したカレントディレクトリにモジュールがダウンロードされます。

つまり、そのモジュールは別のプロジェクトからは利用できないということです。

そこで、よく使うモジュールで、毎回インストールするのは面倒だという場合、グローバルインストールという手法を使います。
グローバルインストールすると、全てのプロジェクトから利用することができます。

npm install -g (モジュール名)

とコマンドを打てば、グローバルインストールすることができます。

グローバルインストール先、つまりどこにモジュールがインストールされているのか調べたい場合は、

$ npm root -g
/usr/local/lib/node_modules

また、Node.jsがモジュールを探す時に検索するパスを調べてみましょう。

以下のコマンドで、Node.jsがモジュールを探しに行くパスを表示することができます。

$ node -e "console.log(global.module.paths)"
[ '/home/vagrant/node_modules',
  '/home/node_modules',
  '/node_modules' ]

また、これに加えて、NODE_PATHも検索するので、環境変数「NODE_PATH」にグローバルなパスを登録することで、グローバルインストールしたモジュールのパスを正しく検索することができるようになります。

$ export NODE_PATH=/usr/local/lib/node_modules

Swiftでボタンを押したタイミングでキーボードを下げる


入力する時にキーボードは必要ですが、いつまでもキーボードが表示されたままだと格好悪いので、
入力が完了したタイミングでキーボードを隠す処理を実装してみましょう。

ボタンを押したタイミングでキーボードを下げる処理は以下のように実装します。

@IBAction func tapActionButton(sender: AnyObject) {
    let userDefaults = NSUserDefaults.standardUserDefaults()
    userDefaults.setObject(textField.text, forKey: "text")
    userDefaults.synchronize()
    view.endEditing(true)
    
}

値をNSUserDefaultに保存して、view.endEditing()でキーボードを下げます。

Swiftポケットリファレンス

Swiftポケットリファレンス

SwiftでUITextFieldの値の変化をチェックして、イベントを受け取ってLabelの値を更新する


SwiftでTextFieldに入力された値に反応して、その値を習得。
そして取得した値をLabelなどにリアルタイムで反映させたときがあると思います。

そんなときは、以下のようなコードを書きます。

viewDidLoad()のメソッド内に以下を書きます。

textField.addTarget(self, action: "textFieldDidChange:",forControlEvents: UIControlEvents.EditingChanged)

値が変化した時の処理を関数として書きます。

func textFieldDidChange(textFiled: UITextField) {
    testLabel.text = textField.text
}

参考)
http://stackoverflow.com/questions/28394933/how-do-i-check-when-a-uitextfield-changes

Swiftで自作クラスを作成する

Swiftで自作クラスを作成する構文は以下のとおり。

import UIKit

var str = "Hello, playground"

//クラスのインスタンス化を行う
var radio = UISwitch()

//プロパティを設定する
radio.on = true

//メソッドを使ってプロパティを設定する
radio.setOn(false, animated: true)

//独自クラスを作成
class Cat {
    var name = "";
    
    func bark() {
        print("nya---")
    }
}


var cat = Cat()
cat.name = "nya-su"
cat.bark()

AngularJSでng-repeatとfilterを併用してテキストを絞り込むインクリメンタル検索を実装


searchTextという属性は、検索ボックスにテキストが入力されるたびにデータが変更されます。
ng-repeatのmemberの値をsearchTextでfilterをかけるため、テキストボックスに文字列が入力されるたびに動的に中身がフィルタリングされたデータになります。

○HTML

<div ng-controller="MainCtrl">
  <input type="search" ng-model="searchText">
  <ul ng-repeat="member in members | filter:searchText">
    <li>{{member.name}} {{member.age}}</li>
  </ul> 
</div>


○JavaScript

'use strict';

var app = angular.module('myApp', []);
app.controller('MainCtrl', function($scope) {

  $scope.members = [
    { name: 'Takashi Shibuya', age: 31},
    { name: 'Yoshida Katsutoshi', age:32},
    { name: 'Akihiko Imura', age:33},
    { name: 'Kawabe Atsuhiko', age: 32}
  ]

});

AngularJSアプリケーション開発ガイド

AngularJSアプリケーション開発ガイド