igara

履歴書ついでにいままでやってきたことを記載します。
仕事以外の活動も記載していきたいので年月順に記載していきます。

目次

基本情報

氏名 五十嵐翔 (Syo Igarashi))
Twitter https://twitter.com/syo_igarashi
Qiita https://qiita.com/igara
はてなブログ https://igara1119.hatenablog.com
Speaker Deck https://speakerdeck.com/igara
GitHub https://github.com/igara
Wantedly https://www.wantedly.com/users/18191415
LAPRAS https://lapras.com/public/TE6SJSN
個人サイト https://syonet.work

GitHub Readme Stats

igara's github stats

Top Langs

いままで

2007/4~2010/3

高校生活

本当は福島県立福島西高等学校を希望していたが滑り止めで「福島成蹊高等学校」という学校に入学した。
中学生の頃から数学が得意で、入試試験の数学では満点取ったという栄光がある。他の教科は軒並みな点数だった気がする。
学校名に「成蹊」と入っているが某学校法人とのつながりはない。由来は中国の漢詩からきているらしい。
元々は女子校であったが、入学した年が男女共学になった年なので実は共学になっての第 1 期生だったりする。
入学して 2 年生か 3 年生になった頃、中高一貫校として中学校も設立された。

「普通科」と有名大学に進学するための「特進科」というので学科が分かれており、特進科だと部活動に参加できないので普通科を選択した。
部活は硬式テニスをやった。中学生の時、バレーボールをやっていたのでバレーボール部に入りたかったが、男子部員がいなかったため中学からの友人と一緒にテニスをやるようになったという経緯がある。
数学得意なので理系である数学 Ⅲ, 数学 C, 物理と国語, 英語を中心に勉強をした。
大学受験について指定校推薦枠があったため推薦による大学受験だった。

あと余談で生徒に影響があった話でもないが在学中にあったこととして、私立校なので理事長(経営者)がおり、その理事長が別で経営しているタクシー会社のストライキがあったりで理事長が変わるというのがあった。

モバゲータウンにはまる。

ガラケーを持ち始めて自分の自由に閲覧できるインターネットを得る。
当時 SNS が出始めな時だった。SNS の出会いで事件が出たのもこのぐらいの時期だった。

この動画にある内容だが文字として記載されているものがなかったのでこちらに記載する。
動画
https://youtu.be/pHGNT1lUloo?list=PLJt3Ieir9SpzpSkkfJkOQBq4qjz0xJ9YF&t=609

高校生の時に携帯電話でゲームができ、電子掲示板の書き込みもできるモバゲータウンに登録したらダダハマりしてしまった。
どういったところにハマったというとモバゲータウン内のサークル(コミュニティ)である。
学生の集まりのようなサークルで馴れ合うのもよかったが、特にモバゲータウンをハックしようというサークルが一番ハマった。

その時のサークルとして下記のものになる。

トレジャーハンター缶詰め改
http://yahoo-mbga.jp/group/3087661

WEBツール[2nd]
http://yahoo-mbga.jp/group/30505794

たまたま掲示板の背景色をオレンジ 1 色に変えるバグを見てしまい、他にもいろいろ試してみようと集ったものが上記のサークルで興味を持ってしまったというのがあった。

掲示板の背景色をオレンジ変えるバグについて

掲示板の投稿する時に掲示板のタイトルに特殊な文字を使用すると起こるバグだった。
URI 上で使用できない文字列を用いる時、パーセントエンコードを行う。

例えば 🐣 が EZweb 絵文字コードで %ef%34 という 16 進数を用いたコードポイントとしたらどこかしら絵文字が設定されていない欠番が存在する。
あと当時は、EZweb、i モードで絵文字の統一化ができていない時代なので端末によっては文字化けが発生するというものもあった。
当時のサービスでは文字コードが違くてもある程度同じ絵文字を出力しようとフレームワーク(MobaSiF)でやろうとしていたが、 %ef%91 というコードが対策されていなかった。
結果としてパーセントのエスケープをやっていなかったので前後にある HTML の文字列も巻き込んでスタイルを崩せてしまったようなものだった気がする。

