読者です 読者をやめる 読者になる 読者になる

かもメモ

自分の落ちた落とし穴に何度も落ちる人のメモ帳

CSSで文字にボーダー(縁取り)をつけたい。

Illustratorの線やPhothopのレイヤースタイルの境界線みたいに文字にボーダー(縁取り)をつける方法のメモ。 1. text-stroke を使う方法 text-stroke サポート状況 IE以外はそこそこサポートされてきてるっぽい。 プロパティには-webkit-のブレフィックスが現…

CSS 100%幅の子要素にネガティブマージンを使うと右側だけはみ出して横スクロールが表示されてしまう

所謂Bootstrapの.row・.col-で使われているような親要素が左右のネガティブマージンを持ち子要素がfloatを使ったカラムレイアウトを100%の画面に入れた時に右側だけが100%のブラウザサイズからはみ出して横スクロールが表示される現象に遭遇しました。 横ス…

Google スプレッドシート nヵ月前の日付をチェックしたい

例えば、下記のような期限日が入力されているシートで期限まで3ヵ月切っているセルをハイライトしたいような時のメモ。 A B 1 案内日 期限(6ヵ月後月末) 2 2016/07/07 2017/01/31 3 2016/08/07 2017/02/28 4 2016/09/10 2017/03/31 5 2016/10/06 2017/04/30 …

CSS3 マークアップ別Flexboxで要素を左端・センター・右端揃えのレイアウトを作る

IE8以下のサポートも終わり自動アップデートになってきていますし、CSS3のFlexboxもそろそろ実制作で活用できる用になってきていると思っています。 flex サポート状況 なので、下記画像のようなWEBサイトのグローバルナビゲーションとかでよくある例えばロ…

Adobe illustrator パターンをオブジェクトにしたい

パターンで付けた柄をオブジェクト化(アウトライン化?)する方法。 オブジェクトを選択して、メニュバーからオブジェクト > 分割・拡張...を選択すればOK ダイアログが出るのでそのままOKを押せばパターンがオブジェクトに変換されます イラレで印刷に出すの…

WordPress 4.7, 4.7.1 はAPIに致命的なバグがあって認証無しで誰でも記事を改ざんできちゃうっぽい!

WordPress 4.7, 4.7.1 のサイトは直ぐに4.7.2にアップデートするのです! Twitterで大学や国会議員や公的機関のサイトが大量に改ざんされてるという情報を朝から目にした日でした。 どうやら改ざんされていたのはWordPressのサイトの様で、事の顛末は、 Word…

確定申告!

確定申告の季節です。 毎年、ナゼ毎月領収書を整理しておかなかったのだ!! と成長のない自分を責める季節でもあります。 私はフリーランスを初めてナンダカンダで10年くらいになっていました。 WEB・グラフィック制作やイベントの進行管理といった仕事の他に…

Ruby Slim タグなどを含んだ変数をエスケープせずに出力したい。

Slim テンプレートでの変数の出力の方法は、こんな感じに=で出力することができます。 div p= @value 文章中や、属性中に変数展開させる場合は#{変数名}で出力します。 p a.btn src="edit/#{@id}" 編集 しかし、上記の方法ではHTMLタグや"などを含んだ文字列…

俺のAdobe Creative Cloudがある日突然、体験版になってた件。

朝起きて、仕事をしようとPhotoshopを起動しようとしたら... Photoshopの体験版を使用しますか? というアラートが表示されました。 Creative Cloudは契約済みで支払いも行っており、自分のアカウントでログインもされている状態でした。 軒並み体験版になっ…

WordPress 管理画面のベーシック認証が効かなくなった時のメモ

WordPressを設置する時に少しでもセキュリティを高めるために管理画面やログイン画面にベーシック認証をかけています。 ファイル構成 / |- .htaccess |- /wp | |- .htaccess | |- .htpasswd | |- /wp-admin |- index.php WordPressはwpディレクトリ内に置き…

年の瀬に一気読みした漫画が凄く良かったので

新年 決意を新たに目標を立てるとか。 沢山 目標を立てても達成できないのでシンプルに、 今年の目標は「描く」 コードも絵もたくさん描く。 個人的には決意を新たにするより、 環境を替えるか、付き合うコミュニティを替えるかの方が効果があると思っている…

はてなブログ Markdown コード内にバッククオートを表示したい

