イラストチックな、絵本テイストのサイトデザインをすることになったので、
どういったデザインにしたらよいのか参考にするために、
絵本テイストのサイトを探してみました。
&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カレンダーから消えてしまいますので、先の予定表として利用するというようなシーンに限られますね。

FacebookイベントをGoogleカレンダーと同期する方法

ECサイトで使えそうな写真をズームできるjQuery &#8211; Cloud Zoom &#8211;

スクロールに応じてコンテンツにエフェクト効果をつける　- scrolldeck &#8211;

2012年7月5日 Facebook 仕様変更 和訳 (Change Log)

スクロールバーを上下左右どこでも出せるJqueryプラグイン

複数のFacebookページを統合する方法のメモ。
オフィシャルで作ったけど誰かが別で作っていたり、 
コンセプトを変えて新たに作成した場合などに便利。
手順は以下の通り。
1. 自分が管理者のFacebookページのトップへ行く 
2. ページ上部の「Facebookページを編集」→ 「基本データを編集」をクリック 
3. 左サイド「リソース」をクリック 
4. 「重複しているページを統合」クリック
ここでつまずく場合が多い。 
「重複しているページを統合」というリンクが出ない場合は以下を確認してほしい。 
a. それぞれのFacebookページは住所が同じでなければならない 
b. いいねが多い方から少ない方を吸収しなければならない 
c. Facebookページ名がかなり似ていなければならない
cがわかりづらいと思う。 
しかも、全く同じページ名にすると 
&#8220;自動システムではその名前は認められません。「hogehoge」をご検討ください。&#8221; 
というエラーが出るはずだ。
その時は、ほどよいところにスペースを入れるとよい。
そうすると「重複しているページを統合」が表示されるはず。 
あとは手順に従えば一件落着

複数のFacebookページを統合する方法

webサイトの制作をしていて、
気をつけなければいけないのが、
すべてのブラウザに対応させなければいけないということ。
&nbsp;
どのブラウザで見ても同じようにサイトがみえてないといけないし、
あるブラウザで見れなくなってしまうと、
そのブラウザを使用しているユーザーにとっては、
そのサイトは見るのに、値しないサイトいになってしまう可能性があります。
&nbsp;
そのような概念を「クロスブラウザ」といい、サイト制作において前提にあるものでした。
まぁweb業界には基本的な話ですが、お客さんからすると、
ブラウザっていくつもあることも知らない人もいるし、
そもそもブラウザってなんだって言う人もいます。
&nbsp;
ですので、基本的に受注案件では、すべてのブラウザに対応しなければいけないことが大半です。
お客さん的にも、見れないユーザーがいるとそれだけで機械損失になる恐れがあるので、
避けたいところではあります。
&nbsp;
しかし、どんどん技術・表現が新しくなっていくなかで、
古いブラウザ、新しいブラウザで機能面に差がでています。
古いブラウザだと、最新の表現ができなかったり、対応させるのがとても難しい場合があります。
特にIE6とかだと非常に制限されていて、困りもんです。
&nbsp;
そこで、けっこう前から提唱されているのが、
「プログレッシブ・エンハンスメント」 という概念です。
&nbsp;
どういうものかというと、
「どのユーザーにも同じように情報コンテンツを提供しますが、環境が整っているユーザー（モダンブラウザ利用者）には、よりリッチな見せ方でコンテンツを提供する」
ということです。
つまり、ブラウザ間において見え方が変わってもいいじゃないかということです。
例えばcss3やhtml5を使用するといったような。
&nbsp;
ただし、古いブラウザでも問題なく情報を受け取れるようにしないといけない、
というのは大前提です。
&nbsp;
まったくコンテンツが見れなかったり、レイアウトが崩れていたりというのはダメということですね。
&nbsp;
ですので、現段階では、css3を利用して、角丸にしたり、シャドウをつけたり、
といった 表現を新しいブラウザでするといったところでしょうか。
&nbsp;
主にそれらがわかるサイトでいうと、
<a href="https://twitter.com/" target="_blank">twitter</a>や<a href="http://www.youtube.com/" target="_blank">youtube</a>等です。
古いブラウザでも問題なく見れます。
新しいブラウザだと、表現（デザイン）が豊かに見えます。
&nbsp;
とはいえ、お客さんからすると「全部同じような見た目にしてよ」という方もいらっしゃるかもしれません。
そこは応相談ですね。
&nbsp;
制作側のメリットははっきりとわかりますが、
お客さんにとっては手抜きと取られるかもしれません。
&nbsp;
この考え方、僕は非常に好きですが、今後どうなることやら・・・
&nbsp;
そのうちie6もなくなり楽になりますが、 まだまだieはやっかいです。
&nbsp;
参考資料：
<a href="http://www.atmarkit.co.jp/fwcr/design/tool/ichigeki15/01.html">「どのユーザーにも同じように情報コンテンツを提供しますが、環境が整っているユーザー（モダンブラウザ利用者）には、よりリッチな見せ方でコンテンツを提供しましょう」</a>

