鍋はすき焼きがすき

「ちげ」やからチゲ鍋が好きってわけではないんやで

pixiv冬のインターンに行ってきた

12/15, 16の2日間、pixivへインターンに行ってきました。これです↓↓↓

f:id:chige12:20181224152952j:plain

recruit.pixiv.net

事の発端

pixivのインターンがあることはTwitterで知りました。pixivのインターンは以前参加した友人からオススメされていたし、単純にすごく興味があったので参加したい気持ちはすごく強いものでした。 しかし、その時にインターンの日付(12/15, 16)を見て躊躇してしまいました。

12/15は僕の誕生日です。 誕生日に毎年、親に寿司屋へ連れて行ってもらい、大好物の寒ブリをいただくのが最高なんですけど、それに丸かぶりしてしまうという問題を含んでいたんです。

寿司をとるかpixivをとるか……

ローカルな話になりますが、Kosen14sのSlackでもやましーがpixivインターンを紹介してくれていましたし、cilviaにも「行ってくればいいじゃん」と簡単に言われましたし、ふるつきには「行って」とパシられるみたいに言われたので応募することにしました。

実は、僕は一年ほど前(HTML,CSSを一通りやって、JavaScript触りたてホヤホヤな時期)に一度pixivの夏インターンを受けたことがあります。それも、友人達に押されてのことです。技術力に自信が無いものの、まぁダメ元で応募してみるかって感じでした。 その時は案の定落ちたわけなんですが、その他に受けていたインターンも全落ちしました。

スっと受かってたり、インターン先から直接「来ませんか?」の声がかかったりする友人達とのレベルの差をすごく感じました。後から始めたので当然ですが。

なので、今回のインターンは1年間で身についた技術の腕試しの意味もありました。

どういう点を評価して頂いたのかは分かりませんが、受かって良かったです。

インターン1日目

朝5時起きで最寄り駅まで親に送ってもらいました。京都駅から新幹線に乗って東京へ。

到着すると同タイミングで反対側から歩いてきた方(後にあおさ君と判明)と、おそるおそるpixiv目当てで来られたのかを互いに確認したり、人が集まってくるとセルフ自己紹介が行われたりしてました。 そこへkamikoさんが現れて中へ。寒そうに中へ誘導するkamikoさんの背中を見て、「インターンパーカー*1だ、すごい!」と思ったのですが、まさかそれが頂けるとは思ってなくて二度びっくりしました。

概要説明とみなさんの自己紹介を聞いた後、さっそく開発が始まりました。2日間でpixivのAPIを使ったWebアプリケーションを作って発表するのが、僕に課せられた課題(?)です。チームは僕とメンターさんの2人。メンターさんは基本的にサポートなので実質一人です。期限は次の日の16:00。発表資料作成もしなければなりません。なかなかハードです。

f:id:chige12:20181224160015j:plain
開発開始!

実力は後からついてくる(やるしかねぇ)

実力ないことを嘆いても無駄なので、そういうのは普段からあまり考えないようにしてます。周りがプロばっかりの環境だと自ずとそうなります。また、時間がないということは初めから分かっていたので、最近触って慣れ始めているNuxt.jsがいいだろうと思ってました。そのためにも何日か前に、"Nuxt.js と Firebase による チャットアプリ制作のハンズオン" に参加したりしてました。

ちょうどいいタイミングでVueXの知見を得れたので良かったです。Fluxアーキテクチャの学習は一度挫折してたので、地味にありがたかったりします。結局インターンでは時間の都合で使うことはかないませんでしたが。使うべき時がきたらリベンジします。

どんなサービスがいいかしら

「君だけのpixivを作れ」というキャッチの通り、自分の思う最高のpixivサービスを作る必要がありました。もちろん狙うは優秀賞です。自分のpixivの使い方とか、pixivに足りないものとか、どういった人にどういうサービスを届けるか、考えました。

最初は自分の得意な映像から何か発想しようともくろみました。ただ映像の市場がそこまで大きくないのと、独自の文化(サービス)が既にあったりするので、なかなかイメージが浮かびませんでした。技術的にも難易度が高い問題がありましたし、アイデア自体は複数個思いつきましたが、それを作れたとしても満足のいくサービスだとは思えませんでした。(言葉に発する前にすぐ脳内消去しちゃったので、何考えてたか覚えてない。その場で紙に書けばよかったかも)