` ← バッククオートをインラインコード内に表示する方法 表示したいバッククオートの後ろに半角スペースを付けると上手く表示できる。 `` ` ` バッククオートを含んだ文字列をインラインコードに表示する方法 先頭にバッククオートを表示する場合 そのまま…

jadeがpugになって変わった所のメモ

HTMLのコーディングの際にjadeを愛用しています。 jadeがpugになってから、所々仕様が変わっていたのでメモ Mixinの呼び出し方が変わった mixin 関数名() ではなく+関数名()になった。 jade mixin foo('引数') ↓ pug +foo('引数') 文字列中の変数展開の方法…

WordPress サイトのフロントページにしている固定ページを動的に取得したい

WordPressで企業サイトなどを作っている時に固定ページをフロントページ(サイトトップ)に設定する事も多いと思います。 かなりレアケースな気もしますが、フロントページに設定しているページオブジェクトやページIDが必要になるテーマを作成する時のメモ。 …

Node.js nvmからnodebrewに乗り換えるぞい!

Node.jsのバージョンをv6.9.2に上げるにあたって、npmでグローバルにインストールしたパッケージを移行できるコマンドがあるということだったので、Node.jsのバージョン管理をnvmからnodebrewに乗り換えるました。npmのパッケージ結構容量を取るので... nvm…

WordPress ContactForm7 フォーム送信時に送信確認のチェックをリセットしたい

ContactForm7は送信前の確認したかのチェックボックスを設置することができます。 ただ、フォームを送信した後、エラーの有無にかかわらず送信確認がチェックされたままで、送信ボタンを押すことができる状態になったままになっています。 そこで、ContactFo…

WordPress ContactForm7 フォーム送信時に任意のjsを実行したい。

管理画面から WordPressの管理画面 > コンタクトフォームの編集画面 > その他の設定 を選択して、記入エリアにon_sent_ok:(送信完了時)、on_submit:(送信された時常に) のキーワードに続けて実行したいjavascriptのコードをテキスト形式で記述する。 on_sent…

Stylus Objectでらくちんカラー管理したい

StylusやSassなどでwebサイトのCSSを作成する時は、variableというようなファイルを作成して使用する色などを変数で書いておき適時使用しています。 しかし、色のバリエーションがある時に $primary = #158cba $primary-dark = #127ba3 $success = #28b62c $…

Gulp min化したJS・CSSに自動でコメントを入れたい

コーディングをする時、Gulpでコンパイル&min化をしています。 min化したコードにコメントでバージョン情報とか、元のライセンス情報を入れたいケースとかがあります。 javascript ライブラリなどのライセンス情報で/*!で始まるコメントの場合はgulp-uglify…

高校生みたいなバックパックが思ったより便利だった

超ド田舎に住んでいるので終電時間がめちゃめちゃ早く、ちょっとした勉強会とかに参加しても一泊しなければならない事が多くラップトップ(ノートPC)と一泊分の着替え+本や筆記用具の入るいい感じのカバンを探していました。(ちょっとした勉強会に参加するに…

Mac OS Sierraにアップグレードしたらターミナルで.bashrcが読み込まれなくなった。

開発をしているとターミナル(黒い画面)を使うことが多いかと思います。 Macだとllコマンドが無かったりするので、.bashrcによく使うコマンドとかのエイリアスを書いたりしていました。 alias ll='ls -n' こんな感じで。 アプリ開発をするのに必要なXcodeのア…

Ruby Stylusでnibを使いたい。

前回 Ruby(sinatra)でStylusを使えるようにしました。 しかし、このままではSassで言うところのCompassにあたるnibを使うことができていませんでした。nibを使えるようにした際のメモです。 nibはnode(npm)でインストールしておく必要がある $ npm install n…

Ruby (2.2.0) 自分で作成したファイルを読み込む(require)にハマる

Ruby(2.2.0)を使っていて自作したファイルを読み込み(require)する際にハマったのでメモ。 結論から言えば自作ファイルを読み込ませる際は相対パスで読み込むrequire_relativeを使うのが良さそう。 ファイル構成と読み込み ファイル構成 /app |- main.rb # <…

Ruby Bool値かどうか型チェックしたい。ついでにis_bool?メソッドを作ってみた。

Rubyで変数がBoolean型かどうかチェックしたい。 かなりレアケースな気がするけれど、この前参加した勉強会で要望があったのでトライしてみた。 RubyのTrueとFalse false ... false, nil の時 true ... false, nil 以外全てtrue Rubyには is_bool? という関…

Gmail 定型文に便利なChrome拡張

GmailをWEBブラウザで使っています。 問合せの返信などで定型文を使いたい時、設定 > Labs > 返信定型文 で定型文を作成できるのですが、定型文の挿入と保存が同じポップアップ内に出てきて分かりづらかったり、件名が自動挿入されるなど、件名含めてガッチ…

ワルシャワ🇵🇱でSIMをゲットして快適インターネッツライフ

ポーランド(ワルシャワ)にも行っていました。 ポーランドでもプリペイドSIMをゲットして快適インターネッツライフを行えたので知見をシェアしたいと思います。 事前に調べていたポーランドで手に入れやすいSIMで代表的なものは下記の3種。 ・Orange ・Plus …

Ruby Sinatraでstylusを使いたい。

久々にRubyの勉強に戻ってきました。 作りながら学ぶRuby入門 第2版作者: 久保秋真出版社/メーカー: SBクリエイティブ発売日: 2013/11/21メディア: Kindle版この商品を含むブログ (3件) を見る けっこう古い書籍ですが、1つのアプリを作りながらRubyに慣れよ…

WordPress タクソノミー名によっては予約語でなくてもアーカイブページに投稿が表示されないことがあるっぽい

遥か昔、100億年ほど前に作っていたテーマを使用していたサイトで突然アーカイブページに何も表示されなくなったと連絡がありました。ブラウザの表示でなければ、何もして無ければ変化が起こるはずがないので、何を変更したか訊いたところ「WordPressとプラ…

フィンランドでSIMフリーiPhoneで快適インターネッツライフしたい

Moi. Suomi (フィンランド)に来ています。 フィンランドはホテルや町中いたるところにFreeWifiがあるのですが、観光客が多く回線が繋がりにくかったり移動中とかでも気にせずインターネッツをしたいと思いプリペイドのSIMを購入してSIMフリーのiPhoneを使っ…

PHP Slim 2.x Ajaxでputで送った値を取得したい。

"Slim is a PHP micro-framework" Rubyのテンプレートエンジンじゃない娘のお話です。 3系が既に出ているのですが、先方のサーバーのPHPのバージョンの関係で2系で開発をしています。今回 Ajaxのputメソッドでデータを送ったのですが、Slim側で値をとるのに…

javascript 確認ダイアログ(confirm)の文章を改行させたい。

削除するとか、元に戻せない動作を行う前には誤動作の可能性を考慮して、確認ダイアログを入れるのが好ましいと思っています。 独自実装しても良いのですが、デザインが無かったりで、とりあえずサクット作ってしまっておきたい場合はデフォルトのwindow.con…

ある要素までスクロールしたらアクションをさせるJavascriptを作成する時に気をつけること。

画面をスクロールさせて、特定の要素の場所に来た時にアニメーションをさせるなどスクロールに応じたアクションの作成をすることがあります。 複雑なものの場合ライブラリを使うのが手っ取り早いと思いますが、簡易なものの時や大きなライブラリを読み込ませ…

WordPress アイキャッチの画像のIDを取得したい。

WordPressに投稿された画像を表示する際にsizesやsrcset属性を変更したい時は、画像を返す関数では実現できないので、画像IDから自分で画像パスなどを取得してimgタグを作る必要があります。 アイキャッチ(サムネイル)の画像IDを取得するにはget_post_thumbn…

HTML・CSS レスポンシブな正方形を作って、その中央にコンテンツを表示させたい。

スマートフォン版のサイトなどを作る際に、例えば商品のサムネイル画像等をウィンドウ幅に合わせ、かつ中の画像を中央に表示させたいようなケースに結構遭遇します。 レスポンシブの正方形を作る vmin という単位を利用する方法 調べていると、widthとheight…

WordPress 4.4 Responsive Images の size の値を変更したい。

WordPress 4.4 以降では、管理画面からアップロードされた画像を表示させる時に、wp_get_attachment_image()とかget_the_post_thumbnail()とかの関数を使ってimgタグを出力すると、自動的にsrcsetとsize属性がつくようになりました。 例えば、580px x 166px …

Stylus 変数の計算で不等号を変更するときのメモ。

CSSのプリプロセッサはSASSとLESSの2強の様ですが、ぼくは頑なにStylusを使っています。 Stylusで変数を使って値を計算させる時、マイナスの値にしたいとかで不等号を変更する時は注意が必要です。 NGな例 変数名のまま出力される $posX = 100 .myClass back…

PHP aタグだけ除去したい。

aタグで囲っているコンテンツの中に、管理画面のWYSIWYGエディターなどでユーザーが入力したHTMLのを出力する時、出力するHTMLの中にaタグが含まれていると、リンクが壊れてしまいます。 [参考] なので、aタグだけを除去して出力したい! PHPではstrip_tags…

CSS Animation アニメーション完了後にアニメーションの最後の状態のままで止めたい

CSS

CSS animation でアニメーション完了後にアニメーションの最後の状態で止まってほしい時のメモ animation-fill-mode プロパティを forwards にする。 .box { animation: my-anime 5s ease -webkit-animation-fill-mode: forwards; animation-fill-mode: forw…

WordPress カスタム投稿 taxonomyアーカイブページのterm取得したい。

WprdPress独特の言い回しなのでしょうか?このtaxonomyとtermが何なのかよく分からなくなってしまいます。 taxonomy は「投稿 (post )」で言うところのカテゴリー term は「投稿 (post )」で言うところのカテゴリーに追加した1つ1つのカテゴリー カテゴリー …

PHP count(false)は1になる。

WordPressの関数などで、wp_get_attachment_image_srcなど、存在すれば配列が、存在しない時はfalseが返ってくようなものがあります。このような関数を使っている所で、返ってきた値の有無を確認するのにcount()を使っていると予期しないバグを発生させてし…

WordPress メディアのaltを取得したい。

投稿のサムネイルなど、管理画面のメディアに登録されている画像のalt属性を取得する方法。 get_post_meta() 関数で取得できる。 _wp_attachment_image_altをキーにして取得することができる。

Stylus ループ中に配列から値を取得する際に気をつけること

Stylusでループ中に配列から値をとってCSSを作ろうとした時にちょっとハマったのでメモ。 Stylusで配列から値をとって使う方法 // stylusの配列はの中にスペース区切りで書く colors = red blue yellow for i in (0..2) .font-color-{i} color: colors[i] 配…

PHP PDO 複数条件(WHERE IN)にハマる

PHPのPDOで複数のidのデータをまとめて取ってくるとかで WHERE IN を使おうとしてハマったのでメモ。 配列のまま渡しても取得できない。 prepare($sql); $stmt->bindValue(':ids', $ids, PDO::PARAM_INT); $stmt->execute(); $res = $stmt->fetchAll(); var_…

Javascript 連想配列(オブジェクト)をforEachでループさせたい。

いい加減配列のループにはArray#forEachを使っていきたいと思っています。 通常の配列であれば下記のような感じ。 var array = ['暁', '響', '雷', '電']; array.forEach(function(val, i) { console.log(i, elmval; }); /* ↓ 出力 0 "暁" 1 "響" 2 "雷" 3 "…

WordPress 特定の固定ページを保存時に処理を実行したい。

あるページテンプレートを使用している固定ページを保存した時に、その固定ページで使用しているキャッシュを消すなどの処理をしたい時とか。 投稿(post)も・固定ページ(page)も保存時は save_post アクションフックが呼び出される。 save_post インポート機…

PHP 配列の内容をログにとりたい。

PHP

PHPでデバッグやフレームワークで渡される配列を展開してログに吐きたい時のメモ。 要するにRubyとかのArray.to_sみたいな感じで展開してログに吐き出したいわけです。 PHPでは配列をそのままerror_logに渡しても上手く書き出せません。

Stylus プロパティの値に変数名を変数で指定したい。

タイトルからして超ニッチというか、意味がわからない感じですが、 例えばこんなHTMLがあったとします。 <ul class="myNav"> <li class="theme-1"><a class="btn">01</a></li> <li class="theme-2"><a class="btn">02</a></li> <li class="theme-3"><a class="btn">03</a></li> <li class="theme-4"><a class="btn">04</a></li> <li class="theme-5"><a class="btn">05</a>…</li></ul>

WordPress 個別記事をpost_typeで判定をしたい。

例えば通常の投稿(post)の個別記事か判定したいような時。 is_single() ではpost_typeの判別はできない。

PHP コールバック関数を使うあれこれ

function_exists だと無記名関数はチェックできない

PHP 定数の有無を確認したい。

PHP

WordPressのテンプレートなどで環境定数があれば、何かを出力したいとかの時。 isset() を使うとエラーになる // GoogleAnalytics のスクリプトを表示 ↓ PHP Fatal error: Cannot use isset() on the result of an expression (you can use "null !== expr…