フルスクリーンのコンテンツイメージスライダーのjQueryプラグイン

【jQuery】サムネイルにいいねボタンとツイートボタンをつける

今回お仕事で、表示サイズが133px×55px(スマートフォン用なので、元の画像サイズは266px×110px)のバナーを作ることになったのですが、
どのように文字や写真などを配置するのが良いのか曖昧だったので、
小さくても良いバナーがなぜ良いのか、調べてみることにしました。
&nbsp;
今回調べたバナーは、<a href="http://banner.keizine.net/" target="_blank">バナーデザインアーカイブ</a>というサイトに載っていた、
120px×60pxのものから選びました。
&nbsp;
今回は、レイアウトについて調べてみました。
こちらがそれぞれの要素の比率や配置を調べてみた結果です。
<img decoding="async" src="/uploads-archive/2012/10/banneｒ_hi.jpg" alt="" width="100%" />
調べてみたところ、すべてバナーがそうだったわけではありませんが、1:1、1:2や2:3、
さらに、1:1.61前後の黄金比(1:1.1618&#8230;)が使われているものも多かったです。
&nbsp;
また、写真やイラスト、アイコンといったイメージと、文字が、対極的に使われていることが多いようです。
イメージはイメージ、文字は文字とわけることで、見やすく、まとまった印象になるのだと思います。
&nbsp;
色は写真やイラストを除く領域では2～3色をベースにしていることが多いようです。
&nbsp;
今回調べたほとんどのバナーが3～4つの要素で構成されていました。
小さいバナーに限ったことではないですが、小さいバナーでは領域が小さいので、
何を伝えたいのかをはっきりとさせて、要素を絞り込んでデザインすることが、
より重要になってくるようです。
&nbsp;
&nbsp;
<h2>まとめ</h3>
・要素の比率や配置は、1:1、1:2、2:3や黄金比のような、決まった比率を用いるときれいにまとまりやすい。
・写真・イラストと文字は対極的に配置すると、まとまった印象になり、見やすい。
・写真・イラストを除く領域の色数は、2～3色をベースにすると、まとまりやすい。
・要素はできるだけ絞り込んで、伝えたいことをはっきりとさせる。
&nbsp;
&nbsp;
もちろんこれらは絶対的なものではありませんし、見落としも多くあると思いますが
これらをヒントにして、実際のバナー作りを行っていきたいと思います。

banneｒ_hi.jpg

小さいサイズの良いバナーのデザインを調べる

最近米国を中心にサブスクリプション・コマースというのが人気になっているらしく、
日本でも徐々に浸透しつつある現状のようです。
&nbsp;
サブスクリプション・コマースとは、定期購入型の販売モデルで、
例えば、 一ヶ月単位で金額を支払い、それ相応の商品を月毎で受けられるというものです。
&nbsp;
どのサービスも基本的にはなにか特化したものになり、
その道のプロであったり、長けた人達が
その人におすすめな商品や、適した商品を 選択し提供する形になります。
&nbsp;
現代では、物がありふれていて、どれが良くて、どれが悪いかなんてわかりづらいですが、
厳選したものを提供してくれるなら選ぶ手間も省けていいかもしれませんね。
そんなサービスを国内で運営しているものをご紹介します！
&nbsp;
<h2>GLOSSYBOX</h2>
<img decoding="async" src="/demo/abe/images/subec01.jpg" alt="" width="656" />
&nbsp;
コスメのサンプルが毎月送られてきます。
化粧品は数も多いし、新しいのもどんどん発売されるので、 自分に合った商品を探すためにいいかもしれませんね。
&nbsp;
<a href="http://glossybox.jp/" target="_blank">GLOSSYBOX</a>
&nbsp;
<h2>フリパン</h2>
<img decoding="async" src="/demo/abe/images/subec02.jpg" alt="" width="656" />
&nbsp;
こちらは、男性用のパンツが毎月７枚まで送られてきます。
このサービスはなんと無料らしいです。
なぜ無料なのかというと、パンツに広告がプリントされているからです。
タダコピみたいな感じですかね。
&nbsp;
<a href="http://www.free-pants.jp/" target="_blank">フリパン</a>
&nbsp;
<h2>SAKELIFE</h2>
<img decoding="async" src="/demo/abe/images/subec03.jpg" alt="" width="656" />
酒蔵を営んでいるプロの方が厳選したお酒を毎月送ってくれます。
お酒を楽しんでもらうために、まずは、軽いものから、 徐々に濃いものへと段階を経て送ってくださるそうです。
&nbsp;
<a href="http://sakelife.jp/" target="_blank">SAKELIFE</a>
&nbsp;
<h2>yamory</h2>
<img decoding="async" src="/demo/abe/images/subec04.jpg" alt="" width="656" />
&nbsp;
非常食の定期宅配サービスです。
こちらは、月額で支払い、商品は半年毎に送られてきます。
常に新しい非常食を保管しておけるイメージですね。
新しいのが送られてきたら、古いのを食べるみたいな。。。
&nbsp;
<a href="http://yamory.com/" target="_blank">yamory</a>
&nbsp;
<h2>「やさい便」</h2>
<img decoding="async" src="/demo/abe/images/subec05.jpg" alt="" width="656" />
&nbsp;
新鮮野菜の定期宅配サービスで、クックパッドにより提供されています。
やさいを届けて、クックパッドでその調理を見てもらう、 といった感じでしょうか。
何人かの農家、専門家の方がいて、その中から好きな人を選んで、
その人に、隔週もしくは週毎で送ってもらえるです。
&nbsp;
<a href="https://shop.cookpad.com/" target="_blank">「やさい便」</a>
&nbsp;
<h2>バニラ</h2>
<img decoding="async" src="/demo/abe/images/subec06.jpg" alt="" width="656" />
&nbsp;
生理用品定期お届けサービスです。
毎月訪れるもので、かつ女性からすると買うのを忘れてしまいがちなもののようなので、
定期販売の理に敵ったサービスかもしれませんね。
&nbsp;
<a href="http://vanilla-day.com/" target="_blank">バニラ</a>
&nbsp;
<h2>Box To You</h2>
<img decoding="async" src="/demo/abe/images/subec07.jpg" alt="" width="656" />
&nbsp;
こちらは商品を販売しているのではなく、
個人でもfacebookを通じて、販売ができるようになるサービスです。
facebookの実名を活かして安心、安全にできるとのことですが・・・
&nbsp;
<a href="https://www.box2you.com/" target="_blank">Box To You</a>
&nbsp;
<h2>プラナスボックス-PrunusBox</h2>
<img decoding="async" src="/demo/abe/images/subec08.jpg" alt="" width="656" />
&nbsp;
お試しコスメをお届け、
とのことですが、
上の方で説明した、GLOSSYBOXと同じようなサービスです。
&nbsp;
<a href="http://prunusbox.jp/" target="_blank">プラナスボックス</a>
&nbsp;
<h2>HATCH（ハッチ）</h2>
<img decoding="async" src="/demo/abe/images/subec09.jpg" alt="" width="656" />
&nbsp;
ライフスタイルアイテム定期購入型通販サイトとのことですが、
なにかひとつに特化した商品ではなく、
その道のプロ、専門家が複数おり、その方々からサービスを受けるというものです。
雑貨やCD、はたまた、スタイリストによるスタイリングなんてのもあるみたいです。
&nbsp;
<a href="http://shop.hatch8.jp/" target="_blank">HATCH（ハッチ）</a>
&nbsp;
<h2>ワイナレッジ</h2>
<img decoding="async" src="/demo/abe/images/subec10.jpg" alt="" width="656" />
&nbsp;
ワイン定期購入サービスで、 ソムリエの方が、毎月厳選したものを送ってくださるそうです。
&nbsp;
<a href="http://wine-k.jp/" target="_blank">ワイナレッジ</a>
&nbsp;
そして最後におまけとして、 mixiが18日に開始したサービスを紹介します。
&nbsp;
<h2>Petite jet&eacute;(プティジュテ)</h2>
<img decoding="async" src="/demo/abe/images/subec11.jpg" alt="" width="656" />
&nbsp;
ちょっとオトナのファッションを、
とのことで、２０代の女性向けに、
オンでもオフでも着れるような服を届けてくれるサービスです。
&nbsp;
<a href="http://petite-jete.com/" target="_blank">Petite jet&eacute;(プティジュテ)</a>
&nbsp;
いろいろ紹介しましたが、 サービスのポイントとしては、
大きくいうと
&nbsp;
・商品が数多くあり、素人目にはなかなか違いがわからないもの
・大事なんだけど、購入を忘れてしまいがちなもの
&nbsp;
といった感じでしょうか。
&nbsp;
お酒やワインなんかは、今まであんまり飲んでなかったけど、
これから飲んでみたいから頼むっていうのもあるかもしれないですね。
&nbsp;
もしくは、「選んで買う」という行為自体が面倒くさくなってしまった人達向けでもあるんでしょうか？
&nbsp;
物があふれるこの現代に適したサービスかもしれませんが、
選択することを放棄してしまうので、
自分でなにかを選ぶという行為がおろそかになり、
物を判断する能力が劣化してしまうのではないかと思ってしまいます。
&nbsp;
とはいえ、 これからどんな新しいサービスがでてくるのか楽しみにしたいと思います！

国内のサブスクリプションコマース１０サイト

今回はデザイン関連のお話です。
webデザインをするとよく悩むのが配色についてですが、 
この配色を手助けをしてくれるサイト
<a href="http://kuler.adobe.com/#" target="_blank">kuler</a>
というのがありまして、たまに利用していたんですが、 
これがphotoshopやillustlater、fireworksでも利用できるということを最近知りました。
いつの間にかadobeのものになっていたようです。
csなにから使えるようになったのかはわかりませんが、 
cs6では使えました。
<h2>photoshop cs6での「kuler」の使用方法</h3>
photoshopを開きまして、下の画像の箇所からkulerがあるはずです。
ウィンドウ　＞　エクステンション　＞　kuler
<img decoding="async" loading="lazy" class="alignnone wp-image-254" title="kuler_01" src="http://blog.alan-trigger.info/wp-content/uploads/2012/09/kuler_01-1024x660.png" alt="" width="550" height="359" />
&nbsp;
kulerのパネルが出現しました！
<img decoding="async" loading="lazy" class="alignnone wp-image-255" title="スクリーンショット（2012-09-12 13.45.09）" src="http://blog.alan-trigger.info/wp-content/uploads/2012/09/スクリーンショット（2012-09-12-13.45.09）-1024x660.png" alt="" width="550" height="358" />
選択したテーマをダブルクリックすると、色をスウォッチに登録できます。
&nbsp;
上の３つのボタンの右側の作成を押すと、下のように自分で作成することもできます。
<img decoding="async" loading="lazy" class="alignnone wp-image-256" title="スクリーンショット（2012-09-12 13.46.11）" src="http://blog.alan-trigger.info/wp-content/uploads/2012/09/スクリーンショット（2012-09-12-13.46.11）-1024x660.png" alt="" width="550" height="359" />
いわゆる配色のルールが設定されているので、自分でも作成しやすいかと思います。
困った時はこれを参考にしたいですね！！
でも、こういうのに頼らずに配色できるようになりたいですね・・・
&nbsp;
&nbsp;
&nbsp;

a0790_000254_m1.jpg

デザインで配色に困った時に使えるツール

Pathのアプリのメニューぽい動きをjQueryで作ってみる2

【jQuery 3Dエフェクト】で動きがイケてるメールフォームを作る

イラストチックな、絵本テイストのサイトデザインをすることになったので、
どういったデザインにしたらよいのか参考にするために、
絵本テイストのサイトを探してみました。
&nbsp;
こちらが私がいいと思った６サイト
coby採用情報スペシャルサイト 
<a href="http://www.coby.jp/recruit/special/">http://www.coby.jp/recruit/special/</a>
<a href="http://www.coby.jp/recruit/special/"><img decoding="async" src="/uploads-archive/2012/10/ss01.jpg" alt="" width="100%" /></a>
&nbsp;
デスクトップビバリーくん 
<a href="http://www.dental-plaza.com/melmaga/present/index.html">http://www.dental-plaza.com/melmaga/present/index.html</a>
<a href="http://www.dental-plaza.com/melmaga/present/index.html"><img decoding="async" src="/uploads-archive/2012/10/ss02.jpg" alt="" width="100%" /></a>
&nbsp;
Pochi 
<a href="http://po-chi.jp/">http://po-chi.jp/</a>
<a href="http://po-chi.jp/"><img decoding="async" src="/uploads-archive/2012/10/ss03.jpg" alt="" width="100%" /></a>
&nbsp;
札幌山本養蜂園 
<a href="http://www.koguma-honey.com/">http://www.koguma-honey.com/</a>
<a href="http://www.koguma-honey.com/"><img decoding="async" src="/uploads-archive/2012/10/ss04.jpg" alt="" width="100%" /></a>
&nbsp;
カンロ　キャンディパーク 
<a href="http://www.kanro.co.jp/candypark/">http://www.kanro.co.jp/candypark/</a>
<a href="http://www.kanro.co.jp/candypark/"><img decoding="async" src="/uploads-archive/2012/10/ss05.jpg" alt="" width="100%" /></a>
&nbsp;
2011 to 2012 
<a href="http://2011to2012.info/">http://2011to2012.info/</a>
<a href="http://2011to2012.info/"><img decoding="async" src="/uploads-archive/2012/10/ss06.jpg" alt="" width="100%" /></a>
&nbsp;
どれもかわいらしく、親しみやすい印象が強いです。
&nbsp;
これらのサイトの、共通点をまとめてみました。
・イラストがたくさん大きめに使われている。
・手書き風フォントが目立つところに使われている。
・色数が多い傾向がある。特にタイトルでの多色使いが特徴的。
・文字の大きさが多様。
・布や紙のテクスチャが使われていることが多い。
・レイアウトは不規則的で動きのあるものが多い。
&nbsp;
今回は極端な例のものを大目に選んだのですが、
この共通点を目立つ場所で使うことで、絵本テイストの印象を強められると思いました。
&nbsp;
試しにバナーを作ってみました。
<img decoding="async" src="/uploads-archive/2012/10/banner.jpg" alt="" />
&nbsp;
文字の配置や大きさの変化など、思いのほかバランスをとるのが難しかったです。

絵本テイストのサイトデザイン

画像やコンテンツを左右にスライド、スクロールするjQuery

<a href="https://path.com/">https://path.com/</a>
こちらのアプリのメニューの動きが心地いいので、
jQueryのプラグインなどを使って再現に挑戦しました。
<a href="https://sterfield.co.jp/demo/ninomiya/02/demo1.html" target="_blank" class="demo">demo</a>
&nbsp;
イージングを、<a href="http://gsgd.co.uk/sandbox/jquery/easing/" target="_blank">jquery.easing</a>のeaseOutBackで。
回転を、<a href="http://www.zachstronaut.com/posts/2009/08/07/jquery-animate-css-rotate-scale.html" target="_blank">jquery-animate-css-rotate-scale.js</a>を使ってみました。
&nbsp;
実際は、回転させてから動くようですが、
今回は逆の動きになってしまいました。
&nbsp;
また次回、近い動きを目指してみます。

Pathのアプリのメニューぽい動きをjQueryで作ってみる1

先日、弊社が入居する<a href="http://www.waseda.jp/rps/incubation/index.htm" target="_blank">早稲田大学インキュベーションセンター</a>の交流会に参加して来ました。
基本的には、入居者及び起業に関心を持つ学生限定のクローズドな会ですが、毎回ゲストをお呼びして、講演が行われます。
今回は
「IT従業者のメンタルヘルス」
という題材で早稲田大学スポーツ科学部　内田直教授によるものでした。
精神科医でもある内田先生の元に訪れる精神疾患者はIT従業者の割合が非常に高いということで、そのような現状と予防策を教えて頂きました。
まず、何故精神疾患に陥るのか簡単に説明すると、交感神経と副交感神経のバランスが崩れること。
交感神経は、緊張、副交感神経は緩和（リラックス）ですが、IT従業者は、交感神経が長時間働いている割合が多いと仰っていました。その理由として
<ul>
<li>一人への責任が大きい</li>
<li>長時間労働が多い</li>
<li>ゲーム等の趣味でもディスプレイを眺める人が多い</li>
<li>慢性的な運動不足</li>
</ul>
などがあり、その中の一つで、昨今話題のブルーライトについて言及されていました。ディスプレイから発生する光が太陽の波長に似ていて、脳が昼間だと勘違いし、交感神経系を刺激してしまい、精神疾患の一因になるだけではなく、複合的に<a href="http://www.lifehacker.jp/2011/03/110308_bed_ipad.html" target="_blank">睡眠障害</a>まで引き起こしてしまう可能性があるとのことです。
このブルーライトを抑制するメガネが流行っておりますが、同様の効果が得られるWindowsやMacのフリーソフト「<a href="http://stereopsis.com/flux/" target="_blank">F.lux</a>」を導入するとよいということを教えて頂きました。
実際に導入をすると、ディスプレイ全体が、オレンジ色にかかり、青白いが少なく、色温度が抑えられていることが実感出来ます。
また、デザイナーなど色を忠実に再現しなくてはいけないような場合には、ワンボタンで1時間動作を切るというありがたい機能も搭載しています。
エンジニアはまず、導入しておけってことですね。
&nbsp;
<h2>まとめ</h3>
&nbsp;
以上、ブルーライトを抑えるフリーソフトをご紹介しましたが、あくまで予防策の一つで何より一番は、運動をすること。その時間を作ることだと仰っていました。
&nbsp;
&nbsp;

早稲田大学教授が教える話題のブルーライトを抑えるフリーソフト「F.lux」

イラストをWebデザインに向けて製作することとなりましたが、
実際描いてみると、2012年現在のトレンドに合っておらず、 
古いイメージになってしまいました。
そのため、今回は、2012年のWebトレンドに合わせ、 
イラストの質感を上げる方法について調べてみました。
まずこちらがこれまでの方法で私がIllustratorでイラストを製作した場合。
&nbsp;
<img decoding="async" src="/uploads-archive/2012/10/illust0.jpg" alt="イラスト0" />
&nbsp;
やはり古い印象を感じさせてしまいます。
そこで今回は、色の塗り方について、次の３つの方法を試してみました。
&nbsp;
1.グラデーションを穏やかにして、ハイライトをつける。 
2.グラデーションを使わず、面で陰影をつける。 
3.直線的でない、形に合わせたグラデーションを使う。
&nbsp;
では実際にやってみましょう。
&nbsp;
1.グラデーションを穏やかにして、ハイライトをつける。
&nbsp;
こちらの方法は、こちらの本を参考にさせていただきました。 
「ウェブデザインコーディネートカタログ」技術評論社(2011) 
<a href="http://www.amazon.co.jp/%E3%82%A6%E3%82%A7%E3%83%96%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E3%82%B3%E3%83%BC%E3%83%87%E3%82%A3%E3%83%8D%E3%83%BC%E3%83%88%E3%82%AB%E3%82%BF%E3%83%AD%E3%82%B0-%E9%BB%92%E9%87%8E-%E6%98%8E%E5%AD%90/dp/4774146870">http://www.amazon.co.jp/%E3%82%A6%E3%82%A7%E3%83%96%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E3%82%B3%E3%83%BC%E3%83%87%E3%82%A3%E3%83%8D%E3%83%BC%E3%83%88%E3%82%AB%E3%82%BF%E3%83%AD%E3%82%B0-%E9%BB%92%E9%87%8E-%E6%98%8E%E5%AD%90/dp/4774146870</a>
&nbsp;
<img decoding="async" src="/uploads-archive/2012/10/illust1.jpg" alt="イラスト1" />
&nbsp;
一番時間がかかりました。 
先ほどよりは落ち着いたイメージですが、 
ハイライトのかけ方が難しく、あまりうまくいきませんでした。 
アイコン向けの方法のようです。

2.グラデーションを使わず、面で陰影をつける。
&nbsp;
こちらはの方法は、こちらのサイトに掲載されているイラストを参考にさせていただきました。 
<a href="http://dc2009.drupalcon.org/">http://dc2009.drupalcon.org/</a>
<a href="http://f-power.co.jp/appeal">http://f-power.co.jp/appeal</a>
&nbsp;
<img decoding="async" src="/uploads-archive/2012/10/illust2.jpg" alt="イラスト2" />
&nbsp;
時間は他の二つの方法の中間くらい。 
落ち着いたイメージで、影もしっかりかかっていていい感じです。
3.直線的でない、形に合わせたグラデーションを使う。
&nbsp;
こちらはの方法は、こちらのサイトに掲載されているイラストを参考にさせていただきました。
<a href="http://tou.ch/docs/about">http://tou.ch/docs/about</a>
&nbsp;
<img decoding="async" src="/uploads-archive/2012/10/illust3.jpg" alt="イラスト3" />
&nbsp;
3つの方法の中では圧倒的に早くできました。 
Illustratorの「効果」メニューのスタイライズで、 
光彩(内側)を乗算で15%の不透明度でかけただけです。
時間がかからなかった割には、落ち着いた質感あるイラストになりました。
&nbsp;
やってみた感想としましては、 
イラスト製作に必要な時間や、載せるWebサイトのデザインに合わせて、 
これらの方法を使い分けていくと、いいのではないかと思いました。

IllustratorによるWebデザインのためのイラスト質感UPを目指す

最近縦長のサイトが増えてきており、
体外そういうサイトは、ページ内リンクのスクロールに
アニメーション効果がされていることが多いかと思います。
&nbsp;
そのアニメーション効果は基本的には変わらないので、
なにか面白い動きができないものかと思い、
jQueryのプラグインの<a href="http://gsgd.co.uk/sandbox/jquery/easing/" target="_blank">jQuery Easing Plugin</a> のイージング効果を利用しよう！
と思い、いろいろと試してみました。
&nbsp;
その結果、
本家のサイトにも試せるものはありますが、
どれかひとつだけしか試せないのもなんなので、選べるようにしました。
スピードも調節できます。
&nbsp;
デモは下記リンクから
<a class="demo" href="/demo/abe/10/" target="_blank">DEMO</a>
&nbsp;
違いがわからない動きが多いですね。。。
ものによっては、ものすごい効果のもありますね?
&nbsp;
<h4>イージング効果を付ける方法を説明します。</h6>


		<div id="crayon-64953fd57d38f771442295" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover wrap" style=" margin-top: 12px; margin-bottom: 12px; font-size: 13px !important; line-height: 18px !important;">
		
			<div class="crayon-toolbar" data-settings=" mouseover overlay hide delay" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;">
			<div class="crayon-tools" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><div class="crayon-button crayon-nums-button" title="Toggle Line Numbers"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-plain-button" title="Toggle Plain Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-copy-button" title="Copy"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-popup-button" title="Open Code In New Window"><div class="crayon-button-icon"></div></div>XHTML</div></div>
			<div class="crayon-info" style="min-height: 19.5px !important; line-height: 19.5px !important;"></div>
			<div class="crayon-plain-wrap"><textarea class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 13px !important; line-height: 18px !important;">
&lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"&gt;&lt;/script&gt;
&lt;script src="js/jquery.easing.1.3.js"&gt;&lt;/script&gt;</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 13px !important; line-height: 18px !important;"><div class="crayon-num" data-line="crayon-64953fd57d38f771442295-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd57d38f771442295-2">2</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 13px !important; line-height: 18px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-64953fd57d38f771442295-1">&lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"&gt;&lt;/script&gt;</div><div class="crayon-line crayon-striped-line" id="crayon-64953fd57d38f771442295-2">&lt;script src="js/jquery.easing.1.3.js"&gt;&lt;/script&gt;</div></div></td>
					</tr>
				</table>
			</div>
		</div>


&nbsp;
基本的には、jquery.easing.1.3.jsを読み込めばOKです。
（jqueryはもちろん必要です。）
&nbsp;
あとは、アニメーションスクロールのスクリプトのanimateを以下のように設定すればOKです。


		<div id="crayon-64953fd57d393672114889" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover wrap" style=" margin-top: 12px; margin-bottom: 12px; font-size: 13px !important; line-height: 18px !important;">
		
			<div class="crayon-toolbar" data-settings=" mouseover overlay hide delay" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;">
			<div class="crayon-tools" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><div class="crayon-button crayon-nums-button" title="Toggle Line Numbers"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-plain-button" title="Toggle Plain Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-copy-button" title="Copy"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-popup-button" title="Open Code In New Window"><div class="crayon-button-icon"></div></div>JavaScript</div></div>
			<div class="crayon-info" style="min-height: 19.5px !important; line-height: 19.5px !important;"></div>
			<div class="crayon-plain-wrap"><textarea class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 13px !important; line-height: 18px !important;">
$('a[href^=#]').click(function() {
 var speed = 1000; 
 var href= $(this).attr("href");
 var target = $(href == "#" || href == "" ? 'html' : href);
 var position = target.offset().top; 
 $($.browser.safari ? 'body' : 'html').animate({scrollTop:position}, { duration: speed, easing: 'ここに効果名を入れる' });
 return false;
 });</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 13px !important; line-height: 18px !important;"><div class="crayon-num" data-line="crayon-64953fd57d393672114889-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd57d393672114889-2">2</div><div class="crayon-num" data-line="crayon-64953fd57d393672114889-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd57d393672114889-4">4</div><div class="crayon-num" data-line="crayon-64953fd57d393672114889-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd57d393672114889-6">6</div><div class="crayon-num" data-line="crayon-64953fd57d393672114889-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd57d393672114889-8">8</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 13px !important; line-height: 18px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-64953fd57d393672114889-1">$('a[href^=#]').click(function() {</div><div class="crayon-line crayon-striped-line" id="crayon-64953fd57d393672114889-2">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var speed = 1000;&nbsp;&nbsp;</div><div class="crayon-line" id="crayon-64953fd57d393672114889-3">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var href= $(this).attr("href");</div><div class="crayon-line crayon-striped-line" id="crayon-64953fd57d393672114889-4">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var target = $(href == "#" || href == "" ? 'html' : href);</div><div class="crayon-line" id="crayon-64953fd57d393672114889-5">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var position = target.offset().top; </div><div class="crayon-line crayon-striped-line" id="crayon-64953fd57d393672114889-6">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$($.browser.safari ? 'body' : 'html').animate({scrollTop:position}, { duration: speed, easing: 'ここに効果名を入れる' });</div><div class="crayon-line" id="crayon-64953fd57d393672114889-7">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return false;</div><div class="crayon-line crayon-striped-line" id="crayon-64953fd57d393672114889-8">&nbsp;&nbsp; });</div></div></td>
					</tr>
				</table>
			</div>
		</div>


&nbsp;
なにかおもしろい動きをつけるとちょっと印象には残りますよね。
これからどんどん動きのあるサイトは増えてくるとおもいますので、
その中でどれだけ「ユーザーの記憶に残る」ことができるか、
そのような工夫をしていかなければと思う今日この頃です。

jQueryのイージング効果をスクロールでいろいろ試せるデモを作ってみた

日本は成熟国として文化を高付加価値で輸出できるようになってきた。 
デジタルコンテンツのスピードが最も早いのは当然だが 
アニメやオタク文化の海外での反響にはびっくりだ。 
一節では広義でのアニメ産業の輸出額は年間5000億円を超えていると言われている。 
10年前はここまでの輸出産業になるとは予想できなかったのではないだろうか。
アニメを初めとしたサブカルチャーの発展は日本経済にとってとても良いことだと思う。 
サブカルチャーも立派な芸術分野だと思うが、一方で純粋芸術に対する関心が低いのではと最近思う。
純粋芸術の教養は、服飾品や建築、家具などへの高い付加価値を創造する。 
成熟国としての文化と組み合わせることによりブランドとなり、高い国際競争力を持つことができる。 
せっかくアニメが開いた突破口をそれだけで終わらせないためにも、 
日本もこの分野への投資をしてみてはどうかと最近思う。
優れた芸術作品は不景気に生まれやすいと言われている。 
不景気になり格差が広がると社会生活の中で順当に出世してお金を得られるという流れを前提にできなくなり、 
芸術という社会とはある種反対の分野へ夢や情熱を傾ける人が増えるからだろうか。
60年代から70年代にかけて、イギリスから始まった音楽文化は国境を超え全世界が熱狂した。 
火付け役とも言えるビートルズも50年代というイギリスの不況期に青春を過ごした労働者階級が主だった。
その少し前、世界恐慌期にアメリカで行われたニューディール政策だが、 
これにはもうひとつの側面があり、文化芸術の発展を促す計画が同時進行していたことはあまり知られていない。 
フェデラル・ワンといわれる政策で、美術、演劇、音楽など様々な純粋芸術の振興を目的としたプロジェクトが1935年から行われていた。
これは国家レベルで行われた最大規模の芸術振興のプロジェクトだ。
以下はその成果の例
・美術 
5000人~1万人が雇用され、20万点もの作品が制作され、さまざまなポスター・壁画・絵画・彫刻が作成された。 
それらの作品は公共機関や学校や病院などに飾られ、2000以上のビルの壁面を覆い、国内で最も目立つパブリック・アートがいくつも誕生した(wikipediaより)
→ 美術教養の向上により、工業製品などのパッケージデザインなどのクオリティが上がった
・演劇 
5000人~1万人強が雇用され、毎月1000回もの講演が行われ、新作1200本以上が創出された。 
公演のうち80%が無料だったとされ、フェデラル・ワンの中で最も予算を使ったプロジェクト。
→ 現在のブロードウェイミュージカルやハリウッド映画の土台となった
・音楽 
1万人~1万強が雇用され毎週5000回もの講演が行われ、新作5000曲以上が創出された。
→ 音楽の力で不景気の暗い空気を拭いモチベーションを向上させたらしい
その後の産業発展と、不景気への刺激策として有効に作用している。 
これから不景気を脱却し、高付加価値の輸出産業を育成していかなければならない今の日本には一石二鳥だ。
さらには純粋芸術の発展はインターネットの質の向上も当然見込まれる。 
まずは自治体などからこういった動きが出てくることを期待したい。と考えてみた

不景気と芸術

acebookイベントはカレンダー表示形式になって大分UIの改善がされましたが、
毎日見に行く習慣はないし、大事なあの人の誕生日をスルーしてしまったなんて経験のある人はいないですか？
&nbsp;
かくいう私もGoogleカレンダーは毎日開くけど、Facebookのイベント欄は毎日見に行かない
という人間でしたので、Googleカレンダーで見る方法はないかなぁと探しておりましたら、実現出来ることが分かりましたので、その手順をご紹介します。
&nbsp;
<h2>Facebookの設定</h3>
&nbsp;
まずは、Facebookにログインをして、左のカラムからイベントを選択します。
<a href="/uploads-archive/2013/03/d0aBpG8zZj.jpg"><img decoding="async" loading="lazy" class="alignnone size-medium wp-image-1767" alt="d0aBpG8zZj" src="/uploads-archive/2013/03/d0aBpG8zZj-300x123.jpg" width="300" height="123" srcset="/uploads-archive/2013/03/d0aBpG8zZj-300x123.jpg 300w, /uploads-archive/2013/03/d0aBpG8zZj-228x94.jpg 228w, /uploads-archive/2013/03/d0aBpG8zZj.jpg 560w" sizes="(max-width: 300px) 100vw, 300px" /></a>
最近導入された新しいカレンダーUIですが、バッチリ対応しております。
右上の歯車ボタンからエクスポートを選択します。
Export Events and Birthdaysというポップアップが上がります。
「your friends&#8217; birthdays」と「近日予定のイベント」という2つのリンクがあります。
「お友達の誕生日」と「イベント」が別々のカレンダーとして登録することが出来ます。
どちらかのリンクをクリックします。
<a href="/uploads-archive/2013/03/NMGsyPmz3Y.jpg"><img decoding="async" loading="lazy" class="alignnone size-medium wp-image-1768" alt="NMGsyPmz3Y" src="/uploads-archive/2013/03/NMGsyPmz3Y-300x125.jpg" width="300" height="125" /></a>
私のmac環境では、デフォルトでicalが立ち上がりますが、これは皆さんが設定されているカレンダーのデフォルト設定によって挙動が変わると思われます。
そして、カレンダーのURLで表示されているフォーム内のURLを全てコピーします。
&nbsp;
<h2>GoogleカレンダーでURL追加</h3>
&nbsp;
<a href="/uploads-archive/2013/03/ZID5urZZXi.jpg"><img decoding="async" loading="lazy" class="alignnone size-medium wp-image-1770" alt="ZID5urZZXi" src="/uploads-archive/2013/03/ZID5urZZXi-300x213.jpg" width="300" height="213" srcset="/uploads-archive/2013/03/ZID5urZZXi-300x213.jpg 300w, /uploads-archive/2013/03/ZID5urZZXi-228x162.jpg 228w, /uploads-archive/2013/03/ZID5urZZXi.jpg 560w" sizes="(max-width: 300px) 100vw, 300px" /></a>
&nbsp;
次にGoogleカレンダーに移動します。
他のカレンダーの右の矢印をクリックしてURLで追加を選択します。
<a href="/uploads-archive/2013/03/tmkwoVkhgB.jpg"><img decoding="async" loading="lazy" class="alignnone size-medium wp-image-1769" alt="tmkwoVkhgB" src="/uploads-archive/2013/03/tmkwoVkhgB-300x146.jpg" width="300" height="146" /></a>
&nbsp;
先程コピーした、webcal:で始まるURLを貼り付け「カレンダーを追加」を押して完了です。
&nbsp;
<h2>まとめ</h2>
いいですね。これで一元管理出来ますね。
ただし、イベントの期限を過ぎるとGoogleカレンダーから消えてしまいますので、先の予定表として利用するというようなシーンに限られますね。

Company

Our Solutions

Support

News

Blog

Blogブログ

カテゴリーから探す

年別から見る

記事一覧 - カテゴリー: 開発ナレッジ

2012/09/26

2012/09/20

2012/09/20

2012/09/19

2012/09/13

2012/09/13

2012/09/06

2012/09/06

2012/08/30

2012/08/30

2012/08/30

2012/08/22

2012/08/09

2012/08/09

2012/07/26

2012/07/18

2012/07/12

2012/07/12