アフィリエイト広告を利用しています

2024年04月05日

粛々と『Tasting Note』のアップデートに努めています。

おはようございます、こんにちは、こんばんは、コーヒー好き見習いプログラマーのアキラです。今日は、アップデート作業中の『Tasting Note』WEBアプリについて語ろうと思います。


coffeeworld


最終目標は、Cup of Excellence

先ほど、申し上げた通り、現在、アップデート作業の真っ只中です。アップデートの内容は


  • 削除機能を個別削除から複数同時削除
  • create時に、グループ作成機能
  • グループ分けして作成したデータのダウンロード機能

上記3つの機能の予定で、削除機能は、複数削除を作成しており、あとは、グループ作成とダウンロード機能かなと思います。この3つのアップデートを終えると、僕の目標の一つである『 Cup of Excellence 』へと近づくことができます。


Cup of Excellence 』とはなんぞ?と思いでしょう。簡単に説明しますと、その年に取れた「コーヒー豆」の質を評価する大会みたいなもので、一応世界規模の大会になり、毎年行われています。僕が、目標として『 Cup of Excellence 』を指したのは、この大会で使用される専用の評価シート(項目など)をベースとしてこのアプリを開発してからです。最終的には、アプリで入力したデータを、「大会で使用される専用の評価シート」内の各項目に入力された状態で、ダウンロードもしくは、印刷などを行えるようにすることなのです。


cupping-image.jpg


これは、前に話したかもしれませんが、『 Cup of Excellence 』などで行われる評価する際は、僕の知る限り手書きで、専用評価シートに記述しているはずです(※僕が確認した時は、数年前の画像や動画などなので、2024年現在は、違っているかもしれません。)


別に、大会で使ってほしいとかは思ってはいませんが、少しでも、知って使ってほしいとは思っています。どうせ作るなら、ちゃんと作りたいと思い作っていますが、まぁ、このレベルのアプリ開発じたい初めてでしたので、『Tasting Note』のプログラムをみたらぐちゃぐちゃかもしれませんがね。


22613908_s.jpg

あとは、表示方向などが、縦方向から横方向などに変更したり(PC時のみ)、スマホ表示では、スクロールして作成したデータが見れるようにするつもりです。


今回のアップデートが完了しても完璧ではなく、このアップデートが終わったら、SNS認証システムなどとまだまだ、終わりが見えませんからねwww


今日のところは、ここら辺で、アップデートをお楽しみ!じゃぁ、またね


DragonImage.png

2024年03月30日

新しいアプリを考案中。アプリ名は『Roaster』(仮)です。

アプリ名は『Roaster』(仮)。


おはようございます、こんにちは、こんばんは、コーヒー好き見習いプログラマーのアキラです。今日は、最近、頭の中で考案中のアプリがあるので、それを発表しようかなと思います。タイトルにもある通り名前は『Roaster』(ロースター)というアプリ名で、コーヒーを焙煎するときなどに付けるアプリになる予定です。今回は、WEBアプリではなく、スマホアプリの予定で、使用する言語などやフレームワークなども少しずつ決まりつつあります。



現時点では、使用言語: TypeScript 、フレームワーク: React Native で、まだ、どういうのライブラリーなどが必要かを調べている途中です。最終的には、Google StoreやApple Storeなどにも出したいとも考えています。今回も、開発期間がかなり長くなりそうで、使用言語の TypeScript とフレームワークの React Native は、使ったことがないので、学ぶところからのスタートになります。それも、開発のパソコンは、Macで行う予定です。


DragonImage.png

『Roaster』というアプリ

『Roaster』というアプリの名前の由来はいうまでもなく、コーヒー豆を焙煎するときに付けるアプリなので、『Roaster』と名付けました。まだ、仮の名前なので、変わるかもしれませんが、僕的には良い名前だなと思っています。

前回開発したアプリの『Tasting Note』は、焙煎後の豆の質などを評価するアプリなので、どうせなら、焙煎した時の状況なども付けれたらよいと思い、開発しようと考案したということです。


僕が焙煎をするときは、手焙煎でしかも外で行うので、その時の焙煎環境は、結構重要だったりします。極端にいえば、夏の暑い時と冬の寒い時で行う焙煎は、時間のかかり方が倍近くになる時もあります。時間をかけないように気を付けても、さすが、風や外気温はコントロールできませんからね。高機能の焙煎機などだったら、データ化できるのもありそうですが、僕みたいなアマチュアは、そんな高機能な焙煎機は買えないので、高くても数万円、安いので数千円ぐらいの焙煎機でしょう。ついでに、僕のは、2000円ぐらいでネットで購入した焙煎機、というかコーヒー豆焙煎専用のフライパン?です。 ※一応、伝えますがデータ化できる焙煎機があるかは知りませんよwww。


DragonImage.png

僕の開発するときの原動力は、面白うそうや楽しそうといったものなので、使えそうとか売れそうとかじゃないです。基本に、自分が作ってみたく面白うそうが原点ですから、あとは、知らんという感じですwww

まだ、アプリの構想段階なので、開発に取り掛かるのは、しばらく先になりそうですがね。今日は、この辺で、またね。


2024年03月23日

『Tasting Note』アプリに新たな機能を追加することを画策中


おはようございます、こんにちは、こんばんは、コーヒー好き見習いプログラマーのアキラです。今日は、先日、開発したアプリ『Tasting Note』に新たな機能を追加しようと考えているということの報告になるブログ記事です。


作成したデータを転送してみたいなぁ〜


新たなに追加予定の機能は、データ変換とデータ転送の機能です。いわゆる、エクセルやワードなどのような機能などに追加したり、CSVファイルに変更し、別の用途に使ったりするための機能を追加を追加する予定です。これは、データとして各自で保存したり、複数人などで、データを共有したりするためにと前々から考えていた機能です。


