職業お仕事コーダー

=

趣味生き甲斐・毎日

=

です。

比嘉(ひが) 翼(つばさ) HIGA TSUBASA Frontend Engineer

1992年生まれ、沖縄県育ち、現在大阪暮らし。フリーなフロントエンドエンジニアとしてコーディング案件をメインに行いながら、Web制作・Webサイト運営・ツール制作などの活動を行っています。

MORE

NEW RELEASE 最近のものづくり

NEWS お知らせ

ABOUT 私について

HIGA TSUBAS

Frontend Engineer HIGA TSUBASA

1992年生まれ、沖縄県育ち、現在大阪暮らし。
フリーなフロントエンドエンジニアとしてコーディング案件をメインに行いながら、Web制作・Webサイト運営・ツール制作などの活動を行っています。
最近はめっきりWeb関連の制作活動が多いですが、元々は学生時代から工業系を生きており機械工作から電子工作・Web制作までの幅広い「ものづくり」に興味があります。

TIMELINE

2008/3

中学校を卒業

2009

第二種電気工事士取得、シーケンス制御資格取得

2010

アイデアロボットコンテスト県内優勝(恐らく県記録だったと思います)、全国大会出場

2011/3

沖縄工業高校 電子機械科 卒業

2011/4

沖縄県浦添市 → 千葉県船橋市 引っ越し

2013/3

千葉工業大学 工学部 電気電子情報工学科 中退

2013/3

千葉県船橋市 → 沖縄県宜野湾市 引っ越し

2013/03 - 2015/02

友人からヘルプで誘われたのをきっかけにイベント会社でアルバイト。あらゆる現場を周りながら現場監督をするまでになり、一方では何故か県内のプロバスケットチームの現場ADに任命され別班で県内外の試合に付いて回るというレアな体験をすることに

2015/3 - 2019/5

IT会社でWeb制作ユニットのフロントエンドを担当

2017/09

沖縄県浦添市 → 大阪市中央区 引っ越し(本社異動)

2019/05

丁度4年目の節目で退職し、数ヶ月の間思いっきり休む

2019/08

個人事業主として開業。屋号名をCOFUSとし、大阪を中心にフロントエンド周りでの活動を開始

TIMELINE

POSSIBLE 私が出来ること

  • STATIC 静的サイト構築

    HTML5、またはPHPを用いた静的サイトの制作・構築を行うことが出来ます。

  • DYNAMIC 動的/CMS構築

    CMS、またはPHPを用いた動的サイトの制作・構築を行うことが出来ます。

  • REFACTORING 既存サイト改修

    既存サイトのリニューアル、または改修、ページパフォーマンス調整、コンテンツの追加等を行うことが出来ます。

  • TOOLS ツール制作

    ブラウザ拡張機能を始めとするツール制作などを行うことが出来ます。

  • SITE OPERATION Webサイト運用

    Blogサイトを始めとするWebサイトの運用、レビューコンテンツの制作・各種コラボも行っています。

SKILLSETS 扱える言語・環境

Name

Skill Ability

Years

  • 80%

    HTML5

    Hyper Text Markup Language version5

    10Years

  • 85%

    DartSass

    Script Language / DartSass

    8Years

  • 80%

    CSS

    Cascading Style Sheets

    10Years

  • 60%

    JavaScript

    ES6〜

    7Years

  • 70%

    jQuery

    JavaScript Library

    7Years

  • 60%

    Node.js

    SS Javascript

    4Years

  • 60%

    PHP

    Programming Language

    5Years

  • 80%

    WordPress

    THE CMS

    8Years

  • 80%

    Gulp

    Build System

    7Years

  • 70%

    Git

    GitHub / Gitlab

    8Years

  • 70%

    NPM

    Package Manager

    5Years

  • 90%

    Atom

    Editer

    3Years

  • 80%

    VS CODE

    Editer

    5Years

  • 90%

    Markdown

    Markup Language

    6Years

  • 80%

    PhotoShop

    THE Adobe PhotoShop

    7Years

  • 80%

    XD

    THE Adobe XD

    4Years

  • 60%

    terminal.app

    Bash

    6Years

  • 60%

    TypeScript

    JavaScript With Syntax For Types.

    2Years

