<div>2013年にも一度まとめたのですが、前回は導入を進めていたものが諸々の事情で断念をし、再度導入を検討するために今一度まとめてみました。</div>
<div>
<ul>
<li>Yahooショッピングが無料化を進めたり</li>
<li>BiddersがDeNAショッピングに改名したり</li>
<li>クルーズモールが統合したり</li>
<li>Mixiモールが終了予定（2014年3月25日）だったり</li>
</ul>
</div>
<div>とEC業界もこの一年で変化が大きかったのだなとまとめてみて感じました。</div>
<div></div>
<div>1年が経過すると各社さんサービスの内容が変わっていたり、対応カート、モールが拡充されていたり、値下げがされていたりといったことを確認出来ました。</div>
<div><span style="line-height: 1.5em;">主に、各モールとカートの対応状況を対比し、導入の際の最低料金を目安にしています。</span></div>
<div>今回もサービス名称のイニシャルで伏せさせて頂いております。</div>
<div></div>
<div>
<div>筆者が単独でまとめており、情報が誤っている可能性もありますので、ご了承ください。</div>
</div>
<h2>EC受注在庫管理システム一覧</h3>
<div>
<table>
<tbody>
<tr>
<td height="19">サービス名称</td>
<td colspan="2">N</td>
<td colspan="2">C</td>
<td colspan="2">S</td>
<td colspan="2">T</td>
<td colspan="2">G</td>
<td colspan="2">E</td>
</tr>
<tr>
<td height="19">基本料金</td>
<td colspan="2">10,000～</td>
<td colspan="2">5,000×サイト数～</td>
<td colspan="2">10,000～</td>
<td colspan="2">29,800～</td>
<td colspan="2">10,000～</td>
<td colspan="2">9,800～</td>
</tr>
<tr>
<td height="19">受注数の制限</td>
<td colspan="2">400件まで</td>
<td colspan="2">500件まで</td>
<td colspan="2">400件まで</td>
<td colspan="2">2000件まで</td>
<td colspan="2">無制限</td>
<td colspan="2">無制限</td>
</tr>
<tr>
<td height="19">対応モール&amp;カート</td>
<td>受注取込</td>
<td>在庫連携</td>
<td>受注取込</td>
<td>在庫連携</td>
<td>受注取込</td>
<td>在庫連携</td>
<td>受注取込</td>
<td>在庫連携</td>
<td>受注取込</td>
<td>在庫連携</td>
<td>受注取込</td>
<td>在庫連携</td>
</tr>
<tr>
<td height="19">楽天市場</td>
<td>●</td>
<td>●</td>
<td>●</td>
<td>●</td>
<td>●</td>
<td>●</td>
<td>●</td>
<td>●</td>
<td>●</td>
<td>●</td>
<td>●</td>
<td>●</td>
</tr>
<tr>
<td height="19">Yahoo！ショッピング</td>
<td>●</td>
<td>●</td>
<td>●</td>
<td>●</td>
<td>●</td>
<td>●</td>
<td>●</td>
<td>●</td>
<td>●</td>
<td>●</td>
<td>●</td>
<td>●</td>
</tr>
<tr>
<td height="19">DeNAショッピング</td>
<td>●</td>
<td>●</td>
<td>●</td>
<td>●</td>
<td>●</td>
<td>●</td>
<td>●</td>
<td>●</td>
<td>●</td>
<td>●</td>
<td>×</td>
<td>×</td>
</tr>
<tr>
<td height="19">Amazon.co.jp</td>
<td>●</td>
<td>●</td>
<td>●</td>
<td>●</td>
<td>●</td>
<td>●</td>
<td>●</td>
<td>●</td>
<td>●</td>
<td>●</td>
<td>●</td>
<td>●</td>
</tr>
<tr>
<td height="19">Qoo10</td>
<td>●</td>
<td>●</td>
<td>×</td>
<td>×</td>
<td>●</td>
<td>●</td>
<td>×</td>
<td>×</td>
<td>×</td>
<td>×</td>
<td>●</td>
<td>●</td>
</tr>
<tr>
<td height="19">楽天オークション</td>
<td>●</td>
<td>×</td>
<td>×</td>
<td>×</td>
<td>●</td>
<td>●</td>
<td>●</td>
<td>×</td>
<td>●</td>
<td>×</td>
<td>×</td>
<td>×</td>
</tr>
<tr>
<td height="19">楽天共同購入</td>
<td>●</td>
<td>×</td>
<td>×</td>
<td>×</td>
<td>●</td>
<td>●</td>
<td>×</td>
<td>×</td>
<td>×</td>
<td>×</td>
<td>×</td>
<td>×</td>
</tr>
<tr>
<td height="19">Yahoo！オークション</td>
<td>●</td>
<td>×</td>
<td>×</td>
<td>×</td>
<td>●</td>
<td>×</td>
<td>●</td>
<td>×</td>
<td>×</td>
<td>×</td>
<td>×</td>
<td>×</td>
</tr>
<tr>
<td height="19">ネッシー</td>
<td>●</td>
<td>●</td>
<td>×</td>
<td>×</td>
<td>×</td>
<td>×</td>
<td>×</td>
<td>×</td>
<td>×</td>
<td>×</td>
<td>×</td>
<td>×</td>
</tr>
<tr>
<td height="19">スーパーデリバリー</td>
<td>●</td>
<td>●</td>
<td>●</td>
<td>●</td>
<td>×</td>
<td>×</td>
<td>×</td>
<td>×</td>
<td>×</td>
<td>×</td>
<td>×</td>
<td>×</td>
</tr>
<tr>
<td height="19">ぐるなび食市場</td>
<td>●</td>
<td>●</td>
<td>×</td>
<td>×</td>
<td>●</td>
<td>●</td>
<td>×</td>
<td>×</td>
<td>×</td>
<td>×</td>
<td>×</td>
<td>×</td>
</tr>
<tr>
<td height="19">バイヤーズクラブ</td>
<td>●</td>
<td>●</td>
<td>×</td>
<td>×</td>
<td>×</td>
<td>×</td>
<td>×</td>
<td>×</td>
<td>×</td>
<td>×</td>
<td>×</td>
<td>×</td>
</tr>
<tr>
<td height="19">STMX</td>
<td>●</td>
<td>×</td>
<td>×</td>
<td>×</td>
<td>×</td>
<td>×</td>
<td>×</td>
<td>×</td>
<td>×</td>
<td>×</td>
<td>×</td>
<td>×</td>
</tr>
<tr>
<td height="19">ヤマダモール</td>
<td>●</td>
<td>●</td>
<td>×</td>
<td>×</td>
<td>×</td>
<td>×</td>
<td>×</td>
<td>×</td>
<td>×</td>
<td>×</td>
<td>×</td>
<td>×</td>
</tr>
<tr>
<td height="19">TOC Buyer’s NET</td>
<td>●</td>
<td>●</td>
<td>×</td>
<td>×</td>
<td>×</td>
<td>×</td>
<td>×</td>
<td>×</td>
<td>×</td>
<td>×</td>
<td>×</td>
<td>×</td>
</tr>
<tr>
<td height="19">ポンパレモール</td>
<td>●</td>
<td>●</td>
<td>●</td>
<td>●</td>
<td>×</td>
<td>×</td>
<td>×</td>
<td>×</td>
<td>×</td>
<td>×</td>
<td>×</td>
<td>×</td>
</tr>
<tr>
<td height="19">SHOP LIST byCROOZ</td>
<td>●</td>
<td>●</td>
<td>●</td>
<td>●</td>
<td>×</td>
<td>×</td>
<td>×</td>
<td>×</td>
<td>×</td>
<td>×</td>
<td>×</td>
<td>×</td>
</tr>
<tr>
<td height="19">auショッピングモール</td>
<td>●</td>
<td>●</td>
<td>×</td>
<td>×</td>
<td>×</td>
<td>×</td>
<td>×</td>
<td>×</td>
<td>×</td>
<td>×</td>
<td>×</td>
<td>×</td>
</tr>
<tr>
<td height="19">マルチドメインカート</td>
<td>●</td>
<td>●</td>
<td>×</td>
<td>×</td>
<td>●</td>
<td>●</td>
<td>×</td>
<td>×</td>
<td>×</td>
<td>×</td>
<td>×</td>
<td>×</td>
</tr>
<tr>
<td height="19">カラーミーショップ</td>
<td>●</td>
<td>●</td>
<td>×</td>
<td>×</td>
<td>●</td>
<td>●</td>
<td>●</td>
<td>●</td>
<td>●</td>
<td>●</td>
<td>×</td>
<td>×</td>
</tr>
<tr>
<td height="19">MakeShop</td>
<td>●</td>
<td>●</td>
<td>●</td>
<td>●</td>
<td>●</td>
<td>●</td>
<td>●</td>
<td>●</td>
<td>●</td>
<td>●</td>
<td>×</td>
<td>×</td>
</tr>
<tr>
<td height="19">ショップサーブ</td>
<td>●</td>
<td>●</td>
<td>●</td>
<td>●</td>
<td>●</td>
<td>●</td>
<td>●</td>
<td>●</td>
<td>●</td>
<td>●</td>
<td>×</td>
<td>×</td>
</tr>
<tr>
<td height="19">FutureShop2</td>
<td>●</td>
<td>●</td>
<td>●</td>
<td>●</td>
<td>●</td>
<td>●</td>
<td>●</td>
<td>●</td>
<td>●</td>
<td>●</td>
<td>●</td>
<td>●</td>
</tr>
<tr>
<td height="19">まるごとEC</td>
<td>●</td>
<td>●</td>
<td>×</td>
<td>×</td>
<td>×</td>
<td>×</td>
<td>×</td>
<td>×</td>
<td>×</td>
<td>×</td>
<td>×</td>
<td>×</td>
</tr>
<tr>
<td height="19">Zencart Pro-R</td>
<td>●</td>
<td>●</td>
<td>×</td>
<td>×</td>
<td>×</td>
<td>×</td>
<td>×</td>
<td>×</td>
<td>×</td>
<td>×</td>
<td>×</td>
<td>×</td>
</tr>
<tr>
<td height="19">EC-Cube</td>
<td>●</td>
<td>●</td>
<td>●</td>
<td>●</td>
<td>●</td>
<td>●</td>
<td>●</td>
<td>●</td>
<td>×</td>
<td>×</td>
<td>×</td>
<td>×</td>
</tr>
<tr>
<td height="19">マーキュリー</td>
<td>●</td>
<td>●</td>
<td>×</td>
<td>×</td>
<td>×</td>
<td>×</td>
<td>×</td>
<td>×</td>
<td>×</td>
<td>×</td>
<td>×</td>
<td>×</td>
</tr>
<tr>
<td height="19">ワイズカート</td>
<td>●</td>
<td>●</td>
<td>×</td>
<td>×</td>
<td>×</td>
<td>×</td>
<td>×</td>
<td>×</td>
<td>×</td>
<td>×</td>
<td>×</td>
<td>×</td>
</tr>
<tr>
<td height="19">おちゃのこネット</td>
<td>●</td>
<td>●</td>
<td>×</td>
<td>×</td>
<td>●</td>
<td>●</td>
<td>●</td>
<td>●</td>
<td>×</td>
<td>×</td>
<td>×</td>
<td>×</td>
</tr>
<tr>
<td height="19">aiship</td>
<td>●</td>
<td>●</td>
<td>×</td>
<td>×</td>
<td>×</td>
<td>×</td>
<td>×</td>
<td>×</td>
<td>×</td>
<td>×</td>
<td>×</td>
<td>×</td>
</tr>
<tr>
<td height="19">CS Cart</td>
<td>×</td>
<td>×</td>
<td>×</td>
<td>×</td>
<td>×</td>
<td>×</td>
<td>●</td>
<td>×</td>
<td>×</td>
<td>×</td>
<td>×</td>
<td>×</td>
</tr>
<tr>
<td height="19">eShop-do</td>
<td>×</td>
<td>×</td>
<td>×</td>
<td>×</td>
<td>●</td>
<td>●</td>
<td>●</td>
<td>×</td>
<td>×</td>
<td>×</td>
<td>×</td>
<td>×</td>
</tr>
<tr>
<td height="19">風土jp</td>
<td>×</td>
<td>×</td>
<td>×</td>
<td>×</td>
<td>●</td>
<td>●</td>
<td>×</td>
<td>×</td>
<td>×</td>
<td>×</td>
<td>×</td>
<td>×</td>
</tr>
<tr>
<td height="19">小売パートナー</td>
<td>×</td>
<td>×</td>
<td>×</td>
<td>×</td>
<td>●</td>
<td>●</td>
<td>×</td>
<td>×</td>
<td>×</td>
<td>×</td>
<td>×</td>
<td>×</td>
</tr>
<tr>
<td height="19">MyDoショップ</td>
<td>×</td>
<td>×</td>
<td>×</td>
<td>×</td>
<td>●</td>
<td>●</td>
<td>×</td>
<td>×</td>
<td>×</td>
<td>×</td>
<td>×</td>
<td>×</td>
</tr>
<tr>
<td height="19">サイトサーブ</td>
<td>×</td>
<td>×</td>
<td>×</td>
<td>×</td>
<td>●</td>
<td>●</td>
<td>×</td>
<td>×</td>
<td>×</td>
<td>×</td>
<td>×</td>
<td>×</td>
</tr>
<tr>
<td height="19">電話/FAX</td>
<td>●</td>
<td>●</td>
<td>×</td>
<td>×</td>
<td>×</td>
<td>×</td>
<td>×</td>
<td>×</td>
<td>×</td>
<td>×</td>
<td>×</td>
<td>×</td>
</tr>
<tr>
<td height="19">送り状対応</td>
<td colspan="12"></td>
</tr>
<tr>
<td height="19">佐川急便</td>
<td colspan="2">●</td>
<td colspan="2">●</td>
<td colspan="2">●</td>
<td colspan="2">●</td>
<td colspan="2">●</td>
<td colspan="2">●</td>
</tr>
<tr>
<td height="19">クロネコヤマト</td>
<td colspan="2">●</td>
<td colspan="2">●</td>
<td colspan="2">●</td>
<td colspan="2">●</td>
<td colspan="2">●</td>
<td colspan="2">●</td>
</tr>
<tr>
<td height="19">日本通運</td>
<td colspan="2">●</td>
<td colspan="2">●</td>
<td colspan="2">●</td>
<td colspan="2">●</td>
<td colspan="2">×</td>
<td colspan="2">×</td>
</tr>
<tr>
<td height="19">西濃運輸</td>
<td colspan="2">●</td>
<td colspan="2">●</td>
<td colspan="2">●</td>
<td colspan="2">×</td>
<td colspan="2">●</td>
<td colspan="2">×</td>
</tr>
<tr>
<td height="19">日本郵便</td>
<td colspan="2">●</td>
<td colspan="2">●</td>
<td colspan="2">●</td>
<td colspan="2">●</td>
<td colspan="2">●</td>
<td colspan="2">×</td>
</tr>
<tr>
<td height="19">TBソフトウェア</td>
<td colspan="2">●</td>
<td colspan="2">×</td>
<td colspan="2">×</td>
<td colspan="2">×</td>
<td colspan="2">×</td>
<td colspan="2">×</td>
</tr>
<tr>
<td height="19">福山通運</td>
<td colspan="2">●</td>
<td colspan="2">×</td>
<td colspan="2">×</td>
<td colspan="2">●</td>
<td colspan="2">×</td>
<td colspan="2">×</td>
</tr>
</tbody>
</table>
<h2>まとめ</h3>
<p>2013年に調査した際には、導入対象に乗らなかったサービスが現在、当社で運営しているサイトと合致し、料金も改定されていてお手頃になっていることもあり早速導入を進めてみる結果となりました。</p>
<p>&nbsp;</p>
</div>