プログレッシブ・エンハンスメントってなに？

スマホとPCを切り替えるjQueryプラグインを作っており、 
何かと必要かと思いまとめた。 
AndroidとiOSとその他、端末のユーザーエージェント一覧。
&nbsp;
<table cellspacing="0" cellpadding="0">
<tbody>
<tr>
<th>OS</th>
<th>キャリア</th>
<th>発売日</th>
<th>機種名</th>
<th>照合条件</th>
</tr>
<tr>
<td rowspan="123">Android</td>
<td rowspan="61">DoCoMo</td>
<td rowspan="18">2012.4 ~</td>
<td>MEDIAS X N-07D</td>
<td>N-07D</td>
</tr>
<tr>
<td>Optimus it L-05D</td>
<td>L-05D</td>
</tr>
<tr>
<td>Xperia SX SO-05D</td>
<td>SO-05D</td>
</tr>
<tr>
<td>F-09D ANTEPRIMA</td>
<td>F-09D</td>
</tr>
<tr>
<td>ARROWS Me F-11D</td>
<td>F-11D</td>
</tr>
<tr>
<td>ELUGA V P-06D</td>
<td>P-06D</td>
</tr>
<tr>
<td>AQUOS PHONE st SH-07D</td>
<td>SH-07D</td>
</tr>
<tr>
<td>GALAXY S III SC-06D</td>
<td>SC-06D</td>
</tr>
<tr>
<td>ARROWS X F-10D</td>
<td>F-10D</td>
</tr>
<tr>
<td>AQUOS PHONE sv SH-10D</td>
<td>SH-10D</td>
</tr>
<tr>
<td>REGZA Phone T-02D</td>
<td>T-02D</td>
</tr>
<tr>
<td>Optimus Vu L-06D</td>
<td>L-06D</td>
</tr>
<tr>
<td>L-06D JOJO</td>
<td>L-06D</td>
</tr>
<tr>
<td>AQUOS PHONE ZETA SH-09D</td>
<td>SH-09D</td>
</tr>
<tr>
<td>ELUGA power P-07D</td>
<td>P-07D</td>
</tr>
<tr>
<td>Xperia GX SO-04D</td>
<td>SO-04D</td>
</tr>
<tr>
<td>らくらくスマートフォン（F-12D）</td>
<td>F-12D</td>
</tr>
<tr>
<td>SH-06D NERV</td>
<td>SH-06D</td>
</tr>
<tr>
<td rowspan="26">2011.8 ~ 2012.4</td>
<td>GALAXY Note SC-05D</td>
<td>SC-05D</td>
</tr>
<tr>
<td>P-04D</td>
<td>P-04D</td>
</tr>
<tr>
<td>AQUOS PHONE SH-06D</td>
<td>SH-06D</td>
</tr>
<tr>
<td>Disney Mobile on docomo F-08D</td>
<td>F-08D</td>
</tr>
<tr>
<td>Disney Mobile on docomo P-05D</td>
<td>P-05D</td>
</tr>
<tr>
<td>MEDIAS ES N-05D</td>
<td>N-05D</td>
</tr>
<tr>
<td>Xperia NX SO-02D</td>
<td>SO-02D</td>
</tr>
<tr>
<td>Xperia acro HD SO-03D</td>
<td>SO-03D</td>
</tr>
<tr>
<td>PRADA phone by LG L-02D</td>
<td>L-02D</td>
</tr>
<tr>
<td>MEDIAS LTE N-04D</td>
<td>N-04D</td>
</tr>
<tr>
<td>GALAXY S II LTE SC-03D</td>
<td>SC-03D</td>
</tr>
<tr>
<td>ARROWS X LTE F-05D</td>
<td>F-05D</td>
</tr>
<tr>
<td>Optimus LTE L-01D</td>
<td>L-01D</td>
</tr>
<tr>
<td>ARROWS μ F-07D</td>
<td>F-07D</td>
</tr>
<tr>
<td>MEDIAS PP N-01D</td>
<td>N-01D</td>
</tr>
<tr>
<td>GALAXY NEXUS SC-04D</td>
<td>SC-04D</td>
</tr>
<tr>
<td>ARROWS kiss F-03D</td>
<td>F-03D</td>
</tr>
<tr>
<td>REGZA Phone T-01D</td>
<td>T-01D</td>
</tr>
<tr>
<td>F-03D Girls’</td>
<td>F-03D</td>
</tr>
<tr>
<td>Q-pot.Phone SH-04D</td>
<td>SH-04D</td>
</tr>
<tr>
<td>AQUOS PHONE SH-01D</td>
<td>SH-01D</td>
</tr>
<tr>
<td>AQUOS PHONE slider SH-02D</td>
<td>SH-02D</td>
</tr>
<tr>
<td>LUMIX Phone P-02D</td>
<td>P-02D</td>
</tr>
<tr>
<td>P-01D</td>
<td>P-01D</td>
</tr>
<tr>
<td>Xperia PLAY SO-01D</td>
<td>SO-01D</td>
</tr>
<tr>
<td>Xperia ray SO-03C</td>
<td>SO-03C</td>
</tr>
<tr>
<td rowspan="17">2009.7 ~ 2011.8</td>
<td>MEDIAS WP N-06C</td>
<td>N-06C</td>
</tr>
<tr>
<td>Xperia acro SO-02C</td>
<td>SO-02C</td>
</tr>
<tr>
<td>GALAXY S II SC-02C</td>
<td>SC-02C</td>
</tr>
<tr>
<td>P-07C</td>
<td>P-07C</td>
</tr>
<tr>
<td>F-12C</td>
<td>F-12C</td>
</tr>
<tr>
<td>AQUOS PHONE f SH-13C</td>
<td>SH-13C</td>
</tr>
<tr>
<td>Optimus bright L-07C</td>
<td>L-07C</td>
</tr>
<tr>
<td>AQUOS PHONE SH-12C</td>
<td>SH-12C</td>
</tr>
<tr>
<td>Xperia arc SO-01C</td>
<td>SO-01C</td>
</tr>
<tr>
<td>MEDIAS N-04C</td>
<td>N-04C</td>
</tr>
<tr>
<td>Optimus chat L-04C</td>
<td>L-04C</td>
</tr>
<tr>
<td>REGZA Phone T-01C</td>
<td>T-01C</td>
</tr>
<tr>
<td>LYNX 3D SH-03C</td>
<td>SH-03C</td>
</tr>
<tr>
<td>GALAXY S SC-02B</td>
<td>SC-02B</td>
</tr>
<tr>
<td>LYNX SH-10B</td>
<td>SH-10B</td>
</tr>
<tr>
<td>Xperia SO-01B</td>
<td>SO-01B</td>
</tr>
<tr>
<td>HT-03A</td>
<td>HT-03A</td>
</tr>
<tr>
<td rowspan="32">AU</td>
<td rowspan="6">2012.4 ~</td>
<td>AQUOS PHONE SERIE ISW16SH</td>
<td>ISW16SH</td>
</tr>
<tr>
<td>ARROWS Z ISW13F</td>
<td>ISW13F</td>
</tr>
<tr>
<td>URBANO PROGRESSO</td>
<td>URBANO PROGRESSO</td>
</tr>
<tr>
<td>AQUOS PHONE SL IS15SH</td>
<td>IS15SH</td>
</tr>
<tr>
<td>AQUOS PHONE CL IS17SH</td>
<td>IS17SH</td>
</tr>
<tr>
<td>HTC J ISW13HT</td>
<td>ISW13HT</td>
</tr>
<tr>
<td rowspan="13">2011.10 ~ 2012.4</td>
<td>Xperia acro HD IS12S</td>
<td>IS12S</td>
</tr>
<tr>
<td>INFOBAR C01</td>
<td>INFOBAR C01</td>
</tr>
<tr>
<td>MOTOROLA RAZR IS12M</td>
<td>IS12M</td>
</tr>
<tr>
<td>GALAXY SII WiMAX ISW11SC</td>
<td>ISW11SC</td>
</tr>
<tr>
<td>Optimus X IS11LG</td>
<td>IS11LG</td>
</tr>
<tr>
<td>AQUOS PHONE IS14SH</td>
<td>IS14SH</td>
</tr>
<tr>
<td>ARROWS ES IS12F</td>
<td>IS12F</td>
</tr>
<tr>
<td>MEDIAS BR IS11N</td>
<td>IS11N</td>
</tr>
<tr>
<td>ARROWS Z ISW11F</td>
<td>ISW11F</td>
</tr>
<tr>
<td>DIGNO ISW11K</td>
<td>ISW11K</td>
</tr>
<tr>
<td>htc EVO 3D ISW12HT</td>
<td>ISW12HT</td>
</tr>
<tr>
<td>MOTOROLA PHOTON ISW11M</td>
<td>ISW11M</td>
</tr>
<tr>
<td>AQUOS PHONE IS13SH</td>
<td>IS13SH</td>
</tr>
<tr>
<td rowspan="13">2010.6 ~ 2011.9</td>
<td>MIRACH IS11PT</td>
<td>IS11PT</td>
</tr>
<tr>
<td>Xperia acro IS11S</td>
<td>IS11S</td>
</tr>
<tr>
<td>INFOBAR A01</td>
<td>INFOBAR A01</td>
</tr>
<tr>
<td>G’zOne IS11CA</td>
<td>IS11CA</td>
</tr>
<tr>
<td>AQUOS PHONE IS11SH</td>
<td>IS11SH</td>
</tr>
<tr>
<td>AQUOS PHONE IS12SH</td>
<td>IS12SH</td>
</tr>
<tr>
<td>REGZA Phone IS11T</td>
<td>IS11T</td>
</tr>
<tr>
<td>htc EVO WiMAX ISW11HT</td>
<td>ISW11HT</td>
</tr>
<tr>
<td>SIRIUSα IS06</td>
<td>IS06</td>
</tr>
<tr>
<td>IS05</td>
<td>IS05</td>
</tr>
<tr>
<td>REGZA Phone IS04</td>
<td>IS04</td>
</tr>
<tr>
<td>IS03</td>
<td>IS03</td>
</tr>
<tr>
<td>IS01</td>
<td>IS01</td>
</tr>
<tr>
<td rowspan="30">Softbank</td>
<td rowspan="4">2012.4 ~</td>
<td>AQUOS PHONE 102SHII</td>
<td>102SHII</td>
</tr>
<tr>
<td>AQUOS PHONE Xx 106SH</td>
<td>106SH</td>
</tr>
<tr>
<td>ARROWS A 101F</td>
<td>101F</td>
</tr>
<tr>
<td>PANTONE 5 107SH</td>
<td>107SH</td>
</tr>
<tr>
<td rowspan="19">2011.6 ~ 2012.4</td>
<td>SoftBank 102P</td>
<td>102P</td>
</tr>
<tr>
<td>MEDIAS CH 101N</td>
<td>101N</td>
</tr>
<tr>
<td>AQUOS PHONE 102SH</td>
<td>102SH</td>
</tr>
<tr>
<td>AQUOS PHONE 103SH</td>
<td>103SH</td>
</tr>
<tr>
<td>AQUOS PHONE 104SH</td>
<td>104SH</td>
</tr>
<tr>
<td>AQUOS PHONE THE HYBRID 101SH</td>
<td>101SH</td>
</tr>
<tr>
<td>LUMIX Phone 101P</td>
<td>101P</td>
</tr>
<tr>
<td>HONEY BEE 101K</td>
<td>101K</td>
</tr>
<tr>
<td>STAR7 009Z</td>
<td>009Z</td>
</tr>
<tr>
<td>DELL Streak Pro 101DL</td>
<td>101DL</td>
</tr>
<tr>
<td>Vision 007HW</td>
<td>007HW</td>
</tr>
<tr>
<td>Yahoo! Phone 009SH Y</td>
<td>SBM009SH</td>
</tr>
<tr>
<td>007SH KT</td>
<td>007SH</td>
</tr>
<tr>
<td>AQUOS PHONE THE PREMIUM 009SH</td>
<td>SBM009SH</td>
</tr>
<tr>
<td>シンプルスマートフォン 008Z</td>
<td>008Z</td>
</tr>
<tr>
<td>AQUOS PHONE THE HYBRID 007SH J</td>
<td>007SH</td>
</tr>
<tr>
<td>Sweety 003P</td>
<td>003P</td>
</tr>
<tr>
<td>AQUOS PHONE THE HYBRID 007SH</td>
<td>007SH</td>
</tr>
<tr>
<td>AQUOS PHONE 006SH</td>
<td>006SH</td>
</tr>
<tr>
<td rowspan="7">2010.4 ~ 2011.2</td>
<td>GALAPAGOS 005SH</td>
<td>005SH</td>
</tr>
<tr>
<td>Libero 003Z</td>
<td>003Z</td>
</tr>
<tr>
<td>DELL Streak 001DL</td>
<td>001DL</td>
</tr>
<tr>
<td>GALAPAGOS 003SH</td>
<td>003SH</td>
</tr>
<tr>
<td>HTC Desire HD 001HT</td>
<td>001HT</td>
</tr>
<tr>
<td>Desire X06HTII（X06HT）</td>
<td>X06HT</td>
</tr>
<tr>
<td>SoftBank 004HW</td>
<td>004HW</td>
</tr>
<tr>
<td rowspan="3">iOS</td>
<td rowspan="3">&#8211;</td>
<td rowspan="3">&#8211;</td>
<td>iPhone</td>
<td>iPhone</td>
</tr>
<tr>
<td>iPad</td>
<td>iPad</td>
</tr>
<tr>
<td>iPod</td>
<td>iPod</td>
</tr>
<tr>
<td rowspan="5">その他</td>
<td rowspan="5">&#8211;</td>
<td rowspan="5">&#8211;</td>
<td>DIGNO DUAL WX04K</td>
<td>WX04K</td>
</tr>
<tr>
<td>DM012SH</td>
<td>DM012SH</td>
</tr>
<tr>
<td>DM010SH</td>
<td>DM010SH</td>
</tr>
<tr>
<td>DM011SH</td>
<td>DM011SH</td>
</tr>
<tr>
<td>DM009SH</td>
<td>DM009SH</td>
</tr>
</tbody>
</table>

Company

Our Solutions

Support

News

Blog

Blogブログ

カテゴリーから探す

年別から見る

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

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

2012/07/05

2012/06/21

2012/06/14

2012/06/12

2012/06/07

2012/05/31

2012/05/31