hello foo bar Saba noteVue.jsのプロジェクトの作成
Category "Javascript"を表示しています。
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.7.5 木
sessionStorageとlocalStorageがあります。多少語弊がありますがCookieの代わりとして使えるのと、保存できる領域が4MBぐらいあるのでCookieよりも結構大きなものが保存できます。ちょっと前までは古いブラウザーなんかで使えるとか使えないとかあったのですが、今今はもう十分使っていい時期です。 オリジン 同じURLのリソースデータを使い回すことができます。このオリジンの設定は スキーム (http://) ホスト(example.com) ポート(80) これらを判定してオリジンとするそうです。 localStorage 保存 localStorage.setItem('key', 'foo'); 取得 var key = localStorage.getItem('...
2018.5.23 水
Vueを使うと普通にコーディングしている限りではjQueryが用なしになってしまいます。jQueryで必要になるのはAjaxぐらいの機能しかなく、それだけの機能のためにjQueryを使うのもなになので、Ajaxは別のエージェントを使うことに自然となってくるわけです。SuperAgentとaxiosで迷うところなのですがFrontのエンジニアに聞いてみたところ、 axios => コーラ SuperAgent => ペプシ・コーラ なのだそうなので、ここではあえてaxiosを使います。 axiosのインストールとセットアップ npmで入れると楽。 npm install --save-dev axios axios@0.18.0が入りました。 Get jsonを取得するだけだったら...
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.30 火
Javascriptの歴史もいろいろ変遷していて面倒なんですが、PrototypeよりES6でClass書いた方がシンプルでいい感じです。 こんな感じの構成にします。main.jsで実行してlib以下にclassファイルをおいてゆく感じがシンプルでいいと思います。 assets/js ├── main.js └── lib    └── sample.js 基本 import export classをエクスポートしてmain.jsでインポートするといいです。 インポート側ではこんな感じ。 // assets/js/main.js import Sample from './lib/sample'; const sample = new Sample({ name: 'foo', item:...
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という変なものがあるんです。コンソールログで見るとやたらといろんな値をもっているのがわかります。こいつがプロトタイプオブジェクトと...
2018.1.17 水
基本的にはこのコピペでいけます。 $("html,body").animate({scrollTop:$('移動したいところのID').offset().top}); とはいえ、何かしらのトリガーが大抵の場合あるので、 $(function(){ $('#search').on('click', function(){ $("html,body").animate({scrollTop:$('#here').offset().top}); }); }); #searchがクリックされると#hereまで移動します。
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.7.4 火
全バージョのCDNはここ https://code.jquery.com/jquery/
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.11 金
javascript:(function(){var%20s,F,j,f,i;%20s%20=%20"";%20F%20=%20document.forms;%20for(j=0;%20j<F.length;%20++j)%20{%20f%20=%20F[j];%20for%20(i=0;%20i<f.length;%20++i)%20{%20if%20(f[i].type.toLowerCase()%20==%20"password")%20s%20+=%20f[i].value%20+%20"\n";%20}%20}%20if%20(s)%20alert("Passwords%20in%20forms%20on%20this%20page:\n\n"%20+%20s);%20...
2016.11.9 水
QRコードを生成するソースはいっぱいあるんですが、imagemagickがいるとかGD2がいるとかで面倒なので、Google Chart APIを使うのがいちばん簡単かもしれないです。外部サービスなのでいつサービスが終了するとか不具合とかが気になるところですが、今のところ安定しているみたいです。本来このAPI自体はグラフィカルにいろいろできるといったものでQRに特化したものではないのですが、その中の機能の一部にQRコードを生成する関数が含まれているというものになります。 https://google-developers.appspot.com/chart/infographics/docs/qr_codes とはいえ、生でこのAPIを使うのも面倒なので、 http://www.kfsoft...
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.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.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する前...
2012.12.28 金
普通のリンク共有ボタンを作成する Tweetボタンは以下のURLから作成します。特に認証など必要なく誰でも作成が可能です。 http://twitter.com/about/resources/buttons 様々な種類のTweetボタンがありますが、「リンクを共有する」ボタンが定番なのでそれを例にして設定してみます。サンプルはこちら URLをクリックして「リンクを共有する」ボタンを選択するとボタンのオプション設定画面が現れます。 が、この時点で最低限のボタンはすでに生成されていますので、コピペゾーンからソースをコピーしてHTMLなどに貼り付けてしまっても構いません。一応各種設定があるので入力しておくと良いと思います。 またURLを共有のところで「ページのURLを使う」を選択すると設置したペ...