こんにちは!

Takanori Oishi (おおいし たかのり) と申します。Webエンジニア / セキュリティスペシャリストです。パフォーマンス・セキュリティ・SEO・保守性を意識したシンプルで高速な開発が得意です。

GitHubForkwell転職ドラフト

Webフロントエンド

高速でパフォーマンスや保守性の高いWebサイトを構築できます。SPA/SSR/SSGそれぞれ経験があります。

Webバックエンド

セキュリティやパフォーマンスを意識したWebサイトを構築できます。会員100万以上のWebサイトのDBパフォーマンスを改善した経験もあります。

DevOps

開発体験とセキュリティを意識した、コンパイラやリンターの設定、CI/CD環境、Dockerの設定、オンプレミスやクラウドでの立ち上げと運用の経験があります。

セキュリティ

情報処理安全確保支援士です(第017758号)。セキュリティを意識したプログラミングができます。また、日々セキュリティ事故や攻撃方法等の情報収集を行っています。

IoT / 組み込みシステム

Arduino、H8、PICなどマイコンの開発、EAGLEを用いた電子基板の設計の経験があります(業務経験はなし)。

機械設計 / 製作

3D・2DCADなどを用いた機械設計や強度計算ができます。3Dプリンター、NC工作機械、旋盤など各種工作機械も使えます。

プロジェクト

日本で唯一かもしれない領域のWebアプリのプロトタイプを開発中です。

詳細は非公開ですが、鋭意開発中です。 まずは動作するプロトタイプを作成しています。 もし評価されれば、起業のスキルがないため、社内ベンチャーでの起業を目指しています。

観光型MaaS 4サイト(SPA/SSRのWebアプリ)のフロントエンド開発

MaaS (Mobility as a Service) 4サイトのフロントエンドを新規開発しました。チケットの購入と消込、オンデマンド交通の予約と消込、観光名所の紹介や、旅行プランの紹介などの機能があります。

サイト共通の機能があるため、状態管理やコンポーネントを汎用的にし疎結合となるよう開発したことで、切り分けて他サイトで再利用することができ、保守性が高く開発効率を上げることができました。

1サイト目ではリリース直前の手戻りが多く、稼働が増えてしまいました。それにも関わらず、そのまま次のサイトに進みそうになりました。私は、教訓を活かして改善するためにリリースするごとに振り返りを行う必要があると提案し、チームでKPT手法を用いた振り返りを行いました。プロジェクトに参加する各社で要件が正しく伝わらない状態のまま、リリース直前まで各社がサイトを確認出来ずに認識違いや実装漏れを確認できなかったことが原因であると分析しました。大規模なプロジェクトであるため、属人化が避けられませんでした。

上記分析を踏まえ、2サイト目からはプロトタイプだけでなく、ステージング環境を立ち上げてもらうよう依頼しました。私達が構築している途中のサイトを各社が閲覧できるようにしたことで、早い段階からレビューできるようになり、認識違いや実装漏れによる手戻りを減らすことができました。

地域ポータルサイトに月額会員サービスを新規開発。サーバーサイド・フロントエンドの新規開発、プロジェクト管理

地域ポータルサイト(UU60万/月)に月額会員プランを追加し、クーポンやコンシェルジュ等のサービスを提供する新機能を開発しました。

3Dセキュア認証を含むクレジットカード決済に関わる動作を実装しました。今回は決済が関わっており、セキュリティは最重要視されました。フロントエンドとバックエンド両方の工程に関わることで、例えば使用できない会員の場合はクーポンのコンポーネント自体を読み込まないなどの実装が可能となり、セキュリティを高めることができました。

Geolocation API を活用した位置情報の取得を実装しました。位置情報の取得についてユーザーに分かりやすくするデザインや、店舗からの距離を緯度・経度を用いて求める方法について理解することができました。

PHP未経験者のメンバーが参画したため、私はOJTとして教育を行いました。機能単位で担当を区切るのではなく、画面単位で細かく区切り、コミットを細かくしてプッシュしてもらうことで、進捗や開発能力の把握が容易に可能となりました。

牛遺伝子情報・交配予測アプリ(SPAのWebアプリ)の新規開発。フロントサイドの、詳細設計、コンパイル設定、コード規約の設定、開発、自動デプロイ設定、単体試験、E2E試験、CI自動テスト設定、プロジェクト管理

今まで郵送で行われていた、牛の遺伝子型検査を行った農家への結果提供と交配予測を、スマートフォンやPC上で確認ができるWebアプリケーションを新規開発しました。