その時の HTML と CSS がどんな感じだったかも曖昧で。

<div style="background: red;">${掲示板のタイトル}</div>
<div>
  ...
</div>

となっていたのが下記のようになり、div の閉じがなくなって掲示板の内容全体にスタイルが当たってしまうみたいな現象だった。

<div style="background: red;">
  ?/div>
  <div>
    ...
  </div>
</div>

上記、認識違そうだったら連絡いただけると嬉しい。

ガラケーのブラウザで遊ぶ

上記のバグとの遭遇により、どうやってガラケーのサイトに XSS のようなを行うことができたのだろうかと興味を持ち始める。
サークルの人に聞いて Openwave ブラウザ(Ezweb)でもソースを抽出する方法があることを知った。

  • form のデータを抽出する。
    投稿しましたというページでブックマークするとなぜか form で送信したデータが残ったままになる。
    ブックマークの URL を別の Web ページにすることでリクエストしたデータを抽出ができる。
    POST 抽出ツールと呼んでいた。
  • HTML をテキスト出力する。
    HTML を表示する URL を img タグで読み込んだ後、a タグで HTML の URL を開くとなぜかテキスト表示される。
    PC 制限突破ツールと呼んでいた。

といった手法を用いて自分ツールを作ってみたのが下記のサイトになる。

高校生時代に作成したサイトのアーカイブ
https://megalodon.jp/?url=http%3A%2F%2Fsameha.biz%2F%3Fakama

怪盗ロワイヤルで自動に挨拶するようなツールを作って部活の友達に教えたり、 リンク切れなものがあるがモバゲー風にカスタムした(スタイルのみ変更した)掲示板なども作った。

2010/4~2014/3

大学生活

高校を卒業した後、千葉工業大学に入学した。
入学したきっかけとして高校の時にハマったものを継続して勉強していきたいと気持ちがあったからである。
学部は情報科学部情報ネットワーク学科と呼ばれるところである。
あとは東京よりな場所に行ってみたかったというのがある。大学 4 年間、千葉で過ごすことになる。

動画ではこの辺で言ってたりする。
https://youtu.be/pHGNT1lUloo?list=PLJt3Ieir9SpzpSkkfJkOQBq4qjz0xJ9YF&t=1343

勉強していたものとして情報心理、デジタル・アナログ解析、ネットワーク系なものをやっていた。

学生寮生活

入学して千種寮という学生寮にしばらく住む。

先に過ごしてみて良い点、悪い点あげると。

  • 良い点
    • 長期休暇じゃない日は寮にある食堂でご飯を食べることができる
    • 夜通しで遊べる人が近くにいる
    • 明日の午前に授業あるときとか起こし合える
    • 電気代・水道代は寮費なので実質定額
    • 大学の教師から購入を求められる教科書を先輩からもらうことができる
  • 悪い点
    • 大学からバスで 1 時間近く離れた場所に寮があるので通学に時間がかかる
      • バス通学の時間を自主学習の時間に当てるという解釈にすれば悪い点でも無い
    • 入寮時と夏休み明けにマナー研修というのがある
      • マナー表を期間内に暗記するとか
      • 外に出て寮歌・校歌を歌うとか
    • 寮の行事に参加しないといけない
      • 寮祭とか運動会とか
    • 相部屋である
    • 共同風呂
      • お湯の出る時間が決まっているため混み合うとケツ壁ができる
    • アルバイト原則禁止
      • そもそも町外れな箇所にあるためアルバイトできそうな箇所がない

そんな環境で最初の大学生活 2 年間学生寮で過ごした。
ここの学生寮は建物が 4 棟存在し、自分は 4 棟で過ごした。
ちなみに舘ひろしが在学していた時に夜逃げしたと言われる棟と同じである。研修の時のみ厳しいと感じたが普段生活するにはみんな良い人たちだった。

ひとり暮らし始める

大学 3 年生になってから退寮しひとり暮らしを始める。
退寮したのももっと自由に生活をしたいからであった。
退寮してもちょくちょく自転車で遊びに行ったりしてた。

