読者です 読者をやめる 読者になる 読者になる

【ionic】ionic serveでwatchしてconcatする方法

バージョン1の話です。
ionic startで作られるcontrollers.jsは1ファイルだけど、大きくなると嫌なので分割できるようにしたいというのが今回やりたかったこと。

ひな形をつくる
$ ionic start myApp tabs
controllersを分割

controllers/_init.js

angular.module('starter.controllers', []);

controllers/dash.js

angular.module('starter.controllers')
        .controller('DashCtrl', function($scope) {});
gulpでwatchしてconcatする

gulpfile.js

// jsのパスを追加
var paths = {
                sass: ['./scss/**/*.scss'],
                js: ['./www/js/**/*.js']
};

・・・

// controllers以下を結合する
gulp.task("js.concat-controllers", function() {
                return gulp.src("./www/js/controllers/**/*.js")
                                .pipe(concat("controllers-build.js"))
                                .pipe(gulp.dest("./www/js"));
});

// controllersを監視
gulp.task('watch', ['sass', 'js.concat-controllers'], function() {
		gulp.watch(paths.sass, ['sass']);
                gulp.watch(paths.js, ['js.concat-controllers']);
});

動作確認

$ gulp watch
ionic serveでwatchしてconcatする

続いてionic serve中でもwatchするように

gulpfile.js

// 追加
gulp.task('serve:before', ['watch']);

動作確認

$ ionic serve

以上です

【php】配列を複数条件で検索、絞り込みする方法メモ

大した話じゃないけどメモ。
やりたいことは、配列から条件で絞り込むみたいなこと。
array_filter使えばよいみたい。

// 検索対象のリスト
$items = [
    ["name" => "田中", "gender" => "woman"],
    ["name" => "高橋", "gender" => "woman"],
    ["name" => "亀井", "gender" => "woman"],
    ["name" => "櫻井", "gender" => "man"],
    ["name" => "松本", "gender" => "man"],
    ["name" => "大野", "gender" => "man"],
];

// 検索条件
$conditions = [
    "gender" => ["woman"],
];

// 検索処理 
$func = function($conditions) {
     return function($value) use($conditions) {
         return in_array($value["gender"], $conditions["gender"]);
     };
};

// 検索実行
$result = array_filter($array, $func($conditions));

// 結果
print_r($result);
/*
=> Array
(
    [0] => Array
        (
            [name] => 田中
            [gender] => woman
        )

    [1] => Array
        (
            [name] => 高橋
            [gender] => woman
        )

    [2] => Array
        (
            [name] => 亀井
            [gender] => woman
        )
)
*/

ついでに、call_user_func使って即時関数ぽい書き方もできるみたい

・・・

// 検索条件
$conditions = [
    "gender" => ["woman"],
];

$result = array_filter($items, call_user_func(function($conditions) {
     return function($item) use($conditions) {
         return in_array($item["gender"], $conditions["gender"]);
     };
}, $conditions));

・・・

以上です。

【Selenium】facebook/php-webdriverでスクレイピングする方法メモ

centosseleniumでやる方法探してたらまさにやりたいことがこのページにまるまる載ってました。助かりました。ありがとうございます。
php-webdriverを使用してスクレイピングをした話 - 備忘録

ほぼこのとおりにやったらいけました。
一部ちがったところと動かなかったところをメモしておく。

最終的な各種バージョン
# CentOSのバージョン
$ cat /etc/redhat-release
CentOS release 6.8 (Final)

# Firefoxのバージョン
$ firefox -v
Mozilla Firefox 45.7.0

# JAVAのバージョン
$ java -version
openjdk version "1.8.0_121"
OpenJDK Runtime Environment (build 1.8.0_121-b13)
OpenJDK 64-Bit Server VM (build 25.121-b13, mixed mode)

# seleniumのバージョン
selenium-server-standalone-2.53.0.jar

firefoxのバージョンは新し目だけど動いてるみたい。
3ヶ月経ってるから解消したのかな。

