伊藤  直子

伊藤 直子

1639795620

ElectronとVueを使用してアプリを構築する

JavaScriptは、フロントエンドの要素の操作に優れているだけでなく、世界で最も一般的に使用されているプログラミング言語の1つと見なされています。これと同じ言語を使用して、クロスプラットフォームのモバイルアプリケーションを作成し、APIを開発してバックエンドインフラストラクチャを操作し、デスクトップアプリケーションを作成できます。

これらすべての側面に対応するライブラリとフレームワークは数多くありますが、JavaScriptを使用したデスクトップアプリの開発に関しては、Electronが際立っています。この投稿では、VueとElectronを使用して最初のクロスプラットフォームを作成する方法について説明します。デスクトップアプリケーション。

前提条件

この記事は、次の前提条件を前提としています。

  • JavaScriptの基本的な理解
  • Vueの基本的な知識
  • Node.jsとnpmがインストールされています
  • Electronの経験があれば尚可ですが、必須ではありません。

電子とは何ですか?

Electronは、Webテクノロジー(HTML、CSS、およびJavaScript)を使用してネイティブのクロスプラットフォームデスクトップアプリケーションを構築するためのオープンソースのJavaScriptフレームワークです。これは、これらのテクノロジの操作に事前に精通している場合は、同じコードベースを使用して、Windows、Linux、およびmacOS用のデスクトップアプリケーションを開発できることを意味します。

舞台裏では、ElectronはChromiumエンジンとNode.jsランタイムを組み合わせて、コードベースをスタンドアロンのデスクトッププログラムとして読み取って実行します。また、その機能を証明するために、Electronを使用して作成された人気のデスクトッププログラムには、Slack、VS Code、WhatsAppDesktopなどがあります。

長所

Electronを使用する利点のいくつかを次に示します。

  • 単一のコードベース— Electronを使用すると、さまざまなオペレーティングシステム用のデスクトップアプリケーションを作成するために必要なコードベースは1つだけです。
  • Webスキルを活用する—基本的なWebスタック(HTML、CSS、およびJavascript)を使用した経験がある場合は、Electronを非常に簡単に使い始めることができます。
  • 大きなコミュニティ— Electronコミュニティは非常に大きく活発なコミュニティです。これに追加される主な要因は、フレームワークがトップ企業によって使用およびサポートされているためです。

短所

他のものと同じように、Electronを使用してデスクトップアプリケーションを構築することにもいくつかの欠点があります。それらのいくつかは次のとおりです。

  • より高いリソース消費— Electronで作成されたデスクトップアプリケーションは、Java FX、ObjectiveCなどの他の環境で作成されたアプリと比較してより多くのCPUとRAMを消費することが知られています
  • より大きなアプリサイズ—前述のように、Electronアプリケーションはビルドプロセス中にChromiumエンジンをバンドルするため、単純なアプリケーションでも大きなアプリサイズになります

ビュー+エレクトロン

以前にVueを使用したことがある場合は、Electronを使い始めるのはかなり簡単です。これは、ElectronBuilderと呼ばれるVueCLIプラグインで可能です。次のセクションでは、themoviedb APIからトレンド映画の健全なリストを返すサンプルアプリケーションを作成することで、このプラグインがどのように機能するかを学習します

これが私たちの映画アプリケーションがどのように見えるかのプレビューです:

TMDBデモアプリ

 

入門

ElectronビルダーはVueCLIプラグインであるため。つまり、Vue CLIを使用する前に、VueCLI自体をインストールする必要があります。この実行を行うには:

npm install -g @vue/cli

上記のコマンドを実行すると、最新の安定バージョンのVue CLIがインストールされ、を実行して成功したことを確認できます。これにより、インストールされているバージョンのVueが出力されます。vue -V

次に、新しいVueアプリケーションを作成したいので、先に進んで以下のコマンドを実行し、vue-desktopという名前の新しいアプリを作成します。

vue create vue-desktop

最後のステップは、Vue Electron Builderプラグインを追加することです。これを行うには、以下のコマンドを実行します。

vue add electron-builder

これにより、このVueプロジェクトに追加するElectronのバージョンを尋ねられます。追加すると、ElectronBuilderがインストールされたことを示す成功メッセージが表示されます。次に、次のコマンドを実行してアプリを起動できます。

npm run electron:serve

そして、以下のスクリーンショットのような出力が表示されるはずです。

VueとElectronBuilderのセットアップ

