Blogブログ

便利なBootstrapをsassでカスタマイズしたのでその記録。 githubで作ってくれている人がいる。流石！ https://github.com/alademann/sass-bootstrap まずはインストール。 $ bower install sass-bootstrap-compass   ダウンロードされたsass-bootstrap-compass/には、examples/が入っている。 このうち適当なものを複製して使っていく。 同じくsass-bootstrap-compass/に、sass-bootstrap-dist.zipがある。 js,imgを使うので解凍し、dist/へ突っ込む。   ※ここはcssのカスタマイズのログになります。 bootstrapのsassの構成 sass-bootstrap.scss が各モジュール専用のscssファイルをimportしているよう。 ここで必要・不要なものの調整が出来ますね。   // Compass utilities @import "compass"; // Core variables and mixins @import "variables"; @import "mixins"; // Reset @import "normalize"; @import "print"; // Core CSS @import "scaffolding"; @import "type"; @import "code"; … 色の変更 インクルードされているファイルの、_variables.scssで変更が出来そう。 例えば.navbar-inverseがデフォルトでは#222222なのでこれを変えたい場合、_variables.scssで"navbar-inverse"を探してやればOK。 ※変数がわからなければ_navbar.scssを探すなど

ブログをやっていて、過去に書いた内容が古くなっていたりする事はありませんか？ 過去の記事を全て見るのは、ちょっと手間ですね。 そこで便利なのが、「Alert Post is Old」。 年数を設定しておくと、自動的にアラート表示を出してくれます。 こんな感じに。   管理画面では、アラート文、年数、投稿タイプが選択出来ます。（カスタム投稿タイプは未検証） 日々更新されるウェブ上のコンテンツ、古い記事には一言注意書きも大切です！ via: https://wordpress.org/plugins/alert-post-is-old/

wordpressのテーマ・プラグインファイル内でデバイス判定を行ないたいとき。 Wordpressは既にグローバル変数として、ブラウザやデバイス判定が可能な変数を持っています。   $is_iphone (boolean) iPhone Safari $is_chrome (boolean) Google Chrome $is_safari (boolean) Safari $is_NS4 (boolean) Netscape 4 $is_opera (boolean) Opera $is_macIE (boolean) Mac Internet Explorer $is_winIE (boolean) Windows Internet Explorer $is_gecko (boolean) FireFox $is_lynx (boolean) $is_IE (boolean) Internet Explorer

スマホコーディングなど、「軽量化！軽量化！」と叫ばれる中でNo jQueryが求められる事がある。 そんなときには要素の高さをそろえる位は、jquery を使わずにやってしまいたい。   １．javascriptで、getElementsByClassNameが必要。 function myGetElementsByClassName (_class , _tag , _id) { var targetId , elementList , classList , i , j , nodes = []; targetId = document.getElementById(_id); elementList = targetId.getElementsByTagName(_tag); for (i=0; i < elementList.length ; i++ ) { classList = elementList[i].className.split(" "); for (j=0; j < classList.length ; j++ ) […]

タイトルどおりの事がしたく、調べてみるととても簡単だったのでメモ。 wp_localize_scriptというタグを使います。 たとえばphpから下のようにjsを読ませて、 wp_register_script( ‘sample’, get_path . ‘/js/sample.js’, “”,true); wp_enqueue_script( ‘sample’ ); wp_localize_scriptを追加します。こんな形になります。 wp_register_script( ‘sample’, get_path . ‘/js/sample.js’, “”,true); wp_enqueue_script( ‘sample’ ); $variable_array = array( ‘hoge’ => ‘huga’); wp_localize_script( ‘sample’, ‘variable_array ‘, $variable_array ); すると、sample.js側ではvariable_array オブジェクト無いのhoge を取ることができます。 console.log(variable_array.hoge); ワードプレスのテーマ内のJSでajaxする時などによく使っています。

とても便利なjsライブラリを見つけました。 https://github.com/ded/bonzo クラスの判定をjQueryでやりたくない時、でもやっちゃう時結構あった。 これからはこれを使おう。 使い方も超簡単。 classie.has( elem, ‘my-class’ ) -> true/false classie.add( elem, ‘my-new-class’ ) classie.remove( elem, ‘my-unwanted-class’ ) classie.toggle( elem, ‘my-class’ )

MP３だけの形式で再生させたいっていう要件があったので、まずはhtml5タグのaudioタグは使えないかと、再生形式について調べてみた。 やっぱり動画同様、OSとブラウザによって再生出来る音声形式がバラバラ。 https://developer.mozilla.org/en-US/docs/HTML/Supported_media_formats PCブラウザだとFirefoxで再生出来ない可能性があるし、モバイルだとandroidでもそう。 ※自分の環境だと再生はされるのだが、、 もう少し具体的にテストした人が居た。 https://www.x-fit.jp/tips/179 こちらも。 http://d.hatena.ne.jp/shinobu_aoki/20110621/1308667618 この様子だと、audioタグだけじゃキツイっぽい。 そして見つけたのがこれ。 jplayer こちらの記事によると、これだけで動作確認出来たっぽい。 Mac：Chrome、Firefox Windows：IE9、IE8（on IE Tester） Android：2.3標準ブラウザ iPod touch：Safari（iOS5） このjplayerを応用した、カッコイイプレイヤープラグインも発見した。 今回はjplayerを使おうと思うが、近々使ってレビューしてみよう。

Backbone.jsのテンプレートにHandlebarを使います。 ただ、Handlebarで問題となるのがコンパイル前の遅さ。 それを補うために、Gruntを使ってプリコンパイルする手法があります。 そのためには.hbsという拡張子でテンプレートファイルを作成して、この内容をgrantを使いtemplate.jsに随時反映させるのが便利です。 先ずはGruntの設定。 Gruntについてはこちら。 Grunt.js コマンドを開き、作業ディレクトリまで進みます。 cd /yourapps/dir/ イニシャライズを行います。 npm init これでpackage.jsonが生成されました。 次にgruntをインストールします。 npm install grunt –save-dev これでnode_modulesというフォルダが生成されました。 次に、プラグインを入れてみます。 package.jsonを編集します。 プラグインはgrunt-contribを使ってみます。 grunt-contribについての詳しい説明はこちら。 grunt-contrib 今回はhandlebarの自動プリコンパイルが目的ですが、それ以外にもcssやjsの圧縮など、便利な機能がたくさんあります。 少し時間がかかるかも知れませんが、一気に入れるには以下のコマンドを実行します。 npm install grunt-contrib –save-dev 個別に入れる場合は、 npm install grunt-contrib-handlebars –save-dev や、 npm install grunt-contrib-watch –save-dev このようにします。 使いなれて、好きなものだけ入れるためには、package.jsonを使うのが便利です。 一度、node_modulesのフォルダを削除します。 そして、devDependencies の項目に、 “devDependencies”: { “grunt”: “~0.4.1”, “grunt-contrib-watch”: “~0.3.1”, “grunt-contrib-cssmin”: “~0.4.2” } […]

gitで差分を取り出したいとき！ 素晴らしいコマンドがあります。 git archive –format=zip –prefix=root/ HEAD `git diff –name-only HEAD HEAD^` -o archive.zip 覚えておこう。 archive コマンドは、 ・ –format=zip　でzip化 ・ –prefix=root/　すると rootというディレクトリに入れてくれる。 ・ -o xxxxx.zip は出力先 ・ HEAD というのは抽出先のコミットのこと 引用元： http://qiita.com/kaminaly/items/28f9cb4e680deb700833

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]; […]