
<h2>概要</h2>
<p>Amazon.co.jpの商品ページから東京都における図書館の蔵書情報を検索できるChrome拡張機能。</p>
<p>右クリックを押下した際に表示されるポップアップに機能を追加。</p>
<h2>モチベーション</h2>
<ul>
  <li>本が好きで図書館をよく利用するため</li>
  <li>ユーザーが使いやすいように右クリックのメニューに割り当て
    <ul>
      <li>Chromeウィンドウの右上にある拡張機能のエリアは（おま環だけど）散らかっていて機能を探す手間があるから避けた</li>
    </ul>
  </li>
</ul>
<h2>リポジトリ</h2>
<ul>
  <li><a href="https://github.com/benibana2001/benibkex">benibana2001/benibkex</a>
    <ul>
      <li>Chrome 拡張機能本体</li>
    </ul>
  </li>
  <li><a href="https://github.com/benibana2001/bookdata">benibana2001/bookdata</a>
    <ul>
      <li>外部 API（カーリル株式会社による図書館 API）との通信処理にかかる実装</li>
    </ul>
  </li>
</ul>
<h2>使用ライブラリ</h2>
<ul>
  <li>React</li>
  <li>Vite</li>
  <li>BULMA（CSS フレームワーク）</li>
  <li><a href="https://github.com/joaonuno/tree-model-js">joaonuno/tree-model-js</a>
    <ul>
      <li>JavaScriptで木構造のデータを扱いやすくしてくれるライブラリ。</li>
      <li>本拡張機能の一部で階層構造のデータ型を扱いたいケースがあって使用</li>
      <li>便利でした</li>
    </ul>
  </li>
</ul>


Amazon.co.jpの商品ページから東京都における図書館の蔵書情報を検索できるChrome拡張機能

図書館蔵書検索(Chrome拡張機能)


<h2>概要</h2>
<p>Trello を模したタスク管理画面。見積もり機能をもたせている。ドラッグ&#x26;ドロップには<a href="https://github.com/atlassian/react-beautiful-dnd">react-beautiful-dnd</a>を使用。</p>
<ul>
  <li><a href="https://github.com/benibana2001/trelloppoi">GitHub</a></li>
  <li>使用ライブラリ
    <ul>
      <li>react</li>
      <li>ract-beautiful-dnd</li>
    </ul>
  </li>
</ul>
<h2>モチベーション</h2>
<p>Trello を使用しているチームは多くの場合<a href="https://chrome.google.com/webstore/detail/scrum-for-trello/jdbcdblgjdpmfninkoogcfpnkjmndgje?hl=en">ScrumForTrello</a>などの見積もり機能を使っている（と思う）が、Trello デフォルトに見積もり機能があってもいいなじゃないだろうかと思ってデザインした。</p>


Trelloを模したタスク管理画面。見積もり機能をもたせている。

Trelloppoi


<h2>概要</h2>
<p>Elm の学習のために作成した計算機。</p>


Elmの学習のために作成した計算機。

Elm-Kawaii-calculator


<h2>概要</h2>
<p><a href="https://animejs.com/">anime.js</a> を使用して物語形式のアニメーションを作成。</p>
<p>Anime.js は業務でも使用させていただき、また<a href="https://qiita.com/yitora/items/6f4c917437dc36aa1edb">Qiita</a>や<a href="https://toranoana-lab.hatenablog.com/entry/2021/12/05/000500">社内ブログ</a>にも記事を書かせて頂いた。</p>
<p>GitHub: <a href="https://github.com/benibana2001/techDay03">benibana2001/techDay03</a></p>
<h2>使用ライブラリ</h2>
<ul>
  <li>anime.js</li>
  <li>pug</li>
  <li>stylus</li>
</ul>
<h2>モチベーション</h2>
<p>長尺アニメーションをJSで作成する際の状態管理・遷移をうまくやる方法はないかと試行錯誤したところ、anime.jsを使うとアニメーション実行時にPromiseを返してくれることがわかったため実験的に作成した。</p>
<h3>補足</h3>
<p>画像はイラレで作成、また<a href="https://yumenosora.co.jp/tora-lab/character">CHARACTER – 虎の穴ラボ株式会社</a>からお借りした。</p>


anime.jsを使用して物語形式のアニメーションを再生る。

anime.jsを使用した長尺アニメーション


<h2>概要</h2>
<p>CSS の transform プロパティを使用して奥行き方向にカードが回転する表現を行っている。</p>


CSSのtransformプロパティを使用して奥行き方向にカードが回転する表現を行っている。

CSSを使用した3D表現


<h2>概要</h2>
<p>Vue.js で作成した計算機。100vh を高さに設定した際に発生する「URL Bar Resizing」という問題を解決するために調整を行ってる。</p>
<p>GitHub: <a href="https://github.com/benibana2001/kawaii_caluculator">benibana2001/kawaii_caluculator</a></p>
<h3>モチベーション</h3>
<p>親に「お前はどういう仕事をしているんだ？」と聞かれたときに、「Web や開発の知識のない人に説明をするのは難しいなぁ」と思い、説明のために作成した。</p>
<p>計算機の単純なアルゴリズムと UI が説明に適切だと感じて書いた。</p>


Vue.js で作成した計算機。100vh を高さに設定した際に発生する「URL Bar Resizing」という問題を解決するために調整を行ってる。

Kawaii-calculator


<h2>概要</h2>
<p>ユーザーのクリック/タッチに応じてキャラクターが移動・アクションする。ドット絵は <a href="https://www.aseprite.org/">Asperite</a> で作成。</p>
<h2>モチベーション</h2>
<p>JS のクロージャーを使用して実装をしたことがなかったため試しにやってみたらどんな感じになるだろうかと思い実装した。</p>
<p>GitHub: <a href="https://github.com/benibana2001/daily-coding/blob/master/canvas/src/canvases/yasumijikan.js">benibana2001/daily-coding</a></p>
<h2>使用ライブラリ</h2>
<ul>
  <li>babel</li>
  <li>jest</li>
  <li>webpack</li>
</ul>


ユーザーのクリック/タッチに応じてキャラクターが移動・アクションする。ドット絵はAsperiteで作成。

Web標準APIでのキャラ操作


<h2>概要</h2>
<p>HackerNews の API からその日のニュース情報を取得して表示する。</p>


HackerNewsのAPIからその日のニュース情報を取得して表示する。

HackerNewsクローン


<h2>概要</h2>
<p><a href="https://gohugo.io/">Hugo</a>の SSG 機能を使用してブログを作成した。<a href="https://nextjs.org/">Next.js</a>で作成した本ブログに変更の後、更新はしていない。</p>


HugoのSSG機能を使用してブログを作成した。