まちいろエンジニアブログ

南池袋のWebサービス開発会社、株式会社まちいろのエンジニアブログです。

WordPressでsetcookieを使う方法

こんにちは! まちいろの日高です。
WordPressを扱うようになって早3年が経ちました…
いろいろありました。未だにGoogle先生に聞きながらコーディングをする毎日です。

今回はWordPressでsetcookieを使う方法についてまとめてみます。
PHPテンプレートの中でsetcookie書くだけでしょ…? いえいえ… 大変なんです。

 setcookie()の掟

PHPのsetcookie関数は

html や head タグはもちろん 空白も含め、あらゆる出力よりも前にこの関数をコールするようにしなければなりません。
PHP: setcookie - Manual

というルールがあります。何よりも先にsetcookie()を書きなさいね!ということです。
WordPressテンプレートPHP内にsetcookie()を記載した際も、こんなエラーが表示されました。

Warning: Cannot modify header information - headers already sent by …


header.phpの一番上に記載しても同じエラーが消えず
エラー箇所がWordPressのコアPHPだったので、とても困りました…

 WordPressでsetcookie()を使うには…?

WordPressでsetcookieを使いたい場合は、htmlタグより前にsetcookieを差し込んでしまえばよいということです。

function.phpでadd_actionを使います。

/*-----------------------------------------------
WordPressでsetcookieを使う
------------------------------------------------*/
add_action( 'wp_headers', 'my_setcookie');
 
function my_setcookie() {
    if (!isset($_COOKIE["sample"])):
        setcookie("sample","sample_value",0,"/");
    endif;
}


wp_headersにフックすることでエラーも発生せず、無事Cookieを仕込むことができました。

 まとめ

テンプレートPHP中でsetcookie()を呼び出し、
エラーが出る場合はfunction.php中でadd_actionすることで解決できました。
wp_headではなく、wp_headersにフックすることをお勧めします。

写真修正に迷わないために。明暗、色の部分修正方法について。

こんにちは。まちいろのデザイナー楓子です。
デザインには写真は不可欠。
ということで、ここ数回テーマは写真加工・写真についてなどのお話を させて頂きたいと思います。
写真加工の技術紹介をしているところは多いですが ここではもう一歩踏み込んで よりいい写真を完成させるための流れを紹介していきます。
※いい写真というのは意図やストーリー性の感じるものです。
写真に物語やその物のらしさ感が出ているとより見る人側の印象に残ります。


第1回目は「暗い写真を明るくする写真修正の全体の流れ」です。


では「暗い写真を明るくする写真修正の全体の流れ」をご説明します。
皆さま、暗い写真に気分まで真っ暗なんて経験はございませんか?
私自身「影がつきすぎて顔が怖い」「全体的に写真が黄色っぽ過ぎる」など、 様々な事がありました。
そんな悩みを一緒に解決していきましょう。

今回はこのように写真を修正していきます。

f:id:f_arai:20161013094714p:plain

大まかな流れ

今回話すことをざっくり箇条書きすると・・・・
・始める前に大切なこと:写真のらしさ感を考慮し修正度合いの判断
ヒストグラムを確認。色、明暗バランス把握。
②新規レイヤーの作成
③対象物(オブジェクト)の選択
④色調補正
上記、3点について話していきます。
第2回目以降からはこの1回目の補足として、詳しい情報を付け足していきます。

始める前に:写真の「らしさ感」を考慮し修正度合いの判断


らしさ感を考慮することで主役である被写体がより生き生きしていきます。
意味わかりにくいので具体的に。

f:id:f_arai:20161013101752p:plain


この写真であったら どすこい感を出したいので、
重量のある犬=どすこいと言うワードから
・寒色よりは暖色寄り=被写体の犬は少し赤味を入れよう。少し暗くすることで重量感を。
・背景より主役が目立つようにしたい=背景の色を補色であるシアン調整+明暗調整
といった具合です。
難しいかも知れないのですが、簡単な方法としてはまず
・どすこいのように明確なタイトルをつけておく
・そこから写真修正の計画を練っておく
何も考えず修正してしまうと、効率が悪く、その上そのものの良さを消してしまう恐れもあるのでお勧めできません。