php実行でエラー

で、php実行したら以下のエラーが出た。

$ php test.php
01:42:41.927 WARN - Exception: Unable to connect to host 127.0.0.1 on port 7055 after 45000 ms. Firefox console output:
tionsType":null,"aboutURL":null,"icons":{},"iconURL":null,"icon64URL":null,"defaultLocale":{"name":"Japanese Language Pack","description":null,"creator":"Mozilla Japanese L10N Community","homepageURL":null,"con$

・・・

process 6990: D-Bus library appears to be incorrectly set up; failed to read machine uuid: Failed to open "/var/lib/dbus/machine-id": そのようなファイルやディレクトリはありません
See the manual page for dbus-uuidgen to correct this issue.
  D-Bus not built with -rdynamic so unable to print a backtrace
Redirecting call to abort() to mozalloc_abort

「"/var/lib/dbus/machine-id": そのようなファイルやディレクトリはありません」って。

rootユーザーで作ったらいけた

# dbus-uuidgen > /var/lib/dbus/machine-id

以下、メモ

セットアップ

$ wget http://selenium-release.storage.googleapis.com/2.53/selenium-server-standalone-2.53.0.jar
$ yum -y install java-1.8.0-openjdk
$ yum -y install xorg-x11-server-Xvfb
$ yum -y install firefox # ここ怪しい

起動時のコマンド

$ export DISPLAY=:99
$ Xvfb :99 -screen 0 1024x768x24 &
$ java -jar /path/to/selenium-server-standalone-2.53.0.jar

以上です。

【PhantomJS】clickした後のhtmlを取得する

こちらでとりあえず動かせたのでついでにボタンをクリックした後のhtmlも取得してみたのでメモ。htmlはボタンをクリックしたらテキストがページに追加されていく簡単なもの。

index.html

<!DOCTYPE html>
<head><title>テスト</title></head>
<body>
  <div id="content"></div>
  <button id="btn-add" onclick="add();">追加</button><br/>
  <script>
   function add() {
       document.getElementById("content").innerHTML += "テスト<br/>";
   }
  </script>
</body>
</html>

click.js

var page = require('webpage').create();
var url = "http://example.com/index.html";

page.open(url, function() {
    page.evaluate(function() {
        // 3回クリックする                                                                                                                                                                                         
        var btn = document.querySelector("#btn-add");
        var event = document.createEvent("MouseEvents");
        event.initEvent("click", false, true);
        btn.dispatchEvent(event);
        btn.dispatchEvent(event);
        btn.dispatchEvent(event);
    });
    setTimeout(function() {
        console.log(page.content);
        phantom.exit();
    },3000);
});

実行

$ ./node_modules/phantomjs/bin/phantomjs click.js
<!DOCTYPE html><html><head><title>テスト</title></head>
<body>
  <div id="content">テスト<br>テスト<br>テスト<br></div>
  <button id="btn-add" onclick="add();">追加</button><br>
  <script>
   function add() {
       document.getElementById("content").innerHTML += "テスト<br/>";
   }
  </script>
</body></html>

3回クリックしたので「テスト」というテキストがちゃんと3つ表示されてる。
以上です

【PhantomJS】ajaxなページをスクレイピングする方法メモ

やりたかったこと

今回やりたかったのはjavascriptでコンテンツを表示するページの解析。
今までもたまにスクレイピング用のスクリプト作ったことはあったけど、wgetphpのfile_get_contentsで取得したhtmlを解析するようのものしかなかった。

ちょっと調べてみるとPhantomJS使う方法とSeleniumを使う方法がたくさん出てきた。
今回はページを読み込むとjavascriptが動いてhtmlを生成するようなページが対象で、やりたいことも簡単だったのでより導入が簡単そうだったPhantomJSを使ってみた。

実装

まずはPhantomJSのインストール。node.jsは入っている前提で。

$ npm install phantomjs
・・・
$ ./node_modules/phantomjs/bin/phantomjs -v
2.1.1