EC受注・在庫管理システム一覧（2014年度版）

<p>フラットデザインのような比較的シンプルなサイトでは、</p>
<p>装飾が少ない分、ユーザーを退屈させないためにも、</p>
<p>コンテンツに高いクオリティが必要となってきます。</p>
<p>&nbsp;</p>
<p>パララックスのようにアニメーションをつけることも効果的ですが、</p>
<p>グラフィックが魅力的であると、一目で惹き付けられるため、こちらも効果的です。</p>
<p>また、写真素材に頼れない場合にも、グラフィックで魅せることができると、</p>
<p>デザインとして幅を広げることができます。</p>
<p>&nbsp;</p>
<p>そういったわけで、今回はグラフィックが魅力的だと感じたサイトを９つご紹介いたします。</p>
<p>&nbsp;</p>
<p><a class="link" title="株式会社ツキボシPP" href="http://www.tsukiboshi-pp.jp/" target="_blank">株式会社ツキボシPP</a></p>
<p><a href="http://www.tsukiboshi-pp.jp/" target="_blank"><img decoding="async" loading="lazy" alt="image" src="/uploads-archive/2014/03/1949fa3fd0ca336f430b5e27d1e6d33c.png" width="656" height="370" /></a></p>
<p>機械の部品を、配置や背景の効果によって芸術作品のように見せています。</p>
<p>&nbsp;</p>
<p><a class="link" href="http://www.nissanusa.com/passiongenome/#landing" target="_blank">Nissan Passion Genome</a></p>
<p><a href="http://www.nissanusa.com/passiongenome/#landing" target="_blank"><img decoding="async" loading="lazy" alt="image" src="/uploads-archive/2014/03/NissanPassionGenome.png" width="656" height="353" /></a></p>
<p>動きもすごいですが、静止画としてみた場合でも、人物の写真がワイヤーのようなものでできていて、面白いです。</p>
<p>&nbsp;</p>
<p><a class="link" href="http://fremtidenshoder.no/index" target="_blank">NITH</a></p>
<p><a href="http://fremtidenshoder.no/index" target="_blank"><img decoding="async" loading="lazy" alt="image" src="/uploads-archive/2014/03/NITH.png" width="656" height="370" /></a></p>
<p>こちらもとにかく動きがすごいですが、見た目も点が形を作っていて面白いです。</p>
<p>&nbsp;</p>
<p><a class="link" href="http://www.yamazen-net.co.jp/" target="_blank">ヤマゼンコミュニケイションズ株式会社</a></p>
<p><a href="http://www.yamazen-net.co.jp/" target="_blank"><img decoding="async" loading="lazy" alt="image" src="/uploads-archive/2014/03/9f8516c9afebca2aac60eb770e87a735.png" width="656" height="370" /></a></p>
<p>円の中に見切れる ぎりぎりのところまでテキストを配置しているのが、印象的です。</p>
<p>&nbsp;</p>
<p><a class="link" href="http://fixedagency.com/" target="_blank">Fixed Digital Agency</a></p>
<p><a href="http://fixedagency.com/" target="_blank"><img decoding="async" loading="lazy" alt="image" src="/uploads-archive/2014/03/FixedDigitalAgency.png" width="656" height="353" /></a></p>
<p>大きな面の色をうまく使っています。</p>
<p>&nbsp;</p>
<p><a class="link" href="http://www.spicebox.co.jp/fresh/" target="_blank">spicebox 新卒採用2015</a></p>
<p><a href="http://www.spicebox.co.jp/fresh/" target="_blank"><img decoding="async" loading="lazy" alt="image" src="/uploads-archive/2014/03/3e1a4545d156160f5072f3e86f442b6b.png" width="656" height="370" /></a></p>
<p>線の使い方が面白いです。</p>
<p>&nbsp;</p>
<p><a class="link" href="http://gggggggg.jp/" target="_blank">株式会社Gear8</a></p>
<p><a href="http://gggggggg.jp/" target="_blank"><img decoding="async" loading="lazy" alt="image" src="/uploads-archive/2014/03/15f12b7e414f1a513b262fcbb813360d.png" width="656" height="370" /></a></p>
<p>背景や前景の泡などををポリゴン状にしてみせていて、ただの写真ではない面白さがあります。</p>
<p>&nbsp;</p>
<p><a class="link" href="http://www.homac.co.jp/-/recruit/2015/" target="_blank">ホーマック株式会社　2015年度 新卒採用サイト</a></p>
<p><a href="http://www.homac.co.jp/-/recruit/2015/" target="_blank"><img decoding="async" loading="lazy" alt="image" src="/uploads-archive/2014/03/65d1f7e13e9420c1195ff2344181f792.png" width="656" height="370" /></a></p>
<p>大胆に使った白地と目立つ赤の使い方が絶妙です。</p>
<p>&nbsp;</p>
<p><a class="link" href="http://ja.ad-stir.com/" target="_blank">広告配信SSP 「AdStir」</a></p>
<p><a href="http://ja.ad-stir.com/" target="_blank"><img decoding="async" loading="lazy" alt="image" src="/uploads-archive/2014/03/7b6dedf00e6bdec2c3311099799d7c2b.png" width="656" height="370" /></a></p>
<p>複雑なパララックスを使っています。背景に使ったテキストがかっこいいです。</p>
<p>&nbsp;</p>


グラフィックが魅力的なサイト

