すべてのカテゴリ

皆様こんにちはAI大好きエンジニアです日々膨大な情報を元に何か作れないか試行錯誤の日々を過ごしております。さて、そんな中で「AIの進化速度」について改めて思ったことがあります・・・。進化はえぇぇぇぇぇーーーーよ！取り乱しました。もう、本当に早すぎます。新しいモノや新しい機能が寝て起きたらできているような速度感です。で、今回は実際に私が体験した進化早すぎる件について実例を入れてご紹介します。使用ツールv0v0（ブイゼロ）は、Vercelが開発したAI駆動のUI生成ツールです。主な特徴：1.AIによる自動UI生成: テキストプロンプトを入力するだけで、WebページのUIデザインとそのコードを自動的に生成します。2.最新技術の活用: React、Next.js、Tailwind CSSなど、最新のフロントエンド技術を使用しています。3.直感的な操作: プログラミングの知識が少なくても、直感的に操作できるように設計されています。4.対話型インターフェース: AIと対話しながらUIを生成・修正できるため、リアルタイムでデザインを調整できます。やりたかったことv0で作成したwebツールにCluade 3.5 SonnetのAPIを使って簡単なチャットボットを作成するAPIとは？ソフトウェアやアプリケーション同士が会話するための「共通言語」のようなものです。以下に、APIの概念をより分かりやすく説明します。APIの基本的な役割APIは、異なるプログラムやサービス間で情報をやりとりする際の「通訳」や「仲介者」のような役割を果たします。例：1.あなたがスマートフォンの天気アプリを開く2.アプリが

Firebase で React アプリをホスティングするFirebase のホスティングを利用して、作成した Web ページをインターネットに公開する方法は既に紹介しています。この記事では、React で作成したアプリを Firebase のホスティング機能を利用してインターネットに公開する具体的な方法を紹介しています。npm を利用して、React で開発する場合、「create-react-app」のスクリプトを利用して React のプロジェクトを作成すると、自動的に React のサンプルアプリを作成してくれます。このサンプルアプリには、公開用のイメージを作成するスクリプトが既に用意されているので、このスクリプトを利用して公開用のイメージを作成するだけで、あとは基本的な Firebase の管理コマンドを実行すれば、インターネットに簡単に公開できます。React アプリのサンプルプロジェクトを作成最初に React アプリのサンプルプロジェクト（テンプレート）を作成します。プロジェクトの作成には、「create-react-app」をインストールする必要があります。インストールしていない場合は、最初にインストールを行います。React を利用していろいろなアプリを開発する場合、頻繁に利用するので、システムレベルのインストールをすることをお勧めします。$ sudo npm install -g create-react-app　(*) Windows の場合は「sudo」は不要です。「npm install -g create-react-app」でインストールします。

Django で作成したサイトの公開方法一通り Djang のフレームワークを利用して、Web アプリ・Web サービスを開発する基本的な手順を紹介してきましたので、実際に Django で作成したサイトをインターネットで公開する方法を紹介してみようかと思います。Django で作成したサイトを公開する場合、いろいろな方法があります。自分でサーバーを準備して OS のインストールから、Web サーバー周りの設定をやるとなると、ちょっと複雑です。そこで、今回は簡単にインターネットに公開する方法として、Django をはじめとする、Python を利用した Web ホスティングのサービスを提供しているプロバイダーの一つの「Pythonanywhere」のサービスを利用して、Django のテンプレートのプロジェクトの公開を一通りやってみる事にしました。PythonanywarePythonanywareは名前からもお分かりかと思いますが、Python に特化したサービスを提供しているプロバイダです。サイトは英語のサイトになっています。制限などはありますが、まずは無料で Django の Web アプリを公開することができます。「Beginner（ビギナー）」プランは無料から利用できます。ドメインの変更はできないので、「[username].pythonanywhere.com」にこと英なのとの、アプリは一つだけで利用できる CPU やネットワークのアクセスなどに制限があります。まずは、サービスを作成して公開するという目的ならば十分です。有料プランも５ドルからあるので、利用の目的に応

