Webデザイン学科1年生のオンラインでの進級作品展示です。【期間限定:2021年2月4日(木)〜 2月10日(水) 2月12日(金)】※延長しました。

19. WEBメモ

作品概要 #

この作品を作ろうと思ったきっかけはパソコンのメモ帳を使っていたときでした。
パソコンのメモ帳と言えば大体のものが文字をキーボードでタイピングするだけのものですが、手書きでまとめたい。画像を挿入したい。そんな不便さを感じたのでメモ帳を作りたいと思ったのが理由です。
Web上ならどのパソコンからもログインやアプリの必要なく使うことができるため、OneNoteなどよりも手軽で、誰でも利用できるという点も魅力だと思います。
また、この作品制作を通して1年間で学んできた基礎的な部分を復習し、新しい技術を身につけるという目的があります。

プレゼンテーション動画 #

アピールポイント #

一番こだわった所はcanvasに文字を入力する所です。
入力すること自体はfillTextで簡単に実装できたのですが、指定した場所に文字を配置する処理に苦労しました。
元々の案ではcanvasの上と左にレンジスライダーを表示し、それを操作することで座標を指定するという方法でした。
しかしそれではあまりにも扱いづらく、変更することにしました。
どうやって実装できたかというと「描く」ボタンを押すと非表示にされていた2つ目の文字プレビューキャンバスを表示しフォントサイズに合わせて高さを変えた後、マウスカーソルに追従させます。
そこでメインキャンバス上でクリックするとクリックした座標を元に文字が描写されます。

スライド #

制作者 #

  • 松村 拓歩
  • フロントエンドエンジニア志望
  • HTML+CSS、JavaScript
  • アルタ賞、Clap賞、アイ・セプト賞、アクアリング賞

制作者感想 #

今回の進級展制作で感じたのは問題解決の難しさです。
実装したい内容を調べることや、エラーの解消、UIの考察、完成形が決まっているものではなく、1から自分で作る物なのですごく苦労し、多くの時間を使いました。
それと同時に問題が解決した時や、やりたいことができた時の達成感は今までにないものでした。
これからの学生生活でも今回の進級展制作のように学び成長していきたいと思います。

コメント #

作品ならびにプレゼン動画の閲覧ありがとうございました。
さらに学生作品への評価・アドバイス、感想などコメントいただけると、今後の制作、就職活動の励みになります。よろしくお願いいたします。