前に、ようやく土台ができたと言っていたと思いますが、このデータ転送などの機能をはじめとした、様々を追加することができるので、ようやく土台ができたと言ったのです。


最終的には、スマホアプリまで考えていて、現在、スマホアプリを実現するために色々と調べています。


僕が、参考にしているアプリは、WEBアプリの『notion』です。このアプリは、パソコンだけでなく、スマホにもアプリを提供しているメモ取りアプリで、僕が、考えているアプリの構想にもっとも近いアプリなのです。


まぁ、最終的な完成は、パズルのような感じで、使う機能組み合わせて追加し、自分だけのコーヒーノートを作れるみたいなアプリを目指しているので、この機能は、その一歩になります。


色々と構想は浮かぶのですが、それを実現できるほどの技術と知識、なによりも経験もないので、どうしても手探りみたいな感じになり、基本的な作業ペースもそれほど速くもできず、完成は、いつになることやらという感じですがねwww


ぶっちゃけて言うとゼロベースで開発せずとも、ノーコードもしくは、ローコードのアプリを使えば、開発をした現段階での『Tasting Note』アプリを再現できそうですが、それはしたくはないのです。ゼロから開発しないと、アプリの裏側だったり、開発をするための知識や技術も身につかないと考えています。


遠回りすぎな感じではありますが、しょうがないですね。性分みたな感じなので、突き詰めないと気が済まないというかなんというか。



初めての方もいらっしゃると思いますので、僕が開発したアプリの簡易版がありますので、ぜひお試しください。一部を埋め込んでいますので、直接操作ができると思いますが、操作できなかった時のために、リンクも作成しています。



お知らせ

色々と諸事情により、開発アプリを使えなくしています。現在は、消去しています。


↓リンク先は、こちらからどうぞ↓
Tasting Note-free


というわけで、今回は、『Tasting Note』に新たな機能を追加する予定という報告でした。今日は、この辺でじゃぁね。


2024年03月08日

コーヒーアプリ『TastingNote』が完成しました。


おはようございます、こんにちは、こんばんは、コーヒー好き見習いプログラマーのアキラです。今日は、前々から開発していたアプリが完成しましたので、その報告と機能などの紹介をしようと思います。


開発期間1年以上の初アプリが完成!


開発したアプリの名前は『TastingNote』、このアプリはコーヒー豆の状態の良し悪しを決めるときに行う”Tasting”を記録するアプリになります。


僕みたいなアマチュアなコーヒー好きはあまり行わないですが、コーヒーの問屋や販売などをしたりするプロの人達が必ず行うであろう”Tasting”に目をつけたアプリになります。なので、とてもニッチな方たちに向けたアプリになります。


説明は、ともかくとりあえずアプリのURLを載せますので、一度ご覧になってください。ログイン・ログアウト/アカウント登録・削除などをつけてますので、気にせず使用できるのおもいます。


お知らせ

色々と諸事情により、開発アプリを使えなくしています。現在は、消去しています。



それでも、登録したりするのが嫌な人がいらっしゃると思いますので、お試しで使用する方は以下をアドレスとパスワードをお使いください。


  • アドレス: sample@gmail.com
  • パスワード: 1111

次に、使用したフレームワークなどの説明いたします。


  • フレームワーク:Next.js(Reactベースのフレームワーク)
  • データベース:MongoDB Atlas
  • ホスティング先:Netlify
  • 言語:JavaScript・Node.js

正直、こういう時どういうことを紹介すればよいかわからないので、簡易的な機能紹介になりました。慣れた人なら、もっとうまく書けるかもしれませんね。


開発期間は、構想の段階からなら1年半近く、デザインの段階からなら1年とかかっています。以前にもアプリが完成したといっていましたが、そのときのアプリと今回のアプリは同じで、そんなに大きく変わっていません。多少のスタイル変更などはしています。変わった点は、中身です。


前回、完成したと言ったときは、『Next.js』のPagesRouterを使用していまして、今回のアプリは、同じ『Next.js』のAppRouterに切り替えています。変更した理由は、将来的なことを踏まえると『Next.js』の最新機能で作成していたほうが後々に便利だろうと考えた結果になります。それと、公式でも新しく『Next.js』を覚えるならAppRouterからという文言を見かけたというのも理由です。


先ほどから完成とは言っていますが、この完成とは僕の考えている 完成という”ライン” を超えたから完成と一応いっているだけで、実は色々と付けたい機能などもあります。


僕的には、ようやく土台ができたなという感じで、ようやく色々と開発が出来そうです。SNS認証システム、印刷機能、ワードやエクセルの変換などとまだまだ出てきますが、今日はやめときます。とりあえず、次は、SNS認証システムの構築と追加ですかね。前々から思っていた通りに作れず後回しにしていた機能なので、次はこれに取り掛かりたいと思います。今日はこの辺で、ぜひ開発したアプリ 『TastingNote』 見てくださるとうれしいです。
では、またね。


アプリとお試し用向けのアドレスとパスワード


2024年02月22日

Cookieってなんだろう?よく見るけども…


おはようございます、こんにちは、こんばんは、コーヒー好き見習いプログラマーのアキラです。今日は、ここ最近、アプリ開発やWeb制作はもちろん、サイト閲覧などでも見たりするCookie(クッキー)についてのお話をしようと思います。サイト閲覧時などに、よく表示され選択を迫ってくるアレです。僕もプログラマーの端くれですから多少は知っていますが、なんとなくでしか知らなく、いままで開発や製作などでも触ることがなかったので、調べることもなかったのですが、最近アプリ開発で、Cookieの設定が必要とわかり調べているので、僕みたいな端くれの中の端くれみたいなプログラマーさんに向けてお話をしようかなと思い記事を作りましたので、どうぞ最後まで読んでください。


