Posted on

jQuery UI Datepickerにクリアボタンを追加してスマホでも使いやすくする

jQueryUIのDatepickerを使っているのですが、スマホなどで使用する場合は入力させる時にスマホのIMEがせり出てきてスマホの表示領域を圧迫して入力しづらい場面がやや出てきます。

そのinput要素をスマホの場合はreadonlyにする事で、IMEが出てくる事を回避する事はできるのですが、今度は入力した値を消したい場合はどうすればいいかという問題が出てきました。

Datepickerにクリアボタンを追加したらいいんじゃないかと思いその対応について記述したいと思います。


HTMLではdatepickerにする要素にreadonly属性を付与します。

   var setCalsClearButton = function(year,month,elem){

        var afterShow = function(){
            var d = new $.Deferred();
            var cnt = 0;
            setTimeout(function(){
                if(elem.dpDiv[0].style.display === "block"){
                    d.resolve();
                }
                if(cnt >= 500){
                    d.reject("datepicker show timeout");
                }
                cnt++;
            },10);
            return d.promise();
        }();

        afterShow.done(function(){

            // datepickerのz-indexを指定
            $('.ui-datepicker').css('z-index', 2000);

            var buttonPane = $( elem ).datepicker( "widget" ).find( ".ui-datepicker-buttonpane" );

            var btn = $('');
            btn.off("click").on("click", function () {
                    $.datepicker._clearDate( elem.input[0] );
                });
            btn.appendTo( buttonPane );
        });
   }

datepickerには開いた後のイベントがないため、開く前のイベントにウインドウとなる要素がdisplay:block;になったかどうかをpromiseで判定します。

要素が作られるまで待つのですが、inputを選択して5秒待ってまだ開かなかったらpromiseを辞めるというコードも書いています。その場合はおそらく内部エラーくらいだと思いますが、待ち続けているのも良くないので終了させるよう書いています。

要素が作られたら、ボタンを追加するコードを入れています。


  $(".datepicker").datepicker({
      showButtonPanel: true,
      changeMonth:true,
      changeYear:true,
      beforeShow : function(inst,elem){
              setCalsClearButton(null,null,elem);
      },
      onChangeMonthYear:setCalsClearButton
  })

datepickerを呼び出す所optionに、beforeshowに上記関数を指定します。

onChangeMonthYearにもオブジェクト関数を指定しています。これは月を変更した場合、再描画が走ってクリアボタンも消えてしまうので、月の変更時にイベントにボタンを追加するコードを走らせて都度生成するようにしています。

これで、入力しやすくなりましたね。

Posted on

全画面ページを簡単に作成!fullpage.jsの使い方とTIPS集

案件で全画面ページを簡単に作るプラグイン「fullpage.js」を使用する事がありました。

今回、レスポンシブ対応にあたって、文章等が1ページの範囲を超える場合があり、その際はスクロールバーを表示してスクロールできるようにしたいため、scrolloverflow.jsも使用しました。

そちらの簡単な使い方とハマった所をtipsとして取り上げます。

初期設定

まずは、必要な読み込みファイルから。

fullpage.js 公式サイト

まず、表示させたいページに必要なCSSとjsを読み込みます。








全画面ページにしたい所は起点の要素(今回はIDがfullpageの要素)と、その子クラスにsectionの名前を付けます。

横スライドも欲しい場合は、section要素にその子のクラスにslideという名前を付けます。

Some section
Some section
Some section
Slide 1
Slide 2
Slide 3
Slide 4
Some section

jQueryを使って呼び出します。

$('#fullpage').fullpage({
   anchors: ['page1', 'page2', 'page3', 'page4'], // ページのアンカー名を指定
   menu: '#global-menu', // グローバルメニューのID名
   scrollOverflow: true, //全画面よりコンテンツが多い場合スクロールバーを出すかどうか
   loopHorizontal:false, //横スライダーをループさせない
   touchSensitivity: 16, //タッチデバイスでのセクション切替の強さの閾値
   afterLoad: function (anchorLink, index) {
    //セクションが読み込み終わりのイベント
    if (index === 1) {
     //TOPロード時
	
    }else if(index === $('#fullpage .section').length){
     //最下ページ時
    }else{
     //その他のページの時
    }
   },
   afterSlideLoad: function (anchorLink, index, slideAnchor, slideIndex) {
     // スライドが読み込み終わった後のイベント
   },
   onLeave: function (index, nextIndex, direction) {
     // セクションを離れた時のイベント
   },
   onSlideLeave: function (anchorLink, index, slideIndex, direction, nextSlideIndex) {
     // スライドを離れた時のイベント
   },
   afterResize: function () {
    // リサイズ後のイベント
  }
});

