著者アーカイブ 杉浦

著者:杉浦

google trendsの紹介

 googleは世界中で使われている検索エンジンです。google trendsはgoogleで検索された回数を元にその時々の流行みたいなものを見せてくれるページです。流行りみたいなもの、というのはあくまで検索された回数が大本のデータの為です。google検索を滅多に行わない集団の流行などはわかりません。スマホ出現の前後でインターネットのユーザ層は大きく変わったように思えます。あくまで検索回数が元というからにはトレンドというより話題性といった方がよいかもしれません。google trendsの使い方は検索ボックスに調べたいワードを入れるだけです。,区切りで検索ワードの時点で複数ワードの比較を命令できます。

 google trendsは人気度の動向、その言葉が検索された地域、関連したキーワードやトピックを表示してくれます。
 人気度の動向は最も検索されていた時を100として表示します。このためいついつに比べて、何々に比べて、と相対的にものごとを調べる時に使うのが良いです。下図の花粉症の様に、何かの要因で検索頻度が激変している言葉もあります。
 
 その言葉が検索された地域は国単位、国の中の地域(県や州)単位、国の中の都市単位で表示されます。下図の様に地域性で違いが出ます。

 関連したキーワードやトピックは、ユーザが対象のワードを検索した後に行った検索やページ遷移を元に定められています。下図はブログを書いていた時に”google”で検索した時の結果です。

著者:杉浦

機械学習の各手法やディープラーニングの共通部分

 この記事では機械学習の各種手法のアルゴリズムに共通する部分を述べます。この記事において、ディープラーニングは機械学習の一手法と扱います。アルゴリズムや処理の仕方という手法の面においてディープラーニングは機械学習の枠組みに収まっています。
 ディープラーニングの技術の成立の流れは、閾値判定、閾値判定のネットワークであるパーセプトロン、滑らかな閾値判定を行うロジスティック回帰、パーセプトロンとロジスティック回帰を合成したニューラルネットワーク、ニューラルネットワークを巨大で複雑にしたディープラーニング、というものに沿っています。これまで用いられてきた機械学習の手法がディープラーニングにつながってきているわけです。ディープラーニングが機械学習と別者の様に注目される理由はディープラーニングがこれまでの機械学習手法とは格別のパフォーマンスを持っているためです。ディープラーニングは性能面では今までの機械学習と別物扱いできますが、技術的な面では機械学習の一手法です。
 機械学習のアルゴリズムの概略図が下図です。

 それぞれのパーツの説明が次です。パーツ単位でまとめていますが、図中の観測データからの流れに沿って読むと気持ち少しわかりやすいはずです。

予測部 予測部はその名の通り観測されたデータから何かを予測する部分です。予測部のみで、入力された画像からその画像が何を表した画像か予測する、盤面から次の一手を予測する、身長から体重を予測する、といったことができます。任意の係数を定数として予測部のみを用いることによって、わずかな計算時間で値の予測ができます。
学習部 学習部はより良い評価値を出力できるように任意の係数を最適に近づけます。予測し、最適に近づけ、を繰り返すループを形成します。このループが学習に見立てられ余す。ループを重ねる程より最適化された任意の係数がわかります。ループを重ねる程より良い結果になる、多量にループを重ねたい、というのが機械学習において計算量が重要視される要因の一つです。

関数

カーネル関数 カーネル関数は観測データを使いやすく加工する関数です。この関数を通すことで計算量を削減したり、素の観測データそのものでは得にくいものを得たりします。
モデル関数 モデル関数は観測データと任意の係数を入力として、予測値と評価値の元になるパラメータを出力します。この関数は機械学習の手法によって中身が大きく変わります。
評価関数 評価関数はモデル関数の出力を入力として評価値を出力します。複数の項目にわたる予測値をまとめたり、値の正規化を行うことが多いです。
学習関数 学習関数は任意の係数と評価値を入力とする関数です。評価値と前状態の任意の係数を元により良い評価値を得られそうな方向に任意の係数を変化させます。

