Widgetを任意の位置に出す

dyamic_sidebar()を使って、フッターなど、任意の位置にフッターを出したかったので、get_dynamic_sidebar 作ってみた。
もっと早く気がつけば良かったなぁと ^^;

スタイル当てたいときに便利かなぁと思ったり。

既にあるFlexSliderをフルスクリーンに変更

レスポンシブなスライダーがありがたいFlexSlider 2
これをフルスクリーンに変更する方法です。

…というか、最初っからFull Screen Flexslider のように作っておけば良いんですが、既にあるサイト(もしくは作っちゃった後)でどうにかしたくなっちゃった場合を想定してます…^^;

imgタグのsrc属性を親のliの背景画像にセットする

だけです。
他には、画面の高さを取得する必要がありますが、置き換え部分は以下です。

スライダーのそれぞれの画像のsrcを親のli要素の背景画像にして、background-sizeをcoverにセットする感じです。

セットが終わったら、imgタグを削除 :)

jQueryの$.when

最近の世の中の流れにさっぱり乗っていない(むしろ逆走してる?)感が凄いですが、そんなことなど全く気にせず今日のメモ。
スライダーや画像をフェードインさせたりフェードインが終わった後何か次のアクションをさせたりしたい場合に便利。

Deferred Objectの中の一つ。いろいろと長くなっちゃいそうなので、とりあえず動いたやつを。

ページロード時に画像をfadeInで出した後、FlexSliderを表示させる感じです。
.queue()とかでもOKなのかな?

.thenを使ったのは、.done, .failまとめて行けるなぁと思ったからですが、アニメーションさせる場合って、考えなくても良かったのかなぁと思いました。

ajaxでのサンプルというか、記事が沢山ありましたが、こういう場合にもOKだなぁと思った次第です。
.animateやその他イベントのcallbackを繋ぎまくるよりスッキリしてて分かり易いですね :)

Facebookコメントいただきました!!

政倉 智まだ調査できていませんが、ES6 で Promise が導入されたため、書き方がちょっと変わりそうです。jQuery 3 はこれに伴う変更が入ってたと思います。

もちろん、jQuery.when は依然として使えますので大丈夫です。

jQuery 3, Promise, ES6などなど!! 政倉さん、あざます!!!!!
Qiitaのまとめも見つけました。翻訳こちらもありがたいっすね〜 😀

さくらの共用サーバでssh + wp-cli + WordMoveをセット

例によって、もっと早くやっておけば良かった話。

ありがとうございます!!
今回さくらの共用サーバでの作業になったので、サクッとできないかなぁ…確かやってる方いたよなぁということで、発見しました。っていうか、随分前に読んでたやつですね…読むだけで試していないパターン… (^0^;)

上記2記事の通り設定すれば、あっさりさくらの共用でもwp-cli, wordmove使えます。sshでパスワードを入力する必要もなく、WordMoveもssh使えるので楽ちんだし、コケないし、良いことずくめです。

最近は、AMIMOTO + VCCW + wp-cli + WordMoveを使う機会が多かったので、さくらでも同じようにwp-cliとWordMoveが使えるのはホントありがたいです。感謝っす!!

【CSS】display: table;

きっと俺だけ知らないシリーズ。。(この記事からスタートw)

隙間拡大
table, その外側のdivにも無いのに隙間が…?

 

拡大してみると、

隙間拡大
…空いてますね。。

この部分のhtmlはこれ。

まぁ、その、◎とか▲とかは一先ず置いといて。。

スタイル(sass)は、

予定ではこんなところで止まるはずじゃなかったんですが、どうしてもこの隙間が消えず。。

とりあえずdisplay: table; で消える

隙間なし :)
隙間なし :)

暫定的もいいとこなんですが、とりあえず、display: table; で消えました。
他にも、

  • table
  • inline-table
  • table-cell

で消えたんですが、inline-table, table-cellはちょっと違うなぁということで。

参考

【PhpStormメモ】

