<p>以前WebGLの動作環境についてご紹介いたしましたが（<a href="/designer/webgl%E3%81%AE%E5%8B%95%E4%BD%9C%E7%92%B0%E5%A2%83%E3%81%BE%E3%81%A8%E3%82%81.html">こちら</a>）、</p>
<p>こちらで、WebGLはグラフィックボードによってはブラウザが最新でも使うことができないという風にご紹介しておりました。</p>
<p>しかしながら、最近のChromeでは、グラフィックボードが古くても、ブラウザ側で環境を再現(エミュレーション)することができるので、WebGLのサイトを見ることができることがわかりました。</p>
<p>&nbsp;</p>
<p>少しうれしくなったので、WebGLを使ったサイトや、デモを集め些細とを探してみましたので、少しご紹介いたします。</p>
<p>&nbsp;</p>
<p><a href="https://www.cubeslam.com/" target="_blank"><img decoding="async" loading="lazy" style="vertical-align: text-top;" alt="CUBE SLAM" src="/uploads-archive/2013/07/image01.jpg" width="640" height="455" /></a><br />
<a href="https://www.cubeslam.com/" target="_blank">CUBE SLAM</a></p>
<p>動物のそれぞれの動きがすごいです。</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p><a href="https://developer.mozilla.org/ja/demos/tag/tech:webgl" target="_blank"><img decoding="async" loading="lazy" alt="WebGL DEMO" src="/uploads-archive/2013/07/image03.jpg" width="640" height="455" /></a></p>
<p><a href="https://developer.mozilla.org/ja/demos/tag/tech:webgl" target="_blank">mozilla Demo Studio WEB GL</a></p>
<p>WebGLのデモ集です。いろんなタイプのWebGLのサンプルを見ることができます。</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p><a href="http://yomotsu.github.io/threejs-examples/" target="_blank"><img decoding="async" loading="lazy" alt="three.js" src="/uploads-archive/2013/07/image02.jpg" width="640" height="455" /></a></p>
<p><a href="http://yomotsu.github.io/threejs-examples/" target="_blank">Examples created by Yomotsu useing THREE.js</a></p>
<p>three.jsという、WebGLを使いやすくするライブラリを使ったデモ集です。</p>
<p>いきなりコアなWebGLを扱うのは敷居が高い感じがしますが、こういったライブラリを使ってはじめるのもいいと思いました。</p>
<p>&nbsp;</p>


webGLの3Dをつかったサイトやデモサイト

<p>前回、無料のCMSについての記事を書きましたが、</p>
<p>今回そこででてきた「joomla」について簡単ではありますが、書きたいと思います。</p>
<p>&nbsp;</p>
<h2>Joomla!（ジュームラ）とは</h3>
<p>Joomla!（ジュームラ）とは、</p>
<p>タイトル通り、コンテンツマネジメントシステム（CMS）と呼ばれるホームページ構築システムのひとつです。</p>
<p>Joomla!はオープンソースで開発されており</p>
<p>数あるCMSの中で、世界で8.8%(2012年11月現在)とwordpressに次ぐシェアです。</p>
<p><a href="http://www.joomla.org/download.html" target="_blank">joomlaのダウンロード</a><br />
<a href="http://sourceforge.jp/projects/joomla/" target="_blank">Joomla!じゃぱん 日本語同梱パッケージ</a></p>
<h2>Joomla!（ジュームラ）の特徴</h3>
<ul>
<li>Joomla!3.0はレスポンシブ対応
<p>・・・Bootstrap（CSSのフレームワーク）を使用</li>
<li>会員管理機能
<p>・・・標準で付いており、会員へメール一斉送信や会員用ページ作成など機能満載。</li>
<li>フォーム
<p>・・・標準で簡単なお問い合わせフォーム機能が付いている</li>
<li>拡張機能
<p>・・・エクステンションと呼ばれる、コンポーネント・プラグイン・モジュールが豊富。</li>
<li>複数人でのサイト運営
<p>・・・標準でアクセスコントロール機能が付いているので、簡単に権限を付けられる。</li>
<li>更新のしやすさ
<p>wordpressのようなエディタはもちろん、ワードやパワーポイント感覚で、webの更新が出来る</li>
<li>PHPが実行できる</li>
</ul>
<p>&nbsp;</p>
<h2>実際に使用されているサイト</h3>
<p>ユニセフやIKEAで使用されているようですが、<br />
下記URLを見ていただけるとかなり多くの事例があります。</p>
<p><a href="http://community.joomla.org/showcase/sites.html" target="_blank">http://community.joomla.org/showcase/sites.html</a></p>
<p>&nbsp;</p>
<h2>インストールしてみた</h3>
<p>&nbsp;</p>
<p>実際の管理画面と、サンプルで使用できるサイトが以下になります。<br />
サンプルで使用出来るのはブログタイプ、通常のサイトがあります。</p>
<p>管理画面<br />
<a href="/uploads-archive/2013/07/test-Administration-Control-Panel.jpg"><img decoding="async" loading="lazy" class="alignnone  wp-image-2659" alt="test - Administration - Control Panel" src="/uploads-archive/2013/07/test-Administration-Control-Panel.jpg" width="632" height="409" srcset="/uploads-archive/2013/07/test-Administration-Control-Panel.jpg 1143w, /uploads-archive/2013/07/test-Administration-Control-Panel-768x497.jpg 768w, /uploads-archive/2013/07/test-Administration-Control-Panel-1024x663.jpg 1024w, /uploads-archive/2013/07/test-Administration-Control-Panel-228x148.jpg 228w, /uploads-archive/2013/07/test-Administration-Control-Panel-300x194.jpg 300w" sizes="(max-width: 632px) 100vw, 632px" /></a></p>
<p>サンプルサイト<br />
<a href="/uploads-archive/2013/07/Home.jpg"><img decoding="async" loading="lazy" class="alignnone  wp-image-2660" alt="Home" src="/uploads-archive/2013/07/Home.jpg" width="632" height="611" srcset="/uploads-archive/2013/07/Home.jpg 1143w, /uploads-archive/2013/07/Home-300x291.jpg 300w, /uploads-archive/2013/07/Home-768x744.jpg 768w, /uploads-archive/2013/07/Home-1024x992.jpg 1024w, /uploads-archive/2013/07/Home-228x221.jpg 228w" sizes="(max-width: 632px) 100vw, 632px" /></a></p>
<p>最新のjoomla!3をインストールしてみたんですが、<br />
アップロードでえらい時間かかりました。</p>
<p>インストールとしては、DatabaseのPHPがverが5.3.1以上ではいけないという箇所以外は、<br />
特につまずくことなく出来ました。</p>
<p>その手順なんかはまた改めて書きたいと思います。</p>


無料CMSツール「joomla」について

<p>66種類ものスライドが使えるjQueryプラグイン</p>
<p>PAGE TRANSITIONSをつかってみた。</p>
<p><a href="http://tympanus.net/Development/PageTransitions/" target="_blank">http://tympanus.net/Development/PageTransitions/</a></p>
<p>&nbsp;</p>
<p>非常にクオリティの高いエフェクトが揃っており、</p>
<p>様々なオブジェクトに対して利用できるため、これだけ使ってれば良いのではと思えた。</p>
<p>&nbsp;</p>
<p>設置方法は</p>

		<div id="crayon-64953fd58c522503132045" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover wrap" style=" margin-top: 12px; margin-bottom: 12px; font-size: 13px !important; line-height: 18px !important;">
		
			<div class="crayon-toolbar" data-settings=" mouseover overlay hide delay" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><span class="crayon-title"></span>
			<div class="crayon-tools" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><div class="crayon-button crayon-nums-button" title="Toggle Line Numbers"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-plain-button" title="Toggle Plain Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-copy-button" title="Copy"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-popup-button" title="Open Code In New Window"><div class="crayon-button-icon"></div></div><span class="crayon-language">XHTML</span></div></div>
			<div class="crayon-info" style="min-height: 19.5px !important; line-height: 19.5px !important;"></div>
			<div class="crayon-plain-wrap"><textarea  class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 13px !important; line-height: 18px !important;">
&lt;ul class="dl-submenu"&gt;
    &lt;li data-animation="1"&gt;&lt;a href="#"&gt;右から左へスライド&lt;/a&gt;&lt;/li&gt;
    &lt;li data-animation="2"&gt;&lt;a href="#"&gt;左から右へスライド&lt;/a&gt;&lt;/li&gt;
    &lt;li data-animation="3"&gt;&lt;a href="#"&gt;下から上へスライド&lt;/a&gt;&lt;/li&gt;
    &lt;li data-animation="4"&gt;&lt;a href="#"&gt;上から下へスライド&lt;/a&gt;&lt;/li&gt;