観測データ 観測データは主に実世界から得たデータです。画像識別でいえば入力画像、識別して欲しい画像達のことです。
予測値 予測値は観測データと任意の係数を入力としたモデル関数から出力される値です。画像識別では画像に付けられる銘になります。
任意の係数 任意の係数はモデル関数に与えられる値です。この任意の係数を最適化してより正確な予測をします。任意の係数の最適化を行う過程は人間の学習に似ています。
評価値 評価値は予測値が良い予測値なのか、悪い予測値なのかを評価した値です。任意の係数を変化させて、評価値を最大化ないし最小化しようとするアルゴリズムが機械学習です。

 いずれの機械学習も、モデルに沿った最高の評価を得る任意の係数を求める、という最適化問題を解こうとしています。機械学習は、何々から何々の最適な予測を行う、という言葉に落とし込める問題には全て挑めます。課題はどの様に入力、予測、評価を数値化するか、どの様なモデルを作成するか、どの様に入力データを得るか、です。また機械学習は応用できます。近年、注目されているディープラーニングを用いた自動画像生成アルゴリズムであるGANは、入力された画像からその画像が自動生成された画像であるか生の画像であるかの最適な予測を行う機械学習とノイズから生の画像に近づける変化の最適な予測を行う機械学習をつなげることで実現されます。

著者:杉浦

npmの紹介

 npmはnpmはNode.jsのパッケージマネージャです。Node.jsはサーバサイドjavascript環境です。雑に特徴を抜き出した言い方をすると、javascriptと銘打ってありますがブラウザを必要としない環境です。ローカルのサーバのみで終わることが出来るため、単体で完結しているアプリ同然のように思えるパッケージも少なくありません。Chrome等ブラウザ上の自動テスト画像の差分出力各ブラウザに対応している記法チェックオプションがこれでもかと付けられるLintなど様々です。
 また、それぞれを組み合わせることも可能です。例えば、ブラウザ上の自動テストで期待する画面のスクリーンショットをあらかじめ用意しておき、調べたい状態でスクリーンショットを取得、期待する画面のスクリーンショットと比較することで大量のテストを楽に行うこともできます。

著者:杉浦

ソースコード中のコメントした方がいいこと、悪いこと

 ソースコード中には自由にコメントを書くことができます。コメントの良い点はプログラミング言語の記法に縛られることなく自然言語で書き手の意図を読み手に知らせることが出来る点です。コメントの悪い点はソースコード中の文字数が増えるところです。
 良い点が悪い点を超える際にのみコメントを記述することが理想になります。しかしながら困ったことに読み手がどのような人かによって良い点が悪い点を超える瞬間は大きく左右されます。例えば、次のようなコードがあります。

array_object = Array.prototype.slice.call(array_like_object)//array_like_objectを配列に変換する

Array.prototype.slice.callはjavascriptで配列っぽいオブジェクトを配列として変換したい時によく使われる慣用句みたいなものです。”Array.prototype.slice.call”(完全一致)でググると約171,100件もヒットします。散々使われ倒しているため、javascriptをやり込んでいる少なくない人にとって、このコメントは余分な情報で邪魔者です。一方で、Array.prototype.slice.call(引数)という文面には引数を配列に変換するという意味の単語はまるで使われていません。これがarray_like_objectを配列に変換するコードだと連想することは難しいでしょう。初めて読んだ時は自分も何だこれとなりました。javascriptを学んでいる途中の人にはこのコメントは必要でありがたいものです。慣れという部分でコメントをするべきしないべきかが変わり境界は曖昧です。
 明確にコメントを行うべきでないという場合はソースコード中の記述がそのままコメントの内容と同じになるときです。javascriptのES6記法では配列っぽいオブジェクトを配列として変換したい時に次の様な記述ができます。

array_object = Array.from(array_like_object)//array_like_objectを配列に変換する

 コメントはいらないのではないかというくらい動作を連想しやすい記述です。そのまま英語として読めるくらいです。このような際にコメントは多くの人にとって邪魔なものになるでしょう。
 おまけに極端な場合を紹介します。
 情報を伝えないコメントは単に無駄なだけでするべきでないコメントです。コメントアウトされている過去のコードは特にこの手のコメントになりやすいです。
 コメント行がより多くのコード行を説明できる場合、コメントは有用になりやすいです。プログラム、ファイル、関数のようなまとまり全体を説明する場合、大体これにあてはまります。コメント十行でコード数百行を説明するような感じです。

著者:杉浦

任意の本の色合いからカラーチャートを得るColor of Book