WORK 実績一覧 91件
					

現在表示制限中です。全ての実績を確認されたい場合は専用IDとパスワードを発行いたしますのでお気軽にお問い合わせ下さいませ。

  • 嘉宝

    2022.12

    嘉宝

  • Niraikanai

    2022.09

    Niraikanai

  • Chrome拡張機能開発リスト

    2022.03

    Chrome拡張機能開発リスト

  • Chrome拡張機能「Supach Numbering」

    2022.02

    Chrome拡張機能「Supach Numbering」

  • Chrome拡張機能「マネフォSum」

    2022.01

    Chrome拡張機能「マネフォSum」

  • Chrome拡張機能「Amazon定期おトク便の合計金額表示」

    2022.01

    Chrome拡張機能「Amazon定期おトク便の合計金額表示」

  • COFUS 技術ブログリニューアル

    2021.05

    COFUS 技術ブログリニューアル

  • 瀧谷不動明王寺

    2020.12

    瀧谷不動明王寺

  • piiiQcy

    2020.02

    piiiQcy

  • Quicint - EJS Boilerplate

    2019.10

    Quicint - EJS Boilerplate

  • Percolator(Web制作テンプレート)

    2019.07

    Percolator(Web制作テンプレート)

  • Slim Chatwork 公式サイト

    2019.05

    Slim Chatwork 公式サイト

  • Chrome拡張機能「Slim Chatwork」

    2019.04

    Chrome拡張機能「Slim Chatwork」

  • YouTube ScRfixeder

    2017.01

    YouTube ScRfixeder

  • 見え〜るAlt 公式サイト

    2016.12

    見え〜るAlt 公式サイト

  • 見え〜るAlt

    2016.02

    見え〜るAlt

  • degitekunote2

    2011.05

    degitekunote2

嘉宝PCのスクリーンショット画像
嘉宝SPのスクリーンショット画像

https://www.kikumasamune.co.jp/products/kaho/

サイトを見る

嘉宝

LUNCH
2022.12
PERIOD
0.5ヶ月
TECH
TypeScript,DartSass,EJS,Webpack,Gulp
I WORK
  • DIRECTED
  • DESIGN
  • CODING
  • CODING QC
  • MANAGED
  • SALES
  • OPERATION

各所で多数の動画を使用した構成になっており、また動画が商品の世界観を表現する重要な要素となっていることから
できるだけ読み込み速度を含めたページパフォーマンスを下げずに快適に表示が出来るよう工夫しながら実装を行いました。

動画を含めたメディアの数の割には快適なページの表示を行えているかと思います。

また新しい試みとしてはCodespacesを利用し、リアルタイムに細かなチューニングなども行いました。
デザインをFIXとした作りっぱなしではなく、実装後も細部の調整が行えたのは最終的な品質の向上に繋がったと思います。

TAG

サイトを見る
NiraikanaiPCのスクリーンショット画像

https://github.com/TsubasaHiga/niraikanai

サイトを見る

Niraikanai

LUNCH
2022.09
PERIOD
OSSで開発継続中
TECH
Vite,TypeScript
I WORK
  • DIRECTED
  • DESIGN
  • CODING
  • CODING QC
  • MANAGED
  • SALES
  • OPERATION

Vite + Vanilla JSで静的サイトを構築する事を想定したボイラープレートです。

余計な事はしないながらも各種Linter等を標準でインストールしたりと、Viteで静的サイトを構築する際に幸せになれるよう現在OSSで開発継続中です。

TAG

サイトを見る

Chrome拡張機能開発リスト

https://chrome-extensions.cofus.work/
Chrome拡張機能開発リストPCのスクリーンショット画像
Chrome拡張機能開発リストSPのスクリーンショット画像

https://chrome-extensions.cofus.work/

サイトを見る

Chrome拡張機能開発リスト

LUNCH
2022.03
PERIOD
0.5ヶ月
TECH
Next.js,TypeScript,DartSass,Vercel,Adobe XD
I WORK
  • DIRECTED
  • DESIGN
  • CODING
  • CODING QC
  • MANAGED
  • SALES
  • OPERATION