APIは別会社が実装し、フロントのみ担当と決まったのですが、PMは社内で扱える人材が多いJavaで実装する方向に動いていました。私が将来の保守性も考えてフロントのみで実装するべきだということをPMに説得しました。フロントの実装を託され、プロジェクトリーダーとして参画しTypeScriptで実装しました。プロジェクト終了後でもJavaで実装しない判断は正しかったと自負しています。

プロジェクトリーダーとして、コーディング規約の設定、リンターの設定、CIの設定、自動デプロイや、Herokuを設定しました。立ち上げの段階でもう1名のメンバーと相談しながら設定できたことで、開発体験、品質とセキュリティを意識した設定を行い、ストレスなく開発することができました。

バックエンドが同時期に開発され早期に結合できなかったことと、同様の機能を複数の画面で使用していたことから、Reactを用いたコンポーネント駆動開発を行いました。コンポーネントの開発を先に行ったためスケジュールがバックエンドの開発速度に影響されて待ちになることなく、さらにコンポーネント化によりコード量を大きく減らすことができました。保守性の高い高品質なアプリを高速に構築できました。

小売販売店の社内業務システム(Webアプリケーション)の詳細設計、データベース設計、モックアップ作成、デザイン、開発、単体試験、結合試験、ローカル環境構築、運用環境構築

今までExcelやAccessを使用して行われていた、売上取込、入金取込、顧客管理、請求管理、請求突合せ、請求書発行(PDF出力)、メール送付や、集計(Excel出力)等の機能がある社内業務システムをDjangoを用いて新規開発しました。初めてフルスタックエンジニアとして、設計からデザイン、開発、試験、環境構築までのほぼ全行程に関わりました。

全行程に関われることで、モックアップの段階から実装の都合のよい画面デザインを提示することができました。また、初めて開発者以外のお客様と直接打ち合わせをし、曖昧な要件を整理して、調整する経験を積むことができました。

当時はプログラマとしての立場でしたが、要件に対して実装が難しい場合は両者にとってプラスになるような折衷案を提案しました。また、自分が開発経験のあったライブラリの採用を提案し、自ら実装するなど、自分の考えを積極的に示すことで、プロジェクトがスムーズに進みました。

要件が曖昧であったことから、私がスクラム開発を提案し、取り入れました。お客様のオンプレミス環境上にDockerを構築し、ステージング環境の自動デプロイを実装しました。メンバーで毎日デイリースクラムをし、お客様とのスプリントレビューはメンバー全員で参加し、実装内容を直ぐにお客様に確認して頂きました。お客様とメンバー全員で認識の齟齬が発生することがありませんでした。フィードバックとリリースを高速で回すことができました。

求人情報メディア2サイトで会員登録不要で応募できる機能のサーバーサイドプログラム及びデータ集計バッチを開発 / 求人情報メディア1サイトで別のメディアサイトの求人情報を掲載し、かつ別のサイトであることを意識せずに応募できる機能のサーバーサイドプログラムを開発

求人メディア3サイトで共通会員数が100万以上の大手求人サービスの新機能開発を行いました。大量のトラフィックが発生するだけでなく、データベースから大量のデータを取得して集計するバッチ処理の作成が必要でした。

小規模な開発しか行ってこなかったため大量のデータを高速に処理するためのノウハウが無く、タイムアウトやメモリ不足などが発生し苦労しました。SQLのパフォーマンス改善について学習し、これらの問題を改善することができました。

また、大規模なシステムのため、見通しが悪く、1箇所の実装を変更すると他の箇所で不具合が発生するといった問題がありました。そのため、メンバーと相談し、毎日互いのコミットや不具合について共有し、メンバーの暗黙知を減らすように努力しました。副次的効果として、手が空いたときにメンバー同士で作業をスムーズに手伝えるようになりました。

1ヶ月に10~20ほど、建物の外装工事に用いる「ゴンドラ」という機械足場の仮設計画をCADソフト(Inventor・Auto CAD)で設計・製品検査の対応

北海道から九州まで全国の建物の外装工事時に使用されるゴンドラの仮設計画を設計しました。建物のCAD図面があれば、その図面を用いて仮設計画すれば良いのですが、紙媒体で保存された建物図面が大きく劣化して寸法が読めなかったり、図面が見つからない場合もありました。しかし、仮設計画によってコストやスケジュールが大きく左右されるため、誤りが許されない仕事でした。

営業担当者との連携のもと、時には現場に赴きお客様と打ち合わせしたり寸法測定したりすることで顧客の要求事項を確実に把握し、お客様や社内担当者と誤解を生まないコミュニケーションを行えるようになりました。

