Aggressive Style 5

Aggressive Style 5

昨今はコミケ関係を中心に書いています。同人やニコニコ動画方面で活躍される方の相互リンクをお待ちしています。

とあるニートが1ページのWebサイトを公開するまでの経緯を書いた

作った物:ラブライブ!のTwitterフォロワー数の推移 結果発表

URL:http://www10341ui.sakura.ne.jp/graph/graph.php

f:id:RyuichiXP:20140619032501j:plain

Twitterラブライブ!公式アカウントのフォロワー数の推移や、pixivのラブライブ!タグの推移を一目見てわかるWebサイトを作った。以下本ページの作り方や使った物を簡単に説明したい。一方、グラフに表示するためのデータ収集スクリプトの作り方については、こちらをご覧頂きたい。

あとサイトの背景画像に絵を使って下さい!使っていいよと言う方は連絡してほしい。サイトの紹介はしていきたいので、少しの宣伝効果は見込めると思うので微力ながら協力させて下さい。

長い長い雑記

セッション1:今まで働いて思った事

ここからは今回のアプリにかけた思いを、4つのセッションに分けて話す。まずセッション1は自分が今までで思った事について。

1.データーベースのアプリケーションは全ての基礎

まずデーターベースのアプリケーションは全ての基礎であり、これができると様々な応用が効くと言う事。さて自分が大学時代と言えば、ゲーム等の一般向け(BtoC)ばかりに目が行ってた。だから業務を機械に置き換えてコスト削減を目指すようなアプリケーションはあんま興味がなかった。

そんな俺が最初の会社でデータベースのアプリケーションをやる事になり、その結果この手のアプリケーションの基礎を覚えた。これを覚える事でデータを自由自在に出し入れする事に成功した。

結果ある時刻における売上を保存できるようになった。応用すれば画像を画像処理したときの計算結果等を保存し、計算結果に応じた検索ができるようになる。プレイヤーがプレイしたゲームのプレイ状況(正解/不正解の情報、クリアした曲の履歴や失敗する箇所)を保存し、これを調査する事により難易度調整やユーザーの特徴を掴んだゲームの作成も可能になるだろう。

これだけを挙げても、データーベースを覚える事で得られる恩恵は大きい。恐らく一つ何らかのアプリケーションにてデータ入力画面(INSERT)、修正•更新画面(UPDATE)、消去画面(DELETE)、検索画面(SELECT)の4つを覚える頃には、ある程度の全体像が分かって来るであろう。ただ上記の4つを覚える為にと、「PHPで掲示板の作り方:nkdesk.com」等を見てもチンプンカンプンであろう。次の節ではその対処法を述べる。

2.改修案件を通して、ソースコードの書き方を覚える

今度は俺がプログラムを覚えた頃の話をしよう。自分はどうやってサーバーに関するプログラムを覚えたかというと、最初の会社で前任者のソースコードを改修しながら覚えた。どのようにPHPSQLをつなぎ込めば良いか?一件ずつ繰り返し表示するにはどうするべきか?と答えを探すようにソースコードを読んだ物だ。ともかく最初のうちは答えを暗記するように覚えた方が手っ取り早く、書籍ではお目にかかれないプログラムの書き方も覚えられる事が良かった。

改修案件から覚えたと言う場合は、一旦1から自分でアプリケーションを作ってみる事をお薦めしたい。なんせ10ページある本の1ページ目と、3ページ目だけ覚えている状態のはずなので、通しでやってみると知らなかった箇所を整理できるはずだ。

3.会社の事業におけるPDCAを把握する

f:id:RyuichiXP:20140619032615p:plain

今度はうって変わってクライアントの企業体質の話をしたい。ある程度作る経験を積んで来ると、業務に余裕が出て来て色々見渡せるようになる。5-3ではこうした業務アプリを作る上で確認しておきたい、PDCAというフレームワークについて話す。

例えば風俗で女の子の得意とする年齢層、客層(女の子の好みや客の好み)を調べた所、デンマが好評だったようだ。それを基にデンマ無料のイベントを画策する事にした(Plan)。そしてイベント当日にデンマを無料にする事とした(Do)。デンマを使った時の女の子の演技が大変すばらしく、その結果「また演技してもらいたい」「名演技」と言う反応をy名頂いた(Check)。その結果お客様の願望を叶える形でのサービスが良い事がわかり、女の子に演技の仕方を教育するなどの改善策を講じた(Action)。

