10月, 2015 - AGN Web!

より手軽にオリジナルグッズが作れる！Canvathを使ってみました。

在庫リスクなし！オリジナルグッズを作って販売できるWebサービスまとめ

オリジナルグッズ作成サービスのご紹介。
今回は、Canvath　https://www.canvath.jp/を実際に使ってみました。

こちらはすでにネットショップをもっている方向けのサービス。

デザインを決めたら、自身の運営するショップサイトに掲載。
注文があったらCanvathに発注し、直接注文者へ商品を発送をしてもらうシステムです。

ちなみにネットショップサービスのBASEと連携が可能です。
詳しくはこちら

※ご利用の際はサイトの規約などをご確認ください。
※2015/10/31現在の情報です。

続きを読むより手軽にオリジナルグッズが作れる！Canvathを使ってみました。

「CSSフレームワーク FOX CSS」に触れてみた

こんにちは、yasaiです。

今年の新潟は例年以上に秋を通り過ぎて冬が来ちゃいそうです。。。
寒いのは苦手なのです。(暑いのもダメだけども)

【DEMO】

今月は当ブログのネタはなんにしようかしら、今日の夕飯はなんにしようかしらと悩んでまして、夕飯を大根ときのこの味噌汁にすることは決めたすぐ決まったのですが、何を書くかはさっぱり。
アウトプットって難しい。。。

そんな中coliss様の記事で触ってみたいものを発見したので、今日はそちらを。
そちらの記事はこちら。

「IE9+もサポート、CSS3 Flexboxを始める人にぴったりな極めてシンプルな使いやすいフレームワーク -FOX CSS」

「FOX CSS」に触れてみましたよ、というお話です。

普段使っているフレームワーク

普段制作するときははだいたい「RESPONSIVE GRID SYSTEM」とプラスアルファ自分で使いやすくカスタマイズを追加したものを使っています。

もちろん「Bootstrap」系のものにも興味はおおありなのですが、グリッドシステムを使ったレイアウトさえあればOKということが多く、「RESPONSIVE GRID SYSTEM」の24カラムバージョンを多用しています。こちらはデザイナーさんとも話したうえで使っています。

はじめて触ったときはbox-sizing: border-box;の威力に感動してた頃です。

FOX CSSを触ってみようと思ったわけ

軽量フレームワークであること
レイアウトだけのフレームワークであること
モバイルファーストな仕様で、「RESPONSIVE GRID SYSTEM」のように使えそうなこと
flexboxを使っていること
IE9+で対応しているらしいこと
個別のsassファイルで切り分けられ、クラス名が他と重複しづらく他のcssへ干渉しないこと

flexboxを使ったレイアウトが今後主流になるのかなぁという感じですが、実案件ではIEへの対応(IE10ではベンダープレフィックス付き、IE9以下は非対応)や仕様変更が多くちょっと使うのが怖かったこともあって、使うのを少し敬遠してたところがあったのです。←~~ただの勉強不足のいいわけ~~

そんなときにcoliss様の記事を見て、IE9+なら良さそうだぞ！、ということでやる気になったのでした。

試しにざっくりやってみた

【DEMO】

ドキュメントを見ながら写真おいて、テキスト入れて。

基本的な使い方は自分の使いたい奴のクラスをどんどんつけていくパターンです。

float+絶対配置やdisplay：table-cell;を使ったレイアウトの良いとこどりな感じで、
flexboxを使ったレイアウトで、特徴的なのが「コンテンツを天地のセンター合わせ」と「コンテンツの並びをリバースできる」ってところですよね。

特に可変する高さの「コンテンツの天地のセンター合わせ」に関してはCSS挫折の一つの要素だったんじゃないかと思っているので、flexboxが敷居を下げる一つのきっかけになったらいいな、と思っているのです。

コンテンツの天地のセンター合わせ

<div class="fx-row">
    <div class="fx-col-100-xs fx-col-25-s fx-col-top-s">
        <img src="images/01.jpg" alt="">
    </div>
    <div class="fx-col-100-xs fx-col-25-s fx-col-center-s">
        <h2>近所の漁港</h2>
        <p>ここには長めのテキストを入れます。ここには長めのテキストを入れます。ここには長めのテキストを入れます。ここには長めのテキストを入れます。</p>
    </div>
    <div class="fx-col-100-xs fx-col-25-s fx-top-top-s">
        <img src="images/02.jpg" alt="">
    </div>
    <div class="fx-col-100-xs fx-col-25-s fx-col-center-s">
        <h2>日本海の夕日</h2>
        <p>無理矢理ボックスを天地のセンターにしたので変ですが。。。</p>
    </div>