時には特注品が必要な場合があり、設計や部品の発注を行いました。法的な理由で厚生労働省による製品検査が必要な場合があり、設計担当として製品検査の対応を行いました。人命が関わるため、慎重に設計を行いました。特に、一度完成させても翌日と発注前ににもう一度確認するという自分の中でのルールを設けたことで、一度も事故や再設計を発生させませんでした。

「採血シミュレータにおける穿刺力覚の再現に関する研究」

研究内容

採血の機会は多いですが、事故も多く発生しています。3Dプリンターで作成した注射器と市販のハプティックデバイスを用いた採血シミュレータを開発しました。 C++で開発したPCのソフトで3D空間内に腕と注射器を表示し、手元のハプティックデバイスに取り付けた注射器で擬似的に採血を行うことができます。実際の注射器を操作し、画面上の腕に穿刺すると、実際の注射器にも同様の力覚を得ることができるようになっており、何度も採血を擬似体験することができます。 第26回 ライフサポート学会 フロンティア講演会で研究発表を行いました。

詳細

私は血管が出にくく、採血に失敗して内出血することが多いため苦手です。調べたところ採血時の事故は日本国内で年間のべ4万人以上(厚生労働省 令和元年度版血液事業報告より)と意外と多く、その原因として看護師は人形に数回穿刺するのみで、その後はぶっつけ本番で患者に採血するという実態があるためとのことで驚きました。擬似的に何度でも練習する機会があれば、事故を減らすことができると考え、採血シミュレータを開発することにしました。

3Dプリンターで注射器を作成し、ピストン部に磁石を取り付け、軸部にリードスイッチを取り付けて吸引動作を検出しています。位置の検出や力覚の提示はハプティックデバイスが行います。プログラムではセンサーの値を用いてフォークトモデルを用いたフィードフォワード制御を行ってハプティックデバイスに力覚を指示しています。

力学に関する知識と、プログラムの知識両方を活用して、成果を出すことができました。

メーカーで設計・販売してる試験装置の改良活動
  • 機械メーカーに1ヶ月インターンシップに参加しました。
  • メーカーで設計・販売してる試験装置の改良活動を行いました。現状の問題点を洗い出し、強度計算、設計、部品発注、製作、評価を行いました。
  • 実際に必要な試験対象に対して過剰な部品が使用されていたため、SolidWorksを用いて再設計を行い、寸法を17%削減し、原価を30%削減しました。
  • 試作品として部品発注・組み立てと評価を行い既存の製品と同等の強度性能であることを確認しました。
  • 部品の発注を行うにあたり、社員の方に試作品の説明やプレゼン能力が身につきました。
漫画アプリでの新着情報や新着漫画を通知するTwitter BOTを開設

漫画アプリでの新着情報や新着漫画を通知するTwitter BOTを開設しました(PHP→Node.js)。現在も引き続き運用しています。

上記漫画アプリ情報サイトのコンテンツとして、漫画アプリでの新着情報や新着漫画を通知するTwitter BOTを開設しており、現在も運用しています(PHP→Node.js)。

漫画アプリの情報サイトを開設

当時、私は人気漫画アプリに熱中していました。そのアプリでは急成長に伴ってユーザーからランキングの基準が不透明であるのではないかという指摘がありました。また、作品が爆発的に増え、どのような作品があるのか分かりにくい状態になっていました。

そこで私は、アプリが使用しているAPIに直接アクセスしてデータを定期的に集計するツール(PHP)を作成し、その結果を自動的に情報サイトに掲載していました。

ユーザーから注目され、一時は月間約2万PVのアクセスがありました。アプリの運営会社にコンタクトを取り、改良して頂けたので現在サイトは閉鎖しています。

学内の組込みシステムを開発するイベントで卓上お掃除ロボットを開発しました。

H8 3052Fマイコンと、TWELITEマイコンを用いた卓上お掃除ロボットを開発しました。

シンプルな機能ですが、無線通信、スイッチや距離センサーの処理、モータードライバやスピーカーアンプの制御、DC-DCコンバータを用いた高電圧化や、回路設計などのノウハウを積むことができました。

機能

  • 卓上のごみ(消しカス等)を吸い取る。
  • リモコンから遠隔操作を行う。
  • 手動走行モード) リモコンからジョイスティックで操作。
  • 自動走行モード) 机から落ちたり、ものに衝突しないようにして動き回る。
  • 音声案内し、だれでも使いやすくわかりやすいものにする。
  • 市販されている電池・ファン・フィルタを利用し、長く使えるようにする。