大学から自転車で 30 分圏内のところに住み、生活費も奨学金とスーパーの鮮魚部で働いて得たお金で過ごした。
鮮魚部にいたことで鯛とか鯵などの魚をおろせるようになったりした。

個人サイト作成する

ABC オロチサーバーというレンタルサーバで個人サイトを作成した。 ABC オロチとは MySQL、PHP、CGI/Perl が使用可能で決められた Linux のディレクトリにファイルを FTP で転送させることでサイトを構築できるものである。

個人サイトではアクセスカウンターを作ったり、HTML のコードを構成するツール(table を作成するような)作ったりした。 あとはブログを書籍を参考にして Perl で作成したり、WordPress を構築したりした。

その時参考にした書籍のブログである。
KENT と作るワンランク上の Perl/CGI プログラミング
https://www.kent-web.com/pubc/book/9_1rank_tsukuro.html

現在はアカウントを削除したため存在しない。
http://oab.no-ip.biz/~igara/

就職活動

大学 3 年生後半になって就職活動をする。
最初に説明会行った会社が新卒で入社した株式会社アクティブワークという開発の会社で結構早く内定ももらった。 卒業研究と上記に記載されている会社で入社前に研修や資格取得(Oracle の Java SE と Database)するようにと言われていたのであまり他の会社も受けてみようという気が起きなかった。

卒業研究

Oracle の資格勉強していたのもあったので仮想計算機上にデータベースを操作できるような Web アプリケーションを作り、その中で学習してもらって仮説検証するような研究をした。

検証の実施とかもしたが 10 人未満の数でしか実施できなかったのであまり良いデータが取れなかった気はする。

3 年の後期に研究室のメンバーが構成されて、その時のメンバーの中に研究室のルータに登録されている ARP テーブルを元に誰が研究室に入室したかを Twitter に告知する仕組みを作った人がいた。 それを真似て自分のサイトに入室状態がわかるファイルを生成したものとして
https://github.com/igara/aircrack_login

になる。

2014/4~2016/4

株式会社アクティブワーク

新卒で入社した会社である。

新人研修

入社して 4 月から 7 月にかけて研修に参加した。

Java でソケット通信の CUI チャットやサーブレットを使ったフォームのページ作成など教わった。
あとは研修中に 3 日間下記リンクの外部の研修を受けたりした。

https://www.hell-camp.com

上記のリンクの研修を受けたが、講師がいる中で社長のエゴでやったようなものだったのであまりいい印象がない。
他に思ったこととして大体インターネットで言わていることと同じ。

外部の研修後、なぜか後記にある会社の案件をやり、自社の人にも見てもらうための自己紹介ページ作った。

自己紹介ページは HTML などの静的ファイルを自社のサーバに FTP でアップロードしてみるようなものである。
PHP も使えるようなものだったのでアクセスカウンタや掲示板などテキストファイルにデータを保存する形で設置したりした。

イオンアイビス

なぜか研修期間中に見ていた案件。
実装に関わったわけでなく、モンキーテストやマトリックスなテスト項目を検証したりしていた。

システムが納品された後、幕張新都心にあるイオンで実際に動いているシステムを触っての感想を求められた記憶がある。

リクルート住まいカンパニー

研修後に配属した部署での案件の会社。
最初は保守案件のようなものでメンテナンス時とかでも OK と表示されるようなページがあり、Web サーバが閉じていないか確認するヘルスチェックのバッチを作成したりした。

その後、SVN から Git に乗り換えとチャット BOT 導入するための対応をするためにサーバ側でリクエストしたら Git のコマンドを実行してサイトを更新するような仕組みを実装した。
この時のシステムは参画当時、Apache、PHP 5.x、Zend Framework といういわゆる XAMP な環境でサーバサイドの構成がされていた(後に nginx と PHP 7 になる)。
jQuery に似た smartjs という独自ライブラリとサーバサイド側のテンプレートエンジンとして Smarty というフロントエンド構成だった。
スマホサイトの開発であった PC 版で既に作成済みの API があるのでサーバ側で API を呼び出したものをテンプレートエンジンに書き出すような作業が多かった。