</div>

</div>

<h2>近所の漁港</h2>

<p>ここには長めのテキストを入れます。ここには長めのテキストを入れます。ここには長めのテキストを入れます。ここには長めのテキストを入れます。</p>

</div>

</div>

<h2>日本海の夕日</h2>

<p>無理矢理ボックスを天地のセンターにしたので変ですが。。。</p>

</div>

.fx-rowで行を指定し、その中に.fx-col-00-xでボックスを作ります。00の部分は比率になってます。（デフォルトでは10, 20, 25, 30, 33, 40, 50, 60, 66, 70, 75, 80, 90, 100）
また。xの部分はメディアクエリの切り替えのポイントです。(デフォルトではxs、s: 768、m: 940、l: 1200)

画像のボックスは.fx-top-center-xで上付きに、テキストは行に対して.fx-col-center-xを指定して「コンテンツの天地のセンター」にしています。

flexbox使って「コンテンツの天地のセンター合わせ」をやりたいがためにこんなコードですが、ここに関してはこうじゃなくてもできましたね(苦笑)

コンテンツの並びをリバース

<section>
    <h1>Item Center</h1>
    <div class="fx-row fx-row-center-s">
        <div class="fx-col fx-col-100-xs fx-col-40-s">
            <h2>晴れた雪の日</h2>
            <p>このボックスでは「文章」40％、「画像」30％を、センターにして配置しています。</p>
        </div>
        <div class="fx-col fx-col-100-xs fx-col-30-s"><img src="images/07.jpg" alt=""></div>
    </div>
</section>

<section>
    <h1>Item Revers and Center</h1>
    <div class="fx-row fx-row-center-s fx-row-reverse-s">
        <div class="fx-col fx-col-100-xs fx-col-40-s">
            <h2>雪の日の空</h2>
            <p>このボックスはHTML的には上のコンテンツ同様、「文章」+「画像」になっていますが「.fx-row-reverse-」を指定し、逆順にしています。<br>HTMLの可読性が大きくあがりますね。
</p>
        </div>
        <div class="fx-col fx-col-100-xs fx-col-30-s"><img src="images/08.jpg" alt=""></div>
    </div>
</section>

<h1>Item Center</h1>

<h2>晴れた雪の日</h2>

<p>このボックスでは「文章」40％、「画像」30％を、センターにして配置しています。</p>

</div>

</div>

</section>

<h1>Item Revers and Center</h1>

<h2>雪の日の空</h2>

<p>このボックスはHTML的には上のコンテンツ同様、「文章」+「画像」になっていますが「.fx-row-reverse-」を指定し、逆順にしています。<br>HTMLの可読性が大きくあがりますね。

</p>

</div>

</div>

</section>

上のセクションが普通の順番「テキスト+画像」、下のセクションが逆順に「画像+テキスト」になります。

違いは下のセクションでは.fx-rowに対して.fx-row-reverse-xを指定しているところですね。同じ内容で見た目だけ違うだけなので、html的には同じ並びになっていてコードの可読性が高くなりますね。

あと、このセクションでは.fx-rowに対して.fx-row-center-xを指定しています。これは中のボックスのトータルの水平の配置の仕方です。

.fx-row-start-x　：左寄せ

.fx-row-center-x　：中央寄せ

.fx-row-end-x　：右寄せ

.fx-row-between-x　：均等割り(端から端まで)

.fx-row-around-x　：均等割り

.fx-row-between-xと.fx-row-around-xの違いを言葉で説明できないので、こちらはドキュメントで確認してください。

FOX CSSでDEMO作ってみて思ったこと

使い方は簡単に覚えていけそうです。
基本的にはクラスを付与していくだけなので、どのクラスがどのようになっているのかさえ覚えてしまえば、どんどん組んでいけます。

FOX CSSにはリセット関係があらかじめ入っています。この辺りは、sassフォルダの中に分けて入っていたので、自分の制作環境に合わせて使えそうです。
また、メディアクエリの切り替えのポイントなども「variables.scss」の中で定義しているので、こちらを編集したらOKそうです。
scssファイルが同梱されているっていうのは、個人的に高感度ポイント高いです！