<h2>ネイティブアプリ</h3>
<p>iOSアプリなら、Objective-C、Androidアプリなら、Javaを用いて開発するアプリの類型です。</p>
<h3>利点</h4>
<p>・App Store、Google Play Storeで配布できる<br />
・端末の機能・パフォーマンスを最大限に引き出すことができる<br />
・スマートフォン画面から直接起動できる</p>
<h3>欠点</h4>
<p>・iOS、Androidアプリ両方開発するなら、開発速度が比較的に遅くて、開発費用がかかる</p>
<h2>Webアプリ</h3>
<p>普通のウェブサイトでも、スマートフォンに最適化したものをWebアプリとも呼びます。</p>
<h3>利点</h4>
<p>・常に最新の状態で保てる<br />
・Web標準の技術を使うことができる<br />
・クロスプラットフォーム性がある<br />
・開発速度が速い・開発費が比較的低い</p>
<h3>欠点</h4>
<p>・ブラウザ経由でしか利用できない→マーケットに配布できないため<br />
・スマートフォンの特有機能を利用できない→Web技術しか利用できないから</p>
<h2>ハイブリッドアプリ</h3>
<p>Webアプリと同様にHTML・CSS・JavaScriptなどのWeb技術を用いて開発しますが、Webアプリとは違ってネイティブアプリのようにマーケットで配布することができます。</p>
<p>WebViewという、各プラットフォームにある共通のコンポーネントの使って、HTML・CSS・JavaScriptを解釈することができます。（WebViewが遅い、という声もありますが）</p>
<p>また、ネイティブブリッジと呼ばれる、JavaScriptからネイティブの機能を呼び出せる仕組みもあります。そのゆえ、ハイブリッドアプリはスマートフォンの特有機能（例えば、プッシュ）も使えます。</p>
<h3>利点</h4>
<p>・ネイティブアプリと同様にストアからインストールできる<br />
・クロスプラットフォーム性がある<br />
・ネイティブの機能を呼び出すことができる<br />
・Web技術のノウハウや資産を利用できる</p>
<h3>欠点</h4>
<p>・端末の性能をフルに利用するのが難しい<br />
・HTML5では原理的にできないような機能がある</p>
<h3>HTML5のAPI</h4>
<p>・WebStorage<br />
・IndexedDB<br />
・WebWorkers→Javascriptを並列処理を行うためのAPI<br />
・WebGL<br />
・File API<br />
・Canvas API</p>
<h3>JavaScriptライブラリ・フレームワーク</h4>
<p>・<a href="http://zeptojs.com/" target="_blank">Zepto.js</a>→jQuery互換の軽量ライブラリ<br />
・<a href="http://jquerymobile.com/" target="_blank">jQuery mobile</a>→jQuery依存<br />
・<a href="http://backbonejs.org/" target="_blank">Backbone.js</a>→パソコン向けでもモバイル向けでも利用できる軽量MVCフレームワーク<br />
・<a href="http://www.sencha.com/products/touch" target="_blank">Sencha Touch</a></p>
<h3>フレームワーク</h4>
<p>・<a href="https://cordova.apache.org/" target="_blank">Apache Cordova（PhoneGap）</a>→iOSとAndroidだけではなく、Windows Phone、Symbian、BlackBerry OS、webOSなども対応<br />
・<a href="https://github.com/mixi-inc/triaina" target="_blank">Triaina</a>→mixiが出している</p>
<h3>サーバ・クラウド環境</h4>
<p>・PhoneGap Bulid→PhoneGapのWebサービス版→WindowsマシンでもiOSアプリをビルドすることができる<br />
・Trigger.io<br />
・Monaca<br />
・Icenium</p>


スマートフォンアプリの開発手法

<p>恐ろしいツールを発見しました。</p>
<p>『GoogleWebDesigner』<br />
<a href="https://www.google.com/webdesigner/" target="_blank">Google Web Designer</a></p>
<p>これは、Photoshop,Illustlator,dreamweaverを混ぜたようなデザインツールで、<br />
今は、広告バナー等の作成用っぽい感じですが、<br />
アニメーションつけたり、3Dにできたり、<br />
デザインしたものがHTML5,css3で出力されるというものです。</p>
<p>ちょっとダウンロードして起動してみました。</p>
<p><a href="/uploads-archive/2014/03/googlewebdesigner01.png"><img decoding="async" loading="lazy" class="alignnone  wp-image-4404" alt="googlewebdesigner01" src="/uploads-archive/2014/03/googlewebdesigner01-1024x649.png" width="655" height="415" srcset="/uploads-archive/2014/03/googlewebdesigner01-1024x649.png 1024w, /uploads-archive/2014/03/googlewebdesigner01-300x190.png 300w, /uploads-archive/2014/03/googlewebdesigner01-228x144.png 228w, /uploads-archive/2014/03/googlewebdesigner01.png 1223w" sizes="(max-width: 655px) 100vw, 655px" /></a></p>
<p>まさしく、Photoshop,Illustlatorっぽいですね！</p>
<p>&nbsp;</p>
<p>ファイルの新規作成を押すと、<br />
<img decoding="async" loading="lazy" class="alignnone size-large wp-image-4403" alt="googlewebdesigner02" src="/uploads-archive/2014/03/googlewebdesigner02-1024x652.png" width="655" height="417" srcset="/uploads-archive/2014/03/googlewebdesigner02-1024x652.png 1024w, /uploads-archive/2014/03/googlewebdesigner02-300x191.png 300w, /uploads-archive/2014/03/googlewebdesigner02-228x145.png 228w, /uploads-archive/2014/03/googlewebdesigner02.png 1214w" sizes="(max-width: 655px) 100vw, 655px" /></p>
<p>googleの広告を作る用に設定できますし、左下にあるHTMLを選択すると、空のhtmlファイルを作成し、<br />
dreamweaverのようにコーディングすることができます(機能はそこまでないですが・・・)。</p>
<p>&nbsp;</p>
<p>バナーを選択し、ファイルを作成すると、<br />
<img decoding="async" loading="lazy" class="alignnone size-large wp-image-4405" alt="googlewebdesigner03" src="/uploads-archive/2014/03/googlewebdesigner03-1024x652.png" width="655" height="417" srcset="/uploads-archive/2014/03/googlewebdesigner03-1024x652.png 1024w, /uploads-archive/2014/03/googlewebdesigner03-300x191.png 300w, /uploads-archive/2014/03/googlewebdesigner03-228x145.png 228w, /uploads-archive/2014/03/googlewebdesigner03.png 1214w" sizes="(max-width: 655px) 100vw, 655px" /></p>
<p>カンバスが表示され、ここにコンテンツを置いたりし作成できるようです。出力はHTMLでされます。</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p><img decoding="async" loading="lazy" class="alignnone  wp-image-4406" alt="googlewebdesigner04" src="/uploads-archive/2014/03/googlewebdesigner04-1024x654.png" width="655" height="418" srcset="/uploads-archive/2014/03/googlewebdesigner04-1024x654.png 1024w, /uploads-archive/2014/03/googlewebdesigner04-300x191.png 300w, /uploads-archive/2014/03/googlewebdesigner04-228x145.png 228w, /uploads-archive/2014/03/googlewebdesigner04.png 1212w" sizes="(max-width: 655px) 100vw, 655px" /></p>
<p>かなり少ししかいじってないのですが、文字を置いたりコンテンツを置いたりすると、<br />
そこが何の要素かがわかるようになっており、上の画面は閉じている状態ですが、右下の方にCSSが表示されます。</p>
<p>さらにカンバスの下にはアニメーションを設定できるエリアがあります。</p>
<p>時間の問題で少ししか試せなかったのですが、<br />
基本的にはHTMLのファイルのようなので、<br />
感覚的には、dreamweaverでデザインが出来るようになったみたいでした。</p>
<p>&nbsp;</p>
<p>まだベータ版なので、<br />
これからどんどんバージョンアップしていくと思います。</p>
<p>「webサイトをデザインしながらコーディングもされる」みたいな形になっていくのでしょうか？<br />
これが無料ですからね〜<br />
Adobeさん大丈夫ですかね？！</p>
<p>その前に自身の心配もしなくてはいけないんですが笑<br />
このツールによって、コンテンツ作成するハードルは下がるわけなので、<br />
今すぐではないですが近い将来少なからず影響はあるのかなと思います。</p>
<p>ただ、こういったツールは、<br />
技術的なハードル(アニメーション,3D,コーディング等)が下がるだけであって、<br />
結局は、デザイン力、アイデアが必要になります。</p>
<p>ですので、我々は今後そこを高めていき、<br />
我々にしかできない価値を提供出来るようになっていかないといけないですね！</p>
<p>このツールの誕生によって、<br />
改めてその考えが強まりました・・・</p>


何だこのツールは？！無料ツール『GoogleWebDesigner』

<p>ブログを書くことを毎週の業務として取り組んでいる弊社ですが、文章力や書くという習慣総じて、アウトプットの力が足らず、筆が進まないこともしばしばです。このような個人・法人問わず、意見を簡単に述べ、多数の人に伝えることが簡単になった時代、逆に考えると伝えることをしなければ、他の情報が過多であるため、ますますアウトプットする機会は減ってしまいます。アウトプットということに対して、する人はする、しない人は全くしないというどちらか極端になりがちですので、弊社では、ブログを書くという業務を通してアウトプットをする力を高めようと取り組んでいます。</p>
<p>ちょっと話が逸れてしまいましたが、文章を書くことに特化したテキストエディター「<a href="http://www.ommwriter.com/en/">OMMWRITER</a>」の紹介です。</p>
<h2>3つの特徴</h3>
<p>テキストエディターと呼ばれるソフトウェアは数多くありますが、他にはない特徴を3つ揃えています。</p>
<p><a href="/uploads-archive/2014/03/screenshot.png"><img decoding="async" loading="lazy" class="alignnone size-medium wp-image-4383" alt="screenshot" src="/uploads-archive/2014/03/screenshot-300x131.png" width="300" height="131" srcset="/uploads-archive/2014/03/screenshot-300x131.png 300w, /uploads-archive/2014/03/screenshot-228x99.png 228w, /uploads-archive/2014/03/screenshot.png 1015w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>
<ol>
<li>集中力を維持しムードに合わせるための背景</li>
<li>文章に集中出来るBGM</li>
<li>キーボードを押下時のクリック音</li>
</ol>
<h2>サンプル</h3>
<p><iframe loading="lazy" width="500" height="281" src="//player.vimeo.com/video/14791691" allowfullscreen=""></iframe></p>
<h2>まとめ</h3>
<p>OMMWRITERはフリーソフトではなく、シェアウェアと言われるものです。ただし、価格は最低$4.11から自由に決めてよいようです。平均は$7.33とのことです。</p>


文章を書くことに特化したテキストエディター「OMMWRITER」

title5.jpg

横スクロールを可能にできる「jquery.mousewheel」を使用してみた

<p>gitでソースコードを取得するとき、たまにhttp://で取得できなかったものの、プロトコルを変えたら（https://かgit://に変更）うまく取得できたことがあります。<br />
今回は、gitサーバー構築の観点で、gitが使える4つのプロトコルを紹介したと思います。</p>
<h2>Localプロトコル</h3>
<p>gitサーバーを開発チーム全員のアクセスできるリモートディスクなどに構築するときに使います。<br />
Localプロトコルで、ソースコード取得（クローン）するのに、下記のコマンドを使います。</p>
<p></p>

		<div id="crayon-64953fd598272983971028" 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;">
