scroll

倉地俊輔の ポートフォリオ

倉地俊輔

トライデントコンピュータ専門学校 Webデザイン学科 2年

フロントエンドエンジニアを目指して就活中の19歳です。

趣味

音楽を聴くこと(特に Two Steps From Hell )

得意なこと

JavaScriptを使ったWebアプリケーション制作

持っている主な資格

持っているスキル

制作物

1/7

Flying Start

JavaScriptで作られたWindows風デスクトップ風アプリ

作品の公開ページへ

制作時期:

2020年2月7日にトライデントコンピュータ専門学校で行われた進級制作発表プレゼンで発表したWebアプリです。ライブラリを使わず、素のJavaScriptだけでWindowsのようなウィンドウ操作ができます。

作品のイメージ

2/7

Raction

Webインタラクション専門メディア

作品の公開ページへ

制作時期:

有益なWebインタラクション情報源を目指して、CSSやJavaScriptによるインタラクションの表現方法を記事にするメディアサイトです。

利用の快適さにこだわり、静的サイトとして公開することでページ読み込みを速くしました。トップページにはインクリメンタル全文検索を導入し、アンカーポイントへのスクロールはスムーズにしました。

エンジニアであってもデザイナーであっても"インタラクション"は大切にすべきという信念のもとに、継続的に活動していきます。

作品のイメージ

3/7

逃げろ鍋

コラージュアニメーション作品

作品の公開ページへ

制作時期:

鍋が人から逃げるコラージュアニメーションです。授業の成果物として、起承転結に沿って作りました。素材をごちゃ混ぜにするだけでコラージュらしくなるのが大変面白かったです。

鍋の動きが早くなったらアングルを引く、鍋にまさかの展開が起こったらスローにするなど、理解してもらいやすくするために工夫しました。

作品のイメージ

4/7

SVG rect to path

SVGのrect要素をpathやpolygonに変換

作品の公開ページへ

制作時期:

IllustratorでSVGを出力する場合、長方形はrect要素として出力されます。回転させた場合はtransform属性が付きます。

                    <rect x="387.4" y="332.4" width="4" height="40" transform="translate(-97.1 154.4) rotate(-20)" />
                

この要素のtransformをアニメーションさせる時には、元のtransform属性値を保持しなければなりません。その手間を回避するために、rect要素をtransform属性がいらないpath要素やpolygon要素に変換します。

作品のイメージ

5/7

Can I Use infographics

そのブラウザはどのくらいの機能に対応しているか

作品の公開ページへ

制作時期:

フロントエンドエンジニアの情報源としてよく挙げられる Can I Use 、そのサービスを支えるのはブラウザ関連データが詰まった約2.3MBのJSONファイルであり、GitHub上で公開されています。ローカルに保存したJSONをFetch APIで取得し、D3.jsでデータ解析&グラフ描画をしました。

D3.jsはあくまでもデータ操作ライブラリということで、グラフ描画ライブラリのC3.jsも使おうか考えたのですが、簡単すぎては練習にならないので止めました。

作品のイメージ

6/7

listful

フロントエンドエンジニア向けチートシート

作品の公開ページへ

制作時期:

フロントエンドエンジニアのためのチートシート型技術ブログです。このブログについての計画書は、 Googleドキュメント で見ることができます。

Reactを使うととてつもなく速いページ遷移ができると知り、フレームワークにNext.jsを使いブログを作ってみました。

作品のイメージ

7/7

マナビガモ

後にlistfulとなる、WordPress製のブログです。

作品の公開ページへ

制作時期:

listfulと名前を改める前から、フロントエンド向けチートシートを記事にしようと決めていました。React+Next.jsを使うことになりましたが、またWordPressに戻るかもしれないので、ダミー記事と併せて残しています。

作品のイメージ

お問い合わせ

制作依頼は受け付けておりませんが、その他の用でしたらお気軽にお問い合わせください。