スクレイピング対象のテストサイトを用意

index.html

<!DOCTYPE html>
<head><title>テスト</title></head>
<body>
  <div id="content">読み込み中...</div>
  <script src="./index.js"></script>
</body>
</html>

index.js

window.addEventListener("load", function() {
    setTimeout(function() {
        document.getElementById("content").innerHTML =
            "1,田中<br/>" +
            "2,高橋<br/>" +
            "3,亀井";
    }, 3000);
});

ページが読み込まれてから3秒後にHTMLを表示するようなページ。
実際はajaxでデータを取得してくるイメージだけど今回はこれで。

次は本題の取得用スクリプト
まずは上手くいかないやつ

get.js

var page = require('webpage').create();
var url = "http://example.com/index.html";

page.open(url, function() {
    console.log(page.content);
    phantom.exit();
});

実行すると取得したいものと違う

$ ./node_modules/phantomjs/bin/phantomjs get.js
<!DOCTYPE html><html><head><title>テスト</title></head>
<body>
  <div id="content">読み込み中...</div>
  <script src="./index.js"></script>
</body></html>

修正版

var page = require('webpage').create();
var url = "http://example.com/index.html";

page.open(url, function() {
    // ★5秒後にページを取得する形に変更
    setTimeout(function() {
        console.log(page.content);
        phantom.exit();
    }, 5000);
});

実行

$ ./node_modules/phantomjs/bin/phantomjs get.js
<!DOCTYPE html><html><head><title>テスト</title></head>
<body>
  <div id="content">1,田中<br>2,高橋<br>3,亀井</div>
  <script src="./test3.js"></script>
</body></html>

取得できた!以上です

【cakephp】updateAllを呼んでもデータが更新されなかった原因メモ

あまり使ったことのないcakephpの改修でハマった。

更新されない

$this->MyModel->updateAll(array(
  "text" => "text",
), array(
  "id" => 1,
));

文字列はクォートで囲むと更新される

$this->MyModel->updateAll(array(
  "text" => "'text'",
), array(
  "id" => 1,
));

orz...

あと、カラム名違うとエラーにならずに条件にヒットしない挙動なんですね。
しかも条件の方はクォートくくらないと更新された。

けっこう古めのバージョンなので今のバージョンだとどうなるかわかりません。。。
以上です

【css】javascriptで挿入した要素のz-indexが効かなかった時の原因と対応メモ

css詳しくないのに見よう見まねで書いててjavascriptで生成した要素のz-indexがどうにも効かなくてハマりました。
そのときの対応をメモ。

ググってるz-index当てる要素はpositionがrelativeかabsoluteじゃないといけないって記事があってコレが原因って線でずっと調べてたけど全然直らなくて途方にくれました。
結論からいうと対象の要素の親要素にz-indexが当たっててそのz-indexの方が大きかったということでした。。。

上手く動かないコード

<div style="z-index:1000">
  <!-- javascriptで動的に挿入した要素 -->
  <div style="z-index:1001">要素B</div>
</div>

<!-- javascriptで動的に挿入した要素 -->
<div style="z-index:1000">要素A</div>

わかりずらいですが要素Aをページ全体に置いて、その上に要素Bを重ねたいというのがやりたいことでした。
要素Bを入れる要素の親にz-indexがセットされていてそれが要素Aのz-indexよりも大きかったので表示されない(というか見えない)というオチでした。

修正したコード

<div style="z-index:1000">
</div>

<!-- javascriptで動的に挿入した要素 -->
<div style="z-index:2000">要素A</div>

<!-- javascriptで動的に挿入した要素 -->
<div style="z-index:2001">要素B</div>
まとめ

何が言いたいかわかりずらくなったけど、今回は不特定多数の人にタグを入れてもらってjavascriptでdomを挿入するような機能でした。
同じようなことでハマっている人がいたら参考になったら幸いです。てかまた忘れた頃に同じ事やりそう。。。以上です