<p>といいましても、<br />
僕の予想ではなく、海外の記事を紹介し、<br />
その中で僕が思ったことを少し述べたいと思います。</p>
<h2>2013年のデザイントレンド</h3>
<p>まずは、2013年のデザイントレンドですが、<br />
以下のサイトになります。</p>
<p><a href="http://www.creativebloq.com/web-design/2013-trends-121310199" target="_blank">The 10 hottest web design trends of 2013 | Web design | Creative Bloq</a></p>
<p>簡単に羅列すると、<br />
以下のようになります。</p>
<p><strong>1.レスポンシブデザイン<br />
2.フラットデザイン<br />
3.固定ヘッダー<br />
4.パララックス<br />
5.無限スクロール<br />
6.Retina対応<br />
7.タイポグラフィーデザイン<br />
8.丸いデザイン要素<br />
9.css3アニメーション<br />
10.大きなボタン</strong></p>
<h2>2014年のデザイントレンド予想</h3>
<p>次は2014年のデザイントレンド予想は以下になります。</p>
<p><a href="http://www.hongkiat.com/blog/web-design-trends-2014/" target="_blank">Web Design: 20 Hottest Trends To Watch Out For In 2014</a></p>
<p>簡単に羅列すると、<br />
以下のようになります。</p>
<p><strong>1.グリッドスタイルレイアウト<br />
2.狡猾な画像ホバーキャプション機能<br />
3.フォームの拡張機能<br />
4.深く考えられたランディングページ<br />
5.HTML5ビデオプレーヤー<br />
6.3Dエフェクト<br />
7.フラットデザインのパーツ・素材<br />
8.個人のポートレート<br />
9.SVG画像・アイコン<br />
10.特異なwebフォント<br />
11.Lazy-Loadingアニメーション<br />
12.カズタマイズされたイメージギャラリー<br />
13.メガナビゲーションメニュー<br />
14.伸びる検索バー<br />
15.特長をアイコン付きで紹介<br />
16.モバイルファースト<br />
17.html5キャンバス<br />
18.webブラウザゲーム<br />
19.素早い会員登録<br />
20.css3アニメーションキーフレーム</strong></p>
<p>以上のような感じですが、</p>
<p>2013年,2014年のトレンドをみて、<br />
僕的には、<br />
<strong>フラットデザイン、<br />
レスポンシブデザイン、<br />
css3のアニメーション(ホバー等)<br />
ランディングページ(パララックス,フラット,アニメーション)</strong></p>
<p>といったものを注目しています。</p>
<p>フラットデザインはいうまでもなく、2013年流行ったデザインであり、<br />
段々と日本語サイトでもフラットデザインを取り入れたサイトも見かけるようになりました。<br />
また、フラットデザインはレスポンシブデザインやランディングページは相性がいいと思うので、<br />
今後しばらくこの流れは継続されていくのではないかと思います。</p>
<p>css3については、段々と利用できるブラウザがメインになりつつある中で、<br />
制作者側からすると、やっといろいろできるなといった感じかと思います。<br />
特にホバーでは、本当に様々なことができるので、<br />
どんなものが出来るかこれから楽しみですね！</p>
<p>個人的には、「錯視」に興味があるのですが、<br />
それがwebサイトで使われるのはまだまだなのかなという気がします。<br />
使い方も限定されちゃうような気もします。。。</p>
<p>おまけに、<br />
上記で注目されいるような素材を提供してくれるサイトを紹介します。</p>
<p><strong>15個のフラットUIの素材キット</strong><br />
<a href="http://graphicdesignjunction.com/2014/01/creative-flat-ui-kits/" target="_blank">Flat UI Kits for Designers | Design | Graphic Design Junction</a></p>
<p><strong>30個のフリーのwebサイトテンプレートPSD素材</strong><br />
<a href="http://www.splashnology.com/article/free-psd-website-templates/11229/" target="_blank">30 Fresh and Free PSD Website Templates | Splashnology.com</a></p>
<p><strong>40個の美しいランディングページ</strong><br />
<a href="http://www.designzzz.com/landing-page-templates/" target="_blank">40 Beautiful Landing Page Templates</a></p>
<p><strong>150以上のフリーのアニメーションもあるSVGアイコン(フラットデザイン)</strong><br />
<a href="http://www.pencilscoop.com/2013/12/150-free-animated-svg-icons/">150+ Free Animated SVG Icons | Pencil Scoop | Design &amp; Creative Blog</a></p>


2013年のデザイントレンドを振り返り、2014年を予想する

<p>今回は、gitを使うチーム作業の流れを紹介したいと思います。</p>
<h2>git flow</h3>
<p>gitを使ってブランチを分けて作業する運用手法です。<br />
feature(機能追加、このブランチは複数ある)、develop、master、release（複数）、hotfix（緊急の修正、masterにマージしたら削除される）という全部５つ種類のブランチを使います。<br />
フローの概要をつかむため、<a href="http://danielkummer.github.io/git-flow-cheatsheet/index.ja_JP.html" target="_blank">ここ</a>をまず見るのをお勧めします。<br />
<a href="http://www.sourcetreeapp.com/" target="_blank">sourceTree</a>の機能を利用すると、簡単に実現できるのようです。</p>
<h3>基本的な流れ</h4>
<ol>
<li>developをベースに開発用ブランチを作成して（これがfeatureにあたる）開発者それぞれが開発をスタート</li>
<li>他の人が開発したコードを自分の開発用ブランチにマージ</li>
<li>開発が終われば編集内容をdevelopにマージして、開発者用ブランチを削除</li>
<li>developブランチをremoteブランチにpush</li>
<li>4を繰り返して開発を進める</li>
<li>開発が終了したらリリースのための作業を始める(developをベースにreleaseブランチを利用、 軽微なバグフィックス、リリース向けのコードや設定の編集)</li>
<li>releaseの編集を終えたら、developとmasterに内容をマージして、releaseブランチを削除</li>
<li>リリースを行う(masterブランチのデプロイ)</li>
<li>リリース後に、緊急バグが発生したらmasterをベースにhotfixブランチを作成し、対応</li>
<li>対応できたらmasterにマージし、hotfixブランチを削除</li>
<li>10を繰り返してバージョン管理を運用する</li>
</ol>
<h3>参考リンク</h4>
<p><a href="http://nvie.com/posts/a-successful-git-branching-model/" target="_blank">git flow cheatsheet（英語）</a><br />
<a href="http://danielkummer.github.io/git-flow-cheatsheet/index.ja_JP.html" target="_blank">git flow cheatsheet（日本語訳）</a><br />
<a href="http://www.slideshare.net/KatokichiSoft/git-flow-16616440" target="_blank">運用事例</a></p>
<h2>github flow</h3>
<p>githubを使う運用手法、ではなく、<br />
github開発チーム内部で使っているgit flowをカスタマイズしたものです。<br />
開発の一時ブランチ（複数）と、masterブランチの2種類のブランチのみ使います。</p>
<h3>git flowの短所</h4>
<ul>
<li>ブランチの切替えはやや複雑</li>
<li>短時間に繰り返すデプロイには不向き</li>
</ul>
<h3>github flowの特徴</h4>
<ul>
<li>masterブランチは常にデプロイ可能な状態にしておく</li>
<li>新しい開発などは、masterからブランチを作成して名前をつけ、そこで行う（一時ブランチ）</li>
<li>作成したブランチにローカルでコミットし、サーバー上の同じ名前のブランチにも定期的に作業内容をpushする</li>
<li>フィードバックや助言が欲しい時、ブランチをマージしてもよいと思ったときは、 pull request を作成する</li>
<li>他の誰かがレビューをして機能にOKを出してくれたら、あなたはコードをmasterへマージすることができる（プレビュー前のマージが発生しない→ルールとして強制）</li>
<li>マージをしてmasterへpushしたら、直ちにデプロイをする</li>
</ul>
<h3>参考リンク</h4>
<p><a href="http://scottchacon.com/2011/08/31/github-flow.html" target="_blank">github flow（英語）</a><br />
<a href="https://gist.github.com/Gab-km/3705015" target="_blank">github flow（日本語訳）</a></p>


