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

2012/05/10

2012/05/03

2012/04/26