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

webサービス開発と本の実践

webサービス開発や課題解決の為に読んだ本からヒントを得て実践する様子を書くブログです。

小説家になろうのAPIリクエスト+vue.jsによるレンダリング

Javascript vue.js

実装について

実行結果

f:id:misaex:20160914034205p:plain

PHPでの並列処理を試す(curl_multi)

PHP

PHPでの並列処理(curl_multi)

試行

webページ10P読み込んで試してみたところ、
普通にfile_get_contentsで10P読むより3~4倍くらい早くなった。

サンプルコードが、処理待ちに無限ループ使ってるので
無駄な処理が発生している可能性はあるのでもっと早くなるかも。

curl_multiの原理

・マルチスレッドやマルチプロセスを使っているわけではない
・原理はnode.jsなんかと近いI/O多重化で、一度に一つのことしかしてない
・IO多重化=ファイルの入出力を1つのプロセスで管理するということ?
 http://blog.takanabe.tokyo/2015/03/26/240/
 http://www.slideshare.net/mizzy/io-18459625
 http://d.hatena.ne.jp/cou929_la/20121103/1351950688
 
 IO多重化の原理について、上記の記事を読んでもいまいちよくわからなかった。

 こういう仕組みについての知識がまるでないので勉強していきたいが
 参考記事や本を眺めてみるだけで、圧倒されてしまう。

 どういうステップを経れば理解できるのかイメージしづらいなと思う。
 ひたすら頑張って本や記事を読み込んで慣れていけば、いつかわかるようになるものなんだろうか。

Javascript勉強(プロトタイプ・クロージャ)

Javascript

粛々と本を読んで、自分の引き出しを増やしていこうと思う。

まとめ

・グローバルに変数置く・変数へのアクセス可能範囲広いと何が起こるか分からない(バグの原因になる)ので
 アクセスできる範囲を限定的にするのが吉

 →クロージャや変数のスコープはコーディング時意識し、グローバル空間で変数を宣言しないようにする。

・無駄にメモリとるような書き方はやめよう

 →プロトタイプでメモリを無駄に取らないようにする

プロトタイプ

プロトタイプを使用するメリット

プロトタイプを使わないと、インスタンス生成のたびに
それぞれのオブジェクトのためにメモリを確保してしまい、無駄遣いになる

 ↓

プロトタイプを使うと参照することができるので、無駄に作らないで済む

悪い例(プロトタイプ使わない)

[メモリ使用]
testインスタンス 2コ
sumメソッド 2コ

testインスタンス 10コ
sumメソッド 10コ

testインスタンスが10コ作られたらsumメソッドも10コ作られることになります。

function test(a, b){
    this.a = a;
    this.b = b;
    this.sum = function(){
        console.log("sum:", this.a + this.b);
    }
}

var t = new test(1,3); //sum: 4
t.sum();

var s = new test(3,5); //sum: 8
s.sum();

 

良い例(プロトタイプ利用)

下記の書き方であれば、sumメソッドはメモリ1つ分で済みます。
インスタンスの数が増えると、このメリットは効いてきます。

[メモリ使用]
testインスタンス 2コ
sumメソッド 1コ

testインスタンス 10コ
sumメソッド 1コ

testインスタンスが10コ作られてもsumメソッドは1コのみで足ります。

function test(a, b){
    this.a = a;
    this.b = b;
}

test.prototype.sum = function(){
    console.log("sum:", this.a + this.b);
}

var t = new test(3,3); //sum: 6
t.sum();

var s = new test(4,5); //sum: 9
s.sum();

クロージャ

ポイント

・変数自身が定義された環境が保持される(外から書き換えられる心配がない)
・外への影響を気にしなくてよくなる
 

function counter(){
    var count = 0;
    return function(){
        count++;
        console.log(count);
    }
}

var counter1 = counter();

counter1(); //1
counter1(); //2
counter1(); //3
counter1(); //4
counter1(); //5

var counter2 = counter();

counter2(); //1
counter2(); //2
counter2(); //3

Javascriptで最近嵌ったところメモ

Javascript

正規表現

「.」は改行にマッチしない

http://qiita.com/xtetsuji/items/1da6e34eb907088ed256

/\s\S/は/\\s\\S/と書く

http://qiita.com/mooz@github/items/4e5ea1100d2cbc3e7efb

正規表現チェッカーで「\\s」と書いても反応してくれないものもあるので注意(\sで反応)
http://js.wakastream.jp/regex.html

(?:x)

マッチした内容を記憶しない(非キャプチャリング(非格納)括弧)

x(?!y)

'x' に 'y' が続かない場合のみ 'x' にマッチ(否定先読み)

\1

後方参照 1番目の括弧の部分にマッチした最新の部分文字列への後方参照
(括弧の数は左からカウント)

