javascript

jQuery3.1.1でbxSliderが動かないこととGoogle Fonts + 日本語早期アクセスを試してみたこと

blog161110

あれ？bxSlider動かない・・・

いつも通りに設置したのになぁ。
なんか書き間違えたかな？。。。
161105sample_bxslider01

コンソールを見るとなんかエラーしてますね。

jquery-3.1.1.min.js:4 Uncaught TypeError: Cannot read property ‘indexOf’ of undefined(…)

jQuery3.xになって`load()`がなくなった

調べてみたら、bxslider.jsの中でload()が使われているのが原因みたいです。

参考サイト
jquery 3.0 url.indexOf error -stackoverflow

うーん、load()はon('load',function(){})で書き換えればいいらしいですけど、プラグインファイル直接修正するのはちょっとなぁ。
slick.jsと並んでスライダー系では使いやすくて大好きなプラグインなんですけど。。。
bxSliderを使うときはjQueryは3.xになる前のバージョンなら動くので、そっちですかね。
ちょっと残念。

load()以外にも、いろいろなくなったり変わったりしているので参考サイトなどで見ておくといいかもです。

参考サイト
jQuery3.0 アップグレードガイド -Qiita

でも動くときもあるよ？

そうなんです。別な時にすっかり忘れててjQuery3.1.1使ってbxSlider入れたら普通に動くんです。
あれれ、jQuery3.xだと動かないんじゃないの？
動いてしまったのはこんなソースです。

<div class="bxslider">
        <div class="slider-item">
            <h2>title01</h2>
            <p>てきすとてきすとてきすとてきすとてきすとてきすと</p>
        </div>
        <div class="slider-item">
            <h2>title02</h2>
            <p>てきすとてきすとてきすとてきすとてきすとてきすと</p>
            <p><img src="images/dummy.jpg" /></p>
        </div>
        <div class="slider-item">
            <h2>title03</h2>
            <p>てきすとてきすとてきすとてきすとてきすとてきすと</p>
        </div>
        <div class="slider-item">
            <img src="images/dummy.jpg" />
        </div>
</div>

<h2>title01</h2>

<p>てきすとてきすとてきすとてきすとてきすとてきすと</p>

</div>

<h2>title02</h2>

<p>てきすとてきすとてきすとてきすとてきすとてきすと</p>

</div>

<h2>title03</h2>

<p>てきすとてきすとてきすとてきすとてきすとてきすと</p>

</div>

</div>

それではちゃんとbxslider.jsのエラー箇所をみてみます。

bxslider.jsの該当箇所

var loadElements = function(selector, callback) {
  var total = selector.find('img:not([src=""]), iframe').length,
  count = 0;
  if (total === 0) {
    callback();
    return;
  }
  selector.find('img:not([src=""]), iframe').each(function() {
    $(this).one('load error', function() {
      if (++count === total) { callback(); }
    }).each(function() {
      if (this.complete) { $(this).load(); }
    });
  });
};