git flowとgithub flow

<h2>そもそもどういうサービス？</h3>
<p>githubはリポジトリ（プロジェクトの意味）を公開するためのwebサービスです。<br />
開発チームがgitを使って開発を行うために、必ずしもgithubに登録することがありません。<br />
あくまで公開（リリース）に向けてチーム（もちろん個人も）作業用のものになります。<br />
※公開したくないもの（private repo）でもgithubで管理できますが、有料になります。</p>
<p>今回は、自分の作品を公開するためのgithubを利用した手順を紹介したいと思います。</p>
<h2>githubに登録する前</h3>
<h3>gitがインストールされてるかを確認</h4>
<p>Macなら、ターミナルから </p>
<p></p>

		<div id="crayon-64953fd596976585381177" 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;">
which 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-64953fd596976585381177-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-64953fd596976585381177-1"><span class="crayon-e">which </span><span class="crayon-i">git</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p> </p>
<p>のコマンドを実行し確認できます。</p>
<h3>gitをインストール</h4>
<p>まだインストールしていない場合は、<a href="http://git-scm.com/" target="_blank">gitの公式サイト</a>からgitをダウンロードしてインストールすることができます。</p>
<h3>gitの初期設定</h4>
<p><a href="/programmer/git%E5%86%8D%E5%85%A5%E9%96%80.html" target="_blank">ここ</a>を参考してください。</p>
<h2>ユーザー登録</h3>
<p><a href="http://github.com" target="_blank">github</a>にアクセスして、ログインしていない状態なら、登録画面がでてくるので、フローに従って登録してください。</p>
<h2>SSH公開鍵登録</h3>
<p>githubにSSH公開鍵を登録しはじめて、SSHでgithubで管理するリポジトリを取得できるようになります。<br />
また作業を進み、ローカルのものをgithubにpushするため、やはりSSH公開鍵の登録が避けられません。</p>
<p>公開鍵の作成とアップロードは、<a href="https://help.github.com/articles/generating-ssh-keys" target="_blank">ここ</a>を参考してください。</p>
<h2>githubでリポジトリを作成</h3>
<p>公開するのはこのリポジトリになります。まずgithubの上で作成しなければなりません。</p>
<p>githubの画面（ログインしている状態で）の右上にから「+」のボタンをクリックして「New Repository」を選択し、容易に新しいリポジトリを作成できます。</p>
<h2>作成したリポジトリをローカルにcloneする</h3>
<p>実際にファイル追加・編集作業に使うのはローカルのリポジトリになります。<br />
cloneするのに、下記コマンドを実行すればいいと思います。</p>
<p></p>

		<div id="crayon-64953fd59697a502712875" 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 git@github.com:youraccount/the_new_repo.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-64953fd59697a502712875-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-64953fd59697a502712875-1"><span class="crayon-e">git </span><span class="crayon-r">clone</span><span class="crayon-h"> </span><span class="crayon-i">git</span><span class="crayon-sy">@</span><span class="crayon-i">github</span><span class="crayon-sy">.</span><span class="crayon-i">com</span><span class="crayon-sy">:</span><span class="crayon-i">youraccount</span>/<span class="crayon-i">the_new_repo</span><span class="crayon-sy">.</span><span class="crayon-i">git</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p> </p>
<h2>ローカルでの作業を進む</h3>
<p>ファイルを追加し、gitの管理上に置きます。（git add）<br />
ある程度作業が進んだら、ローカルでcommitします。（git commit）</p>
<p>gitのコマンドについて、<a href="/programmer/git%E5%86%8D%E5%85%A5%E9%96%80.html" target="_blank">ここ</a>を参考してください。</p>
<p>または、「git cheatsheet」で検索してみてください。</p>
<h2>githubに、ローカルの作業をpushする</h3>
<p>ローカルの作業をgithubにあげるため、 下記コマンドを実行します。</p>

		<div id="crayon-64953fd59697c718448901" 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 push origin current_branch</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-64953fd59697c718448901-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-64953fd59697c718448901-1"><span class="crayon-e">git </span><span class="crayon-e">push </span><span class="crayon-e">origin </span><span class="crayon-i">current_branch</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p> </p>
<p>※　masterブランチにのpushは、避けたほうが無難かと思います。<br />
※　pushが成功するなら、この時点でもうgithubで見えるようになります（正式なものではなく、あくまで別ブランチ）。</p>
<h2>githubでpull requestを実行</h3>
<p><a href="https://help.github.com/articles/using-pull-requests" target="_blank">pull request</a>は、リポジトリの管理者に、「自分のソースコードを確認して使ってください」というリクエストです。<br />
当たり前なことですが、このリクエストはgithubでしか行えません。<br />
新しいpushがあるとき、「pull request」のボタンが自動的に現れます。</p>
<h2>githubでブランチをmergeする</h3>
<p>自分が管理者なので、「pull request」があったらページに表示されます。<br />
ソースコードの差分が確認できたら、それを最新のバージョンとして取り込むことができます。<br />
「merge pull request」のボタンを押せば、「pull request」されてきたものが正式なもの（masterブランチ）になります。</p>
<h2>おまけ</h3>
<p>Macなら、「github for Mac」という公式アプリがあります。<br />
使い方は<a href="http://kuroigamen.com/48" target="_blank">ここ</a>を参考してください。</p>

【自分の作品を公開するため】github入門

<p>バーコードを生成してくれるというコアなニーズに答えてくれるjQueryプラグインを発見したので</p>
<p>ジェネレーターを作ってみた。</p>
<p><a href="http://barcode-coder.com/en/barcode-jquery-plugin-201.html" target="_blank">http://barcode-coder.com/en/barcode-jquery-plugin-201.html</a></p>
<p>&nbsp;</p>
<p><a class="demo" href="/demo/hoshino/50/">demo</a></p>
<p>&nbsp;</p>
<p>ジャンコード(?)のようなコードとバーコード自体の大きさを入力後</p>
<p>エンコードのようなタイプが幾つかあるようで、選択して出力ボタンを押せばバーコードが生成される。</p>
<p>&nbsp;</p>
<p>基本的には</p>

		<div id="crayon-64953fd5967a5409966642" 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;">
