2015-03-24

mysqldumpのときだけソケットエラーが出る

現状はソケットのパスを指定してmysqldumpすることで実行できる

mysqldump -q wordpress -u root -p > バックアップファイル名 -S /Applications/MAMP/tmp/mysql/mysql.sock

そんなに頻繁にすることでもないのでこれでいいかなとも思う

環境

mac10.10.2

MAMP3.0.7.3

MAMPをインストールして

mysqlにアクセスしようとしたら

ソケットエラーでアクセスできないので

調べたら mac の php.ini の設定で

/Applications/MAMP/tmp/mysql/mysql.sock

を指定すればいいという記事が多かったのでその通りにして

無事アクセスできるようになった。が

今度はバックアップするためにmysqldumpを実行しようとすると

ソケットエラーになる

mysqldump: Got error: 2002: Can't connect to local MySQL server through socket '/tmp/mysql.sock' (38) when trying to connect

tmpフォルダー内のmysql.sockをつかってサーバーにつなげることができないというエラー

よく見るとパスが違う
実際にMAMPの mysql.sock があるのは
/tmp/mysql/mysql.sock
なので　ダンプするときのパスの設定を直せばうまくいきそうだが、どこに書いてある？
confファイルをあさってみる
my-large.cnf はok
my-medium.cnf はok
my-small.cnf はok
というかなんでこんなにあるの？

やみくもにファイルをみてもダメだったので

調べているとコマンドを実行するときにソケットを指定できるようなので試してみた

mysqldump -q wordpress -p root > back -S /Applications/MAMP/tmp/mysql/mysql.sock

すると次のエラー

Access denied for user 'XXX'@'localhost' (using password: YES) when trying to connect

ユーザーがrootじゃなくて自分の名前になっていたのでユーザーを指定すればいけるかと考える

mysqldump -q wordpress -u root -p > back -S /Applications/MAMP/tmp/mysql/mysql.sock

エラーは出ず、成功したようなので確認してみると確かに back というファイルができている
中身もちゃんとあるのでこれで 'できない'状態からは抜け出せた

あとは mysqldump　するときのソケットの設定をどこで書けばいいのか調べればいいのだけれど
まだわからない

2015-03-23

wordpressテーマの作成でつかうタグのまとめ index.php編

[ 記事一覧 ]
index.php

bloginfo('name') ブログのタイトル
echo home_url('/') トップページへのリンク
wp_nav_menu(); functions.phpと連動
dynamic_sidebar(); functions.phpと連動
get_header() ヘッダーを読み込む
get_footer() フッターを読み込む
get_sidebar() サイドバーを読み込む
get_template_part('任意のファイル'); 任意のファイルを読み込む

(記事一覧のループ)

if (have_posts()) : while (have_posts()) : the_post();?> 記事の数だけ処理を回す
- ...記事抜粋情報
- the_title(); 記事のタイトル
- the_exerpt() 記事抜粋
- get_the_date(); 作成日
- the_permalink() 個別記事へのリンク
- the_category(', '); カテゴリーへのリンク引数は区切り文字
- <?php if(has_post_thumbnail() : ) ?> アイキャッチ画像が設定されているか調べる
  - <?php the_post_thumbnail(array(サイズx,サイズy)); ?> アイキャッチ画像を読み込む
- <?php else: ?>
  - themaにあるno-image画像を読み込む
  - <img src="<?php echo get_template_directory_uri(); ?>img/noimage.png" width="100" height="100">
- <?php endif; ?>
endwhile; else:

...「記事がなかったら」記事がないというメッセージを表示

endif;

(ループの外でつかう)

previous_posts_link() 前の記事一覧へのリンク
next_posts_link() 次の記事一覧へのリンク

2015-03-16

Firefox で max-width が効かないときの解決法

親要素に width:100%; を指定する

ブートストラップでレスポンシブデザインを取り入れたサイトを作った時に
画像に対して img-responsive を設定すると画像が画面幅に応じて大きくなったり
小さくなったりするはずだったがなぜかFirefoxだけ効かずにレイアウトが崩れる

img-responsive には max-width:100%; が設定されているのでこれがなぜか効いていないということなので検索してみると

親要素の display:table をしている要素に table-layout:fixed を指定する事で回避できる

という記事が多く見られるが、今回はこれには当てはまりそうになく、困ってしまった。

100% というのは当然親要素に対する100% だと考えるので　ウェブインスペクタで親要素のスタイルを確認してみると特に width　に対しての設定はない。

ということは当然 autoが適用されていると考える

