2017-01-01から1年間の記事一覧
Vue.jsでPWAを作ってみる - Vuexの導入 - 前回はプロジェクト作成まで実施して、実装に入ろうと考えたが、状態管理のためにVuexを導入しようと思います。 使用したPWAテンプレート（vue-pwa-boilerplate）には、Vuexがはいっていないので、導入するためには…
Vue.jsにVuexを導入して、状態管理を簡単にする 今回はVuexを学びます。 Vuexは簡単にいえば、「コンポーネント間のデータのやり取りを簡単にするもの」です。 いままで、コンポーネント間のデータのやり取りは以下の記事のようにやっていました。www.sky-li…
【Vue.js】勉強しながらVue.jsでPWAを作ってみる - プロジェクト作成 - そろそろPWAへの理解を深めないとダメだなと思ったので、Vue.jsでPWAを作成します。 勉強しながらなので、間違っている箇所もあるかと思いますがご了承ください。作成するものは、ハイ…
今回はVue.jsで、親Componentのデータ値を子Componentで変更する方法を記載します。
【Vue.js】デフォルト要素名と重複したコンポーネント名を指定した場合 例えば、コンポーネントの名前に「menu」とつけた場合はこんなエラーが出ます。 Do not use built-in or reserved HTML elements as component id: menu 要するに、「デフォルトの要素…
【html5】indexedDBの使い方 今回は、次回のハイブリッドアプリ開発で使用を考えているindexedDBを学びます。 indexedDBの実装内容 うまく表示されない場合はリロードをお願いします。See the Pen indexedDB by duotaro (@duotaro100) on CodePen. indexedDB…
【Vue.js】component要素を使って画面切り替え【VueRouterを使わない】今回はVueRouterを使わないで、画面を切り替える方法として、component要素を使ってます。
【PHP】phpでDB不要のアンケート機能を作成する LocalStorageを使って一回しか投票できないようにする 前回はこちら www.sky-limit-future.com 今のままだと、誰でも何回も投票できるので困る。 もちろん一人が何票も入れることができるというアンケートもい…
【PHP】phpでDB不要のアンケート機能を作成する アンケートに答えた内容をグラフにすぐ反映する 前回はこちらwww.sky-limit-future.com 前回は解説のためにindex.phpとfile.phpを分けたけど、index.phpに全て統合する。 前回の内容ではsubmitした時にしかグ…
【PHP】phpでDB不要のアンケート機能を作成する phpの値をjavascriptで受け取って、Chart.jsでグラフ描画【円グラフ】 前回はこちらwww.sky-limit-future.com Chart.jsは2.1を使用する。 今回はCDNを利用。 file.phpに以下を追加。 ・chart.js呼び出し ・グ…
【PHP】phpでDB不要のアンケート機能を作成する ファイルから取得したPHPの値をjavascriptに渡す 前回はこちらwww.sky-limit-future.comphpの変数をjavascriptで受け取る。 その方法はこれ。 受け渡すデータが「$data」の場合。 var array = ; これをfile.ph…
【PHP】phpでDB不要のアンケート機能を作成する フォームデータをファイルに書き込む/出力する 前回はこちら www.sky-limit-future.com アンケート結果をファイルに書き込んで、その値を出力する。 ファイル操作をfile.phpで実施。 index.phpはアンケートの…
【PHP】phpでDB不要のアンケート機能を作成する form外のボタンをクリックしてsubmitさせる方法 まずは、選択肢と投票ボタンを作成する。 formにはhidden項目を用意しておいて、押されたボタンのテキスト(idでもいいけど)をhidden項目に設定して$_POST変数に…
【PHP】phpでDB不要のアンケート機能を作成する【Chart.js/LocalStorage/jQuery/ファイル】 ■やりたいこと DBを使わないでアンケートを実装したい アンケート結果をファイルで管理する 一つのアンケートに対して、一人一回の投票制御をつける(LocalStorage) …
【人工知能のつくりかた】ゼロから作るDeepLearningの読み方【Python】 今回は、DeepLearning入門に必須の「ゼロから作るDeepLearning - Pythonで学ぶディープラーニングの理論と実装 -」の読み方について。 人工知能、機械学習に興味あるけど何からやったら…
【Vue.js】Vue.jsでstyleをv-bind【v-bind:style】Vue.jsでstyleに対してバインディングの実装をしてみた。 以下はコンポーネント内でも使っているサンプル。 これで動的にスタイル変更も可能。 本来はstyleではなく、classでやったほうがよさそうだけど。 <html lang="ja"> <head></head></html>…
【WebStorage】LocalStorageとSessionStorageの使い方 LocalStorageとSessionStorageの使い方を忘れかけていたのでまとめた。 最初にリリースしたアプリはLocalStorageを使っていたが、端末によっては結構重いという情報があった。 IndexedDBのほうがいいら…
【css】よく使う色メモcssでよく使う色のメモ。 毎回調べるのがめんどうなので。See the Pen css-color by taro yamauchi (@duotaro100) on CodePen.
【Vue.js】モーダルを使ったパスワード画面の実装【モーダル・LocalStorage・SessionStorage】 ■やりたいこと パスワードが設定されていたら入力画面を開く パスワード入力画面はsessionが残っている場合は開かない LocalStorageとSessionStorageを使用する …
Vue.jsとLocalStorageを使ってToDoアプリを作る 今回はVue.jsとLocalStorageを使ってToDoアプリを作りました。■やりたいこと Vue.jsはCDNを使用(npm上の最新) 単一ファイルコンポーネントは使用しない LocalStorageに保存する 実装内容 うまく表示されない場…
【人工知能のつくりかた】機械学習を実装するときのNumpyの役割・仕事は？【Numpy/機械学習】 前々回、Numpyの基本を勉強した。 www.sky-limit-future.comよく機械学習にはNumpyが必要とか聞くけど、Numpyだけを学んでいてもそれはわからない。 なので、今回…
【人工知能のつくりかた】ANACONDAの導入とMatplotlib（グラフ描画・可視化）の学習【ANACONDA/Matplotlib】 ANACONDAの導入 機械学習のための環境としてANACONDAがあるが、結構重いのでオススメしない人も多い。 けど、その分必要なものはほとんど揃ってい…
【人工知能のつくりかた】Numpyを学ぶ【Python/Numpy】
【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が閉じない】 Framework7のf7-panel上にリンクを作成して、表示するページを変更するときに、工夫しないとpanel上にそのページが表示されてしまう。 例えば、以下のようなpanelを用意。 …
【Vue.js】Vue.js/Webpack/Cordovaでアプリ開発 - 改造1 -【Vue.js/Webpack/Cordova】 前回はサンプルコードの動作確認までしたが、今回はそれを自分好みに修正していく。 www.sky-limit-future.com ■修正点 f7-panelの修正 新規ページの作成 新規ページへの…
【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】 今までは、MonacaのクラウドIDEを使用して開発していたが、今回からはVue.jsとwebpackとCordovaを使って、ローカル環境で開発をしていく。 Monacaを使用していた…
【Vue.js】Vue.jsで共通ヘッダーを作る【header】 ここではvue-cliで作成したVue.js + webpackアプリケーションで共通ヘッダーを実装する方法をご紹介しています。 vue-routerも使用しています。もととなるソースは、以下の手順で取得してきたものです。 作…
【正規表現】URLぽい文字列をリンクにして返す【jQuery】 たとえば、コメント欄などの値にURLらしき値が入力された場合、 該当URLだけそのURLのリンクにして、それ以外のURLは中間ページへのリンクにするという対応。 前提条件 ・「http://www.sky-limit-fut…