2016年よりちょこちょこと趣味程度のものから少し本腰を入れたものまで様々なChrome拡張機能を制作・リリースしてきましたが、一覧として見ることができるページが無かった為制作に至りました。

毎日決まった時間に各Chromeウェブストア配信ページをスクレイピングし、数値などの各種データを取得した後Vercelにてデプロイする仕組みを実装しています。

TAG

サイトを見る
Chrome拡張機能「Supach Numbering」PCのスクリーンショット画像

https://chrome.google.com/webstore/detail/supach-numbering/eaiacpadbhngcmpkimiapobllfokgoch

サイトを見る

Chrome拡張機能「Supach Numbering」

LUNCH
2022.02
PERIOD
約1週間
TECH
TypeScript,React,Chrome API,Webpack,Material-UI,Adobe XD
I WORK
  • DIRECTED
  • DESIGN
  • CODING
  • CODING QC
  • MANAGED
  • SALES
  • OPERATION

YouTubeのスーパーチャットやコメント欄のUIをカスタマイズすることが出来るChrome拡張機能です。
Live放送を見ている際に「こんな機能があったらいいな」と思った機能を色々と実装しています。

TAG

サイトを見る
Chrome拡張機能「マネフォSum」PCのスクリーンショット画像

https://chrome.google.com/webstore/detail/%E3%83%9E%E3%83%8D%E3%83%95%E3%82%A9sum/pclecdaginjeadjnflmhihgnkoimkdgl

サイトを見る

Chrome拡張機能「マネフォSum」

LUNCH
2022.01
PERIOD
約2日
TECH
TypeScript,React,Chrome API,Webpack,Material-UI,Adobe XD
I WORK
  • DIRECTED
  • DESIGN
  • CODING
  • CODING QC
  • MANAGED
  • SALES
  • OPERATION

長年使用しているMoneyForward MEの家計簿テーブルにて「大項目・中項目」で項目を絞り込む事が多いのですが、その際に絞り込んだ項目だけの合計金額を算出する機能が欲しかったのでChrome拡張機能にて実現してみました。

TAG

サイトを見る
Chrome拡張機能「Amazon定期おトク便の合計金額表示」PCのスクリーンショット画像

https://chrome.google.com/webstore/detail/amazon%E5%AE%9A%E6%9C%9F%E3%81%8A%E3%83%88%E3%82%AF%E4%BE%BF%E3%81%AE%E5%90%88%E8%A8%88%E9%87%91%E9%A1%8D%E8%A1%A8%E7%A4%BA/npipdojmddhaehjoglciocbpengfoipp

サイトを見る

Chrome拡張機能「Amazon定期おトク便の合計金額表示」

LUNCH
2022.01
PERIOD
1日
TECH
TypeScript,React,Chrome API,Webpack,Adobe XD
I WORK
  • DIRECTED
  • DESIGN
  • CODING
  • CODING QC
  • MANAGED
  • SALES
  • OPERATION