やはりpixivはイラストのサービスですし、イラストベースで考えることに。提供されたAPIはイラストが閲覧できるものでしたが、あえてイラストを描くとき(投稿者側)のことを考え始めました。周りとの差別化の意味もありますが、やっぱり僕は絵を見るより描く方が好きなんだと思います。

一時期、僕はオリジナルの絵が描けなくて悩んでました。模写はすごく得意で、見たまま描けばそれなりにうまく描けました。時間をかけて観察すればするほど、絵はリアルになりますし写実的になります。ですが、オリジナル絵は自分の頭の中で任意の3Dオブジェクトをぐるぐる回転させてカメラ位置を決め、そこからの投影を想像しなければなりません。それがたぶんセンスってやつなんでしょうね、脳内イメージはあってもそのイメージを紙に投影することの難しさ。脳内イメージが具体的でないとそれを写すこともできません。プロジェクターのピントがずれてる感じです。そのピントを合わせて詳細な部分を書き込んだり、像をつかむためには、脳内イメージの解像度を上げるしかありません。絵の完成度はどれだけ絵を描く対象について知っているかになっちゃいます。絵を一年に数枚しか書かない僕は圧倒的にモノに対する形状の知識が足りないんです。

なのでいつも、「わからねぇ」ってなったらGoogleの画像検索で参考になりそうな写真を集めて、参考になる形状のモノの一部分だけを拾い、パッチワークのようにつなぎ合わせて絵を描いています。勿論上から重ねてトレースはしてないですよ。でもこれって要は模写のようなもんなんですよね。オリジナル絵を描いているとは言えない。いつになったら描けるかな~~~。

僕がこういう書き方をしていることを話すと、do7beさん(僕を担当してくださったメンターさん)が、参考にできるパッチワークの断片を見つけてくるようなサービスを提案してくださいました。一瞬いいなと思ったんですが、イラストから引っ張ってくるより写真からの方が情報量が多く、自分の絵柄に持っていきやすいというのがあります。そうなると、Google画像検索のほうが有利なんですよね。ちなみにそういうので最強なのはAdobe Stockです。イメージに近い画像がすぐ手に入るらしいです。(利用料金が高いのであまり使ったことない)

僕が作りたいサービスはこれだ

最終的に決まったのは、自分の過去の絵を振り返ったり、自分の現状の絵の課題を(ネガティブさに持っていくことなく)見つめることができるサービスです。このサービスで解決したいことは絵を描くモチベーションの維持が難しいことです。この課題のインサイト*2「楽しく描きたい。尚且つしっかり上達したい。」

楽しく描けた時は、大抵上達具合は微小なものです。逆に上達を目標に、問題点を見つめて改善していこうと努力するのは結構な精神的にしんどいことがあります。「できない。描けない。」のようなネガティブな感情で脳を侵されてしまったりしますよね。

でもごく稀に、好きこそものの上手なれ理論で、楽しく描いていればいつの間にか上達していたりすることもあるんです。なので、「できない。描けない。」ところもいつの間にか描けていた!という成功体験を認識させるものにしたいと思いました。これこそ、楽しく描くことと上達が目に見えることが両立できそうです。そしてそれは絵を描くモチベーションに繋がります。

絵を描くモチベーションは、単純に絵を描くことが好きなだけでなく、完成した絵の完成度・評価度によっても、もたらされます。なかなか絵の完成度が上がらない下積み(?)時代は、つらくて絵を描くこと自体を嫌いになってしまう人もいると聞きます。また、過去の雑な絵を見てテンションがぐんと下がってしまったりもします。

僕も絵を描くモチベーションは全然続かない人です。他に色々やりたいことがあって手が回らないのも理由のひとつですが、そこまで上手くない絵を時間をかけて描いて得られるものがあまりないのが大きかったりします。

本当は絵を描くこと自体を楽しんでいたり、だんだん上達する成長具合が気持ち良くて描いていたはずでした。いつの間にか周りの人の目を気にするようになってしまいました。人様に公開するだけでなく、もっと自分のために描くことを意識したサービスがあってもいいんじゃないかとも思ったんです。