このように昨今の企業活動ではPlan(計画)、Do(実践)、Check(確認、反省)、Action(改善策)を繰り返す事となる。システムを作るのは良いが、それで業務が上手く立ち回ったためしがない事は良く有り、システムを作る側の悩みの種だ。

特に相手の会社の社内で、PDCAで言うCheckとActionをきちんと行えているかは確認しておくとよい。これを社内全体で行える企業体質でないと、結局納品するだけになるのは間違いない。

又ホームページ製作の場合も同様で、「弊社のお客さんが分かりづらそうにしていたので、料金の説明を分かりやすくして、売買契約をスムーズに進めたい(Check)」と言った改善すべき点を聞き出し、それを実際に反映する事(Do)が重要である。特に企業向け(BtoB)製品程売買契約が複雑なものだ。「さあ、僕と契約を」と言う訳にも行かんので、この調子で様子を見ながら分かりにくい所を直して行くのがコツだ。

4.PDCAを回したり、製品の品質確認をやる上で数学が大切

f:id:RyuichiXP:20140619032716p:plain

4.に入る前にPDCAの回ってない例を話そう。俺は最近システムを作る側より活用する側に回ろうと思い、データーサイエンテイスト関連の職種を受験するようになった。そんなこんなで面接でも、過去の業務でPDCAをどのように回しているか?を問う質問が出て来る。

  • :原油を扱う商売をやっていまして、社内の原油の値段が常に上がると見込んだ変動費を見込もうと言う流れになりました。
  • 面接官:どのような手法で調査したのですか?
  • :車両の台数Cの稼働距離をd、消費原油量をqを調べました。その結果消費原油量の平均と中央値を見て、原油消費量の代表的な値Qを決めました。次に原油の価格変動を最小二乗法で予測した所、x月末日時点でY円まで上昇する事がわかり、固定費の原油予想額(円)= 車両の台数 * x月末日時点のガソリン代 * 原油消費量= CQY(円)を変動費として見込むように提案しました。(Plan)
  • 面接官:それは実践されましたか?(Do)
  • :....(PDCAが回せてなかった〜)

4.で言い忘れた事だが、理想どおりに行かないのも現実。現実にPDCAを回せなくては宝の持ち腐れになってしまうので注意。ここで引き下がりたくないので、5-4では価格予想の研究に役に立ちそうな分野を紹介したい。

例えば今回の事例では最小二乗法という数学を用いた。これをニューラルネットワークに変えれば機械学習の研究に化け、金融工学のブラックショールズの方程式のようなものを使おう物なら、微分方程式の研究内容として化ける。昨今ではこのような数学的な知識が、未来の予測にも使われる。

また大学で化学や生物など実験を伴う学科なら、その結果を検証するために勉強するはずである。会社に出れば製品を生産する工場の不良品率や品質調査(QC)などに応用される。正直プログラムも覚える事も大事といいたいが、折角にも大学に通っている人は各理系の大学の2年生位までは、プログラムの事は考えずにおとなしく勉強する事をお薦めしたい。

セッション2:数ヶ月間無職やフリーターを楽しむための3つの準備

セッション2では、今回の無職の経験を振り返り、会社を辞めて無職やフリーターを始めたい人にやっておいた方が良い事を話す。又有給休暇を全て使いきりたい人なども、是非参考にして欲しい。

自分は今回の無職を始めて3ヶ月になる。今回は給料も少なめだったので、比較的毎日地元のカフェでたむろしていた。CrowdworksやLansersなどフリーの案件を探したり、その合間に本アプリケーションを作るなどした。以下そんな無職生活を楽しむための○つの方法について話したい。

1:数ヶ月分の生活資金を確保する
f:id:RyuichiXP:20140619032813j:plain

1つ目は俺がいつも失敗する事だが、辞める1年〜半年位前に数ヶ月分の生活資金を確保する事だ。どれだけ確保する必要があるかの目処を立てる事も大切だ。以下無職を続けるための資金計画の立て方について話したい。