DragonImage.png


Cookieは、食べ物じゃぁないですよ。食べれないですよ


皆さん、最初Cookieって聞いたとき何は思い浮かべましたか?
僕は、一番最初のころは、あのクッキーを思い浮かべましたwww「プログラマーに食べ物と関係が?」と頭の中では ”?” が飛び交っていたのを覚えています。その時は、まだ、プログラマーになりたいと思っていた時期でもあったので、今以上に知識が乏しかった時期でした。


それからは、多少見ることもあるので、ちょっと調べたこともありましたが、一般人の知識に毛が生えた程度で、自称ではあるもののプログラマーの端くれとして、お恥ずかしいかぎりです。


で、改めて調べるにあたってやはりここで活躍するのは、みんなの味方 ”AI” ですね。最近は、Googleの ”Gemini” を使っているので、 ”Gemini” に聞いてみましたwww


DragonImage.png


Cookieとは?

Cookie(クッキー)とは、Webサイトがあなたのスマホやパソコンに保存する小さなテキストファイルです。名前の通り、お菓子のクッキーと形が似ていることから名付けられました。


Cookieの役割

Cookieは、主に以下の役割を担っているとか...


  1. ログイン状態の維持:ログインしたWebサイトを再度訪問した際に、自動的にログイン状態を維持することができます。毎回ユーザー名やパスワードを入力する必要がなくなり、スムーズにサイトを利用できます。

  2. 閲覧履歴の記録:閲覧した商品やページなどの履歴を保存することで、ユーザーにとってのおすすめ商品や情報を表示することができます。

  3. 広告の配信:ユーザーの興味や関心に合わせた広告を表示するために、閲覧履歴などの情報が利用されます。

  4. 統計情報の収集:Webサイトのアクセス状況などを統計的に分析するために利用されます。

Cookieの種類

Cookieには、主に以下の種類があるらしい。


  • セッションCookie: ブラウザを閉じると消去される一時的なCookieです。ログイン状態の維持などに利用されます

  • パーシステントCookie: ブラウザを閉じてからも一定期間保存されるCookieです。閲覧履歴などの情報を保存するために利用されます。


Cookieの設定

Cookieは、ブラウザの設定で有効・無効を切り替えることができます。ただし、Cookieを無効にすると、ログイン状態が維持されないなど、一部の機能が利用できなくなる場合があります。


Cookieの安全性

Cookieは、基本的に安全な技術です。しかし、悪意のある第三者によってCookie情報が悪用される可能性もゼロではありません。そのため、信頼できるWebサイトからのCookieのみを受け入れるように設定することをおすすめします。


Cookieのまとめ

Cookieは、Webサイトを快適に利用するために役立つ技術です。Cookieの仕組みや役割を理解し、適切に設定することで、より安全にWebサイトを利用することができます。


とここまで僕が ”Gemini” に聞いた回答になります。しかし、疑問に思っている人もまだまだいることでしょう。それは、『Cookieって許可してもいいものなの?』ということではないでしょうか?そのことについてもお話しします。


DragonImage.png


Cookieの許可・不許可について...


Cookieを許可するとすでにログインしているサイトに自動でログインしてくれたり、ユーザーの興味ありそうなコンテンツや広告を表示したり、パフォーマンスの向上などが上げれます。しかし、物事には、当然デメリットもあります。許可にすることでのデメリットを上げるなら、プライバシーの懸念、追跡、ターゲティング広告などがあります。プライバシーの懸念は、そのままの意味で許可したWEBサイトが悪意のあるサイトだったら、プライバシーが相手側に収集される恐れがあるということです。追跡は、ユーザーのオンラインでの動きを追跡されるということ、ターゲティング広告とは、先ほど触れた『ユーザーの興味ありそうなコンテンツや広告』を表示してくることです。これが、大まかなCookieの許可のメリットとデメリットになります。


パフォーマンスや自動ログインなどはなくてもいい、プライバシーが大事という方もいるでしょうが、Webサイトの中にはCookieを不許可にすると不便になるサイトもあるそうです。僕が参考にしたサイト『 しむぐらし 』曰くその典型なのは、『Amazon』になります。


『Amazon』を利用したことのある方は大勢いらっしゃると思います。その『Amazon』でもCookieが採用されており、一度でも『Amazon』を利用しログインした後に、再度『Amazon』を利用するために、訪れたときに自動でログインしてくれていることはありませんか?あれもCookieの恩恵の一つですし、そのログイン者の閲覧履歴や買い物などを追跡や興味ありそうな商品などを表示などもその恩恵です。『Amazon』の注文履歴をクリックすると以前の注文した商品などを表示してくれるのも恩恵の一つだとか、Cookieをオフにして『Amazon』を利用するとログインはされておらず、『Amazon』のトップ画面に表示される商品は万人受けの商品画面で、これまでの買い物の情報は反映されないそうです。また、『Amazon』の注文履歴をクリックすると「Cookieを設定してください」というメッセージが表示されるそうです。こんな状態で買い物は不便ですし難しいですね。



さらに、FacebookやX(旧Twitter)などでも一定期間ログインが継続されますが、あれもその恩恵なので結構あちらこちらに使われているのがわかりますね。さらに、分かりやすいのが、Googleの検索時に以前検索したワードの履歴が表示されますがあれもCookieの力で、Cookieをオフすると検索候補として急上昇ワードが表示されます。


ここまでくるとCookieがいかに身近な存在かが分かりますね。僕自身もこの記事を書くにあたり改めて調べなおしてるので、驚いているところです。