Mac(時々Macで開発するので)

改行コードの入力(¥nでなく\n)

http://6oolab.com/archives/172

読みやすいコード

switchは使わない方がよい

http://qiita.com/t_uda/items/1969e09a970d71e4cfd6

コードレビューの作法でもまず文法チェッカにコードを通す

jsLint:http://analogic.jp/jslint/

プログラム設計

Githubで似たようなプロジェクトないか探す→あればどんな処理の流れになってるか読んで参考にする

テスト

簡単にテストする方法
http://qiita.com/Jxck_/items/0f5437dd3ab48f1ffd6e

console.assert

・オブジェクトを比較する際はJSON.stringifyを使う(文字列比較に変換する)
http://qiita.com/qoAop/items/57d35a41ef9629351c3c

・「JSON.stringify」はオプションにより整形できる
http://qiita.com/qoAop/items/57d35a41ef9629351c3c

不動産テック勉強会#2行ってきたのでメモ

クローリング データ収集

【不動産テック勉強会#2】クローリングにおけるデータ収集戦略・方法について赤裸々に語る会
eventdots.jp

行ってきたので、メモ。


手間をかけずに作るクローラ

python scrapy(フレームワーク

・scrapy cloud インフラまわりを引き受けてくれる
 ログ処理・並列処理もやってくれるので高速
 https://scrapinghub.com/scrapy-cloud/
 http://data.gunosy.io/entry/python-scrapy-scraping

・クローラをいちから書く必要なくなってきて
 開発コストはどんどん下がってきている

クローラほんとに動いている?

・クローラ固有の動かなくなる原因:対象サイトのリニューアル

・大量にスクレイピングしているとどこが取れなくなってる等
 目視では追いきれなくなってくる(500万商品:1日)
 
 ↓
 
 ログ収集・可視化で異常に気付けるようにする
 
 ・エラーログの収集

 ・取得したHTML情報 前日分と比較し変化をチェック

 ・機械学習によるクロール失敗検知(今後やるとのこと)

 ・fluentdによるログ収集管理
  http://knowledge.sakura.ad.jp/tech/1336/

 ・データの可視化に「tableau」使ってるらしい
  http://www.tableau.com/ja-jp
  
 ・xpath(htmlでの一意な位置情報)とurlを使ってクローラジェネレータを自社開発
 
  chrome拡張で、任意の場所のxpathを取得してクローラジェネレータへ追加
  https://chrome.google.com/webstore/detail/xpath-helper/hgimnogjllphhhkhlmebbmlgjoejdpjl?hl=ja
  
  非エンジニアでも簡単にクローラを自動生成できる

クックパッド (クローリングされる立場から)

・クロールも基本ふつうにアクセスしてきている人と変わらない。
 排除するようなことは基本しない
 
・異常なアクセスをするような人はBANする

・アクセスが多すぎると「429 too many requests」を返す

MySQLの照合順序についてまとめる

MySQL

照合順序とは

文字を比較するときの基準・規則のこと
http://qiita.com/Vit-Symty/items/159c27d7d62c78ee9ce7

※今回の調査には、MySQL5.1を使用しています。

命名規約

データ形式_言語_大文字小文字区別有無」です。

データの形式

utf8,cp932,sjis等の文字コードを指定します。

言語

処理の際どの言語で比較するかについてです。
よく使われるものとして、下記4つがあります。

  • japanese(日本語)
  • general(多言語対応)
  • unicode(多言語対応) 全角半角区別しない。(phpmyadminではucs2とutf8のみ設定可能でした)

 またMySQL拡張機能で、濁音(「ば」「び」等)と半濁音(「ぱ」「ぴ」等)がついた場合も区別されません。
 http://dev.mysql.com/doc/refman/5.6/ja/charset-unicode-sets.html

  • bin(バイナリ)1文字1文字区別される

 データ形式文字コード(utf8の場合、「あ」だったら「E38182」として扱われる)として処理されます

大文字小文字区別有無

大文字小文字を区別するかを設定します。

  • ci:大文字小文字を区別しない
  • cs:大文字小文字を区別する

utf8の場合、csはありません。

影響範囲

照合順序は文字列比較の際に影響を与えます。
「フィルタ(where)」「ソート(order by)」「集計(group by)」「文字列処理(LENGTH等)」等の際です。

フィルタ・集計

照合順序により、文字の区別の仕方が異なる為文字列カラムに対しての
「WHERE」「GROUP BY」で結果に違いが出ます。

例えば、下記テーブルを使ってどうなるか試してみます。

テーブル:test2

str cnt 備考
1 全角大文字ひらがな
1 全角小文字ひらがな
1 全角英大文字
A 1 半角英大文字
1 全角カタカナ
1 半角カタカナ
a 1 半角英小文字
1 全角大文字ひらがな(清音)
1 全角大文字ひらがな(濁点)
1 全角大文字ひらがな(半濁点)
1 全角大文字ひらがな(濁点)
1 全角大文字ひらがな(清音)
1 全角大文字ひらがな(半濁点)
1 全角大文字ひらがな(清音)
1 全角大文字ひらがな(濁点)
utf8-general-ci

全角半角を区別しますが、大文字小文字は区別しません。

下記SQLを実行してみるとどうなるか試してみます。

SELECT str,COUNT(cnt) as cnt FROM `test2` GROUP BY str
結果

大文字小文字は区別しないので、「a」「A」は集計されて同じ行になってます。

str cnt
A 2
1
1
1
1
1
1
1
1
1
1
1
1
1
utf8-unicode-ci

全角半角・大文字小文字・カタカナ・ひらがなも区別しません。
また濁音・半濁音・清音をすべて同じ文字として扱います。

下記SQLを実行してみるとどうなるか試してみます。

SELECT str,COUNT(cnt) as cnt FROM `test2` GROUP BY str
結果

全角半角・大文字小文字・カタカナ・ひらがなも区別されず集計されている事がわかります。

3
4
2
3
3

テーブルのJOIN

照合順序が違うカラムでJOINするとSQLエラーが起きます。
下記エラーは、「utf_general_ci」と「utf-unicode_ci」のカラムでJOINした場合です。

#1267 - Illegal mix of collations (utf8_general_ci,IMPLICIT) and (utf8_unicode_ci,IMPLICIT) for operation '='

文字列処理

CHAR_LENGTH

文字数カウントはbinary以外影響受けない

SJIS unicode EUC_ja binary
文字列 sjis_japanese_ci cp932_japanese_ci utf8_general_ci utf8_bin eucjpms_japanese_ci binary(※) 備考
山田太郎 4 4 4 4 4 8 全角
あぁ 2 2 2 2 2 4 全角大文字小文字
MySQL 5 5 5 5 5 5 半角英大文字小文字
アア 2 2 2 2 2 4 全角半角

※binaryにすると、データ型が自動で「varbinary」に変更になります。

LENGTH

バイト数カウントは文字コードによって取れる値が異なります。

SJIS unicode EUC_ja binary
文字列 sjis_japanese_ci cp932_japanese_ci utf8_general_ci utf8_bin eucjpms_japanese_ci binary(※) 備考
山田太郎 8 8 12 12 8 8 全角
あぁ 4 4 6 6 4 4 全角大文字小文字
MySQL 5 5 5 5 5 5 半角英大文字小文字
アア 3 3 6 6 4 4 全角半角

※binaryにすると、データ型が自動で「varbinary」に変更になります。

「_bin」と「binary」のバイト数が異なるのは
「_bin」は処理のときに、設定した文字コードを使う(utf8_binならutf8を使う)のに対し「binary」は
データ形式も処理の際の言語もバイナリーとなる為です。
https://dev.mysql.com/doc/refman/5.6/ja/charset-binary-collations.html

ソート

utf8-binのカラムでORDER BY(昇順)したとき

utf8の文字コードの並び順になります。
http://www.seiai.ed.jp/sys/text/java/utf8table.html

例えば下記の順に並びます。

~id ~name
1 A
2 B
3 C
4 a
5 b
6 c
7
8
9
10
utf8-general-ciのカラムで ORDER BY(昇順)したとき

アルファベット順、あいうえお順に並びます。

~id ~name
1 A
2 a
3 B
4 b
5 C
6 c
7
8
9
10
utf8-unicode-ciで ORDER BY(昇順)したとき

アルファベット順、あいうえお順に並びます。

~id ~name
1 A
2 a
3 B
4 b
5 C
6 c
7
8
9
10

Vue.js 初めの一歩

Javascript Vue.js

Javascriptでよく耳にするMVVMフレームワークとは何か、jQueryでDOM操作は複雑になってくると辛いので
何とかしたいという気持ちからVue.jsを勉強し始めました。

まず、下記を読みました。

ガイドは、英語訳だからかちょっと読みづらかったですが
サンプルも多く、意味を理解するのには困らなかったです。

jp.vuejs.org

www.slideshare.net

スライド分かりやすかったです。

ガイドを読んで、少しサンプル動かした後だと
染み込む情報量が多くて、参考になりました。

誰かが、新しい事を勉強し始めるときはまずスライド見て
概要を掴むという話をされてた気がしますが、確かにいいですね。

Vue.jsの特徴について、ガイドを読みながらまとめていたのですが
スライドの方が分かりやすいので、辞めておきます。