Blogブログ

goolge site search, yahoo site searchが廃止になったことで、注目を浴びだしたのが全文検索可能なSAAS。 その一つであるAlgoliaを使ってみる。 what Algolia? https://www.algolia.com/ 検索のみを提供するサービス。 APIは豊富にある。 検索対象とするキーの設定なども容易。 利用例は多く、近いところだとvue。 https://vuejs.org/ 個人であれば無料で月10万コールまで利用出来る。 データの更新なども上限はある。 https://www.algolia.com/pricing/ アカウント作成 無料で作成出来る。 最初にチュートリアルがあり、検索対象カラムの指定や条件の編集方法などが簡単に学べる。 https://www.algolia.com/apps/ARUFSHIXOF/api-keys/all サンプルプロジェクト作成 ライブラリが用意されているvueで実装。 インストール vue init webpack vue_algolia cd vue_algolia npm install npm install algoliasearch –save データの追加 日本語も念の為追加してみる algoliaのダッシュボードから追加。 indicesという項目から進む。 Add recordでjson形式で追加が可能。 試しに、日本語も追加してみる。 https://www.algolia.com/apps/ARUFSHIXOF/explorer/browse/getstarted_actors ビルド~デプロイ cloudfrontに上げてみた。 日本語も問題なく検索できる！ http://dukpd3il98sac.cloudfront.net

new Array() で作成した要素を複数の変数に代入した場合、代入先の要素全てで変更を追跡してしまう。

Vue CLI を使う。 Make devenv by Vue CLI 3 https://cli.vuejs.org/ Install cli. $ npm install -g @vue/cli Create vue project. $ vue create vuetest $ cd vuetest Hot reload setting. $ npm i –only=dev –no-audit && npm i –only=prod && cross-env NODE_ENV=development vue-cli-service serve –open Have a fun! $ npm run serve

<article id=”content” class=”markdown-body”> <h1>jsでajax 3パターン</h1> Javascript function getJSON() { var req = new XMLHttpRequest(); req.onreadystatechange = function() { if(req.readyState == 4 && req.status == 200){ console.log(req.responseText) obj = JSON.parse(req.responseText); console.log(obj) } }; req.open("GET", "myjson.json", false); req.send(null); } getJSON(); vue axios.get('myjson.json') .then( function(response) { console.log(response) }) .catch( function() { console.log(response) }) JQuery var jqxhr = $.getJSON( […]

ここでは実際のケースで使えそうなものをまとめる。 メールアドレス 定義 アカウント名@ドメイン名 .+@.+ アカウント名の先頭は半角英数字 ^[a-zA-Z0-9] アカウント名のに文字目以降は半角英数字または.-_のいづれか １文字のみの場合も考慮して*をつける [a-zA-Z0-9.-_]* ドメイン名の先頭は半角英数字 [a-zA-Z0-9] ドメイン名のに文字目以降は半角英数字または.-_のいづれか [a-zA-Z0-9.-_]+ ドメイン名は必ず.を含め、かつ.で終わらない [a-zA-Z0-9][a-zA-Z0-9\.-_]+\.[a-zA-Z]{2,}$ これを組み合わせると、 var regexp = /^[a-zA-Z0-9][a-zA-Z0-9\.-_]*@[a-zA-Z0-9][a-zA-Z0-9\.-_]+\.[a-zA-Z]{2,}$/; console.log(regexp.test(‘hoge@fuga.com’)) console.log(regexp.test(‘@fuga.com’)) console.log(regexp.test(‘_h.o.g.e@f-uga.com’)) console.log(regexp.test(‘ho._gr..e@fuga.com’)) console.log(regexp.test(‘ho._gr..e@fuga’)) console.log(regexp.test(‘ho._gr..e@fuga.hoge.jp’)) ただし！ メルアドについて完璧な正規表現は無いと言われている。 html5のinput[type=email]でさえ、電子メールの構文を定義するRFC5322対して意図的に違反する仕様となっている。つまり、無理ゲーってこと。 ちなみにHMTL5のinput[type=email]で動くバリデーションはこう。 ^[a-zA-Z0-9\.!#$%&’*+/=?^_'{|}~-]+@[a-zA-Z0-9]+(?:\.[a-zA-Z0-9-]+)*$ 実務では、HMTL5準拠のバリデーションてことで上に従えばよさそうかな。 電話番号 条件 0から始まり、10-11桁 ^0\d[9,10]$ なので、 var regexp = /^0\d{9,10}$/; console.log(regexp.test(‘09088883333’)); console.log(regexp.test(‘79088883333’)); ハイフンを含める場合は、 var regexp = /^0\d{1,3}-\d{3,4}-\d{3,4}$/; console.log(regexp.test(‘79088883333’)); console.log(regexp.test(‘090-8888-3333’)); URL http, httpsで始まる :// […]

なんとなくで使っていた正規表現。 一度ちゃんとまとめてみる。 sandbox https://codepen.io/shnr/pen/ywwLej?editors=1111 表記 二通りある。 コンストラクタ表記 var regexp = new RegExp(‘ABC’); リテラル表記 var regexp = /ABC/ 一般的にはリテラルのほうが好まれる。 検索の実行 exec()と、match()、2つの方法がある。 exec() regexpオブジェクトのメソッド。 match() Stringオブジェクトのmethod var str = ‘hogefuga’; console.log(/gefu/.exec(str)) console.log(str.match(/fuga/)) Options g – グローバル検索 i – 大文字・小文字を区別しない m – 複数行検索 y – 特定の位置から検索 指定方法 リテラルのほうがよく見られる気がする。 var regex = new RegExp(‘ABC’, ‘g’) // or var regex […]

背景画像にLazyLoadをあてれるのかと思って試してみたところ、普通に出来るようでした。 例のpadding-topを使った高さをあわせる方法で、背景画像のサイズもウィンドウに応じて可変します。 スマホの縦に長いページなんかには、画像の読み込みを遅らせられるので有効かも。  

apple風のハンバーガーアイコン製作メモ。 svgは使ってませんが、それっぽく実装するために。 アニメーションはCSS3で制御しています。 クラスに応じて角度を変えたりしているだけですね。 ハンバーガーアイコン以外にも、応用効きそうです。 参考：http://www.elijahmanor.com/css-animated-hamburger-icon/ Thanks!!

メモ代わりに。 jsでfunction_existsのように関数が定義されているかチェックします。 Javascript if( typeof function_name == ‘function’ ){ … 同じ様に、jQueryのプラグインの場合。 jQueryプラグイン if( [‘plugin_name’] || $.fn[‘plugin_name’] ){ …

Youtube, vimeoのAPIにアクセスしてサムネイルを取ってくるツールを作った。 http://tools.shnr.net/tg/ このツールを作る中でやりたかった事が、phpファイルを格納しているlibディレクトリは、基本アクセス不可で、ajaxでアクセス必要なファイルだけを許可するという事。 ディレクトリ配下をアクセス不可にするのはhtaccessにこう記載するだけで簡単。 Order Deny,Allow Deny from all ajaxでアクセスさせる場合、php側にisAjax関数を追加した。 参考：　http://davidwalsh.name/detect-ajax function isAjax(){ if(!empty($_SERVER[‘HTTP_X_REQUESTED_WITH’]) && strtolower($_SERVER[‘HTTP_X_REQUESTED_WITH’]) == ‘xmlhttprequest’) { return true; } return false; } ajaxでアクセスさせるファイルにはこの判定を加えれば、不要なファイルアクセスが避けれそうだ。