「TimeRain」開発日誌 3-4日目

開発日誌３日目

• 開発環境の整備

  • githubおよびgitをvscodeと接続。
    • 思いつきの変更によって、壊滅的な被害を受けてもひとつ前のヴァージョンに戻す準備。
  • VercelとGitHubを接続
    • ローカルな環境から出れなかったので、サーバーやドメイン、SSlなどについて一旦保留できるようになってうれしい。
    • 一方で、Vscode内のLiveServerという拡張機能は、githubにプッシュしなくても、現時点でどう見えるかがわかるので依然としてテスト用に重宝する。

• 学習メモ

  • gitのコマンド操作が難しくてrebase、force push、detached HEAD、reflog、cherry-pick、vim、amend、履歴再構築などの大量の試練があり、ChatGPTがいなかったらおそらくクリアできなかった。彼がいてなお開発３日目はこれで終わってしまった。
  • randomline.htmlという恣意的なファイル名でつくっていたが、Vercel(だけの話ではなさそう？)はindex.htmlを入口ページとして探すということを知った。

開発日誌４日目

• 画像投稿への対応
  • 画像投稿ができない。

    • まず、画像のみの投稿ができない仕様になっていたので、空のテキスト文でも投稿できるようにGAS上のスクリプトを改変。

    • 画像のみの投稿は、GAS上のappsscript.jsonに必要な権限を追加することで、できるようになったが、サイト上で画像として表示されない。
      

    • googledriveのサムネイルAPIを使用して、画像を投稿する→googledriveに画像をアップロード→サムネイルを引っ張ってきて表示。
  • 新しく投稿した画像は画像として表示されるようになったが、画像のURLを含んだ投稿、画像でないURLを含んだ投稿はどうなるか？
    • Xでは、画像URLは画像が表示されているし、画像出ないリンクもサムネイルが表示されている。あれはすごいことだ。
    • URLからOpen Graph画像を自動取得
      • GASにスクリプトと権限を追加して、一部のリンクについては成功。
      • ここらへんの技術詳細はAI任せであまり、把握していないがXのURLは少し特殊らしくまだ対応できていない。

画像の投稿と画像URLの投稿テストをクリア

非画像のURLについてもopengraphをもつ一部のリンクについてはテストをクリア

では、既存の投稿に含まれたURLについてはどうするか

• ここまででの処理は、新しく投稿したものに対して、画像を画像として表示し、URLについても画像として表示する処理である。
• 過去の投稿については、２つのアプローチが考えられる。
  • 手動でバッチ処理をすること。
    • 現状、リストには、7,000件の投稿が最小限の情報とともにリスト化されているが、AIに書いてもらったバッチ処理を施すスクリプトは、時間がかかる。そのうえ、GASの処理実行は最大6分くらいでタイムアウトしてしまうので、一度にすべてのURLを含む投稿についてバッチ処理を施すことはできない。よって、「手動で」100件ずつくらい処理しないといけないが、面倒だし、これを手動でやるならコーディングしている意味がないようにも感じる。
  • そこで、二つ目のアプローチはサイト上で読み込むときに、バッチ処理を施すこと。
    • 現状は、100件ほどをリストからランダムに取得し、20件ずつ表示するようなシステムにしてある。
    • しかし、100件にバッチ処理を施してから表示するのでは、重すぎる。
    • よって、最初に表示する20件にバッチ処理をしてから表示（URLを含む投稿の割合が多かったとしても、20秒くらい。）
    • 残りの80件ほどに対しては、20件の表示中にバックグラウンドで処理をするようにしてほしかったが、リロードして出てくる次の投稿群はURLのままだったりする。（これが、AIが要件を読み込めず、未実装のままなのか、opengraph画像をもたないリンクなのかは後日コードを直接確認することとする。）
    • とはいえ、一度バッチ処理をしてしまえば、リストのほうにも変更が入るようになったので、開発中だけでも相当な割合のURLが画像として表示されるようになるだろう。

返信に対する返信を実装

• ある投稿へのリプライはできるようになっていたが、リプライへのリプライはなぜかできない仕様になっていた。
• HTMLにおいて、返信した投稿を表示する際に「返信する」ボタンを表示していなかったので、これを修正して解決。

UIの微修正

• 本日は比較のために、claud codeを利用していたが、彼は、ＵＩのデザインがほかのＡＩよりもうまいと聞いたので、ＨＴＭＬファイルについてデザインを改良してもらった。
• 投稿が直線のラインに並ぶのではなく、少し、雨みたいにバラバラに降るようになった。
• 総合的な本日の成果
  
• より視覚的な触発性のあるものになった。

課題

• UIはまだ微妙。返信は返信先の投稿の下に直線的に並ぶが、全体がずれているので少しわかりづらい。
• また、ブラウザから見る限りでは、まだ余白も多いので、もっとマインドマップみたいなノートになるように、横に二列あってもよい気がする。
• Ｘのように、ある投稿をクリックして、拡大表示するみたいなことができない。
• また、新規投稿としての返信はできるが、すでにある投稿への返信であるようなものが、それ単体でしか表示されない。やはりＸのスレッドのように、ある投稿が別の投稿への返信であるときには、それをわかりやすく表示し、それをタップすると、スレッドが現れるという機能を実装したい。
• また、現在は「TimeRain」のプロトタイプとして、わたし個人に部分最適するような開発をしているが、目標としての、各個人向けノートアプリにする場合、データベースなどをどのように実装するかまだ考えていない。

学習メモ

• Xの引用リツイートや、各種URLなどをすべてポスト内の小さな窓にサムネイルのように表示するＵＩは改めてすばらしいものだと思う。
• ＨＴＭＬとJavascriptだけで開発しているので、コードそれ自体はレビュー時に理解できるものが増えたが、APIやバッチ処理などの技術的な詳細についてはほとんどなにもわかっていない。