いま、アプリ開発で”Cookie”を扱っているので重要性に気が付いてよかった思っています。それに、全部が全部許可するとそれこそプライバシーにかかわってくるので、必要なのは、そのWebサイトは自分にとって必要か不必要か、悪意があるのかなどの見極める力が大切だと感じ、皆さんもこの知識を知っててほしいところですね。


今日は、Cookieについてのお話でプログラマーだけのことでなく全ての人にかかってくるお話しなどで自分としてはこういうことがないが切り調べようとは思わないので逆にこの機会に感謝ですね。ということで今日はこの辺でじゃぁね。


DragonImage.png





2024年02月02日

デプロイ先は、「Netlify」に決まりました。


おはようございます、こんにちは、こんばんは、コーヒー好き見習いプログラマーのアキラです。今日は、「vercel」でデプロイするとCRUD操作しても更新されない問題で、デプロイ先を変更するとお伝えしてた件についてお話しようと思います。


DragonImage.png

紆余曲折ありましたが…


デプロイ先は『Netlify』に決まり、CRUD操作などの動作確認も済みアップロードに成功いたしました。
で、『Netlify』にデプロイした時に発生していた”強制遷移によるループエラー”問題も無事解決し、晴れてアップロードしたというわけです。
初めて、ここに訪れた方は分けがわからないと思うので、さっと今までの経緯についてお話をします。

僕は、ここ1年間近く、初めてのアプリ開発してました、
デザインや機能などを自分で決めてようやくアプリ完成目前かと息巻いていた時に、エラーが発生しました。
それは、僕が、当初からデプロイ先にしていた「vercel」にて起きたことです。
その起きたエラーとは、CRUD操作をアプリ内でしても、アプリ上のフロント画面では、更新されない問題でした。その問題は、アプリのフロント画面上でのみ起きる問題で、データベース側の保存先ではちゃんと更新されているということで、ずっと対処に困っていました。
で、今回僕が対処したことは、デプロイ先を変更するということです。

で、

そのデプロイ先が『Netlify』に決まったということなんですね。


たかだか、デプロイ先が決まっただけで大げさかもしれませんね。


DragonImage.png


デプロイ変更するにあたり「vercel」の次の候補は『firebase』でした。

なので、『firebase』を使用するにあたり、必要なfirebaseツールをアプリフォルダー内にインポートしようとおもっていたのですが、

なぜか、そのfirebaseツールをインポートしようとしても、インポートエラーを起こして先に進めませんでした。
これでは、デプロイじたいができないと思い、色々と対処したのですが、結局諦め次の候補へと移りました。
で、次の候補にと、『Netlify』が候補に上げていたのですが、

実は、『Netlify』にデプロイしても、『Netlify』したときにだけ起きていたエラーがありました。
デプロイ候補にと『firebase』を候補に上げる以前に、一度、試しに『Netlify』にデプロイしたときにこのエラー”強制遷移によるループエラー”が判明していたので、
上記二つ(「vercel」と『firebase』)が無理そうだったら”強制遷移によるループエラー”を対処してデプロイを成功させようと思っていました。

それがあったので『firebase』が、2番目の候補としてあげていたのですが、

こうなったら、そのエラーを対処するしかないというわけで、発生していた”強制遷移によるループエラー”の原因を究明し対処したというわけです。



上記の説明じゃ分かりずらいので、各デプロイ候補で起きていたエラーをまとめてみました。


  1. vercel:CRUD操作をしても、アプリ内では更新がされていない。
  2. firebase:ツールのインポートエラーが起きてデプロイできない。
  3. Netlify:CRUD操作は問題がないが、一部のページで”強制遷移によるループエラー”が発生していた。

みたいな感じで、各デプロイ候補で、エラーが発生しており、今週中に上記3つのエラーが対処できなければ他のデプロイ先に変更予定だったのですが、対処出来て良かったです。



対処が出来たことは嬉しいのですが、「vercel」で発生していたエラーと「firebase」で起きたインポートエラーは、解決しておらずそのままです。こういった問題は、いつか再びぶつかる可能性があるので、今のうちに対処したかったのですが、いまは、アプリ完成が先ですかね


DragonImage.png

完璧ではありませんが…


完璧とまではいきませんが、ここで、アプリをお披露目?しますね、と言っても以前にも一度紹介したアプリですので、真新しいところは、ほとんどありませんけどもね。


このアプリで、SNSなどを用いた認証システムを設けるため、ログインとサインアップページに各SNSのボタンがあると思いますが、そちらは使用できません。
ので、メール等とパスワードによる認証になります。
ですから、お試しように、こちらのメールアドレスとパスワードをお使いください。


お知らせ

色々と諸事情により、開発アプリを使えなくしています。現在は、消去しています。


TastingNote-img.jpg


  • ユーザー名: サンプル
  • メールアドレス: sample@gmail.com
  • パスワード: 1111



ログインやサインアップページなどは、変わっているかもしれませんが、他はほとんどかわってません。
大きく変わった点は、このアプリを最初開発してた当時は、Next.jsのPagesRouterという機能を同じNext.jsのAppRouterという機能に変更した点になります。
同じNext.jsではあるのですが、フォルダーやファイルの名称、階層構造や使えていたコードなどが使えなくなったりと大きく変わっており、見た目の変更はほとんどありません。


一応、僕がnotionというアプリでつけた1月での予定スケジュールでは、来月から次のアプリなどに、取り掛かる予定ではあり、この期間中の予定は、予備日として設けていました。この予備日は、エラー対処などで、ずれ込むようなことがあった時のために設けており、スケジュール内では間に合ったといいたいのですが、自分が頭の中で、考えていたスケジュールと比較するとずいぶんとずれ込んだ結果になりました。僕が頭の中で考えていたスケジュールでは、SNSの認証も設けて、ソート機能や一覧ページの見易さ改善などを終わっている予定ではありましたが、なかなかうまくいきませんね。