$("#bcTarget").barcode("1234567890128", "ean13",{barWidth:2, barHeight:30});</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-64953fd5967a5409966642-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-64953fd5967a5409966642-1"><span class="crayon-sy">$</span><span class="crayon-sy">(</span><span class="crayon-s">"#bcTarget"</span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-e">barcode</span><span class="crayon-sy">(</span><span class="crayon-s">"1234567890128"</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-s">"ean13"</span><span class="crayon-sy">,</span><span class="crayon-sy">{</span><span class="crayon-i">barWidth</span><span class="crayon-sy">:</span><span class="crayon-cn">2</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-i">barHeight</span><span class="crayon-sy">:</span><span class="crayon-cn">30</span><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>&nbsp;</p>
<p>実はある案件でISBNコードからバーコードを生成できないかという依頼があり探していたのだが、</p>
<p>こちらのプラグインはPHPやJAVAのライブラリも公開している。</p>
<p><a href="http://barcode-coder.com/en/barcode-source-list-200.html" target="_blank">http://barcode-coder.com/en/barcode-source-list-200.html</a></p>
<p>&nbsp;</p>

バーコードを生成してくれるjQueryプラグイン

<p>csvファイルをアップロードして、中身のデータをデータベースに挿入する。</p>
<p>しかし、全部のデータを挿入するのではなくて、必要な項目だけを取ってデータベースに入れる。</p>
<p>まず、csvファイルをアップロードして、ある場所にファイルを保存する。</p>
<p>次はデータを配列に入れる。</p>
<p>配列に入っているデータからどこの項目をデータベースに入れるかを決めて、挿入する。</p>
<p>sprintf を利用して書きます。</p>
<p></p>

		<div id="crayon-64953fd5965b0732000193" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover wrap" style=" margin-top: 12px; margin-bottom: 12px; font-size: 13px !important; line-height: 18px !important;">
		
			<div class="crayon-toolbar" data-settings=" mouseover overlay hide delay" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><span class="crayon-title">php</span>
			<div class="crayon-tools" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><div class="crayon-button crayon-nums-button" title="Toggle Line Numbers"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-plain-button" title="Toggle Plain Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-copy-button" title="Copy"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-popup-button" title="Open Code In New Window"><div class="crayon-button-icon"></div></div></div></div>
			<div class="crayon-info" style="min-height: 19.5px !important; line-height: 19.5px !important;"></div>
			<div class="crayon-plain-wrap"><textarea  class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 13px !important; line-height: 18px !important;">
$sql = sprintf("INSERT INTO testingcsv (test1,test2,test3) VALUES('%d','%s','%s');",$csv_array[0],$csv_array[1],$csv_array[2]);</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-64953fd5965b0732000193-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-64953fd5965b0732000193-1"><span class="crayon-sy">$</span><span class="crayon-i">sql</span><span class="crayon-h"> </span>=<span class="crayon-h"> </span><span class="crayon-e">sprintf</span><span class="crayon-sy">(</span><span class="crayon-s">"INSERT INTO testingcsv (test1,test2,test3) VALUES('%d','%s','%s');"</span><span class="crayon-sy">,</span><span class="crayon-sy">$</span><span class="crayon-i">csv_array</span><span class="crayon-sy">[</span><span class="crayon-cn">0</span><span class="crayon-sy">]</span><span class="crayon-sy">,</span><span class="crayon-sy">$</span><span class="crayon-i">csv_array</span><span class="crayon-sy">[</span><span class="crayon-cn">1</span><span class="crayon-sy">]</span><span class="crayon-sy">,</span><span class="crayon-sy">$</span><span class="crayon-i">csv_array</span><span class="crayon-sy">[</span><span class="crayon-cn">2</span><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>sprintf の形式は</p>
<p></p>

		<div id="crayon-64953fd5965b4406158772" 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;">
int sprintf ( string $format [, mixed $args [, mixed $... ]] )</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-64953fd5965b4406158772-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-64953fd5965b4406158772-1"><span class="crayon-t">int</span><span class="crayon-h"> </span><span class="crayon-e">sprintf</span><span class="crayon-h"> </span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-t">string</span><span class="crayon-h"> </span><span class="crayon-sy">$</span><span class="crayon-i">format</span><span class="crayon-h"> </span><span class="crayon-sy">[</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-i">mixed</span><span class="crayon-h"> </span><span class="crayon-sy">$</span><span class="crayon-i">args</span><span class="crayon-h"> </span><span class="crayon-sy">[</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-i">mixed</span><span class="crayon-h"> </span><span class="crayon-sy">$</span><span class="crayon-sy">.</span><span class="crayon-sy">.</span><span class="crayon-sy">.</span><span class="crayon-h"> </span><span class="crayon-sy">]</span><span class="crayon-sy">]</span><span class="crayon-h"> </span><span class="crayon-sy">)</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p> </p>
<p>型指定子として指定できる値をまとめました。</p>
<table>
<tr>
<td>b</td>
<td>引数を整数として扱い、バイナリの数値として表現します。</td>
</tr>
<tr>
<td>c</td>
<td>引数を整数として扱い、その ASCII 値の文字として表現します。</td>
</tr>
<tr>
<td>d</td>
<td>引数を整数として扱い、 10 進数として表現します。</td>
</tr>
<tr>
<td>e</td>
<td>引数を科学記法として扱います (例 1.2e+2)。精度の指定子は、PHP 5.2.1<br />
                     以降では小数点以下の桁数を表します。</td>
</tr>
<tr>
<td>u</td>
<td>引数を整数として扱い、符号無しの 10 進数として表現します。</td>
</tr>
<tr>
<td>f</td>
<td>引数を double として扱い、浮動小数点数として表現します。</td>
</tr>
<tr>
<td>F</td>
<td>引数を float として扱い、浮動小数点数として表現します。</td>
</tr>
<tr>
<td>o</td>
<td>引数を整数として扱い、 8 進数として表現します。</td>
</tr>
<tr>
<td>s</td>
<td>引数を文字列として扱い、表現します。</td>
</tr>
<tr>
<td>x</td>
<td>引数を整数として扱い、16 進数として(小文字で)表現します。</td>
</tr>
<tr>
<td>X</td>
<td>引数を整数として扱い、16 進数として(大文字で)表現します。</td>
</tr>
</table>
<p>例えば：以下のように書きます。</p>
<p></p>

		<div id="crayon-64953fd5965b6015315011" 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;">
%d
%s
%x</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-64953fd5965b6015315011-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd5965b6015315011-2">2</div><div class="crayon-num" data-line="crayon-64953fd5965b6015315011-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd5965b6015315011-4">4</div><div class="crayon-num" data-line="crayon-64953fd5965b6015315011-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-64953fd5965b6015315011-1"><span class="crayon-ta">%</span><span class="crayon-i">d</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd5965b6015315011-2">&nbsp;</div><div class="crayon-line" id="crayon-64953fd5965b6015315011-3"><span class="crayon-ta">%</span><span class="crayon-i">s</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd5965b6015315011-4">&nbsp;</div><div class="crayon-line" id="crayon-64953fd5965b6015315011-5"><span class="crayon-sy">%</span><span class="crayon-i">x</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p> </p>

csvアップロードとsprintf

Fancyboxのようにサムネイルから飛び出してくるようなjQueryを組んでみる

