LoginSignup
4
2

More than 3 years have passed since last update.

コーディング共有Webアプリを作ってみた

Posted at

(1)作成のきっかけ

普段はソーシャルワーカーとして障がいをお持ちの方の支援をしており、たまに簡単なHTMLやCSS,JavaScriptについて教える機会があります。

ブラウザでタグはこのように表示されるとか、ここにclassを設定してとか、基礎的なことぐらいしか教えられないのですが、今までそのような機会がなかった方にとっては、ホームページってこうやって出来ていくんだ!と、試行錯誤しながら自分でも勉強して一緒に学んでいます。

障がいによっては聴覚や発話、コミュニケーションにしんどさがある方もいるので、ひとつの画面を見ながらコードの説明をしたり、エディターの設定をしたりすることがハードルと成りうることもあり、何か良い方法はないかなと考えていました。

ちょうど React か Vue を学びたいと思っていたので、勉強がてら CodePen や JSFiddle のような コード共有サイトのシンプル版を作ってみようと思い作成することにしました。

(2)作成したwebアプリ

SONOCODE

コーディングをリアルタイムで共有することができ、音声チャットやその内容が字幕で表示されます。見た目はまあ CodePen ですね、いままでで完成させたwebアプリは一つだけでして、経験がない中いろいろ苦労しましたが、やはり React の学習が難しく、挫折しそうになりながらも Qiita や StackOverflow で調べ調べしてなんとか形になりました。

(3)使った技術

・React
・CodeMirror
・SkyWay
・Firebase
・Material-UI

その他にも MITライセンス のライブラリやデザインを組み合わせて、それらのおかげでwebアプリっぽくなったかなと思います。

(4)参考にしたサイト

codeshare.io

このようなサイトが作りたかったのです、通信量からビデオは断念しました。

WebRTC Platform SkyWay ハンズオン SFU編

JavaScript で解説されており、とても分かりやすく助かりました。

その他

CodeMirrorについては様々なサイトやサンプルからヒントを得ました。

(5)終わりに

コロナ禍において障がいをお持ちの方の生活も大きく制限されており、何かできることはないかとICTを活用した生活の質向上や業務効率化などを素人ながら福祉の現場で行っています。自分の周りのひとが困っていて必要としている”機能”を作ることは、学びのモチベーションに繋がり自分のためにもなることだと感じており、今後もチャレンジしていきたいと思います。

4
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
4
2