作っていくぞ(サービス的観点)

以上のような煌びやかなビジョンは生まれました。でもそのビジョンを実現させるサービスを作っていくのはやはり難しいですね。

どんな機能が欲しいか、その機能によってどういった効果が得られるのかを想像するのは簡単です。ですがその機能がもたらす副作用にも目を向けなければなりません。副作用が別の問題を引き起こし、それが他の良い点をつぶしてしまうこともあるからです。UIの操作性、サービスの簡潔さ・わかりやすさも重要です。ユーザーからしたら、複雑な機能よりシンプルな機能の方が取っつきやすいですし、他サービスでは見られない特徴的な機能であったとしても、アフォーダンスを考えて説明を見なくても使えるようにしなければなりません。(今回深く考えている余裕はありませんでしたが、そういうことを意識する必要はあるのでだいぶん悩みました。)

このとき、2軸でのユーザーサポートを考えていました。技術面でのサポートと精神面でのサポートです。技術面では絵の問題点を上げてその解決をうまく促すこと。精神面では、イラストを描くときのユーザーのテンションを記録して、周期的なブランクとテンションの関係性を分析して上手くモチベーションを維持することです。

しばらく色々考えて精神面でのサポートは消えてしまいました。妥当な判断だと思ってます。技術面でのサポートに絞ったわけですが、このあとで精神面でのサポートについて考えたことが技術面でのサポートの機能に生かされたりします。たし算・ひき算は大事ですね。ひき算をしても思考は残っているので、そこで考えたニーズや問題点が見えているか見えていないかで出力が変わるので面白いところです。最初から5だったものと、7から2を引いて5になったものは別物になったりするんですよね。

問題1

さて技術面でのサポートは、絵の問題点を上げてその解決をうまく促すことです。

これについて最初にぶつかった問題は、どうやって画力の問題点を認識させた上で改善されたときの達成感をもたらすかです。サービス側で画力の問題点を認識してないと、ユーザーに「改善できてる!」という気持ちを誘発させることはできません(ん?いやもしかしたらできるかも、ちょっと考えておきます)。どうやってネガティブな感情をできるだけ起こさないように問題点を認識すればいいのか。そして問題点を認識するユーザー側のコストをどうやって下げるかです(この点に関しては非常にツメが甘い)。

一番いいのは、イラストのイケてないところをクリックしたら自動で紐づけされて、似たようなイラストから解決策や参考資料を取ってくる機能です。(機械学習の実装力がないので今回はお見送り)

課題をどう管理するかについても検討してました。タグで管理する方法か、「ここいいね」or「ここわるいね」の二択で管理する方法など、いろいろ考えました。プロのイラストレーターの人とかが自分の絵のどういうところを見て自己評価してるのかとかも見ることができると、それを参考にしたりモチベを上げたりできるかなと思ったりもしてました。メンターさんから何かヒントが出るかもしれないし、口に出せばよかったです。

結局、ユーザーが自分でイケてないところを課題として文字入力する形になってしまいました。これがベストだとは思ってないのですが、正直この辺が妥協点でした。つらい。

問題2

また、「描けてる!」という気持ちをどうやって誘発させるかも問題の一つでした。タイミングも重要ですし、なにより「いつの間にか描けるようになっていた」という、辛くない状態で上達を確認したい。

そこで、忘れていたような自分の過去の課題意識がリストで出てくるものを考えました。新しい絵を投稿するときに、そのリストが出てきます。改善できたものにチェックをつけることで、過去の絵の課題は現在の成長と結びつきます。過去の絵を見返すときには、そのイラストの課題だけでなくその課題が現在達成されたかどうかも表示されます。過去の絵を眺めたときのネガティブな感情を、新しい絵を投稿するときの"いつの間にか"成長していた達成感で上書きしていこうという作戦です。

これが上手くいくかは分かりません。もう少しうまいやり方があるかもと今でも考えますが、実際色んな方に体験してもらわないとわからないところです。

「楽しく描いた絵を投稿する時に、いつの間にか過去の課題を解決して、描けるようになっていた」とわかるところがこのサービスの肝だと感じたので、サービス名は「kaketeru!」になりました。

