備忘録

備忘録

Vue.js + Onsen UI で ページを切り替える方法

JavaScript Vue.js Onsen UI

Ⅰ. はじめに

タイトルの通り「Vue.js + Onsen UI で ページを切り替える方法」です。

Ⅱ. やり方

1. App.vue を書き換える
<v-ons-splitter-content>
  <component :is="$root.currentPage"></component>
</v-ons-splitter-content>
2. main.js を書き換える
import HomePage from './components/HomePage'

const app = new Vue({
  data () {
    return {
      currentPage: [ HomePage ]
    }
  }
}

app.$mount('#app')
3. MenuPage.vue を書き換える
<v-ons-list>
  <v-ons-list-item v-for="x in links" @click="onClick(x.page)" :key="x.link">
  ...
</v-ons-list>

import HomePage from './components/HomePage'
import AboutPage from './components/AboutPage'

export default {
  data () {
    return {
      links: [
        { label: 'HomePage', page: HomePage, icon: 'fa-book' },
        { label: 'AboutPage', page: AboutPage, icon: 'fa-book' }
      ]
    }
  },
  methods: {
    onClick (page) {
      this.$root.currentPage = page
    }
  }
}
実行結果

f:id:kagasu:20170729141953g:plain

Cordova + Vue.js + Onsen UI + ESLint + webpack で helloworld する

JavaScript Vue.js Cordova Onsen UI ESLint webpack

Ⅰ. はじめに

タイトルの通り「Cordova + Vue.js + Onsen UI + ESLint + webpack で helloworld する」方法です。

Ⅱ. やり方

環境準備

1. vue-cliのインストール
npm install -g vue-cli
2. cordovaのインストール
npm install -g cordova
3. Vue.js +Onsen UI + webpack のテンプレートを使って初期化する
vue init OnsenUI/vue-cordova-webpack hello-world
cd hello-world
npm install
4. Cordova で 対象プラットフォームとして Android を追加する
cordova platform add android
// cordova platform add ios
// cordova platform add browser

実行

Cordova で Androidアプリとして実行する
npm run build
cordova run android

// conso.log() のログを見る
// adb logcat | find "CONSOLE"
webpack で Webアプリケーションとして実行する
npm run dev
実行結果

f:id:kagasu:20170729140203p:plain

Vue.js で 子から親のdataにアクセスする

Vue.js JavaScript

Ⅰ. はじめに

タイトルの通り「Vue.js で 子から親のdataにアクセスする」方法です。
この記事の方法でもアクセスできますが、推奨しません。

他componentのデータやメソッド等にアクセスする必要を感じたときはStoreパターンやVuexを学んだ方が良いです。
また、Vuexは大規模アプリのみ良さがあります。小規模でVuexを利用した場合非常に冗長で面倒だと感じます。

Ⅱ. やり方

親 main.js
new Vue({
  data () {
    return {
      hoge: 'abc'
    }
  }
})
子 xxx.vue

階層が深くなればなるほど $parent を増やせばアクセスできます。

export default {
  methods: {
    getParentValue () {
      console.log(this.$parent.$parent.$data.hoge)
    }
  }
}

Ⅲ. ルート要素へアクセスするやり方

// これにアクセスしたい時
new Vue({ ... })

this.$root

右クリックで出てくるSkyDrive Proを消す

Windows

Ⅰ. はじめに

タイトルの通り「右クリックで出てくるSkyDrive Proを消す」方法です。
Office 2013をインストールすると右クリックに出てきます。
f:id:kagasu:20170729082605p:plain

Ⅱ. 消し方

1. 以下のテキストをx.regという名前をつけて保存し、実行する。
Windows Registry Editor Version 5.00

[-HKEY_CLASSES_ROOT\AllFilesystemObjects\shell\SPFS.ContextMenu]

以上です。

ChromeやFireFoxの開発者ツールのブレークポイントを制限する方法

JavaScript

Ⅰ. はじめに

タイトルの通り「ChromeやFireFoxの開発者ツールのブレークポイントを制限する方法」です。

JavaScriptの難読化を行っていてもデバッガの強力な機能を利用して何らかの解析が可能になります。
そういった弱点を潰すことができます。

Ⅱ. やり方1（シンプルな実装）

1. 以下のHTMLをindex.htmlとして保存する
<html>
<body>
<p>Please open developer tools</p>

<script>
setInterval(() => {
  debugger
}, 100)
</script>
</body>
</html>
2. WEBブラウザでindex.htmlを開く
3. 開発者ツールを開く
4. 無限にブレークポイントで止まります。

※結果的に、ブレークポイントを利用したデバッグが不可能になります。
Firefoxの場合、Firefoxのプロセスがフリーズします。（Firefox 54で確認）
f:id:kagasu:20170728002834p:plain

Ⅲ. やり方2（devtools-detectを利用する方法）

1. 以下のHTMLをindex.htmlとして保存する
<html>
<body>
<p>Please open developer tools</p>
<script src="https://sindresorhus.com/devtools-detect/index.js"></script>

<script>
window.addEventListener('devtoolschange', () => {
  while(true) {
    debugger
  }
})
</script>
</body>
</html>

（以下省略）

devtools-detectの動作確認
ブラウザ 結果
Chrome 60 OK
Firefox 54 OK
IE 11 NG

※IEはサポートされていません

留意点
  • devtools-detectを利用して開発者ツールを別ウィンドウとして表示させた場合 devtoolschange イベントは発火しません

参考