グローバルメニューが要る場合には、上記menu:"#global-menu"のように指定して、li要素のdata-menuanchorに上記anchors配列で指定した名前と対応させます。

そうすると、グルーバルメニューのクラスに現在居るページはactiveが付きます。ページが遷移される度に現在居るクラスにactiveが付き、移動元ページのactiveクラスは外れますので、メニューのON/OFFのCSSの装飾などが簡単に作れます。


これで、縦4ページ、3ページ目に横に4スライドある全画面ページが出来上がったと思います。

TIPS

作成に当たって色々とありましたので、そこで得たTipsをドドーンと紹介しちゃいます。

可変サイズ対応

全画面のページのサイズが確定した後にAJAXやdisplay:noneしていた要素を表示させて、表示させている要素が増えた場合、スクロールする領域が足りない事が起きたりします。その際は、rebuild()関数を呼び出して、再度サイズ計算し新たなページのサイズを確定させます。

// フェードイン・フェードアウトの後fullpage.js再計算
$("#recruit-space").fadeToggle(500,function(){
    $.fn.fullpage.reBuild();
})

fullpage.jsの読み込み後に何かをさせたい場合

jQueryのロード時とfullpage.jsのロード時はタイミングとして別になるので、 fullpage.jsが読み込まれた後に処理を走らせたい場合は、afterRender以下に処理を書きます。

afterRender: function () {
    //(例)クリッカブルマップレスポンシブ
     $('img[usemap]').rwdImageMaps();
}

ページを遷移させる度にGoogle Analyticsのコードを送る

fullpage.jsは1ページを複数ページとして見せているだけなので、普通にGoogle Analyticsコードを貼っても該当ページの読み込み時に1回しか送られません。

貼るコードを分けて、縦ページの遷移、横ページをスライドさせた時に、Analyticsのコードを送るように書けば思うようなデータが取れます。

通常のアナリティクスコード読み込みの時に、下の方にあるga('send', 'pageview');を外します。