git clone /opt/git/project.git // 自分のパソコンにあるのように、リモートパスを指定
git clone file:///opt/git/project.git // これも使える</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-64953fd598272983971028-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd598272983971028-2">2</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 13px !important; line-height: 18px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-64953fd598272983971028-1"><span class="crayon-e">git </span><span class="crayon-r">clone</span><span class="crayon-h"> </span>/<span class="crayon-i">opt</span>/<span class="crayon-i">git</span>/<span class="crayon-i">project</span><span class="crayon-sy">.</span><span class="crayon-i">git</span><span class="crayon-h"> </span><span class="crayon-c">// 自分のパソコンにあるのように、リモートパスを指定</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd598272983971028-2"><span class="crayon-e">git </span><span class="crayon-r">clone</span><span class="crayon-h"> </span><span class="crayon-i">file</span><span class="crayon-sy">:</span><span class="crayon-c">///opt/git/project.git // これも使える</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p> </p>
<h3>利点</h4>
<p>・構築しやすい</p>
<h3>欠点</h4>
<p>・アクセスに制限あり（自宅には、会社のリモートディスクに容易にアクセスできない）<br />
・転送速度はSSHプロトコルより遅い</p>
<h2>SSHプロトコル</h3>
<p>非公開のプロジェクトをgitサーバーで管理するのに、このプロトコルが一番広く使われています。<br />
SSHプロトコルで、ソースコード取得（クローン）するのに、下記のコマンドを使います。</p>
<p></p>

		<div id="crayon-64953fd598277357582839" 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;">
git clone ssh://user@server/project.git
git clone user@server:project.git // デフォルトなので、プロトコル省略しても大丈夫</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-64953fd598277357582839-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd598277357582839-2">2</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 13px !important; line-height: 18px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-64953fd598277357582839-1"><span class="crayon-e">git </span><span class="crayon-r">clone</span><span class="crayon-h"> </span><span class="crayon-i">ssh</span><span class="crayon-sy">:</span><span class="crayon-c">//user@server/project.git</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd598277357582839-2"><span class="crayon-e">git </span><span class="crayon-r">clone</span><span class="crayon-h"> </span><span class="crayon-i">user</span><span class="crayon-sy">@</span><span class="crayon-i">server</span><span class="crayon-sy">:</span><span class="crayon-i">project</span><span class="crayon-sy">.</span><span class="crayon-i">git</span><span class="crayon-h"> </span><span class="crayon-c">// デフォルトなので、プロトコル省略しても大丈夫</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p> </p>
<h3>利点</h4>
<p>・構築も容易<br />
・ネットワークを越して認証をつけやすく、かつデータが暗号化されるなので安全<br />
・容易に読み込み、書き込み権限をつけやすい<br />
・転送速度は速い</p>
<h3>欠点</h4>
<p>・匿名アクセスを許可できない</p>
<h2>gitプロトコル</h3>
<p>すべての人に、読み込み権限を与えるプロトコルです。<br />
SSHプロトコルと組み合わせて、一部の人に書き込み権限だけを与えることが可能です。</p>
<p>gitプロトコルで、ソースコード取得（クローン）するのに、下記のコマンドを使います。</p>
<p></p>

		<div id="crayon-64953fd598278208112899" 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;">
git clone http://example.com/gitproject.git</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-64953fd598278208112899-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-64953fd598278208112899-1"><span class="crayon-e">git </span><span class="crayon-r">clone</span><span class="crayon-h"> </span><span class="crayon-i">http</span><span class="crayon-sy">:</span><span class="crayon-c">//example.com/gitproject.git</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p> </p>
<h3>利点</h4>
<p>・転送速度が一番速い（暗号化と認証がないから）</p>
<h3>欠点</h4>
<p>・認証がないから、一部の人だけ書き込み権限を与えることができない<br />
・専用ポートを開く必要ある<br />
・gitとは別、特別なツール（centosならgit-daemon）をインストール必要ある<br />
・構築するのに一番難しい</p>
<h2>http/httpsプロトコル</h3>
<p>http/httpsプロトコルを用いて、ウェブサーバーにアクセスできる人もリポジトリをクローンできます。</p>
<p>http/httpsプロトコルで、ソースコード取得（クローン）するのに、下記のコマンドを使います。</p>
<p></p>

		<div id="crayon-64953fd59827a897520787" 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;">
git clone http://example.com/gitproject.git</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-64953fd59827a897520787-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-64953fd59827a897520787-1"><span class="crayon-e">git </span><span class="crayon-r">clone</span><span class="crayon-h"> </span><span class="crayon-i">http</span><span class="crayon-sy">:</span><span class="crayon-c">//example.com/gitproject.git</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p> </p>
<h3>利点</h4>
<p>・構築は比較的に簡単<br />
・転送コンテンツを暗号化したり、特定の署名のSSL証明書で認証したりこともできる</p>
<h3>欠点</h4>
<p>・非効率（転送量が増える）</p>

gitが使えるプロトコル

レスポンシブデザインにぴったりなカルーセルスライダー「Owl Carousel」

<p>SafariやGoogle Chromeなど、webkitを使ったブラウザではCCS3のfilterを使って、コンテンツをぼかすことができます。</p>
<p>しかし、上に重ねたコンテンツのところだけをぼかすように、部分的にぼかすことはできません。</p>
<p>SVGを使った方法もありますが、CSS3のfilterとjQueryを使ってなんとかできないかやってみました。</p>
<p>&nbsp;</p>
<p>↓こちらが作ってみたものです(ChromeもしくはSafariでご覧下さい)。</p>
<p><a class="demo" href="/demo/ninomiya/41/" target="_blank">DEMO</a></p>
<p>&nbsp;</p>
<h2>方法</h3>
<p>今回は、body内の要素を丸々コピーして要素の上に被せ、</p>
<p>被せた要素にfilterをかけてcssのclipで一部だけ表示するという方法を使いました。</p>
<p>&nbsp;</p>
<p>HTML</p>

		<div id="crayon-64953fd597e37519460867" 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">HTML</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;body&gt;
&lt;div class="contents"&gt;
	：
	(コンテンツ)
	：
&lt;/div&gt;
&lt;/body&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-64953fd597e37519460867-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd597e37519460867-2">2</div><div class="crayon-num" data-line="crayon-64953fd597e37519460867-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd597e37519460867-4">4</div><div class="crayon-num" data-line="crayon-64953fd597e37519460867-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd597e37519460867-6">6</div><div class="crayon-num" data-line="crayon-64953fd597e37519460867-7">7</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 13px !important; line-height: 18px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-64953fd597e37519460867-1"><span class="crayon-r ">&lt;body&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd597e37519460867-2"><span class="crayon-r ">&lt;div </span><span class="crayon-e ">class</span>=<span class="crayon-s ">"contents"</span><span class="crayon-r ">&gt;</span></div><div class="crayon-line" id="crayon-64953fd597e37519460867-3"><span class="crayon-i ">	：</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd597e37519460867-4"><span class="crayon-i ">	(コンテンツ)</span></div><div class="crayon-line" id="crayon-64953fd597e37519460867-5"><span class="crayon-i ">	：</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd597e37519460867-6"><span class="crayon-r ">&lt;/div&gt;</span></div><div class="crayon-line" id="crayon-64953fd597e37519460867-7"><span class="crayon-r ">&lt;/body&gt;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>&nbsp;</p>
<p>JavaScript</p>

		<div id="crayon-64953fd597e3b848665737" 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">JavaScript</span>
			<div class="crayon-tools" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><div class="crayon-button crayon-nums-button" title="Toggle Line Numbers"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-plain-button" title="Toggle Plain Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-copy-button" title="Copy"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-popup-button" title="Open Code In New Window"><div class="crayon-button-icon"></div></div><span class="crayon-language">JavaScript</span></div></div>
			<div class="crayon-info" style="min-height: 19.5px !important; line-height: 19.5px !important;"></div>
			<div class="crayon-plain-wrap"><textarea  class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 13px !important; line-height: 18px !important;">
$(function(){
	 //body内のコンテンツをコピーしてコンテンツの後ろに挿入する
	$("body").append($(".contents").clone());

	$(".contents:last").css({
		"width" : "100%",
		"position" : "absolute",
		"top" : "0",
		"left" : "0",
		"-webkit-filter" : "blur(10px)", //ぼかしをかける
		"clip" : "rect(540px 600px 900px 240px)" //クリッピングして一部だけ表示する
	});
});</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-64953fd597e3b848665737-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd597e3b848665737-2">2</div><div class="crayon-num" data-line="crayon-64953fd597e3b848665737-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd597e3b848665737-4">4</div><div class="crayon-num" data-line="crayon-64953fd597e3b848665737-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd597e3b848665737-6">6</div><div class="crayon-num" data-line="crayon-64953fd597e3b848665737-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd597e3b848665737-8">8</div><div class="crayon-num" data-line="crayon-64953fd597e3b848665737-9">9</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd597e3b848665737-10">10</div><div class="crayon-num" data-line="crayon-64953fd597e3b848665737-11">11</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd597e3b848665737-12">12</div><div class="crayon-num" data-line="crayon-64953fd597e3b848665737-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-64953fd597e3b848665737-1"><span class="crayon-sy">$</span><span class="crayon-sy">(</span><span class="crayon-t">function</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd597e3b848665737-2"><span class="crayon-h">	 </span><span class="crayon-c">//body内のコンテンツをコピーしてコンテンツの後ろに挿入する</span></div><div class="crayon-line" id="crayon-64953fd597e3b848665737-3"><span class="crayon-h">	</span><span class="crayon-sy">$</span><span class="crayon-sy">(</span><span class="crayon-s">"body"</span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-e">append</span><span class="crayon-sy">(</span><span class="crayon-sy">$</span><span class="crayon-sy">(</span><span class="crayon-s">".contents"</span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-e">clone</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd597e3b848665737-4">&nbsp;</div><div class="crayon-line" id="crayon-64953fd597e3b848665737-5"><span class="crayon-h">	</span><span class="crayon-sy">$</span><span class="crayon-sy">(</span><span class="crayon-s">".contents:last"</span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-e">css</span><span class="crayon-sy">(</span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd597e3b848665737-6"><span class="crayon-h">		</span><span class="crayon-s">"width"</span><span class="crayon-h"> </span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-s">"100%"</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-64953fd597e3b848665737-7"><span class="crayon-h">		</span><span class="crayon-s">"position"</span><span class="crayon-h"> </span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-s">"absolute"</span><span class="crayon-sy">,</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd597e3b848665737-8"><span class="crayon-h">		</span><span class="crayon-s">"top"</span><span class="crayon-h"> </span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-s">"0"</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-64953fd597e3b848665737-9"><span class="crayon-h">		</span><span class="crayon-s">"left"</span><span class="crayon-h"> </span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-s">"0"</span><span class="crayon-sy">,</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd597e3b848665737-10"><span class="crayon-h">		</span><span class="crayon-s">"-webkit-filter"</span><span class="crayon-h"> </span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-s">"blur(10px)"</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-c">//ぼかしをかける</span></div><div class="crayon-line" id="crayon-64953fd597e3b848665737-11"><span class="crayon-h">		</span><span class="crayon-s">"clip"</span><span class="crayon-h"> </span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-s">"rect(540px 600px 900px 240px)"</span><span class="crayon-h"> </span><span class="crayon-c">//クリッピングして一部だけ表示する</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd597e3b848665737-12"><span class="crayon-h">	</span><span class="crayon-sy">}</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-64953fd597e3b848665737-13"><span class="crayon-sy">}</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>&nbsp;</p>
<p>今回作ったものは、現在のところChrome, Safariだけで使える方法なので、</p>
<p>実用にはまだまだ遠いですが、SVGを使った方法（参考→「<a href="http://unformedbuilding.com/articles/frosted-glass-effect-with-css-and-svg/" target="_blank">CSS と SVG で曇りガラスのような効果を作る</a>」）と合わせ、</p>
<p>効果の出し分けをするなどすれば、少しでも実用化に近づけることができるかもしれません。</p>
<p>&nbsp;</p>
<p>いずれにしても、Android2.3系でもぼかし効果を使うことはあきらめなければならなそうです。<br />
Android2.3系は、Androidの中でも2014年2月時点でも2割のシェアがあり（<a href="http://developer.android.com/about/dashboards/index.html" target="_blank">参考</a>）、無視することもできないため、</p>
<p>もしぼかし効果を使う場合は、Android2.3系において、ぼかし無しで問題無いようなデザインにしておく必要がありそうです。</p>