ふと直感的に学内のファイルシステムに機密性の問題があるのではないかと感じた私は、調査したところ、個人情報が学外に公開されていることを発見し、学校に通報しました。スラドやSecurity NEXTなど一部のメディアにも取り上げられました。
  • 1年生~2年生にかけて、学内のセキュリティリテラシーの低さを目の当たりにし、ふと直感的に機密性の問題があるのではないかと感じた私は、自らファイル管理システムについて調べ、また保存状況などを調査しました。調査したところ、複数の個人情報ファイルが学外にも公開されている状態で保存されていることを発見し、学校に通報しました。
  • 影響が大きかったため学外にも公表され、一部のメディアにも取り上げられました。
  • セキュリティは、組織の信頼に影響する重大な課題であることを再認識させられました。セキュリティの知識を深めようと思ったきっかけとなりました。
少年野球チームの公式サイト兼ブログの構築 / チーム関係者のみ閲覧ができる写真アルバムの構築 / レンタルサーバーの契約 / 資産引き渡し

弟が参加していた少年野球チームにおいて、ライバルチームが相次いで公式ホームページを作成し始めたことを背景に、公式ホームページを作成したいという話が上がりました。当時野球チームでマネージャーをしていた母が受注し、母と共に放課後の時間を使って野球チームの公式サイトを開発しました。

WordPressブログの構築については個人ブログで経験がありましたが、デザインについては、野球チームメンバーの意見をまとめて反映させる必要があり、何度もデザインの変更がありました。他者がかかわるプロジェクトの難しさを感じたことが印象に残っています。

運営期間中にホームページから入部希望の問合せが届き、メンバーを増やすことができました。ホームページ開設による成果が数字として現れ嬉しかったです。

1年間運営後、野球チームの他のITに詳しくない野球チームメンバーに引き継ぎを行いました。ドキュメントを作成したことで、スムーズに引き継ぎを行うことができました。

2020年現在もサイトは変わらず運営されています。

PHP5系、WordPress2系という時代から、現在までWordPressブログを運用

自分が撮影した鉄道写真をシェアすることをきっかけに、ホームページ・ビルダー10を用いてホームページを公開しました。2008年にSeesaaブログに移転し、2009年にレンタルサーバーを借りWordPressでブログを開設しました。

1万PV/月程度の小規模ブログですが、テレビ番組の影響で突然1日で2万以上のアクセスが発生したり、ある日はコメント機能を悪用した大量のスパム攻撃を受けたりしましたが、キャッシュプラグインの適切な設定や、コメントスパム対策が功を奏し、影響がありませんでした。

PHP5系、WordPress2系という時代から、現在まで運用しています。WordPress、プラグインやテーマの脆弱性に関する高頻度な情報収集と、アップデートの適切な管理を行ったことでセキュリティ事故やサイトが落ちてしまうことは一度もありませんでした。PHPのCMSサイトを安定稼働させるノウハウを積むことができました。

現在はGatsbyを用いたSGGサイトにリプレイスすべく、作業をしています。

経歴

  • 2019年

    23歳

    情報処理安全確保支援士 登録

    国家資格の情報処理安全確保支援士に登録しました(第017758号)。
  • 2019年

    23歳

    ソフトウェアハウス企業入社

    趣味で行っていたプログラミングが楽しく、仕事にしたいと思うようになりました。キャリアチェンジをし、IT企業に入社しました。
  • 2019年

    23歳

    機械メーカー退社

    機械メーカーを退社しました。
  • 2017年

    21歳

    機械メーカー入社

    機械メーカーに入社しました。
  • 2017年

    21歳

    東京高専機械工学科卒業

    東京高専機械工学科を卒業しました。
  • 2012年

    16歳

    東京高専機械工学科入学

    鉄道や自動車の生産工場に興味あったことがきっかけで、機械工学の道へ進みました。
  • 2007年

    11歳

    初めてのHP

    ホームページ・ビルダー10 を購入し、DIONのフリースペースにホームページを公開しました。ハーボットが大好きでした。
  • 2003年

    7歳

    初めてのPC

    初めてPCに触れました。ソーテック製のWindows 98 PCです。当時ローマ字が打てなかった影響で、現在もかな入力です。
  • 1996年

    0歳

    誕生

    生まれてすぐに泣き止んだそうです。

OSS

過去の経験やノウハウを詰め込んだウェブサイトです。

設計

  • 高速で安全に閲覧できることを目指し、コンテンツの更新タイミング以外に更新がされないことから、Gatsby.js + Contentful + Amazon CloudFront (Lambda@Edge) + Amazon S3 を用いたJamstack構成としています。
  • コンポーネント指向設計としており、保守性を高めています。