開発ツールを閉じると、次の画像のように、アプリケーションの完全なプレビューが表示されます。

最初のアプリプレビュー

ファイル構造

好みのテキストエディタでプロジェクトフォルダを開くと、下の画像に示すように、次のファイルとディレクトリが表示されます。また、過去にVue CLIを使用したことがある場合は、ファイル構造がほとんど同じであることに気付くでしょう。唯一の変更は、新しいファイルの追加です。このファイルは、Vueアプリケーションをスタンドアロンのデスクトップアプリケーションとして実行する役割を果たします。background.js

Background.jsファイル構造

このファイルでは、アプリケーションを起動するウィンドウのデフォルトの幅と高さを構成したり、アプリケーションのタイトルを設定したり、自動更新機能を追加したりできます。

映画アプリの作成

Vue Electron Builderに慣れてきたので、次に進んで、トレンドの映画アプリケーションの構築を始めましょう。

最初のステップは、以下のコードのように、ヘッドセクションにBootstrapとFontAwesomeのエントリを開いて追加することです。public/index.html

...
<link
  href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
  rel="stylesheet"
/>
<link
  rel="stylesheet"
  href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css"
/>
...

次に、フォルダ内にという新しいファイルを作成し、次のコードをそのファイルに貼り付けます。src/componentsMovieCard.vue

<template>
  <main>
    <div class="card mb-4 shadow-lg border border-secondary bg-dark text-light">
      <img
        class="card-img-top"
        :src="'https://image.tmdb.org/t/p/w500/' + movie.poster_path"
        alt="Card image cap"
      />
      <div class="card-body">
        <p class="card-text">{{ movie.title }}</p>
        <div class="">
          <div class="d-flex justify-content-between align-items-center">
            <div class="btn-group">
              <button type="button" class="btn btn-sm btn-outline-secondary">
                <i class="fas fa-heart"></i>
              </button>
              <button type="button" class="btn btn-sm btn-outline-secondary">
                <i class="fas fa-plus"></i>
              </button>
            </div>
            <small class="ms-auto text-muted"
              >Rating {{ movie.vote_average }}/10</small
            >
          </div>
        </div>
      </div>
    </div>
  </main>
</template>
<script>
export default {
  name: "MovieCard",
  props: {
    movie: {
      type: Object,
      required: true,
    },
  },
};
</script>

ここでMovieCardは、各映画のすべての詳細を含む小道具を受け入れるコンポーネントを作成しました。次のステップは、含まれているすべてのコードを削除し、次のように更新することです。src/App.vue

<template>
  <div id="app">
    <div class="container">
      <div class="text-center">
        <h2 class="text-center mt-5">Trending Movies 🍿</h2>
        <p>Keep up with the hottest movies that are trending this week.</p>
      </div>

      <div class="my-4">
        <a href="#" class="mx-3 h4"> Trending today</a>
        <a href="#" class="mx-3 h4">This week</a>
      </div>
    </div>
  </div>
</template>        
          
      
    
  

この時点で、アプリケーションを実行すると、次の出力が得られるはずです。

ステップ2ElectronVueアプリ

最後のステップは、TMDBAPIから最も人気のある映画をフェッチするメソッドを定義することです。このプロセスでは、APIキーを取得するために、それらを使用して無料のアカウントを作成する必要があります。

これを行うには、次のコードで更新します。src/App.vue

<template>
  <div id="app">
    <div class="container">
      <div class="text-center">
        <h2 class="text-center mt-5">Trending Movies 🍿</h2>
        <p>Keep up with the hottest movies that are trending this week.</p>
      </div>

      <div class="my-4">
        <a href="#" @click="getTrendingMovies('day')" class="mx-3 h4">
          Trending today</a
        >
        <a href="#" @click="getTrendingMovies('week')" class="mx-3 h4"
          >This week</a
        >
      </div>

      <div class="row" v-if="movies.length > 0">
        <div class="col-md-3" v-for="(movie, i) in movies" :key="i">
          <movie-card :movie="movie" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import MovieCard from "./components/MovieCard.vue";
export default {
  name: "App",
  components: {
    MovieCard,
  },
  data() {
    return {
      movies: [],
      apiKey: "YOUR_API_KEY_HERE",
    };
  },
  methods: {
    getTrendingMovies(category) {
      return fetch(
        `https://api.themoviedb.org/3/trending/movie/${category}?api_key=${this.apiKey}`
      )
        .then((response) => response.json())
        .then((data) => {
          this.movies = data.results;
        });
    },
  },
  mounted() {
    this.getTrendingMovies("day");
  },
};
</script>

