Nishiaki's Log

ドロワーメニューfixedでヘッダーもfixedなとき

Posted on 2016-03-09

Slidebars使っときーというメモダウンロードすると、examplesフォルダがあるんで、その辺よー見ときーオレfixed-positions.htmlにほぼ答えがあるあとはanimation-styles.htmlも見ときー

IE9対応でwindow.matchMediaが使えない時

Posted on 2016-03-07

完全にこのBlogのこと忘れてた。講座でBlogはーとか言ってて全く書いてないのもアレなんで久々のIE9対応、window.matchMediaも使えない。やり方忘れとったんでメモメディアクエリで表示切り替えしてる部分があると思うので

まあ下記のようなイメージで


$(function() {
  $(window).on('load resize', function(){
    if ( $('#mdContent').is(':visible') ) {
      console.log('md');
    } else if ( $('#smContent').is(':visible') ){
      console.log('sm');
    } else if ( $('#xsContent').is(':visible') ){
      console.log('xs');
    }
  });
});

$(function() {

$(window).on('load resize', function(){

if ( $('#mdContent').is(':visible') ) {

console.log('md');

} else if ( $('#smContent').is(':visible') ){

console.log('sm');

} else if ( $('#xsContent').is(':visible') ){

console.log('xs');

}

});

しかし、タスクランナーとかな慣れきってたのか、直にcssとかゴリゴリ書くの意外と大変

はじめてのCoffeeScript

Posted on 2015-01-12

いまさらながらCoffeeScript書き出している。たった数行の動いているJavaScriptをCoffeeScriptにしようとしたら、動かなかった。公式サイトには、CoffeeScript→JavaScriptはあるが逆はない。ググったら下記のサービス発見

Js2coffee: convert JavaScript code to CoffeeScript
Create a new fiddle – JSFiddle（おなじみ）

それでも解決できなかった。ちなみに下記のようなコード


var myApp = angular.module('myApp', []);

var myController = myApp.controller ('myController',function($scope){
  $scope.change = function(){
    //処理
  }
});

var myApp = angular.module('myApp', []);

var myController = myApp.controller ('myController',function($scope){

$scope.change = function(){

//処理

}

});

色々ググッてみてたら、先人の方のありがたい記録を発見

higuma/angularjs-note

んでこうなって動いた


'use strict'

angular.module('myApp',[])
  .controller 'myController',[
    '$scope'
    ($scope) ->
      $scope.change = ->
        #処理
  ]

'use strict'

angular.module('myApp',[])

.controller 'myController',[

'$scope'

($scope) ->

$scope.change = ->

#処理

]

動いて嬉しかったので、思わずブログに書いた。&よく使いそうなんでメモ。

Bracketsが相当使えるんじゃないかと

Posted on 2014-12-19

SublimeText と恋に落ちてたんであまり触ってなかったんだけど、Brackets は相当使えるように進化していると思うので、しばらくは浮気しようと思います。

Brackets のポイント

Dreamweaver CCのExtract なあれ　PSDデータから色々する奴
クイック編集（インライン要素）

簡単にいえば、デベロッパーツールが凄く賢くなった感じ。

Cmd-Eで該当部分のスタイルとかがインラインで出てくる。

こちらとしては、ファイルのタブも遷移しなくていいので楽。
ライブプレビュー

元々CSSEditを愛してたので、最近の状況に対応したライブプレビューは嬉しい。

タスクランナー設定するまでもないようなモノでもライブプレビュー。

オレオレ設定等

EmmetのExpandをCtrl-Eにした

ちなみに自分はMac。他のエディタでもCtrl-EでExpandしてるんで合わせたかった。

Tabを当ててる人はEmmetの設定で、チェックボックス入れるだけでいい。

キーバインドをSublimeTextと合わせた

https://github.com/adobe/brackets/wiki/User-Key-Bindingsここに書いてある通り

ユーザーキーマップはこうなった

{
        "documentation": "https://github.com/adobe/brackets/wiki/User-Key-Bindings",
        "overrides": {
            "Cmd-Shift-L":     "edit.splitSelIntoLines",
            "Ctrl-Shift-Up":   "edit.addCursorToPrevLine",
            "Ctrl-Shift-Down": "edit.addCursorToNextLine",
            "Cmd-Shift-D":     "edit.duplicate",
            "Ctrl-Shift-K":    "edit.deletelines",
            "Cmd-L":           "edit.selectLine",
            "Cmd-D":           "cmd.addNextMatch",
            "Cmd-Opt-1":       "cmd.splitViewNone",
            "Cmd-Opt-2":       "cmd.splitViewVertical",
            "Cmd-Opt-Shift-2": "cmd.splitViewHorizontal",
            "Ctrl-G":          "navigate.gotoLine",
            "Cmd-Opt-Right":   "navigate.nextDoc",
            "Cmd-Opt-Left":    "navigate.prevDoc",
            "Cmd-R":           "navigate.gotoDefinition",
            "Cmd-P":           "navigate.quickOpen",
            "Ctrl-E":          "io.emmet.expand_abbreviation"
        }
    }

{

"documentation": "https://github.com/adobe/brackets/wiki/User-Key-Bindings",

"overrides": {

"Cmd-Shift-L": "edit.splitSelIntoLines",

"Ctrl-Shift-Up": "edit.addCursorToPrevLine",

"Ctrl-Shift-Down": "edit.addCursorToNextLine",

"Cmd-Shift-D": "edit.duplicate",

"Ctrl-Shift-K": "edit.deletelines",

"Cmd-L": "edit.selectLine",

"Cmd-D": "cmd.addNextMatch",

"Cmd-Opt-1": "cmd.splitViewNone",

"Cmd-Opt-2": "cmd.splitViewVertical",

"Cmd-Opt-Shift-2": "cmd.splitViewHorizontal",

"Ctrl-G": "navigate.gotoLine",

"Cmd-Opt-Right": "navigate.nextDoc",

"Cmd-Opt-Left": "navigate.prevDoc",

"Cmd-R": "navigate.gotoDefinition",

"Cmd-P": "navigate.quickOpen",

"Ctrl-E": "io.emmet.expand_abbreviation"

}

最後の行がEmmetのキーバインドでその他はSublimeTextと合わせる用

エイリアスに追加すると便利:忘れてたので、2015.1.2追記

atomなんかは、何もしなくても、ターミナルから

atom hoge.futa

1	atom hoge.futa

とか

atom .

atom .

とかでatomで開けて便利なんだけど、Bracketsはできない。正しくは、Terminalからファイル名を指定してBracketsを開く – Qiita のようにシェルスクリプトかな？と思って試したけどうまく動いてくれなかった。「じゃあ、単なるエイリアスでいいか」って感じで、.bash_profileに

alias brackets="open -a /Applications/Brackets.app"

1	alias brackets="open -a /Applications/Brackets.app"

って追記した。

brackets hoge.futa

1	brackets hoge.futa

とか

brackets .

1	brackets .

とかでBracketsで開けて便利になった。しかし、bracketsは打つのがダルいな。bra位にするかな。

Sublime Text で括弧の中だけ選択がどうも

Posted on 2014-09-30

完全に自分用のメモ

sublime-expand-region がうまく動かせんな〜って思ってたけど、
しばらくというかずっと放置してました。

今日ちょっと見なおして、
英語キーボードで、Karabiner とか使ってたんで、
どうもcmd+shift+spaceが、言語入力切り替えに取られちゃって

うまく動いてなかったようだったんで、

キーバインド-ユーザ　で

{ “keys”: [“super+shift+m”], “command”: “expand_region” }

ってな具合でspaceの代わりにmで妥協。

node.jsやらnpmやらgruntやらインストールしようとしてはまったのでメモ

Posted on 2014-08-30

もやは何日も前に、インストールしようとしてハマったのでメモ。
※だいぶ前の事なので色々あやふやｗ

結論

Mavericksにしてから、XcodeのCommand Line Toolsがちゃんと入ってなかったらしい。

先に、ちゃんとCommand Line Tools入れないかん！

経緯

Homebrewでnode.jsやらnpmの最新のをインストールしようとしても
ErrorやらWarningだらけでなんのこっちゃ？と

右往左往しよったんですが、
たぶんその間にbrew doctorもしたかもだけど、それらしきこと書いてなかった気がする。

もしかして、MavericksにしてからあんまりHomebrewとかいじってないぞとか思って、

XcodeのCommand Line Tools入れたら、ちゃんとインストールできたって話。

結局、Homebrewごとインストールしなおして、綺麗になったｗ

Twenty Fourteen

Posted on 2014-07-11

Twenty Fourteen 使うなら
Jetpack か Slim Jetpack じゃないの？
タイルギャラリーとかカルーセルとか使いたいやん。

デモで使ってあるやん。

teleportでMacの共有がうまくいかない時とりあえずキャッシュ消せ

Posted on 2013-08-12

これまたタイトルがほぼ全て

teleportで複数のMacの共有がうまくいかないときの対処法 – joker8phoenix’s diary

~/ライブラリ/Caches/以下のファイルをすべて削除

偉大な先人たちに感謝。

WordPress移設するときとか便利なSQL

Posted on 2013-01-03

WordPressもなんやかんや言ってDBからよんで来て表示させてる

もしくは、なんかをDBに入れてるだけなんで、DB何しよるかがポイントWordPress移設したりする用でいつも見ているブログのエントリーWordPressで使える知ってると便利な13のSQL文 | Web活メモ帳テーブルのwp_postsのguidとか見ると、urlが絶対パスで入っとるし↑のブログのは、newとoldの表記がバラついてるんで揃えといてローカルに置いとくと便利。んで検索置換！実際に運用しているブログをローカルで再現する場合は、ローカルのphpのメモリーを上げとかないとphgMyAdminからインポートとかエクスポートできないかもだからphp.iniのmemory_limitとかpost_max_sizeとかupload_max_filesizeとかを上げとけば便利

Sublime Text 2の場合、Zen-CodingよりEmmet

Posted on 2012-10-29

タイトルがほぼ全て
自分の場合、ショートカットが他のエディタと同じ方がいいので特に。
デフォルトでcmd+Eで展開してくれる。
間違ってました。Ctrl+Eだ。深夜に書くとコレだw

Brackets のポイント

Dreamweaver CCのExtract なあれ PSDデータから色々する奴

クイック編集（インライン要素）

ライブプレビュー

オレオレ設定等

EmmetのExpandをCtrl-Eにした

キーバインドをSublimeTextと合わせた

ユーザーキーマップはこうなった

エイリアスに追加すると便利:忘れてたので、2015.1.2追記

結論

経緯

Dreamweaver CCのExtract なあれ　PSDデータから色々する奴