macOS Mojave で Typescript ファイルの中身を Quick Look で見れるようにする
macOS では Quick Look と呼ばれる機能により、Finder でファイルを選択した状態でスペースキーを押すとファイルによっては中身が表示されます。ですが TypeScript ファイル(拡張子が .ts /...
npm install -g cordova ionic
でApache Cordova CLIとIonic CLIをインストールしてください。2017年4月23日現在でionicのバージョンは2.2.3ですが、最新の3.x.xをインストールしたい場合は
npm install -g cordova ionic@beta
でインストールしてください。3.x.x系のIonic CLIは2.x.x系から大きな変更があってより使いやすくなっているので、3.x.x系をインストールすることをオススメします。以下では
ionic start newproject tabs
でプロジェクトを新規作成します。プロジェクト用のディレクトリnewproject
の生成、テンプレートファイル群のダウンロード、npm install
などが実行されます。最後に”Link this app to your Ionic Dashboard to use tools like Ionic View?”と聞かれますが、IonicViewと連携しない場合は”No”でいいです。ターミナルに
npm run ionic:serve
でスターターアプリが表示されることを確認してください。ionic:serve
しない場合でも npm run build
で一度は必ずビルドしてください。一度もビルドしないとwww
ディレクトリが空のままなので、下記の手順にしたがってもElectronで何も表示されません。
cd newproject
npm install --save-dev electron electron-packager
インストールが終わったらpackage.jsonのdevDependencies
にelectron
とelectron-packager
が追加されているはずです。
package.json
のscripts
プロパティは
"scripts": {
"clean": "ionic-app-scripts clean",
"build": "ionic-app-scripts build",
"ionic:build": "ionic-app-scripts build",
"ionic:serve": "ionic-app-scripts serve"
},
のようにIonic用のコマンドが定義されています。またmain
プロパティは定義されていません。ここにElectron用のコマンドを追加します:
"main": "main.js",
"scripts": {
"clean": "ionic-app-scripts clean",
"build": "ionic-app-scripts build",
"ionic:build": "ionic-app-scripts build",
"ionic:serve": "ionic-app-scripts serve",
"start": "electron .",
"electron:build": "electron-packager . --overwrite --out='./dist"
},
main
プロパティを指定するのを忘れないでください。これを忘れるとElectronを実行したときに
Electron launching app
Unable to find Electron app at /Users/yuki/newproject
Cannot find module '/Users/yuki/newproject'
というメッセージがプロンプトに表示されてElectronが終了します。
git clone https://github.com/electron/electron-quick-start
でクイックスタートキットをダウンロードしてきます。ダウンロードが終わったら
electron-quick-start
ディレクトリから必要な2つのファイルをもってきます。
main.js
とrenderer.js
を移動したらelectron-quick-start
ディレクトリは不要なので削除して構いません。
www
ディレクトリ内にindex.htmlファイルが生成されるので、main.js内を以下のように変更します:
npm start
します。これでElectronが立ち上がってionic:serve
で確認したアプリが表示されるはずです。