symfony2でcsvを出力してみた

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

サイトリニューアルに際し、wordpressでつまづいたコト　〜投稿者情報について〜

今日も少し思いを綴っていきたいと思います。
&nbsp;
直近で取り組んだ案件で、私はこの「チームプレー」を意識しました。
ベンチャーでありがちな、今でも私自身もやってしまうのですが、個々の「マンパワー」で力技で納品に持っていくというやり方があります。当然、マンパワー＝個人能力ということもあるので、マンパワーが個々に高めるというのは当たり前です。
しかし、今回は構成するメンバーも今まではとは違う布陣で、個々人でやり切るというよりは、守備範囲を明確に決め、ボールを受け渡しあうチームプレーをとかく意識しました。
自分の担当に責任を持つのは当然ですが、何よりパスをしっかりさせ、全体を見回すために、定期的な会議を徹底的にやりました。
責任感に欠く行動については、徹底的に叱りました。
しかし、後から考えるとそのようなことを取ってしまうのは当たり前かもしれません。何故なら、今回初めて取り組んでいることですから。
皆、地頭は申し分ないので、すぐに理解し軌道修正をしてくれました。
そして結果、納品当日もスムーズに進行し、クライアント様にはお褒めの言葉を頂きました。
携わってくれたメンバーにはすごく感謝しているし、何より会社としての組織力が向上したと感じました。
<h4>補足</h6>
あとは、個人としての内容になりますが、組織を思うように動かし、結果、 クライアント様に喜んで頂き、そして対価を頂く。これほど、冥利に尽きることはありません。
それぞれが、満足を感じる、充足感を得るポイントというのは違うと思いますが、是非、仕事を通じてそういうのを見つけて頂きたいと心から思っています。何故なら、それこそが人して幸せだと思うからです。そのために、必要なことがあれば是非、私に意見を言って頂きたいと思います。
<div></div>

チームプレーと組織力

コンシューマ向けの3Dプリンタがかなり話題になってきた。 
扱える素材も増え、安価で高性能なプリンタが増えてきたことがきっかけで 
ビジネスとして比較的障壁が低く参入できるようになってきた。
日本のものづくりは今後中小企業が主役になる。 
その価値を決めるのは個人の技術と創造力だ。 
これまではデザインやプログラム、情報などPCさえあれば納品できる商材において、個人や企業が多数容易に参入してきていた。 
3Dプリンタの高性能化と低価格化により、今後はこのようなデジタルデータにとどまらずあらゆる”もの”をつくることができるようになる。 
とても素晴らしい変化だ。
ちょっとしたグラスやアクセサリーを作ってみたり、3Dスキャナーで壊れた水道管のパッキンを複製して自分で直すこともできるようになる。 
第三次産業革命や新産業革命という人も出てきている。
やりようによっては個人も企業も大きなビジネスチャンスだ。
ただ、1つだけ気をつけないといけないのは、3Dプリンタは今まであったものが簡単に作れるという範囲でのイノベーションということだ。 
生産効率の向上と手軽さが最大の魅力であり、大事なのは個人レベルでの取り扱いが可能となることで、新しい価値が生まれることに期待したい。 
紙やwebのデザイナーが新たな販促品を生み出したり、リフォーム会社がオリジナルの装飾部品を開発したりなど、今まで取り扱えなかった分野へチャレンジできるようになる。
今は普及が十分でなくこのような新たな価値はこれからという状況だが、今後はどんなものが生まれてくるかを注目したい

3Dプリンタ 第三次産業革命の可能性

カルーセルパネル

