ChatGPTとコーディング：HTML読書ビューア・gifアニメコンバータ等
この記事では、ChatGPTを活用して作成したいくつかのWEBツールをご紹介します。
これらのツールは、特にブログ記事の作成をサポートすることを目的としています。例えば、ブラウザで動画をアップロードしてGIFアニメーションを作成するシンプルなツールや、画像を結合するツールです。
これには沿いませんが、ほか埋め込み式のHTML読書ビューアも紹介します。
ちまたには既に優れたツールが多数存在しますが、自分でツールを開発することで、新たな学び、気づきになりますし、カスタマイズの自由度が高いという利点があります。
またちょっと今更ですが、最近これらのプロジェクトにGit管理を導入しました。
以前はGitHubを単なるファイルアップローダとしてしか使っていませんでしたが、Git管理を取り入れることで開発プロセスがより効果的になりました。
Video to GIF Converter
動画ファイルをGIFアニメーションに変換するツールです。
処理には、外部のjavascriptライブラリを使用していますが、全て端末で完結するようになっています。スマホからも使えます。（safariで確認済みです）
②Convert to GIF をクリックします。
③しばらく待つと、下にDownload GIFボタンが出ます。
※大きいファイルやスマホだと時間がかかる場合があります。
GitHubで必要なファイルも作ってもらおう
今回、外部のライブラリも使用しているので、それも踏まえたドキュメント系を作ってもらいます。事前のやりとりで、MITライセンスであることと、GitHubに公開することを連携済みです。
これを、他のファイルを一緒にアップロードします。
すると、以下のようになります。手軽ですね！
https://github.com/tanuu5/VideoConverter
Image Combiner
このツールは、複数の画像を縦や横方向に組み合わせることができます。
主に、比較画像や、横に2枚、3枚並べたいときに使えるツールを想定していました。もちろんスマホからも使えますし、サーバに画像データはアップロードされません。
できたものは、下部のダウンロードを押してGETできます！
こちらは後ほどGitHubにもソースをアップロードします。
もっと良いサービス
作ってから気付きましたが、もっと良いサービスがありました。
得てしてそういうものです🐈
ScriptedScrollReader
結構開発に時間が（今時点で7時間くらい）かかった読書ビューアです。
別に何に使うということも無いですが、なんとなく形になると面白くてすっかり入れ込んでしまいました。
単純に予め所定のフォーマットで埋め込まれたテキストを、縦書き、横書きで表示出来るものです。
オリジナリティーとして、読んでいる現在位置を、端末に保存することができます。HTMLベースのビューアであまり無い機能かと思います。
また、スマホからアクセスした際には、上部のボタンバーが左右にスクロールできる仕様となっています。
ただし、後から気付きましたが、AndroidのChromeを使用した場合、縦画面で期待通り動作しない問題が判明しています。safariだとmacOSも、iOSも問題無い事を確認しましたが、こんなところにOS差分というか、ブラウザ差分があるのかとビックリしました。
（サンプル文はChatGPT作です）
ただし、これも類似のプロジェクトが既にあり、はじめBookViewerという名前で作っていましたが、同名のものがある事が分かってから、急遽名前を変えました。
https://github.com/tanuu5/ScriptedScrollReader
Git管理してみよう
以下、簡単にご紹介です。
（GitHubにあげた時点でgit管理といえばそうですが、こちらで意識的にGit管理をする、という意味合いです。）
Git管理で修正を行うために、視覚的にわかりやすい「Saucetree」を導入しました。
インストールしてGitHubアカウントを設定すると、過去のプロジェクトが確認できます。
今回触りたいプロジェクトをローカルにクローンします。
（以下、違うプロジェクトですが、ScriptedScrollReaderで実施しています。）
サーバ（GitHub）にあるファイルは変わらないです。
後述する「プッシュ」操作をしない限りは大丈夫です。
ローカルにコピーしたら、今回は「Visual Studio Code」で編集します。これは何でも良いです。極端な話、この程度であればメモ帳レベルでも良いでしょう。
変更が発生すると、Saucetreeで以下のように確認することができます。
+の緑が追加されたもので、-の赤が削除されたものです。
ここを見て、意図的では無い修正がされていないかの確認ができますね。
プルしよう
押すたびにちいかわのうさぎの「プルァ」が脳内再生されますが、これでローカルのリポジトリが最新化されます。
複数人で同じプロジェクトに携わる場合は、コミットする前にこの操作を忘れないようにした方が良いでしょう。
ここ上確認はできませんが、左側の青い線がカラフルにカオスになります。可能な限りそうならないようにするためには必要ですね。
コミットしよう
コミットのところに、1がついていますが、ここを押すことでこの1ファイルがコミットされる前段階となります。
プッシュしよう
コミットしても、反映されるわけではありません。プッシュしないとサーバには反映されません。
コメントですが、一応Notionで管理しているので、その番号とタイトルと、具体的に何をやったのかをさらっと書いています。
どこにプッシュするか聞かれますが、今回はmainしかないのでそのままですね。
これで反映されましたね！
余談
最近、Git管理を学び始めたので、上記以外はよく分からないです。
元はコマンドを叩くものだそうですので、そっちもきちんと勉強した方が良いだろうな、とは思います。
しかし、こういったツールを作るのは手軽で良いですね。ちょっと独自の業務仕様で作ったり、そういうのも容易なので便利ですね。
この記事が気に入ったらサポートをしてみませんか？