<p>最近縦長のサイトが増えてきており、</p>
<p>体外そういうサイトは、ページ内リンクのスクロールに</p>
<p>アニメーション効果がされていることが多いかと思います。</p>
<p>&nbsp;</p>
<p>そのアニメーション効果は基本的には変わらないので、</p>
<p>なにか面白い動きができないものかと思い、</p>
<p>jQueryのプラグインの<a href="http://gsgd.co.uk/sandbox/jquery/easing/" target="_blank">jQuery Easing Plugin</a> のイージング効果を利用しよう！</p>
<p>と思い、いろいろと試してみました。</p>
<p>&nbsp;</p>
<p>その結果、</p>
<p>本家のサイトにも試せるものはありますが、</p>
<p>どれかひとつだけしか試せないのもなんなので、選べるようにしました。</p>
<p><strong>スピード</strong>も調節できます。</p>
<p>&nbsp;</p>
<p>デモは下記リンクから</p>
<p><a class="demo" href="/demo/abe/10/" target="_blank">DEMO</a></p>
<p>&nbsp;</p>
<p>違いがわからない動きが多いですね。。。</p>
<p>ものによっては、ものすごい効果のもありますね?</p>
<p>&nbsp;</p>
<h4><span style="font-size: medium;">イージング効果を付ける方法を説明します。</span></h6>
<p></p>

		<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;"><span class="crayon-title"></span>
			<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><span class="crayon-language">XHTML</span></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"><span class="crayon-ta">&lt;script </span><span class="crayon-e ">src</span>=<span class="crayon-s">"http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"</span><span class="crayon-h">&gt;</span><span class="crayon-ta">&lt;/script&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd57d38f771442295-2"><span class="crayon-ta">&lt;script </span><span class="crayon-e ">src</span>=<span class="crayon-s">"js/jquery.easing.1.3.js"</span><span class="crayon-h">&gt;</span><span class="crayon-ta">&lt;/script&gt;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p></p>
