Techvenience

Technology × Convenience - Vue / React / Next / Nuxt / ChatGPTなどのIT技術がもたらす便利さをお伝えします。最近はChatGPTなどのAI技術を使ってブログを書いています。

2017-09-01から1ヶ月間の記事一覧

【Vue.js】単一ファイルコンポーネントを使わないVue.jsで、画面間のデータ受け渡し。【ネストルート】

【Vue.js】単一ファイルコンポーネントを使わないVue.jsで、画面間のデータ受け渡し。【ネストルート】 前提 単一ファイルコンポーネントを使わないVue.jsでの実装。 vue-routerを使ってルーティング。 vue.jsとvue-routerはそれぞれcdnを使用。 <script src="https://unpkg.com/vue/dist/vue.js"></script> <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script> やりたい…

【f7-panel】f7-panel上で、別ページのリンクを押下する時の動作【panelが閉じない】

【f7-panel】f7-panel上で、別ページのリンクを押下する時の動作【panelが閉じない】 Framework7のf7-panel上にリンクを作成して、表示するページを変更するときに、工夫しないとpanel上にそのページが表示されてしまう。 例えば、以下のようなpanelを用意。 …

【Vue.js】Vue.js/Webpack/Cordovaでアプリ開発 - 改造1 -【Vue.js/Webpack/Cordova】

【Vue.js】Vue.js/Webpack/Cordovaでアプリ開発 - 改造1 -【Vue.js/Webpack/Cordova】 前回はサンプルコードの動作確認までしたが、今回はそれを自分好みに修正していく。 www.sky-limit-future.com ■修正点 f7-panelの修正 新規ページの作成 新規ページへの…

【Vue.js】src属性を動的に変更するときのパスがよくわからない【未解決】

【Vue.js】src属性を動的に変更するときのパスがよくわからない【未解決】現在、未解決状態。 解決次第追記します。動的にsrc属性の値を変えるために、 <div id="header-back"> <img :src="imageSrc"> </div> <script> export default { data : function(){ return { imageSrc : '../assets/header-back.png' } } } </script> こ…

【ハイブリッドアプリ開発】Vue.jsとwebpackとCordovaでアプリ開発【Vue.js/Cordova/webpack】

【ハイブリッドアプリ開発】Vue.jsとwebpackとCordovaでアプリ開発【Vue.js/Cordova/webpack】 今までは、MonacaのクラウドIDEを使用して開発していたが、今回からはVue.jsとwebpackとCordovaを使って、ローカル環境で開発をしていく。 Monacaを使用していた…

【vue-router】Vue.jsで共通ヘッダーを作る

【Vue.js】Vue.jsで共通ヘッダーを作る【header】 ここではvue-cliで作成したVue.js + webpackアプリケーションで共通ヘッダーを実装する方法をご紹介しています。 vue-routerも使用しています。もととなるソースは、以下の手順で取得してきたものです。 作…

【正規表現】URLぽい文字列をリンクにして返す【jQuery】

【正規表現】URLぽい文字列をリンクにして返す【jQuery】 たとえば、コメント欄などの値にURLらしき値が入力された場合、 該当URLだけそのURLのリンクにして、それ以外のURLは中間ページへのリンクにするという対応。 前提条件 ・「http://www.sky-limit-fut…

【Vue.js】Vue.jsを使ってみた

【Vue.js】Vue.jsを使ってみたAngular派(2系はろくに使ったことないから、Angular派ともいえないが)だった僕が、ついにVue.jsに手を出した。jp.vuejs.orgここに沿って、適当に触ってみた。 <html> <head> <meta charset="utf-8"> <title>Vueチュートリアル</title> <script src="https://unpkg.com/vue"></script> </head> <body> <p>テスト</p> <div id="app"> これは{{me…</div></body></html>

【PWA】プログレッシブ・ウェブアプリとネイティブアプリ/ハイブリッドアプリ/ウェブアプリの違い - 連載 【PWA】プログレッシブ・ウェブアプリ 概要 -

連載 【PWA】プログレッシブ・ウェブアプリ 概要 - 第2回 【PWA】プログレッシブ・ウェブアプリとネイティブアプリ/ハイブリッドアプリ/ウェブアプリの違い前回はプログレッシブ・ウェブアプリ(以下PWA)の概要と個人的な思いを記事にした。www.sky-limit-fut…

【Android版】Android版エミュレータでの動作確認とAdmonb導入【Cordova・Monaca】MonacaのプロジェクトをCordovaのローカルプロジェクトに移行して、Admob導入【Admob・plugin】 PART5

【Android版】Android版エミュレータでの動作確認とAdmonb導入【Cordova・Monaca】MonacaのプロジェクトをCordovaのローカルプロジェクトに移行して、Admob導入【Admob・plugin】 PART5 その5 【Android版】Android版エミュレータでの動作確認とAdmonb導入 …

【Android】SDKインストール後のPATH設定【Mac・.bash_profile】

【Android】SDKインストール後のPATH設定【Mac・.bash_profile】 【Android】SDKインストール後のPATH設定【Mac・.bash_profile】 今回は、Macを使ってAndroidアプリ開発環境に必要な、SDKインストール後のPATHの設定方法を備考録。 .bash_profileの新規作成…