&lt;/ul&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-64953fd58c522503132045-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd58c522503132045-2">2</div><div class="crayon-num" data-line="crayon-64953fd58c522503132045-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd58c522503132045-4">4</div><div class="crayon-num" data-line="crayon-64953fd58c522503132045-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd58c522503132045-6">6</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-64953fd58c522503132045-1"><span class="crayon-r ">&lt;ul </span><span class="crayon-e ">class</span>=<span class="crayon-s ">"dl-submenu"</span><span class="crayon-r ">&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd58c522503132045-2"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-r ">&lt;li </span><span class="crayon-e ">data-animation</span>=<span class="crayon-s ">"1"</span><span class="crayon-r ">&gt;</span><span class="crayon-r ">&lt;a </span><span class="crayon-e ">href</span>=<span class="crayon-s ">"#"</span><span class="crayon-r ">&gt;</span><span class="crayon-i ">右から左へスライド</span><span class="crayon-r ">&lt;/a&gt;</span><span class="crayon-r ">&lt;/li&gt;</span></div><div class="crayon-line" id="crayon-64953fd58c522503132045-3"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-r ">&lt;li </span><span class="crayon-e ">data-animation</span>=<span class="crayon-s ">"2"</span><span class="crayon-r ">&gt;</span><span class="crayon-r ">&lt;a </span><span class="crayon-e ">href</span>=<span class="crayon-s ">"#"</span><span class="crayon-r ">&gt;</span><span class="crayon-i ">左から右へスライド</span><span class="crayon-r ">&lt;/a&gt;</span><span class="crayon-r ">&lt;/li&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd58c522503132045-4"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-r ">&lt;li </span><span class="crayon-e ">data-animation</span>=<span class="crayon-s ">"3"</span><span class="crayon-r ">&gt;</span><span class="crayon-r ">&lt;a </span><span class="crayon-e ">href</span>=<span class="crayon-s ">"#"</span><span class="crayon-r ">&gt;</span><span class="crayon-i ">下から上へスライド</span><span class="crayon-r ">&lt;/a&gt;</span><span class="crayon-r ">&lt;/li&gt;</span></div><div class="crayon-line" id="crayon-64953fd58c522503132045-5"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-r ">&lt;li </span><span class="crayon-e ">data-animation</span>=<span class="crayon-s ">"4"</span><span class="crayon-r ">&gt;</span><span class="crayon-r ">&lt;a </span><span class="crayon-e ">href</span>=<span class="crayon-s ">"#"</span><span class="crayon-r ">&gt;</span><span class="crayon-i ">上から下へスライド</span><span class="crayon-r ">&lt;/a&gt;</span><span class="crayon-r ">&lt;/li&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd58c522503132045-6"><span class="crayon-r ">&lt;/ul&gt;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>このように、dl-submenuを親として、その下にdata-animation=nというように</p>
<p>nでエフェクトの方法を指定する。</p>
<p>&nbsp;</p>
<p>以下はすべての動きとdata-animationの対応表。</p>
<p>&nbsp;</p>
<table>
<tbody>
<tr>
<th>大カテゴリ</th>
<th>中カテゴリ</th>
<th>小カテゴリ</th>
<th>動作説明</th>
<th>data-animation</th>
</tr>
<tr>
<td>MOVE</td>
<td>MOVE TO LEFT/ FROM RIGHT</td>
<td></td>
<td>右から左へスライド</td>
<td>1</td>
</tr>
<tr>
<td></td>
<td>MOVE TO RIGHT/ FROM LEFT</td>
<td></td>
<td>左から右へスライド</td>
<td>2</td>
</tr>
<tr>
<td></td>
<td>MOVE TO TOP/ FROM BOTTOM</td>
<td></td>
<td>下から上へスライド</td>
<td>3</td>
</tr>
<tr>
<td></td>
<td>MOVE TO BOTTOM/ FROM TOP</td>
<td></td>
<td>上から下へスライド</td>
<td>4</td>
</tr>
<tr>
<td>FADE</td>
<td>FADE / FROM RIGHT</td>
<td></td>
<td>右から左へフェード</td>
<td>5</td>
</tr>
<tr>
<td></td>
<td>FADE / FROM LEFT</td>
<td></td>
<td>左から右へフェード</td>
<td>6</td>
</tr>
<tr>
<td></td>
<td>FADE / FROM BOTTOM</td>
<td></td>
<td>下から上へフェード</td>
<td>7</td>
</tr>
<tr>
<td></td>
<td>FADE / FROM TOP</td>
<td></td>
<td>上から下へフェード</td>
<td>8</td>
</tr>
<tr>
<td></td>
<td>FADE LEFT / FADE RIGHT</td>
<td></td>
<td>右フェードから左へフェード</td>
<td>9</td>
</tr>
<tr>
<td></td>
<td>FADE RIGHT / FADE LEFT</td>
<td></td>
<td>左フェードから右へフェード</td>
<td>10</td>
</tr>
<tr>
<td></td>
<td>FADE TOP / FADE BOTTOM</td>
<td></td>
<td>下フェードから上へフェード</td>
<td>11</td>
</tr>
<tr>
<td></td>
<td>FADE BOTTOM / FADE TOP</td>
<td></td>
<td>上フェードから下へフェード</td>
<td>12</td>
</tr>
<tr>
<td>DIFFERENT EASING</td>
<td>DIFFERENT EASING / FROM RIGHT</td>
<td></td>
<td>右から左へフェード改</td>
<td>13</td>
</tr>
<tr>
<td></td>
<td>DIFFERENT EASING / FROM LEFT</td>
<td></td>
<td>左から右へフェード改</td>
<td>14</td>
</tr>
<tr>
<td></td>
<td>DIFFERENT EASING / FROM BOTTOM</td>
<td></td>
<td>下から上へフェード改</td>
<td>15</td>
</tr>
<tr>
<td></td>
<td>DIFFERENT EASING / FROM TOP</td>
<td></td>
<td>上から下へフェード改</td>
<td>16</td>
</tr>
<tr>
<td>SCALE</td>
<td>SCALE DOWN / FROM RIGHT</td>
<td></td>
<td>右から左へ縮小</td>
<td>17</td>
</tr>
<tr>
<td></td>
<td>SCALE DOWN / FROM LEFT</td>
<td></td>
<td>左から右へ縮小</td>
<td>18</td>
</tr>
<tr>
<td></td>
<td>SCALE DOWN / FROM BOTTOM</td>
<td></td>
<td>下から上へ縮小</td>
<td>19</td>
</tr>
<tr>
<td></td>
<td>SCALE DOWN / FROM TOP</td>
<td></td>
<td>上から下へ縮小</td>
<td>20</td>
</tr>
<tr>
<td></td>
<td>SCALE DOWN / SCALE DOWN</td>
<td></td>
<td>縮小後縮小</td>
<td>21</td>
</tr>
<tr>
<td></td>
<td>SCALE UP / SCALE UP</td>
<td></td>
<td>拡大後拡大</td>
<td>22</td>
</tr>
<tr>
<td></td>
<td>MOVE TO LEFT / SCALE UP</td>
<td></td>
<td>左へ移動して拡大</td>
<td>23</td>
</tr>
<tr>
<td></td>
<td>MOVE TO RIGHT / SCALE UP</td>
<td></td>
<td>右へ移動して拡大</td>
<td>24</td>
</tr>
<tr>
<td></td>
<td>MOVE TO TOP / SCALE UP</td>
<td></td>
<td>上へ移動して拡大</td>
<td>25</td>
</tr>
<tr>
<td></td>
<td>MOVE TO BOTTOM / SCALE UP</td>
<td></td>
<td>下へ移動して拡大</td>
<td>26</td>
</tr>
<tr>
<td></td>
<td>SCALE DOWN / SCALE UP</td>
<td></td>
<td>縮小後拡大</td>
<td>27</td>
</tr>
<tr>
<td>ROTATE</td>
<td>GLUE</td>
<td>GLUE LEFT / FROM RIGHT</td>
<td>右から左へ畳み</td>
<td>28</td>
</tr>
<tr>
<td></td>
<td></td>
<td>GLUE RIGHT / FROM LEFT</td>
<td>左から右へ畳み</td>
<td>29</td>
</tr>
<tr>
<td></td>
<td></td>
<td>GLUE BOTTOM / FROM TOP</td>
<td>下から上へ畳み</td>
<td>30</td>
</tr>
<tr>
<td></td>
<td></td>
<td>GLUE TOP / FROM BOTTOM</td>
<td>上から下へ畳み</td>
<td>31</td>
</tr>
<tr>
<td></td>
<td>FLIP</td>
<td>FLIP RIGHT</td>
<td>右へ回転</td>
<td>32</td>
</tr>
<tr>
<td></td>
<td></td>
<td>FLIP LEFT</td>
<td>左へ回転</td>
<td>33</td>
</tr>
<tr>
<td></td>
<td></td>
<td>FLIP TOP</td>
<td>上へ回転</td>
<td>34</td>
</tr>
<tr>
<td></td>
<td></td>
<td>FLIP BOTTOM</td>
<td>下へ回転</td>
<td>35</td>
</tr>
<tr>
<td></td>
<td>FALL</td>
<td></td>
<td>落ちる</td>
<td>36</td>
</tr>
<tr>
<td></td>
<td>NEWSPAPER</td>
<td></td>
<td>くるくる</td>
<td>37</td>
</tr>
<tr>
<td></td>
<td>PUSH / PULL</td>
<td>PUSH LEFT / FROM RIGHT</td>
<td>右から左へ押し出し</td>
<td>38</td>
</tr>
<tr>
<td></td>
<td></td>
<td>PUSH RIGHT / FROM LEFT</td>
<td>左から右へ押し出し</td>
<td>39</td>
</tr>
<tr>
<td></td>
<td></td>
<td>PUSH TOP / FROM BOTTOM</td>
<td>下から上へ押し出し</td>
<td>40</td>
</tr>
<tr>
<td></td>
<td></td>
<td>PUSH BOTTOM / FROM TOP</td>
<td>上から下へ押し出し</td>
<td>41</td>
</tr>
<tr>
<td></td>
<td></td>
<td>PUSH LEFT / PULL RIGHT</td>
<td>右から左へ畳み交差</td>
<td>42</td>
</tr>
<tr>
<td></td>
<td></td>
<td>PUSH RIGHT / PULL LEFT</td>
<td>左から右へ畳み交差</td>
<td>43</td>
</tr>
<tr>
<td></td>
<td></td>
<td>PUSH TOP / PULL BOTTOM</td>
<td>下から上へ畳み交差</td>
<td>44</td>
</tr>
<tr>
<td></td>
<td></td>
<td>PUSH BOTTOM / PULL TOP</td>
<td>上から下へ畳み交差</td>
<td>45</td>
</tr>
<tr>
<td></td>
<td>FOLD / UNFOLD</td>
<td>FOLD LEFT / FROM RIGHT</td>
<td>右から左へ立体回転</td>
<td>46</td>
</tr>
<tr>
<td></td>
<td></td>
<td>FOLD RIGHT / FROM LEFT</td>
<td>左から右へ立体回転</td>
<td>47</td>
</tr>
<tr>
<td></td>
<td></td>
<td>FOLD TOP / FROM BOTTOM</td>
<td>下から上へ立体回転</td>
<td>48</td>
</tr>
<tr>
<td></td>
<td></td>
<td>FOLD BOTTOM / FROM TOP</td>
<td>上から下へ立体回転</td>
<td>49</td>
</tr>
<tr>
<td></td>
<td></td>
<td>MOVE TO RIGHT / UNFOLD LEFT</td>
<td>右から左へ立体回転</td>
<td>50</td>
</tr>
<tr>
<td></td>
<td></td>
<td>MOVE TO LEFT / UNFOLD RIGHT</td>
<td>左から右へ立体回転</td>
<td>51</td>
</tr>
<tr>
<td></td>
<td></td>
<td>MOVE TO BOTTOM / UNFOLD TOP</td>
<td>下から上へ立体回転</td>
<td>52</td>
</tr>
<tr>
<td></td>
<td></td>
<td>MOVE TO TOP / UNFOLD BOTTOM</td>
<td>上から下へ立体回転</td>
<td>53</td>
</tr>
<tr>
<td></td>
<td>ROOM</td>
<td>ROOM TO LEFT</td>
<td>右から左へ立体内側回転</td>
<td>54</td>
</tr>
<tr>
<td></td>
<td></td>
<td>ROOM TO RIGHT</td>
<td>左から右へ立体内側回転</td>
<td>55</td>
</tr>
<tr>
<td></td>
<td></td>
<td>ROOM TO TOP</td>
<td>下から上へ立体内側回転</td>
<td>56</td>
</tr>
<tr>
<td></td>
<td></td>
<td>ROOM TO BOTTOM</td>
<td>上から下へ立体内側回転</td>
<td>57</td>
</tr>
<tr>
<td></td>
<td>CUBE</td>
<td>CUBE TO LEFT</td>
<td>右から左へ3D回転</td>
<td>58</td>
</tr>
<tr>
<td></td>
<td></td>
<td>CUBE TO RIGHT</td>
<td>左から右へ3D回転</td>
<td>59</td>
</tr>
<tr>
<td></td>
<td></td>
<td>CUBE TO TOP</td>
<td>下から上へ3D回転</td>
<td>60</td>
</tr>
<tr>
<td></td>
<td></td>
<td>CUBE TO BOTTOM</td>
<td>上から下へ3D回転</td>
<td>61</td>
</tr>
<tr>
<td></td>
<td>CAROUSEL</td>
<td>CAROUSEL TO LEFT</td>
<td>右から左へ4次元回転</td>
<td>62</td>
</tr>
<tr>
<td></td>
<td></td>
<td>CAROUSEL TO RIGHT</td>
<td>左から右へ4次元回転</td>
<td>63</td>
</tr>
<tr>
<td></td>
<td></td>
<td>CAROUSEL TO TOP</td>
<td>下から上へ4次元回転</td>
<td>64</td>
</tr>
<tr>
<td></td>
<td></td>
<td>CAROUSEL TO BOTTOM</td>
<td>上から下へ4次元回転</td>
<td>65</td>
</tr>
<tr>
<td></td>
<td>SIDES</td>
<td></td>
<td>右から左に扇回転</td>
<td>66</td>
</tr>
<tr>
<td>SLIDE</td>
<td></td>
<td></td>
<td>右から左にスライド</td>
<td>67</td>
</tr>
</tbody>
</table>

