dev.kokushinスマートフォン用の表示で見るdev.kokushinHTML5、CSS3、JavaScriptを中心に、日々のプログラミングで得た知識をメモしています。この広告は、90日以上更新していないブログに表示しています。作ってみた最近話題の軽量フレームワーク「Vue.js」と簡単にアプリ化できる「Electron」を組み合わせて、練習がてらマークダウンエディタをつくってみました。マークダウンエディタ本体を作る公式サイトのサンプルをそのまま引用します。Editor」にします。使ってみるせっかく覚えたので積極的に使っていくスタイル。以下、現時点でのディレクトリ構造です。webpack.config.jsapp.jsに「Vue.js」の処理を書きます。インストールマークダウン実装用JSライブラリである「marked.js」をインストールします。webpack実行後、「index.html」をブラウザで開いて動作を確認してみましょう。正常に動作していたら、マークダウンエディタ本体の完成です。準備デスクトップアプリケーション化(パッケージ化)するために、「Electron」を準備します。グローバルインストールしましょう。-gついでに、exeやappなどアプリケーション形式にコンパイルしてくれるツール「electron-packager」もインストールします。-g以上で準備完了です。処理を書くmain.jsを作成します。ここまでのディレクトリ構造は以下のとおり。main.jsmain.jsに「Electron」の処理を記述します。});});エントリーポイントを設定package.jsonを編集します。"main.js",これで、electronコマンドを実行した際にmain.jsを読み込むようになります。.上記コマンドで、実際にアプリの挙動を確認することが出来ます。パッケージ化して配布できるようにするお待たせしました、つくったアプリをパッケージ化してみましょう。「--overwrite」が「上書きを許可」となります。するとパッケージ化されたアプリが出力されます!意外とファイルサイズは大きいです...。Editor感想とかVue.jsの勉強も最近はじめまして、真っ先に「このマークダウンのサンプル、Electronでアプリ化しよう」と考えていました。アプリケーションとしては全然ダメですが、とりあえずここまで簡単にアプリ化できる事に感動。いやー、これは楽しいですね。Socket.ioでチャットアプリをつくってみるメモ忘れないうちに「Socket.io」の使い方をメモ。CSS好きなエンジニア。月別アーカイブはてなブログをはじめよう!kokushinさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。