jQueryやCSS3を使って画面の一部をぼかす方法を考える

<p><em><strong><span><span>Starting Android Studio</span></span></strong></em></p>
<p><span><span><span><span><span><span>Path: /home /mon /android-studio</span></span></span></span></span></span></p>
<p><span><span><span><span><span><span>$ pwd (Print working directory)</span></span></span></span></span></span></p>
<p><span><span><span><span><span><span>/Home/mon</span></span></span></span></span></span></p>
<p><span><span><span><span><span><span>$ cd android-studio/bin (Change directory)</span></span></span></span></span></span></p>
<p><span><span><span><span><span><span>$ ./studio.sh</span></span></span></span></span></span></p>
<p><em><strong><span><span>Creating New Project</span></span></strong></em></p>
<p><span><span><span><span><span><span>(1) New Project</span></span></span></span></span></span></p>
<p><img decoding="async" loading="lazy" alt="createnewproject" src="/uploads-archive/2014/02/new_android.png" width="300" height="250" /></p>
<p><span><span><span><span>(2) Setting up application, module and package names<br />
</span></span></span></span></p>
<p><img decoding="async" loading="lazy" alt="settingappname" src="/uploads-archive/2014/02/create_android.png" width="300" height="250" /></p>
<p><span><span><span><span>(3) App logo image<br />
</span></span></span></span></p>
<p><img decoding="async" loading="lazy" alt="chooseapplogo" src="/uploads-archive/2014/02/logo_android.png" width="300" height="250" /></p>
<p><span><span><span><span>(4) Setting up activity and layout names<br />
</span></span></span></span></p>
<p><img decoding="async" loading="lazy" alt="settingactivityname" src="/uploads-archive/2014/02/main_activity_android.png" width="300" height="250" /></p>
<p><span><span><span><span>(5) Building app<br />
</span></span></span></span></p>
<p><img decoding="async" loading="lazy" alt="buildingapp" src="/uploads-archive/2014/02/building_android.png" width="300" height="150" /></p>
<p><em><strong>Developing</strong></em></p>
<p><span><span>(1) activity_mail.xml<br />
</span></span></p>
<p><img decoding="async" loading="lazy" alt="devapp" src="/uploads-archive/2014/02/dev_app.png" width="300" height="250" /></p>
<p><span><span>(2) MainActivity.java<br />
</span></span></p>
<p><img decoding="async" loading="lazy" alt="devapp1" src="/uploads-archive/2014/02/dev1.png" width="300" height="250" /></p>
<p><span><span>(3) fragment_main.xml<br />
</span></span></p>
<p><img decoding="async" loading="lazy" alt="devapp2" src="/uploads-archive/2014/02/dev2.png" width="300" height="250" /></p>
<p><em><strong>Running the project</strong></em></p>
<p><span><span><span><span>(1) Adding Android Virtual Device Manager(Emulator for testing app)<br />
</span></span></span></span></p>
<p><img decoding="async" loading="lazy" alt="settingemulator" src="/uploads-archive/2014/02/emulator_android.png" width="300" height="250" /></p>
<p><span><span>(2) App on Device<br />
</span></span></p>
<p><img decoding="async" loading="lazy" alt="apponhome" src="/uploads-archive/2014/02/apponhome.png" width="200" height="250" /></p>
<p>(3) I&#8217;m now successfully running 🙂</p>
<p><img decoding="async" loading="lazy" alt="runningapp" src="/uploads-archive/2014/02/helloworld_android.png" width="220" height="250" /></p>
<p><span><span><span><span>Enjoy!!!</span></span></span></span></p>


Android Hello World

<p>少し前から流行っているフラットデザインですが、最近は日本のサイトでも多く見かけるようになりました。</p>
<p>勉強のために、いろいろ見てきたものをここでは７つ紹介したいと思います。</p>
<h2>フラットデザインのサイト7選</h3>
<h3>株式会社ユニオンネット</h4>
<p>大阪の制作会社さんのサイトです。<br />
横幅いっぱいの写真を使用し、ちょっとした動きもありいい感じです。</p>
<p>&nbsp;</p>
<p><a href="/uploads-archive/2014/02/d416efe8d5de2b80300be706e602d1bb.jpg"><img decoding="async" loading="lazy" class="alignnone  wp-image-4255" alt="ホームページ制作│大阪│株式会社ユニオンネット" src="/uploads-archive/2014/02/d416efe8d5de2b80300be706e602d1bb.jpg" width="650" height="488" srcset="/uploads-archive/2014/02/d416efe8d5de2b80300be706e602d1bb.jpg 1007w, /uploads-archive/2014/02/d416efe8d5de2b80300be706e602d1bb-300x225.jpg 300w, /uploads-archive/2014/02/d416efe8d5de2b80300be706e602d1bb-228x171.jpg 228w" sizes="(max-width: 650px) 100vw, 650px" /></a></p>
<p>&nbsp;</p>
<p><a class="link" href="http://www.unionnet.jp/" target="_blank">ホームページ制作│大阪│株式会社ユニオンネット</a></p>
<p>&nbsp;</p>
<h3>DEMONO（デモノ）体験をモノに。</h4>
<p>ECサイトのツールを手がけている会社さんで、色合いがいい感じですね！<br />
スクロールと連動した動きもつけられています。</p>
<p><a href="/uploads-archive/2014/02/0095e64a6ea4d783f9175e6fe7b0b000.jpg"><img decoding="async" loading="lazy" class="alignnone  wp-image-4250" alt="DEMONO（デモノ）体験をモノに。" src="/uploads-archive/2014/02/0095e64a6ea4d783f9175e6fe7b0b000.jpg" width="650" height="488" srcset="/uploads-archive/2014/02/0095e64a6ea4d783f9175e6fe7b0b000.jpg 1007w, /uploads-archive/2014/02/0095e64a6ea4d783f9175e6fe7b0b000-300x225.jpg 300w, /uploads-archive/2014/02/0095e64a6ea4d783f9175e6fe7b0b000-228x171.jpg 228w" sizes="(max-width: 650px) 100vw, 650px" /></a></p>
<p>&nbsp;</p>
<p><a class="link" href="http://demono.co.jp/" target="_blank">DEMONO（デモノ）体験をモノに。</a></p>
<p>&nbsp;</p>
<h3>みんなのマーケット株式会社</h4>
<p>まだ創立3年程の会社です。<br />
くらしのマーケットというサイトを運営しています。<br />
シンプルな形で、円形の写真を使い人物を紹介しています。</p>
<p><a href="/uploads-archive/2014/02/7a1d52a1a1321362d9f08c035a6dabb3.jpg"><img decoding="async" loading="lazy" class="alignnone  wp-image-4256" alt="みんなのマーケット株式会社 - みんなのマーケット株式会社" src="/uploads-archive/2014/02/7a1d52a1a1321362d9f08c035a6dabb3.jpg" width="650" height="488" srcset="/uploads-archive/2014/02/7a1d52a1a1321362d9f08c035a6dabb3.jpg 1007w, /uploads-archive/2014/02/7a1d52a1a1321362d9f08c035a6dabb3-300x225.jpg 300w, /uploads-archive/2014/02/7a1d52a1a1321362d9f08c035a6dabb3-228x171.jpg 228w" sizes="(max-width: 650px) 100vw, 650px" /></a></p>
<p>&nbsp;</p>
<p><a class="link" href="http://www.minma.jp/" target="_blank">みんなのマーケット株式会社</a></p>
<p>&nbsp;</p>
<h3>株式会社ワノコト</h4>
<p>埼玉にあるweb制作会社さんです。<br />
ブルーとオレンジを基調にしたサイトで、いいフラット感です。</p>
<p><a href="/uploads-archive/2014/02/851e1f12c68500da5a4bc38efe98633d.jpg"><img decoding="async" loading="lazy" class="alignnone  wp-image-4254" alt="ホームページ制作・システム開発 埼玉県（入間市・所沢市・飯能市・川越市）・東京中心のサイト制作 - 株式会社ワノコト" src="/uploads-archive/2014/02/851e1f12c68500da5a4bc38efe98633d.jpg" width="650" height="488" srcset="/uploads-archive/2014/02/851e1f12c68500da5a4bc38efe98633d.jpg 1007w, /uploads-archive/2014/02/851e1f12c68500da5a4bc38efe98633d-300x225.jpg 300w, /uploads-archive/2014/02/851e1f12c68500da5a4bc38efe98633d-228x171.jpg 228w" sizes="(max-width: 650px) 100vw, 650px" /></a></p>
<p>&nbsp;</p>
<p><a class="link" href="http://www.wanokoto.jp/" target="_blank">ホームページ制作・システム開発 埼玉県（入間市・所沢市・飯能市・川越市）・東京中心のサイト制作 &#8211; 株式会社ワノコト</a></p>
<p>&nbsp;</p>
<h3>サイバーエージェント・クラウドファンディング</h4>
<p>クラウドファウンディングを運営しているサイバー系の会社さんです。<br />
カラフルで大きな写真を使用しています。こちらも人物紹介が円形の写真を使用していますね。</p>
<p><a href="/uploads-archive/2014/02/9d1a3bcfbd099922d2f84023f0268c33.jpg"><img decoding="async" loading="lazy" class="alignnone  wp-image-4253" alt="サイバーエージェント・クラウドファンディング" src="/uploads-archive/2014/02/9d1a3bcfbd099922d2f84023f0268c33-1024x731.jpg" width="650" height="464" srcset="/uploads-archive/2014/02/9d1a3bcfbd099922d2f84023f0268c33-1024x731.jpg 1024w, /uploads-archive/2014/02/9d1a3bcfbd099922d2f84023f0268c33-300x214.jpg 300w, /uploads-archive/2014/02/9d1a3bcfbd099922d2f84023f0268c33-228x162.jpg 228w, /uploads-archive/2014/02/9d1a3bcfbd099922d2f84023f0268c33.jpg 1162w" sizes="(max-width: 650px) 100vw, 650px" /></a></p>
<p>&nbsp;</p>
<p><a class="link" href="http://www.ca-crowdfunding.com/" target="_blank">サイバーエージェント・クラウドファンディング</a></p>
<p>&nbsp;</p>
<h3>株式会社フォーデジットデザイン</h4>
<p>都内にあるweb制作会社さんです。<br />
横幅いっぱいの写真を使っていますが、フラットというよりミニマルに近いでしょうか？<br />
ホワイトを基調としておりキレイにできています。<br />
ページの切り替わりもオシャレです。</p>
<p><a href="/uploads-archive/2014/02/12546e8883696b2ec72adfb01082e9a4.jpg"><img decoding="async" loading="lazy" class="alignnone  wp-image-4251" alt="FOURDIGIT DESIGN Inc.  株式会社フォーデジットデザイン" src="/uploads-archive/2014/02/12546e8883696b2ec72adfb01082e9a4-1024x731.jpg" width="650" height="464" srcset="/uploads-archive/2014/02/12546e8883696b2ec72adfb01082e9a4-1024x731.jpg 1024w, /uploads-archive/2014/02/12546e8883696b2ec72adfb01082e9a4-300x214.jpg 300w, /uploads-archive/2014/02/12546e8883696b2ec72adfb01082e9a4-228x162.jpg 228w, /uploads-archive/2014/02/12546e8883696b2ec72adfb01082e9a4.jpg 1162w" sizes="(max-width: 650px) 100vw, 650px" /></a></p>
<p>&nbsp;</p>
<p><a class="link" href="http://4dd.jp/" target="_blank">FOURDIGIT DESIGN Inc. | 株式会社フォーデジットデザイン</a></p>
<p>&nbsp;</p>
<h3>LIVESENSE made*</h4>
<p>リブセンスさんの採用専用サイトです。<br />
大きな写真をメインにしようし、アクセントがブルー、グレーを基調としています。<br />
スッキリしていてみやすいですね。<br />
こちらも人物紹介に円形の写真を使用しています。</p>
<p><a href="/uploads-archive/2014/02/LIVESENSE-made.jpg"><img decoding="async" loading="lazy" class="alignnone  wp-image-4252" alt="LIVESENSE made" src="/uploads-archive/2014/02/LIVESENSE-made-1024x731.jpg" width="651" height="464" srcset="/uploads-archive/2014/02/LIVESENSE-made-1024x731.jpg 1024w, /uploads-archive/2014/02/LIVESENSE-made-300x214.jpg 300w, /uploads-archive/2014/02/LIVESENSE-made-228x162.jpg 228w, /uploads-archive/2014/02/LIVESENSE-made.jpg 1162w" sizes="(max-width: 651px) 100vw, 651px" /></a></p>
<p>&nbsp;</p>
<p><a class="link" href="http://made.livesense.co.jp/" target="_blank">LIVESENSE made*</a></p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>上記のサイトを見て思ったのが、<br />
サイトの横幅はブラウザいっぱいで枠を設けてなく、<br />
コンテンツ毎の区切りで色を変更したり、<br />
写真を横幅いっぱいで使用したりしていますね。</p>
<p>基本的には縦長で、余白を十分にとり、<br />
スクロールと連動させた動きをつけているサイトも多くありました。</p>
<p>人物紹介で写真を円形にしているサイトが多くあったのがちょっと気になりました。</p>


