カテゴリー別アーカイブ: IT

Photoshop CC 2015 + GuideGuideでアートボードごとにガイドを引くと便利

最近リリースされたPhotoshop CC 2015で、ついにアートボードが搭載されました。
Sketchもたまに使うのですが、僕の場合はPhotoshopもイラレも開いて作業している場合が多くて、何してんだろうといった感じだったので素直に嬉しい感じです。

Sketchではアートボードごとにガイドが適当に引けて便利だったのですが、Psのガイドを作成するやつだと、いろいろおかしくて使い物になりませんでした。アートボードというものを認識していない感じ。

アートボードで作れれば便利なのになーと思って、今まで入れていたGuideGuideというプラグイン動くのかなと思ってたら、CC 2015用にアップデートされていました。そんでもって、便利なことにアートボードごとにガイドが引けるようにもなっていました。

使い方

GuideGuideからダウンロード、インストールし、Photoshopを起動。アートボードをクリック後、GuideGuideのパネル(なければ表示)からアートボードに合わせたグリッドが引けます。

作成例

上の画像のpsdファイル(2015じゃないとグループになります)

なんだかんだでPhotoshopから逃げられないな~と感じている今日このごろです。

WelcartでAdvanced Custom Fieldsを使うブックマークレットを作った

中小企業にとって、コストを抑えつつサイトを効率よく運営したいという要望を満たすCMSとして、良くも悪くもWordPressが最近では主流になってきていると実感しています。反面、それ本当にWordPressでやる必要ある?というものも数多く感じるようにもなってきました。でもやっぱりカスタマイズ前提な場合、すぐに実行に移せるWordPressのノウハウを捨てきることが出来ず、ずるずるWordPress頼みになってしまう現状です。

話がそれたような気がしますが、ECサイトの場合、ブログなどと分離するのが面倒だとか一元管理したい、カスタマイズしたいという場合にWordPressプラグインのWelcartを採用することがあり、そこでAdvanced Custom Fieldsが使えないため非常に面倒でした。
何度か要望は出してみたり、カスタマイズしてみたものの、数年間放置されたり頻繁にアップデートされたりいろいろ面倒だったので現在ではブックマークレットを使って処理しています。

ブックマークレットコード

javascript:(function (){var url = location.href,result = url.match(/&post=(.*)&/),protocol = location.protocol+'//',host = location.host+'/';location.href = protocol + host + 'wp-admin/post.php?post=' + result[1] + '&action=edit'})()

使い方

上記コードをコピーして、ブックマークレットとして登録してください。
(どこかのページをブックマークに登録し、ブックマークを編集画面からURLを書き換えると楽です。)

最初に商品登録画面から登録を済ませ、下書きで保存した後に、上記ブックマークレット発動させます。
商品登録画面ではない、通常のWordPress編集画面に移動し、Advanced Custom Fieldsで作成したカスタムフィールドが表示されます。
入力を済ませたら下書きで保存し、(公開でもうまくいくとは思いますが推奨しません)商品編集画面から公開をします。
自己責任でお願いします。何があっても責任は取れません。

なぜ動くのか

WordPressには投稿IDというIDが振られており、Welcartで作成した商品にもIDが振られています。そのIDにカスタムフィールドを結び付けてやるために、強制的に画面を呼び出し登録することで、Advanced Custom Fieldsのカスタムフィールドを扱うことが出来ます。

おわりに

Advanced Custom Fieldsのギャラリーだったり、繰り返しの中に繰り返しを作れたり、繰返しの中にギャラリーが作れたりするのが最高に便利。また、コンテンツ柔軟フィールドがConcrete5のブロックみたいな感じで非常にページを作るのに便利なのでECサイトのデフォルト機能として搭載してくれると嬉しい。

日本の場合やっぱり楽天メソッドのような縦型ページじゃないと売りにくいし、WordPressの場合、無闇矢鱈に画像を貼り付けるかカスタムフィールドを使わないとHTMLで組んでるのとおんなじになってしまうので、このような機能を使って意味のあるページを作成していき、気持ちよく買い物してほしいと最近は思ったりしてます。(なんでもいいのでWelcartには早く対応してほしい)

