Nuxt.js を GitHub Pages で使う

Nuxt.js は Vue.js の Framework で Webpack, Babel 等の設定や、ルーティング、SPA、サーバサイドレンダリングの実装をシンプルなものにしてくれます。 Nuxt.js には静的なページを生成する機能もあるので今回はこれを利用して、GitHub Pages を作成します。 `nuxt-sumple` というリポジトリ名で作成しました。 今回使用したコード、作成したページは以下になります。 https://github.com/fiahfy/nuxt-sample https://fiahfy.github.io/nuxt-sample/ ###Install requirements yarn, vue-cli を使用します。 インストールしていない場合はインストールします。 ```bash $ npm i -g yarn vue-cli ``` ###Create Project テンプレートからプロジェクトを作成します。 ```bash $ vue init nuxt-community/starter-template nuxt-sample ``` プロジェクトルートに移動して ```bash $ cd nuxt-sample ``` 依存パッケージをインストールし ```bash $ yarn ``` サーバを起動します ```bash $ yarn dev ``` ブラウザで http://localhost:3000 にアクセスするとページが確認できます。 以降はこのページで開発をしていきます。 ###Update Config GitHub Pages で公開するために、設定ファイル(`nuxt.config.js`)を修正します。 公開するURLは https://fiahfy.github.io/nuxt-sample/ となるので、ベースパスを考慮します。 `favicon.ico` のパスが変わるので修正します。 ```js { rel: 'icon', type: 'image/x-icon', href: '/nuxt-sample/favicon.ico' } ``` ベースパスを設定するため `router.base` を追加します。 ```js build: { ... }, router: { base: '/nuxt-sample/' } } ``` ベースパスを変更したので確認時のURLも http://localhost:3000/nuxt-sample/ となります。 ###Publish to GitHub Pages ページが完成したら、`nuxt generate` で静的ページを生成します。 ```bash $ yarn generate ``` `dist` ディレクトリに静的ページが生成されます。 `dist` を公開用のディレクトリにコピーします。 ```bash $ cp -r dist/ gh-pages ``` `package.json` の `generate` スクリプトを以下の様にしておくと便利です。 ```js "generate": "nuxt generate && rm -rf gh-pages/* && cp -r dist/ gh-pages/", ``` 公開用ディレクトリを `gh-pages` ブランチとしてpushします。 ```bash $ cd gh-pages $ git remote add origin git@github.com:fiahfy/nuxt-sample.git $ git checkout -b gh-pages $ git add . $ git commit -m "Initial commit" $ git push -u origin gh-pages ``` 公開されたページを確認します。 https://fiahfy.github.io/nuxt-sample/ Nuxt.js で簡単に GitHub Pages が作成できました。 もちろん、動的ページにもすぐに切り替えられるので、とりあえず GitHub Pages で公開して、後々自サーバで公開といった感じでも使えます。 Nuxt.js は他にも便利で、柔軟な機能があるので、Vue.js に興味のある方は GitHub Pages から使用してみてはいかがでしょうか？ ##参考 * https://ja.nuxtjs.org/

Azure CLI 2.0 commands

Azure CLI 2.0 のコマンドメモ ##VM ###可用性セットで使用可能なVMのサイズを確認 ```bash az vm availability-set list-sizes \ --resource-group myResourceGroupAvailability \ --name myAvailabilitySet \ --output table ``` ##参考 * https://docs.microsoft.com/ja-jp/azure/virtual-machines/linux/tutorial-availability-sets

pm2 command

### show config ``` pm2 conf ``` ### show module config ``` pm2 conf <module-name> ```

Electron Apps

###Picty 画像ビューワ Framework: Electron, Vue.js, material component web 対応プラットフォーム: Windows, OSX https://github.com/fiahfy/picty ###Hosty Hostsファイル管理アプリ Framework: Electron, React.js, Material UI 対応プラットフォーム: Windows, OSX https://github.com/fiahfy/hosty

Xcode command

### xcodebuild のバージョンを変更する ``` xcode-select --switch /Applications/Xcode.app ```

gradle command