そして、fullpage.jsの横スライドが読み込まれた際に起きるイベントafterSlideLoad内にga('send'...のコードを書きます。

afterSlideLoad: function(anchorLink, index, slideAnchor, slideIndex) {
   ga('send', 'pageview', { 'page': anchorLink, 'title': slideAnchor });
},

縦ページ遷移に対応するにはadterLoadイベント内に記述します。

  afterLoad: function (anchorLink, index) {
     ga('send', 'pageview', { 'page': anchorLink, 'title':anchorLink });               
  }

まとめ

SPA風にページが手軽に作れたり、アイデア次第で面白いページが作れると思います。その分独自のライフサイクルやイベントがあるのでハマり所があったり、SEO的にはどうなるんだろうと思う所がありましたが、ここまで対応できれば普通に使えそうですね。

また何かあったら追記しようと思います。

fullpage.js 公式サイト

Posted on

WebサイトをPDFに変換する

HTMLでシステムの画面のモックを作成していた時に
お客様が全ページ画面キャプチャするのが大変・・・
印刷して朱書きで要望等簡単に書けないか?ということがありました。

社内でも調整してほしい箇所をキャプチャするのは大変だし、何かいい方法ないか調べてみました!

続きを読む WebサイトをPDFに変換する

Posted on

jQueryを用いた気持ちのよいインタラクションとフェードインを考える

気持ちの良いデザインを考える

Webデザインについて再考する時間があったので、インターフェースの心理学やUI GRAPHICS等の本を読んでどんな事がサイトをデザインする時に人を魅了できるかを勉強してみました。

その中で、能動的に選んでいる気でいても、実は反応であったり無意識的に動かされている事が多いという事を学びました。

では、何をもって人は無意識的に動かされるか、という点で考えた時に「ユーザーが何か起こした事によって得られる反応(=インタラクション)を気持ちの良いものにする」事で、自然と楽しい気持ちになったり、もっと触ってみようという気持ちになって、より能動的な働きとして変えていけるんではないかと考えるようになりました。

インタラクションとは

例えば、ソフトウェア、各種製品、携帯機器、環境、サービス、ウェアラブルコンピューティング、組織自体などのシステムに適用される。インタラクションデザインは、人工物やシステムのユーザーへの反応を振る舞い(インタラクション)として定義する。IaD または IxD と略記されることもある。システム開発においてユーザーの人力操作に対するシステムからの適切な反応を設計することで利用目的に合致した両面転移や、グラフィカルユーザーインターフェース(GUI)要素の肖然な振る舞いをデザインする専門的な作業である。

引用:wikipedia

前述の「ユーザーが何か起こした事によって得られる反応」をインタラクションといい、システムにおけるView部分、Webサイトでいうリンクやボタンで表現される入力部分のみならず、画像や文字などの表示部分(視覚的に入力する)をより適切なデザインを施す事で、そのシステム自体をより良いものに見せるという点で、現在注目されている分野であります。

イマドキのWebサイトは、ボタンにマウスをホバーするとふわっと色が変わる事や、画像ギャラリーで画像が、自動的にスライドして見られるスライダーなど動的である事が標準となってきております。

jQueryやJavaScriptが持てはやされているのは、この「当たり前に動く」仕組みを実現するのに不可欠なプログラミング言語で、昨今では、HTML + CSSに加えて、JavaScriptができる事がデザインという分野で求められる傾向にあります。

気持ちいい画像の表示方法を考えてみる

前置きが長くなりましたが、本題はここからです。

「画像を表示させる」というWebサイトでは当たり前の事象についても再考してみました。以下のDEMOはAJAXにて画像データを取得して表示するサンプルですが、表示のさせ方を4パターン用意してみました。

※Chrome、Firefoxでの動作の確認をしました。

See the Pen AJAXを使った画像読み込みの一工夫 by koka (@kokaben) on CodePen.

画像を表示させる方法

画像は画像サイズによって表示までの速度がマチマチになる事や、画像データを取得している時でも他の作業ができるように、バックグラウンド読み込み処理を行いながら用意ができたものから表示させる非同期処理を用いるのが現在の主流です。

当サンプルでは、画像を裏で読み込ませてメモリに展開された時点で、表示させるという方法を用いております。

すぐ表示」ボタンは、別段処理を施さずに、用意できた順から表示するようになっています。

一番最速で表示させたい時はこの方法が良いですが、少し無骨に見えませんか?文字のみならばこの方法が一番良いかもしれませんがもう少し見せ方にこだわりたく思ってしまいます。

フェードインする」ではどうでしょうか。

少し気持ちよくなった気がしませんか?少しずつ表示される事で少しワクワクするようなそんな作用が引き起こされていれば狙い通りです!

ただ、これが何百件だとどうでしょうか。「これはいつまで、どこまで表示されるんだろうか」と多少不安になったり、遅延処理を行っているので「少し遅いな」と感じてしまうんではないでしょうか。

表示する量や、場所を選べば気持ちよさのみの印象を与える事ができそうです。

表示する数と領域をあらかじめ見せる

背景を付けて●●」のボタンが2つありますが、この手法は記事を書いている時期(2017年)によくみられる手法で、ボタンを押すとあらかじめ表示される領域の背景をグレーで表示され、そこに画像や文字を展開していく見せ方です。

この手法は、YouTubeのスマートフォン版を起動した時や、検索した時に見られたり、Googleの画像検索でスクロールしていった時に自動的に次の30件が表示される時に見られる手法をまねたものです。

背景を付けてすぐ表示」ボタンの動きを見てみましょう。

タイミング的には「すぐ表示」で画像が表示されるタイミングで表示されて、そこから0.5秒後に画像が表示されるので、実質は「すぐ表示」の時より遅いのですが、先に領域が出る事で「ああ、ここに何か表示されるんだな」と頭が認識する時間が発生するので、そこまで遅いと感じないのではないでしょうか。

ただまだ、無骨に思えるので、それにフェードインを加えた「背景を付けてフェードイン」を試してみて下さい。

気持ちよくないでしょうか?

領域が決まって、そこから画像と文字のフェードインが起きながら、文字の領域はフェードアウトさせる事で、安定感のある面白くて気持ちの良い見せ方になったのではないかと思います。

感性に訴えたい

以上のサンプルは、必ずしもそんな気持ちになるかどうかは別の話で、私は「そういう風に狙った」というだけな話です。受け手の気持ちは千差万別と思われます。

併せて思うのは使いどころを見誤ったり、要らない所まで動きを付けまくっていると見づらいページになってしまうので、使いどころを見定める事は必要と思います。「コレが利いてて気持ちいいんだよなー」くらいがちょうど良いと思っています。

オーソリティーに受ける方法というのを模索しながら、より面白くてコストパフォーマンスに優れた見せ方をこれからも模索していくぞーと考えながら、日々勉強していこうと思います。

Posted on

Adobe Dreamweaver CCを使って爆速でSASS(SCSS)環境を手に入れる

私はCSSを書く際には、主にSCSSを使用しています。

要素を入れ子にできるので、可読性が高く、コンポーネント的な考え方でCSSを組む傾向がある今日では、フロントエンド界隈ではとても重宝されています。

ここ最近までSCSSは、GruntやGulpなどのターミナルやコマンドプロンプトで動くタスクランナーの力を借りて使う事が主でしたが、Adobe Dreamweaver CC (2017)で標準機能として採用されたので、黒い画面とにらめっこする事なく使えるようになりましたので、敷居は随分下がったのではないでしょうか。

とっても簡単に導入できるので、その導入方法をここに記しておきます。

続きを読む Adobe Dreamweaver CCを使って爆速でSASS(SCSS)環境を手に入れる

Posted on

ページを更新する度に背景の色が変わるキャッチコピー領域を作成してみました

ページのキャッチコピーの背景をどうしようかなと考えていた時に、ランダムで生成される四角形にしてみたらかわいいんじゃないかなと思ったので、作ってみました。モダンブラウザ用です。

サンプル

※表示を見たい場合は Result をクリック

四角形は可変なのでウインドウ幅を伸ばしたり、縮めたりすると動きがあります。

HTML

Walk on.

You have to learn to walk before you run.

四角形はli要素をJavaScriptで生成して、list_containerのul要素内に並べます。

CSS(抜粋)

// 外枠
#mosaic {
  position: relative;
  width: 100%;
  height: 300px;
  overflow: hidden;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -ms-border-radius: 3px;
  -o-border-radius: 3px;
  border-radius: 3px;
}