IEにも対応したレスポンシブSVGの作り方

これはSVG Advent Calendar 2014の参加記事です。
昨日(12/5)に引き続き僕が担当します。
明日(12/7)も空きがありますので、ぜひご参加下さい。

レスポンシブなSVGを作る

SVGは、Retinaであっても綺麗に表示されるため、僕はテキストや図など、Retinaのために2倍サイズを書き出すのが面倒くさい箇所をSVGで書き出しています。

通常のimg要素であれば、

的な感じで、ウィンドウ幅が狭まっても横100%で画像が表示されるはずです。svgでも同じような感じにしてあげると、モダンブラウザではうまく表示されるはずです。

IEで表示がバグる

ところがどっこい、IEだけはうまくいきませんでした。
(ここでのIEはIE9、10、11を指します。)

ChromeとIEの比較。Firefox、SafariもChromeと同じ表示でしたが、IEだけは表示がおかしい。

サンプルscss

サンプル

インラインSVGでは高さが計算されていない、呼び出しではアスペクト比がうまく計算されていないような表示の仕方をしています。

解決策

インラインSVGの場合

サンプルscss

レスポンシブiframeと同じような仕組みです。

呼び出しの場合

imgに横幅をセットしてあげるだけです。横幅100%だったら100%をセットします。

IEではどうやらimgに横幅をセットしてあげないと高さを計算してくれないようです。

IEでもうまく表示することが出来ました。

サンプル

おわりに

SVGを通常の画像として用いると結構ハマりどころがたくさんあります。(特にIE)
レスポンシブはデファクトスタンダードになりつつあるので、SVGを使おうと思ってこれでハマっていた人たち、これからハマる人たちの助けになれば幸いです。

7日のSVG Advent Calendar 2014にまだ空きがありますのでぜひぜひご参加下さい。

SVGスプライト(symbol)でposition:absoluteを使うとIEでずれる

これはSVG Advent Calendar 2014の参加記事です。
昨日(12/4)はshino212さんの「はじめてSVGでアニメーションを作った時の話」でした。おじさんのアニメーションが可愛い。

6日に投稿しようと思ったのですが、空きがあるので5日も投稿することにしました。まだ空きがあるのでぜひご参加下さい。

SVGスプライトとは

body直下などにインラインSVGを貼り付け、gタグの代わりにsymbolタグを用いて使いまわす手法です。リクエスト数を減らす効果があり、ページを書き換えるタイプのpjaxやSPAと一緒に用いるといい感じがします。

SVGスプライトでハマる

上記のように、ロゴを多用している箇所をSVGスプライト(symbol)を用いて対処しようとしてハマりました。
メインビジュアル部分の所をposition:relativeをかけ、SVGにabsoluteをかけ対処したところ、IEと他のブラウザで見え方が異なってしまいました。


右はWindows8.1のIE11。Windows7のIE9、10でも同じでした。

なお、position:absoluteをかけなければ同じ表示になります。

まあ、普通の画像であれば、

で右下固定で表示されると思ったのですが。。。

ずれて表示されてしまいました。

解決策

高さを指定してあげることで解決出来ました。

スタイルか、svgに高さをふってあげることでIEでもposition:absoluteで絶対配置することが出来ました。

サンプルはこちら

おわりに

IEのSVG表示はきれいなのですが、いろいろハマりどころがあるのが難点。

明日(というか今日)のSVG Advent Calendar 2014も僕が投稿します。内容はまだ考え中です。

iOS8でvwとvhが動かないし開発者ツールは動かないしで困った

実装中のやつで、vwとvhが使えるような案件だったので使ってみたところ、iOS6、iOS7は動くのにiOS8では動かなくて困りました。

vw・vhとは

親の要素をぶちやぶって、ウインドウサイズで幅や高さを指定できるプロパティです。

100vwで横幅いっぱい、100vhで縦幅いっぱいと、JavaScriptで頑張んなきゃいけなかったものが簡単に指定できます。calcと一緒に用いて使うと便利です。

ブラウザはIEは9〜、Android4.4〜なので使えるっちゃ使える感じです。

