人生送りバント。

yuki540の人生送りバント。

ピクシブのインターンを終えて

ピクシブインターン

久しぶりの投稿ですが、今回はピクシブのSUMMER BOOTCAMPに参加させていただいたので、そちらについて書きたいと思います。

recruit.pixiv.net

期間は9/4 ~ 9/8までで、僕は「閲覧体験向上コース」に参加させてもらいました。

ピクシブインターンは以前から行きたくて、春のインターンに応募しようと思ったのですが別の用事と被ってしまい、応募できずにいたのですが今回参加ができて本当によかったです!

合格までの流れとしては、(GitHub選考 or 通常選考)→ 面接 → 合否通知 でした。

面接がダメダメだったので、「受からないだろうな…」と思っていましたが、なぜか合格しました。

ピクシブに来た

f:id:yuki540com:20170914200644j:plain

オフィスに入って一番最初に思ったのが、「おしゃれ!イラストいっぱい!」でした。 また、オフィス全体がカラフルな色合いなのですごく綺麗です。

f:id:yuki540com:20170914201013j:plain

この最高の空間で作業できるのはとても幸福でした。

インターンの内容

ということで、インターンのことに話を戻します。

今回のインターン(閲覧体験向上コース)のテーマは、「pixivのイラストや小説作品の閲覧に関する新機能開発やUI改善を通じて、 ユーザー体験の向上を図る事」でした。

で、実際作ったものを説明したいのですが、僕の技術不足により公開までもっていくことができず、具体的な内容は話せないのでインターン期間中にやったことをざっくりと書きたいと思います。

一日目

  • オリエンテーション
  • pixivのスタイル崩れを修正
  • do7beさんからnon-fast-forwardとfast-forwardについて教わる

一日目は、自己紹介や環境構築をした後、最初はpixivのスタイルが崩れている箇所を直す作業をしました。

その過程でnon-fast-forwardとfast-forwardの違いを理解していなかったので、メンターのdo7beさんにイラスト付きで教えてもらい、理解しました。

Git難しい。

二日目

  • 今回する課題を決める
  • TypeScriptの使い方を教わる

二日目は、実際に取り掛かる課題を決め、作業に取りかかりました。

pixivではTypeScriptを使っているので、使い方を教わりました。 普段、僕はCoffeeScriptを使っているので「TypeScriptもCoffeeScriptも同じでしょ」と思っていましたが、全然使いこなせずに苦労しました。

型は、重要。

三日目

  • 提示されたデザインの実装
  • do7beさんからnon-fast-forwardとfast-forwardについて教わる(2回目)

三日目は、TypeScriptやその他のわからないことに苦戦しながら作業していました。

そして、理解したと思っていたnon-fast-forwardとfast-forwardの違いを再度教わり、今度は理解しました。

TypeScript難しくない?

四日目

  • とりあえず動くところまで実装
  • do7beさんからnon-fast-forwardとfast-forwardについて教わる(3回目)
  • kanaさんからvimの使い方を教わる

四日目は、実装作業ができる最後の日だったので、とりあえず動くところまでなんとか実装しました(完成はしてません…)

そして最後の最後でnon-fast-forwardとfast-forwardの違いをまだ理解できてないこと指摘され、再度教わり、多分理解しました。

vimはいいぞ。

五日目

  • スライドの作成
  • 最終成果発表

最終日は、スライドの作成をした後、成果発表をしました。

普段、発表とかしないのでめっちゃ緊張して噛みまくりました…

インターンメンバーのみんな発表うまい…

f:id:yuki540com:20170914212045j:plain

気づいたこと

  • 自分が思っている以上にGitに関する知識が壊滅的。
    • 「non-fast-forwardとfast-forwardの違い」のこともそうですが、Gitのこと全体をよく理解していなかったのでメンターの方に多くの時間を割いてもらってしまった。
  • チーム開発における設計の重要性
    • 僕は今まで個人で開発していたので後先考えずに開発していても、そこまで問題はなかったのですが、チーム開発の場合、チーム全体に迷惑がかかる。
  • チームメンバーとのコミュニケーションが大切
    • メンターの方々をみて、細かくコミュケーションをとって、開発をしているなと思いました。
    • チーム開発ではこういった、こまめなコミュニケーションが重要なのだと思いました。
  • 自分の技術不足
    • わかりきったことでしたが、圧倒的に自分の技術不足がはっきりしました。
    • わからないことが多すぎてメンターの方々に迷惑をかけてしまった。