出所：<a href="http://www.dac.co.jp/Contents/pdf/press/20121105_research.pdf" target="_blank">http://www.dac.co.jp/Contents/pdf/press/20121105_research.pdf</a>
今年10月実施のスマートフォンの利用実態調査がdacさんから出ていたのでメモ。
&nbsp;
<h2>スマートフォン年代別利用率</h3>
<table>
<tbody>
<tr>
<td></td>
<td>年代</td>
<td>2011年9月</td>
<td>2012年10月</td>
</tr>
<tr>
<td rowspan="5">男性</td>
<td>16～19歳</td>
<td>19.0%</td>
<td>33.8%</td>
</tr>
<tr>
<td>男性20代</td>
<td>23.9%</td>
<td>45.8%</td>
</tr>
<tr>
<td>男性30代</td>
<td>21.4%</td>
<td>36.2%</td>
</tr>
<tr>
<td>男性40代</td>
<td>14.7%</td>
<td>28.9%</td>
</tr>
<tr>
<td>男性50代</td>
<td>9.5%</td>
<td>18.4%</td>
</tr>
<tr>
<td rowspan="5">女性</td>
<td>16～19歳</td>
<td>7.5%</td>
<td>36.6%</td>
</tr>
<tr>
<td>女性20代</td>
<td>20.5%</td>
<td>39.1%</td>
</tr>
<tr>
<td>女性30代</td>
<td>11.6%</td>
<td>26.1%</td>
</tr>
<tr>
<td>女性40代</td>
<td>7.2%</td>
<td>18.6%</td>
</tr>
<tr>
<td>女性50代</td>
<td>5.4%</td>
<td>14.0%</td>
</tr>
</tbody>
</table>
全体的に伸びているが女性の伸び率が目立つ。
<h2>情報の入手方法</h3>
<table>
<tbody>
<tr>
<td colspan="2">2012</td>
<td>1位</td>
<td>2位</td>
<td>3位</td>
<td>4位</td>
<td>5位</td>
</tr>
<tr>
<td rowspan="2" colspan="2">全体</td>
<td>PC</td>
<td>テレビ</td>
<td>スマートフォン</td>
<td>店頭</td>
<td>カタログ・パンフレット</td>
</tr>
<tr>
<td>84.0%</td>
<td>75.6%</td>
<td>65.5%</td>
<td>38.6%</td>
<td>32.6%</td>
</tr>
<tr>
<td rowspan="4">16～19歳</td>
<td rowspan="2">男性</td>
<td>PC</td>
<td>スマートフォン</td>
<td>テレビ</td>
<td>友達・知人</td>
<td>雑誌</td>
</tr>
<tr>
<td>87.0%</td>
<td>77.0%</td>
<td>66.5%</td>
<td>37.5%</td>
<td>30.0%</td>
</tr>
<tr>
<td rowspan="2">女性</td>
<td>スマートフォン</td>
<td>テレビ</td>
<td>PC</td>
<td>友達・知人</td>
<td>雑誌</td>
</tr>
<tr>
<td>85.5%</td>
<td>82.5%</td>
<td>70.5%</td>
<td>58.5%</td>
<td>43.5%</td>
</tr>
<tr>
<td rowspan="4">20代</td>
<td rowspan="2">男性</td>
<td>PC</td>
<td>スマートフォン</td>
<td>テレビ</td>
<td>友達・知人</td>
<td>新聞</td>
</tr>
<tr>
<td>86.0%</td>
<td>75.5%</td>
<td>71.0%</td>
<td>34.0%</td>
<td>28.5%</td>
</tr>
<tr>
<td rowspan="2">女性</td>
<td>スマートフォン</td>
<td>テレビ</td>
<td>PC</td>
<td>友達・知人</td>
<td>店頭</td>
</tr>
<tr>
<td>81.5%</td>
<td>80.0%</td>
<td>73.5%</td>
<td>53.0%</td>
<td>44.0%</td>
</tr>
</tbody>
</table>
女性に関してはスマートフォンが最も多い情報入手の手段となっている。
<h2>情報の検索手段</h3>
<table>
<tbody>
<tr>
<td colspan="2">2012</td>
<td>1位</td>
<td>2位</td>
</tr>
<tr>
<td rowspan="2" colspan="2">全体</td>
<td>PC</td>
<td>スマートフォン</td>
</tr>
<tr>
<td>91.7%</td>
<td>67.0%</td>
</tr>
<tr>
<td rowspan="4">16～19歳</td>
<td rowspan="2">男性</td>
<td>PC</td>
<td>スマートフォン</td>
</tr>
<tr>
<td>91.0%</td>
<td>82.0%</td>
</tr>
<tr>
<td rowspan="2">女性</td>
<td>スマートフォン</td>
<td>PC</td>
</tr>
<tr>
<td>88.0%</td>
<td>81.5%</td>
</tr>
<tr>
<td rowspan="4">20代</td>
<td rowspan="2">男性</td>
<td>PC</td>
<td>スマートフォン</td>
</tr>
<tr>
<td>92.0%</td>
<td>72.5%</td>
</tr>
<tr>
<td rowspan="2">女性</td>
<td>スマートフォン</td>
<td>PC</td>
</tr>
<tr>
<td>85.5%</td>
<td>81.0%</td>
</tr>
</tbody>
</table>
こちらも女性はスマートフォンが最も多くなっている。
<h2>情報の比較・検討手段</h3>
<table>
<tbody>
<tr>
<td colspan="2">2012</td>
<td>1位</td>
<td>2位</td>
<td>3位</td>
<td>4位</td>
<td>5位</td>
</tr>
<tr>
<td rowspan="2" colspan="2">全体</td>
<td>PC</td>
<td>スマートフォン</td>
<td>店頭</td>
<td>カタログ・パンフレット</td>
<td>友人・知人</td>
</tr>
<tr>
<td>88.8%</td>
<td>42.7%</td>
<td>24.7%</td>
<td>19.6%</td>
<td>11.9%</td>
</tr>
<tr>
<td rowspan="4">16～19歳</td>
<td rowspan="2">男性</td>
<td>PC</td>
<td>スマートフォン</td>
<td>店頭</td>
<td>カタログ・パンフレット</td>
<td>テレビ</td>
</tr>
<tr>
<td>85.5%</td>
<td>54.5%</td>
<td>22.5%</td>
<td>14.5%</td>
<td>13.0%</td>
</tr>
<tr>
<td rowspan="2">女性</td>
<td>PC</td>
<td>スマートフォン</td>
<td>店頭</td>
<td>友人・知人</td>
<td>カタログ・パンフレット</td>
</tr>
<tr>
<td>73.5%</td>
<td>58.0%</td>
<td>26.5%</td>
<td>23.0%</td>
<td>20.0%</td>
</tr>
<tr>
<td rowspan="4">20代</td>
<td rowspan="2">男性</td>
<td>PC</td>
<td>スマートフォン</td>
<td>店頭</td>
<td>カタログ・パンフレット</td>
<td>友人・知人</td>
</tr>
<tr>
<td>91.5%</td>
<td>53.0%</td>
<td>18.0%</td>
<td>14.0%</td>
<td>11.5%</td>
</tr>
<tr>
<td rowspan="2">女性</td>
<td>PC</td>
<td>スマートフォン</td>
<td>店頭</td>
<td>友人・知人</td>
<td>カタログ・パンフレット</td>
</tr>
<tr>
<td>76.5%</td>
<td>56.5%</td>
<td>29.0%</td>
<td>20.0%</td>
<td>17.0%</td>
</tr>
</tbody>
</table>
比較・検討は大きい画面(PC)でじっくり品定めをするらしい。
<h2>購入を決断した媒体</h3>
<table>
<tbody>
<tr>
<td colspan="2">2012</td>
<td>1位</td>
<td>2位</td>
<td>3位</td>
<td>4位</td>
<td>5位</td>
</tr>
<tr>
<td rowspan="2" colspan="2">全体</td>
<td>PC</td>
<td>店頭</td>
<td>スマートフォン</td>
<td>カタログ・パンフレット</td>
<td>店舗スタッフ</td>
</tr>
<tr>
<td>65.0%</td>
<td>49.9%</td>
<td>27.3%</td>
<td>16.4%</td>
<td>16.6%</td>
</tr>
<tr>
<td rowspan="4">16～19歳</td>
<td rowspan="2">男性</td>
<td>PC</td>
<td>店頭</td>
<td>スマートフォン</td>
<td>カタログ・パンフレット</td>
<td>友人・知人</td>
</tr>
<tr>
<td>68.0%</td>
<td>40.5%</td>
<td>33.0%</td>
<td>11.0%</td>
<td>10.5%</td>
</tr>
<tr>
<td rowspan="2">女性</td>
<td>店頭</td>
<td>PC</td>
<td>スマートフォン</td>
<td>友人・知人</td>
<td>店舗スタッフ</td>
</tr>
<tr>
<td>55.0%</td>
<td>48.0%</td>
<td>38.0%</td>
<td>17.0%</td>
<td>13.5%</td>
</tr>
<tr>
<td rowspan="4">20代</td>
<td rowspan="2">男性</td>
<td>PC</td>
<td colspan="2">スマートフォン・店頭</td>
<td>友人・知人</td>
<td>カタログ・パンフレット</td>
</tr>
<tr>
<td>72.0%</td>
<td colspan="2">39.0%</td>
<td>16.0%</td>
<td>14.0%</td>
</tr>
<tr>
<td rowspan="2">女性</td>
<td colspan="2">店頭・PC</td>
<td>スマートフォン</td>
<td>友人・知人</td>
<td>店舗スタッフ</td>
</tr>
<tr>
<td colspan="2">53.5%</td>
<td>36.0%</td>
<td>22.5%</td>
<td>19.5%</td>
</tr>
</tbody>
</table>
スマホや店頭で関心をもち、最終的なジャッジはPCでじっくり考えて買うということのよう。
<h2>情報の共有手段</h3>
<table>
<tbody>
<tr>
<td colspan="2">2012</td>
<td>1位</td>
<td>2位</td>
<td>3位</td>
</tr>
<tr>
<td rowspan="2" colspan="2">全体</td>
<td>PC</td>
<td>スマートフォン</td>
<td>友人・知人へのクチコミ</td>
</tr>
<tr>
<td>66.1%</td>
<td>38.6%</td>
<td>33.9%</td>
</tr>
<tr>
<td rowspan="4">16～19歳</td>
<td rowspan="2">男性</td>
<td>PC</td>
<td>スマートフォン</td>
<td>友人・知人へのクチコミ</td>
</tr>
<tr>
<td>72.5%</td>
<td>58.0%</td>
<td>32.0%</td>
</tr>
<tr>
<td rowspan="2">女性</td>
<td>スマートフォン</td>
<td>PC</td>
<td>友人・知人へのクチコミ</td>
</tr>
<tr>
<td>76.0%</td>
<td>52.5%</td>
<td>31.5%</td>
</tr>
<tr>
<td rowspan="4">20代</td>
<td rowspan="2">男性</td>
<td>PC</td>
<td>スマートフォン</td>
<td>友人・知人へのクチコミ</td>
</tr>
<tr>
<td>71.0%</td>
<td>51.0%</td>
<td>30.5%</td>
</tr>
<tr>
<td rowspan="2">女性</td>
<td>スマートフォン</td>
<td>PC</td>
<td>友人・知人へのクチコミ</td>
</tr>
<tr>
<td>59.5%</td>
<td>55.0%</td>
<td>40.0%</td>
</tr>
</tbody>
</table>