ここではMovieCard、スクリプトセクションで前に作成したコンポーネントをインポートし、TMDB APIからムービーをロードする新しいメソッドを追加し、マウントされたフックでこの関数を実行しました。getTrendingMovies()

また、マークアップの小さな変更は、TMDBから返されたすべての結果をMovieCardコンポーネントにループさせることです。

この段階でアプリケーションを更新すると、すべてが正常に機能し、次の画像のような出力が得られるはずです。

TMDBデモアプリ

アプリアイコンを更新しています

Electronアイコンはアプリのデフォルトのアイコンとして設定されており、ほとんどの場合、カスタムアイコンを設定することをお勧めします。以下のように、メソッドに新しいアイコンエントリを追加することで、アプリアイコンを更新できます。newBrowserWindow()background.js

...
const win = new BrowserWindow({
    width: 800,
    height: 600,
    title: "Trending movies",
[+] icon: "./path/to/icon.png",
...

アプリの構築

アプリケーションをスタンドアロンの実行可能ファイルとしてコンパイルするのは簡単です。以下のコマンドを実行することでこれを行うことができます。

npm run electron:build

生成される実行可能アプリは、使用しているオペレーティングシステムによって異なることに注意してください。ただし、Electron Builderでは、実行可能ファイルを生成するプラットフォームを定義できます。使用可能なオプションには、Mac、Win、およびLinuxが含まれます。

これは、アプリケーションのLinuxバージョンをビルドするために、次のコマンドを実行することを意味します。

npm electron:build -- --linux nsis

結論

このチュートリアル全体を通して、ElectronとVueを使用してクロスプラットフォームのデスクトップアプリケーションを作成する方法を見てきました。また、物事がどのように機能するかを理解するために、トレンド映画アプリケーションの例を作成しました。また、完全なアプリケーションのコードは、GitHubにあります

記事を読むのが好きなら、下にコメントを残してください!

リンク: https://blog.logrocket.com/building-app-electron-vue/

#electron #vue 

What is GEEK

Buddha Community

ElectronとVueを使用してアプリを構築する
伊藤  直子

伊藤 直子

1639795620

ElectronとVueを使用してアプリを構築する

JavaScriptは、フロントエンドの要素の操作に優れているだけでなく、世界で最も一般的に使用されているプログラミング言語の1つと見なされています。これと同じ言語を使用して、クロスプラットフォームのモバイルアプリケーションを作成し、APIを開発してバックエンドインフラストラクチャを操作し、デスクトップアプリケーションを作成できます。

これらすべての側面に対応するライブラリとフレームワークは数多くありますが、JavaScriptを使用したデスクトップアプリの開発に関しては、Electronが際立っています。この投稿では、VueとElectronを使用して最初のクロスプラットフォームを作成する方法について説明します。デスクトップアプリケーション。

前提条件

この記事は、次の前提条件を前提としています。

  • JavaScriptの基本的な理解
  • Vueの基本的な知識
  • Node.jsとnpmがインストールされています
  • Electronの経験があれば尚可ですが、必須ではありません。

電子とは何ですか?

Electronは、Webテクノロジー(HTML、CSS、およびJavaScript)を使用してネイティブのクロスプラットフォームデスクトップアプリケーションを構築するためのオープンソースのJavaScriptフレームワークです。これは、これらのテクノロジの操作に事前に精通している場合は、同じコードベースを使用して、Windows、Linux、およびmacOS用のデスクトップアプリケーションを開発できることを意味します。

舞台裏では、ElectronはChromiumエンジンとNode.jsランタイムを組み合わせて、コードベースをスタンドアロンのデスクトッププログラムとして読み取って実行します。また、その機能を証明するために、Electronを使用して作成された人気のデスクトッププログラムには、Slack、VS Code、WhatsAppDesktopなどがあります。

長所

Electronを使用する利点のいくつかを次に示します。

  • 単一のコードベース— Electronを使用すると、さまざまなオペレーティングシステム用のデスクトップアプリケーションを作成するために必要なコードベースは1つだけです。
  • Webスキルを活用する—基本的なWebスタック(HTML、CSS、およびJavascript)を使用した経験がある場合は、Electronを非常に簡単に使い始めることができます。
  • 大きなコミュニティ— Electronコミュニティは非常に大きく活発なコミュニティです。これに追加される主な要因は、フレームワークがトップ企業によって使用およびサポートされているためです。

短所

他のものと同じように、Electronを使用してデスクトップアプリケーションを構築することにもいくつかの欠点があります。それらのいくつかは次のとおりです。

  • より高いリソース消費— Electronで作成されたデスクトップアプリケーションは、Java FX、ObjectiveCなどの他の環境で作成されたアプリと比較してより多くのCPUとRAMを消費することが知られています
  • より大きなアプリサイズ—前述のように、Electronアプリケーションはビルドプロセス中にChromiumエンジンをバンドルするため、単純なアプリケーションでも大きなアプリサイズになります

ビュー+エレクトロン

以前にVueを使用したことがある場合は、Electronを使い始めるのはかなり簡単です。これは、ElectronBuilderと呼ばれるVueCLIプラグインで可能です。次のセクションでは、themoviedb APIからトレンド映画の健全なリストを返すサンプルアプリケーションを作成することで、このプラグインがどのように機能するかを学習します

これが私たちの映画アプリケーションがどのように見えるかのプレビューです:

TMDBデモアプリ

 

入門

ElectronビルダーはVueCLIプラグインであるため。つまり、Vue CLIを使用する前に、VueCLI自体をインストールする必要があります。この実行を行うには:

npm install -g @vue/cli

上記のコマンドを実行すると、最新の安定バージョンのVue CLIがインストールされ、を実行して成功したことを確認できます。これにより、インストールされているバージョンのVueが出力されます。vue -V

次に、新しいVueアプリケーションを作成したいので、先に進んで以下のコマンドを実行し、vue-desktopという名前の新しいアプリを作成します。

vue create vue-desktop

最後のステップは、Vue Electron Builderプラグインを追加することです。これを行うには、以下のコマンドを実行します。

vue add electron-builder

これにより、このVueプロジェクトに追加するElectronのバージョンを尋ねられます。追加すると、ElectronBuilderがインストールされたことを示す成功メッセージが表示されます。次に、次のコマンドを実行してアプリを起動できます。

npm run electron:serve

そして、以下のスクリーンショットのような出力が表示されるはずです。

VueとElectronBuilderのセットアップ

開発ツールを閉じると、次の画像のように、アプリケーションの完全なプレビューが表示されます。

最初のアプリプレビュー

ファイル構造

好みのテキストエディタでプロジェクトフォルダを開くと、下の画像に示すように、次のファイルとディレクトリが表示されます。また、過去にVue CLIを使用したことがある場合は、ファイル構造がほとんど同じであることに気付くでしょう。唯一の変更は、新しいファイルの追加です。このファイルは、Vueアプリケーションをスタンドアロンのデスクトップアプリケーションとして実行する役割を果たします。background.js

Background.jsファイル構造

このファイルでは、アプリケーションを起動するウィンドウのデフォルトの幅と高さを構成したり、アプリケーションのタイトルを設定したり、自動更新機能を追加したりできます。

映画アプリの作成

Vue Electron Builderに慣れてきたので、次に進んで、トレンドの映画アプリケーションの構築を始めましょう。

最初のステップは、以下のコードのように、ヘッドセクションにBootstrapとFontAwesomeのエントリを開いて追加することです。public/index.html

...
<link
  href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
  rel="stylesheet"
/>
<link
  rel="stylesheet"
  href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css"
/>
...

次に、フォルダ内にという新しいファイルを作成し、次のコードをそのファイルに貼り付けます。src/componentsMovieCard.vue

<template>
  <main>
    <div class="card mb-4 shadow-lg border border-secondary bg-dark text-light">
      <img
        class="card-img-top"
        :src="'https://image.tmdb.org/t/p/w500/' + movie.poster_path"
        alt="Card image cap"
      />
      <div class="card-body">
        <p class="card-text">{{ movie.title }}</p>
        <div class="">
          <div class="d-flex justify-content-between align-items-center">
            <div class="btn-group">
              <button type="button" class="btn btn-sm btn-outline-secondary">
                <i class="fas fa-heart"></i>
              </button>
              <button type="button" class="btn btn-sm btn-outline-secondary">
                <i class="fas fa-plus"></i>
              </button>
            </div>
            <small class="ms-auto text-muted"
              >Rating {{ movie.vote_average }}/10</small
            >
          </div>
        </div>
      </div>
    </div>
  </main>
</template>
<script>
export default {
  name: "MovieCard",
  props: {
    movie: {
      type: Object,
      required: true,
    },
  },
};
</script>

ここでMovieCardは、各映画のすべての詳細を含む小道具を受け入れるコンポーネントを作成しました。次のステップは、含まれているすべてのコードを削除し、次のように更新することです。src/App.vue

<template>
  <div id="app">
    <div class="container">
      <div class="text-center">
        <h2 class="text-center mt-5">Trending Movies 🍿</h2>
        <p>Keep up with the hottest movies that are trending this week.</p>
      </div>

      <div class="my-4">
        <a href="#" class="mx-3 h4"> Trending today</a>
        <a href="#" class="mx-3 h4">This week</a>
      </div>
    </div>
  </div>
</template>        
          
      
    
  

この時点で、アプリケーションを実行すると、次の出力が得られるはずです。

ステップ2ElectronVueアプリ

最後のステップは、TMDBAPIから最も人気のある映画をフェッチするメソッドを定義することです。このプロセスでは、APIキーを取得するために、それらを使用して無料のアカウントを作成する必要があります。

これを行うには、次のコードで更新します。src/App.vue

<template>
  <div id="app">
    <div class="container">
      <div class="text-center">
        <h2 class="text-center mt-5">Trending Movies 🍿</h2>
        <p>Keep up with the hottest movies that are trending this week.</p>
      </div>

      <div class="my-4">
        <a href="#" @click="getTrendingMovies('day')" class="mx-3 h4">
          Trending today</a
        >
        <a href="#" @click="getTrendingMovies('week')" class="mx-3 h4"
          >This week</a
        >
      </div>

      <div class="row" v-if="movies.length > 0">
        <div class="col-md-3" v-for="(movie, i) in movies" :key="i">
          <movie-card :movie="movie" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import MovieCard from "./components/MovieCard.vue";
export default {
  name: "App",
  components: {
    MovieCard,
  },
  data() {
    return {
      movies: [],
      apiKey: "YOUR_API_KEY_HERE",
    };
  },
  methods: {
    getTrendingMovies(category) {
      return fetch(
        `https://api.themoviedb.org/3/trending/movie/${category}?api_key=${this.apiKey}`
      )
        .then((response) => response.json())
        .then((data) => {
          this.movies = data.results;
        });
    },
  },
  mounted() {
    this.getTrendingMovies("day");
  },
};
</script>

ここではMovieCard、スクリプトセクションで前に作成したコンポーネントをインポートし、TMDB APIからムービーをロードする新しいメソッドを追加し、マウントされたフックでこの関数を実行しました。getTrendingMovies()

また、マークアップの小さな変更は、TMDBから返されたすべての結果をMovieCardコンポーネントにループさせることです。

この段階でアプリケーションを更新すると、すべてが正常に機能し、次の画像のような出力が得られるはずです。

TMDBデモアプリ

アプリアイコンを更新しています

Electronアイコンはアプリのデフォルトのアイコンとして設定されており、ほとんどの場合、カスタムアイコンを設定することをお勧めします。以下のように、メソッドに新しいアイコンエントリを追加することで、アプリアイコンを更新できます。newBrowserWindow()background.js

...
const win = new BrowserWindow({
    width: 800,
    height: 600,
    title: "Trending movies",
[+] icon: "./path/to/icon.png",
...

アプリの構築

アプリケーションをスタンドアロンの実行可能ファイルとしてコンパイルするのは簡単です。以下のコマンドを実行することでこれを行うことができます。

npm run electron:build

生成される実行可能アプリは、使用しているオペレーティングシステムによって異なることに注意してください。ただし、Electron Builderでは、実行可能ファイルを生成するプラットフォームを定義できます。使用可能なオプションには、Mac、Win、およびLinuxが含まれます。

これは、アプリケーションのLinuxバージョンをビルドするために、次のコマンドを実行することを意味します。

npm electron:build -- --linux nsis

結論

このチュートリアル全体を通して、ElectronとVueを使用してクロスプラットフォームのデスクトップアプリケーションを作成する方法を見てきました。また、物事がどのように機能するかを理解するために、トレンド映画アプリケーションの例を作成しました。また、完全なアプリケーションのコードは、GitHubにあります

記事を読むのが好きなら、下にコメントを残してください!

リンク: https://blog.logrocket.com/building-app-electron-vue/

#electron #vue