web系な備忘録

私が忘れてもブログがあるもの

はじめての(WAFを使った)サイト作り

サイト作り

 声優さん解析結果を公開するにあたり、jsでインタラクティブな動きをする状態(http://suino.info/dev/seiyu_graph/2013_summer みたいな感じ)でお見せしたいと思い、はてな以外にちゃんと自分のサイトを持つことにしました。

 サイトを作った経験自体は多少あれど、ただ各ページのhtml書いてftpで送るだけ。とか、phpでDBアクセスしたらすごい頑張った!程度のことしかしていなかったので、なんかもうちょっとエンジニアっぽいことをしたくて、ごそごそやりました。参考になったサイトなどを備忘録的に残しておきます。

さくらVPS

 サーバーの勉強のため昨年から借りていたものの全く活用できていなかったので、今度こそ使う。

 せっかくなのでお名前ドットコムでドメインを取ってみました。(おかげでお名前ドットコムの広告が出まくるようになってしまった……w)

Mojolicious

 フレームワークなんて必要ない極小サイトですが、せっかくなので勉強がてら何か使ってみたくてですね。今流行りのRuby on Railsとやらにしようか迷ったんですが、名前の親近感からMojoliciousを導入しました。日常的にPerlに触れるようにしたかったのもあり。非常にシンプルで、丁寧な日本語の解説サイトもあるので良さそうです。

Twitter Bootstrap 3.0

 2.3で途中まで作っていたんですが、気が変わって3.0を使うことに。タグがかなり変わっているため、以下のガイドに大変お世話になりました。

 カスタムレイアウトサイトも、2.3時代より洗練されている気がする……ということでフラットUIなデザインをお借りしてきました。

Google Analytics

 せっかくなのでつけておきました。単純にアクセス数を見る程度であればすごく簡単ですねー。公式の解説で簡単に設置できました。

 いつか凝ったことをしたくなったらここを参考にするんだ…とメモしたものの当面必要なさそうなやつ↓

余談

 はてなブログってMarkdown対応してたんですね。便利。

何もしてないのにターミナルが壊れた

 特に何かいじった記憶はないのですが、気が付いたらターミナルが壊れていました。症状としては

  • vimの色設定が反映されていない(プラグインは普通に使えている)
  • screenしようとすると「Cannot find terminfo entry for 'xterm-256color'」と言われる

 ターミナルの設定→詳細→ターミナルの宣言方法では、以前からxterm-256colorを使っていて、特に問題もありませんでした。.screenrcには以前の記事のように「term xterm-256color」と設定しているので、ターミナルとscreenの設定は同じになっていて大丈夫なはずなのに何故?
 とはいえ無いものは無いんだろうなーと/usr/share/terminfo/を見てみたら、どうもxterm-256colorがないっぽい。前はあったんじゃないの? よく分からない。

結論

  • ターミナルの宣言方法をxterm-colorに変更
  • .screenrcにterm xterm-colorと書く

で解決。
数日前まで普通に使えてたのでなんだかもやっとするけど、とりあえず良しとする。

疎行列計算ライブラリ UJMP

疎行列とは

 修論で初めて行列計算が必要になりました(遅い!)。
 まず,今回Twitterデータを扱う関係上,便利なTwitter4jと併用できると楽なのでJavaのライブラリを探しました。
 JAMA: Java Matrix Packageというのがなかなか簡単に書けてよさそうだったのですが,試しにデータ数を増やして10000×10000ぐらいのMatrixを作った瞬間OutOfMemory。そりゃそうか。要素数1億ですからね……。
 この10000×10000な行列は,ほとんどが0で,ごくたまに数値が入る,いわゆる疎行列です。疎行列が具体的にはどんなものかといいますと、
 普通の行列が以下のように、要素全てを持っている形であるのに対して、

|0 0 0|
|3 0 0|
|0 0 2|

 疎行列は、0でない要素だけを持っている行列です。
 ほとんど0ばかりな行列を扱う場合にデータ量が少なくてすむという利点があります。

(3, 1, 0),(2, 2, 2)

↑(1, 0)に3を入れる,という感じのデータだけを渡せばいい

 が,JAMAは疎行列計算ができないということに、ここで気が付きました。ガッデム。

UJMPの紹介

 いくつかライブラリを迷走した結果(PythonのScipyにも手を出しました。書けたけど,遅い気がするのと,JavaプログラムとPythonプログラムの間を行ったりきたりするのに疲れたので,Javaのライブラリを改めて探しました),Universal Java Matrix Package | Free Development software downloads at SourceForge.netというJavaライブラリに落ち着きましたので、使い方を紹介します。
 日本語ドキュメントが全然見つからなかったので、疎行列を扱いたい日本語Javaユーザさんの参考になれば幸いです。

普通の行列
int row = 100;
int column = 1;
Matrix m1 = Matrix.factory.zeros(row, column); // 全部ゼロな行列
Matrix m2 = Matrix.factory.ones(row, column);   // 全部1な行列
疎行列を扱う
int row = 10000;
int column = 10000;
SparseMatrix sm = SparseMatrix.factory.zeros(row, column);// 疎行列はこの全部ゼロな行列でしか初期化できない模様(使い方からして当然だけど)
sm.setAsInt(3, 1, 0);// 1行目0列目に3をセット。setAsIntとかsetAsStringとかいろいろあります。どんな風に入れても,取り出し型に合わせてよしなに返してくれます。
転置行列

 transposeという関数があるものの,SparseMatrixには使えないらしいので,書いてみました。availableCoordinates()という,非ゼロ要素の座標を取ってきてくれる関数がとても便利です。(本当は実装されているのに気がついていないだけかも、という気がしてなりませんが……)

SparseMatrix st = SparseMatrix.factory.zeros(row, column);// 転置後の行列
for(long [] cd : sm.availableCoordinates()){      // 非ゼロ要素のみ座標をイテレータで転置位置にセット
    st.setAsDouble(sm.getAsDouble(cd[0], cd[1]), cd[1], cd[0]);
}
四則演算
加 a.plus(b)
減 a.minus(b)
乗 a.mtimes(b)
除 a.divideMatrix(b)  or  a.divideScalar(b)

 各関数は,ReturnTypeを引数に設定できるようにもなっていて,Ret.ORGを設定すれば行列aを計算後の状態に変更し,Ret.NEWを設定すれば行列aはそのままで、返り値が計算結果の新規行列になります。用途によって計算結果の出し方を使い分けられるのは便利そうです。

ノルム(要素の絶対値の和とか,自乗の和とか)も一通り計算できます。

w.norm1();

固有ベクトルも計算できます。

Matrix[] eig = w.eig();

eig[0]がV,eig[1]がDです。VとDについては専門のページを参照してください。

行列の一部を切り出すことも可能です。

m.submatrix(ReturnType, startRow, startCol, endRow, endCol);

 そのうち、PageRankの計算プログラムを紹介しようと思います。上記の組み合わせで出来てしまいますが。
 なんとなく難しい印象のある行列計算ですが、UJMPではとても簡単に、そして高速なコードが書けるので、ぜひ試してみてください!

 ※間違い等ありましたらご教授くださいm(_ _)m

疎行列計算ライブラリ UJMP

疎行列とは

 修論で初めて行列計算が必要になりました(遅い!)。
 まず,今回Twitterデータを扱う関係上,便利なTwitter4jと併用できると楽なのでJavaのライブラリを探しました。
 JAMA: Java Matrix Packageというのがなかなか簡単に書けてよさそうだったのですが,試しにデータ数を増やして10000×10000ぐらいのMatrixを作った瞬間OutOfMemory。そりゃそうか。要素数1億ですからね……。
 この10000×10000な行列は,ほとんどが0で,ごくたまに数値が入る,いわゆる疎行列です。疎行列が具体的にはどんなものかといいますと、
 普通の行列が以下のように、要素全てを持っている形であるのに対して、

|0 0 0|
|3 0 0|
|0 0 2|

 疎行列は、0でない要素だけを持っている行列です。
 ほとんど0ばかりな行列を扱う場合にデータ量が少なくてすむという利点があります。

(3, 1, 0),(2, 2, 2)

↑(1, 0)に3を入れる,という感じのデータだけを渡せばいい

 が,JAMAは疎行列計算ができないということに、ここで気が付きました。ガッデム。

UJMPの紹介

 いくつかライブラリを迷走した結果(PythonのScipyにも手を出しました。書けたけど,遅い気がするのと,JavaプログラムとPythonプログラムの間を行ったりきたりするのに疲れたので,Javaのライブラリを改めて探しました),Universal Java Matrix Package | Free Development software downloads at SourceForge.netというJavaライブラリに落ち着きましたので、使い方を紹介します。
 日本語ドキュメントが全然見つからなかったので、疎行列を扱いたい日本語Javaユーザさんの参考になれば幸いです。

普通の行列
int row = 100;
int column = 1;
Matrix m1 = Matrix.factory.zeros(row, column); // 全部ゼロな行列
Matrix m2 = Matrix.factory.ones(row, column);   // 全部1な行列
疎行列を扱う
int row = 10000;
int column = 10000;
SparseMatrix sm = SparseMatrix.factory.zeros(row, column);// 疎行列はこの全部ゼロな行列でしか初期化できない模様(使い方からして当然だけど)
sm.setAsInt(3, 1, 0);// 1行目0列目に3をセット。setAsIntとかsetAsStringとかいろいろあります。どんな風に入れても,取り出し型に合わせてよしなに返してくれます。
転置行列

 transposeという関数があるものの,SparseMatrixには使えないらしいので,書いてみました。availableCoordinates()という,非ゼロ要素の座標を取ってきてくれる関数がとても便利です。(本当は実装されているのに気がついていないだけかも、という気がしてなりませんが……)

SparseMatrix st = SparseMatrix.factory.zeros(row, column);// 転置後の行列
for(long [] cd : sm.availableCoordinates()){      // 非ゼロ要素のみ座標をイテレータで転置位置にセット
    st.setAsDouble(sm.getAsDouble(cd[0], cd[1]), cd[1], cd[0]);
}
四則演算
加 a.plus(b)
減 a.minus(b)
乗 a.mtimes(b)
除 a.divideMatrix(b)  or  a.divideScalar(b)

 各関数は,ReturnTypeを引数に設定できるようにもなっていて,Ret.ORGを設定すれば行列aを計算後の状態に変更し,Ret.NEWを設定すれば行列aはそのままで、返り値が計算結果の新規行列になります。用途によって計算結果の出し方を使い分けられるのは便利そうです。

ノルム(要素の絶対値の和とか,自乗の和とか)も一通り計算できます。

w.norm1();

固有ベクトルも計算できます。

Matrix[] eig = w.eig();

eig[0]がV,eig[1]がDです。VとDについては専門のページを参照してください。

行列の一部を切り出すことも可能です。

m.submatrix(ReturnType, startRow, startCol, endRow, endCol);

 そのうち、PageRankの計算プログラムを紹介しようと思います。上記の組み合わせで出来てしまいますが。
 なんとなく難しい印象のある行列計算ですが、UJMPではとても簡単に、そして高速なコードが書けるので、ぜひ試してみてください!

 ※間違い等ありましたらご教授くださいm(_ _)m

自分用.screenrc設定まとめ

 Windows&Puttyでscreenした場合は、今自分が何画面目にいるのかがデフォルトでタイトルバーに表示されるけど、Macのターミナルだと出ないようなので、.screenrcを設定してみる。

.screenrc

# スクロールバッファを最大10000行にする
defscrollback 10000

# カラースキーマを設定している場合、screen後のvimで文字部分の
# 背景色だけおかしくなることがあるので設定
defbce on
term xterm-256color

# Macのターミナルだと今どのscreenにいるか分からなくなるので
# 画面下部にscreenの状態を表示するようにする
shelltitle "$ |bash"
hardstatus alwayslastline "%`%-w%{=b bw}%n %t%{-}%+w"

# デフォルトで3つscreenを開くようにする
screen
screen
screen

.bashrc

# screen名を、mysqlとかvimとか現在の使用コマンドにする
PS1='\033k\033\\[\u@\h \W]\$ '

できた!ヽ(゚∀゚)ノ

(でも、全画面でscreenした後に全画面解除するとvimの背景色がおかしくなるのは何故だろう……)

以下は、rootユーザから一般ユーザにsuした後にscreenしたら
「Cannot open your terminal '/dev/pts/0'」と出る場合の対処法です。

.bash_profile

script /dev/null

ちなみにデザインは有名な「Solarized」です。
altercation/vim-colors-solarized · GitHub

こちらで紹介されているWindowsのオフィスカラーな設定が好きなので、Vim側でこうなるように設定しなおそうかなあ。
PuTTYのおすすめ配色デモ - 情報科学屋さんを目指す人のメモ(FC2ブログ版)

Google主催の女子学生向けプログラミングイベント「Google Technical Workshop featuring GLIDE #2」に参加してきました!

 Google Technical Workshop #2 のお知らせ: 他の女子学生と一緒にプログラミングをしてみませんか? - Google Japan Developer Relations Blog
 だいぶ遅くなってしまいましたが、思い出しつつまとめます〜。

 研究室の教授からこのイベントについて教えてもらい、(なんかもらえるかも!)(Googleのオフィスに潜入してみたい!)という不純な動機で参加。でもイベント自体もとても面白かったです。

事前準備

 今回のイベントは、Google Maps APIを使って簡単なWebサービスを作ってみようというものでした。
 参加者には、事前にチュートリアルが配布されていました。html+jsでマップを描画したサンプルコードや、jsのデバッグ方法、どのコードがどういう意味を持っているのかなどなど。
 私は今回初めてGoogle Maps APIを使ったんですが、これに従うとかなり簡単に基本のコードが書けました。いいチュートリアルなので、一般公開すればいいのになあ。

当日

 受付で自分の名札(英語)を受け取り、プログラミングレベルを選びます。チュートリアルは大体分かっててその先を学びたい人、チュートリアルぐらいのことをやりたい人、もっと初心者な人の3段階。てっきりデキる人ばっかりいるのかと思いきや、参加者の方と話してみると、まだ大学1年生でプログラミングそんなにしたことないんですって人もチラホラいたので、ちょっとホッとしましたw あとハッシュタグを追っていたら北海道から来ていた人もいたみたい。っていうか交通費出たんだ。さすがGoogle
受付付近でウロウロしていたら、研究室の留学生2人と、他研究室の後輩を発見。いたのねー。
 ちょっと遅く着いたのでだいぶなくなっていましたが、スイーツがたくさん用意されていました。マカロンおいしい。Google Mapのマーカー型クッキーおいしい!

 イベント開会の挨拶の後、レベル別に3部屋に移動し、3〜4人のチームを作ってアプリ作成を開始しました。
 私のチームは、同じ大学の後輩(顔見知り)Aさん、他大の院生のBさん、そして私の3人でした。二人とも前回のイベントにも参加したらしく、共同プログラミングのコツを心得ています。しかも、二人ともチュートリアル+αの実装をしっかりしてきていたので、かなり安心感がありました。

  • Create a new fiddle - JSFiddle
    • jsを簡単に確認でき、更に簡単なバージョン管理ができるサイト
  • 簡易WEBサーバーとしてdropboxのパブリックフォルダが便利

 などなど、教えてもらいました。
 とはいえ実際にはjsfiddleでの画像管理が難しかったので、各自ローカルで作成し、たまにBさんにマージしてもらうという形で進みました。

 初対面ながら、「ここをこうしたらいいかも!」「じゃあ私ここやります!」みたいな分担がスムーズに出来て、かなり良い感じに開発できたんじゃないかなーと思います。その場でパッと共同プログラミングというのは初めてでしたが、かなり楽しめました。もし私のような初心者が3人集まっていたら、データ共有の方法からして右往左往して詰みそうなので、メンバーに恵まれましたw

 そんなこんなで最後に開発物を軽く発表して終了。
 最後に色々プレゼントがあったんですが、くじで当たらずもらえませんでした。残念。
 でも、Google Chromegmailのステッカー、ドロイド君のプリントされた手袋などをいただきました。ありがとうございます!

余談

 ドキッ!女子だらけのGoogleハッカソンに参加してきた - kondoyukoのカルチュラル・ハッカーズ
 id:kondoyuko さんを見かけたのでミーハーっぽく話しかけてしまいました。気さくに応じてくれた上に可愛いステッカーもらっちゃいました。ありがとうございました! また何かでお会いしたいものです。

感想

 アメニティやスイーツサービスなど、さすがGoogle!という感じでした。情報系女子学生を100人も集められるブランド力。
 個人的な反省としては、壁際の席に座ってしまったために、せっかくの機会だったのに社員さんに質問ができなかったこと。あと、わりと自分で実装方法がイメージできる部分ばかり請け負ってしまったので、質問するきっかけすらなかったことですね。せっかくだから、7割ぐらい分かるけど3割ぐらい不明な課題に挑戦すれば良かったかなーと。
 情報系女子学生っていっぱいいるんだな!って感動した反面、普段大量の女子を見ていない環境なので、友達同士で来ているっぽい人々に話しかける勇気が足りなかったり……あと一歩踏み込むべきでした。
 そんなこんなで、反省も多いイベントでしたが、いい経験になりました。皆さんありがとうございました!

サイボウズ主催の学生向けイベント「エンジニアの未来サミット」に参加してきました!

 エンジニアの未来サミット | Cybozu Inside Out | サイボウズエンジニアのブログ
 小飼弾さんとはまちや2さんが講演するとか行くしかないですよね。実際、行って大正解のイベントでした。面白かった〜。

小飼弾さん「ものづくり日本の終焉とIT業界の未来」

 家電量販店でのWin8の売り方を題材に終焉っぷりを語る。
 タッチパネル、ディスプレイが可動してタブレットとしても使えることを売りにするべき機種のはずなのに、普通のノートPCのように開いた状態で置かれている、タッチ範囲である画面上に「タッチパネル」と書かれたシールが貼ってある、ディスプレイが後ろに回転されることを全く考慮していない位置にポップが貼られている、国産アピールシールがベタベタ貼られている、などなど……。
「買った人の使い方を想像させる展示ができていない」
「エンジニアは自分の作ったものがこんな展示をされていたら、怒っていい」
 と、Apple Storeでの展示方法(電源コードが刺さってるぐらいで基本的には置いてあるだけ)を引き合いに出して熱弁。
 最終的には
「技術者は自分が使って気持ちいいものを作ろう」
「自分の大切な人(家族・友人)に勧められるものを作ろう」
 と締めくくっていました。

はまちや2さん「IT技術は目的ではなく、手段である」

 スライド1枚目に「こんにちはこんにちは!!」と書いてあって和む。
 基本的には、エンジニアという職業は正解だよ! というお話。潰しがきくし、給料もいい。給料は転職で上げるべきという話も。多くの企業は、一度入ったらなかなか給料は上がらないと。確かに……。
 職人エンジニアと、職業エンジニアの話。
 職人エンジニア……技術がすごい。めちゃくちゃすごい。気づいた時には作っている、根っからのエンジニア。ただし、ビジネス方面とか、電話応対とか、そういった面はからきしの場合が多い。
 職業エンジニア……技術はそこそこ。ビジネスも多少わかってる。いろいろできるバランスタイプ。
 開発部隊としては、職人の方がありがたいことは多い。ただし、その人の凄さを人事は見抜けないことが多い。職人エンジニアも、ビジネス方面や交渉スキルを磨いて視野を広げた方がいい。一人じゃ作れないような大きなものを作りたくなったときに、そのスキルが必ず必要になる。
 企画や営業も、何か小さいアプリでもいいから、プログラムを書いてみた方がいい。
 生きているうちに良いものを世に残そう!

パネルデイスカッション

 サイボウズ・ラボの竹迫さんと技術評論社の富久さんを加えて参加者の質問に答えていっていました。
 参加者の質問も面白いものが多かったし、回答もなにか準備していたのでは?というぐらい充実していて、とても面白かったです。
「なぜアメリカからしかFacebookGoogleのような大企業が出ないのか?」という質問への回答のどこかで「TwitterやFBの『〜分前』という表現は、国内に時差があるアメリカならでは」とあり、目から鱗でした。

懇親会

 その後、4つのテーブルに分かれて、各講演者と懇親会!
 はまちや2さんにこんな質問をしてみました。
「日記CGIやブログの時代は、ネット上に本名や個人情報は出さないという意識がわりと根付いていたと思う。でも最近はfacebookも流行っているし、本名や顔を平気で出している人が多い。そのくせ、パスワードとか細かいセキュリティは気にしている。このような風潮は今後どうなると思いますか?」(とても抽象的!!)
「その指摘は正しくて、ぜひ友人に話してあげてほしい。英語圏で皆平気で実名にしているのは、実名を出しても個人を特定しにくい(JohnとかMichaelとか同じ名前が多い)という話もある。日本はもっと名前がユニークだし、粘着質だしw、気をつけた方がいい。アドバイスとして、ああいったサービスではいくつかアカウントを作るといい。本名で「今日はいい天気ですね」とか当たり障りのないことしか言わないアカウントを作っておくことで、検索されても「なんだこれしか書いてないのか」と、そこで調べられるのを止められる。本名に似た別名とか、本名とは関係ない別名とか、とにかく違うアカウントで「TDL行ってきた!」とかやるべき」
 友人にこういう話をしても「気にしすぎ」とか「自分で出していいことしか書いてないから大丈夫」と呆れられることが多かったので、同意していただけて嬉しかったです。自分の意見に自信が持てましたし、自分のネット観が大きくずれていないことにホッとしました。

終了後

 懇親会後には、学生たちでご飯に行きました。
 学生でありつつもベンチャーでもう働き始めている人や、M2、就活生、プログラミング未経験の子、ギーク感漂っている人、色々いて面白かったです。またどこかでお会いしましょう!

感想

 弾さんの「自分が使って気持ちいいものを作ろう」には、全くその通りだと思う一方で、ユーザとエンジニアが遠いジャンルというのはあると思う。
 例えば、Web系なんかは特にそうで、ソーシャルゲーム系の企業の社員がソーシャルゲームに興味が無く、家族にも薦めない、なんてことはよくありそう。コミュニケーション系サイトだって、ギャル向けサービスを作ってるのが、ギャルとは程遠いおっs……お兄さん達なことはすごくありそう。むしろギャルがサービス作ってたらそれだけでバズる。
(某メーカーが女性社員だけで女性向けノートPC作って、確かにバズっていた。批評も多そうだったけど……個人的には結構好きなデザイン。だからって買い替えはしないけど、、、)
 そんな状況の中で「自分が使って気持ちいい」「大切な人にも勧められる」という、いわゆる万人受けするものを作るのは難しいだろうなと思う。自分的には超絶便利でクールなサービスだと思っていても、多くの人にとって需要はないとか、需要はあったけどそのユーザ層が自分とかけ離れていてUIが合っていないとか。
 それを埋めるために、はまちや2さんが言っていた「交渉スキルを磨け、視野を広げろ」というのが大事になるのだろう。類は友を呼ぶというように、人は基本的に同じような人で固まってしまう。同じ学校の人、同じ趣味の人、同じ価値観の人。仲間と交流することはそりゃ楽しいけれど、世の中にはもっととんでもなく自分とは違う人がいることを知って、自分と異なる価値観に触れることが、自分の欲求を満たし、自分以外の人の欲求も満たせるものづくりの正攻法なのだと思う。(すごく当たり前の結論に至ってしまった)
 自分の作りたいものを貫き通して、それを気に入ってくれる人だけに提供する、というのがエンジニアとしての一つの理想ではあるけどね。
 私は「色んな人に使ってもらいたい、楽しんでもらいたい」という気持ちの方が強いので、ちゃんと色んな人と接していかなくては。勉強会に参加して頭いい人々に出会って自分も頭良くなった気分だけ味わってちゃダメだなあ。オフ会もよく行くけど、所詮趣味(音楽)のつながりなので、共通項がある。もっと自分に遠い人に会ってみたい。やっぱギャルかな……。