例えば、優しげで綺麗な女将さんというタイトルをつけるとします。
それなら、美白にして全体的なコントラストは抑えて、色バランスを均等にした方がいいと考えられます。
高級感があっておいしそうな卵かけご飯なら、背景は暗めにして、商品は彩度高めにしてそのものの主役感を上げよう。など。 いろいろと判断が出来るわけです。
写真に限らずデザインをする時は常に「らしさ感=そのものがまとっている雰囲気」意識するようにしてください。

ヒストグラムを確認する。色、明暗バランス把握。


ヒストグラムとは簡単に言うと、写真の色バランス、明暗などが一目で分かる表です。
これを見て、全体の仕上がりをどう調整するかを判断します。
まずはヒストグラムを開いてください。

f:id:f_arai:20161013105623p:plain
ウインドウ>ヒストグラムにチェックを入れるとワークスペースに出てきます。

②新規レイヤーの作成


新規レイヤーを作成してください。
Photoshopは元に戻る機能はありますが、限られている為元の画像は残し
コピーのレイヤーを作成して、そちらを修正していきます。

f:id:f_arai:20161013104921p:plain


簡単に言うと、写真の色バランス、明暗などが一目で分かる表です。
これを見て、全体の仕上がりをどう調整するかを判断します。

f:id:f_arai:20161013110633p:plain


つまりこの図からは暗いエリアにはシアンが多く、明るいエリアにはマゼンタが多い
中間明度にはイエローやグリーンが多いと言うことがうかがえます。
この写真中間明度が多いので、全体的にイエローとグリーンが中間色に多い形になっています。
ということは、自然な写真に近づけるにはシアンとマゼンタを調整すればいいのです。

③対象物(オブジェクト)の選択


色など変更を加えたい箇所を囲っていきます。 いろいろなツールがありますのでそれぞれ用途にあったものを使うと良いかと思います。


f:id:f_arai:20161013111155p:plain
f:id:f_arai:20161013111157p:plain
f:id:f_arai:20161013112243p:plain

今回は規則性の無い線(毛)なのでなげなわツールを使用します。

f:id:f_arai:20161013112301p:plain
対象物を選択したら、メニューバー選択範囲>選択とマスクで境界線を調整します。


f:id:f_arai:20161013112747p:plain
そのままだと、境目がはっきりしすぎて修正する時に不自然になるので
境目をぼかします。バーを調整して境界線をぼかしましょう。

④色調補正

色調修正は色々なツールがあるので、自分に合ったものを使うと良いかと思います。 主に使われるもので、自分自身もこれは外せないというものを紹介していきます。


メニューバーのウインドウ>メニューバーのイメージ>色調補正 を開きます。

f:id:f_arai:20161013115225p:plain
色調補正のアイコンの名称を一覧にしてみました。 その中でも特に使う3つの説明をします。
f:id:f_arai:20161013115505p:plain

レベル補正


f:id:f_arai:20161013120045p:plain
ヒストグラムがうっすらと見えています。 このバーを移動させることで、明暗の調節が可能です。

トーンカーブ


f:id:f_arai:20161013120046p:plain
レベル補正と同じく、線の下にあるグラフはヒストグラムと同じものです。背景は明暗の量を表しています。 明るくしたい時はこの斜めの線を上にやり、暗くしたい時は下に線をドラックします。

カラーバランス


f:id:f_arai:20161013120047p:plain
カラーバランスは色の調整を行う時に便利です。 自分の変えたいイメージに合わせて、変更しましょう。

最後に


ここまでお疲れさまでした。 写真加工は奥が深いので、これでもまだまだ書き足りないのですが ここをまずおさえていただくとだいぶ写真を思う通りに修正できるようになります。 次回以降の補足によってまた詳しく書きますので、今後ともよろしくお願い致します。 また、何かここはこの方がいいのでは?という疑問やもっと詳しく説明して欲しいということがありましたらコメント頂ければと思います。

レスポンシブデザインサイトのCSSの読み込み設定

f:id:s_kadota:20161004131058p:plain

こんにちは、まちいろの門田です。