昨年の秋辺りからメインとして使い始めたPhpStorm。

より。
素のままでも大変便利なPhpStorm。言い換えると素のまましか知らない…(^0^;)

ブックマーク使ってみた

Navigate > Bookmarks

スクリーンショット 2016-01-17 13.57.38

これ。ファイルの任意の位置をブックマークして、シャッとジャンプできるやつです。
エディタを分割しててもなんだか使いづらくて、今まで使うのも面倒だからという理由で使っていなかったんですが、かなり便利ですね…もっと早く使えよって話です、ええ。。

ブックマークに番号(記号)振ってcontrol + 番号(記号)でも飛べるみたいですが、番号は覚えていられないかもなぁということで、Next Bookmark, Previous Bookmarkにショートカットを振って、ブックマークを行ったり来たりしてみることにしました。

これだけでも、相当便利ですね :)
(今まで使っていたCodaやSublime Textとかでも一切使ったことない前提です ^^;)

相当多機能なPhpStorm。使いこなすには時間かかりそうですが、先ずは便利だな!! と感じる機能からちょっとずつ使ってみたいと思います。

打ち合わせ

昨日の話なんですが、打ち合わせに行ってきました。

フリーランスで自宅で仕事してると、あっさり引きこもりになってしまうので、打ち合わせとかで外に出るのも大事っすね :)

待ち合わせは10時だったので、自宅を8時過ぎに出ることにしました。
ちょっと時間かかる感じ。

鹿児島もようやく?冬らしく寒くなってきて、我が愛しのご老体もチョークを効かせつつ元気にエンジン始動!

 

元気に暖機中のご老体
元気に暖機中のご老体

贅沢な話ですが、朝早く自宅を出るのは、県外に出張る時以外ほとんどありません。
暖機を待つのも新鮮でした。

スタートって楽しい!

途中、同行人と打ち合わせ場所近くのセブンで待ち合わせ、コーヒー飲みながら今日の内容を軽く摺り合わせ、現地にて打ち合わせスタート。

ご老体_2

やっぱ、こういう流れって楽しいっすね 😀
普段、お仕事の多くは、もくもくと作る繰り返しなので、初顔合わせからアイディアだし、方向性決めなどなど、まさに今スタートするんだなって空気感。貴重っす :)

スタートしたばっかりなので、これから先やることは山盛りですが、楽しんで行こうと思います (^^)。

おぉそうだった。Post Notifierもはよ個別投稿でON OFF機能追加しないとだな :)

画像のURLからattachment_idを取得する

Get the Attachment ID from an Image URL in WordPress – Philip Newcomer

Retrieve Attachment ID from Image URL – Pippins Plugins

より。
WordPressの画像は、デフォルトだと、アップロードされると、3種類作成されますよね。
add_image_sizeなどを追加していれば更にその数だけ。
ファイル名にすると、xxxx-150×150.png など、-に続いてサイズが付いてたりします。

やりたかったことは、投稿に含まれる画像(upload ディレクトリ内にアップロードされている)の元画像のid。
これがわかれば、新たに画像サイズを追加したり、加工したりがやり易いなぁと思ったわけです。

作成される画像は末尾に、xxxx-150×150.png など -幅 × 高さ.(画像の種類)と追加されます。コレを取り除けば元画像のパスがわかる思って、とりあえずまだ途中…^^;

2016年1月のWordBench鹿児島

定期開催になっているWordBench鹿児島へ参加してきました。
会場も固定のさくらハウスです。

WordPress.com のREST APIを使ってHTML5なWebアプリを作ってみようハンズオン意見交換会

Developer Resources | Create cool applications that integrate with WordPress.com

↑↑上記サイトに情報てんこ盛りですが、中でも2月に予定のハンズオンでは、REST APIを使ったWebアプリを作るということで、既にデモができあがっておりました!!

モデレーターは、HTML5J Kagoshimaの政倉さんです :)