フラットデザインで制作されたワンカラムの縦長ページサイト7選

<p>地味だけどありがたい機能を提供してくれるプラグイン。</p>
<p>今でも印刷を想定してほしいとの依頼は時々あり、昔は印刷用に別ページを作ってポップアップさせたこともあった。</p>
<p><a class="demo" href="/demo/hoshino/51/">デモ</a></p>
<p>設定は簡単で、まずはこちらからjsファイルをダウンロード。</p>
<p><a href="/demo/hoshino/51/js/jquery.jPrintArea.js" target="_blank">/demo/hoshino/51/js/jquery.jPrintArea.js</a></p>
<p>あとはHTMLに対し</p>

		<div id="crayon-64953fd597c57071736409" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover wrap" style=" margin-top: 12px; margin-bottom: 12px; font-size: 13px !important; line-height: 18px !important;">
		
			<div class="crayon-toolbar" data-settings=" mouseover overlay hide delay" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><span class="crayon-title"></span>
			<div class="crayon-tools" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><div class="crayon-button crayon-nums-button" title="Toggle Line Numbers"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-plain-button" title="Toggle Plain Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-copy-button" title="Copy"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-popup-button" title="Open Code In New Window"><div class="crayon-button-icon"></div></div><span class="crayon-language">XHTML</span></div></div>
			<div class="crayon-info" style="min-height: 19.5px !important; line-height: 19.5px !important;"></div>
			<div class="crayon-plain-wrap"><textarea  class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 13px !important; line-height: 18px !important;">
&lt;div id="area1"&gt;
    &lt;img src="images/1.jpg"&gt;
hogehogehogehogehogehogehogehoge
    &lt;p&gt;&lt;input type="button" value="ここまでを印刷" id="btn1"&gt;&lt;/p&gt;
&lt;/div&gt;</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 13px !important; line-height: 18px !important;"><div class="crayon-num" data-line="crayon-64953fd597c57071736409-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd597c57071736409-2">2</div><div class="crayon-num" data-line="crayon-64953fd597c57071736409-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd597c57071736409-4">4</div><div class="crayon-num" data-line="crayon-64953fd597c57071736409-5">5</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 13px !important; line-height: 18px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-64953fd597c57071736409-1"><span class="crayon-r ">&lt;div </span><span class="crayon-e ">id</span>=<span class="crayon-s ">"area1"</span><span class="crayon-r ">&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd597c57071736409-2"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-r ">&lt;img </span><span class="crayon-e ">src</span>=<span class="crayon-s ">"images/1.jpg"</span><span class="crayon-r ">&gt;</span></div><div class="crayon-line" id="crayon-64953fd597c57071736409-3"><span class="crayon-i ">hogehogehogehogehogehogehogehoge</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd597c57071736409-4"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-r ">&lt;p&gt;</span><span class="crayon-r ">&lt;input </span><span class="crayon-e ">type</span>=<span class="crayon-s ">"button"</span><span class="crayon-h"> </span><span class="crayon-e ">value</span>=<span class="crayon-s ">"ここまでを印刷"</span><span class="crayon-h"> </span><span class="crayon-e ">id</span>=<span class="crayon-s ">"btn1"</span><span class="crayon-r ">&gt;</span><span class="crayon-r ">&lt;/p&gt;</span></div><div class="crayon-line" id="crayon-64953fd597c57071736409-5"><span class="crayon-r ">&lt;/div&gt;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>JSはこのように実行する。</p>

		<div id="crayon-64953fd597c5b218972402" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover wrap" style=" margin-top: 12px; margin-bottom: 12px; font-size: 13px !important; line-height: 18px !important;">
		
			<div class="crayon-toolbar" data-settings=" mouseover overlay hide delay" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><span class="crayon-title"></span>
			<div class="crayon-tools" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><div class="crayon-button crayon-nums-button" title="Toggle Line Numbers"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-plain-button" title="Toggle Plain Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-copy-button" title="Copy"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-popup-button" title="Open Code In New Window"><div class="crayon-button-icon"></div></div><span class="crayon-language">JavaScript</span></div></div>
			<div class="crayon-info" style="min-height: 19.5px !important; line-height: 19.5px !important;"></div>
			<div class="crayon-plain-wrap"><textarea  class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 13px !important; line-height: 18px !important;">
$( '#btn1' ).click( function()
{
	$.jPrintArea( '#area1' );
});</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-64953fd597c5b218972402-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd597c5b218972402-2">2</div><div class="crayon-num" data-line="crayon-64953fd597c5b218972402-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd597c5b218972402-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-64953fd597c5b218972402-1"><span class="crayon-sy">$</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-s">'#btn1'</span><span class="crayon-h"> </span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-e">click</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-t">function</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd597c5b218972402-2"><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-64953fd597c5b218972402-3"><span class="crayon-h">	</span><span class="crayon-sy">$</span><span class="crayon-sy">.</span><span class="crayon-e">jPrintArea</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-s">'#area1'</span><span class="crayon-h"> </span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd597c5b218972402-4"><span class="crayon-sy">}</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>&nbsp;</p>
<p>製品一覧とかマニュアルとかスペック表などでわざわざPDFにしていた場合も使えそう。</p>
<p>&nbsp;</p>
<p>&nbsp;</p>

印刷範囲を指定できるjQueryプラグイン

<p>There are many ways to set up a Android mobile development environment.</p>
<p><strong>1) Android Studio(based on IntelliJ IDEA IDE)</strong></p>
<p>http://developer.android.com/sdk/installing/studio.html</p>
<p>This is the easiest way to start an Android dev env as a beginner. Please just download:</p>
<p><em>For window,</em></p>
<p><span style="font-family: Arial, Helvetica, sans-serif; font-size: small;"> android-studio-bundle-&lt;version&gt;.exe</span></p>
<p><em>For Mac,</em></p>
<p>android-studio-bundle-&lt;version&gt;.dmg</p>
<p><em>For Linux,</em></p>
<p>android-studio-bundle-&lt;version&gt;.tgz</p>
<ol>
<li>Unpack the downloaded Tar file</li>
<li>To launch Android Studio, navigate to the <code>android-studio/bin/</code> directory in a terminal and execute <code>studio.sh</code>. [Ref: http://developer.android.com/sdk/installing/studio.html]</li>
</ol>
<p><strong>2) Android Developer Tools (ADT Bundle &#8211; Eclipse with the ADT Plugin)</strong></p>
<p>http://developer.android.com/sdk/index.html</p>
<p>Please just download respective .zip file for selected OS.</p>
<p><strong>3) Eclipse (IDE) + Android SDK</strong></p>
<p>You need to install Eclipse IDE. Assume that you have already install JAVA SDK (http://www.oracle.com/technetwork/java/javase/downloads/index.html).</p>
<p>You need to download Android SDK from &#8220;<strong>SDK Tools Only</strong>&#8221; sections of http://developer.android.com/sdk/index.html.</p>
<p>When you set up Eclipse for android development, you need to link Eclipse with respective JAVA SDK and android SDK manually.</p>
<p><strong>4) IntelliJ (IDE) + Android SDK</strong></p>
<p>Download IntelliJ IDE from this link: http://www.jetbrains.com/idea/</p>
<p>You are assumed that you&#8217;ve already installed JAVA SDK.</p>
<p>Download Android SDK from &#8220;<strong>SDK Tools Only</strong>&#8221; section of http://developer.android.com/sdk/index.html</p>
<p>When you set up IntelliJ for android development, you need to link IntelliJ with respective JAVA SDK and android SDK manually.</p>
<p>Enjoy!!!</p>


Easy ways to setting up an Android Dev

