The sky is the limit

ハイブリッドアプリ開発、PWAなど効率の良いiOSアプリ、Androidアプリ開発の情報を共有したい。アプリ開発は楽しい。【PWA、AngularJS、Monaca、Cordova、OnsenUI】

【Vue.js】勉強しながらVue.jsでPWAを作ってみる - Vuexの導入 -

【Vue.js】勉強しながらVue.jsでPWAを作ってみる - Vuexの導入 - 前回はプロジェクト作成まで実施して、実装に入ろうと考えたが、状態管理のためにVuexを導入しようと思います。 使用したPWAテンプレート(vue-pwa-boilerplate)には、Vuexがはいっていない…

【Vue.js】Vuexを導入して、データの状態変化管理を簡単にする【Vuex】

【Vue.js】Vuexを導入して、データの状態変化管理を簡単にする【Vuex】 今回はVuexを学びます。 Vuexは簡単にいえば、「コンポーネント間のデータのやり取りを簡単にするもの」です。 いままで、コンポーネント間のデータのやり取りは以下の記事のようにやっ…

【Vue.js】勉強しながらVue.jsでPWAを作ってみる - プロジェクト作成 -

【Vue.js】勉強しながらVue.jsでPWAを作ってみる - プロジェクト作成 - そろそろPWAへの理解を深めないとダメだなと思ったので、Vue.jsでPWAを作成します。 勉強しながらなので、間違っている箇所もあるかと思いますがご了承ください。作成するものは、ハイ…

【Vue.js】親Componentのデータ値を子Componentで変更する【$emit】

今回はVue.jsで、親Componentのデータ値を子Componentで変更する方法を記載します。

【Vue.js】デフォルト要素名と重複したコンポーネント名を指定した場合

【Vue.js】デフォルト要素名と重複したコンポーネント名を指定した場合 例えば、コンポーネントの名前に「menu」とつけた場合はこんなエラーが出ます。 Do not use built-in or reserved HTML elements as component id: menu 要するに、「デフォルトの要素…

【html5】indexedDBの使い方

【html5】indexedDBの使い方 今回は、次回のハイブリッドアプリ開発で使用を考えているindexedDBを学びます。 indexedDBの実装内容 うまく表示されない場合はリロードをお願いします。See the Pen indexedDB by duotaro (@duotaro100) on CodePen. indexedDB…

【Vue.js】component要素を使って画面切り替え【VueRouterを使わない】

【Vue.js】component要素を使って画面切り替え【VueRouterを使わない】今回はVueRouterを使わないで、画面を切り替える方法として、component要素を使ってます。

LocalStorageを使って一回しか投票できないようにする - 【PHP】phpでDB不要のアンケート機能を作成する

【PHP】phpでDB不要のアンケート機能を作成する LocalStorageを使って一回しか投票できないようにする 前回はこちら www.sky-limit-future.com 今のままだと、誰でも何回も投票できるので困る。 もちろん一人が何票も入れることができるというアンケートもい…

アンケートに答えた内容をグラフにすぐ反映する - 【PHP】phpでDB不要のアンケート機能を作成する

【PHP】phpでDB不要のアンケート機能を作成する アンケートに答えた内容をグラフにすぐ反映する 前回はこちらwww.sky-limit-future.com 前回は解説のためにindex.phpとfile.phpを分けたけど、index.phpに全て統合する。 前回の内容ではsubmitした時にしかグ…

phpの値をjavascriptで受け取って、Chart.jsでグラフ描画【円グラフ】 - 【PHP】phpでDB不要のアンケート機能を作成する

【PHP】phpでDB不要のアンケート機能を作成する phpの値をjavascriptで受け取って、Chart.jsでグラフ描画【円グラフ】 前回はこちらwww.sky-limit-future.com Chart.jsは2.1を使用する。 今回はCDNを利用。 file.phpに以下を追加。 ・chart.js呼び出し ・グ…

ファイルから取得したPHPの値をjavascriptに渡す - 【PHP】phpでDB不要のアンケート機能を作成する

【PHP】phpでDB不要のアンケート機能を作成する ファイルから取得したPHPの値をjavascriptに渡す 前回はこちらwww.sky-limit-future.comphpの変数をjavascriptで受け取る。 その方法はこれ。 受け渡すデータが「$data」の場合。 var array = ; これをfile.ph…

フォームデータをファイルに書き込む/出力する - 【PHP】phpでDB不要のアンケート機能を作成する

【PHP】phpでDB不要のアンケート機能を作成する フォームデータをファイルに書き込む/出力する 前回はこちら www.sky-limit-future.com アンケート結果をファイルに書き込んで、その値を出力する。 ファイル操作をfile.phpで実施。 index.phpはアンケートの…