// ul要素
#mosaic #list_container {
  position: absolute;
  width: 120%;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  -webkit-justify-content: flex-start;
  -moz-justify-content: flex-start;
  -ms-justify-content: flex-start;
  -o-justify-content: flex-start;
  justify-content: flex-start;
  -webkit-align-content: stretch;
  -moz-align-content: stretch;
  -ms-align-content: stretch;
  -o-align-content: stretch;
  align-content: stretch;
  -webkit-flex-wrap: wrap;
  -moz-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  -o-flex-wrap: wrap;
  flex-wrap: wrap;
  margin: auto;
  padding: 0;
  -webkit-filter: blur(3px);
  -moz-filter: blur(3px);
  -ms-filter: blur(3px);
  -o-filter: blur(3px);
  filter: blur(3px);
}

// li要素(四角形)
#mosaic #list_container li {
  -webkit-flex: 0 0 100px;
  -moz-flex: 0 0 100px;
  -ms-flex: 0 0 100px;
  -o-flex: 0 0 100px;
  flex: 0 0 100px;
  list-style: none;
  height: 100px;
}

外枠の高さをli要素の3つ分を設定し、li要素の生成数が多くてはみ出るものはoverflow:hiddenで隠して見えないようにしています。

ul要素は、親要素のサイズピッタリにしてるとウインドウ幅を伸縮していると右端で段落ちが発生して四角形がなくなってしまいますので、幅を120%程度に広げておいて空白を防ぐようにしています。

JavaScript

    //ランダムな数を生成する関数式
    var randFnc = function(min, max) {
      return Math.floor(Math.random() * max + 1 - min) + min;
    };
    //出力先の指定
    var target = document.getElementById("list_container");

    //ブロック生成
    for (var i = 0; i < 200; i += 1) {

      var li = document.createElement("li");
      //ランダム色を生成 hslは色相, 明度, 彩度で指定する
      li.style.backgroundColor = 'hsl(' + randFnc(20, 186) + ', 100%, 86%)';
      //生成したリストを追加
      target.appendChild(li);
    }

    //背景を動かす
    setInterval(function(){
    	//はじめのli要素を変数に入れる
    	var changeItem = target.childNodes[1];
    	//要素の削除
    	target.removeChild(changeItem);
    	//要素の追加
    	target.appendChild(changeItem);

    },400);