FirebaseでReact Routerを使うには？FirebaseとReactという組み合わせは、Webアプリ、Webサービスを作る場合よく利用される組み合わせです。 Reactと合わせて利用される機能にReact Router (react-router-dom)があります。これは、React内でページを切り替えるための機能の拡張ですが、実際のWebサイトのページを切り替える感覚で利用できるので便利な機能です。 例えば sv-sw.com/firebase のようにドメインに続いて「firebase」のようにパス（Path）を指定すると、そのページがあるかの様に表示を切り替えてくれる機能です。 Reactのアプリのページは基本的に「１ページ」 よく、１ページアプリとも言われますが、実際にReactが使っているページは、通常は「index.html」だけです。Reactのプログラム内で、「firebase」というページ（のようなもの）を作った場合でも、実際のページは存在しません。 実は、この辺りが、実際にWebサーバーにReactアプリを公開しようとする場合（デプロイする場合）にちょっと混乱する部分です。 Webホスト（サーバー）が管理している「ルーティング」 元々は、Webサイトの全てのHTMLファイルはWebホスティングしているWebサーバーにおいてあって、ブラウザから要求されたファイルをWebホストが提供していました。最近のWebサイトは実際のファイルがない場合も多く、仮想ファイルをサーバーが判断してWebブラウザに提供しています。 サーバー側でのレンダ

FirebaseでVueアプリをデプロイ（公開）する方法FirebaseでVueアプリをデプロイ（公開）する方法 よく利用されているフレームワークのVue(Vue.js)でアプリを開発して、そのアプリをインターネットで公開する方法です！ この記事ではFirebaseのホスティング機能を利用して、Vueで開発したアプリをインターネットで公開する方法を解説しています。 公開するフォルダーを決める！ 何を今更と思われる方もいらっしゃると思いますが、どのフォルダーの中身をインターネットで公開するかを最初に決めます。 候補としては、 ＊Vueのプロジェクトフォルダを使う ＊Firebaseのホスティングで公開する為のフォルダを用意する シンプルなのは、Vueのプロジェクトフォルダーをそのまま公開用にも共用してしまうという方法が一番手間がかかりません。 Firebaseのホスティングで公開する専用のフォルダを用意する場合、開発用のソースコードのフォルダーと公開用のフォルダーを完全に分けて管理できるというメリットがあります。 わたしも、最初は、Vueのプロジェクトフォルダをそのまま利用していました。しかし、デザインを別のプロジェクトで再利用する場合に、Firebaseのプロジェクトも別のプロジェクトになる場合が多くなります。そういう事情もあって、最近は公開は別のフォルダを利用するようにしています。 Vueのプロジェクトフォルダーを使う場合 Vueのプロジェクトフォルダに移動して、Firebaseのホスティングの為の準備を行います。 $ npm install -g fireba

フリーランスエンジニアの桜井隆二です。国分寺市から、スタートアップのシステム開発を支援しています。デプロイ。それは、僕たちエンジニアにとって、コードが現実世界と繋がる、最も緊張感のある瞬間です。そして、僕がフリーランスになって最も「生きた実感」を得る瞬間でもあります。大手SIer時代、基幹系システムのデプロイは一大イベントでした。何段階もの承認、綿密な計画、深夜の作業。それはまるで、巨大な鉄の扉を厳かに開けるような重みがありました。しかし、その先にいるユーザーとの距離は遠く、システムが動いても「世界が動く」感覚はありませんでした。独立後、スタートアップのWebサービス開発支援をするようになり、デプロイは日常の一部となりました。頻繁に行うからこそ、デプロイボタンを押す瞬間の意味が変わりました。それは、「世界が1ミリ動く感覚」です。数時間、あるいは数日かけて実装したフロントエンドの改善が、クリック一つで何千、何万というエンドユーザーの体験をより良いものに変える。バックエンドのAPIの最適化が、企業の業務効率を劇的に改善する。この「1ミリ」の動きこそが、僕が技術と真摯に向き合う理由です。フロントエンドをデプロイすれば、ユーザーの指先のストレスが1ミリ減る。バックエンドをデプロイすれば、データの処理速度が1ミリ速くなる。生成AIを活用した新機能をデプロイすれば、アイデア創出の時間が1ミリ生まれる。この「1ミリの改善」の積み重ねこそが、スタートアップの成長エンジンです。フロントエンドからバックエンドまで全て担当するフルスタックの立場だからこそ、その「1ミリ」が、プロダクト全体に与える影響