シンプルな構成で一先ずは体験してもらおうという趣旨のハンズオンにしたいとのことで、プログラマー目線と、デザイナー、ディレクター目線の意見も参考にしたいとのことで、デザインはどうする?とか、時間配分は?などなど、様々な意見が出ました。

こういった準備のための雑談?というと語弊があるかも知れませんが、とても好きです。来月はどうしても参加できないんですが、絶対フォローアップな黙々勉強会をやりたいです…まだ始まってないのに ?

Developer Console

話の中で、WordPress.com Developerサイトの紹介があったのですが、便利そうなツールや解説が沢山載っていました。

中でも、直感的だと感じたのは、WordPress.com Console です。

Developer Console.
Developer Console。GETで投げて、レスポンス確認できます :D

試しに自分のWordPress.comブログでやってみた。

ちゃんと返ってきてる (^^)
ちゃんと返ってきてる (^^)

ドキュメントも。

REST API Resources | Developer Resources

WordPress.comのREST APIはv1, v1.1なんですね。

いろいろ見ると楽しそうです :)

来月のWordBenchも楽しそう!!
マジ参加したい >_<

【修正版】VCCW起動時にMailCatcherを起動するエイリアス作ってみた

VCCW in MailCatcher最高っす!! あざます!!

ここの所MailCatcherを使うことが多かったので、VCCWを起動後、直ぐに立ち上げたいという欲求が出まして、サクッと起動する方法ないかな〜とあれこれ試してたら、うまく行きました :)

※ 上手く動いたのは良かったんですが、宮さんから教えていただいて修正しました。ohaiとか、jqとか勉強になりました。あざます!!

【新】仮想マシンにログイン後、ipを取得してmailcatcherに投げる

vagrant ssh -c で仮想マシンにログイン後、ohaiとjqを使って、ipを取得します。
宮さんから教えていただいたコードはこちら↓↓

activate-mailcatcher/setup.sh at master · vccw-team/activate-mailcatcher

で、ohai と jq 使った方法に書き換えたのがこちら↓↓

チョーシこいてワンライナーにしたのがこちら↓↓

marushu/start-mailcatcher

で、以下はohai?jq?だったので、調べてみました。

ohaiとは?

ohaiはChefがサーバー環境の情報収集のために使うソフトウェアです。
収集できる情報はハードウェアからOS、ネットワークまで一通りの物が対象です。

Chef/初心者向けChef入門講座/ohaiとattributeの自動判定 – インターネットウィキ

とのこと。ohaiとググってオハイオ州が出てきたのは内緒ですw

実際、Mac上でohaiと打ち込んでも、command not found となってしまい、Macにインストールするところから始めました。
あ、VCCWには初めっから入ってます!!

インストールにあたってはコマンドだとどうしてもうまく行かず、以下のサイトからダウンロードしてインストールしました。

Chef Development Kit | Chef Downloads | Chef

参考: 初心者にお勧めするChefの正しいインストール方法 – Qiitaohaiを使ってサーバの情報をプログラムで扱おう – インフラエンジニアway – Powered by HEARTBEATS

インストール後、ohaiとコマンド打ち込んでみたら、しっかり出てきました。フォーマットはjsonです。

