AIと生きる|おざまさ

・元柔道整復師（整骨院の先生） ・体調不良により引きこもりとなり、プログラミング学習を…

AIと生きる|おざまさ

・元柔道整復師（整骨院の先生） ・体調不良により引きこもりとなり、プログラミング学習を始める ・現在は、療養しながらアプリ開発、生成AIの活用法を探求中
  • 固定された記事

絶望から希望へ~9ヶ月間のプログラミング学習/挑戦と成長~

はじめに　療養中に、プログラム入門書や入門サイトなどを見て学習してきましたが、学習に行き詰まったときに、「どのように対処したのか」、「どのように感じていたのか」など当時の感想を含めて振り返りをすることで、自身の成長を感じ、少しでも自信に繋げることができればいいと考え、備忘録として、2023.4～12の9ヶ月間のプログラミング学習について、内容をまとめてみました。 　体調不良により、社会から取り残された「絶望の淵」に叩き落され、「未来が閉ざされた真っ暗な世界」から、「未来のかた

AIと生きる|おざまさ

    • Flaskで開発したWebアプリをElectronでデスクトップアプリ化 #2

      解決？さんざん悩み、調べ、修正してみましたが、一向に改善されませんでした。 「Windows Copilot」にも何度も質問をしてきました。 詳細情報のWebページを確認したところ、「Electron」自体のエラーである可能性に行き着きました。 タイトルを翻訳すると、 「入力ボックスは呼び出し後にフォーカスを失う」 となっており、解決策は見出されていないそうです。 ユーザーには説明書きを添えて対応することにします。 今日の体調 今日は天候不順（低気圧）と昨日との寒暖差

      AIと生きる|おざまさ

      • Flaskで開発したWebアプリをElectronでデスクトップアプリ化 #1

        Electronを試してみる前回までの記事で生成AIを活用して「Cursor」でWebアプリを開発しました。 そのWebアプリをユーザーのローカル環境で実行したいと考え、調べてみると「Electron」というアプリに行き着きました。 今回は、「Electron」を使って、「Flask」で作成したWebアプリをローカル環境で実行できるデスクトップアプリ化に挑戦していきます。 「Electron」のドキュメントが「Cursor」にあったため（Cursorでは、公式ドキュメントな

        AIと生きる|おざまさ

        • AIと生きる~Cursorでアプリ開発 #12~

          開発の続き前回、新規登録ページを追加して、知識が増えたので他のページも修正してみると書きました。 結果、大幅に改良しました。 当初、「こういう挙動になってほしいな~」と考えていたことに近づけました。 indexページ 「Bootstrap」 ナビゲーションバー　⇒　そのまま 「Card」　⇒　「Accordion-flush」 顧客管理ページ 新規登録　⇒　新規登録ページからのみ 編集・更新のみ実行する仕様に変更 FHメンテナンス管理ページ 今アプリのメイン

          AIと生きる|おざまさ
        • 固定された記事

        絶望から希望へ~9ヶ月間のプログラミング学習/挑戦と成長~

        AIと生きる|おざまさ

          AIと生きる~Cursorでアプリ開発 #11~

          開発の続きJSONの送受信でハマり、Flask公式ドキュメントを再読すると書きました。 以前、Webアプリを作成したときには、公式Tutorial部分を参考に作成し、他の部分は読んでいませんでした。 今回、公式ドキュメントを一読してみて、色々と気づきがありました。 必ずしもJSONで送受信する必要が無いこと app.pyで設定するルーティングについて URLの基本的な仕組み APIについて などなど、Flaskの基本的な部分が理解できていなかったことに気づきました。

          AIと生きる|おざまさ

          AIと生きる~Cursorでアプリ開発 #11~

          AIと生きる|おざまさ

          AIと生きる~Cursorでアプリ開発 #10~

          開発の続き前回の記事で、エラーにハマってしまったと書きました。 それでも、Cursorがもう少しというところまで作成してくれました。 かなりの時間短縮になったことと、知らないライブラリを使用しているので、新しい知識が増えました。 とはいえ、コーディング的にはエラーとはならないものの、実際に意図する処理ができていない状態です。 講師からの提案もあり、基本に立ち返り、「Flask」の公式ドキュメントを再学習することにしました。 昨年作成したFlaskアプリでは、必要な箇所を参照し

          AIと生きる|おざまさ

          AIと生きる~Cursorでアプリ開発 #10~

          AIと生きる|おざまさ

          AIと生きる~Cursorでアプリ開発 #9~

          開発の続き体調不良が続いていたことと、ほぼ完成に思えたアプリを、いざ試してもらうと、「使いにくい」とのクレームが… 自分でも感じていたので、新規顧客情報の登録と、新規メンテナンス情報の登録を、新しくhtmlファイルを作成して、流れで実行できるように修正を加えています。 JSON形式での受け渡しでエラーにハマる 入力フォームから、そのままPOSTで入力値をサーバーに送信するとエラーが出ずにデータベースへの保存ができるのに、JSON形式での受け渡しにすると、 「Content

          AIと生きる|おざまさ

          AIと生きる~Cursorでアプリ開発 #9~

          AIと生きる|おざまさ

          AIと生きる~Cursorでアプリ開発 #8~

          開発の続きここのところ、体調不良が続き、なかなか作業が進みませんでしたが、ついに機能の実装が完了しました！ ここから、使用感を探って微調整して完成になります。 大体の全容をページキャプチャで紹介していきます。 TOPページ アプリを立ち上げて最初に表示されるページには、注意喚起として、 返却日が近いお客様一覧 返却日が過ぎているお客様一覧 を表示するようにしています。 他のページへのリンクは、ナビゲーションバーを設置していますが、各ページの簡単な説明を追加する予定で

          AIと生きる|おざまさ

          AIと生きる~Cursorでアプリ開発 #8~

          AIと生きる|おざまさ

          AIと生きる~Cursorでアプリ開発 #7~

          開発の続きAPIを使い切った後、 リートンやCopilotでコードの提案をしてもらう Cursorに戻ってコーディング でやってましたが、やはり面倒くさい！ ということで、さらに＄10課金しました。 エディタ内で提案してもらえる機能が、もう無しで考えられなくなってしまいました。 と、課金した後で気づきましたが、Cursorの無料枠が30日経過して復活していました！ APIは「LangChain」用に節約して、無料枠で進めていきます。 仕様変更 昨日の作業後に、機能実

          AIと生きる|おざまさ

          AIと生きる~Cursorでアプリ開発 #7~

          AIと生きる|おざまさ

          AIと生きる~Cursorでアプリ開発 #6~

          開発の続きOpenAIのAPIに課金した$10をほぼ使い果たした（残高$0.26）ので、少し手間ですが、「リートンのGPT-4Turbo」や、「Microsoft Copilot」の無料生成AIで開発を進めていきます。APIの残高は、ここぞというときに「GPT-3.5」で活用していきます。 データベースに保存されない原因を探る メンテナンス管理ページの新規登録機能を実装進めています。最後のデータベースへの保存のところで、フォームで取得した値と、テーブルのカラムに保存する値

          AIと生きる|おざまさ

          AIと生きる~Cursorでアプリ開発 #6~

          AIと生きる|おざまさ

          AIと生きる~Cursorでアプリ開発 #5~

          開発の続きhtml表示成功 4つのhtmlファイルの表示ができるまで修正完了しました。 「メンテナンス情報の新規登録」の実装 4つの表示までできたので、メインの「メンテナンス管理ページ」の機能がエラーなく実装できているか動作確認しつつ修正していきます。 このページでやろうとしていることは、 メンテナンス情報の新規登録 新規登録ボタンをクリックしたら顧客検索ボックス表示 顧客検索 顧客検索結果の一覧表示とメンテナンス情報入力フォームの表示 一覧表示から任意のレコ

          AIと生きる|おざまさ

          AIと生きる~Cursorでアプリ開発 #5~

          AIと生きる|おざまさ

          AIと生きる~Cursorでアプリ開発 #4~

          #3では、最初からやり直しをすることになってしまいました。コミット、プッシュでバックアップをしっかり取りつつ、進めていきます。 開発の続きアプリを立ち上げてみる flaskをデバッグモードで立ち上げると、エラーがある場合に下記のようなエラーメッセージが表示されます。 このエラーメッセージをCursorのチャットで確認すると、下記のように改善を提案してくれます。 後は、「エラー表示⇒チャット機能で修正」を繰り返してくと無事に表示できるようになりました。 まずは、合計4

          AIと生きる|おざまさ

          AIと生きる~Cursorでアプリ開発 #4~

          AIと生きる|おざまさ

          AIと生きる~Cursorでアプリ開発 #3~

          「やってもうた！」 昨日、ページ表示までできるようになったと書きましたが、その後、コードを修正したところ、表示エラーとなったため、色々いじりすぎて、どこを追加で修正したかわからなくなっていたので表示できるところまでコードを戻そうと思ったんです… そう、ここでようやく気づきました。 コードのバックアップを取っていなかったんです。 タイトル通り「やってもうた！」です。 昨日は、過集中でやりすぎていたので、「ほどほどにしとけよ」と言われた気がして、作業を中断しました。 前回まで

          AIと生きる|おざまさ

          AIと生きる~Cursorでアプリ開発 #3~

          AIと生きる|おざまさ

          AIと生きる~Cursorでアプリ開発 #2~

          体調不良が続き、作業がなかなか捗りませんが、前回の続きです。 ファイルに修正を加える下記画像は、新規プロジェクトで自動生成されたファイルに追加したい部分に「`ctrl`+`k`」で追加したい内容を伝えたものです。 赤の項目が、修正前のコード 緑の項目が、AIが提案する修正コード このように、ファイルに記載されたコードを確認しつつ、不足部分などを追加していきます（この繰り返し）。 とりあえず、表示ができるところまで来ました。 Javascriptの実行結果が反映されないな

          AIと生きる|おざまさ

          AIと生きる~Cursorでアプリ開発 #2~

          AIと生きる|おざまさ

          AIと生きる~Cursorでアプリ開発 #1~

          無料枠を使い果たしてストップしていた「Cursor」でのアプリ開発を、OpenAIのAPIを契約したので、進めていきます。 Cursorだけで開発を進めるなら、「Cursor PRO」に契約すると、Copilot++（GitHub Copilotのような機能）が使えるのですが、私は、「LangChain」も使用したいので、OpenAIのAPI契約を選択しました（「LangChain」では、GoogleAIのAPIも使用していくつもりです）。 前回のプロジェクトを立ち上げた記

          AIと生きる|おざまさ

          AIと生きる~Cursorでアプリ開発 #1~

          AIと生きる|おざまさ

          AIと生きる~OpenAIとGoogleAIのAPI比較~

          「Cursor」と「LangChain」で作業を継続、学習していくにあたり、APIを使用することになりそうなので、ChatGPTのOpenAIとGeminiのGoogleAIを比較してみました。 料金の比較OpenAIの料金 ※詳しい料金は公式ページを参照してください $$ \begin{array}{l:l:l} モデル & 入力 & 出力 \\ \hline \\GPT- 4\ Turbo & \$0.01 / 1k\ tokens & \$0.03 / 1k\ t

          AIと生きる|おざまさ

          AIと生きる~OpenAIとGoogleAIのAPI比較~

          AIと生きる|おざまさ