コピー2023.04.02この記事は約7分で読めます。心地よい春の季節となりました、一方で私にとっては毎年悩まされる花粉症の時期でもあります。人一倍症状が強いので、きつめの薬を飲んで耐え忍んでいる今日この頃です。今年はかなりキツめな気がしてます、、一日中鼻がむずむずし、鼻水も止まりません、ティッシュがすぐに尽きてしまう。環境省からの2019年の全国疫学調査レポートによると、スギの花粉症有病率が10代〜50代で45%以上、60代で30%程度とあり(参考リンク)、日本の労働者の3割以上がこの時期に花粉症で思考が鈍ってしまったり薬の作用でぼーっとしたりしているのかと思うと経済への影響も無視できないなという気がしています。(ただこれを機会と見ると大きな市場といえるかも。-)さて、今回はWeb技術でデスクトップアプリケーションを作成できるフレームワークであるElectronでnuxt3を使った簡単なアプリケーションを作ってみたいと思います。Nuxt3の開発のしやすさをそのままElectronでの開発で活かせるのでいい感じです。本記事でのゴールは、EC2のインスタンスを起動及び停止する簡単なアプリケーションとしたいと思います。(EC2クライアント)コンポーネントの作成ビルド+実行おわりに参考リンクゴールのイメージEC2のインスタンスIDを設定して、インスタンスの起動や停止、状態を取得するだけの簡単なアプリケーションです。「開発目的等で頻繁に利用するインスタンスをAWSコンソールにログインすることなくGUIでサクッと操作できる」というところがベネフィットになります。一式をsrcディレクトリ下に移動することとします。src/nuxt.config.tsでsrcの場所を指定します。'src/',})nuxt-electronのセットアップnuxtのelectronモジュールを使用します。以下のとおりnuxt-electronをインストールします。electron-builder続いてnuxt.config.tsでモジュールのロードを指定します。['nuxt-electron',],})次にelectron/main.tsというファイルを作成します。今回は、nuxt-electronのexampleソースを参考にします。ライセンスも併記しておきます。'index.html'))}}app.whenReady().then(bootstrap)package.json最後にpackage.jsonにエントリーポイントを追加します。"dist-electron/main.js"}veutify3のセットアップ以下のページを参考にvuetify3をセットアップします。@mdi/js今回のセットアップ後のソースは以下のようになります。'dark',},})nuxtApp.vueApp.use(vuetify)})nuxt.config.tsvuetifyのcssスタイル読み込み等を設定します。'vuetify/styles';プリロードスクリプトelectronでは、レンダラープロセスというコンテキストでプログラムが実行されます。このコンテキストではプログラムの安全性確保のため通常Node.jsのAPIにアクセスしたりできないようサンドボックス化されています。そこで、レンダラープロセスからそのような特権APIを呼び出すためにプリロードという仕組みが用意されています。プリロード経由でレンダラープロセスにAPIを公開することで、安全に特権APIを呼ベるようになります。今回はawsのプロファイルを読み書きをするための機能を実装する目的で以下のようにプリロードスクリプトを作成します。electron/preload.tswindow.apiというネームスペースでレンダラープロセスからAPIを呼ベるようにします。ipcRenderer.invoke('readconfig')},})src/@types/global.d.tsコンポーネントからwindow.api.xxxxという指定で呼べるようにtypeを定義します。string}electron/main.tsレンダラープロセスからAPIを呼び出せるように実体を定義します。https://www.electronjs.org/ja/docs/latest/tutorial/tutorial-preloadアプリケーションの作成aws-sdkのv3をインストールします。v3では、ソースがTypeScriptベースで再構築されており、またクライアントがサービスごとに独立したモジュール構造になっているようです。(EC2クライアント)今回は、EC2クライアントを使用するため以下のようにしてクライアントをインストールします。class="app"><slot></slot></div></template>src/pages/index.vueただコンポーネントを表示するだけとします。設定ファイルの読み書きです。v3のクライアントは、以下のようにクライアントオブジェクトの初期化時にregionやcredentialsを渡すようなインターフェースになっています。起動や停止など呼び出すコマンドに対して各コマンド用のクラスが用意されており、コマンド実行はコマンドオブジェクトを作成してクライアントのsendメソッドに渡すことで実行されるような形になっています。詳細は、公式のドキュメントを参考にしてください。https://docs.aws.amazon.com/AWSJavaScriptSDK/v3/latest/clients/client-ec2/ビルド+実行package.jsonを以下のように修正しておきます。prepare",},...省略}以下のコマンドで実行します。buildビルドに成功すると、releaseの下にアプリケーションバイナリが生成されます。アプリケーションをクリックしてみましょう、以下のようなアプリケーションの画面が表示されるはず。設定編集画面で設定を入力して保存します。インスタンス情報を取得してみます。上手く取得できているようです!おわりにnuxt3とelectronの組み合わせでAWSのEC2を操作するだけの簡単なデスクトップアプリケーションを作成してみました。electronの作法については別途学ぶ必要がありますが、nuxt3の開発の良さをそのままelectronで活かせるのが嬉しいですね。最近は、electron以外にOSのwebブラウザを利用するものであったり、Node.jsでなくdenoを使うものであったりと色々と進化しているようです。VSCodeやSlackアプリなどもelectronで作成されており、しっかりしたアプリケーションを作成する候補としてelectronを学んでおくのは良いのではないでしょうか。今回のサンプルgithubにアップロードしておきました。誤記や間違いがあれば教えてください。コピーbyebyehaikikyouをフォローするbyebyehaikikyouデバッグライフ関連記事NuxtJSNuxt3でwasmを実行するWebブラウザ上でネイティブコードを実行する仕組みにWebAssembly(wasm)という仕組みがあります。高度な画像処理などの計算をネイティブで高速に実行することでアプリケーションのパフォーマンスが向上しユーザー体験の向上が期待できます...NuxtJSNuxt3でページにstyleを適用するNuxt3でページにスタイルを指定する方法についてです。Headタグ使うSFC内に以下のように記述する事でスタイル指定が可能です。setupに書くこともできます。ページごとにタイトルを変えるNuxt3でページごとにタイトルを変える方法について記述します。正式リリースされていないので変わる可能性もゼロではないですが。useHeadとtitleTemplateを使うapp.vueでtitleTemplateを使います。pagesデ...NuxtJSNuxt.jsでsocket.ioを使うやり方Nuxt.jsでWebSocket、今回はsocket.ioを使う方法についての備忘録です。他によいアプローチがあるかもしれません。他の方の事例を参考にしながら、自分なりに整理してみました。以下の3つのアプローチで記述してみます。m...NuxtJSvuex-persistedstateによるstateデータの永続化NuxtJSのSSRモードで、vuex-persistedstateによるデータ永続化を適用してしまいSSRのfetchライフサイクルでstoreに設定したデータが上書きされてしまった。これは、私がvuex-persistedstateの使...NuxtJSNuxt3でNuxt-Authモジュールを使って認証処理をつくる以前、以下の投稿で簡易な認証機能を試してみました。以下は認証フローのイメージを掴むための簡易なサンプルでしたので機能は不十分でした。コメントをキャンセルメールアドレスが公開されることはありません。コメントデータの処理方法の詳細はこちらをご覧ください。名前:moritetuITエンジニア地方でITエンジニアをしています。Webやスマフォアプリ、Hadoopなどのビッグデータに関するシステムに関わり、現在は企画開発の業務をしています。(必須)サイトタイトルとURLをコピーしました。