けど、アプリのデプロイなどの公開も済んだので、及第点といったとところになります。


及第点とはいえ、自分が理想としていた部分までは、終わらせられなかったので引き続き残りの課題である。


  • 各ページの見易さ改善
  • ログインユーザーのみのデータを出力させる
  • SNS認証システムの付与
  • ソート機能の付与
  • ページネーションorインフィニティスクロール機能の付与

などなど、自分が、考えていた最低限の付与する予定の機能になります。
本当は、おいおい印刷機能だったりエクセルなどのデータ化だったりと追加したい機能は、結構あるのですが、それは、上記の機能が付与できてから考えようと思います。
あまり、語りすぎてしまうと長くなりそうなので、今日のところはここら辺にします。
とりあえず、「TastingNote」アプリバージョン2のアップロードしたので、試しにお使いください。
最後に、「TastingNote」アプリは、メールアドレスとパスワードなどの登録があります。上記のsampleのメールアドレスとパスワードをご使用ください。登録されているメールアドレスになりますので、ログインページにて、入力するとお使いいただけます。
ぜひ、よろしくお願いします。では、またね。


DragonImage.png

2024年01月27日

できた、できたと言っていたアプリについて喋りますよ


おはようございます、こんにちは、こんばんは、コーヒー好き見習いプログラマーのアキラです。今日は、いま現在のアプリ開発状況などについてお話ししようと思います。
たしか、何週間か前に、残り10%ぐらいで、100%だと豪語していたと思いますが、すみません、まだ、まだ10%ぐらいです。
思っていた以上に面倒くさいことになっていて、苦戦しています。

なので、

今日は、そのことについてのお話と思ってください。
どうぞ〜


DragonImage.png

キャッシュって面倒くさいよね


先ほど、面倒くさいことになっていると言いましたが、その答えがタイトルにあります。それは、『キャッシュ』についてです。
『キャッシュ』とはなんぞ?
思っている方もいるのではないでしょうか?
恥ずかしながら、僕も、プログラマーを目指す前までは、どういうもので、どういった意味があるのかを専門的には知りませんでした。
ですから、先に『キャッシュ』について、お話ししてから本題にはいりましょう。
先に言っておきますが、ここでの『キャッシュ』は、”現金”という意味ではありませんよwww


DragonImage.png

キャッシュってなんだろう?


調べるのも、面倒くさいので、ここは、やっぱり『AI』先生に聞くことにしましたよ


問:プログラミングやITにおいてのキャッシュとは、どういう意味でしょうか

↑上が、僕が聞いた問いで、↓下が、その答えになります。


答:キャッシュ(cache)とは、コンピューターシステムやプログラミングにおいて、データを一時的に保存することで、高速なデータへのアクセスを可能にする仕組みのことを指します。具体的には、低速な記憶装置や伝送路から読み出したデータのうち、直近に読み込んだものや使用頻度が高いものを高速な記憶装置に複製しておくこと。

例えば、ウェブブラウザのキャッシュは、1度開いたウェブページのデータを保存しておいて、次に同じページを開くときに素早く表示させる仕組みです。このように、キャッシュはデータの読み込みを高速化したり、伝送量を削減することができます。ただし、キャッシュにより一時的に保存されるデータが膨大になれば、パソコンやスマホの容量を消費してしまうというデメリットもあります。また、キャッシュは必要に応じて削除することも可能です。これらの特性から、キャッシュはコンピューターシステムのパフォーマンス向上に大いに寄与します。

『キャッシュ』の重要性がよく分かりますよね。

けど、今回は、この『キャッシュ』があることで、問題が発生したんですよね〜


DragonImage.png

『vercel』と『mongoose』


では、本題です。今回問題が起きたのは、『mongoose』(マングース)といわれるMongoDBオブジェクトモデリングといわれるシステムです。MongoDBとは、データベースと一種で、”スケーラビリティと柔軟性を備えたクラウド分散データベース”といわれており、NoSQLデータベースの一つでもあります。ついでに、SQLデータベースには、 MySQLやPostgreSQLなどがありますよ。


DragonImage.png

ちょっと、話しがそれましたが、僕が、アプリ開発に使用しているデータベースは、『MongoDB』で、作成したデータベース操作に必要なのが、『mongoose』なのです。
『mongoose』の中に、"Model.find()"という機能のがあり、これは、作成したデータベースの中から、検索をかける機能を持っており、これが、問題の原因ということが判明しました。
"Model.find()"は、特に検索ワードなどの引数を記述せず、()の中身を空白にすれば、指定したデータベースのドキュメントの全てを取得できるという特性を持っています。

作成したデータベースのドキュメント全てを取得したいとき、そのデータベースを指定すれば全てのドキュメントを取得できます。しかし、今回の問題の原因になりますが、この"Model.find()"は、デフォルトで、キャッシュを使う仕様になって、使用していた当初は、知りませんでした。


mongodb-mysql.jpg


ローカル環境の時では、特に問題がなくアプリが動きますが、デプロイ時に提供されるURL先では、"Model.find()"を使ったページだけ更新されないということに陥っていました。