<p>営業の方ならきっと気持ちが分かるはず！</p>
<p>アポイントの時間をメール等で調整をするときに、空き時間を見て、移動時間を計算して1行ずつ文字に起こしていくという作業をするかと思います。</p>
<p>ちょうど、下記の文章のような形に記載をすると思います。</p>
<p>&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8211;</p>
<p>◯/◯(火) 00:00-00:00</p>
<p>◯/◯(水) 00:00-00:00</p>
<p>&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8211;</p>
<p>Googleカレンダーなどスケジューラーはグラフィカルになっているので、</p>
<p>途端にメールになると空き時間を文章化しなくてはならず、煩わしさをずっと感じておりました。</p>
<p>そんなことを何年間も思っていたところ、つい先日、このサービスを知りました！</p>
<p><a href="https://cu-hacker.com/">Cu-hacker | アポイント調整を10倍速くするツール「クウハッカー」</a></p>
<p>&nbsp;</p>
<p>アポイント調整を10倍速くするという挑戦的なキャッチフレーズがタイトルに入っておりますが、使ってみた後はまんざらでもありません！</p>
<h2>使い方</h3>
<p><a href="/uploads-archive/2013/12/screenshot.png"><img decoding="async" loading="lazy" class="alignnone size-medium wp-image-3853" alt="screenshot" src="/uploads-archive/2013/12/screenshot-300x268.png" width="300" height="268" srcset="/uploads-archive/2013/12/screenshot-300x268.png 300w, /uploads-archive/2013/12/screenshot-228x204.png 228w, /uploads-archive/2013/12/screenshot.png 1013w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>
<p>使い方は簡単です。</p>
<p><a href="https://cu-hacker.com" target="_blank">トップページ</a>にアクセスするとGoogleアカウントでログインを促されます。</p>
<p>もちろん、GoogleAppsアカウントでも対応しております。</p>
<p><a href="/uploads-archive/2013/12/5e5c389856d465b1f0d26d6392fcb6a9.jpg"><img decoding="async" loading="lazy" class="alignnone size-medium wp-image-3858" alt="Cu-hacker___カレンダー-3" src="/uploads-archive/2013/12/5e5c389856d465b1f0d26d6392fcb6a9-300x157.jpg" width="300" height="157" srcset="/uploads-archive/2013/12/5e5c389856d465b1f0d26d6392fcb6a9-300x157.jpg 300w, /uploads-archive/2013/12/5e5c389856d465b1f0d26d6392fcb6a9-1024x538.jpg 1024w, /uploads-archive/2013/12/5e5c389856d465b1f0d26d6392fcb6a9-228x119.jpg 228w, /uploads-archive/2013/12/5e5c389856d465b1f0d26d6392fcb6a9.jpg 1353w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>
<p>ログインをするとGoogleカレンダーライクの画面が表示されます。</p>
<p>それでは早速、その真価を試しましょう。</p>
<p><a href="/uploads-archive/2013/12/607e955f64969a9296ebed93db7ba0a3.jpg"><img decoding="async" loading="lazy" class="alignnone size-medium wp-image-3866" alt="Cu-hacker___カレンダー-4-2" src="/uploads-archive/2013/12/607e955f64969a9296ebed93db7ba0a3-300x155.jpg" width="300" height="155" srcset="/uploads-archive/2013/12/607e955f64969a9296ebed93db7ba0a3-300x155.jpg 300w, /uploads-archive/2013/12/607e955f64969a9296ebed93db7ba0a3-1024x529.jpg 1024w, /uploads-archive/2013/12/607e955f64969a9296ebed93db7ba0a3-228x117.jpg 228w, /uploads-archive/2013/12/607e955f64969a9296ebed93db7ba0a3.jpg 1351w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>
<p>適当な時間帯をGoogleカレンダーのようにドラッグして伸ばします。</p>
<p>すると、左上のテキスト欄に日時が範囲が指定された状態で反映されます。</p>
<p>これで、あとはメールにコピペするだけで終了です。</p>
<p>すごく簡単です。</p>
<p><img decoding="async" loading="lazy" class="alignnone size-medium wp-image-3857" alt="Cu-hacker___カレンダー-2" src="/uploads-archive/2013/12/9dcba189f8e6a5e80b71dc1e87f8365a-300x199.jpg" width="300" height="199" srcset="/uploads-archive/2013/12/9dcba189f8e6a5e80b71dc1e87f8365a-300x199.jpg 300w, /uploads-archive/2013/12/9dcba189f8e6a5e80b71dc1e87f8365a-1024x680.jpg 1024w, /uploads-archive/2013/12/9dcba189f8e6a5e80b71dc1e87f8365a-228x151.jpg 228w, /uploads-archive/2013/12/9dcba189f8e6a5e80b71dc1e87f8365a.jpg 1353w" sizes="(max-width: 300px) 100vw, 300px" /></p>
<p>設定画面では、ビジネスタイムの指定などが細かく出来ます。</p>
<p><a href="/uploads-archive/2013/12/b215bbdb4fd107b2e47fc103f32888c1.jpg"><img decoding="async" loading="lazy" class="alignnone size-medium wp-image-3867" alt="Cu-hacker___カレンダー-5-2" src="/uploads-archive/2013/12/b215bbdb4fd107b2e47fc103f32888c1-300x160.jpg" width="300" height="160" srcset="/uploads-archive/2013/12/b215bbdb4fd107b2e47fc103f32888c1-300x160.jpg 300w, /uploads-archive/2013/12/b215bbdb4fd107b2e47fc103f32888c1-1024x549.jpg 1024w, /uploads-archive/2013/12/b215bbdb4fd107b2e47fc103f32888c1-228x122.jpg 228w, /uploads-archive/2013/12/b215bbdb4fd107b2e47fc103f32888c1.jpg 1348w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>
<p>終日を選択すると、先ほど、指定したビジネスタイムが反映されます。</p>
<p>かゆいところに手が届く仕様になっております〜。素晴らしいです。</p>
<p>そして、テキストのところをご覧頂くと分かるのですが、短縮URLが発行されます。</p>
<p><a href="/uploads-archive/2013/12/57e64c63c0fc9c3a99817873d032a7c0.jpg"><img decoding="async" loading="lazy" class="alignnone size-medium wp-image-3861" alt="Cu-hacker___Yuji_Mezakiさんからの提案日程-4" src="/uploads-archive/2013/12/57e64c63c0fc9c3a99817873d032a7c0-300x149.jpg" width="300" height="149" srcset="/uploads-archive/2013/12/57e64c63c0fc9c3a99817873d032a7c0-300x149.jpg 300w, /uploads-archive/2013/12/57e64c63c0fc9c3a99817873d032a7c0-1024x508.jpg 1024w, /uploads-archive/2013/12/57e64c63c0fc9c3a99817873d032a7c0-228x113.jpg 228w, /uploads-archive/2013/12/57e64c63c0fc9c3a99817873d032a7c0.jpg 1352w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>
<p>こちらは、相手に送るためのもので短縮URLにアクセスをすると、候補日をFIXさせるフローが出来ております。</p>
<p>相手もGoogleカレンダーを利用していることを知っている場合は、更に、調整が簡単な仕様になっております。</p>
<p>相手がGoogleカレンダーを利用しているか分からない場合は、混乱を招く恐れがあるので、短縮URLは削除するのが無難かと思います。</p>
<h2>まとめ</h3>
<p>こんなの待ってた！</p>


Googleカレンダーユーザー必見！スケジュール調整が劇的に簡単になる「Cu-hacker」

<p>パララックスのサイトが少し前に流行り、今ではいろんなサイトで見られるようになり一般的になってきたような感じがする昨今ですが、簡単にパララックスっぽい動きをつけられることを今更ながら発見しましたので、試してみました。<br />
&nbsp;<br />
早速ですが、デモをご覧下さい。</p>
<p>&nbsp;</p>
<p><a href="/demo/abe/37/" target="_blank" class="demo">DEMO</a></p>
<p>どうでしょうか？<br />
パララックスっぽい感じがでてますでしょうか？？</p>
<h2>background-attachmentの実装</h3>
<p>設定自体はとても簡単で、<br />
背景画像を設定した箇所に、</p>
<p></p>

		<div id="crayon-64953fd595eb1667674691" 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">CSS</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;">