ohai
{
  "cpu": {
    "real": 2,
    "total": 4,
    "mhz": 2600,
    "vendor_id": "GenuineIntel",
    "model_name": "Intel(R) Core(TM) i5-4288U CPU @ 2.60GHz",
    "model": 69,
    "family": 6,
    "stepping": 1,
    "flags": [
      "fpu",
      "vme",
      "de",
      "pse",
      "tsc",
      "msr",
      "pae",
      "mce",
      "cx8",
      "apic",
      "sep",
      "mtrr",
      "pge",
      "mca",
      "cmov",
      "pat",
      "pse36",
      "clfsh",
      "ds",
      "acpi",
      "mmx",
      "fxsr",
      "sse",
      "sse2",
      "ss",
      "htt",
      "tm",
  …と、大量に(^0^;)

特にホスト側に入れる必要は無かったんですが、とりあえず入れて確認。

jqとは?

jqとは、コマンドラインからJSONを操作することができるツールです。
curlコマンドとかでJSONレスポンスを取得した場合、データ量が多いと非常に見づらいデータがかえってきたりして困ります。

jqで簡単JSON加工 | Developers.IO

ってことで、ohai で返ってきたデータをjq使ってフィルタかけて取り出したりできるツールのようです。

参考: jq Manual (development version)

ダウンロード → インストールもあるようですが、僕は今回は brewを使ってインストールしました。

brew install jq

jqは今の僕でもいろいろと使えるかも知れません :)
jqの出力はオプションで色つきにもできるようです。

jqを色つきでless表示する – Qiita

政倉さん、あざます!!

ということで、ohaiとjq使って書き換えました〜 :)
若干遅いのが気になる所なんですが…。。

【古】site.ymlに設定しているip使って起動する方法

えっと、僕は普段新規にVCCWを立ち上げる場合、site.ymlファイルを編集します。ip: も変更しますし、localhostもipと同じ値に設定してます。

こんな設定で使う人あまり居ないかなぁと思いつつ、vagrant sshせずとも良い場合、このやり方が楽ちんでついっすね…^^;

で、VCCWが立ち上がった後、

  • vagrant ssh
  • mailcatcher –http-ip VCCW設定のip

と毎回打ち込むんですが、毎度だと面倒になったので、少しでも楽ちんにしたいなぁと言うことで、エイリアス作ってみました。

これです :)
因みに、site.ymlがあるディレクトリでやらないと動かないっす。

やってる内容

  • grep “ip:” site.yml でsite.ymlファイル内のip: がある行を取得
  • tr -d “ip: ” 取り出した行の内容から”ip: “を削除(コレでipのみになる)
  • 順番前後するけど、このipを変数IPへ代入
  • 変数IP使って、vagrant ssh -c “”で、vagrant にsshログイン後、””内のコマンドを実行
  • mailcatcher –http-ip ${IP} 変数IP(site.ymlのip部分)を代入

上記の内容をやってます。ってことでsite.ymlのip:記述が無くならない限り使えます ^^;

他にVCCWで使ってるエイリアス

それくらいやれよ…。。
な内容ですが、ワリと便利に使ってます。

site.ymlを先ず開く(新規VCCW設定の場合)

# vccw site.yml setup
alias vvccww='cd vccw; cp provision/default.yml site.yml; vim site.yml'

vagrant upしてエディタを開く

#vccw quick up
alias vccw-quick='vagrant up; cd www/wordpress; pstorm . '

;で繋いでるだけっすけどね 😛

MailCatcherの終了はブラウザから?

Starting MailCatcher
==&amp;amp;gt; smtp://127.0.0.1:1025
==&amp;amp;gt; http://192.168.19.181:1080
*** MailCatcher runs as a daemon by default. Go to the web interface to quit.

っと起動時に既にweb interfaceからやってねって書いてあるので他にはないのかな。。

あと、複数VCCWを立ち上げちゃってる場合は、-http-port PORT, –smtp-port PORT とかやった方が良いのかも。最近は同時に起動とかあまりしなくなったけど 😛

スクリプト作っといても

Run pre/post provisioning scripts

You can place shell scripts, so it will run at pre/post provisioning.

  • provision-pre.sh – Run before chef provisioning.
  • provision-post.sh – Run after chef provisioning.

VCCW – A WordPress development environment.

とかカスタマイズしても良いのかも。

ワンライナーを真似して作ってみた :)

GitHubに置いてワンライナーで行けるかどうかやってみた。
ばっちり :)

marushu/start-mailcatcher

readmeには書いたけど、site.ymlのあるディレクトリに移動して

curl https://raw.githubusercontent.com/marushu/start-mailcatcher/master/start-mailcatcher.sh | bash

でOK。GitHubに置いとくと何かと便利なんだなぁと置いてみてわかった次第。
ワンライナーってこうやって作るんすね〜!! 楽しい :)

参考