気をつけなくてはならない点は、このフレームワークを使ってもflexboxの使い方(書き方)は覚えないですね、当たり前なんですけど。flexboxを使ったレイアウトの感触をつかむのにはとてもいいんだと思います。

後は社内的な問題ですが、gridの割り方がこれまで使っていた「RESPONSIVE GRID SYSTEM」とはちょっと違うので、FOX CSSを使う際にはまたデザイナーさん(ディレクターにも)と打ち合わせてお互いに何となくわかった状態で進めたほうがスピードアップにつながりそうですね。

もう少し自分で試してみて、習得できそうなら「RESPONSIVE GRID SYSTEM」と「FOX CSS」を案件に応じて使い分けていってもいいなぁと思っています。

ちょっと初めのさわりだけで、全然突っ込んだところがないんですが、今回は触ってみた感想ということで。

参考にさせていただいたcoliss様、ありがとうございました!!

WordPressに便利なソース。

私がWordPressで構築する際に追加している
便利なソースをまとめてみました。

funtions.phpに記述する便利なソース

【固定ページ内の画像URLを簡単にする】
固定ページ内で画像を使う際に『get_bloginfo(‘template_directory’)』をイチイチ付けるのは面倒なので
サンプルでは『image/』が付いたらテンプレートまでのURLを付加します。

function replaceImagePath($arg) {
	$content = str_replace('"images/', '"' . get_bloginfo('template_directory') . '/images/', $arg);
	return $content;
}  
add_action('the_content', 'replaceImagePath');

function replaceImagePath($arg) {

$content = str_replace('"images/', '"' . get_bloginfo('template_directory') . '/images/', $arg);

return $content;

}

add_action('the_content', 'replaceImagePath');

【カスタム投稿一覧でカテゴリでも絞り込みしたい】
投稿一覧ではカテゴリでの絞り込みはできますが
どう言う訳かカスタム投稿では絞り込みが用意されていません。
もっとも設定自体がユーザー次第なので付けようがないとは思いますが
カスタム投稿でも投稿数が増えると必要になってきます。
サンプルでは
《　カスタム投稿名:list　／　分類名：cate　》
で記述しています。

add_action( 'restrict_manage_posts', 'add_post_taxonomy_restrict_filter' );
function add_post_taxonomy_restrict_filter() {
    global $post_type;
    if ( 'list〔カスタム投稿名〕' == $post_type ) {
        ?>
        <select name="cate〔分類名〕">
            <option value="">カテゴリー指定なし</option>
            <?php
            $terms = get_terms('cate〔分類名〕');
            foreach ($terms as $term) { ?>
                <option value="<?php echo $term->slug; ?>"><?php echo $term->name; ?></option>
            <?php } ?>
        </select>
        <?php
    }
}

add_action( 'restrict_manage_posts', 'add_post_taxonomy_restrict_filter' );