色は生成時に全自動で作成しています。RGB指定だと色の彩度や明度もバラバラになってしまうので、HSL指定で明度と彩度は固定して極力黒が強い色を出さないように調整して、あとは色相の好きな範囲をランダムな値で出るようにして表示することにしました。

ブロックの生成数は 画面幅 / 100px * 3列でフルHDでだいたい60個くらいあれば大丈夫ですが、高解像度が進んでいるので、200個くらいにしておきました。多めにしていても溢れないので大丈夫です。

背景を動かすは遊びで入れてみました。無くても可愛いですよ。

Posted on

カレンダーの表示サンプル

ページいっぱいにカレンダーを表示するサンプルを作成しました。
参考になればご活用ください。
わたしの環境では、bootstrap.cssや社内で整備したcssを使っているのですが、
本サンプルでは、それらcssをこのサンプル内に記述しているため、すこし長くなっていますがお許しください。
サンプルの内容
初回表示は、今日の日付を元に今月のカレンダーを表示します。前月、次月は背景をグレーに、今日は背景を黄色にしています。
年、月を選択して、確認を押下すると、その月のカレンダーを表示します。
表示している内容は、スケジュールの件数とスケジュール内容(これはサンプルなので、使用される場合は、ここに表示したい
内容を設定してください)になります。
下記サンプル「index.html」ソースです。

2015,2016=>2016,2017=>2017);
$monthArr = array(1=>1,2=>2,3=>3,4=>4,5=>5,6=>6,7=>7,8=>8,9=>9,10=>10,11=>11,12=>12);
?>

  
    
    calender
    
  
  

カレンダー表示画面 

$val) { if ($key == 0) { echo ''; } if ($key != 0 && ($key % 7) == 0) { echo ''; } $classTd = ''; if ($val['gray']) { $classTd = 'class="bg-gray"'; } if ($val['today']) { $classTd = 'class="today"'; } ?> ' ?>
>
' . h("件数:{$cnt}") . ''; } ?>
$cadataVal) { echo '
' . h($cadataVal['schedule']) . '
'; $i++; // 4件まで if ($i >= 4) { break; } } ?>
データがありません。'; } ?>
Posted on

HighchartsのStacked barの縦軸に表示内容を増やす方法

ソフトウェア開発でプロジェクトに対して、縦軸プロジェクト名、横軸開発担当の開発合計時間で、
各担当者の開発時間はHighchartのStacked barで表現できるのですが、
トータルの時間や見積価格や単価を出そうとプロジェクト名の表示に追記すると省略表示されてしまいます。
そこで、HighchartのStacked barのプロジェクト名表示情報からx座標とy座標を取り、プロジェクト名の左横に
表示することに成功しました。(ただし、2016/07/14時点のHighchartのStacked barに限られましたらお許しください。)
その参考になるソースを掲載しますので、お役にたてれば幸いです。


	
	
	

	
	

	
aaa
aaa
aaa
aaa
aaa
Posted on

画像の上にポイントを付けるjQueryを作ってみた








画像の上にポイントを置いて座標を取得して保存する仕組みを作ってみました。
使ったのはjQuery.uiの「ui.draggable.js」「ui.droppable.js」を使用しました。

ポイントの追加ボタンを押してポイントを追加し、ドラッグで画像の任意のところにドラッグします。
不要なポイントはドラッグしてゴミ箱に持っていくと消えます。
ポイントを配置した後に登録ボタンを押すと座標を取得して保存する流れになります。

続きを読む 画像の上にポイントを付けるjQueryを作ってみた

Posted on

ブラウザ・IEの画像キャッシュをなんとかする

画像をアップするシステムを作ってる時にかなり邪魔なブラウザの画像のキャッシュ。

画像をアップしなおしたのにブラウザで確認すると前の画像が!!
そんな時の解決方法をまとめてみました。
テストしたのは
IE6,8
Firefox4
Chrome11
テストファイルはphpです。

続きを読む ブラウザ・IEの画像キャッシュをなんとかする