更新されるのは、新しくコードを記述しビルド時の更新時だけ、最新のデータベースに切り替わるという状態です。
つまり、データベース操作の基本である、『CRUD』新規: Create、読み込み: Read、編集: Update、削除: Delete、の操作をしても、画面上では以前のままで、更新できないということです。
アプリ内で、新規作成を行っても作成されず、既存のデータを編集しても更新されず、削除しても削除されないということがずっと起きています。
しかしながら、この現象は、画面上のみで、実際の保存先であるデータベース内では、ちゃんと更新ができており、とても、面倒くさいことになっていました。
色々と調べた結果、キャッシュに問題があるのではないかと結論づけ、その方向で問題に取り組んでいました。
が、問題は、なかなか解決できませんでした。
最初は、ブラウザのキャッシュかと思い、強制的にクリアにしてみたり、『キャッシュ』対策用のコードに書き換えてみたり、考え付く限り実践しても解決にはいたらず、頭を抱えていました。
そんな時、『mongoose』の"Model.find()"の部分に、着目しました。
実は、"Model.find()"の他にも、"Model.findOne()"という特定ドキュメントを検索する機能も『mongoose』にはあり、僕が、作成しているアプリの削除と編集は、一つだけのドキュメントを使う仕様なので、必然と、検索するデータ(ドキュメント)が一つのみなりますので、"Model.findOne()"を使っていました。

"Model.findOne()"を使用したページに限り、最新データに更新されていて、"Model.find()"といった全てを検索し取得するページに限り更新されないということに着目しました。

そこで、色々調べた結果、最初に言ったのですが、"Model.find()"に限れば『mongoose』の『キャッシュ』から取得していたということに気が付きました。


DragonImage.png

『Nelify』を試したが…


そこからが、簡単で…というわけにいかず、『mongoose』自体に、キャッシュ操作を行う仕様ではないので、調べると『mongoose』のキャッシュに対して操作を行える機能を発見した、が、それ自体が古く『mongoose』のバージョンを大幅にダウンさせないと使えなかったので、却下いたしました。
結局どういう対策を行うかというと、とても簡単で、「デプロイ先、変えればいいやん。」です。
いままでのデプロイ先は、『vercel』というWebサービスを用いていたのですが、「そもそも、デプロイ先変えてみたらどうなるの?」という疑問が生まれ、とりあえず、僕が知っているWebサービスの一つ『Nelify』にて、再デプロイを行い、そっちのURLで試すと問題が解決したのです。
「よし、そっちに変更だ!」と思ったのですが、
また、問題が、『Nelify』で起きました。
それは、延々と続く強制読み込みのループになります。
どういうことかといいますと
僕の開発したアプリは、登録しログインした者でないで、強制的にログイン画面に転移するようにしています。
URL入力によってログインせずにアプリを操作させないためです。
しかし、その”強制的にログイン画面に転移するように”したことがループの原因となっており、なぜか『Nelify』の方では、これが問題となっている模様です。
実際、『Nelify』を試すときは、ログイン画面転移機能は、切った状態で行いました。


DragonImage.png

終わりが見えてきたが、実際は...


壁が立ちはだかり、乗り越えてもまた、壁が立ちはだかるという状態…
『どうしようwww』ここまでくると笑うしかありません。
さーて、来週からの解決方法?


  1. 他のデプロイ先を探す!
  2. 『Nelify』で問題を解決!
  3. いやいや、男なら黙って『vercel』で問題を解決!

の三本になります。あるアニメからの文言を使ってみたものの、問題は解決しないので、順番に上から行い、解決できた方法をとろうと思っているところです。


そもそも、『vercel』チョイスした理由は、僕が開発しているアプリに使用しているのが、Next.jsというReactベースフレームワークになり、そのNext.jsと親和性が高そうだったという理由な上、僕が参考にしているデジタル書籍の中でも使っていたこともあり、チョイスしたということです。ぶっちゃけ、みんな使っているなら、これでいいよね。みたいな感じでつかったので、来週からは、とりあえず、他のデプロイ先を探してみるつもりです。


まぁ、これが、現状の報告とこれからの報告になります。再び、予定がずれそうな予感がしますが、結果報告は、また、来週ということで、またね。


DragonImage.png

2024年01月05日

新年が明けましたよ。おめでとうです


DragonImage.png

新年が明けましたね。


明けましておめでとうございます。今年もよろしくお願いします。

で、僕は、コーヒー好き見習いプログラマーのアキラといいいますので、初めての人は覚えてくださいね。

今日は、新年一発目ということでブログをアップいたしました。
とりあえず、最初は、今年の目標などや次に開発したいアプリについて少しだけ話そうかと思います。

僕の今年の目標は、
『BLOGを使用し、積極的に行動をする』です。
今年の目標の意図としては、去年の大半はアプリ開発オンリーで、ブログ更新をあまりしていませんでした。
アプリ開発だけをするのじゃなく、もっと外に向けていろいろ発信していきたいと考えています。
発信をするとは言っても、なにをすればよいかわからない部分もあるので、手探り状態とはなりますね。



次に、アプリになりますが、現在開発中のアプリは、今月中にでも完成させたいと思っています。ぶっちゃけ先月からもう少しで「完成、完成」といっていますが、データベース関連の作業があり、そちらをクリアしたらゴールラインに到達する感じになりますね。現段階でも、アプリとしては機能しますが、実は、アプリ上で作成したアイテムデータとユーザーデータの保存場所がそれぞれ違うという現状です。

アイテムデータは、MongoDB Atlas内に保管され、ユーザーデータは、clerk.com内に保管されています。このようになったのは、認証システムをclerk.comに依存しているので、そのようになりました。僕的には一括管理したいと考えていますので、この段階ではありますが、データベース編集となりました。