67種類ものエフェクトが使えるjQueryプラグイン PAGE TRANSITIONS

<p>緯度経度情報をまとまった数（100件以上）調べる必要がある時に、有効な手段をまとめました。</p>
<p>まず、2つのサイトを使います。</p>
<h3>Geocording</h4>
<p><a href="http://www.geocoding.jp/" target="_blank">http://www.geocoding.jp/</a></p>
<p>住所を一つ一つ調べることで検索結果に現れます。精度がかなり高いです。</p>
<h3>住所から緯度経度を一括で調べるツール</h4>
<p><a href="http://napzak.com/tool/gcode/upload/#csv" target="_blank">http://napzak.com/tool/gcode/upload/#csv</a></p>
<p>CSV形式のアップロードすることで、一括して調べることが出来ます。</p>
<h2>1回目の一括ツール</h3>
<p>まず、リストをCSV形式にしてアップロードをします。</p>
<p>住所をキーに一行ずつ緯度経度が帰って来ます。</p>
<p>速度は100件で15分程度です。</p>
<p>300件であれば、45分前後見ておく必要があります。</p>
<p>リストの精度にもよりますが、これでおおよそ7〜8割の緯度経度は取得出来ると思われます。</p>
<h2>2回目の一括ツール</h3>
<p>ここで、出力されたCSVを見て、緯度経度が出力出来なかった原因を調査します。</p>
<p>傾向としては、</p>
<p>・建物名が入っている</p>
<p>・○丁目○番地○号という表記になっている</p>
<p>というリストになっていると取得が出来ないことが多いです。</p>
<p>・建物名を消す</p>
<p>・○-○-○という番地をハイフンでつなげる</p>
<p>という形でリストを修正しアップロードします。</p>
<p>さらにこれで7〜8割程度は取得が出来ます。</p>
<p>300件程度であれば、残りは12件程度になります。</p>
<h2>最後は、力技で1件ずつ調べる</h3>
<p>ここで、先に挙げたGeocordingで調べます。</p>
<p>経験上かなりの精度で緯度経度がでます。</p>
<p>さらには、建物名でも調べることが出来ます。</p>
<h2>まとめ</h3>
<p>・一括ツールで10件程度まで絞り込めるように回す。300件であれば、2回程度。</p>
<p>・最後は力技。</p>


google-map-logo-1024x709.jpg

100件以上の緯度経度を調べる最短の方法

<p>今やwebサイトの構築には、欠かせないといっても過言ではないCMS。</p>
<p>普通のwebサイト制作だと、ほぼCMSを使うことになるのですが、</p>
<p>CMSを使うのと、使わないとなると、全然勝手が違います。</p>
<p>特に完成した後の運用面での修正等がグッと楽になります。</p>
<p>&nbsp;</p>
<p>基本弊社では、Movable TypeかWordpressを利用して制作します。</p>
<p>しかし、昨年ぐらいからはほとんどWordpressで作ることのほうが多くなり、</p>
<p>Movable Typeで作る場合は、今までMovable Typeを使っていたというパターンです。</p>
<p>&nbsp;</p>
<p>僕自身はどちらでも構築できるのですが、</p>
<p>今ではWordpressの方がやりやすいと感じています。</p>
<p>というか最近MovableTypeの案件が少なく、忘れかけているというのもあります笑</p>
<p>&nbsp;</p>
<p>CMSについてですが、僕はその２つしか扱えないし、その２つしか知りませんでした。</p>
<p>最近、他にもCMSがあることを知り、軽く意識していたら、</p>
<p>以下の記事を発見しました。</p>
<p>&nbsp;</p>
<p><a href="http://awoni.net/blog/2012/11/983#.UdvLt1P04_c">CMS の日本でのシェアは WordPress が一人勝ちになっている件 &#8211; Webサービス作成日記</a></p>
<p>&nbsp;</p>
<p>やはり、世界的にもWordpressのシェアが多いとのこと。特に日本では。</p>
<p>そしてMovableTypeは下降気味であること、</p>
<p>ちょっと前にJoomlaとDrupalというCMSがあることを聞いていたので、その２つもシェアがなかなかあることを知り、</p>
<p>新たな発見と共に、勉強不足だなと感じました。</p>
<p>&nbsp;</p>
<p>JoomlaとDrupalの２つに関しては、実際試してみたいのですが、</p>
<p>まだその機会はなさそうなので、とりあえず今度特徴等を調べてみたいと思います。</p>
<p>その調べた結果をまた記事にしてみたいと思います。</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>


無料で使えるCMSについて

CSS3 + jQueryによる、グラデーションのホバー効果

<p>一日一回だけ投票できるようにcookieを使って制限してみました。</p>
<p>Cookieで有効期間を指定して、ユーザー情報を保存する。</p>
<p>cookieを使用するには、setcookie関数を使います。</p>
<p></p>

		<div id="crayon-64953fd58c0fe187790850" 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">php</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;">
