【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曲以上が創出された。
→ 音楽の力で不景気の暗い空気を拭いモチベーションを向上させたらしい
その後の産業発展と、不景気への刺激策として有効に作用している。 
これから不景気を脱却し、高付加価値の輸出産業を育成していかなければならない今の日本には一石二鳥だ。
さらには純粋芸術の発展はインターネットの質の向上も当然見込まれる。 
まずは自治体などからこういった動きが出てくることを期待したい。と考えてみた

不景気と芸術

ファーストサーバーの大規模障害事故から2ヶ月がたとうとしているが、まだ余波がおさまらない。 
ファーストサーバショックたる言葉まで現れ始めている。 
更には信頼性の高いとされていたEC2まで大規模な障害があり、 
クラウドと呼ばれるものに対する信頼がここ2ヶ月で急激に失墜している。
そもそも、レンタルサーバーは安すぎると思っている。 
ハードの性能が上がり5年前の上位プランと同等のサービスが 
今では下位プランで利用できるようになっている。
ユーザーとしてはありがたいが、サーバーの需要が今後劇的に増えるとも思えない。 
サーバー会社としては付加価値での差別化が難しく、価格競争に陥っている感がある。 
価格競争に陥れば十分な設備投資ができず管理への費用もかけられない。
国内のIT市場は今や13兆円規模と今や日本を支える産業になりつつある。 
特に通信を要するビジネスにおいてサーバーは&#8221;土台&#8221;であり 
これの安全性は国として担保しなければ、今後の発展に支障がでる。
今回の件は、需要が一巡した今風紀を整える必要があるという警告だったのかもしれない。
まずは評価基準を作ること。次に利用者を教育すること。 
そうすれば 
・業者は付加価値を見出しやすくなる 
・利用者は意図するサービスを選びやすくなる
全体としてはリスクが明確化されることにより 
若年層や高齢者等など利用者層の拡大につながるかもしれない。
顧客情報を扱うような重要な基幹システムの利用者は 
高付加価値のサーバーを選定すればよいし、逆にスタートアップのベンチャーや学生は 
リスクが高いサーバーでリスクヘッジを内製することでコストを下げれば良い。
今は両者のサーバーがごっちゃになっておりわかりづらい。
そこで、一利用者として評価基準を考えてみた。
1. 安全性と管理、運用体制による5段階の評価 
第三者評価機関によるレーティング。 
バックアップ体制や障害対策、復旧スピードなどをサービスごとに 
A1、A2、A3、B、Cの5段階で厳正に調査し、業者はこれを明記する。
2. サポートの範囲 
以下の3つの基準によりサポート体制を明記する。
・代行サポート 
各種設定やインストールなどを業者が行なってくれる
・テクニカルサポート 
電話若しくはにて各種設定やインストール方法を教えてもらえる
・標準サポート 
自動若しくは標準でインストール可能な機能が整備されている
3. サーバーの種類 
・共有サーバー 
・VPS 
・専用 
・クラウド
4. 利用できる機能とその利用方法 
webサーバーや言語、SSLなど何が利用できて 
利用にあたってユーザーはどのような手続きが必要かを明記
5. 処理能力と記憶容量
6. 実測ベースでの処理速度 
利用者の増減にかかわらず最低限担保される速度
7. セキュリティ対策と利用範囲 
どのようなセキュリティ対策が行われているかと 
ユーザーがどのような手続きによりどういったセキュリティ対策を利用できるか
以上の7点。 
第三者機関は 
・2~7の内容が現行のトレンドからして最適か 
・長期安定運用を可能にする耐性か 
・万が一の際最良の復旧措置が取れるか 
を判断して1の評価をつける。 
更新は年1回。
というのが理想だ。
何はともあれ、サーバー会社は利用者に&#8221;継続して安定的&#8221;に 
サービスを運用できるようにする責任がある。 
欲を言えば利用者との距離を縮め、レンタルサーバーをより身近な存在にしてほしい。 
それがITリテラシーの向上と市場発展に繋がるからだ。
・サーバー会社は付加価値を高め収益を確保し更なる安全性と利用価値の拡大を 
・利用者はリスクの明確化により最適な選択と利用者層の拡大を
そのための整備が今、必要だと思う

レンタルサーバーに国が評価基準と利用者教育を。ファーストサーバショックから考える