iOS8で動かない

9月23日現在、iOS8でvw、vhどちらも動きません。vwは要素の幅、vhはメニューバーも計算された高さが指定されているように思えます。

検証できない

Safariの開発者ツールがiOS8にまだ対応していないみたいで、Yosemiteが公開されたらiOS8もデバッグできるようになるとか。

WebKit Nightly Builds

とりあえず上記のNightly版を入れることにより、無事デバッグすることが出来、やはりvw、vhがバグってることが確認できました。

対応

横幅は親要素を超過していないのでwidth:100%で乗り切る。縦幅はJavaScriptでinnerHeightを用いることで制御することが出来ました。

まとめ

iOS8のバグが多分いままでより多い気がする。
ファイルもアップできないしで、あんまり変わっていないように見えて内部ではいろいろ変わっているみたいですね。plusも登場してこれからアプリ制作やWeb制作は非常にカオスになりそうな気がしてます。

写真素材をGoogle Spreadsheetでらくらく共有

Google Spread Sheetで共有しやすい素材管理

素材をクライアントやメンバーに共有するときに皆さんはどのように行っていますか?

メール、テキスト、HTML、CMS、Evernote…などなど、様々な共有ツールがありますが、私はGoogle Spread Sheetをおすすめします!

Google Spread Sheetとは

Googleが運営するExcel(のような表計算ツール)。

  • Excelにない関数
  • JavaScriptスクリプトによるマクロ
  • Googleサービスとの連携
  • バッチ処理

などなど、様々な機能があるウェブベースの表計算ツールです。
最近アップデートがかかり、実質容量無制限、関数の制限などがなくなり私にとっては無くてはならないツールになりました。

デメリットとしてはエクセルでいうピボットテーブルが貧弱なこと(GetPivotData、グループ化、ソート機能の充実、テーブルが使えない)が挙げられますが、それを補って余りある機能が充実しています。

Google Spreadsheetで画像を管理してみよう

ExcelでもGoogle Spreadsheetでも、画像の埋め込みは可能です。SEだとキャプチャを撮って貼り付けという拷問みたいな作業があるとかないとか。

エクセルでは挿入であれこれやるしかないと思いますが、Google Spreadsheetには私の知ってる限り3種類の画像埋め込みの方法があります。

  • Excelと同じように挿入
  • IMAGE関数を用いてセル内に表示
  • Google Apps Scriptで頑張る

Google Spreadsheetには、URLさえわかれば画像をセルに表示できるIMAGE関数というものがあります。ウェブベースの利点とも言える関数を用いてセル内に画像を簡単に表示させることが出来ます。

IMAGE関数を使おう

=IMAGE(URL, [モード], [高さ], [幅])

IMAGE関数について

