すべてのカテゴリ

【個人開発】Remotionのデスクトップアプリ開発を断念した3つの理由以前から、Remotionを使って動画を作成できるデスクトップアプリを趣味で開発していました。プログラミングのコードを直接触らなくても、画像や文章を入力することで動画を作成できるようなアプリです。Remotionとは、ReactやTypeScriptといったWebプログラミング技術を使って、コードで動画を構築・生成できるツール（ライブラリ）です。一般的な動画編集ソフトとは異なり、コード制御によるアニメーション作成や、データに応じた動画の自動生成などが自由に行えるのが大きな特徴です。今回は、実際に最低限の機能を持ったアプリを作成し、Windows上で起動できる状態まで進めることができました。アプリを配布できる形式に変換し、別の環境でも正常に起動できるところまで確認しています。そのため、技術的にまったく作れなかったわけではありません。ただ、試作を続けていく中で、「このまま機能を増やし続けるより、一度ここで止めた方がいいかもしれない」と考えるようになりました。結果として、今回のRemotionデスクトップアプリ開発は、いったん中止することにしました。今回は仕事として依頼を受けていたものではなく、あくまでも個人的な興味から始めた趣味レベルの開発です。そのため、開発中止といっても大げさな話ではありません。ただ、実際に作ってみたからこそ分かったことも多く、同じようにRemotionを使ったツールを作ろうとしている方や、プログラミング機能を一般向けのアプリにしようとしている方には、多少参考になる部分があるかもしれません。

はじめに個別指導塾の教室運営で、もっとも時間と集中力を奪う仕事は何か。私は4年間、教室長として働いてきましたが、迷わずこう答えます。短期講習（春・夏・冬）のスケジュール作成です。  「生徒の希望回数 × 受講可能日 × 講師の勤務可能日 × NG講師 × 科目 × 間隔」このパズルを生徒人数分やる…地獄でした。しかも、せっかく作っても「部活が入った」「講師の予定が変わった」などで、何度も作り直しになる。■ この“地獄の作業”をツールに任せられないか？そう思って、Pythonでデスクトップアプリとして完全自作しました。・生徒の希望科目・回数・生徒の受講可能日・生徒のNG講師設定・講師の勤務可能日・講師の担当可能科目これらを登録して、ボタンを押すだけで最適なスケジュールを自動生成します。「1〜2時間かかっていた作業が、1分で終わる」これを実現しました。■ 現場で本当に使えるように作り込んだポイント● 振替対応が“直感的に”できる生徒の授業カードを右クリックすると、その生徒の受講可能日がハイライト表示されます。電話対応中でも即提案できます。● 作成したスケジュールはドラッグ＆ドロップで変更可能・別日へ移動・別講師へ変更・キャンセルすべてマウス操作だけ。● CSV出力で配布・管理も簡単既存の管理システムに取り込むこともできます。● データはすべてPC内に保存個人情報が外部に送信されることはありません。■ よくある不安にも対応しています「申込書が全部揃ってからじゃないと使えないのでは？」→ 後から追加された生徒も自動で差分作成できます。「同じ日に授業が偏るのでは？」→ なるべく均等に割り