パフォーマンス

  • SSGで構築しており、ビルド後の資産は完全に静的であるため、高速で応答します。
  • インフラには、Amazon CloudFront + Amazon S3を用いており、ユーザーの最寄りデータセンターから転送されるため通信が安定します。
  • cache-control HTTPヘッダーを適切に設定しており、2回目以降に余分なダウンロードを防止したり、逆に古いコンテンツが表示されることを防ぎます。
  • PWA (Progressive Web Application)を設定しており、初回閲覧時にリソースをダンロードし、2回目以降はオフラインでも閲覧することができます。サイトが更新された場合は、自動で更新することで古いコンテンツが表示されることを防ぎます。
  • Lighthouseのベンチマークでスコア100/100を達成しています。

セキュリティ

  • SSGで構築しており、ビルド後の資産は完全に静的であるため、サーバーに関しては安全です。
  • Reactのエスケープを使用しています。
  • Content Security Policy などセキュリティを強化するHTTPヘッダを設定しています。
  • 利用可能な暗号スイートをTLSv1.3とTLSv1.2に限定し、2020年現在判明している脆弱なプロトコルをブロックしています。
  • Mozilla Observatoryのベンチマークでスコア105/100を達成しています。
  • DeepCode、SonarCloudとLGTMを使用し、セキュリティレビューをしています。

アクセシビリティ

  • 文字と背景とのコントラスト比は4.5:1を超えるように設定しています。
  • ダークモードでは、彩度を下げて目に負担がかからないようにしています。
  • キーボードのみで操作できるように設計しています。
  • テキストブラウザや音声ブラウザで使用できるよう、セマンティクスなマークアップで実装しています。
  • axe 及び Lighthouse で検査したところ、アクセシビリティの問題は1つもありません。

DevOps

  • ツールを使用することで、作業の効率を高め、品質を高めています。
  • ポートフォリオは最新のコンテンツを維持し続けることが最も重要であるため、更新作業を省力化することが最も重要だと考えました。そこで、バックエンドはヘッドレスCMSであるContentfulで管理しています。

eact-adminは、React + Redux + Redux-Saga + Material-UI + React-Router + React Final Formを使用した、管理サイトのために設計されたフロントエンドフレームワークです。

このフレームワーク、管理サイトだけでなく、データ中心の会員制のサイトなどにも使えます。

実際に仕事でWebサイトを短納期で作れました。しかし、日本では知名度が低いのか、最新の翻訳ファイルが見つけられませんでした。とてもお世話になっているので、少しでも貢献できれば、、ということで翻訳オブジェクトを公開しました。

1ヶ月2000回以上ダウンロードされているので、責任感を持って維持しています。

GitHub Actionとは、GitHub内で完結するCI / CDツールです。ベータ版利用時からGitHubのみで完結することに感動し、自分でいろいろなActionsを作り、そして捨ててきました。

そのうち、勤務先で需要があったパッケージを1つ公開し、GitHub Marketplaceに公開しています。

機械メーカーに就職しながらも、JavaScriptの勉強のために自分が不便に思っていたサイトの機能を拡張するユーザースクリプトをいくつか公開しました。

今からだと考えられないですが、1つ1つのスクリプトを作成するのに1週間くらいかかっています。

スキル

Front-end Web

HTML
TypeScript
JavaScript
React
Redux
Vue.js
Nuxt.js
jQuery
Lodash
Stylus
Sass
CSS
Bootstrap
Material UI
gulp.js
ESLint
webpack
SPA
SSR
SSG

Back-end Web

Node.js
Python
django
PHP
WordPress
Laravel
CodeIgniter
GO
MariaDB
MySQL
PostgreSQL
SQLite
GraphQL
contentful
CircleCI
GitHub Actions
Apache
Docker
Vagrant
Heroku
AWS
GCP
AutoCAD
SolidWorks
Inventor
Jw_cad
Gコード
EAGLE

資格

主な資格

  • 情報処理安全確保支援士登録 017758号

    2019/04

  • 情報処理安全確保支援士試験 合格

    2018/12

  • 第二種電気工事士

    2018/02

  • 応用情報技術者試験

    2016/12

  • 第一種準中型自動車免許(5t)

    2016/02

  • 基本情報技術者試験

    2015/11

  • ITパスポート試験

    2012/10

その他IT資格

  • ICTプロフィシエンシー検定協会 P検 2級

    2011/03

  • ICTプロフィシエンシー検定協会 P検 準2級

    2010/07

  • ICTプロフィシエンシー検定協会 P検 3級

    2010/04

  • 床上操作式クレーン運転作業者 (5t以上)

    2018/08

  • 玉掛け作業者

    2018/05

  • 日本品質管理学会 品質管理検定3級

    2016/10

お問い合わせ