<p>今年の春からクロネコヤマトで「ネコポス」と「宅配便コンパクト」という新しいサービスがはじまりました。運営しているＥＣサイトでは今まで他の配送業者を利用して商品を発送していましたが、最近「ネコポス」の利用を開始したので送り状の作り方をまとめてみました。</p>
<p>これから説明する送り状の作成方法は「ヤマトビジネスメンバーズ」に登録が必要になります。ヤマトビジネスメンバーズは法人が対象のサービスです詳しくはこちらで確認してください。<a href="https://bmypage.kuronekoyamato.co.jp/bmypage/serviceGuide_beforeLGI.html">https://bmypage.kuronekoyamato.co.jp/bmypage/serviceGuide_beforeLGI.html</a></p>
<p>ネコポスの送り状作成にはインストール型の「<a href="http://www.kuronekoyamato.co.jp/newb2/newb2.html">送り状発行ソフトＢ２</a>」とクラウド型の「Ｂ２web」があります、今回はＢ２webの方で送り状を作成します。</p>
<h3>ヤマトビジネスメンバーズにログインする</h3>
<p>まずはヤマトビジネスメンバーズにログインします。お客様コードとパスワードは契約完了後に担当の営業所からもらえます。</p>
<p><a href="/uploads-archive/2015/05/nekopos1.gif"><img decoding="async" loading="lazy" class="alignnone  wp-image-7349" src="/uploads-archive/2015/05/nekopos1.gif" alt="nekopos1" width="625" height="231" /></a></p>
<p>ログインが完了すると次のような画面になります。</p>
<p><a href="/uploads-archive/2015/05/nekopos2.gif"><img decoding="async" loading="lazy" class="alignnone  wp-image-7351" src="/uploads-archive/2015/05/nekopos2.gif" alt="nekopos2" width="624" height="353" /></a></p>
<p>送り状発行システムＢ２webのを開いてください。カーソルを上にのせるとポップアップが出るので利用するを選択して下さい。すると下のような画面になります。</p>
<p>この画面で送り状を作成したり、送り状番号のデータを出力したりします。</p>
<p><a href="/uploads-archive/2015/05/nekopos3.gif"><img decoding="async" loading="lazy" class="alignnone  wp-image-7352" src="/uploads-archive/2015/05/nekopos3.gif" alt="nekopos3" width="623" height="370" /></a></p>
<p>&nbsp;</p>
<h3>B2webに届け先のデータを取り込む</h3>
<p>つづいて届け先の名前、住所、電話番号などのデータをB2webに取り込みます。（※送り状を一枚ずつ作成する場合は「個別発行」から操作して下さい。）</p>
<p>「外部データ取込み」をクリックします、すると取り込むデータの紐付けを行う画面が出てきます。</p>
<p><a href="/uploads-archive/2015/05/nekopos4.gif"><img decoding="async" loading="lazy" class="alignnone  wp-image-7354" src="/uploads-archive/2015/05/nekopos4.gif" alt="nekopos4" width="624" height="480" /></a></p>
<p>&nbsp;</p>
<p>取り込むデータが既にB2用に整えられていない場合は、まず取込パターンで「新規レイアウト」を選択し項目の紐付けを行います。</p>
<p>データ形式は取り込むデータの形式を確認してください。yahooや楽天などモールの場合はほとんどがCSV形式になっていると思います。</p>
<p>データの紐付けは以下の項目が必須になっています。</p>
<p>・出荷予定日</p>
<p>・送り状種別</p>
<p>・お届け先電話番号</p>
<p>・お届け先名</p>
<p>・お届け先郵便番号</p>
<p>・お届け先住所</p>
<p>・ご請求先顧客コード※</p>
<p>・運賃管理番号※</p>
<p>ここで「ご請求先顧客コード」と「運賃管理番号」はB2web上で必須と表示されていませんが必ず入力が必要になります。この２つは紐付けではなく固定値を入力した方が良さそうです。</p>
<p>「ご請求先顧客コード」はログインした際のお客様コードと同じ文字列が入り、「運賃管理番号」は通常「01」となりますが念のため担当の営業所に確認してください。</p>
<p>そして「送り状種別」ですが配送方法によって番号が決められています。ネコポスの場合は「７」になります。これも固定値で入力するか、もしくはCSVを出力する側で調整して下さい。</p>
<p>ちなみに「レイアウト項目」の「記事」にモールの注文番号を紐付けておくと、複数のモールを運営している場合送り状を見ただけでモールが判断できるので便利です。</p>
<p><a href="/uploads-archive/2015/05/nekopos5.gif"><img decoding="async" loading="lazy" class="alignnone  wp-image-7357" src="/uploads-archive/2015/05/nekopos5.gif" alt="nekopos5" width="625" height="337" /></a></p>
<p>&nbsp;</p>
<p>それぞれのレイアウト項目をクリックすると取り込むデータの方式や最大文字数などの説明が表示されます。紐付けを行う際に参考にしてください。</p>
<p>紐付けが完了したら取込開始のボタンが浮き上がってくるのでクリックします。</p>
<p><a href="/uploads-archive/2015/05/nekopos6.gif"><img decoding="async" loading="lazy" class="alignnone  wp-image-7359" src="/uploads-archive/2015/05/nekopos6.gif" alt="nekopos6" width="625" height="494" /></a></p>
<p>&nbsp;</p>
<p>修正が必要な送り先データに関しては通し番号のセルが赤くなるので、「編集」から必要な部分を修正して下さい。</p>
<p>修正が全て完了したら、印刷する全てのデータで「選択」にチェックが入っている事を確認して送り状発行のボタンをクリックします。</p>
<h3>送り状を印刷する</h3>
<p>続いて下の様な画面がでてきます。</p>
<p>ラベルシールの枚数を表示させてたい場合は「プレビュー画面を表示」にチェックを入れておいて下さい。</p>
<p><a href="/uploads-archive/2015/05/nekopos7.gif"><img decoding="async" loading="lazy" class="alignnone  wp-image-7360" src="/uploads-archive/2015/05/nekopos7.gif" alt="nekopos7" width="622" height="413" /></a></p>
<p>プリンターにラベルシールをセットしたら「発行開始」をクリックして下さい。</p>
<p><a href="/uploads-archive/2015/05/nekopos9.gif"><img decoding="async" loading="lazy" class="alignnone  wp-image-7387" src="/uploads-archive/2015/05/nekopos9.gif" alt="nekopos9" width="583" height="347" /></a></p>
<p>&nbsp;</p>
<p>すると上のようなポップアップが出てきます。１/１となっている箇所にラベルシールの印刷枚数が表示されます。</p>
<p>これで送り状の作成は完了です。</p>


ネコポスの送り状をB2webで作成する方法

【jQuery】CSS3のTransform3DでGPUによる滑らかなアニメーションを実装しよう【CSS3】