f:id:chige12:20181224133354p:plain
kaketeru! のロゴ

次の日の朝7:30からホテルでイラレを開いて作ってました。ペンを握りしめて「よっしゃ!」って感じのイメージだったんですが、ペンを突き刺す人みたいになってしまいました。

作っていくぞ(技術的観点)

サービスの肝である"画像の投稿時に"という部分が実装できないことはわかっていました。今回、投稿のAPIが提供されていなかったからです。なのでここはモックで何とかしようと思っていました。

Webアプリを作るにあたって、やはりNuxt.jsを使ったわけですが、もう少し慣れないとだめだなと感じました。axiosでAPIを叩いて絵を取得するところまでで既に夜18:00ぐらいだったと思います。そこからご飯を食べて23:00頃までやってた気がします。

ページはユーザーIDを入力するページが一つ、入力するとメインのページに移動し、ユーザーの絵の一覧を見ることができるようになってます。絵をクリックすることで絵の詳細が開き、そこで絵の改善点や解決済みが見れたりします。ページの URL はuser ID、illust IDによって変わるようになっています。Nuxtだと動的なページ変移が楽だったのが良いですね。ただ、動的リンクが2つある場合に、1つ目の階層と2つ目の階層で、ページのURLを入れる変数名を変える必要があったのが少しう~んって感じでした。その変数名ごとに同じ処理を描く必要があり、これ絶対ベストプラクティスじゃないです。いい方法ないかしら。調べておきます。

メインのページでは、asyncDataメソッド内のaxiosでとってきたデータをv-forでズラッと並べます。画像のリンク先はnuxt-linkで動的にイラストidを含めたURLを生成します。絵の詳細ページでは大きいサイズのイラスト画像を取得して表示し、イラストidでローカルストレージにアクセスしてイラスト以外のデータを取ってきます。 やっぱりStore作った方がいいよなぁ……。

今回のアプリでは、イラスト以外の課題や改善点のデータを保存するためにサーバーが必要でしたが、MySQLのインストールに時間がかかりそうだったため、ローカルストレージで実装することにしました。do7beさんの提案です。ローカルストレージというものを初めて知ったんですが、それにデータを入れる時にJSONファイルにしないといけないとか、基礎的なところで躓きがちでした。

あと、Vueのchrome拡張は入れてたんですが使いこなせてなくて、データのデバッグとかに便利だという知見が得られました。検証ツールのNetworkタブやAppricationタブも初めて使いました。検証ツールについてもちゃんと勉強しなきゃ。

ニーズを見据えて、その技術的解決策がニーズを満たすかどうかが重要でそこを見据えてなきゃいけません。でも今回は時間のなさから簡単な技術で置き換えざるを得ませんでした。「エンジニアは実現可能かを優先しがちだから気を付けよう!」と自分でわかっていながらやっちゃった……。

技術面・ニーズ・サービス面でのバランスを取ろうとしたという面ではデザイン思考と言えるかも(?)。

インターン二日目

スライド作成

二日目はスライド作成から入りました。イラレでパッと作って終わらしたろ~と思ってたら、Google Slideで作ってくださいとのことで驚きました。使い勝手が分からず少し手惑いました。夜スライド作成しなくてよかったです。

発表

発表は最後から数えて二番目でした。正直前半のみんなの制作物の完成度が高すぎて、ひ~~~ってなってました。コンセプトも固まってる感じだったし、共感できる内容も多く、発表する前からこりゃあ優秀賞無理だな~~って気分でした。

僕は発表練習ができなかったんですが、2日間で考えてたことや感情、アドリブを織り交ぜつつ、とりあえず話せることを話したら、ピッタリ10分で話せたので「天才では?」と思いました。まぐれです。

質問でも技術的にもサービス的にも妥協点がバレバレな感じでしたが、考えていたことを話せてよかったです。

f:id:chige12:20181224152612j:plain
最終発表前に記念撮影をするちげ(20)

