Underscore.jsでは、Array, Object関連の関数にも凄く便利なものがあります。 first initial last rest flatten without union intersection difference uniq zip object indexOf lastIndexOf sortedIndex range first _.first(array, [n]) 配列の最初の値を返します。 (function() { var list = [1, 2, 5, 6, 2]; var x = _.first(list); console.log(x); // => 1 })(); initial _.initial(array, [n]) 配列の最後の要素以外を返します。 (function() { var list = [1, 2, 5, 6, 2]; […]
bind bindAll partial memoize delay defer throttle debounce once after wrap compose bind function をobjectに束縛する。 (function() { var func = function(greeting){ return greeting + this.title }; func = _.bind(func, { title: ‘アンダースコア’ }, ‘titleは’); console.log(func()); })(); bindAll イベントハンドラとして使う予定の関数を、オブジェクトに束縛する partial 引数の部分適用を行う。関数をオブジェクトとして受け渡す時に便利。 (function() { var add = function(a, b) { return a + b; }; var already_added_25 […]
最近見かける事が多くなったjquery プラグイン、またgithubで使われていることで有名な、pjaxを実装してみます。 pjaxとは、pushState + ajax を意味する造語だそう。 そしてpushStateとはHTML5で導入されたURLを操作するAPIのこと。 これを使うことで、ajaxでコンテンツを入れ替えてもページ移動が行われる→ブラウザの進む・戻るボタンが使える、PVが取れる。 さらに重複するコンテンツの読み込みがなくなるので、スムーズな遷移が実現出来て、ウェブサイトやアプリケーションなどのUX向上に繋がります。 https://github.com/defunkt/jquery-pjax 対応ブラウザは以下。 caniuse.com/#search=pushstate pushStateが実装されていない、E9以下では使えません。 まずは静的ページへ実装してみます。 静的ページ内の、#pjax-container内部のコンテンツを入れ替える想定。 サンプル Sample page jquery と、jquery.pjax.jsを読み込んでいます。 その後、mypjax.jsで実装しています。 最初は$.pjaxをコールした後にanimateするような実装だったが、コンテンツが一瞬表示されてから透過を初めてしまうケースがあったので、 animateのコールバックでpjaxするのが吉。 if ($.support.pjax) { $(document).on(‘click’, ‘a’, function(e) { e.preventDefault(); var href = $(this).attr(‘href’); $(‘#pjax-container’).animate({ opacity : 0 }, 300, function(){ $.pjax({ url: href, container : ‘#pjax-container’, fragment : ‘#pjax-container’, timeout : 2000 }); }); […]
WordPress widget カスタマイズ デフォルトテーマ等で、ウィジェットに特定カテゴリの記事リストを追加する。 実装の方法は、テキストウィジェットを追加して、 [get_my_posts slug=”slug名” taxonomy=”タクソノミー名”] このようにショートコードを記載するように出来ると手軽かと思う。 デフォルトでは、ウィジェット内にショートコードは記載出来ないので、 add_filter(‘widget_text’, ‘do_shortcode’); を追加する。 function.phpに以下のコードを追加。 if(!function_exists(“_get_posts_specific”)): function _get_posts_specific($atts) { /* * extractを使って配列で渡されるパラメータを変数に格納。デフォルトの値もここで設定 */ extract( shortcode_atts( array( ‘slug’ => ‘undefined’, ‘taxonomy’ => ‘category’, ‘num’ => 5, ), $atts ) ); $output = “”; $args = array( ‘posts_per_page’ => $num, ‘post_type’ => ‘post’, ‘tax_query’ => array( array( ‘taxonomy’ […]
超便利なjQuery プラグイン、jquery-scrollup-pluginをWPプラグイン化しました。 https://github.com/shnr/wp-jquery-scrollup-plugin 管理画面からオプションを編集可能です。
もともとはこちらを使っていましたが、 wp_ogp_customized_plugin 「OGPタグをサムネイルじゃなく、専用に登録したい。」 「好きな画像をFACEBOOKで表示させたい。」 こんな要望に答えるべく、カスタマイズされたこのプラグインを更にカスタマイズしてみました。 wp-ogp-shnr-customed Activateすると、記事や固定ページのサイドバーに、サムネイルをアップするエリアが出現します。 お試し下さい。
cakePHP 2.4 で、Auto Loginを実装した。 その手順をメモ。 まず、使用したコンポーネントはこちら。 http://milesj.me/code/cakephp/auto-login ただしこれは注意書きにあるように、2.Xでは非推奨になっているので、最新版を下からいただく。 http://milesj.me/code/cakephp/utility こちらをダウンロードして、使うのはContoroller/Component/AutoLoginComponent.php。 ※探してみたところ、こちらにアップデートのお知らせがあった。 http://milesj.me/blog/read/upgrading-ajaxhandler-1.6-3 実装の方法は、上のページと変わらない様だ。 １．AppControllerでComponentの追加。 (username => emailとしてるは、認証時のユーザー名をemailしているため。) public $components = array( ‘AutoLogin’, // 追加 ‘Auth’ => array( ‘authenticate’ => array( ‘Form’ => array( ‘fields’ => array(‘username’ => ’email’) ) ), ‘authorize’ => array( ‘Actions’ => array(‘actionPath’ => ‘controllers’) ) ), ‘Session’ ); ２．loginフォーム（僕の場合はuser/login.ctp）にチェックボックスの追加 echo $this->Form->input(‘auto_login’, […]
ウェブサイトやモバイルサイト、アプリケーションのワイヤー作成に便利な、google document用のテンプレートを集めてみた。 １．Blue wireframe By Ian Channing シンプルで使いやすいワイヤーフレームの雛形。 ２．Wireframe: Front page By Morten Just PC用のランディングページに良さそう。 ３．prefabSOFT – Mockup Template Wireframe PUBLIC #wfkit By Jochen Szostek ECサイトに特化しているようだ。CMSでもいけそう。 ここからはスマホ、タブレット対応のもの。 １．Mobile Phone By Morten Just モバイルサイトのワイヤーに。ブランクのiphone画面に色々なオブジェクトを足していける。 ２．Wireframe: iPad By Tony Hanna iPad等のタブレット型デバイスに対応。 3．iPhone 5 Collection iphone5のフレームが欲しい時はこれ。
problem: フルネーム検索窓で、実際には苗字・名前と分かれているテーブルをそれぞれ検索する為に、分割を行う。 code: $kw = mb_convert_kana($keyword, ‘s’); $kw_arr = preg_split(‘/[\s]+/’, $kw, -1, PREG_SPLIT_NO_EMPTY); print_r($kw_arr); description： $keywordには全角または半角でフルネームが区切られ入力されているとする。（例：田中 太郎、田中 太郎） 1.mb_convert_kanaで全角スペースを半角に変換。 2.preg_splitで正規表現を使って、’/[\s]+/’というように一文字以上の半角スペースで区切る。また、パラメータにPREG_SPLIT_NO_EMPTYを指定してnon-emptyのものだけを返す。 ちなみに、苗字だけの検索窓があったとして、ここに入力された前後のスペースを取り除きたい場合はtrimを使えばよし。 $kw = mb_convert_kana($keyword, ‘s’); $kw = trim($kw);