background-attachment: fixed;</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-64953fd595eb1667674691-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-64953fd595eb1667674691-1"><span class="crayon-e ">background-attachment</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i ">fixed</span><span class="crayon-sy">;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p> </p>
<p>と追加しているだけです。</p>
<p>要は、背景画像の位置を固定にしているため、<br />
背景画像を設定した要素がスクロールで動いても、<br />
背景画像は動かないため、このような見え方になっています。</p>
<p>ちなみに背景画像の位置は、ブラウザを起点に位置されます。</p>
<p>対応ブラウザはIE8からですので、<br />
クライアント案件でも結構使えると思います。</p>
<p>なにより簡単にできるのでいいですね！写真とコンテンツの組み合わせ次第でいいサイトが出来上がるんではないでしょうか？</p>
<p>今度はもっと上級なパララックスも試してみたいと思います！</p>

background-attachmentでパララックスもどきの動きをつけてみる

Webフォント×CSS3でロングシャドウアイコンを作ってみよう

<p>Facebook上のウォールにプログラムからGraph APIを使って画像を投稿する時</p>
<div>ちょっとかっこよく見せるためのテクニックをご紹介。</div>
<div></div>
<div>こちらはよくあるパターン</div>
<div><a href="/uploads-archive/2013/12/ed91c375302043dc5679b77b8dce26f0.png"><img decoding="async" loading="lazy" class="size-full wp-image-3811 aligncenter" alt="スクリーンショット 2013-12-10 16.04.08" src="/uploads-archive/2013/12/ed91c375302043dc5679b77b8dce26f0.png" width="513" height="404" srcset="/uploads-archive/2013/12/ed91c375302043dc5679b77b8dce26f0.png 513w, /uploads-archive/2013/12/ed91c375302043dc5679b77b8dce26f0-300x236.png 300w, /uploads-archive/2013/12/ed91c375302043dc5679b77b8dce26f0-228x179.png 228w" sizes="(max-width: 513px) 100vw, 513px" /></a></div>
<div></div>
<div>今回のものは</div>
<div> <a href="/uploads-archive/2013/12/d48ad5368c81ec17cbc00cfc8af24a8a.png"><img decoding="async" loading="lazy" class="size-full wp-image-3812 aligncenter" alt="スクリーンショット 2013-12-10 16.02.10" src="/uploads-archive/2013/12/d48ad5368c81ec17cbc00cfc8af24a8a.png" width="513" height="281" srcset="/uploads-archive/2013/12/d48ad5368c81ec17cbc00cfc8af24a8a.png 513w, /uploads-archive/2013/12/d48ad5368c81ec17cbc00cfc8af24a8a-300x164.png 300w, /uploads-archive/2013/12/d48ad5368c81ec17cbc00cfc8af24a8a-228x124.png 228w" sizes="(max-width: 513px) 100vw, 513px" /></a></div>
<div>こんな感じ。</div>
<div></div>
<div>あまり変わらないが、コンパクトにまとまっていて情報がわかりやすいのと、</div>
<div>あとは大きな理由としてAPI経由での投稿でユーザーが入力した内容以外で定型文を入れることが原則禁止されているため</div>
<div>そのような時の対処法としても便利な方法だ。</div>
<div></div>
<div>方法は、画像を投稿させるのではなく、指定の画像をOGPで指定した動的なダミーページを用意して、そのURLをシェアするイメージ。</div>
<div></div>
<div>上記の例では</div>
<div>


		<div id="crayon-64953fd595882277741596" 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;!doctype html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;meta charset="UTF-8"&gt;
&lt;meta property="og:title" content="ソチオリンピック日本代表を応援しよう！" /&gt;
&lt;meta property="og:type" content="article" /&gt;
&lt;meta property="og:description" content="ソチオリンピック日本代表を応援しよう！ソチオリンピック日本代表を応援しよう！" /&gt;
&lt;meta property="og:image" content="http://img.hoge.com/1.png" /&gt;
&lt;meta property="og:site_name" content="ソチオリンピック日本代表を応援しよう！" /&gt;

&lt;meta name="keywords" content="ソチオリンピック、オリンピック、ソチ" /&gt;
&lt;meta name="description" content="ソチオリンピック日本代表を応援しよう！ソチオリンピック日本代表を応援しよう！" /&gt;
&lt;title&gt;ソチオリンピック日本代表を応援しよう！&lt;/title&gt;

&lt;/head&gt;
&lt;body　onload="window.location.href='/';"&gt;
&lt;/body&gt;
&lt;/html&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-64953fd595882277741596-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd595882277741596-2">2</div><div class="crayon-num" data-line="crayon-64953fd595882277741596-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd595882277741596-4">4</div><div class="crayon-num" data-line="crayon-64953fd595882277741596-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd595882277741596-6">6</div><div class="crayon-num" data-line="crayon-64953fd595882277741596-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd595882277741596-8">8</div><div class="crayon-num" data-line="crayon-64953fd595882277741596-9">9</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd595882277741596-10">10</div><div class="crayon-num" data-line="crayon-64953fd595882277741596-11">11</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd595882277741596-12">12</div><div class="crayon-num" data-line="crayon-64953fd595882277741596-13">13</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd595882277741596-14">14</div><div class="crayon-num" data-line="crayon-64953fd595882277741596-15">15</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd595882277741596-16">16</div><div class="crayon-num" data-line="crayon-64953fd595882277741596-17">17</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd595882277741596-18">18</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-64953fd595882277741596-1"><span class="crayon-n">&lt;!doctype html&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd595882277741596-2"><span class="crayon-r ">&lt;html&gt;</span></div><div class="crayon-line" id="crayon-64953fd595882277741596-3"><span class="crayon-r ">&lt;head&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd595882277741596-4"><span class="crayon-r ">&lt;meta </span><span class="crayon-e ">charset</span>=<span class="crayon-s ">"UTF-8"</span><span class="crayon-r ">&gt;</span></div><div class="crayon-line" id="crayon-64953fd595882277741596-5"><span class="crayon-r ">&lt;meta </span><span class="crayon-e ">property</span>=<span class="crayon-s ">"og:title"</span><span class="crayon-h"> </span><span class="crayon-e ">content</span>=<span class="crayon-s ">"ソチオリンピック日本代表を応援しよう！"</span><span class="crayon-r "> /&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd595882277741596-6"><span class="crayon-r ">&lt;meta </span><span class="crayon-e ">property</span>=<span class="crayon-s ">"og:type"</span><span class="crayon-h"> </span><span class="crayon-e ">content</span>=<span class="crayon-s ">"article"</span><span class="crayon-r "> /&gt;</span></div><div class="crayon-line" id="crayon-64953fd595882277741596-7"><span class="crayon-r ">&lt;meta </span><span class="crayon-e ">property</span>=<span class="crayon-s ">"og:description"</span><span class="crayon-h"> </span><span class="crayon-e ">content</span>=<span class="crayon-s ">"ソチオリンピック日本代表を応援しよう！ソチオリンピック日本代表を応援しよう！"</span><span class="crayon-r "> /&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd595882277741596-8"><span class="crayon-r ">&lt;meta </span><span class="crayon-e ">property</span>=<span class="crayon-s ">"og:image"</span><span class="crayon-h"> </span><span class="crayon-e ">content</span>=<span class="crayon-s ">"http://img.hoge.com/1.png"</span><span class="crayon-r "> /&gt;</span></div><div class="crayon-line" id="crayon-64953fd595882277741596-9"><span class="crayon-r ">&lt;meta </span><span class="crayon-e ">property</span>=<span class="crayon-s ">"og:site_name"</span><span class="crayon-h"> </span><span class="crayon-e ">content</span>=<span class="crayon-s ">"ソチオリンピック日本代表を応援しよう！"</span><span class="crayon-r "> /&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd595882277741596-10">&nbsp;</div><div class="crayon-line" id="crayon-64953fd595882277741596-11"><span class="crayon-r ">&lt;meta </span><span class="crayon-e ">name</span>=<span class="crayon-s ">"keywords"</span><span class="crayon-h"> </span><span class="crayon-e ">content</span>=<span class="crayon-s ">"ソチオリンピック、オリンピック、ソチ"</span><span class="crayon-r "> /&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd595882277741596-12"><span class="crayon-r ">&lt;meta </span><span class="crayon-e ">name</span>=<span class="crayon-s ">"description"</span><span class="crayon-h"> </span><span class="crayon-e ">content</span>=<span class="crayon-s ">"ソチオリンピック日本代表を応援しよう！ソチオリンピック日本代表を応援しよう！"</span><span class="crayon-r "> /&gt;</span></div><div class="crayon-line" id="crayon-64953fd595882277741596-13"><span class="crayon-r ">&lt;title&gt;</span><span class="crayon-i ">ソチオリンピック日本代表を応援しよう！</span><span class="crayon-r ">&lt;/title&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd595882277741596-14">&nbsp;</div><div class="crayon-line" id="crayon-64953fd595882277741596-15"><span class="crayon-r ">&lt;/head&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd595882277741596-16"><span class="crayon-r ">&lt;body　onload="window.location.href='/';"&gt;</span></div><div class="crayon-line" id="crayon-64953fd595882277741596-17"><span class="crayon-r ">&lt;/body&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd595882277741596-18"><span class="crayon-r ">&lt;/html&gt;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>