### task一覧 ``` ./gradlew tasks [--all] ``` ### run test (Unit Test) ``` ./gradlew test ``` debugだけ ``` ./gradlew testDebugUnitTest ``` ### run androidTest (Instrumentation Test) ``` ./gradlew connectedAndroidTest ``` debugだけ ``` ./gradlew connectedDebugAndroidTest ``` ### projectの依存関係を表示する ``` ./gradlew -q dependencies app:dependencies --configuration compile ```

memory usage on ubuntu

Ubuntuのメモリ使用状況の見方について サーバ触らなすぎていつも忘れるのでメモっておく ## free メモリの使用状況を表示(単位はKB) ``` $ free total used free shared buffers cached Mem: 3521664 3183148 338516 292 135528 1904476 -/+ buffers/cache: 1143144 2378520 Swap: 2097148 488 2096660 ``` * Mem: * total 実メモリの全容量 * used 実メモリの使用容量 * free 実メモリの空き容量 * shared 共有メモリ容量 * buffers バッファメモリ容量 厳密には違うけどページキャッシュと大体同じ * cached ページキャッシュメモリ容量 * -/+ buffers/cache: * used = used - buffers - cached **キャッシュ以外で実際に使っている使用容量** * free = free + buffers + cached **キャッシュを含めた空き容量** * Swap: * total swapの全容量 * used swapの使用容量 * free swapの空き容量 見るべきところはキャッシュを計算した後の値 used = 1143144 = 1.1GB free = 2378520 = 2.4GB Swap はメモリ上であまり使われなくなったデータがファイルに退避されたものなのであんまり気にしなくて良い ### 各メモリについて * 共有メモリ 複数のプログラムが同時並行的にアクセスするメモリ * ページキャッシュメモリ ファイルのページをキャッシュするメモリ * バッファメモリ 厳密には違うけどページキャッシュと大体同じ ## 参考 * free, vmstat コマンドについて http://qiita.com/shinyashikis@github/items/7eb33f22cc6ad02f37ea * free の見方 http://www.math.kobe-u.ac.jp/HOME/kodama/tips-free-memory.html * バッファ、ページキャッシュの違い http://b.l0g.jp/linux/buffercache-and-page-cache/

Use custom cask settings

強制的に独自の cask の設定を使用する時のメモ ## Prepare https://github.com/fiahfy/homebrew-fix/blob/master/Casks/android-sdk.rb repository を作成し対象の cask を作成する ## Install 下記のコマンドを代わりに実行する ``` # brew install caskroom/cask/android-sdk brew cask install fiahfy/fix/android-sdk ```

Gym error "Locating signing assets failed."