Color of Book – 雑誌の色からhtml,cssで利用できるカラーチャートの紹介
 Color of Bookは任意の本の色合いからカラーチャートを得るサービスです。Color of BookではAmazonに存在する本の表紙画像から画像を取得し、その画像中で多く使われている色、特徴的に使われている色を見つけ、それを図示してくれます。本の指定は自由検索、ファッション誌、スポーツ誌のジャンル選択の三種類です。0から作るのが面倒な時、ほげほげの本みたいな雰囲気の色を作りたい時などに特に利用できます。盗作にならない程度に使いましょう。
 このサイトはhttp://colorchart.jp/color/[ISBN-10]のアドレスでamazonで表示される任意の本の表紙を参照することが出来ます。ISBN-10はamazonの書籍商品ページのアドレスのdp/以下に表示されています。これを利用して検索機能のより充実したamazonページを経由してアクセスできるようにすればなお便利です。

著者:杉浦

GETメソッドとブックマークレット

 HTTPはHyperText Transfer Protocolの略であり、HTMLなどのwebコンテンツを送受信する際によく使われています。GETメソッドはHTTPプロトコルの通信方式の一つです。GETメソッドはURLの末尾にパラメータを付加して通信を行います。URLはブラウザの履歴、サーバやファイアウォールのアクセスログなどユーザが意図しない内に様々な場所に記録されます。このためURLを得ることでその通信時のパラメータを得ることのできるGET方式で第三者に渡されるべきでない情報を扱うことは厳禁とされています。
 GET方式は通信内容を把握しやすく、改ざんしやすい方式です。この扱いやすさのため検索エンジン等の通信時の情報が第三者に渡されてもかまわない様な通信ではGET方式がよく使われます。GET方式の様な通信はURLをしかるべき形に加工してそのURLに移動するだけで任意の通信が行えます。実際、下の様なコードで手軽にwebサービスを利用できます。リンクは直下のソースコードを一行にしただけのブックマークレットです。
選択されているテキストを英語から日本語へ翻訳するgoogle翻訳

javascript: (function () {
	open('http://translate.google.com/translate_t?hl=ja&sl=en&tl=ja&q=' + encodeURIComponent(window.getSelection()));
})()

選択されているテキストの類語をWeblio辞書 類語辞典で検索

javascript: (function () {
	open('https://thesaurus.weblio.jp/content/' + encodeURIComponent(window.getSelection()));
})()

選択されているテキストの正規表現をREGEXPERで表示

javascript:(function(){
        open('https://regexper.com/#'+encodeURIComponent(window.getSelection()));
})()
著者:杉浦

安全で整ったコードを作るためプログラムlint

 lintとはソースコードを厳密に詳細にチェックするプログラムの総称です。総称とある通り、多数の言語でlintは作成されています。
 規模や目的の複雑さにもよりますがプログラムを完全に想定した通りに動かすことは容易ではありません。また、想定外の問題が起きることも多々あります。lintはプログラムが動作不能になるような致命的な文法エラーのみならず様々なものを発見する目的で使用します。例えば、間違いを犯しやすい記述であるアンチパターン、インデントの乱れのようなコードスタイルのぶれなどです。lintはソースコードをコピペするだけで実行されるwebページの手軽なものから、様々な設定を行った上で複数フォルダ間を総じて検査するCLIのがっつりしたものまでさまざまな規模のものがあります。
 手軽なjavascriptのlintの一つとしてjshintというものがあります。このページはコピペだけでjavascriptの厳密なチェックを行ってくれます。
 以前記述した10行程度の簡単なコードをjshintにかけてみました。結果は下の図の通りです。

 セミコロンが抜けているという警告、未定義の変数が存在しているという報告がされました。前者は限られた状況、例えばブックマークレットや一行記述にコードを変形した際に、プログラムの挙動が変化したり、実行不能になったりする問題が起きます。今回のケースに限り後者は大きな問題です。この記述においてhoge_strはグローバル変数として扱われ名前領域の汚染など他の記述に影響を与えてバグの原因になりえます。
 非常に多くの場面で使われているオープンソースの一つであるjQuery中の一つファイルをjshintにかけた結果が下の図です。
 
 全体で130行程度のコードですが、完璧に記述されています。変数defineが未定義とされていますが、他のファイルとの連携のために記述されているもので、このファイルの処理中には一切登場しません。余談ですがこのファイルはjQueryのcoreフォルダ中で最も長いファイルです。上手く作られていますね。