</div>
<div>のようなHTMLを動的に生成し、ユーザーごとの画像と定型文を記載している。</div>
<div>こちらは動的なページなので、例えばhttp://hoge.com/?id=xxx</div>
<div>などとなってしまい、直接アクセスされるとよくわからないページが表示されてしまう。</div>
<div>それを回避するために、16行目のように</div>
<div>


		<div id="crayon-64953fd595886097209395" 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;body　onload="window.location.href='/';"&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-64953fd595886097209395-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-64953fd595886097209395-1"><span class="crayon-r ">&lt;body　onload="window.location.href='/';"&gt;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>


</div>
<div>と、ここではトッページにリダイレクトさせている。</div>
<div></div>
<div>余談だが、スマホを重視する場合投稿する画像のサイズは</div>
<div>468 x 245がベストらしい。</div>
<p>&nbsp;</p>

【Facebook】Graph APIでかっこ良く画像を投稿する方法

<p>先日のお仕事でつまづくことがありましたので備忘録までに共有です。</p>
<p>とあるサイトをローンチする際、Facebookのフィードにいいねが流れてこないということで分かりました。</p>
<p>現在、fb:app_idやfb:adminsが設置されていないサイトでのいいねボタンはユーザのタイムラインやアクティビティログに表示されません。</p>
<p>それはつまり、他のユーザーの目に触れることがなく、いいねボタンはソーシャル要素がない単なるいいねカウンターと化します。</p>
<p>&nbsp;</p>
<p>詳しくは、以下のブログで詳細と見解が記載されています。</p>
<p><a href="http://snowadays.jp/2012/09/788" target="_blank">「fb:app_id」とか「fb:admins」って何のために必要なの？（OGP的な意味で）</a></p>
<p>&nbsp;</p>
<blockquote><p>ここからはあくまで一説でしかありませんが、どうやらFacebookは、世の中のいいね！ボタンの管理者を把握しておきたいようです。</p>
<p>どういうことかと言うと、海外ではこのいいね！ボタン、結構裁判沙汰になったりとかいろいろトラブルも起きてます。「いいね！詐欺」みたいな。<br />
で、いわゆる「不正ないいね！ボタン」とでもいいましょうか、そういうやつの監視に苦労してるわけです。<br />
例えば、外部のアフィサイトにプラグインのいいね！ボタンがあって、スクリプト組んでそのボタンを押せばポイントがもらえる、とか。<br />
そんなの簡単に作れちゃうわけで。</p>
<p>そういう輩の対策として、Facebookが考えた作戦が、この「Facebookアプリ必須」作戦。<br />
現状、Facebookアプリを作成するにはアカウントの認証作業が必要になります。<br />
認証作業は、クレジットカードもしくは携帯電話が必要です。</p></blockquote>
<p>上記ブログから引用させて頂きましたが、こちらの見解がしっくりと来ました。</p>
<p>&nbsp;</p>
<p>Facebookのデバッカーを通して、エラーが出なければ問題ありません。</p>
<p><a href="https://developers.facebook.com/tools/debug" target="_blank">https://developers.facebook.com/tools/debug</a></p>
<p>&nbsp;</p>


いいねボタンにはfb:app_idやfb:adminsが必須

<p>今回紹介するのは、<br />
wordpressプラグイン「Meta Slider」というもので、<br />
要はスライダーのプラグインなんですが、有名なプラグインのスライダー４つから選べるという代物。</p>
<p>その4つとは、</p>
<p><strong>・Nivo Slider (レスポンシブ対応, 16のエフェクト, 4つのテーマ)</strong><br />
<strong> ・Coin Slider (4のエフェクト)</strong><br />
<strong> ・Flex Slider 2 (レスポンシブ対応, 2のエフェクト, カルーセルモード)</strong><br />
<strong> ・Responsive Slides (レスポンシブ対応, フェイドのみ, 軽量！)</strong></p>
<p>です。</p>
<p>さらにいいのは、<br />
管理画面上で選べて、細かい設定も可能です。<br />
画像も管理画面でアップロードできます。</p>
<p><img decoding="async" loading="lazy" class="alignnone size-large wp-image-3797" alt="Meta Slider Lite ‹ e-sign — WordPress" src="/uploads-archive/2013/12/b6417756b20df846916fd39070d7fb41-1024x903.jpg" width="640" height="563" srcset="/uploads-archive/2013/12/b6417756b20df846916fd39070d7fb41-1024x903.jpg 1024w, /uploads-archive/2013/12/b6417756b20df846916fd39070d7fb41-300x264.jpg 300w, /uploads-archive/2013/12/b6417756b20df846916fd39070d7fb41-228x201.jpg 228w" sizes="(max-width: 640px) 100vw, 640px" /></p>
<p>表示の設定も簡単で、<br />
ショートコードまたは、テンプレートのタグがあります。<br />
つまり、テーマでも固定ページでもブログでも使えるということになります。</p>
<h2>Meta Sliderのインストール・設定</h3>
<p><strong>wordpressの管理画面　＞　プラグイン　＞　新規追加　＞　「Meta Slider」検索</strong></p>
<p>でOK！</p>
<p>プラグインのインストールして、有効化すると、<br />
サイドメニューに「Meta Slider Lite」の項目が出るので、<br />
そこから設定できます。</p>
<p>ちなみに、これは無料版と有料版があり、<br />
無料版は機能が制限されいていますが、<br />
普通に使用する程度であれば十分かと思います。</p>
<p>管理画面も使いやすい感じなので、<br />
HTML等を知らないクライアントでも写真を差し替えたり、<br />
設定を変更したりできるので、なかなか良いプラグインだと思います。</p>
<p><a class="link" href="http://wordpress.org/plugins/ml-slider/" target="_blank">Meta Slider</a></p>