まず一月あたりの費用を計算しておくとよい。例えば家賃光熱費(5万円)+食費(4万円)+携帯電話代(2万円) = 11万円位は必要だ。実家暮らしで家賃光熱費食費を半分程度に押さえるなら6.5万円位有れば良いと言った目処を立てておこう。次に(必要な経費)=(1ヶ月あたりの固定費) * (辞める月数)となるため、6ヶ月抜ける場合は38万円〜66万円必要である。

尚一方で1ヶ月海外等に行ってくる場合ならば、旅費50万円〜60万円+生活費22万円 = 88万円位見込んでおくと良い。国内の近場なら20万円位あれば足りると思う。何にどれだけ使うかを決めておけば、減るお金にビビる事が無くなるのでお薦めしたい。又どうしてもお金が気になる場合は、旅行を終えてアルバイトで月数万くらい確保しておくのも良いだろう。

2:勉強用の書籍を大量購入しておく

さて2点目は勉強用の書籍を大量購入しておく事だ。まず無職になったら自由と言うのは幻想で、いざ無職になったらやる事が無くなる可能性も高い。これは会社の中での役目を全うし過ぎて、それ以外の行動が取れなくなっている事に起因する。そうならないためにも何か策を打っておきたい。以下自分の自慢話になるが、その為の一つとして勉強用の書籍を買い込む方法を紹介したい。

自分の場合「バイト→就職→バイト→就職」を何回か繰り返す内に、代官山蔦屋書店なり日本橋丸善書店を巡っていた。今回こうして4回目の無職となったが、俺の書架には統計学機械学習、画像処理、アルゴリズムMySQL、ゲーム制作(衝突判定)など様々なジャンルの本で埋め尽くされた。

f:id:RyuichiXP:20140619032921j:plain

そうこうしているうちに、丸1年位暇を潰せるだけの書籍がずらり並んだ。しかし自分には一貫性が無かった。ある日は機械学習、ある日はアルゴリズム、ある日は統計学の本を読んだ。

特に勉強の中で好きなジャンルを見つけ、それに関する本を貯めておくと暇潰しに困らなくなる。買った時は無目的でも、後で見返せるのが本の良い所。いざ読んでみると、案外基本的な事を知らないと言う事がいっぱい出て来るであろう。それを潰しているうちに時間を潰せる場合が多い。潰せるだけでなく、勉強した事を元手に就職できるようになるのも良い。

3:勉強や制作にはカフェの利用を
f:id:RyuichiXP:20140619033009j:plain

筆者は無職にも関わらず、実家暮らしで毎日カフェ通いをしている。6-3では無職だからこそフェやコワーキングスペースをうまく使う事を薦めたい。俺は今この記事を書く為に、自宅内にて缶詰になって2日経つ。しかしこれは最後の追いこみであり、普段はそうでない。

案外無職になると大学受験期間中の夏休みが延々と続く状態になり、家でゴロゴロしてしまう事が多い。ここでゴロゴロするようでは受験に受からない事が多いが、これは無職の期間でも同様だ。そこで家でゴロゴロしてしまい勉強が進まない場合は、予備校や図書館の自習室代わりにカフェを使う事を薦めたい。

ここでカフェ1回辺り500円なので500(円)×30日 = 15,000(円)位なので、コワーキングスペース1.5回分位だ。ポイントはwifi+電源付きの個人経営のカフェを探す事だ。但しスターバックスの場合椅子が固いため、長く座ると尻が痛くなる事に注意だ。たまには違う場所に行って、おいしいコーヒーを飲みながら各種作業を進める事をおススメする。

以上でセッション2を終了する。無職の日常を楽しむ為の3つのアプローチを書いてみたが、いかがだったであろうか?次はいよいよ最終セッションに移る。

セッション3:ラブライブ!結果発表

1.結果発表

ドラクエ4の外伝シナリオと言うべきセッション1とセッション2を終えたので、次は核心のセッション3:ラブライブ!の結果発表といく。pixivのラブライブ!の投稿件数はホームページから確認ができるので、今回初は初の各キャラクター毎の投稿件数についての結果発表をする。

f:id:RyuichiXP:20140619033124j:plain