その次ですが、このアプリ開発がひと段落したら、次のアプリ開発に以降しようと考えています。
一応、次のアプリ開発のアプリ名を上げるなら『時間スケジュール管理アプリ(仮)』とでもいいましょうか、僕の考えている内容や構想をアプリ名にとりあえずしてみました。
その名の通り、時間と行動などを管理するアプリですが、いわゆる一般的なスケジュール管理アプリとは違うとだけいいます。
頭の中に、構想などをすでにあるので、言語化しようと思えばできなくもないですが、あんまり言ってもつまらないので、今日はこの辺にしときます。
今年中には、二つ目のアプリを完成というところまでいきたいと思っています。僕の場合、後からいろいろなことを思いつくことが多々ありますので、二つ目からは、完成をさせることを一番にしようと思います。

そんなわけで、今年の目標と今年のアプリ開発についてでしたが、今年も焦らず進もうと思っています。
今年は、なるべく、多くブログを更新したいと考えています、去年は、アプリ開発だけで、ほとんど更新しませんでしたからね。

DragonImage.png


終わる前に、一つだけ。


最後に、一つだけ、元旦から悲しいニュースが飛び交うばかりで、とてもツライ気持ちになります。
暗いニュースばかりだけではないのですが、どうしてもそちらの方が強すぎてしまいますね。

けど、そんなことばっかりも言ってられませんので、以下のリンクを貼り付けます。

『テレビ朝日 ドラえもん募金 令和6年能登半島地震による被災者支援』
『石川県公式サイトより、令和6年能登半島地震に係る災害義援金の受付について』
上記のリンク先は、見ての通りテレビ朝日のドラえもん募金のページと石川県の公式サイトのページを貼り付けていますので、募金される方は、よろしくです。
僕にできそうなことがこれぐらいかと思いましたので、募金先のURLを貼り付けました。
僕の記憶している限りじゃ、災害に乗じて詐欺なども聞き耳したことがあるので、一番有名そうなドラえもん募金と石川県の公式サイトから募金専用ページをチョイスした次第です。上記のリンクをクリックすれば、専用サイトにいけますが、一応検索方法を載せます。


テレビ朝日 ドラえもん募金検索方法


検索からアクセス(スマートフォン)することもでき、
「ドラえもん募金」と検索して、「テレビ朝日 ドラえもん募金」を選択、下をスクロールするとスマートフォンから募金するとありますので、そちらで募金ができます。
この募金方法は、docomo、au、ソフトバンクの人だけですが、一番簡単そうな方法でしたので選びました。

あと、念のため、フェイクサイトといった詐欺も横行しそうなので、このような方法の場合は、URLの確認もしたほうがいいかなと思います。
テレビ朝日のURLは、次のようになってるので、参考までにどうぞ〔 https://www.tv-asahi.co.jp



石川県公式サイトでの募金方法


石川県の公式サイトでの募金方法ですが、上記のリンクをクリックしたらすぐにわかりますが、口座振り込みとなっています。
口座振込という形ですので、振込という手間はありますが、docomo、au、ソフトバンク以外の人でもこれならできると思います。
上記の他にも、いろいろな募金方法があると思いますので、検索してみるのもいいかもしれませんね。しかし、詐欺的なサイトもあるかもしれませんので、お気を付けください。では、この辺で、またね。


DragonImage.png


2023年12月28日

アプリ完成?アプリの開発状況...


おはようございます、こんにちは、こんばんは、コーヒー好き見習いプログラマーのアキラです。ようやく、完成の兆しが見え「ゴール」間近になってきたので、近況報告をしたいと思います。


DragonImage.png


アプリ完成率90%




あと残り10%で、アプリ100%!
どこかで、聞いたことのありそうな言い回しです。

とりあえず、アプリについての説明と開発時に使用したフレームワークなどを紹介したいと思います。
説明なんていいよ、アプリを見せろと言われそうなので、下記にて開発したアプリ『Testing Note』のURLを貼り付けておきます。
ついでに、デプロイ先は「Vercel」を活用しました。
あと補足ですが、使用するにあたりGoogleやGithubなどを活用して認証し、サインインしなければ使用できませんのでご了承下さい。まだ補足がありました、このアプリは、コーヒーをテイスティングする際に使用するニッチなアプリですので再びご了承ください。

とここで、アプリのリンクを貼りたかったのですが、先ほどアプリを調べるとなぜか、うまく新規作成・削除・編集などがうまく機能しておらず調査中です。昨日の時点では、機能の点検をしつつ改善点を探しながらコーディングをしてテストしていたので、うまくいかないのがわからずしばらくおまちください。


DragonImage.png


では説明に入るとしましょう。
使用言語はJavaScriptで、フレームワークはNext.jsのApp Routerを使用しています。データベースはMongoDBで、認証システムなどはClerk(Clerk.com)を活用しています。

Next.jsとはReactベースのフレームワークで、

MongoDBとは、大容量データの保存に強さを発揮する無料オープンソース非リレーショナルデータベースシステムのことで、

Clerk(Clerk.com)というのは、ユーザー管理と認証に特化したプラットフォームのことです。

さらに、Next.jsには現在二つのシステムがあり、「Pages Router」と「App Router」で、それぞれ違いがあります。
バージョン13より「App Router」というシステム機能が追加されました。

実は当初、僕は「Pages Router」のほうでアプリを開発していました。
9月ごろには、「Pages Router」を使用したデモアプリが完成していましたが、
Next.jsの公式では、新しくNext.jsを扱うなら「App Router」を推奨されており、なんとなく今後「Pages Router」から「App Router」に完全移行するのか?と思ってしまい、

どうせなら新機能である「App Router」で再開発しようと至り9月以降ずっと作業を行ってきました。
ぶっちゃけ舐めていた部分があったので、すぐにできるでしょうと思っていたのですが、思いのほか苦戦しました。
「App Router」では、「Pages Router」で使用していた機能などが一部使えなくなっていたり「Pages Router」とでは大きくシステムが変わっていたのもあって、慣れるまでに苦労しました。
DragonImage.png