Amazon定期おトク便ページ(https://www.amazon.co.jp/auto-deliveries)の各月毎に合計金額が表示されてて欲しいのですが、デフォルトでは表示されないのでChrome拡張機能にて実現してみました。

TAG

サイトを見る

COFUS 技術ブログリニューアル

https://cofus.blog/
COFUS 技術ブログリニューアルPCのスクリーンショット画像
COFUS 技術ブログリニューアルSPのスクリーンショット画像

https://cofus.blog/

サイトを見る

COFUS 技術ブログリニューアル

LUNCH
2021.05
PERIOD
0.5ヶ月
TECH
Next.js,TypeScript,Vercel,DartSass,Webpack,React,Adobe XD
I WORK
  • DIRECTED
  • DESIGN
  • CODING
  • CODING QC
  • MANAGED
  • SALES
  • OPERATION

本サイトの技術ブログ(https://cofus.work/blog/)をNext.jsにて新たにリプレイス&移転した技術ブログです。
デザインから実装、運用まで担当し、Markdownファイルのみで記事を管理する事に特化した構成で制作を行いました。

記事の追加から加筆&修正まで、すべて使い慣れたエディタ+Githubのみの使用で行える特徴があり、技術的な内容を気軽に残しておけるフロントエンドエンジニアとしての知見をまとめる場所として今後も運用を行っていく予定です。

TAG

サイトを見る

瀧谷不動明王寺

https://takidanifudouson.or.jp/
瀧谷不動明王寺PCのスクリーンショット画像
瀧谷不動明王寺SPのスクリーンショット画像

https://takidanifudouson.or.jp/

サイトを見る

瀧谷不動明王寺

LUNCH
2020.12
PERIOD
約2ヶ月
TECH
ES6,WordPress,Webpack,Gulp,DartSass
I WORK
  • DIRECTED
  • DESIGN
  • CODING
  • CODING QC
  • MANAGED
  • SALES
  • OPERATION

縦書きが各所で見られるWebではあまり無い和を存分に感じられるサイトです。コンテンツが非常に多いこともあり、PJAXを組み込みプリフェッチを存分に活用しページパフォーマンスの担保を行いました。
厄年早見表などは自動処理を行い、万一年号が変わった際でも改修すること無く手動で操作が出来る仕組みも取り入れています。
Instagramのデータ取得はアクセス毎ではなく定期取得したデータでキャッシュファイルを生成し、以降はキャッシュファイルから参照する形にすることでページ読み込み速度の担保も行っています。

TAG

サイトを見る
piiiQcyPCのスクリーンショット画像

https://github.com/TsubasaHiga/piiiqcy

サイトを見る

piiiQcy

LUNCH
2020.02
PERIOD
OSSで開発継続中
TECH
Docker,PHP,ES6,DartSass,Webpack,Gulp
I WORK
  • DIRECTED
  • DESIGN
  • CODING
  • CODING QC
  • MANAGED
  • SALES
  • OPERATION

DockerベースのWordPress構築用ボイラープレートです。Makeコマンドで一通り構築が出来るよう仕組みにしており、WordPress構築する際の「面倒」をなるべくブラックボックス化する目標の元制作しています。OSSで開発中。

TAG

サイトを見る

Quicint - EJS Boilerplate

https://github.com/TsubasaHiga/Quicint
Quicint - EJS BoilerplatePCのスクリーンショット画像

https://github.com/TsubasaHiga/Quicint

サイトを見る

Quicint - EJS Boilerplate

LUNCH
2019.10
PERIOD
OSSで開発継続中
TECH
ES6,EJS,Webpack,Gulp
I WORK
  • DIRECTED
  • DESIGN
  • CODING
  • CODING QC
  • MANAGED
  • SALES
  • OPERATION

テンプレートエンジンにEJSを用いたHTML5サイト構築用のボイラープレートです。
静的構築時にメインで使用しているボイラープレートでもあり、知見が溜まった段階で不定期にアップデートしています。
npm(https://www.npmjs.com/package/quicint)でも公開中。

TAG

サイトを見る

Percolator(Web制作テンプレート)

https://github.com/TsubasaHiga/Percolator
Percolator(Web制作テンプレート)PCのスクリーンショット画像

https://github.com/TsubasaHiga/Percolator

サイトを見る

Percolator(Web制作テンプレート)

LUNCH
2019.07
PERIOD
2018年4月〜
TECH
PHP,SCSS,Webpack,JavaScript(ES6),Gulp
I WORK
  • DIRECTED
  • DESIGN
  • CODING
  • CODING QC
  • MANAGED
  • SALES
  • OPERATION

元々制作会社に在籍していた際に社内テンプレートのFork版として2018年4月より開発を開始。
PHPによる一般的な静的サイトを制作する際に私が好んで用いるテンプレートになります。

Fork版からprivateリポジトリ、そしてpublic版として公開し、2019年7月に名称を「Percolator」(読み方:パーコレーター)としてOSSで公開しております。
メンテナンスは私1人で行っております。

時折知見が溜まった際に一気に更新、仕様追加をしていくスタイルでの開発ですのであまり一般受けはしませんが、もしよければミニマムなWebサイト制作などで使って頂けると嬉しいです。

LicenceはMITです。

TAG

サイトを見る
Slim Chatwork 公式サイトPCのスクリーンショット画像

https://cofus.work/chrome-extensions/slim-chatwork/

サイトを見る

Slim Chatwork 公式サイト

LUNCH
2019.05
PERIOD
11日
TECH
PHP,SCSS,Gulp,json,JavaScript(ES6),Webpack
I WORK
  • DIRECTED
  • DESIGN
  • CODING
  • CODING QC
  • MANAGED
  • SALES
  • OPERATION

Chrome拡張機能「Slim Chatwork」の公式サイトということで、製品自体の名前にも入っている「Slim」を意識したデザインにしてみました。
製品の「操作感」「機能面」「更新情報」の3点に絞った情報を全面的に押し、公式サイトとして必要最低限の情報のみをピックアップした構成にしています。

TAG

サイトを見る
Chrome拡張機能「Slim Chatwork」PCのスクリーンショット画像

https://chrome.google.com/webstore/detail/slim-chatwork/hckmjlnhaeikfnmmfjniechjanhhfnjh

サイトを見る

Chrome拡張機能「Slim Chatwork」

LUNCH
2019.04
PERIOD
19日
TECH
HTML5,JavaScript(ES6),SCSS,Webpack,Gulp,json
I WORK
  • DIRECTED
  • DESIGN
  • CODING
  • CODING QC
  • MANAGED
  • SALES
  • OPERATION

個人的にどうしてもChatwork(Web版)のUIを調整したい部分があったのでChrome拡張機能として制作。
特に不満もなく長い間個人的に使用していましたが、私と同じ様に調整したい方もいるのでは?と思い重い腰を上げて一般化してみました。
インストールすることでポップアップUIから簡単にChatworkのUIをポチポチ調整することが出来ます。

AWARDS and TOOKUP

2019/05
Chatworkをスリム化するChrome拡張機能「Slim Chatwork」をリリースしたので宣伝と小話を
2021/03
拡張機能をきっかけに株式会社Chatwork様とのオンライン交流を実施

TAG

サイトを見る

YouTube ScRfixeder

YouTube ScRfixederPCのスクリーンショット画像
公開終了もしくは非公開案件です

YouTube ScRfixeder

LUNCH
2017.01
PERIOD
1日
TECH
jQuery,HTML5,CSS
I WORK
  • DIRECTED
  • DESIGN
  • CODING
  • CODING QC
  • MANAGED
  • SALES
  • OPERATION

YouTubeの動画再生ページ内にてスクロールをしても動画スクリーンを固定してくれるChrome拡張機能として制作。
あったら良いなと思ったので制作し、しばらく便利に利用しておりました。
動作イメージ:GIFアニメーション

↑このアニメーションを作ったのも良かったのか、公開早々に多くの方にインストール頂きました。

ただ度重なるYouTubeの仕様変更に対応できずVer0.1.2で更新停止。
そのまま放っておいたらいつの間にか多くのBAD評価が付いてしまった為公開を停止しました。(心無い罵倒コメント攻撃を受けた初めての体験でもありました)
公開停止:2019/06/10

またいつか暇な時があれば再公開するかも?...

TAG

公開終了もしくは非公開案件です

見え〜るAlt 公式サイト

http://degitekunote.com/chrome-extensions/mierualt/
見え〜るAlt 公式サイトPCのスクリーンショット画像

http://degitekunote.com/chrome-extensions/mierualt/

サイトを見る

見え〜るAlt 公式サイト

LUNCH
2016.12
PERIOD
数日
TECH
Gulp,jQuery,PHP,SCSS
I WORK
  • DIRECTED
  • DESIGN
  • CODING
  • CODING QC
  • MANAGED
  • SALES
  • OPERATION

見え〜るAltの公式サイト。

職場で使用していた見え〜るAltが割と好評でしたので、一般化バージョン「Ver0.7.1」のリリースと同時に公式サイトも準備しました。

特にブランディングもなく、またフロントエンドとしての実績が無い頃の制作物ですのでかなり質素かつシンプルですが、主要機能の1つにホワイトリスト機能があったためその真理値表等の機能面の使用方法にフォーカスして制作しました。

TAG

サイトを見る
見え〜るAltPCのスクリーンショット画像

https://chrome.google.com/webstore/detail/%E8%A6%8B%E3%81%88%E3%80%9C%E3%82%8Balt/gkpbonkmpkgkjdaffjecchbephmjmekj

サイトを見る

見え〜るAlt

LUNCH
2016.02
PERIOD
1ヶ月
TECH
CSS,jQuery,HTML5
I WORK
  • DIRECTED
  • DESIGN
  • CODING
  • CODING QC
  • MANAGED
  • SALES
  • OPERATION

当時のお仕事にてAltを大量に確認しないといけない状況になり、1つ1つソースコードで確認は嫌だし、既存のツールは微妙だし、、では作ってしまおうという事で制作したのが「見え〜るAlt」。

初めての自作Chrome拡張機能でした。

Altが画面上に表示される以外の機能は一切ないなんとも割り切ったものでしたが、当時の私&同僚としては画期的だったホワイトリスト機能が備わっており、特定のドメイン配下でのみ自動で表示する事が可能でした。

既に同様の既存ツールは幾つかありましたが、一々ボタンをクリックする必要があったり、またON・OFFの為にボタンをクリックするこの動作が作業のロスタイムの原因としてありました。

見え〜るAltでは特定のドメインを予め登録することでAltチェックが必要なページのみ自動で表示、不要なページ、Altが表示されて欲しくないページでは無効化が簡単に出来たことから作業効率化ができ、社内では割と好評でした。

TAG

サイトを見る

degitekunote2

http://degitekunote.com/
degitekunote2PCのスクリーンショット画像
degitekunote2SPのスクリーンショット画像

http://degitekunote.com/

サイトを見る

degitekunote2

LUNCH
2011.05
PERIOD
1日
TECH
WordPress,SCSS,jQuery,PHP
I WORK
  • DIRECTED
  • DESIGN
  • CODING
  • CODING QC
  • MANAGED
  • SALES
  • OPERATION

今年で8周年目を迎える個人ブログ「degitekunote2」です。

元々無料ブログサービス「FC2ブログ」で2011年5月から2014年2月まで運営していましたが、独自ドメインを取得しWordPressへ以降しました。

「初のWebサイト制作はどれか?」と聞かれたら私の場合はこのブログになります。またこのブログがキッカケと言ってもいいほど様々な事が学べ、また現在進行系でWebのアレコレを体感しながら吸収しております。

FC2ブログの時代は複数あるテーマから選んだデザインを当て、徐々にカスタマイズを行い、最終的にはこの様なデザインになりました。http://degiteku.blog.fc2.com/

そしてWordPressへ移行し、初期の頃は既存のテーマを用い運営。徐々にカスタマイズを行い、暫くすると完全オリジナルデザインのテーマに変わっていきました。それから何度もデザインが変わり、徐々にコンテンツの中身も充実し(本当かな笑)、企業様から直接製品レビュー依頼を受ける事も出てきました。

最近は専ら更新が止まっておりますが、現在密かに完全リニューアルを行っている最中で今年夏頃には復活する予定です。
これからも可能な限り続けていきます!

TAG

サイトを見る

BLOG 最新記事

全ての記事を見る BLOG一覧ページへ

CONTACT お問い合わせ

ChatworkTwitterからのお問い合わせもお待ちしております!

SEND COMPLETELY ^^

お問い合わせありがとうございました。
後ほど内容を確認した上で頂きましたメールアドレス宛へご連絡させて頂きます。
なお、お急ぎの場合はお手数おかけしますがChatwork、またはTwitterの方でもご連絡頂けますと優先して確認を行わさせて頂きます。

Opps.. i screwed up! (T_T)

申し訳ありません。
当サイトの技術側の問題により正常にお問い合わせ送信が完了出来ませんでした。
お急ぎの場合はお手数おかけしますがChatwork、またはTwitterよりお問い合わせをお願いいたします。

  • 名前

  • ふりがな

  • E-MAIL

  • 種類

  • 会社名/組織名

  • 住所

  • お問い合わせ内容