昨今ではスマートフォンを利用される方は当たり前のように世の中に溢れているわけですが
それに伴ってWEBサイトもスマホユーザー向けのサイト、
むしろ閲覧されるデバイスがスマホが基本となっているサイトも多く見られるようになってきました。

今後もPC、スマホ両方での閲覧を考慮されたWEBサイト開発が主流となってきます。 そこで今回はそんな複数の画面サイズに対応した「レスポンシブデザイン」を作成する上で 知っておきたいCSSの読み込み設定を記したいと思います。
(自分用の備忘録でもあります。)

1 画面幅の違いで読み込むCSSを選り分ける。

f:id:s_kadota:20161004131048p:plain

一番簡単、というわけではないですがおそらく一番直感的に書ける手段かと思います。
また画面幅読み込みにも二通りございます。

  • css側で範囲を指定する。
  • html側で範囲を指定する。


CSS側で範囲を指定する。

css内で適用する画面幅の最大あるいは最小のサイズをメディアクエリで指定して(または同時)、 その範囲内で書かれたcssはその指定幅の時のみ有効となる方法です。
cssを分けずに管理したい場合などに有用です。




@media screen and (max-width: 768px) {
  h1{
    font-size:15px;
    color:#333333;
  }
}

上記のものは「画面幅最大768px」まで適用されるcssになります。 ですので769px以上の画面では適用されません。


@media screen and (min-width: 768px) {
  h1{
    font-size:20px;
    color:#000000;
  }
}

逆に上記のものは「画面幅最小768px」まで適用されるcssになります。 767px以下の画面では適用されません。


@media screen and (min-width: 768px) and (max-width: 1000px) {
  h1{
    font-size:18px;
    color:#ff9922;
  }
}

そして上記のものは最小値と最大値の同時指定になり、「画面幅768px〜1000px」のみ適用されるcssとなります。
タブレット用のサイト構成、あるいは500px〜800pxなどのPCとスマホの中間にあたる 画面幅内でのデザインを設計する際には利用されるシーンが多いかもしれません。
また、逆の指定方法は

@media screen and (max-width: 768px),screen and (min-width: 1000px) {
  h1{
    font-size:18px;
    color:#ff9922;
  }
}

上記のようにカンマ区切りで指定すると「画面幅768px以下、あるいは画面幅1000px以上」 というように指定することができます。 あまり使うケースはないかもしれませんが、特定の範囲内のみcssを適用させたくない際などに 有用かと思われます。





HTML側で範囲を指定する。

html側でcssを読み込む際linkタグでcssを読み込みますがその際に画面幅で読み込むcssファイルを指定します。
cssファイル自体を画面幅ごとに管理している場合はこちらが有用です。
ファイル内でのメディアクエリ内への入れ忘れや、その範囲を探しに行くことなどを考えるとこちらの方が私的には好きな管理方法です。


<link rel="stylesheet" href="style_pc.css" type="text/css" media="screen and (min-width: 768px)">

上記の様にlinkタグ内でメディア属性を指定し、範囲を記述してあげれば完了です。
画面幅768px以上」の時のみ、style_pc.cssが読み込まれるようになります。


<link rel="stylesheet" href="style_tab_sp.css" type="text/css" media="screen and (max-width: 767px)">

上記のものは「画面幅767px以下」の時に、style_tab_sp.cssが読み込まれるようになります。
また、こちらもandやカンマを使えばcss側同様に同時指定ができます。





2、デバイスの違いで、読み込むCSSを選り分ける。

f:id:s_kadota:20161004131052p:plain

画面幅ではなく、閲覧している端末をjavascriptで判定して読み込むcssを切り替える方法になります。
スマートフォンと一括りに言っても、多種多様な画面幅があるため最新機種が出るたびに画面幅調整に 走るよりかは端末を判定してしまったほうが容易かもしれません。

もちろん、先ほども言ったように画面幅が多くあるためその分スマホ全てが同一のデザインでは一部機種では 見難い形になってしまうケースもあると思われますので画面幅で選り分けるか、デバイスで選り分けるかは 作成されるレスポンシブデザインを鑑みて実装されるのが一番でしょう。