この辺が怪しいと感じたので試しに親要素に対して適当な width を設定してみると

反応した！

width の設定が書かれていればいいのかと思って、あえて width:auto; を指定してみると

動かない；

ということは親要素の width の設定が auto になっていると max-width:100%; は効かないということなので、影響のない width:100%; を親要素に指定してみると画像がちゃんとレスポンシブ仕様になった。

似たようなことが以前にもあった。

CSSで 3D のスタイルを試していた時に親要素に perspective を指定していたがなぜか

Firefox だけ効いていない；

ウェブインスペクタで色々いじってみると直前の親要素に perspective を設定すると反応することがわかった。

もし Firefox だけCSSが効かないときは親要素に対しての設定を考えるといいのかもしれない

2015-03-13

テストサーバーにアップしたらえらいことになっていた

製作していたECサイトのトップページが

とりあえず一通り完成したので

試しにサーバーにあげてチェックしてみた

なんかいろいろおかしい

[ mac safai ]

bootstrapのアイコンが表示されていない

　ー＞ safaiのセキュリティーの設定で読み込みをブロックしていたらしい

[firefox]

スライダーが動いた時に画像がバグる

　ー＞原因不明、bootstrapのカルーセルのソースコードには

　　　style="background:#green" を都合でつけていた。

　　　それが上に乗っている画像とかぶっていたので style を削除

[android]

.collapse をつかったスライドダウンのエフェクト時に

ボタンの表示が大きくなってもとに戻らない( 謎 )

　　　ー＞未解決

[ * ]

画面の右端に変な隙間がある

スライダーの矢印の位置が画面からはみ出す

　　　ー＞col とrow の使い方に誤りがあった

/ 以下　メモ /

画面に変な隙間がある

最初 container-fluid　を知らずに
画面幅いっぱいにするために
containerをつけずに row と col をせっていしていた。
あとで間違いだと気付いたが、その全部を修正しきれていなかったようだ
しかも、hidden-sm などで見えなくなっているところに効いていたのでなかなか見つけられなかった

すべて訂正してなおったかに見えた...

スマホで見るとまた変な隙間ができる

画面幅が最小の時のスタイルを疑う

ボタンの中に設定していた row と col の設定と
そこに記述したテキストの長さが関わって
ボタンの大きさがゆがんでいた

２つ設定していたボタンの構造

<div class="col col-lg-offset2 col-lg-8 col-md-offset-2 col-lg-8 col-sm-offset-2 col-sm-8 col-xs-offset-2 col-xs-8">
<img src="image/keitai2.png" height="150" width="320" class="img-responsive">
</div>

<div class="col col-lg-2 col-md-2 col-sm-2 col-xs-2"> </div>

<div class="col col-lg-12 col-md-12 col-sm-12 col-xs-12 clearfix">
<p class="lead">機種から探す</p>
</div>

</button>
</div>
</div>

(もう一つ同じものを col で 6 づつの幅に設定)

...

一行の中に 2つの列を6づつに設定し　それぞれに　ボタンを配置
そのボタンの中に列をつくり 2(余白) 8(画像) 2(余白) として　左右に 2 づつの余白をとった
さらにその下にキャプションのように文字を入れたかったが .captionではうまくいかなかったので
もう一つ幅12の列を作って折り返しによって下に回り込ませている
が
これが悪さをした

最初のボタンの文字は　機種から探す　で
もう一方のボタンは　デザイナーから探す　だった
この文字数の差でレイアウトが崩れた
デザイナーから探す　だと　長すぎて　画面幅が最小の時にボタンの幅 12 分よりも幅をとって列の幅を変形させていた
これが行の幅の外にはみ出して　右側にへんな余白が生まれていた

ので
(container と row のなかに入っている)

<div class="row">
<div class="col">
<p class="lead">デザイナーから探す</p>
</div>
</div>

</button>

</div>

</div>
</div>

ボタンを 6　づつの幅で配置するのは変わらない
その中に余白と画像の行とテキストの行の二つを設定して
切り離したらうまくいった。

2015-03-12

grunt watch がうまく動かない

bootstrapのgetting started でgruntをいれて

lessファイルの書き換えに成功したので

また同じように編集しようと

bootstrapのフォルダまでディレクトリチェンジして

grunt watch

Running "watch" task

Waiting...

この状態でlessファイルを書き換えたら動くはず

とおもって作業したが

反応がない

前回の作業手順を見直すと

なんだかよくわからないままさきに

~~grunt dist というコマンドをうっていたので~~