スライダーが４つも！wordpressプラグイン「Meta Slider」

<p>urlの最後のidを取得して、スライドショーを始める位置を指定する方法を紹介します。</p>
<p>今回はスライドショーに「bxslider」を利用しています。</p>
<p>一覧ページと詳細ページのつながりの内容</p>
<p>①　商品一覧ページがあります。<br />
②　詳細ページは商品一つ一つのページごとにスライドしてあります。<br />
③　詳細ページにいく場合、一覧ページからクリックされた商品の詳細を表示する<br />
④　また、スライドは通常通り動く。</p>
<p>上記のような流れで実装したい！</p>
<p>今回初めて使ったのは「location.hash」です。</p>
<p>「location.hash」は一覧ページからidで指定した値を取得します。</p>
<p>一覧ページからクリックした場合のurlは</p>
<p></p>

		<div id="crayon-64953fd59569b522526158" 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;">
index.html#product01　　// #からの文字を取得します。</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-64953fd59569b522526158-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-64953fd59569b522526158-1"><span class="crayon-i">index</span><span class="crayon-sy">.</span><span class="crayon-i">html</span><span class="crayon-p">#product01　　// #からの文字を取得します。</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p> </p>
<p></p>

		<div id="crayon-64953fd59569f605822285" 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;">