バイス情報の取得

javascriptでデバイス情報は

navigator.userAgent

で取得することができます。

navigator.userAgent.indexOf('iPhone')

この様に指定すると、navigator.userAgentで取得した情報内に
iPhoneがあった場合その「発見位置」を返してくれます。(1以上)
逆にiPhoneがnavigator.userAgentにはない場合は「-1」が返ってきます。
ですのであとはif文を用いて条件分岐を作成すればデバイスごとのcss読み込みを記述することができます。
iPhone同様にiPadiPodAndroidを指定できます。





var iphone_flag = navigator.userAgent.indexOf('iPhone');
var ipad_flag = navigator.userAgent.indexOf('iPad');
var ipod_flag = navigator.userAgent.indexOf('iPod');
var android_flag = navigator.userAgent.indexOf('Android');

if(iphone_flag > 0){  //発見されない場合-1が返ってくるので0以上で指定する。
  <link rel="stylesheet" href="style_iphone.css" type="text/css"> //iphone用のcss
}else if(ipad_flag > 0){
  <link rel="stylesheet" href="style_ipad.css" type="text/css"> //ipad用のcss
}else if(ipod_flag > 0){
  <link rel="stylesheet" href="style_ipod.css" type="text/css"> //ipod用のcss
}else if(android_flag > 0){
  <link rel="stylesheet" href="style_android.css" type="text/css"> //android用のcss
}else{
  <link rel="stylesheet" href="style_pc.css" type="text/css"> //それ以外の際に読み込むcss
}


また条件分岐の中でも

f(iphone_flag > 0){
  <link rel="stylesheet" href="style_iphone_min.css" type="text/css" media="screen and (min-width: 320px) and  (max-width: 400px)">
  <link rel="stylesheet" href="style_iphone_max.css" type="text/css" media="screen and (min-width: 401px)">
}else{
  <link rel="stylesheet" href="style_pc.css" type="text/css">
}

を用いて画面幅指定をすればより詳細なcssの設定をすることができます。




HTML側でのviewport指定

レスポンシブデザインにおいて上記の画面幅やデバイス読み取り設定の他に、
忘れてはいけないことがmetaタグでのviewport指定になります。

これを指定しないで実装すると、画面幅を指定しているにも関わらずスマホで表示した際などに
こちらが想定したデザインとは違うサイズなどで表示されてしまったりします。(画像サイズやフォントサイズなど)
それらはサイト自体の表示幅の設定を施していないために起きてしまう現象です。



<meta name="viewport" content="width=device-width,initial-scale=1">

上記のmetaタグをhtmlのhead内に記述すれば画面幅に準じて、サイズなどが調整されるようになります。


content内のwidthで表示幅を指定します。
device-widthを指定してあげることで表示しているウインドウ幅がデバイスのサイズに基づきます。


<meta name="viewport" content="width=320px,initial-scale=1">

数値を指定してあげればどのデバイスでアクセスしてもそのサイズ幅を基準として表示されます。

しかしメディアクエリを使用している場合はviewportでのwidth指定で特定の数値を設定すると
スマホ側での表示がおかしくなってしまう場合があります。
(サイト表示時、やたらと大きくズームされて表示されたり)

ですのでメディアクエリ使用時には「width=device-width」を指定してあげるのがベストです。

initial-scaleは拡大率となります。基本的に1を指定するのが無難です。
他にもあまり使用されるケースはないかもしれませんが拡大の最大最小率や拡大の許可なども合わせて指定できます。

より掘り下げて調べてていただければもっと詳細な設定がいくつも出てきますが
「とにかくレスポンシブデザインを作ったので、読み込ませたい」という方は下記metaタグをheadに貼りましょう。

<meta name="viewport" content="width=device-width,initial-scale=1">




他の実装方法など


これらを用いないでもWordPressであればデバイス切り替えのプラグインなどもありますし、
Rubyで構成されたサイトでもデバイス切り替えのgem(便利機能のライブラリ)などがあり
cssに限らずコードの出し分けをする手段は様々です。

案件の仕様によって、後々の編集が容易な柔軟性の高い形で実装するのが一番望ましいでしょう。