Nishiaki's Log

JointsWPでflex

2017-01-27T12:58:00.000+09:00

JointsWPそのままやったら、floatとかなってたんで、検索したら、

Configuring FlexBox/FlexGrid in JointsWP | Foundation Forum from ZURB

これで動いた

WordPress の add_action （子テーマ使ったカスタマイズ）

2017-01-21T11:37:00.000+09:00

もうほぼ、下記のリンク先
【WordPress】子テーマを使ったカスタマイズについて（functions.php編）

functions.phpはstyle.cssとは実行順序が違って、子テーマが先で親テーマがあとみたい。

だもんで、
関数リファレンス/add action - WordPress Codex 日本語版
ここの


add_action( $hook, $function_to_add, $priority, $accepted_args );

$priority で順序指定して上書きすればええんやー

テーマで $content_width とか指定してある時とかこれ使いなさいよ自分

Twenty Seventeen でフロントページのセクションを増やす

2017-01-14T17:24:00.001+09:00

Twenty Seventeen でフロントページのテーマオプションのセクション
デフォルトだと4つ
もっと使いたいんだよねーって検索検索

ありましたー
How to Add Extra Twenty Seventeen Theme Front Page Sections – WPColt

自分の書き方に合わせて


//フロントページ テーマオプションのセクションの数を設定
add_filter( 'twentyseventeen_front_page_sections', 'wpc_custom_front_sections' );
function wpc_custom_front_sections( $num_sections ) {
  return 7; //Change this number to change the number of the sections.
}

ScrollReveal.jsって楽しいよねー

2016-03-22T08:16:00.000+09:00

ScrollReveal 使うと楽しいよねー。

作ってて楽しいのは2系の方かもしれんねー。
HTMLに書いてたし、直感的やもんねー。

height auto でも transitionさせたい

2016-03-22T08:06:00.000+09:00

height: 0; から height: auto; を行ったり来たりとか、
height: Xem; からheight: auto; を行ったり来たりするときにも、transitionかけたいけど効かないじゃないですかー。

冷静に探したらありましたですよ。
CSS3 transition height 0 to auto

max-height にまあ安全な大きめの数値入れとけば一応transitionかかる。
けれども、あまり巨大な数値を入れておくと、
そこから戻ってくるイメージなんで、初期の反応がえらい鈍くなる。
（※詳しくはよく知らない）

だもんで、duration も短めで、巨大すぎないまあ安全な大きめの数値入れとくのがベターか。

当たり前のとこでハマるjQuery

2016-03-21T06:47:00.001+09:00

blog書くまでもないけど・・・。

jQueryは既に世に出て結構時間が経っている。

検索して引っかかるのが今のバージョンで動くとは限らない。

んでjQuery1.12で動かなかったセレクタの例↓


$('a[href^=#]').click(function() {

こうが正しい↓


$('a[href^="#"]').on('click',function(){

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

2016-03-10T01:50:00.001+09:00

Slidebars使っときーというメモ

ダウンロードすると、examplesフォルダがあるんで、その辺よー見ときーオレ

fixed-positions.htmlにほぼ答えがある

あとはanimation-styles.htmlも見ときー

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

2016-03-07T22:41:00.001+09:00

完全にこの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');
    }
  });
});

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

はじめてのCoffeeScript

2015-01-13T06:02:00.000+09:00

いまさらながら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(){
    //処理
  }
});

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

higuma/angularjs-note

んでこうなって動いた


'use strict'

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

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

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

2014-12-19T15:44:00.000+09:00

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"
        }
    }

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

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

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

atom hoge.futa

とか

atom .

とかでatomで開けて便利なんだけど、Bracketsはできない。

正しくは、Terminalからファイル名を指定してBracketsを開く - Qiita のようにシェルスクリプトかな？と思って試したけどうまく動いてくれなかった。

「じゃあ、単なるエイリアスでいいか」って感じで、.bash_profileに

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

って追記した。

brackets hoge.futa

とか

brackets .

とかでBracketsで開けて便利になった。

しかし、bracketsは打つのがダルいな。bra位にするかな。

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

2014-09-30T23:45:00.002+09:00

完全に自分用のメモ

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

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

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

キーバインド-ユーザ　で

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

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

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

2014-08-30T14:05:00.002+09:00

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

結論

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

2014-07-12T07:39:00.002+09:00

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

デモで使ってあるやん。

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

2013-08-13T00:56:00.000+09:00

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

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

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

偉大な先人たちに感謝。

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

2013-01-03T11:15:00.001+09:00

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

2012-10-30T05:31:00.001+09:00

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

Sublime Text 2 の日本語入力問題