if (location.hash){
		id = location.hash.replace("#product0","");  //最後の数字を取得しています。

			$('#slider1').bxSlider({
				 	startSlide: id - 1,　//zero based
					infiniteLoop: true,
//  infiniteLoopをtrueにしてループ表示を有効化します。
  				});
	}else{
		$('#slider1').bxSlider();
	}</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-64953fd59569f605822285-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd59569f605822285-2">2</div><div class="crayon-num" data-line="crayon-64953fd59569f605822285-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd59569f605822285-4">4</div><div class="crayon-num" data-line="crayon-64953fd59569f605822285-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd59569f605822285-6">6</div><div class="crayon-num" data-line="crayon-64953fd59569f605822285-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd59569f605822285-8">8</div><div class="crayon-num" data-line="crayon-64953fd59569f605822285-9">9</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd59569f605822285-10">10</div><div class="crayon-num" data-line="crayon-64953fd59569f605822285-11">11</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-64953fd59569f605822285-1"><span class="crayon-st">if</span><span class="crayon-h"> </span><span class="crayon-sy">(</span><span class="crayon-i">location</span><span class="crayon-sy">.</span><span class="crayon-i">hash</span><span class="crayon-sy">)</span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd59569f605822285-2"><span class="crayon-h">		</span><span class="crayon-i">id</span><span class="crayon-h"> </span>=<span class="crayon-h"> </span><span class="crayon-i">location</span><span class="crayon-sy">.</span><span class="crayon-i">hash</span><span class="crayon-sy">.</span><span class="crayon-e">replace</span><span class="crayon-sy">(</span><span class="crayon-s">"#product0"</span><span class="crayon-sy">,</span><span class="crayon-s">""</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-c">//最後の数字を取得しています。</span></div><div class="crayon-line" id="crayon-64953fd59569f605822285-3">&nbsp;</div><div class="crayon-line crayon-striped-line" id="crayon-64953fd59569f605822285-4"><span class="crayon-h">			</span><span class="crayon-sy">$</span><span class="crayon-sy">(</span><span class="crayon-s">'#slider1'</span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-e">bxSlider</span><span class="crayon-sy">(</span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-64953fd59569f605822285-5"><span class="crayon-h">				 	</span><span class="crayon-i">startSlide</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i">id</span><span class="crayon-h"> </span>-<span class="crayon-h"> </span><span class="crayon-cn">1</span><span class="crayon-sy">,</span>　<span class="crayon-c">//zero based</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd59569f605822285-6"><span class="crayon-h">					</span><span class="crayon-i">infiniteLoop</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-t">true</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-64953fd59569f605822285-7"><span class="crayon-c">//&nbsp;&nbsp;infiniteLoopをtrueにしてループ表示を有効化します。</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd59569f605822285-8"><span class="crayon-h">&nbsp;&nbsp;				</span><span class="crayon-sy">}</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-64953fd59569f605822285-9"><span class="crayon-h">	</span><span class="crayon-sy">}</span><span class="crayon-st">else</span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd59569f605822285-10"><span class="crayon-h">		</span><span class="crayon-sy">$</span><span class="crayon-sy">(</span><span class="crayon-s">'#slider1'</span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-e">bxSlider</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-64953fd59569f605822285-11"><span class="crayon-h">	</span><span class="crayon-sy">}</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p> </p>

URLを取得してスライドショーの位置を調整する

<p>今回はxargsコマンドによる一括操作を紹介したいと思います。</p>
<h3>あるフォルダ下のファイルを検索し、特定文字列があるところを出力</h4>
<p></p>

		<div id="crayon-64953fd5954ba106189722" 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;">
find /path/to/files -type f -print | xargs grep "search_string"</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-64953fd5954ba106189722-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-64953fd5954ba106189722-1"><span class="crayon-i">find</span><span class="crayon-h"> </span>/<span class="crayon-i">path</span>/<span class="crayon-st">to</span>/<span class="crayon-i">files</span><span class="crayon-h"> </span>-<span class="crayon-i">type</span><span class="crayon-h"> </span><span class="crayon-i">f</span><span class="crayon-h"> </span>-<span class="crayon-i">print</span><span class="crayon-h"> </span><span class="crayon-sy">|</span><span class="crayon-h"> </span><span class="crayon-e">xargs </span><span class="crayon-i">grep</span><span class="crayon-h"> </span><span class="crayon-s">"search_string"</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p> </p>
<h3>あるフォルダ下のファイルを検索し、特定文字列を置換</h4>
<p></p>

		<div id="crayon-64953fd5954be030239999" 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;">
find /path/to/files -name "*.sh" -print | xargs sed -i 's@string_before_replace@string_after_replace@g'</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-64953fd5954be030239999-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-64953fd5954be030239999-1"><span class="crayon-i">find</span><span class="crayon-h"> </span>/<span class="crayon-i">path</span>/<span class="crayon-st">to</span>/<span class="crayon-i">files</span><span class="crayon-h"> </span>-<span class="crayon-i">name</span><span class="crayon-h"> </span><span class="crayon-s">"*.sh"</span><span class="crayon-h"> </span>-<span class="crayon-i">print</span><span class="crayon-h"> </span><span class="crayon-sy">|</span><span class="crayon-h"> </span><span class="crayon-e">xargs </span><span class="crayon-i">sed</span><span class="crayon-h"> </span>-<span class="crayon-i">i</span><span class="crayon-h"> </span><span class="crayon-s">'s@string_before_replace@string_after_replace@g'</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>※置換操作の前に、ファイルのバックアップを取ったほうがより安全でオススメです。</p>
<h3>あるフォルダ下のファイルを検索し、子フォルダだけ権限変更</h4>
<p></p>

		<div id="crayon-64953fd5954c0642220699" 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;">
find /path/to/files -type d -print0 | xargs -0 chmod 777</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-64953fd5954c0642220699-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-64953fd5954c0642220699-1"><span class="crayon-i">find</span><span class="crayon-h"> </span>/<span class="crayon-i">path</span>/<span class="crayon-st">to</span>/<span class="crayon-i">files</span><span class="crayon-h"> </span>-<span class="crayon-i">type</span><span class="crayon-h"> </span><span class="crayon-i">d</span><span class="crayon-h"> </span>-<span class="crayon-i">print0</span><span class="crayon-h"> </span><span class="crayon-sy">|</span><span class="crayon-h"> </span><span class="crayon-i">xargs</span><span class="crayon-h"> </span>-<span class="crayon-cn">0</span><span class="crayon-h"> </span><span class="crayon-i">chmod</span><span class="crayon-h"> </span><span class="crayon-cn">777</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p> </p>
<p>※findコマンドもある程度一括操作ができるようです。</p>

【Linux】知って便利な一括操作コマンド

PHPを手軽に使って、画像のサムネイルを出力する方法

iOS7みたいにクリックでそこからページが飛び出してくるような効果をjQueryで作ってみる

Ajax でデータ送信、受信

<p>今更ながらですが、google fontsについての記事を書くことにしました。</p>
<p>1,2年前ぐらいwebフォントが出現し、モリサワ等の会社もwebフォントを提供していますが、<br />
webフォントを実際のサイトで使用したことはまだありません。</p>
<p>その理由としては有料ということもあると思いますが、そこまでフォントに対してこだわるお客さんがいないといった所でしょうか。。webフォントを読み込むのに時間がかかってユーザビリティが悪いといった懸念もあるように思います。</p>
<p>google fontsは無料かつ商用可で、特に登録もなく利用できるのですが、<br />
こちらは英語しかないためまだ使用に至っていません。</p>
<p>結局の所、今後もしばらくはwebフォントを使う予定はないかもしれません笑</p>
<p>とはいえ、使い方を学んでおくにこしたことはないので、<br />
軽くでは試してみたので、そちらとその流れを紹介したいと思います。</p>
<p><a class="demo" href="/demo/abe/36/" target="_blank">DEMO</a></p>
<h2>Google Fontsを使ってみた</h3>
<p>まずは、<a href="http://www.google.com/fonts" target="_blank">Google Fonts</a>で使いたいフォントを選びます。</p>
<p>&nbsp;</p>
<p><img decoding="async" loading="lazy" class="alignnone size-large wp-image-3728" alt="Google Fonts" src="/uploads-archive/2013/12/Google-Fonts-1024x592.jpg" width="630" height="364" srcset="/uploads-archive/2013/12/Google-Fonts-1024x592.jpg 1024w, /uploads-archive/2013/12/Google-Fonts-300x173.jpg 300w, /uploads-archive/2013/12/Google-Fonts-228x131.jpg 228w, /uploads-archive/2013/12/Google-Fonts.jpg 1206w" sizes="(max-width: 630px) 100vw, 630px" /></p>
<p>&nbsp;</p>
<p>今は全部629種類のフォントがあるようですね。<br />
基本的にはこの画面から、<br />
フォントのカテゴリー（Serif,Sans Serif,Display,Handwriting）やThickness,Slant,Widthを設定して検索できます。</p>
<p>フォントの右下の⇒みたいなマークを押すと、</p>
<p>詳細画面に遷移します。</p>
<h2>webフォントのスクリプトタグをゲット！</h3>
<p>&nbsp;</p>
<p><a href="/uploads-archive/2013/12/Google-Fonts2.jpg"><img decoding="async" loading="lazy" class="alignnone size-large wp-image-3727" alt="Google Fonts2" src="/uploads-archive/2013/12/Google-Fonts2-1024x592.jpg" width="630" height="364" srcset="/uploads-archive/2013/12/Google-Fonts2-1024x592.jpg 1024w, /uploads-archive/2013/12/Google-Fonts2-300x173.jpg 300w, /uploads-archive/2013/12/Google-Fonts2-228x131.jpg 228w, /uploads-archive/2013/12/Google-Fonts2.jpg 1206w" sizes="(max-width: 630px) 100vw, 630px" /></a></p>
<p>右側のストップウォッチみたいものはそのフォントを読み込むのかかる時間を表しているようです。</p>
<p>このページの下に、以下のようなwebフォントを読み込むスクリプトタグがあります。</p>
<p>&nbsp;</p>

		<div id="crayon-64953fd594c5c654787806" 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;link href='http://fonts.googleapis.com/css?family=Wellfleet' rel='stylesheet' type='text/css'&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-64953fd594c5c654787806-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-64953fd594c5c654787806-1"><span class="crayon-r ">&lt;link </span><span class="crayon-e ">href</span>=<span class="crayon-s ">'http://fonts.googleapis.com/css?family=Wellfleet'</span><span class="crayon-h"> </span><span class="crayon-e ">rel</span>=<span class="crayon-s ">'stylesheet'</span><span class="crayon-h"> </span><span class="crayon-e ">type</span>=<span class="crayon-s ">'text/css'</span><span class="crayon-r ">&gt;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>&nbsp;</p>
<p>もうこれでOKです！</p>
<p>&nbsp;</p>
<p>あとはcssで、</p>
<p></p>

		<div id="crayon-64953fd594c60148252762" 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">CSS</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;">
font-family: 'Wellfleet', cursive;</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-64953fd594c60148252762-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-64953fd594c60148252762-1"><span class="crayon-e ">font-family</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-s">'Wellfleet'</span><span class="crayon-i ">,</span><span class="crayon-h"> </span><span class="crayon-i ">cursive</span><span class="crayon-sy">;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p> </p>
<p>としてすればOKです！</p>
<p>非常に簡単ですね！</p>
<p>&nbsp;</p>
<h2>Google Fontsを選ぶのに便利なサイト</h3>
<p>以下のサイトでは、実際にgoogle fontsを試せて、ダウンロードまでできるサイトです。<br />
フォントの数が多いのでこちらで試しながらフォントを決めるのがオススメです！</p>
<p><a href="http://typecast.com/preview/google" class="link" target="_blank">Typecast &#8211; Public Demo | Design in the browser with web fonts and real content</a></p>
<p>また、googlefontsとは関係ないのですが、<br />
フォント選びということで、便利なサイトを紹介します。</p>
<p>好きな文字/単語を、<br />
自分のパソコンに入っているフォントで一覧で表示してくれるサイトです。<br />
一つ一つPhotoshopで試すのはちょっと面倒ですよね！<br />
意外と役に経ちます。</p>
<p><a href="http://wordmark.it/" class="link" target="_blank">wordmark.it &#8211; helps you choose fonts!</a></p>
<p>&nbsp;<br />
&nbsp;<br />
&nbsp;</p>
<p>google fontsで日本語出してくれないかな〜</p>

Company

Our Solutions

Support

News

Blog

Blogブログ

カテゴリーから探す

年別から見る

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

2014/01/15

2014/01/14

2014/01/08

2014/01/08

2014/01/07

2014/01/07

2013/12/18

2013/12/18

2013/12/18

2013/12/11

2013/12/11

2013/12/11

2013/12/11

2013/12/10

2013/12/10

2013/12/04

2013/12/04

2013/12/04