著者:杉浦

ホワイトテストと網羅率

 テストはプログラムの構成要素を参考にするもの、参考にしないもので二種類に分けられます。前者がホワイトテスト、後者がブラックテストとされます。ホワイトテストは設計の通りにプログラムが動作するかを確かめます。ホワイトテストによるテストではテスト内容を条件分岐の網羅などソースコードを元に定められます。ホワイトテストで考えられるテストは、ソースコードの全ての部分を実行する、ソースコードの全ての部分を様々な状態で実行する、ソースコードの全ての部分をあり得る全ての状態で実行する、といった様なテストです。
 ホワイトテストにはテスト達が所定の網羅条件をどれだけ達成しているかを表すカバレッジ(網羅率)という単位が定められています。hogehoge coverage xx%やCx xx%の様に表されることが多いです。

命令網羅 (statement coverage) (C0) 実行可能な命令の網羅率です。条件分岐の仕方に関わらずコード全体のうちどれだけが実行されたかを表します。
分岐網羅 (branch coverage) (C1) 実行可能な分岐の網羅率です。全体のうちどれだけの分岐を通ったかを表します。
条件網羅 (condition coverage) (C2) 実行可能な条件の網羅率です。全体のうちどれだけの条件を通ったかを表します。

真にプログラム上でありうる状態を網羅するためには条件網羅であっても力不足ですが、現実の時間は有限です。組み合わせ爆発にあるように、真に網羅を行うテストは実行時間が現実的でありません。後述しますが、網羅を目標にするテストのみではバグを見逃すことが多々あります。
 次のコードを例に命令網羅、分岐網羅、条件網羅それぞれを説明します。

function (a,b,c){
	if((a == 1 && b == 2) || c==3){
		//ifの中の処理。分岐なし
	}
	return;
}

このコードで入力引数がa=0,b=0,c=3のテストのみを実行した場合、C0:100%、C1:50%、C2:33%となります。まずC0:100%について説明します。これは実行可能な命令の網羅率です。引数がa=0,b=0,c=3ならばifの中に入りコード全体の命令を実行したことになり網羅率100%となります。次いでC1:50%について説明します。これは実行可能な分岐の網羅率です。このコードはifの中に入る入らないで2通りの実行ルートがあります。引数がa=0,b=0,c=3のテストのみを実行した場合、片方のルートのみを通ったということであり網羅率50%です。最後にC2:33%です。これは実行可能な条件の網羅率です。このコードにおいて実行可能な条件の組み合わせは(a == 1 && b == 2)=true,(a == 1 && b == 2)=falseかつ(c==3)=true,(a == 1 && b == 2)=falseかつ(c==3)=falseの3種類です。(a == 1 && b == 2)=trueの場合、二つ目の条件c==3の結果を評価せずとも条件の真偽値が定まるため二つ目の条件を評価しない言語が大多数です。そのためカバレッジでも二つ目の条件を評価しません。1/3を網羅したためC2:33%です。
 カバレッジはテストケースを考えるのに有用な基準ですが先に述べた通り100%を追求することは割に合わないことが多いです。実際のケースは上手く記述しようとも巨大で複雑になります。そのような場合、完全に網羅を行い、現実的な実行時間に収まるテスト達を考えることは困難です。加えて、カバレッジの追求のみでは実行パスに関わらないエラー要素、例えばa=b/cという処理におけるc=0の場合の様なバグが漏れやすいです。あくまで経験ですが高級言語の様な通常の記述において暗黙的な処理を多分に含む言語ほど命令、条件の網羅によるテストから漏れるバグが増えます。多方面からテストを行うことによって効率よくソフトウェアの品質を検証できます。

著者:杉浦