=IMAGE(“http://k.yimg.jp/images/top/sp2/cmn/logo-ns-131205.png”)

でYahooのロゴがセル内に表示されます。

URLさえわかれば画像が簡単に表示できるので便利ですね!

応用してPixta、Fotolia、ShutterstockのリンクURL付き画像集をつくろう

Google Spreadsheetには、組み合わせることによって便利な関数がまだまだたくさんあります。ここでは前述したIMAGE関数と組み合わせることによって簡単に画像を表示させるカスタマイズ方法を紹介します。

IMPORTXML関数を使ってsrc属性を抽出

Google Spreadsheetで備わっている、IMPORTXMLという関数を用いることにより、XPath形式でHTMLを抽出することが出来ます。

前のSpreadsheetのバージョンでは制限がありましたが、現在では制限が取り払われたため自由に使うことが出来るようになっています。

XPathについて

XPathとは、JavaScriptでいうDOMみたいな感じで特定の部分を抽出することができる言語構文です。

XPathの特定方法

上記のように大体の開発者ツールにはXPathのコピーが備わっていますので、それを元にXPathの理解を深めることも出来ます。なれればDOMよりも簡単に特定部分を抽出できる場合もあるため、スクレイピングなど、データを集めるときに重宝します。

詳しくはWikipediaなどをご参照下さい。
XML Path Language Wikipedia

詳細URLから画像を抽出する

pixtaの場合

通常のストックフォトサイトの場合だと、上記のように写真素材ごとにURLが割り振られています。
そこにメインのサムネイル画像が表示されていますので、そのURLを抽出すれば後はIMAGE関数でチョチョイのチョイですね!

各サイトのXPath

PIXTAのXPath
//[@id=’imgZoomArea’]//*/@src

ShufflestockのXPath
//*[@class=’thumb_image’]/@src

FotoliaのXpath
//[@class=’content-view-thumbnail’]//@src

作成例

作成例

写真素材スプレッドシート

いろいろいい感じにすると、上記のような感じになります。自分のスプレッドシートにコピーすることも出来ます。(時と場合によってはLoadingがずーっと出てで見られない場合があります。その場合はURLセルを消して戻せばなぜか再度表示されます。)

効率化しよう

詳細URLがわかれば上記のようなスプレッドシートが簡単にできることがわかりました。
いちいちスプレッドシートにぺたっと貼り付けるのもアレなので、全てのタブのURLをコピーし、スプレッドシートに貼り付けるだけにしてしまいましょう!

Chromeの場合
Make Link of All tabs

Firefoxの場合
Firelink

上記アドオンを用いることにより、全てのタブを改行区切りにすることが出来ます。

Fotolia、Pixtaなどで新規ウインドウを作成し、良さそうな画像の詳細ページをどばばばばーっと開いた後アドオンを発動させるだけで全タブのURLが抽出できます。あとはスプレッドシートに貼り付けるだけですね!あとは共有しておしまいです。

まとめ

こんなかんじで、Google Spreadsheetを用いることにより、さくっと画像を共有することができちゃいます。

IMPORTXMLのXPathはうまくいくサイトとうまくいかないサイトがあるため、3回同じようなXPathかいてうまく行かなかったら諦めるのも手です。サイトがリニューアルなどした時などXPathは変わってしまいますのでお気をつけ下さい。

画像は直リンクになってしまいますので、あまりやり過ぎないことをおすすめします。(おそらくGoogleでキャッシュしているとは思いますが。)

他にもこういう共有方法があるよ〜という方は教えて下さい!それでは良い共有ライフを〜

VCCWにphpMyAdminとwordmoveを載っけたVCCW-pwを作った

sshpassを入れ忘れていたので追加しました。
sudo yum install -y sshpass でsshpassがインストールできます。


さよならVVV

最近までVVVというWordPressをローカルで構築するものをカスタマイズして使っていたんですが、VVVのカスタマイズがあまりにも面倒くさくて、かつバグりやすいのでChefの勉強がてらVCCWに出戻りしました 。

VCCW is god

そしたらVCCWはまごうことなき神でした。僕の記憶に無いだけかもしれませんが、前まではWindowsで動かなかったり、Vagrantfile内でここまでできなかった気がしたので。これからWordPressを開発するのであれば離れられない気がします。プラグイン最初にインストールする設定が便利。

んで、VCCWをフォークし、個人的に欲しかったものをプラスしたVCCW-pwを作りました。

VCCW-pw

https://github.com/tanshio/vccw

おもむろにgit cloneしてディレクトリを移動しvagrant upすれば動きます。

VCCWにphpMyAdminを追加し、rubyのバージョンを上げ、wordmoveを入れただけです。
phpMyAdminはなんだかんだで便利。
wordmoveはページ追加などの更新作業の時にローカルに環境ごと取り込めるので便利。wordmoveのFTPだとバグりやすいのでlftpはインストールしてません。SSHを推奨。

以下のcookbookを使わせていただきました。

https://github.com/fnichol/chef-rbenv
https://github.com/fnichol/chef-ruby_build

あと、おまけでbrowsersyncを入れてあるのですが、プロキシのせいなのかロードに5秒ぐらいかかる。こういうものなのかな。

Chef便利

Chefは2年ぐらい前に触れてからアレルギー的な感じで拒否反応を起こしてましたが、触れざるを得ない事情で触れて勉強してみたらそんなに難しく感じませんでした。
自宅サーバーを構築したことある人だったらすぐ慣れそうな気がします。templateが便利すぎて唖然。多分Vagrantのおかげで簡単に思えたようにも思える。

まとめ

ぶっちゃけWordPressはいろいろあれな感じに思えてはいるのですけど、Web制作を生業とするとこれからも長い間離れようがない気がしてるので、できるだけサクサク環境を構築できるものを使って、さっさと終わらせたいもんです。
gitでデータベースも管理できたらそれだけでも楽なんですが\(^o^)/
(versionpressとrevisrに期待を込めて)

簡単にPhotoshopでポリゴンスタイルっぽい画像を作る方法

ポリゴンスタイルとは

2014年に絶賛流行中のデザイン。フラットデザインとの相性が良く、メインやポイントとして使ってあげるといい感じのデザインに見えやすくなります。ローポリとかとも言われてます。

ポリゴンスタイルの作り方

イラレの場合、パスをたくさん作っていい感じに着色していくことになるのですが、非常に大変。その分自分のイメージに合ったものが作成できます。
Dmesh、TRIGRAFFなどの無料ポリゴンアプリでもできるのですが、ここではPhotoshopを使ってやってみることにします。

水晶を使いまくる

元画像


福島に行った時に撮ったお城です。iPhoneで撮影。

フィルター→ピクセレート→水晶を選択します。

水晶の大きさを決めます。

なんかポリゴンっぽい画像が出来ました。
上の画像は元画像を複製し、それぞれのレイヤーに水晶の大きさをでかいもの、小さいものとかけ、透明度で調整しただけのものです。主張がでかい。

元画像を一番下のレイヤーに配置し、小さな水晶をかけたもの。これなら背景とかに使えそうな気がします。なんとなく水彩とかクレヨンで描いたっぽくみえなくもない。

彩度を調整するとノスタルジーな感じになる気がします。

おまけ DMeshで作成した画像

iPhoneの無料アプリ、TRIGRAFFで作った画像。パリっとしててこれぞローポリって感じですね。メイン向き。

おわりに

モザイクでいろいろやるよりも僕はこっちのほうがなんとなく味があるように見えるので好きです。
正統なポリゴンスタイルではないので、メインで使う場合にはパス描いたりツール使って作成することになると思いますが、背景で若干主張したいぐらいなら水晶やPhotoShopの機能でも5分もかからず作成できるのでお試しあれ。

IEではposition:fixedかかったものは直でtransitionかけてあげる必要がある

bodyかhtmlに直接transitionかけてアニメーションさせることもあると思うのですが、IEではposition:fixedかけてあるものは除外されるようで困りました。

環境は、IE10、11です。

IEでposition:fixedかかったものが無視されるデモ

demo

直接かけてあげたデモ

demo2

動画デモ

さすがのIEくん過ぎてもう僕は何を信じていいのかわからなくなりました。

ページ遷移でフェードかけるだけのJavaScript作った

絶賛脱jQueryで墓穴を掘っている感ある今日このごろです。
いつまで続くのか分からない感ありますが、脱jQueryで作ったものをちまちま公開したいと思います。脱jQueryのせいで夏休みがなくなってる感あるので誰か使ってあげて下さい。

ページ遷移でフェードかけるだけのJavaScript

動作環境
transition使ってるためIE10以上(8以上にするかもしれませんがいつものようにしないと思います)

demo

オプション項目

一応内部アンカーは除外、クラスと属性も除外できるようにしてあります。
サイズは普通で4kb、minify版で2.4kbです

IEではなぜかposition:fixedかかってるものはフェードかからないため指定してあげる必要があります。面倒くさいですね。

たまに画面がちらつくのですが、多分データが重くないとちらつくみたい。その場合は直opacityかければと思ったんですけど、それでもちらついたりする場合があります。100%できるやり方があるのを知ってる方は教えて下さい。
なにか問題などあったらコメント下さい。コードは適当なのでパブリックドメインでかまいません。

ぶっちゃけページ遷移でエフェクトかけるのはおすすめしません。pjaxでもたまにちらついて中身見えたりするサイトもあるので難しいのかも。

作ってみて改めて思うのはjQuery is 神