<p>私自身、エンジニアってわけではないのですが、プログラムに片足突っ込んでいるようなものなので、よくわからないことがあり、ググってみたりすると、最近エンジニアに特化している質問サイト等に出くわすことが多くなりました。</p>
<p>以前は誰か個人のブログが多いのですが、最近徐々にこのようなサイトが台頭しているよう感じます。</p>
<p>それでは早速ご紹介します！</p>
<h2>teratail【テラテイル】｜思考するエンジニアのためのQAプラットフォーム</h2>
<p><a href="https://teratail.com/" target="_blank"><img decoding="async" loading="lazy" class="alignnone wp-image-7311" src="/uploads-archive/2015/04/3f1b6ad9323df1402afaa9129bb14724-1024x628.jpg" alt="teratail【テラテイル】｜思考するエンジニアのためのQAプラットフォーム" width="620" height="380" srcset="/uploads-archive/2015/04/3f1b6ad9323df1402afaa9129bb14724-1024x628.jpg 1024w, /uploads-archive/2015/04/3f1b6ad9323df1402afaa9129bb14724-300x184.jpg 300w, /uploads-archive/2015/04/3f1b6ad9323df1402afaa9129bb14724-228x140.jpg 228w, /uploads-archive/2015/04/3f1b6ad9323df1402afaa9129bb14724.jpg 1084w" sizes="(max-width: 620px) 100vw, 620px" /></a><br />
2014年7月に誕生したレバレジーズさんが運営しているサイトです。<br />
デザインがスッキリしていて見やすいです。</p>
<p>&nbsp;</p>
<p><a class="link" href="https://teratail.com/" target="_blank">teratail【テラテイル】｜思考するエンジニアのためのQAプラットフォーム</a></p>
<p>&nbsp;</p>
<h2>スタック・オーバーフロー</h2>
<p><a href="http://ja.stackoverflow.com/" target="_blank"><img decoding="async" loading="lazy" class="alignnone wp-image-7314" src="/uploads-archive/2015/04/4f53b215a283dbae7d4f1971988018b3-1024x628.jpg" alt="スタック・オーバーフロー" width="620" height="380" srcset="/uploads-archive/2015/04/4f53b215a283dbae7d4f1971988018b3-1024x628.jpg 1024w, /uploads-archive/2015/04/4f53b215a283dbae7d4f1971988018b3-300x184.jpg 300w, /uploads-archive/2015/04/4f53b215a283dbae7d4f1971988018b3-228x140.jpg 228w, /uploads-archive/2015/04/4f53b215a283dbae7d4f1971988018b3.jpg 1084w" sizes="(max-width: 620px) 100vw, 620px" /></a><br />
こちらはよくググると、海外版のサイトがひっかかっていたのですが、その日本語版が2014年12月頃にベータ版として登場したようです。<br />
こちらもシンプルなデザインで見やすいですね！</p>
<p>&nbsp;</p>
<p><a class="link" href="http://ja.stackoverflow.com/" target="_blank">スタック・オーバーフロー</a></p>
<p>&nbsp;</p>
<h2>Qiita &#8211; プログラマの技術情報共有サービス</h2>
<p><a href="https://qiita.com/" target="_blank"><img decoding="async" loading="lazy" class="alignnone wp-image-7310" src="/uploads-archive/2015/04/df0772f72d0f5694a82731c4b774ed6d-1024x628.jpg" alt="Qiita - プログラマの技術情報共有サービス" width="620" height="380" srcset="/uploads-archive/2015/04/df0772f72d0f5694a82731c4b774ed6d-1024x628.jpg 1024w, /uploads-archive/2015/04/df0772f72d0f5694a82731c4b774ed6d-300x184.jpg 300w, /uploads-archive/2015/04/df0772f72d0f5694a82731c4b774ed6d-228x140.jpg 228w, /uploads-archive/2015/04/df0772f72d0f5694a82731c4b774ed6d.jpg 1084w" sizes="(max-width: 620px) 100vw, 620px" /></a><br />
こちらはどちらかと言うと、技術情報共有に重きを置いていて、その中でフィードバックもらうことが出来るようになっています。<br />
緑が印象的で記憶に残りやすいサイトですね。</p>
<p>&nbsp;</p>
<p><a class="link" href="https://qiita.com/" target="_blank">Qiita &#8211; プログラマの技術情報共有サービス</a></p>
<p>&nbsp;</p>
<h2>CodePen</h2>
<p><a href="http://codepen.io/" target="_blank"><img decoding="async" loading="lazy" class="alignnone wp-image-7307" src="/uploads-archive/2015/04/CodePen-Front-End-Developer-Playground-Code-Editor-in-the-Browser-1024x628.jpg" alt="CodePen - Front End Developer Playground &amp; Code Editor in the Browser" width="620" height="380" srcset="/uploads-archive/2015/04/CodePen-Front-End-Developer-Playground-Code-Editor-in-the-Browser-1024x628.jpg 1024w, /uploads-archive/2015/04/CodePen-Front-End-Developer-Playground-Code-Editor-in-the-Browser-300x184.jpg 300w, /uploads-archive/2015/04/CodePen-Front-End-Developer-Playground-Code-Editor-in-the-Browser-228x140.jpg 228w, /uploads-archive/2015/04/CodePen-Front-End-Developer-Playground-Code-Editor-in-the-Browser.jpg 1084w" sizes="(max-width: 620px) 100vw, 620px" /></a><br />
こちらは質問＆回答ではなく、技術共有のサイトです。<br />
プログラミングよりはフロントエンドよりの技術が多いかと思います。<br />
実行の結果とソースが一画面に表示されとても見やすいです！</p>
<p>例えば以下のようなものになります。<br />
<a href="http://codepen.io/egrucza/pen/bNjQLY" target="_blank">&#8220;Stupid&#8221; Case Study Hover</a></p>
<p>&nbsp;</p>
<p><a class="link" href="http://codepen.io/" target="_blank">CodePen</a></p>
<p>&nbsp;</p>
<h2>Forkwell &#8211; エンジニアのためのポートフォリオサービス</h2>
<p><a href="https://forkwell.com/" target="_blank"><img decoding="async" loading="lazy" class="alignnone wp-image-7308" src="/uploads-archive/2015/04/2e064922be4e3b6633b5e6ee078345ca-1024x628.jpg" alt="Forkwell - エンジニアのためのポートフォリオサービス" width="620" height="380" srcset="/uploads-archive/2015/04/2e064922be4e3b6633b5e6ee078345ca-1024x628.jpg 1024w, /uploads-archive/2015/04/2e064922be4e3b6633b5e6ee078345ca-300x184.jpg 300w, /uploads-archive/2015/04/2e064922be4e3b6633b5e6ee078345ca-228x140.jpg 228w, /uploads-archive/2015/04/2e064922be4e3b6633b5e6ee078345ca.jpg 1084w" sizes="(max-width: 620px) 100vw, 620px" /></a><br />
ポートフォリオサービスとありますが、技術共有サイトです。<br />
エンジニアだけでなく、webクリエイター全般に対応しております。<br />
求人サイトと直結しているようなので、転職を目指す人にはいいかもしれません。</p>
<p>&nbsp;</p>
<p><a class="link" href="https://forkwell.com/" target="_blank">Forkwell</a></p>
<p>&nbsp;</p>
<h2>WordPress フォーラム</h2>
<p><a href="https://ja.forums.wordpress.org/" target="_blank"><img decoding="async" loading="lazy" class="alignnone wp-image-7313" src="/uploads-archive/2015/04/c2df416e03256da5efa0917841e43a25-1024x628.jpg" alt="WordPress › フォーラム" width="620" height="380" srcset="/uploads-archive/2015/04/c2df416e03256da5efa0917841e43a25-1024x628.jpg 1024w, /uploads-archive/2015/04/c2df416e03256da5efa0917841e43a25-300x184.jpg 300w, /uploads-archive/2015/04/c2df416e03256da5efa0917841e43a25-228x140.jpg 228w, /uploads-archive/2015/04/c2df416e03256da5efa0917841e43a25.jpg 1084w" sizes="(max-width: 620px) 100vw, 620px" /></a><br />
こちらはご存知の通り、wordpress専用のサイトです。<br />
wordpress関連のことを調べるとよくたどり着きます。</p>
<p>&nbsp;</p>
<p><a class="link" href="https://ja.forums.wordpress.org/" target="_blank">WordPress フォーラム</a></p>
<p>&nbsp;</p>
<h2>jsdo.it</h2>
<p><a href="http://jsdo.it/" target="_blank"><img decoding="async" loading="lazy" class="alignnone wp-image-7309" src="/uploads-archive/2015/04/jsdo.it-Share-JavaScript-HTML5-and-CSS-1024x628.jpg" alt="jsdo.it - Share JavaScript, HTML5 and CSS" width="620" height="380" srcset="/uploads-archive/2015/04/jsdo.it-Share-JavaScript-HTML5-and-CSS-1024x628.jpg 1024w, /uploads-archive/2015/04/jsdo.it-Share-JavaScript-HTML5-and-CSS-300x184.jpg 300w, /uploads-archive/2015/04/jsdo.it-Share-JavaScript-HTML5-and-CSS-228x140.jpg 228w, /uploads-archive/2015/04/jsdo.it-Share-JavaScript-HTML5-and-CSS.jpg 1084w" sizes="(max-width: 620px) 100vw, 620px" /></a><br />
こちらはカヤックさんが運営しているサイトで、<br />
JavaScript,HTML5,CSSに特化しているようなので、エンジニアというよりフロントエンドよりですね。</p>
<p>&nbsp;</p>
<p><a class="link" href="http://jsdo.it/" target="_blank">jsdo.it</a></p>
<p>&nbsp;</p>
<h2>W3Q &#8211; Web制作のお悩みを解決するQ&amp;Aとまとめサービス</h2>
<p><a href="http://w3q.jp/" target="_blank"><img decoding="async" loading="lazy" class="alignnone wp-image-7312" src="/uploads-archive/2015/04/74b8f1e55f77f26dc3d3827f42d11b78-1024x628.jpg" alt="W3Q - Web制作のお悩みを解決するQ&amp;Aとまとめサービス" width="620" height="380" srcset="/uploads-archive/2015/04/74b8f1e55f77f26dc3d3827f42d11b78-1024x628.jpg 1024w, /uploads-archive/2015/04/74b8f1e55f77f26dc3d3827f42d11b78-300x184.jpg 300w, /uploads-archive/2015/04/74b8f1e55f77f26dc3d3827f42d11b78-228x140.jpg 228w, /uploads-archive/2015/04/74b8f1e55f77f26dc3d3827f42d11b78.jpg 1084w" sizes="(max-width: 620px) 100vw, 620px" /></a><br />
こちらはweb制作、web業界に関する質問をなんでもっていうサイトなのですが、<br />
今まで紹介してきたサイトと比べると、匿名のため品のない回答も多く見受けられます・・・</p>
<p>&nbsp;</p>
<p><a class="link" href="http://w3q.jp/" target="_blank">W3Q</a></p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>私自身エンジニア歴は長くはないので、<br />
調べたらなんとかなるという状況にいましたが、当初からすると贅沢な状況になっているのかもしれません。</p>
<p>私にとってありがたいサービスが生まれて来ているので、こうゆうサイトで知識を蓄えつつ、<br />
回答する側に行きたいなぁと思います。</p>


webエンジニアが技術共有＆質問できるサイト7つ

<p>マテリアルデザイン(material design)は昨年2014年7月にGoogleから提唱された、</p>
<p>WEB端末向けの新たなデザイン体系です。</p>
<p>&nbsp;</p>
<p>Google関係のアプリをはじめ、少しずつ見かける機会は増えているものの、</p>
<p>具体的にどんなものなのか知らずにいました。</p>
<p>私は単純にフラットデザインのひとつの形に過ぎないと想像していましたが、</p>
<p>実際には別物だということを知り、</p>
<p>今後のためにもちゃんと調べようと思ったので、</p>
<p><a href="http://www.google.com/design/spec/material-design/introduction.html" target="_blank">Googleが公開しているマテリアルデザインのガイドライン</a>を調べて、</p>
<p>内容をまとめてみました。</p>
<p>&nbsp;</p>
<p>公式のガイドライン</p>
<p><a class="link" href="http://www.google.com/design/spec/material-design/introduction.html" target="_blank">Introduction &#8211; Material design &#8211; Google design guidelines</a></p>
<p>&nbsp;</p>
<h2>マテリアルデザインの基本</h2>
<h3>マテリアルデザインに用いられる単位(dp)について</h3>
<p>ガイドラインでは、度々dpという単位が使われています。</p>
<p>この単位は解像度が160dpiの場合の1pxを基本としています。</p>
<p>解像度が240dipなら1dpは1.5px、320dpiなら1dpは2pxになります。</p>
<p>(ちなみにiPhone4-6の解像度は326dpiです。ノートパソコンは100〜150dpiくらい)</p>
<p>&nbsp;</p>
<p>まず、マテリアルデザインの核となる部分</p>
<h3>３次元空間(3D)を意識する</h3>
<p><a class="link" href="http://www.google.com/design/spec/what-is-material/environment.html" target="_blank">参考: Environment &#8211; What is material? &#8211; Google design guidelines</a></p>
<p>縦方向と横方向の平面上にレイアウトすることを意識したフラットデザインと違い、</p>
<p>マテリアルデザインは、縦方向と横方向に加えて、画面の奥行きを意識したデザインになっています。</p>
<p><a href="/uploads-archive/2015/04/axis.png"><img decoding="async" loading="lazy" class="alignnone wp-image-7299 size-full" src="/uploads-archive/2015/04/axis.png" alt="axis" width="656" height="480" srcset="/uploads-archive/2015/04/axis.png 656w, /uploads-archive/2015/04/axis-300x220.png 300w, /uploads-archive/2015/04/axis-228x167.png 228w" sizes="(max-width: 656px) 100vw, 656px" /></a></p>
<p>&nbsp;</p>
<p>マテリアルデザインの一つの大きな特徴であるシャドウ(shadow)は、</p>
<p>この奥行きを視覚的に知らせることを目的としています。</p>
<p>そのため、このシャドウはそれまでにもあった装飾としてのシャドウとは違い、</p>
<p>その要素の奥行の状態に合わせて変化させる必要があります。</p>
<p>また、そのシャドウの位置・方向や濃さを決めるために、光源(light)を意識することも必要になります。</p>
<p>&nbsp;</p>
<p>重要な要素についてはその奥行が決められていて、</p>
<p>デバイスによっても、その奥行が変化します。</p>
<p><a href="/uploads-archive/2015/04/3d_space1.jpg"><img decoding="async" loading="lazy" class="alignnone wp-image-7302 size-full" src="/uploads-archive/2015/04/3d_space1.jpg" alt="3d_space" width="656" height="480" srcset="/uploads-archive/2015/04/3d_space1.jpg 656w, /uploads-archive/2015/04/3d_space1-300x220.jpg 300w, /uploads-archive/2015/04/3d_space1-228x167.jpg 228w" sizes="(max-width: 656px) 100vw, 656px" /></a></p>
<p><a class="link" href="http://www.google.com/design/spec/what-is-material/objects-in-3d-space.html#objects-in-3d-space-elevation-android-" target="_blank">参考: Objects in 3D space &#8211; What is material? &#8211; Google design guidelines</a></p>
<p>&nbsp;</p>
<h3>各要素の基本的な素材は紙のようなものをイメージする</h3>
<p><a class="link" href="http://www.google.com/design/spec/what-is-material/material-properties.html#material-properties-movement-of-material" target="_blank">Material properties &#8211; What is material? &#8211; Google design guidelines</a></p>
<p>マテリアルデザイン上では、各要素を薄い紙として扱います。</p>
<p>ただ、実際の紙と違って、その紙は様々に変形することが許容されています。</p>
<p>とはいえ、別の奥行きにあった要素が貫通してしまうような変形や、</p>
<p>折りたたむ、<ruby>捲<rp>(</rp><rt>めく</rt><rp>(</rp></ruby>るといった変形は許されていません。</p>
<p>形が変わる（円から四角形になるなど）、伸び縮みする、融合・分離する、回転するなどが許容されている変形です。</p>
<p>&nbsp;</p>
<h3>アニメーションの基本</h3>
<p>マテリアルデザインの重要な特徴として、アニメーションを多く利用するというものがあります。</p>
<p>そのアニメーションにももちろんルールがあります。</p>
<p>通常のアニメーションのイージングは基本的にはAsymmetric(非対称：開始と終了の動きが時間的に対象になっていない)なイージングがより自然な動きということで、推奨されています。</p>
<p><a href="/uploads-archive/2015/04/responsive-reaction1.png"><img decoding="async" loading="lazy" class="alignnone wp-image-7328 size-full" src="/uploads-archive/2015/04/responsive-reaction1.png" alt="responsive-reaction" width="656" height="480" srcset="/uploads-archive/2015/04/responsive-reaction1.png 656w, /uploads-archive/2015/04/responsive-reaction1-300x220.png 300w, /uploads-archive/2015/04/responsive-reaction1-228x167.png 228w" sizes="(max-width: 656px) 100vw, 656px" /></a></p>
<p>&nbsp;</p>
<p>ただ、もともと画面上になかった要素が入ってきたり、出て行ったりする場合は、</p>
<p>入ってくるときは徐々に減速、出て行く時は徐々に加速させるようなイージングが推奨されています。</p>
<p>ただ最終的には、製作者により、より自然な動きになるように調整することが求められています。</p>
<p>&nbsp;</p>
<h3>Responsive interaction</h3>
<p>ユーザーがタッチしたことを明確に知らせ、操作感の改善を目指したものです。</p>
<p>マテリアルデザインのアニメーションの中で最も特徴的といえる効果です。</p>
<p>日本では波紋エフェクトとも呼ばれています。</p>
<p>タッチした場所を中心に、波紋のようなアニメーションを表示することで、</p>
<p>タッチした場所を知らせ、触ったという視覚効果を明確に表現しています。</p>
<p><a href="/uploads-archive/2015/04/surface-reaction.png"><img decoding="async" loading="lazy" class="alignnone wp-image-7305 size-full" src="/uploads-archive/2015/04/surface-reaction.png" alt="surface-reaction" width="656" height="480" srcset="/uploads-archive/2015/04/surface-reaction.png 656w, /uploads-archive/2015/04/surface-reaction-300x220.png 300w, /uploads-archive/2015/04/surface-reaction-228x167.png 228w" sizes="(max-width: 656px) 100vw, 656px" /></a></p>
<p>&nbsp;</p>
<p>タッチした場所を起点に、要素が飛び出してきたり、収納されたりするような視覚効果もそのひとつです。</p>
<p>&nbsp;</p>
<h3>視覚的な連続性のあるアニメーション</h3>
<p>マテリアルデザインの中で、私が最も共感するアニメーションルールですが、</p>
<p>タッチした要素と遷移先の要素を視覚的に同一視できるような効果をつけるというものです。</p>
<p>例えば記事の一欄があった場合、</p>
<p>一覧から記事を選ぶと、タッチした要素が画面いっぱいに広がるようにして、</p>
<p>記事の詳細のページヘ遷移するというアニメーションをつけます。</p>
<p>一覧に戻るときにも、記事が一覧に戻っていくようなアニメーションをつけます。</p>
<p>そうすることで、情報の連続性を視覚的にユーザーに知らせることができ、</p>
<p>ユーザーも現在の場所を見失うことなく、ページを遷移することが可能になります。</p>
<p><a href="/uploads-archive/2015/04/responsive-reaction.png"><img decoding="async" loading="lazy" class="alignnone wp-image-7315 size-full" src="/uploads-archive/2015/04/responsive-reaction.png" alt="responsive-reaction" width="656" height="480" srcset="/uploads-archive/2015/04/responsive-reaction.png 656w, /uploads-archive/2015/04/responsive-reaction-300x220.png 300w, /uploads-archive/2015/04/responsive-reaction-228x167.png 228w" sizes="(max-width: 656px) 100vw, 656px" /></a></p>
<p>&nbsp;</p>
<p>その他、公式のガイドラインには、色やアイコンの作り方など、細かなルールが決められていて、</p>
<p>マテリアルデザインという枠を超えてデザインの勉強になると思います。</p>
<p>動画を使ってわかりやすく説明がされているので、ページ量は多いですが、とても読み進めやすいです。</p>
<p>興味のある方は是非、<a href="http://www.google.com/design/spec/material-design/introduction.html" target="_blank">公式のガイドライン</a>をご覧になってください。</p>


マテリアルデザイン(material design)の基本の基本についてまとめてみました

<p>中国のことを情報収集していると知り合い伝いなどで、どんどん教えてもらえます。 そんな中で、メディアなどではない、中国ビジネスを行う企業のブログを紹介します。</p>
<h3 id="-">クーパル株式会社のブログ</h2>
<p><a href="/uploads-archive/2015/04/b4c9dbaee074c59bfa4144a72d8c2228.jpg"><img decoding="async" loading="lazy" class="aligncenter size-medium wp-image-7294" src="/uploads-archive/2015/04/b4c9dbaee074c59bfa4144a72d8c2228-300x245.jpg" alt="Blog___クーパル株式会社" width="300" height="245" srcset="/uploads-archive/2015/04/b4c9dbaee074c59bfa4144a72d8c2228-300x245.jpg 300w, /uploads-archive/2015/04/b4c9dbaee074c59bfa4144a72d8c2228-228x186.jpg 228w, /uploads-archive/2015/04/b4c9dbaee074c59bfa4144a72d8c2228.jpg 948w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>
<p><a href="http://coopal.jp/blog/" target="_blank">http://coopal.jp/blog/</a></p>
<p>中国にて現地法人の社長を行っていた社長が率いるクーパル社のブログです。</p>
<p>非常に分かりやすく特に3分でわかるシリーズの記事は必見です。</p>
<p>今後の更新に期待です！</p>
<h3 id="-ec-">株式会社 宥尚社の中国EC最新情報（ブログ）</h2>
<p><a href="/uploads-archive/2015/04/a9220ad16738250e80853418dc424ccd.jpg"><img decoding="async" loading="lazy" class="aligncenter size-medium wp-image-7295" src="/uploads-archive/2015/04/a9220ad16738250e80853418dc424ccd-300x208.jpg" alt="株式会社_宥尚___上海宥尚実業有限公司" width="300" height="208" srcset="/uploads-archive/2015/04/a9220ad16738250e80853418dc424ccd-300x208.jpg 300w, /uploads-archive/2015/04/a9220ad16738250e80853418dc424ccd-1024x711.jpg 1024w, /uploads-archive/2015/04/a9220ad16738250e80853418dc424ccd-228x158.jpg 228w, /uploads-archive/2015/04/a9220ad16738250e80853418dc424ccd.jpg 1107w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>
<p><a href="http://www.ecdio.com/blog/" target="_blank">http://www.ecdio.com/blog/</a></p>
<p>中国のECに絞って非常に深く考察されているのでとても参考になります。 具体的な障害となることや保税区や課税など、国内ビジネスでは分からないことが書かれております。</p>
<h3 id="-">株式会社スワンブリッジパートナーズ社のブログ</h2>
<p><a href="/uploads-archive/2015/04/b05783f5d1b320a1130e4445088761fb.jpg"><img decoding="async" loading="lazy" class="aligncenter size-medium wp-image-7296" src="/uploads-archive/2015/04/b05783f5d1b320a1130e4445088761fb-300x225.jpg" alt="Swanbridgepartners___中国の出合い系アプリ最高峰はアレ_2014小米アップストアレポートからトレンドを読む" width="300" height="225" srcset="/uploads-archive/2015/04/b05783f5d1b320a1130e4445088761fb-300x225.jpg 300w, /uploads-archive/2015/04/b05783f5d1b320a1130e4445088761fb-1024x769.jpg 1024w, /uploads-archive/2015/04/b05783f5d1b320a1130e4445088761fb-228x171.jpg 228w, /uploads-archive/2015/04/b05783f5d1b320a1130e4445088761fb.jpg 1148w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>
<p><a href="http://swanbridgepartners.com/?p=2054" target="_blank">http://swanbridgepartners.com/?p=2054</a></p>
<p>いつも注目しているxiaomiが発表した内容の翻訳記事を見れば、 トレンドを掴むことが出来ます。</p>
<p><a href="http://swanbridgepartners.com/?p=1988" target="_blank">http://swanbridgepartners.com/?p=1988</a></p>


ITを中心に中国の今を知る企業ブログ3選

videoタグの動画をcanvasを使って表示する

ECサイトでよくある横並びのリストのいろいろなコーディング方法

<h2>運営のノウハウを無料で学べるＲＵＸ</h2>
<p>楽天に出店している人はもう知っているかもしれません、最近「ＲＵＸ」なるものがＲＭＳ（管理ツール）から利用できるようになりました。</p>
<p>ＲＵＸは楽天における店舗運営のノウハウを動画などで学べるもので、以前からあった楽天大学の一部が無料になったと考えて頂ければわかり易いと思います。ＲＵＸは基本的に出店者以外は見られないようになっています。</p>
<p>具体的な内容としては</p>
<p>・コンサルタント（？）による売り上げアップのノウハウ</p>
<p>・店舗運営者が語る運営のコツ</p>
<p>・撮影・編集のテクニック</p>
<p>といった感じです。ちなみに動画・画像についてはamanaイメージズがレクチャーしてくれるようです。</p>
<p><a href="/uploads-archive/2015/04/urx.jpg"><img decoding="async" loading="lazy" class="alignnone  wp-image-7272" src="/uploads-archive/2015/04/urx.jpg" alt="urx" width="495" height="572" srcset="/uploads-archive/2015/04/urx.jpg 771w, /uploads-archive/2015/04/urx-260x300.jpg 260w, /uploads-archive/2015/04/urx-228x263.jpg 228w" sizes="(max-width: 495px) 100vw, 495px" /></a></p>
<p>&nbsp;</p>
<p>これまで同様、楽天大学は存続しているので「さらに情報が欲しいという人は有料で学んで下さい」という感じなんだと思います。楽天大学への誘導にも若干思えますが、ＲＵＸだけでも結構為になる気がします。</p>
<p>&nbsp;</p>
<p>&nbsp;</p>


楽天の店舗運営に便利なツール

<p>メディアコマースというものが活況らしい。</p>
<p>要は、全面にECサイトを押し出すのではなくあくまでメディアの延長線上でのECという位置づけのサイト。</p>
<p>以前<a href="/officer/%E3%83%A1%E3%83%87%E3%82%A3%E3%82%A2%E5%8C%96%E3%81%99%E3%82%8Bec.html" target="_blank">メディア化するEC</a>という記事を書き、その時はそんなでもなかったのだが、1年あまりで急速に流れが来ているようだ。</p>
<p>いくつかの事例をまとめてみた。</p>
<h2>houzz</h2>
<p>http://www.houzz.jp/</p>
<p>アメリカ最大のメディアコマース</p>
<p>2015年4月 日本でサービス開始</p>
<p>&nbsp;</p>
<h2>JOOY</h2>
<p><a href="https://jooy.jp/" target="_blank">https://jooy.jp/</a></p>
<p>DeNAが始めた男性ファッションに特化したキュレーションプラットフォーム</p>
<p>2015年4月 サービス開始</p>
<p>今後EC機能を追加していくとのこと</p>
<p>&nbsp;</p>
<h2>MERY</h2>
<p><a href="http://mery.jp/" target="_blank">http://mery.jp/</a></p>
<p>女性向けファッションのまとめサイト</p>
<p>2014年10月 DeNAが買収</p>
<p>今後EC機能を追加していくとのこと</p>
<p>&nbsp;</p>
<h2>4meee!と4yuuu!</h2>
<p><a href="http://4meee.com/" target="_blank">http://4meee.com/</a></p>
<p><a href="http://4yuuu.com/" target="_blank">http://4yuuu.com/</a></p>
<p>4meee!と4yuuu!を運営するロケットベンチャー株式会社</p>
<p>2015年2月 エニグモが買収</p>
<p>BUYMAとの連携を強める</p>
<p>&nbsp;</p>
<h2>STYLE HAUS</h2>
<p><a href="https://stylehaus.jp/" target="_blank">https://stylehaus.jp/</a></p>
<p>ファッションメディア</p>
<p>2015年2月 エニグモがサービス開始</p>
<p>BUYMA外のユーザーをつかむ</p>
<p>&nbsp;</p>
<h2>YAPPA</h2>
<p>2014年10月 スタートトゥデイが買収</p>
<p>相互利用による集客</p>
<p>&nbsp;</p>
<h2>honeyee.com</h2>
<p><a href="http://www.honeyee.com/" target="_blank">http://www.honeyee.com/</a></p>
<p>2013年 アラタナがハニカムを買収</p>
<p>2014年 ECサイトJUST LIKE HONEYEEのサービス開始</p>
<p>&nbsp;</p>
<p>今後は、ECサイトが集客手段としてのメディアを持つパターンとメディアが収益源としてECサイトを持つという2パターンに分けて見ていくと勉強になると思った</p>
<p>&nbsp;</p>


メディアコマース

<p><a href="https://chrome.google.com/webstore/detail/weblioポップアップ英和辞典/oingodpdjohhkelnginmkagmkbplgema">https://chrome.google.com/webstore/detail/weblioポップアップ英和辞典/oingodpdjohhkelnginmkagmkbplgema</a></p>
<p>これめちゃくちゃ便利です。</p>
<p>サイトに遷移する必要なくポップアップで英単語を表示してくれます。</p>
<p><a href="/uploads-archive/2015/04/133617723778bcb0f85cc4f43d866944.jpg"><img decoding="async" loading="lazy" class="aligncenter size-medium wp-image-7257" src="/uploads-archive/2015/04/133617723778bcb0f85cc4f43d866944-300x266.jpg" alt="Weblioポップアップ英和辞典オプション" width="300" height="266" srcset="/uploads-archive/2015/04/133617723778bcb0f85cc4f43d866944-300x266.jpg 300w, /uploads-archive/2015/04/133617723778bcb0f85cc4f43d866944-228x202.jpg 228w, /uploads-archive/2015/04/133617723778bcb0f85cc4f43d866944.jpg 915w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>
<p>ポップアップさせるトリガーもオプションで複数設定できます。</p>
<ul>
<li>英単語にマウスカーソルをあわせてポップアップ</li>
<li>英単語にマウスカーソルをあわせ、[Ctrl]キーを押してポップアップ</li>
<li>英単語を選択状態にしてポップアップ</li>
<li>英単語にマウスカーソルをのせても、選択状態にしてもどちらでもポップアップ</li>
<li>英単語を選択状態にし、Eキーを押してポップアップ</li>
</ul>
<p>カーソルを合わせるだけだったり、選択状態にするだけにすると、文章をコピーしたいだけの時など意図していないポップアップが 上がってしまうことが多々あったので、私は、キーを押すことを組み合わせて癖にしました。</p>
<p><a href="/uploads-archive/2015/04/a47cee23650725c6d6202f7e7c95549c.jpg"><img decoding="async" loading="lazy" class="aligncenter size-medium wp-image-7258" src="/uploads-archive/2015/04/a47cee23650725c6d6202f7e7c95549c-300x248.jpg" alt="Weblioポップアップ英和辞典オプション 2" width="300" height="248" srcset="/uploads-archive/2015/04/a47cee23650725c6d6202f7e7c95549c-300x248.jpg 300w, /uploads-archive/2015/04/a47cee23650725c6d6202f7e7c95549c-228x188.jpg 228w, /uploads-archive/2015/04/a47cee23650725c6d6202f7e7c95549c.jpg 910w" sizes="(max-width: 300px) 100vw, 300px" /></a> <a href="/uploads-archive/2015/04/b6aba5ea391a64c6fc688f767dd9fa3b.jpg"><img decoding="async" loading="lazy" class="aligncenter size-medium wp-image-7259" src="/uploads-archive/2015/04/b6aba5ea391a64c6fc688f767dd9fa3b-300x152.jpg" alt="Weblioポップアップ英和辞典オプション 3" width="300" height="152" srcset="/uploads-archive/2015/04/b6aba5ea391a64c6fc688f767dd9fa3b-300x152.jpg 300w, /uploads-archive/2015/04/b6aba5ea391a64c6fc688f767dd9fa3b-228x116.jpg 228w, /uploads-archive/2015/04/b6aba5ea391a64c6fc688f767dd9fa3b.jpg 911w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>
<p>他の設定も豊富にあります。</p>
<p>httpsでも可能な限りポップアップは設定をしておいたほうがいいです。 こちらの設定に気づかずにFacebookでポップアップが上がらず悶々とした日々を過ごしていました。</p>
<h3 id="-">類似の拡張機能</h2>
<h3>英辞郎</h3>
<p><a href="https://chrome.google.com/webstore/detail/英辞郎-on-the-web-拡張機能/oonalfdoahlmjaoloddjenihohbfodme">https://chrome.google.com/webstore/detail/英辞郎-on-the-web-拡張機能/oonalfdoahlmjaoloddjenihohbfodme</a></p>
<p>こちらも実はすごくいいです。</p>
<p>辞書というよりは、例文が非常に豊富で生きた英語がいいとオススメされました。</p>
<h3>Google翻訳</h3>
<p><a href="https://chrome.google.com/webstore/detail/google-translate/aapbdbdomjkkjkaonfhkkikfgjllcleb">https://chrome.google.com/webstore/detail/google-translate/aapbdbdomjkkjkaonfhkkikfgjllcleb</a></p>
<p>言わずもがなで取り上げないといけないですね。</p>


英語学習に便利なChrome拡張機能「Weblioポップアップ英和辞書」

jQueryのよく使いそうなAjax関係のAPIをまとめてみました

cakephp 一覧表示、登録、編集、削除の実装

レスポンシブ＆フラットに合ったLightbox系jQueryプラグイン「strip」

<p>サイトに埋め込んだ動画にjavascriptを使ってテロップを出す方法です、そもそも「動画に元からテロップ入れておけばいいじゃないか」ってことになってしまいますが&#8230;.。応用すればflashを使わずにvideoタグとjsで色々な事ができそうな気がします。</p>
<p><a class="demo" href="/demo/makabe/03/03demo.html">demo</a></p>
<p>方法としてはcurrentTimeプロパティを使って動画の現在尺に合わせた内容の文章を表示させています。</p>
<p>&nbsp;</p>
<h2>video ＋ javascript 現在の再生位置を表示する</h2>
<p>テロップの前にまず現在の再生位置（再生時間）を表示させてみます。</p>

		<div id="crayon-6495401585e10346975264" 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;">
var video = document.getElementById("v");

v.addEventListener("timeupdate", function(){
		document.getElementById("time").innerHTML = v.currentTime;
	}, 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-6495401585e10346975264-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-6495401585e10346975264-2">2</div><div class="crayon-num" data-line="crayon-6495401585e10346975264-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-6495401585e10346975264-4">4</div><div class="crayon-num" data-line="crayon-6495401585e10346975264-5">5</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-6495401585e10346975264-1"><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-i">video</span><span class="crayon-h"> </span>=<span class="crayon-h"> </span><span class="crayon-i">document</span><span class="crayon-sy">.</span><span class="crayon-e">getElementById</span><span class="crayon-sy">(</span><span class="crayon-s">"v"</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-6495401585e10346975264-2">&nbsp;</div><div class="crayon-line" id="crayon-6495401585e10346975264-3"><span class="crayon-i">v</span><span class="crayon-sy">.</span><span class="crayon-e">addEventListener</span><span class="crayon-sy">(</span><span class="crayon-s">"timeupdate"</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-t">function</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-6495401585e10346975264-4"><span class="crayon-h">		</span><span class="crayon-i">document</span><span class="crayon-sy">.</span><span class="crayon-e">getElementById</span><span class="crayon-sy">(</span><span class="crayon-s">"time"</span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-i">innerHTML</span><span class="crayon-h"> </span>=<span class="crayon-h"> </span><span class="crayon-i">v</span><span class="crayon-sy">.</span><span class="crayon-i">currentTime</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-6495401585e10346975264-5"><span class="crayon-h">	</span><span class="crayon-sy">}</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-t">false</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>htmlは各ブラウザに対応した動画ファイルを挿入して、再生位置を表示するpタグを書いておきます。</p>

		<div id="crayon-6495401585e14689976927" 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></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;video controls id="v"&gt;
&lt;source src="video/sample1.mp4"&gt;
&lt;source src="video/sample1.webm"&gt;
&lt;source src="video/sample1.ogg"&gt;
&lt;/video&gt;

&lt;p id="time"&gt;&lt;/p&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-6495401585e14689976927-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-6495401585e14689976927-2">2</div><div class="crayon-num" data-line="crayon-6495401585e14689976927-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-6495401585e14689976927-4">4</div><div class="crayon-num" data-line="crayon-6495401585e14689976927-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-6495401585e14689976927-6">6</div><div class="crayon-num" data-line="crayon-6495401585e14689976927-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-6495401585e14689976927-1"><span class="crayon-h">&lt;</span><span class="crayon-e">video </span><span class="crayon-e">controls </span><span class="crayon-i">id</span>=<span class="crayon-s">"v"</span><span class="crayon-h">&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-6495401585e14689976927-2"><span class="crayon-h">&lt;</span><span class="crayon-e">source </span><span class="crayon-i">src</span>=<span class="crayon-s">"video/sample1.mp4"</span><span class="crayon-h">&gt;</span></div><div class="crayon-line" id="crayon-6495401585e14689976927-3"><span class="crayon-h">&lt;</span><span class="crayon-e">source </span><span class="crayon-i">src</span>=<span class="crayon-s">"video/sample1.webm"</span><span class="crayon-h">&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-6495401585e14689976927-4"><span class="crayon-h">&lt;</span><span class="crayon-e">source </span><span class="crayon-i">src</span>=<span class="crayon-s">"video/sample1.ogg"</span><span class="crayon-h">&gt;</span></div><div class="crayon-line" id="crayon-6495401585e14689976927-5"><span class="crayon-h">&lt;</span>/<span class="crayon-i">video</span><span class="crayon-h">&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-6495401585e14689976927-6">&nbsp;</div><div class="crayon-line" id="crayon-6495401585e14689976927-7"><span class="crayon-h">&lt;</span><span class="crayon-i">p</span><span class="crayon-h"> </span><span class="crayon-i">id</span>=<span class="crayon-s">"time"</span><span class="crayon-h">&gt;</span><span class="crayon-h">&lt;</span>/<span class="crayon-i">p</span><span class="crayon-h">&gt;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>「timeupdate:再生位置が変更された」というイベントで処理をさせる事で常に再生時間を取得してくれます。</p>
<h2>video ＋ javascript 尺に合わせてテロップを出す</h2>
<p>if分で尺を限定する事で、画にあったテロップが出せます。</p>

		<div id="crayon-6495401585e15407812307" 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;">
v.addEventListener("timeupdate", function(){
		if(video.currentTime &gt; 3){
			if(video.currentTime &lt; 8){
				document.getElementById("price").innerHTML = "シャンパン￥2800";
			}
		}
	}, 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-6495401585e15407812307-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-6495401585e15407812307-2">2</div><div class="crayon-num" data-line="crayon-6495401585e15407812307-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-6495401585e15407812307-4">4</div><div class="crayon-num" data-line="crayon-6495401585e15407812307-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-6495401585e15407812307-6">6</div><div class="crayon-num" data-line="crayon-6495401585e15407812307-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-6495401585e15407812307-1"><span class="crayon-i">v</span><span class="crayon-sy">.</span><span class="crayon-e">addEventListener</span><span class="crayon-sy">(</span><span class="crayon-s">"timeupdate"</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-t">function</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-6495401585e15407812307-2"><span class="crayon-h">		</span><span class="crayon-st">if</span><span class="crayon-sy">(</span><span class="crayon-i">video</span><span class="crayon-sy">.</span><span class="crayon-i">currentTime</span><span class="crayon-h"> </span><span class="crayon-h">&gt;</span><span class="crayon-h"> </span><span class="crayon-cn">3</span><span class="crayon-sy">)</span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-6495401585e15407812307-3"><span class="crayon-h">			</span><span class="crayon-st">if</span><span class="crayon-sy">(</span><span class="crayon-i">video</span><span class="crayon-sy">.</span><span class="crayon-i">currentTime</span><span class="crayon-h"> </span><span class="crayon-h">&lt;</span><span class="crayon-h"> </span><span class="crayon-cn">8</span><span class="crayon-sy">)</span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-6495401585e15407812307-4"><span class="crayon-h">				</span><span class="crayon-i">document</span><span class="crayon-sy">.</span><span class="crayon-e">getElementById</span><span class="crayon-sy">(</span><span class="crayon-s">"price"</span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-e ">innerHTML</span><span class="crayon-h"> </span>=<span class="crayon-h"> </span><span class="crayon-s">"シャンパン￥2800"</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-6495401585e15407812307-5"><span class="crayon-h">			</span><span class="crayon-sy">}</span></div><div class="crayon-line crayon-striped-line" id="crayon-6495401585e15407812307-6"><span class="crayon-h">		</span><span class="crayon-sy">}</span></div><div class="crayon-line" id="crayon-6495401585e15407812307-7"><span class="crayon-h">	</span><span class="crayon-sy">}</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-t">false</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>htmlでテロップが表示される場所も作ります。</p>

		<div id="crayon-6495401585e17300405145" 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></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;p id="price"&gt;&lt;/p&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-6495401585e17300405145-1">1</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-6495401585e17300405145-1"><span class="crayon-h">&lt;</span><span class="crayon-i">p</span><span class="crayon-h"> </span><span class="crayon-i">id</span>=<span class="crayon-s">"price"</span><span class="crayon-h">&gt;</span><span class="crayon-h">&lt;</span>/<span class="crayon-i">p</span><span class="crayon-h">&gt;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>この方法を応用すれば、動画中の商品をクリックすれば商品ページに飛ぶようなインタラクティブなサイトが作れると思います。</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>

html5 video javascriptで動画のタイムにあわせてテロップを出す

<div class="booklink-box" style="text-align: left; padding-bottom: 20px; font-size: small; zoom: 1; overflow: hidden;">
<div class="booklink-image" style="float: left; margin: 0 15px 10px 0;"><a target="_blank" rel="noopener"><img decoding="async" style="border: none;" src="https://thumbnail.image.rakuten.co.jp/@0_mall/book/cabinet/9270/9784532119270.jpg?_ex=200x200" /></a></div>
<div class="booklink-info" style="line-height: 120%; zoom: 1; overflow: hidden;">
<div class="booklink-name" style="margin-bottom: 10px; line-height: 120%;">
<p><a target="_blank" rel="noopener">ビジネス・フレームワーク</a></p>
<div class="booklink-powered-date" style="font-size: 8pt; margin-top: 5px; font-family: verdana; line-height: 120%;">posted with <a href="https://yomereba.com" target="_blank" rel="nofollow noopener">ヨメレバ</a></div>
</div>
<div class="booklink-detail" style="margin-bottom: 5px;">堀 公俊 日本経済新聞出版社 2013年08月</div>
<div class="booklink-link2" style="margin-top: 10px;">
<div class="shoplinkamazon" style="display: inline; margin-right: 5px;"><a href="https://www.amazon.co.jp/exec/obidos/asin/4532119278/sackoh71/" target="_blank" rel="noopener">Amazon</a></div>
</div>
</div>
<div class="booklink-footer" style="clear: left;"></div>
</div>
<p>ビジネスフレームワークが200種まとまった文庫です。 それぞれの項目で本一冊説明出来るほどの内容が見開き2ページで端的にまとまっています。</p>
<p>目次を引用させて頂きつつそれぞれの項目のGoogle検索結果のリンクをつけておきますので、 気になったワードはクリックで確認してみてください。</p>
<h3>第Ⅰ章　戦略立案のフレームワーク</h3>
<ol>
<li><a href="https://google.co.jp/search?q=３Ｃ" target="_blank" rel="noopener">３Ｃ</a></li>
<li><a href="https://google.co.jp/search?q=ＳＷＯＴ（スウォット）" target="_blank" rel="noopener">ＳＷＯＴ（スウォット）</a></li>
<li><a href="https://google.co.jp/search?q=ＰＥＳＴ（ペスト）" target="_blank" rel="noopener">ＰＥＳＴ（ペスト）</a></li>
<li><a href="https://google.co.jp/search?q=３Ｍ（ヒト／モノ／カネ）" target="_blank" rel="noopener">３Ｍ（ヒト／モノ／カネ）</a></li>
<li><a href="https://google.co.jp/search?q=７Ｓ" target="_blank" rel="noopener">７Ｓ</a></li>
<li><a href="https://google.co.jp/search?q=ＶＲＩＯ（ヴリオ）" target="_blank" rel="noopener">ＶＲＩＯ（ヴリオ）</a></li>
<li><a href="https://google.co.jp/search?q=５Ｆ（ファイブ・フォース）" target="_blank" rel="noopener">５Ｆ（ファイブ・フォース）</a></li>
<li><a href="https://google.co.jp/search?q=ランチェスターの法則" target="_blank" rel="noopener">ランチェスターの法則</a></li>
<li><a href="https://google.co.jp/search?q=競争戦略ポジショニング" target="_blank" rel="noopener">競争戦略ポジショニング</a></li>
<li><a href="https://google.co.jp/search?q=ＰＰＭ" target="_blank" rel="noopener">ＰＰＭ</a></li>
<li><a href="https://google.co.jp/search?q=アンゾフの成長マトリクス" target="_blank" rel="noopener">アンゾフの成長マトリクス</a></li>
<li><a href="https://google.co.jp/search?q=バリューチェーン" target="_blank" rel="noopener">バリューチェーン</a></li>
<li><a href="https://google.co.jp/search?q=バランス・スコア・カード" target="_blank" rel="noopener">バランス・スコア・カード</a><br />
<h3 id="-">第Ⅱ章　マーケティングのフレームワーク</h3>
</li>
<li><a href="https://google.co.jp/search?q=ＳＴＰ" target="_blank" rel="noopener">ＳＴＰ</a></li>
<li><a href="https://google.co.jp/search?q=ポジショニングマップ" target="_blank" rel="noopener">ポジショニングマップ</a></li>
<li><a href="https://google.co.jp/search?q=４Ｐ" target="_blank" rel="noopener">４Ｐ</a></li>
<li><a href="https://google.co.jp/search?q=プロダクトアウト／マーケットイン" target="_blank" rel="noopener">プロダクトアウト／マーケットイン</a></li>
<li><a href="https://google.co.jp/search?q=製品ライフサイクル" target="_blank" rel="noopener">製品ライフサイクル</a></li>
<li><a href="https://google.co.jp/search?q=イノベーター理論" target="_blank" rel="noopener">イノベーター理論</a></li>
<li><a href="https://google.co.jp/search?q=パレートの法則" target="_blank" rel="noopener">パレートの法則</a></li>
<li><a href="https://google.co.jp/search?q=ＲＦＭ分析" target="_blank" rel="noopener">ＲＦＭ分析</a></li>
<li><a href="https://google.co.jp/search?q=バリュー分析（ＣＳ／ＣＥ分析）" target="_blank" rel="noopener">バリュー分析（ＣＳ／ＣＥ分析）</a></li>
<li><a href="https://google.co.jp/search?q=ＡＩＤＭＡ（アイドマ）" target="_blank" rel="noopener">ＡＩＤＭＡ（アイドマ）</a><br />
<h3 id="-">第Ⅲ章　問題解決のフレームワーク</h3>
</li>
<li><a href="https://google.co.jp/search?q=Ａs　ｉｓ／Ｔｏ　ｂｅ（ギャップ分析）" target="_blank" rel="noopener">Ａs　ｉｓ／Ｔｏ　ｂｅ（ギャップ分析）</a></li>
<li><a href="https://google.co.jp/search?q=特性要因図" target="_blank" rel="noopener">特性要因図</a></li>
<li><a href="https://google.co.jp/search?q=ロジックツリー" target="_blank" rel="noopener">ロジックツリー</a></li>
<li><a href="https://google.co.jp/search?q=プロセスマップ" target="_blank" rel="noopener">プロセスマップ</a></li>
<li><a href="https://google.co.jp/search?q=ブレーンストーミング" target="_blank" rel="noopener">ブレーンストーミング</a></li>
<li><a href="https://google.co.jp/search?q=ＳＣＡＭＰＥＲ（スキャンパー）" target="_blank" rel="noopener">ＳＣＡＭＰＥＲ（スキャンパー）</a></li>
<li><a href="https://google.co.jp/search?q=マインドマップ" target="_blank" rel="noopener">マインドマップ</a></li>
<li><a href="https://google.co.jp/search?q=親和図法" target="_blank" rel="noopener">親和図法</a></li>
<li><a href="https://google.co.jp/search?q=タイムマシン法" target="_blank" rel="noopener">タイムマシン法</a></li>
<li><a href="https://google.co.jp/search?q=期待／課題マトリクス" target="_blank" rel="noopener">期待／課題マトリクス</a></li>
<li><a href="https://google.co.jp/search?q=プロコン表" target="_blank" rel="noopener">プロコン表</a></li>
<li><a href="https://google.co.jp/search?q=ペイオフマトリクス" target="_blank" rel="noopener">ペイオフマトリクス</a></li>
<li><a href="https://google.co.jp/search?q=意思決定マトリクス" target="_blank" rel="noopener">意思決定マトリクス</a><br />
<h3 id="-">第Ⅳ章　マネジメントのフレームワーク</h3>
</li>
<li><a href="https://google.co.jp/search?q=マネジメント・ヒエラルキー" target="_blank" rel="noopener">マネジメント・ヒエラルキー</a></li>
<li><a href="https://google.co.jp/search?q=ＰＤＣＡ" target="_blank" rel="noopener">ＰＤＣＡ</a></li>
<li><a href="https://google.co.jp/search?q=ＱＣＤ" target="_blank" rel="noopener">ＱＣＤ</a></li>
<li><a href="https://google.co.jp/search?q=５Ｗ１Ｈ" target="_blank" rel="noopener">５Ｗ１Ｈ</a></li>
<li><a href="https://google.co.jp/search?q=ムリ／ムダ／ムラ（３Ｍ）" target="_blank" rel="noopener">ムリ／ムダ／ムラ（３Ｍ）</a></li>
<li><a href="https://google.co.jp/search?q=５Ｓ" target="_blank" rel="noopener">５Ｓ</a></li>
<li><a href="https://google.co.jp/search?q=３現主義" target="_blank" rel="noopener">３現主義</a></li>
<li><a href="https://google.co.jp/search?q=ＥＣＲＳ（イクルス）" target="_blank" rel="noopener">ＥＣＲＳ（イクルス）</a></li>
<li><a href="https://google.co.jp/search?q=ハインリッヒの法則" target="_blank" rel="noopener">ハインリッヒの法則</a></li>
<li><a href="https://google.co.jp/search?q=ＣＭＭＩ（能力成熟度統合モデル）" target="_blank" rel="noopener">ＣＭＭＩ（能力成熟度統合モデル）</a></li>
<li><a href="https://google.co.jp/search?q=ＯＡＲＲ（オール）" target="_blank" rel="noopener">ＯＡＲＲ（オール）</a></li>
<li><a href="https://google.co.jp/search?q=ＳＭＡＲＴ（スマート）" target="_blank" rel="noopener">ＳＭＡＲＴ（スマート）</a></li>
<li><a href="https://google.co.jp/search?q=重要度／緊急度マトリクス" target="_blank" rel="noopener">重要度／緊急度マトリクス</a></li>
<li><a href="https://google.co.jp/search?q=ＫＰＴ（ケプト）" target="_blank" rel="noopener">ＫＰＴ（ケプト）</a></li>
<li><a href="https://google.co.jp/search?q=ＰＲＥＰ（プレップ）" target="_blank" rel="noopener">ＰＲＥＰ（プレップ）</a></li>
<li><a href="https://google.co.jp/search?q=ＦＡＢＥ（ファブ）" target="_blank" rel="noopener">ＦＡＢＥ（ファブ）</a></li>
<li><a href="https://google.co.jp/search?q=ＰＲＡＭ（ピーラム）" target="_blank" rel="noopener">ＰＲＡＭ（ピーラム）</a><br />
<h3 id="-">第Ⅴ章　組織開発のフレームワーク</h3>
</li>
<li><a href="https://google.co.jp/search?q=ＭＶＶ（ミッション／ビジョン／バリュー）" target="_blank" rel="noopener">ＭＶＶ（ミッション／ビジョン／バリュー）</a></li>
<li><a href="https://google.co.jp/search?q=能力の３要素" target="_blank" rel="noopener">能力の３要素</a></li>
<li><a href="https://google.co.jp/search?q=Ｗｉｌｌ／Ｓｋｉｌｌマトリクス" target="_blank" rel="noopener">Ｗｉｌｌ／Ｓｋｉｌｌマトリクス</a></li>
<li><a href="https://google.co.jp/search?q=欲求階層説" target="_blank" rel="noopener">欲求階層説</a></li>
<li><a href="https://google.co.jp/search?q=ジョハリの窓" target="_blank" rel="noopener">ジョハリの窓</a></li>
<li><a href="https://google.co.jp/search?q=ハーマンモデル" target="_blank" rel="noopener">ハーマンモデル</a></li>
<li><a href="https://google.co.jp/search?q=ＧＲＯＷモデル" target="_blank" rel="noopener">ＧＲＯＷモデル</a></li>
<li><a href="https://google.co.jp/search?q=経験学習モデル" target="_blank" rel="noopener">経験学習モデル</a></li>
<li><a href="https://google.co.jp/search?q=ウォント／コミットメント" target="_blank" rel="noopener">ウォント／コミットメント</a></li>
<li><a href="https://google.co.jp/search?q=キャリアアンカー" target="_blank" rel="noopener">キャリアアンカー</a></li>
<li><a href="https://google.co.jp/search?q=ＡＢＣ理論" target="_blank" rel="noopener">ＡＢＣ理論</a></li>
<li><a href="https://google.co.jp/search?q=ＰＭ理論" target="_blank" rel="noopener">ＰＭ理論</a></li>
<li><a href="https://google.co.jp/search?q=タックマンモデル" target="_blank" rel="noopener">タックマンモデル</a></li>
<li><a href="https://google.co.jp/search?q=フォースフィールド分析" target="_blank" rel="noopener">フォースフィールド分析</a></li>
<li><a href="https://google.co.jp/search?q=システムシンキング" target="_blank" rel="noopener">システムシンキング</a></li>
<li><a href="https://google.co.jp/search?q=レヴィンの変革モデル" target="_blank" rel="noopener">レヴィンの変革モデル</a></li>
</ol>
<h3>まとめ</h3>
<p>使い方としては、手元に置いておいて、判断に迷った時や思考の軸として、さっと読み返すといいと思います。 但し、冒頭でも述べたように、それぞれの項目で本一冊かけて説明出来る内容を端的にまとめられているので 罠に陥らないように気をつけて欲しいのが、このフレームワークが全てに当てはまる訳ではないということです。</p>
<p>例えば、QCDを例に取ると、</p>
<ul>
<li>Quality 品質</li>
<li>Cost 費用</li>
<li>Delivery 工数</li>
</ul>
<p>はトレードオフの関係にある。 つまり、それぞれが相互に作用していて、品質を上げようとすれば、費用と納期が増える。 納期を縮めれば、当然コストも下がるが品質も下がるというようないわゆるトリレンマの関係を表したものです。</p>
<p>これは、製造業などで品質が一定レベルに推移するものであれば当てはめることが出来ると思います。 図にするとこうなります。</p>
<p><a href="/uploads-archive/2015/04/chartcreator_finite-field_com_print_json__7B_containerId__3A_visualization__2C_dataTable__3A_7B_cols__3A_5B_7B_id__3A___2C_label__3A___2C_pattern__3A___2C_type__3A_string__2C_p__3A_7B_7D_7D_2C_7B_id__3A___2C_label__3A__5Cu54c1_5Cu8cea__2C_p.jpg"><img decoding="async" loading="lazy" class="aligncenter size-medium wp-image-7230" src="/uploads-archive/2015/04/chartcreator_finite-field_com_print_json__7B_containerId__3A_visualization__2C_dataTable__3A_7B_cols__3A_5B_7B_id__3A___2C_label__3A___2C_pattern__3A___2C_type__3A_string__2C_p__3A_7B_7D_7D_2C_7B_id__3A___2C_label__3A__5Cu54c1_5Cu8cea__2C_p-300x201.jpg" alt="chartcreator_finite-field_com_print_json__7B_containerId__3A_visualization__2C_dataTable__3A_7B_cols__3A_5B_7B_id__3A___2C_label__3A___2C_pattern__3A___2C_type__3A_string__2C_p__3A_7B_7D_7D_2C_7B_id__3A___2C_label__3A__5Cu54c1_5Cu8cea__2C_p" width="300" height="201" srcset="/uploads-archive/2015/04/chartcreator_finite-field_com_print_json__7B_containerId__3A_visualization__2C_dataTable__3A_7B_cols__3A_5B_7B_id__3A___2C_label__3A___2C_pattern__3A___2C_type__3A_string__2C_p__3A_7B_7D_7D_2C_7B_id__3A___2C_label__3A__5Cu54c1_5Cu8cea__2C_p-300x201.jpg 300w, /uploads-archive/2015/04/chartcreator_finite-field_com_print_json__7B_containerId__3A_visualization__2C_dataTable__3A_7B_cols__3A_5B_7B_id__3A___2C_label__3A___2C_pattern__3A___2C_type__3A_string__2C_p__3A_7B_7D_7D_2C_7B_id__3A___2C_label__3A__5Cu54c1_5Cu8cea__2C_p-228x153.jpg 228w, /uploads-archive/2015/04/chartcreator_finite-field_com_print_json__7B_containerId__3A_visualization__2C_dataTable__3A_7B_cols__3A_5B_7B_id__3A___2C_label__3A___2C_pattern__3A___2C_type__3A_string__2C_p__3A_7B_7D_7D_2C_7B_id__3A___2C_label__3A__5Cu54c1_5Cu8cea__2C_p.jpg 498w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>
<p>ただし、我々が取り組んでいる制作・開発事業においては、実はこのグラフではなく、こうなります。</p>
<p><img decoding="async" loading="lazy" class="aligncenter size-medium wp-image-7231" src="/uploads-archive/2015/04/chartcreator_finite-field_com___7B_22containerId_22__22visualization_22__22dataTable_22__7B_22cols_22__5B_7B_22id_22__22_22__22label_22__22_22__22pattern_22__22_22__22type_22__22string_22_7D__7B_22id_22__22_22__22label_22__22_5Cu54c1_5Cu8ce-300x193.png" alt="chartcreator_finite-field_com___7B_22containerId_22__22visualization_22__22dataTable_22__7B_22cols_22__5B_7B_22id_22__22_22__22label_22__22_22__22pattern_22__22_22__22type_22__22string_22_7D__7B_22id_22__22_22__22label_22__22_5Cu54c1_5Cu8ce" width="300" height="193" srcset="/uploads-archive/2015/04/chartcreator_finite-field_com___7B_22containerId_22__22visualization_22__22dataTable_22__7B_22cols_22__5B_7B_22id_22__22_22__22label_22__22_22__22pattern_22__22_22__22type_22__22string_22_7D__7B_22id_22__22_22__22label_22__22_5Cu54c1_5Cu8ce-300x193.png 300w, /uploads-archive/2015/04/chartcreator_finite-field_com___7B_22containerId_22__22visualization_22__22dataTable_22__7B_22cols_22__5B_7B_22id_22__22_22__22label_22__22_22__22pattern_22__22_22__22type_22__22string_22_7D__7B_22id_22__22_22__22label_22__22_5Cu54c1_5Cu8ce-228x146.png 228w, /uploads-archive/2015/04/chartcreator_finite-field_com___7B_22containerId_22__22visualization_22__22dataTable_22__7B_22cols_22__5B_7B_22id_22__22_22__22label_22__22_22__22pattern_22__22_22__22type_22__22string_22_7D__7B_22id_22__22_22__22label_22__22_5Cu54c1_5Cu8ce.png 508w" sizes="(max-width: 300px) 100vw, 300px" /></p>
<p>かかった工数に対し、品質は正比例せず、limit値に向けて収束するグラフになります。</p>
<p>更には、この品質のlimit値というのは、携わる人間に依存がします。</p>
<p>営業側の判断としては、品質と工数のバランスが最適化する値を見極め、</p>
<p>制作側はこのlimit値の上限を上げるということと、limit値に収束させるまでのリードタイムを短くする</p>
<p>という QCDのフレームワークとは別の軸が存在するということを理解しないといけません。</p>
<p>このように、フレームワークを捉えつつも、自分自身の市場、領域、状況に落とし込み、発展させていく必要があります。</p>


ビジネス・フレームワーク (日経文庫ビジュアル)

PHPを使わずにmetaタグやogタグを取得する方法

<p>昨今のwebサイトデザインにはアイコンが欠かせないと言っていいかと思います。<br />
テキストより絵で視覚的に訴える方が強いです。</p>
<p>しかし、アイコンを制作していたら時間がかかってしまいます。<br />
ましてやそんなアイコンを作る絵心・センスがない・・・<br />
お客さんには費用がかかってしまう・・・</p>
<p>そんな時には、フリーで使えるアイコンを使用するのが良いかと思います。<br />
僕はアイコンつくれないので、必死に探して、適切なものを使用しています。</p>
<p>早速紹介したいと思います。</p>
<h2>FLAT ICON DESIGN</h2>
<p><img decoding="async" loading="lazy" class="alignnone wp-image-7208" src="/uploads-archive/2015/03/20150331-1024x616.jpg" alt="20150331" width="640" height="385" srcset="/uploads-archive/2015/03/20150331-1024x616.jpg 1024w, /uploads-archive/2015/03/20150331-300x181.jpg 300w, /uploads-archive/2015/03/20150331-228x137.jpg 228w, /uploads-archive/2015/03/20150331.jpg 1289w" sizes="(max-width: 640px) 100vw, 640px" /></p>
<p>流行り(?)のフラットデザインのアイコンが豊富にあります！<br />
しっかりしたアイコンなのに無料！<br />
ai,eps,jpg,png,svgの形式でダウンロードできます。</p>
<p>&nbsp;</p>
<p><a class="link" href="http://flat-icon-design.com/" target="_blank">FLAT ICON DESIGN -フラットアイコンデザイン-</a></p>
<h2>Endless Icons</h2>
<p><img decoding="async" loading="lazy" class="alignnone wp-image-7209" src="/uploads-archive/2015/03/Endless-Icons-Free-Icon-Library-1024x616.jpg" alt="Endless Icons  Free Icon Library" width="640" height="385" srcset="/uploads-archive/2015/03/Endless-Icons-Free-Icon-Library-1024x616.jpg 1024w, /uploads-archive/2015/03/Endless-Icons-Free-Icon-Library-300x181.jpg 300w, /uploads-archive/2015/03/Endless-Icons-Free-Icon-Library-228x137.jpg 228w, /uploads-archive/2015/03/Endless-Icons-Free-Icon-Library.jpg 1289w" sizes="(max-width: 640px) 100vw, 640px" /></p>
<p>シルエット的なシンプルなアイコンが揃っています。<br />
Tag付されており、探しやすいです！</p>
<p>&nbsp;</p>
<p><a class="link" href="http://www.endlessicons.com/" target="_blank">Endless Icons | Free Icon Library</a></p>
<h2>アイコン配布中！</h2>
<p><img decoding="async" loading="lazy" class="alignnone wp-image-7210" src="/uploads-archive/2015/03/cab8670d0bc3a71b540517ac73af0e34-1024x616.jpg" alt="リアルアイコン一覧　～TOUCH＆SLIDEが運営する編集可能なアイコンがダウンロードできる「アイコン配布中！」～" width="640" height="385" srcset="/uploads-archive/2015/03/cab8670d0bc3a71b540517ac73af0e34-1024x616.jpg 1024w, /uploads-archive/2015/03/cab8670d0bc3a71b540517ac73af0e34-300x181.jpg 300w, /uploads-archive/2015/03/cab8670d0bc3a71b540517ac73af0e34-228x137.jpg 228w, /uploads-archive/2015/03/cab8670d0bc3a71b540517ac73af0e34.jpg 1289w" sizes="(max-width: 640px) 100vw, 640px" /></p>
<p>今はもうあんまりなくなってしまったかもしれない・・・リアルなアイコン、<br />
そしてシルエットアイコンをダウンロードできます。<br />
リクエストも受付しているようです！</p>
<p>&nbsp;</p>
<p><a class="link" href="http://icon.touch-slide.jp/real/" target="_blank">リアルアイコン一覧　～TOUCH＆SLIDEが運営する編集可能なアイコンがダウンロードできる「アイコン配布中！」～</a></p>
<p>&nbsp;</p>
<p>一昔前ならこのクオリティのアイコン達は無料なんかでゲット出来なかったのですが、<br />
いい時代になりました・・・（みんな同じアイコンばっかり使って画一的になりそう気もしますが・・・）</p>
<p>本当は自分でサッと作れたらいいなぁ。。。</p>


フラットアイコンやシンプルなアイコンを無料でダウンロードできるサイト

<p>2014年の秋に正式にW3Cから勧告されたHTML5では、</p>
<p>それまで一部のブラウザ用に作られたタグで、</p>
<p>正式なタグとして採用されたものがいくつかあります。</p>
<p>その中でも、利用すると便利だと思われる&lt;ruby&gt;というタグがあります。</p>
<p>このタグは感じなどに読み仮名などをルビとして表示させるためのものです。</p>
<p>&nbsp;</p>
<p>↓<ruby>表示例<rp>(</rp><rt>ひょうじれい</rt><rp>)</rp></ruby></p>
<p><a class="demo" href="/demo/ninomiya/70/" target="_blank">DEMO</a></p>
<p>&nbsp;</p>
<p>基本的には、以下のように記述して使います。</p>

		<div id="crayon-64954015859e2846033237" 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></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;ruby&gt;文字A&lt;rt&gt;るびa&lt;/rt&gt;文字B&lt;rt&gt;るびb&lt;/rt&gt;&lt;/ruby&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-64954015859e2846033237-1">1</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-64954015859e2846033237-1"><span class="crayon-h">&lt;</span><span class="crayon-i">ruby</span><span class="crayon-h">&gt;</span>文字<span class="crayon-i">A</span><span class="crayon-h">&lt;</span><span class="crayon-i">rt</span><span class="crayon-h">&gt;</span>るび<span class="crayon-i">a</span><span class="crayon-h">&lt;</span>/<span class="crayon-i">rt</span><span class="crayon-h">&gt;</span>文字<span class="crayon-i">B</span><span class="crayon-h">&lt;</span><span class="crayon-i">rt</span><span class="crayon-h">&gt;</span>るび<span class="crayon-i">b</span><span class="crayon-h">&lt;</span>/<span class="crayon-i">rt</span><span class="crayon-h">&gt;</span><span class="crayon-h">&lt;</span>/<span class="crayon-i">ruby</span><span class="crayon-h">&gt;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>まず、&lt;ruby&gt;でルビを付ける対象の文字全体を囲みます。</p>
<p>次に、ルビを付けたい文字のあとに、&lt;rt&gt;タグでルビの文字を記述すれば完了です。</p>
<p>&nbsp;</p>
<p>ただ、Firefoxでは、現時点(Firefox36)ではrubyの表示に対応しておらず(プラグインが必要; <a href="http://rockridge.hatenablog.com/entry/2015/02/22/003049" target="_blank">38より正式に対応予定</a> →追記(2015/05/22)：無事38から正式に対応されたようです<a href="https://hacks.mozilla.org/2015/05/trainspotting-firefox-38/" target="_blank">&lt;参考&gt;</a>)、</p>
<p>そういったruby非対応のブラウザに配慮したい場合は、以下のように記述します。</p>

		<div id="crayon-64954015859e6117137372" 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></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;ruby&gt;文字A&lt;rp&gt;(&lt;/rp&gt;&lt;rt&gt;るびa&lt;/rt&gt;&lt;rp&gt;)&lt;/rp&gt;文字B&lt;rp&gt;(&lt;/rp&gt;&lt;rt&gt;るびb&lt;/rt&gt;&lt;rp&gt;)&lt;/rp&gt;&lt;/ruby&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-64954015859e6117137372-1">1</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-64954015859e6117137372-1"><span class="crayon-h">&lt;</span><span class="crayon-i">ruby</span><span class="crayon-h">&gt;</span>文字<span class="crayon-i">A</span><span class="crayon-h">&lt;</span><span class="crayon-i">rp</span><span class="crayon-h">&gt;</span><span class="crayon-sy">(</span><span class="crayon-h">&lt;</span>/<span class="crayon-i">rp</span><span class="crayon-h">&gt;</span><span class="crayon-h">&lt;</span><span class="crayon-i">rt</span><span class="crayon-h">&gt;</span>るび<span class="crayon-i">a</span><span class="crayon-h">&lt;</span>/<span class="crayon-i">rt</span><span class="crayon-h">&gt;</span><span class="crayon-h">&lt;</span><span class="crayon-i">rp</span><span class="crayon-h">&gt;</span><span class="crayon-sy">)</span><span class="crayon-h">&lt;</span>/<span class="crayon-i">rp</span><span class="crayon-h">&gt;</span>文字<span class="crayon-i">B</span><span class="crayon-h">&lt;</span><span class="crayon-i">rp</span><span class="crayon-h">&gt;</span><span class="crayon-sy">(</span><span class="crayon-h">&lt;</span>/<span class="crayon-i">rp</span><span class="crayon-h">&gt;</span><span class="crayon-h">&lt;</span><span class="crayon-i">rt</span><span class="crayon-h">&gt;</span>るび<span class="crayon-i">b</span><span class="crayon-h">&lt;</span>/<span class="crayon-i">rt</span><span class="crayon-h">&gt;</span><span class="crayon-h">&lt;</span><span class="crayon-i">rp</span><span class="crayon-h">&gt;</span><span class="crayon-sy">)</span><span class="crayon-h">&lt;</span>/<span class="crayon-i">rp</span><span class="crayon-h">&gt;</span><span class="crayon-h">&lt;</span>/<span class="crayon-i">ruby</span><span class="crayon-h">&gt;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>ここではルビの文字を括弧で<ruby>括<rp>(</rp><rt>くく</rt><rp>)</rp></ruby>るようにします。</p>
<p>&lt;rp&gt;で囲った文字は、</p>
<p>&lt;ruby&gt;に対応したブラウザでは表示されず、非対応のブラウザのみで表示されるため、</p>
<p>非対応のブラウザではカッコ書きでルビの文字が表示されるようになります。</p>
<p>&nbsp;</p>
<p>ルビがたくさんあって記述が面倒な場合は、以下のように&lt;rt&gt;や&lt;rp&gt;の閉じタグを省略することも可能です。</p>

		<div id="crayon-64954015859e7760458886" 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></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;ruby&gt;文字A&lt;rp&gt;(&lt;rt&gt;るびa&lt;rp&gt;)&lt;/rp&gt;文字B&lt;rp&gt;(&lt;rt&gt;るびb&lt;rp&gt;)&lt;/ruby&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-64954015859e7760458886-1">1</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-64954015859e7760458886-1"><span class="crayon-h">&lt;</span><span class="crayon-i">ruby</span><span class="crayon-h">&gt;</span>文字<span class="crayon-i">A</span><span class="crayon-h">&lt;</span><span class="crayon-i">rp</span><span class="crayon-h">&gt;</span><span class="crayon-sy">(</span><span class="crayon-h">&lt;</span><span class="crayon-i">rt</span><span class="crayon-h">&gt;</span>るび<span class="crayon-i">a</span><span class="crayon-h">&lt;</span><span class="crayon-i">rp</span><span class="crayon-h">&gt;</span><span class="crayon-sy">)</span><span class="crayon-h">&lt;</span>/<span class="crayon-i">rp</span><span class="crayon-h">&gt;</span>文字<span class="crayon-i">B</span><span class="crayon-h">&lt;</span><span class="crayon-i">rp</span><span class="crayon-h">&gt;</span><span class="crayon-sy">(</span><span class="crayon-h">&lt;</span><span class="crayon-i">rt</span><span class="crayon-h">&gt;</span>るび<span class="crayon-i">b</span><span class="crayon-h">&lt;</span><span class="crayon-i">rp</span><span class="crayon-h">&gt;</span><span class="crayon-sy">)</span><span class="crayon-h">&lt;</span>/<span class="crayon-i">ruby</span><span class="crayon-h">&gt;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>&nbsp;</p>
<p>&nbsp;</p>
<p>以下のように、ルビを付けたい文字を&lt;rb&gt;で囲む方法もあります。</p>

		<div id="crayon-64954015859e8657677934" 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></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;ruby&gt;&lt;rb&gt;文字A&lt;/rb&gt;&lt;rp&gt;(&lt;/rp&gt;&lt;rt&gt;るびa&lt;/rt&gt;&lt;rp&gt;)&lt;/rp&gt;&lt;rb&gt;文字B&lt;/rb&gt;&lt;rp&gt;(&lt;/rp&gt;&lt;rt&gt;るびb&lt;/rt&gt;&lt;rp&gt;)&lt;/rp&gt;&lt;/ruby&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-64954015859e8657677934-1">1</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-64954015859e8657677934-1"><span class="crayon-h">&lt;</span><span class="crayon-i">ruby</span><span class="crayon-h">&gt;</span><span class="crayon-h">&lt;</span><span class="crayon-i">rb</span><span class="crayon-h">&gt;</span>文字<span class="crayon-i">A</span><span class="crayon-h">&lt;</span>/<span class="crayon-i">rb</span><span class="crayon-h">&gt;</span><span class="crayon-h">&lt;</span><span class="crayon-i">rp</span><span class="crayon-h">&gt;</span><span class="crayon-sy">(</span><span class="crayon-h">&lt;</span>/<span class="crayon-i">rp</span><span class="crayon-h">&gt;</span><span class="crayon-h">&lt;</span><span class="crayon-i">rt</span><span class="crayon-h">&gt;</span>るび<span class="crayon-i">a</span><span class="crayon-h">&lt;</span>/<span class="crayon-i">rt</span><span class="crayon-h">&gt;</span><span class="crayon-h">&lt;</span><span class="crayon-i">rp</span><span class="crayon-h">&gt;</span><span class="crayon-sy">)</span><span class="crayon-h">&lt;</span>/<span class="crayon-i">rp</span><span class="crayon-h">&gt;</span><span class="crayon-h">&lt;</span><span class="crayon-i">rb</span><span class="crayon-h">&gt;</span>文字<span class="crayon-i">B</span><span class="crayon-h">&lt;</span>/<span class="crayon-i">rb</span><span class="crayon-h">&gt;</span><span class="crayon-h">&lt;</span><span class="crayon-i">rp</span><span class="crayon-h">&gt;</span><span class="crayon-sy">(</span><span class="crayon-h">&lt;</span>/<span class="crayon-i">rp</span><span class="crayon-h">&gt;</span><span class="crayon-h">&lt;</span><span class="crayon-i">rt</span><span class="crayon-h">&gt;</span>るび<span class="crayon-i">b</span><span class="crayon-h">&lt;</span>/<span class="crayon-i">rt</span><span class="crayon-h">&gt;</span><span class="crayon-h">&lt;</span><span class="crayon-i">rp</span><span class="crayon-h">&gt;</span><span class="crayon-sy">)</span><span class="crayon-h">&lt;</span>/<span class="crayon-i">rp</span><span class="crayon-h">&gt;</span><span class="crayon-h">&lt;</span>/<span class="crayon-i">ruby</span><span class="crayon-h">&gt;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>&lt;rb&gt;はHTML5が正式に勧告される前に廃止されそうになったのですが、</p>
<p>より複雑なルビの表記に対応させるために、採用されることになりました。</p>
<p>また、さらに&lt;ruby&gt;タグ内全体のルビを下付けで表示させる&lt;rtc&gt;というタグも採用されていますが、</p>
<p>ブラウザで表示に対応しているものが<ruby>殆<rp>(</rp><rt>ほとん</rt><rp>)</rp></ruby>どないようですので、省略いたします。</p>
<p>&nbsp;</p>
<p>使ってみると意外と簡単に使えますので、</p>
<p>ぜひお試しください。</p>
<p>&nbsp;</p>
<h3>参考サイト</h3>
<p><a href="http://www.htmq.com/html5/ruby.shtml" target="_blank">&amp;lt;ruby&amp;gt;－HTML5タグリファレンス</a></p>
<p><a href="http://www.w3.org/TR/html5/" target="_blank">HTML5</a></p>
<p><a href="http://www.html5.jp/tag/elements/ruby.html" target="_blank">ruby 要素 &#8211; テキストレベルの意味づけ &#8211; HTML要素 &#8211; HTML5 タグリファレンス &#8211; HTML5.JP</a></p>
<p><a href="http://rockridge.hatenablog.com/entry/2015/02/22/003049" target="_blank">Firefox 38でルビ機能が有効化へ &#8211; Mozilla Flux</a></p>

Company

Our Solutions

Support

News

Blog

Blogブログ

カテゴリーから探す

年別から見る

記事一覧

2015/05/13

2015/05/12

2015/04/22

2015/04/22

2015/04/22

2015/04/21

2015/04/15

2015/04/15

2015/04/15

2015/04/15

2015/04/14

2015/04/09

2015/04/08

2015/04/08

2015/04/07

2015/04/07

2015/04/01

2015/04/01