覚えておくべき変数の少ないソースコード

 この記事の話はリーダブルコード9章のあたりにより詳しく書いてあります。
 人間が一度に覚えて置ける項目の数の話は色々ありますが、それらの話のうちに大量の物事を詳細に覚えていられると述べるものは滅多にありません。覚えておくべき変数の少ないコードは人間が変数に格納されるであろう値を覚えながら読むことのできる良いコードです。そのようなコードは保守性が高く、バグが起こりにくいです。
 覚えておくべき変数を少なくするためには、そもそも変数を増やさないことが最良です。もしあるソースコード中に出現する変数が3つのみであれば、そのソースコードがどれだけ長大であっても、記憶しておくべき変数は3つより多くなりません。よく消える変数は一時的な値の置き場となっている変数、アルゴリズムの制御を担っている変数です。どちらもとりあえず書いて動かしてみる、という手法を行ったコードによく現れ、見直しによるコードの整理によって除去されます。次のコードの場合、bは用いず、aにまとめられるというになります。

var a = 'hogehoge';
/* aを用いるがaの値を変更しない処理 */
var b = 'hogehoge';
/* bを用いた処理 */

 変数が参照される範囲を小さくするという次善策もあります。変数には参照できる範囲、スコープが定められています。このスコープを少ない行数の範囲に留めることで、一度に覚えておくべき変数の数が少ないコードを実現します。言語にもよりますがスコープはおおよそ変数の宣言場所から、宣言を行った塊であるモジュール、クラス、関数などが終わるまでと定められます。宣言時の塊の最小単位の終わりがスコープの終わりとなることを基本とする言語が多いです。このスコープが小さい変数ばかりであれば、覚えておくべき変数が常に少ないコードの実現に近づきます。
 小さいスコープを実現するためには少なくとも二つの方針があります。
 一つは変数の宣言を変数を使用する直前にすることです。ある変数が使用されるはるか前に宣言されていた場合、使われない変数に頭を取られたり、使用された場所でこれ以前この変数はどのような操作をされたのか考えることになったりします。次のコードは塊の最初に変数a,b,cを宣言しており、全ての変数を最後まで記憶する必要があります。

var a,b,c;
/* aのみを用いた処理 */
/* bのみを用いた処理 */
/* cのみを用いた処理 */

一方で使用直前に宣言した場合、次の様になります。

var a;
/* aのみを用いた処理 */
var b;
/* bのみを用いた処理 */
var c;
/* cのみを用いた処理 */

このコードは変数b,cを記憶する時間が全ての変数を最初に宣言するコードより短くなっています。
 もう一つは小さい塊を多数用意し、処理を細分化し、各々その中で変数を宣言することです。この小さい塊を多数用意する手法には問題の細分化による単純化、容易な単体テスト、抽出された汎用処理の再利用、などといった利点もあります。関数やメソッドの様な多用される塊は余裕をもって一画面に収まる様にされます。一画面に収まる程度ならば処理は複雑になりにくく、一度に使用される変数も少ないです。この手法においてソースコード全体で使用される変数の数は十分多いですが、コードを読む際には塊単位で読めばよく、一度に覚えておくべき変数は少なくなりやすいです。次のコードは関数hoge_aを読む時は変数aのみを記憶すればよく、b、cも同様です。

function hoge_a(){
	var a;
	/* aのみを用いた処理 */
}
function hoge_b(){
	var b;
	/* bのみを用いた処理 */
}
function hoge_c(){
	var c;
	/* cのみを用いた処理 */
}
著者:杉浦

画像リサイズwebアプリbulkresizephotosの紹介

bulkresizephotosは複数の画像のサイズをまとめて変更するwebアプリです。
 このwebアプリは手軽という点で優秀です。複数の画像をあっという間にリサイズしてくれます。ページを開いて画像をまとめてDrag & Dropして操作準備完了です。
このアプリが無料でできる動作はScale、LongestSide、Width、Height、ExactSize。それとAddWatermarkのオプションです。
 Scaleは画像を一律の割合で拡大、縮小します。下図のExamplesにある様に、各動作はそれが画像をどのようにリサイズするかを教えてくれます。

 Width、Height、ExactSizeは幅を一定、高さを一定、幅と高さを一定、とリサイズとExmaplesを見ればすぐにわかります。LongestSideのExamplesは少々不親切です。LongestSideは長辺(Longest)の側(Side)の長さの指定です。600×400の画像と100×200の画像を指定1200でLongestSideを実行した場合、それぞれ1200×800、600×1200のサイズの画像になります。
 AddWatermarkは透かしの追加のことです。見本マークや紙幣の透かしの様に、AddWatermarkで指定した画像が他の画像全てに合成されます。