form外のボタンをクリックしてsubmitさせる方法 -【PHP】phpでDB不要のアンケート機能を作成する

【PHP】phpでDB不要のアンケート機能を作成する form外のボタンをクリックしてsubmitさせる方法 まずは、選択肢と投票ボタンを作成する。 formにはhidden項目を用意しておいて、押されたボタンのテキスト(idでもいいけど)をhidden項目に設定して$_POST変数に…

【PHP】phpでDB不要のアンケート機能を作成する【Chart.js/LocalStorage/jQuery/ファイル】

【PHP】phpでDB不要のアンケート機能を作成する【Chart.js/LocalStorage/jQuery/ファイル】 ■やりたいこと DBを使わないでアンケートを実装したい アンケート結果をファイルで管理する 一つのアンケートに対して、一人一回の投票制御をつける(LocalStorage) …

【人工知能のつくりかた】ゼロから作るDeepLearningの読み方【Python】

【人工知能のつくりかた】ゼロから作るDeepLearningの読み方【Python】 今回は、DeepLearning入門に必須の「ゼロから作るDeepLearning - Pythonで学ぶディープラーニングの理論と実装 -」の読み方について。 人工知能、機械学習に興味あるけど何からやったら…

【Vue.js】Vue.jsでstyleをv-bind【v-bind:style】

【Vue.js】Vue.jsでstyleをv-bind【v-bind:style】Vue.jsでstyleに対してバインディングの実装をしてみた。 以下はコンポーネント内でも使っているサンプル。 これで動的にスタイル変更も可能。 本来はstyleではなく、classでやったほうがよさそうだけど。 <html lang="ja"> <head></head></html>…

【WebStorage】LocalStorageとSessionStorageの使い方

【WebStorage】LocalStorageとSessionStorageの使い方 LocalStorageとSessionStorageの使い方を忘れかけていたのでまとめた。 最初にリリースしたアプリはLocalStorageを使っていたが、端末によっては結構重いという情報があった。 IndexedDBのほうがいいら…

【css】よく使う色メモ

【css】よく使う色メモcssでよく使う色のメモ。 毎回調べるのがめんどうなので。See the Pen css-color by taro yamauchi (@duotaro100) on CodePen.

【Vue.js】モーダルを使ったパスワード画面の実装【モーダル・LocalStorage・SessionStorage】

【Vue.js】モーダルを使ったパスワード画面の実装【モーダル・LocalStorage・SessionStorage】 ■やりたいこと パスワードが設定されていたら入力画面を開く パスワード入力画面はsessionが残っている場合は開かない LocalStorageとSessionStorageを使用する …

【Vue.js】Vue.jsでToDoアプリ作成【LocalStorage】

【Vue.js】Vue.jsでToDoアプリ作成【LocalStorage】 Vue.jsで簡単なToDoアプリ作った。■やりたいこと Vue.jsはCDNを使用(npm上の最新) 単一ファイルコンポーネントは使用しない LocalStorageに保存する 実装内容 うまく表示されない場合は画面リロードで。Se…

【人工知能のつくりかた】機械学習を実装するときのNumpyの役割・仕事は?【Numpy/機械学習】

【人工知能のつくりかた】機械学習を実装するときのNumpyの役割・仕事は?【Numpy/機械学習】 前々回、Numpyの基本を勉強した。 www.sky-limit-future.comよく機械学習にはNumpyが必要とか聞くけど、Numpyだけを学んでいてもそれはわからない。 なので、今回…

【人工知能のつくりかた】ANACONDAの導入とMatplotlib(グラフ描画・可視化)の学習【ANACONDA/Matplotlib】

【人工知能のつくりかた】ANACONDAの導入とMatplotlib(グラフ描画・可視化)の学習【ANACONDA/Matplotlib】 ANACONDAの導入 機械学習のための環境としてANACONDAがあるが、結構重いのでオススメしない人も多い。 けど、その分必要なものはほとんど揃ってい…

【人工知能のつくりかた】Numpyを学ぶ【Python/Numpy】

【人工知能のつくりかた】Numpyを学ぶ【Python/Numpy】

【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.js】Vue.jsで共通ヘッダーを作る【header】

【Vue.js】Vue.jsで共通ヘッダーを作る【header】 もともとのソースは、以下の手順で取得してきたもの。 作業したい箇所で以下を実施。 (npmはインストール済みであるとして進める) vue-cliをインストール $ npm install -g vue-cli プロジェクトを作成 $ vu…

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

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