今回は「GithubのHTMLをダウンロードせずにプレビューするアプリ」作ってみた!! です
私の業務効率化だけのために作ったと言っても過言ではないので、興味ない方はページをそっと閉じていただければと存じます ＜m(__)m＞
画面
【使い方は簡単】
画面内にテキストボックスに「Github上に置いてある”HTMLファイル”のアドレスを入力し、
HTML/CSS/JavaScriptがレンダリング実行されている状態をブラウザで表示できます。
※JSフレームワーク等は動作ません
【以下サイトリンク】
https://github-html-view.azurewebsites.net/
ことのはじまり
大学のプログラミング授業でGithubに課題を提出してもらうことに決めました。
【実際にやってみた】
１つのリポジトリに十数回分の課題提出が入ります。
【困ったことが】
毎回、授業の最初に講評するのですが、毎回ダウンロード、全ての課題がダウンロードされる。
大学のPCなので毎回ZIPをダウンロードして展開し、HTMLをブラウザで開き、講評する。
※４０名弱、４０回！！ こりゃ大変だ・・・・。。時間もかかる。
【効率よく講評するには... と考え出す】
GithubでHTMLを表示する設定を全員に覚えて貰えばいい！？ → 全員覚えるのはどうだろうか・・・。ただでさえ、プログラミングに苦手意識がある学生も少なからずいるわけだもんな〜と悩んでいると、、、
”TAからGithubのURLを入力したら見れるのあったら便利ですよね〜”とご意見いただき、
”なるほど...作るか...”、学生の負担が増えるのは好ましくないと思ってたので、この方法が良いかな〜と思ったのが作るきっかけでした。
このアプリを使う人の想定（超ニッチ！！）
- 大学等のWeb（JavaScript含む）課題をGithubに提出してもらっている先生
- 他・・・？いない？
なんと、使うの自分だけだ・・・
それでいいんです。プログラミングはツールです。
何かを作るためにある。
今回の問題解決は「私の業務の効率化！！」それで良いではないか！
エンジニアは作れるから業務効率化できるんですよね～ホント良かった。
失敗は？
あります！！それはちょっとだけデザイン頑張ったところです。トップページの。
※CSS苦手なのに。そこが時間かかりました！！
使い方と作った経緯もYoutubeに載せてあります。
ご興味湧いた人は、是非見ていただければ嬉しいです。
【Github-HTML-Viewerの解説動画】
[「GithubのHTML/CSSをブラウザで簡単表示確認！」ありそうで無かったアプリを作った！]
以上