その前に上の画像をご覧頂きたい。上記の画像で使われているタロットカードの意味は、見込みが甘いと言う意味。ここでこの子はタロットカードで未来を占う設定なのだが、今回は各種数字から未来の投稿数などを占ってみる。セッション1でこの説明が思いつけばよく、分かりにくい説明で申し訳なかった。

f:id:RyuichiXP:20140619033225j:plain

準備が終わったので早速ここまでのpixivの投稿結果と、各種順位を見てみよう。ここまでで1位から3位はにこ(9,523枚)、まき(8,288枚)、ことり(5,106枚)だ。加え6/18 11:30現在のにこまき(矢澤にこ西木野真姫)のカップリング件数は2,978枚、ことうみ(南ことり園田海未)のカップリング件数は424枚と言う事から、カップリングも盛んに描かれている。

f:id:RyuichiXP:20140619033308j:plain

次はpixivの投稿数の推移、簡単に言うなら6/8(日)から6/17(火)まで何枚絵が投稿されたかを見てみる。過去記事でも触れたが東條希の場合6月9日(月)が誕生日なので、その前後でバイアスがかかっている事に注意。標準偏差213.3、中央値38.5と誕生日前後と普段とでかなり差異がある点に注意しよう。

そもそもの集計期間が短いのもあり、曜日毎にどう変動するか等を調べる事ができなかった。しかし平均、中央値、標準偏差を見て注目しているのが、西木野真姫(平均:28.4、標準偏差:4.93)と星空凛(平均:26.1、標準偏差:5.3)の2人。星空凛に関しては累計ではやや少ない物の、10日間で260枚投稿されている点も見逃せない。これはアニメ放送に伴い、人気急上昇になるきっかけがあったのだろう。

f:id:RyuichiXP:20140619033355j:plain

そして上記2つの表をグラフ化したものを上げる。右のグラフの集計期間が短いのは、誕生日の影響を避けて表示しているからだ。以下このグラフを用いて議論していきたい。

おまけとして、6/30時点の矢澤にこのpixiv投稿件数を占ってみようと思う。まずあるキャラクターのk日目における投稿数をy_kとする。この時前日との推移はz_k = z_k - z_(k-1)とおく事でき、これはy_nの階差数列となっている。このときk≦mとして、y_m = y_k + z_k+1 + z_k+2 + ...... +z_m = y_k +Σ(k+1≦n≦m)z_n とおく事ができ、(予測値) = (ある日付の投稿数) + (ある日付からの推移の合計)で占う事ができそうだ。

ここでb_nの値は右のグラフの近似直線に従うと仮定して、6/30の値を占う。6/12時点の予測値は30.65、6/30時点の予測値は48になる。この時予測値の合計を取ると、6/12〜6/30までの間に771.3枚程投稿枚数が増加すると占える。最初の画像より6/12時点の累計が9,348枚より、6/30時点で累計約10,086枚の絵が投稿されると占う事ができる。もちろん占いに使う道具やその使い方が間違っていて、占いが外れる可能性もあるので参考までに。

セッション4.本記事のメイキングのついて

5月頃には収集するスクリプトが稼働し、Twitterのフォロワー数の推移くらいは取れるようになった。セッション2で書籍を買い込んだ話をしたが、実践の場に困っていた。しかし実践の場が決まったのでここまでやってきた。いっその事誰かに認められなくても良い。思い切りやってみたら、その先に何が待っているだろうか?とそれはあたかも冒険に出かけるかのようだ。以下、その冒険の土産話をしようと思う。

記事製作1日目の様子

1日目はよく分からないがセッション1の内容を書いていた気がする。セッション1は、自分のアプリの自慢話ではもったいないと思って書いた。以下その際に思った話をしようと思う。Rのbinom.test関数の読み方や、東京大学出版会統計学入門の「母平均の検定」の項目を読んでいた。どうもRの検定の関数binom.testでは、帰無仮説を棄却した結果を返さないと言う当たり前の事を今更知る。こいつが便利で信頼区間まで出してくれる事までは分かった。しかし検定、信頼区間?と言う状態なので、これが終わったら勉強せねばならない事が分かった。

昨今インターネット広告業者では、このような必殺技をインターネットで公開する人が後を絶たない。例えば「インターネット広告代理店で働くデータサイエンティストのブログ」等がこれにあたる。こんな状況を見るに平均、標準偏差、最小二乗法、単回帰分析(レベル1)位しか手持ちの必殺技が無い以上、勉強して必殺技を増やさねばならない事が分かった。