↑（distファイルが初期化されるのですでにファイルがある場合はやめましょう）

同じように

grunt dist

としたあとで

grunt watch

Running "watch" task

Waiting...

として

lessファイルを編集したら反応した。

一回grunt watch を停止したら

~~grunt distからやり直さないといけないのか？~~

↑（distファイルが初期化されるのですでにファイルがある場合はやめましょう）

とおもって

でgrunt watchを停止してから再度

grunt watch

Running "watch" task

Waiting...

してlessファイルを編集するとちゃんと動いた

~~ひょっとしたらlessのフォルダを別のものと置き換えたのが原因か？~~

あとで調べよう

追記

単純に違うファイルを操作していただけだった。

grunt dist を実行すると

distフォルダの中身が初期化されるみたいで

今まで作ってきたhtmlファイルやimgファイルが全部消えてしまった...

バックアップあったから良かったけど、これからは気をつけよう

消えたファイルはゴミ箱にもないけれど、どこに行ってしまったんだろう

2015-03-10

スライダーのslickの使い方とトラブルメモ

使い方まとめ

[HEAD]

[HTML]

//矢印のカスタマイズをする場合に追加

</div>

[SCRIPT]

　$('.NAME').slick({
　　appendArrows: $('.ARROWS_NAME'),
　});

</script>

NAME と ARROWS_NAME をスクリプトの部分で結びつける
複数のスライダーを作る場合はそれぞれ名前を変えて個々に設定する

トラブル

矢印がでてこない

デモで表示されている矢印がなぜか表示されない

slick-theme.css を読み込まないようにすると
下に next/prev がボタンで表示された

slick-theme.css を読み込むようにして
backgroundを指定したら両端に矢印の端っこが見えた

スライダーの枠を中心にして矢印が配置されるらしい

左右にmarginを取ると矢印が出てきた

矢印のフォントの色が、defaultのthemeでは白で
今作っている背景が白だから具合が悪い

もう少しおおきな矢印にもしたかったので
矢印をカスタマイズしようと思った

矢印を画像に変えるとスライダーが動かない

本サイトをみてみると矢印がカスタマイズできそうだったので
読んでみたがよくわからなかった。
たまたまYahoo知恵袋に同じ投稿があったので
それを見ながら書いてみたが上手くいかない

とりあえずDEMOがあったのでそのコードをコピペしてみる
するとちゃんと動いた

なにが原因なのかと思ってslickのオプションを指定していくと

slidesToShow: 3

を指定した時に動かなくなった。
いろいろ試していてよくわからなくなっていたので
一回整理してみた。

本サイトではオプションを $('ELEMENT').slick({OPTIONS});
としていたが、デモのコードは var slick = $('ELEMENT').slick({OPTIONS});となっていて
こっちでは矢印のカスタマイズの設定だけしていた

なんで変数にいれているのかよくわからなかったが

どっちかにまとめようと思って、とりあえずDEMOが動いているので、そのコードにオプションをまとめたら
やっと動いた。

でも本サイトの書き方と違うので、本サイトの書き方でまとめたらちゃんと動いたので

そっちに統一した。

スライダーを複数作ったら動かなくなった

単純にクラスが被っていた。本当はIDで指定するところを共通の部分はクラスで一括で指定しようとしたところで不具合が出た。凡ミス。

ちなみにひとつの矢印が複数のスライダーに設定されていると、全部動くと思いきや

最初にでてきたスライダーだけが動くということが起きる。

2015-03-10

完成！（ほぼ）

昨日はco-edoの交流会に参加！

いろいろな人が集まって盛り上がってました。

今日はそこで知り合った人と晩飯を食べる予定。

こういうつながりができるのはすごく面白い！

こういうイベントがあったらどんどん参加しようと思う

co-edoで頼まれたECサイトのトップページもほぼ完成のところまできた！

大まかなレイアウトも終わって

スライダーも動くようになって

bootstrapのカスタマイズも出来るようになった

あとは明日の打ち合わせでOKがでれば終了。

そんなに上手くいくか？

スライダーのカスタマイズがまだよくわかってないから

調べてまとめよう。

[ 記事一覧 ]index.php

(記事一覧のループ)

親要素に width:100%; を指定する

画面に変な隙間がある

スマホで見るとまた変な隙間ができる

使い方まとめ

[HEAD]

[HTML]

[SCRIPT]

矢印がでてこない

矢印を画像に変えるとスライダーが動かない

スライダーを複数作ったら動かなくなった

[ 記事一覧 ]
index.php