function add_post_taxonomy_restrict_filter() {

global $post_type;

if ( 'list〔カスタム投稿名〕' == $post_type ) {

<option value="">カテゴリー指定なし</option>

<?php

$terms = get_terms('cate〔分類名〕');

foreach ($terms as $term) { ?>

<?php } ?>

</select>

<?php

}

【固定ページ内でPHPを使いたい⇒ショートコード対応】
今更なんですが、ショートコードの記述が理解しきれていませんでした…
基本的な部分は分かっていましたが…難しく考えすぎていたようです。
そんな同類の方に向けて、一番分かりやすい物を…

function indexft() {
    return "<a href='" . get_bloginfo('url') . "'>トップ</a>";
}
add_shortcode('idxfc〔ショートコード〕', 'indexft〔関数名〕');

function indexft() {

return "<a href='" . get_bloginfo('url') . "'>トップ</a>";

}

add_shortcode('idxfc〔ショートコード〕', 'indexft〔関数名〕');

《indexft()》が関数になります。
“return”内で返す内容を用意。今回は、トップへ戻るリンク『トップ』が表示されます。
固定ページ、または投稿ページに《[idxfc]》と言うショートコードがあったら、ソコに『トップ』が表示されます。

テンプレートPHPに記述する便利なソース

【一定日数内の記事に”NEW”を付けたい】
ページ内で新着情報などの一覧表示部分で一定の期間だけ”NEW”マークを付けたい。
マークを付けたい部分に下記のソースを原だけでOK。
『echo』で吐き出しますので、画像でもタグ付でも

<?php
$days = 7; //表示する日数。これは公開日から7日。
$today = date_i18n('U');
$entryday = get_the_time('U');
$kijiday = date('U',($today - $entryday)) / 86400 ;
if( $days > $kijiday ){
echo 'NEW';
}
?>

<?php

$days = 7; //表示する日数。これは公開日から7日。

$today = date_i18n('U');

$entryday = get_the_time('U');

$kijiday = date('U',($today - $entryday)) / 86400 ;

if( $days > $kijiday ){

echo 'NEW';

}

見せるページと見せないページを会員権限で簡単に分けるプラグイン

この記事は1年以上前に投稿されました。
公開時の情報を元に記述してありますので、最新版に対しては内容が陳腐化している可能性があります。ご注意ください。

先日、会員制サイトをWordpressで構築しました。

その際、コンテンツの閲覧を会員の権限によって分ける必要があったので、いろんなプラグインを試しましたが、最終的に採用したものをご紹介します。

類似のプラグインは多々あるのですが、日本語で設定できること、クライアント側でも簡単に設定できることを重視して今回は、 WordPress Access Controlを導入しました。

導入は、プラグインページ→新規登録で入れられます。

日本語化ファイルは検索したところ複数あったのですが、一番新しそうな、こちらで配布されているものを利用させていただきました。

→http://www.jetbaby.net/wordpress/%E3%82%A2%E3%82%AF%E3%82%BB%E3%82%B9%E5%88%B6%E9%99%90%E3%81%A7%E3%81%8D%E3%82%8B%E3%83%97%E3%83%A9%E3%82%B0%E3%82%A4%E3%83%B3%E3%80%8Cwordpress-access-control%E3%80%8D%E3%81%AE%E6%97%A5%E6%9C%AC

（リンク先があれば、この記事いらない気がしますが。）

導入後、プラグインを有効にすると、設定→Members Onlyから、サイト全体の設定ができるのですが、今回は使いませんでした。

各投稿ページの右上に公開範囲を決める選択肢が現れます。

ここで、ユーザーの権限に合わせて見せる範囲を決めていきます。
追加された権限などにも対応します。

投稿時に、「このページを誰に見せるか」をチェック一つで選べるので、クライアント側での作業も簡単です。

非表示のページは、メニューからも消え、対象外の人には、ページの存在自体がわからなくなります。逆に、非会員のみに見せるページを作ることも可能です。（入会のご案内など）

また、この設定は投稿だけでなく、固定ページでも有効です。

これにWordpressのユーザー管理を組み合わせると、シンプルな会員制サイトのできあがりです。コンテンツ閲覧型のサイトならこれで十分機能します。

制作事例　社会福祉法人わかば福祉会様

新発田市を中心に幼稚園と保育園を展開している法人様です。
2015年7月1日にオープンした新しい保育園です。

公開　2015年10月15日
URL　http://www.wakaba-net.ed.jp/mebae/
●制作内容
・わかば福祉会としてのデザインの統一
・CMSの導入

Mac OS X El Capitan（OS10.11 エル・キャピタン）のMail設定　

2015年9月30日にリリースされたOS X El Capitan（OS10.11 エル・キャピタン）の
標準Mailで、今までのPOP形式の設定ではサーバー認証できない事象が起きました。
この記事は2015/10/03時点の記事です。

OS10.11にアップグレードする際に、
標準Mailも合わせてバージョンアップします。

バージョンアップ後にMailを開くと、
受信エラーが起きます。
内容は、POP形式の設定でサーバー認証できないということでした。
●認証状況
サーバー上のログを確認したところ、
POP認証のパスワードがブランク状態で送信されているため認証できない。
●対処方法
アカウントの詳細の「アカウント設定を自動的に検出して管理」のチェックを外す。

上記の対処法でPOP形式でサーバー認証が通りました。

既存のアカウントの受信用メールサーバーのパスワードの再入力や
アカウントの再登録などを行いましたが状況は全く変わらず。
「アカウント設定を自動的に検出して管理」のチェックを外すことで回避することができました。

今後のバージョンアップやご使用のサーバー状況で変わる可能性がありますが、
POP形式のサーバー認証エラーの場合は、参考にしてみてください。