上記の対応後は Web サイトの対応ではなく、スマホネイティブアプリの勉強という形で iOS・Android のサブアプリ案件の担当になる。 主にスマホ内にある CSV ファイルの更新や新しい端末でも動作するかの検証対応とかを行なっていた。 この時は、iOS 側は Objective-C、Android 側は Android Studio ではない Eclipse で Java を書く環境だった。

しばらくして別のスマホアプリの案件に移動し、再度この案件に戻ってきて、キーワードの動的に検索候補を表示する機能対応を行なった。

NTT ラーニングシステムズ

リクルート案件をやっていた時に並列でテスト要員として参加していた。
カンバンシステムのバグチケット起票とバグ修正確認を行なっていた。

セブン&アイ・ホールディングス

開発元がネットイヤーグループで当時はまだ NTT グループ子会社になる前の組織体制の中で N 次受けの案件。
最初は iOS 開発として参画する。
設計書やテスト項目書を作成・レビューしながら、プロトタイピングのようなプレゼンテーションに使う用のアプリ作成を iOS で実装していたりした。

しばらくして Android 側の実装も始まり現場で作業するようになったがこの時は主に Android 側の検証とバグ修正対応をしていた。
この時の開発環境として iOS 側は Objective-C、Android 側は Android Studio で Java を書く環境だった。
バーコードを読み込むものとして zxing というのを使っていたのをなんとなく覚えている。

Qiita での活動-0

[メモ]Vagrant を使って VM を起動する

この時、ローリングリリースな OS での開発をしたいというもので Gentoo の仮想環境を整えたかったことからメモとして Qiita に記載した。

下記の記事はこの時に作成した VM を用いており、個人サイトを作成したときも Gentoo を選択していたため開発環境として利用していた。

この VM とは別でコンテナを作成していたが当時動作が安定しなかったためこの VM を使用することが多かった。

[メモ]Gentoo に H2O+PHP7.0.0RC4 をインストールする。

VM の環境でとにかく新しいものを導入したりニッチなものを入れてみたい欲求が高く、上記の環境を構築してみたというのがある。

[メモ]VirtualBox で作成した Gentoo からホストのフォルダを共有させる

Vagrant を使用しているなら config.vm.synced_folder を使用すればいいのではという意見もありそう。
既に個人サイトで使用している VM なので Vagrant ファイルの変更したくなく、同じような VM を一時的に別の開発環境でも使用したい時があってこの記事を作成した。
記事内では Vagrant という単語を出さずに、 VirtualBox で作成した時のフォルダ共有方法として記載している。

[メモ]node.js でライブラリのバージョン管理する

個人サイトで Laravel を使用するにあたり、フロントエンド側の構築の際に実施した内容を記載している。
当時は npm が nodejs インストールと同時にされるものではなく別でインストールする必要があった。
作業は Gentoo で実施していたが Mac でも同様の作業で構築完了できるものとして記載している。

[メモ]H2O で HTTP/2 を使ってみる

せっかく H2O でも HTTP/2 が使用できるということなので検証してみた記事。

StoryBoard を生かしたアプリ作りについて

iOS の UI をコードで調整することが多かったので逆に HP ビルダーみたいなもので UI 構成できないかと考えていた。
たまた新しい Xcode の StoryBoard でテーブルを構成する仕組みを思いついたので記載したものである。

[メモ]WebKit を Watch する

モバイルブラウザの対応状況など見てみようとかあって記事にしてみたというのがある。

[メモ]Django のプロジェクト作成と用語

Python 系の Web フレームワークを触ってみたいというのがあってメモの記事を作成した。

その時に無料の Slack を使っていたのでコメントを保存するものを作ろうとしたものはこちらになる。
https://github.com/igara/SlackRackAPI

iOS のクライアントとしてこちらになる。
https://github.com/igara/SlackRackSwift

[メモ]OpenShift で Redmine を作成して Redmine と戯れる

自社のサーバで Redmine を使用していてツールなど開発したいと思っていたので個人の Redmine 検証環境として記載したものである。

その時、工数管理で追加したい機能の CSS とかこれに記載していた。
https://github.com/igara/inputSupport

OnsenUI でスマホアプリみたいなサイトを作ってみる

