履歴書ついでにいままでやってきたことを記載します。
仕事以外の活動も記載していきたいので年月順に記載していきます。
| 氏名 | 五十嵐翔 (Syo Igarashi) |
|---|---|
| https://twitter.com/syo_igarashi | |
| Qiita | https://qiita.com/igara |
| Zenn | https://zenn.dev/igara |
| はてなブログ | https://igara1119.hatenablog.com |
| Speaker Deck | https://speakerdeck.com/igara |
| GitHub | https://github.com/igara |
| YouTube | https://www.youtube.com/channel/UCuAfp10MNsFIV6ytObuw_sw |
| Wantedly | https://www.wantedly.com/users/18191415 |
| LAPRAS | https://lapras.com/public/TE6SJSN |
| 個人サイト | https://igara.github.io |
- 基本情報
- いままで
- 2007/4~2010/3
- 2010/4~2014/3
- 2014/4~2016/4
- 株式会社アクティブワーク
- Qiita での活動-0
- [メモ]Vagrant を使って VM を起動する
- [メモ]Gentoo に H2O+PHP7.0.0RC4 をインストールする。
- [メモ]VirtualBox で作成した Gentoo からホストのフォルダを共有させる
- [メモ]node.js でライブラリのバージョン管理する
- [メモ]H2O で HTTP／2 を使ってみる
- StoryBoard を生かしたアプリ作りについて
- [メモ]WebKit を Watch する
- [メモ]Django のプロジェクト作成と用語
- [メモ]OpenShift で Redmine を作成して Redmine と戯れる
- OnsenUI でスマホアプリみたいなサイトを作ってみる
- [メモ]phpenv と php-build を用いた PHP バージョンアップ
- [メモ]TypeScript の設定・用語など
- [メモ]サーバ起動時に自動で独自のプロセス起動させるには（chkconfig）
- vorlon.js を使って端末のリモートデバッグしてみる
- PHP プロジェクトでいろいろな CI サービスを使ってみたというお話
- OWASP ZAP を使用してサイトの脆弱性と闘う話
- Protractor + mocha + power-assert + TypeScript を用いて OnsenUI で作成したサイトの E2E テスト
- H2O のアクセスログを Kibana + Elasticsearch + Fluentd で可視化する
- Zenmap(nmap)を使ったサーバのポートスキャン
- 非イラストレータが初めて PC でイラストを描いた話
- CSS で動くイラストを描いてみた（おまけで PostCSS 導入のお話）
- 閲覧しているサイトの ServiceWorker の登録削除と Cache API のキャッシュを全て削除する JS コード
- グラフィックツールで作成した SVG にアニメーションを付け加える
- GitHub での活動-0
- 2016/5~2018/9
- 2018/10~2020/3
- 2020/9~2024/2
本当は福島県立福島西高等学校を希望していたが滑り止めで「福島成蹊高等学校」という学校に入学した。
中学生の頃から数学が得意で、入試試験の数学では満点取ったという栄光がある。他の教科は軒並みな点数だった気がする。
学校名に「成蹊」と入っているが某学校法人とのつながりはない。由来は中国の漢詩からきているらしい。
元々は女子校であったが、入学した年が男女共学になった年なので実は共学になっての第 1 期生だったりする。
入学して 2 年生か 3 年生になった頃、中高一貫校として中学校も設立された。
「普通科」と有名大学に進学するための「特進科」というので学科が分かれており、特進科だと部活動に参加できないので普通科を選択した。
部活は硬式テニスをやった。中学生の時、バレーボールをやっていたのでバレーボール部に入りたかったが、男子部員がいなかったため中学からの友人と一緒にテニスをやるようになったという経緯がある。
数学得意なので理系である数学 Ⅲ, 数学 C, 物理と国語, 英語を中心に勉強をした。
大学受験について指定校推薦枠があったため推薦による大学受験だった。
あと余談で生徒に影響があった話でもないが在学中にあったこととして、私立校なので理事長（経営者）がおり、その理事長が別で経営しているタクシー会社のストライキがあったりで理事長が変わるというのがあった。
ガラケーを持ち始めて自分の自由に閲覧できるインターネットを得る。
当時 SNS が出始めな時だった。SNS の出会いで事件が出たのもこのぐらいの時期だった。
この動画にある内容だが文字として記載されているものがなかったのでこちらに記載する。
動画
https://youtu.be/pHGNT1lUloo?list=PLJt3Ieir9SpzpSkkfJkOQBq4qjz0xJ9YF&t=609
高校生の時に携帯電話でゲームができ、電子掲示板の書き込みもできるモバゲータウンに登録したらダダハマりしてしまった。
どういったところにハマったというとモバゲータウン内のサークル（コミュニティ）である。
学生の集まりのようなサークルで馴れ合うのもよかったが、特にモバゲータウンをハックしようというサークルが一番ハマった。
その時のサークルとして下記のものになる。
トレジャーハンター缶詰め改
http://yahoo-mbga.jp/group/3087661
ＷＥＢツール[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
怪盗ロワイヤルで自動に挨拶するようなツールを作って部活の友達に教えたり、 リンク切れなものがあるがモバゲー風にカスタムした（スタイルのみ変更した）掲示板なども作った。
高校を卒業した後、千葉工業大学に入学した。
入学したきっかけとして高校の時にハマったものを継続して勉強していきたいと気持ちがあったからである。
学部は情報科学部情報ネットワーク学科と呼ばれるところである。
あとは東京よりな場所に行ってみたかったというのがある。大学 4 年間、千葉で過ごすことになる。
動画ではこの辺で言ってたりする。
https://youtu.be/pHGNT1lUloo?list=PLJt3Ieir9SpzpSkkfJkOQBq4qjz0xJ9YF&t=1343
勉強していたものとして情報心理、デジタル・アナログ解析、ネットワーク系なものをやっていた。
入学して千種寮という学生寮にしばらく住む。
先に過ごしてみて良い点、悪い点あげると。
- 良い点
- 長期休暇じゃない日は寮にある食堂でご飯を食べることができる
- 夜通しで遊べる人が近くにいる
- 明日の午前に授業あるときとか起こし合える
- 電気代・水道代は寮費なので実質定額
- 大学の教師から購入を求められる教科書を先輩からもらうことができる
- 悪い点
- 大学からバスで 1 時間近く離れた場所に寮があるので通学に時間がかかる
- バス通学の時間を自主学習の時間に当てるという解釈にすれば悪い点でも無い
- 入寮時と夏休み明けにマナー研修というのがある
- マナー表を期間内に暗記するとか
- 外に出て寮歌・校歌を歌うとか
- 寮の行事に参加しないといけない
- 寮祭とか運動会とか
- 相部屋である
- 共同風呂
- お湯の出る時間が決まっているため混み合うとケツ壁ができる
- アルバイト原則禁止
- そもそも町外れな箇所にあるためアルバイトできそうな箇所がない
- 大学からバスで 1 時間近く離れた場所に寮があるので通学に時間がかかる
そんな環境で最初の大学生活 2 年間学生寮で過ごした。
ここの学生寮は建物が 4 棟存在し、自分は 4 棟で過ごした。
ちなみに舘ひろしが在学していた時に夜逃げしたと言われる棟と同じである。研修の時のみ厳しいと感じたが普段生活するにはみんな良い人たちだった。
大学 3 年生になってから退寮しひとり暮らしを始める。
退寮したのももっと自由に生活をしたいからであった。
退寮してもちょくちょく自転車で遊びに行ったりしてた。
ちなみにここに住んでいた。
角部屋の 2 階の 1R ロフト付きでトイレ・風呂一緒のユニットバスで当時の家賃は月 25,000 円だった。
大学から自転車で 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
になる。
大学卒業後、この近辺に住む。
小岩駅・篠崎駅どっちでも歩きで行けなくない距離の場所を選んだ結果ここにした。
1K で 50,000 円ぐらいの家賃だった。
新卒で入社した会社である。
入社して 4 月から 7 月にかけて研修に参加した。
Java でソケット通信の CUI チャットやサーブレットを使ったフォームのページ作成など教わった。
あとは研修中に 3 日間下記リンクの外部の研修を受けたりした。
上記のリンクの研修を受けたが、講師がいる中で社長のエゴでやったようなものだったのであまりいい印象がない。
他に思ったこととして大体インターネットで言わていることと同じ。
外部の研修後、なぜか後記にある会社の案件をやり、自社の人にも見てもらうための自己紹介ページ作った。
自己紹介ページは 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 グループ子会社になる前の組織体制の中で N 次受けの案件。
最初は iOS 開発として参画する。
設計書やテスト項目書を作成・レビューしながら、プロトタイピングのようなプレゼンテーションに使う用のアプリ作成を iOS で実装していたりした。
しばらくして Android 側の実装も始まり現場で作業するようになったがこの時は主に Android 側の検証とバグ修正対応をしていた。
この時の開発環境として iOS 側は Objective-C、Android 側は Android Studio で Java を書く環境だった。
バーコードを読み込むものとして zxing というのを使っていたのをなんとなく覚えている。
後に出た問題に関しては名前は似てるけど自分ではない。
この時、ローリングリリースな OS での開発をしたいというもので Gentoo の仮想環境を整えたかったことからメモとして Qiita に記載した。
下記の記事はこの時に作成した VM を用いており、個人サイトを作成したときも Gentoo を選択していたため開発環境として利用していた。
この VM とは別でコンテナを作成していたが当時動作が安定しなかったためこの VM を使用することが多かった。
VM の環境でとにかく新しいものを導入したりニッチなものを入れてみたい欲求が高く、上記の環境を構築してみたというのがある。
Vagrant を使用しているなら config.vm.synced_folder を使用すればいいのではという意見もありそう。
既に個人サイトで使用している VM なので Vagrant ファイルの変更したくなく、同じような VM を一時的に別の開発環境でも使用したい時があってこの記事を作成した。
記事内では Vagrant という単語を出さずに、 VirtualBox で作成した時のフォルダ共有方法として記載している。
個人サイトで Laravel を使用するにあたり、フロントエンド側の構築の際に実施した内容を記載している。
当時は npm が nodejs インストールと同時にされるものではなく別でインストールする必要があった。
作業は Gentoo で実施していたが Mac でも同様の作業で構築完了できるものとして記載している。
せっかく H2O でも HTTP／2 が使用できるということなので検証してみた記事。
iOS の UI をコードで調整することが多かったので逆に HP ビルダーみたいなもので UI 構成できないかと考えていた。
たまた新しい Xcode の StoryBoard でテーブルを構成する仕組みを思いついたので記載したものである。
モバイルブラウザの対応状況など見てみようとかあって記事にしてみたというのがある。
Python 系の Web フレームワークを触ってみたいというのがあってメモの記事を作成した。
その時に無料の Slack を使っていたのでコメントを保存するものを作ろうとしたものはこちらになる。
https://github.com/igara/SlackRackAPI
iOS のクライアントとしてこちらになる。
https://github.com/igara/SlackRackSwift
自社のサーバで Redmine を使用していてツールなど開発したいと思っていたので個人の Redmine 検証環境として記載したものである。
その時、工数管理で追加したい機能の CSS とかこれに記載していた。
https://github.com/igara/inputSupport
Cordova のような HTML + JavaScript でモバイルアプリとしても作成できて良さそうと思って個人サイトに導入した記事である。
個人サイトで使用している PHP のバージョンが RC 版だったりしていたので Stable 版にあげようとした時に記載したもの。
個人サイトで OnsenUI を使用し始めたりで NodeJS のライブラリを使用することが多くなり、JavaScript の処理を書くことも多くなってきた。
型による補完効くような環境が欲しくなったためメモとして記載した。
service コマンドとは別で自動にプロセス起動するものをメモとして記載。
モバイルアプリ内の WebView のデバッグどうするかを考えた時に、それぞれのブラウザで別々のデバッグを行うのではなく共通の操作でデバッグ方法がないか調べた際に得た方法である。
個人サイトに CI サービスを導入した際に記載したもの。 会社ではJenkinsを使用したUnitテスト実行うしていたがJenkinsの構築は大変なためSassのものでもCIテストはできることを調査したかった。
個人サイトの脆弱性あるか調べたい際に記載した内容。
当時会社でVexを使用した調査をしていたがOSSのものでも調査してみたいのが個人的にあって使用した。
個人サイトが Angular 使っており、Angular の公式ページで Protractor を推奨していたので使用してみた記事。
アクセスログの可視化をやったことがなかったのでやってみた内容。
空いているポートから特定の攻撃をされることがありそうというのを感じたのでポートスキャンする方法を得たいと調べてみた記事。
自分で絵などプログラミング以外のコンテンツの拡張したいと思った結果やってみた記事。
画像じゃなくて CSS で絵を描いてみたらどうだろうと思ったので挑戦してみた記事である。
Service Worker を入れてオフラインでも見えるページを追加した際にいつまでもページ更新されない事象があったのでユーザ側から更新できるようなものあったらいいなと思い記載したもの。
ペイントツールや CSS でも絵を描いてみてイラストを書く人とコーディングする人でいい中間地点はどこだろうと思った。
探した結果、SVG にだして Path の情報を CSS で書き換えれば良さそうと思ったので記載したもの。
Redmine の工数管理ツールに対してマウス操作で 0.25h ずつ数値調整できるようにしたフロント実装。
Slack のコメントを蓄積したものを取得する API が実装されたもの。
igara/SlackRackAPIを元に iOS のクライアント実装したもの。
初めて自分のサイトを GitHub に保存したもの。
wikiとかも書いて当時の同期となんかコーディングしてみたいかと立てたものだったが賑わうことなくそのままになった。
このリポジトリを通していろいろ Qiita の記事が生成されたものなので感慨深いものである。
https://github.com/igara/peerjs-server
は誤って削除してしまったが、PeerJS を使った WebRTC によるビデオチャットを実装した。 因みにこれは開発合宿という冬の 3 連休中に作成したものである。
VM で個人サイト開発していたが一応コンテナ化しておこうと作ってみたもの。
はじめての転職をした先の会社である。
退職後、次の仕事を探していたときに@type の転職イベントの会場で社長と当時の CTO にあった。
CTO とは今後の Web フロントエンドの先端を目指したいと意気投合してたりで雰囲気的に良さそうという印象があって入社した。
あとは当時親会社の株式会社トップゲートが技術系イベントのスポンサーなど活動の幅を広めていたのを知っていたので関わりを持ちたいというのもあった。
とはいえ自身が Google に特化してるかというとそうでもないのでちょうどいい距離感で仕事できたらいいなぁとそのときは思っていた。
後に移転するが移転前は親会社の一般利用可能なコワーキングスペースのスタジオギークスという施設利用をさせていただいたりした。
移転後も自社側のオフィスをプライベートの集まりに利用させていただいたというのがある。
国産の中古車を海外に販売する会社で株式会社ブックルックチームという会社経由でサービス開発を行った。
開発の現場が調布にあるので電車の移動時間のみで 1 時間もかかるというのもあったので自社にごねてたら特別に交通費プラスの通勤補助金もらってたりしてた。
Vagrant で複数の PHP のプロジェクトを起動する開発環境で print などの出力でデバッグするやり方をあまり効率的じゃないなと思っていた。 その現状から Xdebug による IDE(Eclipse, VSCode, PhpStorm)デバッグ方法を Wiki にまとめたりして効率化に貢献した。
複数のアプリケーションが異なる CakePHP のバージョンであったり、Laravel を使用していたりした。Web フロント側は jQuery で変更を加えるようなものだったのでそこまで見栄え上で複雑なものを求められることが少なかった。
多国籍向けなアプリケーションのため、多言語対応や他通貨に関係して決済までのフロー理解がドメイン知識的に難しい案件だったなと思っている。
現在は SATT AI ラボ株式会社に社名が変更されている。
この会社は開発実績というものがないが別の案件をこなしたいのもありつつまだ案件がないので営業からの相談で要件の見積もりをしていた。
要件として電話機能と手書き機能が Web とスマホアプリで別々に実装がされているので工数削減としての改修できないかという相談で以下の理由で断わろうという決断をした。
- iOS Safari が WebRTC の対応がうまくいってないので Twilio の Web ライブラリで WebView 内に完結できなかった
- React Native の Twilio なども調査したが結局 Web と別の実装になるので思ったほか工数の削減はできない
- スマホ側を React Native に置き換えるほどの工数はだせそうにない
- React Native Web というのもまだなかったので
他の会社の案件もやりながら作業してた。
Cloud SQL や Google App Engine をはじめてつかってみたりしたけどそこまで要件定義の上位レイヤーまでは関わっていない。
プレリリースした後、結局のところ運用を続ける利点等があるかを言い始め、クローズになった。
他の案件を掛け持ちしていたので一部実装の手伝いをしていた。
React Native によるスマホアプリ作成でカメラからカルテの内容を読み取る OCR の実行ファイルを React Native 側でも使えるようにブリッジ実装した。
あとはチャットのレイアウト調整など行った。
もともとあった PHP のテンプレートエンジンで作成されていたページを React でレンダリングするように変更した。 また、バッチのシステムを AWS の Kinesis や Lambda で実行するように分散化を行ったりした。
新しいプラットフォームの画面を作るために Serverless Framework と NextJS を用いた画面構築を行ったりした。
ライブ配信アプリのサービスでWeb側の担当をしていた。 Rails, NextJSでイベントページの作成を行なっていた。 イベントの数も多くなってきたためデータ入稿をしやすい仕組みとしてスプレットシートとGoogle App Scriptsを活用したデータ入稿の改善を行なった。
CakePHPとReactを活用した機能改善対応をした。 Web側はCake2、バッチ・管理画面ではCake4、Reactもパーツごとでのプロジェクトディレクトリがある構成のため複数の環境があった。 複数環境なためリソースの二重管理を避けるためにデザインシステムやライブラリ開発を行った。
FastAPIとNextJSの構成のLLMチャットツールを作成した。 言い訳になるが、ランサーズ側と並列して開発していたのもあり開発の違和感を感じてしまうことがあった。