先日とある会社のグローバル人材採用セミナーなるものに参加してまいりましたので、簡単に情報を共有します。
核心に触れるというよりは、散在しているマーケットデータ関連がよくまとまっており、理解を深めることが出来ました。
<h2>日本からアジアへ</h3>
冒頭からいきなりアジアへと言及されておりました。グローバル人材ということで、英語圏を含めた想像をしていたのですが、もっぱらアジアについてでした。
&nbsp;
<h3>グローバル人材採用の現状</h4>
<ol>
<ul>
<li>企業を取り巻く環境の二大変化</li>
<li>経済のグローバル化</li>
<li>少子高齢化の進展</li>
</ul>
</ol>
&nbsp;
<h3>アジアの消費動向</h4>
<ol>
<ol>
<li>2009年　EU30％、米国21％、日本9％、中国4％、インド2％、その他アジア9、その他25％</li>
<li>2020年　EU14％、米国7％、日本4％、中国18％、インド23％、その他アジア14％、その他20%</li>
</ol>
</ol>
→インド、中国、インドネシアが著しく成長
<h2>経済周期</h3>
<ul>
<li>1992年バブル崩壊</li>
<li>2000年ITバブル崩壊</li>
<li>2008年リーマンショック</li>
</ul>
→8年周期の景気悪化。2016年を既に意識している経営者が多い。
<ul>
<li>2050年の労働人口：高齢者数比率12:10</li>
</ul>
<h2>加速するアジア進出</h3>
中国本土＋香港の現地法人
01年→09年　6000社から12000社
あくまで登記上の話し。登記をしていない支社、法人を含めると数倍。
ASEAN、NIESも同様。
<h3>グローバル人材の獲得方法</h4>
<ul>
<li>専門知識</li>
<li>語学力</li>
<li>異文化適応力</li>
</ul>
を獲得するために
<ul>
<li>技術研修/資格取得補助</li>
<li>経営セミナー/ケーススタディ</li>
<li>語学スクール/語学研修</li>
<li>海外プロジェクトでのOJT</li>
<li>現地文化、商習慣の勉強会</li>
</ul>
<h2>外国人労働者雇用は増加傾向</h3>
大手の例
<ul>
<li>イオングループ　10000人</li>
<li>ユニクロ　990人</li>
<li>ソニー　3割</li>
<li>味の素　1割</li>
<li>NTTデータ　1割</li>
</ul>
実は、中小企業の人材活用が活発
<div>現地採用→日本配属が最近のトレンド</div>
<div></div>
<h3>日本企業の優位性</h4>
<ol>
<li>給与格差</li>
<li>アジアからの人気</li>
</ol>
<h3>グローバル人材の育成、採用</h4>
<ul>
<li>国内留学生紹介サービス</li>
<li>現地個別企業説明会・選考会</li>
<li>現地合同企業説明会・選考会</li>
</ul>
<h2>まとめ</h3>
言わずと知れた熱いアジアの再認識といったところです。

グローバル人材の雇用について

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ページを統合する方法

今月1日から円と人民元の直接取引が開始された。 
現時点での商いはまあまあ順調であり、今後に期待が持てる状況ではある。
アメリカが賛成するはずもなく、よく踏み切れたと感心。
私は国際競争力を失った大手主体の大量生産大量消費の産業体型を解体し、 
技術やノウハウを持った中小企業がそれぞれの付加価値を見出し 
個々に海外(特にアジア)に出るべくビジネスをしている。
そんな中、今回の人民元直接取引は国として、 
アジアとの貿易インフラの拡大を目指すという意味で大きな一歩だと思う。
本題の「人民元と基軸通貨 」についてだが、 
今回の件で人民元が基軸通貨の世界というものが、私見としてかなり現実的に見えてきた。
その裏付けの意味も含め以下これまでの基軸通貨の歴史を整理した。
1：英ポンド 
期間：19世紀半ば ~ 20世紀初頭 
背景： 
世界初の産業革命国という圧倒的経済力に加え、 
強固な軍事力により世界中に領土を持つ。 
→ 世界広範囲の取引にポンド利用に加え、金本位制を最初に導入
2：米ドル 
期間：20世紀半ば ~ 現在 
背景： 
一次大戦での英国力低下、米の急成長。 
1944年IMF設立により米ドルが基軸通貨に。
英ポンドから米ドルへの移行は1920年~1940年代にかけて行われ、 
1944年7月のIMF設立により確立されたとされている。
ポンドが基軸となった日時は明確ではないが、 
仮に1950年とすると70年~90年前後の間で移行が進み、 
100年以内には移行されたということになる。
そう考えるとあと2~3年のうちに移行が始まるかもしれない。
事実、アメリカの経済状況は芳しくない。 
製造業の衰退、軍事費の削減、ドルの弱体化など 
特に対中国の発展において脅威となる分野での良いニュースを聞かない。
更に、世界銀行は昨年「2025年に人民元が世界の基軸通貨の一つになる」という報告書を出している。
これは暗に米ドルと人民元が2大基軸になるということだ。 
これはかなり現実的な話だ。 
むしろこれは日本にとって理想的な形かもしれない。 
アメリカとの関係を保ちつつ人民元を介してアジアとの貿易を優先的に行える。
アメリカの出方、中国の情勢を考えるとまだどうなるかわからない。 
しかし人民元が強くなることは間違いない。 
さらに取引をアジア内でできることは中国のみならずアジア進出においてとてもプラスになる。
アジア向けECを推進している私としては、 
これを機に、アジア間貿易における物流、金融面での障壁の低減を期待したい。

人民元と基軸通貨

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>

Company

Our Solutions

Support

News

Blog

Blogブログ

カテゴリーから探す

年別から見る

記事一覧

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/08/02

2012/07/30

2012/07/26

2012/07/18

2012/07/12

2012/07/12

2012/07/05

2012/06/21

2012/06/21

2012/06/14