Electronアプリのカスタムメニューの設定Electron フレームワークを使って、デスクトップアプリを作る方法についてお届けしています。 前回までに、基本的な Electron アプリの作成方法を、シンプルな方法から、Vue/React などのフレームワークを利用して作るやり方や、Windows/Mac/Linux 向けの配布パッケージを作る方法をお届けしてきました。今回は、カスタムでメニューを作るやり方について解説します。何も設定しないと標準設定のメニュが自動で設定されます。これまで紹介した Electron のアプリは、シンプルなもので特にメニューの設定はしていません。 何も設定しないと、File／Edit/View/Window/Help のメニューがメインウインドウに挿入されます。しかし、実際にアプリを開発する場合、メニューの内容や処理方法が違うのでカスタマイズしたい部分です。ここでは、メインウインドウのメニューバーのカスタマイズを例にそのやり方を説明して行きます！シンプルなアプリの場合、エントリーポイントになるコードでメニューの設定をします。 まずは、メニューのテンプレートを作ります。簡単のためにファイル（File）メニューの下に、アプリを終了する「Quit」だけを入れることにします。const menuTemplate: Menu = Menu.buildFromTemplate([  {    label: "File",    submenu: [      {        label: "Quit",        accelerator: "Cont

ReactでElectronアプリを作る前回は、Web 開発でよく利用される Vue のフレームワークを使って、Electron のアプリケーションを作成する方法を解説しました。 この記事では、Vue と並んで Web 開発でよく利用される「React」を使って Electron アプリを作る方法を解説します。React で Electron のアプリを作る場合は面倒です！Vue の場合は拡張機能（プラグイン）をインストールして利用することでとても簡単に Electron のアプリを作成する事ができました。React の場合、Vue の拡張機能に相当する物が今のところありません。従って、Electron アプリに必要な設定を自分で行う必要があります。面倒と言っても慣れてしまえば簡単なので、React の方が慣れているという方はやり方を覚えてください。いずれにせよ、React のアプリが必要です。最初に Vue の場合と同様に React アプリのテンプレートのプロジェクトを作成します。$ npx create-react-app [アプリの名前]　でテンプレートのアプリのプロジェクトを作成します。基本の Electron の設定を行います基本の Electron の設定は、React のプロジェクトフォルダに移動して行います。electron のパッケージのインストールElectron のアプリを作るのに必要なパッケージをインストールします。これは、Vue の場合と同じです。$ npm install --save-dev electron　electron-builder の

ブラウザだけでここまでできる！AI搭載・16のサイバー空間を巡る旅今回は、インストール不要・サーバー非依存で動く、驚きのWebアプリ群をご紹介します。私が手がけるポートフォリオサイト 「CYBER NET CONTROL PANEL」 は、まるで未来の管制室のようなUIで、16のプロジェクトが並びます。将棋・チェスから占い、音声認識まで――すべてブラウザだけで完結する、圧倒的な世界観と技術力に迫ります。🎮 ボードゲーム編 – ネオン盤上で繰り広げる頭脳戦伝統的なボードゲームをホログラム風ビジュアル＋AI対戦で再構築。CYBER OTHELLO – リアルタイムAI解析付きネオンオセロCYBER CHESS – 戦術解析が光るチェスシミュレーターCYBER CHECKERS – 量子盤面で展開するチェッカー戦略CYBER SHOGI – サイバーネオン彩る将棋AI対局CYBER TWIXT – 経路探索AIと戦略を競うコネクトゲームCYBER IGO – 自己強化学習AIと対局する碁盤シミュレーションどの作品も、盤面の美しさとAIの思考速度が魅力。将棋ファンも囲碁初心者も、ネオンの光に引き込まれます。🕹️ レトロ・アーケード編 – 80年代をAIで再起動アタリ世代のクラシックゲームをネオンビジュアル＋AIで進化させたシリーズ。CYBER INVADERS – Atari 2600エミュレーション内蔵シューティングCYBER TETRIS – 自己学習AIと対戦できるSFテトリスCYBER SHOOTOUT – 弾道計算AI搭載の1対1決闘シューティングレトロゲームの“懐かしさ”と

ElectronアプリでReact/Vue Routerを使うには？前回は、Electron アプリでメニューバーをカスタマイズする方法をお伝えしました。 Web アプリを React や Vue のフレームワークを使って作る場合、ページの切り替えに「Router」を使う場合が多くなります。Vue の場合は Vue Router、React の場合、React Router（react-router-dom）を使う場合が多いと思います。Web ベースのアプリを Electron でデスクトップのアプリにする場合は、この方法でページ（表示）を切り替える方が便利な場合があります。この記事は、React/Vue を使ってアプリを作る際に、React Router を使って表示を切り替える方法について解説します。React Router はハッシュヒストリを使う通常の Web 開発で React Router を使う場合は、「BrowserRouter」をインポートして使う場合が多いと思いますが、Electron と併用して利用する場合は、この使い方では動作しません。対策としては、ハッシュヒストリモード(Hash History)を使います。 Web アプリのトップレベルの記述例は以下のような感じで、「BrowserRouter」を「HashRouter」に置き換えるだけです。import React from "react";import { HashRouter, Route, Switch } from "react-router-dom";import Analyze from

これまで作成したデスクトップアプリ型ゲーム３種類を紹介します。ネオンとホログラムの世界観で、将棋・チェス・シャンチーを本格AIエンジンごとオフライン化したデスクトップアプリ紹介する。コンセプト将棋・チェス・シャンチー(中国将棋)といった伝統的なボードゲームを、ネオンとホログラムをまとったサイバーパンク/シンセウェイヴの世界観で包み、ブラウザの制約を超えてPCのローカルリソースをフル活用する対戦AIとして仕立て直す、というものだ。ラインナップ現在購入可能なタイトルは3本という構成だ。Cyber Shogi Desktop Edition将棋エンジンのYaneuraOuとFairy-Stockfishを組み合わせ、「3Dホログラム空間と超高速AIが融合した究極の将棋シミュレーター」を謳う一本。両エンジンともNNUE(ニューラルネットワーク評価関数)を有効にした状態で動作し、対局も検討もオフラインで完結する。Cyber Chess Desktop Edition「新次元チェス」というコピーの通り、ニューラル評価モデルとネオンマトリックスの世界観を掛け合わせたチェスシミュレーター。エンジンにはStockfishとFairy-StockfishのWebAssembly実装を採用している。Cyber Xiangqi Desktop Edition中国将棋(シャンチー)版。こちらもFairy-Stockfishをベースに、ニューラル評価を組み込んだローカルCPU最適化エンジンで動く。「飛行機の中でもストレスなく対局・検討できる」ことを売りにしている。技術的な見どころ単なる見た目のリブランドで

Firebaseをどうして使うか？よく質問を頂くことに、「Firebase をどうして使うのか？」という事があります。 一言で答える場合は、「便利だから」というのが一番しっくりくる答えだと思います。 しかし、多くの方はそれでは何か納得できない場合が多いようです。そこで、この記事ではもう少し詳しく Firebase の何が便利なのかを考えてまとめて見ました。Firebase でアプリに必要な基本機能がまかなえるWeb アプリだけに限らずアプリを開発する上で必要な基本機能が揃っているのが一番便利な点です。この話は何度か書いていますが、基本的に、HTML/CSS がある程度書けて、Javascript の基本がわかれば、「本格的なアプリが作れる」というのは非常に魅力的です。１ヶ月勉強すれば Web アプリに必要な技術が身に付くどんなアプリを作るかのアイディアは必要ですが、アプリを作るために必要なスキルという見方をすれば、１ヶ月も真剣に勉強すれば必要なスキルを十分に身につける事ができます。つまり、本格的なアプリが１ヶ月で作れるようになるという事です。どれくらい凄いかと言うと、Firebase を使わない場合には、１ヶ月で作るのはかなり厳しいです。理由は、幾つかありますが、Firebase がやってくれる事を実現するのに他のことを勉強する必要があるからです。＊　データベース＊　バックエンドのプログラミング例えば、データベースに MySQL などの SQL データベースを準備して、バックエンドのプログラミングに PHP を使うとします。そうすると、SQL のデータベースについて勉強しなけれ

VueでElectronのアプリを作るElectron のフレームワークを使うと、複数のプラットフォーム（Windows/Mac/Linux）で動作するデスクトップアプリを開発できるのは、既に紹介してきた通りです。 今日は、Electron のフレームワークと Web 開発でよく利用される Vue を組み合わせて利用する例を紹介します。Vue を取り込むとさらに簡単にデスクトップアプリを作る事ができます。Vue を使うと便利な理由Vue を使うと簡単に Electron アプリが作れるのには理由があります。 これは、Vue でよく利用する「VUE CLI」が拡張機能で Electron のアプリ作成に必要な処理をやってくれる機能をサポートしているからです。この拡張機能（プラグイン）は簡単に追加できます。 その前に、最初に Vue のプロジェクトを作成します。VUE UI(vue ui)を利用しても良いですし、コマンドライン（CLI）を利用しても良いので Vue のプロジェクトを作成してください。 コマンドラインの場合は以下のコマンドを実行します。$ vue create [プロジェクト名]　UI でもコマンドラインでも必要な情報を入力してまずは、Vue のプロジェクトを作成します。 これで、Vue のプロジェクトのテンプレートが作成されます。 まずは、このテンプレートのプロジェクトをそのまま Elecron のアプリにしてみます。ここで拡張機能（プラグイン）をインストールします。$ vue add electron-builder　実はこれだけで、Electron アプリの開発

Javascriptで簡単に作れるデスクトップアプリを作る〜ElectronJavascript（Typescript）を使って Web 開発が出来るスキルを身につけると、デスクトップアプリも簡単に作れるようになります。この記事では、複数のプラットフォーム（Windows/Mac/Linux）のアプリを簡単に開発できる、Electron フレームワークについて解説しています。Electron とは？既にご存知の方も多いかと思いますが、Electron はプログラミングで良く使われているエディタの VSCODE や Atom の開発に使われている他、Slack などの開発にも使われています。これらのアプリが、Mac/Windows/Linux をサポートできるのも Electron の恩恵を受けているからです。しかも、Web 開発の知識があれば、新たに別のプログラミング言語を学習しなくても、デスクトップのアプリの開発もできてしまうというのが最大の魅力です。Electron アプリは、React や Vue などの Web 開発のフレームワークと組み合わせて利用できるので、Web アプリをほぼそのままデスクトップアプリとして変換する事も簡単にできますが、この記事ではまずは、Electron の概念を理解するために、簡単にできる「Hello World!」を表示するだけの Electron アプリの作り方を紹介します。Electron アプリの簡単な作り方今回は、「Hello World!」を表示させるだけのシンプルなアプリを作成する流れを紹介します。 まずは、何が必要かを理解するの