<p>日本語フォントでは、基本一つ一つの文字が等幅で作られていることがほとんどで、</p>
<p>ウェブサイト上でテキストによって文字組をした場合に、不自然な文字間隔になってしまう場所が出てきます。</p>
<p>フラットデザインやレスポンシブデザインが標準化傾向にある今、</p>
<p>ウェブサイトでの文字は文章はもちろんのこと、テキストにおいても画像を使わずテキストを使う必要性が高まってきており、</p>
<p>日本語フォント独特の文字間隔の不自然さが、ウェブデザインでの障害となることもあります。</p>
<p>&nbsp;</p>
<p>そんな中、ウェブページのテキストの文字詰めを自動でしてくれるJSが公開されていましたので、</p>
<p>こちらをご紹介いたします。</p>
<p><a class="link" href="http://fladdict.net/blog/2011/02/auto-kerning.html" target="_blank">HTMLで文字詰めするタイポグラフィー用JS</a></p>
<p>ファイルはこちらのサイトよりダウンロードください。</p>
<p>&nbsp;</p>
<p>↓DEMO作ってみました。</p>
<p><a class="demo" title="DEMO" href="/demo/ninomiya/40/" target="_blank">DEMO</a></p>
<p>&nbsp;</p>
<h2>使い方</h3>
<p>まず、jQueryとダウンロードした文字詰めのJSファイルを読み込みます。</p>

		<div id="crayon-64953fd597a64243774703" 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">HTML</span>
			<div class="crayon-tools" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><div class="crayon-button crayon-nums-button" title="Toggle Line Numbers"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-plain-button" title="Toggle Plain Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-copy-button" title="Copy"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-popup-button" title="Open Code In New Window"><div class="crayon-button-icon"></div></div><span class="crayon-language">XHTML</span></div></div>
			<div class="crayon-info" style="min-height: 19.5px !important; line-height: 19.5px !important;"></div>
			<div class="crayon-plain-wrap"><textarea  class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 13px !important; line-height: 18px !important;">