<p>&nbsp;</p>
<p>基本的には、<strong>jquery.easing.1.3.js</strong>を読み込めばOKです。</p>
<p>（jqueryはもちろん必要です。）</p>
<p>&nbsp;</p>
<p>あとは、アニメーションスクロールのスクリプトの<strong>animate</strong>を以下のように設定すればOKです。</p>
<p></p>

		<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;"><span class="crayon-title"></span>
			<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><span class="crayon-language">JavaScript</span></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"><span class="crayon-sy">$</span><span class="crayon-sy">(</span><span class="crayon-s">'a[href^=#]'</span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-e">click</span><span class="crayon-sy">(</span><span class="crayon-t">function</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd57d393672114889-2"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-i">speed</span><span class="crayon-h"> </span>=<span class="crayon-h"> </span><span class="crayon-cn">1000</span><span class="crayon-sy">;</span><span class="crayon-h">&nbsp;&nbsp;</span></div><div class="crayon-line" id="crayon-64953fd57d393672114889-3"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-i">href</span>=<span class="crayon-h"> </span><span class="crayon-sy">$</span><span class="crayon-sy">(</span><span class="crayon-r">this</span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-e">attr</span><span class="crayon-sy">(</span><span class="crayon-s">"href"</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd57d393672114889-4"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-i">target</span><span class="crayon-h"> </span>=<span class="crayon-h"> </span><span class="crayon-sy">$</span><span class="crayon-sy">(</span><span class="crayon-i">href</span><span class="crayon-h"> </span>==<span class="crayon-h"> </span><span class="crayon-s">"#"</span><span class="crayon-h"> </span><span class="crayon-sy">|</span><span class="crayon-sy">|</span><span class="crayon-h"> </span><span class="crayon-i">href</span><span class="crayon-h"> </span>==<span class="crayon-h"> </span><span class="crayon-s">""</span><span class="crayon-h"> </span><span class="crayon-sy">?</span><span class="crayon-h"> </span><span class="crayon-s">'html'</span><span class="crayon-h"> </span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i">href</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-64953fd57d393672114889-5"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-i">position</span><span class="crayon-h"> </span>=<span class="crayon-h"> </span><span class="crayon-i">target</span><span class="crayon-sy">.</span><span class="crayon-e">offset</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-i">top</span><span class="crayon-sy">;</span><span class="crayon-h"> </span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd57d393672114889-6"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">$</span><span class="crayon-sy">(</span><span class="crayon-sy">$</span><span class="crayon-sy">.</span><span class="crayon-i">browser</span><span class="crayon-sy">.</span><span class="crayon-i">safari</span><span class="crayon-h"> </span><span class="crayon-sy">?</span><span class="crayon-h"> </span><span class="crayon-s">'body'</span><span class="crayon-h"> </span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-s">'html'</span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-e">animate</span><span class="crayon-sy">(</span><span class="crayon-sy">{</span><span class="crayon-i">scrollTop</span><span class="crayon-sy">:</span><span class="crayon-i">position</span><span class="crayon-sy">}</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-sy">{</span><span class="crayon-h"> </span><span class="crayon-i">duration</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i">speed</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-i">easing</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-s">'ここに効果名を入れる'</span><span class="crayon-h"> </span><span class="crayon-sy">}</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-64953fd57d393672114889-7"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-st">return</span><span class="crayon-h"> </span><span class="crayon-t">false</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd57d393672114889-8"><span class="crayon-h">&nbsp;&nbsp; </span><span class="crayon-sy">}</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p></p>
<p>&nbsp;</p>
<p>なにかおもしろい動きをつけるとちょっと印象には残りますよね。</p>
<p>これからどんどん動きのあるサイトは増えてくるとおもいますので、</p>
<p>その中でどれだけ<strong>「ユーザーの記憶に残る」</strong>ことができるか、</p>
<p>そのような工夫をしていかなければと思う今日この頃です。</p>

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

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


不景気と芸術

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


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

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


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

<p>acebookイベントはカレンダー表示形式になって大分UIの改善がされましたが、</p>
<p>毎日見に行く習慣はないし、大事なあの人の誕生日をスルーしてしまったなんて経験のある人はいないですか？</p>
<p>&nbsp;</p>
<p>かくいう私もGoogleカレンダーは毎日開くけど、Facebookのイベント欄は毎日見に行かない</p>
<p>という人間でしたので、Googleカレンダーで見る方法はないかなぁと探しておりましたら、実現出来ることが分かりましたので、その手順をご紹介します。</p>
<p>&nbsp;</p>
<h2>Facebookの設定</h3>
<p>&nbsp;</p>
<p>まずは、Facebookにログインをして、左のカラムからイベントを選択します。</p>
<p><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></p>
<p>最近導入された新しいカレンダーUIですが、バッチリ対応しております。</p>
<p>右上の歯車ボタンからエクスポートを選択します。</p>
<p>Export Events and Birthdaysというポップアップが上がります。</p>
<p>「your friends&#8217; birthdays」と「近日予定のイベント」という2つのリンクがあります。</p>
<p>「お友達の誕生日」と「イベント」が別々のカレンダーとして登録することが出来ます。</p>
<p>どちらかのリンクをクリックします。</p>
<p><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></p>
<p>私のmac環境では、デフォルトでicalが立ち上がりますが、これは皆さんが設定されているカレンダーのデフォルト設定によって挙動が変わると思われます。</p>
<p>そして、カレンダーのURLで表示されているフォーム内のURLを全てコピーします。</p>
<p>&nbsp;</p>
<h2>GoogleカレンダーでURL追加</h3>
<p>&nbsp;</p>
<p><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></p>
<p>&nbsp;</p>
<p>次にGoogleカレンダーに移動します。</p>
<p>他のカレンダーの右の矢印をクリックしてURLで追加を選択します。</p>
<p><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></p>
<p>&nbsp;</p>
<p>先程コピーした、webcal:で始まるURLを貼り付け「カレンダーを追加」を押して完了です。</p>
<p>&nbsp;</p>
<h2>まとめ</h2>
<p>いいですね。これで一元管理出来ますね。</p>
<p>ただし、イベントの期限を過ぎるとGoogleカレンダーから消えてしまいますので、先の予定表として利用するというようなシーンに限られますね。</p>


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

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

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

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

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

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


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

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


人民元と基軸通貨

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


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

<p>スマホとPCを切り替えるjQueryプラグインを作っており、<br />
何かと必要かと思いまとめた。<br />
AndroidとiOSとその他、端末のユーザーエージェント一覧。</p>
<p>&nbsp;</p>
<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>


【Android】 端末 ユーザーエージェント一覧

スマートフォン対応の画像スライダー「flexslider」

[HTML5] File system API サンプル

エフェクトがかっこいい画像スライドショー &#8211; nivo slider &#8211;

<p>turn.jsというプラグインを使って、</p>
<p>コンテンツを本をめくったように遷移するページを作ってみました。</p>
<p>ちなみにHTML5でしか使用できないようです。</p>
<p>&nbsp;</p>
<p>コーポレートサイトで使用するのも特徴があっていいと思いますが、</p>
<p>電子書籍のアプリに使用できるかもしれません。</p>
<p>というか本家ではそのようなデモがありました。</p>
<p>&nbsp;</p>
<p>簡単ではありますが、デモを作成したので、</p>
<p>まずはそちらをご覧頂ければと思いますが、&nbsp;</p>
<p>IEでは見れないので、FirefoxかChromeでご覧ください。</p>
<p>四隅の角でページ送りができ、 ドラッグでページをめくるような動きもできます。</p>
<p>&nbsp;</p>
<p><a class="demo" href="/demo/abe/13/" target="_blank">DEMO</a></p>
<p>&nbsp;</p>
<h2>turn.jsの使用方法</h3>
<p>&nbsp;</p>
<p>まずは、head部分に、</p>
<p></p>

		<div id="crayon-64953fd57beda892293326" 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;"><span class="crayon-title"></span>
			<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><span class="crayon-language">XHTML</span></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/turn.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-64953fd57beda892293326-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd57beda892293326-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-64953fd57beda892293326-1"><span class="crayon-ta">&lt;script </span><span class="crayon-e ">src</span>=<span class="crayon-s">"http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"</span><span class="crayon-h">&gt;</span><span class="crayon-ta">&lt;/script&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd57beda892293326-2"><span class="crayon-ta">&lt;script </span><span class="crayon-e ">src</span>=<span class="crayon-s">"js/turn.js"</span><span class="crayon-h">&gt;</span><span class="crayon-ta">&lt;/script&gt;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p></p>
<p>&nbsp;</p>
<p>記入します。</p>
<p>&nbsp;</p>
<p>そしてhtmlは、</p>
<p></p>

		<div id="crayon-64953fd57bede856020415" 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;"><span class="crayon-title"></span>
			<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><span class="crayon-language">XHTML</span></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;div id="magazine"&gt;
　&lt;div&gt;&lt;/div&gt;
　&lt;div&gt;&lt;/div&gt;
　&lt;div&gt;&lt;/div&gt;
　&lt;div&gt;&lt;/div&gt;
　&lt;div&gt;&lt;/div&gt;
&lt;/div&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-64953fd57bede856020415-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd57bede856020415-2">2</div><div class="crayon-num" data-line="crayon-64953fd57bede856020415-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd57bede856020415-4">4</div><div class="crayon-num" data-line="crayon-64953fd57bede856020415-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd57bede856020415-6">6</div><div class="crayon-num" data-line="crayon-64953fd57bede856020415-7">7</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-64953fd57bede856020415-1"><span class="crayon-r ">&lt;div </span><span class="crayon-e ">id</span>=<span class="crayon-s ">"magazine"</span><span class="crayon-r ">&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd57bede856020415-2"><span class="crayon-i ">　</span><span class="crayon-r ">&lt;div&gt;</span><span class="crayon-r ">&lt;/div&gt;</span></div><div class="crayon-line" id="crayon-64953fd57bede856020415-3"><span class="crayon-i ">　</span><span class="crayon-r ">&lt;div&gt;</span><span class="crayon-r ">&lt;/div&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd57bede856020415-4"><span class="crayon-i ">　</span><span class="crayon-r ">&lt;div&gt;</span><span class="crayon-r ">&lt;/div&gt;</span></div><div class="crayon-line" id="crayon-64953fd57bede856020415-5"><span class="crayon-i ">　</span><span class="crayon-r ">&lt;div&gt;</span><span class="crayon-r ">&lt;/div&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd57bede856020415-6"><span class="crayon-i ">　</span><span class="crayon-r ">&lt;div&gt;</span><span class="crayon-r ">&lt;/div&gt;</span></div><div class="crayon-line" id="crayon-64953fd57bede856020415-7"><span class="crayon-r ">&lt;/div&gt;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p></p>
<p>&nbsp;</p>
<p>奇数番目が、右側のページ(1番目は表紙)で、</p>
<p>偶数番目が、左側のページになります。</p>
<p>&nbsp;</p>
<p>最後が重要なのですが、bodyの閉じタグの直前に、</p>
<p>&nbsp;</p>
<p></p>

		<div id="crayon-64953fd57bee0207369303" 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;"><span class="crayon-title"></span>
			<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><span class="crayon-language">JavaScript</span></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&gt;
  $('#magazine').turn();
&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-64953fd57bee0207369303-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd57bee0207369303-2">2</div><div class="crayon-num" data-line="crayon-64953fd57bee0207369303-3">3</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-64953fd57bee0207369303-1"><span class="crayon-ta">&lt;script&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd57bee0207369303-2"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-sy">$</span><span class="crayon-sy">(</span><span class="crayon-s">'#magazine'</span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-e">turn</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-64953fd57bee0207369303-3"><span class="crayon-ta">&lt;/script&gt;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p></p>
<p>&nbsp;</p>
<p>を入れるだけです。</p>
<p>&nbsp;</p>
<p>要はコンテンツの後に記述しないと動きません。</p>
<p>ここは気をつけて下さい。</p>
<p>&nbsp;</p>
<p>デモでもこれしか記述してませんが、オプションがあります。</p>
<p>また、自分で作ることになりますが、javascriptで</p>
<p>ページ数を表示したり、メニューをつけたりできるようです。&nbsp;</p>
<p>今回そこまで余裕がなかったので、</p>
<p>割愛させていただきました。</p>
<p>&nbsp;</p>
<p>海外のサイトですがメニュー付きのデモは以下になります。</p>
<p><a href="http://www.turnjs.com/" target="_blank">http://www.turnjs.com/</a></p>
<p>&nbsp;</p>
<p>冒頭で紹介した、電子書籍のデモは以下になります。</p>
<p><a href="/demo/abe/13/magazine/" target="_blank">電子書籍のようなページ</a></p>
<p>&nbsp;</p>
<p>IEとか気にせず作れるようになりたいですね！</p>

Company

Our Solutions

Support

News

Blog

Blogブログ

カテゴリーから探す

年別から見る

記事一覧 - 2012年

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

2012/06/12

2012/06/07

2012/05/31

2012/05/31

2012/05/24

2012/05/17