最後に

わからないことが多すぎてメンターの方に迷惑かけましたが、なんとか動くところまでいくことができました!

完成までいくことができませんでしたが、なんとか形にすることができてよかったです!

インターン期間中、講義などがあり、とても勉強になりました!

ピクシブインターン、控えめにいって最高です!!! ピクシブインターンに参加を悩んでる方、ぜひ応募してみてください!

do7beさんをはじめとするPixiv社員のみなさま、五日間本当にありがとうございました!!!

圧倒的猛者になれるように精進したいと思います!

f:id:yuki540com:20170914223221p:plain

おまけ

ホテルの部屋番号がNot Foundだったのは、良い思い出。

面白法人カヤックのインターンを終えて

面白法人カヤック

f:id:yuki540com:20170716205002j:plain

サイコロ給などで有名な面白法人カヤックですが、通年でインターンを募集しています。

前からカヤックに興味があり、「一度働いてみたいな」と思い、インターンに応募しました。

https://www.kayac.com/recruit/intern

僕が応募したのは、通常エントリーではなく、つくったもの選考でのエントリーをしました。

選考の流れとしては、書類選考 → 1次面接(人事) → 2次面接(技術者) → 3次面接(役員)でした。

僕がインターンに参加した期間は、7/10 ~ 7/14の5日間です。

初めてのインターン

僕はまだ、一度もインターンに参加したことがなく、仕事としてプログラムを書いたことがなかったので、とても緊張しました。

今回のインターンカヤックの“ヨコハマ展望台”オフィスのクライアントワーク事業部に配属されました。

f:id:yuki540com:20170716210225j:plain

f:id:yuki540com:20170716212512j:plain

担当指導をしてくださったのは、僕が尊敬しているエンジニアの一人であるのびーさんでした。

コードを書く速度がめちゃくちゃ早くて、ただただ開いた口が塞がりませんでした。

僕もいつかあんな風にコードが書けるようになりたい…

インターンの内容

僕が今回のインターンで行った仕事内容は、詳しくは話せませんが大まかに言います。

案件などで同じようなアプリケーションを毎回1から作っていたそうなのですが、開発効率が悪いので、それをフレームワーク化するというものでした。

開発は、GitHubのプライベートリポジトリを使い、開発するのですが、今までプルリクエストをしたり、コードレビューをしてもらったことがなかったのでとても楽しかったです。

また、のびーさんを始めとする、クライアント事業部の優秀なエンジニアの方々に様々なアドバイスや便利なライブラリなどを教えていただきました!

結果として、簡単なものではありますが5日間でなんとか完成させることができました!

普段はCoffeeScriptを使うのですが、今回はせっかくなのでES2015で書き、ライブラリはVue.jsを初めて使い開発しました。

また、仕事以外にもWebGL勉強会などに参加し、学校にいるだけでは絶対にできない経験をさせていただきました!

カヤックの特徴であるブレーンストーミングにも参加させていただきましたが、全然意見が出せず、自分のコミュニケーション能力の低さを改めて実感しました…

これからは自分の意見を出せるように頑張りたいです。

カヤックで感じたこと

僕が感じたのは、カヤックの社員さんたちは優秀なだけでなく、とても個性的な人たちがたくさんいらっしゃるなと思いました。

ブレーンストーミングなどでも、とても面白い意見やアイデアが飛び交っていて、社員全員が面白くて良いものを作ろうという強い意志を感じました。

「さすが面白法人!」と思いました。

最後に

5日間という短い期間でしたが、とても楽しかったです!

たくさんの方とお会いし、お話やアドバイスをいただき、普段では体験できない経験をしました。

初めてのインターンカヤックで本当によかったと思いました!

のびーさんをはじめとする、クライアントワーク事業部の皆さま、僕と関わってくださったカヤック社員の皆さま、本当にありがとうございました!!!

あと、お昼ご飯を毎日ご馳走になりました!美味しかったです!

今度は、入社できるように頑張りたいです!!

Pixivの脆弱性(Reflected XSS)を見つけて、5000円貰った話

映画観たよ。