スマートフォン利用実態調査

弊社が入居している、早稲田大学インキュベーション推進室の講演を聞いて来ました。
<blockquote>インキュベーションセンター特別講演会
日時：2012年11月5日（月）17：00～19：00
講師：早稲田大学 商学学術院ビジネススクール　内田和成教授
内田教授 講演
「経営者の右脳の使い方 ～ロジカルシンキングだけでは経営できない～」
早稲田大学ビジネススクール　内田和成研究室 Webページ
<a href="http://www.waseda.jp/sem-uchida/">http://www.waseda.jp/sem-uchida/</a></blockquote>
今回、講演頂いた内田教授は、世界的なコンサルティングファームであるボストン コンサルティング グループの日本法人代表を務められ、また、2006年度には世界の有力コンサルタント、トップ25人に選出されるという輝かしい経歴のお方。普段、なかなか聞くことも出来ない貴重な機会でした。
その中で、講演内容の抜粋をシェアします。
基本的に、レジュメなどは用意せずに、喋るだけのスタイルだそうで、私も発せられた言葉をその場で書き留めているだけですので、ご了承下さい。
<h2>経営は勘</h3>
まず、はじめに右脳の使い方ということで結論を仰っていました。
経営は勘
であると。
冒頭にそのように仰られていたので、初めはポカンとしてしまいましたが、様々な大企業の経営者を見てきたなかで、行き着いた結論を一言で表すと「勘」につきると。
<h3>ギャンブラーと勝負師</h4>
勘とはいえ、ギャンブラーと勝負師は異なる。ギャンブラーは文字通り運まかせ。勝負師は、運を手繰りよせるべく、常に手を打って勝負をする。経営者は勝負師にならなければならない。
<h3>経営者の一番大事な仕事</h4>
<ol>
<li>問題に気づく</li>
<li>意思決定</li>
<li>実行</li>
</ol>
要は、問題設定と実行の能力
<h4>仕事が出来る人間になる。</h6>
定義は何？
<h4>どういう上司の元で働きたいのか？</h6>
作業が早い人間と仕事が出来るは違う。
作業が早い
↓
問題に気づく
人間になること。
&nbsp;
問題設定と優先順位をつけて課題解決
出来る人が一番大事な仕事。優秀な経営者
<h4>救急医療センター（er）</h6>
トリアージュ（仕分け）
瀕死の人を一人助けるよりは、
確実に助かる人を五人助ける。
倫理観を除くと医者としては優秀
<h3> 事象と過程</h4>
・泥棒が入りました。（事象）
泥棒が入った事自体は事象に過ぎない。
解決すべきはその事象に至る過程
→防犯体制
→報告体制
<h4>少子高齢化</h6>
どれを解くべきかは分からない。
視点が必要
グローバルに見ると、いいこと？悪いこと？
生産年齢人口が減る→社会保障費がまかなえなくなる。
歳入と歳出が合わなくなる。
<h4>政治家には悪いやつがならないといけない。</h6>
変革＝ルールを変えること、破ること。
<h3>問題設定</h4>
<ol>
<li>候補を拾いだす</li>
<li>絞り込む</li>
<li>実行</li>
<li>確認</li>
</ol>
&nbsp;
<h3>筋がいい課題を洗い出す。</h4>
<ol>
<li>答えが出そうな問題</li>
<li>インパクトが出せるかどうか</li>
<li>やりきれるかどうか</li>
</ol>
解くべき問題が違う？
&nbsp;
<h3>勝負師になるためには</h4>
<ul>
<li>経験値をあげる。</li>
<li>課題意識をもつ。</li>
<li>自分のテリトリーを広げる。</li>
<li>視点、視座を変える。</li>
<li>引き出しを増やす。</li>
</ul>

経営者の右脳の使い方 ～ロジカルシンキングだけでは経営できない～

ポータルサイト風タブパネル

ナビゲーションを上部に隠す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側か完了の方々のほうが多かったのが残念であった。

Company

Our Solutions

Support

News

Blog

Blogブログ

カテゴリーから探す

年別から見る

記事一覧

2012/11/21

2012/11/15

2012/11/15

2012/11/15

2012/11/15

2012/11/14

2012/11/08

2012/11/08

2012/11/08

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