【ionic】ion-side-menuとion-tabsを同じ画面で使う
はじめに
今回やりたかったのはこんな画面
スタートテンプレートでサイドメニューとタブのものがそれぞれあるのでそれらを参考にした。
実装
まずはベースとなるHTMLを作る。ion-nav-viewがあるだけ。
index.html
<body ng-app="starter"> <ion-nav-view></ion-nav-view> </body>
app.jsで、
menu.html > tabs.html > content1.html、contents2.html、contents3.htmlと階層構造になるように設定する。
js/app.js
angular.module('starter', ['ionic', 'starter.controllers'])
・・・
.config(function($ionicConfigProvider, $stateProvider, $urlRouterProvider) {
$stateProvider
.state('app', {
url: '/app',
abstract: true,
templateUrl: 'templates/menu.html',
controller: 'AppCtrl'
})
// メニューの下にタブを置く
.state("app.tab", {
url: "/tab",
views: {
"menuContent": {
templateUrl: "templates/tabs.html",
controller: "TabCtrl"
}
}
})
// タブ1
.state("app.tab.content1", {
url: "/content1",
views: {
"tab-content1": {
templateUrl: "templates/content1.html",
controller: "Content1Ctrl"
}
}
})
// タブ2、タブ3の中身を同様に
・・・
// デフォルト
$urlRouterProvider.otherwise("app/tab/content1");
});コントローラはとりあえず作っただけ。何もしてない。
js/controllers.js
angular.module('starter.controllers', [])
// 共通コントローラー
.controller("AppCtrl", function($scope, $ionicModal, $timeout) {
})
// タブコントローラー
.controller("TabCtrl", function($scope, $stateParams) {
})
// コンテンツ1
.controller("Contents1Ctrl", function($scope, $stateParams) {
})
// コンテンツ2、コンテンツ3も同様にtemplates/menu.html
<ion-side-menus>
<!-- 左メニュー -->
<ion-side-menu side="left">
<ion-header-bar class="bar-stable">
<h1 class="title">メニュー</h1>
</ion-header-bar>
<ion-content>
<ion-list>
<ion-item menu-close ng-click="showInformation()">メニュー1</ion-item>
<ion-item menu-close ng-click="showInformation()">メニュー2</ion-item>
<ion-item menu-close ng-click="showInformation()">メニュー3</ion-item>
</ion-list>
</ion-content>
</ion-side-menu>
<!-- メインコンテンツ -->
<ion-side-menu-content>
<ion-nav-bar class="bar-stable">
<ion-nav-back-button>
</ion-nav-back-button>
<ion-nav-buttons side="left">
<button class="button button-icon button-clear ion-navicon" menu-toggle="left">
</button>
</ion-nav-buttons>
</ion-nav-bar>
<!-- ここにtabs.htmlを差し込む形 -->
<ion-nav-view name="menuContent"></ion-nav-view>
</ion-side-menu-content>
</ion-side-menus>templates/tabs.html
<ion-tabs class="tabs-icon-top tabs-color-active-positive">
<ion-tab title="タブ1" icon-off="ion-ios-book" icon-on="ion-ios-book" href="#/app/tab/contents1">
<ion-nav-view name="tab-contents1"></ion-nav-view>
</ion-tab>
・・・
</ion-tabs>templates/contents1.html
<ion-view view-title="タブ1">
<ion-content>
<p>タブ1</p>
</ion-content>
</ion-view>コードばっかりになってしまったけど、なんとなくイメージはできました。
以上です
【selenium】facebook/php-webdriverでUser Agentを変更する方法メモ
基本的な使い方は以下のページがわかりやすい
http://hchckeeer.hatenadiary.jp/entry/2016/12/30/183039
で、ほぼ上のページのとおりだけど、今回はUser Agentを変更してアクセスしたかった。
use Facebook\WebDriver\Remote\DesiredCapabilities;
use Facebook\WebDriver\Remote\RemoteWebDriver;
use Facebook\WebDriver\Firefox;
$profile = new Firefox\FirefoxProfile();
$profile->setPreference('general.useragent.override', "UserAgent文字列");
$capabilities = DesiredCapabilities::firefox();
$capabilities->setCapability(Firefox\FirefoxDriver::PROFILE, $profile);
$web_driver = RemoteWebDriver::create(
"http://localhost:4444/wd/hub",
$capabilities,
60 * 10000,
60 * 10000
);
$url = "http://example.com";
$web_driver->get($url);
var_dump( $web_driver->getPageSource() );以上です
【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でスクレイピングする方法メモ
centosでseleniumでやる方法探してたらまさにやりたいことがこのページにまるまる載ってました。助かりました。ありがとうございます。
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つ表示されてる。
以上です