久しぶりの更新です。

ちょっと前になるんですが、「劇場版 魔法科高校の劣等生 星を呼ぶ少女」観ましたよ!

映画館内に結構なお年寄りがいて、「おじいさんでも魔法科観てるのか」とちょっとびっくりしました。

映画の感想ですが、自分的にはめっちゃ面白かったのでもう一回観に行きたいです!

Pixivの脆弱性を見つけて、5000円貰った

f:id:yuki540com:20170703162903p:plain

映画の話は置いといて、Pixivの脆弱性(Reflected XSS)を見つけて5000円貰った(まだ振り込まれていない)ので、見つけるまでの流れとxssの内容を書きたいと思います。

ふとしたきっかけでxssを探した。

※すでに脆弱性が修正されています。

前に趣味でxssを探していたんですが、ふと「また、xss見つけたい!」と思い、再開しました。

某○MMのスマートフォン版サイトのReflected XSSやコミック系サイトのReflected XSSを見つけたりと、xss初心者なりに頑張って見つけることができました。(脆弱性は、すでに報告済みで修正されています)

その後、Pixiv関連のサービスのxssも探そうとしたら…

ありました。

5分くらいでたまたま見つかりました。

そして、ラッキーなことにPixivは、BugBountyでプログラムを実施していたので、脆弱性と認定されればお金がもらえるチャンスでした。

これは脆弱性なのか…?

僕が見つけたのは、スマートフォン版Pixivサイトのxssで、

https://touch.pixiv.net/search.php

検索結果ページのGETパラメータを変更ではなく、パスを付け足すことでxssするものでした。

https://touch.pixiv.net/search.php/'-alert('xss')-'

f:id:yuki540com:20170703163332p:plain

パスを付け足した場合のみ、動的にJavaScriptを生成している箇所の値がシングルクオートをエスケープしていませんでした。

f:id:yuki540com:20170703163957p:plain

で、alertを出せたのはいいのですが、具体的な攻撃方法が浮かばないのです。

ほとんどの記号が使えないので(URLエンコードされる)、オープンリダイレクトなんかもできません。

自分なりに攻撃方法を考えたのですが、思い浮かばなかったので諦めました。

それでも、「alertは出せるから報告しよう!」ということでダメ元で報告しました。

なんかわからんけど、認定された。

f:id:yuki540com:20170703164758p:plain

10日後ぐらいにPixivから脆弱性認定されました。

ダメかと思ってましたが、やりました!

Pixivさんありがとうございます!!!

機会があれば、会社見学させてください…

f:id:yuki540com:20170703170537p:plain

一気にランキング上がりました()

Pixiv百科事典にも同じものがあったので。

f:id:yuki540com:20170703165529p:plain

Pixiv百科事典にも同じものがあったので、そちらも報告しました。(修正済み)

意外なサイトにxss

僕はアニメの公式サイトを見るのが好きなのですが、「ついでにここでもxss探そう」という試みで探しているとありました。

アニメ公式サイトのようなサイトにはないと思っていたのですが、最近は動的なアニメ公式サイトが増えてきたため、xssを孕んでいる可能性があるのだなと痛感しました。

最後に

今回のことで、xssのことももちろん、Webセキュリティの勉強をして行きたいなと思いました。

自身が安全なWebサイト作れるように励みたいと思います。

ではでは。

YouTube IFrame Player APIをゆるふわにラッピングしてみた。

映画『ノーゲーム・ノーライフ ゼロ』が早く観たい。

f:id:yuki540com:20170514235023j:plain

いやー。ノゲノラの映画楽しみですね。

7/15の上映日まで待てません。あと、魔法科高校の映画も見に行かねば。

ということで、はてなブログを初めて最初の記事は、技術関連です。

最近暑くなってきたので、無理せず、ゆるふわプログラミングで実装しました。

あくまで、ゆるふわ実装なのでそこまで大した機能はありません。

ちょっと便利かなぐらいに感じてもらえれば幸いです。

shuvi-lib

フレームレスなYouTubeプレイヤー「Shuvi」を作った際にYouTube IFrame Player APIを使ったのですが、もうちょっと使いやすくならないかなと思い、自分でゆるふわにラッピングしてみました。

名前は、shuvi-libです。

f:id:yuki540com:20170514233628j:plain