2012-10-28T02:51:00.001+09:00

MacでGoogle日本語入力なんで、tabキーで候補選択してるんで、日本語入力めんどくさいなと思ってググったら、あった。

日本語入力でタブを使えるようにする - kaz_shuの日記

設定でキーバイドのデフォルトを編集、tabで検索して、該当箇所をコメントアウトした。

ついでに決定時の選択範囲の決定のenterをどうにかしたかったけど、まだ試行錯誤中。

今は ctrl + m とか使いながらなんとなくやり過ごしてるけど、コレ解決しないとお金払えないなー。

解決法こうしてますとかあったら教えて下さい

lightbox系のヤツでレスポンシブでもなんとかしたい

2012-10-03T21:50:00.001+09:00

lightbox系の画像拡大のコンテンツがあるのをレスポンシブ的な感じでやった時、

最初、Lightbox 2で試してみたけど、

かなり大きなサイズの画像だと、スマートフォンのブラウザいっぱいいっぱいになって、どうしようもなかった。

色々試した結果、軽さもあって、ColorBoxがいいかなと。

NETEYE Touch-Galleryは、なんかバギーな印象で今回は見送った。

ColorBoxもSettingsがデフォルトのままだと、Lightbox2のデフォルト同様いっぱいいっぱいになってあわわ状態

ColorBoxのSettings見て、


        $('#hoge').colorbox({maxWidth: '98%'});

とかでもスクロールはするんだけど、やはり大きい。うーむ。デベロッパーツールと格闘しながら、colorbox.cssの.cboxPhotoの


        max-width:none;

を


        max-width: 98%;

とかにしたら、だいたい希望通りになった。あとは微調整して。

ターゲットブラウザでの動作とかちゃんと調べてご利用は計画的に。

PHPでスマートフォンとかを振り分け

2012-10-03T21:01:00.000+09:00

レスポンシブでなんとかしたい場合とか用でメモ

UAで振り分けてパーツをゴニョゴニョしたかったので

どういう解像度でどんな風に見せるか、@mediaとかと相談しながら、下記のページとか眺めて妥協点を探りながら


function is_mobile() {
    $ua = array(
        'iPhone',
        'iPod',
        'Android',
        'Windows Phone',
        'blackberry',
        'DoCoMo',
        'KDDI',
        'SoftBank',
        とかお好みで
    );
    $pattern = '/'.implode('|', $ua).'/i';
    return preg_match($pattern, $_SERVER['HTTP_USER_AGENT']);
}

WordPressでアイキャッチ（投稿サムネイル）画像を登録している投稿だけ抜き出す

2012-10-03T20:36:00.002+09:00

WordPressでアイキャッチ（投稿サムネイル）画像を登録している投稿だけ抜き出したかったのだけど、http://codex.wordpress.org/Template_Tags/query_postsとかhttp://codex.wordpress.org/Class_Reference/WP_Queryとか見ても載ってない（ように見えた）。英語自信なし。

で、ググったら出てきた。

Wordpressのquery_postsまたはWP_Queryでアイキャッチ画像（Post Thumbnail）が設定されている投稿のみを表示する方法 | ちいさな創々

配列の場合

    'meta_key' => '_thumbnail_id'

文字列の場合

    'meta_key=_thumbnail_id'

英語でそのままググれば一発やったんやね。WordPress › Support » get_posts with thumbnail only

(仮)FWW_健康って大事なんですよ @sugmak 二周忌イベントに行ってきた

2012-10-03T20:01:00.001+09:00

(仮)FWW_健康って大事なんですよ @sugmak 二周忌イベントに行ってきた。

まあ、普段健康診断してない国民健康保険のみんなで健康診断しましょう。っていうイベントなんですが

@nippei氏に手配してもらった、秋本病院で、オレは福岡市のよかドックを受けた。

福岡市民でない人は、別のプランで。

秋本病院でのよかドックは、これで500円やったら、大満足という内容でした。

スタッフや先生方も親切でフレンドリーでした。@nippei氏ありがとう！

遺影用写真撮影会なんかもしちゃったりしてきて、そのあと昼食会という流れで。

このイベントの経緯としては、

▼背景
@sugmak が亡くなってもうすぐ一年経とうとしています。
あの福岡のIT系コミュニティ活動に尽力し、運動にも健康にも気を配っていた@sugmakさんが脳溢血による突然死で亡くなった事は周囲に衝撃と深い悲しみを残しました。

@sugmakさんは長い間、健康診断の類は受けられてなかったそうです。
もし受けていれば助かった命かもしれません。。。
このような不幸を繰り返さないためにも、これを教訓とし、
フリーランスも健康に注意を払おうという主旨のイベントです。