Cordova のような HTML + JavaScript でモバイルアプリとしても作成できて良さそうと思って個人サイトに導入した記事である。

[メモ]phpenv と php-build を用いた PHP バージョンアップ

個人サイトで使用している PHP のバージョンが RC 版だったりしていたので Stable 版にあげようとした時に記載したもの。

[メモ]TypeScript の設定・用語など

個人サイトで OnsenUI を使用し始めたりで NodeJS のライブラリを使用することが多くなり、JavaScript の処理を書くことも多くなってきた。
型による補完効くような環境が欲しくなったためメモとして記載した。

[メモ]サーバ起動時に自動で独自のプロセス起動させるには(chkconfig)

service コマンドとは別で自動にプロセス起動するものをメモとして記載。

vorlon.js を使って端末のリモートデバッグしてみる

モバイルアプリ内の WebView のデバッグどうするかを考えた時に、それぞれのブラウザで別々のデバッグを行うのではなく共通の操作でデバッグ方法がないか調べた際に得た方法である。

PHP プロジェクトでいろいろな CI サービスを使ってみたというお話

個人サイトに CI サービスを導入した際に記載したもの。

OWASP ZAP を使用してサイトの脆弱性と闘う話

個人サイトの脆弱性あるか調べたい際に記載した内容。

Protractor + mocha + power-assert + TypeScript を用いて OnsenUI で作成したサイトの E2E テスト

個人サイトが Angular 使っており、Angular の公式ページで Protractor を推奨していたので使用してみた記事。

H2O のアクセスログを Kibana + Elasticsearch + Fluentd で可視化する

アクセスログの可視化をやったことがなかったのでやってみた内容。

Zenmap(nmap)を使ったサーバのポートスキャン

空いているポートから特定の攻撃をされることがありそうというのを感じたのでポートスキャンする方法を得たいと調べてみた記事。

非イラストレータが初めて PC でイラストを描いた話

自分で絵などプログラミング以外のコンテンツの拡張したいと思った結果やってみた記事。

CSS で動くイラストを描いてみた(おまけで PostCSS 導入のお話)

画像じゃなくて CSS で絵を描いてみたらどうだろうと思ったので挑戦してみた記事である。

閲覧しているサイトの ServiceWorker の登録削除と Cache API のキャッシュを全て削除する JS コード

Service Worker を入れてオフラインでも見えるページを追加した際にいつまでもページ更新されない事象があったのでユーザ側から更新できるようなものあったらいいなと思い記載したもの。

グラフィックツールで作成した SVG にアニメーションを付け加える

ペイントツールや CSS でも絵を描いてみてイラストを書く人とコーディングする人でいい中間地点はどこだろうと思った。
探した結果、SVG にだして Path の情報を CSS で書き換えれば良さそうと思ったので記載したもの。

GitHub での活動-0

igara/inputSupport

Redmine の工数管理ツールに対してマウス操作で 0.25h ずつ数値調整できるようにしたフロント実装。

igara/SlackRackAPI

Slack のコメントを蓄積したものを取得する API が実装されたもの。

igara/SlackRackSwift

igara/SlackRackAPIを元に iOS のクライアント実装したもの。

igara/syonet

初めて自分のサイトを GitHub に保存したもの。
wikiとかも書いて当時の同期となんかコーディングしてみたいかと立てたものだったが賑わうことなくそのままになった。
このリポジトリを通していろいろ Qiita の記事が生成されたものなので感慨深いものである。

igara/syochat

https://github.com/igara/peerjs-server

は誤って削除してしまったが、PeerJS を使った WebRTC によるビデオチャットを実装した。 因みにこれは開発合宿という冬の 3 連休中に作成したものである。

igara/syonetdocker

VM で個人サイト開発していたが一応コンテナ化しておこうと作ってみたもの。

利用規約
利用上の留意事項
  • 状態保持の機構としてCookiesを使用しております。
  • 本サイトのログイン機能としてSNSを使用した認証を行なっています。 その際、SNSのアカウントに紐づいた情報を取得させていただきますので同意の元、ご利用をよろしくお願い致します。