if ($_COOKIE['visitor']) {
	$count = $_COOKIE['visitor']+1;
	setcookie("visitor", $count);
	echo "一日一回のみの投票になります。";
	
	
} else {
	$count = 1;
	setcookie("visitor", $count);
	/* データベースに投票回数挿入 */

	echo "投票ありがとうございました。";
}</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-64953fd58c0fe187790850-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd58c0fe187790850-2">2</div><div class="crayon-num" data-line="crayon-64953fd58c0fe187790850-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd58c0fe187790850-4">4</div><div class="crayon-num" data-line="crayon-64953fd58c0fe187790850-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd58c0fe187790850-6">6</div><div class="crayon-num" data-line="crayon-64953fd58c0fe187790850-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd58c0fe187790850-8">8</div><div class="crayon-num" data-line="crayon-64953fd58c0fe187790850-9">9</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd58c0fe187790850-10">10</div><div class="crayon-num" data-line="crayon-64953fd58c0fe187790850-11">11</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd58c0fe187790850-12">12</div><div class="crayon-num" data-line="crayon-64953fd58c0fe187790850-13">13</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-64953fd58c0fe187790850-1"><span class="crayon-st">if</span><span class="crayon-h"> </span><span class="crayon-sy">(</span><span class="crayon-sy">$</span><span class="crayon-i">_COOKIE</span><span class="crayon-sy">[</span><span class="crayon-s">'visitor'</span><span class="crayon-sy">]</span><span class="crayon-sy">)</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd58c0fe187790850-2"><span class="crayon-h">	</span><span class="crayon-sy">$</span><span class="crayon-i">count</span><span class="crayon-h"> </span>=<span class="crayon-h"> </span><span class="crayon-sy">$</span><span class="crayon-i">_COOKIE</span><span class="crayon-sy">[</span><span class="crayon-s">'visitor'</span><span class="crayon-sy">]</span>+<span class="crayon-cn">1</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-64953fd58c0fe187790850-3"><span class="crayon-h">	</span><span class="crayon-e">setcookie</span><span class="crayon-sy">(</span><span class="crayon-s">"visitor"</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-sy">$</span><span class="crayon-i">count</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd58c0fe187790850-4"><span class="crayon-h">	</span><span class="crayon-i">echo</span><span class="crayon-h"> </span><span class="crayon-s">"一日一回のみの投票になります。"</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-64953fd58c0fe187790850-5"><span class="crayon-h">	</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd58c0fe187790850-6"><span class="crayon-h">	</span></div><div class="crayon-line" id="crayon-64953fd58c0fe187790850-7"><span class="crayon-sy">}</span><span class="crayon-h"> </span><span class="crayon-st">else</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd58c0fe187790850-8"><span class="crayon-h">	</span><span class="crayon-sy">$</span><span class="crayon-i">count</span><span class="crayon-h"> </span>=<span class="crayon-h"> </span><span class="crayon-cn">1</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-64953fd58c0fe187790850-9"><span class="crayon-h">	</span><span class="crayon-e">setcookie</span><span class="crayon-sy">(</span><span class="crayon-s">"visitor"</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-sy">$</span><span class="crayon-i">count</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd58c0fe187790850-10"><span class="crayon-h">	</span><span class="crayon-c">/* データベースに投票回数挿入 */</span></div><div class="crayon-line" id="crayon-64953fd58c0fe187790850-11">&nbsp;</div><div class="crayon-line crayon-striped-line" id="crayon-64953fd58c0fe187790850-12"><span class="crayon-h">	</span><span class="crayon-i">echo</span><span class="crayon-h"> </span><span class="crayon-s">"投票ありがとうございました。"</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-64953fd58c0fe187790850-13"><span class="crayon-sy">}</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p> </p>
<p>アクセス有効期限を一日にしたいため、[time()+24*60*60]をsetcookieに加えます。</p>
<p></p>

		<div id="crayon-64953fd58c102445533592" 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;">
setcookie("visitor", $count,time()+24*60*60);</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-64953fd58c102445533592-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-64953fd58c102445533592-1"><span class="crayon-e">setcookie</span><span class="crayon-sy">(</span><span class="crayon-s">"visitor"</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-sy">$</span><span class="crayon-i">count</span><span class="crayon-sy">,</span><span class="crayon-e">time</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span>+<span class="crayon-cn">24</span>*<span class="crayon-cn">60</span>*<span class="crayon-cn">60</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p> </p>
<p>有効期限を設定しなかった場合は、ブラウザを閉じるまで有効になります。</p>
<p>cookieのデメリット<br />
①　使える変数の数は20個まで！<br />
②　cookieの内容はユーザーのパソコンに保存されます。<br />
　　パスワード等を cookie に保存してしまうと、 パソコンを他人と共用している場合などに、パスワードが洩れる可能性があります。</p>

ユーザーの情報をCookieで保存する

<p><a href="https://github.com/stfalcon/TinymceBundle" target="_blank">stfalcon_tinymce</a>は、Symfony2でよく使われてるtinymceのバンドル（プラグイン）です。</p>
<p>tinymceのデフォルト設定では、画像を挿入するときに、自動にurlを相対パスに書き換えてhtmlを生成しますが、<br />
symfony2はrouting（url）が自分で設定できるため、urlの階層が違うと画像が表示できなくなります。</p>
<p>例：<br />
画像を挿入するページ： http://www.example.com/admin/insert_image<br />
画像を表示するページ： http://www.example.com/user/blog/999 （999は記事のid）<br />
挿入した画像： </p>
<p></p>

		<div id="crayon-64953fd58bf13786176665" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover wrap" style=" margin-top: 12px; margin-bottom: 12px; font-size: 13px !important; line-height: 18px !important;">
		
			<div class="crayon-toolbar" data-settings=" mouseover overlay hide delay" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><span class="crayon-title"></span>
			<div class="crayon-tools" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><div class="crayon-button crayon-nums-button" title="Toggle Line Numbers"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-plain-button" title="Toggle Plain Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-copy-button" title="Copy"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-popup-button" title="Open Code In New Window"><div class="crayon-button-icon"></div></div><span class="crayon-language">XHTML</span></div></div>
			<div class="crayon-info" style="min-height: 19.5px !important; line-height: 19.5px !important;"></div>
			<div class="crayon-plain-wrap"><textarea  class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 13px !important; line-height: 18px !important;">
&lt;img src="../../images/image1.jpg"&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-64953fd58bf13786176665-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-64953fd58bf13786176665-1"><span class="crayon-r ">&lt;img </span><span class="crayon-e ">src</span>=<span class="crayon-s ">"../../images/image1.jpg"</span><span class="crayon-r ">&gt;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p> </p>
<p>当然画像がうまく表示できません。</p>
<p>ここで、画像を絶対urlで挿入することが望ましいです。<br />
そのために、symfony2の設定ファイル（例：app/config/config.yml）に、stfalcon_tinymceのテーマに、下記設定を追加する必要あります。</p>
<p></p>

		<div id="crayon-64953fd58bf17256070691" 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">YAML</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;">
relative_urls : false,
remove_script_host : false,
convert_urls : false, 
document_base_url : "http://www.example.com/",</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-64953fd58bf17256070691-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd58bf17256070691-2">2</div><div class="crayon-num" data-line="crayon-64953fd58bf17256070691-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd58bf17256070691-4">4</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-64953fd58bf17256070691-1">relative<span class="crayon-sy">_</span>urls<span class="crayon-h"> </span><span class="">: false</span><span class="crayon-o">,</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd58bf17256070691-2">remove<span class="crayon-sy">_</span>script<span class="crayon-sy">_</span>host<span class="crayon-h"> </span><span class="">: false</span><span class="crayon-o">,</span></div><div class="crayon-line" id="crayon-64953fd58bf17256070691-3">convert<span class="crayon-sy">_</span>urls<span class="crayon-h"> </span><span class="">: false</span><span class="crayon-o">,</span><span class="crayon-h"> </span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd58bf17256070691-4">document<span class="crayon-sy">_</span>base<span class="crayon-sy">_</span>url<span class="crayon-h"> </span><span class="">: "http</span><span class="">://www.example.com/"</span><span class="crayon-o">,</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p> </p>

【symfony2&#038;tinymce】絶対urlで画像を挿入するために

<p>こちらのサイト（→<a href="http://triand.jp/">http://triand.jp/</a>）をご覧いただきたいのですが、</p>
<p>こちらのサイトでは、トップページのビジュアル部分にアニメーションが使われています。</p>
<p>とても滑らかな動きなので、FlashかHTML5のCanvasで作られていると思ったのですが、実際にはGIFファイルでした。</p>
<p>GIFアニメだと独特のカクカクとした動きしかできないものだと思っていたので驚きました。</p>
<p>調べてみると0.03秒に1コマというとても細かい間隔で作られていました。</p>
<p>&nbsp;</p>
<p>通常Photoshopでは、0.1秒までしか設定できませんが、実はもっと細かくできるんじゃないかと思って、</p>
<p>いろいろ試していたところ、普通にできてしまうことがわかったので、その方法をご紹介いたします。</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>まずは「ウィンドウ」→「アニメーション」でアニメーションのフレームを表示します。</p>
<p><img decoding="async" loading="lazy" alt="image" src="/uploads-archive/2013/07/img02.jpg" width="480" height="368" /></p>
<p>&nbsp;</p>
<p>つぎに、アニメーションの間隔を指定します。</p>
<p><img decoding="async" loading="lazy" alt="image" src="/uploads-archive/2013/07/img01.jpg" width="480" height="368" /></p>
<p>&nbsp;</p>
<p>ドロップボックスに表示されるのは0.1秒までなのですが、</p>
<p>その他を選ぶことでもっと細かく指定できます。</p>
<p><img decoding="async" loading="lazy" alt="image" src="/uploads-archive/2013/07/img04.jpg" width="480" height="368" /></p>
<p>1コマ1コマなのでかなり根気の要る作業となりますが、</p>
<p>ちょっとした効果をJS等を使わずに表現するとき、</p>
<p>役に立ちそうです。</p>
<p>&nbsp;</p>


PhotoshopでFlashのような滑らかなGIFアニメを作るための裏技

オブジェクトを良い感じでぼかしてくれるjQueryプラグイン Vague.js

<p>うちの会社でももう一度振り返る必要もあるかもしれませんが、<br />
他の方々、会社さんはどのようなフローでやっているのかが気になる所です。</p>
<p>この流れをお客さんと共有し、<br />
トラブルを軽減できるようになれたら素晴らしいですね。</p>
<p>やはり、トラブルの元は、</p>
<p><span style="font-size: large;"><strong>「認識の違い」</strong></span></p>
<p>が主になってくるのだと思います。</p>
<p><strong>「ここはこうだと思ってた」</strong>、<strong>「これはできると思ってた」</strong><br />
<strong> 「この後どう進むのか」</strong>、等々<br />
少しのズレが、大きくなり、重なることでトラブルが起こってしまうのではないかと思います。</p>
<p>それでは、記事にして頂いてる方を記載したいと思います。</p>
<p>&nbsp;</p>
<h2>web制作の流れ</h3>
<p>&nbsp;</p>
<p><span style="font-size: medium;"><a href="http://www.ar-ch.org/mt/archives/2012/05/web-3.html" target="_blank">Webサイト制作の一連の流れをまとめてみました | Arch</a></span><br />
順番がしっかりしており、非常に参考になります。</p>
<p>&nbsp;</p>
<p><span style="font-size: medium;"><a href="http://vanidesign.blog.fc2.com/blog-entry-64.html" target="_blank">きっとトラブルが起きにくい！ウェブデザインの制作順序を書きました。 |　バニデザノート</a></span><br />
簡潔に流れを説明してくれおり、シンプルでわかりやすいです。</p>
<p>&nbsp;</p>
<p><span style="font-size: medium;"><a href="http://www.webcreatorbox.com/tech/website-before-start-ready/" target="_blank">誰のため？何のため？Webサイトを作り始める前に。 | Webクリエイターボックス</a></span><br />
こちらは、実際にwebデザイナーがwebサイトを作るまでの流れで、プロジェクトとしての流れとは若干違い、<br />
作業の方法等を丁寧に説明してくれています。<br />
序盤の流れは、考えるべきことかと思います。</p>
<p>&nbsp;</p>
<p><span style="font-size: medium;"><a href="http://webdesignrecipes.com/web-development-flow/" target="_blank">Webデザイナー（私）によるWeb制作のときに気をつけてることや制作フローとかいろいろ</a></span><br />
上記同様な内容と似ています。<br />
どちらもフリーの方なので、「一人でやる場合」というイメージの方が強いかもしれません。</p>
<p>&nbsp;</p>
<p><span style="font-size: medium;"><a href="http://design-spice.com/2011/06/23/website-rough/" target="_blank">私がwebサイトのラフデザインを制作する時の流れ │ Design Spice</a></span><br />
こちらはデザインを起こす順序が書かれており、他人の進め方を見れ、非常に参考になります。</p>
<p>&nbsp;</p>
<p>上記のリンクは流れとしては、<br />
個人よりで、作業としての流れだったので次はディレクターがやるべきことで、<br />
サイト制作を成功へと導くための記事を紹介します。</p>
<p>&nbsp;</p>
<h2>ディレクターがすべきこと</h3>
<p>&nbsp;</p>
<p><span style="font-size: medium;"><a href="http://web-d.navigater.info/cat1/13-1.html" target="_blank">プロジェクトの開始までにWebディレクターが用意するものとこと13個まとめ | Webディレクターズマニュアル</a></span></p>
<p>&nbsp;</p>
<p><span style="font-size: medium;"><a href="http://maka-veli.com/d-plan-threerules.html" target="_blank">ディレクターが思う。Webサイト設計時に必ず注意したい2つのこと（+1） / Maka-Veli .com</a></span></p>
<p>&nbsp;</p>
<p><span style="font-size: medium;"><a href="http://www.mdn.co.jp/di/articles/2108/" target="_blank">第1回　Webディレクターが押さえておくたったふたつのポイント &#8211; MdN Design Interactive</a></span></p>
<p>&nbsp;</p>
<p><span style="font-size: medium;"><a href="http://www.mdn.co.jp/di/articles/2107/" target="_blank">第2回　クライアントとのより良い関係を導くディレクション手法 &#8211; MdN Design Interactive</a></span></p>
<p>&nbsp;</p>
<p>こちらは制作の流れというよりも、<br />
webサイトの根底の部分を決めるための方法で、<br />
この根底をしっかり決め、お客さんと共有することで、<br />
途中、コロコロデザイン変更の修正について言われたり、<br />
そもそものコンテンツが変わったり、<br />
仕様が変わったりといったことを<br />
避けられるのではないのでしょうか。</p>
<p>それ以前に、webサイトとして小手先でない、<br />
意味のあるwebサイトが出来上がるのではないかと思います。</p>
<p>ぜひいいwebサイトを作って、<br />
お客さんに満足してもらいたいと思います！</p>
<p>おまけ<br />
<a href="http://www.yasuhisa.com/could/article/why-designers-fail/" target="_blank">デザインが失敗してしまう理由 : could</a></p>


もう一度見直してみよう！web制作の流れについてのまとめ

<p>ApacheのRewrite設定で、多数のケースはRewriteBaseを使う必要ありませんので、<a href="http://symfony.com/" target="_blank">symfony2</a>のデフォルトの.htaccessファイルには堂々に</a></p>

		<div id="crayon-64953fd58bafe682172269" 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;">
RewriteBase /</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-64953fd58bafe682172269-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-64953fd58bafe682172269-1"><span class="crayon-i">RewriteBase</span><span class="crayon-h"> </span>/</div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>と書いてありますが、実際にはRewriteBaseの使い方がよくわかりませんでした。</p>
<p>今回の<a href="/launchcart" target="_blank">LaunchCart</a>設定でちょっと試して、RewriteBaseの使い方について分かってきた気がします。</a></p>
<h2>要件</h3>
<p>１、サーバのドキュメントルートが/var/www/html（デフォルト、今回の設定と関係なし）<br />
２、LaunchCartのドキュメントルートが/var/www/LaunchCart/web（Wordpressと併用するため、ドキュメントルート設置することはできなかった）<br />
３、サーバのURLがhttp://example.net/（こちらも設定と関係ないです）<br />
４、LaunchCartのURLがhttp://example.net/lc（便宜上、LaunchCartをlcに）<br />
５、http://example.net/lcに来たアクセスは、/var/www/LaunchCart/web/app.phpに書き換えたい</p>
<h2>設定</h3>
<p>Aliasを使って、/lc -&gt; /var/www/LaunchCart/webに書き換えたいと思います。<br />
Aliasは.htaccessで設定できないため、ここでhttpd.confに設定する必要があります。<br />
下記設定で、意外と一発でできました！</p>
<h3>httpd.conf</h4>
<p></p>

		<div id="crayon-64953fd58bb02692152828" 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">Vim</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;">
Alias /lc /var/www/LaunchCart/web</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-64953fd58bb02692152828-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-64953fd58bb02692152828-1"><span class="crayon-i">Alias</span><span class="crayon-h"> </span>/<span class="crayon-i">lc</span><span class="crayon-h"> </span>/<span class="crayon-i">var</span>/<span class="crayon-i">www</span>/<span class="crayon-i">LaunchCart</span>/<span class="crayon-i">web</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p></p>
<h3>.htaccess</h4>
<p></p>

		<div id="crayon-64953fd58bb04778677382" 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">Vim</span></div></div>
			<div class="crayon-info" style="min-height: 19.5px !important; line-height: 19.5px !important;"></div>
			<div class="crayon-plain-wrap"><textarea  class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 13px !important; line-height: 18px !important;">
&lt;IfModule mod_rewrite.c&gt;
&lt;Directory /var/www/LaunchCart/web&gt;
    RewriteEngine On
    RewriteBase /lc/
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteRule ^(.*)$ app.php [QSA,L]
&lt;/Directory&gt;
&lt;/IfModule&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-64953fd58bb04778677382-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd58bb04778677382-2">2</div><div class="crayon-num" data-line="crayon-64953fd58bb04778677382-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd58bb04778677382-4">4</div><div class="crayon-num" data-line="crayon-64953fd58bb04778677382-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd58bb04778677382-6">6</div><div class="crayon-num" data-line="crayon-64953fd58bb04778677382-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd58bb04778677382-8">8</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 13px !important; line-height: 18px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-64953fd58bb04778677382-1"><span class="crayon-h">&lt;</span><span class="crayon-e">IfModule </span><span class="crayon-i">mod_rewrite</span><span class="crayon-sy">.</span><span class="crayon-i">c</span><span class="crayon-h">&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd58bb04778677382-2"><span class="crayon-h">&lt;</span><span class="crayon-e">Directory</span><span class="crayon-h"> </span>/<span class="crayon-e">var</span>/<span class="crayon-e">www</span>/<span class="crayon-e">LaunchCart</span>/<span class="crayon-e">web</span><span class="crayon-h">&gt;</span></div><div class="crayon-line" id="crayon-64953fd58bb04778677382-3"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-e">RewriteEngine</span><span class="crayon-h"> </span><span class="crayon-e">On</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd58bb04778677382-4"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-e">RewriteBase</span><span class="crayon-h"> </span>/<span class="crayon-e">lc</span>/</div><div class="crayon-line" id="crayon-64953fd58bb04778677382-5"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-e">RewriteCond</span><span class="crayon-h"> </span><span class="crayon-sy">%</span><span class="crayon-sy">{</span><span class="crayon-i">REQUEST_FILENAME</span><span class="crayon-sy">}</span><span class="crayon-h"> </span><span class="crayon-sy">!</span>-<span class="crayon-i">f</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd58bb04778677382-6"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-i">RewriteRule</span><span class="crayon-h"> </span>^<span class="crayon-sy">(</span><span class="crayon-sy">.</span>*<span class="crayon-sy">)</span><span class="crayon-sy">$</span><span class="crayon-h"> </span><span class="crayon-i">app</span><span class="crayon-sy">.</span><span class="crayon-i">php</span><span class="crayon-h"> </span><span class="crayon-sy">[</span><span class="crayon-i">QSA</span><span class="crayon-sy">,</span><span class="crayon-i">L</span><span class="crayon-sy">]</span></div><div class="crayon-line" id="crayon-64953fd58bb04778677382-7"><span class="crayon-h">&lt;</span>/<span class="crayon-i">Directory</span><span class="crayon-h">&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd58bb04778677382-8"><span class="crayon-h">&lt;</span>/<span class="crayon-i">IfModule</span><span class="crayon-h">&gt;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p></p>

【apache】RewriteBaseの使い方

<p>ブラウザ上でFlashを使わずに3Dのグラフィック描画を可能にする<strong>HTML5</strong>での新技術の<strong>WebGL</strong>ですが、</p>
<p>動作環境が限定されているのが現状です。</p>
<p>&nbsp;</p>
<p>とはいえど、今後利用範囲が拡大していくことは確実ですので、</p>
<p>まずは利用できる環境を知りたいと思ったので、まとめてみました。</p>
<p>&nbsp;</p>
<p><strong>WebGL</strong>の動作環境として特徴的なのは、</p>
<p>他のHTML5技術ではブラウザ環境だけが制限の要因となることが多いですが、</p>
<p><strong>WebGL</strong>ではグラフィックボードを利用しているため、</p>
<p>グラフィックボードの<strong>OpenGL</strong>への対応状況が制限の要因となってきます。</p>
<p>つまり、ブラウザが最新でもPCが古い場合は利用できないこともあるということです。</p>
<p><strong>※追記→最新のChromeでは、グラフィックボードが対応していなくても、ブラウザ側で再現してしまうので、</strong></p>
<p><strong>問題なく使えるようです。</strong></p>
<p>&nbsp;</p>
<h3>OpenGLの対応状況</h4>
<table>
<tbody>
<tr>
<th>OpenGL 1.x</th>
<th>OpenGL 2.x</th>
<th>OpenGL 3.x</th>
<th>OpenGl ES 2.0</th>
<th>OpenGl ES 3.0</th>
</tr>
<tr>
<td style="text-align: center;">×</td>
<td style="text-align: center;">△</td>
<td style="text-align: center;">○</td>
<td style="text-align: center;">○</td>
<td style="text-align: center;">○</td>
</tr>
</tbody>
</table>
<p>○：対応　△：ブラウザの設定変更が必要　×：非対応</p>
<p>&nbsp;</p>
<h3>PCブラウザの対応状況</h4>
<table>
<tbody>
<tr>
<th>Firefox 4 以降</th>
<th>Chrome 9 以降</th>
<th>Safari 5.1以降</th>
<th>Opera 12以降</th>
<th>IE 11以降</th>
</tr>
<tr>
<td style="text-align: center;">○</td>
<td style="text-align: center;">○</td>
<td style="text-align: center;">△</td>
<td style="text-align: center;">△</td>
<td style="text-align: center;">○になりそう</td>
</tr>
</tbody>
</table>
<p>○：対応　△：ブラウザの設定変更が必要　×：非対応</p>
<p>&nbsp;</p>
<h3>スマホのブラウザの対応状況</h4>
<table>
<tbody>
<tr>
<th colspan="4">Android</th>
<th rowspan="2">iOS</th>
</tr>
<tr>
<th>Firefox for Mobile 以降</th>
<th>Opera Mobile 12 以降</th>
<th>Google Chrome for Android 25 以降</th>
<th>Android ブラウザ 以降</th>
</tr>
<tr>
<td style="text-align: center;">○(android 4以降)</td>
<td style="text-align: center;">○</td>
<td style="text-align: center;">○</td>
<td style="text-align: center;">△</td>
<td style="text-align: center;">△(iAdのみ)</td>
</tr>
</tbody>
</table>
<p>○：対応　△：ブラウザの設定変更が必要　×：非対応</p>
<p>&nbsp;</p>
<p>スマホの場合、「Enable WebGL」というアプリをスマホに導入することで、</p>
<p>非対応のブラウザでも<strong>WebGL</strong>を利用可能になるようです。</p>
<p>&nbsp;</p>
<p>ユーザーが<strong>WebGL</strong>を有効にすれば利用可能になるブラウザも多くあるので、</p>
<p>クッキーの説明のように、<strong>WebGL</strong>についての設定を載せるなどして、</p>
<p>作る側が利用拡大を模索していくことも、<strong>WebGL</strong>の普及には重要かもしれません。</p>
<p>&nbsp;</p>
<p>&nbsp;</p>


WebGLの動作環境まとめ

<p>gitは、バージョン管理ツールとして、<a href="http://e-words.jp/w/SVN.html" target="_blank">svn</a>よりも流行していると感じです。<br />
まさにgithubが履歴書みたいなものになる時代に、こういう記事を書くのはヘンな感じですが、だからこそ紹介したいと思います。</p>
<h3>必要なパッケージをインストール</h4>
<p></p>

		<div id="crayon-64953fd58b8dc766307513" 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;">
yum install -y zlib-devel perl-devel gettext</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-64953fd58b8dc766307513-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-64953fd58b8dc766307513-1"><span class="crayon-e">yum </span><span class="crayon-i">install</span><span class="crayon-h"> </span>-<span class="crayon-i">y</span><span class="crayon-h"> </span><span class="crayon-i">zlib</span>-<span class="crayon-e">devel </span><span class="crayon-i">perl</span>-<span class="crayon-e">devel </span><span class="crayon-i">gettext</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p> </p>
<h3>決めたインストール箇所に行く</h4>
<p></p>

		<div id="crayon-64953fd58b8e1097217328" 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;">
cd /usr/bin</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-64953fd58b8e1097217328-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-64953fd58b8e1097217328-1"><span class="crayon-i">cd</span><span class="crayon-h"> </span>/<span class="crayon-i">usr</span>/<span class="crayon-i">bin</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p> </p>
<h3>gitをダウンロードする</h4>
<p></p>

		<div id="crayon-64953fd58b8e2466765130" 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;">
wget http://git-core.googlecode.com/files/git-1.8.1.1.tar.gz</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-64953fd58b8e2466765130-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-64953fd58b8e2466765130-1"><span class="crayon-e">wget </span><span class="crayon-i">http</span><span class="crayon-sy">:</span><span class="crayon-c">//git-core.googlecode.com/files/git-1.8.1.1.tar.gz</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p> </p>
<h3>gitを解凍する</h4>
<p></p>

		<div id="crayon-64953fd58b8e3230437558" 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;">
tar zxvf git-1.8.1.1.tar.gz</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-64953fd58b8e3230437558-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-64953fd58b8e3230437558-1"><span class="crayon-e">tar </span><span class="crayon-e">zxvf </span><span class="crayon-i">git</span>-<span class="crayon-cn">1.8.1.1.tar.gz</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p> </p>
<h3>インストール</h4>
<p></p>

		<div id="crayon-64953fd58b8e5956564295" 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;">
 cd git-1.8.1.1/
./configure 
make
make install </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-64953fd58b8e5956564295-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd58b8e5956564295-2">2</div><div class="crayon-num" data-line="crayon-64953fd58b8e5956564295-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd58b8e5956564295-4">4</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-64953fd58b8e5956564295-1"><span class="crayon-h"> </span><span class="crayon-e">cd </span><span class="crayon-i">git</span>-<span class="crayon-cn">1.8.1.1</span>/</div><div class="crayon-line crayon-striped-line" id="crayon-64953fd58b8e5956564295-2"><span class="crayon-sy">.</span>/<span class="crayon-e">configure </span></div><div class="crayon-line" id="crayon-64953fd58b8e5956564295-3"><span class="crayon-e">make</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd58b8e5956564295-4"><span class="crayon-e">make </span><span class="crayon-i">install</span><span class="crayon-h"> </span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p> </p>
<h3>要らないファイルの削除</h4>
<p></p>

		<div id="crayon-64953fd58b8e6568688513" 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;">
rm -rf ../git-1.8.1.1.tar.gz</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-64953fd58b8e6568688513-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-64953fd58b8e6568688513-1"><span class="crayon-i">rm</span><span class="crayon-h"> </span>-<span class="crayon-i">rf</span><span class="crayon-h"> </span><span class="crayon-sy">.</span><span class="crayon-sy">.</span>/<span class="crayon-i">git</span>-<span class="crayon-cn">1.8.1.1.tar.gz</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p> </p>

【CentOS 6】gitをインストールしてみました

<p>webデザインをしている中で、僕の場合はほとんどPSDなんですが、やはり他の人がどんな風にデザインしているのか、どんなテクニックを使っているのかというのは非常に気になる所です。</p>
<p>そんな中、有名で人気のあるサイトのUIがPSDでゲットできちゃうというサイトがありました。</p>
<p>Github,apple,facebook等のサイトのUIなんかがあります。</p>
<p>なんと教育目的(?)のたまに、正確にPSDでおこしたそうです。</p>
<p>appleに関しては、単純そうに見えて、意外と手が込んでました。。。</p>
<p>やはり「神は細部に宿る」ですかね。</p>
<p>そのサイトはこちらになります。</p>
<p><a href="http://lukechesser.github.io/Popular-UIs/" target="_target">Popular UIs | Free PSDs of popular Web Interfaces</a></p>
<p><a href="/uploads-archive/2013/06/Popular-UIs-Free-PSDs-of-popular-Web-Interfaces-e1372096753498.jpg"><img decoding="async" loading="lazy" class="alignnone  wp-image-2473" alt="Popular UIs  Free PSDs of popular Web Interfaces" src="/uploads-archive/2013/06/Popular-UIs-Free-PSDs-of-popular-Web-Interfaces-e1372096753498.jpg" width="624" height="2485" srcset="/uploads-archive/2013/06/Popular-UIs-Free-PSDs-of-popular-Web-Interfaces-e1372096753498-257x1024.jpg 257w, /uploads-archive/2013/06/Popular-UIs-Free-PSDs-of-popular-Web-Interfaces-e1372096753498-75x300.jpg 75w" sizes="(max-width: 624px) 100vw, 624px" /></a></p>
<p>そしてさらにもうひとつ。</p>
<p>50個の無料のwedデザインPSD、そして中にはHTMLソースまであるやつもあります！</p>
<p><a href="http://www.splashnology.com/article/50-new-and-free-psd-website-templates/9457/">50 New and Free PSD Website Templates | Splashnology.com</a></p>
<p>こんなものがあるなんて我々webデザイナーの役割って・・・って感じです。</p>
<p>まぁこれは海外のものなんでちょっと日本のとは違うので、使いづらいかもしれません。</p>
<p>ただ、非常に参考になります。</p>
<p>勉強させてもらいます！！</p>
<p>&nbsp;</p>


とてつもなく参考になるwebデザインのPSDをダウンロードできちゃうサイト

<p>この業界は、日々新しいことが生まれたり、技術に上限がなかったりと、</p>
<p>日々学んでいくことが必要とされていますが、</p>
<p>そのために必要な勉強会やサイトの情報を紹介します。</p>
<p>現段階で僕が知っている情報ですので、もっと他にもあればぜひぜひ教えて頂きたいです！！</p>
<p>紹介するのは、webサービスや勉強会、イベントサイトになります。</p>
<p>&nbsp;</p>
<h2>3分動画でマスターする初心者向けプログラミング学習サイト &#8211; ドットインストール</h3>
<p><a href="http://dotinstall.com/" target="_blank"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-2452" alt="3分動画でマスターする初心者向けプログラミング学習サイト - ドットインストール" src="/uploads-archive/2013/06/ebba14db0b76930f45af05e17ab91563.jpg" width="600" height="327" srcset="/uploads-archive/2013/06/ebba14db0b76930f45af05e17ab91563.jpg 1228w, /uploads-archive/2013/06/ebba14db0b76930f45af05e17ab91563-300x164.jpg 300w, /uploads-archive/2013/06/ebba14db0b76930f45af05e17ab91563-768x419.jpg 768w, /uploads-archive/2013/06/ebba14db0b76930f45af05e17ab91563-1024x559.jpg 1024w, /uploads-archive/2013/06/ebba14db0b76930f45af05e17ab91563-228x124.jpg 228w" sizes="(max-width: 600px) 100vw, 600px" /></a></p>
<p>このサイトは素晴らしく、web系をまんべんなく網羅しています。<br />
全部やりきれば一人でほとんどのことはできるんじゃないでしょうか？<br />
無料という所も素晴らしいです！有料にすると、添削機能もつきます！</p>
<p>&nbsp;</p>
<p><a href="http://dotinstall.com/" target="_blank">3分動画でマスターする初心者向けプログラミング学習サイト &#8211; ドットインストール</a></p>
<p>&nbsp;</p>
<h2>schoo（スクー） WEB-campus</h3>
<p><a href="http://schoo.jp/" target="_blank"><img decoding="async" loading="lazy" class="alignnone  wp-image-2453" alt="schoo（スクー） WEB-campus" src="/uploads-archive/2013/06/218ed2bad1655586e3dacf0a3a671e2b.jpg" width="600" height="327" srcset="/uploads-archive/2013/06/218ed2bad1655586e3dacf0a3a671e2b.jpg 1228w, /uploads-archive/2013/06/218ed2bad1655586e3dacf0a3a671e2b-300x164.jpg 300w, /uploads-archive/2013/06/218ed2bad1655586e3dacf0a3a671e2b-768x419.jpg 768w, /uploads-archive/2013/06/218ed2bad1655586e3dacf0a3a671e2b-1024x559.jpg 1024w, /uploads-archive/2013/06/218ed2bad1655586e3dacf0a3a671e2b-228x124.jpg 228w" sizes="(max-width: 600px) 100vw, 600px" /></a></p>
<p>このサイトはIT専門ってわけではなく、<br />
ビジネスマンのための学校をweb上で体現しています。<br />
その道のプロが毎週変わる変わるweb上で授業をしてくれます。<br />
動画配信なので、一回だけでなく、好きなときに見ることも出来ます。</p>
<p>無料で利用できますが、有料でも月500円なのでお得だと思います。</p>
<p>&nbsp;</p>
<p><a href="http://schoo.jp/" target="_blank">schoo（スクー） WEB-campus</a></p>
<p>&nbsp;</p>
<h2>TechAcademy [テックアカデミー] | ITに特化したスクール</h3>
<p><a href="http://techacademy.jp/" target="_blank"><img decoding="async" loading="lazy" class="alignnone  wp-image-2454" alt="TechAcademy [テックアカデミー]  ITに特化したスクール" src="/uploads-archive/2013/06/3035ffb4764a9429ddd5417b8419ce4b.jpg" width="598" height="326" srcset="/uploads-archive/2013/06/3035ffb4764a9429ddd5417b8419ce4b.jpg 1228w, /uploads-archive/2013/06/3035ffb4764a9429ddd5417b8419ce4b-300x164.jpg 300w, /uploads-archive/2013/06/3035ffb4764a9429ddd5417b8419ce4b-768x419.jpg 768w, /uploads-archive/2013/06/3035ffb4764a9429ddd5417b8419ce4b-1024x559.jpg 1024w, /uploads-archive/2013/06/3035ffb4764a9429ddd5417b8419ce4b-228x124.jpg 228w" sizes="(max-width: 598px) 100vw, 598px" /></a></p>
<p>こちらはweb系よりの学校で、お金はかかりますが、時間単位で換算すると、<br />
そこまで高くないかと思います。<br />
まだ一度も行ったことはないので、なにか参加してみたいなぁと思っております。</p>
<p>&nbsp;</p>
<p><a href="http://techacademy.jp/" target="_blank">TechAcademy [テックアカデミー] | ITに特化したスクール</a></p>
<p>&nbsp;</p>
<h2>ストリートアカデミー</h3>
<p><a href="http://www.street-academy.com/" target="_blank"><img decoding="async" loading="lazy" class="alignnone  wp-image-2455" alt="ストリートアカデミー" src="/uploads-archive/2013/06/171cc755f46487ec7e2f018977c01de9.jpg" width="601" height="327" srcset="/uploads-archive/2013/06/171cc755f46487ec7e2f018977c01de9.jpg 1228w, /uploads-archive/2013/06/171cc755f46487ec7e2f018977c01de9-300x164.jpg 300w, /uploads-archive/2013/06/171cc755f46487ec7e2f018977c01de9-768x419.jpg 768w, /uploads-archive/2013/06/171cc755f46487ec7e2f018977c01de9-1024x559.jpg 1024w, /uploads-archive/2013/06/171cc755f46487ec7e2f018977c01de9-228x124.jpg 228w" sizes="(max-width: 601px) 100vw, 601px" /></a></p>
<p>こちらは、勉強会サイトで、IT/web専門というわけではないですが、比較的多く行われているようです。</p>
<p>&nbsp;</p>
<p><a href="http://www.street-academy.com/" target="_blank">ストリートアカデミー</a></p>
<p>&nbsp;</p>
<h2>イベントの決済ができるコミュニティ運営システム | Doorkeeper</h3>
<p><a href="http://www.doorkeeper.jp/" target="_blank"><img decoding="async" loading="lazy" class="alignnone  wp-image-2456" alt="イベントの決済ができるコミュニティ運営システム  Doorkeeper" src="/uploads-archive/2013/06/e8e23f194070d09a809043bd669deb44.jpg" width="600" height="327" srcset="/uploads-archive/2013/06/e8e23f194070d09a809043bd669deb44.jpg 1228w, /uploads-archive/2013/06/e8e23f194070d09a809043bd669deb44-300x164.jpg 300w, /uploads-archive/2013/06/e8e23f194070d09a809043bd669deb44-768x419.jpg 768w, /uploads-archive/2013/06/e8e23f194070d09a809043bd669deb44-1024x559.jpg 1024w, /uploads-archive/2013/06/e8e23f194070d09a809043bd669deb44-228x124.jpg 228w" sizes="(max-width: 600px) 100vw, 600px" /></a><br />
<a href="http://www.doorkeeper.jp/" target="_blank">イベントの決済ができるコミュニティ運営システム | Doorkeeper</a></p>
<p>こちらは、勉強会告知のコミュニティサイトで、けっこうプログラムの要素が濃く、<br />
すでにコミュニティがいろいろと存在しているので、近くにあるならば参加してみたいですね</p>
<p>&nbsp;</p>
<h2>ライブ・クラブ・セミナー・イベントの集客管理ツール : everevo</h3>
<p><a href="http://everevo.com/" target="_blank"><img decoding="async" loading="lazy" class="alignnone  wp-image-2457" alt="ライブ・クラブ・セミナー・イベントの集客管理ツール - everevo" src="/uploads-archive/2013/06/a697c8b61fd54baefd09df322a5a9b42.jpg" width="599" height="319" srcset="/uploads-archive/2013/06/a697c8b61fd54baefd09df322a5a9b42.jpg 1228w, /uploads-archive/2013/06/a697c8b61fd54baefd09df322a5a9b42-768x410.jpg 768w, /uploads-archive/2013/06/a697c8b61fd54baefd09df322a5a9b42-228x122.jpg 228w, /uploads-archive/2013/06/a697c8b61fd54baefd09df322a5a9b42-300x160.jpg 300w, /uploads-archive/2013/06/a697c8b61fd54baefd09df322a5a9b42-1024x546.jpg 1024w" sizes="(max-width: 599px) 100vw, 599px" /></a></p>
<p>イベントツールのサイトですが、<br />
どちらかというと交流会要素が強いものが開催されているかなと思います。</p>
<p>&nbsp;</p>
<p><a href="http://everevo.com/" target="_blank">ライブ・クラブ・セミナー・イベントの集客管理ツール : everevo</a></p>
<p>&nbsp;</p>
<h2>イベント集客 告知 | 集客ならイベントアテンド</h3>
<p><a href="http://atnd.org/" target="_blank"><img decoding="async" loading="lazy" class="alignnone  wp-image-2458" alt="イベント集客 告知  集客ならイベントアテンド" src="/uploads-archive/2013/06/d13daf6671e0c8e2768b113399d3a881.jpg" width="600" height="327" srcset="/uploads-archive/2013/06/d13daf6671e0c8e2768b113399d3a881.jpg 1228w, /uploads-archive/2013/06/d13daf6671e0c8e2768b113399d3a881-300x164.jpg 300w, /uploads-archive/2013/06/d13daf6671e0c8e2768b113399d3a881-768x419.jpg 768w, /uploads-archive/2013/06/d13daf6671e0c8e2768b113399d3a881-1024x559.jpg 1024w, /uploads-archive/2013/06/d13daf6671e0c8e2768b113399d3a881-228x124.jpg 228w" sizes="(max-width: 600px) 100vw, 600px" /></a></p>
<p>あらゆるタイプのイベントを集客するサイトなので、IT系はそこまで多くありません。</p>
<p>&nbsp;</p>
<p><a href="http://atnd.org/" target="_blank">イベント集客 告知 | 集客ならイベントアテンド</a></p>
<p>&nbsp;</p>
<h2>CSS Nite公式サイト</h3>
<p><a href="http://cssnite.jp/" target="_blank"><img decoding="async" loading="lazy" class="alignnone  wp-image-2459" alt="CSS Nite公式サイト - 「CSS」だけでなく、Web制作全般に関するトピックを取り上げるセミナーイベント" src="/uploads-archive/2013/06/7f3c87a31df7f5d358912cbbf0014d5b.jpg" width="598" height="326" srcset="/uploads-archive/2013/06/7f3c87a31df7f5d358912cbbf0014d5b.jpg 1228w, /uploads-archive/2013/06/7f3c87a31df7f5d358912cbbf0014d5b-300x164.jpg 300w, /uploads-archive/2013/06/7f3c87a31df7f5d358912cbbf0014d5b-768x419.jpg 768w, /uploads-archive/2013/06/7f3c87a31df7f5d358912cbbf0014d5b-1024x559.jpg 1024w, /uploads-archive/2013/06/7f3c87a31df7f5d358912cbbf0014d5b-228x124.jpg 228w" sizes="(max-width: 598px) 100vw, 598px" /></a></p>
<p>&nbsp;</p>
<p>言わずと知れたcss nite で説明するまでもないと思いますが、<br />
web系を学ぶための集まりとしてはうってつけで暇があればぜひ参加したいものばかり開催されています。</p>
<p>&nbsp;</p>
<p><a href="http://cssnite.jp/" target="_blank">CSS Nite公式サイト &#8211; 「CSS」だけでなく、Web制作全般に関するトピックを取り上げるセミナーイベント</a></p>
<p>&nbsp;</p>
<p>僕的には、もっとデザインよりのイベント・勉強会があればいいな〜と思っています。</p>
<p>参加できるときは参加して、もっと成長したいと思います！</p>


IT・web系の勉強をするためのwebサービス

smtp local送信できない件

<p>Web上ではPDFファイルへのリンクを貼ることが度々あります。</p>
<p>ただその場合閲覧する側は、一度ページを離れなくてはならないだけでなく、</p>
<p>PDFがダウンロードされるのを待たねばならないため、あまり軽快とはよべないページになってしまいがちです。</p>
<p>&nbsp;</p>
<p>今回ご紹介するGoogle Docs Viewerは、Googleドライブを利用している方は</p>
<p>その中でファイルを開くときに、目にする機会も多いと思いますが、</p>
<p>コチラのビューアをWebページ内に設置して、</p>
<p>PDFなどのファイルを軽快に閲覧できるようにすることができます。</p>
<p>&nbsp;</p>
<p>今回はPDFで紹介しますが、他にも多くのドキュメントファイルの表示に対応しています。</p>
<p>対応しているファイル形式(<a href="https://support.google.com/drive/answer/2423485?p=docs_viewer&amp;rd=1" target="_blank">Googleドライブヘルプより</a>)</p>
<ul>
<li>画像ファイル（.JPEG、.PNG、.GIF、.TIFF、.BMP）</li>
<li>動画ファイル（WebM、.MPEG4、.3GPP、.MOV、.AVI、.MPEGPS、.WMV、.FLV）</li>
<li>テキスト ファイル（.TXT）</li>
<li>マークアップ/コード（.CSS、.HTML、.PHP、.C、.CPP、.H、.HPP、.JS）</li>
<li>Microsoft Word（.DOC、.DOCX）</li>
<li>Microsoft Excel（.XLS、.XLSX）</li>
<li>Microsoft PowerPoint（.PPT、.PPTX）</li>
<li>Adobe Portable Document Format（.PDF）</li>
<li>Apple Pages（.PAGES）</li>
<li>Adobe Illustrator（.AI）</li>
<li>Adobe Photoshop（.PSD）</li>
<li>Tagged Image File Format（.TIFF）</li>
<li>Autodesk AutoCad（.DXF）</li>
<li>Scalable Vector Graphics（.SVG）</li>
<li>PostScript（.EPS, .PS）</li>
<li>TrueType（.TTF）</li>
<li>XML Paper Specification（.XPS）</li>
<li>アーカイブ ファイルの種類（.ZIP and .RAR）</li>
</ul>
<p>&nbsp;</p>
<p>↓こちらがDEMOです。</p>
<p><a class="demo" href="/demo/ninomiya/22/" target="_blank">DEMO</a></p>
<p>&nbsp;</p>
<h2>設置の仕方</h3>
<h3>1.Googleドキュメントビューアのページを開きます。</h4>
<p>URL：</p>
<p><a href="https://docs.google.com/viewer" target="_blank">https://docs.google.com/viewer</a></p>
<p>&nbsp;</p>
<h3>2.表示させるPDFファイル(または表示に対応している他の形式のファイル)のURLを入力し、HTMLタグを生成します。</h4>
<p><img decoding="async" loading="lazy" alt="ファイルのURL入力" src="/uploads-archive/2013/06/ggl_dv01.jpg" width="656" height="438" /></p>
<p>&nbsp;</p>
<h3>3.生成したHTMLタグをWebページの表示させたい場所にコピー&amp;ペーストすれば、完了です。</h4>
<p><img decoding="async" loading="lazy" alt="HTMLタグ生成" src="/uploads-archive/2013/06/ggl_dv02.jpg" width="656" height="611" /></p>
<p>&nbsp;</p>
<p>※注意点</p>
<p>テスト環境などで、Basic認証などのアクセス制限がかかっていると、ビューアがPDFにアクセスできないため、</p>
<p>表示することができませんので、ご注意ください。</p>
<p>&nbsp;</p>
<p>Googleドキュメントビューアのサイトに毎回アクセスしてHTMLタグを生成しなくても、下の「ファイルのURL」のところに表示したいURLを入力すれば、Webページ内での表示が可能です。</p>

		<div id="crayon-64953fd58b483660315348" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover wrap" style=" margin-top: 12px; margin-bottom: 12px; font-size: 13px !important; line-height: 18px !important;">
		
			<div class="crayon-toolbar" data-settings=" mouseover overlay hide delay" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><span class="crayon-title"></span>
			<div class="crayon-tools" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><div class="crayon-button crayon-nums-button" title="Toggle Line Numbers"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-plain-button" title="Toggle Plain Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-copy-button" title="Copy"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-popup-button" title="Open Code In New Window"><div class="crayon-button-icon"></div></div><span class="crayon-language">XHTML</span></div></div>
			<div class="crayon-info" style="min-height: 19.5px !important; line-height: 19.5px !important;"></div>
			<div class="crayon-plain-wrap"><textarea  class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 13px !important; line-height: 18px !important;">
&lt;iframe src="http://docs.google.com/viewer?url=「ファイルのURL」&amp;amp;embedded=true" width="565" height="780" style="border: none;"&gt;&lt;/iframe&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-64953fd58b483660315348-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-64953fd58b483660315348-1"><span class="crayon-r ">&lt;iframe </span><span class="crayon-e ">src</span>=<span class="crayon-s ">"http://docs.google.com/viewer?url=「ファイルのURL」&amp;amp;embedded=true"</span><span class="crayon-h"> </span><span class="crayon-e ">width</span>=<span class="crayon-s ">"565"</span><span class="crayon-h"> </span><span class="crayon-e ">height</span>=<span class="crayon-s ">"780"</span><span class="crayon-h"> </span><span class="crayon-e ">style</span>=<span class="crayon-s ">"border: none;"</span><span class="crayon-r ">&gt;</span><span class="crayon-r ">&lt;/iframe&gt;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>ただ、こちらのURLは普通のURLではなく、URLエンコード形式にする必要があります。</p>
<p>静的なサイトの場合はコチラのサイト（<a href="http://www.tagindex.com/tool/url.html">http://www.tagindex.com/tool/url.html</a>）などでエンコードして利用することができます。</p>
<p>PHPなど動的なサイトの場合は、「 <b>urlencode</b> ([ファイルのURL])」などの関数を使って、</p>
<p>利用することができます。</p>
<p>&nbsp;</p>
<p>現時点での欠点としては、<a href="/demo/ninomiya/22/" target="_blank">DEMO</a>で見ていただけると分かりますが、</p>
<p>写真などのラスター形式の画像は、画質が著しく劣化します。</p>
<p>画質を重視する場合は、あまりオススメできません。</p>
<p>&nbsp;</p>
<p>その分表示速度はとても速く、ファイルも軽いので、</p>
<p>軽快にPDFを表示したい場合にはとてもオススメです。</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>

Company

Our Solutions

Support

News

Blog

Blogブログ

カテゴリーから探す

年別から見る

記事一覧 - カテゴリー: 開発ナレッジ

2013/07/17

2013/07/17

2013/07/16

2013/07/16

2013/07/10

2013/07/10

2013/07/10

2013/07/09

2013/07/03

2013/07/03

2013/07/03

2013/07/03

2013/06/26

2013/06/25

2013/06/25

2013/06/19

2013/06/19

2013/06/13