Webアプリ React(Next.js)でAPIを活用するコンポーネント作成する【JSONPlaceholder】
Reactなどでフロントエンド開発をしているときに、試しにAPIを含む処理を実装したいと思うことは多々あります。しかし都合よくAPIが用意できるとは限りません。そんな時に活躍するフリーのAPIが「JSONPlaceholder」です。
今回はそのAPIを使って、受け取った情報を表示するコンポーネントを試作しました。
Webアプリ
Webアプリ 
Webアプリ 【React】Webカメラのコンポーネントを作る【USBカメラ】
React(Next.js)でWebカメラを使用するアプリを作成しようと思い、コンポーネントの作成をしました。リアルタイムキャプチャと撮影の機能を作成しました。カメラはUSBカメラを使用しています。
Python 【Flask】なぜかデプロイが出来なくなった件と解決方法【ImportError】
Flaskを使用したアプリをDockerコンテナ上でデプロイしようとしたら出来なくなっていて苦労したのでその記録。ログにはImportErrorとなっていました。
Webアプリ 【Docker】Next.jsアプリをコンテナ上で動かす方法【compose】
Dockerコンテナ内でNext.jsのアプリを動かす方法を紹介します。やり方はいくつかありますが、ここではdocker composeでDockerfileを使用します。
Webアプリ 【JavaScript】カメラをブラウザ上で動かす方法【再生・停止・一時停止】
本記事ではHTMLとJavaScriptを使用して、USBカメラからの映像をブラウザに画面表示する方法を紹介します。映像表示だけでなく再生・停止・一時停止ボタンも実装します。
Webアプリ 【JavaScript】APIからJSONを取得する簡単な方法【Fetch】
Webアプリを作成しているときに、よく実施する動作確認の1つにAPIからのデータ取得があります。今回はその最も簡単な確認方法を紹介します。
Android 【Flutter】Riverpodでの最も簡単なサンプル【Slider】
Flutterで値の変化に応じて表示を自動で更新する(状態管理する)のに使用するRiverpodをなるべく簡単な方法で紹介します。様々な場所で使用されるパラメータを表示する場合に活躍するパッケージです
Android 【Flutter】アイコン付きDrawer(サイドメニュー)を実装する方法
FlutterでサイドメニューをDrawerウィジェットで実装する方法を紹介します。常時表示しないけれど、よく使う機能をリスト化して畳んでおくことでユーザビリティを向上させることができます。今回は見た目の分かりやすさ重視で、リストにはアイコンも表示させます。
Webアプリ 【Flask】Blueprintでjavascriptとcssを読み込む方法【url_for】
今回は、FlaskのBlueprintを用いたアプリ作成においてhtmlからJavaScriptとCSSファイルを読み込む方法を紹介します。簡単にできるかと思いきや意外と手こずりましたので役に立てば幸いです。
Webアプリ 【Flask】Blueprintのフォルダ構成と簡単なサンプル
今回は、WebアプリケーションフレームワークFlaskのBlueprintの記載方法について紹介します。Webサイトは基本的にページが複数あり、それに伴いファイルも増えがちです。作成時の管理を簡単にするためにもなるべく分割して記載することが推奨されます。Flaskの持つBlueprint機能をもちいてアプリを分割管理しましょう。