var loadElements = function(selector, callback) {

var total = selector.find('img:not([src=""]), iframe').length,

count = 0;

if (total === 0) {

callback();

return;

}

selector.find('img:not([src=""]), iframe').each(function() {

$(this).one('load error', function() {

if (++count === total) { callback(); }

}).each(function() {

if (this.complete) { $(this).load(); }

});

};

functionの第一引数selectorにはver preloadSelector = slider.children.eq(slider.settings.startSlide); が入ってくるようですので、きっと一番はじめに表示されるアイテムのことですね。

image . complete
画像が完全にダウンロードされた、または、画像が指定されなかったなら、true を返します。そうでなければ、false を返します。
<http://www.html5.jp/tag/elements/img.html>

ということなので、<・・・前略・・・>そのスライダーアイテムにsrc属性が指定されたimgもしくはiframeがあったら、<・・・中略・・・>、(※ここから)もし画像がダウンロードされてたらその画像をロードしてね、ここでload()って何よっていうエラーなんですね。
だから、最初のアイテムに画像が含まれていなければ、普通に動くということみたいです。
しかしiframeだと普通に動くな。。なんで？？

Google Fontsで「はんなり明朝」とか使える!!

そんなことより(いや上のも大切なことですよ？)、これはすごい大ニュースなのでは??

Google Fonts は、デザイナーウェブフォントを直感的にご利用いただける、安定したオープンソースディレクトリです。Google Fonts 早期アクセスでは、現時点で完全にはサポートしていないフォントを試験的に提供しています。

膨大な数の文字のデザインに要する時間や、大容量のフォントファイルをウェブフォントとして提供する際に必要な技術的インフラストラクチャなど、日本語の書体デザインやフォント開発にはさまざまな課題が立ちふさがります。そこで、規格や技術の開発を進めると同時に、Google Fonts 早期アクセスを通じてデザイナーやデベロッパーの皆様に日本語のウェブフォントをお試しいただけるようにしました。
Google Fonts + 日本語早期アクセスより引用

ということですから、完全にサポートされているわけではありません。
日本語の無料で使えるWebフォントが少ないっていうのは常々の悩みでしたし。
いろんなデバイスを考えた時に明朝体がうまいものがなくて、泣く泣く画像にしたりしてましたから。
「はんなり明朝」とか好きなフォントですし、嬉しいですね！

ただフォントによっては漢字のないものや、ひらがなもないものもあるのでその辺は要注意です。
漢字のない明朝系のフォントは、漢字部分はデフォルトフォントで表示されるみたいです。
なので、フォントファミリーに他の明朝体も入れておくといい感じになるかもしれませんね。

使えるフォント

M+ 1p
Rounded M+ 1c
はんなり明朝
こころ明朝
さわらび明朝
さわらびゴシック
ニクキュウ
ニコモジ
Noto Sans Japanese

漢字なし

はんなり明朝
こころ明朝
ニクキュウ
ニコモジ

ひらがななし

ニクキュウ

せっかくなのでbxSliderと新しい日本語WebフォントでDEMOを作ってみました。
よかったら見てみてくださいね。
jQueryのバージョンはjQuery3.1.1です！
ちなみに今回はスマホ意識してないのでPCでご覧くださいね(汗)

【DEMO】

参考サイト

まずはてっとり早くWebページを作ろう。CDNとCSSフレームワークとjQueryプラグイン

自分でWebサイトを作りたい、更新は自社で行いたい、Webの勉強を独学で始めよう。
思い立ったが吉日、書店に向かい分厚いHTML辞典を買ってくる。
これ、だいたい間違いなく挫折します。
せっかくその気になったのですから、Webって楽しいを体験してほしいのです。
ですので、今回はCDNを利用して外部ファイルを読み込み、極力手数をかけずにWebページを作ってみたいなと思います。
対象はちょっとならHTMLやCSSがわかるよ、という人向けになります。

今回は前置きが長いので、面倒な人はこちらから。

もしくはデモをどうぞ。

【DEMO】

挫折のわけ

何せHTMLをたくさん掲載してある本はとても分厚いです。
Webサイトに触れた事のない人には意味不明は記号の集合体であり、自分がそれをどのように使うのかの想像が難しいです。
そしてHTMLを覚えてもレイアウトはできません。レイアウトするためにはCSSの知識が必要となります。
今度はCSS辞典を買ってくるのでしょうか？
CSSをクリアしても、自分がよく見ているかっこいいホームページにはなりません。
見た目の装飾などはCSSでOKですが、動作的な部分になるとJavascriptを利用します。
簡単なWebページにだって、こんな風にたくさんの知識やスキルが詰まっています。
覚えなくちゃいけないことがたくさんある時、少なくとも私は挫折します。

お手軽に作ってみよう

CSSフレームワーク

グリットシステムというものがWeb界を席巻してもうかなり経ちます。
また今ではたくさんのCSSフレームワークと呼ばれるものがたくさんあります。
CSSフレームワークとはちょっと乱暴なまとめかたをすれば、デザインされレイアウトの方法を決めたCSS（場合によってはJavascriptやフォントも）をあらかじめワンセットにしてあるものです。
BootstrapやFoundationなどといったところが世界的にもとても有名です。
スマートフォンを始め、モバイル端末の対応はもはや必須のものとなりました。
CSSフレームワークの多くは、レスポンシブWebデザインと呼ばれる、現在主流の方法でモバイル対応しています。
ですから、CSSフレームワークを利用することで、モバイル対応のWebページを作る事ができます。

CSSフレームワークは多くの人を助けてくれました。
CSSやHTMLが不得意な人にはその形式を、デザインの不得手な人にはある程度完成されたデザインを。
今回は数あるフレームワークの中からColiss様が紹介されていたBulumaというフレームワークをチョイスしました。
（※自分の勉強がてら）
Bulumaが他と違うのは、Flexboxという新しいCSSのレイアウトをメインにしたフレームワークであるという事です。

CDNを利用する

CSSフレームワークをはじめ、かっこいい動作をさせてくれるjQuery（Javascriptのライブラリ）のプラグインなど、世界中の多くの人が共通で利用するファイルを特定のサーバにホスティングしてみんなでそこを参照して使う。
WebサイトでCDNを利用するをなんとなく説明するとそんな感じでしょうか？（厳密には違うと思う）
GoogleやMicrosoftが公開しているCDNもあります。jsDelivrやcdnjsといったところもメジャーです。
先ほど名前を挙げたBootstrapもCDNで利用できます。
使いたいプラグインやフレームワークの名前＋「CDN」で検索すれば、たくさんのものが見つかるでしょう。

今回利用したもの

フレームワークはBulumaを、簡単にCSSのアニメーションを利用できるanimate.cssも利用してみましょう。これらはcdnjsから読み込みました。
jQueryを利用したスライダーを入れたいので、jQuery本体（これがないと動きませんよ？）とslickというプラグインを利用します。
Slickはjsdelivrからです。
アイコンもWebサイトを作る上でとても重要な要素です。
アイコン画像をいちいち用意するのは大変なので、Font Awesomeというアイコンフォントを利用しましょう。

せっかく外部ファイルを利用するので、フォントもGoolge Fontsを利用してみましょうか。

Webページを作ろう

上に挙げたものをhead内に読み込みます。

<!-- Font Awesome -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">

<!-- CSS Framework -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.2.1/css/bulma.min.css" integrity="sha256-DRcOKg8NK1KkSkcymcGmxOtS/lAn0lHWJXRa15gMHHk=" crossorigin="anonymous" />

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" integrity="sha256-j+P6EZJVrbXgwSR5Mx+eCS6FvP9Wq27MBRC/ogVriY0=" crossorigin="anonymous" />

<!-- jQuery -->
<script src="http://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
<script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>

<!-- Slick JS -->
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/jquery.slick/1.6.0/slick.css"/>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/jquery.slick/1.6.0/slick-theme.css"/>
<script type="text/javascript" src="//cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js"></script>

<!-- Google Fonts -->
<link rel="stylesheet" href="//fonts.googleapis.com/earlyaccess/notosansjapanese.css">

今回のページの内容

あくまでサンプルですが、今回はよくある構成の1ページ完結型にしました。
はじめにスライダーを設置して動きのあるコンテンツでユーザーを惹きつけます。画面幅目一杯のサイズで行きましょうか。
それから簡単なコンセプトを説明したら、サービス内容、会社概要、お問い合わせフォームと続きます。
せっかくですからマップも入れましょう。
SNSのアイコンもいれて、ユーザーとつながりが持てるようにします。
よくある感じですね。

あとはBulumaの書式に従って、どんどんHTMLを書いていきますね。
ここではBulumaの使い方の説明ではないので細かい事は説明しません。
ドキュメントを見ながらレイアウトを作っていきます。
カラム割やカラー、フォームのパーツデザインなどもあらかじめ決まっているクラスをHTMLに付与していきます。

手なりでつくってこんな感じです。

【DEMO】

ちょっと余白がおかしいですが、それなりになんとなくそれっぽいです。
HTMLの他にCSSとjQueryをちょっとだけ書きました。

body {
    font-family: 'Noto Sans Japanese', serif;
}
.slider{
    max-width: 100%;
    overflow: hidden;
}
.slick-dots{
    position: static;   
}
.googlemap {
    position: relative;
    padding-bottom: 25%; 
    height: 0;
    overflow: hidden;
}
.googlemap iframe {
    position: absolute;
    top: 0;
    left: 1%;
    width: 98% !important;
    height: 100% !important;
}

body {

font-family: 'Noto Sans Japanese', serif;

}

.slider{

max-width: 100%;

overflow: hidden;

}

.slick-dots{

position: static;

}

.googlemap {

position: relative;

padding-bottom: 25%;

height: 0;

overflow: hidden;

}

.googlemap iframe {

position: absolute;

top: 0;

left: 1%;

width: 98% !important;

height: 100% !important;

}

Webフォントの読み込みとスライダーの微調整、それからGoolgeマップをレスポンシブWebデザインに対応しました。

$(document).ready(function(){
    $('.is-toggle').on({
        'click' : function(){
            $(this).toggleClass('is-active');
            $(this).next('.nav-menu').toggleClass('is-active');
        }
    }); 

    $('.slider').slick({
        autoplay : true,
        arrows : false,
        centerMode : true,
        dots : true,
        fade : true,
        infinite: true
    });

    $('a[href^="#"]').click(function() {
        var speed = 500;
        var pagelink_href= $(this).attr("href");
        var pagelink_target = $(pagelink_href == "#" || pagelink_href == "" ? 'html' : pagelink_href);
        var position = pagelink_target.offset().top;
        $('html, body').animate({ scrollTop: position }, speed, 'swing');
        return false;
    });
});

$(document).ready(function(){

$('.is-toggle').on({

'click' : function(){

$(this).toggleClass('is-active');

$(this).next('.nav-menu').toggleClass('is-active');

}

});

$('.slider').slick({

autoplay : true,

arrows : false,

centerMode : true,

dots : true,

fade : true,

infinite: true

});

$('a[href^="#"]').click(function() {

var speed = 500;

var pagelink_href= $(this).attr("href");

var pagelink_target = $(pagelink_href == "#" || pagelink_href == "" ? 'html' : pagelink_href);

var position = pagelink_target.offset().top;

$('html, body').animate({ scrollTop: position }, speed, 'swing');

return false;

});

jQueryの方はモバイル用のナビメニューの動作です。それからSlickの設定をして、スムーススクロールも入れときました。
スムーススクロールは絶対に必要なものではありません。

CDNやCSSフレームワークのデメリット

こんな感じでそんなに学習コストも時間もかけずに、あるものを利用するだけでそれっぽいWebページを作ることができます。
ただし、実際のサイト制作ではCDNやCSSフレームワークを使わないことも多々有ります。
メリットがあるのと同様デメリットもあるからです。

CDNのデメリット

まず第一に他の人のサーバとソースを利用しているということでしょう。
これは、そのサーバがダウンした場合やソースの書き換えが起こった場合に対処が遅れることがあります。
意図的なことではなかったとしても、バージョンアップで自分のHTMLやJavascriptとかちあってうまく動作しなくなることも考えられます。
また、他者のサーバにアクセスするので、読み込みのスピードもそのサーバのスペックに依存することになります。（※1）

※1 ただし、CDNを利用するメリットとして、多くの利用者がいるライブラリ等であればCDNから利用する事でキャッシュを利用できて速いというものがあります。

CSSフレームワークのデメリット

これはjQueryプラグインなども同様なのですが、例えば今回のDEMOくらいであれば、はっきりいってこんなにいらないのです。
フレームワークの機能で利用していないものがたくさんあります。
ある程度知識があれば、フレームワークなどを使わなくても再現できます。
利用していなくでもファイルは全て読み込みます。読み込む量が多ければ多いほどブラウザに負荷がかかりレンダリングが遅くなります。
少しでも、コンマ何秒でも速く、ということを考えると大幅に無駄です。

また、ちょっとだけ専門的な話をすると、CSSはSassやLess何度をコンパイルして作ることが多くなっていますが、CDN経由でフレームワークを読み込むと直接CSSを読み込むので必要な部分だけ利用したいという要望に応えられません。※2
不必要なCSSを打ち消すためのCSSが必要となり、ソースコードが長くなっていきます。

※2 多くのフレームワークでは、コンポーネントや機能によって分割されたSassファイルなどをダウンロードする事ができます。

なにより、一番の問題となるのはフレームワークを利用する事によってデザイン的に似通ったものができやすいことが挙げられます。
ボタンのデザイン、タイトルやメッセージ、フレームワークは綺麗に見えるようにデザインされています。
それをそのまま使うことで、他の誰かと似たようなデザインになってしまうことがあります。

というわけで、DEMOの左上に「add CSS」というボタンを用意しました。
HTMLはもとのまま、CSSのみを追加してデザインを変えて遊ぶ趣向です。
ボタンをクリックするともとのデザインと、CSSを追加したバージョンが切り替わります。
どうでしょうか？ちょっとは違うサイトに見えますか？

まとめ

このようにまったく違うデザインをしようとするとCSSなどの専門な知識はどうしても必要になってしまします。
そのために我々のようなWeb制作者もいるわけですし。
ですが、まずは作ってみる、自分でもやれるということを体験するという点において、CDNやフレームワークは大いに活用すべきかと思います。
自分で作ったものがブラウザに表示されるって楽しいんですよ。

最後に、こういうの使うときはちゃんとライセンスの確認をすることを忘れないでください。

参考サイト

jQueryとCSSで遊ぼう【初級者向け】

今回はデザイン→できる！、HTML→OK！、CSS→なんとかいけるよ。。、Javascript→なんか怖い。。。っていう人向けです。

まずはサンプルページはこちら。

作っているうちに遊んでしまいました。

最初に今回のお題です。(コードだけだけど・・・)

ボタンを押すと、アニメーションします。Webサイト使っていると当たり前に見るエフェクトですね。

これをちょっと前まではどうやっていたかというと、jQueryを使ってやっていました。



$(document).ready(function(){
     $('.button').on({
        'click' : function(){
            $('.target').fadeIn(500, 'ease');
            $('.target').css({
                 'padding-top' : '50px',
                 'padding-left' : '50px',
            });
        }
    });   
});

$(document).ready(function(){

$('.button').on({

'click' : function(){

$('.target').fadeIn(500, 'ease');

$('.target').css({

'padding-top' : '50px',

'padding-left' : '50px',

});

}

});

いまでは、このような使い方をすることが多いです。



//jQuery
$(document).ready(function(){
     $('.button').on(
        'click' : function(){
            $('.target').toggleClass('active');
    });   
});

//jQuery

$(document).ready(function(){

$('.button').on(

'click' : function(){

$('.target').toggleClass('active');

});


/* CSS */
.target{
    opacity: 0;
    padding-top: 0;
    padding-left: 0;
    transition: all 0.5s ease;
}
.target.active{
    padding-top: 50px;
    padding-left: 50px;
}

/* CSS */

.target{

opacity: 0;

padding-top: 0;

padding-left: 0;

transition: all 0.5s ease;

}

.target.active{

padding-top: 50px;

padding-left: 50px;

}

jQueryの仕事はクラスを付与するだけ、残りの設定はCSSでやろう、ということですね。

jQueryを使う

CSS3がガンガン使えるようになってこういうことは当たり前になっていますけど、ほんのちょっと前はこんなことしてました。

Flashが使われなくなり始め、さまざまなJavascriptのライブラリの中からjQueryが頭ひとつ抜け出し、ブラウザが新しくなってCSS3で表現できることがずっと広がった。そういう経緯です。

jQueryの場合はアニメーションに限りませんが初めにセレクタを選ぶ。「$(‘selector’)」の部分ですね。

それから、そのセレクターの動作、英語の動詞にあたるような部分を書きます。「.fadeIn()」などです。

終わりは「; (セミコロン)」です。

上記の例では初めに「.button」が「on」すると言っています。

on()は、clickやmouseenterなどの動作の時に命令を発動させます。

例では「click」イベントが起こったときに、



$('.target').fadeIn(500, 'ease');　//①
$('.target').animate({
     'padding-top' : '50px',
     'padding-left' : '50px',
}, 500, 'ease');　//②

$('.target').fadeIn(500, 'ease');　//①

$('.target').animate({

'padding-top' : '50px',

'padding-left' : '50px',

}, 500, 'ease');　//②

の2つの命令をしています。

①では500ms(ミリセカンド)、つまり0.5秒かけてフェイドインをさせています。’ease’はイージングの指定です。

②は0.5秒かけてpadding-topとpadding-leftがそれぞれ50px移動します。これによって、ターゲットは右下に広がるように見えるはずです。

CSSのアニメーションについて

CSSでアニメーションするには2通りの方法があります。

1.transitionを使う方法と2.animationを使う方法です。

transitionは自動ではスタートしません。またループもできません。

しかしサイト制作上、よく使うアニメーションはこちらを使うことが多いです。

transitionとは「遷移」のことですから、ある状態からある状態へ移行する、というイメージでしょうか。

animationはtransitionに比べ、より細かいアニメーションの設定ができます。

キーフレームごとにプロパティの設定ができるので、自分の想像に近い動きを細かくつけていくことができます。

CSSアニメーションでの注意点

CSSのアニメーションでは基本的に数値や計算式で操れるものしかアニメーションできません。
例えばtopの値が0から50pxにすることも50%にすることも5emにするのもOKです。

しかし、margin-leftの値を0からautoにする、これはアウトです。
transitionを使って、margin-rightとmargin-leftをautoにし、ボックスをアニメーションさせながら中央に寄せるということはできません。

もちろん、text-alignをleftからcenterにしてもアニメーションはしません。

数値を扱うものしか使えない、とおぼえておいてください。

先ほどのボックスをアニメーションさせながら中央に寄せる、なんていうのはJavascriptで計算しながらやってもいいです。

※marginをautoして中央寄せのアニメーションはできませんが、同じ動きならおそらく下のコードで行けると思います。


.target-parent{
    position: relative;
    width: 100%;
    height: 200px;
}
.target{
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateX(0) translateY(-50%);
    transition: all 0.5s ease;
}
.target.anime{
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
}

.target-parent{

position: relative;

width: 100%;

height: 200px;

}

.target{

position: absolute;

top: 50%;

left: 0;

transform: translateX(0) translateY(-50%);

transition: all 0.5s ease;

}

.target.anime{

left: 50%;

transform: translateX(-50%) translateY(-50%);

}

発火

これまではjQueryを使ってアニメーションしていた動きはCSSでも表現できることがわかりました。

CSSのアニメーションを使う場合は何らかの発火イベントを利用することが多くなります。

例えば上述のクリックのイベントもそうですし、当たり前によく使うのはボタンの上にカーソルがのった時、などですね。このカーソルがボタンにのる動きはCSSのセレクタ(:hover)で判定できますから、CSSだけでアニメーションを完結させることができます。

しかし、CSSのセレクタだけでは判定できないものも多くあります。
例えばお申込みフォームで、「利用条件に同意する」のチェックボックスにチェックが入っていないと、送信ボタンが押せない仕掛けはよく見るでしょう。(あれはCSSなしでjQeury(Javascript)だけで実装したりしますが)

もしくは、要素が画面の上部にスクロールしたらアニメーションが始まるという場合もありますね。

こういう時によく使う方法が、アニメーションの動き自体はCSSで設定しておく。→何らかの条件を満たした場合にjQueryを使ってその要素にクラスを付与する。→アニメーション！みたいな方法です。

上記の例でいえば、.targetにはアニメーションする前の状態とtransitionでアニメーションすることが書かれています。

そして.target.animeには、.targetに.animeというクラスが付与された場合に起こる結果が書いてあります。

例えばクリックされたときに、例えばスクロールしてきた時に、jQueryのaddClass()を使ってクラスを付与してあげれば、アニメーションがスタートするわけです。

下の例では.buttonがクリックされたときに.targetにクラスactiveが付与され、アニメーションが始まります。



$(document).ready(function(){
     $('.button').on(
        'click' : function(){
            $('.target').addClass('active');
    }); 
});

$(document).ready(function(){

$('.button').on(

'click' : function(){

$('.target').addClass('active');

});

また、jQueryを使うならば、toggleClass()もよく使うのでおぼえておくと便利です。
下の例では、.buttonがクリックされたときに.targetにクラスactiveがなければクラスactiveを付与、あった場合はクラスactiveを削除します。



$(document).ready(function(){
     $('.button').on(
        'click' : function(){
            $('.target').toggleClass('active');
    }); 
});

$(document).ready(function(){

$('.button').on(

'click' : function(){

$('.target').toggleClass('active');

});

さまざまなジェネレーターやライブラリ

自分で実装するとなると、こんがらがる部分も初めのうちは多いと思います。

そんな人でもカンタンにアニメーションができるように、ありがたいことにjQueryにせよCSSにせよいろいろなライブラリやジェネレータが出てきました。

作者さんたちに感謝しつつ、こういうのを使うのも制作スピードを上げる上では有用だと思います。

Javascriptは怖いと思ってるデザイナーさんに、今回やったのはjQueryを利用して、クラスを付けたり消したりしただけです。

たった5行。慣れると便利ですから、ちょっとずつ触っていってみてくださいね。

今回のサンプルページ

参考サイト

Slick.jsを使ってカルーセルスライダーの中央の画像を大きくする【レスポンシブWebデザインでもOK】

以前書いたslickの記事が比較的に読んでいただけているようなので、調子に乗ってもう一つ書きます。

前回記事
レスポンシブWebデザインに対応！Slick.jsを使ってスライドのサムネイルの位置を切り替える



現在(2016年4月)弊社では求人を募集していまして、求人ページを作った時に使ったパターンです。
→　この個所(INTERVIEW)です

今回はカルーセルスライダーで、真ん中の写真だけちょっと拡大させて見せるやつです。
カルーセルスライダーでたくさん写真があるぞっていうのを示しておいて、その中でウェイトを付けてあげることで目を引いてもらうパターンですね。
公式のサンプルの中のセンターモードで紹介されているやつ何ですが、普通にセンターモードにするだけだとこうならないし、特に公式では拡大させる方法が紹介されていないんですよね。※見つけられていないだけかもしれません…

ということで求人ページのやつをもう少しシンプルにしたデモを作ってみました。

【DEMO】

HTML

<div class="slider container">
    <div class="slider-for">
        <div class="slide-item"><img src="images/160423/01.jpg" alt=""></div>
        <div class="slide-item"><img src="images/160423/02.jpg" alt=""></div>
        <div class="slide-item"><img src="images/160423/03.jpg" alt=""></div>
        <div class="slide-item"><img src="images/160423/04.jpg" alt=""></div>
        <div class="slide-item"><img src="images/160423/05.jpg" alt=""></div>
    </div> 
</div>

</div>

.containerはmax-width： 960px;で画面のセンターに寄せている、個人的に使っているクラスなので無視してください。
あとは比較的普通です。

$(window).load(function(){
    $('.slider-for').slick({
        slidesToShow: 3,
        slidesToScroll: 1,
        dots: true,
        centerMode: true,
        infinite: true,
        autoplay: true,
        centerPadding: '100px',
        arrows: false,
        responsive: [                    
            {
                breakpoint: 480,
                settings: {
                    arrows: false,
                    centerMode: true,
                    centerPadding: '0px',
                    slidesToShow: 1
                }
            }
        ]
    });

    // ナビゲーション用
    $('.slick-dots').find('li').eq(0).addClass('slick-current');
    // On before slide change
    $('.slider-for').on('beforeChange', function(event, slick, currentSlide, nextSlide){     
        $('.slick-dots').find('li').removeClass('slick-current');
        $('.slick-dots').find('li').eq(nextSlide).addClass('slick-current');
    });
});

$(window).load(function(){

$('.slider-for').slick({

slidesToShow: 3,

slidesToScroll: 1,

dots: true,

centerMode: true,

infinite: true,

autoplay: true,

centerPadding: '100px',

arrows: false,

responsive: [

{

breakpoint: 480,

settings: {

arrows: false,

centerMode: true,

centerPadding: '0px',

slidesToShow: 1

}

]

});

// ナビゲーション用

$('.slick-dots').find('li').eq(0).addClass('slick-current');

// On before slide change

$('.slider-for').on('beforeChange', function(event, slick, currentSlide, nextSlide){

$('.slick-dots').find('li').removeClass('slick-current');

$('.slick-dots').find('li').eq(nextSlide).addClass('slick-current');

});

Javascriptで大事なところは、

centerModeをtrueに設定すること。
slidesToShowは奇数にすること。
centerPaddingで画像間の余白の調整

になると思います。

CSS

.slider{
    overflow-x: hidden;   
}
.slick-list{
    overflow: visible;   
}
.slick-slide{
    text-align: center;   
}
.slider-for img{
    max-width: 280px;
    height: auto;
    box-shadow: 1px 1px 3px rgba(200, 200, 200, 0.8);
    display: inline-block;
}
.slider-for .slick-current img{
    transform: scale(1.10);
}  
/* ページャー */
.slick-dots{
    text-align: center;
    margin-top: 50px;
}
.slick-dots li{
    display: inline !important;
    margin: 0.5em;
}
.slick-dots button{
    display: inline !important;
    width: 1em;
    height: 1em;
    background-color: #ccc;
    text-align: center;
    overflow: hidden;
    text-indent: 2em;
    border-radius: 100%;
}
.slick-dots .slick-current button{
    background-color: aqua;
}
/* スマートフォンの場合 */
@media(min-width : 480px){
    .slider-for img{
        max-width: 300px;
        border: 10px solid #fff;
    }
    .slider-for .slick-current img{
        transform: scale(1.15);
    }
}

.slider{

overflow-x: hidden;

}

.slick-list{

overflow: visible;

}

.slick-slide{

text-align: center;

}

.slider-for img{

max-width: 280px;

height: auto;

box-shadow: 1px 1px 3px rgba(200, 200, 200, 0.8);

display: inline-block;

}

.slider-for .slick-current img{

transform: scale(1.10);

}

/* ページャー */

.slick-dots{

text-align: center;

margin-top: 50px;

}

.slick-dots li{

display: inline !important;

margin: 0.5em;

}

.slick-dots button{

display: inline !important;

width: 1em;

height: 1em;

background-color: #ccc;

text-align: center;

overflow: hidden;

text-indent: 2em;

border-radius: 100%;

}

.slick-dots .slick-current button{

background-color: aqua;

}

/* スマートフォンの場合 */

@media(min-width : 480px){

.slider-for img{

max-width: 300px;

border: 10px solid #fff;

}

.slider-for .slick-current img{

transform: scale(1.15);

}

ちょっと長いですけど、拡大させるのに重要なポイントは

.slider-for .slick-current img{
transform: scale(1.10);
}

.slider-for .slick-current img{

transform: scale(1.10);

}

ここだけなんですよね。slickの場合、センターモードにすると、currentスライダーがセンターになり、.slick-currentが付与されるので、.slick-currentの中の画像のscaleを大きくしてあげています。
さらにslick側で用意する.slick-listにoverflow: hidden；がslick.cssで設定されていて拡大したときに画像が見切れてしまうので、overflow: visible；にするか、paddingで上下に余白をとってあげれば大丈夫です。

基本的にはこれで何とかなると思います。
画面いっぱい画像を並べるのであれば、.containerではなくてwidth： 100%;にしてカルーセルスライダーを画面のセンターに絶対配置してあげるとよいと思います。
あとは大きさや画像ふちを付けたり、影を付けたりと装飾して見た目を整えます。

slick使いやすくて好きです。前回のとはちょっと毛色が違いますが、こんな使い方もできますね。(というか、こちらの方がslickっぽいですね)
ほかにもこんなことできたーとか出てきたらまた紹介しますね。
もしくはこんなんはできないのか？ってのがあれば、挑戦してみますのでコメントください。

というわけで、弊社ではただいま求人募集中です。

求人募集中

求人の詳しい内容はこちらから
事業紹介はこちらから

※この情報は2016年4月現在の情報です。詳しくはアートグラフィック新潟Webサイトよりお問い合わせください。

PHPからJavaScriptへの変数渡し

もはやアプリ化しているホームページですが、プログラム部分で使われる基本的な言語が『PHP』と『JavaScript』かと思います。
それぞれに得意とする部分がありますので、その得意とする部分で言語を分けて書いて行くと異言語間の変数の共有が必要になってくると思います。
今回、PHPとJavaScriptでの変数の受け渡しについてお教えします。
※［××××××.php］ファイルでの記述方法になります。

【PHPからJavaScriptへ　基本変数編】
PHPで使っている変数の内容をJavaScriptへ渡しjQueryなんかで処理したい事が多いかもしれません。

JavaScript記述内で

var $aa = "<? php echo $bb; ?>;";

1	var $aa = "<? php echo $bb; ?>;";

とするだけで変数 $bbの内容が$aaへ代入する事ができます。

【PHPからJavaScriptへ　配列変数編】
まず、基本的にJavaScriptが多次元配列に対応していないため、通常の配列の受け渡しについて説明します。

[PHP側での準備]　$ab = implode(“,”,$aa);
『implode』をつかって配列をカンマ区切りの文字列情報へ組み替えます。

JavaScript内で

var $bb_csv = "<?php echo $ab; ?>";　// 変数受け渡し。
$bc = bb_csv.split(",", -1);　// bb_csvをsplit()でカンマ区切り配列に再編成。

1 2	var $bb_csv = "<?php echo $ab; ?>";　// 変数受け渡し。 $bc = bb_csv.split(",", -1);　// bb_csvをsplit()でカンマ区切り配列に再編成。

こうすることで、PHPでデーベースなどの処理を行ない、表示部分ではJavaScriptでjQueryなどを使った柔軟な表示がおこなえます。

レスポンシブWebデザインに対応！Slick.jsを使ってスライドのサムネイルの位置を切り替える

年末からの体調不良からいっこうに立ち直れないyasaiです。先日の大寒波からみなさんは立ち直ったでしょうか？

さて僕としては2016年1回目のブログとなります。気合い入れていきます!!なんていうと、あとが続かなくなるので、今回はサラッと軽めに参ります。

みなさんはサイト制作するとき、メインに使うスライダーって決めてますか？僕の本命は bxSliderとslickです。この2本の使い分けって感じですねー

先日やらせていただいた案件で、メインのスライドエリアの横にサムネイル表示されるパターンのものがあったので、今回はその時のお話です。スマホの時はサムネイルを下へ移動します。

【DEMO】

今回はslickを使いました。slickの素敵な所は、画面幅にによってオプションを切り替えられるところですね。それと今回の案件でslickを使うことにしたのは、サムネイルの表示が別のHTMLとして書くことができて、CSSでの制御がしやすかったからです。

まずはslick.jsとCSSを読み込みます。jQueryのプラグインですので、お約束jQueryと一緒に。

<script src="jquery.js"></script>
<script src="slick.min.js"></script>
<link rel="stylesheet" href="slick.css">

※追記

slick-theme.cssは読み込んでいません。slick-theme.cssを読み込むと縮めたときに「戻る」ボタンの表示がうまくいかないようです。
一応回避方法を考えてみましたのでコメントをご覧ください。

スライダー部分のHTMLはこんな感じに。

<div class="slider container">
    <div class="slider-for">
        <div class="sp-slide"><img src="images/01.png" alt=""></div>
        <div class="sp-slide"><img src="images/02.png" alt=""></div>
        <div class="sp-slide"><img src="images/03.png" alt=""></div>
        <div class="sp-slide"><img src="images/04.png" alt=""></div>
        <div class="sp-slide"><img src="images/05.png" alt=""></div>
        <div class="sp-slide"><img src="images/06.png" alt=""></div>
    </div>     
    <div class="slider-nav-wrap">
        <div class="slider-nav">
            <div class="sp-thumbnail"><img src="images/01.png" alt=""></div>
            <div class="sp-thumbnail"><img src="images/02.png" alt=""></div>
            <div class="sp-thumbnail"><img src="images/03.png" alt=""></div>
            <div class="sp-thumbnail"><img src="images/04.png" alt=""></div>
            <div class="sp-thumbnail"><img src="images/05.png" alt=""></div>
            <div class="sp-thumbnail"><img src="images/06.png" alt=""></div>
        </div>
        <div class="slick-nav-arrows">
            <div class="slick-next"></div>
            <div class="slick-prev"></div>
        </div>
    </div>
</div>

</div>

</div>

</div>

スライダーのメイン部分を.slide-for、サムネイル部分を.slider-nav、矢印を.slick-nav-arrowsでマークアップしています。ひとつポイントなのが、.slider-navと.slick-nav-arrowsを.slider-nav-wrapでひとくくりにしているところでしょうか。

動作のためのJavascriptをこんな感じです。

$(document).ready(function(){
    $('.slider-for').slick({
        slidesToShow: 1,
        slidesToScroll: 1,
        arrows: false,
        fade: false,
        asNavFor: '.slider-nav'
    });
    $('.slider-nav').slick({
        slidesToShow: 4,
        slidesToScroll: 1,
        asNavFor: '.slider-for',
        dots: false,
        centerMode: true,
        focusOnSelect: true,
        vertical: true,
        arrows:  true,
        prevArrow: $('.slick-prev'),
        nextArrow: $('.slick-next'), 
        responsive: [
            {
                breakpoint: 768,
                settings: {
                    centerMode: true,
                    vertical: false
                }
            }
        ]
    });
});

$(document).ready(function(){

$('.slider-for').slick({

slidesToShow: 1,

slidesToScroll: 1,

arrows: false,

fade: false,

asNavFor: '.slider-nav'

});

$('.slider-nav').slick({

slidesToShow: 4,

slidesToScroll: 1,

asNavFor: '.slider-for',

dots: false,

centerMode: true,

focusOnSelect: true,

vertical: true,

arrows: true,

prevArrow: $('.slick-prev'),

nextArrow: $('.slick-next'),

responsive: [

{

breakpoint: 768,

settings: {

centerMode: true,

vertical: false

}

]

});

メイン.slider-forとサムネイル.slider-navの両方ともスライダーとして動作させます。
メインである.slider-forのオプションで「asNavFor : ‘.slider-nav’」として、.slider-navがサムネイルボタンとして機能するようにします。

サムネイルの方は、今回は4枚並ぶ形にしました。「slidesToShow: 4」
「the last carousel 」なんていうサブタイトルがついてるくらい、使いやすいカルーセルスライダーですなんですよね。

そしてslickのよいところ、オプション「responsive」でブレイクポイントを設定し、表示を切り替えます。今回は768pxをブレイクポイントとし、縦型のスライダーにするかどうかを切り替えています。その他詳しいオプションなどは、本家サイトをご覧ください。

見た目の方のCSSはこんなです。

.slider{
    position: relative;
    max-width: 960px;
}
.slider img{
    max-width: 100%;
    height: auto;
}
.slider .slider-nav-wrap{
    position: relative;
}
.slider .slider-nav-wrap .slider-nav .slick-list{
    padding: 0 !important;
}
.slider .slider-nav-wrap .slider-nav .slick-track{
    left: 0 !important;
    width: 100%;
    opacity: 1;
}
.slider .slider-nav-wrap .slider-nav .slick-slide{
    -webkit-transition: opacity .3s ease;
    transition: opacity .3s ease;
    opacity: 1;
    padding: 5px;
}
.slider .slider-nav-wrap .slider-nav .slick-slide:hover{
    opacity: .5;
}
.slider .slider-nav-wrap .slick-arrow{
    position: absolute;
    top: 50%;
    width: 0;
    height: 0;
    border-style: solid;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}
.slider .slider-nav-wrap .slick-prev{
    right: 0;
    border-width: 6px 0 6px 12px;
    border-color: transparent transparent transparent #444444;
}
.slider .slider-nav-wrap .slick-next{
    left: 0;
    border-width: 6px 12px 6px 0;
    border-color: transparent #444444 transparent transparent;
}
@media (min-width: 768px){
    .slider .slider-for{
        float: left;
        width: 79.1666%;
    }
    .slider .slider-nav-wrap{
        position: absolute;
        top: 50%;
        right: 0;
        width: 16.6666%;
        padding: 0;
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
    }
    .slider .slider-nav-wrap .slider-nav .slick-list{
        padding: 0 0 !important;
    }
    .slider .slider-nav-wrap .slider-nav .slick-track{
        left: 0 !important;
    }
    .slider .slider-nav-wrap .slider-nav .slick-slide{
        padding: 0;
    }
    .slider .slider-nav-wrap .slick-arrow{
        left: 50%;
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);
    }
    .slider .slider-nav-wrap .slick-prev{
        top: auto;
        bottom: -1.5em;
        border-width: 18px 9px 0 9px;
        border-color: #444444 transparent transparent transparent;
    }
    .slider .slider-nav-wrap .slick-next{
        top: -1.5em;
        border-width: 0 9px 18px 9px;
        border-color: transparent transparent #444444 transparent;
    }
}

.slider{

position: relative;

max-width: 960px;

}

.slider img{

max-width: 100%;

height: auto;

}

.slider .slider-nav-wrap{

position: relative;

}

.slider .slider-nav-wrap .slider-nav .slick-list{

padding: 0 !important;

}

.slider .slider-nav-wrap .slider-nav .slick-track{

left: 0 !important;

width: 100%;

opacity: 1;

}

.slider .slider-nav-wrap .slider-nav .slick-slide{

-webkit-transition: opacity .3s ease;

transition: opacity .3s ease;

opacity: 1;

padding: 5px;

}

.slider .slider-nav-wrap .slider-nav .slick-slide:hover{

opacity: .5;

}

.slider .slider-nav-wrap .slick-arrow{

position: absolute;

top: 50%;

width: 0;

height: 0;

border-style: solid;

-webkit-transform: translateY(-50%);

transform: translateY(-50%);

}

.slider .slider-nav-wrap .slick-prev{

right: 0;

border-width: 6px 0 6px 12px;

border-color: transparent transparent transparent #444444;

}

.slider .slider-nav-wrap .slick-next{

left: 0;

border-width: 6px 12px 6px 0;

border-color: transparent #444444 transparent transparent;

}

@media (min-width: 768px){

.slider .slider-for{

float: left;

width: 79.1666%;

}

.slider .slider-nav-wrap{

position: absolute;

top: 50%;

right: 0;

width: 16.6666%;

padding: 0;

-webkit-transform: translateY(-50%);

transform: translateY(-50%);

}

.slider .slider-nav-wrap .slider-nav .slick-list{

padding: 0 0 !important;

}

.slider .slider-nav-wrap .slider-nav .slick-track{

left: 0 !important;

}

.slider .slider-nav-wrap .slider-nav .slick-slide{

padding: 0;

}

.slider .slider-nav-wrap .slick-arrow{

left: 50%;

-webkit-transform: translateX(-50%);

transform: translateX(-50%);

}

.slider .slider-nav-wrap .slick-prev{

top: auto;

bottom: -1.5em;

border-width: 18px 9px 0 9px;

border-color: #444444 transparent transparent transparent;

}

.slider .slider-nav-wrap .slick-next{

top: -1.5em;

border-width: 0 9px 18px 9px;

border-color: transparent transparent #444444 transparent;

}

ちょっと長いですけど、基本的にはたいしたことしてないですね。

メディアクエリで768px以上の場合はメイン部分を左に寄せて、サムネイル部分は天地のセンターをとりたかったので、絶対配置で右寄せにしているだけです。この時に幅を％で指定してあるから縮んでいくよ、というからくり。(imgをmax-width:100％にしています)
.slider-navと.slick-nav-arrowsを.slider-nav-wrapでひとくくりにしたのは.slick-nav-arrowsをうまいこと配置したかったから、ということです。(.slider-navの位置に合わせて天地or左右のセンターをとりたかった)

スマホのときは特にfloatも絶対配置もしていないので、メインの下にサムネイルがやってくるという仕掛けになってます。
DEMOのブラウザ幅を広げたり縮めたりするを動作を確認いただけると思います。

今回はコードばかりでいつも以上にとっつきにくいですね。スイマセン・・・

追記(2016/04/25)

サンプルその2も作ってみました。よろしければこちらもどうぞ！

Slick.jsを使ってカルーセルスライダーの中央の画像を大きくする【レスポンシブWebデザインでもOK】

『openWYSIWYG』使ってみた

お客さまのホームページをリニューアルする際に、『お知らせ』部分をWYSIWYGエディタで書き込めるようにしました。
その時に使ったのが『openWYSIWYG』というWYSIWYGエディタ。
JavaScriptで開発されているエディタです。
この使い方とカスタマイズ、画像使用不可ですがChromeで使う際の修正を書いて行きます。

まずは、基本プログラムのダウンロード。
openWYSIWYG　（ライセンス：LGPL）
http://www.openwebware.com/

非公式で日本向けカスタム版もあるようですが、使用前にご確認ください。

設置は簡単。ヘッダー内で「wysiwyg.js」と「wysiwyg-settings.js」を読み込み
使用するIDの定義はWYSIWYG.attachとして　(‘要素ID’,’ツールバー設定’)　で完了。

<script type=”text/javascript” src=”scripts/wysiwyg.js”></script>
<script type=”text/javascript” src=”scripts/wysiwyg-settings.js”></script>
<script type=”text/javascript”> WYSIWYG.attach(“txw1”, full);</script>

ツールバーの設定は『wysiwyg-settings.js』に書き込みます。

基本的な設定として

要素の幅　　［セット名］.Width = “100%”;
要素の高さ　［セット名］.Height = “250px”;
要素内の基本スタイル　［セット名］.DefaultStyle = “font-family: sans-serif; font-size: 14px;”

ツールバーのカスタマイズ。
デフォルトのツールバーは上から[0]、[1]の2段になっています。
それぞれの段に入るツールは『wysiwyg.js』内に『this.Toolbar = new Array();』として書いてあります。
区切り線も入れられるようで、”seperator”と入れれば縦線が入ります。

そして、これを踏まえて「wysiwyg-settings.js」に書き込めば専用のツールセットが出来上がります。

書き方は
［セット名］.full.Toolbar[［段数］] = new Array([ここに””と”,”区切りでツール名を書く]

たとえば、fullと言うセット名の場合
full.Toolbar[0] = new Array(“font”,”fantasize”,”headings”, … );

デフォルトのツールバーに対して、任意の段・任意の並びに表示したい場合
［セット名］.addToolbarElement(“［ツール名］”, ［段］, ［並び（右から何番目）］);

たとえば、fullと言うセット名で3段目の一番右に『フォントサイズ』を置く場合
full.addToolbarElement(“fontsize”, 3, 1);
とすればOKです。

さて、このエディタ、1つ大きな欠点があります。
Chromeに非対応です。

画像の挿入など画像に関わる部分を使用しないのであれば
2020行目付近にある

if ((navigator.userAgent.indexOf(‘Safari’) != -1 ) || !document.getElementById || !document.designMode){

をコメントアウトして

if (!document.getElementById || !document.designMode) {

を新しく追加すると”エラーは出なくなります”

特定のユーザーの場合にはカテゴリをあらかじめチェックする【WordPress】

すっかり春めいてきまして。みなさんの花粉症の具合はいかがですか？

私自身は平気なのですが、まわりの花粉症の人たちをみると辛そうで・・・

それよりも私は春先特有の猛烈な眠気に困っています。間断なく春の眠気が襲ってくるのです。強敵です。手強いです。眠いです。

いつものことじゃないのかって？いやー、まぁ。。。

さて、今日はWordpressのお話で。

現在投稿するユーザーが複数入るポータルサイトみたいのを作ってまして。

記事書く時にカテゴリーのつけ忘れって、結構あると思うのですよね。それで、特定のユーザーの場合は、必ずあるカテゴリに初めからチェックが入った状態にしたいな、と。

ユーザー権限で分岐できればもっとカンタンだったかもなのですが、今回はjQueryで処理しました。

条件

ユーザーのプロフィール項目にカスタムフィールド（ACF使用）でタイプ別のチェック項目を作っている。
前記チェック項目とslugが対応したカテゴリを作ってある。

処理

ユーザーのプロフィール情報から該当するチェックボックを配列に入れる。
slugのカテゴリIDを取得する。
ダッシュボードのカテゴリのチェックボックスには「in-category-カテゴリID」のIDが付与されるのを利用し、対応する「in-category-カテゴリID」のチェックボックスの’checked’を’checked’にする。
2、3の処理をforeachでプロフィール情報のチェックボックス分行う。

コード

※function.phpに記述

function check_cat_type() {
    //ユーザーID取得
    $user = wp_get_current_user();
    $userID = $user-&gt;ID;
        
    //type 
	/* プロフィール情報とカテゴリの共通するスラッグ */
    $type01 = 'type01';  
    $type02 = 'type02'; 
    $type03 = 'type03'; 
    $type = 'profile_type';
	/*  'profile_type'はプロフィール情報のカスタムフィールドのslug */
    //ユーザーのタイプ取得
    $profile_type = get_the_author_meta( $type, $userID);
    
    if($profile_type != ''){
        foreach ($profile_type as $thistype){
            //カテゴリーIDの取得
            if($thistype == $type01){
                $idObj = get_category_by_slug( $type01 );
            }elseif($thistype == $type02){
                $idObj = get_category_by_slug( $type02 );
            }elseif($thistype == $type03){
                $idObj = get_category_by_slug( $type03 );
            }
            $cat_id = $idObj-&gt;term_id;
            
            //jQueryでチェックボックスに該当するチェックボックスにチェックを入れる
            $script_type = '&lt;script type="text/javascript"&gt;';
            $script_type .= 'jQuery(document).ready(function($){';
            $script_type .= 'jQuery("input#in-category-' .$cat_id  .'").attr("checked", "checked");';
            $script_type .= '});';
            $script_type .= '&lt;/script&gt;';
            echo $script_type;
        }
    }
}
add_action('admin_head', 'check_cat_type');

function check_cat_type() {

//ユーザーID取得

$user = wp_get_current_user();

$userID = $user->ID;

//type

/* プロフィール情報とカテゴリの共通するスラッグ */

$type01 = 'type01';

$type02 = 'type02';

$type03 = 'type03';

$type = 'profile_type';

/* 'profile_type'はプロフィール情報のカスタムフィールドのslug */

//ユーザーのタイプ取得

$profile_type = get_the_author_meta( $type, $userID);

if($profile_type != ''){

foreach ($profile_type as $thistype){

//カテゴリーIDの取得

if($thistype == $type01){

$idObj = get_category_by_slug( $type01 );

}elseif($thistype == $type02){

$idObj = get_category_by_slug( $type02 );

}elseif($thistype == $type03){

$idObj = get_category_by_slug( $type03 );

}

$cat_id = $idObj->term_id;

//jQueryでチェックボックスに該当するチェックボックスにチェックを入れる

$script_type = '<script type="text/javascript">';

$script_type .= 'jQuery(document).ready(function($){';

$script_type .= 'jQuery("input#in-category-' .$cat_id .'").attr("checked", "checked");';

$script_type .= '});';

$script_type .= '</script>';

echo $script_type;

}

add_action('admin_head', 'check_cat_type');

今回はコチラを参考にさせていただきました。ありがとうございます！

記事投稿時に指定したカテゴリーのチェックボックスを選択済みにする

今の所これだと、編集時にも必ずチェックが入るんですよね。

あえてチェック外したいなっていうときは忘れないようにですねー

Fullcalendar動いてないから修正してみる

寒いです。皆さんは風邪ひいてませんか？先週末は大雪でした。今週末も大雪見たいです。これは私に冬眠しろってことですね？？えぇ雪国生まれなもので、雪かきとか無駄に頑張っちゃいますけどね。ちなみに「雪かき」っていいます？「雪のけ」っていいます？さて、営業日カレンダーをGoogleカレンダーを使って表示しているところがあったのですが、どうもうまく動いていない模様。Firebugでエラーを見ると、Googleカレンダーのイベントを取得するところでエラーが起こっている模様。さてさて、困ったぞ、ということで調べました。どうも原因は2点。

Calendar APIがv2→v3になったこと。
FullCalendarのバージョンがあがったこと。

ということで修正します。

Calendar APIを使えるようにする

まずCalendar APIを使えるようにします。v2→v3になって、API Keyが必要になったようです。 API Keyの取得はGoogle Developers Consoleから行います。アカウントの登録が終わったら、新しくプロジェクトを作り、

メニューのAPIからCalendar APIを選択し、カレンダーをOnにします。

次に認証情報から新しくKeyを作成します。選択するのはブラウザキーです。

そうすると下のような画面になるので、ここは何も入力せずに作成を押しちゃってよいみたいです。これでAPI Keyが取得できました！

Fullcalendarをバージョンアップする

サイトに行ってfullcalendar.min.jsをダウンロードしてきます。 ※2014年12月12日現在、最新版は2.2.3のようです。ダウンロードしてきたら、必要なファイルを読み込みます。


&lt;script src=&#39;js/moment.min.js&#39;&gt;&lt;/script&gt;
&lt;script src=&quot;js/jquery-1.11.1.min.js&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;js/fullcalendar.min.js&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;js/gcal.js&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;js/calendar.js&quot;&gt;&lt;/script&gt; //Fullcalendar設定用。これは各自変更してください。

このような感じになります。次にカレンダーの設定をします。「googleCalendarApiKey」に取得したAPI Keyを、「events」に表示したいカレンダーのIDを設定します。


$(document).ready(function() {
  $(&#39;selector&#39;).fullCalendar({
    googleCalendarApiKey: &#39;ここにAPI Key&#39;,
    events: &#39;表示したいGoogleカレンダーのID&#39;,
    //日本の休日表示
    eventSources: [
      {
       url:&#39;ja.japanese#holiday@group.v.calendar.google.com&#39;
      }
    ]
  });
});

$(document).ready(function() {

$('selector').fullCalendar({

googleCalendarApiKey: 'ここにAPI Key',

events: '表示したいGoogleカレンダーのID',

//日本の休日表示

eventSources: [

{

url:'ja.japanese#holiday@group.v.calendar.google.com'

}

]

});

ちなみに、カレンダーのIDはGoolgeカレンダーのここです。

その他のオプションの設定は本家サイトをご覧ください。これで無事に営業カレンダーが復活しました。カレンダーがうまく動かなくて、毎日が営業日のようになっていた悲劇もこれで無事解決です。今回参考にさせていただいた記事(ありがとうございました！) fullcalendar.js + gcal.jsでGoogle API v3を使ってGoogleカレンダーを表示する

あれ？bxSlider動かない・・・

jQuery3.xになってload()がなくなった

でも動くときもあるよ？

Google Fontsで「はんなり明朝」とか使える!!

使えるフォント

漢字なし

ひらがななし

参考サイト

挫折のわけ

お手軽に作ってみよう

CSSフレームワーク

CDNを利用する

今回利用したもの

Webページを作ろう

今回のページの内容

CDNやCSSフレームワークのデメリット

CDNのデメリット

CSSフレームワークのデメリット

まとめ

参考サイト

jQueryを使う

CSSのアニメーションについて

CSSアニメーションでの注意点

発火

さまざまなジェネレーターやライブラリ

参考サイト

HTML

Javascript

CSS

求人募集中

※追記

追記(2016/04/25)

条件

処理

コード

Calendar APIを使えるようにする

Fullcalendarをバージョンアップする

jQuery3.xになって`load()`がなくなった