Tag javascriptを表示しています。
2019.5.13 月
Vue.jsの醍醐味は双方向バインドを簡単にできるところ。vueで設定したモデル(変数や配列)に変更を加えるというところで、なかなかまとめているサイトがなかったのでまとめてみました。 create (insert) read update delete create html <!--html--> <div id="todoList"> <form> <input type="text" v-model="newItem"> <button v-on:click="createItem">Create</button> </form> ... js new Vue({ el: '#todoList', da...
2018.9.20 木
プロジェクトを作成する 直接vue.jsをダウンロードして読み込む方法もありますがnpmで管理した方が楽です。 vueを使うディレクトリの作成。ここではPROJECT_DIR mkdir -m 755 PROJECT_DIR cd PROJECT_DIR node.jsのバージョンの確認 node -v v9.2.0 vueをnpmでインストールする npm install vue@csp これで準備は完了です。 ソースを書く <!DOCTYPE html> <html> <head> <script type="text/javascript" src="../node_modules/vue/dist/vue.min.js"></sc...
2018.8.22 水
準備 公式ページのインストール方法はこちら nodeが必要です。インストールして使えるようにしておいてください。 $ node -v v9.2.0 当然npmも必要です。 $ npm -v 6.4.1 vue-cliをインストール(してない人だけ) $ npm i -g @vue/cli + @vue/cli@3.0.3 @vue/cliを初期化(してない人だけ) $ npm i -g @vue/cli-init + @vue/cli-init@3.0.2 vueのバージョン確認(してない人だけ) $ vue -V 3.0.0-rc.10 開発ツールの準備。いわゆるAdd-on Vue.js Devtoolsの導入方法と機能まとめ プロジェクトの作成 $ vue init nuxt/star...
2018.8.19 日
API連携という他人様の仕様に従わないといけないというシステムは、どこからどう考えても逆さになっても他人様の仕様に従うしか方法がないということを皆さんよく覚えておきましょう。 Twitter Card validator FB Share debuger ここらでエラーを吐いてくれるのでとても便利。 OGPタグ設定したのに、画像が表示されないよ!って人の応急処置
2018.7.27 金
Windows10 (Local PC) インストール 8.11.3LTSをダウンロードしてインストールします。(2018-07-27現在)インストーラが起動するので楽ちん。すでにインストールされているnode.jsがある場合は上書きされるっぽい。 https://nodejs.org/en/ インストール終わったら、 $ node -v v8.11.3 でバージョン確認して終わり。 npmインストール 入っているかどうか見ておく。入ってなかったら入れる。 $ npm -v 5.6.0 ちょっと古いけどOK。 node.jsのテスト ちょんプロを書いてみる。 // node_test.js var http = require('http'); http.createServer(funct...
2018.7.5 木
sessionStorageとlocalStorageがあります。多少語弊がありますがCookieの代わりとして使えるのと、保存できる領域が4MBぐらいあるのでCookieよりも結構大きなものが保存できます。ちょっと前までは古いブラウザーなんかで使えるとか使えないとかあったのですが、今今はもう十分使っていい時期です。 オリジン 同じURLのリソースデータを使い回すことができます。このオリジンの設定は スキーム (http://) ホスト(example.com) ポート(80) これらを判定してオリジンとするそうです。 localStorage 保存 localStorage.setItem('key', 'foo'); 取得 var key = localStorage.getItem('...
2018.5.23 水
https://jp.vuejs.org/ Vue.jsを触ってみました。Documentがしっかりしているのでほとんど何も準備はいらないです。 Hello Vue! html <div id="app"> {{ message }} </div> vue var app = new Vue({ el: '#app', data: { message: 'Hello Vue!' } }); Hello Vue!が表示されます。 Bladeとの競合 phpのテンプレートエンジンのblade(主にLaravel)ではvueと同じ{{foo}}という使い方に近いかたちで{{$foo}}を使います。全く質の異なるものですが、同じ記号を使うことで競合しPHPの方でエラーが出てし...
2018.2.14 水
jQueryのAjaxってたぶん数年後には死んでるらしい。あのFlashのように! Sourceの入手・ダウンロード このソースをまるごとコピペしてsuperagent.jsとリネーム。 https://wzrd.in/standalone/superagent@latest フルパッケージだとGithubがよし。 https://github.com/visionmedia/superagent 普通に使う まずは普通に使う。 <script src="/js/superagent.js"></script> 普通にGETする。 request .get('/') .end(function(err, res){ console.log(res.text);//レス...
2018.1.23 火
Javascriptのオブジェクトはわかりづらいです。ほんと。普段あんまり書かないので。 Javascriptでオブジェクトを作成する オブジェクトの表現が2つあって、どちらも同じものになります。 var obj = {name: "chinpo"}; console.log(obj); var obj = new Object(); obj.name = "chinpo"; console.log(obj); これどちらも同じ値をもっているんですが、このobjというインスタンスにある値(name: chinpo)は設定したからあるというのはいいんですがprotoという変なものがあるんです。コンソールログで見るとやたらといろんな値をもっているのがわかります。こいつがプロトタイプオブジェクトと...
2017.7.11 火
PHPで絵文字対処 Formに絵文字入力されると困ってしまう場合4バイト文字を削除でいったん対処。その他いい方法あるんでしょうか。 $text = "EMOJI"; // &#x1f63e;とかの絵文字 $text = preg_replace('/[\xF0-\xF7][\x80-\xBF][\x80-\xBF][\x80-\xBF]/', '', $text); 猫ちゃん絵文字はWordpressの場合は「😾」はエディタ上では &#x1f63e; 自動的に変換されますね。 内部的にどうやっているのか全然調べていませんが、Disable Emojisという絵文字を無効化するプラグインの中身を調べると本体調べるより早そう。 Javascriptで絵文字対処 P...
2017.4.9 日
Functionとかユーザー定義関数とかサブルーチンとかいろいろな言い方がありますが、あるまとまったルーチンを整理して書いておいて使うときにその都度呼び出すことができるのは大変有意義なことです。というのも無駄な処理や繰り返し処理などをできるだけ避けるという意味では、プログラムにはもう欠かすことのできない機構なのです。 jQueryではJavascriptと同様の定義方法でFunctionが利用できます。というか全く同じです。 Functionを使う 引数がない場合 特に引数が必要ない場合は以下のように書けます。 [jQuery code] <script type="text/javascript"> $(function(){ changetext(); //Functionを...
2017.3.29 水
あんまりフロントエンド的な仕事しないのですが、時々しないといけないときがあってそういうときに若い子からおしえてもらった備忘録。 すべてを読み込んでから処理。 いろんなパラメータがうまいこと取得できないとか取得できていてもおかしな値だったときには、window.onloadをかませます。 window.onload = function() { doSomething(); // DOM 構築後に実行したい関数の呼び出し }; ブロックのheight()が取得できなくてかなり悶絶しましたが、すべてが読み込まれる前にJSが実行されてしまうと対象のオブジェクトが取得できないということになるそうです。 そういう意味でJavascriptの読み込み自体を付近に書くというのが近年主流になってきた気がしま...
2017.3.9 木
LocalStorage(Web storage)は今では殆ど実用的になってきたので私も使おうかと思います。かなり古いブラウザー使っている人にはたぶん無効になってしまうのでここは仕方のないところですが、スマホ向けのWEBアプリとかだったらだいたい大丈夫かと思います。使い方はCookieより断然楽かも。 LocalStorageが利用できるかどうか確認 if(('localStorage' in window) && (window.localStorage !== null)) { alert('Available'); } else { alert('Not available'); } データの初期化 // init localStorage localStorage.c...
2016.11.28 月
clmtrackr library
2016.11.15 火
しばらく使っていなかったらAjaxが新しくなっておりました。大した違いではないのですが、古い方のsuccess:~error:~という書き方が後方互換でかろうじて動いている感じなので新しい方使った方がいいです。基本的な書き方は、 $.ajax({ url: "xxxx.php", }).done(function(data){ alert('success!!'); }).fail(function(data){ alert('error!!!'); }); という構文になっていて、xxx.phpからの標準出力をAjaxの方で受け取るというようなものになっています。パラメータや値の受け渡しは以前とそんなに変わっていないので直感的にはそのまま使っていい感じになっているようです。jQueyのaj...
2016.11.2 水
exif-jsというのがあって、これでもういいんじゃないかと思います。 sampleにあるindex.htmlを見てみるとだいたいわかります。 var file = data.files[0]; EXIF.getData(file, function(){ var orientation = file.exifdata.Orientation; console.log(orientation); }); ファイル自体を関数に入れて、取り出したいパラメータをメソッドで指定したら取れました。 http://www.moongift.jp/2012/05/20120502-2/ http://wada811.blogspot.com/2014/11/image-upload–previ...
2016.11.2 水
プロトタイプベースオブジェクト指向言語(Prototype Based Object Oriented Language) プロトタイプベースオブジェクト指向言語(Prototype Based Object Oriented Language)というらしいです。実際使ってしまうとオブジェクトっぽいなぁという感じになって非常に使いやすいです。小さなプログラムも含めて使った方が可読性は増します。Javascriptでオブジェクトを使うというかclassでもって名前空間をもった関数を使いまわすという意味では、ベタで書くよりこういう使い方をした方が効率がよいということになります。 Prototypeの雛形 とりあえず例を自分で書いてみた方が早いです。 function Earth() {} Ear...
2016.10.21 金
最近はjsファイルが多すぎて厄介です。requireJSとかあるけどよほど大規模にならないと使わないです。 ヘッダーがもの凄い量になるのでjsは分けてインポートした方が確実にいいです。ヘッダーには以下のように記述して、 <script type="text/javascript" src="./js/import.js"></script> とやって、 import.jsというファイル名で以下のように作成して、配列に読み込むJSファイルの値を書き込んでゆきます。最後の値のコンマをつけちゃうとIEでエラーが出る筈なのでご注意。 function importJS() { if (! new Array().push) return false; var scripts ...
2016.9.7 水
<img src="[IMAGE_FILE_NAME]_off" class="CLASS" > $(function(){ if(0<$(".CLASS").size()){ $(".CLASS").hover(function(){ $(this).attr("src",$(this).attr('src').replace(/_off/,'_on')); },function(){ $(this).attr("src",$(this).attr('src').replace(/_on/,'_off')); }); } });
2016.8.2 火
javascript書いてると[object Object]というのが返ってきて、しかも中身が空という場合にどうやって判定したらよいかというお話です。 var obj = {}; if (Object.keys(obj).length === 0) { console.log(0) } オブジェクトのkeyをとってその長さを取得してというやり方になります。 この場合、オブジェクト自体はあるということになるので中身のkeyで判断しないとダメだというわけです。 if (!Object.keys(obj).length) { console.log(0) } これでもいけるっぽい。
2016.7.25 月
タブレットで見たとき右側が切れたりするときに使うやつ。結構便利。 PCとスマホとタブレットと3つのデザインを作るのが非常に面倒なので、タブレットのデザインをそのままPCのデザインで代用できます。 <script> var ua = navigator.userAgent; if(ua.indexOf('iPad') > 0 || (ua.indexOf('Android') > 0 && ua.indexOf('Mobile') < 0)) { // タブレット document.write('<meta name="viewport" content="width=[PCの幅],user-scalable=no">'); }else...
2016.7.3 日
jQueryだと面倒なバリデーションをかなり楽にやってくれます。これは結構いいかな。Form作る時なんかはこれがいいですね。 Emailのバリデーション よく使う項目なのでコントローラすらいらないというすぐれものです。angular.min.jsを呼んであげるだけであとはHTMLを操作するだけでOKです。 コントローラを使わなくていいのは、AngularJSがすでに内部的にコントローラをもっていてそれにセットされるからです。 <div> <form action="" name="userForm" novalidate> <input type="email" name="email" ng-model="email" required ng-maxlengt...
2016.3.22 火
https://angularjs.org/ 上記公式サイトからダウンロードする。2017年現在1.5.xぐらいが安定版になるかと思われます。2.x.xを試したい人は是非是非というところ。 HTMLのmetaタグのところで普通のJSを同様に読み込む。 <script src="/assets/js/angular.min.js"></script> これで一応準備は整っているのだけど、勿論実際はいろんなライブラリーを使わないとかなりつらい。 GoogleのCDNから直接ひっぱり込むこともできます。バージョンとかは適当に書き直して接続します。 <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.6/...
2016.3.6 日
htmlのheadでリダイレクト metaでリダイレクトできます。htmlファイルそのものにアクセスした際に別のURLへリダイレクトします。同ホスト内の場合はルート相対でパスを書くだけでも大丈夫です。 <meta http-equiv="refresh" content="[秒];URL=[URL/PATH]"> この場合は5秒後に/sp/にジャンプします。 <meta http-equiv="refresh" content="5;URL=/sp/index.html"> Javascriptでリダイレクト 同ホスト内の場合はルート相対でパスだけ書いても大丈夫。 location.href='[URL]'; PHPでリダイレクト echoしたりvar_dumpする前...