優秀賞は無限に絵が見れるがコンセプトの閲覧サービスを作った、ぷらす君のチームが優勝。納得の優勝でした。将来展望を聞き手に想像させられるほどの完成度と、制作コンセプトに強い共感が得られるようなものでした。同じ京都勢だったので、帰りは彼と一緒に新幹線で色々お話しました、楽しかったです。またどこかで会おうな。

f:id:chige12:20181224160811j:plain
ぷらす君のチームが優勝

懇親会

懇親会では社員さんと色々話ができました。得た知見としては、アイデアを出そうとしなくて良くて、なんかふと思いついたことをすぐに言える環境の方が大事ってことです。なるほどなぁ~~、ためになります。今後の生活のためになりそうなことを他にもいくつか聞けて良かったです。

いや、一回くらい飲んだことあるでしょ、って小声で言われたんですが、ガチで初酒しました。ほろ酔いは結構ジュースですね。おいしいです。日本酒はキツかったです。一杯だけ頑張って飲みました。

f:id:chige12:20181224153541j:plain
懇親会で運ばれてきたピザ

f:id:chige12:20181224160555j:plain

お寿司も食べられて大満足です。 プログラミング言語かるた、Gitコマンドかるたをやって解散しました。楽しかった~~~。

f:id:chige12:20181224160736j:plain

社員さん、メンターさんに感謝

横にメンターさんが付いてくださるのは本当に心強いです。こういう場では頭がいろんなことで埋め尽くされるので、それを整理してくださったり、思考しきれてないところを突いてくださったり、と技術以外でもサポート力を感じました。もちろん技術面でのサポートも、知らないことがすぐ聞けるというのはやっぱりいいですね。知識の幅の広さも感じました。

ただ僕自身、普段から知らないことがすぐ聞ける環境に居る分、聞くことに頼りがちになっていたり、友人の手間にならないようにしたいという気持ちから人に聞くことを自重していたので、聞き不足だったなと感じました。(do7beさんの「わからないことはその場ですぐ聞いていいよ」という発言で気づきました。)こういう場では、他人の引き出しをバンバン引きまくっていきたいと思います。

また、人の話にとりあえず「はい」と相槌を打つ癖を指摘され、あ~~~~!!!と思いました。そういうの言ってくださるの、めっちゃありがたいです。あとから「なんか(そういうこと言って)ごめんね」って気を使って頂いたんですが、僕は中学の頃、怖いと有名な先生に「お前はなんぼ怒ってもケロッとしてる」と言われたほど大抵のことで落ち込まないので、どんどん言ってください。(怒られた記憶はない)

あとdo7beさんから個人的に、エッセンシャル思考についての本をいただきました。do7beさんありがとうございました!

それと、初日の15日は誕生日だったということで、サプライズでケーキを頂きました!わ~~い!!(恐縮です)ありがとうございました!(ありがとうございました……🙏🙏🙏)

f:id:chige12:20181224160113j:plain
頭を全力で下げるちげ(20)

まとめ

f:id:chige12:20181224160515j:plain

pixiv最高やが~~~ってなって帰宅しました。次の日の学校はpixivパーカーを着ていき、pixivの宣伝する人になりましたw。また、しばらくはコツコツとレベル上げに勤しみたいと思います。図々しい気もしますが、今回時間なかったので夏インターンなどにもまた参加したいなと思いました。

今回のインターンで一番つらかったことは、もうすぐ6年目となるWindowsちゃんの動作がクソ重だったことですね。初めて買ったパソコンでもあるので愛着はあるんですよ。大事に使ってきましたが、起動に10分くらいかかったり、IME系がクラッシュして一度再起動くらったり、だいぶ作業効率が落ちました。一月くらいにまたお給料が入ると思うのでコツコツ貯めて mac book pro 買いたいと思います。

最後になりましたが、今回のインターンで色々と手を回していただいた社員さん、メンターさん、非常にお世話になりました!

本当にありがとうございました!

*1:背中に「pixiv INTERNSHIP」と書かれてるパーカー。インターン生へ配布物の一番下に敷かれていて、頂けるのかとびっくりした。パーカー大好きmakunさんの手回しらしい。

*2:本質的な問題点やその解決欲求。表面上だけでは見えないユーザーの本来のニーズ。矛盾することが多い。たぶんデザイン思考の用語だと思う。