ってことで。

また来年もあると思いますので、国民健康保険の方で健康診断受けてない方は是非。

MAMPのMySQLが起動しない

2012-09-21T08:09:00.001+09:00

気分がいいので、もうひとつ投稿

先日、急にMAMPのMySQLが起動しなくなったんですが、再インストールする時間もない。

というか、出先でテザリングしてたんで、ダウンロードするには時間かかりすぎた。

で、検索してみますとありました！

MAMPでMySQLが起動しなくなった場合 | HATO BLOG

MAMPを起動させた状態で、MacのTerminal.appで “killall -9 mysqld” を実行。

その後、MAMP再起動するといいようです。めでたしめでたし。

MacのTime Machineに繋いだプリンタがオンラインにならない時

2012-09-21T08:03:00.001+09:00

Blogの存在も忘れてる位ですが、なんだか急に思い出したので久々に投稿してみます。

バックアップやTime Capsule用にTime Machine使ってるんですが、どうにもTime Machineに繋いでるプリンタがオンラインにできない。

Time Machine自体は認識してるし、Time Machineの設定見なおしてもOK。でもオフライン。

で、検索してみたら、下記みたいなのありました。

OS X Lion および Mac OS X v10.6 でのプリンタに関する問題のトラブルシューティング

プリンタ設定から、繋がらないプリンタを一旦削除して、再度追加すればよかったんですね。

無事プリントできるようになりました。

ちなみに、プリンタは無線と有線で2台使ってます。この辺も関係あるんだろうか？

Mac Dreamweaverで日本語入力時、Tabキーで候補を選択できるようにした

2012-01-28T11:24:00.005+09:00

メインはNetBeans使ってて、Codaも使ってるんでDreamweaver使う機会が少なくなってきてますが、
やはり使いたいシーンはあります。主に下記のような場合。

検索置換が優秀
テーブルをデザインビューみながら操作

んで今回Dreamweaver使いながら日本語入力したい機会があって、どうしても癖でTabキーで候補選択しちゃって、
実際にTabキーが入力されて、イライラしてたので、検索してみたらありました。

オレの場合、英語キーボード使ってて、そもそも日本語と英語の入力切替に KeyRemap4MacBook 使ってるんでバッチリ。

dreamweaverでgoogle日本語入力を使っていてtabが使えない問題をKeyRemap4MacBookで解決 | http://highhigherhighest.com/

private.xml編集して、再起動したらKeyRemap4MacBookの設定でmy originalが出現してるので、チェックボックスをオンにすればOK。

そういえば【SwitchOn! FUKUOKA】に行ってきたんだった。

2011-10-28T18:06:00.003+09:00

グローバルブレインズの森社長から~~騙されて~~お誘いを受けて、
【SwitchOn! FUKUOKA】に行ってきた。

森社長と、とあるイベントで、
「実際、システム会社さんからのデザイン協力のニーズありますし、実際こんな感じなんですよね」とかいう話をしていると、
「ああ、じゃあ今度のイベントに協力してください！」
「お力になれるかどうかわかりませんが、私で良ければ。」
という感じで、今回のイベントに協力させて頂くこととなりました。

SwitchOn!とは
「中小IT企業」と「ベンチャー企業・フリーエンジニア」とのマッチングという、「ありそうでない」試みです。
SwitchOn! (Facebookページ)より抜粋

SwitchOn! FUKUOKA 第一回のパンフpdfデータ

イベントの詳しいレポートは、Switch On!(中小IT企業×ベンチャー企業・フリーエンジニア)のプレゼン資料公開 | MutsuLogとかを読んでみてください。

森社長と話しているときに、
“イベントを通じて、福岡にある会社が、活発に交流や協力しあって、元気になればいいな”と
なんかそんな風なことを考えてました。
それで私の周りの人や私もいい仕事に恵まれると最高やなと。

福岡は東京に比べたら狭い。
狭いからこそ、プログラム言語や分野を超えたコミュニケーションやマッチングも容易となる部分があると思ってます。
逆スケールメリットって言うかそんな感じで。
結局、人と人とのコミュニケーション重要なので。
今回私が協力させてもらったのも森社長とのコミュニケーションなんで。

という理由もあり、
【コラボレーション&コミュニケーション】というスライドを作って、説明させてもらいました。

実は内容は、オリジナル部分はほとんどなくて、誰かの発表したモノのサンプリングだったりします。
サンプリング元の方々、リスペクトしているので、お許しください。
ってな訳で、そのスライドは、下記の通りです。

SwitchOn! FUKUOKA Vol.1 コラボレーション&コミュニケーション

View more presentations from nishiaki