&lt;script type="text/javascript" src="js/jquery-1.9.1.min.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="js/FLAutoKerning.js"&gt;&lt;/script&gt;</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 13px !important; line-height: 18px !important;"><div class="crayon-num" data-line="crayon-64953fd597a64243774703-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd597a64243774703-2">2</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 13px !important; line-height: 18px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-64953fd597a64243774703-1"><span class="crayon-ta">&lt;script </span><span class="crayon-e ">type</span>=<span class="crayon-s">"text/javascript"</span><span class="crayon-h"> </span><span class="crayon-e ">src</span>=<span class="crayon-s">"js/jquery-1.9.1.min.js"</span><span class="crayon-h">&gt;</span><span class="crayon-ta">&lt;/script&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd597a64243774703-2"><span class="crayon-ta">&lt;script </span><span class="crayon-e ">type</span>=<span class="crayon-s">"text/javascript"</span><span class="crayon-h"> </span><span class="crayon-e ">src</span>=<span class="crayon-s">"js/FLAutoKerning.js"</span><span class="crayon-h">&gt;</span><span class="crayon-ta">&lt;/script&gt;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>&nbsp;</p>
<p>次に、文字詰めを行うHTML要素に、</p>
<p>FLAutoKerning.process($(&#8216;対象の要素&#8217;));</p>
<p>と行った形でスクリプトをあてます。</p>

		<div id="crayon-64953fd597a68292024937" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover wrap" style=" margin-top: 12px; margin-bottom: 12px; font-size: 13px !important; line-height: 18px !important;">
		
			<div class="crayon-toolbar" data-settings=" mouseover overlay hide delay" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><span class="crayon-title"></span>
			<div class="crayon-tools" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><div class="crayon-button crayon-nums-button" title="Toggle Line Numbers"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-plain-button" title="Toggle Plain Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-copy-button" title="Copy"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-popup-button" title="Open Code In New Window"><div class="crayon-button-icon"></div></div><span class="crayon-language">JavaScript</span></div></div>
			<div class="crayon-info" style="min-height: 19.5px !important; line-height: 19.5px !important;"></div>
			<div class="crayon-plain-wrap"><textarea  class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 13px !important; line-height: 18px !important;">
$(function(){
	FLAutoKerning.process($('.group2 h1'));
	FLAutoKerning.process($('.group2 nav li a'));
	FLAutoKerning.process($('.group2 h2'));
	FLAutoKerning.process($('.group2 section .text'));
});</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-64953fd597a68292024937-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd597a68292024937-2">2</div><div class="crayon-num" data-line="crayon-64953fd597a68292024937-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd597a68292024937-4">4</div><div class="crayon-num" data-line="crayon-64953fd597a68292024937-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd597a68292024937-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-64953fd597a68292024937-1"><span class="crayon-sy">$</span><span class="crayon-sy">(</span><span class="crayon-t">function</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd597a68292024937-2"><span class="crayon-h">	</span><span class="crayon-i">FLAutoKerning</span><span class="crayon-sy">.</span><span class="crayon-e">process</span><span class="crayon-sy">(</span><span class="crayon-sy">$</span><span class="crayon-sy">(</span><span class="crayon-s">'.group2 h1'</span><span class="crayon-sy">)</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-64953fd597a68292024937-3"><span class="crayon-h">	</span><span class="crayon-i">FLAutoKerning</span><span class="crayon-sy">.</span><span class="crayon-e">process</span><span class="crayon-sy">(</span><span class="crayon-sy">$</span><span class="crayon-sy">(</span><span class="crayon-s">'.group2 nav li a'</span><span class="crayon-sy">)</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd597a68292024937-4"><span class="crayon-h">	</span><span class="crayon-i">FLAutoKerning</span><span class="crayon-sy">.</span><span class="crayon-e">process</span><span class="crayon-sy">(</span><span class="crayon-sy">$</span><span class="crayon-sy">(</span><span class="crayon-s">'.group2 h2'</span><span class="crayon-sy">)</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-64953fd597a68292024937-5"><span class="crayon-h">	</span><span class="crayon-i">FLAutoKerning</span><span class="crayon-sy">.</span><span class="crayon-e">process</span><span class="crayon-sy">(</span><span class="crayon-sy">$</span><span class="crayon-sy">(</span><span class="crayon-s">'.group2 section .text'</span><span class="crayon-sy">)</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd597a68292024937-6"><span class="crayon-sy">}</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>これで文字詰めが行われます。</p>
<p>文字詰めを行う文字一つ一つが&lt;span&gt;で囲まれますので、&lt;span&gt;で文字の大きさや色などを指定していたりする場合は注意が必要です。</p>
<p>&nbsp;</p>
<p>全体として文字の間にできる不自然な空白が抑えられ、</p>
<p>特に句読点や括弧などの前後にできる大きな空白が抑えられているので、</p>
<p>まとまった感じがします。</p>
<p>&nbsp;</p>
<p>等幅でなくなるため、行の終わりが揃わなくなるという問題が出てくるため、</p>
<p>タイトルやキャッチコピーなどでの利用に抑えたり、</p>
<p>センタリングや右寄せした文章のような、行の終わりをそろえる必要がないような箇所に使うなどの利用法がいいかもしれません。</p>

日本語の文字詰め(カーニング)を自動で調整してくれるjQuery

<p>wordpressでお問い合わせを設置するとなれば、高い確率でこのプラグインが導入されますが、</p>
<p>ちょっといろいろ問題とまでは言いませんが、引っかかるポイントがあります。</p>
<p>&nbsp;</p>
<p>・確認画面がでない</p>
<p>・スパムがけっこうくる</p>
<p>・メール返信がなんか変</p>
<p>&nbsp;</p>
<p>地味に困ることがありますね笑</p>
<p>&nbsp;</p>
<p>その対策をすることがあるので、その解決で参考になったブログを紹介したいと思います。</p>
<p>&nbsp;</p>
<h2>確認画面がでない</h3>
<p>まずこちらですが、確認画面を出すようにすることができるという噂を聞いたことがあるのですが、<br />
まだ試してことはありません。</p>
<p>確認画面が出るプラグインもあるみたいので、<br />
どうしても確認画面が欲しい人は以下のプラグインを使ってみてはいかがでしょうか。</p>
<p><a href="http://hinagata.biz/plugin/inquiry-form-creator/">【inquiry form creator】簡単３ステップで確認画面付きの問い合わせフォームが設置できるWordPressプラグイン &#8211; ひなログ</a></p>
<p>次の項目とかぶるのですが、<br />
確認画面を表示しなくても以下のブログのようにすれば十分な気がします。</p>
<p><a href="http://bizvektor.com/plugins/contactform7/" target="_blank">意外と知らない !? お問い合わせフォーム「Contact Form 7」をもっと便利に使いこなすための3つのポイント | プラグイン紹介 | BizVektor [ ビズベクトル ] スマホ対応無料WordPressテーマ（テンプレート）</a></p>
<h2>スパムがけっこうくる</h3>
<p>こちらも少々やっかいで、通常通り設置すると、<br />
スパムがどんどん来ます。</p>
<p>うちのサイトもよく来ていたので、画像認証的なものを導入しました。<br />
ただ、これはもうひとつ別のプラグインを入れないといけないし、<br />
ユーザーもめんどくさいかと思います。</p>
<p>こちらのブログのようにすれば僕が行った対策より簡単です！</p>
<p><a href="http://curious-everything.com/1089-entry.html">Contact Form 7 に追加すればスパムが届かなくなる魔法の1行 | 毎日興味津々</a></p>
<h2>メール返信がなんか変</h3>
<p>これはお問い合わせからくるメールのfromがおかしかったり、<br />
迷惑メールに届いちゃったりということが起こってしまう件です。</p>
<p>これはこのプラグインの設定でサーバーを経由してしまうからうんぬんかんぬんらしいですが、<br />
そこらへんのことはよくわからないので、完璧に理解していませんが、そちらを解決するためのブログが以下になります。</p>
<p><a href="http://www.ssw2005.net/968" target="_blank">ContactForm7から送信すると迷惑メールと判別される場合の対応方法 | えびす商売繁盛マーケティング</a></p>
<p><a href="http://coneta.jp/2579.html" target="_blank">WordPress(ワードプレス) SMTPサーバを変更できるプラグイン「WP Mail SMTP」 | CONETA.JP</a></p>
<p>もっといいプラグインが現れるようなそんな気がします。。。</p>


wordpressの『contact form 7』プラグインをもっと使いこなすためのTIPS

jQueryとWebフォントでスマホの傾きで色の変わるアイコンを作ってみる

<p>PHPには、関数の引数の対象が変数のみになるものがあります。<br />
一番よく使うのは多分issetやemptyになります。<br />
ありがちかつ訳分からないミスは、関数を引数として、issetやemptyに渡すことです。<br />
サンプルコードを見てみましょう。</p>
<p></p>

		<div id="crayon-64953fd597400981650628" 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">PHP</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;?php
$user = new User();
// 正
if (isset($user-&gt;name) &amp;&amp; !empty($user-&gt;name)) {
	// 直接属性(変数)を使うならOK→nameはpublicだから外部からもアクセスできる
}
// 誤
if (isset($user-&gt;getAge()) &amp;&amp; !empty($user-&gt;getAge())) {
	// issetやemptyに関数（メソッド）は使えない→syntax errorになる
	// Fatal error: Can't use function return value in write context 
}
// これならOK
$age = $user-&gt;getAge();
if (isset($age) &amp;&amp; !empty($age)) {

}

class User
{
	public $name;

	private $age;

    public function getName()
    {
        return $this-&gt;name;
    }

    public function setName($name)
    {
        $this-&gt;name = $name;
    }


    public function getAge()
    {
        return $this-&gt;age;
    }

    public function setAge($age)
    {
        $this-&gt;age = $age;
    }

}</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-64953fd597400981650628-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd597400981650628-2">2</div><div class="crayon-num" data-line="crayon-64953fd597400981650628-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd597400981650628-4">4</div><div class="crayon-num" data-line="crayon-64953fd597400981650628-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd597400981650628-6">6</div><div class="crayon-num" data-line="crayon-64953fd597400981650628-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd597400981650628-8">8</div><div class="crayon-num" data-line="crayon-64953fd597400981650628-9">9</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd597400981650628-10">10</div><div class="crayon-num" data-line="crayon-64953fd597400981650628-11">11</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd597400981650628-12">12</div><div class="crayon-num" data-line="crayon-64953fd597400981650628-13">13</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd597400981650628-14">14</div><div class="crayon-num" data-line="crayon-64953fd597400981650628-15">15</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd597400981650628-16">16</div><div class="crayon-num" data-line="crayon-64953fd597400981650628-17">17</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd597400981650628-18">18</div><div class="crayon-num" data-line="crayon-64953fd597400981650628-19">19</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd597400981650628-20">20</div><div class="crayon-num" data-line="crayon-64953fd597400981650628-21">21</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd597400981650628-22">22</div><div class="crayon-num" data-line="crayon-64953fd597400981650628-23">23</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd597400981650628-24">24</div><div class="crayon-num" data-line="crayon-64953fd597400981650628-25">25</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd597400981650628-26">26</div><div class="crayon-num" data-line="crayon-64953fd597400981650628-27">27</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd597400981650628-28">28</div><div class="crayon-num" data-line="crayon-64953fd597400981650628-29">29</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd597400981650628-30">30</div><div class="crayon-num" data-line="crayon-64953fd597400981650628-31">31</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd597400981650628-32">32</div><div class="crayon-num" data-line="crayon-64953fd597400981650628-33">33</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd597400981650628-34">34</div><div class="crayon-num" data-line="crayon-64953fd597400981650628-35">35</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd597400981650628-36">36</div><div class="crayon-num" data-line="crayon-64953fd597400981650628-37">37</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd597400981650628-38">38</div><div class="crayon-num" data-line="crayon-64953fd597400981650628-39">39</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd597400981650628-40">40</div><div class="crayon-num" data-line="crayon-64953fd597400981650628-41">41</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd597400981650628-42">42</div><div class="crayon-num" data-line="crayon-64953fd597400981650628-43">43</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd597400981650628-44">44</div><div class="crayon-num" data-line="crayon-64953fd597400981650628-45">45</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-64953fd597400981650628-1"><span class="crayon-ta">&lt;?php</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd597400981650628-2"><span class="crayon-v">$user</span><span class="crayon-h"> </span>=<span class="crayon-h"> </span><span class="crayon-r">new</span><span class="crayon-h"> </span><span class="crayon-e">User</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-64953fd597400981650628-3"><span class="crayon-c">// 正</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd597400981650628-4"><span class="crayon-st">if</span><span class="crayon-h"> </span><span class="crayon-sy">(</span><span class="crayon-k ">isset</span><span class="crayon-sy">(</span><span class="crayon-v">$user</span>-<span class="crayon-h">&gt;</span><span class="crayon-i">name</span><span class="crayon-sy">)</span><span class="crayon-h"> </span><span class="crayon-sy">&amp;&amp; !empty($user-&gt;name)) {</span></div><div class="crayon-line" id="crayon-64953fd597400981650628-5"><span class="crayon-sy">	// 直接属性(変数)を使うならOK→nameはpublicだから外部からもアクセスできる</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd597400981650628-6"><span class="crayon-sy">}</span></div><div class="crayon-line" id="crayon-64953fd597400981650628-7"><span class="crayon-sy">// 誤</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd597400981650628-8"><span class="crayon-sy">if (isset($user-&gt;getAge()) &amp;&amp; !empty($user-&gt;getAge())) {</span></div><div class="crayon-line" id="crayon-64953fd597400981650628-9"><span class="crayon-sy">	// issetやemptyに関数（メソッド）は使えない→syntax errorになる</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd597400981650628-10"><span class="crayon-sy">	// Fatal error: Can't use function return value in write context </span></div><div class="crayon-line" id="crayon-64953fd597400981650628-11"><span class="crayon-sy">}</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd597400981650628-12"><span class="crayon-sy">// これならOK</span></div><div class="crayon-line" id="crayon-64953fd597400981650628-13"><span class="crayon-sy">$age = $user-&gt;getAge();</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd597400981650628-14"><span class="crayon-st">if</span><span class="crayon-h"> </span><span class="crayon-sy">(</span><span class="crayon-k ">isset</span><span class="crayon-sy">(</span><span class="crayon-v">$age</span><span class="crayon-sy">)</span><span class="crayon-h"> </span><span class="crayon-sy">&amp;&amp; !empty($age)) {</span></div><div class="crayon-line" id="crayon-64953fd597400981650628-15">&nbsp;</div><div class="crayon-line crayon-striped-line" id="crayon-64953fd597400981650628-16"><span class="crayon-sy">}</span></div><div class="crayon-line" id="crayon-64953fd597400981650628-17">&nbsp;</div><div class="crayon-line crayon-striped-line" id="crayon-64953fd597400981650628-18"><span class="crayon-sy">class User</span></div><div class="crayon-line" id="crayon-64953fd597400981650628-19"><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd597400981650628-20"><span class="crayon-sy">	public $name;</span></div><div class="crayon-line" id="crayon-64953fd597400981650628-21">&nbsp;</div><div class="crayon-line crayon-striped-line" id="crayon-64953fd597400981650628-22"><span class="crayon-h">	</span><span class="crayon-m">private</span><span class="crayon-h"> </span><span class="crayon-v">$age</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-64953fd597400981650628-23">&nbsp;</div><div class="crayon-line crayon-striped-line" id="crayon-64953fd597400981650628-24"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-m">public</span><span class="crayon-h"> </span><span class="crayon-t">function</span><span class="crayon-h"> </span><span class="crayon-e">getName</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span></div><div class="crayon-line" id="crayon-64953fd597400981650628-25"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd597400981650628-26"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-k ">return</span><span class="crayon-h"> </span><span class="crayon-v">$this</span>-<span class="crayon-h">&gt;</span><span class="crayon-i">name</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-64953fd597400981650628-27"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">}</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd597400981650628-28">&nbsp;</div><div class="crayon-line" id="crayon-64953fd597400981650628-29"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-m">public</span><span class="crayon-h"> </span><span class="crayon-t">function</span><span class="crayon-h"> </span><span class="crayon-e">setName</span><span class="crayon-sy">(</span><span class="crayon-v">$name</span><span class="crayon-sy">)</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd597400981650628-30"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-64953fd597400981650628-31"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">$this</span>-<span class="crayon-h">&gt;</span><span class="crayon-i">name</span><span class="crayon-h"> </span>=<span class="crayon-h"> </span><span class="crayon-v">$name</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd597400981650628-32"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">}</span></div><div class="crayon-line" id="crayon-64953fd597400981650628-33">&nbsp;</div><div class="crayon-line crayon-striped-line" id="crayon-64953fd597400981650628-34">&nbsp;</div><div class="crayon-line" id="crayon-64953fd597400981650628-35"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-m">public</span><span class="crayon-h"> </span><span class="crayon-t">function</span><span class="crayon-h"> </span><span class="crayon-e">getAge</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd597400981650628-36"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-64953fd597400981650628-37"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-k ">return</span><span class="crayon-h"> </span><span class="crayon-v">$this</span>-<span class="crayon-h">&gt;</span><span class="crayon-i">age</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd597400981650628-38"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">}</span></div><div class="crayon-line" id="crayon-64953fd597400981650628-39">&nbsp;</div><div class="crayon-line crayon-striped-line" id="crayon-64953fd597400981650628-40"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-m">public</span><span class="crayon-h"> </span><span class="crayon-t">function</span><span class="crayon-h"> </span><span class="crayon-e">setAge</span><span class="crayon-sy">(</span><span class="crayon-v">$age</span><span class="crayon-sy">)</span></div><div class="crayon-line" id="crayon-64953fd597400981650628-41"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd597400981650628-42"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">$this</span>-<span class="crayon-h">&gt;</span><span class="crayon-i">age</span><span class="crayon-h"> </span>=<span class="crayon-h"> </span><span class="crayon-v">$age</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-64953fd597400981650628-43"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">}</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd597400981650628-44">&nbsp;</div><div class="crayon-line" id="crayon-64953fd597400981650628-45"><span class="crayon-sy">}</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p> </p>
<p>これらの関数の一覧は<a href="http://www.php.net/manual/ja/ref.var.php" target="_blank">ここ</a>です。</p>

【PHP】変数操作関数

<p>サーバ監視の観点でツール調べてみましたが、<br />
需要がクライアントごと違いますので、カスタマイズせずに直接使うのは難しいかと思います。<br />
Linuxサーバが付いている無料のツールlogwatchを使って、レポートの内容をカスタマイズするやり方がいいかと思います。<br />
※ただし、レポートは英語と、たまにログの内容そのままが出てくるのは難点です。</p>
<h2>インストールおよび設定</h3>
<p><a href="http://blog.thingslabo.com/archives/000054.html">こちら</a>が分かりやすいかと思います。<br />
設定項目が多いので、また調査中です。</p>
<h2>レポートの内容</h3>
<p>レポートが指定されたメールアドレスに送信されますので、下記はその内容の抜粋です。</p>
<h3>cron</h4>
<p>実行のスクリプトとその回数</p>
<h3>mail（dovecot→受信、postfix→送信）</h4>
<p>１、受信をするため、ユーザごとのログイン回数（IP付き）<br />
２、送信メールの数、および拒否したRelay（こちらのサーバを使ってメールを転送すること）</p>
<h3>httpd</h4>
<p>１、転送総量とタイプ別（Image/Document/Archive/Sound file/Content page/Redirect/Font/Other）の転送量<br />
２、検知したハッキング（回数、IP付き）<br />
３、レスポンスエラー（エラーコード別でurlと回数がでてくる）<br />
４、robotの訪問回数（UA付き）</p>
<h3>sshd</h4>
<p>不正ログインしようとしていたIPと回数（アカウント別、使ったパスワードまで分かる）</p>
<h3>disk space</h4>
<p>どれぐらい残っているかが分かる</p>
<h2>レポートを見た感想</h3>
<p>・文字だけで少々分かりにくい<br />
・ハッキングが多いからセキュリティを許可すべく</p>


Company

Our Solutions

Support

News

Blog

Blogブログ

カテゴリーから探す

年別から見る

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

2014/03/11

2014/03/05

2014/03/05

2014/03/04

2014/03/04

2014/02/26

2014/02/26

2014/02/19

2014/02/19

2014/02/18

2014/02/14

2014/02/14

2014/02/13

2014/02/13

2014/02/05

2014/02/05

2014/02/04

2014/01/29