2日目になって、Photoshop+Illustratorで変な事をしだす

そんなこんなしているうちに2日目に突入。FFで言うライブラのようなものもなく、作業の全体像が見えぬままだ。セッション2の内容を書き終えてから、今流行のアイキャッチ画像を貼る事を思いつき、部屋を片付け写真を撮りまくる。本の角度まで拘ってみたが、こういう所を人に言われずやる事がデザイナーとして大切な資質だから困る。今夏コミックマーケットにてコスプレイヤーを撮る際も気をつけないとと、今までの行いを反省する。

加えどうやらアイキャッチ画像は文章を書き終えて、その段落の内容に最も合う絵を張り、読者にどんな内容かの予告をするためのものである事を実戦の中で覚えていく。例えばセッション3-1ではラブライブ!が主題なので、ラブライブ!の画像を使った。お気づきの方もいらっしゃると思うが、セッション3-1の4枚の画像は2枚目のランキング順にしてみた。ただひねくれた性格の自分なので、4位->3位->2位->1位とするのは予定調和でつまらないと思った。

ここまでは良かったのだが、いつも使わないillustratorのフィルターまで使いだした。元画像を「色相、彩度」で白黒に脱色。その次は「グラフィックペン」で人口手書き風にする。文字が見えるように新規レイヤーを用意し、グレーで塗りつぶした後「乗算」で重ねた。特に南ことりの場合表情が自然なため、グラフをどの位置に配置すべきか大変悩んだ。

jQueryプラグインの追加機能をforkしよう!

無論フィルターを使えばいいって物ではないのは分かるが、実際にしている事は真逆だった。そろそろ疲れてきたので犬の散歩をすることに。そんな最中「サイトのグラフの数値が見えねえな。これどうしようか?他のプラグインを借りて来る?あ、無いなら自分で追加機能を作ってgitHub上でForkすりゃあいい。こういう暇なときに色んな人と横で繋がるきっかけを作らんとね」と言う事をふと思いつく。

Web系の講演「WP-D Megane Fes in GMO」にてパネラーが「gitHubで技術協力する事も重要だよ」と言ってたが、無理して追加機能を作ろうとするのではなく、必要な時に追加機能を作れば良い事に気がついた。こうして小さくやりながら小さく気づく事が大切らしい。

最後の3日目

そんなこんなで3日目はセッション3の文章を完成させる作業に入った。1日目、2日目を書き、いざ最後の〆と言うべき3日目を書く事に。その中で事の経過を順次書く文章は、先が見えないと言う感覚を読者に与える事で、できる限り読者が体験しているかのように書く事も大切な事に気づいた。

まず会社では何かを完成させてお金をもらう事で手一杯だ。それが仕事なのだから仕方が無い。しかし個人だとどうだ?きっと「プログラムやイラストやブログをやる時はね、誰にも邪魔されず、自由で、なんというか救われてなきゃあダメなんだ」という境地にたどり着くだろう。

会社じゃやれない事をやろうと思いここまでやってきた。その中で救われた気持ちに包まれ、会社ではできない発見をした。人生で一度位何にも縛られず何かをやる事が先に繋がる。そんな悟りを開いた気分だ。

そして今長旅の帰りの電車に乗っているようだ。異世界の駅から電車に乗り、帰るべき場所に近づけば近づく程、なすべき事をなした気持ちも強くなっていく。Twitter、pixiv、LinuxMySQLPHPgooglePhotoshopIllustratorはてなブログと過去に見た光景が逆向きに切り替わり、いよいよ出発地点に到着する。日数にして3日間。短いように長い異世界への旅だったが、何かを大切な物を得て帰ってきた。帰り道の光景が違う光景に見え、新しいものでも見たかのように帰路についた。

最後に

さて本記事は、通常のブログ記事の3倍〜5倍以上の文章量になってしまいました。こんなに沢山書いて誰が読むのだろうと不安です。と、言う訳で最終セッションを終了します。強引に終わらさないと永遠に異世界から帰ってこれなそうで怖かったです(笑)。懇親会はありませんが、少しでも皆さんが楽しんで頂ければ幸いです。