ちなみにShuviは、β版ではありますが公開中です。

f:id:yuki540com:20170514233543p:plain

shuvi-libをプロジェクトへの取り込み

shuvi-libの使う方法はいくつかあります。

一つ目は、GitHubページからダウンロードして自分のプロジェクトに置き、使う方法。

二つ目は、shuvi-libはnpm上で公開されているので、

npm install shuvi-lib

のようにnpmコマンドを使ってプロジェクトに取り込む方法。

三つ目は、私、yuki540のサーバー経由でネットワーク越しにshuvi-libをプロジェクトに取り込む方法です。

<script src="http://api.yuki540.com/shuvi-lib/v1/shuvi.lib.js"></script>

使い方

shuvi-libを使えば、YouTube IFrame Player APIをより簡単に操作することが可能です。

shuvi.lib.jsを取り込み、下記のようにパラメータを渡し、newすれば、すぐにプレイヤーの操作が可能になります。

let shuvi = new Shuvi({
  video_id : ['fQN2WC_Acpg'], // 動画IDの入った配列
  id       : 'player',        // 要素のID
  width    : 500,             // 画面の幅
  height   : 300,             // 画面の高さ
  autoplay : ture             // [option]自動再生(デフォルトは、true)
  loop     : false            // [option]ループ(デフォルトは、false)
})

npm経由の方は、requireを忘れずに。

const Shuvi = require('shuvi-lib')

ここから先は、Methods・Eventsのリファレンスです。

Methods

shuvi-libは、できるだけシンプルでわかりやすいメソッド名にしています。

動画URLから動画IDの取得

video_id = getId(url)

  • [param]url: YouTubeの動画URL
  • [return]video_id: 動画ID

イベントリスナの追加

shuvi.on(event, fn)

  • [param]event: イベント名
  • [param]fn: コールバック関数

プレイリストの変更

shuvi.setPlaylist(playlist)

  • [param]playlist: 動画IDの入った配列

再生

shuvi.play()

停止

shuvi.pause()

次の動画へ

shuvi.next()

後ろの動画へ

shuvi.back()

プレイリスト内の指定の動画を選択

shuvi.select(num)

  • [param]num: プレイリストの番号

ループの有無

shuvi.loop(bool)

  • [param]bool: trueの場合、ループ有。falseの場合、ループ無。

デフォルトは、ループ無です。

再生位置の移動

shuvi.seek(per)

  • [param]per: 0~1の数値

動画の総時間

duration = shuvi.duration()

  • [return]duration: 動画の総時間

現在の再生時間

current = shuvi.current()

  • [return]current: 現在の再生時間

動画の読み込み状況

buffer = shuvi.buffer()

  • [return]buffer: 動画の読み込み具合(0~1)

音量の取得

volume = getVolume()

  • [return]volume: 0~1の値

音量の設定

shuvi.setVolume(volume)

  • [param]volume: 0~1の値

サイズの変更

shuvi.resize(width, height)

  • [param]width: 画面の幅
  • [param]height: 画面の高さ

Events

shuvi-libは、プレイヤーの動作ごと挙動をイベントとして呼び出されます。

  • load
    • 動画の起動読み込み終了時に呼び出されます。
  • error
    • 動画の読み込み・再生の失敗時に呼び出されます。
  • change
    • 動画の変更時に呼び出されます。
    • 初回の動画の時には、発火されません。
  • play
    • 動画再生時に呼び出されます。
  • pause
    • 動作停止時に呼び出されます。
  • seek
    • 動画の再生時間が変更されるたびに呼び出されます。
  • end
    • 動画の再生が終了時に呼び出されます。

おわりに

ぱぱっと書いたものなので、ライブラリとしては物足りない感はありますが、今後、Shuviに取り込む際にアップデートして行こうと思います。

Starください。

Hello, yuki540.

Hello, yuki540.

f:id:yuki540com:20170514170955j:plain

はじめまして。yuki540です。

最近、暑いですね。

暑さしのぎに、北海道バニラを毎日食べてます。

今までQiitaで記事を書いていましたが、はてなにも書いていこうと思います。

技術ネタが多いかもですが、見てくれると幸いです。

Twitter: https://twitter.com/eriri_jp

GitHub: https://github.com/yuki540net