Xcode9 で match の app_identifier に複数設定すると gym で Provisioning profile をうまく使ってくれない `Fastfile` ``` match( type: "appstore", username: "xxxxx", app_identifier: [ "yyyyy", "zzzzz", ], ) ``` log ``` 2017-08-02 10:24:21.934 xcodebuild[2839:15197] [MT] IDEDistribution: Step failed: <IDEDistributionSigningAssetsStep: 0x7f921e794ca0>: Error Domain=IDEDistributionSigningAssetStepErrorDomain Code=0 "Locating signing assets failed." UserInfo={NSLocalizedDescription=Locating signing assets failed., IDEDistributionSigningAssetStepUnderlyingErrors=( : ``` 1つずつ指定すればOK(微妙 ``` match( type: "appstore", username: "xxxxx", app_identifier: "yyyyy", ) match( type: "appstore", username: "xxxxx", app_identifier: "zzzzz", ) ``` https://github.com/fastlane/fastlane/pull/9432

match error "Provisioning profile 'xxxxx' is not available on the Developer Portal"

### pattern 1 ``` [08:23:25]: Provisioning profile 'xxxxx' is not available on the Developer Portal [08:23:25]: for the user yyyyy [08:23:25]: Make sure to use the same user and team every time you run 'match' for this [08:23:25]: Git repository. This might be caused by deleting the provisioning profile on the Dev Portal : [08:23:27]: To reset the provisioning profiles of your Apple account, you can use the `fastlane match nuke` feature, more information on https://github.com/fastlane/fastlane/tree/master/match ``` 上記のエラーが出て Provisioning profile の作成ができなくなった場合 `force: true` で強制的に上書きできる ``` match( type: "development", readonly: false, force: true, app_identifier: [ "zzzzz", ] ) ``` ### pattern 2 ``` [10:06:45]: Installing provisioning profile... [10:06:46]: Provisioning profile 'xxxxx' is not available on the Developer Portal for the user yyyyy, fixing this now for you 🔨 : [10:06:46]: Starting login with user 'yyyyy' Available session is not valid any more. Continuing with normal login. [10:06:48]: Successfully logged in [10:06:48]: Fetching profiles... [10:06:49]: Verifying certificates... [10:06:49]: No existing profiles found, that match the certificates you have installed locally! Creating a new provisioning profile for you [10:06:51]: Creating new provisioning profile for 'xxxxx' with name 'match Development xxxxx' for 'ios' platform [10:06:52]: An error occurred while verifying your certificates and profiles with the Apple Developer Portal. [10:06:52]: If you already have your certificates stored in git, you can run `fastlane match` in readonly mode [10:06:52]: to just install the certificates and profiles without accessing the Dev Portal. [10:06:52]: To do so, just pass `readonly: true` to your match call. Looking for related GitHub issues on fastlane/fastlane... Found no similar issues. To create a new issue, please visit: https://github.com/fastlane/fastlane/issues/new Run `fastlane env` to append the fastlane environment to your issue [!] Apple provided the following error info: There were errors in the data supplied. Please correct and re-submit. Multiple profiles found with the name 'match Development xxxxx'. Please remove the duplicate profiles and try again. ``` まず 管理ユーザに `App Manager` or `Admin` 権限があるかどうか確認 問題なければ Dev Portal 上の該当 profile を削除してから再度作成する ``` match( type: "development", readonly: false, app_identifier: [ "zzzzz", ] ) ``` ## 参考 * https://github.com/fastlane/fastlane/issues/14252

Update Ionic 2.3.0 to 3.5.3

## Update CLI CLIのバージョンを上げておく ``` $ sudo nom i -g ionic cordova ``` ## Update Ionic 3 packageをupgrade ```js "dependencies": { "@angular/common": "4.1.3", "@angular/compiler": "4.1.3", "@angular/compiler-cli": "4.1.3", "@angular/core": "4.1.3", "@angular/forms": "4.1.3", "@angular/http": "4.1.3", "@angular/platform-browser": "4.1.3", "@angular/platform-browser-dynamic": "4.1.3", "@ionic-native/core": "3.12.1", "@ionic-native/splash-screen": "3.12.1", "@ionic-native/status-bar": "3.12.1", "@ionic/storage": "2.0.1", "ionic-angular": "3.5.3", "ionicons": "3.0.0", "rxjs": "5.4.0", "sw-toolbox": "3.6.0", "zone.js": "0.8.12" }, "devDependencies": { "@ionic/app-scripts": "2.0.2", "typescript": "2.3.4" } ``` `BrowserModule` を import, `Http` を利用している場合は `HttpModule` も import `app.module.ts` ```typescript import { BrowserModule } from '@angular/platform-browser'; import { HttpModule } from '@angular/http'; ... imports: [ BrowserModule, HttpModule, IonicModule.forRoot(MyApp) ], ``` * https://github.com/ionic-team/ionic/blob/master/CHANGELOG.md#300-2017-04-05 `src/index.html` に `vender.js` を追加 ``` <!-- The polyfills js is generated during the build process --> <script src="build/polyfills.js"></script> <!-- The vendor js is generated during the build process It contains all of the dependencies in node_modules --> <script src="build/vendor.js"></script> <!-- The bundle js is generated during the build process --> <script src="build/main.js"></script> ``` `src/service-worker.js` に `vender.js` を追加 ``` './build/main.js', './build/vendor.js', './build/main.css', ``` ## Update Ionic Storage 2.0.1 `IonicStorageModule` を import `app.module.ts` ```typescript import { IonicStorageModule } from '@ionic/storage' ... imports: [ BrowserModule, HttpModule, IonicModule.forRoot(MyApp), IonicStorageModule.forRoot() ], ``` `Storage` を Inject して使用するように変更 ```typescript import { Storage } from '@ionic/storage'; export class MyApp { constructor(private storage: Storage) { } ... } ``` * https://ionicframework.com/docs/storage/ ## Update Ionic Native 3.x pluginを別々インストールするように変更されたので、必要なpluginを `package.json` に追加する ```js "dependencies": { ... "@ionic-native/status-bar": "3.12.1", } ``` 対象pakcageをimportし、Injectして使用するように変更 ```typescript import { StatusBar } from '@ionic-native/status-bar'; export class MyApp { constructor(private statusBar: StatusBar) { } ... } ``` ## Others ### Replace template to ng-template `template` が deprecated なので `ng-template` に変更 ``` <ng-template [ngIf]="..."> ... </ng-template> ``` ### Ionic CLI configs ionicコマンドでconfigを変えて実行している場合はそのconfigも修正する ``` $ ionic build ios -w ./config/webpack.config.js ``` ## Errors ### `Cannot read property 'filter' of undefined` on building (deeplinks) `app.module.ts` を確認 `@NgModule` に設定する各値を変数で代入するとエラーが発生する 直接指定すればOK ``` // NG @NgModule({ declarations: declarations, imports: imports, bootstrap: [IonicApp], entryComponents: entryComponents, providers: providers, }) // OK @NgModule({ declarations: [ ... ], imports: [ ... ], bootstrap: [IonicApp], entryComponents: [ ... ], providers: [ ... ], }) ``` ### `TypeError: Path must be a string. Received true` on building (uglifyjs) typescript が `target: 'es5'` でtranspileされてない可能性 `tsconfig.js` の確認と `es6` の場合は babili か uglify-es を利用する ### Http request failed `undefined is not an object (evaluating 'o.apply')` wkwebview engine を最新にしてみる ### `Error: Cannot read property 'replace' of undefined` on starting iOS simulator 最新の `cordova-ios` だとダメみたいなので別branchを利用する ``` $ ionic cordova platform add https://github.com/apache/cordova-ios.git#4.4.0-ios-sim ``` ## Note どうしてもダメな場合は `ionic start` でv3プロジェクトを作成して比較するか https://github.com/ionic-team/ionic-conference-app を参考に比較して見るとなんとなるかも ## 参考 * https://github.com/ionic-team/ionic/blob/master/CHANGELOG.md

Database design

## Table ### Naming Rule #### Use lower case + snake case users // OK user_categories // OK USERS // NG Users // NG userCategories // NG #### Use the plural users // OK user // NG #### n:n table ex. related users and images users_images // OK ## Column ### Required Columns id // Primary key(auto increment) created_at updated_at ### Naming Rule #### Use the noun title // OK description // OK #### Others table id ex. id on users table user_id // OK users_id // NG #### datetime posted_at // OK post_time // NG #### boolean published // OK publish_flag // NG ## Index ### Naming Rule #### Index `idx_<table>_XX` idx_users_01 // OK #### Unique Index`ui_<table>_XX` ui_users_01 // OK ## Others ### DO NOT logical deletion deleted_at // NG deleted // NG ### DO NOT create composite primary keys Use `id` for primary key ### DO NOT use foreign key basically ## MySQL ### type Use `bigint` for number Use `varcher` for string Use `datetime` for date Use `tinyint` for boolean ### autoupdate for created_at, updated_at #### `created_at` ``` `created_at` datetime NOT NULL DEFAULT CURRENT_TIMESTAMP ``` #### `updated_at` ``` `updated_at` datetime NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP ```

Meaningful Links for Ionic2/Cordova

##Implements * Template for starting Ionic 2 apps, used by the Ionic CLI https://github.com/driftyco/ionic2-app-base * Click Delays http://ionicframework.com/docs/v2/faq/#click-delays * Stick list headers https://forum.ionicframework.com/t/stick-list-headers/68818 * Navigation Controller within Modal https://forum.ionicframework.com/t/navigation-controller-within-modal/45302/3 * Zoom on image in Ionic 2? https://forum.ionicframework.com/t/zoom-on-image-in-ionic-2/45910/21 https://gist.github.com/vazad28/bd7ff445b090ab130ff1b291ca057002 ### VritualScroll, InfiniteScroll * VirtualScroll + InfiniteScroll scrolls top when reaching list bottom https://github.com/driftyco/ionic/issues/6423 * feat(infinite): add scroll in opposite direction https://github.com/driftyco/ionic/pull/8099 * Ionic2 two way infinite scroll component example https://github.com/lujakob/ionic-infinite-scroll-example * InfiniteScroll and ensuring there is "enough" data https://github.com/driftyco/ionic/issues/6341 * RC4: VirtualScroll disappears after data update, if has been scrolled before https://github.com/driftyco/ionic/issues/9722 ### Input * v2 feature request - autoresize on ion-textarea https://github.com/driftyco/ionic/issues/7193 * issue(forms): Input, scrolling, keyboard issues for forms https://github.com/driftyco/ionic/issues/6228 ### CLI * Feature request: Ionic 2 (dev/prod) environment variables configuration https://github.com/driftyco/ionic-cli/issues/1205 * [ionic-cli@2.1.4] ionic emulate ios --target parameter not working https://github.com/driftyco/ionic-cli/issues/1756 * Current working directory is not a Cordova based project https://github.com/driftyco/ionic-cli/issues/935 ## Plugin ### Storage * Ionic 2 storage doesn’t have query method https://github.com/driftyco/ionic/issues/8269#issuecomment-250869481 ### WKWebView * Cordova iOS Performance Improvements: Drop-in Speed with WKWebView http://blog.ionic.io/cordova-ios-performance-improvements-drop-in-speed-with-wkwebview/ * Handling CORS issues in Ionic http://blog.ionic.io/handling-cors-issues-in-ionic/ * CORS issues https://github.com/driftyco/cordova-plugin-wkwebview-engine/issues/3 ### InAppBrowser * Launch External URLs with IonicFramework https://www.thepolyglotdeveloper.com/2014/07/launch-external-urls-ionicframework/ * CB-3360: Set custom inappbrowser user agent for ios https://github.com/apache/cordova-plugin-inappbrowser/pull/94 * CB-12366: (ios) Reduce tmpWindow level to prevent overlapping statusbar https://github.com/apache/cordova-plugin-inappbrowser/pull/209 ### Photo Library * https://github.com/domax/cordova-plugin-photos * https://github.com/terikon/cordova-plugin-photo-library * https://github.com/subitolabs/cordova-gallery-api * https://github.com/glowmar/phonegap-plugin-assetslib ### Fabric * How to send all error messages to Plugin https://github.com/sarriaroman/FabricPlugin/issues/70 ### BackgroundFetch https://github.com/transistorsoft/cordova-plugin-background-fetch ## Build * error : ionc build ios or android, uglifyjs failed: SyntaxError: Unexpected token: operator (>) https://github.com/driftyco/ionic-app-scripts/issues/239#issuecomment-256064022 ### iOS * ionic run ios --device fails with Error code 65 for command: xcodebuild (xcode 8) https://github.com/driftyco/ionic/issues/8464#issuecomment-251335408 ## Deploy ### Fastlane * Fastfile for Cordova App https://github.com/platanus/fastlane-cordova/blob/master/fastlane/Fastfile * Use xcodebuild (Xcode 8) and automatic signing in CI (Travis/Jenkins) environments http://stackoverflow.com/questions/39500634/use-xcodebuild-xcode-8-and-automatic-signing-in-ci-travis-jenkins-environmen * Automating Cordova Workflow: xcodebuild Hangs During iOS Build http://moduscreate.com/cordova_xcodebuild_hangs_freezes_during_build/ * Got Code signing is required for product type 'Application' in SDK 'iOS 10.1 https://github.com/fastlane/fastlane/issues/6832 * `ProvisioningStyle` value not present in project.pbxproj https://github.com/hjanuschka/fastlane-plugin-update_project_codesigning/issues/4 ### CircleCI * CircleCI-Scripts https://github.com/bamlab/CircleCI-Scripts