少し話がずれますが、この時に感じたのは、コンピュータという大きなカテゴリーで学ぶ必要性を感じました。

僕が今まで学んでいたのは表面上での知識で、なんでこんな動きをするのかとか、どうしてこの機能はここでは使えないのかとか、なんとなくで触っていました。

いままでは、フロントエンドをメインに作業をしていたので、バックエンド側の知識がほぼなく、あってもphpを動かす程度でしたので、知識がないといってもいいくらいでした。

なので、特にJavaScriptといったフロントエンドなどで使用される言語を、ずっと触ってきたせいかバックエンドの重要性に気が付きませんでした。

バックエンドを軽視していたわけでないのですが、今ではバックエンドの大切さを身に染みて感じています。
なんとなくですが、少しだけ見習いプログラマーとして成長できた気がしています。

話を戻しますがそんなこんなでようなく完成間近にたどり着いたわけです。

あとは、サインアップ時のデータベースへのユーザー登録と他人のデータが表示されるうえに、削除・編集・閲覧がだれでもできてしまう問題です。いまは、サインアップ時のデータベースへのユーザー登録を行うコーディング作業を行っています。

本当は、まだまだ改善しなくてはいけない場所が多々ありますが、先ほど問題箇所をクリアできればアプリとしては完成といったところになります。


今週で、今年も終わるのでどこまで出来るかわかりません。
僕は、頑張るという言葉が嫌いなので、この言葉を使って締めくくります。
来年こそは、アプリ開発に向けて、『勇往邁進』いたしますですw

かっこよく締めくくったところで、では来年会いましょう。

DragonImage.png




2023年11月06日

アプリ開発経過報告〜〜この間の続き!

やっぱり、甘く見てはいけないプログラミング



coffee.jpg


おはようございます、見習いプログラマーアキラです。

今日は、前回からの経過報告を行おうと思います。

とりあえず、現状の報告を致しましょう。

現状は、CRUD操作関連のコードが記述し終わり、最終調整に入ったところです。

一通り操作したがぎりでは、CRUD操作に問題はありませんでしたので、最終調整に入りました。
CRUD操作関連のコーディングの最後は、UPDATE関連のコーディングです。ようやく、AppRouterについて理解し始めたところだったので、そんなに難しくないだろうと考えていましたが、現実は、甘くはありませんでした。
UPDATE関する一連の動作じたいは、問題なく解決出来ましたが、なぜか更新後のデータが格納されるはずのapiエンドポイントに格納されずに、そのまま更新前のデータが読み込まれるという問題が発生いたしました。

サーバーコンポーネントやクライアントコンポーネントの概念があるAppRouterでは、PagesRouterでの記述方法が通用しない場合がありますので、コードの書き間違えなどがないのか関連するファイル周りをチェックしていったり、更新後のデータを送信する

周りや受信するapiエンドポイント側などのチェックだったりしていましたが、一向に修正箇所がわかりませんでした。

送信する直前まではデータが存在するが、受信したらデータがない…もう訳が分かりませんでした。

そんなとき、ふとデータが格納されるばずの場所に、記載されていたテキスト”Readable Stream”に着目しました。本来ならデータ情報のみが記載されるので気にはなってたのですが、勝手に問題ないと思いスルーしていました。

そこで、データが格納されるばずの場所に、データの変わりに記載されていたのテキスト”Readable Stream”をコピーし、chatGPTで調べることにいたしました。
その結果分かったのが、”Readable Stream”が原因で、読み込まれなかったということが分かりました。
なので、”Readable Stream”を適切に読み込むようにコーディング(これも、chatGPTで調べました)するとちゃんとデータの更新ができるようになっていたのです。
エラー箇所が、見える範囲にあったのに、そこに気がつかず10日間も四苦八苦していました。
おそらく、普通の人なら質問をして解決するのでしょうが、僕の場合は、解決までの過程も重要視していますし、理解することや検索能力?、chatGPTなどの適切な使用による解決方法などを強化のためにも、なるべく人には聞かないということにしています。

まぁ、そもそも聞く人がほとんどいないというのが本音ですが(笑)
coffeeworld

これで、すべてのCRUD操作関連のコードは完了!

と思ったのですが、とある問題が未解決のままでした。
それは、CRUD操作後のデータ更新にありました。

通常、CRUD操作後は、更新後の値にデータが書き換えられるはずですが、なぜか更新前の値のままで、手動で再読み込みを実施しないとデータ更新が行われないという問題です。

CRUD操作関連のコーディングを行っていたときから、気になってはいました。
正直、『なんとかなるんちゃう?』みたいな考え方だったので、後回しにしていました。

なので、現在は、その画面更新が手動という問題に取り組んでおり、調査&検索中です。
一応、今回は、PagesRouterからAppRouterへのシステム機能変更作業ですので、画面更新問題が解決してようやく先に進めるという話しになるんですけどね。

とりあえず、目先の目標として画面更新問題からのシステム機能変更作業完了ですので、もう少しではあります。

まだまだ、完成には程遠いですが、定期的に更新しお知らせいたしますので、温かい目で見守ってくださると嬉しいです。
では、今日はこの辺でじゃね。

0_1-テクスチャ.jpg



検索
プロフィール
アキラさんの画像
アキラ
どーもアキラです。 コーヒーのまだ見ぬ世界をご紹介します。 自称コーヒー大好きです。そして、エンジニアになるべく、日々勉強中、これからは、そういったお話もできたらと思っています。
最新記事
写真ギャラリー
カテゴリーアーカイブ
アキラのひとりごと あきらのポートフォリオ
Mobilize your Site
スマートフォン版を閲覧 | PC版を閲覧
Share by: