ナビゲーションを上部に隠すjQueryを実装してみました

jQueryでアコーディオンを横向きに開閉する。
HTMLを用意する
&lt;div&gt; 
　&lt;dl&gt; 
　　&lt;dt id=&#8221;step1&#8243;&gt;&lt;span&gt;Step.1&lt;/span&gt;&lt;/dt&gt; 
　　&lt;dd&gt;&lt;p&gt;Lorem ipsum　（中略）　venenatis.&lt;/p&gt;&lt;/dd&gt; 
　　&lt;dt id=&#8221;step2&#8243;&gt;&lt;span&gt;Step.2&lt;/span&gt;&lt;/dt&gt; 
　　&lt;dd&gt;&lt;p&gt;Lorem ipsum　（中略）　venenatis.&lt;/p&gt;&lt;/dd&gt; 
　　&lt;dt id=&#8221;step3&#8243;&gt;&lt;span&gt;Step.3&lt;/span&gt;&lt;/dt&gt; 
　　&lt;dd&gt;&lt;p&gt;Lorem ipsum　（中略）　venenatis.&lt;/p&gt;&lt;/dd&gt; 
　&lt;/dl&gt; 
 &lt;/div&gt;
&nbsp;
CSSを用意する
body{ 
 background:#252422; 
 } 
 div{ 
 width:800px; 
 height:300px; 
 margin:50px auto; 
 overflow:hidden; 
 } 
 dl{ 
 width:900px; 
 height:300px; 
 } 
 dt{ 
 width:35px; 
 height:300px; 
 float:left; 
 } 
 dt span{ 
 display:block; 
 width:100%; 
 height:100%; 
 text-indent:-9999px; 
 } 
 dt span.over{ 
 cursor:pointer; 
 } 
 dt span.selected{ 
 cursor:default; 
 } 
 dt#step1 span{ 
 background:url(&#8220;images/background-1.jpg&#8221;); 
 } 
 dt#step1 span.over{ 
 background:url(&#8220;images/background-1-over.jpg&#8221;); 
 } 
 dt#step1 span.selected{ 
 background:url(&#8220;images/background-1-selected.jpg&#8221;); 
 } 
 dt#step2 span{ 
 background:url(&#8220;images/background-2.jpg&#8221;); 
 } 
 dt#step2 span.over{ 
 background:url(&#8220;images/background-2-over.jpg&#8221;); 
 } 
 dt#step2 span.selected{ 
 background:url(&#8220;images/background-2-selected.jpg&#8221;); 
 } 
 dt#step3 span{ 
 background:url(&#8220;images/background-3.jpg&#8221;); 
 } 
 dt#step3 span.over{ 
 background:url(&#8220;images/background-3-over.jpg&#8221;); 
 } 
 dt#step3 span.selected{ 
 background:url(&#8220;images/background-3-selected.jpg&#8221;); 
 } 
 dd{ 
 margin:0; 
 width:695px; 
 height:300px; 
 float:left; 
 background:#D4D0C8; 
 overflow:hidden; 
 } 
 dd p{ 
 width:655px; 
 text-indent:1em; 
 padding:20px; 
 }
&nbsp;
jQueryを用意する
$(function(){ 
        $(&#8220;dd:not(:first)&#8221;).css(&#8220;width&#8221;,&#8221;0px&#8221;); 
        $(&#8220;dt:first span&#8221;).addClass(&#8220;selected&#8221;); 
        $(&#8220;dl dt&#8221;).click(function(){ 
                 if($(&#8220;+dd&#8221;,this).css(&#8220;width&#8221;)==&#8221;0px&#8221;){ 
                 $(&#8220;dt:has(.selected) +dd&#8221;).animate({&#8220;width&#8221;:&#8221;0px&#8221;}); 
                 $(&#8220;+dd&#8221;,this).animate({&#8220;width&#8221;:&#8221;695px&#8221;}); 
                 $(&#8220;dt span&#8221;).removeClass(&#8220;selected&#8221;); 
                 $(&#8220;span&#8221;,this).addClass(&#8220;selected&#8221;); 
                 } 
         }).mouseover(function(){ 
          $(&#8220;span&#8221;,this).addClass(&#8220;over&#8221;); 
         }).mouseout(function(){ 
          $(&#8220;span&#8221;,this).removeClass(&#8220;over&#8221;); 
         }); 
 }); 
<a href="http://poe.ud-ac.com/JavaScript_SelfStudy/other/sample2/samp6.html" target="_blank">DEMOはコチラ</a>
「説明」
①　 $(&#8220;dd:not(:first)&#8221;).css(&#8220;width&#8221;,&#8221;0px&#8221;);
初期状表示態の設定では、１番目の以外のパネル(dd要素)のwidthを０pxに変更します。
②　$(&#8220;dt:first span&#8221;).addClass(&#8220;selected&#8221;);
１番目のdt要素に対してclass属性「selected」を追加し、展開中のラベルスタイルに
設定します。
③　if($(&#8220;+dd&#8221;,this).css(&#8220;width&#8221;)==&#8221;0px&#8221;){
if分で、クリックされたラベルに対応するパネル(dd要素）の横幅が0の場合の処理を
記述します。
④　 $(&#8220;dt:has(.selected) +dd&#8221;).animate({&#8220;width&#8221;:&#8221;0px&#8221;});
ラベルがクリックされたら、class属性が「selected」の要素を含むdt要素の次に登場する
dd要素の幅(width)を0に変更します。幅の変更には、任意のCSSプロパティの値を 
アニメーション付きで変化させるanimate()を使います。これで展開中のパネルが閉じます。
⑤　 $(&#8220;+dd&#8221;,this).animate({&#8220;width&#8221;:&#8221;695px&#8221;});
同様に、クリックされた要素の次に登場するdd要素の幅(width)をanimate()で695pxに変更します。
これで、クリックされたラベルに対応するパネルが開きます。
⑥　  $(&#8220;dt span&#8221;).removeClass(&#8220;selected&#8221;); 
$(&#8220;span&#8221;,this).addClass(&#8220;selected&#8221;);
クリックされたラベルを選択状態にするため、すべてのspan要素からclass属性「selected」
を取り除き、クリックされたdt要素内のspan要素にclass属性「selected」を再設定します。
⑦　}).mouseover(function(){ 
$(&#8220;span&#8221;,this).addClass(&#8220;over&#8221;); 
}).mouseout(function(){ 
$(&#8220;span&#8221;,this).removeClass(&#8220;over&#8221;); 
});
最後にmouseover/mouseoutイベントでロールオーバーの処理を設定したら完成です。

アコーディオンを横向きに開閉する

HTML5のSVG + jQueryで画像の拡大縮小

案件でfacebookアプリ（iframe）を作成しましたから、その流れを軽くまとめてみたいと思います。
&nbsp;
１、アプリの作成
自分が持つfacebookアカウントで<a href="https://developers.facebook.com" target="_blank">開発者サイト</a>でアプリを作成できます。 
※１アプリ作成するのに、モバイル設定もしくは支払方法を設定する必要あります。
※２モバイル設定には、確認コードをもちいて携帯メールの認証を行います。
確認コードを受信できるため、迷惑メール解除する必要があります。
迷惑メール解除のドメインは、facebook.comではなく、facebookmail.comです。
アプリ作成完了したら、App IDとApp Secretがもらえます。
&nbsp;
２、アプリの設定
「Facebook上のアプリ」と「ページタブ」両項目のみ設定します（その前に、開発サーバを整備し、アプリのリンクを確定する必要です）。
ページタグはfacebookからアクセス用の設定項目です。
「アカウント権限」項目に、管理者の追加ができます。
&nbsp;
３、facebookページの作成＆設定
facebookの一番下（今は無限スクロールのせいで、なかなかたどり着けない）に「ページを作成」のリンクがあるから、それをクリックして、facebookページの作成ができます。
facebookページを作成できたら、ページの上方（管理者の場合）には「Facebookページを編集」のプルダウンメニューがあるから、そこから「権限の編集」でfacebookページを公開することができ、「管理人」で管理者の指定ができます。
&nbsp;
４、アプリfacebookページの関連付け（facebookページにタブ追加）
アプリの管理ページの左メニューの「App Details」には、「アプリのページ」のところに、先作成したfacebookページのプルダウンがでてくるはずですが、もし出てこなかった場合は、手動アクセスで下記URLをアクセスして、タブを追加します。
https://www.facebook.com/add.php?api_key=[App ID]&amp;pages=1
&nbsp;
以上でfacebook側の準備がすべて整いました。
&nbsp;
５、php-sdkをダウンロード
https://github.com/facebook/facebook-php-sdk　からダウンロードできます。
&nbsp;
アプリ開発編は次を期待してください。
IEとSafariでは、サードパーティ クッキーのSetが問題になっているから、次回で解説いたします。
&nbsp;
※app設定をするのに、Privacy Policy URLとTerms of Service URLがないと、後facebookが怒るから、忘れずにつけましょう。App Detailの下で設定できます。
&nbsp;

facebookアプリ（iframe）を作成してみた

出所：<a href="http://www.worksap.co.jp/topics/news/2012/1026.html" target="_blank">http://www.worksap.co.jp/topics/news/2012/1026.html</a>
&nbsp;
大変参考になる記事を見つけたのでメモ。
&nbsp;
<h4>主に大手企業ECサイト、通販運営者71人の回答</h6>
<table>
<tbody>
<tr>
<td>SNSプロモーション</td>
<td>39</td>
<td>55%</td>
</tr>
<tr>
<td>スマホ対応</td>
<td>32</td>
<td>45%</td>
</tr>
<tr>
<td>顧客データの分析</td>
<td>28</td>
<td>39%</td>
</tr>
<tr>
<td>リピート率向上</td>
<td>26</td>
<td>37%</td>
</tr>
<tr>
<td>SEO</td>
<td>19</td>
<td>27%</td>
</tr>
<tr>
<td>他社との差別化</td>
<td>18</td>
<td>25%</td>
</tr>
<tr>
<td>O2O連携</td>
<td>18</td>
<td>25%</td>
</tr>
<tr>
<td>リスティング</td>
<td>14</td>
<td>20%</td>
</tr>
<tr>
<td>システムコストの増大</td>
<td>13</td>
<td>18%</td>
</tr>
<tr>
<td>システム陳腐化</td>
<td>12</td>
<td>17%</td>
</tr>
<tr>
<td>セキュリティ脆弱性</td>
<td>11</td>
<td>15%</td>
</tr>
<tr>
<td>ブラックボックス化</td>
<td>9</td>
<td>13%</td>
</tr>
<tr>
<td>アフィリエイト</td>
<td>7</td>
<td>10%</td>
</tr>
<tr>
<td>バナー広告</td>
<td>6</td>
<td>8%</td>
</tr>
<tr>
<td>システム規模変更</td>
<td>3</td>
<td>4%</td>
</tr>
</tbody>
</table>
&nbsp;
<h4>EC・通販関連システムの利用年数</h6>
<a href="/uploads-archive/2012/10/1.jpg"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-524" title="1" src="/uploads-archive/2012/10/1.jpg" alt="" width="362" height="217" srcset="/uploads-archive/2012/10/1.jpg 362w, /uploads-archive/2012/10/1-300x179.jpg 300w, /uploads-archive/2012/10/1-228x136.jpg 228w" sizes="(max-width: 362px) 100vw, 362px" /></a>
&nbsp;
なるほどと思える結果。
5年以上前のECシステムでスマホ、ソーシャルコマースが十分考慮されているものは無いはず。
システム的な小回りが効かないことに加え
1日のサイト停止がうん千万円という機械損失になる大規模サイト特有の悩みともとれる。
&nbsp;
<h4>サイト運営業務に関する外部委託業務範囲</h6>
<a href="/uploads-archive/2012/10/2.jpg"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-528" title="2" src="/uploads-archive/2012/10/2.jpg" alt="" width="362" height="217" srcset="/uploads-archive/2012/10/2.jpg 362w, /uploads-archive/2012/10/2-300x179.jpg 300w, /uploads-archive/2012/10/2-228x136.jpg 228w" sizes="(max-width: 362px) 100vw, 362px" /></a>
広告関連と思いきや、以外にもデザインが一番多い。
クリエイティブにこだわりがあるということはもちろんのこと、
古めのシステムはカート、決済、ポイントなどECとしての機能が重視されており、
CMSなど見た目の制御があまり考えられていないことも起因していると思う。

大手ECサイト、8割がリニューアルを検討

制作会社を経営していて、日々、どのように生産性を高められるか？ひいては、会社、社員が成長をして幸せを感じることは出来るか？
ということを考え、様々な文化、制度を取り込み、やってみて意味を感じる、定着をする都度採用をしてきていますが、たまたま、RSSを流し読みしていたところ、初めてみる施策だったので考察してみました。
<a href="http://gunosy.com/redirect?a=736244&amp;c=coHJOVbuGIU3.&amp;t=1&amp;url=http%3A%2F%2Fblog.8bit.co.jp%2F%3Fp%3D7111" target="_blank">少人数の制作会社こそ終礼は重要 </a>
読んで字のごとく、業務の始まりにあるのが、朝礼。終わりにあるのが、終礼です。
弊社でも朝礼を取り組み初めてからは、タスクの確認や納期が迫っているものなどは朝に確認が出来たりと機能しています。
もっと深く意味を考えると、
<ul>
<li>毎朝通勤時には自分のやることを認識していて、すぐに業務モードに入ることが出来る。</li>
<li>全員が集まるので遅刻出来ない空気感を作れる。</li>
<li>それぞれが自分で言葉を発するので、発言の場となる。</li>
</ul>
などを目論んでいます。
さらに、朝礼で片付けてしまうとぼやけてしまうので、この朝の10分で勢いづける意味を込めて「Ten Minuets Charge」略してTMCという固有名詞をつけて定着に至りました。
&nbsp;
<h2>抜粋</h3>
<ul>
<li>タスクのやり忘れをなくす。</li>
<li>定時で帰ることのきっかけになれば。</li>
<li>間に合わせる作業スピードを付けられるように。</li>
</ul>
ちょうど、弊社が取り組んでいる週末の全社会議に似ているのかと思います。
&nbsp;
その他、今まで作ってきた制度を考えると以下の４つは機能しています。
<ul>
<li>TMC（朝礼）
<ul>
<li>一人一人が当日のタスクを発表
<ul>
<li>通勤時には業務モードに入っているなどの意味を込めてます。</li>
</ul>
</li>
</ul>
</li>
<li>セルフNO残業デー（定時帰社日）
<ul>
<li>自分の好きな曜日にNO残業デーを設け、みんなに周知を行い、お互いに迷惑が及ばない前提で定時帰社曜日を設ける。
<ul>
<li>ブログ記事にも書いてあるように、なんとなく帰りにくい雰囲気などが発生しないようにという思惑があります。</li>
</ul>
</li>
</ul>
</li>
<li>ナレッジシェア（ブログ記事発表）
<ul>
<li>毎週水曜日の夕方、ブログ形式にてためになるで情報を発表します。
<ul>
<li>アウトプットする能力、常に情報収集、技術習得を目指すアンテナ感度の向上、なによりSEO効果（※実際に、デザイナーが書いた技術ブログがきっかけで受注したことも！）を狙っています。</li>
</ul>
</li>
</ul>
</li>
<li>案件進捗会議（これだけ名前がない！）
<ul>
<li>毎週金曜日の夕方、一週間の締めとしての会議を行っています。</li>
</ul>
</li>
</ul>
<h2> まとめ</h3>
どのようになったらよりよくなるかということを考えるのが非常に好きです。うまく機能せずに自然消滅したものや、取り組んでみたものの何かしっくりこずにやめたものまで数知れずありますが、これからも積極的によりよいものは取り込んでいくので、社員のみんも提案してくれたらうれしいなと思います。

終礼という制度についての提案

弊社では、MTを利用して、お客さまのwebサイトを作成することがよくあります。
そしてその運用もすることが多いのですが、
いつも通り、新しい記事を作り、カテゴリをチェックし、公開したら・・・
カテゴリのチェックがすべて外れて保存がされておりました。
何回やってもダメなので、調べてみると、Firefoxのver16のバグとのこと。
MTのverは、MT4.12とMT5.02でした。
&nbsp;
解決方法がシックス・アパートのよくある質問に載っておりました。
<a href="http://www.movabletype.jp/faq/firefox-16-patches.html" target="_blank">Firefox 16 でカテゴリおよびフォルダの選択が保存できない。</a>
&nbsp;
verが４つしかなく、自分のverにあったものがないっっ！！
&nbsp;
と思いましたが、強行で、ver4.38のpatchをダウンロードし、アップしてみたところ、
無事修正されました！！
&nbsp;
&nbsp;
方法は簡単ですが、自分でサーバー情報いじれない場合は、
別のブラウザを使うしかないようですね。
&nbsp;
firefox早くバージョンアップしないかな〜 
最後に面白い記事を紹介。
デザインする自分にとって、ものすごく同意する記事です。
<a href="http://gori.me/it/22110">デザインをする人もデザインを依頼する人も見てもらいたい！「デザインができるまで」が話題に！ | gori.me</a> 
<a href="http://gori.me/it/22125">クライアントよ、お前の依頼の大変さを思い知れ！これが「デザイン修正」だ！ | gori.me</a>
&nbsp;

MTのカテゴリが指定しても反映されない・・・[Firefox]

本日、参加してきました。
多いに刺激を受けると同時に、経産省主導で話題喚起を行なって欲しいと心底思いました。
経産省の<a href="http://www.cbec.go.jp/index_ja_jpy.html">越境EC応援ポータル</a>もいいのですが、もっともっと活性化させてほしいです。
<h2> 経済産業大臣の枝野幸男さんから挨拶</h3>
まずは、経済産業大臣の枝野幸男さんから挨拶があり、
次代のソニー、ホンダのような新事業創出を目指している。
成熟した経済で31年ぶりに貿易赤字といったことを話して下さいました。
<h2>南場さんの講演</h3>
黒字まで4年間かかった。
<h3> ■起業をしやすいかどうか？</h4>
<ol>
<li>まったく尊敬されない</li>
<li>起業家の個人保証・・・リスクマネーが乏しい
<ul>
<li>大株主に器量 金融系のスタンスは変わらず</li>
</ul>
</li>
<li>短期黒字化重視。小スケール化
<ul>
<li>最初から言うと虚言癖あるかいされる。</li>
</ul>
</li>
<li>世界の発送や人的ネットワークから隔離されている。</li>
<li>大企業とビジネスをやりにくい
<ul>
<li>実績主義だから。ベンチャーにそんなものあるわけない</li>
</ul>
</li>
<li>セカンドチャンスは厳しい</li>
<li>成功するとやっかまれる?</li>
</ol>
<h3>■3つ の思い</h4>
・目標達成の喜びを分かち合う高揚感を真ん中に捉えた経営
・人材の質に妥協しない
・work evidenceに言い訳しない
<h3>■阿呆か物好きしか起業しない国で良いのか？</h4>
・グローバルNo.1の成功事例
・グローバルビジネスリーダー育成（日の丸を掲げたい愛国心が強い）
<h2>まとめ</h3>
日米起業協議会のレポートを踏まえてという前提があったため、日米の環境差などが語られる場面がほとんどであった。我々のように越境ECを通じアジアを見据えた事業展開を目論む企業への言及が欲しかった。質問をしたかったが時間がないためか、その時間がなかった。
また、参加していた方々について次代を担うベンチャー企業側が少なく、VC側か完了の方々のほうが多かったのが残念であった。

「次代を担うベンチャー企業の創出を目指して」シンポジウムを参加して

IE対策 &#8211; IEと仲良く付き合う方法 &#8211;

写真を自動的に加工してくれるjQuery「vintage.js」

見出しはコンテンツの中でも重要な場所ですが、 
デザインを考えるときに、迷うことが多い場所です。
&nbsp;
特にシンプルなデザインが求められている場合、 
シンプルにしすぎて、軽すぎたり、寂しい印象になってしまったり、 
それを避けようとして、シンプルから離れてしまったりするなど、 
難しいと感じることが多いです。
&nbsp;
そこで今回は、シンプルな見出しのデザインで、 
一味違うと思うサイトを探してみることにしました。
&nbsp;
<hr />
<a href="http://www.menard.co.jp/" target="_blank">MENARD</a> 
<a href="http://www.menard.co.jp/" target="_blank"><img decoding="async" src="/uploads-archive/2012/10/top_img1.jpg" alt="" /></a>
&nbsp;
見出し画像 
<img decoding="async" style="width: 100%;" src="/uploads-archive/2012/10/header_img1_1.jpg" alt="" />
<img decoding="async" loading="lazy" style="width: 100%;" src="/uploads-archive/2012/10/header_img1_2.jpg" alt="" width="779" height="60" />
&nbsp;
大きな見出し、小さな見出しともに、左端に緩やかなグラデーションのかかったマークがあります。 
これだけだと、よく見られる一般的なものですが、 
大きな見出しのほうは、マークの４つの角が、半透明程度に削られています。 
小さな見出しのほうも、上側だけが、2px程度の角丸になっていました。
&nbsp;
下に入れられたボーダーは、両者とも、グラデーションが入っています。 
大きなほうは、一直線なグラデーションではなく、ランダムなグラデーションがかかっていました。 
これによって、ただの線という感じから脱しています。
&nbsp;
ボーダーの下には少し幅のある淡いドロップシャドウがつけられていて、ほんのりと立体感が出ています。 
大きな見出しのほうは、ドロップシャドウが真ん中ほど幅広くなっていて、より質感が出されていました。
&nbsp;
大きな見出しは、タイトルと説明の文字色のトーンを微妙に変えてメリハリをつけ、 
右端に添えられた英語のタイトルは、グラデーションがかけられていました。
&nbsp;
<a href="http://madamefigaro.jp/" target="_blank">FIGARO.jp</a>
<a href="http://madamefigaro.jp/" target="_blank"><img decoding="async" src="/uploads-archive/2012/10/top_img2.jpg" alt="" /></a>
&nbsp;
見出し画像
<img decoding="async" src="/uploads-archive/2012/10/header_img2.jpg" alt="" />
&nbsp;
とてもシンプルなのですが、フォントの使い方や、文字の配置の仕方が面白く、印象的です。
&nbsp;
<a href="http://coetoiro.jp/" target="_blank">コエトイロ</a>
<a href="http://coetoiro.jp/" target="_blank"><img decoding="async" src="/uploads-archive/2012/10/top_img3.jpg" alt="" /></a>
&nbsp;
見出し画像 
<img decoding="async" src="/uploads-archive/2012/10/header_img3.jpg" alt="" />
&nbsp;
見出しはシンプルなアイコンと３本線と筆文字風のフォントで構成されたシンプルなものですが、 
和の感じが十分伝わってきます。
 

和柄を感じさせる線の使い方と、ひっそり右端でフェイドアウトしているところが、 
より和の感じを出しているように思います。
&nbsp;
&nbsp;
<hr />
<h2></h2>
<h2>まとめ</h2>
今回シンプルな見出しを探してみたところ、 
文字だけだったり、 
点線や実践一本、１色ののマークやアイコンが左端にひとつあるなどのものが、 
大半を占めていました。
 

ケース・バイ・ケースではありますが、 
シンプルなデザインをする場合、装飾に頼らず、レイアウトによって 
見出しを引き立てる技術が、より重要になってくるのだということを、 
感じました。

シンプル系の見出しデザインの一味違うサイトを探す

こういうのも利用するといいですね。
とある企業さんの成長分野等人材育成支援事業を利用したHTML5研修セミナーを聞いてきました。
Webの分野で厚労省が助成金、奨励金を出すということが今までにないことらしく、
もちろん奨励金の適用を検討することもさることながら、厚労省がこの分野で予算を割いてくれること自体に感動を覚えました。
このブログをご覧の方も必要であれば、情報共有しますので、コンタクトして下さい。
セミナー自体は、HTML5の流れ、取り巻く環境から実際の研修・セミナーの内容、助成金の内容の説明という具合でした。
<h2>HTML5を取り巻く背景</h3>
・7割〜8割ハイブリッドアプリ
・技術者不足による採用難と育成の重要性
・欧米比で最新技術導入の遅れ
・時限措置による教育機会（2013年3月までの奨励金）
・オフショア・エンジニアの成長
<h2>HTML5とは</h3>
・狭義
マークアップ言語
セマンティックWeb
・広義
HTML5API
CSS3
WebGL
SVG(ScalableVector Graphics)
<h2>HTML5なら出来る分業体制</h3>
・ネイティブアプリ
デザイン デザイナー
Objective-C/Java ネイティブエンジニア
PHP
・HTML5
デザイン デザイナー
HTML5/CSS3 マークアップエンジニア
JavaScript マークアップエンジニア/Webプログラマ
PHP Webプログラマ
<h2>企業研修の内容</h3>
2012年3月までの時限措置
一人20万円までの助成金
6ヶ月間の研修が必要
雇用保険を支払っている正社員であること
詳細
http://www.mhlw.go.jp/general/seido/josei/kyufukin/dl/f-top-c.pdf

成長分野等人材育成支援事業を利用したHTML5研修

今回は、SEO対策の方法について、復習することにしました。
&nbsp;
ちょうど今月(2012月10月)、Googleの<a href="http://support.google.com/webmasters/bin/answer.py?hl=ja&amp;answer=35769" target="_blank">ウェブマスター向けガイドライン</a>が更新されたようですので、
そちらから、HTMLコーディングに関する主なものをまとめてみました。
あからさまなスパム行為は省略しました。
&nbsp;
&nbsp;
<h2>基本</h3>
1.　サイトの構造はわかりやすく。
2.　主要ページへのリンクを記載したサイトマップを用意する。
　　サイトマップ内のリンクが非常に多い場合は複数ページに分ける。
3.　ユーザーが検索するときに入力する可能性と高いキーワードをサイトに含める。
4.　重要な名前、コンテンツ、リンクは、画像の代わりにテキストを使用。
　　画像を使用する必要がある場合は、alt属性を使用して、説明テキストを組み込む。
5.　無効なリンクを防ぐ。HTMLが正しいか確認する。
&nbsp;
&nbsp;
<h2>避けるべきことと、対策</h3>
1.　JavaScriptを使って、外部ページにリダイレクト(サイトにアクセスしたユーザーを、リクエストされたURLとは別のURLに移動させること)すること。
対策→　新サイトへの移動などの場合は、301リダイレクトを使用する。
&nbsp;
2.　隠しテキストと隠しリンクの利用
・白の背景で白のテキストを使用する
・テキストを画像の背後に置く
・CSSを使用して、テキストを画面外に配置する
・フォントサイズを0に設定する。
・小さな１文字のみをリンクにして、リンクを隠す
 

画像やJavaScript、動画の使用で、テキストをおく必要がある場合の対策方法と注意点
 

画像
　・alt属性を使用して、わかりやすい説明テキストを記述する。 
　　　（例：&lt;img src=&#8221;puppy.jpg&#8221; alt=&#8221;持ってこいをするダルメシアンの子犬&#8221;&gt;）
　・画像近くに、わかりやすいキャプションや説明テキストを配置する(可能な限り画像の近くに置くと効果的)
　・ファイル名を、画像の題材がわかるようなものにする
　・alt属性にキーワードを多用しない
　　　（スパムとみなされる場合がある。例：&lt;img src=&#8221;puppy.jpg&#8221; alt=&#8221;子犬 犬の赤ちゃん 小さな子犬 レトリーバー ラブラドール ウルフハウンド セッター ポインター ジャックラッセル テリヤ ドッグ フード ドッグフード 安い 子犬の餌&#8221;/&gt;）
　・重要なテキストは画像に埋め込まない
 

JavaScript
　・JavaScript内と同じコンテンツを&lt;noscript&gt;タグ内に記述する
　　　(&lt;noscript&gt;タグ内の内容は、JavaScript内のコンテンツと完全に同様にする)
 
動画
　・動画の説明テキストをHTML内に記述する
&nbsp;
3.　誘導ページの利用
(誘導ページ：特定のフレーズに対して、検索結果の上位に表示して、ユーザーを特定のサイトやページに誘導する目的で設置された、特定のキーワードやフレーズ用に作成された、テンプレートを使用した品質の低いページの集まり)
対策→　ユーザーの利便性を考慮した、質の高いページを設置する
&nbsp;
&nbsp;
画像の配置やJavaScriptなどで、デザインの都合上、対策が難しい場合もありますが、
改めて、これらのことを頭に入れてデザインをすることで、
利便性の高い、SEOも考慮されたサイト作りに役立てたいです。

SEOを考慮したHTMLコーディングの復習

流行りのスクロール効果を自作してみました。

iOSでFlashを搭載しない変わりに代替する技術として、HTML5とJavaScriptによるアニメーション表現が発達してまいりましたが、マルチデバイス対応及びフィーチャーフォン（ガラケー）向けの資産を再利用したいという理由でflashを変換するツールも同時に複数立ち上がっています。
それぞれ案件でこなしながら、flash変換ツールに関して代表的なツール4つのメリット・デメリットをまとめてみました。
非エンジニアの筆者がまとめております点、ご容赦下さい。技術情報については末尾に参考記事を掲載しております。
<h2>swiffy（提供：GOOGLE）</h3>
flaファイル変換系
<a href="https://www.google.com/doubleclick/studio/swiffy/" target="_blank">https://www.google.com/doubleclick/studio/swiffy/</a>
<h3>メリット</h4>
再現率が高い
<h3>デメリット</h4>
出力したソースが複雑（minifyされている）であるため改修は困難。
画像がSVG形式であるため、Androidは2.x系に対応していない。
<h2>CreateJS（提供：<a href="http://gskinner.com/" target="_blank">gskinner</a>）</h3>
flaファイル変換系
<a href="http://www.createjs.com/#!/CreateJS" target="_blank">http://www.createjs.com/#!/CreateJS</a>
<h3>メリット</h4>
出力したソースが綺麗。後のカスタマイズも容易
HTML5+Javascript+Imagesという構成なので、スマートフォン全般に対応可能
<h3>デメリット</h4>
仕様・制限が多い。既存のflaファイルからの修正は困難。
CS6もしくはCreative Cloudが必要
<h2>ExGame（提供：DeNA）</h3>
swf変換系
<a href="http://developer.dena.jp/mbga/support/exgame.html" target="_blank">http://developer.dena.jp/mbga/support/exgame.html</a>
<h3>メリット</h4>
ユーザーアクセス時にswfを解釈する仕組のため、ヘッダーに記述するだけ。
再現率が高い
<h3>デメリット</h4>
モバゲープラットフォーム以外では使えない
<h2>reel（提供：GREE）</h3>
<a href="https://docs.developer.gree.net/ja/technicalspecs/reel/" target="_blank">https://docs.developer.gree.net/ja/technicalspecs/reel/</a>（要ログイン）
swf変換系
<h3>メリット</h4>
ユーザーアクセス時にswfを解釈する仕組のため、ヘッダーに記述するだけ。
再現率が高い
<h3>デメリット</h4>
GREEプラットフォーム以外では使えない
<h2>まとめ</h3>
新規で構築するのであれば、CreateJS一択でいいと思います。CreateJSを前提に制作をすれば、フィーチャーフォン→flashlite、スマートフォン→CreateJSで出力したHTML5で運用も軽微になります。
ただ、まだ新しい技術ということも情報があまりにも少なく、独自に未成熟な部分も発見しております。
ツールの進化、情報の蓄積を期待しています。
フィーチャーフォン向けのswfが既にあるならば、それぞれのプラットフォームが提供している、swf変換系のツールを素直に使いましょう。
アプリ化やその他プラットフォームに対応既存コンテンツを対応させる場合は、Swiffy＋FLASH（Andorid2.x系）の組み合わせになり、現時点では、一番工数が掛かります。
こちらも、後1年するとAndroid2.x系ユーザーが少なくなり、Swiffyのみ選択するということでよくなるかもしれません。
<h4>技術参考記事</h6>
<a href="http://ameblo.jp/principia-ca/entry-11033734709.html" target="_blank">http://ameblo.jp/principia-ca/entry-11033734709.html</a>
<a href="http://d.hatena.ne.jp/ndruger/20111113/1321205098" target="_blank">http://d.hatena.ne.jp/ndruger/20111113/1321205098</a>
<a href="http://www.slideshare.net/ytksn/0322engineercafe-12124546" target="_blank">http://www.slideshare.net/ytksn/0322engineercafe-12124546</a>
&nbsp;

flash変換ツールまとめ（swiffy,CreateJS,ExGame,reel）

<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 href="http://www.amazon.co.jp/exec/obidos/asin/4062144492/sackoh71-22/" target="_blank" ><img decoding="async" src="http://ecx.images-amazon.com/images/I/412tzq2vpML._SL160_.jpg" style="border: none;" /></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%"><a href="http://www.amazon.co.jp/exec/obidos/asin/4062144492/sackoh71-22/" target="_blank" >モチベーション3.0 持続する「やる気!」をいかに引き出すか</a>
<div class="booklink-powered-date" style="font-size:8pt;margin-top:5px;font-family:verdana;line-height:120%">posted with <a href="http://yomereba.com" rel="nofollow" target="_blank">ヨメレバ</a></div>
</div>
<div class="booklink-detail" style="margin-bottom:5px;">ダニエル・ピンク 講談社 2010-07-07 </div>
<div class="booklink-link" style="margin-top: 5px"><a href="http://www.amazon.co.jp/exec/obidos/ASIN/4062144492/sackoh71-22/" name="booklink" rel="nofollow" target="_blank">Amazon.co.jp で詳細を見る</a></div>
</div>
<div class="booklink-footer" style="clear: left"></div>
</div>
こちらも、ベストセラー。前作のハイ・コンセプトも読んでいました。
改めて考える事が、働き方って変わったと。 今まで私自身が教育及び、見聞きしてきたことよりも本書に書いてあることのほうが共感出来る。 働き方がこの10年で変わっても、全体の雰囲気が変わるのは20年後だろうかはたまた30年後だろうか。
いち早く新しい働き方を体系化したものが本書です。
<h2>抜粋</h3>
<h3>モチベーション1.0</h4>
→生存を目的とする、飢餓動因、渇動因、性的動因などの生物学的な動機づけ。
<h3>モチベーション2.0</h4>
→外的な報酬と罰を中心に構築された周囲からの報酬や罰に対して反応するもう一つの動機づけ
20世紀のルーチンワークには有効だった。
<h3>モチベーション3.0</h4>
自律性（オートノミー）、熟達（マスタリー）、目的（ゴール）を達成したいという内発的な動機づけ
非ルーチンワークにおいて「交換条件つき（こうしたら、これをあげる）」が機能しないため、モチベーション3.0をビジネスに導入すること。
創造性が必要で右脳を使うクリエイティブワーク、知識労働者の働きと認識する。
<h3>タイプIとタイプX</h4>
モチベーション2.0はタイプXの行動を前提にし、活動によって得られる外的な報酬と結びついている。
モチベーション3.0はタイプIの行動を前提にし、タイプXのアップグレード版で活動自体からもたらされる内的な満足感と結びついている。後天的に培うことができる。
<h3>自律性（オートノミー）</h4>
人類は初期設定では、自律的であり、自己決定的である。教育や組織的なマネジメントにおいて、自然とこの自律性は影を潜める。
<h3>熟達（マスタリー）</h4>
モチベーション2.0では従順な姿勢が求められたのに対し、モチベーション3.0ではエンゲージメントが必要とされる。エンゲージメントを強めて初めて、価値あることの上達、熟達が出来る。
熟達には、向上が可能だという心の持ち方、苦痛が伴う、漸近線で完全に実現することは不可能だということを理解すること。
<h3>目的（ゴール）</h4>
人間は、本質的に人生の意義や目的を探すもの。
目的の最大化が、利益の最大化
<h2>まとめ</h3>
モチベーション3.0というものを理解し、経営に反映していきたいと思います。
マズローの5段階欲求でいうと、
モチベーション1.0生理的欲求、安全欲求
モチベーション2.0所属欲求、承認欲求
モチベーション3.0自己実現欲求
に分類出来るのではないだろうか？

モチベーション3.0

2012年9月27日に行われた「ECのミカタセミナー」というECサイト運営社向けのセミナーに参加してまいりました。 その中で、私には全く新しい視点でWebサイトを捉えているセッションがありましたので、紹介致します。
<h2>KEYNOTE SYSTEMS社のビジネス</h3>
講演をされていたのが、Keynote Systems社というアメリカのカリフォルニアに本社を置く日本法人の代表の方でした。 Keynoteというとmacのプレゼンテーションソフトしか思い浮かびませんでしたが、顧客数4,000超でNASDAQに上場している企業とのことです。 クライアントもそうそうたるもので、ebayやcoarchといった小売業者からAMEX、GMと多岐に渡っています。 その主力ビジネスが Webサイトのパフォーマンスを計測、改善するサービスということなのです。
<h2>アクセス解析とWEBパフォーマンスの関係</h3>
ここで、Webサイトのパフォーマンスってあまり意識したことなかったのですが、それもそのはずで、断言されておりました「Webパフォーマンスに限らず、日本は統計に基づく分析に関して遅れている」と。 特に統計学に携わる分野で大学の学部を見ても、統計学を専攻する学部は一つもないとのことです。 Webパフォーマンスの相関を例を上げると・・・
<ul>
<li>16%・・・1秒が遅れる毎の顧客満足度低下率</li>
<li>11%・・・1秒早くなる毎のPVの向上</li>
<li>7%・・・1秒早くなる毎のCVの向上</li>
<li>88%・・・継続的な計測による顧客満足度向上</li>
<li>200%・・・1秒早くなる毎のブランドイメージのアップ</li>
</ul>
と統計的に証明されているとのことです。 ここで、本セッションがWebパフォーマンスに限った統計のことで、レコメンドや、ランディングページ等、機能やマーケティングに関しては除外されていることをお気をつけ頂きたい。
<h2>スピード＝価値</h3>
ライリーの小売引力の法則
<blockquote>P=α*A/D^2</blockquote>
P=購入確率、α＝計数、A=魅力、D=距離（サイト速度） 購入確率は、人口ないし、品揃えに比例し、距離（サイト速度）の2乗に反比例する。 PCサイトの世界標準・・・1秒以下 スマートフォンサイトの世界標準・・・6秒以下 →日本の大手ECサイトはどれも達成出来ていない。 6秒以内に表示するためには・・・
<ul>
<li>100kb</li>
<li>CSS1</li>
<li>JS1</li>
<li>Redirect1</li>
</ul>
に抑える必要がある。 参考、chanel、zappos
<h2>まとめ</h3>
目からウロコであることが非常に多かった。世界トップレベルのサイトの取り組みというものを垣間見ることが出来、参考になりました。

Company

Our Solutions

Support

News

Blog

Blogブログ

カテゴリーから探す

年別から見る

記事一覧

2012/11/08

2012/11/07

2012/11/01

2012/11/01

2012/11/01

2012/11/01

2012/11/01

2012/10/24

2012/10/19

2012/10/18

2012/10/18

2012/10/16

2012/10/11

2012/10/11

2012/10/10

2012/10/10

2012/10/09

2012/10/04